/* UHK Vantage — site styles. Tokens lifted from the design system:
   ink #0E1116, paper #FAF8F4, volt #D6FF3F, clay #C4552F.
   Rules followed: sentence case, hairlines not shadows, squared corners
   (4px controls / 10px cards), flat colour only, no gradients or glass. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --ink-900:#0E1116; --ink-800:#171B22; --ink-700:#232830; --ink-600:#343B45;
  --ink-500:#4A515C; --ink-400:#6B7280; --ink-300:#8A929E; --ink-200:#C4CAD2; --ink-100:#E4E7EB;
  --paper-000:#FFFFFF; --paper-050:#FAF8F4; --paper-100:#F1ECE3; --paper-200:#E4DDD0; --paper-300:#D2C8B6;
  --volt-500:#D6FF3F; --volt-600:#BEE81F; --volt-700:#93B510;
  --clay-500:#C4552F; --clay-600:#A34222;

  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-400);
  --border-subtle:var(--paper-200); --border-default:var(--ink-200); --border-strong:var(--ink-900);

  --font-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-quote:'Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --page-max:1240px; --page-pad:48px;
  --radius-ctl:4px; --radius-card:10px; --radius-slab:18px;
  --ease:cubic-bezier(0.2,0,0,1);
  --reveal-ease:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper-050); color:var(--text-body);
  font:400 17px/1.55 var(--font-ui); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}

/* Type scale — hand-tuned, tight tracking at display sizes */
h1,h2,h3{margin:0; color:var(--text-strong); font-family:var(--font-ui); font-weight:700}
h1{font-size:clamp(40px,7vw,104px); line-height:1.02; letter-spacing:-0.035em}
h2{font-size:clamp(30px,4vw,52px); line-height:1.08; letter-spacing:-0.03em}
h3{font-size:21px; line-height:1.25; letter-spacing:-0.015em}
p{margin:0; max-width:62ch}

.label{font:500 12px/1.2 var(--font-mono); letter-spacing:0.14em; text-transform:uppercase}
.quote{font:italic 400 clamp(24px,3vw,34px)/1.28 var(--font-quote); color:var(--text-strong)}
.num{font:500 clamp(34px,4.6vw,52px)/1 var(--font-mono); letter-spacing:-0.03em; color:var(--volt-500)}

a{color:var(--ink-900); text-decoration:none}
a:hover{color:var(--clay-500)}

.wrap{width:100%; max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad)}
section{padding:96px 0}
.band{background:var(--ink-900); color:var(--paper-100)}
.band h1,.band h2,.band h3{color:var(--paper-000)}
.band p{color:var(--ink-300)}
.band .label{color:var(--volt-500)}

/* Buttons — never pills, 4px radius, no scale on press */
.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:var(--radius-ctl);
  padding:14px 22px; font:600 15px/1 var(--font-ui); cursor:pointer; border:1px solid transparent;
  transition:background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), transform 80ms var(--ease);
}
.btn:hover{color:inherit}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--volt-500); color:var(--ink-900) !important; border-color:var(--volt-500)}
.btn-primary:hover{background:var(--volt-600); border-color:var(--volt-600)}
.btn-solid{background:var(--ink-900); color:var(--paper-050) !important; border-color:var(--ink-900)}
.btn-solid:hover{background:var(--ink-800)}
.btn-outline{background:transparent; color:var(--ink-900) !important; border-color:var(--border-strong)}
.btn-outline:hover{background:var(--ink-900); color:var(--paper-050) !important}
.band .btn-outline{color:var(--paper-000) !important; border-color:var(--ink-600)}
.band .btn-outline:hover{background:var(--paper-050); color:var(--ink-900) !important; border-color:var(--paper-050)}
.btn .arw{font:500 16px/1 var(--font-mono)}
:focus-visible{outline:2px solid var(--ink-900); outline-offset:2px}
.band :focus-visible{outline-color:var(--volt-500)}

/* Header — the only translucent element in the system */
header{
  position:sticky; top:0; z-index:40; background:rgba(250,248,244,0.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px}
header nav{display:flex; align-items:center; gap:28px}
header nav a{font:500 14px/1 var(--font-ui); color:var(--text-muted)}
header nav a:hover,header nav a[aria-current="page"]{color:var(--ink-900)}
.logo-h{height:34px; width:auto}

/* Badges + tags */
.badge{display:inline-flex; align-items:center; gap:7px; border-radius:2px; padding:6px 10px;
  font:500 12px/1 var(--font-mono); letter-spacing:0.12em; text-transform:uppercase}
.badge-accent{background:var(--volt-500); color:var(--ink-900)}
.badge-quiet{background:var(--ink-800); color:var(--paper-100); border:1px solid var(--ink-700)}
.tag{display:inline-flex; border-radius:999px; padding:6px 13px; border:1px solid var(--border-subtle);
  font:500 13px/1 var(--font-ui); color:var(--text-body); background:var(--paper-000)}

/* Cards — hairlines, 10px radius, lift 2px on hover */
.card{background:var(--paper-000); border:1px solid var(--border-subtle); border-radius:var(--radius-card);
  padding:32px; display:flex; flex-direction:column; gap:12px;
  transition:transform 220ms var(--ease), box-shadow 220ms var(--ease)}
a.card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(14,17,22,.10)}
.card .label{color:var(--text-muted)}
.card p{color:var(--text-muted); font-size:15px}
.card .more{margin-top:auto; padding-top:8px; font:600 14px/1 var(--font-ui); color:var(--text-strong);
  display:inline-flex; align-items:center; gap:8px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px}

.sec-head{display:flex; flex-direction:column; gap:16px; max-width:34ch}
.sec-head p{color:var(--text-muted)}

/* Proof rail */
.proof{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:72px; padding-top:28px; border-top:1px solid var(--ink-700)}
.proof div{display:flex; flex-direction:column; gap:8px}
.proof span:last-child{font-size:15px; color:var(--ink-300)}

/* Volt slab CTA */
.slab{background:var(--volt-500); border-radius:var(--radius-slab); padding:56px;
  display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap}
.slab .label{color:rgba(14,17,22,.62)}
.slab h2{color:var(--ink-900); max-width:16ch}

/* Steps / list rows */
.rows{border-top:1px solid var(--border-subtle)}
.row{display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--border-subtle); align-items:start}
.row .label{color:var(--text-muted); padding-top:4px}
.row h3{margin-bottom:6px}
.row p{color:var(--text-muted); font-size:15px}

/* Forms */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.field label{font:500 12px/1.2 var(--font-mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted)}
.field input,.field textarea,.field select{
  width:100%; font:400 16px/1.5 var(--font-ui); color:var(--ink-900); background:var(--paper-000);
  border:1px solid var(--border-default); border-radius:var(--radius-ctl); padding:13px 14px;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--ink-900); box-shadow:0 0 0 3px rgba(214,255,63,.45)}

/* Footer */
footer{background:var(--ink-900); color:var(--paper-100); padding:96px 0 32px}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:56px}
.foot-col{display:flex; flex-direction:column; gap:12px}
.foot-col .label{color:var(--volt-500)}
.foot-col a,.foot-col span.item{font-size:15px; color:var(--paper-100)}
.foot-col a:hover{color:var(--volt-500)}
/* align-self stops the column flex container stretching the logo to full width
   (the default align-items:stretch was distorting it and making it blurry) */
footer .stacked{height:96px; width:auto; align-self:flex-start; flex:0 0 auto}
.foot-base{display:flex; justify-content:space-between; gap:20px; margin-top:64px; padding-top:20px; border-top:1px solid var(--ink-700)}
.foot-base .label{color:var(--ink-400)}

/* Reveal — 700ms fade + 12px rise, disabled under reduced motion */
.rev{opacity:0; transform:translateY(12px); transition:opacity 700ms var(--reveal-ease), transform 700ms var(--reveal-ease)}
.rev.in{opacity:1; transform:none}

@media (max-width:900px){
  :root{--page-pad:24px}
  section{padding:64px 0}
  .grid-3,.grid-2,.proof,.foot-grid{grid-template-columns:1fr; gap:20px}
  .foot-grid{gap:36px}
  header nav a{display:none}
  .slab{padding:32px}
  .row{grid-template-columns:1fr; gap:8px}
  .foot-base{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important; animation-duration:0ms !important}
  .rev{opacity:1; transform:none}
  html{scroll-behavior:auto}
}