:root { color-scheme: dark; --bg: #171018; --fg: #fff4df; --muted: #bbacb9; --accent: #faaf7e; --line: rgba(255,244,223,.16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.page { min-height: 100vh; background: radial-gradient(ellipse at 93% 16%, #442538 0%, transparent 45%), var(--bg); }
.header { height: 102px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; font-size: 12px; line-height: 1.06; letter-spacing: .16em; font-weight: 800; }
.brand-symbol { display: grid; place-items: center; color: var(--accent); border: 1px solid var(--accent); border-radius: 50%; width: 44px; height: 44px; font-size: 28px; }
.header-link, .text-link { font-size: 13px; letter-spacing: .02em; }
.header-link span, .text-link span { display: inline-block; margin-left: 10px; color: var(--accent); }
.hero { display: grid; grid-template-columns: 1fr 0.88fr; align-items: center; gap: 42px; padding-top: 82px; padding-bottom: 104px; min-height: 665px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; }
.dot { display: inline-block; height: 6px; width: 6px; margin-right: 9px; border-radius: 50%; vertical-align: 2px; background: currentColor; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
h1 { margin: 22px 0 25px; font-size: clamp(58px, 6.3vw, 104px); line-height: 1.05; white-space: nowrap; }
h1 em { color: var(--accent); font-weight: 400; }
.lead { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 390px; }
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; gap: 30px; padding: 19px 23px; cursor: pointer; border: 0; color: #29151c; background: var(--accent); border-radius: 2px; font-weight: 700; font-size: 13px; transition: background .2s, transform .2s; }
.button:hover { background: #ffca9f; transform: translateY(-2px); }
.button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.stage { min-height: 462px; position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; border: 1px solid rgba(255,244,223,.18); background: radial-gradient(circle at 50% 43%, #70364c 0, #371e30 42%, #1f1420 71%, #130d15 100%); }
.stage-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: #ff9959; opacity: .11; filter: blur(55px); }
.stage-orbit { position: absolute; width: 85%; aspect-ratio: 1; border: 1px solid rgba(255,191,143,.27); border-radius: 50%; transform: rotateX(60deg) rotate(-21deg); }
.stage-orbit-two { width: 108%; transform: rotateY(60deg) rotate(31deg); }
.stage-disc { width: 56%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -20px -28px 56px rgba(15,0,16,.5), 0 40px 90px #1b081b; background: linear-gradient(125deg, #ffd2a0 0%, #ef9668 40%, #8d4050 90%); transform: rotate(-20deg); }
.stage-mark { position: absolute; font-family: Georgia, serif; font-size: clamp(140px, 19vw, 270px); font-style: italic; color: #351726; text-shadow: 0 3px 18px rgba(255,244,223,.15); transform: rotate(-8deg); }
.stage-corner { position: absolute; font-size: 10px; letter-spacing: .2em; color: #ebc6bd; }
.stage-corner-top { top: 25px; left: 28px; }
.stage-corner-bottom { bottom: 25px; right: 27px; }
.about { display: grid; grid-template-columns: 1fr 0.7fr; gap: 80px; padding-top: 72px; padding-bottom: 90px; border-top: 1px solid var(--line); }
h2 { font-size: clamp(34px, 3.5vw, 54px); line-height: 1.2; margin: 20px 0 0; }
.about > div:nth-child(2) { padding-top: 36px; max-width: 380px; }
.about p:not(.eyebrow) { font-size: 15px; line-height: 1.8; color: var(--muted); }
.about .scene-caption { color: var(--accent) !important; border-left: 2px solid var(--accent); padding-left: 18px; margin-top: 26px; }
.footer { border-top: 1px solid var(--line); padding-top: 28px; padding-bottom: 32px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
@media (max-width: 950px) { .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 64px; } h1 { font-size: clamp(58px, 10vw, 90px); } .stage { min-height: 400px; } .about { gap: 28px; } }
@media (max-width: 600px) { .container { width: calc(100% - 36px); } .header { height: 82px; } .hero { padding-top: 56px; padding-bottom: 70px; min-height: 0; } h1 { font-size: clamp(48px, 11.8vw, 67px); white-space: normal; } .lead { font-size: 15px; } .hero-actions { gap: 23px; flex-wrap: wrap; } .stage { min-height: 340px; } .about { grid-template-columns: 1fr; padding-top: 55px; padding-bottom: 64px; } .about > div:nth-child(2) { padding-top: 0; } .footer { gap: 16px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }