@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#121c18; --paper:#f2f0e8; --acid:#d8ff45; --mint:#9df5c0; --line:#c9ccc2; --dark:#12231c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-size:13px; font-weight:700; letter-spacing:.19em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--acid); background:var(--ink); border-radius:2px; font:500 15px DM Mono,monospace; }
nav { display:flex; align-items:center; gap:34px; font:500 12px DM Mono,monospace; text-transform:uppercase; letter-spacing:.08em; }
nav a:hover { opacity:.6; }
.nav-cta { border:1px solid var(--ink); padding:10px 16px; }
.hero { padding:92px 0 0; }
.eyebrow,.kicker { font:500 11px DM Mono,monospace; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; background:#e3e2d8; padding:9px 12px; }
.pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#1bbb6e; box-shadow:0 0 0 5px rgba(27,187,110,.12); }
h1 { margin:30px 0 24px; font-size:clamp(58px,8vw,116px); line-height:.86; letter-spacing:-.072em; font-weight:600; }
h1 span { display:inline-block; white-space:nowrap; }
h1 em { color:transparent; -webkit-text-stroke:2px var(--ink); font-style:normal; }
.lede { max-width:650px; font-size:clamp(18px,2vw,25px); line-height:1.5; color:#46534d; }
.hero-actions { display:flex; gap:12px; margin:36px 0 68px; }
.button { padding:15px 20px; font:600 12px DM Mono,monospace; letter-spacing:.06em; text-transform:uppercase; }
.primary { background:var(--ink); color:white; }
.secondary { border:1px solid var(--ink); }
.console { background:#101713; color:#eaf4ed; border:1px solid #101713; box-shadow:14px 14px 0 var(--acid); }
.console-bar { min-height:54px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid #344039; font:10px DM Mono,monospace; color:#91a098; }
.dot { width:7px; height:7px; background:#59655e; border-radius:50%; }
.console-title { margin-left:12px; }
.secure { margin-left:auto; color:var(--acid); }
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; padding:26px; }
.flow-card { position:relative; min-height:190px; padding:24px; border:1px solid #3d4b43; }
.flow-card.active { border-color:var(--acid); background:#18221d; }
.step { font:12px DM Mono,monospace; color:#748078; }
.state { float:right; padding:5px 7px; font:10px DM Mono,monospace; }
.queued { color:#d5ddda; background:#344039; }.running { color:#0c1a11; background:var(--acid); }.done { color:#0c1a11; background:var(--mint); }
.flow-card h2 { margin:45px 0 8px; font-size:24px; }
.flow-card p { margin:0; color:#9ca9a1; line-height:1.55; font-size:14px; }
.connector { display:grid; place-items:center; width:44px; color:var(--acid); font:20px DM Mono,monospace; }
.system { padding:150px 0; }
.section-intro { display:grid; grid-template-columns:1fr 1.5fr; gap:40px; align-items:start; }
.section-intro .kicker { padding-top:12px; }
.section-intro h2,.principles h2 { margin:0; font-size:clamp(40px,5.5vw,72px); line-height:1; letter-spacing:-.055em; }
.section-intro p { grid-column:2; max-width:570px; font-size:18px; color:#536059; line-height:1.6; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:70px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature-grid article { min-height:260px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-no { font:11px DM Mono,monospace; color:#78827d; }
.feature-grid h3 { margin:58px 0 12px; font-size:24px; }
.feature-grid p { max-width:430px; color:#59655f; line-height:1.65; }
.principles { padding:130px 0; color:#eaf4ed; background:var(--dark); }
.principle-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:100px; }
.kicker.light { display:block; color:var(--acid); margin-bottom:26px; }
.principles ol { margin:0; padding:0; list-style:none; border-top:1px solid #435047; }
.principles li { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid #435047; }
.principles li>span { color:var(--acid); font:12px DM Mono,monospace; }
.principles strong { font-size:20px; }
.principles li p { margin:9px 0 0; color:#aebbb3; line-height:1.55; }
.status { padding:120px 0; }
.status-panel { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:50px; border:1px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
.status h2 { max-width:440px; margin:22px 0 0; font-size:42px; line-height:1.05; letter-spacing:-.04em; }
.status-copy>p { margin-top:0; font-size:18px; line-height:1.65; color:#536059; }
.status-line { display:flex; align-items:center; gap:13px; margin:28px 0 14px; }
.status small { color:#66716b; line-height:1.5; }
footer { min-height:150px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font:11px DM Mono,monospace; color:#5f6a64; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:760px) {
  .shell { width:min(100% - 28px,1180px); }.nav { height:72px; }nav a:not(.nav-cta) { display:none; }
  .hero { padding-top:65px; }h1 { font-size:clamp(44px,15.5vw,72px); letter-spacing:-.06em; }h1 span { white-space:normal; }.hero-actions { flex-direction:column; align-items:stretch; text-align:center; }
  .flow { grid-template-columns:1fr; gap:12px; }.connector { width:auto; height:22px; transform:rotate(90deg); }.flow-card { min-height:170px; }
  .system { padding:100px 0; }.section-intro,.principle-layout,.status-panel { grid-template-columns:1fr; }.section-intro p { grid-column:auto; }
  .feature-grid { grid-template-columns:1fr; }.principle-layout { gap:60px; }.status-panel { padding:30px; gap:35px; }
  footer { padding:35px 0; flex-direction:column; align-items:flex-start; gap:20px; }
}
@media (prefers-reduced-motion:no-preference) {
  .pulse { animation:pulse 2s infinite; }@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(27,187,110,0); } }
  .flow-card.active { animation:glow 3s ease-in-out infinite; }@keyframes glow { 50% { background:#1d2b23; } }
}