:root { --pad: clamp(12px, 2vw, 20px); }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:#0b0a0c; color:#eee; }
a { color:#f9a826; text-decoration: none; }
a:hover { text-decoration: underline; }
header.hero { position: relative; min-height: 86vh; display:grid; place-items:center; text-align:center; overflow:hidden; }
header.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.32) contrast(1.05) saturate(1.05); transform: scale(1.05); }
header.hero .veil { position:absolute; inset:0; background: radial-gradient(1200px 600px at 50% 40%, rgba(255,255,255,0.06), rgba(15,14,16,0.75)); mix-blend-mode: screen; animation: breathe 8s ease-in-out infinite; }
header.hero .stars { position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 2px 2px; opacity:.12; animation: twinkle 6s infinite alternate; }
@keyframes breathe { 0%{opacity:.65} 50%{opacity:.85} 100%{opacity:.65} }
@keyframes twinkle { from{opacity:.08} to{opacity:.16} }
header .content { position:relative; padding: var(--pad); max-width: 1100px; }
h1 { font-size: clamp(34px, 7vw, 92px); margin:0 0 8px 0; letter-spacing:.6px; line-height:1.05; }
h1 .whisper { color:#f9a826; filter: drop-shadow(0 0 12px rgba(249,168,38,.25)); }
h2 { font-size: clamp(22px, 3vw, 36px); margin: 16px 0 8px; }
p.lead { font-size: clamp(16px, 2.2vw, 20px); line-height:1.65; opacity:.96 }
.scrollhint { margin-top: 14px; opacity:.6; animation: floaty 2.8s ease-in-out infinite; }
@keyframes floaty { 0%{ transform: translateY(0)} 50%{ transform: translateY(6px)} 100%{ transform: translateY(0)} }
.cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.btn { display:inline-block; padding:12px 18px; border-radius:14px; background:#f9a826; color:#111; font-weight:800; letter-spacing:.2px; }
.btn.btn-primary { box-shadow: 0 0 0 rgba(249,168,38,0.45); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(249,168,38,0.45)} 70%{ box-shadow: 0 0 0 18px rgba(249,168,38,0)} 100%{ box-shadow: 0 0 0 0 rgba(249,168,38,0)} }
.btn.secondary { background: transparent; border:1px solid #f9a826; color:#f9a826; }
.btn.tertiary { background: transparent; border:1px dashed #56421a; color:#c79a4b; }
section { padding: calc(var(--pad) * 2) var(--pad); max-width: 1200px; margin: 0 auto; }
.grid { display:grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width: 900px){ .grid{ grid-template-columns: 1fr 1fr; } }
.card { background: #141216; border:1px solid #2a262a; border-radius:16px; overflow:hidden; }
.card h3 { margin:0; padding:16px; background:#1d1a1d; border-bottom:1px solid #2a262a; }
.card .body { padding:16px; }
figure { margin:0; }
video, img { width:100%; height:auto; display:block; border-radius: 8px; }
footer { padding: var(--pad); text-align:center; color:#bbb; border-top:1px solid #2a262a; background:#0f0e10; }
.badge { font-size: 12px; padding: 6px 10px; border:1px solid #444; border-radius: 999px; display:inline-block; margin: 2px; color:#bbb; background:#141216; }
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#aaa;}

/* Top nav */
.topnav { position:absolute; top:10px; left:10px; right:10px; display:flex; gap:14px; justify-content:flex-end; z-index:5; }
.topnav a { padding:8px 12px; border-radius:999px; background:rgba(20,18,22,.6); border:1px solid #2a262a; color:#ddd; }
.topnav a.accent { background:#f9a826; color:#111; border-color:#f9a826; font-weight:800; }

/* Dream Machine section */
.dream-machine { background: radial-gradient(900px 500px at 20% 10%, rgba(255,196,77,.06), transparent 50%), linear-gradient(180deg, rgba(18,16,20,1) 0%, rgba(8,7,10,1) 100%); border-top:1px solid #2a262a; border-bottom:1px solid #2a262a; }
.dm-wrap { display:grid; grid-template-columns: 1fr; gap:20px; align-items:stretch; }
@media(min-width: 1000px){ .dm-wrap { grid-template-columns: 2fr 1fr; } }
.dm-copy ul { margin:10px 0 0 18px; line-height:1.6; }
.dm-card { background:#141216; border:1px solid #2a262a; border-radius:16px; padding:16px; position:relative; }
.dm-badge { position:absolute; top:10px; right:10px; font-size:12px; background:#1f8c4a; color:#fff; padding:6px 10px; border-radius:999px; }
.dm-body h3 { margin-top:8px; }