:root {
  --bg: #E1E5E9;
  --navy: #163766;
  --blue: #1253A4;
  --blue2: #114A90;
  --teal: #198F8A;
  --green: #4FB86E;
  --green-soft: #8EE2B1;
  --slate: #526371;
  --card: #F8FAFB;
  --line: #D6DDE3;
  --line2: #DDE4EA;
  --line3: #E3E9EE;
  --white: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--navy); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
.container { max-width:1280px; margin:0 auto; padding:24px; }
.site-header-wrap { position:sticky; top:0; z-index:1000; padding-top:10px; backdrop-filter:blur(10px); }
.header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; background:rgba(255,255,255,.92); border-radius:28px; box-shadow:0 20px 60px rgba(22,55,102,.08); border:1px solid rgba(255,255,255,.6); }
.brand { display:flex; align-items:center; gap:16px; min-width:0; }
.brand-logo { width:100px; height:auto; object-fit:contain; background:transparent; padding:2px; }
.brand-title { font-size:22px; line-height:1.05; font-weight:800; letter-spacing:-.02em; }
.brand-title .green { color:var(--green); }
.brand-sub { margin-top:4px; font-size:13px; color:var(--slate); }
.nav { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; font-size:14px; font-weight:500; color:var(--slate); }
.nav a:hover { color:var(--blue); }
.nav a.active { color:var(--navy); font-weight:700; }
.btn, .btn-outline, .nav-cta { display:inline-flex; align-items:center; justify-content:center; border-radius:18px; padding:14px 24px; font-size:16px; font-weight:700; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.nav-cta { background:var(--green); color:white; padding:10px 16px; font-size:14px; border-radius:12px; box-shadow:0 8px 18px rgba(22,55,102,.15); }
.btn:hover,.btn-outline:hover,.nav-cta:hover { transform:translateY(-1px); }
.btn { background:var(--green); color:white; box-shadow:0 12px 28px rgba(22,55,102,.18); }
.btn-outline { border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:white; backdrop-filter:blur(8px); }
.section { margin-top:48px; }
.hero { margin-top:32px; position:relative; overflow:hidden; border-radius:32px; background:linear-gradient(90deg, var(--blue) 0%, var(--blue2) 46%, var(--teal) 100%); box-shadow:0 24px 70px rgba(18,83,164,.28); }
.hero-inner { display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; padding:56px 48px 64px; }
.hero-tag { display:inline-flex; margin-bottom:16px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); padding:6px 16px; font-size:14px; color:white; backdrop-filter:blur(8px); }
.hero h1 { margin:0; max-width:780px; color:white; font-size:60px; line-height:1.1; letter-spacing:-.03em; }
.hero h1 .accent { color:var(--green-soft); }
.hero p { margin:20px 0 0; max-width:760px; color:rgba(255,255,255,.85); font-size:18px; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; }
.hero .glass-wrap { position:relative; border-radius:30px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); padding:20px; backdrop-filter:blur(12px); }
.hero .orb1, .hero .orb2 { position:absolute; border-radius:999px; pointer-events:none; }
.hero .orb1 { left:-18px; top:48px; width:128px; height:128px; border-radius:30px; background:rgba(255,255,255,.08); filter:blur(24px); }
.hero .orb2 { right:0; top:0; width:160px; height:160px; background:rgba(79,184,110,.2); filter:blur(36px); }
.metric-grid-2, .metric-grid-3, .metric-grid-4 { display:grid; gap:16px; }
.metric-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.metric-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.glass-card { border-radius:24px; background:rgba(255,255,255,.12); padding:16px; color:white; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.glass-card .eyebrow { font-size:14px; font-weight:700; color:var(--green-soft); }
.glass-card .big { margin-top:8px; font-size:18px; font-weight:800; line-height:1.25; }
.glass-chart { margin-top:12px; height:80px; border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0)); padding:12px; }
.bars { height:100%; display:flex; align-items:flex-end; gap:8px; }
.bar { width:12px; border-radius:999px; }
.bar.green { background:var(--green-soft); }
.bar.white { background:rgba(255,255,255,.7); }
.ring { margin-left:auto; width:34px; height:34px; border-radius:999px; border:2px solid rgba(255,255,255,.65); }
.panel, .panel-soft { border-radius:32px; padding:40px; border:1px solid var(--line); }
.panel { background:white; box-shadow:0 18px 60px rgba(22,55,102,.08); }
.panel-soft { background:linear-gradient(90deg, white, #F3F8F8); box-shadow:0 18px 60px rgba(22,55,102,.06); }
.section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.eyebrow-section { margin:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color:var(--teal); }
.h2 { margin:8px 0 0; font-size:52px; line-height:1.08; letter-spacing:-.03em; }
.h2.medium { font-size:42px; }
.section-copy { max-width:720px; font-size:16px; line-height:1.85; color:var(--slate); }
.cards-2, .cards-3, .cards-4 { display:grid; gap:20px; }
.cards-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:white; border-radius:28px; padding:24px; box-shadow:0 18px 50px rgba(22,55,102,.08); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(22,55,102,.12); }
.card.soft { background:var(--card); border-color:var(--line2); box-shadow:0 6px 18px rgba(22,55,102,.04); }
.card h4 { margin:0; font-size:22px; letter-spacing:-.02em; line-height:1.2; }
.card p { margin:14px 0 0; font-size:16px; line-height:1.8; color:var(--slate); }
.card .small { font-size:14px; line-height:1.7; }
.number-badge { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg, var(--blue), var(--teal)); color:white; font-weight:800; box-shadow:0 8px 20px rgba(18,83,164,.18); }
.badge-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.badge-line { width:64px; height:6px; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--teal)); opacity:.7; }
.linkish { margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--blue); }
.bullet-list { margin:18px 0 0; display:grid; gap:10px; }
.bullet-item { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:#42505B; }
.dot { width:10px; height:10px; margin-top:5px; border-radius:999px; background:var(--green); flex:0 0 auto; }
.split { display:grid; gap:32px; grid-template-columns:1fr .95fr; }
.timeline { display:grid; gap:20px; }
.timeline-item { display:flex; gap:16px; border-radius:24px; background:var(--card); padding:18px; border:1px solid var(--line3); }
.timeline-item h4 { margin:0; font-size:20px; }
.timeline-item p { margin:6px 0 0; color:var(--slate); line-height:1.75; }
.blue-panel { overflow:hidden; border-radius:32px; background:linear-gradient(135deg, var(--blue), var(--navy), var(--teal)); padding:32px; color:white; box-shadow:0 20px 70px rgba(18,83,164,.24); }
.blue-panel p { color:rgba(255,255,255,.82); font-size:16px; line-height:1.8; }
.blue-grid { display:grid; gap:16px; margin-top:28px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.blue-box { border-radius:24px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.1); padding:16px; backdrop-filter:blur(8px); }
.blue-box .title { font-size:20px; font-weight:700; color:white; }
.cta { margin-top:48px; margin-bottom:24px; overflow:hidden; border-radius:34px; background:linear-gradient(90deg, var(--navy), var(--blue), var(--teal)); padding:48px 32px; text-align:center; color:white; box-shadow:0 24px 80px rgba(18,83,164,.28); }
.cta h2 { margin:12px auto 0; max-width:980px; font-size:54px; line-height:1.08; letter-spacing:-.03em; }
.cta p { margin:16px auto 0; max-width:860px; font-size:18px; line-height:1.8; color:rgba(255,255,255,.82); }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:28px; }
.list-card { border-radius:24px; background:var(--card); padding:18px 20px; border:1px solid var(--line3); font-weight:700; }
.footer-space { height:10px; }
.legend { background:#f5f7fa; padding:16px; border-radius:16px; margin-top:24px; border:1px solid var(--line2); font-size:14px; line-height:1.8; color:var(--slate); }
.signal { margin-top:12px; padding:10px 14px; border-radius:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; letter-spacing:.06em; font-size:12px; text-transform:uppercase; }
.signal-go { background:#d8f5e3; color:#1e7a4d; }
.signal-caution { background:#fff4d6; color:#8a6d1a; }
.signal-stop { background:#fde0dc; color:#a8322a; }
.corridor { margin-top:28px; display:grid; gap:18px; position:relative; }
.corridor::before { content:""; position:absolute; left:34px; top:8px; bottom:8px; width:4px; border-radius:999px; background:linear-gradient(180deg, var(--green), var(--teal), var(--blue)); opacity:.55; }
.stage { position:relative; display:grid; grid-template-columns:84px 1.1fr .9fr; gap:18px; align-items:stretch; }
.stage-marker { position:relative; z-index:2; display:flex; justify-content:center; padding-top:18px; }
.marker-dot { width:22px; height:22px; border-radius:999px; background:white; border:6px solid var(--green); box-shadow:0 8px 20px rgba(22,55,102,.12); }
.stage-main,.stage-side { background:white; border:1px solid var(--line); border-radius:28px; box-shadow:0 12px 40px rgba(22,55,102,.07); padding:24px; }
.stage-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.node-label { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
.stage h3 { margin:0; font-size:30px; line-height:1.08; letter-spacing:-.03em; }
.stage p { margin:12px 0 0; font-size:16px; line-height:1.82; color:var(--slate); }
.engine-box { margin-top:16px; background:#f1f4f7; padding:14px; border-radius:16px; border:1px solid var(--line2); }
.engine-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); margin-bottom:8px; }
.chip { display:inline-block; padding:6px 10px; margin:4px 6px 0 0; border-radius:999px; background:#e6edf3; font-size:12px; font-weight:700; color:var(--navy); }
.what-box { margin-top:16px; border-radius:20px; background:linear-gradient(90deg, rgba(79,184,110,.10), rgba(25,143,138,.08)); border:1px solid rgba(79,184,110,.22); padding:16px; }
.what-box .label, .decision-box .label { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
.what-box .text, .decision-box .decision { font-size:18px; line-height:1.5; font-weight:700; color:var(--navy); }
.decision-box { margin-top:16px; border-radius:20px; background:#fbfcfd; border:1px solid var(--line2); padding:16px; }
.metric-stack { display:grid; gap:14px; }
.metric-card { background:var(--card); border:1px solid var(--line2); border-radius:20px; padding:16px; }
.metric-card .k { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
.metric-card .v { font-size:28px; line-height:1.1; font-weight:800; color:var(--navy); }
.metric-card .s { margin-top:8px; color:var(--slate); font-size:14px; line-height:1.65; }
.reversibility { margin-top:16px; padding:16px; border-radius:20px; border:1px solid var(--line2); background:#FBFCFD; }
.reversibility .head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:10px; }
.reversibility .title { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.reversibility .caption { color:var(--slate); font-size:14px; line-height:1.65; }
.bar-row { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-top:10px; }
.seg { height:14px; border-radius:999px; background:#E4E9EE; }
.fill1, .fill2 { background:#79C98F; }
.fill3, .fill4 { background:#A8C96A; }
.fill5, .fill6 { background:#D9B44A; }
.fill7, .fill8 { background:#E67E39; }
.fill9, .fill10 { background:#CC574B; }
@media (max-width:1200px){ .hero h1,.cta h2{font-size:48px}.h2{font-size:42px}.h2.medium{font-size:34px}.cards-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:980px){ .header,.section-top{flex-direction:column;align-items:flex-start}.nav{justify-content:flex-start}.hero-inner,.split,.cards-3,.cards-2,.stage{grid-template-columns:1fr}.metric-grid-3,.metric-grid-2,.metric-grid-4,.blue-grid{grid-template-columns:1fr 1fr}.corridor::before{left:24px}.stage-marker{justify-content:flex-start;padding-left:14px;padding-top:0}}
@media (max-width:720px){ .container{padding:10px}.header{padding:18px;border-radius:22px}.panel,.panel-soft,.blue-panel,.cta{padding:24px}.hero-inner{padding:32px 24px 36px}.hero h1,.cta h2{font-size:34px}.h2,.h2.medium{font-size:32px}.cards-4,.metric-grid-3,.metric-grid-2,.metric-grid-4,.blue-grid{grid-template-columns:1fr}.brand-title{font-size:20px}.nav{gap:14px}.stage h3{font-size:24px}}