/* ============================================================
   QUADRO — 3D Device Showcase (CSS 3D, scroll-driven fly-around)
   Ноутбук + телефон с живым UI, камера облетает по скроллу.
   ============================================================ */

.showcase { position: relative; height: 200vh; padding: 0; }
.showcase .pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center; perspective: 1700px; perspective-origin: 50% 42%; }

.showcase .head {
  position: absolute; top: clamp(70px, 11vh, 120px); left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 5; width: min(92vw, 760px); pointer-events: none;
}
.showcase .head .eyebrow { justify-content: center; }
.showcase .head h2 { font-size: clamp(28px, 4vw, 52px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.05; margin: 18px 0 0; text-wrap: balance; }
.showcase .head .cap {
  margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); height: 16px; transition: opacity 0.4s;
}

/* progress rail */
.sc-rail { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 5; }
.sc-rail i { width: 34px; height: 3px; border-radius: 3px; background: var(--border-strong); display: block;
  transition: background 0.4s, box-shadow 0.4s; }
.sc-rail i.on { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* the rig: a centered point; devices orbit it */
.rig { position: relative; width: 0; height: 0; transform-style: preserve-3d;
  will-change: transform; }

/* ---------- shared device screen UI ---------- */
.scr { position: absolute; inset: 0; overflow: hidden; background: var(--bg);
  background-image: radial-gradient(120% 90% at 80% 0%, rgba(94,234,212,0.10), transparent 60%);
  display: flex; flex-direction: column; }
.scr * { box-sizing: border-box; }

/* screen glare overlay */
.glare { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.04) 100%); }

/* mini topbar */
.dv-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); background: rgba(8,9,13,0.7); flex-shrink: 0; }
.dv-top .lg { width: 14px; height: 14px; color: var(--accent); }
.dv-top b { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }
.dv-top .wsearch { display: flex; align-items: center; gap: 6px; margin-left: 10px;
  font-size: 8.5px; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; background: rgba(255,255,255,0.02); }
.dv-top .wsearch svg { width: 10px; height: 10px; }
.dv-top .wsearch em { font-style: normal; font-family: var(--font-mono); font-size: 7px;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.dv-top .ava { width: 18px; height: 18px; border-radius: 50%; margin-left: 10px;
  background: linear-gradient(135deg, var(--iris), var(--accent)); flex-shrink: 0; }
.dv-top .sp { flex: 1; }
.dv-top .pill { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); border: 1px solid rgba(94,234,212,0.3);
  padding: 2px 7px; border-radius: 999px; }

/* ---------- LAPTOP ---------- */
.laptop { position: absolute; left: 0; top: 0; transform-style: preserve-3d;
  transform: translateY(28px); }
.lid { position: absolute; left: 0; top: 0; width: 720px; height: 452px;
  transform: translate(-50%, -100%); transform-origin: bottom center; transform-style: preserve-3d;
  border-radius: 18px; padding: 14px; background: linear-gradient(160deg, #2a2f3a, #11141b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 40px 90px rgba(0,0,0,0.6); }
.lid::after { /* lid back glow rim */ content: ''; position: absolute; inset: 0; border-radius: 18px;
  box-shadow: 0 0 60px rgba(94,234,212,0.12); pointer-events: none; }
.lid .bezel { position: absolute; inset: 14px; border-radius: 8px; overflow: hidden;
  background: #000; box-shadow: inset 0 0 0 2px #05060a; }
.lid .cam { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #05060a; box-shadow: inset 0 0 0 1px #1a1f2a; }
.deck { position: absolute; left: 0; top: 0; width: 720px; height: 470px;
  transform: translate(-50%, 0) rotateX(76deg); transform-origin: top center;
  border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #20242e, #14171f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 30px 50px rgba(0,0,0,0.5); }
.deck .kb { position: absolute; inset: 22px 40px 80px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, #0e1117 0 7.3%, #181c25 7.3% 8.3%),
              repeating-linear-gradient(180deg, #0e1117 0 15%, #181c25 15% 17%);
  background-blend-mode: multiply; opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
.deck .pad { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 210px; height: 46px; border-radius: 7px; background: #1a1e27;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }
.deck .hinge { position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 6px; border-radius: 3px; background: #0a0c11; }
.deck .grille { position: absolute; top: 18px; width: 70px; height: 70px; border-radius: 6px;
  background-image: radial-gradient(circle, #0a0c11 0.8px, transparent 1.1px);
  background-size: 5px 5px; opacity: 0.7; }
.deck .grille.l { left: 60px; } .deck .grille.r { right: 60px; }
.deck .kb { display: flex; flex-direction: column; gap: 4px; padding: 8px;
  inset: 22px 40px 80px; background: none; box-shadow: none; }
.deck .krow { flex: 1; border-radius: 5px;
  background: repeating-linear-gradient(90deg, #14181f 0 6.6%, #0c0f15 6.6% 7.4%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03); }
.deck .krow.fn { flex: 0.6; }

/* laptop dashboard layout */
.lap-ui { display: grid; grid-template-columns: 116px 1fr; flex: 1; min-height: 0; }
.lap-side { border-right: 1px solid var(--border); padding: 12px 10px; background: rgba(8,9,13,0.4);
  display: flex; flex-direction: column; gap: 4px; }
.lap-side a { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-2);
  padding: 7px 8px; border-radius: 7px; }
.lap-side a svg { width: 13px; height: 13px; }
.lap-side a.on { background: rgba(94,234,212,0.12); color: var(--accent); }
.lap-side .grp { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); padding: 8px 8px 4px; }
.lap-side a { position: relative; }
.lap-side a .bdg { margin-left: auto; font-family: var(--font-mono); font-size: 7.5px;
  background: rgba(94,234,212,0.16); color: var(--accent); border-radius: 999px; padding: 1px 6px; }
.lap-main { padding: 14px; overflow: hidden; }
.lap-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 9px; color: var(--text-3); }
.lap-crumb svg { width: 11px; height: 11px; }
.lap-crumb .cur { color: var(--text); }
.lap-crumb .live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; color: var(--accent);
  border: 1px solid rgba(94,234,212,0.3); border-radius: 999px; padding: 2px 7px; }
.lap-crumb .live i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  display: block; animation: pulse 2s infinite; }
.lap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lap-card { border: 1px solid var(--border); border-radius: 9px; padding: 11px; background: rgba(13,15,21,0.6); }
.lap-card .lab { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); }
.lap-card b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; }
.lap-card .up { font-size: 8px; color: var(--emerald); font-family: var(--font-mono); margin-top: 2px; }
.lap-card { position: relative; overflow: hidden; }
.lap-card .spark { position: absolute; right: 8px; bottom: 8px; width: 52px; height: 16px; opacity: 0.7; }
.lap-card .spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lap-grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 12px; }
.lap-feed { border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; background: rgba(13,15,21,0.6); }
.lap-feed .ttl span { font-size: 10px; color: var(--text-2); }
.lap-feed .fr { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.lap-feed .fr .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lap-feed .fr .tx { font-size: 8.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lap-feed .fr .tm { margin-left: auto; font-family: var(--font-mono); font-size: 7px; color: var(--text-3); }
.lap-chart { margin-top: 0; border: 1px solid var(--border); border-radius: 9px; padding: 12px;
  background: rgba(13,15,21,0.6); }
.lap-chart .ttl { display: flex; justify-content: space-between; align-items: center; }
.lap-chart .ttl span { font-size: 10px; color: var(--text-2); }
.lap-chart .ttl em { font-family: var(--font-mono); font-size: 8px; color: var(--accent); font-style: normal; }
.lap-bars { display: flex; align-items: flex-end; gap: 6px; height: 86px; margin-top: 12px; }
.lap-bars i { flex: 1; border-radius: 3px 3px 0 0; display: block;
  background: linear-gradient(180deg, var(--accent), rgba(94,234,212,0.15));
  transform-origin: bottom; animation: barGrow 2.4s var(--ease) infinite alternate; }
@keyframes barGrow { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
.lap-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.lap-foot .ag { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 8px; background: rgba(13,15,21,0.5); }
.lap-foot .ag .dot { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; }
.lap-foot .ag span { font-size: 8.5px; color: var(--text-2); }
.lap-foot .ag .st { margin-left: auto; font-size: 8px; color: var(--emerald); font-style: normal;
  animation: pulse 2.4s infinite; }

/* ---------- PHONE ---------- */
.phone { position: absolute; left: 0; top: 0; transform-style: preserve-3d;
  transform: translate(450px, -50%) translateZ(30px) rotateY(-24deg) rotateX(2deg);
  will-change: transform; }
.phone .body { position: relative; width: 268px; height: 560px; border-radius: 42px; padding: 11px;
  background: linear-gradient(160deg, #2a2f3a, #0f1219);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.08), 0 50px 100px rgba(0,0,0,0.65),
              0 0 80px rgba(124,140,255,0.12); }
.phone .glass { position: absolute; inset: 11px; border-radius: 32px; overflow: hidden; background: #000; }
.phone .notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 999px; background: #05060a; z-index: 6; }
.phone .btn-side { position: absolute; width: 3px; border-radius: 2px; background: #2a2f3a;
  box-shadow: -1px 0 2px rgba(0,0,0,0.6); }
.phone .btn-side.vol { left: -3px; top: 130px; height: 64px; }
.phone .btn-side.pw { right: -3px; top: 150px; height: 90px; }
.phone .ph-status { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px 4px; }
.phone .ph-status .t { font-size: 11px; font-weight: 600; }
.phone .ph-status .ic { display: inline-flex; gap: 5px; color: var(--text); }
.phone .ph-status .ic svg { width: 12px; height: 12px; }
.ph-home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.4); }
.phone .scr { padding-top: 0; }

.ph-top { padding: 8px 16px 10px; border-bottom: 1px solid var(--border); }
.ph-top .r { display: flex; align-items: center; gap: 10px; }
.ph-top .pav { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--iris));
  box-shadow: 0 0 0 2px rgba(94,234,212,0.2); }
.ph-top h4 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ph-top h4 .onl { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 7px var(--emerald); }
.ph-top .hi { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.04em; margin-top: 2px; }
.ph-chat { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.ph-tool { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 9.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 10px; background: rgba(255,255,255,0.02); }
.ph-tool svg { width: 11px; height: 11px; color: var(--violet); }
.ph-tool .ok { width: 13px; height: 13px; border-radius: 50%; background: rgba(52,211,153,0.16);
  display: grid; place-items: center; }
.ph-tool .ok svg { width: 8px; height: 8px; color: var(--emerald); }
.ph-b { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 11.5px; line-height: 1.45; }
.ph-b.in { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ph-b.out { margin-left: auto; border-bottom-right-radius: 4px; color: #04201c;
  background: linear-gradient(135deg, #5eead4, #34e0c0); font-weight: 500; }
.ph-b .who { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.ph-card { border: 1px solid rgba(94,234,212,0.25); border-radius: 12px; padding: 10px;
  background: rgba(94,234,212,0.06); }
.ph-card .r { display: flex; align-items: center; gap: 7px; }
.ph-card .av { width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--iris)); flex-shrink: 0; }
.ph-card .nm { font-size: 11px; font-weight: 600; }
.ph-card .role2 { font-size: 8px; color: var(--text-3); font-family: var(--font-mono); }
.ph-card .sc { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--emerald); }
.ph-typed { display: inline-flex; gap: 3px; padding: 9px 12px; border-radius: 14px; align-self: flex-start;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.ph-typed i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); display: block;
  animation: typed 1.1s infinite; }
.ph-typed i:nth-child(2) { animation-delay: 0.18s; }
.ph-typed i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typed { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ph-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px 22px; border-top: 1px solid var(--border); }

/* ---------- phone: agent interaction tasks ---------- */
.ph-tasks { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ph-sumtask { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border-radius: 12px;
  background: rgba(94,234,212,0.07); border: 1px solid rgba(94,234,212,0.22); }
.ph-sumtask .qi { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(94,234,212,0.16); color: var(--accent); }
.ph-sumtask .qi svg { width: 12px; height: 12px; }
.ph-sumtask .tx { font-size: 11px; line-height: 1.4; color: var(--text); }
.ph-sumtask .tx b { color: var(--accent); }
.ph-task { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px;
  background: rgba(22,26,36,0.6); border: 1px solid var(--border); position: relative; }
.ph-task.child { margin-left: 16px; }
.ph-task.child::before { content: ''; position: absolute; left: -10px; top: -7px; height: 16px; width: 10px;
  border-left: 1.5px solid var(--border-strong); border-bottom: 1.5px solid var(--border-strong);
  border-bottom-left-radius: 7px; }
.ph-task .ti { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--cc, var(--accent)) 16%, transparent); color: var(--cc, var(--accent)); }
.ph-task .ti svg { width: 13px; height: 13px; }
.ph-task .tb { min-width: 0; flex: 1; }
.ph-task .tb .nm { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ph-task .tb .sub { font-size: 9.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-task .stt { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; }
.ph-task .stt.done { background: rgba(52,211,153,0.16); color: var(--emerald); }
.ph-task .stt.run { background: rgba(94,234,212,0.16); color: var(--accent); }
.ph-task .stt svg { width: 12px; height: 12px; }
.ph-task .stt.run svg { animation: spin 1.5s linear infinite; }
.ph-task .dur2 { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-3); margin-left: 6px; }
.ph-deliver { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px;
  background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.28); }
.ph-deliver .di { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(56,189,248,0.18); color: #38bdf8; }
.ph-deliver .di svg { width: 13px; height: 13px; }
.ph-deliver .tx { font-size: 10.5px; line-height: 1.35; }
.ph-deliver .tx b { color: #7dd3fc; }
.ph-deliver .tx span { color: var(--text-3); font-family: var(--font-mono); font-size: 8px; }
.ph-bar .att { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-2); flex-shrink: 0; }
.ph-bar .att svg { width: 14px; height: 14px; }
.ph-bar .inp { flex: 1; height: 30px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); display: flex; align-items: center; padding: 0 12px;
  font-size: 10px; color: var(--text-3); }
.ph-bar .snd { width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; color: #04201c; flex-shrink: 0; }
.ph-bar .snd svg { width: 14px; height: 14px; }

/* ---------- floating glass cards (depth parallax) ---------- */
.float { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.gcard { position: absolute; border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 12px 14px; background: rgba(16,19,26,0.62); backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); white-space: nowrap; }
.gcard .lab { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); }
.gcard b { font-size: 18px; font-weight: 600; display: block; margin-top: 3px; }
.gcard .ic { display: inline-flex; align-items: center; gap: 7px; }
.gcard .ic svg { width: 14px; height: 14px; color: var(--accent); }

/* hide heavy 3D on small screens -> fallback stack */
.sc-fallback { display: none; }
@media (max-width: 820px) {
  .showcase { height: auto; }
  .showcase .pin { position: relative; height: auto; perspective: none; padding: 90px 0 40px; display: block; }
  .rig, .float { display: none; }
  .showcase .head { position: relative; top: auto; left: auto; right: auto; transform: none; margin: 0 auto 30px; max-width: 100%; }
  .sc-rail { display: none; }
  .sc-fallback { display: grid; gap: 22px; max-width: 360px; margin: 0 auto; padding: 0 20px; }
  .sc-fallback .lid, .sc-fallback .phone { position: relative; transform: none !important; left: auto; top: auto; }
  .sc-fallback .lid { width: 100%; height: auto; aspect-ratio: 16/10; }
  .sc-fallback .phone { width: 240px; margin: 0 auto; }
  .sc-fallback .phone .body { width: 240px; height: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  .lap-bars i { animation: none; transform: scaleY(0.8); }
}