*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--accent-text)}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)}
@media (min-width:768px){.wrap{padding-inline:var(--s-6)}}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-2);top:-60px;z-index:60;background:var(--accent);
  color:var(--accent-text);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);transition:top .18s ease}
.skip:focus{top:var(--s-2)}

.site-head{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--border)}
.head-inner{display:flex;align-items:center;gap:var(--s-4);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;letter-spacing:-.01em;min-height:44px}
.brand-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-text)}
.brand-mark svg{width:15px;height:15px}
.nav{display:none;margin-inline-start:auto}
.nav ul{display:flex;gap:var(--s-1)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);
  color:var(--muted);border-radius:var(--r-sm);transition:color .18s ease,background .18s ease}
.nav a:hover{color:var(--text);background:var(--surface)}
.head-cta{margin-inline-start:auto;min-height:40px;padding:0 var(--s-3);font-size:var(--fs-small)}
@media (min-width:900px){.nav{display:block}.head-cta{margin-inline-start:var(--s-2)}}

.hero{padding-block:clamp(var(--s-8),9vw,var(--s-16)) var(--s-8)}
.hero-grid{display:grid;gap:var(--s-8);align-items:start}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:var(--s-12)}}
.kicker{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
h1{font-size:clamp(var(--fs-h3),4.4vw,var(--fs-h1));line-height:1.03;letter-spacing:-.028em;
  font-weight:600;text-wrap:balance;max-width:19ch}
.lead{margin-top:var(--s-4);font-size:var(--fs-lead);line-height:1.5;color:var(--muted);max-width:52ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.micro{margin-top:var(--s-4);font-size:var(--fs-caption);color:var(--muted);display:flex;
  align-items:center;gap:var(--s-1)}
.micro svg{width:14px;height:14px;color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);
  min-height:46px;padding:0 var(--s-4);border-radius:var(--r-sm);border:1px solid transparent;
  font-weight:500;font-size:var(--fs-body);cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--accent-text)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--border);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text);background:var(--surface)}
.btn-sm{min-height:44px;padding:0 var(--s-3);font-size:var(--fs-small)}

.specimen{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-4);box-shadow:var(--shadow-1)}
@media (min-width:768px){.specimen{padding:var(--s-6)}}
.specimen-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding-bottom:var(--s-3);border-bottom:1px solid var(--border)}
.copy-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s-2);
  border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--muted);
  font-size:11px;letter-spacing:.04em;cursor:pointer;transition:color .16s ease,border-color .16s ease}
.copy-btn:hover{color:var(--text);border-color:var(--text)}
.copy-btn svg{width:12px;height:12px}
.specimen-glyph{display:flex;align-items:baseline;gap:var(--s-3);padding-block:var(--s-4)}
.specimen-glyph strong{font-size:calc(var(--fs-h1) * 1.15);line-height:.9;font-weight:600;letter-spacing:-.04em}
.specimen-glyph span{font-size:var(--fs-caption);color:var(--muted);font-family:var(--font-mono)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);padding-block:var(--s-3);
  border-top:1px solid var(--border)}
.chip{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.chip i{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);flex:none}
.chip b{display:block;font-size:var(--fs-caption);font-weight:500;text-transform:capitalize}
.chip code{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.specimen-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);
  padding-top:var(--s-3);border-top:1px solid var(--border)}
.specimen-vals div{min-width:0}
.specimen-vals dt{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.specimen-vals dd{font-size:var(--fs-small);font-weight:500}

.proof{border-block:1px solid var(--border);background:var(--surface)}
.proof ul{display:grid;gap:var(--s-4);padding-block:var(--s-6)}
@media (min-width:768px){.proof ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}}
.proof li{display:flex;flex-direction:column;gap:var(--s-1)}
.proof strong{font-family:var(--font-mono);font-size:calc(var(--fs-h2) * .9);line-height:1;
  font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof span{font-size:var(--fs-small);color:var(--muted);max-width:32ch}

.process{padding-block:var(--s-12)}
.process-grid{display:grid;gap:var(--s-6)}
@media (min-width:960px){.process-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--s-12)}}
.process-intro h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.022em;font-weight:600;max-width:16ch}
.process-intro p{margin-top:var(--s-3);color:var(--muted);max-width:38ch}
@media (min-width:960px){.process-intro{position:sticky;top:96px;align-self:start}}
.steps{display:grid;gap:0;border-top:1px solid var(--border)}
.steps li{display:grid;gap:var(--s-1);padding-block:var(--s-5);border-bottom:1px solid var(--border)}
@media (min-width:640px){.steps li{grid-template-columns:44px minmax(0,1fr);column-gap:var(--s-4);align-items:start}}
.steps .n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--muted);padding-top:4px}
.steps h3{font-size:var(--fs-h3);line-height:1.25;font-weight:600;letter-spacing:-.012em}
.steps p{margin-top:var(--s-1);color:var(--muted);max-width:62ch}

.data{padding-block:var(--s-12);background:var(--surface);border-block:1px solid var(--border)}
.data h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;font-weight:600}
.table-scroll{margin-top:var(--s-5);overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:420px}
caption{text-align:left;padding:var(--s-3) var(--s-4);color:var(--muted);font-size:var(--fs-caption)}
th,td{text-align:left;padding:var(--s-3) var(--s-4);border-top:1px solid var(--border)}
thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--surface-alt)}
tbody td:first-child{color:var(--muted)}
tbody td:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--surface)}
.note{margin-top:var(--s-3);font-size:var(--fs-caption);color:var(--muted);max-width:70ch}

.quote{padding-block:var(--s-12)}
.quote blockquote{max-width:46ch}
.quote p{font-size:var(--fs-h3);line-height:1.35;font-weight:500;
  letter-spacing:-.014em;text-wrap:pretty}
.quote p::before{content:"";display:block;width:var(--s-8);height:2px;background:var(--accent);margin-bottom:var(--s-4)}
.quote cite{display:block;margin-top:var(--s-4);font-style:normal;font-family:var(--font-mono);
  font-size:var(--fs-caption);color:var(--muted)}

.cta{padding-block:var(--s-12)}
.cta-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);display:grid;gap:var(--s-5)}
@media (min-width:880px){.cta-panel{grid-template-columns:1.1fr .9fr;align-items:center;padding:var(--s-8);gap:var(--s-8)}}
.cta-panel h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;font-weight:600;max-width:20ch}
.cta-panel p{margin-top:var(--s-2);color:var(--muted);max-width:44ch}
.form{display:grid;gap:var(--s-2)}
.form label{font-size:var(--fs-caption);color:var(--muted);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.form-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.form input{flex:1 1 200px;min-height:46px;padding:0 var(--s-3);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-body)}
.form input:hover{border-color:var(--muted)}
.form input::placeholder{color:var(--muted);opacity:.8}
.form .btn{flex:0 0 auto}
.form-hint{font-size:var(--fs-caption);color:var(--muted)}
.form-msg{font-size:var(--fs-small);min-height:20px}
.form-msg[data-state="error"]{color:var(--danger)}
.form-msg[data-state="ok"]{color:var(--text)}

.site-foot{border-top:1px solid var(--border);padding-block:var(--s-6)}
.foot-inner{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  font-size:var(--fs-caption);color:var(--muted)}
.foot-inner a{color:var(--text);min-height:44px;display:inline-flex;align-items:center}
.foot-links{display:flex;gap:var(--s-4)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-copy,.specimen{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.specimen{animation-delay:.06s}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);
  font-size:var(--fs-small);z-index:80;transition:opacity .2s ease,transform .2s ease}
.toast[data-open="true"]{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}