@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --ink: #f6f1e9; --night: #111318; --orange: #ff7043; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
.hero { min-height: 100vh; position: relative; display: grid; place-content: center; overflow: hidden; padding: 40px; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 7%; border: 1px solid rgba(246,241,233,.12); border-radius: 50%; transform: rotate(-13deg) scaleY(.54); z-index: -1; }
.eyebrow { margin: 0 0 30px 8px; color: var(--orange); font: 12px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 900px; margin: 0; font-size: clamp(3.5rem, 10vw, 9.5rem); line-height: .9; letter-spacing: -.08em; font-weight: 600; }
h1 em { color: transparent; -webkit-text-stroke: 1px var(--ink); font-style: normal; }
.accent { width: 96px; height: 8px; margin: 52px 0 0 8px; background: var(--orange); transform: skewX(-25deg); }
.orb { position: absolute; border-radius: 50%; z-index: -1; filter: blur(1px); }
.orb-one { width: 22vw; height: 22vw; min-width: 180px; min-height: 180px; top: -8vw; right: -5vw; background: var(--orange); opacity: .85; }
.orb-two { width: 13vw; height: 13vw; min-width: 110px; min-height: 110px; bottom: -4vw; left: 8vw; border: 1px solid var(--orange); }
@media (max-width: 600px) { .hero { padding: 24px; place-content: center start; } .hero::before { inset: 10% -30%; transform: rotate(-13deg) scaleY(.65); } h1 { font-size: clamp(3.25rem, 17vw, 6rem); } .eyebrow { margin-left: 4px; } .accent { margin-left: 4px; } }