@property --rule{syntax:"<number>";inherits:true;initial-value:1}

/* ==========================================================================
   VISTA by Atreus Global — landing page
   Tokens sampled directly from the Figma export.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:            #0C111D;
  --bg-deep:       #050B16;
  --hero-1:        #020F22;
  --hero-2:        #0B1424;
  --surface:       #0B1322;
  --surface-2:     #10182A;
  --zebra:         #1C253D;

  /* lines */
  --line:          #242A41;
  --line-soft:     #171D2E;

  /* accents */
  --accent:        #0238E0;
  --accent-hi:     #0A7CFF;
  --accent-deep:   #042A64;
  --accent-ink:    #93B4FF;

  /* text */
  --ink:           #FFFFFF;
  --ink-2:         #E4E4E7;
  --ink-3:         #B9BDC2;
  --ink-4:         #8F9BB7;   /* body — 6.7:1 on --bg */
  --ink-5:         #7D879E;   /* secondary — 5.2:1 on --bg */

  /* metrics */
  --wrap:          1296px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);
  --radius:        14px;
  --radius-lg:     22px;
  --nav-h:         76px;

  /* motion */
  --ease:          cubic-bezier(.16,1,.3,1);
  --ease-io:       cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,ul,dl{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  background:var(--bg);
  color:var(--ink-4);
  font-family:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:200;
  padding:.65rem 1rem;border-radius:8px;
  background:var(--accent);color:#fff;font-weight:600;
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none}

:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}

/* icons drawn from one sprite, one stroke weight */
svg[viewBox]{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   Shared pieces
   ========================================================================== */

.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.72rem 1.4rem;border-radius:999px;
  font-size:.875rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  position:relative;isolation:isolate;
  transition:transform .18s var(--ease), box-shadow .28s var(--ease),
             background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn svg{width:1.05em;height:1.05em;transition:transform .28s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:.95rem 1.9rem;font-size:.95rem}

.btn--primary{--btn-bg:var(--accent);--btn-fg:#fff;box-shadow:0 6px 20px -8px rgba(2,56,224,.9)}
.btn--primary:hover{--btn-bg:#1a4bf0;box-shadow:0 12px 34px -10px rgba(10,124,255,.85)}

.btn--ghost{--btn-fg:var(--accent-ink);--btn-bd:var(--accent-hi);background:rgba(10,124,255,.06);box-shadow:0 0 0 0 rgba(10,124,255,.35), inset 0 0 22px -14px var(--accent-hi)}
.btn--ghost:hover{--btn-fg:#fff;background:rgba(10,124,255,.16);box-shadow:0 10px 34px -12px rgba(10,124,255,.8), inset 0 0 26px -12px var(--accent-hi)}

.btn--quiet{--btn-fg:var(--ink-4);--btn-bd:var(--line)}
.btn--quiet:hover{--btn-fg:var(--ink);--btn-bd:#39415f;background:rgba(255,255,255,.03)}

.btn--light{--btn-bg:#fff;--btn-fg:var(--accent);border-radius:10px;box-shadow:0 8px 24px -14px rgba(255,255,255,.5)}
.btn--light:hover{--btn-bg:#eef2ff;box-shadow:0 14px 34px -16px rgba(255,255,255,.65)}

/* Section headings are supplied artwork; alt text carries the semantics */
.section-title img{display:block;width:100%;max-width:100%;height:auto}
.section-title__text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.section-title{
  font-size:clamp(1.85rem,4.2vw,3.3rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.035em;
  color:var(--ink-2);
  text-wrap:balance;
}

/* heading with the rule that runs off to the right */
.section-title--rule{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.brand__lead img{width:970px;margin-inline:auto}
.features .section-title img{width:304px;flex:0 0 auto}
.plans .section-title img{width:115px;flex:0 0 auto}
.dashgen .section-title img{width:489px}
.faq .section-title img{width:508px}

/* 21.6:1 artwork is illegible on a phone, so the real text takes over there */
@media (max-width:820px){
  .brand__lead{max-width:22ch}
  .brand__lead .section-title__img{display:none}
  .brand__lead .section-title__text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}
.section-title--rule::after{
  content:"";flex:1;height:1px;background:var(--line);
  transform:scaleX(var(--rule,1));transform-origin:left;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease)}
.nav::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,180,255,.28),transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.is-stuck{background:var(--accent-deep);box-shadow:0 10px 40px -22px #000;backdrop-filter:saturate(1.4)}
.nav.is-stuck::after{opacity:1}

.nav__inner{
  max-width:none;margin-inline:auto;
  min-height:var(--nav-h);padding-inline:clamp(1.25rem,3.4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

/* Figma: VISTA 94x19.5 at x=50; "by AtreusGlobal" 64.5x9 at x=64, 13px below */
.brandmark{display:grid;gap:11px;justify-items:start;flex:0 0 auto}
.brandmark__word{width:auto;height:19px}
.brandmark__by{display:flex;align-items:center;gap:5px;padding-left:14px}
.brandmark__by img{width:auto}
.brandmark__by img:first-child{height:8px}
.brandmark__by img:last-child{height:9px}

.nav__links{position:relative;display:none;align-items:center;gap:clamp(1rem,2.6vw,2.4rem)}
.nav__links a{
  font-size:.875rem;font-weight:500;color:var(--ink-4);
  padding:.4rem 0;transition:color .25s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a.is-current{color:#fff;font-weight:600}
.nav__ink{
  position:absolute;bottom:-2px;left:0;height:2px;border-radius:2px;
  background:var(--accent-hi);box-shadow:0 0 12px var(--accent-hi);
  width:1px;transform-origin:left;
  transform:translateX(var(--ink-x,0)) scaleX(var(--ink-w,0));
  opacity:0;transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.nav__links:hover .nav__ink,.nav.is-stuck .nav__ink,.nav__ink.is-on{opacity:1}

.nav__end{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.6rem)}
.nav__cta{display:none}

.nav__burger{width:40px;height:40px;display:grid;place-content:center;gap:6px;border-radius:10px}
.nav__burger span{display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s var(--ease), opacity .2s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.mobilenav[hidden]{display:none}
.mobilenav{
  display:grid;gap:.25rem;padding:.5rem var(--gutter) 1.5rem;
  background:var(--accent-deep);border-top:1px solid rgba(255,255,255,.08);
}
.mobilenav a{padding:.85rem 0;font-size:1.05rem;font-weight:500;color:#dbe4ff;border-bottom:1px solid rgba(255,255,255,.07)}
.mobilenav .btn{
  margin-top:1.25rem;border-bottom:0;
  justify-self:stretch;width:100%;
  padding:1.05rem 1.5rem;font-size:1rem;
}

@media (min-width:900px){
  .nav__links,.nav__cta{display:flex}
  .nav__burger{display:none}
  .mobilenav{display:none !important}
}

/* ==========================================================================
   Hero — the page's one authored moment
   ========================================================================== */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(3.5rem,11vh,7.5rem));
  padding-bottom:clamp(6.5rem,17vh,11.5rem);
  background:
    radial-gradient(120% 70% at 50% 0%, #0B1B33 0%, transparent 62%),
    linear-gradient(180deg,var(--hero-1) 0%,#03101F 45%,var(--hero-2) 100%);
}

.hero__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* the dark disc the light breaks over */
.hero__planet{
  position:absolute;left:50%;bottom:-3%;
  width:min(150vw,1560px);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(2,7,18,.92) 78%,rgba(2,9,22,.55) 95%,transparent 100%);
}

/* the crescent: a thin ring, masked to its lower arc */
.hero__arc{
  position:absolute;left:50%;bottom:-3%;
  width:min(150vw,1560px);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  -webkit-mask-image:radial-gradient(ellipse 46% 30% at 50% 100%,#000 8%,rgba(0,0,0,.45) 48%,transparent 78%);
  mask-image:radial-gradient(ellipse 46% 30% at 50% 100%,#000 8%,rgba(0,0,0,.45) 48%,transparent 78%);
}
.hero__arc--core{
  background:radial-gradient(closest-side,transparent 98.1%,#DFF3FF 99.1%,transparent 100%);
  filter:blur(1.2px);
}
.hero__arc--bloom{
  background:radial-gradient(closest-side,transparent 94.5%,rgba(48,138,255,.85) 99%,transparent 100%);
  filter:blur(26px);
}

.hero__stars{position:absolute;inset:0 0 34%}
.star{
  position:absolute;color:rgba(214,232,255,.8);
  width:var(--s);height:var(--s);
  opacity:0;animation:twinkle 5s var(--ease-io) infinite;animation-delay:var(--d)
}
.star svg{width:100%;height:100%;fill:currentColor;stroke:none}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.82)}50%{opacity:.85;transform:scale(1)}}

.hero__body{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--gutter);text-align:center;
}
.hero__title{
  font-size:clamp(2.2rem,6.1vw,4.6rem);
  font-weight:600;line-height:1.06;letter-spacing:-.042em;
  display:grid;gap:.06em;
}
.hero__line--1{color:var(--ink-3)}
.hero__line--2{color:#fff}
.hero__sub{
  max-width:41ch;margin:clamp(1.4rem,3vw,2rem) auto 0;
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.62;color:var(--ink-4);
  text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:clamp(1.9rem,4vw,2.8rem)}

/* ---------- screenshot marquee ---------- */
.marquee-band{
  background:linear-gradient(180deg,var(--hero-2) 0%,#0B1220 55%,var(--bg) 100%);
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;gap:clamp(1rem,1.7vw,1.5rem);width:max-content;will-change:transform}
.shot{
  flex:0 0 clamp(260px,31vw,458px);
  border-radius:16px 16px 0 0;overflow:hidden;
  border:1px solid rgba(120,150,220,.16);border-bottom:0;
  box-shadow:0 -1px 0 rgba(255,255,255,.06), 0 30px 70px -40px #000;
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.shot{height:clamp(196px,23vw,332px)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;filter:saturate(.9)}
.marquee:hover .shot{filter:brightness(.72)}
.marquee .shot:hover{filter:brightness(1.06);transform:translateY(-6px)}

/* ==========================================================================
   Proof band
   ========================================================================== */

.proof{position:relative;background:var(--surface);padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.75rem)}
.proof__rule{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent-hi) 50%,var(--accent) 88%,transparent);transform:scaleX(var(--draw,1));transform-origin:center}
.proof__rule--top{top:0}
.proof__rule--bottom{bottom:0}

.proof__badge{
  position:absolute;top:0;left:50%;
  width:89px;height:89px;translate:-50% -50%;
  display:grid;place-items:center;
}
.proof__badge-bg{grid-area:1/1;width:89px;height:89px}
.proof__badge-mark{grid-area:1/1;width:38px;height:auto}
.js .proof__badge{opacity:0;transform:scale(.86)}
.js .proof.is-in .proof__badge{opacity:1;transform:none;transition:opacity .7s var(--ease) .15s, transform .8s var(--ease) .15s}

.proof__grid{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:clamp(2rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
.stat__icon{width:44px;height:44px;color:var(--accent-hi);stroke-width:1.5;margin-bottom:1.4rem}
.stat__figure{font-size:clamp(1.15rem,1.6vw,1.42rem);font-weight:600;line-height:1.25;letter-spacing:-.028em;color:#fff;margin-bottom:.65rem}
.stat__to{color:var(--accent-ink);padding-inline:.1em}
.stat__note{font-size:.9375rem;line-height:1.58;color:var(--ink-5);max-width:34ch}

/* ==========================================================================
   Brand moment
   ========================================================================== */

.brand{
  position:relative;overflow:hidden;isolation:isolate;
  scroll-margin-top:calc(-1 * clamp(2rem,6vw,6rem));
  padding-top:clamp(4rem,9vw,7rem);
  background:linear-gradient(180deg,var(--bg) 0%,#16294A 16%,#0D2B49 46%,#07152D 84%,var(--bg) 100%);
}
.brand__glow{
  position:absolute;inset:0 0 auto;height:62%;z-index:-1;
  background:radial-gradient(ellipse 48% 78% at 50% 22%,rgba(174,192,224,.42) 0%,rgba(90,116,164,.18) 38%,transparent 72%);
}
.brand__body{position:relative;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);text-align:center}
.brand__lead{max-width:min(970px,100%);margin-inline:auto}

.brand__word{
  margin-top:clamp(1rem,2.5vw,2rem);
  font-size:clamp(3.6rem,15.5vw,14.5rem);
  font-weight:200;line-height:.95;color:#fff;
  display:flex;justify-content:center;
  letter-spacing:0;
}
.brand__word span{display:inline-block;padding-left:.16em}
.brand__by{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:clamp(1rem,1.9vw,1.7rem);font-weight:300;color:#E6ECF7;letter-spacing:.02em;margin-top:clamp(.5rem,1.5vw,1rem)}
.brand__by img{width:auto;height:clamp(20px,2.4vw,34px)}

.brand__hand{margin-top:clamp(-1rem,-2vw,-2rem);will-change:transform}
.brand__hand img{width:100%;min-width:760px;margin-inline:auto}
@media (max-width:760px){.brand__hand{overflow:hidden}.brand__hand img{margin-left:-18%}}

/* ==========================================================================
   What is VISTA
   ========================================================================== */

.whatis{padding:clamp(1rem,3vw,2.5rem) var(--gutter) clamp(4rem,8vw,6.5rem);background:var(--bg)}
.whatis__card{
  position:relative;overflow:hidden;isolation:isolate;
  max-width:var(--wrap);margin-inline:auto;
  border:1px solid #2A2F52;border-radius:var(--radius-lg);
  padding:clamp(2rem,4.5vw,3.4rem) clamp(1.5rem,4vw,3.4rem);
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  background:linear-gradient(112deg,#171B33 0%,#141827 46%,#12172A 100%);
  box-shadow:0 40px 80px -60px #000;
}
.whatis__streaks{
  position:absolute;inset:0;z-index:-1;opacity:.85;
  background:repeating-linear-gradient(90deg,
    rgba(122,138,255,.10) 0 1px,
    transparent 1px 34px);
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.35) 46%,transparent 72%);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.35) 46%,transparent 72%);
}
.whatis__q{
  font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:300;line-height:1.12;
  letter-spacing:-.03em;color:#fff;position:relative;
}
.whatis__q strong{font-weight:700}
.whatis__mark{font-size:1.9em;font-weight:200;line-height:0;vertical-align:-.14em;padding-left:.14em;color:#dfe6f5}
.whatis__copy{display:grid;gap:1.15rem;font-size:clamp(1rem,1.32vw,1.14rem);line-height:1.62;color:var(--ink-4);max-width:68ch}
@media (min-width:840px){
  .whatis__card{grid-template-columns:minmax(200px,.32fr) 1fr;align-items:center}
}

/* ==========================================================================
   Features
   ========================================================================== */

.features{max-width:var(--wrap);margin-inline:auto;padding:clamp(1rem,2vw,2rem) var(--gutter) clamp(4.5rem,9vw,7rem)}
.features__grid{
  margin-top:clamp(2rem,4vw,3.25rem);
  display:grid;gap:clamp(1rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}

.feature{
  position:relative;isolation:isolate;
  padding:clamp(1.5rem,2.4vw,1.9rem);
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform .4s var(--ease), background-color .4s var(--ease);
}
/* cursor-tracked wash + border light */
.feature::before,.feature::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  opacity:var(--near,0);transition:opacity .4s var(--ease);pointer-events:none;
}
.feature::before{
  z-index:-1;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),rgba(10,124,255,.14),transparent 62%);
}
.feature::after{
  padding:1px;
  background:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),rgba(120,170,255,.85),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.feature:hover{transform:translateY(-3px);background:var(--surface-2)}

.feature__icon{
  display:grid;place-content:center;width:42px;height:42px;
  border-radius:11px;margin-bottom:1.5rem;color:#DCE7FF;
  background:linear-gradient(158deg,#2B4CB8 0%,#132A6B 52%,#0E1B3D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -12px rgba(10,124,255,.9);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature__icon svg{width:21px;height:21px}
.feature:hover .feature__icon{transform:translateY(-2px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 24px -12px rgba(10,124,255,1)}

.feature h3{font-size:1.34rem;font-weight:600;letter-spacing:-.026em;line-height:1.2;color:#F6F6F7;margin-bottom:.7rem}
.feature p{font-size:.9375rem;line-height:1.6;color:var(--ink-5)}

/* ==========================================================================
   Dashboard generation
   ========================================================================== */

.dashgen{
  position:relative;overflow:hidden;
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2.5rem,5vw,3.5rem) var(--gutter) clamp(4rem,8vw,6rem);
  display:grid;gap:clamp(2.5rem,5vw,3.5rem);align-items:center;
}
@media (min-width:960px){.dashgen{grid-template-columns:minmax(300px,585px) minmax(0,1fr)}}

.dashgen__kicker{margin-top:1.6rem;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em;color:#fff}
.dashgen__lede{margin-top:1rem;max-width:46ch;font-size:1rem;line-height:1.62;color:var(--ink-5)}
.dashgen .btn--light{margin-top:1.9rem}

/* carousel */
.carousel{position:relative}
.carousel__frame{
  position:relative;border-radius:20px;padding:10px;
  background:linear-gradient(150deg,rgba(30,64,140,.5),rgba(12,20,40,.25) 55%);
  border:1px solid rgba(90,130,215,.22);
  box-shadow:0 50px 90px -60px #000, 0 0 60px -30px rgba(10,124,255,.4);
}
.carousel__viewport{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1486/872;background:#0A1020;touch-action:pan-y;cursor:grab}
.carousel__viewport:active{cursor:grabbing}
.slide{
  position:absolute;inset:0;
  opacity:0;filter:blur(10px);transform:scale(1.03);
  transition:opacity .62s var(--ease), filter .62s var(--ease), transform .62s var(--ease);
  pointer-events:none;
}
.slide img{width:100%;height:100%;object-fit:cover;object-position:top left}
.slide.is-active{opacity:1;filter:none;transform:none;pointer-events:auto}

.carousel__dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.5rem}
.carousel__dots button{
  width:9px;height:9px;border-radius:50%;background:#39415f;
  transition:background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.carousel__dots button:hover{background:#5b6688}
.carousel__dots button[aria-selected="true"]{background:#fff;transform:scale(1.18);box-shadow:0 0 12px rgba(255,255,255,.5)}

/* ==========================================================================
   Plans
   ========================================================================== */

.plans{padding:0 var(--gutter) clamp(4rem,8vw,6rem)}
.plans__shell{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  border:1px solid transparent;border-radius:26px;
  padding:clamp(2.25rem,5vw,3.5rem) clamp(1.25rem,3.5vw,2.75rem) clamp(2.5rem,5vw,3.5rem);
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    linear-gradient(140deg,var(--accent) 0%,rgba(10,124,255,.35) 26%,rgba(36,42,65,.4) 55%,var(--accent) 100%) border-box;
}

.ptable{position:relative;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.ptable__scroll{
  max-height:none;overflow-x:auto;overflow-y:visible;
  border-radius:12px;
  scrollbar-width:thin;scrollbar-color:#39415f transparent;
}
.ptable__scroll::-webkit-scrollbar{width:8px}
.ptable__scroll::-webkit-scrollbar-thumb{background:#39415f;border-radius:99px}
.ptable__scroll::-webkit-scrollbar-track{background:transparent}

/* On phones a two-axis scroll region traps touch. Let the page own the
   vertical axis there and keep only the horizontal swipe. */
.ptable__swipe{display:none}



.ptable table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.ptable thead th{
  padding:0 7px 14px;background:var(--bg);text-align:center;vertical-align:bottom;
}
.ptable thead th.ptable__cap{text-align:left;padding-left:1.25rem;font-size:1.28rem;font-weight:600;letter-spacing:-.025em;color:#fff}

.tier{
  display:block;padding:1.1rem .75rem .95rem;border-radius:12px 12px 0 0;
  font-size:clamp(1rem,1.35vw,1.28rem);font-weight:700;letter-spacing:-.02em;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.tier--std,.tier--adv{background:linear-gradient(180deg,#4A4C51 0%,#2C2E32 58%,#141519 100%)}
.tier--ent{
  background:linear-gradient(180deg,#2E6BFF 0%,#0B3ECF 46%,#04216F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 34px -12px rgba(10,124,255,.9);
}

.ptable tbody th,.ptable tbody td{
  padding:1.1rem 1.25rem;font-size:.95rem;font-weight:400;line-height:1.5;
  color:#DDE3EE;text-align:center;vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.ptable tbody th{text-align:left;color:#EDF1F7;max-width:30ch}
.ptable tbody tr:nth-child(odd) th,.ptable tbody tr:nth-child(odd) td{background:var(--zebra)}
.ptable tbody tr:nth-child(even) th,.ptable tbody tr:nth-child(even) td{background:var(--bg)}
.ptable tbody tr{transition:filter .2s var(--ease)}
.ptable tbody tr:hover th,.ptable tbody tr:hover td{background:#232D49}
.ptable tbody tr:nth-child(even):hover th,.ptable tbody tr:nth-child(even):hover td{background:#151C2E}

/* the Enterprise column keeps a faint live glow all the way down */
.ptable tbody td:last-child{background-image:linear-gradient(rgba(12,86,240,.13),rgba(12,86,240,.13))}

.ptable td[data-yes]::after{
  content:"";display:inline-block;width:19px;height:19px;
  background:currentColor;color:#E8EEFA;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.4 12 2.4 2.4 4.8-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.4 12 2.4 2.4 4.8-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ptable td[data-no]::after{content:"—";color:#4A5470}


.plans__cta{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);text-align:center}
.plans__cta p{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;color:#fff;margin-bottom:1.4rem;letter-spacing:-.02em}

@media (max-width:760px){
  /* A 4-column table cannot be read on a phone, and a peeking column still
     hides the third tier. Each row becomes a card with all three tiers
     side by side — nothing to swipe, nothing off screen. */
  .ptable__scroll{overflow:visible}
  .ptable table{min-width:0;display:block}
  .ptable thead{display:none}
  .ptable tbody{display:block}

  .ptable tbody tr{
    display:grid;grid-template-columns:repeat(3,1fr);
    margin-bottom:.7rem;border:1px solid var(--line);border-radius:12px;
    overflow:hidden;background:var(--surface);
  }
  .ptable tbody th,
  .ptable tbody tr:nth-child(odd) th,
  .ptable tbody tr:nth-child(even) th{
    grid-column:1/-1;
    padding:.8rem .95rem;text-align:left;
    font-size:.95rem;font-weight:600;color:#fff;max-width:none;
    background:rgba(255,255,255,.045);
    border-bottom:1px solid var(--line);
  }
  .ptable tbody td,
  .ptable tbody tr:nth-child(odd) td,
  .ptable tbody tr:nth-child(even) td{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.45rem;
    padding:.75rem .45rem .9rem;
    font-size:.8125rem;line-height:1.4;text-align:center;
    background:transparent;border-bottom:0;
    border-right:1px solid rgba(255,255,255,.07);
  }
  .ptable tbody td:last-child{border-right:0;background-image:linear-gradient(rgba(12,86,240,.16),rgba(12,86,240,.16))}
  .ptable tbody td::before{
    content:attr(data-tier);
    font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;
    font-weight:600;color:var(--ink-5);
  }
  .ptable tbody td:last-child::before{color:var(--accent-ink)}
  .ptable tbody tr:hover th,.ptable tbody tr:hover td{background:transparent}
  .ptable tbody tr:hover td:last-child{background-image:linear-gradient(rgba(12,86,240,.16),rgba(12,86,240,.16))}
  .ptable::after,.ptable__swipe{display:none}
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{max-width:var(--wrap);margin-inline:auto;padding:clamp(1rem,2vw,2rem) var(--gutter) clamp(4.5rem,9vw,7rem)}

.tabs__bar{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  border:1px solid var(--accent);border-radius:12px;padding:4px;
  overflow-x:auto;scrollbar-width:none;
}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__bar button{
  position:relative;z-index:1;padding:.85rem .9rem;border-radius:9px;
  font-size:.875rem;font-weight:500;color:var(--ink-4);white-space:nowrap;
  transition:color .3s var(--ease);
}
.tabs__bar button:hover{color:#E6ECF7}
.tabs__bar button.is-active{color:#fff;font-weight:600}
.tabs__ink{
  position:absolute;top:4px;bottom:4px;left:0;z-index:0;border-radius:9px;
  background:var(--accent);
  width:var(--tw,0);transform:translateX(var(--tx,0));
  box-shadow:0 6px 20px -10px rgba(2,56,224,1);
  transition:transform .5s var(--ease);
}

.tabs__panel{display:grid;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.tabs__panel[hidden]{display:none}
.tabs__panel.is-swapping{animation:panelIn .45s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.qa{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .3s var(--ease), background-color .3s var(--ease)}
.qa:hover{border-color:#39415f}
.qa[open]{background:var(--surface-2)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,1.9rem);
  cursor:pointer;list-style:none;
  font-size:clamp(1.02rem,1.45vw,1.24rem);font-weight:600;letter-spacing:-.022em;color:#fff;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex:0 0 auto;width:20px;height:20px;margin-top:.2em;color:var(--ink-3);transition:transform .38s var(--ease), color .3s}
.qa[open] summary svg{transform:rotate(180deg)}
.qa summary:hover svg{color:#fff}

/* height animation without measuring anything */
.qa__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s var(--ease)}
.qa:not([open]) .qa__wrap{grid-template-rows:0fr}
.qa__body{overflow:hidden;min-height:0}
.qa__body p{
  padding:0 clamp(1.25rem,2.4vw,1.9rem) clamp(1.2rem,2.2vw,1.6rem);
  font-size:1rem;line-height:1.62;color:var(--ink-4);max-width:92ch;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{background:var(--surface);border-top:1px solid var(--accent);padding:clamp(2.75rem,6vw,4rem) var(--gutter)}
.foot__inner{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.foot__brand img{width:clamp(180px,18vw,244px);height:auto}
.foot__col h2{font-size:1.06rem;font-weight:600;color:#fff;letter-spacing:-.02em;margin-bottom:.85rem}
.foot__col p{font-size:.9375rem;line-height:1.6;color:#C3CBDA;max-width:30ch}
.foot__col a{transition:color .25s var(--ease)}
.foot__col a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Motion — everything below is additive and never hides content without JS
   ========================================================================== */

.js [data-reveal]{opacity:0;transform:translateY(16px);filter:blur(7px)}
.js [data-reveal].is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .7s var(--ease) var(--del,0ms), transform .7s var(--ease) var(--del,0ms), filter .7s var(--ease) var(--del,0ms);
}

/* section titles wipe in from the left, rule draws with them */
.js .section-title[data-reveal]{
  opacity:1;transform:none;filter:none;
  -webkit-mask-image:linear-gradient(90deg,#000,#000);mask-image:linear-gradient(90deg,#000,#000);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;mask-size:0% 100%;
}
.js .section-title[data-reveal].is-in{
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:-webkit-mask-size .85s var(--ease), mask-size .85s var(--ease);
}
.js .section-title--rule{--rule:0}
.js .section-title--rule.is-in{--rule:1;transition:--rule .9s var(--ease) .2s}
.js .brand__lead img{width:970px;margin-inline:auto}
.features .section-title img{width:304px;flex:0 0 auto}
.plans .section-title img{width:115px;flex:0 0 auto}
.dashgen .section-title img{width:489px}
.faq .section-title img{width:508px}

/* 21.6:1 artwork is illegible on a phone, so the real text takes over there */
@media (max-width:820px){
  .brand__lead{max-width:22ch}
  .brand__lead .section-title__img{display:none}
  .brand__lead .section-title__text{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}
.section-title--rule::after{transition:transform .9s var(--ease) .25s}

/* proof band: rules draw outward from the badge */
.js .proof__rule{--draw:0;transition:transform 1s var(--ease)}
.js .proof.is-in .proof__rule{--draw:1}
.js .proof.is-in .proof__rule--bottom{transition-delay:.12s}
.js .proof .stat{opacity:0;transform:translateY(18px)}
.js .proof.is-in .stat{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--del),transform .6s var(--ease) var(--del)}

/* the wordmark pulls focus */
.js [data-tracking-in] span{opacity:0;transform:translateY(.12em);letter-spacing:-.06em;filter:blur(10px)}
.js [data-tracking-in].is-in span{
  opacity:1;transform:none;letter-spacing:0;filter:none;
  transition:opacity .9s var(--ease) var(--del), transform .9s var(--ease) var(--del),
             letter-spacing 1.1s var(--ease) var(--del), filter .9s var(--ease) var(--del);
}

/* ---------- the hero sequence ---------- */
.js .hero__arc{opacity:0;transform:translateX(-50%) scaleX(.28)}
.js .hero__planet{opacity:0}
.js .hero__line,.js .hero__sub,.js .hero__cta{opacity:0}
.js .hero__line{filter:blur(14px)}
.js .hero__sub,.js .hero__cta{transform:translateY(14px)}
.js .marquee{opacity:0;transform:translateY(34px)}

.js .hero.is-lit .hero__planet{opacity:1;transition:opacity 1.1s var(--ease)}
.js .hero.is-lit .hero__arc{
  opacity:1;transform:translateX(-50%) scaleX(1);
  transition:opacity 1.1s var(--ease) .1s, transform 1.5s var(--ease) .1s;
}
.js .hero.is-lit .hero__arc--bloom{transition-delay:0s,0s}
.js .hero.is-lit .hero__line{
  opacity:1;filter:none;
  transition:opacity .9s var(--ease) var(--del), filter 1.05s var(--ease) var(--del);
}
.js .hero.is-lit .hero__line--1{--del:.28s}
.js .hero.is-lit .hero__line--2{--del:.52s}
.js .hero.is-lit .hero__sub{opacity:1;transform:none;transition:opacity .8s var(--ease) .78s, transform .8s var(--ease) .78s}
.js .hero.is-lit .hero__cta{opacity:1;transform:none;transition:opacity .8s var(--ease) .92s, transform .8s var(--ease) .92s}
.js .hero.is-lit + .marquee-band .marquee{opacity:1;transform:none;transition:opacity 1s var(--ease) 1.02s, transform 1.2s var(--ease) 1.02s}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .section-title[data-reveal],
  .js [data-reveal],
  .js .proof .stat,
  .js [data-tracking-in] span,
  .js .hero__line,.js .hero__sub,.js .hero__cta,.js .marquee,
  .js .proof__badge,
  .js .hero__arc,.js .hero__planet{
    opacity:1 !important;transform:none !important;filter:none !important;
    clip-path:none !important;letter-spacing:inherit !important;
    -webkit-mask-size:100% 100% !important;mask-size:100% 100% !important;
  }
  .js .hero__arc{transform:translateX(-50%) !important}
  .js .section-title--rule{--rule:1}
  .marquee__track{transform:none !important}
  .star{animation:none;opacity:.5}
}