:root { --ink:#3a210f; --cream:#fff4cf; --gold:#ffbd32; --orange:#ef761a; --green:#2f7d4d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff9e8; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:20; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:24px clamp(24px,5vw,76px); color:white; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:19px; font-weight:900; letter-spacing:-.02em; }
.brand img { width:38px; height:45px; object-fit:contain; }
nav { display:flex; gap:30px; font-weight:700; }
nav a { border-bottom:2px solid transparent; padding:8px 0; }
nav a:hover { border-color:var(--gold); }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); align-items:center; padding:115px clamp(24px,6vw,96px) 70px; color:white; background:url("/game-assets/savanna_background.png") center/cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(49,26,8,.92),rgba(74,36,8,.64) 45%,rgba(34,18,4,.05) 78%),linear-gradient(0deg,rgba(44,27,8,.35),transparent 45%); }
.hero-copy,.hero-character { position:relative; z-index:2; }
.eyebrow { margin:0 0 18px; color:var(--orange); font-size:13px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.hero .eyebrow { color:#ffd766; }
h1 { margin:0; max-width:780px; color:var(--cream); font-size:clamp(58px,7vw,108px); line-height:.88; letter-spacing:-.065em; text-shadow:0 8px 0 rgba(103,48,13,.8); }
.lede { max-width:620px; margin:34px 0 0; font-size:clamp(18px,2vw,25px); line-height:1.5; font-weight:600; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button { border:2px solid rgba(255,255,255,.75); border-radius:18px; padding:15px 24px; font-weight:900; transition:transform .2s ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { border-color:#ffd76b; background:var(--gold); color:var(--ink); box-shadow:0 7px 0 #b95c14; }
.button.secondary { background:rgba(72,43,19,.45); backdrop-filter:blur(8px); }
.hero-character { align-self:end; height:min(78vh,760px); }
.hero-character .ostrich { position:absolute; right:-2%; bottom:-7%; height:108%; max-width:none; }
.hero-character .nest { position:absolute; left:-3%; bottom:-1%; width:54%; }
.hero-character .egg { position:absolute; left:12%; bottom:10%; width:22%; }
.scroll-cue { position:absolute; z-index:3; bottom:22px; left:clamp(24px,6vw,96px); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.play-section,.levels-section,.about-section { padding:clamp(78px,10vw,140px) clamp(24px,7vw,110px); }
.section-heading { max-width:810px; }
h2 { margin:0; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.055em; }
.section-heading>p:last-child,.levels-copy>p,.about-section>p:last-child { max-width:670px; font-size:19px; line-height:1.65; color:#745139; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:58px; }
.feature-grid article { min-height:250px; padding:30px; border:2px solid #e5c67b; border-radius:28px; background:#fffdf6; box-shadow:0 12px 0 #f0dca5; }
.feature-grid article>span { color:var(--orange); font-size:13px; font-weight:900; }
.feature-grid h3 { margin:46px 0 12px; font-size:25px; }
.feature-grid p { margin:0; color:#7b5b43; line-height:1.55; }
.levels-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(40px,7vw,110px); color:white; background:var(--green); }
.levels-section .eyebrow { color:#ffd66b; }
.levels-copy>p { color:#dcebdc; }
.levels-art { position:relative; min-height:420px; }
.levels-art img:first-child { position:absolute; left:2%; bottom:14%; width:96%; }
.levels-art img:last-child { position:absolute; left:38%; bottom:29%; width:24%; filter:drop-shadow(0 20px 18px rgba(18,42,23,.35)); }
.live-status { display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:15px 18px; border:1px solid rgba(255,255,255,.28); border-radius:16px; background:rgba(17,65,36,.42); }
.live-status strong,.live-status small { display:block; }
.live-status small { margin-top:3px; color:#d5ead9; }
.pulse { width:11px; height:11px; border-radius:99px; background:#caff62; box-shadow:0 0 0 6px rgba(202,255,98,.15); }
.about-section { max-width:1050px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px clamp(24px,7vw,110px); border-top:1px solid #ead9aa; background:#fff4d3; font-size:14px; }
footer p { color:#866449; }
@media(max-width:900px) { nav{display:none}.hero{grid-template-columns:1fr;min-height:900px;align-items:start}.hero-copy{padding-top:45px}.hero-character{position:absolute;right:-8%;bottom:0;width:78%;height:52%}.feature-grid,.levels-section{grid-template-columns:1fr}.levels-art{min-height:300px} }
@media(max-width:600px) { .site-header{padding:18px 20px}.hero{min-height:820px;padding-inline:22px}.hero-character{width:105%;height:48%;opacity:.9}.feature-grid{grid-template-columns:1fr}footer{align-items:flex-start;flex-direction:column} }