:root{
  --bg:#f5f6f8; --bg2:#eceef2; --card:#ffffff; --ink:#0b0f19; --muted:#5b6475;
  --line:rgba(11,15,25,.10); --accent:#9cc9ff; --accent-ink:#0b0f19; --accent-deep:#2f6fdc;
  --banner:#0b1220; --max:1240px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0b0f19; --bg2:#111726; --card:#141b2b; --ink:#eef2f8; --muted:#9aa6ba;
  --line:rgba(238,242,248,.10); --accent:#9cc9ff; --accent-ink:#0b0f19; --accent-deep:#9cc9ff;
  --banner:#060a13; color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.small{font-size:11.5px}
.i{width:18px;height:18px;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;padding:15px 22px;border-radius:4px;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(47,111,220,.55)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn-sm{padding:9px 14px;font-size:12px;letter-spacing:1px;font-family:'IBM Plex Mono',monospace}
.btn-lg{padding:18px 26px;font-size:16px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent-deep);box-shadow:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}

/* nav */
.nav{position:sticky;top:14px;z-index:50;display:flex;justify-content:center;padding:14px 16px 0}
.nav-pill{display:flex;align-items:center;gap:26px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 8px 8px 16px;box-shadow:0 10px 30px -18px rgba(11,15,25,.35)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:1px}
.mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:11px;letter-spacing:0}
.links{display:flex;gap:22px;font-size:14px;color:var(--muted)}
.links a:hover{color:var(--ink)}
.theme-toggle{width:34px;height:34px;display:grid;place-items:center;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:none}

/* hero */
.hero{padding:64px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:end}
h1{font-size:clamp(40px,5.6vw,84px);line-height:1.02;font-weight:500;letter-spacing:-2.2px}
.hero-side p{color:var(--muted);font-size:17px;margin-bottom:22px;max-width:460px}
.hero-side .tag{margin:18px 0 0;font-size:11px}
.banner{position:relative;margin-top:48px;height:400px;border-radius:6px;overflow:hidden;background:
  radial-gradient(700px 300px at 70% 40%,rgba(90,160,255,.35),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
  var(--banner)}
.waves{position:absolute;inset:0;width:100%;height:100%}
.banner-copy{position:absolute;left:36px;bottom:34px;color:#fff;max-width:520px}
.banner-copy .mono{color:#9cc9ff;margin-bottom:10px}
.banner-line{font-size:clamp(20px,2.2vw,28px);line-height:1.25;font-weight:500}
.portrait{position:absolute;right:48px;top:50%;transform:translateY(-50%);width:290px;height:290px;object-fit:cover;border-radius:50%;border:3px solid rgba(156,201,255,.9);box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px}
.stats>div{padding:26px 28px 6px 0;border-top:1px solid var(--line)}
.stats>div+div{padding-left:28px;border-left:1px solid var(--line)}
.stats strong{display:block;font-size:clamp(32px,3.6vw,48px);font-weight:500;letter-spacing:-1px;line-height:1.1}
.stats .mono{display:block;margin-top:8px;font-size:11px}

/* sections */
.section{padding:110px 0}
.alt{background:var(--bg2)}
.label{margin-bottom:18px}
.label::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent-deep);margin-right:10px;vertical-align:1px}
h2{font-size:clamp(30px,3.6vw,52px);line-height:1.08;font-weight:500;letter-spacing:-1.2px}
.head-row{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end;margin-bottom:48px}
.head-row p{color:var(--muted)}
h3{font-size:21px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
h4{font-size:17px;font-weight:600;margin-bottom:6px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{padding:30px 26px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);transition:background .2s}
.svc:hover{background:var(--bg2)}
.svc .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:rgba(156,201,255,.25);color:var(--accent-deep);margin-bottom:26px}
.svc .ic .i{width:22px;height:22px}
.svc .mono{margin-bottom:8px}
.svc h3{margin-bottom:10px}
.svc p:last-child{color:var(--muted);font-size:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px}
.step .mono{color:var(--accent-deep);margin-bottom:28px}
.step h3{margin-bottom:10px}
.step p:last-child{color:var(--muted);font-size:15px}
.cta-band{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--banner);color:#fff;border-radius:6px;padding:32px 36px}
.cta-band .mono{color:#9cc9ff;margin-bottom:8px}
.cta-band p:last-child{color:#b9c4d6}

/* case study */
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-stats>div{padding:28px 28px 26px 0}
.case-stats>div+div{padding-left:28px;border-left:1px solid var(--line)}
.case-stats strong{display:block;font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-1px}
.case-stats .mono{display:block;margin-top:6px;font-size:11px}
.sub{margin:56px 0 24px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px}
.how .mono{color:var(--accent-deep);margin-bottom:10px}
.how p:last-child{color:var(--muted);font-size:15px}
.link-cell{display:flex;align-items:flex-end}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.story-text p{color:var(--muted);font-size:18px;margin-bottom:18px}

/* learn */
.learn{display:grid;grid-template-columns:1.4fr auto;gap:48px;align-items:end;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:48px}
.learn p{color:var(--muted);margin-top:14px;max-width:560px}
.learn .small{margin-top:22px}
.learn .small a{text-decoration:underline;color:var(--accent-deep)}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0 48px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.foot .logo{margin-bottom:10px}
.policies{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font-size:14px;color:var(--muted)}
.social{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted)}
.policies a:hover,.social a:hover{color:var(--ink)}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}

@media (max-width:1000px){
  .links{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(3){padding-left:0;border-left:0}
  .hero-grid,.head-row,.story,.learn{grid-template-columns:1fr;gap:28px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .nav-pill{gap:12px;width:100%;justify-content:space-between}
  .logo{font-size:12px}
  .hero{padding-top:36px}
  h1{letter-spacing:-1.2px}
  .banner{height:300px}
  .portrait{width:130px;height:130px;right:18px;top:22px;transform:none}
  .banner-copy{left:20px;right:20px;bottom:22px}
  .stats,.case-stats,.steps,.svc-grid,.how-grid{grid-template-columns:1fr}
  .stats>div+div,.case-stats>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .section{padding:72px 0}
  .learn{padding:28px}
  .btn-lg,.cta-band .btn{width:100%;justify-content:center}
  .wa-float{width:48px;height:48px;right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:680px){.logo .name{display:none}.portrait{width:150px;height:150px}}
@media (max-width:680px){
  .banner{height:360px}
  .portrait{width:120px;height:120px;right:18px;top:20px;transform:none}
  .banner-copy{left:20px;right:20px;bottom:22px;max-width:none}
  .banner-copy .mono{font-size:10px;letter-spacing:1px;line-height:1.6}
  .banner-line{font-size:19px}
  .nav-pill{padding-left:10px}
}