@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {color-scheme:dark;--bg:#111110;--panel:#1c1c1a;--card:#252522;--cream:#e9e3d7;--text:#f2ede3;--muted:#a7a49c;--line:#3c3b36;}
* {box-sizing:border-box}
html {min-height:100%;background:var(--bg)}
body {margin:0;min-height:100vh;font-family:'DM Sans',Arial,sans-serif;color:var(--text);background:radial-gradient(ellipse at 50% -22%,#30302b 0%,transparent 55%),var(--bg)}
.shell {max-width:560px;padding:28px 18px;margin:auto}
.frame {border:1px solid #42413a;border-radius:21px;overflow:hidden;background:var(--panel);box-shadow:0 24px 90px #0005}
.header {min-height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 27px;gap:12px;font-family:'Space Grotesk',sans-serif;letter-spacing:.03em;font-size:24px;font-weight:700}
.header small {font-size:9px;vertical-align:top}
.header-tag {margin-left:auto;font:700 9px 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--muted)}
.hero {padding:36px 28px 36px}
.eyebrow {font-size:11px;font-weight:800;letter-spacing:.045em;color:var(--cream);line-height:1.6;margin-bottom:36px}
h1 {font:700 clamp(39px,9.5vw,58px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0}
h1 em {font-style:normal;color:var(--cream)}
.hero p {color:#bebbb3;line-height:1.65;margin:20px 0 0;font-size:15px}
.contact {border-top:1px solid var(--line);padding:24px 28px 32px}
.section-title {display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:12px}
.section-title h2 {margin:0;font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.09em}
.section-title span {font-size:9px;color:#9b988e;letter-spacing:.15em;white-space:nowrap}
.contact-button {display:flex;align-items:center;gap:15px;text-decoration:none;padding:16px 19px;border-radius:10px;margin-top:11px;transition:transform .15s,background .15s}
.contact-button:hover {transform:translateY(-2px)}
.primary {background:var(--cream);color:#171714}
.primary:hover {background:#fff9ed}
.secondary {color:var(--text);background:#30302c;border:1px solid #57564e}
.secondary:hover {background:#3b3b36}
.button-icon {height:32px;width:32px;display:flex;align-items:center;justify-content:center}
.button-icon svg {height:26px;width:26px}
.button-copy {display:flex;flex-direction:column;gap:2px}
.button-copy strong {font-size:16px;font-weight:800}
.button-copy small {font-size:11px;opacity:.7}
.arrow {font-size:23px;margin-left:auto;font-weight:400}
.setup-note {font-size:12px;line-height:1.6;color:#ead3ab;background:#393329;padding:12px;border-radius:8px}
.setup-note code {color:#fff}
footer {border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;padding:19px 28px;color:#9b988f;font-size:9px;font-weight:700;letter-spacing:.06em}
footer b {font-size:14px;color:var(--cream)}
@media(max-width:410px){.header{padding:0 19px}.header-tag{font-size:8px}.hero,.contact{padding-left:19px;padding-right:19px}.eyebrow{font-size:10px}footer{padding:19px;flex-wrap:wrap}}