/* Layout: B's rounded tiles sitting on F's strict 12-column grid with hairlines and mono labels; motion is driven only by scroll position */
:root{
  --bg:#f3f3f0; --ink:#151515; --soft:#5c5c58; --line:#cdcdc8; --tile:#ffffff; --invert-bg:#151515; --invert-fg:#f3f3f0;
  --round:"M PLUS Rounded 1c","Nunito",ui-rounded,system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:26px; --max:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121211;--ink:#f1f1ee;--soft:#a9a9a4;--line:#363634;--tile:#1c1c1b;--invert-bg:#f1f1ee;--invert-fg:#121211;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121211;--ink:#f1f1ee;--soft:#a9a9a4;--line:#363634;--tile:#1c1c1b;--invert-bg:#f1f1ee;--invert-fg:#121211;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.65;margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--round);text-wrap:balance;margin:0}
.label{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--soft)}
a{color:inherit}

/* header (F) */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.logo{font-family:var(--round);font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.3px}
.logo small{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:1px;color:var(--soft);margin-left:10px;text-transform:uppercase}
nav{display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase}
nav a{text-decoration:none}
nav a:hover,nav a:focus-visible{text-decoration:underline;text-underline-offset:5px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--ink);width:100%;transform-origin:left;transform:scaleX(0)}

/* hero */
.hero{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.hero .label{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(42px,7.4vw,96px);line-height:1.04;font-weight:800;letter-spacing:-1.5px;max-width:13ch}
.hero-row{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:40px;border-top:1px solid var(--ink);padding-top:22px}
.hero-row p{grid-column:1/7;margin:0;color:var(--soft);font-size:20px;min-width:0}
.hero-row .ctas{grid-column:8/13;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;background:var(--invert-bg);color:var(--invert-fg);text-decoration:none;font-weight:700;font-family:var(--round);font-size:16px;border:2px solid var(--invert-bg);transition:transform .2s}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.scroll-hint{margin-top:56px;display:flex;align-items:center;gap:12px}
.scroll-hint i{width:1px;height:40px;background:var(--ink);display:block;transform-origin:top}

/* section heads (F) */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;border-top:1px solid var(--line);padding-top:18px;margin-bottom:36px}
.sec-head .label{grid-column:1/4}
.sec-head h2{grid-column:4/13;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.8px;font-weight:800}

/* bento (B) */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:28px;min-width:0;display:flex;flex-direction:column;gap:10px;will-change:transform}
.tile h3{font-size:24px;font-weight:700;line-height:1.2}
.tile p{margin:0;color:var(--soft);font-size:17px}
.tile .label{margin-bottom:auto;padding-bottom:22px}
.t1{grid-column:span 7;grid-row:span 2;background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.t1 h3{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.6px}
.t1 p,.t1 .label{color:color-mix(in srgb,var(--invert-fg) 70%,transparent)}
.t2,.t3{grid-column:span 5}
.t4{grid-column:span 5}
.t5{grid-column:span 7}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips span{border:1.5px solid var(--ink);border-radius:99px;padding:4px 14px;font-size:15px;font-weight:600}

/* steps: sticky title + line that fills on scroll */
.steps-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.steps-side{grid-column:1/5;position:sticky;top:110px;align-self:start}
.steps-side h2{font-size:clamp(30px,4.4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.8px;margin-top:14px}
.steps-side p{color:var(--soft);margin:16px 0 0;max-width:30ch}
.steps{grid-column:6/13;list-style:none;margin:0;padding:0;position:relative}
.steps::before,.steps .fill{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.steps .fill{background:var(--ink);transform-origin:top;transform:scaleY(0)}
.steps .st{position:relative;padding:0 0 64px 76px}
.steps .st:last-child{padding-bottom:0}
.steps .dot{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--bg);display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:18px;transition:background .35s,color .35s,transform .35s}
.steps .st.on .dot{background:var(--invert-bg);color:var(--invert-fg);transform:scale(1.08)}
.steps h3{font-size:26px;font-weight:700;padding-top:6px}
.steps p{margin:8px 0 0;color:var(--soft);max-width:44ch}

/* platforms row (F) */
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.specs div{padding:20px 18px;border-left:1px solid var(--line);min-width:0}
.specs div:first-child{border-left:0;padding-left:0}
.specs b{display:block;font-family:var(--round);font-size:20px;margin-top:6px;font-weight:700}

/* CTA tile that grows into place */
.cta{background:var(--invert-bg);color:var(--invert-fg);border-radius:calc(var(--r) + 10px);padding:clamp(36px,6vw,80px);display:grid;gap:22px;justify-items:start;will-change:transform}
.cta h2{font-size:clamp(34px,5.4vw,68px);line-height:1.05;font-weight:800;letter-spacing:-1px;max-width:14ch}
.cta p{margin:0;color:color-mix(in srgb,var(--invert-fg) 70%,transparent);max-width:44ch}
.cta .btn{background:var(--invert-fg);color:var(--invert-bg);border-color:var(--invert-fg)}

footer{border-top:1px solid var(--line);padding-block:28px 40px;font-family:var(--mono);font-size:12px;color:var(--soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* scroll-reveal base: visible by default; JS only adds offsets for elements below the fold */
.rv{will-change:transform,opacity}

@media (max-width:820px){
  .hero-row p,.hero-row .ctas{grid-column:1/13;justify-content:flex-start}
  .sec-head .label,.sec-head h2{grid-column:1/13}
  .t1,.t2,.t3,.t4,.t5{grid-column:1/13;grid-row:auto}
  .steps-side{grid-column:1/13;position:static}
  .steps{grid-column:1/13;margin-top:28px}
  .specs{grid-template-columns:1fr 1fr}
  .specs div:nth-child(3){border-left:0;padding-left:0}
  .specs div:nth-child(n+3){border-top:1px solid var(--line)}
  nav{gap:14px}
  .logo small{display:none}
}
@media (max-width:480px){nav a:first-child{display:none}}


nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.page-head{padding-block:clamp(56px,8vw,104px) clamp(24px,4vw,48px)}
.page-head .label{display:block;margin-bottom:18px}
.page-head h1{font-size:clamp(40px,6.4vw,80px);line-height:1.05;font-weight:800;letter-spacing:-1.2px;max-width:14ch}
.page-head p{color:var(--soft);font-size:20px;max-width:52ch;margin:22px 0 0;border-top:1px solid var(--ink);padding-top:20px}
.tile ul{margin:4px 0 0;padding-left:20px;color:var(--soft);font-size:17px;display:grid;gap:4px}
.t1 ul{color:color-mix(in srgb,var(--invert-fg) 72%,transparent)}
.third{grid-column:span 4}
.half{grid-column:span 6}
.contact-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.contact-grid .info{grid-column:span 5}
.contact-grid form{grid-column:span 7}
.info dl{margin:0;display:grid;gap:18px}
.info dt{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--soft)}
.info dd{margin:4px 0 0;font-family:var(--round);font-size:20px;font-weight:700}
form label{display:block;font-weight:700;font-size:15px;margin-top:14px}
form input,form textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:1.5px solid var(--ink);border-radius:16px;padding:12px 16px;margin-top:6px}
form input:focus-visible,form textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
form .btn{margin-top:20px;cursor:pointer}
@media (max-width:820px){.third,.half,.contact-grid .info,.contact-grid form{grid-column:1/13}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.tile,.cta{transform:none!important;opacity:1!important}.progress{display:none}}
.contact-grid{align-items:start}
.info .label,form.tile .label{margin-bottom:0;padding-bottom:6px}
form .btn{align-self:flex-start}
form label{margin-top:4px}