:root{ --bg:#0a0a0b; --fg:#ededed; --muted:#8a8a90; --gold:#CDAF63; }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; overflow-x:hidden; }
.hero{ position:relative; height:100svh; width:100%; }
#webgl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.skip{ position:absolute; right:18px; top:18px; z-index:5; font-size:12px; color:#cfcfd6; opacity:.7; background:rgba(255,255,255,0.06); padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); cursor:pointer; }
.scroll-indicator{ position:absolute; left:50%; transform:translateX(-50%); bottom:20px; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#a0a0a8; z-index:2; }
.section{ min-height:70vh; display:grid; place-items:center; padding:80px 20px; text-align:center;
  background: radial-gradient(1200px 400px at 50% -200px, rgba(205,175,99,0.08), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
}
.section h2{font-size: clamp(28px, 4vw, 48px); margin:0 0 10px 0}
.section p{max-width:860px; color:#b8b8bf; font-size: clamp(16px, 2.2vw, 20px)}
.footer{padding:40px 20px; text-align:center; color:#8f8f96; border-top:1px solid rgba(255,255,255,0.06)}