:root {
    color-scheme: dark;
    --site-bg: #000;
    --site-card: #0a0a0b;
    --site-card-hover: #111113;
    --site-border: rgba(255,255,255,.09);
    --site-muted: #a1a1aa;
    --site-soft: #18181b;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--site-bg); color: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.public-shell { min-height: 100vh; background: radial-gradient(circle at 50% -10%, rgba(124,58,237,.18), transparent 34rem), #000; }
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--site-border); }
.site-container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.site-card { background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--site-border); border-radius: 1.25rem; }
.site-card:hover { border-color: rgba(255,255,255,.18); }
.site-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.65rem; padding: 0 1.15rem; border-radius: 999px; font-size: .875rem; font-weight: 650; text-decoration: none; transition: .18s ease; }
.site-button-primary { background: #fff; color: #09090b; }
.site-button-primary:hover { background: #e4e4e7; transform: translateY(-1px); }
.site-button-secondary { color: #fff; border: 1px solid var(--site-border); background: rgba(255,255,255,.035); }
.site-button-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.site-kicker { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .72rem; border: 1px solid var(--site-border); border-radius: 999px; color: #d4d4d8; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.035); }
.site-grid-glow { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.hero-panel { background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.75)), url('/static/img/marketing/hero-landscape.png') center/cover; }
.studio-panel { background: linear-gradient(120deg, rgba(0,0,0,.08), rgba(0,0,0,.75)), url('/static/img/marketing/studio-backdrop.jpg') center/cover; }
.template-preview { background: #111; overflow: hidden; position: relative; }
.template-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.group:hover .template-preview img { transform: scale(1.035); }
.template-placeholder { display: flex; align-items: center; justify-content: center; min-height: 17rem; background: radial-gradient(circle at 50% 20%, rgba(139,92,246,.22), transparent 60%), #111113; }
.legal-copy h2 { color: #fff; font-size: 1.2rem; margin: 2.2rem 0 .8rem; }
.legal-copy h3 { color: #f4f4f5; font-size: 1rem; margin: 1.5rem 0 .6rem; }
.legal-copy p, .legal-copy li { color: #a1a1aa; line-height: 1.75; }
.legal-copy ul { padding-left: 1.25rem; }
.help-search:focus { border-color: rgba(255,255,255,.32); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.site-footer a { color: #a1a1aa; text-decoration: none; }
.site-footer a:hover { color: #fff; }
@media (max-width: 760px) {
    .site-container { width: min(100% - 1.25rem, 1180px); }
}