/* stats */
.stats { background: var(--ink); padding: 0 0 72px; color: #fafafa; }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink-line); border-radius: 16px; background: var(--ink-2); padding: 0; overflow: hidden; width: calc(100% - 48px); max-width: 1072px; }
.stat { padding: 28px 24px; border-left: 1px solid var(--ink-line); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #8a8a8a); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-muted); }

/* rail */
.rail { --p: 0; display: grid; grid-template-columns: repeat(8, 1fr); position: relative; }
.rail::before, .rail::after { content: ""; position: absolute; top: 27px; left: 6.25%; height: 2px; border-radius: 2px; }
.rail::before { right: 6.25%; background: var(--ink-line); }
.rail::after { width: calc(87.5% * var(--p)); background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 14px rgba(245,158,11,.6); }
.st { position: relative; text-align: center; padding: 0 6px; }
.dot { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px; background: var(--ink-3); border: 1px solid var(--ink-line); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: #737373; position: relative; z-index: 1; transition: all .4s; }
.st h4 { font-size: 14px; font-weight: 600; color: #a3a3a3; transition: color .4s; }
.st p { font-size: 12px; color: #737373; margin-top: 2px; }
.st code { display: block; font-size: 10.5px; color: #525252; margin-top: 8px; }
.st.gate .dot { border-radius: 50%; background: #2a1d05; color: #a16207; border-color: #4a3410; }
.st.lit .dot { color: #fafafa; border-color: var(--accent); box-shadow: 0 0 22px rgba(245,158,11,.3); }
.st.lit h4 { color: #fff; }
.st.gate.lit .dot { background: var(--accent); color: #1c1100; font-weight: 700; }
.legend { display: flex; gap: 28px; justify-content: center; margin-top: 48px; font-size: 13px; color: var(--ink-muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--ink-3); border: 1px solid #525252; }
.legend i.g { background: var(--accent); border-color: var(--accent); border-radius: 50%; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; }
.bc { --mx: 50%; --my: 50%; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.bc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(245,158,11,.14), transparent 70%); }
.bc:hover { border-color: #d4a24c; box-shadow: 0 18px 40px -22px rgba(0,0,0,.25); }
.bc:hover::before { opacity: 1; }
.bc h3 { font-size: 18px; letter-spacing: -.01em; margin: 18px 0 6px; position: relative; }
.bc p { color: var(--muted); font-size: 15px; position: relative; }
.bc code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.viz { height: 120px; border-radius: 12px; background: var(--ink); padding: 14px; position: relative; overflow: hidden; font-family: var(--mono); font-size: 12px; color: #d4d4d4; }
.viz-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: start; }
.viz-board div { display: grid; gap: 6px; border-left: 1px solid var(--ink-line); padding-left: 6px; height: 100%; align-content: start; }
.viz-board i { display: block; height: var(--h); border-radius: 5px; background: #262626; border: 1px solid #333; }
.viz-board i.a { border-color: var(--accent); box-shadow: 0 0 12px rgba(245,158,11,.35); animation: pulse 1.8s infinite; }
.viz-board i.ok { border-color: #166534; background: #0f2a18; }
.viz-chain { display: flex; align-items: center; justify-content: center; gap: 8px; }
.viz-chain span { padding: 6px 10px; border: 1px solid #404040; border-radius: 6px; animation: chain 3s infinite; }
.viz-chain span:nth-of-type(2) { animation-delay: 1s; } .viz-chain span:nth-of-type(3) { animation-delay: 2s; }
.viz-chain b { color: #525252; }
@keyframes chain { 0%, 100% { border-color: #404040; color: #d4d4d4; } 15%, 30% { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(245,158,11,.3); } }
.viz-chat { display: grid; gap: 8px; align-content: center; font-family: var(--sans); }
.viz-chat .b { max-width: 78%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; }
.viz-chat .agent { background: #262626; border-bottom-left-radius: 3px; }
.viz-chat .you { justify-self: end; background: #fafafa; color: #0a0a0a; border-bottom-right-radius: 3px; }
.viz-hold { display: grid; gap: 8px; align-content: center; }
.viz-hold div { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: 1px solid #333; border-radius: 6px; }
.viz-hold code { background: none; padding: 0; color: #d4d4d4; font-size: 12px; }
.viz-hold em { font-style: normal; font-size: 11px; color: var(--accent); }
.viz-check { display: grid; gap: 8px; align-content: center; }
.viz-check div { display: flex; justify-content: space-between; }
.viz-check b { color: var(--ok); }
.viz-preview { padding: 0; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--ink-line); }
.pv-bar i { width: 8px; height: 8px; border-radius: 50%; background: #404040; }
.pv-bar span { margin-left: 8px; color: #737373; font-size: 11px; }
.pv-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px; }
.pv-body u { height: 34px; border-radius: 6px; background: #1f1f1f; }
.pv-body s { grid-column: span 3; height: 22px; border-radius: 6px; background: linear-gradient(90deg, #2a1d05, #1f1f1f); }

/* human + terminal */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .sub { color: var(--ink-muted); font-size: 17px; margin-bottom: 22px; }
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; font-size: 15px; color: #d4d4d4; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #1c1100; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.ticks b { color: #fff; }
.term { background: #000; border: 1px solid var(--ink-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(245,158,11,.2); }
.term .bar { display: flex; align-items: center; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--ink-line); }
.term .bar i { width: 11px; height: 11px; border-radius: 50%; background: #404040; }
.term .bar span { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: #737373; }
.term .body { padding: 20px; min-height: 300px; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: #d4d4d4; }
.term .dim { color: #737373; } .term .ok { color: var(--ok); } .term .warn { color: var(--accent); } .term .bad { color: #f87171; }
.term .caret::after { content: "▍"; color: #d4d4d4; animation: pulse 1s infinite; }
.term .ask { margin-top: 12px; padding: 14px; border: 1px solid #404040; border-radius: 10px; background: #0f0f0f; }
.term .ask b { color: #fafafa; }
.term .opts { display: flex; gap: 8px; margin-top: 12px; }
.term .opts button { font: inherit; font-size: 12px; cursor: pointer; padding: 5px 14px; border-radius: 6px; border: 1px solid #525252; background: transparent; color: #d4d4d4; }
.term .opts button.p { background: #fafafa; color: #0a0a0a; border-color: #fafafa; font-weight: 700; }
.term .opts button:hover { border-color: #fafafa; }
.term .replay { margin-top: 14px; font: inherit; font-size: 12px; cursor: pointer; background: none; border: 0; color: #737373; text-decoration: underline; }

/* example */
.ex { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; }
.note { grid-row: span 2; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.note p { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; margin-top: 14px; }
.tree, .fm { background: var(--ink); color: #d4d4d4; border-radius: 16px; padding: 22px; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; overflow-x: auto; }
.tree b { color: #fff; } .tree em { font-style: normal; color: var(--accent); }
.fm .c { color: #737373; } .fm s { color: #737373; } .fm .arrow { color: var(--accent); } .fm strong { color: var(--ok); }

/* tools */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool { border-top: 2px solid #333; padding-top: 18px; transition: border-color .25s; }
.tool:hover { border-color: var(--accent); }
.tool h3 { font-family: var(--mono); font-size: 17px; margin-bottom: 6px; }
.tool p { font-size: 14px; color: var(--ink-muted); }
.tool .mono { color: #d4d4d4; }

/* final + footer */
.final { text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at 50% 100%, rgba(245,158,11,.18), transparent 70%); }
.final .wrap { position: relative; }
.final h2 { font-size: clamp(30px, 5vw, 56px); letter-spacing: -.03em; line-height: 1.08; max-width: 16ch; margin: 0 auto 18px; }
.final p { color: var(--ink-muted); max-width: 520px; margin: 0 auto 32px; font-size: 17px; }
footer { padding: 32px 0; border-top: 1px solid var(--ink-line); background: var(--ink); color: #737373; font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* reveal (only hidden when JS is on) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card, .live em, .viz-board i.a, .viz-chain span { transition: none; animation: none; }
}
@media print { .js .reveal { opacity: 1; transform: none; } nav { position: static; } }

/* responsive */
@media (max-width: 920px) {
  .links { display: none; }
  .rail { grid-template-columns: repeat(4, 1fr); row-gap: 32px; }
  .rail::before, .rail::after { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .s2, .bento .s3, .bento .s4 { grid-column: span 1; }
  .bento .s4:last-child { grid-column: span 2; }
  .tools { grid-template-columns: 1fr 1fr; }
  .split, .ex { grid-template-columns: 1fr; gap: 36px; }
  .ex { gap: 16px; } .note { grid-row: auto; }
  .stats .wrap { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
}
@media (max-width: 600px) {
  section { padding: 64px 0; }
  .hero { padding: 108px 0 48px; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .bento, .tools { grid-template-columns: 1fr; }
  .bento .s2, .bento .s3, .bento .s4, .bento .s4:last-child { grid-column: span 1; }
  .frame-foot { flex-direction: column; } .tally { text-align: left; }
}