:root{
  --accent:oklch(0.78 0.12 200);
  --accent-hi:oklch(0.86 0.1 200);
  --accent-ink:oklch(0.5 0.12 200);
  --green:oklch(0.78 0.14 160);
  --ink:#0E1116;
  --bg:#F5F5F2;
  --dark:#0A0D12;
  --muted:#555E6B;
  --sans:Geist,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
section{scroll-margin-top:72px}
.wrap{max-width:1200px;margin:0 auto}
.page{min-height:100vh;display:flex;flex-direction:column}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,13,18,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.site-header .wrap{padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:var(--dark);font:700 14px var(--sans)}
.brand-name{font:600 17px var(--sans);letter-spacing:-.02em}
.brand-name span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav a{font:500 14px var(--sans);color:#A9B2BF;transition:color .2s}
.nav a:hover,.nav a.active{color:#fff}
.nav a.cta{color:var(--dark);background:#fff;padding:11px 16px;border-radius:999px}
.nav a.cta:hover{background:var(--accent-hi);color:var(--dark)}

/* shared */
.eyebrow{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.dark .eyebrow,.hero .eyebrow{color:var(--accent)}
h2{font:600 clamp(32px,4vw,48px)/1.08 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.head-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px;align-items:end}
.stack-col{display:flex;flex-direction:column;gap:16px}
.lede{font:400 17px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}
.dark{background:var(--dark);color:#fff}
.dark .lede{color:#A9B2BF}
.btn{font:500 15px var(--sans);padding:14px 22px;border-radius:999px;border:0;cursor:pointer;display:inline-block}
.btn-primary{background:var(--accent);color:var(--dark)}
.btn-primary:hover{background:var(--accent-hi);color:var(--dark)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* hero */
.hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.hero-inner{position:relative;padding:96px 28px 88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.status{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero h1{font:600 clamp(40px,5.6vw,68px)/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.hero-lede{max-width:540px;font:400 18px/1.6 var(--sans);color:#A9B2BF;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);max-width:540px}
.stat-n{font:600 30px var(--sans);letter-spacing:-.03em}
.stat-l{font:400 13px/1.4 var(--sans);color:#8A94A3}

/* terminal card */
.term{background:#0F141B;border:1px solid #1F2733;border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.term-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #1F2733}
.dots{display:flex;gap:7px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2A323E}
.term-title{font:400 12px var(--mono);color:#7F8A9A}
.term-body{padding:22px 20px;display:flex;flex-direction:column;gap:20px}
.pipeline{display:flex;flex-direction:column;gap:14px}
.stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.stage{font:500 11.5px var(--mono);text-align:center;padding:10px 0;border-radius:8px;border:1px solid #263040;background:#161C24;color:#7F8A9A;animation:ixStage 6s 0s infinite both}
.bar{height:3px;background:#161C24;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--green));animation:ixBar 6s linear infinite}
.pipe-meta{display:flex;justify-content:space-between;font:400 12px var(--mono);color:#7F8A9A}
.pipe-meta .ok{color:var(--green)}
.log{font:400 12.5px/1.9 var(--mono);color:#7F8A9A;background:#0B0F14;border:1px solid #1A212B;border-radius:10px;padding:14px 16px;overflow-x:auto}
.log b{font-weight:400;color:#C9D1DC}
.log .p{color:var(--accent)}
.log .ok{color:var(--green)}
.log .caret{color:#fff;animation:ixBlink 1s steps(1) infinite}

.clients{position:relative;border-top:1px solid rgba(255,255,255,.07)}
.clients .wrap{padding:26px 28px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.clients-label{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7F8A9A}
.clients-list{display:flex;gap:40px;flex-wrap:wrap;font:600 16px var(--sans);letter-spacing:-.01em;color:#B7C0CC}

/* services */
.services{padding:112px 28px}
.services .wrap{display:flex;flex-direction:column;gap:56px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1px;background:#E1E1DC;border:1px solid #E1E1DC;border-radius:18px;overflow:hidden}
.service{background:#FBFBF9;padding:34px 30px;display:flex;flex-direction:column;gap:14px;transition:background .25s}
.service:hover{background:#fff}
.service .n{font:500 12px var(--mono);color:var(--accent-ink)}
.service h3{font:600 21px/1.25 var(--sans);letter-spacing:-.02em}
.service p{font:400 15px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}
.service .tools{margin-top:auto;padding-top:10px;font:400 12px/1.6 var(--mono);color:#636B77}

/* approach */
.approach{padding:112px 28px;background:#fff;border-top:1px solid #E6E6E1;border-bottom:1px solid #E6E6E1}
.approach .wrap{display:flex;flex-direction:column;gap:56px}
.approach .head{max-width:720px;display:flex;flex-direction:column;gap:16px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px}
.step{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:2px solid var(--ink)}
.step.last{border-top-color:oklch(0.6 0.12 200)}
.step .k{font:500 13px var(--mono);color:#636B77}
.step.last .k{color:var(--accent-ink)}
.step h3{font:600 22px var(--sans);letter-spacing:-.02em}
.step p{font:400 15px/1.6 var(--sans);color:var(--muted)}

/* stack */
.stack{padding:112px 28px}
.stack .wrap{display:flex;flex-direction:column;gap:44px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font:500 13.5px var(--sans);padding:11px 16px;border-radius:999px;cursor:pointer;border:1px solid #263040;background:transparent;color:#A9B2BF;transition:all .2s}
.tab[aria-pressed="true"]{background:#fff;color:var(--dark);border-color:#fff}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px;min-height:220px;align-content:start}
.chip{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:12px;background:#10161E;border:1px solid #1D2530}
.chip:hover{border-color:oklch(0.6 0.1 200)}
.chip b{font:500 15px var(--sans);color:#F1F4F8}
.chip span{font:400 11.5px var(--mono);color:#7F8A9A}

/* experience */
.experience{padding:112px 28px}
.experience .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:64px}
.exp-intro{display:flex;flex-direction:column;gap:18px;align-self:start;position:sticky;top:110px}
.pills{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.pills span{font:500 12.5px var(--sans);padding:7px 12px;border-radius:999px;background:#EAEAE5}
.timeline{display:flex;flex-direction:column}
.job{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:26px 0;border-top:1px solid #DCDCD6}
.job:last-child{border-bottom:1px solid #DCDCD6}
.job time{font:500 13px var(--mono);color:#636B77}
.job.current time{color:var(--accent-ink)}
.job h3{font:600 19px var(--sans);letter-spacing:-.015em;margin-bottom:6px}
.job p{font:400 15px/1.55 var(--sans);color:var(--muted)}

/* engage */
.engage{padding:0 28px 112px}
.engage .wrap{display:flex;flex-direction:column;gap:40px}
.engage .head{max-width:720px;display:flex;flex-direction:column;gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.card{background:#fff;border:1px solid #E1E1DC;border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:14px}
.card h3{font:600 22px var(--sans);letter-spacing:-.02em}
.card p{font:400 15px/1.6 var(--sans);color:var(--muted)}
.card .meta{margin-top:auto;padding-top:12px;font:500 13px var(--mono);color:#636B77}
.card.featured{background:var(--dark);color:#fff;border-color:var(--dark)}
.card.featured p{color:#A9B2BF}
.card.featured .meta{color:var(--accent)}

/* contact */
.contact{padding:112px 28px}
.contact .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px}
.contact-copy{display:flex;flex-direction:column;gap:22px}
.contact h2{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em}
.contact-copy .lede{max-width:460px}
.contact-links{display:flex;flex-direction:column;gap:14px;padding-top:12px;font:400 15px var(--mono)}
.contact-links span{color:#8A94A3}
.form-card{background:#10161E;border:1px solid #1D2530;border-radius:18px;padding:32px}
form{display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:8px;font:500 13px var(--sans);color:#A9B2BF}
input,textarea{font:400 16px var(--sans);max-width:100%;color:#fff;background:var(--dark);border:1px solid #263040;border-radius:10px;padding:13px 14px;outline:none}
textarea{line-height:1.5;resize:vertical}
input:focus,textarea:focus{border-color:var(--accent)}
form .btn{margin-top:6px}
.sent{display:flex;flex-direction:column;gap:12px;min-height:320px;justify-content:center}
.sent[hidden],form[hidden]{display:none}
.sent .tick{width:40px;height:40px;border-radius:50%;background:oklch(0.35 0.08 160);border:1px solid oklch(0.72 0.14 160);display:grid;place-items:center;color:#E8FFF4;font:600 18px var(--sans)}
.sent h3{font:600 24px var(--sans);letter-spacing:-.02em}
.sent p{font:400 15px/1.6 var(--sans);color:#A9B2BF}

.site-footer{background:var(--dark);color:#7F8A9A;border-top:1px solid rgba(255,255,255,.07)}
.site-footer .wrap{padding:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 13px var(--sans)}
.site-footer a{color:#8A94A3}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav a.cta:focus-visible,.tab:focus-visible{border-radius:999px}
.site-header :focus-visible,.hero :focus-visible,.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--accent)}
input:focus-visible,textarea:focus-visible{border-radius:10px;outline-offset:2px}
.sent h3:focus{outline:none}
.contact-links a,.sent p,.form-error{overflow-wrap:anywhere}
.stage:nth-child(2){animation-delay:.7s}
.stage:nth-child(3){animation-delay:1.4s}
.stage:nth-child(4){animation-delay:2.1s}
.stage:nth-child(5){animation-delay:2.8s}
.stage:nth-child(6){animation-delay:3.5s}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{font:400 14px/1.5 var(--sans);color:#FF9B9B}
.form-error[hidden]{display:none}
button:disabled{opacity:.6;cursor:wait}
@keyframes ixStage{0%,8%{background:#161C24;border-color:#263040;color:#7F8A9A}14%,100%{background:oklch(0.32 0.06 160);border-color:oklch(0.72 0.14 160);color:#E8FFF4}}
@keyframes ixBar{0%{width:0}85%,100%{width:100%}}
@keyframes ixBlink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{animation:none;background:oklch(0.32 0.06 160);border-color:oklch(0.72 0.14 160);color:#E8FFF4}
  .bar i{animation:none;width:100%}
  .log .caret{animation:none}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr;gap:16px}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav{gap:14px}
  .nav a:not(.cta){display:none}
  .job{grid-template-columns:1fr;gap:6px}
  .exp-intro{position:static}
}