:root{
  --bg:#070b0e;
  --panel:#0d1419;
  --panel2:#101a20;
  --line:#234036;
  --green:#92ff9e;
  --green2:#30e678;
  --text:#ecf2ee;
  --muted:#9aa9a2;
  --blue:#9fd8ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 80% 10%, rgba(48,230,120,.13), transparent 28%),
             radial-gradient(circle at 10% 70%, rgba(159,216,255,.08), transparent 30%),
             var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing:.01em;
}
.site-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(146,255,158,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146,255,158,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, black, transparent 92%);
}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:rgba(7,11,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(146,255,158,.18);
}
.brand{display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none}
.brand span{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--green); color:var(--green); font-weight:800;
}
.brand b{font-size:13px; letter-spacing:.18em}
nav{display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end}
nav a{color:var(--muted); text-decoration:none; font-size:13px; text-transform:uppercase; letter-spacing:.11em}
nav a.active,nav a:hover{color:var(--green)}
main{width:min(1180px, calc(100% - 42px)); margin:0 auto}
.hero{padding:92px 0 54px; border-bottom:1px solid rgba(146,255,158,.18)}
.hero-kicker,.section-meta{
  color:var(--green); font-size:12px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px;
}
h1{font-size:clamp(44px,7vw,92px); line-height:.92; margin:0 0 24px; text-transform:uppercase; max-width:1000px}
.hero p{font-size:clamp(17px,2vw,23px); line-height:1.55; color:#dce7e1; max-width:1000px}
.panel{
  margin:34px 0; padding:34px; background:linear-gradient(180deg, rgba(16,26,32,.92), rgba(10,16,20,.92));
  border:1px solid rgba(146,255,158,.18);
  box-shadow:0 20px 80px rgba(0,0,0,.35);
}
.lead-panel h2,.panel h2{font-size:clamp(28px,4vw,54px); line-height:1; margin:0 0 16px}
.panel p{color:#c9d4ce; line-height:1.7; font-size:17px}
.architecture-map{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:18px; align-items:center; margin-top:28px}
.node,.bridge{
  min-height:150px; display:grid; place-items:center; text-align:center; border:1px solid var(--line); background:#0a1014;
  font-weight:800; letter-spacing:.18em; color:var(--green);
}
.bridge{color:var(--text); position:relative}
.bridge span{font-size:12px; color:var(--blue); text-transform:uppercase}
.bridge strong{font-size:18px}
.cards,.cards-panel{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards-panel.four{grid-template-columns:repeat(4,1fr)}
.card,.cards-panel article,.discipline-grid div,.matrix div,.two-lanes div,.evidence-card{
  background:#0a1014; border:1px solid rgba(146,255,158,.18); padding:22px;
}
h3{color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:14px}
.stack{display:grid; gap:12px; margin-top:18px}
.stack div{
  display:grid; grid-template-columns:220px 1fr; gap:20px; border:1px solid rgba(146,255,158,.16);
  padding:18px; background:#0a1014;
}
.stack b{color:var(--green); text-transform:uppercase; letter-spacing:.14em}
.stack span{color:#d5ded9}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.callout{font-size:clamp(26px,4vw,46px); line-height:1.05; font-weight:900; color:var(--green)}
.evidence-card ul,.panel ul{margin:0; padding-left:20px; color:#d5ded9; line-height:1.9}
.big-svg{width:100%; min-height:360px}
.svg-box{fill:#0a1014; stroke:#92ff9e; stroke-opacity:.45}
.svg-box.strong{stroke-width:2; stroke-opacity:.8}
.svg-text{fill:#ecf2ee; font-size:22px; font-weight:800; letter-spacing:3px}
.svg-small{fill:#92ff9e; font-size:18px; font-weight:800; letter-spacing:2px}
.svg-line{stroke:#92ff9e; stroke-width:2; stroke-opacity:.7}
.svg-line.thick{stroke-width:5; stroke-opacity:.42}
.matrix{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.matrix div{display:flex; flex-direction:column; gap:12px}
.matrix b{color:var(--green); text-transform:uppercase; letter-spacing:.12em}
.matrix span{color:#c9d4ce; line-height:1.5}
.mini-diagram{display:grid; gap:10px; text-align:center; color:var(--green); font-weight:900; letter-spacing:.14em}
.mini-diagram span{border:1px solid rgba(146,255,158,.18); padding:14px; background:#0a1014}
.two-lanes{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.discipline-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.value-wheel{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px}
.value-wheel div{
  min-height:170px; border-radius:999px; border:1px solid rgba(146,255,158,.45);
  display:grid; place-items:center; text-align:center; color:var(--green); font-weight:900; letter-spacing:.08em;
  background:radial-gradient(circle, rgba(146,255,158,.12), #0a1014 66%);
}
.button{display:inline-block; margin-top:20px; padding:16px 22px; border:1px solid var(--green); color:var(--green); text-decoration:none; text-transform:uppercase; letter-spacing:.16em}
.footer{
  width:min(1180px, calc(100% - 42px)); margin:60px auto 30px; padding-top:24px;
  border-top:1px solid rgba(146,255,158,.18); display:flex; justify-content:space-between; gap:20px; color:var(--muted);
}
.footer b{color:var(--green)}
@media(max-width:850px){
  .topbar{align-items:flex-start; flex-direction:column; gap:14px}
  nav{justify-content:flex-start}
  .architecture-map,.split,.cards,.cards-panel,.cards-panel.four,.matrix,.two-lanes,.discipline-grid,.value-wheel{grid-template-columns:1fr}
  .stack div{grid-template-columns:1fr}
  h1{font-size:44px}
  .panel{padding:24px}
}