/* ==========================================================================
   ExamStreak — marketing site design system
   Editorial serif display against a neutral grotesk, on a warm paper canvas.
   Bento layout, aurora gradients, scroll-revealed motion.
   ========================================================================== */

@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-Light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Recoleta';src:url('/assets/fonts/Recoleta-Black.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  /* Warm paper rather than pure white — softer under long reading */
  --paper:#faf9f7;
  --paper-2:#f4f2ee;
  --card:#fff;
  --ink:#0d0e11;
  --ink-2:#3c4049;
  --ink-3:#6b7280;
  --line:#e7e4dd;
  --line-2:#d9d5cc;

  /* Sampled from the logo: deep teal -> teal -> green */
  --brand:#0b6b60;
  --brand-deep:#075e54;
  --brand-mid:#128c7e;
  --brand-lite:#3bbe6d;
  --indigo:var(--brand);        /* legacy aliases, kept so older rules still resolve */
  --teal:var(--brand-mid);
  --violet:var(--brand-deep);
  --wa:#25d366;
  --wa-ink:#06301a;

  --grad: linear-gradient(135deg,#075e54 0%,#128c7e 52%,#3bbe6d 100%);
  --grad-soft: linear-gradient(135deg,#e8f5f2 0%,#e7f6ef 55%,#eafaf0 100%);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;

  --sh-1:0 1px 2px rgba(13,14,17,.04), 0 4px 12px rgba(13,14,17,.04);
  --sh-2:0 2px 6px rgba(13,14,17,.05), 0 14px 34px rgba(13,14,17,.07);
  --sh-3:0 4px 12px rgba(13,14,17,.07), 0 30px 70px rgba(13,14,17,.13);
  --sh-glow:0 10px 34px rgba(18,140,126,.3);

  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.68;
  font-feature-settings:'cv02','cv03','cv04','ss01';
  -webkit-font-smoothing:antialiased;
}
/* subtle paper grain — kills the flat "template" look */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
main{position:relative;z-index:2}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.06}
.display{
  font-family:'Recoleta',Georgia,serif;
  font-weight:600;letter-spacing:-.028em;line-height:1.04;
}
.display em{font-weight:500;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1.display{font-size:clamp(44px,6.6vw,84px)}
/* The home headline names four exams, so it needs to run smaller than a
   generic h1 or it wraps to four lines and pushes the CTA below the fold.
   Sized so it holds three lines at desktop width. */
.hero h1.display{font-size:clamp(40px,5vw,64px)}
h2.display{font-size:clamp(32px,4.3vw,56px)}
h3{font-family:'Inter',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.35}

.lede{font-size:clamp(17.5px,1.7vw,21px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.small{font-size:15px;color:var(--ink-3)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:500}

:focus-visible{outline:3px solid var(--brand-mid);outline-offset:3px;border-radius:8px}
::selection{background:#bfe9dc;color:var(--ink)}

/* --------------------------------------------------------------- layout */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.sec{padding:clamp(76px,10vw,140px) 0;position:relative}
.sec-tight{padding:clamp(52px,6vw,80px) 0}
.paper-2{background:var(--paper-2)}
.center{text-align:center}
.shead{max-width:44ch;margin-bottom:clamp(44px,5vw,64px)}
.center .shead{margin-inline:auto}
.stack-sm > * + *{margin-top:12px}
.stack > * + *{margin-top:20px}

/* aurora blobs — the depth cue that stops it looking like a flat template */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(78px);opacity:.4;display:block}
.aurora i:nth-child(1){width:520px;height:520px;background:#a7ded1;top:-190px;left:-130px}
.aurora i:nth-child(2){width:430px;height:430px;background:#8fe3b4;top:-90px;right:-120px;opacity:.32}
.aurora i:nth-child(3){width:380px;height:380px;background:#bfe9dc;bottom:-190px;left:38%;opacity:.28}

/* ------------------------------------------------------------- eyebrows */
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;
  border-radius:100px;background:rgba(255,255,255,.75);border:1px solid var(--line);
  backdrop-filter:blur(10px);box-shadow:var(--sh-1);
  font-size:13.5px;font-weight:500;color:var(--ink-2)}
.pill b{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:100px;
  background:var(--grad);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 28px;border-radius:100px;
  font-size:16px;font-weight:560;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 6px 22px rgba(37,211,102,.34)}
.btn-wa:hover{box-shadow:0 12px 34px rgba(37,211,102,.44)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-dark:hover{box-shadow:var(--sh-3)}
.btn-line{background:rgba(255,255,255,.6);color:var(--ink);border-color:var(--line-2);
  backdrop-filter:blur(10px)}
.btn-line:hover{border-color:var(--ink);background:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-sm{min-height:44px;padding:11px 20px;font-size:14.5px}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.center .btns{justify-content:center}

/* ------------------------------------------------------------------ nav */
.nav{position:sticky;top:0;z-index:60;
  background:rgba(250,249,247,.72);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(250,249,247,.92)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--max);margin-inline:auto;padding:15px 24px}
.logo{display:flex;align-items:center;font-size:0;line-height:0}
.logo .mk{transition:transform .3s var(--ease)}
.logo:hover .mk{transform:scale(1.06) rotate(-2deg)}
.logo .mk{width:38px;height:38px;border-radius:11px;flex:none;display:block;
  box-shadow:var(--sh-glow);object-fit:cover}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{padding:9px 14px;border-radius:100px;font-size:15px;color:var(--ink-2);
  font-weight:480;transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(0,0,0,.045);color:var(--ink)}
.nav-links a[aria-current]{color:var(--ink);font-weight:560;background:rgba(0,0,0,.05)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:#fff;place-items:center;cursor:pointer}
@media(max-width:900px){
  .nav-links{position:fixed;inset:64px 12px auto;flex-direction:column;align-items:stretch;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;
    box-shadow:var(--sh-3);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 16px}
  .burger{display:grid}
  .nav-cta .btn{display:none}
}

/* ------------------------------------------------------------ dropdown */
.dd{position:relative}
.dd > button{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:100px;
  font:inherit;font-size:15px;font-weight:480;color:var(--ink-2);background:none;border:0;
  cursor:pointer;transition:background .2s,color .2s}
.dd > button:hover,.dd.open > button{background:rgba(0,0,0,.05);color:var(--ink)}
.dd > button svg{transition:transform .28s var(--ease)}
.dd.open > button svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:8px;opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:70}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:11px;
  transition:background .18s}
.dd-menu a:hover{background:var(--paper-2)}
.dd-menu .di{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--indigo);border:1px solid #cfe8e2}
.dd-menu .dt{display:block;font-size:14.5px;font-weight:550;color:var(--ink);line-height:1.3}
.dd-menu .ds{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:3px}
@media(max-width:900px){
  .dd{width:100%}
  .dd > button{width:100%;justify-content:space-between;padding:13px 16px}
  .dd-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    border:0;padding:0 0 6px 8px;min-width:0;display:none}
  .dd.open .dd-menu{display:block;transform:none}
}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(60px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,72px);
  align-items:center;position:relative;z-index:2}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:52px}}

/* ticker of subjects — motion without noise */
.ticker{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  border-block:1px solid var(--line);padding:16px 0;background:rgba(255,255,255,.4)}
.ticker-row{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-3);
  white-space:nowrap;font-weight:480}
.ticker span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--indigo);opacity:.55}
@keyframes slide{to{transform:translateX(-50%)}}

/* floating chips around the hero phone */
.float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 15px;box-shadow:var(--sh-2);display:flex;gap:10px;align-items:center;
  font-size:13.5px;font-weight:520;z-index:3;white-space:nowrap}
.float i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-style:normal}
.float-1{top:8%;left:-9%;animation:bobA 6s ease-in-out infinite}
.float-2{bottom:20%;right:-11%;animation:bobB 7.2s ease-in-out infinite}
.float-3{bottom:4%;left:-4%;animation:bobA 8s ease-in-out infinite .8s}
@keyframes bobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes bobB{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
@media(max-width:1180px){.float-1,.float-2,.float-3{display:none}}

/* soft drift on the aurora so the background is never quite static */
.aurora i:nth-child(1){animation:drift1 22s ease-in-out infinite}
.aurora i:nth-child(2){animation:drift2 26s ease-in-out infinite}
.aurora i:nth-child(3){animation:drift1 30s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,34px) scale(1.09)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,28px) scale(1.06)}}

/* gradient underline that draws itself when scrolled to */
.uline{position:relative;display:inline-block}
.uline::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .2s}
.js .rv.on .uline::after,.uline.on::after{transform:scaleX(1)}

/* live pulse dot */
.pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative;flex:none}
.pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:#22c55e;
  animation:ring 2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

/* --------------------------------------------------------------- phone */
.phone{position:relative;max-width:352px;margin-inline:auto;width:100%}
.phone::after{content:'';position:absolute;inset:-16% -12% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,140,126,.22),transparent 72%);filter:blur(18px)}
.phone-body{background:#0b0c10;border-radius:42px;padding:11px;box-shadow:var(--sh-3);
  border:1px solid #23252d}
.phone-screen{background:#ebe4dc;border-radius:32px;overflow:hidden}
.wa-top{background:#0f6157;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px}
.wa-top .av{width:35px;height:35px;border-radius:50%;flex:none;display:block;object-fit:cover}
.wa-nm{font-size:15px;font-weight:600;line-height:1.2}
.wa-st{font-size:11.5px;opacity:.75}
.thread{padding:15px 12px;display:flex;flex-direction:column;gap:9px;min-height:420px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000' opacity='.022'%3E%3Ccircle cx='12' cy='14' r='2.5'/%3E%3Ccircle cx='44' cy='36' r='2'/%3E%3Ccircle cx='28' cy='52' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.msg{max-width:88%;padding:10px 13px;border-radius:15px;font-size:13.6px;line-height:1.5;
  color:#101a17;box-shadow:0 1px 1.5px rgba(0,0,0,.11)}
.js .msg{opacity:0;transform:translateY(9px) scale(.97);animation:pop .45s var(--ease) forwards}
.msg.in{background:#fff;border-top-left-radius:5px;align-self:flex-start}
.msg.out{background:#d6fbcc;border-top-right-radius:5px;align-self:flex-end}
.msg b{font-weight:650}
.msg .t{display:block;font-size:10.5px;color:#7f8b87;text-align:right;margin-top:4px}
.msg .good{color:#0f8a5f;font-weight:650}
.msg .bad{color:#c0392b;font-weight:650}
@keyframes pop{to{opacity:1;transform:none}}

/* --------------------------------------------------------------- bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento > *{grid-column:span 2}
.bento .w3{grid-column:span 3}
.bento .w4{grid-column:span 4}
.bento .w6{grid-column:span 6}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}
  .bento > *,.bento .w3,.bento .w4,.bento .w6{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:1fr}
  .bento > *,.bento .w3,.bento .w4,.bento .w6{grid-column:span 1}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card-glow::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(18,140,126,.09),transparent 62%)}
.card-glow:hover::before{opacity:1}
.card > *{position:relative}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:16px;line-height:1.62}
.card.dark{background:var(--ink);color:#fff;border-color:#22242c}
.card.dark p{color:#a8adba}
.card.dark:hover{border-color:#32353f}

.ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--grad-soft);color:var(--indigo);border:1px solid #cfe8e2}
.ic.t{background:#eafaf0;color:#128c7e;border-color:#c9ecdb}
.ic.v{background:#e6f4f1;color:#075e54;border-color:#c6e4dd}

/* --------------------------------------------------------------- stats */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:760px){.figs{grid-template-columns:repeat(2,1fr)}}
.figs > div{background:var(--card);padding:30px 20px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:132px}
.figs .n{font-family:'Recoleta',serif;font-weight:600;font-size:clamp(34px,4vw,46px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.figs .l{font-size:13.5px;color:var(--ink-3);line-height:1.4}

/* --------------------------------------------------------------- steps */
.rail{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.rail{grid-template-columns:1fr}}
.rail > div{background:var(--card);padding:34px 30px;position:relative}
.rail .k{font-family:'Recoleta',serif;font-weight:600;font-size:44px;line-height:1;
  color:var(--line-2);margin-bottom:14px}

/* ------------------------------------------------------------- pricing */
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(32px,4vw,46px);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.plan.hero-plan{border-color:transparent;box-shadow:var(--sh-3)}
.plan.hero-plan::before{content:'';position:absolute;inset:0;padding:1.6px;border-radius:inherit;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tag{display:inline-block;padding:6px 14px;border-radius:100px;background:var(--grad);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;margin-bottom:18px}
.amt{display:flex;align-items:baseline;gap:9px;margin:6px 0 4px}
.amt .v{font-family:'Recoleta',serif;font-weight:600;font-size:clamp(52px,7vw,72px);line-height:.95}
.amt .u{font-size:17px;color:var(--ink-3)}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.ticks svg{flex:none;margin-top:4px;color:var(--teal)}

/* ----------------------------------------------------------------- faq */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;padding:24px 4px;list-style:none;display:flex;gap:20px;
  justify-content:space-between;align-items:flex-start;
  font-size:clamp(17px,1.7vw,19.5px);font-weight:520;letter-spacing:-.012em;min-height:56px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'';flex:none;width:22px;height:22px;margin-top:3px;
  background:currentColor;opacity:.35;transition:transform .3s var(--ease),opacity .3s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.acc details[open] summary::after{transform:rotate(135deg);opacity:.7}
.acc details p{padding:0 44px 26px 4px;color:var(--ink-2);font-size:16.5px;max-width:70ch}

/* ------------------------------------------------------------- closing */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--ink);color:#fff;padding:clamp(52px,7vw,88px) clamp(28px,5vw,64px);text-align:center}
.cta-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 130% at 50% -30%,rgba(18,140,126,.6),transparent 62%),
             radial-gradient(ellipse 50% 100% at 88% 110%,rgba(59,190,109,.4),transparent 60%)}
.cta-band > *{position:relative}
.cta-band .lede{color:#b6bbc8;margin-inline:auto}

/* -------------------------------------------------------------- footer */
footer{padding:76px 0 44px;background:#08090c;color:#c6cbd6;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 120% at 15% -10%,rgba(18,140,126,.34),transparent 60%),
             radial-gradient(ellipse 50% 100% at 90% 110%,rgba(59,190,109,.22),transparent 60%)}
footer > *{position:relative}
footer .logo{color:#fff}
footer .small{color:#8b93a3}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
@media(max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#6f7787;
  font-weight:600;margin-bottom:17px;font-family:'Inter',sans-serif}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
footer a{color:#b6bcc9;font-size:15px}
footer a:hover{color:#fff}
.fbase{margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:14px;color:#767e8e}

/* -------------------------------------------------------- breadcrumbs */
.crumbs{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--ink-3);
  margin-bottom:22px;flex-wrap:wrap}
.crumbs a:hover{color:var(--indigo)}
.crumbs span{opacity:.5}

/* ------------------------------------------------------------- reveals */
/* Scoped to .js: without JavaScript every element renders visible immediately,
   so a slow or blocked script can never leave the page blank. */
.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
.rv-d5{transition-delay:.35s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .msg{opacity:1;transform:none}
  .float,.aurora i,.ticker-row,.pulse::after{animation:none!important}
  .uline::after{transform:scaleX(1)}
  .btn:hover,.card:hover{transform:none}
}

/* ======================================================================
   Hero v2 — smaller phone on small screens, more life on every page
   ====================================================================== */

/* dotted grid that fades out, sits under the aurora */
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(currentColor 1px,transparent 1px);
  background-size:26px 26px;color:#cfdad6;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 25%,transparent 78%)}

/* orbiting accent rings behind the hero visual */
.orbit{position:absolute;top:50%;left:50%;translate:-50% -50%;
  border:1.5px dashed rgba(18,140,126,.22);border-radius:50%;z-index:0;pointer-events:none}
.orbit-1{width:min(520px,88vw);height:min(520px,88vw);animation:spin 44s linear infinite}
.orbit-2{width:min(700px,116vw);height:min(700px,116vw);
  border-style:solid;border-color:rgba(18,140,126,.1);animation:spin 66s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* the phone: dramatically smaller on phones, so the hero is copy-first */
.phone{max-width:clamp(224px,68vw,336px)}
@media(max-width:980px){
  .phone{max-width:min(300px,74vw)}
  .thread{min-height:330px}
  .hero-grid{gap:34px}
}
@media(max-width:520px){
  .phone{max-width:min(258px,80vw)}
  .thread{min-height:290px;padding:12px 10px}
  .msg{font-size:12.6px;padding:9px 11px}
}

/* typing indicator in the mockup */
.typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:#8a958f;display:block;
  animation:blink 1.35s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* inner-page hero band — every page gets movement, not just home */
.phero{position:relative;overflow:hidden;padding:clamp(46px,6vw,78px) 0 clamp(30px,4vw,48px)}
.phero .wrap{position:relative;z-index:2}
.blob{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.blob-a{width:380px;height:380px;background:rgba(18,140,126,.2);top:-160px;right:-90px;
  animation:drift1 24s ease-in-out infinite}
.blob-b{width:300px;height:300px;background:rgba(59,190,109,.18);bottom:-170px;left:-80px;
  animation:drift2 30s ease-in-out infinite}

/* floating WhatsApp bubble */
.wafab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:0;
  height:58px;padding:0 17px;border-radius:100px;background:var(--wa);color:#06301a;
  box-shadow:0 8px 26px rgba(37,211,102,.42),0 2px 6px rgba(0,0,0,.14);
  font-weight:600;font-size:15px;text-decoration:none;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease)}
.wafab svg{flex:none}
.wafab span{max-width:0;opacity:0;white-space:nowrap;
  transition:max-width .38s var(--ease),opacity .28s,margin-left .38s var(--ease)}
.wafab:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,211,102,.5)}
.wafab:hover span,.wafab:focus-visible span{max-width:190px;opacity:1;margin-left:10px}
.wafab::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:fabring 2.6s ease-out infinite}
@keyframes fabring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:520px){.wafab{right:14px;bottom:14px;height:54px;padding:0 15px}}

/* section entrance: cards rise in sequence */
.js .rv-stagger > *{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv-stagger.on > *{opacity:1;transform:none}
.js .rv-stagger.on > *:nth-child(1){transition-delay:.04s}
.js .rv-stagger.on > *:nth-child(2){transition-delay:.11s}
.js .rv-stagger.on > *:nth-child(3){transition-delay:.18s}
.js .rv-stagger.on > *:nth-child(4){transition-delay:.25s}
.js .rv-stagger.on > *:nth-child(5){transition-delay:.32s}
.js .rv-stagger.on > *:nth-child(6){transition-delay:.39s}

/* number counters get a subtle rise as they count */
.figs > div{transition:transform .5s var(--ease)}
.figs > div:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .orbit,.blob,.typing i,.wafab::after{animation:none!important}
  .js .rv-stagger > *{opacity:1;transform:none}
}

/* ======================================================================
   Mobile hero corrections
   The orbit rings were sized in vw and pushed past the viewport, and the
   chat thread grew to its full content height (1000px+) instead of acting
   as a preview. Both made the hero enormous on a phone.
   ====================================================================== */
/* .hero-grid shares its element with .wrap, so setting max-width here would
   override the container width. Only the children need constraining. */
.hero-grid > div{min-width:0;max-width:100%}
.orbit-1{width:min(520px,86vw);height:min(520px,86vw)}
.orbit-2{width:min(700px,94vw);height:min(700px,94vw)}
@media(max-width:980px){.orbit{display:none}}

/* the mockup is a preview, not a transcript — cap it and fade the cut */
.thread{max-height:398px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(#000 76%,transparent 100%);
  mask-image:linear-gradient(#000 76%,transparent 100%)}
@media(max-width:980px){.thread{min-height:0;max-height:322px}}
@media(max-width:520px){.thread{max-height:280px}}

/* hero stops being a wall of scrolling on small screens */
@media(max-width:980px){
  .hero{padding-top:36px;padding-bottom:44px}
  .hero-grid{gap:30px}
  .float{display:none}
}
@media(max-width:520px){
  h1.display{font-size:clamp(36px,10vw,44px)}
  .hero h1.display{font-size:clamp(32px,8.6vw,40px)}
  .hero .lede{font-size:16.5px}
  .btns .btn{width:100%}
}

/* ======================================================================
   Width containment + inner-page hero motion
   The floating chips were positioned with negative percentages, which pushed
   the document wider than the viewport on desktop. They now live inside a
   clipped stage instead.
   ====================================================================== */

.hero-grid > div:last-child{position:relative;isolation:isolate}
.float-1{top:6%;left:2%}
.float-2{bottom:22%;right:2%}
.float-3{bottom:2%;left:6%}
@media(max-width:1240px){.float-2{right:0}}
@media(max-width:1100px){.float{display:none}}

/* inner-page hero decor */

.orbit-side{left:auto;right:-6%;top:52%;translate:0 -50%;
  width:min(460px,52vw);height:min(460px,52vw)}
@media(max-width:900px){.orbit-side{display:none}}
.pchip{position:absolute;display:flex;gap:9px;align-items:center;z-index:1;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 14px;
  box-shadow:var(--sh-2);font-size:13.5px;font-weight:520;white-space:nowrap;color:var(--ink-2)}
.pchip svg{color:var(--brand-mid);flex:none}
.pchip-1{top:22%;right:16%;animation:bobA 7s ease-in-out infinite}
.pchip-2{top:48%;right:6%;animation:bobB 8.4s ease-in-out infinite .5s}
.pchip-3{bottom:16%;right:22%;animation:bobA 9.2s ease-in-out infinite 1.1s}
@media(max-width:1024px){.pchip-3{display:none}}
@media(max-width:900px){.pchip{display:none}}

/* the ticker must never widen the document */
.ticker{max-width:100vw;overflow:hidden}

@media (prefers-reduced-motion:reduce){.pchip{animation:none!important}}

/* Keyword-led headings run longer than the punchy ones they replaced, so the
   inner-page hero needs a wider measure or it wraps into a narrow column. */
.phero .shead{max-width:min(60ch,58%)}
.phero h1.display{font-size:clamp(34px,4.4vw,54px);line-height:1.06}
@media(max-width:900px){.phero .shead{max-width:100%}}

/* ======================================================================
   Containment, done properly
   Clipping the whole hero hid real content. Only this decorative layer is
   allowed to overflow-and-clip; everything readable must fit the container.
   ====================================================================== */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.decor > *{position:absolute}
.hero,.phero{position:relative}
.hero > .wrap,.phero > .wrap{position:relative;z-index:2}

/* orbits are decor and live in .decor, centred on the visual column */
.orbit{top:50%;left:auto;right:2%;translate:0 -50%}
.orbit-1{width:min(500px,40vw);height:min(500px,40vw)}
.orbit-2{width:min(660px,52vw);height:min(660px,52vw)}
.orbit-side{right:4%;width:min(430px,34vw);height:min(430px,34vw)}

/* chips sit INSIDE the column, never hanging off it */
.hero-grid > div:last-child{padding-inline:6px}
.float{position:absolute;z-index:4}
.float-1{top:4%;left:0;right:auto}
.float-2{bottom:26%;right:0;left:auto}
.float-3{bottom:2%;left:8%;right:auto}
@media(max-width:1180px){.float{display:none}}

/* inner-page chips: anchored to the container, not the viewport edge */
.pchip{position:absolute;z-index:2;max-width:min(260px,32vw)}
.pchip-1{top:20%;right:8%;left:auto}
.pchip-2{top:50%;right:16%;left:auto}
.pchip-3{bottom:14%;right:26%;left:auto}
@media(max-width:1100px){.pchip-3{display:none}}
@media(max-width:920px){.pchip{display:none}}

/* the phone must never exceed its column */
.phone{max-width:min(336px,100%)}
@media(max-width:980px){.phone{max-width:min(300px,74vw)}}
@media(max-width:520px){.phone{max-width:min(258px,80vw)}}

/* ======================================================================
   Containment v3 + heading alignment
   ====================================================================== */

/* Chips are now children of .wrap, so their percentage offsets resolve
   against the 1180px measure rather than the full-bleed section. They cannot
   reach the viewport edge at any width. */
.phero .wrap{position:relative}
.pchip{right:auto;left:auto}
.pchip-1{top:14%;right:2%}
.pchip-2{top:46%;right:12%}
.pchip-3{bottom:10%;right:24%}
@media(max-width:1240px){.pchip-2{right:4%}.pchip-3{right:16%}}
@media(max-width:1080px){.pchip-3{display:none}}
@media(max-width:940px){.pchip{display:none}}

/* Same for the home hero chips: keep them over the phone, never past it. */
.float-1{top:3%;left:2%}
.float-2{bottom:28%;right:2%}
.float-3{bottom:1%;left:10%}
@media(max-width:1240px){.float-3{display:none}}
@media(max-width:1140px){.float{display:none}}

/* NO overflow guard here on purpose. Clipping hides overflow instead of
   fixing it, and makes scrollWidth checks pass while content is cut off. If
   something overflows it must show as a scrollbar so it gets found. */

/* ---- heading alignment ----
   `.shead.center` puts both classes on the SAME element, so the old
   `.center .shead` descendant rule never matched and the block stayed
   left-aligned while its text centred — headings looked off-axis against
   the full-width content below. */
.shead.center,.center > .shead{margin-inline:auto;text-align:center}
.shead:not(.center){margin-inline:0}
.sec > .wrap > .shead.center{max-width:52ch}

/* ======================================================================
   Hero stage
   Chips are now anchored to the phone, not to the column edge. Offsets are
   fixed pixels smaller than the column's slack, so they hug the device at
   every width instead of drifting outward as the viewport grows.
   ====================================================================== */
.stage{position:relative;width:min(336px,100%);margin-inline:auto}
.stage .phone{max-width:100%;margin:0}
.float{position:absolute;z-index:4;white-space:nowrap}
.float-1{top:4%;left:-62px;right:auto;bottom:auto}
.float-2{top:46%;right:-58px;left:auto;bottom:auto}
.float-3{bottom:6%;left:-46px;right:auto;top:auto}
/* below this the column slack is gone, so the chips come off */
@media(max-width:1240px){.float-3{display:none}}
@media(max-width:1120px){.float{display:none}}

/* Sit the chips on the device's corners rather than across its screen, so
   they read as annotations instead of covering the conversation. */
.float{padding:9px 13px;font-size:12.8px}
.float i{width:25px;height:25px;border-radius:8px}
.float-1{top:-16px;left:-64px}
.float-2{bottom:30%;right:-60px;top:auto}
.float-3{bottom:-14px;left:-40px}

/* ======================================================================
   FIX: clipped descenders on hero headings
   `background-clip:text` paints the gradient only within the element's box.
   At line-height 1.03 that box ends at the baseline, so descenders (p, y, g)
   lost their fill and read as cut off. Recoleta has deep descenders, which
   made it obvious. Give the line room, and extend the gradient element's box
   below the baseline without changing layout.
   ====================================================================== */
.display{line-height:1.14}
h1.display,h2.display{line-height:1.1}

.display em{
  display:inline-block;
  padding-bottom:.16em;      /* room for the gradient to paint descenders */
  margin-bottom:-.16em;      /* …taken back so spacing is unchanged */
  padding-right:.04em;       /* italic overhang on the final glyph */
  margin-right:-.04em;
}

/* the same treatment anywhere else gradient text is used */
.figs .n,.amt .v{padding-bottom:.1em;margin-bottom:-.1em;line-height:1.16}

/* ======================================================================
   Gradient text removed
   `background-clip:text` paints only inside the element box, so deep
   descenders can always be clipped — padding hacks only move the threshold,
   they don't remove the failure mode. Solid brand colour renders as normal
   text and cannot clip, at any size, font or zoom level.
   ====================================================================== */
.display em,
.figs .n,
.amt .v{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--brand-mid) !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  display:inline !important;
  overflow:visible;
}
.amt .v,.figs .n{display:inline-block !important}

/* comfortable leading so nothing sits tight against the line box */
.display{line-height:1.16}
h1.display,h2.display{line-height:1.12}
.figs .n,.amt .v{line-height:1.2}

/* nothing in a heading may be clipped by an ancestor */
.shead,.hero-grid,.phero .wrap,.sec > .wrap{overflow:visible}