/* Archivo (variable: weight 100–900, width 62–125%) — SIL Open Font License, self-hosted */
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-var.woff2") format("woff2-variations"),url("assets/fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --bg:#070b18; --bg-2:#0c1328; --surface:#111a36; --line:rgba(255,255,255,.12);
  --blue:#3c58de; --blue-hi:#5b78ff; --peri:#a9b8ff; --ice:#e9edff; --teal:#0b3550; --teal-hi:#12507a; --aqua:#3cc3f0; --grad:linear-gradient(100deg,#5b78ff,#3cc3f0);
  --text:#f2f4fb; --muted:rgba(242,244,251,.66);
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{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;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--peri);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:12px}
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:70;pointer-events:none}
.progress-bar{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--aqua));transform-origin:0 50%;transform:scaleX(0)}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,11,24,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px;padding:0 20px;max-width:1440px;margin:0 auto;transition:height .35s}
.scrolled .nav{height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
.brand img{width:30px}
.nav-links{display:none;list-style:none;margin:0;padding:0;gap:30px}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;transition:color .2s}
.nav-links a:hover{color:#fff}
@media (min-width:860px){.nav-links{display:flex}.nav{padding:0 36px}}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:650;font-size:.98rem;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s,border-color .25s,color .25s}
.pill:hover{transform:translateY(-2px)}
.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill-light{background:#fff;color:var(--bg);min-height:40px;padding:0 18px;font-size:.9rem}
.pill-blue{background:linear-gradient(110deg,#3c58de,#3a86e8);color:#fff;box-shadow:0 14px 30px -14px rgba(60,140,232,.9)}
.pill-blue:hover{background:linear-gradient(110deg,#4d69f0,#3cc3f0)}
.pill-line{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.pill-line:hover{border-color:#fff}

/* keep wide display type from causing sideways scroll */
main>section,.marquee{overflow:clip}
@supports not (overflow:clip){main>section,.marquee{overflow:hidden}.scard{position:relative;top:auto}}
html,body{overflow-x:clip}

/* hero */
.hero{position:relative;min-height:100svh;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 20px 40px;overflow:hidden;isolation:isolate}
.hero-glow{position:absolute;z-index:-1;left:50%;top:38%;width:140vw;height:140vw;max-width:1300px;max-height:1300px;transform:translate(-50%,-50%);background:radial-gradient(closest-side at 40% 45%,rgba(60,88,222,.5),transparent 60%),radial-gradient(closest-side at 68% 60%,rgba(60,195,240,.28),transparent 62%),radial-gradient(closest-side,rgba(11,53,80,.35),transparent 75%);pointer-events:none}
.hero-kicker{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--peri);margin-bottom:18px}
.wordmark{font-weight:900;font-stretch:80%;line-height:.82;letter-spacing:-.045em;margin:0 0 34px;font-size:clamp(3.5rem,23vw,15.5rem);user-select:none}
.wm-line{position:relative;display:block;width:max-content;will-change:transform;transform-origin:0 100%}
.wm-2{margin-left:auto;transform-origin:100% 100%}
.wm-text{position:relative;display:block}
.wm-ghost{position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:1.5px rgba(169,184,255,.38);will-change:transform;opacity:0}
.wm-1 .wm-text{color:#fff}
.wm-2 .wm-text{background:linear-gradient(95deg,#fff 25%,var(--peri) 55%,var(--aqua) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-foot{display:grid;gap:22px;align-items:end}
.hero-mark{width:64px;will-change:transform}
.hero-tag{font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.35;max-width:30ch;color:var(--text);font-weight:450}
.hero-tag strong{display:block;font-weight:750;color:#fff;margin-bottom:6px}
.hero-tag em{font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:899px){.hero{justify-content:center;padding-top:96px}}
@media (min-width:900px){
  .wordmark{font-stretch:100%}
  .hero{padding:120px 48px 56px}
  .hero-kicker{font-size:.8rem;letter-spacing:.18em}
  .wordmark{font-size:min(19vw,32vh + 6rem)}
  .hero-foot{grid-template-columns:auto 1fr auto;gap:36px}
  .hero-mark{width:84px}
}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,#3c58de,#3a7fe6 55%,#2fa9df);padding:16px 0;will-change:transform}
.marquee-alt{background:transparent}
.marquee-track{display:flex;width:max-content;align-items:center;gap:28px;animation:marq 28s linear infinite;font-weight:800;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.3rem,4.4vw,2.2rem);letter-spacing:-.01em;white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--aqua);font-size:.7em}
.marquee:not(.marquee-alt) .marquee-track i{color:#fff;opacity:.7}
.marquee-alt .marquee-track span{color:transparent;-webkit-text-stroke:1.2px rgba(242,244,251,.75)}
.marquee-rev{animation-direction:reverse;animation-duration:34s}
@keyframes marq{to{transform:translateX(-50%)}}

/* giant titles with echoes */
.mega{position:relative;width:max-content;max-width:none;font-weight:900;font-stretch:100%;text-transform:uppercase;line-height:.85;letter-spacing:-.04em;font-size:clamp(2.6rem,15vw,14rem);margin:0 0 28px;white-space:nowrap;will-change:transform}
.mega-sm{font-size:clamp(2.4rem,10.5vw,10rem)}
.mega-connect{font-size:clamp(3rem,16vw,12.5rem);line-height:.88}
.mega-main{position:relative;display:block}
.mega-ghost{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.2px rgba(169,184,255,.4);opacity:0;will-change:transform}
.label{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--peri);margin-bottom:18px}

/* results */
.results{padding:96px 0 40px;position:relative;background:radial-gradient(60% 40% at 85% 12%,rgba(60,195,240,.14),transparent 70%),radial-gradient(60% 40% at 10% 40%,rgba(60,88,222,.16),transparent 70%)}
.statement{font-weight:850;font-stretch:90%;font-size:clamp(2.2rem,8.6vw,5.4rem);line-height:1;letter-spacing:-.035em;margin-bottom:18px}
.statement s{color:rgba(242,244,251,.4);text-decoration-thickness:.08em}
.statement b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);max-width:52ch;font-size:1.05rem}
.stack{margin-top:48px;display:grid;gap:22px;padding-bottom:20px}
.scard{position:sticky;top:calc(84px + var(--i,0) * 16px);border-radius:32px;padding:30px 26px 28px;min-height:min(56vh,420px);display:flex;flex-direction:column;justify-content:space-between;transform-origin:50% 0;will-change:transform;box-shadow:0 -20px 50px -30px rgba(0,0,0,.7)}
.scard-k{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.scard-num{font-weight:900;font-stretch:78%;letter-spacing:-.05em;line-height:.85;font-size:clamp(3.4rem,22vw,15rem);font-variant-numeric:tabular-nums;margin-top:auto}
.scard-l{font-weight:700;font-stretch:110%;font-size:clamp(1.2rem,4.6vw,2rem);text-transform:uppercase;letter-spacing:.01em;margin-top:8px}
.scard-x{font-size:.9rem;opacity:.7;margin-top:6px}
.scard-split{display:grid;gap:26px;margin-top:auto}
.scard-split .scard-num{font-size:clamp(4rem,22vw,11rem)}
.scard-blue{background:radial-gradient(90% 80% at 90% 0%,rgba(60,195,240,.45),transparent 60%),linear-gradient(150deg,#4a66ee,#2f46c4);color:#fff}
.scard-ice{background:var(--ice);color:#0a1330}
.scard-teal{background:radial-gradient(90% 80% at 85% 10%,rgba(60,195,240,.55),transparent 60%),linear-gradient(150deg,#14709f,var(--teal));color:#fff}
.scard-peri{background:var(--peri);color:#0a1330}
.scard-dark{background:var(--surface);border:1px solid var(--line);color:#fff}
.scard-vs{display:flex;align-items:baseline;gap:.12em;font-size:clamp(3rem,16vw,10rem);flex-wrap:wrap}
.scard-vs span:first-child{color:rgba(255,255,255,.45)}
.scard-vs .arrow{font-weight:400;font-stretch:100%;font-size:.6em;color:var(--peri)}
.scard-vs .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bars{display:grid;gap:14px;margin-top:22px}
.bar-row{display:grid;gap:6px;font-size:.88rem;color:var(--muted)}
.bar{display:block;height:12px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.fill{display:block;height:100%;width:100%;border-radius:99px;transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .15s}
.fill-before{background:#8790ab;transform:scaleX(.006)}
.fill-after{background:linear-gradient(90deg,var(--blue),var(--aqua))}
.js .scard-dark:not(.in) .fill{transform:scaleX(0)}
.source{color:var(--muted);font-size:.9rem;padding-top:20px}
@media (min-width:760px){
  .scard-num{font-stretch:88%}
  .scard{padding:44px 48px 40px;border-radius:40px;min-height:min(62vh,460px)}
  .scard-split{grid-template-columns:1fr 1fr}
  .bar-row{grid-template-columns:200px 1fr;align-items:center}
}

/* services */
.services{padding:110px 0 80px;background:radial-gradient(50% 35% at 100% 0%,rgba(60,195,240,.13),transparent 70%)}
.svc{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc-n{font-weight:700;color:var(--aqua);font-size:.95rem;font-variant-numeric:tabular-nums}
.svc-row h3{font-weight:850;font-stretch:96%;font-size:clamp(1.7rem,7vw,3.6rem);letter-spacing:-.03em;line-height:1;transition:color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.svc-row p{grid-column:2;color:var(--muted);max-width:46ch;margin-top:8px}
.svc-row:hover h3{color:var(--aqua);transform:translateX(8px)}
@media (min-width:900px){.svc-row{grid-template-columns:70px 1.25fr 1fr;padding:38px 0}.svc-row p{grid-column:3;margin:0}}

/* process */
.process{padding:100px 0}
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.step{border:1px solid var(--line);border-radius:28px;padding:28px 26px;background:linear-gradient(170deg,var(--bg-2),var(--bg))}
.step-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--aqua));box-shadow:0 10px 30px -10px rgba(60,195,240,.6);font-weight:900;font-size:1.3rem;margin-bottom:22px}
.step h3{font-weight:800;font-stretch:105%;font-size:1.6rem;letter-spacing:-.02em;margin-bottom:8px}
.step p{color:var(--muted)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:22px}.step{padding:36px 32px;min-height:300px}}

/* why */
.why{padding:100px 0;background:radial-gradient(60% 60% at 0% 100%,rgba(60,88,222,.22),transparent 70%),radial-gradient(50% 50% at 100% 0%,rgba(60,195,240,.12),transparent 70%),var(--bg-2);border-block:1px solid var(--line)}
.why-h{font-weight:850;font-stretch:92%;font-size:clamp(2.2rem,8vw,5rem);line-height:1;letter-spacing:-.035em;max-width:16ch;margin-bottom:40px}
.why-h span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.why-list li{padding:22px 24px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted)}
.why-list b{display:block;color:#fff;font-size:1.1rem;margin-bottom:4px}
@media (min-width:860px){.why-list{grid-template-columns:repeat(3,1fr)}}

/* about */
.about{padding:110px 0}
.about-grid{display:grid;gap:30px}
.about-mark{width:110px}
.about-h{font-weight:800;font-stretch:96%;font-size:clamp(1.8rem,6vw,3.4rem);line-height:1.08;letter-spacing:-.03em;max-width:24ch;margin-bottom:18px}
.about-p{color:var(--text);font-size:clamp(1.1rem,2.6vw,1.3rem);line-height:1.5;margin-bottom:12px;max-width:50ch;font-weight:450}
.about-sig{color:var(--aqua);font-weight:650;margin-bottom:28px}
@media (min-width:860px){.about-grid{grid-template-columns:260px 1fr;gap:60px;align-items:center}.about-mark{width:220px}}

/* connect */
.connect{padding:110px 0 120px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(70% 60% at 35% 100%,rgba(60,88,222,.42),transparent 70%),radial-gradient(60% 50% at 75% 100%,rgba(60,195,240,.25),transparent 70%)}
.connect .mega{margin-inline:auto}
.connect .mega-main{background:linear-gradient(180deg,#fff 40%,var(--peri));-webkit-background-clip:text;background-clip:text;color:transparent}
.connect-sub{color:var(--muted);font-size:1.1rem;margin-bottom:22px}
.connect-email{display:inline-block;font-weight:800;font-stretch:95%;letter-spacing:-.02em;font-size:clamp(1.35rem,6.4vw,3.2rem);text-decoration:none;border-bottom:3px solid var(--aqua);padding-bottom:4px;margin-bottom:34px;overflow-wrap:anywhere;transition:color .25s,border-color .25s}
.connect-email:hover{color:var(--peri);border-color:var(--peri)}
.connect-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* footer */
.footer{border-top:1px solid var(--line);padding:30px 0 40px}
.footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.footer-in img{width:70px}
.footer-in p{color:var(--muted);font-size:.9rem;width:100%}
.footer-social{display:flex;gap:10px}
.footer-social a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line)}
.footer-social a:hover{border-color:#fff}
.footer-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:700px){.footer-in p{width:auto}}

/* motion (JS on, motion allowed) */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.from-left{transform:translateX(-40px)}
.js .reveal.from-right{transform:translateX(40px)}
.js .reveal.in{opacity:1;transform:none}
.js .intro{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) .5s,transform .9s cubic-bezier(.2,.7,.2,1) .5s}
.js.loaded .intro{opacity:1;transform:none}
.js .wm-text{clip-path:inset(0 0 100% 0);transform:translateY(30%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.1s cubic-bezier(.7,0,.2,1)}
.js .wm-2 .wm-text{transition-delay:.12s}
.js.loaded .wm-text{clip-path:inset(-10% -5% -10% -5%);transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .intro,.js .wm-text{opacity:1;transform:none;clip-path:none;transition:none}
  .marquee-track{animation:none}
  .mega-ghost,.wm-ghost{display:none}
  .scard{position:relative;top:auto}
}
