/* ==========================================================================
   Workana Control Center — landing page
   Same tokens as portal/static/css/portal.css: bright, professional, textured.
   Depth comes from layered shadows, translucency and 3D transforms; gradients
   are only used inside masks (edge fades, notches), never as visible fills.
   ========================================================================== */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --page: #f1f4f9;
  --paper: #ffffff;
  --mist: #edf2f9;
  --glass: rgba(255, 255, 255, 0.72);
  --line: #e2e8f0;
  --hair: rgba(14, 27, 46, 0.08);

  --ink: #0e1b2e;
  --ink-2: #33415a;
  --muted: #5f6e86;
  --faint: #94a1b5;

  --blue: #1f6fe5;   --blue-ink: #1450ad;  --blue-soft: #e7f0ff;  --blue-tint: #c9dcfc;
  --coral: #ec6a36;  --coral-ink: #ad4314; --coral-soft: #fff0e8; --coral-tint: #ffd6c2;
  --teal: #0f9f78;   --teal-ink: #0a6e53;  --teal-soft: #e1f6ee;  --teal-tint: #b6e8d6;
  --amber: #e09a00;  --amber-ink: #855a00; --amber-soft: #fff5d8; --amber-tint: #ffe29a;
  --pink: #d9558c;   --pink-ink: #a12d5d;  --pink-soft: #fde9f2;  --pink-tint: #f8c3d8;
  --slate: #56657e;  --slate-ink: #334058; --slate-soft: #eaeef4; --slate-tint: #d2d9e4;

  --shadow-1: 0 1px 2px rgba(14, 27, 46, .05), 0 4px 12px rgba(14, 27, 46, .05);
  --shadow-2: 0 1px 2px rgba(14, 27, 46, .05), 0 16px 40px -14px rgba(14, 27, 46, .22);
  --shadow-3: 0 2px 6px rgba(14, 27, 46, .06), 0 40px 80px -28px rgba(14, 27, 46, .38);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --wrap: 1240px;
  --gutter: 32px;
  --sheet-r: 64px;

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .18 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --dots: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><circle cx='2' cy='2' r='1.4' fill='%230e1b2e' fill-opacity='.13'/></svg>");
  --grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M44 0H0v44' fill='none' stroke='%231f6fe5' stroke-opacity='.10'/></svg>");
}

/* tone helpers — any element with .t-* gets --c / --c-soft / --c-ink */
.t-blue  { --c: var(--blue);  --c-soft: var(--blue-soft);  --c-ink: var(--blue-ink);  --c-tint: var(--blue-tint); }
.t-coral { --c: var(--coral); --c-soft: var(--coral-soft); --c-ink: var(--coral-ink); --c-tint: var(--coral-tint); }
.t-teal  { --c: var(--teal);  --c-soft: var(--teal-soft);  --c-ink: var(--teal-ink);  --c-tint: var(--teal-tint); }
.t-amber { --c: var(--amber); --c-soft: var(--amber-soft); --c-ink: var(--amber-ink); --c-tint: var(--amber-tint); }
.t-pink  { --c: var(--pink);  --c-soft: var(--pink-soft);  --c-ink: var(--pink-ink);  --c-tint: var(--pink-tint); }
.t-slate { --c: var(--slate); --c-soft: var(--slate-soft); --c-ink: var(--slate-ink); --c-tint: var(--slate-tint); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The tilted hero scene pokes past the edge on phones; clip (unlike hidden)
   also stops the page from being panned sideways, and keeps position: sticky. */
html, body { overflow-x: clip; }
body::before {               /* paper grain over everything */
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: var(--noise); opacity: .12; mix-blend-mode: multiply;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.025em; line-height: 1.08; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .86em; background: var(--mist); padding: 2px 7px; border-radius: 7px; color: var(--blue-ink); }
.muted { color: var(--muted); }
[data-lucide], .lucide { width: 1em; height: 1em; stroke-width: 2; flex: none; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.accent {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; color: var(--blue); position: relative; white-space: nowrap;
  padding-right: .06em;
}

/* ---------- buttons ---------- */
.btn {
  --bh: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); padding: 0 22px; border-radius: 999px; border: 0;
  font: 700 16px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--spring), box-shadow .3s var(--ease), background-color .2s;
}
.btn .lucide { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .lucide { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { --bh: 60px; padding: 0 30px; font-size: 18px; }
.btn-sm { --bh: 40px; padding: 0 16px; font-size: 15px; }
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(31,111,229,.65), 0 2px 4px rgba(20,80,173,.25);
}
.btn-primary:hover { background: #1a63d0; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 18px 34px -10px rgba(31,111,229,.7), 0 2px 4px rgba(20,80,173,.25); }
.btn-soft { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1); }
.btn-soft:hover { box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(14,27,46,.05); transform: none; }
.win-logo { width: 20px; height: 20px; fill: currentColor; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.skip-link {
  position: fixed; z-index: 60; left: 16px; top: -80px; padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }
.nav {
  position: fixed; z-index: 50; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(1280px, 100% - 32px); height: 84px;
  background: var(--glass); border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px var(--hair), 0 10px 30px -14px rgba(14,27,46,.18);
  transition: height .4s var(--ease), top .4s var(--ease), box-shadow .4s, background-color .3s, border-radius .3s;
}
.nav.scrolled { top: 10px; height: 74px; background: rgba(255,255,255,.86); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px var(--hair), 0 18px 40px -16px rgba(14,27,46,.28); }
.nav-bar { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 13px 0 24px; }
.nav a:focus-visible, .nav button:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 2px; }

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18.5px; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; }
.brand b { font-weight: 800; }
.brand-cube { width: 42px; height: 42px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(31,111,229,.35)); transition: transform .5s var(--spring); }
.brand:hover .brand-cube { transform: rotate(-8deg) scale(1.06); }

/* section links sit on a recessed track; a white pill slides under the section in view */
.nav-links {
  position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 999px; margin-inline: auto;
  background: rgba(14,27,46,.045); box-shadow: inset 0 0 0 1px var(--hair);
}
.nav-links a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 46px; padding: 0 16px;
  border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.nav-links a[aria-current] { color: var(--blue-ink); background: none; }
.nav-links a b { font-weight: inherit; }
.nav-links a .lucide, .nav-links a small { display: none; }
.nav-drop-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px 0 18px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 15.5px/1 var(--font); color: var(--ink-2); white-space: nowrap; transition: color .25s, background-color .25s;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.55); }
.nav-drop-btn[aria-current] { color: var(--blue-ink); background: none; }
.nav-drop-btn .lucide { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.nav-drop-btn[aria-expanded="true"] .lucide { transform: rotate(180deg); }

/* Product menu: four section cards with a one-line description each */
.nav-drop {
  position: absolute; top: calc(100% + 20px); left: -6px; width: 560px; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  border-radius: 28px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 20% 0;
  transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; } /* hover bridge */
.nav-drop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s; }
.nav-drop a, .nav.open .nav-links > a {
  display: flex; align-items: flex-start; gap: 14px; height: auto; padding: 14px; border-radius: 20px;
  white-space: normal; color: var(--ink); background: none;
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--page); }
.nav-drop a[aria-current] { background: var(--blue-soft); }
.nav-drop a b, .nav.open .nav-links > a b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.nav-drop a small, .nav.open .nav-links > a small { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.nav-drop a .lucide, .nav.open .nav-links > a .lucide {
  display: block; flex-shrink: 0; width: 42px; height: 42px; padding: 10px; border-radius: 14px;
  color: var(--c); background: var(--c-soft);
}
.nav-drop a.nav-drop-foot {
  grid-column: 1 / -1; align-items: center; gap: 10px; margin-top: 6px; padding: 14px 16px;
  border-radius: 18px; background: var(--teal-soft); color: var(--teal-ink); font-size: 15px; font-weight: 700;
}
.nav-drop a.nav-drop-foot:hover { background: var(--teal-tint); }
.nav-drop a.nav-drop-foot .lucide { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; color: inherit; }
.nav-drop a.nav-drop-foot .lucide:last-child { margin-left: auto; transition: transform .3s var(--ease); }
.nav-drop a.nav-drop-foot:hover .lucide:last-child { transform: translateX(4px); }
.nav-ind {
  position: absolute; top: 5px; left: 0; height: 46px; width: var(--w, 0); transform: translateX(var(--x, 0));
  border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
  opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.nav-links.has-active .nav-ind { opacity: 1; }

.nav-live {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; color: var(--teal-ink); background: var(--teal-soft); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(15,159,120,.18); transition: background-color .2s, box-shadow .2s;
}
.nav-live:hover { background: var(--teal-tint); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); position: relative; flex-shrink: 0; }
.live-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--teal); animation: ping 1.8s var(--ease) infinite; }

.nav-cta { display: flex; align-items: center; gap: 4px; }
.nav-cta .btn { --bh: 56px; font-size: 16px; padding: 0 22px; }
.nav-cta .btn-ghost { padding: 0 16px; gap: 8px; }
.nav-cta .btn-ghost:hover { background: rgba(14,27,46,.05); }
.nav-cta .btn-ghost .lucide { width: 18px; height: 18px; }

.nav-menu {
  display: none; width: 56px; height: 56px; margin-left: auto; border: 0; border-radius: 50%; flex-shrink: 0;
  background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1); color: var(--ink); cursor: pointer; place-items: center;
}
.nav-menu .lucide { width: 24px; height: 24px; }
.nav-menu .i-close, .nav.open .nav-menu .i-open { display: none; }
.nav.open .nav-menu .i-close { display: block; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 49; background: rgba(14,27,46,.32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
body.menu-open { overflow: hidden; }
body.menu-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* ---------- section scaffolding ---------- */
section { position: relative; }
/* Sections stack like sheets of paper: each one slides over the bottom of the
   previous with a rounded top edge, so later sections need a higher z-index. */
.sheet { background: var(--paper); }
.how, .features, .surfaces, .offline, .deploy, .faq {
  margin-top: calc(var(--sheet-r) * -1);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  padding: 130px 0 calc(130px + var(--sheet-r));
  box-shadow: 0 -1px 0 var(--hair), 0 -40px 60px -50px rgba(14,27,46,.35);
}
.features, .offline, .deploy { background-color: var(--page); }
.how { z-index: 1; } .features { z-index: 2; } .surfaces { z-index: 3; } .offline { z-index: 4; padding-bottom: 110px; }
.teams { z-index: 5; } .reliability { z-index: 6; } .deploy { z-index: 7; } .faq { z-index: 8; } .cta { z-index: 9; }

.sec-head { max-width: 760px; margin-bottom: 72px; }
.sec-head.center { text-align: center; margin-inline: auto; }
.sec-head.split { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--paper);
  font-size: 15px; font-weight: 700; color: var(--c-ink); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
}
.eyebrow .lucide { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 6px 14px -4px var(--c); }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); font-weight: 800; margin-bottom: 22px; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--muted); }
h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.card p, .step p, figcaption p, .role p { color: var(--muted); font-size: 17px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: 180px 0 90px; overflow: hidden; }
.hero-texture {
  position: absolute; inset: 0; background-image: var(--dots);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 30%, transparent 75%);
}
.hero::after {               /* one soft colour field — a blurred shape, not a gradient */
  content: ''; position: absolute; width: 620px; height: 620px; right: -120px; top: 40px; border-radius: 50%;
  background: var(--blue-tint); filter: blur(120px); opacity: .55; z-index: 0; pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; }
.pulse-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: var(--paper); font-size: 15px; font-weight: 700; color: var(--teal-ink);
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
}
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); position: relative; }
.pulse-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal); animation: ping 1.8s var(--ease) infinite; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.hero h1 { font-size: clamp(3rem, 6.3vw, 6.1rem); font-weight: 800; line-height: .98; letter-spacing: -0.045em; margin: 28px 0 28px; }
.hero h1 .accent { font-size: 1.08em; }
.scribble { position: absolute; left: -2%; bottom: -.06em; width: 104%; height: .26em; overflow: visible; }
.scribble path { fill: none; stroke: var(--coral); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.in .scribble path { animation: draw 1.2s .7s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero .lead { max-width: 600px; font-size: clamp(1.12rem, 1.45vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-actions.center { justify-content: center; }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 36px 0 0; font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof .lucide { width: 20px; height: 20px; color: var(--teal); }

/* 3D scene */
.scene { perspective: 1700px; height: 600px; position: relative; }
.stage {
  --rx: 9deg; --ry: -16deg;
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .9s var(--ease);
}
.layer { position: absolute; transform: translateZ(var(--z)); transform-style: preserve-3d; }

.win {
  left: 6%; top: 56px; width: 560px; height: 470px; border-radius: 26px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px var(--hair), 0 50px 90px -30px rgba(14,27,46,.45), 0 20px 40px -20px rgba(31,111,229,.35);
  overflow: hidden;
}
.win-bar { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(246,248,251,.8); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff6b5f; }
.dots i:nth-child(2) { background: #ffbd2e; } .dots i:nth-child(3) { background: #28c840; }
.url { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 600; color: var(--muted); box-shadow: 0 0 0 1px var(--hair); }
.url .lucide { width: 13px; height: 13px; color: var(--teal); }
.live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--teal-ink); }
.live b { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.win-body { display: grid; grid-template-columns: 64px 1fr; height: calc(100% - 50px); }
.win-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; border-right: 1px solid var(--line); }
.win-side span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); font-size: 19px; }
.win-side span:first-child { background: var(--c); color: #fff; box-shadow: 0 8px 16px -6px var(--c); }
.win-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { padding: 10px 12px; border-radius: 14px; background: var(--page); box-shadow: 0 0 0 1px var(--hair); position: relative; }
.kpi span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.kpi b img { border-radius: 3px; box-shadow: 0 0 0 1px var(--hair); }
.kpi em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--teal-ink); background: var(--teal-soft); padding: 2px 6px; border-radius: 6px; }
.kpi b.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--blue); } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding: 0 2px; border-bottom: 1px dashed var(--line); }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--blue-tint); height: var(--h); transition: height 1s var(--ease); }
.bars i:last-child { background: var(--blue); box-shadow: 0 6px 14px -6px var(--blue); }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
.feed li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 4px 10px -6px rgba(14,27,46,.12);
  animation: feedIn .7s var(--spring);
}
.feed li.fresh { box-shadow: 0 0 0 2px var(--blue-tint), 0 8px 18px -8px rgba(31,111,229,.4); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.feed img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }
.feed b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed small { display: block; font-size: 12px; color: var(--muted); }
.tier { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--tc-soft); color: var(--tc-ink); white-space: nowrap; }
.tier-premium { --tc: var(--teal);  --tc-soft: var(--teal-soft);  --tc-ink: var(--teal-ink); }
.tier-mid     { --tc: var(--blue);  --tc-soft: var(--blue-soft);  --tc-ink: var(--blue-ink); }
.tier-lowmid  { --tc: var(--amber); --tc-soft: var(--amber-soft); --tc-ink: var(--amber-ink); }
.tier-low     { --tc: var(--slate); --tc-soft: var(--slate-soft); --tc-ink: var(--slate-ink); }
.tier-hourly  { --tc: var(--coral); --tc-soft: var(--coral-soft); --tc-ink: var(--coral-ink); }

.brand-ico { display: inline-block; width: 1em; height: 1em; background-color: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; flex: none; }

.f-slack, .f-tg {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px;
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, 0 0 0 1px var(--hair), 0 30px 50px -20px rgba(14,27,46,.4);
}
.f-slack { left: -4%; top: 0; border-radius: 22px; max-width: 330px; animation: floatA 7s ease-in-out infinite; }
.f-slack .brand-ico, .f-tg .brand-ico { font-size: 26px; padding: 0; }
.icon-tile .brand-ico { width: 26px; height: 26px; }
.f-slack small, .f-tg small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.f-slack b, .f-tg b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.f-slack b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.icon-tile { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1); flex: none; }
.f-tg { right: -2%; bottom: 20px; border-radius: 24px 24px 24px 6px; animation: floatB 8s ease-in-out infinite; }
.f-cube { right: 2%; top: -10px; width: 130px; animation: floatC 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(20,80,173,.35)); }
.f-radar { left: -3%; bottom: 30px; width: 150px; height: 150px; border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, 0 0 0 1px var(--hair), 0 30px 50px -20px rgba(14,27,46,.4); padding: 12px; animation: floatB 9s ease-in-out infinite reverse; }
.f-radar circle { fill: none; stroke: var(--teal); stroke-opacity: .28; stroke-width: 1.2; }
.f-radar .sweep { transform-origin: 50px 50px; animation: spin 3.2s linear infinite; }
.f-radar .sweep path { fill: var(--teal); fill-opacity: .18; }
.f-radar .blip { fill: var(--teal); stroke: none; animation: blink 3.2s infinite; }
.f-radar .b2 { animation-delay: -1.1s; fill: var(--coral); } .f-radar .b3 { animation-delay: -2.2s; fill: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatA { 50% { transform: translateZ(var(--z)) translateY(-14px); } }
@keyframes floatB { 50% { transform: translateZ(var(--z)) translateY(12px); } }
@keyframes floatC { 50% { transform: translateZ(var(--z)) translateY(-18px) rotate(6deg); } }
.f-slack, .f-tg, .f-cube, .f-radar { transform: translateZ(var(--z)); }
.f-slack.pop { animation: pop .6s var(--spring), floatA 7s ease-in-out infinite .6s; }
@keyframes pop { 0% { transform: translateZ(var(--z)) scale(.85); opacity: .3; } }

/* stat strip */
.stats {
  position: relative; z-index: 2; margin: 70px 0 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 34px 34px 34px 34px; box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, 0 0 0 1px var(--hair), var(--shadow-2);
}
.stats > div { padding: 28px 32px; position: relative; }
.stats > div + div::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.stats dt { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stats dd { margin: 6px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stats dd span { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stats dd small { font-size: 15px; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   MARQUEE BELT
   ========================================================================== */
.belt { padding: 20px 0 150px; }
.belt-title { text-align: center; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 30px; }
.belt-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.belt-row { display: flex; gap: 18px; width: max-content; animation: marquee 48s linear infinite; }
.belt-track:hover .belt-row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 9px)); } }
.logo {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px 16px 18px;
  border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1);
  font-size: 19px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.logo:nth-child(3n+2) { border-radius: 999px; }
.logo:nth-child(3n) { border-radius: 26px 8px 26px 8px; }
.logo .brand-ico, .logo .win-logo { width: 34px; height: 34px; }
.logo .win-logo { fill: #0078D4; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-bottom: 120px; }
.steps-line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 220px; z-index: 0; overflow: visible; }
.steps-line path { fill: none; stroke: var(--blue-tint); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.step {
  position: relative; z-index: 1; padding: 36px 30px 34px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-2);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-8px) !important; box-shadow: 0 0 0 1px var(--hair), var(--shadow-3); }
.step.s1 { border-radius: 44px 44px 44px 10px; margin-top: 70px; }
.step.s2 { border-radius: 10px 44px 44px 44px; margin-top: 0; }
.step.s3 { border-radius: 44px 10px 44px 44px; margin-top: 90px; }
.step.s4 { border-radius: 44px 44px 10px 44px; margin-top: 20px; }
.step-n { position: absolute; right: 28px; top: 28px; font-family: var(--serif); font-style: italic; font-size: 46px; line-height: 1; color: var(--faint); opacity: .7; }
.step h3 { margin-top: 26px; font-size: 30px; }
.step-ico { width: 92px; height: 92px; display: grid; place-items: center; font-size: 42px; color: #fff; background: var(--c); box-shadow: 0 18px 30px -12px var(--c); position: relative; }
.step-ico::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid rgba(255,255,255,.4); border-radius: inherit; }
.shape-circle { border-radius: 50%; }
.shape-hex { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); box-shadow: none; filter: drop-shadow(0 14px 16px rgba(224,154,0,.4)); }
.shape-hex::after { display: none; }
.shape-diamond { border-radius: 30px; transform: rotate(45deg) scale(.86); }
.shape-diamond .lucide { transform: rotate(-45deg); }
.shape-diamond::after { border-radius: 24px; }
.shape-blob { border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; animation: morph 9s ease-in-out infinite; }
@keyframes morph { 50% { border-radius: 42% 58% 38% 62% / 58% 42% 58% 42%; } }

/* video showcase with inverted-corner notch */
.showcase-media {
  --notch-bg: var(--paper); --nr: 34px;
  position: relative; height: clamp(420px, 52vw, 640px); border-radius: 48px; overflow: hidden;
  box-shadow: var(--shadow-3); background: var(--mist);
}
.showcase-media video { width: 100%; height: 100%; object-fit: cover; }
.vid-toggle {
  position: absolute; right: 26px; top: 26px; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 22px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, var(--shadow-2);
  transition: transform .3s var(--spring);
}
.vid-toggle:hover { transform: scale(1.08); }
.glass-card {
  position: absolute; display: flex; gap: 14px; align-items: center; padding: 18px 22px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-radius: 24px; box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 30px 60px -24px rgba(14,27,46,.45);
}
.glass-card b { font-size: 17px; font-weight: 800; line-height: 1.3; }
.glass-card small { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.g-job { right: 6%; top: 18%; width: 360px; flex-direction: column; align-items: stretch; gap: 10px; border-radius: 28px 28px 28px 8px; animation: floatY 7s ease-in-out infinite; }
.g-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 600; }
.g-meta { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.g-meta img { border-radius: 3px; box-shadow: 0 0 0 1px var(--hair); }
.g-ok { right: 14%; top: 54%; border-radius: 999px; padding: 12px 24px 12px 12px; animation: floatY 7s ease-in-out -3s infinite; }
.ok-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 24px; box-shadow: 0 10px 20px -8px var(--teal); }
@keyframes floatY { 50% { transform: translateY(-12px); } }
.notch-tab {
  position: absolute; left: 0; bottom: 0; max-width: 560px; display: flex; gap: 18px; align-items: center;
  padding: 26px 34px 0 0; background: var(--notch-bg); border-top-right-radius: var(--nr);
  font-size: 19px; line-height: 1.45; color: var(--muted);
}
.notch-tab b { color: var(--ink); }
.notch-tab::before, .notch-tab::after { content: ''; position: absolute; width: var(--nr); height: var(--nr); background: radial-gradient(circle at 100% 0, transparent calc(var(--nr) - .5px), var(--notch-bg) var(--nr)); }
.notch-tab::before { left: 0; bottom: 100%; }
.notch-tab::after { left: 100%; bottom: 0; }
.nt-ico { width: 70px; height: 70px; flex: none; border-radius: 22px; display: grid; place-items: center; font-size: 32px; background: var(--c-soft); color: var(--c); }

/* ==========================================================================
   FEATURES — BENTO
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; align-items: stretch; }
.cell { position: relative; }
.c-analytics { grid-column: span 7; }
.c-notify    { grid-column: span 5; display: grid; place-items: center; }
.c-bids      { grid-column: span 4; }
.c-tasks     { grid-column: span 4; }
.c-forum     { grid-column: span 4; }
.c-keys      { grid-column: span 6; }
.c-bot       { grid-column: span 6; display: flex; align-items: center; }
.shadowed { filter: drop-shadow(0 1px 1px rgba(14,27,46,.06)) drop-shadow(0 22px 30px rgba(14,27,46,.12)); height: 100%; transition: transform .5s var(--spring); }
.cell:hover .shadowed { transform: translateY(-6px); }
.card { position: relative; background: var(--paper); padding: 40px; height: 100%; transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
.card:not(.notch-card):not(.ticket-card):not(.paper-card) { box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); }
.cell:hover .card:not(.notch-card):not(.ticket-card):not(.paper-card) { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--hair), var(--shadow-3); }
.big-ico { flex: none; width: 72px; height: 72px; display: grid; place-items: center; font-size: 34px; border-radius: 22px; background: var(--c-soft); color: var(--c); margin-bottom: 24px; box-shadow: 0 0 0 1px var(--c-tint) inset; }
.big-ico .win-logo { width: 32px; height: 32px; }

/* notched corner card */
.notch-card {
  --bite: 64px; border-radius: 40px; padding: 48px 44px 40px 44px;
  -webkit-mask: radial-gradient(circle var(--bite) at 0 0, transparent 98%, #000 100%);
          mask: radial-gradient(circle var(--bite) at 0 0, transparent 98%, #000 100%);
  display: flex; flex-direction: column; gap: 28px;
}
.notch-card .card-copy { padding-left: 46px; max-width: 560px; }
.notch-ico { position: absolute; left: -8px; top: -8px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; color: #fff; background: var(--c); box-shadow: 0 20px 34px -12px var(--c); transition: transform .5s var(--spring); }
.cell:hover .notch-ico { transform: rotate(-10deg) scale(1.05); }
.heat-wrap { display: grid; grid-template-columns: 1fr; gap: 8px; }
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; }
.heat i { aspect-ratio: 1; border-radius: 5px; background: var(--blue); opacity: var(--o, .1); transition: opacity 1.2s var(--ease); }
.heat-axis { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--faint); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--tc); margin-right: -8px; }

/* circle card */
.circle-card {
  width: min(100%, 440px); aspect-ratio: 1; border-radius: 50% !important; padding: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.circle-card p { max-width: 260px; }
.ring { position: absolute; inset: 22px; border-radius: 50%; border: 1.5px dashed var(--pink-tint); animation: spin 40s linear infinite; }
.ring.r2 { inset: -18px; border: 1px solid rgba(217,85,140,.18); animation: pulseRing 3.4s var(--ease) infinite; }
@keyframes pulseRing { 0% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
.bell-badge { position: relative; width: 104px; height: 104px; border-radius: 34px; display: grid; place-items: center; font-size: 50px; color: #fff; background: var(--c); box-shadow: 0 22px 36px -14px var(--c); margin-bottom: 22px; animation: ring 4s ease-in-out infinite; }
.bell-badge em { position: absolute; right: -10px; top: -10px; min-width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: #fff; font: 800 16px var(--font); box-shadow: 0 0 0 4px var(--paper); }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(3deg); } }

/* paper / dog-ear card */
.paper-card { border-radius: 36px 0 36px 36px; clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 0 100%); }
.paper-card::after { content: ''; position: absolute; right: 0; top: 0; width: 54px; height: 54px; background: var(--coral-tint); border-bottom-left-radius: 16px; box-shadow: -6px 6px 14px -6px rgba(14,27,46,.25); }
.papers { position: relative; height: 170px; margin: -8px 0 26px; perspective: 900px; }
.paper { position: absolute; left: 50%; top: 0; width: 72%; height: 160px; margin-left: -36%; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 12px 24px -10px rgba(14,27,46,.25); transition: transform .6s var(--spring); }
.paper.p3 { transform: rotate(-9deg) translate(-26px, 10px); background: var(--coral-soft); }
.paper.p2 { transform: rotate(6deg) translate(22px, 4px); background: var(--mist); }
.paper.p1 { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cell:hover .paper.p3 { transform: rotate(-16deg) translate(-56px, 16px); }
.cell:hover .paper.p2 { transform: rotate(12deg) translate(52px, 8px); }
.cell:hover .paper.p1 { transform: translateY(-8px) rotateX(8deg); }
.paper i { height: 8px; border-radius: 4px; background: var(--slate-soft); }
.paper i.short { width: 60%; }
.paper-tag { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--coral-ink); background: var(--coral-soft); padding: 4px 10px; border-radius: 999px; }
.copy-chip { position: absolute; right: -14px; bottom: -14px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--shadow-2); }
.copy-chip .lucide { width: 15px; height: 15px; }

/* folder card */
.folder-card { border-radius: 0 36px 36px 36px; margin-top: 46px; height: calc(100% - 46px); }
.folder-tab {
  position: absolute; left: 0; bottom: 100%; height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 26px;
  background: var(--paper); border-radius: 22px 22px 0 0; font-size: 15px; font-weight: 800; color: var(--teal-ink);
  box-shadow: 0 -1px 0 var(--hair), 1px 0 0 var(--hair), -1px 0 0 var(--hair);
}
.folder-tab .lucide { font-size: 20px; color: var(--teal); }
.folder-tab::after { content: ''; position: absolute; left: 100%; bottom: 0; width: 22px; height: 22px; background: radial-gradient(circle at 100% 0, transparent 21.5px, var(--paper) 22px); }
.kanban { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.kanban .col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--page); min-height: 150px; box-shadow: 0 0 0 1px var(--hair) inset; }
.kanban small { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kchip { height: 34px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 3px 8px -4px rgba(14,27,46,.2); border-left: 4px solid var(--teal); }
.kchip.k1 { border-left-color: var(--coral); } .kchip.k2 { border-left-color: var(--blue); }
.kchip.mover { position: absolute; width: calc((100% - 20px) / 3 - 20px); left: 10px; top: 120px; border-left-color: var(--amber); animation: moveCard 6s var(--ease) infinite; box-shadow: 0 0 0 1px var(--hair), 0 14px 24px -8px rgba(14,27,46,.35); }
@keyframes moveCard {
  0%, 12% { transform: translate(0, 0) rotate(0); }
  30%, 45% { transform: translate(calc(100% + 30px), -42px) rotate(-3deg); }
  62%, 80% { transform: translate(calc(200% + 60px), -2px) rotate(0); }
  100% { transform: translate(0, 0); }
}

/* speech bubble card */
.bubble-card { border-radius: 40px 40px 40px 40px; margin-bottom: 34px; height: calc(100% - 34px); }
.bubble-card::after { content: ''; position: absolute; left: 56px; top: 100%; width: 46px; height: 34px; background: var(--paper); clip-path: polygon(0 0, 100% 0, 8% 100%); filter: drop-shadow(0 1px 0 var(--hair)); }
.chat { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; align-items: flex-end; gap: 8px; }
.msg.me { justify-content: flex-end; }
.msg p { padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--page); font-size: 14.5px !important; color: var(--ink-2) !important; font-weight: 600; }
.msg.me p { border-radius: 18px 18px 4px 18px; background: var(--pink-soft); color: var(--pink-ink) !important; }
.av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c); }
.reacts { display: flex; gap: 6px; padding-left: 40px; }
.reacts span { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }

/* ticket card */
.ticket-card {
  --hole: 22px; display: grid; grid-template-columns: 1fr 190px; padding: 0; border-radius: 32px;
  -webkit-mask: radial-gradient(circle var(--hole) at calc(100% - 190px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--hole) at calc(100% - 190px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--hole) at calc(100% - 190px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--hole) at calc(100% - 190px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket-main { padding: 40px; display: flex; gap: 22px; align-items: flex-start; }
.ticket-main .big-ico { margin: 0; }
.ticket-stub { border-left: 2px dashed var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; background: var(--amber-soft); }
.ticket-stub small { font-size: 12.5px; font-weight: 800; color: var(--amber-ink); text-transform: uppercase; letter-spacing: .08em; }
.area { font-size: 15px; font-weight: 800; padding: 8px 14px; border-radius: 12px; background: var(--paper); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-tint) inset; display: flex; align-items: center; gap: 8px; }
.area::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* pill card */
.pill-card { width: 100%; height: auto; border-radius: 999px; padding: 26px 30px 26px 26px; display: flex; align-items: center; gap: 24px; }
.orb { width: 110px; height: 110px; flex: none; border-radius: 50%; background: var(--teal-soft); display: grid; place-items: center; position: relative; }
.orb::before, .orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; animation: orbPulse 2.6s var(--ease) infinite; }
.orb::after { animation-delay: 1.3s; }
@keyframes orbPulse { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.1); opacity: 0; } }
.orb span { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 8px rgba(15,159,120,.18), 0 14px 24px -6px var(--teal); }
.pill-copy { flex: 1; min-width: 0; }
.pill-copy h3 { margin-bottom: 6px; }
.pill-ctrls { display: flex; gap: 8px; }
.ctrl { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--page); color: var(--ink-2); box-shadow: 0 0 0 1px var(--hair); }
.ctrl.on { background: var(--teal); color: #fff; box-shadow: 0 10px 18px -8px var(--teal); }

/* ==========================================================================
   SURFACES — 3D DEVICES
   ========================================================================== */
.devices { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 34px; align-items: start; }
.device { margin: 0; }
.d-desk { margin-top: 70px; }
.d-ext { margin-top: 20px; }
.tilt { perspective: 1200px; height: 330px; position: relative; display: grid; place-items: center; margin-bottom: 36px; }
.mock {
  background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 40px 70px -30px rgba(14,27,46,.45);
  transform: rotateX(14deg) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 2deg)); transition: transform .8s var(--ease); overflow: hidden;
}
.device:hover .mock { transform: rotateX(0) rotateY(0) rotateZ(0) translateY(-6px); }
.browser { width: 100%; height: 280px; border-radius: 22px; }
.d-web .mock { --ry: 16deg; --rz: -2deg; }
.m-bar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--page); border-bottom: 1px solid var(--line); }
.m-url { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--paper); padding: 4px 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hair); }
.web-body { display: grid; grid-template-columns: 56px 1fr; height: calc(100% - 40px); }
.m-side { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 14px 0; border-right: 1px solid var(--line); }
.m-side i { width: 28px; height: 28px; border-radius: 9px; background: var(--slate-soft); }
.m-side i:nth-child(1) { background: var(--blue); } .m-side i:nth-child(4) { background: var(--teal-soft); }
.m-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.m-cols div { background: var(--page); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.m-cols b { height: 36px; border-radius: 9px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); border-left: 3px solid var(--blue); }
.m-cols div:nth-child(2) b { border-left-color: var(--coral); } .m-cols div:nth-child(3) b { border-left-color: var(--teal); }

.appwin { width: 100%; height: 270px; border-radius: 14px; }
.d-desk .mock { --ry: -12deg; --rz: 1deg; }
.win-title { background: var(--paper); justify-content: space-between; }
.app-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.app-name svg { width: 20px; height: 20px; }
.sync-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--teal-ink); background: var(--teal-soft); padding: 4px 10px; border-radius: 999px; }
.win-ctrls { display: flex; gap: 14px; }
.win-ctrls i { width: 11px; height: 2px; background: var(--muted); }
.win-ctrls i:nth-child(2) { height: 10px; background: none; border: 1.5px solid var(--muted); }
.win-ctrls i:nth-child(3) { height: 12px; width: 12px; background: none; position: relative; }
.win-ctrls i:nth-child(3)::before, .win-ctrls i:nth-child(3)::after { content: ''; position: absolute; left: 5px; top: -1px; width: 1.6px; height: 14px; background: var(--muted); transform: rotate(45deg); }
.win-ctrls i:nth-child(3)::after { transform: rotate(-45deg); }
.desk-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--page); height: calc(100% - 40px); }
.d-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); }
.d-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--c-soft); box-shadow: 0 0 0 2px var(--c) inset; }
.d-row b { flex: 1; height: 9px; border-radius: 5px; background: var(--slate-soft); }
.d-row em { width: 50px; height: 9px; border-radius: 5px; background: var(--c-tint); }
.toast-win { position: absolute; right: -14px; bottom: 6px; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--hair), var(--shadow-3); transform: translateZ(60px); animation: floatY 6s ease-in-out infinite; }
.toast-win > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 20px; }
.toast-win b { font-size: 14px; display: block; } .toast-win small { font-size: 12px; color: var(--muted); font-weight: 600; }

.popup { width: min(100%, 250px); height: 320px; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.d-ext .mock { --ry: -18deg; --rz: -3deg; }
.pop-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pop-logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--amber); color: #fff; font-size: 19px; }
.pop-src { display: flex; gap: 6px; }
.pop-src span { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); }
.pop-item { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 6px 10px; padding: 12px; border-radius: 14px; background: var(--page); }
.pop-item i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-tint); }
.pop-item:nth-child(4) i { background: var(--coral-tint); }
.pop-item b { height: 9px; border-radius: 5px; background: var(--slate-tint); }
.pop-item em { width: 55%; height: 8px; border-radius: 5px; background: var(--amber-tint); }
figcaption { padding: 0 6px; }
figcaption h3 { font-size: 28px; }

/* ==========================================================================
   OFFLINE
   ========================================================================== */
.offline-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.arch-wrap { position: relative; }
.arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 48px 48px; overflow: hidden; box-shadow: var(--shadow-3); background: var(--mist); border: 10px solid var(--paper); }
.arch video { width: 100%; height: 100%; object-fit: cover; }
.arch-badge { left: -40px; bottom: 60px; transition: background-color .4s; }
.ab-ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--c); color: #fff; box-shadow: 0 10px 18px -8px var(--c); transition: background-color .4s; }
.orbit-dot { position: absolute; right: -16px; top: 22%; width: 74px; height: 74px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 10px var(--page), 0 18px 30px -10px var(--coral); animation: floatY 5s ease-in-out infinite; }
.offline-copy .lead { margin-bottom: 34px; }
.sim { background: var(--paper); border-radius: 30px; padding: 22px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); margin-bottom: 34px; }
.sim-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sim-head > span { font-weight: 800; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sim-head .btn { margin-left: auto; }
.switch { position: relative; width: 196px; height: 50px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--page); box-shadow: 0 0 0 1px var(--hair) inset; display: grid; grid-template-columns: 1fr 1fr; font: 800 15px var(--font); }
.sw-label { position: relative; z-index: 1; display: grid; place-items: center; color: var(--muted); transition: color .3s; }
.knob { position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: 40px; border-radius: 999px; background: var(--teal); box-shadow: 0 8px 16px -6px var(--teal); transition: transform .5s var(--spring), background-color .3s; }
.switch[aria-checked="true"] .sw-label.on, .switch[aria-checked="false"] .sw-label.off { color: #fff; }
.switch[aria-checked="false"] .knob { transform: translateX(100%); background: var(--coral); box-shadow: 0 8px 16px -6px var(--coral); }
.sim-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.sim-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--page); font-size: 15.5px; font-weight: 600; animation: feedIn .6s var(--spring); }
.sim-list li code { margin-left: auto; font-size: 13px; transition: background-color .3s, color .3s; }
.sim-list li .lucide { width: 20px; height: 20px; }
.sim-list li.queued code { background: var(--coral-soft); color: var(--coral-ink); }
.sim-list li.queued .lucide { color: var(--coral); }
.sim-list li.synced code { background: var(--teal-soft); color: var(--teal-ink); }
.sim-list li.synced .lucide { color: var(--teal); }
.sim-list li.replay { animation: replay .7s var(--ease); }
@keyframes replay { 40% { transform: translateX(10px); background: var(--teal-soft); } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.ticks span { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; font-size: 23px; background: var(--c-soft); color: var(--c); }

/* ==========================================================================
   RELIABILITY — angled band with blueprint grid
   ========================================================================== */
.reliability {
  padding: 170px 0 200px; background-color: var(--blue-soft); background-image: var(--grid);
  clip-path: polygon(0 70px, 100% 0, 100% calc(100% - 70px), 0 100%);
  margin: -40px 0 -70px;
}
.rel-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.rel-copy .lead { margin-bottom: 36px; }
.console { background: var(--paper); border-radius: 26px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-3); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 18px; background: var(--page); border-bottom: 1px solid var(--line); font: 500 13px var(--mono); color: var(--muted); }
.console pre { margin: 0; padding: 20px 22px; height: 236px; overflow: hidden; font: 500 13.5px/1.8 var(--mono); color: var(--ink-2); white-space: pre; }
.console pre span { display: block; animation: feedIn .4s var(--ease); }
.console .ok { color: var(--teal-ink); } .console .warn { color: var(--amber-ink); } .console .err { color: var(--coral-ink); } .console .dim { color: var(--faint); }
.console .caret { display: inline-block; width: 8px; height: 17px; background: var(--blue); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.spec {
  background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); transition: transform .5s var(--spring);
}
.spec:hover { transform: translateY(-6px) rotate(-1deg) !important; }
.spec > span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--c); box-shadow: 0 12px 20px -10px var(--c); margin-bottom: 14px; }
.spec b { font-size: clamp(1.7rem, 2.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.spec small { font-size: 16px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.sp-circle { border-radius: 40px 40px 40px 40px; }
.sp-hex { border-radius: 12px 40px 12px 40px; }
.sp-leaf { border-radius: 40px 12px 40px 12px; }
.sp-leaf2 { border-radius: 40px 40px 12px 40px; }
.specs .spec:nth-child(even) { transform: translateY(36px); }
.specs .spec.reveal:not(.in):nth-child(even) { transform: translateY(64px); }

/* ==========================================================================
   TEAMS
   ========================================================================== */
.teams { padding: 210px 0 calc(130px + var(--sheet-r)); }
.teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.collage { position: relative; padding: 0 40px 70px 0; }
.blob { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%; box-shadow: var(--shadow-3); animation: morph2 14s ease-in-out infinite; }
.blob img { width: 100%; height: 100%; object-fit: cover; }
@keyframes morph2 { 50% { border-radius: 44% 56% 58% 42% / 56% 42% 58% 44%; } }
.circle-photo { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 10px solid var(--paper); box-shadow: var(--shadow-3); }
.circle-photo img { width: 100%; height: 100%; object-fit: cover; }
.collage-chip { left: -20px; top: 12%; animation: floatY 6s ease-in-out infinite; }
.collage-chip > span { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; color: #fff; background: var(--c); box-shadow: 0 10px 18px -8px var(--c); }
.roles { display: grid; gap: 16px; margin-top: 40px; }
.role { display: flex; gap: 22px; align-items: flex-start; padding: 24px 28px; border-radius: 28px; background: var(--page); box-shadow: 0 0 0 1px var(--hair); transition: background-color .3s, box-shadow .3s, transform .45s var(--spring); }
.role:hover { background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); transform: translateX(8px) !important; }
.role:nth-child(2) { border-radius: 70px 28px 28px 70px; padding-left: 24px; }
.role-ico { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--c); color: #fff; box-shadow: 0 12px 20px -10px var(--c); }
.role h3 { font-size: 22px; margin: 4px 0 4px; }

/* ==========================================================================
   DEPLOY
   ========================================================================== */
.deploy-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }
.timeline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 6px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: var(--blue-tint); }
.timeline li { display: flex; gap: 22px; padding: 14px 0; position: relative; }
.timeline li > span { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--blue); font-size: 22px; font-weight: 800; box-shadow: 0 0 0 2px var(--blue-tint), var(--shadow-1); }
.timeline li:last-child > span { background: var(--blue); color: #fff; box-shadow: 0 12px 20px -8px var(--blue); }
.timeline b { font-size: 20px; display: block; margin: 4px 0 2px; }
.timeline p { color: var(--muted); font-size: 17px; }
.code-wrap { position: relative; padding: 70px 0 0 70px; }
.code { position: relative; z-index: 1; background: var(--paper); border-radius: 30px 30px 30px 8px; box-shadow: 0 0 0 1px var(--hair), var(--shadow-3); overflow: hidden; }
.code-tabs { display: flex; gap: 4px; padding: 10px; background: var(--page); border-bottom: 1px solid var(--line); }
.code-tabs button { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: transparent; font: 700 15px var(--font); color: var(--muted); transition: background-color .2s, color .2s, box-shadow .2s; }
.code-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--hair), var(--shadow-1); }
.code-tabs .copy { margin-left: auto; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; font-size: 19px; border-radius: 50%; }
.code-tabs .copy:hover { background: var(--paper); color: var(--blue); }
.code-pane { margin: 0; padding: 26px 30px 30px; font: 500 15.5px/1.85 var(--mono); color: var(--ink); overflow-x: auto; min-height: 330px; }
.code-pane .c { color: var(--faint); }
.code-photo { position: absolute; left: 0; top: 0; width: 42%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; box-shadow: var(--shadow-3); border: 8px solid var(--paper); transform: rotate(-5deg); z-index: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq .sec-head { position: sticky; top: 120px; margin: 0; }
.qa { display: grid; gap: 14px; }
.qa details { border-radius: 26px; background: var(--page); box-shadow: 0 0 0 1px var(--hair); transition: background-color .3s, box-shadow .3s; }
.qa details[open] { background: var(--paper); box-shadow: 0 0 0 1px var(--hair), var(--shadow-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 28px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .lucide { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); transition: transform .4s var(--spring), background-color .3s, color .3s; }
.qa details[open] summary .lucide { transform: rotate(45deg); background: var(--blue); color: #fff; box-shadow: none; }
.qa details p { padding: 0 28px 28px; color: var(--muted); font-size: 18px; max-width: 680px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { padding: 0 0 120px; background: var(--paper); }
.cta-stage { position: relative; min-height: 600px; border-radius: 56px; overflow: hidden; display: grid; place-items: center; padding: 60px 24px; box-shadow: var(--shadow-3); background: var(--mist); }
.cta-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-panel {
  position: relative; max-width: 780px; text-align: center; padding: 64px 56px 56px; border-radius: 44px;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 40px 80px -30px rgba(14,27,46,.5);
}
.cta-panel h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.cta-panel .hero-actions { margin-top: 34px; }
.cta-ico { position: absolute; left: 50%; top: -58px; width: 116px; height: 116px; margin-left: -58px; border-radius: 36px; background: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-3); }
.cta-ico svg { width: 76px; animation: floatC2 6s ease-in-out infinite; }
@keyframes floatC2 { 50% { transform: translateY(-6px) rotate(8deg); } }
.cta-panel { margin-top: 40px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--paper); padding: 30px 0 0; overflow: hidden; position: relative; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 50px 0 40px; border-top: 1px solid var(--line); }
.foot-grid p { margin-top: 16px; max-width: 360px; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.foot nav a { font-weight: 600; color: var(--ink-2); transition: color .2s; }
.foot nav a:hover { color: var(--blue); }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 15px; padding-bottom: 20px; }
.wordmark { font-size: clamp(4rem, 15vw, 15rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--blue-tint); margin-bottom: -.2em; user-select: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
  .nav-bar { gap: 10px; padding-left: 20px; }
  .nav-cta .btn-ghost .lucide { display: none; }
  .nav-live { padding: 0 14px; }
}
@media (max-width: 1180px) {
  .scene { transform: scale(.86); transform-origin: 30% 50%; }
}
@media (max-width: 1100px) {
  /* menu button opens a panel: every section as a card, then the live dashboards and both actions */
  .nav-links, .nav-live, .nav-cta { display: none; }
  .nav-menu { display: grid; }
  .nav.open {
    height: auto; max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 32px; background: rgba(255,255,255,.97);
  }
  .nav.open .nav-bar { height: auto; flex-wrap: wrap; row-gap: 10px; padding: 14px 14px 18px 22px; }
  .nav.open .nav-links {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; order: 3; width: 100%; margin-top: 8px;
    padding: 0; background: none; box-shadow: none; animation: panelIn .35s var(--ease) both;
  }
  .nav.open .nav-ind, .nav.open .nav-drop-btn, .nav.open .nav-drop-foot { display: none; }
  .nav.open .nav-drop { display: contents; visibility: visible; }
  .nav.open .nav-links a { background: var(--page); }
  .nav.open .nav-links a[aria-current] { background: var(--blue-soft); }
  .nav.open .nav-live { display: flex; order: 4; width: 100%; height: 54px; justify-content: center; animation: panelIn .35s .05s var(--ease) both; }
  .nav.open .nav-cta { display: flex; order: 5; width: 100%; gap: 8px; animation: panelIn .35s .08s var(--ease) both; }
  .nav.open .nav-cta .btn { flex: 1; }
  .nav.open .nav-cta .btn-ghost { box-shadow: 0 0 0 1px var(--hair); }
  .nav.open .nav-cta .btn-ghost .lucide { display: block; }
}
@media (max-width: 1024px) {
  :root { --sheet-r: 44px; }
  .hero-grid { grid-template-columns: 1fr; }
  .scene { height: 560px; transform: none; max-width: 700px; width: 100%; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div:nth-child(3)::before { display: none; }
  .sec-head.split { grid-template-columns: 1fr; gap: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps-line { display: none; }
  .step.s1, .step.s2, .step.s3, .step.s4 { margin-top: 0; }
  .c-analytics, .c-notify { grid-column: span 12; }
  .c-bids, .c-tasks, .c-forum { grid-column: span 6; }
  .c-forum { grid-column: span 12; }
  .c-keys, .c-bot { grid-column: span 12; }
  .devices { grid-template-columns: 1fr 1fr; }
  .d-desk { margin-top: 0; }
  .d-ext { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
  .offline-grid, .rel-grid, .teams-grid, .deploy-grid, .faq-grid { grid-template-columns: 1fr; gap: 60px; }
  .arch-wrap { max-width: 520px; margin: 0 auto; }
  .faq .sec-head { position: static; }
  .collage { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --sheet-r: 34px; }
  body { font-size: 17px; }
  .nav, .nav.scrolled:not(.open) { top: 10px; height: 72px; width: calc(100% - 20px); }
  .nav-bar { padding-left: 18px; }
  .brand span { font-size: 16.5px; }
  .brand-cube { width: 38px; height: 38px; }
  .nav-menu { width: 50px; height: 50px; }
  .nav.open .nav-bar { padding: 11px 11px 14px 18px; }
  .nav.open .nav-links { grid-template-columns: 1fr; }
  .nav.open .nav-cta { flex-direction: column; }
  .nav.open .nav-cta .btn { width: 100%; flex: none; }
  .hero { padding: 130px 0 60px; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .btn-lg { --bh: 56px; padding: 0 24px; font-size: 17px; width: 100%; }
  .scene { height: 470px; }
  .win { left: 0; width: 100%; top: 70px; height: 400px; }
  .stage { --rx: 6deg; --ry: -6deg; }
  .f-radar, .f-cube { display: none; }
  .f-slack { left: 4%; top: 0; max-width: 92%; }
  .f-tg { right: 0; bottom: -10px; }
  .kpi b { font-size: 19px; }
  .kpi em { display: none; }
  .sim-list li code { white-space: nowrap; font-size: 11.5px; }
  .feed li:nth-child(n+4) { display: none; }
  .stats { grid-template-columns: 1fr 1fr; border-radius: 28px; }
  .stats > div { padding: 22px 20px; }
  .stats > div::before { display: none; }
  .stats dd small { font-size: 13px; }
  .how, .features, .surfaces, .offline, .deploy, .faq, .teams { padding-top: 90px; padding-bottom: calc(90px + var(--sheet-r)); }
  .teams { padding-top: 130px; }
  .console pre { white-space: pre-wrap; font-size: 12.5px; height: 260px; }
  .belt { padding-bottom: 100px; }
  .sec-head { margin-bottom: 48px; }
  .steps { grid-template-columns: 1fr; margin-bottom: 70px; }
  .showcase-media { height: 560px; border-radius: 34px; --nr: 26px; }
  .g-job { left: 16px; right: 16px; top: 90px; width: auto; }
  .g-ok { right: 16px; top: 270px; }
  .notch-tab { font-size: 16px; max-width: calc(100% - 30px); padding: 20px 20px 0 0; }
  .nt-ico { width: 56px; height: 56px; font-size: 26px; border-radius: 18px; }
  .bento { gap: 20px; }
  .c-bids, .c-tasks { grid-column: span 12; }
  .card { padding: 30px 26px; }
  .notch-card { --bite: 54px; padding: 40px 24px 30px; }
  .notch-card .card-copy { padding-left: 34px; }
  .notch-ico { width: 88px; height: 88px; font-size: 38px; }
  .heat { gap: 2px; } .heat i { border-radius: 3px; }
  .ticket-card { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ticket-main { flex-direction: column; padding: 30px 26px; }
  .ticket-stub { border-left: 0; border-top: 2px dashed var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; padding: 20px 26px; }
  .ticket-stub small { width: 100%; }
  .pill-card { border-radius: 40px; flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .devices { grid-template-columns: 1fr; }
  .d-ext { grid-column: auto; display: block; }
  .tilt { height: 300px; }
  .reliability { padding: 150px 0 160px; clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .specs { gap: 14px; }
  .specs .spec:nth-child(even), .specs .spec.reveal:not(.in):nth-child(even) { transform: none; }
  .spec { padding: 22px 18px; }
  .spec b { font-size: 1.4rem; }
  .spec small { font-size: 14px; }
  .arch-badge { left: 0; }
  .orbit-dot { right: 0; width: 56px; height: 56px; }
  .switch { width: 170px; }
  .sim-head .btn { margin-left: 0; }
  .sim-list li { font-size: 14.5px; }
  .collage { padding: 0 20px 50px 0; }
  .collage-chip { left: 0; }
  .role { padding: 20px; gap: 16px; }
  .role:nth-child(2) { border-radius: 28px; }
  .role-ico { width: 54px; height: 54px; font-size: 25px; }
  .code-wrap { padding: 50px 0 0 24px; }
  .code-pane { font-size: 13.5px; padding: 20px; min-height: 0; }
  .code-photo { width: 50%; }
  .qa summary { font-size: 18px; padding: 20px; }
  .qa details p { padding: 0 20px 22px; font-size: 16.5px; }
  .cta { padding-bottom: 70px; }
  .cta-stage { border-radius: 34px; padding: 80px 14px 30px; min-height: 0; }
  .cta-panel { padding: 70px 22px 30px; border-radius: 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .belt-row { animation: none; }
}