:root{
  --bg:#0B1120;
  --bg-panel:#101830;
  --bg-elev:#16203B;
  --ink:#EDF0F7;
  --ink-2:#AAB4C8;
  --ink-3:#6B7590;
  --gold:#F0B418;
  --gold-soft:#FFD34D;
  --cream:#FAF6EE;
  --navy:#1B2A4A;
  --navy-dark:#141F3C;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --ok:#7DCEA0;
  --danger:#E2766B;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:rgba(240,180,24,.35);color:#fff}
.wrap{width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.sadu-ribbon{
  height:7px;
  background:repeating-linear-gradient(90deg,#F0B418 0 14px,#1B2A4A 14px 28px,#FAF6EE 28px 34px,#1B2A4A 34px 48px);
  opacity:.95;
}
.bg-layers{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%)}
.bg-pattern{position:absolute;inset:0;opacity:.45;background-image:url("../assets/najdi-light.svg");background-size:72px 72px;mask-image:linear-gradient(180deg,#000 0%,transparent 40%,transparent 70%,#000 100%)}
.bg-glow-1{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:920px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,180,24,.14),transparent 70%);filter:blur(22px);animation:glowDrift 12s ease-in-out infinite}
.bg-glow-2{position:absolute;bottom:8%;right:-260px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(27,42,74,.55),transparent 72%)}
@keyframes glowDrift{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-46%) translateY(18px)}}

/* NAV */
nav{position:sticky;top:0;z-index:60;background:rgba(11,17,32,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1rem;padding:.9rem 0;width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.nav-logo{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:-.01em}
.nav-logo img{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(240,180,24,.25)}
.nav-links{display:flex;gap:1.05rem;margin-inline-start:auto;flex-wrap:wrap;align-items:center}
.nav-links a{color:var(--ink-2);font-size:.92rem;font-weight:500;position:relative}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-soft)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;inset-inline:10%;bottom:-6px;height:2px;border-radius:99px;background:var(--gold)}
.nav-cta,.btn-primary,.btn-ghost,.btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:999px;padding:.72rem 1.2rem;font-weight:600;transition:.22s ease;border:1px solid transparent;cursor:pointer}
.nav-cta,.btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1A1405;box-shadow:0 10px 28px rgba(240,180,24,.22)}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(240,180,24,.45);color:var(--gold-soft)}
.btn-soft{background:rgba(240,180,24,.1);border-color:rgba(240,180,24,.28);color:var(--gold-soft)}
.btn-soon{cursor:default;opacity:.92}
.menu-btn{display:none;background:transparent;border:1px solid var(--line-2);color:var(--ink);border-radius:10px;padding:.45rem .7rem}

/* HERO */
.hero{padding:clamp(2.6rem,5vw,4.6rem) 0 3rem;position:relative}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(240,180,24,.28);background:rgba(240,180,24,.08);color:var(--gold-soft);border-radius:999px;padding:.35rem .85rem;font-size:.86rem;margin-bottom:1rem}
.hero-badge .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(240,180,24,.55);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(240,180,24,0)}100%{box-shadow:0 0 0 0 rgba(240,180,24,0)}}
.hero h1{font-size:clamp(2rem,4.6vw,3.45rem);line-height:1.32;font-weight:700;margin-bottom:1rem;letter-spacing:-.02em}
.hero h1 .gold{color:var(--gold-soft);position:relative}
.hero h1 .gold::after{content:"";position:absolute;inset-inline:0;bottom:.08em;height:.12em;background:linear-gradient(90deg,transparent,rgba(240,180,24,.55),transparent);border-radius:99px}
.hero .sub{color:var(--ink-2);font-size:clamp(1rem,1.55vw,1.14rem);max-width:40rem;margin-bottom:1.15rem}
.promise{border:1px solid rgba(240,180,24,.22);background:linear-gradient(135deg,rgba(240,180,24,.09),rgba(255,255,255,.02) 55%);border-radius:18px;padding:1rem 1.15rem;color:var(--cream);margin-bottom:1.3rem;position:relative;overflow:hidden}
.promise::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold-soft),transparent)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.35rem}
.trust-row{display:flex;flex-wrap:wrap;gap:.65rem}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:.35rem .75rem;color:var(--ink-2);font-size:.84rem}
.chip.hot{border-color:rgba(240,180,24,.35);color:var(--gold-soft);background:rgba(240,180,24,.08)}
.hero-stage{position:relative}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:24px;padding:.9rem;box-shadow:var(--shadow);overflow:hidden;position:relative}
.hero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(240,180,24,.08) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 5.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.hero-shot{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#0a1020;position:relative}
.hero-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.hero-float{
  position:absolute;inset-inline-start:-.4rem;bottom:-.55rem;width:min(270px,72%);
  background:rgba(16,24,48,.94);border:1px solid rgba(240,180,24,.35);
  border-radius:18px;padding:.85rem;box-shadow:0 16px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);animation:floatCard 4.8s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-float .hf-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.hero-float .hf-live{display:inline-flex;align-items:center;gap:.35rem;color:#ffb4a8;font-size:.72rem}
.hero-float .hf-live::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:#ff6b5a;animation:blink 1.2s infinite}
.hero-float .qa{display:grid;gap:.4rem}
.hero-float .q{font-size:.78rem;color:var(--ink-2)}
.hero-float .a{font-size:.88rem;color:var(--cream);line-height:1.55}
.hero-float .wave-mini{display:flex;align-items:end;gap:3px;height:22px;margin-top:.55rem}
.hero-float .wave-mini i{width:3px;border-radius:99px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));animation:wave 1s ease-in-out infinite}
.hero-float .wave-mini i:nth-child(1){height:8px}.hero-float .wave-mini i:nth-child(2){height:14px;animation-delay:.08s}
.hero-float .wave-mini i:nth-child(3){height:18px;animation-delay:.16s}.hero-float .wave-mini i:nth-child(4){height:11px;animation-delay:.24s}
.hero-float .wave-mini i:nth-child(5){height:16px;animation-delay:.12s}.hero-float .wave-mini i:nth-child(6){height:9px;animation-delay:.2s}
.hero-float .lat{margin-top:.45rem;font-size:.72rem;color:var(--gold-soft)}
.brand-mark{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.85rem;color:var(--ink-2);font-size:.9rem}
.brand-mark img{width:28px;height:28px;border-radius:8px}
.brand-mark .div{width:1px;height:14px;background:rgba(240,180,24,.45)}
.brand-mark .new{border:1px solid rgba(240,180,24,.35);color:var(--gold-soft);border-radius:999px;padding:.1rem .5rem;font-size:.72rem}

/* SECTIONS */
.section{padding:clamp(3.2rem,6vw,4.6rem) 0}
.section.alt{background:var(--bg-panel);border-block:1px solid var(--line)}
.sec-head{max-width:46rem;margin-bottom:2rem}
.kicker{display:inline-block;color:var(--gold-soft);font-weight:600;font-size:.86rem;margin-bottom:.55rem;letter-spacing:.02em}
.sec-head h2,.page-hero h1{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.4;margin-bottom:.7rem}
.sec-head p,.lede{color:var(--ink-2)}
.page-hero{padding:3rem 0 1.4rem}
.page-hero .lede{max-width:44rem}
.sec-head.center,.center{text-align:center;margin-inline:auto}
.sec-head.center p{margin-inline:auto}

/* PROOF STRIP */
.proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;
  margin-top:-.4rem;margin-bottom:.5rem;
}
.proof-item{
  border:1px solid var(--line);border-radius:18px;padding:1.05rem 1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  position:relative;overflow:hidden;
}
.proof-item::after{content:"";position:absolute;inset-inline-end:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(240,180,24,.12),transparent 70%)}
.proof-item b{display:block;font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--gold-soft);line-height:1.2;margin-bottom:.25rem;font-variant-numeric:tabular-nums}
.proof-item span{color:var(--ink-2);font-size:.88rem;display:block}
.proof-item small{display:block;margin-top:.35rem;color:var(--ink-3);font-size:.75rem}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.bento > *{grid-column:span 4;min-height:100%}
.bento .wide{grid-column:span 8}
.bento .tall{grid-row:span 2}
.bento-card{
  border:1px solid var(--line);border-radius:22px;padding:1.15rem;
  background:rgba(255,255,255,.025);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.65rem;transition:border-color .25s ease, transform .25s ease;
}
.bento-card:hover{border-color:rgba(240,180,24,.35);transform:translateY(-2px)}
.bento-card h3{font-size:1.12rem}
.bento-card p{color:var(--ink-2);font-size:.95rem}
.bento-card .tagline{color:var(--gold-soft);font-size:.8rem;font-weight:600}
.bento-media{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0a1020;margin-top:auto}
.bento-media img,.bento-media video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.bento-media.sq img{aspect-ratio:1.2}

/* FEATURE ROWS */
.feature-scan{display:grid;gap:1.15rem}
.feature-row{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;align-items:stretch;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:22px;padding:1rem;overflow:hidden}
.feature-row.reverse > .feature-copy{order:2}
.feature-row.reverse > .scene,.feature-row.reverse > .shot-panel{order:1}
.feature-copy{padding:.55rem .35rem .55rem .55rem}
.feature-copy h3{font-size:1.18rem;margin-bottom:.45rem}
.feature-copy p{color:var(--ink-2);margin-bottom:.85rem}
.feature-copy .how{color:var(--cream);font-size:.95rem;border-inline-start:3px solid rgba(240,180,24,.55);padding-inline-start:.75rem;margin-bottom:.9rem}
.mini-list{display:grid;gap:.45rem;color:var(--ink-2);font-size:.92rem}
.mini-list span{display:flex;gap:.5rem;align-items:flex-start}
.mini-list i{color:var(--gold-soft);font-style:normal;flex:0 0 auto}

/* SCENES */
.scene{
  position:relative;min-height:250px;border-radius:18px;
  background:radial-gradient(circle at top left, rgba(240,180,24,.08), transparent 40%),linear-gradient(180deg, rgba(20,31,60,.95), rgba(11,17,32,.92));
  border:1px solid var(--line);overflow:hidden;padding:1rem;
}
.scene-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem}
.scene-title{font-size:.82rem;color:var(--ink-2)}
.scene-live{display:inline-flex;align-items:center;gap:.4rem;color:#ffb4a8;font-size:.78rem}
.scene-live::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#ff6b5a;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}
.mic-stage{display:grid;place-items:center;gap:1rem;padding-top:.5rem}
.mic{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;
  background:linear-gradient(180deg,rgba(240,180,24,.18),rgba(240,180,24,.05));
  border:1px solid rgba(240,180,24,.35);position:relative;
}
.mic::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(240,180,24,.25);animation:ring 2.4s ease-out infinite}
@keyframes ring{from{transform:scale(.85);opacity:.8}to{transform:scale(1.25);opacity:0}}
.wave{display:flex;align-items:end;gap:5px;height:48px}
.wave span{width:5px;border-radius:99px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));animation:wave 1.1s ease-in-out infinite}
.wave span:nth-child(1){height:18px}.wave span:nth-child(2){height:30px;animation-delay:.1s}
.wave span:nth-child(3){height:42px;animation-delay:.2s}.wave span:nth-child(4){height:24px;animation-delay:.3s}
.wave span:nth-child(5){height:36px;animation-delay:.15s}.wave span:nth-child(6){height:20px;animation-delay:.25s}
.wave span:nth-child(7){height:40px;animation-delay:.05s}.wave span:nth-child(8){height:28px;animation-delay:.18s}
@keyframes wave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.rec-caption{text-align:center;color:var(--ink-2);font-size:.86rem}
.tr-lines{display:grid;gap:.65rem}
.tr-line{display:grid;grid-template-columns:auto 1fr;gap:.7rem;opacity:0;transform:translateY(8px);animation:lineIn 8s ease-in-out infinite}
.tr-line:nth-child(1){animation-delay:0s}.tr-line:nth-child(2){animation-delay:1.6s}
.tr-line:nth-child(3){animation-delay:3.2s}.tr-line:nth-child(4){animation-delay:4.8s}
@keyframes lineIn{0%,6%{opacity:0;transform:translateY(8px)}12%,78%{opacity:1;transform:none}88%,100%{opacity:.15}}
.ts{color:var(--gold);font-size:.75rem;padding-top:.2rem;font-variant-numeric:tabular-nums}
.tr-line p{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;color:var(--cream);font-size:.9rem}
.tr-line p::after{content:"";display:inline-block;width:2px;height:1em;background:var(--gold-soft);margin-inline-start:.25rem;vertical-align:-2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.tr-line:nth-child(n+2) p::after{display:none}
.sum-card{display:grid;gap:.55rem}
.sum-card h4{color:var(--gold-soft);font-size:.95rem}
.sum-item{display:flex;gap:.55rem;align-items:flex-start;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;opacity:0;transform:translateY(10px);animation:popIn 7s ease-in-out infinite}
.sum-item:nth-child(2){animation-delay:.4s}.sum-item:nth-child(3){animation-delay:.9s}
.sum-item:nth-child(4){animation-delay:1.4s}.sum-item:nth-child(5){animation-delay:1.9s}
@keyframes popIn{0%,8%{opacity:0;transform:translateY(10px)}18%,78%{opacity:1;transform:none}90%,100%{opacity:.2}}
.tag{display:inline-flex;border-radius:999px;padding:.1rem .45rem;font-size:.72rem;background:rgba(240,180,24,.12);color:var(--gold-soft);border:1px solid rgba(240,180,24,.22);flex:0 0 auto}
.check-list{display:grid;gap:.55rem}
.check-item{display:flex;gap:.6rem;align-items:center;padding:.55rem .7rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);opacity:0;animation:checkIn 6.5s ease-in-out infinite}
.check-item:nth-child(1){animation-delay:0s}.check-item:nth-child(2){animation-delay:.7s}
.check-item:nth-child(3){animation-delay:1.4s}.check-item:nth-child(4){animation-delay:2.1s}
@keyframes checkIn{0%,10%{opacity:0;transform:translateX(8px)}20%,75%{opacity:1;transform:none}90%,100%{opacity:.25}}
.tick{width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid rgba(240,180,24,.45);display:grid;place-items:center;color:var(--gold-soft);font-size:.7rem;flex:0 0 auto}
.export-stage{display:grid;gap:.8rem;place-items:center;padding-top:.4rem}
.export-flow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center}
.export-pill{min-width:108px;text-align:center;border-radius:14px;padding:.8rem .7rem;border:1px solid var(--line);background:rgba(255,255,255,.03);animation:floaty 3.6s ease-in-out infinite}
.export-pill:nth-child(3){animation-delay:.4s}
.export-pill strong{display:block;margin-top:.25rem;font-size:.88rem}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.arrow{color:var(--gold-soft);opacity:.8;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(-4px);opacity:1}}
.assistant-stage{position:relative;min-height:190px}
.app-shell{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);padding:.8rem;height:100%}
.app-shell .fake-line{height:8px;border-radius:99px;background:rgba(255,255,255,.08);margin-bottom:.45rem}
.app-shell .fake-line.short{width:55%}
.float-assist{
  position:absolute;inset-inline-start:12px;bottom:12px;width:min(220px,80%);
  background:rgba(20,31,60,.92);border:1px solid rgba(240,180,24,.3);
  border-radius:16px;padding:.75rem;box-shadow:0 14px 30px rgba(0,0,0,.28);
  animation:assistIn 5.5s ease-in-out infinite;
}
@keyframes assistIn{0%,12%{opacity:0;transform:translateY(12px) scale(.96)}22%,78%{opacity:1;transform:none}90%,100%{opacity:.2}}
.float-assist .q{font-size:.78rem;color:var(--ink-2);margin-bottom:.35rem}
.float-assist .a{font-size:.88rem;color:var(--cream)}
.spark-btn{position:absolute;inset-inline-end:18px;top:58px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#1A1405;animation:sparkPulse 2.8s ease-in-out infinite}
@keyframes sparkPulse{50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(240,180,24,.08)}}
.path-compare{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.path-card{border-radius:14px;border:1px solid var(--line);padding:.8rem;background:rgba(255,255,255,.03);position:relative;overflow:hidden}
.path-card.local{border-color:rgba(240,180,24,.35);box-shadow:inset 0 0 0 1px rgba(240,180,24,.08)}
.path-card .pill{position:absolute;top:.7rem;inset-inline-start:.7rem;font-size:.72rem;color:#1A1405;background:var(--gold);border-radius:999px;padding:.1rem .45rem;font-weight:700}
.path-card h5{margin:1.4rem 0 .35rem;font-size:.95rem}
.path-card p{color:var(--ink-2);font-size:.84rem}
.path-card.local::after{content:"";position:absolute;inset:auto -.2rem -.2rem auto;width:70px;height:70px;background:radial-gradient(circle,rgba(240,180,24,.2),transparent 70%);animation:glowSoft 3s ease-in-out infinite}
@keyframes glowSoft{50%{opacity:.55;transform:scale(1.1)}}

/* HOW STEPS with real shots */
.how-track{display:grid;gap:1rem}
.how-step{
  display:grid;grid-template-columns:auto 1fr 1.05fr;gap:1rem;align-items:center;
  border:1px solid var(--line);border-radius:22px;padding:1rem;
  background:rgba(255,255,255,.025);
}
.how-num{
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(240,180,24,.2),rgba(240,180,24,.05));
  border:1px solid rgba(240,180,24,.35);color:var(--gold-soft);font-weight:700;font-size:1.15rem;
}
.how-copy h3{font-size:1.15rem;margin-bottom:.35rem}
.how-copy p{color:var(--ink-2);font-size:.95rem}
.how-copy .hint{margin-top:.55rem;font-size:.84rem;color:var(--gold-soft)}
.shot-panel{border-radius:16px;overflow:hidden;border:1px solid rgba(240,180,24,.28);background:#0a1020;box-shadow:0 14px 36px rgba(0,0,0,.28)}
.shot-panel img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s ease}
.how-step:hover .shot-panel img{transform:scale(1.03)}

/* ACCURACY COMPARE */
.acc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
.acc-panel{
  border-radius:22px;border:1px solid var(--line);padding:1.25rem;
  background:rgba(255,255,255,.025);position:relative;overflow:hidden;
}
.acc-panel.featured{border-color:rgba(240,180,24,.4);background:linear-gradient(180deg,rgba(240,180,24,.09),rgba(255,255,255,.02))}
.acc-panel h3{margin-bottom:.45rem}
.acc-panel p{color:var(--ink-2);margin-bottom:.9rem}
.acc-meter{display:grid;gap:.75rem;margin:1rem 0}
.meter-row{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.6rem;align-items:center;font-size:.86rem;color:var(--ink-2)}
.meter-track{height:10px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.meter-fill{display:block;height:100%;border-radius:99px;width:0;background:linear-gradient(90deg,var(--gold),#fff1c2);transition:width 1.2s ease}
.meter-fill.soft{background:linear-gradient(90deg,#6B7590,#AAB4C8)}
.meter-val{font-variant-numeric:tabular-nums;color:var(--cream);min-width:3.2rem;text-align:start}
.acc-note{font-size:.84rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:.85rem;margin-top:.4rem}
.truth-table{width:100%;border-collapse:collapse;font-size:.9rem}
.truth-table th,.truth-table td{padding:.7rem .55rem;border-bottom:1px solid var(--line);text-align:start}
.truth-table th{color:var(--gold-soft);font-weight:600}
.truth-table td{color:var(--ink-2)}
.truth-table tr:last-child td{border-bottom:0}
.badge-ok{display:inline-flex;align-items:center;gap:.3rem;color:var(--ok);font-size:.82rem}
.badge-warn{color:var(--gold-soft);font-size:.82rem}

/* TOUR */
.tour{display:grid;grid-template-columns:1.4fr .8fr;gap:1rem;align-items:stretch}
.tour-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(240,180,24,.35);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.tour-frame img{width:100%;height:auto}
.pin{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(240,180,24,.7);animation:pin 2.4s ease-out infinite;cursor:pointer;border:0;padding:0}
.pin::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(240,180,24,.8)}
.pin.active{background:#fff;box-shadow:0 0 0 6px rgba(240,180,24,.25)}
@keyframes pin{70%{box-shadow:0 0 0 14px rgba(240,180,24,0)}}
.p-mic{left:48%;bottom:9%}.p-lock{left:62%;top:38%}.p-out{left:22%;top:28%}
.p-assist{left:24%;top:68%}.p-recent{left:68%;bottom:24%}
.tour-script{position:relative;min-height:240px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:1.1rem;display:flex;flex-direction:column}
.tour-script .ts-label{font-size:.78rem;color:var(--gold-soft);margin-bottom:.45rem}
.tour-script p{margin:0;color:var(--cream);font-size:1rem;line-height:1.75;flex:1}
.tour-dots{display:flex;gap:.4rem;margin-top:1rem}
.tour-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;padding:0}
.tour-dots button.active{background:var(--gold);width:22px;border-radius:99px}
.tour-video{width:min(960px,100%);margin:1rem auto 0;display:block;border-radius:16px;border:1px solid rgba(240,180,24,.28);background:#000}

/* QUALITY / SPEAKERS demo */
.quality-demo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.q-card{border-radius:18px;border:1px solid var(--line);padding:1rem;background:rgba(255,255,255,.03)}
.q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;gap:.5rem}
.q-head b{color:var(--gold-soft)}
.spk-line{display:grid;grid-template-columns:auto 1fr;gap:.55rem;margin-bottom:.55rem}
.spk-dot{width:.55rem;height:.55rem;border-radius:50%;margin-top:.55rem}
.spk-dot.a{background:#0284c7}.spk-dot.b{background:#059669}
.spk-bubble{border-radius:12px;border:1px solid var(--line);padding:.5rem .65rem;font-size:.88rem;color:var(--cream);background:rgba(255,255,255,.03)}
.spk-bubble em{display:block;font-style:normal;font-size:.72rem;color:var(--ink-3);margin-bottom:.15rem}
.flag-word{background:rgba(226,118,107,.18);border-bottom:1px dashed rgba(226,118,107,.7);border-radius:3px;padding:0 .15rem}

/* MODES / CARDS */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mode-card,.card,.stat-card{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:18px;padding:1.1rem}
.mode-card h3,.card h3{margin-bottom:.4rem;font-size:1.05rem}
.mode-card p,.card p{color:var(--ink-2);font-size:.95rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.stat-card b{display:block;font-size:1.35rem;color:var(--gold-soft);margin-bottom:.2rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.step-card{position:relative;padding:1rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.step-card .n{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:rgba(240,180,24,.12);color:var(--gold-soft);font-weight:700;margin-bottom:.55rem}
.step-card h3{font-size:1rem;margin-bottom:.3rem}
.step-card p{color:var(--ink-2);font-size:.9rem}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.compare .col{border-radius:18px;padding:1.2rem;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.compare .us{border-color:rgba(240,180,24,.3);background:linear-gradient(180deg,rgba(240,180,24,.08),rgba(255,255,255,.02))}
.compare h3{margin-bottom:.8rem}
.compare li{list-style:none;padding:.45rem 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.compare li:last-child{border-bottom:0}

/* USE CASES strip */
.use-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.use-card{border-radius:18px;border:1px solid var(--line);padding:1.1rem;background:rgba(255,255,255,.025);min-height:160px}
.use-card .ico{width:2.2rem;height:2.2rem;border-radius:10px;display:grid;place-items:center;background:rgba(240,180,24,.1);border:1px solid rgba(240,180,24,.25);margin-bottom:.7rem;color:var(--gold-soft);font-size:1rem}
.use-card h3{font-size:1rem;margin-bottom:.35rem}
.use-card p{color:var(--ink-2);font-size:.9rem}

/* PRINT MOCK */
.print-mock{
  border-radius:18px;overflow:hidden;border:1px solid rgba(240,180,24,.3);
  background:#fff;color:#1B2A4A;font-size:.82rem;line-height:1.6;
}
.print-hero{background:linear-gradient(135deg,#1B2A4A,#141F3C);color:#FAF6EE;padding:1rem 1.1rem;position:relative}
.print-hero::before{content:"";position:absolute;inset:0;opacity:.15;background-image:url("../assets/najdi-light.svg");background-size:48px}
.print-hero strong{position:relative;display:block;font-size:1rem}
.print-hero span{position:relative;color:#FFD34D;font-size:.78rem}
.print-body{padding:.9rem 1.1rem;display:grid;gap:.55rem}
.print-row{display:flex;gap:.5rem;align-items:flex-start}
.print-badge{width:1.2rem;height:1.2rem;border-radius:50%;background:#F0B418;color:#1A1405;display:grid;place-items:center;font-size:.65rem;font-weight:700;flex:0 0 auto}
.print-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.3rem}
.print-nums div{background:#FAF6EE;border-radius:8px;padding:.35rem;text-align:center}
.print-nums b{display:block;color:#1B2A4A;font-size:.9rem}
.print-nums span{color:#6B7590;font-size:.68rem}

/* CTA / FOOTER */
.cta-band{text-align:center;padding:3.5rem 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(240,180,24,.05),transparent);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(240,180,24,.08),transparent 60%);pointer-events:none}
.cta-band h2{margin-bottom:.55rem;position:relative}
.cta-band p{color:var(--ink-2);margin-bottom:1.1rem;position:relative}
.cta-band .hero-ctas{position:relative;justify-content:center}
.footer{border-top:1px solid var(--line);padding:1.6rem 0 2rem;color:var(--ink-3);font-size:.9rem}
.foot-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.foot-in a{color:var(--ink-2)}
.foot-in a:hover{color:var(--gold-soft)}
.foot-links{display:flex;gap:1rem;flex-wrap:wrap}
.note-box{border:1px dashed rgba(240,180,24,.35);background:rgba(240,180,24,.06);border-radius:16px;padding:1rem 1.1rem;color:var(--cream)}
.dl-card{display:grid;gap:1rem;grid-template-columns:1.2fr .8fr}
.dl-main,.dl-side{border:1px solid var(--line);border-radius:20px;padding:1.25rem;background:rgba(255,255,255,.025)}
.dl-main h2{margin:.4rem 0 .7rem}
.meta-list{display:grid;gap:.55rem;margin:1rem 0 1.2rem;color:var(--ink-2)}
.privacy-points{display:grid;gap:.8rem}
.privacy-points article{padding:1rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.privacy-points h3{margin-bottom:.35rem}
.privacy-points p{color:var(--ink-2)}
.shield{display:grid;place-items:center;min-height:180px;position:relative}
.shield-lock{width:74px;height:86px;border-radius:18px 18px 28px 28px;border:2px solid rgba(240,180,24,.7);background:linear-gradient(180deg,rgba(240,180,24,.16),rgba(11,21,38,.4));display:grid;place-items:center;font-size:1.6rem;animation:lockPulse 2.8s ease-in-out infinite}
.shield-ring{position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid rgba(240,180,24,.28);animation:ring 2.4s ease-out infinite}
@keyframes lockPulse{50%{transform:translateY(-4px);box-shadow:0 0 0 10px rgba(240,180,24,.08)}}
.chip-cycle{display:flex;flex-wrap:wrap;gap:.45rem}
.chip-cycle span{border:1px solid rgba(240,180,24,.35);border-radius:999px;padding:.28rem .7rem;font-size:.82rem;animation:chipPop 7s ease-in-out infinite}
.chip-cycle span:nth-child(2){animation-delay:.4s}.chip-cycle span:nth-child(3){animation-delay:.8s}
.chip-cycle span:nth-child(4){animation-delay:1.2s}.chip-cycle span:nth-child(5){animation-delay:1.6s}
@keyframes chipPop{0%,100%{background:transparent;color:var(--cream)}40%,70%{background:rgba(240,180,24,.9);color:#1A1405}}
.speed{display:grid;gap:.7rem}
.speed-row{display:grid;grid-template-columns:5.5rem 1fr;gap:.55rem;align-items:center;font-size:.82rem;color:var(--ink-2)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold),#fff1c2);animation:barFill 2.8s ease-in-out infinite}
.bar.slow i{animation-name:barFillSlow}
@keyframes barFill{0%{width:18%}55%,100%{width:92%}}
@keyframes barFillSlow{0%{width:12%}55%,100%{width:48%}}
.night-card{border-radius:16px;padding:.9rem;background:#101C33;border:1px solid rgba(240,180,24,.3);animation:nightGlow 3.2s ease-in-out infinite}
.night-card b{color:#FFD34D;display:block;margin-bottom:.35rem}
.night-card p{color:#D5DEEA;font-size:.86rem}
@keyframes nightGlow{50%{box-shadow:0 0 0 6px rgba(240,180,24,.12)}}

/* sticky mobile CTA */
.mobile-cta{
  display:none;position:fixed;inset-inline:0;bottom:0;z-index:50;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(11,17,32,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}
.mobile-cta a{width:100%}

.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero-grid,.feature-row,.modes,.grid-3,.grid-2,.steps,.compare,.dl-card,.path-compare,.tour,.proof,.acc-grid,.quality-demo,.use-rail,.how-step{grid-template-columns:1fr}
  .bento > *,.bento .wide{grid-column:span 12}
  .how-step{grid-template-columns:auto 1fr}
  .how-step .shot-panel{grid-column:1 / -1}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;inset-inline:0;top:64px;background:rgba(11,17,32,.97);border-bottom:1px solid var(--line);padding:1rem;flex-direction:column;z-index:70}
  .menu-btn{display:inline-flex;margin-inline-start:auto}
  .nav-cta{display:none}
  .feature-row{padding:.85rem}
  .feature-row.reverse > .feature-copy,.feature-row.reverse > .scene,.feature-row.reverse > .shot-panel{order:initial}
  .hero-float{position:relative;inset:auto;width:100%;margin-top:.75rem;animation:none}
  .mobile-cta{display:block}
  body{padding-bottom:4.5rem}
  .meter-row{grid-template-columns:5.5rem 1fr auto}
}
@media (prefers-reduced-motion:reduce){
  html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}
  html.motion-off .rv{opacity:1;transform:none}
  html.motion-off .meter-fill{width:var(--w,50%)!important}
}

/* ===== merged zubda-ui mockups ===== */
/* Zubda in-app light UI mockups — cream surface, gold mic, navy ink (matches product) */
:root{
  --z-cream:#FAF6EE;
  --z-cream-2:#F3EEE3;
  --z-ink:#1B2A4A;
  --z-ink-2:#4A5568;
  --z-ink-3:#6B7590;
  --z-gold:#F0B418;
  --z-gold-soft:#FFD34D;
  --z-navy:#1B2A4A;
  --z-navy-dark:#141F3C;
  --z-line:rgba(27,42,74,.10);
  --z-line-2:rgba(27,42,74,.16);
  --z-ok:#059669;
  --z-sky:#0284c7;
  --z-danger:#E2766B;
}

/* App chrome */
.zapp{
  --ink:var(--z-ink); --ink-2:var(--z-ink-2); --ink-3:var(--z-ink-3);
  --cream:var(--z-cream); --gold:var(--z-gold); --gold-soft:var(--z-gold-soft);
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--z-cream);
  border:1px solid rgba(240,180,24,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.22), 0 0 0 1px rgba(27,42,74,.04);
  color:var(--z-ink); font-family:var(--font);
  min-height:260px; display:flex; flex-direction:column;
  isolation:isolate;
}
.zapp::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(240,180,24,.08), transparent 40%),
    url("../assets/najdi-light.svg");
  background-size:auto, 56px 56px;
}
.zapp > *{position:relative; z-index:1}
.zapp-sadu{
  height:6px; flex:0 0 auto;
  background:repeating-linear-gradient(90deg,#F0B418 0 12px,#1B2A4A 12px 24px,#FAF6EE 24px 30px,#1B2A4A 30px 42px);
}
.zapp-top{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .75rem; border-bottom:1px solid var(--z-line);
  background:rgba(255,255,255,.55); backdrop-filter:blur(8px);
}
.zapp-brand{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.88rem; color:var(--z-ink)}
.zapp-brand img{width:22px;height:22px;border-radius:7px}
.zapp-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  border:1px solid rgba(240,180,24,.35); background:rgba(240,180,24,.1);
  color:var(--z-navy); border-radius:999px; padding:.15rem .55rem; font-size:.72rem; font-weight:600;
}
.zapp-body{flex:1; padding:.75rem .8rem .9rem; display:flex; flex-direction:column; gap:.65rem; min-height:0}
.zapp-dock{
  margin-top:auto; display:flex; align-items:flex-end; justify-content:center; gap:1.1rem;
  padding:.35rem .8rem .7rem; background:transparent;
}
.zapp-dock-bar{
  display:flex; align-items:center; gap:.85rem;
  background:var(--z-navy-dark); color:#D5DEEA;
  border-radius:999px; padding:.45rem 1rem .5rem;
  box-shadow:0 12px 28px rgba(20,31,60,.35);
  border:1px solid rgba(255,255,255,.06);
}
.zapp-dock-item{display:flex; flex-direction:column; align-items:center; gap:.1rem; font-size:.62rem; opacity:.85; min-width:2.2rem}
.zapp-dock-item b{font-size:.95rem; font-weight:500; line-height:1}
.zapp-mic{
  width:52px; height:52px; border-radius:50%; margin-top:-22px;
  background:linear-gradient(180deg,var(--z-gold-soft),var(--z-gold));
  color:#1A1405; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(240,180,24,.4), 0 0 0 6px rgba(240,180,24,.12);
  position:relative; font-size:1.15rem;
}
.zapp-mic::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(240,180,24,.35); animation:z-ring 2.2s ease-out infinite;
}
.zapp-mic.recording{
  background:linear-gradient(180deg,#ff8a7a,#e24b3c); color:#fff;
  box-shadow:0 10px 24px rgba(226,75,60,.4), 0 0 0 6px rgba(226,75,60,.12);
}
.zapp-mic.recording::after{border-color:rgba(226,75,60,.4)}

@keyframes z-ring{from{transform:scale(.9);opacity:.7}to{transform:scale(1.25);opacity:0}}
@keyframes z-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes z-blink{50%{opacity:.3}}
@keyframes z-lineIn{
  0%,8%{opacity:0; transform:translateY(8px)}
  14%,78%{opacity:1; transform:none}
  90%,100%{opacity:.25}
}
@keyframes z-typeCaret{50%{opacity:0}}
@keyframes z-pop{
  0%,10%{opacity:0; transform:translateY(8px) scale(.98)}
  18%,80%{opacity:1; transform:none}
  92%,100%{opacity:.2}
}
@keyframes z-check{
  0%,12%{opacity:0; transform:translateX(8px)}
  20%,78%{opacity:1; transform:none}
  90%,100%{opacity:.25}
}
@keyframes z-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes z-shimmer{
  0%{transform:translateX(120%)} 100%{transform:translateX(-120%)}
}
@keyframes z-bar{0%{width:12%}55%,100%{width:var(--w,88%)}}
@keyframes z-chip{
  0%,100%{background:transparent; color:var(--z-ink-2); border-color:var(--z-line-2)}
  40%,70%{background:rgba(240,180,24,.92); color:#1A1405; border-color:transparent}
}
@keyframes z-pulseDot{
  0%{box-shadow:0 0 0 0 rgba(226,75,60,.45)}
  70%{box-shadow:0 0 0 10px rgba(226,75,60,0)}
  100%{box-shadow:0 0 0 0 rgba(226,75,60,0)}
}

/* Live badge */
.z-live{
  display:inline-flex; align-items:center; gap:.35rem;
  color:#c2410c; font-size:.72rem; font-weight:600;
}
.z-live::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%; background:#ef4444;
  animation:z-pulseDot 1.6s ease-out infinite;
}

/* Recording stage */
.z-rec{
  display:grid; place-items:center; gap:.7rem; padding:.5rem 0 .2rem; text-align:center;
}
.z-rec .timer{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:1.35rem; color:var(--z-ink);
  letter-spacing:.04em;
}
.z-rec .timer span{color:var(--z-gold); font-weight:600}
.z-waves{display:flex; align-items:end; gap:4px; height:42px}
.z-waves i{
  width:4px; border-radius:99px;
  background:linear-gradient(180deg,var(--z-gold-soft),var(--z-gold));
  animation:z-wave 1.05s ease-in-out infinite; transform-origin:center bottom;
}
.z-waves i:nth-child(1){height:12px}.z-waves i:nth-child(2){height:22px;animation-delay:.08s}
.z-waves i:nth-child(3){height:34px;animation-delay:.16s}.z-waves i:nth-child(4){height:18px;animation-delay:.24s}
.z-waves i:nth-child(5){height:28px;animation-delay:.1s}.z-waves i:nth-child(6){height:14px;animation-delay:.2s}
.z-waves i:nth-child(7){height:32px;animation-delay:.04s}.z-waves i:nth-child(8){height:20px;animation-delay:.14s}
.z-rec-cap{font-size:.78rem; color:var(--z-ink-2)}
.z-rec-controls{display:flex; gap:.5rem; align-items:center; justify-content:center}
.z-btn-mini{
  border:1px solid var(--z-line-2); background:#fff; color:var(--z-ink);
  border-radius:999px; padding:.35rem .7rem; font-size:.75rem; font-weight:600;
}
.z-btn-stop{
  border:0; background:#e24b3c; color:#fff; border-radius:999px;
  padding:.4rem .85rem; font-size:.78rem; font-weight:700;
  box-shadow:0 6px 16px rgba(226,75,60,.25);
}

/* Transcript live */
.z-tr{display:grid; gap:.45rem}
.z-tr-line{
  display:grid; grid-template-columns:auto auto 1fr; gap:.45rem; align-items:start;
  opacity:0; animation:z-lineIn 9s ease-in-out infinite;
}
.z-tr-line:nth-child(1){animation-delay:0s}
.z-tr-line:nth-child(2){animation-delay:1.7s}
.z-tr-line:nth-child(3){animation-delay:3.4s}
.z-tr-line:nth-child(4){animation-delay:5.1s}
.z-ts{font-size:.68rem; color:var(--z-gold); font-variant-numeric:tabular-nums; padding-top:.35rem; font-weight:600}
.z-spk{
  font-size:.62rem; font-weight:700; border-radius:999px; padding:.12rem .4rem; margin-top:.2rem;
  border:1px solid transparent; white-space:nowrap;
}
.z-spk.a{background:rgba(2,132,199,.1); color:var(--z-sky); border-color:rgba(2,132,199,.25)}
.z-spk.b{background:rgba(5,150,105,.1); color:var(--z-ok); border-color:rgba(5,150,105,.25)}
.z-bubble{
  background:#fff; border:1px solid var(--z-line); border-radius:12px;
  padding:.45rem .6rem; font-size:.84rem; line-height:1.55; color:var(--z-ink);
  box-shadow:0 1px 0 rgba(27,42,74,.03);
}
.z-bubble .flag{
  background:rgba(226,118,107,.16); border-bottom:1px dashed rgba(226,118,107,.7);
  border-radius:3px; padding:0 .12rem;
}
.z-tr-line:nth-child(1) .z-bubble::after{
  content:""; display:inline-block; width:2px; height:.9em; margin-inline-start:.2rem;
  background:var(--z-gold); vertical-align:-2px; animation:z-typeCaret 1s steps(1) infinite;
}
.z-tr-line:nth-child(n+2) .z-bubble::after{display:none}

/* Summary / decisions */
.z-sum{display:grid; gap:.4rem}
.z-sum h4{font-size:.82rem; color:var(--z-navy); margin:0 0 .15rem; display:flex; align-items:center; gap:.35rem}
.z-sum-item{
  display:flex; gap:.45rem; align-items:flex-start;
  background:#fff; border:1px solid var(--z-line); border-radius:12px; padding:.45rem .55rem;
  font-size:.82rem; opacity:0; animation:z-pop 7.5s ease-in-out infinite;
}
.z-sum-item:nth-child(2){animation-delay:.35s}
.z-sum-item:nth-child(3){animation-delay:.8s}
.z-sum-item:nth-child(4){animation-delay:1.25s}
.z-sum-item:nth-child(5){animation-delay:1.7s}
.z-tag{
  flex:0 0 auto; font-size:.68rem; font-weight:700; border-radius:999px;
  padding:.1rem .4rem; background:rgba(240,180,24,.14); color:#8a6508;
  border:1px solid rgba(240,180,24,.28);
}
.z-check{display:grid; gap:.4rem}
.z-check-item{
  display:flex; gap:.5rem; align-items:center; background:#fff; border:1px solid var(--z-line);
  border-radius:12px; padding:.45rem .55rem; font-size:.82rem;
  opacity:0; animation:z-check 6.8s ease-in-out infinite;
}
.z-check-item:nth-child(1){animation-delay:0s}
.z-check-item:nth-child(2){animation-delay:.65s}
.z-check-item:nth-child(3){animation-delay:1.3s}
.z-check-item:nth-child(4){animation-delay:1.95s}
.z-tick{
  width:1.1rem; height:1.1rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.65rem; font-weight:700;
  background:rgba(240,180,24,.15); color:#8a6508; border:1px solid rgba(240,180,24,.35);
}

/* Path compare inside light UI */
.z-paths{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.z-path{
  background:#fff; border:1px solid var(--z-line); border-radius:14px; padding:.65rem .7rem;
  position:relative; overflow:hidden; font-size:.78rem; color:var(--z-ink-2);
}
.z-path.hot{
  border-color:rgba(240,180,24,.45);
  background:linear-gradient(180deg,rgba(240,180,24,.1),#fff 55%);
  box-shadow:inset 0 0 0 1px rgba(240,180,24,.08);
}
.z-path .badge{
  position:absolute; top:.55rem; inset-inline-start:.55rem;
  font-size:.62rem; font-weight:800; background:var(--z-gold); color:#1A1405;
  border-radius:999px; padding:.08rem .4rem;
}
.z-path h5{margin:1.15rem 0 .25rem; font-size:.88rem; color:var(--z-ink)}
.z-path.hot h5{margin-top:1.25rem}

/* Session types chips */
.z-chips{display:flex; flex-wrap:wrap; gap:.35rem}
.z-chips span{
  border:1px solid var(--z-line-2); border-radius:999px; padding:.28rem .65rem;
  font-size:.76rem; color:var(--z-ink-2); animation:z-chip 7s ease-in-out infinite;
}
.z-chips span:nth-child(2){animation-delay:.4s}
.z-chips span:nth-child(3){animation-delay:.8s}
.z-chips span:nth-child(4){animation-delay:1.2s}
.z-chips span:nth-child(5){animation-delay:1.6s}
.z-chips span:nth-child(6){animation-delay:2s}

/* Assistant mini */
.z-assist-wrap{position:relative; min-height:150px}
.z-assist-shell{
  background:#fff; border:1px solid var(--z-line); border-radius:14px; padding:.65rem; min-height:120px;
}
.z-fake{height:7px; border-radius:99px; background:rgba(27,42,74,.08); margin-bottom:.4rem}
.z-fake.s{width:58%}
.z-assist-card{
  position:absolute; inset-inline-start:10px; bottom:8px; width:min(230px,82%);
  background:rgba(255,255,255,.96); border:1px solid rgba(240,180,24,.4);
  border-radius:14px; padding:.65rem; box-shadow:0 12px 28px rgba(27,42,74,.12);
  animation:z-float 4.5s ease-in-out infinite;
}
.z-assist-card .q{font-size:.72rem; color:var(--z-ink-3); margin-bottom:.25rem}
.z-assist-card .a{font-size:.82rem; color:var(--z-ink); line-height:1.5}
.z-assist-card .meta{margin-top:.35rem; font-size:.68rem; color:#8a6508; font-weight:600}
.z-spark{
  position:absolute; inset-inline-end:14px; top:42px;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(180deg,var(--z-gold-soft),var(--z-gold));
  display:grid; place-items:center; font-size:.85rem;
  box-shadow:0 0 0 0 rgba(240,180,24,.35); animation:z-pulseDot 2.4s ease-out infinite;
}

/* Export */
.z-export{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.45rem; padding:.4rem 0}
.z-export .pill{
  background:#fff; border:1px solid var(--z-line); border-radius:12px;
  padding:.55rem .65rem; text-align:center; min-width:96px; font-size:.78rem;
  animation:z-float 3.4s ease-in-out infinite;
}
.z-export .pill strong{display:block; margin-top:.15rem; font-size:.82rem; color:var(--z-ink)}
.z-export .pill:nth-child(3){animation-delay:.35s}
.z-export .pill:nth-child(5){animation-delay:.7s}
.z-export .arr{color:var(--z-gold); font-weight:700; animation:z-float 1.8s ease-in-out infinite}

/* Quality strip */
.z-qhead{display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.35rem}
.z-qhead b{color:#8a6508; font-size:.9rem}
.z-qmeta{font-size:.72rem; color:var(--z-ink-3)}
.z-meter{height:8px; border-radius:99px; background:rgba(27,42,74,.08); overflow:hidden; margin:.35rem 0 .55rem}
.z-meter i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--z-gold),#fff1c2);
  animation:z-bar 2.6s ease-in-out infinite; --w:88%;
}

/* Print mock light */
.z-print{
  background:#fff; border:1px solid var(--z-line); border-radius:12px; overflow:hidden; font-size:.75rem;
}
.z-print-hero{
  background:linear-gradient(135deg,#1B2A4A,#141F3C); color:#FAF6EE; padding:.7rem .8rem; position:relative;
}
.z-print-hero::before{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:url("../assets/najdi-light.svg"); background-size:40px;
}
.z-print-hero strong,.z-print-hero span{position:relative}
.z-print-hero span{display:block; color:var(--z-gold-soft); font-size:.68rem; margin-top:.15rem}
.z-print-body{padding:.65rem .75rem; display:grid; gap:.35rem; color:var(--z-ink)}
.z-print-row{display:flex; gap:.4rem; align-items:flex-start}
.z-print-badge{
  width:1.05rem; height:1.05rem; border-radius:50%; background:var(--z-gold); color:#1A1405;
  display:grid; place-items:center; font-size:.6rem; font-weight:800; flex:0 0 auto;
}
.z-print-nums{display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; margin-top:.25rem}
.z-print-nums div{background:var(--z-cream); border-radius:8px; padding:.3rem; text-align:center}
.z-print-nums b{display:block; font-size:.82rem}
.z-print-nums span{font-size:.62rem; color:var(--z-ink-3)}

/* How-step uses zapp instead of shot-panel */
.how-step .zapp{min-height:240px}
.feature-row .zapp{min-height:250px; height:100%}
.bento-card .zapp{min-height:200px; margin-top:auto}

/* Hero product mock (light) replacing photo dependency */
.hero-zapp{
  position:relative;
}
.stacked-showcase{isolation:isolate}
.stack-layer{
  position:absolute; inset:18px 10px 8px; border-radius:22px; z-index:0; pointer-events:none;
}
.stack-gold{
  background:linear-gradient(180deg, rgba(240,180,24,.55), rgba(255,211,77,.18));
  transform:rotate(7deg) translate(18px,-10px);
  box-shadow:0 18px 40px rgba(240,180,24,.18);
}
.stack-navy{
  background:linear-gradient(180deg, rgba(27,42,74,.85), rgba(20,31,60,.55));
  transform:rotate(-6deg) translate(-16px,8px);
  box-shadow:0 18px 40px rgba(20,31,60,.28);
}
.stacked-showcase .zapp{
  position:relative; z-index:2;
  transform:rotate(-1.4deg);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.stacked-showcase:hover .zapp{transform:rotate(-.4deg) translateY(-4px)}
.hero-zapp{
  border-radius:24px; padding:.85rem;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-zapp .zapp{min-height:340px}
.hero-zapp .zapp-body{padding:.85rem}

.hero-story{min-height:420px}
.hero-story-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:860px){.hero-story-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.hero-col.side{display:flex;flex-direction:column;gap:.55rem}
.hero-step{
  font-size:.72rem;font-weight:700;color:#1A1405;background:linear-gradient(180deg,#FFD34D,#F0B418);
  border-radius:999px;padding:.18rem .55rem;white-space:nowrap;
}
.hero-story .z-assist-card,.hero-story .z-print,.hero-story .z-wa-chip{opacity:.35;transform:translateY(8px)}
.hero-story .z-assist-card.show,.hero-story .z-print.show,.hero-story .z-wa-chip.show{opacity:1;transform:none}

/* Tour: animated app instead of photo pins optional */
.tour-zapp .zapp{min-height:320px}

@media (max-width:920px){
  .z-paths{grid-template-columns:1fr}
  .hero-zapp .zapp{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  html.motion-off .zapp-mic::after,html.motion-off .z-waves i,html.motion-off .z-tr-line,html.motion-off .z-sum-item,html.motion-off .z-check-item,
  html.motion-off .z-assist-card,html.motion-off .z-export .pill,html.motion-off .z-meter i,html.motion-off .z-chips span,html.motion-off .z-live::before,html.motion-off .z-spark{
    animation:none!important;
  }
  html.motion-off .z-tr-line,html.motion-off .z-sum-item,html.motion-off .z-check-item{opacity:1; transform:none}
  html.motion-off .z-meter i{width:var(--w,88%)}
}

/* ===== website-v2-preview enhancements ===== */
.mihrab{position:relative;isolation:isolate}
.mihrab::before{content:"";position:absolute;inset:-18% -8% auto;height:78%;background:radial-gradient(ellipse 42% 70% at 50% 100%, transparent 54%, rgba(240,180,24,.08) 55%, transparent 56%),radial-gradient(ellipse 58% 90% at 50% 100%, transparent 58%, rgba(255,211,77,.05) 59%, transparent 61%);pointer-events:none;z-index:0}
.mihrab > *{position:relative;z-index:1}
.arch-frame{border-radius:999px 999px 28px 28px;border:1px solid rgba(240,180,24,.28);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));padding:1rem .9rem .85rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.22)}
.trap-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:stretch}
.trap-main,.trap-side{border:1px solid var(--line);border-radius:24px;padding:1.2rem;background:rgba(255,255,255,.025)}
.trap-main{background:linear-gradient(160deg, rgba(240,180,24,.08), rgba(255,255,255,.02) 45%);border-color:rgba(240,180,24,.32)}
.trap-list{display:grid;gap:.75rem;margin-top:1rem}
.trap-item{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.85rem .9rem;border-radius:16px;border:1px solid var(--line);background:rgba(11,17,32,.35)}
.trap-item .mark{width:2rem;height:2rem;border-radius:12px;display:grid;place-items:center;background:rgba(240,180,24,.12);border:1px solid rgba(240,180,24,.28);color:var(--gold-soft);font-weight:700;font-size:.85rem}
.trap-item h3{font-size:1rem;margin-bottom:.2rem}
.trap-item p{color:var(--ink-2);font-size:.92rem}
.trap-side h3{margin-bottom:.55rem}
.trap-side p{color:var(--ink-2);margin-bottom:.9rem}
.dual-path{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem}
.path-panel{border-radius:24px;border:1px solid var(--line);padding:1.2rem;background:rgba(255,255,255,.025);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.8rem}
.path-panel.local{border-color:rgba(240,180,24,.4);background:linear-gradient(180deg, rgba(240,180,24,.1), rgba(255,255,255,.02))}
.path-panel .eyebrow{display:inline-flex;width:max-content;align-items:center;gap:.4rem;border-radius:999px;padding:.2rem .65rem;font-size:.78rem;font-weight:700;border:1px solid rgba(240,180,24,.35);color:var(--gold-soft);background:rgba(240,180,24,.08)}
.path-panel h3{font-size:1.25rem}
.path-panel p{color:var(--ink-2)}
.path-points{display:grid;gap:.45rem}
.path-points li{list-style:none;color:var(--ink-2);padding:.45rem 0;border-bottom:1px solid var(--line);display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem}
.path-points li:last-child{border-bottom:0}
.path-points li::before{content:"•";color:var(--gold-soft);font-weight:700}
.honest-note{margin-top:.2rem;font-size:.84rem;color:var(--ink-3);border-top:1px dashed rgba(240,180,24,.25);padding-top:.8rem}
.bento-v2{display:grid;grid-template-columns:repeat(12,1fr);gap:.95rem}
.bento-v2 > *{min-width:0}
.bento-v2 .span-7{grid-column:span 7}
.bento-v2 .span-5{grid-column:span 5}
.bento-v2 .span-4{grid-column:span 4}
.bento-v2 .span-8{grid-column:span 8}
.bento-v2 .span-6{grid-column:span 6}
.bento-v2 .span-12{grid-column:span 12}
.story-rail{display:grid;gap:1rem}
.story-card{display:grid;grid-template-columns:auto 1.05fr .95fr;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:24px;padding:1rem;background:rgba(255,255,255,.025)}
.story-num{width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(240,180,24,.35);color:var(--gold-soft);font-weight:700;background:linear-gradient(180deg, rgba(240,180,24,.16), rgba(240,180,24,.04))}
.story-copy h3{margin-bottom:.35rem;font-size:1.15rem}
.story-copy p{color:var(--ink-2)}
.story-copy .hint{margin-top:.55rem;color:var(--gold-soft);font-size:.86rem}
.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.metric-card{border-radius:20px;border:1px solid var(--line);padding:1.05rem 1rem;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015))}
.metric-card b{display:block;color:var(--gold-soft);font-size:clamp(1.2rem,2.3vw,1.65rem);margin-bottom:.2rem}
.metric-card span{display:block;color:var(--ink-2);font-size:.9rem}
.metric-card small{display:block;margin-top:.35rem;color:var(--ink-3);font-size:.76rem}
.use-bento{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:.85rem}
.use-bento .lead{grid-row:span 2}
.use-rich{border-radius:22px;border:1px solid var(--line);padding:1.15rem;background:rgba(255,255,255,.025);min-height:150px}
.use-rich.lead{background:linear-gradient(160deg, rgba(240,180,24,.1), rgba(255,255,255,.02));border-color:rgba(240,180,24,.32)}
.use-rich h3{margin:.45rem 0 .35rem;font-size:1.05rem}
.use-rich p{color:var(--ink-2);font-size:.92rem}
.use-rich .ico{width:2.2rem;height:2.2rem;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(240,180,24,.28);background:rgba(240,180,24,.1);color:var(--gold-soft);font-weight:700}
.preview-banner{border-bottom:1px solid rgba(240,180,24,.22);background:linear-gradient(90deg, rgba(240,180,24,.12), rgba(27,42,74,.35), rgba(240,180,24,.08));color:var(--cream);font-size:.86rem;text-align:center;padding:.55rem 1rem}

.motion-toggle{
  position:fixed; inset-inline-start:1rem; bottom:1rem; z-index:80;
  border:1px solid rgba(240,180,24,.45); background:rgba(20,31,60,.92); color:#FFD34D;
  border-radius:999px; padding:.55rem .9rem; font-weight:700; font-size:.82rem; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.motion-toggle:hover{background:#1B2A4A}
.soon-pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.84rem;background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--ink)}
.compare-truth{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.truth-card{border-radius:22px;border:1px solid var(--line);padding:1.2rem;background:rgba(255,255,255,.025)}
.truth-card.good{border-color:rgba(240,180,24,.35);background:linear-gradient(180deg, rgba(240,180,24,.09), rgba(255,255,255,.02))}
.truth-card h3{margin-bottom:.7rem}
.truth-card li{list-style:none;padding:.5rem 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.truth-card li:last-child{border-bottom:0}
.feature-rail{display:grid;gap:1.1rem}
.feature-block{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;align-items:stretch;border:1px solid var(--line);border-radius:24px;padding:1rem;background:rgba(255,255,255,.025)}
.feature-block.reverse > .feature-copy{order:2}
.feature-block .feature-copy{padding:.4rem}
.feature-block .feature-copy h3{margin-bottom:.4rem}
.feature-block .feature-copy p{color:var(--ink-2);margin-bottom:.7rem}
.feature-block .how{color:var(--cream);border-inline-start:3px solid rgba(240,180,24,.55);padding-inline-start:.75rem;margin-bottom:.85rem}
.privacy-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:center}
.privacy-stack{display:grid;gap:.8rem}
.privacy-card{border-radius:18px;border:1px solid var(--line);padding:1.05rem 1.1rem;background:rgba(255,255,255,.025)}
.privacy-card h3{margin-bottom:.35rem}
.privacy-card p{color:var(--ink-2)}
.privacy-card.warn{border-color:rgba(240,180,24,.32);background:linear-gradient(135deg, rgba(240,180,24,.09), rgba(255,255,255,.02))}
.dl-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem}
.platform-row{display:grid;grid-template-columns:1.2fr .8fr;gap:.85rem;margin-top:1rem}
.platform-card{border-radius:18px;border:1px solid var(--line);padding:1rem;background:rgba(255,255,255,.03)}
.platform-card.ready{border-color:rgba(240,180,24,.35)}
.platform-card h3{margin:.35rem 0 .3rem}
.platform-card p{color:var(--ink-2);font-size:.9rem}
.footer-note{margin-top:.75rem;color:var(--ink-3);font-size:.82rem}
@media (max-width:980px){
  .trap-grid,.dual-path,.story-card,.metric-strip,.use-bento,.compare-truth,.feature-block,.privacy-hero-grid,.dl-hero-grid,.platform-row{grid-template-columns:1fr}
  .bento-v2 .span-7,.bento-v2 .span-5,.bento-v2 .span-4,.bento-v2 .span-8,.bento-v2 .span-6,.bento-v2 .span-12{grid-column:span 12}
  .use-bento .lead{grid-row:auto}
  .story-card{grid-template-columns:auto 1fr}
  .story-card .zapp{grid-column:1 / -1}
  .feature-block.reverse > .feature-copy{order:initial}
  .mihrab::before{inset:-10% -12% auto;height:55%}
}

/* ===== v2-diff-matrix ===== */
.diff-wrap{border:1px solid var(--line);border-radius:24px;padding:1.1rem;background:rgba(255,255,255,.025);overflow:hidden}
.diff-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.diff-head h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:.2rem 0 .35rem}
.diff-head p{color:var(--ink-2);max-width:42rem}
.diff-legend{display:flex;flex-wrap:wrap;gap:.45rem}
.diff-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diff-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:.92rem}
.diff-table thead th{position:sticky;top:0;background:linear-gradient(180deg,rgba(240,180,24,.14),rgba(20,31,60,.95));color:var(--cream);text-align:start;padding:.9rem .8rem;border-bottom:1px solid rgba(240,180,24,.28)}
.diff-table thead th:first-child{border-start-start-radius:14px}
.diff-table thead th:last-child{border-start-end-radius:14px}
.diff-table tbody th,.diff-table tbody td{padding:.85rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.diff-table tbody th{color:var(--gold-soft);font-weight:700;width:18%;background:rgba(255,255,255,.02)}
.diff-table tbody td{color:var(--ink-2);width:41%}
.diff-table tbody tr:hover td,.diff-table tbody tr:hover th{background:rgba(240,180,24,.05)}
.diff-table tbody tr:last-child th,.diff-table tbody tr:last-child td{border-bottom:0}
.diff-table tbody tr:last-child td[colspan]{color:var(--cream);background:linear-gradient(90deg,rgba(240,180,24,.08),rgba(255,255,255,.02))}
.feature-grid-full{display:grid;grid-template-columns:repeat(12,1fr);gap:.9rem}
.feature-grid-full .f-wide{grid-column:span 8}
.feature-grid-full .f-side{grid-column:span 4}
.feature-grid-full .f-half{grid-column:span 6}
.feature-grid-full .f-third{grid-column:span 4}
.feature-grid-full .f-full{grid-column:span 12}
.hud-demo{position:relative;min-height:210px;border-radius:16px;border:1px solid rgba(27,42,74,.12);background:#fff;overflow:hidden}
.hud-demo .desk{padding:.7rem;display:grid;gap:.35rem}
.hud-demo .desk .ln{height:8px;border-radius:99px;background:rgba(27,42,74,.08)}
.hud-demo .desk .ln.s{width:62%}
.hud-float{position:absolute;inset-inline-start:12px;bottom:12px;width:min(220px,78%);background:rgba(255,255,255,.96);border:1px solid rgba(240,180,24,.4);border-radius:14px;padding:.65rem;box-shadow:0 12px 28px rgba(27,42,74,.14)}
.hud-float .q{font-size:.72rem;color:#6B7590;margin-bottom:.2rem}
.hud-float .a{font-size:.82rem;color:#1B2A4A}
.hud-badge{position:absolute;inset-inline-end:12px;top:12px;font-size:.7rem;font-weight:700;border-radius:999px;padding:.2rem .55rem;background:rgba(27,42,74,.92);color:#FFD34D;border:1px solid rgba(240,180,24,.35)}
@media (max-width:980px){.feature-grid-full .f-wide,.feature-grid-full .f-side,.feature-grid-full .f-half,.feature-grid-full .f-third,.feature-grid-full .f-full{grid-column:span 12}.diff-table{min-width:640px}}


/* ===== Live scenes (JS-driven loops) ===== */
.zapp[data-scene]{position:relative}
.zapp.mini-scene{min-height:150px;margin-top:auto}
.zapp.mini-scene .zapp-dock{padding:.15rem .5rem .45rem}
.zapp.mini-scene .zapp-dock-bar{padding:.25rem .55rem;gap:.35rem}
.zapp.mini-scene .zapp-mic{width:38px;height:38px;margin-top:-14px;font-size:.95rem}
.hero-live-grid{display:grid;grid-template-columns:1fr;gap:.7rem}
@media (min-width:720px){.hero-live-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
.z-rec.compact{padding:.15rem 0;gap:.45rem}
.z-rec.compact .timer{font-size:1.15rem}

.is-press{transform:scale(.94)!important;filter:brightness(.96)}
.zapp-mic,.z-btn-mini,.z-btn-stop,.z-ask-send,.z-spk-toggle,.z-path{transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease}

.zapp[data-scene]{will-change:transform; contain:layout paint}
.zapp.is-playing{box-shadow:0 18px 40px rgba(20,31,60,.18), 0 0 0 1px rgba(240,180,24,.18)}
.z-btn-mini,.z-btn-stop,.z-ask-send,.motion-toggle,.menu-btn,.nav-cta,.btn-primary,.btn-ghost{
  min-height:44px; min-width:44px;
}
.zapp-mic{min-width:52px; min-height:52px; cursor:default}
.z-caret{
  display:inline-block; width:2px; height:1em; margin-inline-start:.15rem;
  background:var(--gold-soft,#FFD34D); vertical-align:-2px; animation:z-typeCaret .8s steps(1) infinite;
}
.z-tr-line.show,.z-tr-line.is-on{opacity:1; transform:none}
.z-waves i{will-change:transform}
.zapp.is-playing .z-waves i{animation:z-wave 1.05s ease-in-out infinite}
.zapp-mic.is-ripple::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid rgba(240,180,24,.55); animation:z-ripple .55s ease-out forwards;
}
.zapp-mic.recording.is-ripple::before{border-color:rgba(226,75,60,.55)}
@keyframes z-ripple{from{transform:scale(.85);opacity:.85}to{transform:scale(1.45);opacity:0}}

.z-live{opacity:.35}
.z-live.on{opacity:1}
.z-waves{opacity:.9}
.z-waves.on,.zapp.is-playing .z-waves{opacity:1}

.z-path-stage{position:relative}
.z-path-pointer{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--z-gold));
  box-shadow:0 6px 16px rgba(240,180,24,.35); border:1px solid rgba(26,20,5,.15);
  inset-inline-start:18%; top:42%; opacity:0; transform:translate(-50%,-50%) scale(.8);
  transition:inset-inline-start .55s ease, opacity .25s ease, transform .25s ease; z-index:2; pointer-events:none;
}
.z-path-pointer.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.z-path-pointer.to-cloud{inset-inline-start:78%}
.z-path.is-selected{border-color:rgba(240,180,24,.55); box-shadow:0 0 0 1px rgba(240,180,24,.2), 0 10px 22px rgba(27,42,74,.08); transform:translateY(-2px)}
.z-path.is-tap{transform:scale(.98)}
.z-consent{
  display:inline-flex; margin-top:.45rem; font-size:.68rem; font-weight:700;
  color:#1A1405; background:rgba(240,180,24,.9); border-radius:999px; padding:.12rem .45rem;
  opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease;
}
.z-consent.show{opacity:1; transform:none}

.z-tr-line{opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease}
.z-tr-line.show{opacity:1; transform:none}
.z-tr-line.typing .z-bubble{box-shadow:0 0 0 1px rgba(240,180,24,.22)}
.z-caret{
  display:inline-block; width:2px; height:.95em; margin-inline-start:.15rem;
  background:var(--z-gold); vertical-align:-2px; animation:z-typeCaret 1s steps(1) infinite;
}
.zapp.is-playing .z-tr-line{animation:none}
.zapp.is-playing .z-tr-line:not(.show){opacity:0}
.zapp.is-playing .z-bubble::after{display:none!important}

.z-spk-head{display:flex; justify-content:space-between; gap:.5rem; align-items:center; margin-bottom:.55rem; flex-wrap:wrap}
.z-spk-toggle{
  border:1px solid var(--z-line-2); background:#fff; color:var(--z-ink);
  border-radius:999px; padding:.28rem .7rem; font-size:.74rem; font-weight:700;
}
.z-spk-toggle.on{background:rgba(240,180,24,.16); border-color:rgba(240,180,24,.4); color:#8a6508}
.z-spk-chips{display:flex; gap:.35rem}
.z-spk-chips span{
  border:1px solid var(--z-line-2); border-radius:999px; padding:.18rem .55rem; font-size:.7rem; color:var(--z-ink-3);
  opacity:.45; transition:opacity .25s ease, background .25s ease, color .25s ease;
}
.z-spk-chips span.on{opacity:1; background:rgba(240,180,24,.14); color:#8a6508; border-color:rgba(240,180,24,.28)}
.z-spk-grid{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
.z-spk-col{
  background:#fff; border:1px solid var(--z-line); border-radius:14px; padding:.55rem;
  opacity:.35; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease, border-color .25s ease, box-shadow .25s ease;
}
.z-spk-col.lit{opacity:1; transform:none}
.z-spk-col.split{box-shadow:0 8px 18px rgba(27,42,74,.06)}
.z-spk-col.a.lit{border-color:rgba(2,132,199,.35); background:linear-gradient(180deg,rgba(2,132,199,.08),#fff 55%)}
.z-spk-col.b.lit{border-color:rgba(5,150,105,.35); background:linear-gradient(180deg,rgba(5,150,105,.08),#fff 55%)}
.z-spk-label{font-size:.72rem; font-weight:700; margin-bottom:.35rem; color:var(--z-ink)}
.z-spk-col .z-bubble{margin-bottom:.35rem}
.z-spk-col .z-bubble.soft{opacity:.8; font-size:.78rem}
@media (max-width:720px){.z-spk-grid{grid-template-columns:1fr}}

.z-meter i{width:8%; transition:width .12s linear}
.z-meter i.filling{animation:none}
.z-bubble .flag{transition:background .25s ease, box-shadow .25s ease}
.z-bubble .flag.on,.flag.on{
  background:rgba(226,118,107,.22); border-bottom:1px dashed rgba(226,118,107,.8);
  box-shadow:0 0 0 1px rgba(226,118,107,.18); border-radius:3px; padding:0 .12rem;
}

.z-template-chips span{animation:none; cursor:default}
.z-template-chips span.active{
  background:rgba(240,180,24,.92); color:#1A1405; border-color:transparent;
  box-shadow:0 6px 14px rgba(240,180,24,.25);
}
.z-sum-item[data-template-item]{opacity:0; transform:translateY(8px); transition:opacity .28s ease, transform .28s ease}
.z-sum-item[data-template-item].show{opacity:1; transform:none}

.z-ask{display:flex; gap:.4rem; align-items:center}
.z-ask-input{
  flex:1; min-height:2.2rem; border:1px solid var(--z-line); border-radius:12px;
  background:#fff; padding:.45rem .65rem; font-size:.82rem; color:var(--z-ink);
  box-shadow:inset 0 1px 0 rgba(27,42,74,.03);
}
.z-ask-send{
  border:0; border-radius:12px; padding:.5rem .8rem; font-size:.8rem; font-weight:700;
  background:linear-gradient(180deg,var(--z-gold-soft),var(--z-gold)); color:#1A1405;
  box-shadow:0 8px 16px rgba(240,180,24,.28);
}
.z-assist-card[data-answer-card]{
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.z-assist-card[data-answer-card].show{opacity:1; transform:none; pointer-events:auto; animation:none}

.hud-demo.lecture .lecture-board,.hud-demo .lecture-board{
  background:linear-gradient(180deg,#f7f3ea,#fff); border-bottom:1px solid rgba(27,42,74,.06); min-height:120px;
}
.board-title{font-size:.78rem; font-weight:700; color:#1B2A4A; margin-bottom:.35rem}
.hud-float[data-hud-float]{
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .35s ease, transform .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.hud-float[data-hud-float].show{opacity:1; transform:none}
.hud-float[data-hud-float].dim{background:rgba(255,255,255,.72); backdrop-filter:blur(2px)}
.hud-badge{opacity:.7}
.hud-badge.blink{animation:z-badgePulse 1.1s ease-in-out infinite; opacity:1}
@keyframes z-badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(240,180,24,.0); transform:scale(1)}50%{box-shadow:0 0 0 8px rgba(240,180,24,.12); transform:scale(1.03)}}

.z-check-item[data-check-item]{opacity:0; transform:translateX(8px); transition:opacity .28s ease, transform .28s ease}
.z-check-item[data-check-item].show{opacity:1; transform:none}
.z-check-item[data-check-item].done .z-tick{
  background:linear-gradient(180deg,var(--z-gold-soft),var(--z-gold)); color:#1A1405; border-color:transparent;
}

.z-print[data-pdf]{
  opacity:0; transform:perspective(900px) rotateX(12deg) translateY(10px);
  transform-origin:top center; transition:opacity .35s ease, transform .45s ease;
}
.z-print[data-pdf].show{opacity:1; transform:none}
.z-print[data-pdf].fold{transform:perspective(900px) rotateX(-8deg) scale(.98)}
.z-wa-chip{
  margin-top:.55rem; display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.4rem .75rem; font-size:.78rem; font-weight:700;
  background:rgba(37,211,102,.12); color:#0b6b36; border:1px solid rgba(37,211,102,.28);
  opacity:0; transform:translateX(-12px); transition:opacity .3s ease, transform .3s ease;
}
.z-wa-chip.show{opacity:1; transform:none}

.z-drop{
  position:relative; border:1.5px dashed rgba(27,42,74,.2); border-radius:14px;
  padding:1rem .8rem; text-align:center; color:var(--z-ink-3); font-size:.8rem;
  background:rgba(255,255,255,.7); overflow:hidden; transition:border-color .25s ease, background .25s ease;
}
.z-drop.hot{border-color:rgba(240,180,24,.55); background:rgba(240,180,24,.08)}
.z-drop-file{
  position:absolute; inset-inline-start:12%; top:-30%;
  background:linear-gradient(180deg,#fff,#f4efe4); border:1px solid rgba(27,42,74,.12);
  border-radius:10px; padding:.35rem .55rem; font-size:.72rem; font-weight:700; color:#1B2A4A;
  box-shadow:0 10px 20px rgba(27,42,74,.12); opacity:0;
  transition:top .45s ease, opacity .25s ease, transform .45s ease;
}
.z-drop-file.dropped{top:28%; opacity:1; transform:rotate(-4deg)}
.z-sessions{display:grid; gap:.35rem; margin-top:.55rem}
.z-session{
  display:flex; justify-content:space-between; gap:.5rem; align-items:center;
  background:#fff; border:1px solid var(--z-line); border-radius:12px; padding:.45rem .55rem;
  font-size:.78rem; color:var(--z-ink-2); opacity:.55; transition:opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.z-session b{color:var(--z-ink); font-size:.82rem}
.z-session.active{opacity:1; border-color:rgba(240,180,24,.4); box-shadow:0 0 0 1px rgba(240,180,24,.12)}
.z-device-badge{opacity:0; transform:scale(.92); transition:opacity .25s ease, transform .25s ease; display:inline-flex; margin-top:.55rem}
.z-device-badge.show,.zapp-pill.z-device-badge.show{opacity:1; transform:none}

.zapp.is-reduced .z-tr-line,
.zapp.is-reduced .z-sum-item,
.zapp.is-reduced .z-check-item,
.zapp.is-reduced .z-assist-card,
.zapp.is-reduced .z-print,
.zapp.is-reduced .z-wa-chip,
.zapp.is-reduced .hud-float,
.zapp.is-reduced .z-device-badge{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html.motion-off .zapp-mic.is-ripple::before,html.motion-off .hud-badge.blink,html.motion-off .z-caret{animation:none!important}
  html.motion-off .z-path-pointer,html.motion-off .z-path,html.motion-off .z-consent,html.motion-off .z-tr-line,html.motion-off .z-spk-col,html.motion-off .z-sum-item,html.motion-off .z-assist-card,
  html.motion-off .hud-float,html.motion-off .z-check-item,html.motion-off .z-print,html.motion-off .z-wa-chip,html.motion-off .z-drop-file,html.motion-off .z-session,html.motion-off .z-device-badge{
    transition:none!important;
  }
}


/* ===== Layer map (system architecture) ===== */
.layer-map{
  --lm-gap:.55rem;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1.1rem;
  align-items:start;
}
.layer-stack{
  position:relative;
  border-radius:28px;
  border:1px solid rgba(240,180,24,.28);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240,180,24,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding:1.15rem 1.05rem 1.25rem;
  overflow:hidden;
  isolation:isolate;
}
.layer-stack::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.35; z-index:0;
  background-image:url("../assets/najdi-light.svg");
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,#000 0%, transparent 30%, transparent 70%, #000 100%);
}
.layer-stack > *{position:relative;z-index:1}
.layer-stack-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:1rem;
}
.layer-stack-head h3{font-size:1.15rem; margin:0}
.layer-mode-switch{
  display:inline-flex; gap:.35rem; padding:.28rem;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(11,17,32,.45);
}
.layer-mode-switch button{
  border:0; background:transparent; color:var(--ink-2);
  border-radius:999px; padding:.45rem .9rem; font-weight:600; font-size:.84rem;
  cursor:pointer; min-height:40px; transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.layer-mode-switch button[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#1A1405; box-shadow:0 8px 18px rgba(240,180,24,.25);
}
.layers{
  display:grid; gap:var(--lm-gap);
  counter-reset:layer;
}
.layer-row{
  --accent:var(--gold);
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.85rem;
  align-items:center;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(11,17,32,.42);
  padding:.85rem .95rem;
  transform:translateY(10px);
  opacity:.42;
  transition:opacity .35s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.layer-row::before{
  content:"";
  position:absolute; inset-inline-start:0; top:12%; bottom:12%; width:3px;
  border-radius:99px; background:var(--accent); opacity:.35;
  transition:opacity .3s ease, box-shadow .3s ease;
}
.layer-row.is-on{
  opacity:1; transform:none;
  border-color:rgba(240,180,24,.38);
  background:linear-gradient(135deg, rgba(240,180,24,.1), rgba(255,255,255,.03) 55%);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.layer-row.is-on::before{
  opacity:1; box-shadow:0 0 18px rgba(240,180,24,.35);
}
.layer-row.is-dim{opacity:.28; transform:scale(.985)}
.layer-ico{
  width:2.55rem; height:2.55rem; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid rgba(240,180,24,.28);
  background:rgba(240,180,24,.1);
  color:var(--gold-soft); font-weight:800; font-size:.95rem;
  flex:0 0 auto;
}
.layer-copy h4{font-size:1rem; margin:0 0 .15rem; color:var(--cream)}
.layer-copy p{margin:0; color:var(--ink-2); font-size:.88rem; line-height:1.55}
.layer-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.25rem;
  text-align:end; min-width:5.5rem;
}
.layer-meta b{
  font-size:.78rem; font-weight:700; color:var(--gold-soft);
  border:1px solid rgba(240,180,24,.28); border-radius:999px;
  padding:.15rem .55rem; background:rgba(240,180,24,.08); white-space:nowrap;
}
.layer-meta span{font-size:.72rem; color:var(--ink-3)}
.layer-flow{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  color:var(--ink-3); font-size:.72rem; padding:.15rem 0;
  opacity:.7;
}
.layer-flow i{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(240,180,24,.45);
  animation:lm-dot 1.6s ease-out infinite;
}
.layer-flow i:nth-child(2){animation-delay:.2s}
.layer-flow i:nth-child(3){animation-delay:.4s}
@keyframes lm-dot{
  0%{transform:translateY(0); box-shadow:0 0 0 0 rgba(240,180,24,.4)}
  50%{transform:translateY(2px); box-shadow:0 0 0 6px rgba(240,180,24,0)}
  100%{transform:translateY(0); box-shadow:0 0 0 0 rgba(240,180,24,0)}
}
.layer-caption{
  margin-top:.9rem; font-size:.84rem; color:var(--ink-3);
  border-top:1px dashed rgba(240,180,24,.22); padding-top:.75rem;
}
.layer-side{
  display:grid; gap:.85rem;
}
.layer-side-card{
  border-radius:22px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); padding:1.05rem 1.1rem;
  position:relative; overflow:hidden;
}
.layer-side-card.hot{
  border-color:rgba(240,180,24,.35);
  background:linear-gradient(160deg, rgba(240,180,24,.1), rgba(255,255,255,.02));
}
.layer-side-card h4{margin:0 0 .4rem; font-size:1.05rem}
.layer-side-card p{margin:0; color:var(--ink-2); font-size:.9rem}
.layer-side-card ul{margin:.65rem 0 0; padding:0; display:grid; gap:.4rem}
.layer-side-card li{
  list-style:none; color:var(--ink-2); font-size:.88rem;
  display:flex; gap:.45rem; align-items:flex-start;
  padding:.35rem 0; border-bottom:1px solid var(--line);
}
.layer-side-card li:last-child{border-bottom:0}
.layer-side-card li::before{content:"▸"; color:var(--gold-soft); font-weight:700}

/* Device ladder */
.device-ladder{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:1rem;
}
.device-tier{
  border-radius:20px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); padding:1rem .9rem;
  display:flex; flex-direction:column; gap:.45rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden;
}
.device-tier::after{
  content:""; position:absolute; inset:auto -20% -40% auto; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle, rgba(240,180,24,.12), transparent 70%);
  pointer-events:none;
}
.device-tier:hover{transform:translateY(-2px); border-color:rgba(240,180,24,.35)}
.device-tier.best{
  border-color:rgba(240,180,24,.42);
  background:linear-gradient(180deg, rgba(240,180,24,.12), rgba(255,255,255,.02));
  box-shadow:0 16px 36px rgba(0,0,0,.2);
}
.device-tier .tier-label{
  display:inline-flex; width:max-content; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:800; color:#1A1405;
  background:var(--gold); border-radius:999px; padding:.12rem .5rem;
}
.device-tier.best .tier-label{background:linear-gradient(180deg,var(--gold-soft),var(--gold))}
.device-tier h4{font-size:.98rem; margin:.15rem 0 0; color:var(--cream)}
.device-tier .hw{font-size:.82rem; color:var(--ink-3)}
.device-tier .rec{
  margin-top:auto; padding-top:.55rem;
  border-top:1px dashed rgba(240,180,24,.22);
  font-size:.86rem; color:var(--ink-2);
}
.device-tier .rec b{color:var(--gold-soft); display:block; margin-bottom:.2rem; font-size:.9rem}
.device-tier .cost{
  display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem;
}
.device-tier .cost span{
  font-size:.7rem; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:.12rem .45rem;
  background:rgba(255,255,255,.03);
}

/* How flow strip */
.how-flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
}
.how-flow-card{
  border-radius:22px; border:1px solid var(--line);
  background:rgba(255,255,255,.025); padding:1.05rem;
  position:relative; min-height:160px;
  transition:border-color .25s ease, transform .25s ease;
}
.how-flow-card:hover{border-color:rgba(240,180,24,.35); transform:translateY(-2px)}
.how-flow-card .n{
  width:2.2rem; height:2.2rem; border-radius:50%;
  display:grid; place-items:center; font-weight:800;
  background:linear-gradient(180deg,rgba(240,180,24,.2),rgba(240,180,24,.05));
  border:1px solid rgba(240,180,24,.35); color:var(--gold-soft); margin-bottom:.65rem;
}
.how-flow-card h3{font-size:1.02rem; margin-bottom:.35rem}
.how-flow-card p{color:var(--ink-2); font-size:.9rem}
.how-flow-card .hint{margin-top:.55rem; font-size:.8rem; color:var(--gold-soft)}

/* Consume meters */
.consume-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem}
.consume-list{display:grid; gap:.65rem}
.consume-item{
  display:grid; grid-template-columns:7.5rem 1fr auto; gap:.6rem; align-items:center;
  border:1px solid var(--line); border-radius:16px; padding:.75rem .85rem;
  background:rgba(255,255,255,.025);
}
.consume-item b{color:var(--gold-soft); font-size:.9rem}
.consume-item span{color:var(--ink-2); font-size:.86rem}
.consume-bar{
  height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden;
  grid-column:2 / -1;
}
.consume-bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#fff1c2);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.consume-item.in .consume-bar i{width:var(--w,50%)}
.consume-note{font-size:.84rem; color:var(--ink-3); margin-top:.55rem}

@media (max-width:980px){
  .layer-map,.device-ladder,.how-flow,.consume-grid{grid-template-columns:1fr}
  .device-ladder{grid-template-columns:1fr 1fr}
  .layer-row{grid-template-columns:auto 1fr}
  .layer-meta{align-items:flex-start; text-align:start; grid-column:2}
  .consume-item{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{margin-top:1.5rem}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;inset-inline:0;top:64px;background:rgba(11,17,32,.97);border-bottom:1px solid var(--line);padding:1rem;flex-direction:column;z-index:70}
  .menu-btn{display:inline-flex;margin-inline-start:auto}
  .feature-grid-full,.use-bento{grid-template-columns:1fr}
  .bento-card,.use-rich{padding:1rem}
  .wrap{width:calc(100% - 1.5rem)}
}
@media (max-width:560px){
  .device-ladder{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.motion-off .layer-row,html.motion-off .layer-flow i{transition:none!important;animation:none!important}
  html.motion-off .layer-row{opacity:1;transform:none}
}

.layers .layer-row + .layer-row{margin-top:2px}
.layer-row:not([hidden]) + .layer-row:not([hidden]){box-shadow:0 -10px 0 -8px rgba(240,180,24,.12)}