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

:root { --ink:#1b120e; --panel:#302018; --orange:#ef6332; --gold:#ffc348; --cyan:#16d9e8; --grass:#20d463; --cream:#fff6e9; --muted:#c2a894; --line:rgba(239,99,50,.26); --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--cream); background:radial-gradient(circle at 10% 16%,rgba(239,99,50,.18),transparent 28%),radial-gradient(circle at 90% 72%,rgba(255,195,72,.10),transparent 25%),var(--ink); font:400 15px/1.7 Manrope,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.15; background-image:radial-gradient(rgba(239,99,50,.7) .7px,transparent .7px); background-size:28px 28px; mask-image:linear-gradient(#000,transparent 74%); }
a { color:inherit; }
.topbar,footer { width:min(var(--max),calc(100% - 44px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.topbar { min-height:74px; border-bottom:1px solid var(--line); }
.back,.topbar a,footer { color:var(--muted); font:500 11px DM Mono,monospace; text-decoration:none; }
.topbar nav { display:flex; gap:28px; }
.topbar a:hover,footer a:hover { color:var(--orange); }
.hero { width:min(var(--max),calc(100% - 44px)); min-height:700px; margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:72px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--gold); font:400 10px DM Mono,monospace; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { width:24px; height:1px; background:var(--orange); box-shadow:0 0 12px var(--orange); }
h1,h2 { letter-spacing:-.04em; line-height:.96; }
h1 { margin:24px 0 28px; font-size:clamp(64px,8vw,108px); font-weight:500; }
h1 em { color:var(--orange); font:600 .92em Oswald,sans-serif; font-style:normal; text-transform:uppercase; text-shadow:4px 4px 0 rgba(22,217,232,.24); }
.lede { max-width:590px; color:var(--muted); font-size:17px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--line); background:rgba(48,32,24,.72); font:500 11px DM Mono,monospace; text-decoration:none; }
.button:hover { border-color:var(--orange); }
.primary { color:#211008; border-color:var(--orange); background:linear-gradient(135deg,var(--gold),var(--orange)); box-shadow:0 14px 42px rgba(239,99,50,.25); }
.note { margin-top:18px; color:#806655; font:400 9px DM Mono,monospace; }
.project-card { transform:rotate(1deg); border:1px solid rgba(239,99,50,.5); background:#120c09; box-shadow:0 38px 100px rgba(0,0,0,.44),0 0 55px rgba(239,99,50,.08); }
.cardbar,.cardfoot { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 14px; color:#806655; border-bottom:1px solid var(--line); font:400 9px DM Mono,monospace; }
.cardbar i { width:7px; height:7px; border-radius:50%; background:var(--orange); }
.cardbar i:nth-child(2) { background:var(--gold); }
.cardbar i:nth-child(3) { background:var(--grass); }
.cardbar b { margin-left:auto; font-weight:400; }
.scene { position:relative; height:420px; overflow:hidden; background:linear-gradient(#16d7ed,#49e5ed); }
.title { position:absolute; z-index:3; top:52px; width:100%; color:#d9572d; font:600 clamp(34px,4vw,58px) Oswald,sans-serif; text-align:center; text-shadow:2px 3px rgba(65,48,38,.25); }
.cloud { position:absolute; top:10px; left:26%; width:48%; height:52px; border-radius:50%; background:rgba(245,247,242,.82); filter:blur(2px); }
.forest { position:absolute; inset:auto 0 72px; height:180px; background:radial-gradient(ellipse at 8% 100%,#168442 0 16%,transparent 17%),radial-gradient(ellipse at 25% 100%,#b7dd38 0 21%,transparent 22%),radial-gradient(ellipse at 48% 100%,#138c48 0 20%,transparent 21%),radial-gradient(ellipse at 72% 100%,#e6a52b 0 22%,transparent 23%),radial-gradient(ellipse at 94% 100%,#168442 0 18%,transparent 19%); }
.ground { position:absolute; inset:auto 0 0; height:76px; border-top:14px solid var(--grass); background:#f19b53; }
.cardfoot { justify-content:space-between; border-top:1px solid var(--line); border-bottom:0; }
.play { min-height:480px; padding:110px max(22px,calc((100vw - var(--max))/2)); border-block:1px solid var(--line); background:radial-gradient(circle at 12% 50%,rgba(239,99,50,.16),transparent 30%),#25170f; }
.play h2 { margin:22px 0; font-size:clamp(44px,6vw,76px); }
.play>p:not(.eyebrow) { max-width:700px; color:var(--muted); font-size:17px; }
.play .button { margin-top:20px; }
.story { width:min(var(--max),calc(100% - 44px)); margin:0 auto; padding:110px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.story article { min-height:300px; padding:34px; background:#241710; }
.story b { color:var(--gold); font:400 10px DM Mono,monospace; }
.story h3 { margin-top:100px; color:var(--orange); font-size:22px; }
.story p { color:var(--muted); }
footer { min-height:130px; border-top:1px solid var(--line); }
@media(max-width:820px) { .hero{grid-template-columns:1fr;padding:80px 0}.project-card{transform:none}.scene{height:340px}.story{grid-template-columns:1fr}.story article{min-height:220px}.story h3{margin-top:55px} }
@media(max-width:560px) { .topbar nav{gap:14px}.hero{gap:44px}.scene{height:280px}.title{font-size:32px}.actions{flex-direction:column}footer{padding:28px 0;gap:18px;align-items:flex-start;flex-direction:column} }