/* ============================================================
   AKAI — Web capabilities page · GRAPHITE (monochrome)
   Motion retained; colour stripped to ink + paper + grey.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0E0E10; --ink-2:#0A0A0C; --ink-soft:#161618;
  --text:#1B1B1D; --muted:#6B6F76; --muted-2:#9A9DA2;
  --paper:#FAFAF9; --surface:#FFFFFF; --surface-2:#F3F3F1;
  --line:rgba(20,20,22,.14); --line-soft:rgba(20,20,22,.08);
  --line-ink:rgba(250,250,249,.14);
  --sans:'Geist',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--sans);font-weight:600;color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.05}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.eyebrow.lt{color:var(--muted-2)}
.thin{color:var(--muted-2);font-weight:600}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}.rv.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;color:var(--paper)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo{display:flex;align-items:center;gap:11px;color:var(--paper)}
.nav-logo .mk{width:26px;height:26px;display:block}
.nav-logo .mk path{stroke:currentColor}
.nav-logo .nl-divider{width:1px;height:22px;background:currentColor;opacity:.3}
.nav-logo .wm{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:.16em;color:currentColor}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,249,.7);transition:color .3s}
.nav-links a:hover{color:var(--paper)}
.nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:10px 18px;border-radius:3px;transition:transform .25s,background .25s,color .25s}
.nav-cta:hover{transform:translateY(-1px)}
.nav.scrolled{background:rgba(250,250,249,.93);backdrop-filter:blur(10px);border-color:var(--line);color:var(--ink)}
.nav.scrolled .nav-logo{color:var(--ink)}
.nav.scrolled .nav-links a{color:var(--muted)}
.nav.scrolled .nav-links a:hover{color:var(--ink)}
.nav.scrolled .nav-cta{background:var(--ink);color:var(--paper)}
@media (max-width:820px){.nav-links{display:none}}

/* hero */
.hero{position:relative;background:var(--ink);color:var(--paper);min-height:100dvh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:1;pointer-events:none}
.hero-bg .ghost{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:600;font-size:46vh;line-height:1;color:rgba(250,250,249,.035);letter-spacing:-.04em;user-select:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line-ink) 1px,transparent 1px),linear-gradient(90deg,var(--line-ink) 1px,transparent 1px);background-size:64px 64px;opacity:.45;-webkit-mask-image:radial-gradient(120% 90% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(120% 90% at 30% 40%,#000,transparent 75%)}
.hero > .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:60px}
.hero h1{color:var(--paper);font-weight:600;font-size:clamp(40px,6.6vw,82px);line-height:1.0;max-width:15ch;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--muted-2);font-weight:600}
.hero .sub{margin-top:30px;font-size:clamp(17px,2.1vw,20px);font-weight:400;color:#B7BABF;max-width:60ch;line-height:1.55}
.hero .cta-row{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:3px;transition:transform .25s,background .25s,border-color .25s,color .25s;display:inline-block}
.btn-primary{background:var(--paper);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(250,250,249,.3);color:var(--paper)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--paper)}
.hero-meta{position:absolute;left:0;right:0;bottom:26px;z-index:1;pointer-events:none}
@media (max-height:720px){.hero-meta{display:none}}
.hero-meta .wrap{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-ink)}
.hero-meta .hm{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7A7E84;padding-top:16px}
.hero-meta .hm b{color:var(--paper);font-weight:500}

/* marquee */
.marquee{background:var(--ink-2);color:var(--paper);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);overflow:hidden;padding:16px 0}
.marquee .track{display:flex;gap:46px;width:max-content;animation:scroll 38s linear infinite;will-change:transform}
.marquee span{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,250,249,.46);white-space:nowrap;display:flex;align-items:center;gap:46px}
.marquee span::after{content:"";width:4px;height:4px;background:var(--muted);border-radius:50%;display:inline-block}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
section.band{padding:118px 0}
section.band.tight{padding:92px 0}
.ink-band{background:var(--ink);color:var(--paper)}
.ink-band h2,.ink-band h3{color:var(--paper)}
.ink-band .eyebrow{color:var(--muted-2)}
.sec-head{max-width:780px;margin-bottom:54px}
.sec-head h2{font-size:clamp(30px,4.2vw,50px)}
.sec-head .lead{margin-top:20px;color:var(--muted);font-size:18px;line-height:1.5}
.ink-band .sec-head .lead{color:#9DA2A8}

/* about */
.statement{font-family:var(--sans);font-weight:600;font-size:clamp(23px,3.2vw,34px);line-height:1.32;color:var(--ink);max-width:22ch;letter-spacing:-.025em}
.statement em{font-style:normal;color:var(--muted)}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.about-grid .body p{color:var(--muted);margin:0 0 16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:80px;border-top:1px solid var(--line);padding-top:34px}
.stat .s-num{font-family:var(--sans);font-size:clamp(34px,5vw,50px);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.035em}
.stat .s-num .u{color:var(--muted-2)}
.stat .s-lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.ink-band .stat .s-num{color:var(--paper)} .ink-band .stat .s-lab{color:#8A8E94} .ink-band .stats{border-color:var(--line-ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:28px 24px 28px 0;border-top:2px solid var(--paper);position:relative}
.step .st-no{font-family:var(--mono);font-size:13px;color:var(--muted-2);letter-spacing:.06em;margin-bottom:16px}
.step h3{font-size:24px;margin-bottom:12px;font-weight:600}
.step p{margin:0;color:#9DA2A8;font-size:15px;line-height:1.55}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}

/* capabilities */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.cap{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:42px 1fr;gap:8px}
.cap .cx{font-family:var(--mono);font-size:13px;color:var(--muted-2);padding-top:6px}
.cap h3{font-size:20px;margin-bottom:6px;font-weight:600}
.cap p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:820px){.caps{grid-template-columns:1fr}}

/* work */
.work{border-top:1px solid var(--line-ink)}
.work .row{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line-ink);align-items:start;transition:background .3s}
.work .row:hover{background:rgba(250,250,249,.04)}
.work .row .w-no{font-family:var(--mono);font-size:13px;color:var(--muted-2);padding-top:8px}
.work .row .w-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.work .row h3{color:var(--paper);font-size:26px;letter-spacing:-.02em}
.work .row h3 .star{color:var(--muted-2);font-size:14px;vertical-align:super;margin-left:5px}
.work .row .w-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.work .row p{margin:10px 0 0;color:#9DA2A8;font-size:15.5px;line-height:1.55;max-width:80ch}

/* industries + clients */
.ind-row{display:flex;flex-wrap:wrap;gap:10px}
.ind-pill{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);border:1px solid var(--line);background:var(--surface);padding:9px 18px;border-radius:100px}
.clients-line{margin-top:40px;font-family:var(--sans);font-weight:500;font-size:clamp(19px,2.4vw,26px);line-height:1.9;color:var(--ink);letter-spacing:-.01em}
.clients-line .dot{color:var(--muted-2);margin:0 8px}

/* integrations */
.ig{margin-bottom:30px}
.ig .ig-h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.ig .ig-h::after{content:"";flex:1;height:1px;background:var(--line-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--paper);border:1px solid rgba(250,250,249,.2);padding:7px 15px;border-radius:3px;transition:border-color .25s,transform .25s}
.chip:hover{border-color:var(--paper);transform:translateY(-2px)}
.powered{margin-top:34px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:#9DA2A8}
.powered b{color:var(--paper)}

/* why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.why .w h3{font-size:20px;margin-bottom:8px;display:flex;gap:12px;align-items:baseline;font-weight:600}
.why .w h3 .wx{font-family:var(--mono);font-size:13px;color:var(--muted-2)}
.why .w p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:820px){.why{grid-template-columns:1fr}}

/* contact */
.contact-final{background:var(--ink);color:var(--paper)}
.contact-final .statement{color:var(--paper);max-width:18ch}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:60px;border-top:1px solid var(--line-ink);padding-top:34px}
.cx-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.cx-val{font-size:17px;color:var(--paper)}
.dl-row{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap}

/* footer */
footer{background:var(--ink-2);color:#7A7E84;padding:30px 0;border-top:1px solid var(--line-ink)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
footer .wrap b{color:var(--paper);font-weight:500}
@media (max-width:560px){.stats,.contact-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}footer .wrap{flex-direction:column;gap:10px}}