/* Kenseme — Circuit Edge (shifted), dark treatment.
   Roles per brand guide §6. Filament on carbon only. */
:root{
  --carbon:#0C1413; --pitch:#04352E; --verdigris:#0A7A66;
  --signal:#00A67E; --current:#0FC9A0; --filament:#12EDA8;
  --ash:#8A9591; --paper:#F1F5F3;
  --raised:#161F1C; --line:#22302C; --muted:#9FB0AA;
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--carbon); color:var(--paper);
  font-family:var(--display); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1080px,calc(100% - 48px)); margin-inline:auto}
a{color:var(--filament)}
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--filament); margin:0;
}

header{padding:28px 0 0}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
header img{height:38px; width:auto; display:block}
.nav-note{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash)}

.hero{padding:72px 0 64px; border-bottom:1px solid var(--line)}
h1{
  font-size:clamp(34px,5.2vw,60px); font-weight:700; letter-spacing:-.03em;
  line-height:1.08; margin:18px 0 0; text-wrap:balance; max-width:20ch;
}
h1 .hl{color:var(--filament)}
.lead{font-size:clamp(17px,2.1vw,21px); line-height:1.55; color:var(--muted); margin:22px 0 0; max-width:62ch}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:56px 0 0}
.stat{background:var(--carbon); padding:26px 24px}
.stat b{display:block; font-size:38px; font-weight:700; letter-spacing:-.03em; color:var(--filament); line-height:1;
        font-variant-numeric:tabular-nums}
.stat span{display:block; font-size:15px; color:var(--muted); margin-top:10px; line-height:1.5}
.src{font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ash); margin:16px 0 0; max-width:80ch}

section{padding:64px 0; border-bottom:1px solid var(--line)}
h2{font-size:clamp(24px,3.2vw,34px); font-weight:700; letter-spacing:-.025em; line-height:1.2; margin:14px 0 0; max-width:26ch}
.body{font-size:17px; line-height:1.65; color:var(--muted); margin:18px 0 0; max-width:62ch}
.body b{color:var(--paper); font-weight:600}

.three{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; margin:38px 0 0}
.card{background:var(--raised); border-left:3px solid var(--signal); padding:24px 22px}
.card h3{font-size:18px; font-weight:600; margin:0 0 8px}
.card p{font-size:15.5px; line-height:1.55; color:var(--muted); margin:0}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0 0; max-width:720px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1 / -1}
label{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash)}
input,textarea{
  font-family:var(--display); font-size:16px; color:var(--paper);
  background:var(--raised); border:1px solid var(--line); border-radius:0;
  padding:13px 14px; width:100%;
}
input:focus,textarea:focus{outline:2px solid var(--signal); outline-offset:-2px; border-color:transparent}
textarea{min-height:104px; resize:vertical; line-height:1.5}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
button{
  font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.01em;
  background:var(--signal); color:#052019; border:0; padding:15px 34px; cursor:pointer;
  align-self:flex-start; width:auto;
}
button:hover{background:var(--current)}
button:disabled{opacity:.55; cursor:default}
.formnote{font-size:14.5px; color:var(--ash); margin:18px 0 0; max-width:62ch}
.status{font-size:16px; margin:18px 0 0; min-height:24px}
.status.ok{color:var(--filament)}
.status.err{color:#FF9B8A}

footer{padding:40px 0 56px}
footer .wrap{display:flex; gap:12px 28px; flex-wrap:wrap; align-items:baseline;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ash)}
footer a{color:var(--verdigris); text-decoration:none}
footer a:hover{color:var(--filament)}

@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .hero{padding:52px 0 44px}
  section{padding:48px 0}
}