/* ============================================================
   MAPVERA one page
   Brand: purple #6523D0 + white, Outfit typeface
   ============================================================ */
:root{
  --purple:#6523D0;      /* BRAND background, the dominant colour */
  --purple-600:#5c1fc4;  /* same-hue shades for subtle depth only */
  --purple-700:#521bb2;
  --purple-800:#4a18a2;
  --purple-900:#3f1490;
  --purple-lt:#8248e6;   /* lighter tint for glows */
  --ink:#3f1490;
  --violet:#8b3bf0;
  --lilac:#b98bff;
  --pink:#ff5da2;
  --cyan:#22d3ee;
  --amber:#ffce4d;
  --mint:#3ee6a0;
  --white:#ffffff;
  --paper:#f6f2ff;
  --line:rgba(255,255,255,.14);
  --shadow:0 30px 80px -20px rgba(20,4,60,.6);
  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--white);
  background:var(--purple);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  user-select:none;-webkit-user-select:none;-ms-user-select:none;
  -webkit-touch-callout:none;
}
h1,h2,h3,h4{margin:0;line-height:1.02;letter-spacing:-.02em;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--pink);color:#fff}

.grad{
  background:linear-gradient(100deg,var(--lilac),var(--cyan) 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* buttons moved to /chrome.css (single source of truth) */


/* nav moved to /chrome.css (single source of truth) */


/* ============================================================
   HERO
   ============================================================ */
#content{position:relative;z-index:1} /* above the fixed formbg background */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;padding:7rem clamp(1rem,4vw,3rem) 4rem;
}
.hero__glow{display:none}
.hero__inner{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero__copy{max-width:36rem}
.tag{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.04em;
  padding:.45em 1em;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.05);margin-bottom:1.4rem;text-transform:uppercase}
.hero__title{font-size:clamp(2.7rem,6.2vw,4.6rem);font-weight:800;margin-bottom:1.2rem}
.hero__sub{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.55;max-width:32rem;margin-bottom:1.9rem;font-weight:300}
.hero__actions{display:flex;gap:.8rem;flex-wrap:wrap}

.hero__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:5;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:14px}
.hero__scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:#fff;
  transform:translateX(-50%);animation:scrolldot 1.6s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;top:8px}40%{opacity:1}80%{opacity:0;top:24px}100%{opacity:0}}

/* hero mini-map */
.hero__stage{position:relative;perspective:1200px}
.minimap{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,var(--purple-lt),var(--purple-700));
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);
  transform:rotateY(-14deg) rotateX(6deg) rotateZ(1deg);transform-style:preserve-3d;
  transition:transform .5s var(--ease);animation:floaty 7s ease-in-out infinite}
.hero__stage:hover .minimap{transform:rotateY(-6deg) rotateX(3deg)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -14px}}
.minimap__map{position:absolute;inset:0;width:100%;height:100%}
.minimap__scan{position:absolute;left:0;right:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(185,139,255,.14),transparent);
  animation:scan 5s ease-in-out infinite}
@keyframes scan{0%,100%{top:-40%}50%{top:100%}}
/* hero VIDEO fills the skewed glass frame (object-fit:cover, plays INLINE on iOS via the playsinline attrs
   + this contained box — it can never break out to fullscreen). */
.minimap__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1c1030;cursor:pointer}
/* on-brand purple play button, centred; fades away while playing */
.minimap__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:radial-gradient(circle at 32% 28%,var(--purple-lt),var(--purple) 62%,var(--purple-800));
  box-shadow:0 14px 34px rgba(60,20,140,.5),0 0 0 8px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),opacity .3s ease,box-shadow .25s ease}
.minimap__play svg{width:32px;height:32px;fill:#fff;margin-left:5px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.minimap__play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.5);opacity:.0;animation:playpulse 2.6s ease-out infinite}
@keyframes playpulse{0%{transform:scale(.9);opacity:.55}70%,100%{transform:scale(1.35);opacity:0}}
.minimap__play:hover{transform:translate(-50%,-50%) scale(1.08)}
.minimap__play:active{transform:translate(-50%,-50%) scale(.97)}
.minimap.is-playing .minimap__play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}
@media (prefers-reduced-motion:reduce){.minimap__play::after{animation:none}}
/* shared symbolic-map animation primitives */
@keyframes dash{to{stroke-dashoffset:-56}}
@keyframes drawpath{to{stroke-dashoffset:0}}
.mpin{position:absolute;transform:translate(-50%,-100%);z-index:4;cursor:pointer}
.mpin__dot{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--lilac);border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.mpin__pulse{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--lilac);opacity:.5;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(4.5);opacity:0}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--purple);padding:1rem 0;overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  user-select:none;-webkit-user-select:none;pointer-events:none}
.marquee__track{display:inline-flex;gap:2.5rem;animation:marq 52s linear infinite;will-change:transform}
.marquee__track span{font-size:1.15rem;font-weight:600;display:inline-flex;align-items:center;gap:2.5rem}
.marquee__track span::after{content:"◆";color:#fff;font-size:.7rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section-head{max-width:760px;margin:0 auto;text-align:center;padding:0 1.2rem}
.section-head__kick{display:inline-block;color:#fff;font-weight:600;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem}
.section-head h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;margin-bottom:1rem}
.section-head p{font-size:1.08rem;line-height:1.55;font-weight:300}

/* ============================================================
   LIVING MAP  (symbolic, all generated + animated, no data)
   ============================================================ */
.play{padding:3rem clamp(1rem,4vw,3rem);background:linear-gradient(180deg,var(--purple-700),var(--purple))}
/* Live demo — a real embedded map. Desktop: framed like a monitor. Mobile (≤900px, below): full-bleed. */
.demo{--demo-navh:74px;max-width:1180px;margin:3rem auto 0;padding:0 clamp(1rem,4vw,3rem)}
.demo__monitor{background:#160e28;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;
  box-shadow:0 34px 90px rgba(15,4,40,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.demo__bar{display:flex;align-items:center;gap:.5rem;padding:.1rem .3rem .55rem}
.demo__bar span:not(.demo__url){width:11px;height:11px;border-radius:50%;background:#3a2b58}
.demo__bar span:first-child{background:#ff5f57}.demo__bar span:nth-child(2){background:#febc2e}.demo__bar span:nth-child(3){background:#28c840}
.demo__bar .demo__url{margin-left:.55rem;font-size:.82rem;color:#c4b6e2;font-weight:500;text-decoration:none;
  background:rgba(255,255,255,.06);border-radius:999px;padding:.28rem .85rem;transition:color .2s,background .2s}
.demo__bar .demo__url:hover{color:#fff;background:rgba(255,255,255,.12)}
.demo__screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#fff}
/* The map is a static PREVIEW (page scrolls straight past it); the gate is a transparent click target
   with a centred CTA that opens the interactive map fullscreen in the lightbox (desktop + mobile). */
.demo__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.demo__gate{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:transparent;
  border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.demo__cta{display:inline-flex;align-items:center;gap:.45rem;background:#6523d0;color:#fff;font-weight:700;font-size:1rem;
  padding:.75rem 1.45rem;border-radius:999px;box-shadow:0 16px 36px rgba(101,35,208,.5);transition:transform .2s}
.demo__cta::before{content:"▶";font-size:.72em}
.demo__gate:hover .demo__cta{transform:scale(1.05)}
/* Fullscreen lightbox (the interactive map opens here). White background, no site header — just an
   obvious close button top-right. */
/* Full-screen preview: a solid black "Close Map" BAR at the top that truly pushes the map iframe down
   (flex column, the bar takes its own height) — so it never overlays the map or blocks the map's own
   controls (levels, zoom, GPS locator). */
.demo-lb{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column}
.demo-lb[hidden]{display:none}
.demo-lb__frame{flex:1 1 auto;width:100%;min-height:0;border:0;display:block;background:#fff}
.demo-lb__close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;cursor:pointer;background:#000;color:#fff;font-family:inherit;font-weight:600;font-size:.9rem;letter-spacing:.01em;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 14px 9px;min-height:38px;transition:background .2s}
.demo-lb__close svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;flex:0 0 auto}
.demo-lb__close:hover{background:#1a1a1a}
.demo-lb__close:active{background:#262626}
@media(max-width:600px){.demo-lb__close{font-size:.86rem}}
body.demo-lb-open{overflow:hidden}
body.demo-lb-open .nav{display:none !important} /* hide the marketing header in preview mode */
.demo__neck{width:66px;height:22px;margin:0 auto;background:linear-gradient(#231640,#160e28)}
.demo__base{width:180px;height:12px;margin:0 auto;border-radius:0 0 16px 16px;
  background:linear-gradient(#2a1c48,#160e28);box-shadow:0 22px 34px rgba(15,4,40,.4)}
.living{position:relative;max-width:1180px;margin:3rem auto 0;aspect-ratio:12/7;
  border-radius:calc(var(--radius) + 8px);overflow:hidden;cursor:crosshair;
  background:radial-gradient(130% 120% at 30% 10%,var(--purple-lt),var(--purple-700) 72%);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.living__svg{position:absolute;inset:0;width:100%;height:100%}
.living__scan{position:absolute;left:0;right:0;height:34%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(185,139,255,.10),transparent);
  animation:scan 7s ease-in-out infinite}
.living__legend{position:absolute;top:16px;left:16px;z-index:3;display:flex;gap:.9rem;flex-wrap:wrap;
  background:rgba(20,4,50,.4);backdrop-filter:blur(6px);padding:.5em .9em;border-radius:100px;
  border:1px solid var(--line);font-size:1.56rem;font-weight:500}
.living__legend span{display:inline-flex;align-items:center;gap:.4em}
.living__legend i{width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:1px solid #fff}
.living__hint{position:absolute;bottom:16px;right:18px;z-index:3;font-size:1.64rem;font-weight:600;
  pointer-events:none;letter-spacing:.02em;transition:opacity .4s;
  display:inline-flex;align-items:center;gap:.5em}
.living__hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);
  animation:blink 1.6s ease-in-out infinite}
.living__hint.gone{opacity:0}
.living__tip{display:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* SVG map primitives */
.lg-road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lg-road--main{stroke:rgba(255,255,255,.16);stroke-width:9}
.lg-road--sec{stroke:rgba(255,255,255,.09);stroke-width:5}
.lg-road--dash{stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-dasharray:2 12;
  animation:dash 5s linear infinite}
.lg-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:drawpath 3.2s var(--ease) forwards}
.lg-contour{fill:none;stroke:rgba(185,139,255,.22);stroke-width:1.4;transform-box:fill-box;
  transform-origin:center;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.85}}
.lg-river{fill:none;stroke:rgba(34,211,238,.18);stroke-linecap:round}
.lg-district{opacity:.9}
.lg-block{fill:rgba(255,255,255,.05)}
.lg-courier{filter:drop-shadow(0 0 6px rgba(34,211,238,.9))}
.lg-route{fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-dasharray:7 9;opacity:.7;
  filter:drop-shadow(0 0 5px rgba(34,211,238,.6));animation:dash 4s linear infinite}
.lg-label{font:600 26px var(--font);fill:#fff;paint-order:stroke;
  stroke:rgba(20,4,50,.6);stroke-width:3px}
.lg-labeldot{fill:var(--lilac)}

/* symbolic pin marker (SVG) */
.lg-pin{cursor:pointer;transform-box:fill-box;transform-origin:bottom center}
.lg-pin__body{stroke:#fff;stroke-width:2}
.lg-pin__ring{fill:none;opacity:.5}
.lg-pin:hover .lg-pin__body{filter:brightness(1.15)}

/* dropped-by-click pin */
@keyframes lgdrop{0%{transform:translateY(-60px) scale(.4);opacity:0}
  60%{transform:translateY(4px) scale(1.05)}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes lgripple{0%{r:2;opacity:.6}100%{r:60;opacity:0}}
@keyframes lgpulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.4);opacity:0}}
@keyframes revealLabel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes artdrop{0%{transform:translateY(-16px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:translateY(0);opacity:1}}
/* Use-case art: keep it alive after the intro drop (see artSvg() in script.js) */
.uses__art .art-disc{transform-box:fill-box;transform-origin:center;animation:artbreathe 4s ease-in-out infinite}
.uses__art .art-ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:artping 3.2s ease-out var(--d,0s) infinite}
.uses__art .art-route{animation:artflow 2.4s linear infinite}
.uses__art .art-comet{opacity:.9;animation:artcomet 3.6s linear infinite}
.uses__art .art-halo{transform-box:fill-box;transform-origin:center;opacity:0;animation:arthalo 2.8s ease-out var(--d,0s) infinite}
.uses__art .art-pin{opacity:1;animation:artdrop .6s var(--d,0s) cubic-bezier(.22,1,.36,1) both,artbob 3.4s calc(var(--d,0s) + .6s) ease-in-out infinite}
@keyframes artbreathe{0%,100%{transform:scale(.98);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes artping{0%{transform:scale(.45);opacity:.5}70%{opacity:0}100%{transform:scale(1.95);opacity:0}}
@keyframes artflow{to{stroke-dashoffset:-14}}
@keyframes artcomet{to{stroke-dashoffset:-100}}
@keyframes arthalo{0%{transform:scale(.5);opacity:.55}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes artbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@media (prefers-reduced-motion:reduce){
  .uses__art .art-disc,.uses__art .art-ping,.uses__art .art-route,.uses__art .art-comet,.uses__art .art-halo,.uses__art .art-pin{animation:none}
  .uses__art .art-pin{opacity:1}.uses__art .art-ping,.uses__art .art-halo{opacity:0}
}
/* DOM pin drop (hero mini-map) */
@keyframes drop{0%{transform:translate(-50%,-260%);opacity:0}60%{transform:translate(-50%,-88%)}100%{transform:translate(-50%,-100%);opacity:1}}

/* ============================================================
   FEATURES
   ============================================================ */
.features{padding:3rem clamp(1rem,4vw,3rem);background:var(--purple)}
/* Feature LANES: themed snap galleries, Apple style. Rows sit still so
   every card is readable; cards snap to a grid, round paddles page
   through each row and grey out at the ends, mouse grab-drag + native
   touch swipe both work (script.js). */
.flanes{max-width:1180px;margin:2.6rem auto 0;display:flex;flex-direction:column;gap:1.5rem}
.flane__head{margin-bottom:.55rem}
.flane__label{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-left:.25rem}
.flane__foot{display:flex;justify-content:flex-end;margin-top:.4rem}
.flane__pad{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.13);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;line-height:1;
  padding:0 0 3px;transition:background .25s}
.flane__pad:hover{background:rgba(255,255,255,.24)}
/* No CSS scroll-snap: the infinite-loop JS wraps scrollLeft itself and does its
   own card snapping, and mandatory snap fights those position writes. */
.flane__scroll{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;cursor:grab;
  padding:.3rem 0 .45rem;scroll-snap-type:none}
.flane__scroll::-webkit-scrollbar{display:none}
.flane__scroll.grabbing{cursor:grabbing}
/* Whole cards only, never cut off: cards divide the row exactly.
   4-up on desktop, 3-up on smaller laptops/tablets, 2-up on phones. */
.flane__scroll .fcard{flex:0 0 calc((100% - 3rem)/4)}
@media(max-width:980px){.flane__scroll .fcard{flex-basis:calc((100% - 2rem)/3)}}
@media(max-width:640px){
  .flane__scroll{gap:.7rem}
  .flane__scroll .fcard{flex-basis:calc((100% - .7rem)/2)}
}
.fcard{position:relative;padding:1.6rem;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s;opacity:0;transform:translateY(28px)}
.fcard.in{opacity:1;transform:none}
/* inside a lane the ROW reveals, so cards themselves stay visible;
   cards hold perfectly still on hover/click (no jump) */
.flane .fcard:hover{transform:none}
.flane .fcard{opacity:1;transform:none;user-select:none;-webkit-user-select:none}
.fcard:hover{transform:translateY(-6px);border-color:rgba(185,139,255,.6)}
.fcard::before{content:"";position:absolute;top:-40%;right:-30%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,59,240,.5),transparent 70%);opacity:0;transition:.4s}
.fcard:hover::before{opacity:1}
.fcard__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  background:rgba(255,255,255,.08);position:relative;z-index:1}
.fcard__ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcard:hover .fcard__ic svg{stroke:#fff}
.fcard h3{font-size:1.15rem;margin-bottom:.4rem;position:relative;z-index:1}
.fcard p{font-size:.92rem;line-height:1.5;font-weight:300;position:relative;z-index:1}
/* Phones: slimmer cards so a peek of the next one invites swiping */
@media(max-width:600px){
  .fcard{padding:1.05rem}
  .fcard__ic{width:38px;height:38px;border-radius:11px;margin-bottom:.7rem}
  .fcard__ic svg{width:21px;height:21px}
  .fcard h3{font-size:.98rem}
  .fcard p{font-size:.82rem}
}
/* ---------- SECURITY & TRUST band ---------- */
/* Same design language as the rest of the page: glassy gradient panel with the
   shared --line border, and the edge-section pin-bullet list for the copy. */
.tband{padding:3rem clamp(1rem,4vw,3rem)}
.tband__panel{max-width:1180px;margin:2.2rem auto 0;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.6rem;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  padding:clamp(1.5rem,3.6vw,3rem);box-shadow:var(--shadow);transition:border-color .3s}
.tband__panel:hover{border-color:rgba(185,139,255,.6)}
.tband__list{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:1.2rem}
.tband__list li{position:relative;padding-left:2rem;line-height:1.6;font-weight:300;color:#fff;font-size:.95rem}
.tband__list li b{font-weight:600;display:block;margin-bottom:.15rem}
.tband__list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--lilac);
  box-shadow:0 0 12px rgba(185,139,255,.7)}
.tband__art svg{width:100%;height:auto;display:block}
/* phones: image sits under the heading ABOVE the copy, button centred */
@media(max-width:860px){
  .tband__panel{grid-template-columns:1fr;gap:1.6rem}
  .tband__art{order:-1;max-width:400px;margin:0 auto}
  .tband__copy{display:flex;flex-direction:column}
  .tband__copy .btn{align-self:center}
  .tband__list{margin-bottom:1.4rem}
}
/* svg motion: soft moving connection paths + pulsing edge nodes; starts with the
   panel's viewport reveal and is fully still under prefers-reduced-motion */
.tb-flows path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:5 7}
.tb-flowline{fill:none;stroke:#22d3ee;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:5 7}
@media (prefers-reduced-motion: no-preference){
  .tband__panel.in .tb-flows path,.tband__panel.in .tb-flowline{animation:tbdash 2.8s linear infinite}
  .tband__panel.in .tb-pulse{animation:tbpulse 3s ease-out infinite;transform-box:fill-box;transform-origin:center}
  .tband__panel.in .tb-d2{animation-delay:.8s}
  .tband__panel.in .tb-d3{animation-delay:1.6s}
  .tband__panel.in .tb-d4{animation-delay:2.2s}
  .tband__panel.in .tb-wifi{animation:tbfade 5.5s ease-in-out infinite}
}
@keyframes tbdash{to{stroke-dashoffset:-24}}
@keyframes tbpulse{0%{transform:scale(.9);opacity:1}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes tbfade{0%,45%{opacity:1}60%,85%{opacity:.15}100%{opacity:1}}

/* ---------- GUIDES & SUPPORT ---------- */
.help{padding:3rem clamp(1rem,4vw,3rem);background:var(--purple)}
.help__panel{max-width:1000px;margin:2.6rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.help__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:2rem 1.8rem;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .35s var(--ease),border-color .35s}
.help__card:hover{transform:translateY(-6px);border-color:rgba(185,139,255,.6)}
.help__card::before{content:"";position:absolute;top:-40%;right:-30%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(185,139,255,.25),transparent 70%);opacity:0;transition:opacity .4s}
.help__card:hover::before{opacity:1}
.help__art{width:78px;height:78px;margin-bottom:.9rem}
.help__art svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.help__card h3{font-size:1.3rem;margin-bottom:.35rem;position:relative;z-index:1}
.help__card p{font-size:.95rem;line-height:1.55;font-weight:300;position:relative;z-index:1}
.help__card .btn{margin-top:1.2rem;position:relative;z-index:1}
@media(max-width:700px){.help__panel{grid-template-columns:1fr}.help__card{padding:1.5rem 1.3rem}}

/* ============================================================
   USE CASES
   ============================================================ */
.uses{padding:3rem clamp(1rem,4vw,3rem);background:linear-gradient(180deg,var(--purple),var(--purple-700))}
.uses__tabs{max-width:900px;margin:2.5rem auto 2rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.uses__tabs button{font:inherit;font-weight:600;font-size:.95rem;padding:.6em 1.15em;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:.25s var(--ease)}
.uses__tabs button:hover{transform:translateY(-2px)}
.uses__tabs button.active{background:#fff;color:var(--purple);border-color:#fff}
.uses__panel{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
  align-items:center;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  padding:2rem;box-shadow:var(--shadow)}
.uses__art{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(160deg,var(--purple-lt),var(--purple-700));border:1px solid var(--line)}
.uses__art svg{position:absolute;inset:0;width:100%;height:100%}
.uses__text h3{font-size:1.8rem;margin-bottom:.7rem}
.uses__text p{line-height:1.55;font-weight:300;margin-bottom:1.2rem}
.uses__text ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.uses__text li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.uses__text li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:6px;
  background:var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236523D0' stroke-width='3' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;padding:3.5rem clamp(1rem,4vw,3rem);text-align:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,var(--purple-lt),var(--purple) 50%,var(--purple-700))}
.cta__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.7}
.cta__inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta__logo{height:44px;margin:0 auto 1.6rem}
.cta h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;margin-bottom:1rem}
.cta p{font-size:1.1rem;line-height:1.5;margin-bottom:2rem;font-weight:300}
.signup{display:flex;gap:.6rem;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:220px;padding:.95em 1.3em;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:1rem;outline:none;transition:.25s}
.signup input:focus{border-color:#fff;background:rgba(255,255,255,.18)}
.signup input::placeholder{color:rgba(255,255,255,.6)}
.cta__fine{font-size:.85rem;margin-top:1.2rem}
.cta__fine.ok{opacity:1;color:var(--mint);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
/* footer moved to /chrome.css (single source of truth) */


/* ============================================================
   EDGE / PLATFORM  (serverless, global, always on)
   ============================================================ */
.edge{padding:3rem clamp(1rem,4vw,3rem);background:var(--purple)}
.edge__panel{max-width:1000px;margin:2.8rem auto 0;display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:center}
.edge__art{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1}
.edge__art svg{width:100%;height:100%;overflow:visible}
.edge__list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:1.1rem}
.edge__list li{position:relative;padding-left:2rem;line-height:1.5;font-weight:300}
.edge__list li b{font-weight:600;opacity:1;display:block}
.edge__list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--lilac);
  box-shadow:0 0 12px rgba(185,139,255,.7)}

/* globe visual */
.gl-halo{fill:rgba(139,59,240,.16)}
.gl-globe{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1.5}
.gl-grid{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.gl-orbit{fill:none;stroke:rgba(185,139,255,.55);stroke-width:1.5;stroke-dasharray:3 10;
  transform-box:fill-box;transform-origin:center;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gl-link{stroke:rgba(34,211,238,.4);stroke-width:1.4;stroke-dasharray:3 7;animation:dash 3s linear infinite}
.gl-node__ring{transform-box:fill-box;transform-origin:center;animation:lgpulse 2.6s ease-out infinite}
.gl-node__dot{stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:glbob 2.6s ease-in-out infinite}
.gl-core__ring{fill:none;stroke:rgba(255,255,255,.4);transform-box:fill-box;transform-origin:center;
  animation:lgpulse 3s ease-out infinite}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .hero__scroll{display:none}
  .hero{min-height:72vh;padding-top:6rem}
  .play,.features,.uses,.edge{padding-top:1.6rem;padding-bottom:1.6rem}
  .cta{padding-top:4rem;padding-bottom:2rem}
  .living{margin-top:1.6rem}
  /* Live demo on mobile: the map preview sits in a PHONE mockup; tapping the CTA opens it fullscreen
     in the lightbox. No scroll-trap — the preview is pointer-events:none so the page scrolls past. */
  .demo{max-width:none;margin:2rem auto 0;padding:0 1rem}
  .demo__monitor{position:relative;max-width:300px;margin:0 auto;background:#0f0a1e;border-radius:40px;padding:11px;
    box-shadow:0 30px 70px rgba(15,4,40,.5),inset 0 0 0 1.5px rgba(255,255,255,.08)}
  .demo__bar,.demo__neck,.demo__base{display:none}
  .demo__screen{aspect-ratio:9/19;border-radius:30px}
  .demo__monitor::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
    width:90px;height:20px;background:#0f0a1e;border-radius:0 0 14px 14px;z-index:3} /* notch */
  .demo__cta{font-size:.88rem;padding:.62rem 1.15rem}
  .living__hint{display:none}
  /* use-case cards: swipe slider on mobile — tabs hidden, → nudge hints at it */
  .uses__tabs{display:none}
  .uses__panel{position:relative}
  .uses__panel::after{content:"→";position:absolute;bottom:.6rem;right:1rem;font-size:1.25rem;font-weight:700;color:#fff;animation:swipenudge 1.6s ease-in-out infinite;pointer-events:none}

  .living__tip{display:flex;align-items:center;justify-content:center;gap:.5em;margin:1.4rem auto 0;
    font-weight:700;font-size:1.15rem;text-align:center;color:#fff}
  .lg-label{font:600 36px var(--font)}
  .living__legend{font-size:1.05rem;gap:.9rem;padding:.55em .9em}

  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero__stage{max-width:420px;margin:0 auto;width:100%}
  .uses__panel{grid-template-columns:1fr}
  .edge__panel{grid-template-columns:1fr;gap:.6rem;margin-top:.4rem}
  .edge__art{max-width:340px;margin:-2.4rem auto -1.5rem}
  /* mobile nav moved to /chrome.css (single source of truth) */

}
@media(max-width:560px){
  .living{aspect-ratio:1/1}
}
/* reduced-motion (removed: animations always on) moved to /chrome.css (single source of truth) */


@keyframes swipenudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

@keyframes glbob{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}

/* Anchor targets clear the fixed nav with breathing room, so section kickers
   (the small line above each title) are never cut off — extra on mobile. */
#top,#playground,#features,#uses,#pricing,#platform,#signup{scroll-margin-top:53px}
@media(max-width:900px){#top,#playground,#features,#uses,#pricing,#platform,#signup{scroll-margin-top:61px}}

/* ============ PRICING ============ */
.pricing{padding:5rem clamp(1rem,4vw,3rem)}
.pricing__grid{max-width:980px;margin:2.6rem auto 0;display:grid;grid-template-columns:1.25fr 1fr;gap:1.1rem;align-items:stretch}
.pcard{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.8rem;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.pcard h3{margin:0;font-size:1.15rem}
.pcard p{margin:0;font-weight:300;line-height:1.55}
.pcard__note{font-size:.9rem;color:#fff}
.pcard__price{font-size:2rem;font-weight:700;line-height:1}
.pcard__price span{font-size:.95rem;font-weight:500}
.pcard .btn{margin-top:auto;align-self:flex-start}
/* Whole card clicks through to its CTA — done in script.js, not a stretched-link ::after:
   .btn--line's backdrop-filter (and the hover transform) turn the button into its own
   containing block, so an inset:0 pseudo would cover only the button, not the card. */
.pcard{cursor:pointer}
/* Free-card accents come from the SAME rainbow the headings use (.grad: lilac -> cyan -> pink):
   gradient BORDER (padding-box/border-box two-layer trick over the ordinary card background),
   gradient heading + price + badge, cyan ticks. The card body itself matches the other cards. */
.pcard--free{border:2px solid transparent;
  /* THREE layers: glass on top, an OPAQUE brand-purple base beneath it (matching the page behind
     the other cards, so the body stays glassy purple), and the rainbow only in the border ring.
     Without the opaque base the rainbow bleeds through the translucent glass and floods the whole
     card (seen live: unreadable gradient heading on a full rainbow background). */
  /* the opaque base MUST be a gradient, not a bare colour: a colour is only valid in the final
     background layer, and with var() involved the invalid shorthand silently computes to NOTHING
     (no glass, no ring — caught live). A two-stop gradient is a legal image layer. */
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,
    linear-gradient(var(--purple),var(--purple)) padding-box,
    linear-gradient(100deg,var(--lilac),var(--cyan) 55%,var(--pink)) border-box;
  box-shadow:0 24px 60px -30px rgba(34,211,238,.4)}
.pcard--free h3,
.pcard--free .pcard__price{background:linear-gradient(100deg,var(--lilac),var(--cyan) 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pcard__badge{position:absolute;top:-.8rem;left:1.6rem;
  background:linear-gradient(100deg,var(--lilac),var(--cyan) 55%,var(--pink));color:#1b0836;
  font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:100px}
.pcard__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pcard__list li{position:relative;padding-left:1.6rem;line-height:1.45;font-weight:300}
.pcard__list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--cyan);font-weight:700}
.pricing__why{max-width:980px;margin:1.1rem auto 0;display:flex;gap:1.4rem;align-items:center;justify-content:space-between;text-decoration:none;color:inherit;cursor:pointer;
  padding:1.5rem 1.8rem;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(139,59,240,.18),rgba(255,255,255,.03))}
.pricing__why h3{margin:0 0 .35rem;font-size:1.05rem}
.pricing__why p{margin:0;font-weight:300;line-height:1.55;max-width:640px}
.pricing__why .btn{flex:0 0 auto;white-space:nowrap}
/* Mobile: the "Why is it free?" explainer reads UNDER the section's intro text, BEFORE the cards
   (flex order re-slot — the DOM keeps the desktop order: head, cards, why). */
@media(max-width:900px){
  .pricing{display:flex;flex-direction:column}
  .pricing .section-head{order:-2}
  .pricing__why{order:-1;flex-direction:column;align-items:flex-start;margin-top:2rem}
  .pricing__grid{grid-template-columns:1fr;margin-top:1.1rem}
}
.pricing__fine{margin-top:.6rem !important;font-size:.85rem;color:#fff;font-weight:300;font-style:italic}