/* LunaGuard — Fleek-style technical dark redesign */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#000;color:#e9e9ea;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,svg{display:block;max-width:100%}
::selection{background:#a78bfa;color:#000}

/* === MONOSPACE GROUPS === */
.mono,.num,.divider,.rail,.tb-link,.tb-sep,.bullets li,.fn,.badge,
.scroll-indicator,.foot-cols h4,.marquee-track,.hero-meta,
.btn,.pill,.brand,.foot-brand,.tag{
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* === GLOBAL DOT GRID OVERLAY === */
.grid-bg{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
}

/* === TOP BAR === */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tb-left{display:flex;align-items:center;gap:18px}
.brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em}
.brand-mark{width:18px;height:18px;color:#a78bfa}
.tb-sep{color:rgba(255,255,255,.2);font-size:11px}
.tb-link{font-size:11px;letter-spacing:.06em;text-transform:lowercase;color:rgba(255,255,255,.55);transition:color .2s}
.tb-link:hover{color:#fff}
.tb-right{display:flex;gap:8px}
.pill{
  display:inline-flex;align-items:center;
  padding:8px 14px;border:1px solid rgba(255,255,255,.15);border-radius:2px;
  font-size:11px;letter-spacing:.06em;text-transform:lowercase;
  transition:all .18s ease;
}
.pill.ghost:hover{border-color:#fff;background:rgba(255,255,255,.04)}
.pill.solid{background:#fff;color:#000;border-color:#fff}
.pill.solid:hover{background:#a78bfa;border-color:#a78bfa;color:#000}

/* === LEFT RAIL (section index) === */
.rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:14px;
  font-size:10px;color:rgba(255,255,255,.25);
  letter-spacing:.05em;
}
.rail-i{cursor:pointer;transition:color .2s}
.rail-i.active{color:#fff;text-decoration:underline;text-underline-offset:4px}
.rail-i:hover{color:#fff}

/* === SECTIONS === */
.sec{position:relative;max-width:1280px;margin:0 auto;padding:120px 80px 80px}
.sec.hero{max-width:1560px;padding:96px 56px 48px}
.num{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.12em;margin-bottom:18px}

/* === HERO (01) === */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:140px}
.hero-grid{display:grid;grid-template-columns:0.78fr 1.35fr;gap:36px;align-items:center;width:100%}
.hero h1{
  font-size:clamp(38px,6vw,76px);line-height:.95;letter-spacing:-.02em;
  margin:0 0 26px;text-transform:uppercase;font-weight:700;
}
.hero h1 .accent{color:#a78bfa}
.lead{color:rgba(255,255,255,.65);max-width:480px;font-size:15px;margin:0 0 32px}
.hero-ctas{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border-radius:2px;
  font-size:11px;letter-spacing:.08em;text-transform:lowercase;
  border:1px solid;cursor:pointer;transition:all .18s ease;
}
.btn.primary{background:#fff;color:#000;border-color:#fff}
.btn.primary:hover{background:#a78bfa;border-color:#a78bfa}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.03)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:rgba(255,255,255,.4);align-items:center}
.hero-meta .dot{color:rgba(255,255,255,.18)}

/* GLOBE */
.globe-wrap{position:relative;aspect-ratio:1/1;width:100%;max-width:920px;margin:0 0 0 auto;overflow:visible}
.globe{width:100%;height:100%;overflow:visible}
@keyframes globe-rot{to{transform:rotate(360deg)}}
.globe .grid-line{stroke:rgba(255,255,255,.09);stroke-width:.6;fill:none}
.globe .equator{stroke:rgba(255,255,255,.16);stroke-width:.7;fill:none}
.globe .frame{stroke:rgba(255,255,255,.12);stroke-width:.8;fill:none}
.globe .dot{fill:rgba(255,255,255,.3)}
/* globe nodes — dim by default, bright when .is-active */
.node-grp{cursor:default}
.node-grp .leader{stroke:rgba(255,255,255,.18);stroke-width:.6;fill:none;stroke-dasharray:2 3;transition:stroke .9s ease,stroke-opacity .9s ease,opacity .9s ease;opacity:.5}
.node-grp .node-dot{fill:rgba(167,139,250,.55);transition:fill .9s ease,r .9s ease,filter .9s ease}
.node-grp .node-glow{fill:rgba(167,139,250,.0);transition:fill .9s ease,r .9s ease}
.node-grp .node-label{font-family:'JetBrains Mono',monospace;font-size:13px;fill:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;transition:fill .9s ease,opacity .9s ease;font-weight:500;opacity:.55}
.node-grp.is-active .leader{stroke:rgba(167,139,250,.85);opacity:1}
.node-grp.is-active .node-dot{fill:#fff;r:5;filter:drop-shadow(0 0 10px #a78bfa)}
.node-grp.is-active .node-glow{fill:rgba(167,139,250,.22);r:18}
.node-grp.is-active .node-label{fill:#fff;opacity:1}
/* travelling arc between consecutive active nodes */
.active-arc{stroke:rgba(167,139,250,.95);stroke-width:1.2;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(167,139,250,.6));opacity:0;pointer-events:none}
/* tiny pulsing dot around active node */
@keyframes node-pulse{0%,100%{r:5;opacity:1}50%{r:6;opacity:.8}}
.node-grp.is-active .node-dot{animation:node-pulse 2.4s ease-in-out infinite}
.scroll-indicator{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.1em;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* === MARQUEE === */
.marquee{
  margin:60px 0;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;white-space:nowrap;
  background:rgba(255,255,255,.015);
}
.marquee-track{
  display:inline-block;
  font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  animation:slide 50s linear infinite;will-change:transform;
}
.marquee-track span{margin-right:32px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === DIVIDER === */
.divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto 60px;max-width:560px;
  font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.5);
}
.divider::before,.divider::after{
  content:'';flex:1;height:0;border-top:1px dashed rgba(255,255,255,.18);
}
.diamond{display:inline-block;width:8px;height:8px;border:1px solid rgba(255,255,255,.4);transform:rotate(45deg);margin:0 4px}

/* === STACK (02) === */
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.stack-info h2{
  font-size:clamp(28px,3.5vw,44px);line-height:1.05;
  font-weight:700;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 28px;
}
.bullets{list-style:none;padding:0;margin:0;font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.75)}
.bullets li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:14px;align-items:center}
.bullets li::before{content:'/';color:rgba(167,139,250,.7)}
.iso-wrap{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1/1}
.iso{width:100%;height:100%}
.iso .layer-fill{fill:rgba(167,139,250,.04)}
.iso .layer-stroke{stroke:rgba(255,255,255,.4);stroke-width:1;fill:none}
.iso .layer-grid{stroke:rgba(255,255,255,.12);stroke-width:.5;fill:none}
.iso .layer-accent{fill:#a78bfa}
.iso .leader{stroke:rgba(255,255,255,.3);stroke-width:.6;fill:none;stroke-dasharray:2 3}
.iso text{font-family:'JetBrains Mono',monospace;font-size:9px;fill:rgba(255,255,255,.65);letter-spacing:.08em}

/* === FEATURES (03) === */
.feat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}
.feat{
  background:#000;padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .2s ease;min-height:200px;
}
.feat:hover{background:rgba(167,139,250,.05)}
.fn{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.1em}
.feat h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.005em}
.feat p{margin:0;color:rgba(255,255,255,.6);font-size:14px}

/* === PRICING (04) === */
.sub{text-align:center;color:rgba(255,255,255,.5);max-width:560px;margin:0 auto 40px;font-size:14px}
.plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;max-width:1100px;margin:0 auto;
}
.plan{
  position:relative;padding:28px 22px;
  border:1px solid rgba(255,255,255,.1);background:#000;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s ease,transform .2s ease;
  overflow:visible;
}
.plan:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.plan.featured{
  border-color:#a78bfa;
  box-shadow:0 0 0 1px rgba(167,139,250,.25),0 0 50px -20px rgba(167,139,250,.6);
}
.badge{font-size:10px;color:#a78bfa;letter-spacing:.12em}
.plan .dur{font-size:13px;color:rgba(255,255,255,.6)}
.plan .pricerow{display:flex;align-items:baseline;gap:10px;margin-top:auto}
.plan .price{font-size:36px;font-weight:700;letter-spacing:-.02em;font-family:'Space Grotesk',sans-serif}
.plan .old{font-size:13px;color:rgba(255,255,255,.3);text-decoration:line-through}
.plan .perday{font-size:11px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace}
.plan .btn{margin-top:6px}
.plan-tag{
  position:absolute;top:-10px;right:14px;
  background:#a78bfa;color:#000;
  padding:3px 10px;font-size:10px;letter-spacing:.08em;text-transform:lowercase;
  font-family:'JetBrains Mono',monospace;
}

/* === FAQ (05) === */
.faq-list{
  max-width:780px;margin:0 auto;
  display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}
.faq-list details{background:#000}
.faq-list summary{
  padding:20px 24px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:15px;font-weight:500;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+';font-family:'JetBrains Mono',monospace;
  color:rgba(255,255,255,.5);font-size:18px;transition:transform .2s;
}
.faq-list details[open] summary::after{transform:rotate(45deg);color:#a78bfa}
.faq-list details p{margin:0;padding:0 24px 22px;color:rgba(255,255,255,.6);font-size:14px;max-width:680px}

/* === FOOTER (06) === */
.foot{padding-bottom:40px}
.foot-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:60px;padding-top:40px}
.foot-brand{font-size:14px;color:#fff;display:flex;flex-direction:column;gap:8px}
.foot-brand .muted{font-size:11px;color:rgba(255,255,255,.4)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.foot-cols h4{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.12em;margin:0 0 12px;font-weight:400}
.foot-cols a,.foot-cols span.l{display:block;padding:5px 0;color:rgba(255,255,255,.7);font-size:13px}
.foot-cols a:hover{color:#fff}
.foot-cols .muted{color:rgba(255,255,255,.4);font-size:11px}
.foot-bottom{
  margin-top:50px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;
  font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.1em;
  font-family:'JetBrains Mono',monospace;
}

/* === REVEAL ANIMATION === */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* === RESPONSIVE === */
@media(max-width:1100px){
  .sec{padding:100px 40px 70px}
}
@media(max-width:900px){
  .sec{padding:80px 22px 60px}
  .rail{display:none}
  .topbar{padding:14px 16px}
  .tb-left .tb-link{display:none}
  .hero{padding-top:120px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .stack-grid{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .marquee{margin:40px 0}
  .divider{margin-bottom:40px}
}
@media(max-width:520px){
  .pill{font-size:10px;padding:7px 11px}
  .brand span{display:none}
  .feat{padding:26px 22px}
}

/* indicator-block-replaced */

/* ─────────── TRIAL: modal overlay ─────────── */
.trial-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center;
  padding:80px 20px 40px; overflow-y:auto;
  opacity:0; transition:opacity .25s ease;
}
.trial-overlay.is-open{ display:flex; opacity:1 }
.trial-modal{
  position:relative; width:100%; max-width:520px;
  background:#0a0a0a; border:1px solid rgba(167,139,250,.25);
  border-radius:14px; padding:28px 28px 32px;
  box-shadow:0 20px 80px rgba(167,139,250,.18), 0 0 0 1px rgba(255,255,255,.02);
  font-family:'Space Grotesk', sans-serif;
  transform:translateY(12px) scale(.98); transition:transform .25s ease;
}
.trial-overlay.is-open .trial-modal{ transform:translateY(0) scale(1) }
.trial-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:-4px 0 22px; padding-bottom:14px;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.trial-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#a78bfa; letter-spacing:.1em; text-transform:uppercase }
.trial-close{
  background:none; border:0; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:18px; color:rgba(255,255,255,.5);
  width:30px; height:30px; line-height:1; padding:0;
  transition:color .15s ease;
}
.trial-close:hover{ color:#fff }

.trial-step{ display:none }
.trial-step.is-active{ display:block; animation:trial-fade .35s ease }
@keyframes trial-fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

.trial-h{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:rgba(255,255,255,.55);
  letter-spacing:.1em; margin:0 0 8px; font-weight:500;
}
.trial-sub{ font-size:14px; color:rgba(255,255,255,.7); margin:0 0 18px; line-height:1.5 }
.mono-em{ font-family:'JetBrains Mono',monospace; color:#fff; font-size:12px; padding:1px 6px; background:rgba(167,139,250,.12); border-radius:4px }

.trial-input{
  width:100%; box-sizing:border-box;
  background:#000; border:1px solid rgba(255,255,255,.18);
  color:#fff; font-family:'JetBrains Mono',monospace; font-size:15px;
  padding:14px 16px; border-radius:8px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.trial-input::placeholder{ color:rgba(255,255,255,.3); letter-spacing:.04em }
.trial-input:focus{ border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,.18) }
.trial-input.is-error{ border-color:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.15) }
.trial-code{ text-align:center; letter-spacing:.6em; font-size:18px; padding:16px 12px }

.trial-msg{
  min-height:18px; margin:8px 0 18px; padding:0;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:#ff8b8b; letter-spacing:.04em;
}
.trial-msg.is-ok{ color:#7ee787 }

.trial-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:14px 22px;
  background:#fff; color:#000; border:0; border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em;
  cursor:pointer; transition:background .15s ease, opacity .15s ease, transform .1s ease;
  text-decoration:none; text-align:center;
}
.trial-btn:hover{ background:#a78bfa; color:#000 }
.trial-btn:active{ transform:scale(.985) }
.trial-btn:disabled{ opacity:.55; cursor:wait }
.trial-btn-text{ transition:opacity .15s ease }
.trial-btn-spin{
  position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(0,0,0,.2); border-top-color:#000;
  opacity:0; animation:trial-spin .8s linear infinite;
}
.trial-btn.is-loading .trial-btn-text{ opacity:0 }
.trial-btn.is-loading .trial-btn-spin{ opacity:1 }
@keyframes trial-spin{ to{transform:rotate(360deg)} }

.trial-btn-violet{ background:#a78bfa; color:#000 }
.trial-btn-violet:hover{ background:#fff }
.trial-btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25) }
.trial-btn-ghost:hover{ background:rgba(255,255,255,.06); color:#fff }

.trial-link{
  display:block; margin:14px auto 0; padding:6px 4px;
  background:none; border:0; color:rgba(255,255,255,.5);
  font-family:'JetBrains Mono',monospace; font-size:12px; cursor:pointer;
  text-align:center; transition:color .15s ease;
}
.trial-link:hover{ color:#a78bfa }
.trial-link[disabled]{ opacity:.35; cursor:not-allowed }

.trial-email-echo{ color:#a78bfa; font-family:'JetBrains Mono',monospace; font-size:12px }

/* STEP 3: key panel */
.trial-qr{
  display:flex; align-items:center; justify-content:center;
  margin:6px auto 22px; width:240px; height:240px;
  background:#fff; border-radius:10px; padding:10px; box-sizing:border-box;
}
.trial-qr img{ width:100%; height:100%; display:block; image-rendering:pixelated }

.trial-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.1em; margin:0 0 6px; text-transform:lowercase }
.trial-suburl-row{ display:flex; gap:8px; margin:0 0 18px }
.trial-suburl{ font-size:11px; padding:11px 12px; flex:1; min-width:0 }
.trial-copy{
  flex:0 0 auto; padding:11px 14px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; cursor:pointer; letter-spacing:.06em;
  transition:background .15s ease, border-color .15s ease;
}
.trial-copy:hover{ background:rgba(167,139,250,.12); border-color:#a78bfa; color:#a78bfa }
.trial-copy.is-copied{ background:#a78bfa; color:#000; border-color:#a78bfa }

.trial-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 22px }

.trial-foot{
  display:flex; align-items:flex-start; gap:10px;
  margin:0; padding:14px 16px;
  background:rgba(167,139,250,.08); border:1px dashed rgba(167,139,250,.3); border-radius:8px;
  font-size:13px; color:rgba(255,255,255,.75); line-height:1.55;
}
.trial-foot a{ color:#a78bfa; text-decoration:none; border-bottom:1px dashed rgba(167,139,250,.5) }
.trial-foot a:hover{ color:#fff; border-color:#fff }
.trial-dot{ flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#a78bfa; margin-top:6px; box-shadow:0 0 8px #a78bfa }

@media(max-width:520px){
  .trial-modal{ padding:22px 18px 24px }
  .trial-actions{ grid-template-columns:1fr }
  .trial-suburl-row{ flex-direction:column }
}

/* ── trial-indicator-old-removed ── */

/* ───────────────── MOBILE-FIRST FIXES (override) ───────────────── */

/* 1) Tablet & narrow desktop */
@media(max-width:1100px){
  .sec{padding:96px 36px 64px}
  .sec.hero{padding:88px 36px 40px}
  .hero-grid{gap:28px}
  .globe-wrap{max-width:560px;margin:0 auto}
}

/* 2) Tablet portrait — collapse hero to single column, drop side rail */
@media(max-width:900px){
  .sec{padding:72px 24px 56px}
  .sec.hero{padding:84px 24px 32px;min-height:auto}
  .rail{display:none}
  .topbar{padding:12px 16px}
  .tb-left .tb-link, .tb-left .tb-sep{display:none}
  .tb-right{gap:6px}
  .hero{min-height:auto;padding-top:80px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-right{order:2}
  .globe-wrap{max-width:340px;margin:0 auto}
  .stack-grid{grid-template-columns:1fr;gap:36px}
  .iso-wrap{max-width:380px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .marquee{margin:40px 0}
  .divider{margin-bottom:36px;font-size:10px;letter-spacing:.14em;padding:0 12px}
  .trial-indicator{display:none}
}

/* 3) Phone — full mobile */
@media(max-width:640px){
  body{font-size:14px}
  .sec{padding:56px 18px 44px}
  .sec.hero{padding:80px 18px 28px}

  /* topbar */
  .pill-sfx{display:none}
  .pill{font-size:11px;padding:8px 12px;letter-spacing:.05em}
  .topbar{padding:10px 14px}
  .brand{font-size:12px;gap:6px}
  .brand-mark{width:16px;height:16px}

  /* hero */
  .num{font-size:10px;letter-spacing:.14em;margin-bottom:12px}
  .hero h1{font-size:clamp(34px, 10vw, 52px);line-height:.96}
  .hero .lead{font-size:14px;line-height:1.55;margin:18px 0 22px}
  .hero-ctas{margin-bottom:22px;gap:8px}
  .hero-ctas .btn{padding:13px 18px;font-size:11px;flex:1;justify-content:center;text-align:center;min-width:140px}
  .hero-meta{font-size:10px;letter-spacing:.04em;gap:6px}
  .hero-meta .dot{margin:0 -2px}
  .globe-wrap{max-width:280px}

  /* stack */
  .stack-info h2{font-size:clamp(26px, 8vw, 36px);margin-bottom:20px}
  .bullets{font-size:12px}
  .bullets li{padding:10px 0;gap:10px}
  .iso-wrap{max-width:300px}

  /* features grid */
  .feat-grid{grid-template-columns:1fr}
  .feat{padding:24px 20px;min-height:auto;gap:10px}
  .feat h3{font-size:16px}
  .feat p{font-size:13px;line-height:1.5}
  .fn{font-size:10px}

  /* pricing */
  .sub{font-size:13px;margin-bottom:28px;padding:0 4px}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan{padding:24px 20px}

  /* faq */
  .faq-list summary{font-size:14px;padding:18px 18px}
  .faq-list summary::after{font-size:18px}
  .faq-list details p{padding:0 18px 20px;font-size:13px;line-height:1.55}

  /* footer */
  .foot-grid{padding-top:30px;gap:24px}
  .foot-cols{grid-template-columns:1fr;gap:24px}
  .foot-brand{font-size:13px}
  .foot-cols a, .foot-cols span.l{font-size:12px;padding:4px 0}
  .foot-bottom{font-size:10px;flex-direction:column;align-items:flex-start;gap:8px;padding-top:24px}

  /* marquee */
  .marquee{margin:32px 0;padding:9px 0}
  .marquee-track{font-size:10px;letter-spacing:.1em}
  .marquee-track span{margin-right:24px}

  /* divider */
  .divider{font-size:9.5px;letter-spacing:.1em;padding:0 8px;gap:8px}
  .diamond{width:6px;height:6px;margin:0 2px}

  /* trial modal — tighter */
  .trial-overlay{padding:48px 12px 24px}
  .trial-modal{padding:22px 18px 24px;border-radius:12px}
  .trial-h{font-size:12px;margin-bottom:6px}
  .trial-sub{font-size:13px;margin-bottom:16px}
  .trial-input{font-size:14px;padding:12px 14px}
  .trial-code{font-size:16px;letter-spacing:.5em;padding:14px 10px}
  .trial-btn{padding:13px 18px;font-size:12px}
  .trial-qr{width:200px;height:200px;padding:8px}
  .trial-qr img{width:100%;height:100%}
  .trial-actions{grid-template-columns:1fr;gap:8px}
  .trial-suburl-row{flex-direction:column;gap:6px}
  .trial-suburl{font-size:10px;padding:10px 11px}
  .trial-foot{font-size:12px;padding:12px 14px}
}

/* 4) Tiny phones */
@media(max-width:380px){
  .pill{font-size:10px;padding:7px 10px}
  .hero h1{font-size:clamp(30px, 10vw, 44px)}
  .stack-info h2{font-size:clamp(24px, 8vw, 32px)}
  .globe-wrap{max-width:240px}
  .iso-wrap{max-width:260px}
}

/* ─────────── TRIAL: arrow points at .try pill (drawn animation) ─────────── */
.try-wrap{ position:relative; display:inline-flex; align-items:center }
.pill.ghost.trial-trigger{ cursor:pointer }

.trial-indicator{
  position:absolute;
  top:calc(100% + 14px);
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none; z-index:50;
}
.trial-arrow{
  width:40px; height:54px; display:block;
  filter:drop-shadow(0 0 6px rgba(167,139,250,.45));
}
.trial-line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation: trial-draw 3.4s cubic-bezier(.55,.08,.3,1) infinite;
}
.trial-head{
  opacity:0;
  transform-origin:40px 10px;
  transform:translateY(4px);
  animation: trial-head 3.4s cubic-bezier(.55,.08,.3,1) infinite;
}
.trial-caption{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; color:#a78bfa;
  letter-spacing:.06em; text-align:center; line-height:1.25;
  text-transform:lowercase; white-space:nowrap;
  opacity:0; transform:translateY(-3px);
  animation: trial-cap 3.4s cubic-bezier(.55,.08,.3,1) infinite;
}

@keyframes trial-draw{
   0%  { stroke-dashoffset:100; opacity:0 }
   8%  { opacity:.95 }
  45%  { stroke-dashoffset:0;  opacity:.95 }
  82%  { stroke-dashoffset:0;  opacity:.95 }
  96%  { opacity:0 }
 100%  { stroke-dashoffset:0;  opacity:0 }
}
@keyframes trial-head{
   0%,38% { opacity:0; transform:translateY(4px) scale(.85) }
  52%,82% { opacity:.95; transform:translateY(0) scale(1) }
  96%,100%{ opacity:0; transform:translateY(0) scale(1) }
}
@keyframes trial-cap{
   0%,50% { opacity:0; transform:translateY(-3px) }
  62%,82% { opacity:.95; transform:translateY(0) }
  96%,100%{ opacity:0; transform:translateY(-3px) }
}

@media(max-width:900px){ .trial-indicator{ display:none } }
@media(prefers-reduced-motion:reduce){
  .trial-line,.trial-head,.trial-caption{ animation:none; opacity:.85; stroke-dashoffset:0 }
  .trial-head,.trial-caption{ transform:none }
}