:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --bg: #242628; --orange: #ff9e40; --text: #fff; --muted: #b9bdc1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); margin: 0; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 1.5rem clamp(1.25rem, 6vw, 6rem); position: absolute; width: 100%; z-index: 1; }
.brand { color: var(--text); font-weight: 800; letter-spacing: .1em; text-decoration: none; }
.brand span { color: var(--orange); }
.header-link { color: var(--muted); text-decoration: none; }
.hero { align-items: center; background: radial-gradient(circle at 50% 34%, #4a3830 0, #242628 42%); display: flex; flex-direction: column; justify-content: center; min-height: 88vh; overflow: hidden; padding: 7rem 1.25rem; position: relative; text-align: center; }
.orb { border: 1px solid #ffffff18; border-radius: 50%; position: absolute; }
.orb-one { height: 32rem; width: 32rem; }
.orb-two { height: 48rem; width: 48rem; }
.eyebrow { color: var(--orange); font-size: .75rem; font-weight: 700; letter-spacing: .2em; margin: 0 0 1rem; }
h1, h2 { font-weight: 600; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(3.3rem, 10vw, 8rem); letter-spacing: -.06em; position: relative; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-copy { color: var(--muted); font-size: 1.2rem; margin: 1.5rem auto 2rem; max-width: 32rem; position: relative; }
.button { background: var(--orange); border-radius: 999px; color: #242628; display: inline-flex; font-weight: 800; gap: 1rem; padding: .9rem 1.4rem; position: relative; text-decoration: none; }
.about { margin: auto; max-width: 1100px; padding: clamp(5rem, 12vw, 10rem) 1.25rem; }
h2 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.05em; }
.about-grid { color: var(--muted); display: grid; font-size: 1.1rem; gap: 3rem; grid-template-columns: 1fr 1fr; margin-top: 3rem; max-width: 42rem; }
.signal-line { color: var(--orange); font-weight: 700; grid-column: 1 / -1; letter-spacing: .04em; }
footer { border-top: 1px solid #ffffff20; color: var(--muted); display: flex; font-size: .8rem; justify-content: space-between; padding: 2rem clamp(1.25rem, 6vw, 6rem); }
@media (max-width: 650px) { .about-grid { grid-template-columns: 1fr; gap: 0; } footer { flex-direction: column; gap: .5rem; } }