:root{
  --bg:#FAF7F0; --surface:#FFFDF8; --sunk:#F3ECDF;
  --ink:#1A1A18; --muted:#6F6A60; --line:#E7DFD1;
  --accent:#C15F3C; --accent-soft:#E7C9B8;
  --ok:#3F7D5B; --warn:#B8762E; --bad:#B23A36;
  --display:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
a{color:inherit;text-decoration:none;}
em{font-style:italic;color:var(--accent);}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--sunk);padding:.1em .4em;border-radius:6px;}

/* header */
.site{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-0.01em;}
.logo span{color:var(--accent);}
.top-nav{display:flex;gap:28px;align-items:center;font-size:15px;color:var(--muted);}
.top-nav a:hover{color:var(--ink);}
.top-nav .ghost{color:var(--accent);}

/* hero */
.hero{padding:96px 24px 64px;}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:20px;}
h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,72px);line-height:1.02;letter-spacing:-0.02em;margin-bottom:24px;}
.lede{max-width:660px;font-size:19px;color:var(--muted);}
.lede em{color:var(--ink);font-style:normal;font-weight:600;}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line);max-width:880px;}
.value dt{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-0.01em;color:var(--accent);}
.value dd{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.5;}
@media(max-width:760px){.value{grid-template-columns:1fr;gap:16px;}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;border:1px solid var(--accent);border-radius:8px;padding:12px 22px;cursor:pointer;transition:transform .14s ease,background .14s ease;}
.btn:hover{transform:translateY(-1px);background:#a94e2f;}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{background:var(--surface);border-color:var(--accent-soft);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* sections */
.band{padding:64px 24px;border-top:1px solid var(--line);}
.section-title{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px);letter-spacing:-0.01em;}
.section-sub{color:var(--muted);font-size:17px;margin:10px 0 36px;max-width:640px;}

/* hybrid gate cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;}
.gate-card.soft{background:linear-gradient(180deg,#FBF1EA,var(--surface));}
.gate-card h3{font-family:var(--display);font-weight:500;font-size:22px;margin:14px 0 8px;}
.gate-card p{color:var(--muted);font-size:15px;}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);background:#E6F0EA;padding:4px 9px;border-radius:999px;}
.tag.soft{color:var(--accent);background:#F5E2D7;}

/* architecture flow */
.flow{display:flex;flex-direction:column;align-items:center;gap:8px;}
.node{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px;text-align:center;max-width:680px;width:100%;}
.node b{font-family:var(--display);font-weight:500;font-size:17px;display:block;}
.node span{color:var(--muted);font-size:13.5px;}
.node.hardnode{border-color:var(--ok);background:#EEF5F0;}
.node.softnode{border-color:var(--accent-soft);background:#FBF1EA;}
.node.loopnode{border-color:var(--accent);background:#F8EAE1;}
.node.out{background:var(--sunk);}
.arrow{color:var(--muted);font-size:18px;}
.split{display:flex;gap:24px;width:100%;max-width:680px;justify-content:center;}
.branch{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}

/* demo studio */
.studio{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:start;}
.viewport{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(60,40,20,.45);}
.vp-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sunk);}
.vp-chrome span{width:11px;height:11px;border-radius:50%;background:#d8cdb8;}
.vp-chrome em{font-style:normal;margin-left:10px;font-size:12.5px;color:var(--muted);font-family:ui-monospace,monospace;}
#stage{width:100%;height:480px;border:0;background:#fff;display:block;transition:opacity .2s ease;}
.vp-foot{padding:10px 14px;border-top:1px solid var(--line);}
.badge{font-size:12px;font-weight:600;color:var(--muted);}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0;}
.gauge{position:relative;width:120px;height:120px;margin:4px auto 6px;}
.gauge svg{display:block;}
.ring-bg{fill:none;stroke:var(--sunk);stroke-width:10;}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke .4s ease;}
/* Centred number; baseline-aligned "/100" sits next to it, never over it. */
.gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:500;font-size:34px;line-height:1;}
.gauge-num span{display:inline-block;min-width:1.6ch;text-align:right;}
.gauge-num small{font-size:14px;color:var(--muted);margin-left:3px;}
.gauge-num.pop{animation:scorepop .45s ease;}
.gauge-label{text-align:center;font-size:12.5px;color:var(--muted);margin:6px 0 18px;}
.verdict{font-size:15px;font-style:italic;font-family:var(--display);color:var(--ink);min-height:46px;border-left:3px solid var(--accent-soft);padding-left:12px;overflow-wrap:anywhere;}
.violations{margin-top:16px;display:flex;flex-direction:column;gap:9px;max-height:300px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--accent-soft) transparent;}
.violations::-webkit-scrollbar{width:7px;}
.violations::-webkit-scrollbar-thumb{background:var(--accent-soft);border-radius:999px;}
.viol{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);animation:rise .3s ease both;}
.viol .vh{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;flex-wrap:wrap;}
.viol .vfix{font-size:12.5px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere;}
.sev{width:8px;height:8px;border-radius:50%;flex:none;}
.sev.critical{background:var(--bad);} .sev.major{background:var(--warn);} .sev.minor{background:var(--muted);} .sev.info{background:var(--ok);}
.clean{color:var(--ok);font-weight:600;font-size:14px;display:flex;gap:8px;align-items:center;}
@keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes scorepop{0%{transform:scale(1);}40%{transform:scale(1.12);}100%{transform:scale(1);}}
@keyframes chippulse{0%{box-shadow:0 0 0 0 rgba(193,95,60,.45);}100%{box-shadow:0 0 0 10px rgba(193,95,60,0);}}

/* controls */
.controls{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.timeline{display:flex;gap:10px;flex-wrap:wrap;}
.chip{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;cursor:pointer;min-width:64px;transition:border-color .15s;}
.chip:hover{border-color:var(--accent-soft);}
.chip.active{border-color:var(--accent);background:#F8EAE1;}
.chip.stepping{animation:chippulse .6s ease;}
.chip .ci{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.chip .cs{font-family:var(--display);font-weight:600;font-size:18px;}
.btns{display:flex;gap:10px;flex-wrap:wrap;}
.btns .btn{font-size:14px;padding:10px 16px;}

/* metrics */
.metrics{margin-top:32px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;}
.metric b{font-family:var(--display);font-weight:600;font-size:24px;display:block;}
.metric span{font-size:12.5px;color:var(--muted);}
.fineprint{margin-top:18px;font-size:13px;color:var(--muted);}

/* live run (gated) */
.live{margin-top:36px;background:linear-gradient(180deg,#FBF1EA,var(--surface));border:1px solid var(--accent-soft);border-radius:16px;padding:24px;}
.live h3{font-family:var(--display);font-weight:500;font-size:22px;margin-bottom:6px;}
.live > p{color:var(--muted);font-size:14.5px;max-width:680px;}
.live-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.live-row input,.live-row select{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.live-row input{min-width:150px;}
#live-url{flex:1;min-width:220px;}
.live-status{margin-top:12px;font-size:13.5px;min-height:20px;}
.live-status.err{color:var(--bad);}
.live-status.ok{color:var(--ok);}
.live-status.run{color:var(--accent);}
.live-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--accent);color:#fff;padding:3px 8px;border-radius:999px;margin-left:8px;}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:30px 0;margin-top:24px;}
.site-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px;}
.site-foot a{color:var(--accent);}

@media(max-width:860px){
  .cards3,.metrics{grid-template-columns:1fr 1fr;}
  .studio{grid-template-columns:1fr;}
  .split{flex-direction:column;align-items:center;}
  .violations{max-height:none;overflow:visible;padding-right:0;}
}
@media(max-width:560px){.cards3,.metrics{grid-template-columns:1fr;}.top-nav a:not(.ghost){display:none;}}