/* PoolStar™ — preview concept. Re-skinned to the Stripe design system ("indigo-ink ledger on frosted glass"):
   sole family Inter Tight 300/400 (free substitute for sohne-var), one indigo accent #533afd, flat no-shadow
   depth via tint bands (#fff → #f8fafd → #e5edf5 → #e8e9ff → #533afd), 4px radii, hairline #e5edf5 dividers.
   Brand blue lives in the untouched logo image. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;1,300&display=swap');

:root{
  --accent:#533afd; --accent-hover:#7389ff;
  --ink:#061b31; --slate:#64748d; --steel:#50617a; --smoke:#839bc8;
  --bg:#ffffff; --band:#f8fafd; --frost:#e5edf5;
  --lavender:#b9b9f9; --lilac:#d6d9fc; --periwinkle:#e8e9ff; --deep:#182659;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter Tight',-apple-system,'Segoe UI',sans-serif;font-weight:300;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:'ss01' on,'tnum' on}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
section{padding:clamp(64px,9vw,96px) 0}
h1,h2,h3{color:var(--ink);line-height:1.1;font-weight:300}
/* colossal display type (motion-choreography §1) — the light 300 weight carries the size */
h1{font-size:clamp(2.9rem,7.2vw,6.4rem);letter-spacing:-.045em;line-height:.97;max-width:100%}
h2{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.03em}
h3{font-size:1.3rem;letter-spacing:-.01em}
p{color:var(--steel)}
.eyebrow{font-weight:400;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:14px}
.lead{font-size:1.15rem;line-height:1.4;max-width:640px}
.center{text-align:center}
.center .lead{margin:12px auto 0}

/* top bar */
.topbar{background:var(--band);color:var(--slate);font-size:.8rem;font-weight:400;letter-spacing:.01em;padding:9px 0;border-bottom:1px solid var(--frost)}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.topbar a{color:var(--ink)}
.topbar a:hover{color:var(--accent)}
.topbar .lic{color:var(--slate)}

/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--frost);z-index:50}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
nav .logo img{height:46px;width:auto}
.navlinks{display:flex;align-items:center;gap:26px;font-weight:400;font-size:.875rem}
.navlinks a{color:var(--ink);transition:color .25s}
.navlinks a:hover,.navlinks a.on{color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:400;font-size:.9rem;padding:14px 24px;border-radius:var(--radius);transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--lavender);padding:13px 23px}
.btn.ghost:hover{background:var(--band);border-color:var(--lavender)}
.btn.small{padding:10px 18px;font-size:.85rem}

/* hero — pure-CSS dot-matrix backdrop (aceternity "Grid & dot backgrounds": static, zero JS, radial fade) */
.hero{background:var(--bg);padding:clamp(56px,8vw,92px) 0;position:relative}
.hero::before,.pagehero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(83,58,253,.13) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 50% 38%,#000 30%,transparent 74%);mask-image:radial-gradient(ellipse at 50% 38%,#000 30%,transparent 74%);pointer-events:none}
.hero .wrap{position:relative}
.hero-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(26px,3.5vw,42px)}
.hero .cta-row{display:flex;gap:8px;margin:26px 0 0;flex-wrap:wrap}
.hero p.lead{margin-top:18px}
.proof{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--frost);font-weight:400;font-size:.85rem;color:var(--steel)}
.stars{color:var(--accent);letter-spacing:2px;font-size:1rem}
.proof b{color:var(--ink);font-weight:400}
.heroimg{position:relative}
.heroimg img{border-radius:var(--radius);border:1px solid var(--frost);aspect-ratio:4/3.1;object-fit:cover;width:100%}
.heroimg .tag{position:absolute;left:16px;bottom:16px;background:#fff;border:1px solid var(--frost);border-radius:var(--radius);padding:10px 16px;font-weight:400;color:var(--ink);font-size:.85rem}
.heroimg .tag span{color:var(--accent)}

/* trust strip */
.trust{background:var(--band);border-top:1px solid var(--frost);border-bottom:1px solid var(--frost);padding:26px 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust div{color:var(--ink);font-weight:400;font-size:.875rem;display:flex;align-items:center;gap:10px}
.trust svg{flex:none;stroke:var(--accent);stroke-width:1.5}

/* cards */
.grid{display:grid;gap:24px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--frost);border-radius:var(--radius);padding:32px;transition:background .3s}
.card:hover{background:var(--band)}
.card h3{margin-bottom:8px}
.card p{font-size:.95rem;line-height:1.4}
.card .num{font-weight:400;color:var(--smoke);font-size:.75rem;letter-spacing:.06em;display:block;margin-bottom:10px}
.surface{background:var(--band)}
.surface .card{background:#fff}
.surface .card:hover{background:var(--periwinkle)}

/* standards checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:40px;text-align:left}
.checks div{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--ink);font-size:.95rem}
.checks svg{flex:none;margin-top:4px;stroke:var(--accent);stroke-width:1.5}

/* reviews */
.rhead{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:18px;font-weight:400;color:var(--ink)}
.rhead .stars{font-size:1.3rem}
.quote{position:relative}
.quote p{font-size:.95rem;font-style:italic;color:var(--ink)}
.quote .who{margin-top:14px;font-style:normal;font-weight:400;color:var(--ink);font-size:.875rem}
.quote .who span{display:block;color:var(--slate);font-weight:300;font-size:.78rem}
.srcline{margin-top:26px;font-size:.82rem;color:var(--slate);text-align:center}
.statcard{background:var(--periwinkle);color:var(--ink);text-align:center;border:none}
.statcard .big{font-size:2.75rem;font-weight:300;line-height:1.03;letter-spacing:-.02em;color:var(--ink)}
.statcard p{color:var(--steel);font-size:.9rem}
.statcard:hover{background:var(--periwinkle)}

/* areas */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;justify-content:center}
.chips span{background:var(--periwinkle);border-radius:9999px;padding:8px 18px;font-weight:400;font-size:.85rem;color:var(--accent)}

/* offer band — indigo highlight panel (level-4 surface) */
.offer{background:var(--accent);text-align:center}
.offer h2,.offer .big{color:#fff}
.offer p{color:var(--periwinkle);max-width:560px;margin:14px auto 0}
.offer .btn{background:#fff;color:var(--accent)}
.offer .btn:hover{background:var(--periwinkle)}
.offer .fine{font-size:.8rem;color:var(--lilac);margin-top:22px}

/* cta band — white so the slab overlap reads against the band-tinted areas section */
.band{background:#fff;border-top:1px solid var(--frost);text-align:center}
.band h2{color:var(--ink)}
.band p{color:var(--steel);max-width:560px;margin:14px auto 0}
.band .cta-row{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.band .fine{font-size:.8rem;color:var(--slate);margin-top:22px}
.band .btn{background:var(--accent);color:#fff}
.band .btn:hover{background:var(--accent-hover)}
.band .btn.ghost{color:var(--accent);border-color:var(--lavender);background:transparent}

/* footer */
footer{background:var(--band);border-top:1px solid var(--frost);color:var(--steel);font-size:.9rem;font-weight:300;padding:56px 0 30px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{color:var(--ink);font-size:.875rem;font-weight:400;margin-bottom:14px}
footer a{transition:color .25s}
footer a:hover{color:var(--accent)}
footer li{list-style:none;margin-bottom:8px}
footer .logo-card{background:#fff;border:1px solid var(--frost);border-radius:var(--radius);padding:10px 14px;display:inline-block;margin-bottom:16px}
footer .logo-card img{height:44px}
footer .base{border-top:1px solid var(--frost);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--slate)}
.social{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.social a{border:1px solid var(--lilac);border-radius:var(--radius);padding:6px 12px;font-size:.78rem;font-weight:400;color:var(--accent)}
.social a:hover{background:var(--periwinkle);color:var(--accent)}

/* page hero (inner pages) */
.pagehero{background:var(--bg);border-bottom:1px solid var(--frost);padding:clamp(48px,7vw,72px) 0;position:relative}
.pagehero .wrap{position:relative}
.pagehero h1{color:var(--ink)}
.pagehero p{color:var(--steel);max-width:640px;margin-top:14px}
.pagehero .eyebrow{color:var(--slate)}

/* about split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.split img{border-radius:var(--radius);border:1px solid var(--frost)}
.split .eyebrow{margin-top:0}

/* team banner */
.teamimg{border-radius:var(--radius);border:1px solid var(--frost);margin-top:40px}

/* FAQ */
.faq{max-width:820px;margin:40px auto 0}
.faq details{background:#fff;border:1px solid var(--frost);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:400;color:var(--ink);padding:18px 22px;font-size:.98rem;list-style:none;position:relative;padding-right:46px}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.3rem;font-weight:300}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 22px 18px;font-size:.94rem}

/* before/after */
.ba{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ba img{border-radius:var(--radius);border:1px solid var(--frost);width:300px;max-width:100%}
.ba p{flex:1;min-width:260px;font-size:.94rem}

/* panel-stacking slabs (motion-choreography §2): each section slides up over the previous.
   Reads because backgrounds alternate white / mist / periwinkle / indigo. Pure CSS, zero JS. */
body > section,body > footer{border-radius:48px 48px 0 0;margin-top:-28px;position:relative;background:var(--bg)}
body > section{padding-top:calc(clamp(64px,9vw,96px) + 16px)}
body > section:nth-of-type(1){z-index:2}
body > section:nth-of-type(2){z-index:3}
body > section:nth-of-type(3){z-index:4}
body > section:nth-of-type(4){z-index:5}
body > section:nth-of-type(5){z-index:6}
body > section:nth-of-type(6){z-index:7}
body > footer{z-index:8;background:var(--band)}

/* reviews marquee (aceternity "infinite moving cards"): duplicated track, edge fade, pause on hover */
.marq{overflow:hidden;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq .card{width:380px;flex:none;margin-right:24px;text-align:left}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .track{animation:none}}

/* card spotlight (aceternity): cursor-following radial highlight, hover-capable devices only */
@media (hover:hover) and (pointer:fine){
  .card{position:relative;overflow:hidden}
  .card::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(83,58,253,.09),transparent 65%)}
  .card:hover::after{opacity:1}
}

/* scroll-scrubbed manifesto (motion-choreography §4): words brighten as you read past them, reversible */
.scrub{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.45;max-width:820px;margin:18px auto 0;color:var(--ink)}
.scrub span{opacity:.16;transition:opacity .25s linear}
.scrub span.lit{opacity:1}
@media (prefers-reduced-motion:reduce){.scrub span{opacity:1}}

/* inner-page heroes step up with the rest of the type scale */
.pagehero h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}

/* reveal (JS-gated: hidden only when html.js and no ?noanim) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* mobile */
@media (max-width:900px){
  .hero-row,.split{grid-template-columns:1fr}
  body > section,body > footer{border-radius:26px 26px 0 0;margin-top:-16px}
  .marq .card{width:300px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  nav .wrap{flex-wrap:wrap;row-gap:10px}
  .navlinks{order:3;width:100%;justify-content:center;gap:18px;font-size:.85rem;flex-wrap:wrap}
  .heroimg img{aspect-ratio:16/11}
}
@media (max-width:560px){
  .g3,.g4{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr}
  .tb-mail{display:none}
  .topbar .lic{display:none}
  .topbar .wrap{justify-content:center}
  nav .logo img{height:38px}
  .btn.small{padding:9px 14px;font-size:.8rem}
}