:root{--ink:#10231f;--teal:#0f4c4a;--teal2:#1c7a73;--gold:#f2a93b;--mist:#eaf2f0;--bg:#f8faf9;--line:#d5e2de;--muted:#4b625d;--r:14px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font:16px/1.65 "Public Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3,.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.15}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;padding:12px 5vw;background:rgba(248,250,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.3rem;display:flex;gap:8px;align-items:center;margin-right:auto}
.nav nav{display:flex;gap:22px;font-weight:500;font-size:.95rem}
.nav nav a:hover{color:var(--teal2)}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 22px;border-radius:10px;font-weight:600;transition:.2s}
.btn:hover{background:var(--teal2)}
.btn.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.btn.small{padding:8px 16px;font-size:.9rem}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:4vw;align-items:center;padding:7vh 5vw 8vh;min-height:86vh}
.hero h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;letter-spacing:-.02em}
.hero p{margin:20px 0 28px;max-width:56ch;color:var(--muted);font-size:1.1rem}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{list-style:none;padding:0;display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;color:var(--muted);font-size:.9rem}
.stats li{max-width:150px}.stats b{display:block;font:800 2rem "Bricolage Grotesque";color:var(--teal)}
.hero-art{position:relative;height:440px;background:linear-gradient(#cfe6e1,#eef6f3 70%);border-radius:24px;overflow:hidden}
.ground{position:absolute;bottom:0;left:0;right:0;height:36px;background:var(--teal)}
.tower{position:absolute;bottom:36px;background:var(--teal);border-radius:8px 8px 0 0;padding:34px 12px 12px}
.t1{left:8%;width:34%;height:300px}.t2{left:46%;width:30%;height:240px;background:var(--teal2)}.t3{left:80%;width:16%;height:170px;background:#2c5f5a}
.tag{position:absolute;top:8px;left:12px;font:600 .75rem "Public Sans";color:#bfe3dc}
.win{height:100%;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--teal) 10px 14px),repeating-linear-gradient(0deg,#ffd98a 0 18px,transparent 18px 30px);-webkit-mask:none;opacity:.9;border-radius:4px;animation:glow 4s ease-in-out infinite alternate}
.t2 .win{animation-delay:1.3s;filter:hue-rotate(-12deg)}.t3 .win{animation-delay:2.4s}
@keyframes glow{from{opacity:.55}to{opacity:1}}
.chip{position:absolute;background:#fff;border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:600;box-shadow:0 6px 18px rgba(15,76,74,.18)}
.c1{top:24px;right:18px}.c2{top:90px;left:16px}.c3{top:150px;right:30px}
.block{padding:9vh 5vw}.tinted{background:var(--mist)}
.block h2,.final h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;max-width:24ch}
.lead{color:var(--muted);margin:10px 0 36px;max-width:60ch}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s;margin-top:36px}
.flow li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;counter-increment:s}
.flow li::after{content:counter(s);position:absolute;top:16px;right:18px;font:800 1.6rem "Bricolage Grotesque";color:var(--gold)}
.flow i,.card i,.roles i{font-style:normal;font-size:2rem;display:block;margin-bottom:8px}
.flow h3,.card h3,.roles h3{font-size:1.15rem;margin-bottom:6px}
.flow p,.card p,.roles p{color:var(--muted);font-size:.95rem}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tabs button{font:500 .92rem "Public Sans";border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s}
.tabs button:hover{border-color:var(--teal2)}
.tabs button[aria-selected=true]{background:var(--teal);color:#fff;border-color:var(--teal)}
.panel{margin-top:22px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;animation:in .35s}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.panel .ico{display:grid;place-items:center;height:150px;border-radius:var(--r);font-size:4.5rem;background:linear-gradient(135deg,var(--c1),var(--c2))}
.panel h3{font-size:1.7rem;margin:16px 0 8px}.panel p{color:var(--muted)}
.pages{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start;list-style:none;padding:0}
.pages li{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.pages b{display:block;font-size:.98rem}.pages span{font-size:.86rem;color:var(--muted)}
.pages em{font-style:normal;margin-right:6px}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.roles{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:32px}
.roles div{background:#fff;border-radius:var(--r);padding:22px;border-top:4px solid var(--gold)}
.stack{margin-top:28px;color:var(--muted)}
.road{list-style:none;padding:0;margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:3px solid var(--teal)}
.road li{padding:22px 18px 0 0;position:relative}
.road li::before{content:"";position:absolute;top:-10px;left:0;width:17px;height:17px;border-radius:50%;background:var(--gold);border:3px solid var(--mist)}
.road b{display:block;font-family:"Bricolage Grotesque";font-size:1.1rem}.road span{color:var(--muted);font-size:.93rem}
.final{text-align:center;padding:10vh 5vw;background:var(--teal);color:#fff}
.final h2{margin:0 auto}.final p{margin:14px 0 26px;color:#c8e4df}
.final .btn{background:var(--gold);color:var(--ink)}
footer{text-align:center;padding:22px;color:var(--muted);font-size:.88rem}
@media(max-width:960px){.hero,.panel{grid-template-columns:1fr}.flow,.split{grid-template-columns:1fr 1fr}.roles{grid-template-columns:1fr 1fr}.road{grid-template-columns:1fr 1fr}.nav nav{display:none}.hero{min-height:0}}
@media(max-width:600px){.flow,.split,.roles,.road,.pages{grid-template-columns:1fr}.panel{padding:20px}.hero-art{height:360px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}