/* ==========================================================================
   AskRank — white + electric-blue theme (soft mechanics)
   Clean white, electric blue #3B5BFE primary, pink #FF2E6B underline pop.
   Soft shadows, rounded cards, gloss+shimmer buttons. One typeface (Plus Jakarta Sans).
   Clever motion: underline draw-in, hero aurora, scroll progress, scroll-spy nav,
   card cursor-spotlight, staggered reveals, shifting-gradient CTA.
   ========================================================================== */

/* ---- TOKENS ------------------------------------------------------------- */
:root{
  --accent:#3B5BFE; --accent-deep:#2A43D6; --accent-700:#1E31A6; --accent-50:#EEF2FF; --accent-100:#DEE7FF;
  --blue:#3B5BFE; --blue-2:#5B77FF;
  --pink:#FF2E6B; --pink-deep:#E0135A; --pink-soft:#FFE4ED;
  --ink:#0F1115;        /* headings — near black        */
  --body:#474C5B;       /* body text                    */
  --muted:#6B7280;      /* subheads, captions (AA: 4.86:1 on white, 4.5:1 on soft) */
  --faint:#C3C8D2;      /* logo strip                   */
  --bg:#FFFFFF;
  --soft:#F4F7FE;       /* faint cool-blue wash         */
  --soft-2:#EDF2FF;
  --surface:#FFFFFF;
  --border:#EAEDF4; --border-2:#DFE3EE;

  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* type scale (≈1.25 ratio, fluid) */
  --fs-display:clamp(2.5rem,1.55rem + 3.9vw,4.5rem);
  --fs-h2:clamp(1.85rem,1.35rem + 2vw,2.75rem);
  --fs-h3:clamp(1.3rem,1.15rem + .7vw,1.5rem);
  --fs-lead:clamp(1.0625rem,1rem + .4vw,1.3125rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-cap:.8125rem;
  --fs-metric:clamp(2.25rem,1.8rem + 2.2vw,3.25rem);
  --lh-display:1.1; --lh-h2:1.14; --lh-h3:1.3; --lh-lead:1.55; --lh-body:1.65;
  --tr-display:-.03em; --tr-h2:-.022em; --tr-h3:-.015em; --tr-lead:-.011em; --tr-body:-.003em;

  --r-btn:14px; --r-card:22px; --r-lg:28px; --r-pill:999px;
  /* soft shadows */
  --sh-sm:0 4px 14px -6px rgba(16,24,55,.12);
  --sh:0 16px 36px -16px rgba(16,24,55,.18),0 5px 12px -8px rgba(16,24,55,.08);
  --sh-lg:0 30px 64px -26px rgba(16,24,55,.26),0 10px 24px -14px rgba(16,24,55,.12);
  --sh-glow:0 14px 30px -10px rgba(59,91,254,.42);

  --maxw:1120px; --gutter:clamp(1.25rem,5vw,2.5rem);
  --section-y:clamp(3.5rem,2.5rem + 3.5vw,6rem);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.4,.6,1);

  /* pink hand-drawn underline */
  --underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M5 10C80 4 220 4 295 9' fill='none' stroke='%23FF2E6B' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- RESET / BASE ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--body);font-family:var(--font);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 52% 42% at 12% -8%, rgba(59,91,254,.07), transparent 60%),
    radial-gradient(ellipse 46% 38% at 92% 2%, rgba(59,91,254,.05), transparent 60%);
  background-attachment:fixed;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);margin:0;font-weight:800;
  line-height:var(--lh-h2);letter-spacing:var(--tr-h2);text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--tr-h3);line-height:var(--lh-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--accent-deep);text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:none;
  box-shadow:0 0 0 4px rgba(59,91,254,.28);border-radius:10px}
.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:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:.6rem 1rem;border-radius:0 0 12px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---- POLISH: native accent, text selection, anchored scroll, scrollbar --- */
:root{accent-color:var(--accent)}
html{scroll-padding-top:5.5rem}              /* anchor jumps clear the sticky nav */
::selection{background:rgba(59,91,254,.16);color:var(--ink)}
.dogfood ::selection{background:rgba(255,255,255,.22);color:#fff}
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:#C5D1FF transparent}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#CBD6FF;border:3px solid var(--bg);border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent)}
}

/* scroll progress bar (injected by JS) */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--pink));transition:transform .08s linear;pointer-events:none}

/* ---- LAYOUT ------------------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}
.section{padding-block:var(--section-y)}
.section--soft{background:linear-gradient(180deg,var(--soft),#FBFCFF)}
.center{text-align:center}

/* kicker = soft pill */
.kicker{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-cap);font-weight:700;
  letter-spacing:.02em;color:var(--accent-deep);background:var(--accent-50);border:1px solid var(--accent-100);
  padding:.4em .95em;border-radius:var(--r-pill);margin-bottom:1.2rem}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(59,91,254,.16);animation:beat 2.4s ease-in-out infinite}
.kicker--pink{color:var(--pink-deep);background:var(--pink-soft);border-color:#FFD3E0}
.kicker--pink::before{background:var(--pink);box-shadow:0 0 0 3px rgba(255,46,107,.16)}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(.78)}}

.section-head{max-width:48ch;margin-bottom:clamp(2.5rem,2rem + 2vw,3.5rem)}
.section-head.center{margin-inline:auto}
.section-head h2 .u{white-space:nowrap}
.section-head p{color:var(--muted);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);margin-top:1rem;text-wrap:pretty}

/* pink hand-drawn underline accent */
.u{position:relative;color:var(--accent);white-space:nowrap}
.u::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.005em;height:.135em;
  background:var(--underline) center/100% 100% no-repeat;pointer-events:none}
.u--ink{color:var(--ink)}
/* hero underline draws itself in on load */
.hero .u::after{animation:draw-underline .75s var(--ease) .55s both}
@keyframes draw-underline{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---- NAV (frosted-glass pill) ------------------------------------------ */
.site-header{position:sticky;top:0;z-index:100;padding-top:1.1rem;padding-bottom:.4rem;
  background:linear-gradient(var(--bg) 58%,rgba(255,255,255,0))}
.nav{display:flex;justify-content:center}
.nav__pill{display:flex;align-items:center;gap:1.15rem;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7));
  backdrop-filter:saturate(165%) blur(16px);-webkit-backdrop-filter:saturate(165%) blur(16px);
  border:1px solid rgba(16,24,55,.08);border-radius:var(--r-pill);
  box-shadow:0 10px 30px -14px rgba(16,24,55,.24),0 2px 6px -3px rgba(16,24,55,.06),inset 0 1px 0 rgba(255,255,255,.9);
  padding:.5rem .55rem .5rem 1.3rem;max-width:calc(100% - 2*var(--gutter));
  transition:box-shadow .3s var(--ease),background .3s var(--ease),padding .3s var(--ease);
  animation:nav-in .6s var(--ease) both}
@keyframes nav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.site-header.scrolled .nav__pill{padding-top:.4rem;padding-bottom:.4rem;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  box-shadow:0 14px 34px -16px rgba(16,24,55,.3),0 3px 8px -4px rgba(16,24,55,.08),inset 0 1px 0 rgba(255,255,255,.95)}
.brand{display:flex;align-items:center;gap:.5em;color:var(--ink);text-decoration:none}
.brand-logo{height:22px;width:auto;display:block;transition:transform .3s var(--ease-spring),height .3s var(--ease)}
.brand:hover .brand-logo{transform:scale(1.04)}
.site-header.scrolled .brand-logo{height:20px}
.nav__div{width:1px;height:24px;background:linear-gradient(180deg,transparent,var(--border-2) 22%,var(--border-2) 78%,transparent)}
.nav__links{display:flex;gap:.1rem;list-style:none;padding:0;margin:0}
.nav__links a{position:relative;color:var(--body);font-weight:600;font-size:.95rem;
  padding:.42rem .56rem;border-radius:10px;transition:color .2s var(--ease),background .2s var(--ease)}
.nav__links a:hover{color:var(--accent-deep);background:rgba(59,91,254,.06)}
.nav__links a.active{color:var(--accent-deep);background:var(--accent-50)}
.nav__links a.active::after{content:"";position:absolute;left:50%;bottom:.2rem;width:14px;height:2px;border-radius:2px;
  transform:translateX(-50%);background:linear-gradient(90deg,var(--blue),var(--pink))}
.nav__cta{margin-left:.35rem}
@media (max-width:900px){
  .nav__links,.nav__div{display:none}
  .nav__pill{gap:.6rem;padding:.45rem .5rem .45rem 1.2rem}
}

/* ---- BUTTONS (gloss + shimmer) ----------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;text-decoration:none;
  cursor:pointer;line-height:1;padding:.9em 1.5em;border-radius:var(--r-btn);border:1px solid transparent;
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease-spring),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
  white-space:nowrap;min-height:46px}
.btn--lg{padding:1.05em 1.7em;font-size:var(--fs-body)}
.btn--sm{padding:.6em 1.05em;min-height:40px;font-size:var(--fs-cap)}
.btn--block{width:100%}
.btn svg{transition:transform .22s var(--ease-spring)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
/* shimmer sweep */
.btn--primary::after,.btn--pink::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.5) 50%,transparent 82%);
  transform:skewX(-20deg);transition:left .65s var(--ease);pointer-events:none}
.btn--ghost::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(59,91,254,.12) 50%,transparent 80%);
  transform:skewX(-20deg);transition:left .65s var(--ease);pointer-events:none}
.btn--primary{background:linear-gradient(180deg,#5B77FF 0%,#3B5BFE 55%,#2A43D6 100%);color:#fff;
  box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(20,30,110,.22)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(59,91,254,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--primary:hover::after{left:130%}
.btn--primary:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--border-2);box-shadow:var(--sh-sm)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-deep);box-shadow:var(--sh)}
.btn--ghost:hover::after{left:130%}
.btn--pink{background:linear-gradient(180deg,#FF5C8A 0%,#FF2E6B 55%,#E0135A 100%);color:#fff;
  box-shadow:0 14px 30px -10px rgba(255,46,107,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--pink:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(255,46,107,.55)}
.btn--pink:hover::after{left:130%}
@media (prefers-reduced-motion:reduce){
  .btn--primary::after,.btn--ghost::after,.btn--pink::after{display:none}
  .btn:hover,.btn:active{transform:none}
}

/* ---- HERO --------------------------------------------------------------- */
.hero{padding-top:clamp(3rem,2.2rem + 3.4vw,5rem);padding-bottom:0;text-align:center;position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-8% 0 28% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 45% 52% at 28% 16%,rgba(59,91,254,.10),transparent 62%),
            radial-gradient(ellipse 42% 48% at 76% 6%,rgba(91,119,255,.08),transparent 62%),
            radial-gradient(ellipse 40% 46% at 60% 32%,rgba(255,46,107,.055),transparent 60%);
  animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate(-2%,0) scale(1)}to{transform:translate(3%,2%) scale(1.06)}}
.hero__h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  font-weight:800;max-width:16ch;margin:0 auto 1.35rem;text-wrap:balance}
.hero__sub{color:var(--muted);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);
  max-width:36ch;margin:0 auto;font-weight:500;text-wrap:pretty}
.hero__cta{margin:clamp(2rem,1.5rem + 2vw,3rem) auto 0;max-width:560px}
.hero__note{color:var(--body);font-size:var(--fs-sm);font-weight:500;margin-top:1.1rem}
.hero__note b{font-weight:700;color:var(--ink)}

/* inline scan capture */
.scan-inline{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border-2);
  border-radius:18px;box-shadow:var(--sh);padding:.45rem .45rem .45rem 1.3rem;transition:box-shadow .25s var(--ease),border-color .2s}
.scan-inline:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(59,91,254,.16),var(--sh)}
.scan-inline input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:inherit;
  font-size:var(--fs-body);color:var(--ink);padding:.5rem 0}
.scan-inline input::placeholder{color:var(--muted)}
.scan-inline .btn{flex:0 0 auto;border-radius:14px}
@media (max-width:520px){
  .scan-inline{flex-direction:column;align-items:stretch;gap:.6rem;padding:.6rem;border-radius:20px}
  .scan-inline input{padding:.7rem 1rem;text-align:center}
  .scan-inline .btn{width:100%}
}
.scan-ok{display:none;max-width:560px;margin:clamp(2rem,1.5rem + 2vw,3rem) auto 0;background:var(--accent-50);
  border:1px solid var(--accent-100);border-radius:18px;padding:1.2rem 1.4rem;color:var(--ink)}
.scan-ok.is-on{display:block;animation:pop .45s var(--ease-spring) both}
.scan-ok b{color:var(--accent-deep)}
.scan-ok .demo{display:block;color:var(--muted);font-size:var(--fs-cap);margin-top:.5rem}

@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ---- WAVE + LOGO STRIP + SCROLL CUE ------------------------------------ */
.hero__base{position:relative;margin-top:clamp(2.25rem,1.5rem + 2.6vw,3.75rem)}
/* flat single colour that matches the customers.png strip (#F6F7F9) so it blends seamlessly */
.wave{display:block;width:100%;height:auto;color:#F6F7F9}
.logos{background:#F6F7F9;padding-bottom:1.5rem}
.logos__row{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap}
.logos__label{color:var(--muted);font-size:var(--fs-cap);font-weight:600;max-width:7em;line-height:1.3;text-align:left}
.logos__item{display:flex;align-items:center;gap:.5em;color:var(--faint);font-weight:800;font-size:1.4rem;
  letter-spacing:-.02em;filter:grayscale(1);opacity:.75;transition:opacity .2s,color .2s}
.logos__item:hover{opacity:1}
.logos__item svg{height:26px;width:auto}
.customers-img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.scroll-cue{display:grid;place-items:center;width:48px;height:48px;margin:1.6rem auto 0;
  background:linear-gradient(180deg,#5B77FF,#2A43D6);color:#fff;border-radius:16px;box-shadow:var(--sh-glow);animation:bob 2s ease-in-out infinite}
.scroll-cue:hover{filter:brightness(1.06)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- FEATURE / SERVICE CARDS ------------------------------------------- */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.8rem;
  box-shadow:var(--sh-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--accent-100)}
.card__ic{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.15rem;
  background:linear-gradient(160deg,#EFF2FF,#DBE3FF);color:var(--accent-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -6px rgba(59,91,254,.4);transition:transform .28s var(--ease-spring),box-shadow .28s var(--ease)}
.card:hover .card__ic{transform:translateY(-3px) rotate(-4deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 22px -8px rgba(59,91,254,.5)}
.card__ic svg{width:22px;height:22px}
.card__ic--pink{background:linear-gradient(160deg,#FFE4ED,#FFD0E0);color:var(--pink-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -6px rgba(255,46,107,.4)}
.card:hover .card__ic--pink{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 22px -8px rgba(255,46,107,.5)}
.card h3{position:relative;z-index:1;margin-bottom:.5rem}
.card p{position:relative;z-index:1;color:var(--muted);font-size:var(--fs-sm)}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;text-align:center}
@media (max-width:600px){.stats{grid-template-columns:1fr}}
.stat{padding:1.5rem}
.stat__n{font-size:var(--fs-metric);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat__n .pink{color:var(--pink-deep)}
.stat p{color:var(--muted);font-size:var(--fs-sm);margin-top:.6rem}

/* ---- PROCESS (soft step cards) ----------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:1.6rem;box-shadow:var(--sh-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.step__n{position:relative;z-index:1;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:linear-gradient(160deg,#EEF2FF,#DEE7FF);color:var(--accent-deep);font-weight:800;font-size:1rem;margin-bottom:1rem;box-shadow:inset 0 1px 0 #fff;transition:transform .28s var(--ease-spring)}
.step:hover .step__n{transform:translateY(-2px) rotate(-4deg)}
.step:nth-child(1) .step__n{background:linear-gradient(160deg,#5B77FF,#2A43D6);color:#fff}
.step h3{position:relative;z-index:1;margin-bottom:.45rem}
.step p{position:relative;z-index:1;color:var(--muted);font-size:var(--fs-sm)}

/* ---- PROOF: dogfood + founders + founding ------------------------------ */
.dogfood{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:linear-gradient(145deg,#141A30 0%,#0C1024 100%);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.6rem,1rem + 2vw,2.6rem);box-shadow:var(--sh-lg);position:relative;overflow:hidden;isolation:isolate}
.dogfood::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 44% 90% at 90% 8%,rgba(59,91,254,.42),transparent 60%),radial-gradient(ellipse 40% 80% at 4% 100%,rgba(255,46,107,.24),transparent 60%)}
.dogfood h3{color:#fff;max-width:22ch}
.dogfood p{color:rgba(255,255,255,.72);font-size:var(--fs-sm);margin-top:.5rem;max-width:48ch}
.chip{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-sm);font-weight:700;
  background:#fff;color:var(--accent-deep);border-radius:var(--r-pill);padding:.7em 1.2em;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);transition:transform .2s var(--ease-spring),box-shadow .2s}
.chip:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(0,0,0,.55)}
.chip svg{color:var(--accent)}

.founders{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
@media (max-width:700px){.founders{grid-template-columns:1fr}}
.founder{position:relative;display:flex;gap:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:1.6rem;box-shadow:var(--sh-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.founder:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.founder__av{position:relative;z-index:1;flex:0 0 54px;width:54px;height:54px;border-radius:16px;overflow:hidden;
  display:block;object-fit:cover;object-position:center 28%;
  background:linear-gradient(140deg,#5B77FF,#2A43D6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(15,17,21,.05);transition:transform .28s var(--ease-spring)}
.founder:hover .founder__av{transform:rotate(-5deg) scale(1.05)}
.founder__av--pink{background:linear-gradient(140deg,#FF5C8A,#E0135A)}
.founder__role{font-size:var(--fs-cap);font-weight:700;color:var(--accent-deep);text-transform:uppercase;letter-spacing:.03em}
.founder>div{position:relative;z-index:1}
.founder h3{margin:.1em 0 .4em}
.founder p{color:var(--muted);font-size:var(--fs-sm)}
.founding{margin-top:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--accent-50),#E7EEFF);border:1px solid var(--accent-100);
  box-shadow:var(--sh-sm);border-radius:var(--r-lg);padding:clamp(1.6rem,1rem + 2vw,2.3rem)}
.founding h3{margin-bottom:.4rem}
.founding p{color:var(--body);font-size:var(--fs-sm);max-width:52ch}
.founding__spots{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-cap);font-weight:700;
  color:var(--accent-deep);margin-top:.7rem}
.live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(59,91,254,.4);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(59,91,254,0)}100%{box-shadow:0 0 0 0 rgba(59,91,254,0)}}

/* ---- PRICING ------------------------------------------------------------ */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
@media (max-width:860px){.pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
.price{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:1.9rem;box-shadow:var(--sh-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.price:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.price--feat{border-color:var(--accent-100);box-shadow:var(--sh)}
@media (min-width:861px){.price--feat{transform:translateY(-10px)}.price--feat:hover{transform:translateY(-15px)}}
.price--feat::after{content:"Most popular";position:absolute;top:-13px;left:1.9rem;z-index:2;
  background:linear-gradient(180deg,#5B77FF,#2A43D6);color:#fff;font-size:var(--fs-cap);font-weight:700;
  padding:.32em .9em;border-radius:var(--r-pill);box-shadow:var(--sh-glow);opacity:1}
.price>*{position:relative;z-index:1}
.price__name{font-weight:700;color:var(--ink);font-size:1.05rem}
.price__desc{color:var(--muted);font-size:var(--fs-sm);margin-top:.3rem;min-height:2.6em}
.price__amt{font-size:var(--fs-metric);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;margin:1rem 0 0;font-variant-numeric:tabular-nums}
.price__amt small{font-size:1rem;color:var(--muted);font-weight:600;letter-spacing:0}
.price__list{list-style:none;padding:1.3rem 0 0;margin:1.3rem 0;display:grid;gap:.7rem;border-top:1px solid var(--border)}
.price__list li{display:flex;gap:.6em;font-size:var(--fs-sm);color:var(--body)}
.price__list li::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;background:var(--accent);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat}
.price .btn{margin-top:auto}
.price-foot{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin-top:1.75rem}
.price-foot a{font-weight:700}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{max-width:760px;margin-inline:auto}
.faq details{border:1px solid var(--border);border-radius:18px;margin-bottom:.9rem;background:var(--surface);
  box-shadow:var(--sh-sm);transition:box-shadow .25s var(--ease),border-color .2s}
.faq details[open]{box-shadow:var(--sh);border-color:var(--accent-100)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;
  cursor:pointer;list-style:none;font-weight:700;color:var(--ink);font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-deep)}
.faq details:hover{border-color:var(--accent-100)}
.faq summary::after{content:"";flex:0 0 24px;height:24px;border-radius:9px;background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .3s var(--ease-spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 1.4rem 1.25rem;color:var(--muted);font-size:var(--fs-sm)}
.faq__a strong{color:var(--body)}
.faq details[open] .faq__a{animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- CLOSING CTA (shifting blue gradient) ------------------------------- */
.cta-band{background:linear-gradient(120deg,#5B77FF 0%,#3B5BFE 40%,#2A43D6 70%,#1E2EA0 100%);background-size:160% 160%;
  border-radius:var(--r-lg);padding:clamp(2.5rem,2rem + 3vw,4.5rem);text-align:center;color:#fff;
  box-shadow:var(--sh-lg);position:relative;overflow:hidden;isolation:isolate;animation:cta-shift 12s ease-in-out infinite}
@keyframes cta-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 50% 60% at 85% 0%,rgba(255,255,255,.16),transparent 60%),radial-gradient(ellipse 50% 60% at 8% 105%,rgba(255,46,107,.26),transparent 60%)}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.88);margin:1rem auto 0;max-width:42ch}
.cta-band .scan-inline{margin:2rem auto 0;max-width:540px;border-color:transparent}
.cta-band__micro{color:rgba(255,255,255,.8);font-size:var(--fs-cap);margin-top:1rem}

/* ---- FOOTER ------------------------------------------------------------- */
.footer{background:linear-gradient(180deg,var(--soft),#FBFCFF);border-top:1px solid var(--border);padding-block:3.5rem 2rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer__tag{color:var(--muted);font-size:var(--fs-sm);margin-top:.9rem;max-width:32ch}
.footer h4{font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:.9rem}
.footer ul{list-style:none;padding:0;display:grid;gap:.6rem}
.footer a{color:var(--body);font-size:var(--fs-sm);transition:color .2s}
.footer a:hover{color:var(--accent-deep)}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-cap)}

/* ---- MOBILE STICKY ------------------------------------------------------ */
.msticky{display:none}
@media (max-width:820px){
  .msticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.7rem var(--gutter);
    background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
  .msticky .btn{width:100%}
  body{padding-bottom:74px}
}

/* ---- SCAN PAGE FORM ----------------------------------------------------- */
.form-card{max-width:480px;margin:2.25rem auto 0;text-align:left;background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:1.8rem}
.field{display:grid;gap:.4rem;margin-bottom:1rem;text-align:left}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.field input{font-family:inherit;font-size:var(--fs-body);padding:.85rem 1rem;border:1px solid var(--border-2);
  border-radius:14px;background:#fff;color:var(--ink);min-height:48px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(59,91,254,.16)}
.form-card .btn{margin-top:.4rem}
.scan-note{color:var(--muted);font-size:var(--fs-cap);margin-top:1rem;line-height:1.5}
.scan-err{color:#C81E5B;font-size:var(--fs-sm);margin-top:.9rem;line-height:1.5}
.scan-err a{color:inherit;font-weight:700}
.btn.is-loading{opacity:.72;cursor:progress;pointer-events:none}
.ylist{list-style:none;padding:0;margin:2rem auto 0;max-width:440px;display:grid;gap:.8rem;text-align:left}
.ylist li{display:flex;gap:.7em;color:var(--body);font-size:var(--fs-sm)}
.ylist li::before{content:"";flex:0 0 20px;height:20px;margin-top:1px;background:var(--accent);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat}
.engine-row{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap;
  list-style:none;padding:0;margin:2.5rem 0 0;color:var(--muted);font-weight:700;font-size:1.05rem}
.engine-row li{opacity:.75;transition:opacity .2s,color .2s,transform .2s var(--ease-spring)}
.engine-row li:hover{opacity:1;color:var(--accent-deep);transform:translateY(-2px)}

/* ---- CARD GLOW-BORDER: gradient edge that tracks the cursor (JS sets --mx/--my) ---- */
.card::before,.step::before,.founder::before,.price::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1.6px;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),#84A2FF 0%,#3B5BFE 30%,rgba(59,91,254,0) 62%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.card:hover::before,.step:hover::before,.founder:hover::before,.price:hover::before{opacity:1}

/* ---- SCROLL REVEAL (gentle, staggered) --------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .7s var(--ease-spring)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
.grid>[data-reveal]:nth-child(2),.steps>[data-reveal]:nth-child(2),.pricing>[data-reveal]:nth-child(2),.founders>[data-reveal]:nth-child(2){transition-delay:.08s}
.grid>[data-reveal]:nth-child(3),.steps>[data-reveal]:nth-child(3),.pricing>[data-reveal]:nth-child(3){transition-delay:.16s}
.grid>[data-reveal]:nth-child(4),.steps>[data-reveal]:nth-child(4){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero .u::after{animation:none}
  .scroll-cue,.live,.kicker::before,.hero::before,.cta-band{animation:none!important}
  .card::before,.step::before,.founder::before,.price::before{display:none}
}