:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #05070a; color: #f5f7fa; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: #05070a; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.page-art { background-image: linear-gradient(180deg, rgba(1,4,8,.04), rgba(1,4,8,.45)), var(--page-art); background-repeat: no-repeat; background-position: top center; background-size: cover; }
.home-hero { min-height: 100svh; position: relative; display: grid; place-items: center; }
.hero-welcome { margin-top: 22vh; padding: .7rem 1.1rem; background: rgba(3,8,13,.36); border-radius: .35rem; text-align: center; text-shadow: 0 2px 8px #000; }
.hero-welcome h1 { font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: .06em; margin: 0; }
.scroll-cue { position: absolute; bottom: 2.1rem; display: grid; justify-items: center; gap: .15rem; color: #fff; text-decoration: none; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 6px #000; }
.scroll-cue span { font-size: 1.75rem; animation: bob 1.8s ease-in-out infinite; }
.hq-section { padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem); background: linear-gradient(#070d13, #030507); }
.hq-layout { max-width: 1500px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 260px); align-items: start; gap: clamp(1rem, 3vw, 3rem); }
.destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.7vw, 1.5rem); }
.destination-card { display: block; border-radius: .35rem; overflow: hidden; box-shadow: 0 6px 22px rgba(0,0,0,.38); transition: transform .18s ease, filter .18s ease; }
.destination-card:hover { transform: translateY(-3px); filter: brightness(1.07); }
.home-ad-rail { align-self: stretch; min-height: 740px; position: relative; }
.ad-slot { min-height: 110px; display: grid; place-items: center; padding: 1rem; border: 1px dashed rgba(225,235,245,.42); border-radius: .3rem; color: rgba(239,245,250,.72); background: rgba(5,12,19,.44); text-align: center; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
.ad-slot--home-rail { position: sticky; top: 1.5rem; min-height: 420px; }
.ad-slot--page-inline { margin-top: 1.5rem; }
.standard-main { min-height: 100svh; background-attachment: fixed; }
.site-nav { padding: .55rem clamp(.75rem, 2vw, 2rem); background: rgba(2,7,12,.84); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.15); }
.nav-list { display: flex; justify-content: center; align-items: center; gap: .42rem; max-width: 1500px; margin: auto; }
.nav-link { display: block; flex: 0 1 144px; border-radius: .18rem; overflow: hidden; opacity: .88; transition: opacity .15s ease, transform .15s ease; }
.nav-link:hover, .nav-link.is-current { opacity: 1; transform: translateY(-1px); }
.nav-toggle { display: none; }
.page-header { height: clamp(220px, 35vw, 430px); display: flex; align-items: flex-end; padding: 1.5rem clamp(1rem, 5vw, 5rem); }
.page-header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.page-content { max-width: 1240px; margin: 0 auto; padding: clamp(1rem, 3vw, 3rem); }
.content-panel, .integration-stage { padding: clamp(1.2rem, 3vw, 2.5rem); border: 1px solid rgba(255,255,255,.18); background: rgba(3,9,15,.78); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.content-panel h2, .integration-stage h2 { margin-top: 0; font-size: clamp(1.1rem, 2vw, 1.55rem); }
.content-panel p, .integration-stage p { max-width: 42rem; margin-bottom: 0; color: rgba(245,247,250,.84); }
.integration-stage { min-height: min(56svh, 620px); display: grid; align-content: center; }
.integration-stage--game { min-height: min(68svh, 760px); }
.creator-directory { min-height: 4rem; }
.not-found { min-height: 100svh; background: radial-gradient(circle at top, #24354a, #05070a 60%); }
.not-found__content { max-width: 650px; margin: 18vh auto; padding: 2rem; text-align: center; background: rgba(3,9,15,.72); }
.not-found__content a { display: inline-block; margin-top: 1rem; }
@keyframes bob { 50% { transform: translateY(5px); } }
@media (max-width: 760px) { .standard-main.page-art { background-size: 100% auto; background-position: top center; } .hq-layout { display: block; } .home-ad-rail { min-height: 0; margin-top: 1.5rem; } .ad-slot--home-rail { position: static; min-height: 130px; } .destination-grid { grid-template-columns: 1fr; } .site-nav { position: relative; } .nav-toggle { display: inline-block; color: inherit; background: transparent; border: 1px solid rgba(255,255,255,.55); padding: .45rem .7rem; border-radius: .2rem; } .nav-list { display: none; position: absolute; z-index: 10; left: .75rem; right: .75rem; top: calc(100% + .3rem); padding: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); background: rgba(2,7,12,.96); border: 1px solid rgba(255,255,255,.2); } .site-nav.is-open .nav-list { display: grid; } .nav-link { max-width: none; } .page-header { height: clamp(180px, 53vw, 300px); } .standard-main { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }