:root { color-scheme: dark; --ink: #eee8de; --muted: #929ca3; --gold: #cba46d; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; display: grid; place-items: center; padding: 30px; color: var(--ink); background: radial-gradient(circle at 50% 18%, #13232d 0, #050b0f 42%, #020608 100%); font-family: Arial, Helvetica, sans-serif; }
.shell { width: min(920px, 100%); min-height: min(620px, calc(100vh - 60px)); padding: clamp(28px, 6vw, 70px); position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(203,164,109,.27); background: linear-gradient(145deg, rgba(8,18,24,.92), rgba(3,9,13,.94)); box-shadow: 0 30px 100px rgba(0,0,0,.42); }
.shell::before { content: ""; position: absolute; width: 430px; height: 430px; right: -190px; top: -180px; border: 1px solid rgba(203,164,109,.16); border-radius: 50%; box-shadow: 0 0 90px rgba(87,165,173,.08); }
.brand { display: flex; align-items: center; gap: 12px; width: max-content; color: #d7bd96; font: 12px Georgia, serif; letter-spacing: .14em; text-decoration: none; }
.brand img { width: 29px; height: 36px; object-fit: contain; }
.copy { position: relative; z-index: 1; max-width: 650px; padding: 90px 0; }
.eyebrow { display: block; margin-bottom: 18px; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0 0 22px; font: 400 clamp(44px, 8vw, 80px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
p { max-width: 560px; margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.7; }
.back { width: max-content; color: #d7bd96; font-size: 13px; text-decoration: none; border-bottom: 1px solid rgba(203,164,109,.45); padding-bottom: 5px; }
@media (max-width: 560px) { body { padding: 0; } .shell { min-height: 100vh; border: 0; } .copy { padding: 60px 0; } }