/* ============================================================
   AppFlight - landing page
   True-black, SF Pro, monochrome with one cool-blue accent.
   Apple-style bento. Sits in the 10x / Bitrig / Superapp set.
   ============================================================ */

:root{
  --bg:        #09090b;
  --bg-2:      #0c0c0f;
  --surface:   #101013;
  --surface-2: #16161a;
  --mat:       #141418;            /* inner visual mat inside bento cards */
  --border:      #232327;
  --border-2:    #2e2e34;
  --text:   #fafafa;
  --muted:  #a7a7b2;               /* a touch brighter for readability */
  --faint:  #71717a;

  --accent:      #51a2ff;
  --accent-soft: #8cc2ff;
  --violet:      #7c6fe8;
  --amber:       #ffb157;
  --go:          #3ddc84;
  --red:         #ff6b6b;
  --glow:        rgba(81,162,255,.22);
  --glow-strong: rgba(81,162,255,.40);

  --cta:      #ffffff;
  --cta-text: #0a0a0b;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --maxw: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:17px; line-height:1.62; letter-spacing:-.011em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
strong{ color:var(--text); font-weight:600; }
::selection{ background:var(--accent); color:#06121f; }

.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── ambient animated backdrop ───────────────────────────── */
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient__aurora{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; mix-blend-mode:screen; }
.ambient__aurora.a1{ width:46vw; height:46vw; left:-8vw; top:-6vw; background:radial-gradient(circle at 50% 50%, rgba(81,162,255,.30), transparent 65%); animation:drift1 26s var(--ease) infinite alternate; }
.ambient__aurora.a2{ width:40vw; height:40vw; right:-10vw; top:18vh; background:radial-gradient(circle at 50% 50%, rgba(124,111,232,.22), transparent 65%); animation:drift2 32s var(--ease) infinite alternate; }
@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(10vw,8vh,0) scale(1.15); } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(1.05); } to{ transform:translate3d(-9vw,-6vh,0) scale(.9); } }
.ambient__grid{
  position:absolute; left:50%; top:38%; width:240vw; height:120vh; transform:translateX(-50%) perspective(70vh) rotateX(74deg); transform-origin:50% 0; opacity:.14;
  background-image:linear-gradient(to right, rgba(81,162,255,.5) 1px, transparent 1px),linear-gradient(to bottom, rgba(81,162,255,.5) 1px, transparent 1px);
  background-size:5vw 5vw; -webkit-mask:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 62%); mask:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 62%); animation:runway 7s linear infinite;
}
@keyframes runway{ from{ background-position:0 0; } to{ background-position:0 5vw; } }
.ambient__stars{ position:absolute; inset:0; opacity:.5; background-image:radial-gradient(1.4px 1.4px at 18% 28%, rgba(255,255,255,.6), transparent),radial-gradient(1.2px 1.2px at 72% 16%, rgba(140,194,255,.7), transparent),radial-gradient(1.3px 1.3px at 42% 64%, rgba(255,255,255,.45), transparent),radial-gradient(1.1px 1.1px at 88% 52%, rgba(255,255,255,.5), transparent),radial-gradient(1.2px 1.2px at 9% 76%, rgba(140,194,255,.55), transparent),radial-gradient(1.3px 1.3px at 60% 84%, rgba(255,255,255,.4), transparent); animation:twinkle 5.5s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:.58; } }

/* ── buttons ─────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-size:.95rem; font-weight:550; letter-spacing:-.01em; padding:.8em 1.4em; border-radius:999px; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); }
.btn--white{ background:var(--cta); color:var(--cta-text); font-weight:600; }
.btn--white:hover{ transform:translateY(-1px); box-shadow:0 10px 34px -12px rgba(255,255,255,.35); }
.btn--ghost{ background:rgba(255,255,255,.045); color:var(--text); border-color:var(--border-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#3a3a42; transform:translateY(-1px); }
.btn--sm{ padding:.55em 1.05em; font-size:.86rem; }
.btn--lg{ padding:.92em 1.6em; font-size:1rem; }
.btn--full{ width:100%; }
.apple{ margin-top:-2px; }

/* ── nav ─────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:100; padding:.85rem 1.25rem; }
.nav__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:1.5rem; padding:.5rem .6rem .5rem 1.1rem; border:1px solid var(--border); border-radius:999px; background:rgba(12,12,15,.72); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); }
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.05rem; letter-spacing:-.02em; }
.brand__mark{ color:var(--accent); display:grid; place-items:center; transform:rotate(-2deg); }
.nav__links{ display:flex; gap:1.5rem; margin:0 auto; font-size:.9rem; color:var(--muted); }
.nav__links a{ transition:color .2s; }
.nav__links a:hover{ color:var(--text); }

/* ── section heads ───────────────────────────────────────── */
main{ position:relative; z-index:1; }
.footer{ position:relative; z-index:1; }
section{ position:relative; }
.sec-head{ max-width:700px; margin:0 auto 3.4rem; text-align:center; padding:0 1.25rem; }
.kicker{ font-size:.84rem; font-weight:550; color:var(--accent); }
.sec-head h2{ font-size:clamp(2.1rem,4.8vw,3.2rem); font-weight:600; line-height:1.06; letter-spacing:-.035em; margin:.7rem 0 .85rem; }
.sec-head p{ color:var(--muted); font-size:1.1rem; line-height:1.55; }

.badge{ display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--muted); border:1px solid var(--border-2); padding:.42rem .7rem .42rem .8rem; border-radius:999px; background:rgba(255,255,255,.02); transition:border-color .2s, color .2s; }
.badge:hover{ border-color:#3a3a42; color:var(--text); }
.badge--center{ background:rgba(81,162,255,.05); border-color:rgba(81,162,255,.25); }
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--go); box-shadow:0 0 9px var(--go); animation:pulse 2.2s var(--ease) infinite; }
.badge__arrow{ color:var(--faint); transition:transform .2s; font-size:1.05em; }
.badge:hover .badge__arrow{ transform:translateX(3px); color:var(--accent); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ════════════════════════════════════════════════════════
   HERO  (no product window; type-led, Apple style)
   ════════════════════════════════════════════════════════ */
.hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(1.75rem,3.5vw,3rem) 1.5rem clamp(2.5rem,4vw,3.5rem); text-align:center; }
.hero__glow{ position:absolute; left:50%; top:-6%; transform:translateX(-50%); width:min(820px,92vw); height:460px; pointer-events:none; z-index:0; background:radial-gradient(50% 50% at 50% 40%, var(--glow-strong), transparent 68%); filter:blur(26px); opacity:.75; }
.hero > *:not(.hero__glow){ position:relative; z-index:2; }
.hero__title{ font-size:clamp(2.9rem,7.4vw,5.4rem); font-weight:600; line-height:1.0; letter-spacing:-.045em; margin:1.5rem auto 1.5rem; max-width:14ch; background:linear-gradient(180deg, #ffffff 38%, #b6b6c0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero__sub{ color:var(--muted); font-size:clamp(1.1rem,2vw,1.32rem); line-height:1.55; max-width:42ch; margin:0 auto; }
.hero__cta{ display:flex; gap:.7rem; justify-content:center; margin:2.2rem 0 1.2rem; flex-wrap:wrap; }
.hero__foot{ font-size:.88rem; color:var(--faint); }

/* ── trust strip ─────────────────────────────────────────── */
.trust{ max-width:var(--maxw); margin:1rem auto 5rem; padding:0 1.5rem; text-align:center; }
.trust__label{ font-size:.82rem; color:var(--faint); }
.trust__row{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem 2.4rem; margin-top:1.1rem; }
.trust__row li{ font-size:1.06rem; font-weight:550; color:var(--muted); opacity:.7; transition:opacity .2s, color .2s; }
.trust__row li:hover{ opacity:1; color:var(--text); }

/* ════════════════════════════════════════════════════════
   BENTO
   ════════════════════════════════════════════════════════ */
.bento-sec{ max-width:var(--maxw); margin:0 auto; padding:1rem 1.5rem 5.5rem; }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }

.bcard{ grid-column:span 2; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:20px; background:var(--surface); overflow:hidden; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.bcard:hover{ border-color:var(--border-2); transform:translateY(-3px); }
.bcard--pipeline{ grid-column:span 2; grid-row:span 2; }
.bcard--wide{ grid-column:span 6; flex-direction:row; align-items:stretch; }

.bcard__visual{ position:relative; flex:1; min-height:160px; display:grid; place-items:center; padding:1.25rem; background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.025), transparent 60%); border-bottom:1px solid var(--border); }
.bcard__visual--pad{ place-items:stretch; }
.b-glow-blue{ background:radial-gradient(110% 110% at 50% 0%, rgba(81,162,255,.14), transparent 62%); }
.b-glow-violet{ background:radial-gradient(110% 110% at 50% 0%, rgba(124,111,232,.16), transparent 62%); }
.b-glow-amber{ background:radial-gradient(110% 110% at 50% 0%, rgba(255,177,87,.13), transparent 62%); }
.b-glow-green{ background:radial-gradient(110% 110% at 50% 0%, rgba(61,220,132,.12), transparent 62%); }
.bcard__text{ padding:1.25rem 1.4rem 1.4rem; }
.bcard__text h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.4rem; }
.bcard__text p{ font-size:.96rem; color:var(--muted); line-height:1.5; }
.bcard--wide .bcard__visual{ border-bottom:none; border-right:1px solid var(--border); flex:1.1; }
.bcard--wide .bcard__text{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:1.8rem 2rem; }
.bcard--wide .bcard__text h3{ font-size:1.4rem; }
.bcard--wide .bcard__text p{ font-size:1.02rem; max-width:34em; }
.bcard__pill{ position:absolute; bottom:.85rem; right:.95rem; display:flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.66rem; color:var(--go); }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--go); box-shadow:0 0 8px var(--go); animation:pulse 1.6s infinite; }

/* pipeline visual */
.autolist{ list-style:none; width:100%; display:flex; flex-direction:column; gap:.15rem; }
.autolist li{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.5rem .2rem .5rem 0; font-size:.92rem; color:var(--faint); }
.autolist li .ad{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--faint); flex:none; position:relative; z-index:2; background:var(--surface); }
.autolist li:not(:last-child)::before{ content:""; position:absolute; left:6px; top:1.4rem; width:1.5px; height:1.1rem; background:var(--border-2); z-index:1; }
.autolist li.done{ color:var(--muted); }
.autolist li.done .ad{ background:var(--go); border-color:var(--go); box-shadow:0 0 8px rgba(61,220,132,.55); }
.autolist li.done:not(:last-child)::before{ background:rgba(61,220,132,.4); }
.autolist li.active{ color:var(--text); }
.autolist li.active .ad{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 11px var(--glow-strong); animation:pulse 1.1s infinite; }

/* ai picker */
.aipick{ width:100%; max-width:230px; display:flex; flex-direction:column; gap:.45rem; }
.aipick__row{ display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border:1px solid var(--border-2); border-radius:11px; background:var(--mat); font-size:.92rem; font-weight:550; }
.aipick__row.on{ border-color:rgba(81,162,255,.5); background:rgba(81,162,255,.08); }
.aipick__logo{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; flex:none; }
.aipick__logo svg{ width:15px; height:15px; }
.l-claude{ background:#d97757; color:#ffffff; }   /* white Claude sunburst on brand orange */
.l-codex{ background:#0a0a0a; color:#ffffff; }     /* white OpenAI mark on black */
.aipick__chk{ margin-left:auto; color:var(--accent); font-weight:700; }
.aipick__note{ font-family:var(--mono); font-size:.66rem; color:var(--faint); padding-left:.2rem; }

/* mini phone */
.mini-phone{ width:118px; aspect-ratio:9/19; border-radius:24px; padding:6px; background:#000; border:1px solid #26262c; box-shadow:0 18px 40px -20px #000; position:relative; }
.mini-phone__island{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34px; height:11px; background:#000; border-radius:999px; z-index:3; }
.mini-phone__scr{ width:100%; height:100%; border-radius:19px; overflow:hidden; background:linear-gradient(180deg,#0e0f13,#070809); padding:20px 9px 7px; display:flex; flex-direction:column; }
.mini-phone__scr--frame{ padding:0; background:linear-gradient(165deg, rgba(124,111,232,.6), rgba(81,162,255,.35) 52%, #0a0a14 100%); box-shadow:inset 0 0 30px rgba(0,0,0,.35); }
.mp-title{ font-size:13px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px; }
.mp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mp-grid i{ aspect-ratio:1.25; border-radius:7px; display:block; }
.mp-grid .g1{ background:linear-gradient(135deg,#ff9a6b,#c8560b); } .mp-grid .g2{ background:linear-gradient(135deg,#7ee2c8,#1f9e7e); }
.mp-grid .g3{ background:linear-gradient(135deg,#8cc2ff,#3a6ea5); } .mp-grid .g4{ background:linear-gradient(135deg,#ffd56b,#c89a0b); }
.mp-tab{ margin-top:auto; display:flex; justify-content:space-around; padding-top:7px; border-top:1px solid rgba(255,255,255,.07); }
.mp-tab b{ width:13px; height:4px; border-radius:2px; background:var(--border-2); } .mp-tab b:first-child{ background:var(--accent); }

/* review / rejection timeline */
.review{ width:100%; max-width:240px; display:flex; flex-direction:column; gap:.5rem; }
.review__row{ position:relative; padding:.55rem .8rem .55rem 1.9rem; border-radius:10px; font-size:.86rem; font-weight:550; border:1px solid var(--border-2); background:var(--mat); color:var(--muted); }
.review__row::before{ content:""; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; }
.r-sub::before{ background:var(--faint); }
.r-rej{ color:#ffb3b3; border-color:rgba(255,107,107,.35); } .r-rej::before{ background:var(--red); box-shadow:0 0 8px rgba(255,107,107,.6); }
.r-fix{ color:var(--accent-soft); border-color:rgba(81,162,255,.3); } .r-fix::before{ background:var(--accent); box-shadow:0 0 8px var(--glow-strong); }
.r-ok{ color:#a9f0c8; border-color:rgba(61,220,132,.35); } .r-ok::before{ background:var(--go); box-shadow:0 0 8px rgba(61,220,132,.6); }

/* git */
.git{ width:100%; max-width:340px; font-size:.9rem; }
.git__head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:.7rem; margin-bottom:.6rem; border-bottom:1px solid var(--border); }
.git__branch{ font-family:var(--mono); font-size:.82rem; color:var(--text); }
.git__ok{ font-family:var(--mono); font-size:.72rem; color:var(--go); }
.git__row{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; color:var(--muted); font-size:.88rem; }
.git__plus{ width:18px; height:18px; border-radius:5px; background:rgba(61,220,132,.14); color:var(--go); display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none; }
.git__dot{ width:8px; height:8px; border-radius:50%; background:var(--violet); flex:none; margin:0 5px; }

/* doctor */
.doctor{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:.45rem; }
.doc__row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border:1px solid var(--border-2); border-radius:10px; background:var(--mat); font-size:.88rem; color:var(--muted); }
.doc__b{ width:8px; height:8px; border-radius:50%; flex:none; }
.doc__row.ok .doc__b{ background:var(--go); box-shadow:0 0 7px rgba(61,220,132,.5); }
.doc__row.warn .doc__b{ background:var(--amber); box-shadow:0 0 7px rgba(255,177,87,.5); }
.doc__row.warn{ color:#ffd9a8; }
.doc__fix{ margin-left:auto; font-family:var(--mono); font-size:.68rem; color:var(--cta-text); background:var(--amber); padding:.12rem .5rem; border-radius:999px; }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bcard, .bcard--pipeline{ grid-column:span 1; grid-row:auto; }
  .bcard--wide{ grid-column:span 2; flex-direction:column; }
  .bcard--wide .bcard__visual{ border-right:none; border-bottom:1px solid var(--border); }
}
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } .bcard, .bcard--wide{ grid-column:span 1; } }

/* ════════════════════════════════════════════════════════
   GO BEYOND THE APP
   ════════════════════════════════════════════════════════ */
.beyond{ max-width:var(--maxw); margin:0 auto; padding:1rem 1.5rem 5.5rem; }
.beyond__wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:2.5rem; align-items:center; }
.beyond__visual{ display:grid; place-items:center; }
.lockphone{ position:relative; width:240px; aspect-ratio:9/19.5; border-radius:42px; padding:14px; background:linear-gradient(160deg,#1a1830,#0a0a14); border:1px solid #2a2a36; box-shadow:0 40px 90px -40px #000, 0 0 70px -30px rgba(124,111,232,.5); overflow:hidden; }
.lockphone::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 50% at 50% 0%, rgba(124,111,232,.35), transparent 60%); }
.lock__time{ position:relative; text-align:center; font-size:54px; font-weight:600; letter-spacing:-.04em; margin-top:34px; line-height:1; }
.lock__date{ position:relative; text-align:center; font-size:13px; color:var(--muted); margin-top:6px; }
.lockphone__island{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:64px; height:18px; background:#000; border-radius:999px; z-index:3; }
.lock__abs{ position:relative; margin:24px 6px 0; }
.lab{ border-radius:18px; border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.4); backdrop-filter:blur(8px); }
.lab--la{ height:52px; }
.lock__widgets{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.lab--w{ min-height:74px; }
.lab--wide{ grid-column:span 2; min-height:52px; background:linear-gradient(135deg, rgba(124,111,232,.4), rgba(81,162,255,.22)); border-color:rgba(124,111,232,.3); }
.beyond__list{ display:flex; flex-direction:column; gap:.7rem; }
.cap{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; border:1px solid var(--border); border-radius:15px; background:var(--surface); transition:border-color .25s, transform .25s; }
.cap:hover{ border-color:var(--border-2); transform:translateX(3px); }
.cap__ic{ width:40px; height:40px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border-2); color:var(--accent-soft); display:grid; place-items:center; font-size:1.2rem; flex:none; }
.cap h4{ font-size:1.06rem; font-weight:600; margin-bottom:.2rem; }
.cap p{ font-size:.92rem; color:var(--muted); line-height:1.45; }
@media (max-width:820px){ .beyond__wrap{ grid-template-columns:1fr; gap:2rem; } }

/* ════════════════════════════════════════════════════════
   AUTOMATION list
   ════════════════════════════════════════════════════════ */
.automation{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.5rem 5.5rem; }
.auto-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.auto-col{ padding:1.8rem; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.auto-col h4{ font-size:1.05rem; font-weight:600; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); color:var(--accent-soft); }
.auto-col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.auto-col li{ position:relative; padding-left:1.6rem; font-size:.96rem; color:var(--muted); line-height:1.45; }
.auto-col li::before{ content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%; background:rgba(81,162,255,.18); border:1px solid var(--accent); }
@media (max-width:820px){ .auto-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

/* ════════════════════════════════════════════════════════
   DEVICES
   ════════════════════════════════════════════════════════ */
.devices{ max-width:var(--maxw); margin:0 auto; padding:1rem 1.5rem 5.5rem; }
.device-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:.85rem; }
.device{ padding:1.7rem 1rem 1.4rem; border-radius:16px; border:1px solid var(--border); background:var(--surface); text-align:center; transition:border-color .3s, transform .3s; }
.device:hover{ border-color:var(--border-2); transform:translateY(-3px); }
.device .dv{ width:34px; height:34px; margin-bottom:.7rem; fill:none; stroke:var(--accent-soft); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.device h4{ font-size:.98rem; font-weight:600; }
.device__os{ display:inline-block; margin-top:.55rem; font-size:.7rem; font-family:var(--mono); color:var(--faint); border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem; }
.device__os.available{ color:var(--go); border-color:rgba(61,220,132,.3); }
@media (max-width:820px){ .device-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .device-grid{ grid-template-columns:repeat(2,1fr); } }

/* ════════════════════════════════════════════════════════
   SOON
   ════════════════════════════════════════════════════════ */
.soon{ position:relative; max-width:var(--maxw); margin:0 auto 5.5rem; padding:clamp(2.5rem,5vw,4rem) 1.5rem; text-align:center; border:1px solid var(--border-2); border-radius:20px; overflow:hidden; background:var(--bg-2); }
.soon__glow{ position:absolute; left:50%; top:-40%; transform:translateX(-50%); width:600px; height:400px; background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%); filter:blur(20px); }
.soon > *:not(.soon__glow){ position:relative; }
.soon__badge{ font-size:.74rem; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(81,162,255,.35); padding:.35rem .8rem; border-radius:999px; }
.soon h2{ font-size:clamp(1.8rem,4vw,2.7rem); font-weight:600; letter-spacing:-.03em; margin:1rem 0 .7rem; }
.soon p{ max-width:540px; margin:0 auto; color:var(--muted); font-size:1.06rem; }
.soon__bars{ display:inline-flex; gap:5px; align-items:flex-end; height:24px; margin-top:1.5rem; }
.soon__bars i{ width:6px; background:var(--accent); border-radius:3px; animation:sig 1.4s var(--ease) infinite; }
.soon__bars i:nth-child(1){height:40%;animation-delay:0s} .soon__bars i:nth-child(2){height:70%;animation-delay:.15s} .soon__bars i:nth-child(3){height:100%;animation-delay:.3s} .soon__bars i:nth-child(4){height:55%;animation-delay:.45s}
@keyframes sig{ 0%,100%{transform:scaleY(.5);opacity:.5} 50%{transform:scaleY(1);opacity:1} }

/* ════════════════════════════════════════════════════════
   SECURITY
   ════════════════════════════════════════════════════════ */
.security{ max-width:var(--maxw); margin:0 auto; padding:1rem 1.5rem 5.5rem; }
.sec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.sec-item{ padding:1.6rem; border-radius:15px; border:1px solid var(--border); background:var(--surface); }
.sec-item h4{ font-size:1.04rem; font-weight:600; margin-bottom:.45rem; }
.sec-item h4::before{ content:"›"; color:var(--accent); margin-right:.45rem; }
.sec-item p{ font-size:.92rem; color:var(--muted); line-height:1.5; }
@media (max-width:820px){ .sec-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .sec-grid{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════ */
.pricing{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.5rem 5.5rem; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:960px; margin:0 auto; align-items:stretch; }
.plan{ position:relative; padding:3.1rem 1.7rem 2rem; border-radius:18px; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; }
.plan--pro{ border-color:rgba(81,162,255,.3); background:linear-gradient(180deg, rgba(81,162,255,.07), var(--surface)); }
.plan--pop{ border-color:rgba(81,162,255,.55); background:linear-gradient(180deg, rgba(81,162,255,.12), var(--surface)); box-shadow:0 30px 70px -34px var(--glow-strong); }
@media (min-width:861px){ .plan--pop{ transform:scale(1.04); z-index:2; } }
.plan__flag{ position:absolute; top:1.25rem; right:1.5rem; font-size:.6rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent); border:1px solid rgba(81,162,255,.4); border-radius:999px; padding:.28rem .6rem; line-height:1; }
.plan__flag--pop{ left:1.5rem; right:auto; color:var(--cta-text); background:var(--accent); border-color:var(--accent); }
.plan__name{ font-size:1.06rem; font-weight:600; }
.plan__price{ font-size:2.8rem; font-weight:650; letter-spacing:-.04em; margin:.5rem 0 .2rem; }
.plan__price span{ font-size:.9rem; font-weight:400; color:var(--faint); letter-spacing:0; }
.plan__line{ color:var(--muted); font-size:.92rem; margin-bottom:1.3rem; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.6rem; flex:1; }
.plan li{ font-size:.9rem; display:flex; gap:.55rem; color:var(--text); }
.plan li::before{ content:"✓"; color:var(--accent); font-weight:700; }
.plan li.plan__off{ color:var(--faint); }
.plan li.plan__off::before{ content:"-"; color:var(--faint); }
.plan .btn{ margin-top:auto; }
.pricing__fine{ text-align:center; margin-top:1.4rem; font-family:var(--mono); font-size:.72rem; color:var(--faint); }
@media (max-width:860px){ .plans{ grid-template-columns:1fr; max-width:420px; } }

/* ════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════ */
.faq{ max-width:780px; margin:0 auto; padding:2rem 1.5rem 5.5rem; }
.faq__list{ display:flex; flex-direction:column; gap:.6rem; }
.qa{ border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; transition:border-color .2s; }
.qa[open]{ border-color:var(--border-2); }
.qa summary{ list-style:none; cursor:pointer; padding:1.15rem 1.35rem; font-size:1.04rem; font-weight:550; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:color .2s; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:#fff; }
.qa__plus{ position:relative; width:14px; height:14px; flex:none; }
.qa__plus::before, .qa__plus::after{ content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .25s var(--ease); }
.qa__plus::before{ top:6px; left:0; width:14px; height:2px; }
.qa__plus::after{ top:0; left:6px; width:2px; height:14px; }
.qa[open] .qa__plus::after{ transform:scaleY(0); }
.qa p{ padding:0 1.35rem 1.25rem; color:var(--muted); font-size:.98rem; line-height:1.6; }

/* ════════════════════════════════════════════════════════
   WAITLIST
   ════════════════════════════════════════════════════════ */
.waitlist{ position:relative; max-width:var(--maxw); margin:0 auto; padding:3rem 1.5rem 6rem; }
.waitlist__glow{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:700px; height:400px; background:radial-gradient(50% 50% at 50% 70%,var(--glow),transparent 70%); filter:blur(24px); pointer-events:none; }
.waitlist__inner{ position:relative; text-align:center; max-width:560px; margin:0 auto; padding:clamp(2.5rem,5vw,4rem) 1.5rem; border:1px solid var(--border-2); border-radius:22px; background:rgba(16,16,19,.6); backdrop-filter:blur(8px); }
.waitlist__inner h2{ font-size:clamp(2.1rem,5vw,3rem); font-weight:600; letter-spacing:-.035em; margin:1rem 0 .6rem; background:linear-gradient(180deg,#fff 45%,#b6b6c0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.waitlist__inner > p{ color:var(--muted); margin-bottom:1.8rem; font-size:1.06rem; }
.wl-form{ display:flex; gap:.6rem; max-width:440px; margin:0 auto; }
.wl-form input{ flex:1; background:var(--bg); border:1px solid var(--border-2); border-radius:999px; padding:.85em 1.2em; color:var(--text); font-family:var(--mono); font-size:.85rem; transition:border-color .2s, box-shadow .2s; }
.wl-form input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(81,162,255,.16); }
.wl-form input::placeholder{ color:var(--faint); }
.wl-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl-note{ margin-top:1rem; font-family:var(--mono); font-size:.78rem; color:var(--go); min-height:1.2em; }
.wl-note.err{ color:#ff8c8c; }
@media (max-width:520px){ .wl-form{ flex-direction:column; } .wl-form .btn{ width:100%; } }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
.footer{ max-width:var(--maxw); margin:0 auto; padding:2.5rem 1.5rem 3.5rem; border-top:1px solid var(--border); }
.footer__top{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between; }
.footer__links{ display:flex; gap:1.4rem; font-size:.88rem; color:var(--muted); flex-wrap:wrap; }
.footer__links a:hover{ color:var(--text); }
.footer__legal{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); font-size:.8rem; color:var(--faint); }

/* ── reveal + responsive ─────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@media (max-width:880px){ .nav__links{ display:none; } }
@media (max-width:520px){
  .hero__title{ font-size:2.1rem; letter-spacing:-.03em; max-width:none; }
  .hero__sub{ font-size:1.05rem; }
  .sec-head h2{ font-size:1.9rem; }
  .nav__inner{ gap:.75rem; }
}
@media (max-width:380px){ .hero__title{ font-size:1.85rem; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } }