.hero { background: #fffaf5; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; min-height: 660px; gap: 30px; }
.hero-copy { padding: 68px 0 60px; position: relative; z-index: 1; }
.hero-copy .eyebrow { color: #773d17; }
.hero h1 { font-size: clamp(3.5rem, 5.6vw, 5.4rem); }
.hero h1 em { color: #ab4308; display: inline-block; position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 0; right: -10px; bottom: -10px; height: 6px; border-radius: 80%; background: #ffae58; transform: rotate(-4deg); }
.hero-description { color: var(--muted); font-size: 1.13rem; margin: 28px 0 30px; }
.platform-note { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.platform-note small { font-size: .78rem; }
.tiny-device { height: 25px; width: 16px; border: 2px solid #776a84; border-radius: 4px; position: relative; }
.tiny-device::after { content: ''; position: absolute; width: 4px; height: 2px; background: #776a84; bottom: 2px; left: 4px; }
.hero-art { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; isolation: isolate; background: #fffaf5; }
.hero-pixie { width: 350px; transform: rotate(7deg); mix-blend-mode: multiply; z-index: 2; }
.orbit { position: absolute; width: 400px; height: 400px; border-radius: 50%; border: 1px solid #e0cfe9; z-index: -1; transform: rotate(-30deg); }
.orbit-one { width: 470px; height: 320px; }
.orbit-two { width: 320px; height: 470px; border-style: dashed; }
.hero-art > .spark { position: absolute; top: 42px; right: 34px; font-size: 4rem; transform: rotate(12deg); }
.small-spark { position: absolute; bottom: 76px; left: 0; font-size: 2.5rem; color: #8655b6; }
.art-caption { position: absolute; bottom: 14px; right: 7px; font-size: .9rem; color: #674d78; font-style: italic; transform: rotate(-6deg); }
.play-strip { padding: 20px 0; background: var(--ink); color: #fff4df; overflow: hidden; }
.play-strip > div { display: flex; align-items: center; justify-content: center; gap: 38px; white-space: nowrap; font-weight: 750; font-size: 1rem; }
.play-strip .spark { font-size: 1.5rem; color: #ffae58; }
@media (max-width: 1000px) { .hero-grid { min-height: 580px; } .hero-art { height: 430px; } .hero-pixie { width: 280px; } .orbit-one { width: 360px; height: 270px; } .orbit-two { height: 370px; width: 260px; } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; gap: 0; } .hero-copy { padding: 48px 0 12px; } .hero h1 { font-size: clamp(3.15rem, 10vw, 4.5rem); } .hero-art { height: 340px; margin-bottom: 28px; } .hero-pixie { width: 245px; } .orbit-one { width: 310px; height: 220px; } .orbit-two { width: 230px; height: 315px; } .hero-art > .spark { top: 12px; right: 20%; font-size: 2.5rem; } .small-spark { bottom: 30px; left: 18%; } .art-caption { bottom: 0; right: 12%; font-size: .8rem; } }