/* ═══════════════════════════════════════════════
   Castquill — shared stylesheet
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 2026 palette — matched to the homepage (css/home.css): Apple-ish light
     greys with a violet→pink→rose brand gradient. --coral kept its name but
     is pink now; every place that used the old orange follows automatically. */
  --ink:           #1D1D1F;
  --white:         #ffffff;
  --surface:       #F5F5F7;
  --muted:         #6E6E73;
  --border:        #E8E8ED;
  --violet:        #7C3AED;
  --violet-soft:   #f0edff;
  --violet-mid:    #A855F7;
  --coral:         #EC4899;
  --coral-soft:    #FCE7F3;
  --coral-mid:     #F472B6;
  --gold:          #f5783a;
  --gold-soft:     #fff3ec;
  --green:         #00b37e;
  --green-soft:    #e6f9f3;
  --error:         #e53e3e;
  --brand-gradient: linear-gradient(140deg, #7C3AED 0%, #EC4899 60%, #F43F5E 100%);
  --radius:        16px;
  --nav-h:         56px;
  --shadow-violet: 0 8px 24px rgba(124,58,237,0.32);
  --shadow-coral:  0 8px 24px rgba(236,72,153,0.30);
}

html { scroll-behavior: smooth; }

::selection { background: var(--violet); color: #fff; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── SHARED NAV ── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  transition: box-shadow 0.25s;
}
.site-nav.scrolled { box-shadow: 0 4px 24px rgba(14,14,16,0.08); }
.nav-logo { text-decoration: none; display: flex; align-items: center; height: 28px; }
.nav-logo .logo-lockup { font-size: 28px; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.15s; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; gap: 14px; align-items: center; }
.nav-btn-ghost { font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 500; padding: 7px 6px; transition: color 0.15s; }
.nav-btn-ghost:hover { color: var(--ink); }
.nav-btn-brand { font-size: 14px; color: #fff; background: var(--brand-gradient); font-weight: 600; padding: 8px 18px; border-radius: 980px; text-decoration: none; transition: box-shadow 0.2s, transform 0.15s; }
.nav-btn-brand:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(124,58,237,0.6); }
.nav-btn-creator { font-size: 14px; color: var(--ink); background: #fff; border: 1.5px solid #D2D2D7; font-weight: 600; padding: 6.5px 18px; border-radius: 980px; text-decoration: none; transition: border-color 0.2s, transform 0.15s; }
.nav-btn-creator:hover { border-color: var(--coral); transform: translateY(-1px); }

/* ── LOGO — PNG lockup (markup injected by renderLogos() in app.js) ──
   Size a lockup by setting font-size on .logo-lockup: the image is 1em tall,
   the dark-surface wordmark scales with it. */
.logo-lockup { display: inline-flex; align-items: center; gap: 0.3em; line-height: 1; font-size: 28px; }
/* logo slots are <a> elements — the dark-surface wordmark is text, so kill the UA link blue */
.nav-logo, .mobile-logo, .auth-logo, .footer-logo-wrap { color: inherit; }
.logo-lockup img { height: 1em; width: auto; display: block; }
.logo-word { font-family: inherit; font-weight: 700; font-size: 0.68em; letter-spacing: -0.03em; color: currentColor; }
.logo-word-grad { background: linear-gradient(120deg, #EC4899 0%, #F43F5E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* brighter wordmark gradient on the dark sidebar */
.sidebar .logo-word-grad { background: linear-gradient(120deg, #F472B6, #FB7185); -webkit-background-clip: text; background-clip: text; }

/* ── FLASH MESSAGES ── */
.flash {
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  margin-bottom: 18px; display: none;
}
.flash.show {
  display: block;
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9999; margin: 0; max-width: 90%;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.flash-error { background: #fff5f5; color: var(--error); border: 1px solid rgba(229,62,62,0.2); }
.flash-success { background: var(--green-soft); color: #007a55; border: 1px solid rgba(0,179,126,0.2); }

/* ── SHARED BUTTONS ── */
.btn { display: inline-block; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s; border-radius: 980px; }
.btn:hover { opacity: 0.92; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-violet { background: var(--violet); color: #fff; padding: 11px 24px; font-size: 14px; box-shadow: 0 4px 14px rgba(124,58,237,0.28); }
.btn-violet:hover { box-shadow: var(--shadow-violet); }
.btn-coral  { background: var(--brand-gradient); color: #fff; padding: 11px 24px; font-size: 14px; box-shadow: 0 4px 14px rgba(236,72,153,0.28); }
.btn-coral:hover { box-shadow: var(--shadow-coral); }
.btn-white  { background: #fff; padding: 13px 28px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.btn-white-violet { color: var(--violet); }
.btn-white-ink    { color: var(--ink); }
.btn-full   { width: 100%; display: block; text-align: center; padding: 14px; font-size: 15px; }
.btn-gradient { background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 14px rgba(236,72,153,0.28); }
.btn-gradient:hover { box-shadow: var(--shadow-coral); }

/* ── SHARED FORM ELEMENTS ── */
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

label.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 5px; letter-spacing: 0.01em; }

/* The list is explicit rather than a bare `input` so checkboxes, radios and
   file inputs keep their own styling — those are laid out by hand elsewhere.
   date/tel/url were missing until the signup form asked for a date of birth
   and the field rendered as a bare browser default next to styled ones; tel
   (the phone fields) and url (the pitch video field) had the same gap. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--ink);
  background: var(--white); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none; -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
input.focus-coral:focus, select.focus-coral:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(236,72,153,0.12);
}
/* A disabled field still has to read as a field — it carries a real value the
   user is meant to see (a date of birth on file, say), so it dims rather than
   disappears, and the cursor says "not yours to change" on hover. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface); color: var(--muted); cursor: not-allowed;
}

input.input-err { border-color: var(--error) !important; }
input.input-err:focus { box-shadow: 0 0 0 3px rgba(229,62,62,0.1) !important; }

select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%236b6b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field-err-msg { font-size: 11.5px; color: var(--error); margin-top: 5px; display: none; }
.field-err-msg.show { display: block; }

/* Standing hint under a field — why we're asking, or what we do with it.
   Always visible, unlike .field-err-msg, which only appears on a bad value. */
.field-note { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

.input-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 2px; display: flex; align-items: center;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 15px; height: 15px; }
input[type="password"] { padding-right: 40px; }

/* password strength */
.pw-strength { margin-top: 7px; display: none; }
.pw-strength.show { display: block; }
.pw-bar-row { display: flex; gap: 4px; margin-bottom: 4px; }
.pw-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background 0.2s; }
.pw-bar.weak   { background: var(--error); }
.pw-bar.med    { background: var(--gold); }
.pw-bar.strong { background: var(--green); }
.pw-str-label  { font-size: 11px; color: var(--muted); }

/* checkbox */
.check-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; margin-top: 4px; }
.check-row input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  background: var(--white); cursor: pointer; margin-top: 2px;
  transition: background 0.15s, border-color 0.15s; position: relative;
}
.check-row input[type="checkbox"]:checked { background: var(--violet); border-color: var(--violet); }
.check-row input[type="checkbox"].coral-check:checked { background: var(--coral); border-color: var(--coral); }
.check-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 3px; top: 1px;
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.check-label { font-size: 12px; color: var(--muted); line-height: 1.5; }
.check-label a { color: var(--violet); text-decoration: none; font-weight: 600; }
.check-label a:hover { text-decoration: underline; }
.check-label.coral-links a { color: var(--coral); }

/* divider */
.or-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* social buttons */
.social-btns { display: flex; gap: 10px; }
.social-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 10px;
  background: var(--white); cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.social-btn:hover { border-color: rgba(0,0,0,0.22); background: var(--surface); }
.social-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* trust row */
.trust-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.tdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }

/* ── FINAL CTA (shared: home + about) ── */
.final-section { display: grid; grid-template-columns: 1fr 1fr; }
.final-panel { padding: 88px 52px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.final-panel > * { position: relative; }
.final-panel::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 520px; height: 340px; pointer-events: none; }
.final-panel-brand   { background: var(--ink);   color: var(--white); }
.final-panel-brand::before { background: radial-gradient(ellipse, rgba(124,58,237,.3) 0%, transparent 70%); }
.final-panel-creator { background: var(--brand-gradient); color: var(--white); }
.final-panel-creator::before { background: radial-gradient(ellipse, rgba(255,255,255,.22) 0%, transparent 70%); }
.final-panel h2 { font-size: clamp(26px,3.5vw,40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 14px; }
.final-panel p { font-size: 15px; opacity: .7; max-width: 300px; margin: 0 auto 32px; line-height: 1.55; }
@media (max-width: 700px) {
  .final-section { grid-template-columns: 1fr; }
  .final-panel { padding: 64px 32px; }
}

/* ── SHARED FOOTER ──
   Dark, rounded-top block matching the homepage's footer treatment. The logo
   wordmark's "Cast" rides on currentColor, so the footer's light ink carries
   into it without touching the lockup. */
.site-footer { background: var(--ink); color: #F5F5F7; border-radius: 32px 32px 0 0; padding: 56px 28px 32px; }
.footer-inner { max-width: 980px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 48px; flex-wrap: wrap; gap: 32px; }
.footer-brand p { font-size: 13.5px; color: rgba(245,245,247,.6); max-width: 220px; line-height: 1.6; margin-top: 8px; }
.footer-logo-wrap .logo-lockup { font-size: 32px; }
.footer-cols { display: flex; gap: 52px; flex-wrap: wrap; }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,247,.45); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: rgba(245,245,247,.75); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(245,245,247,.14); }
.footer-bottom p { font-size: 12px; color: rgba(245,245,247,.4); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: 12px; color: rgba(245,245,247,.55); text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ── AUTH LAYOUT (split screen) ── */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 860px) { .auth-layout { grid-template-columns: 1fr; } }

.auth-left {
  position: relative; display: flex; flex-direction: column;
  justify-content: space-between; padding: 32px 48px 48px;
  background: var(--ink); overflow: hidden; min-height: 100vh;
}
@media (max-width: 860px) { .auth-left { display: none; } }

.auth-right {
  background: var(--white); display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 40px 32px; min-height: 100vh; overflow-y: auto;
}
.auth-right-inner { width: 100%; max-width: 400px; }

/* auth left panel content */
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 12px; border-radius: 980px; margin-bottom: 24px; width: fit-content;
}
.auth-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.auth-headline { font-size: clamp(30px,3vw,46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.07; color: var(--white); margin-bottom: 18px; }
.auth-headline em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.38); }
.auth-body { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.65; max-width: 380px; margin-bottom: 40px; }

.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.auth-perk { display: flex; align-items: flex-start; gap: 12px; }
.auth-perk-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
}
.auth-perk-text { font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.5; padding-top: 6px; }
.auth-perk-text strong { color: rgba(255,255,255,0.88); font-weight: 600; }

.auth-left-footer { position: relative; z-index: 1; }
.auth-left-footer p { font-size: 11.5px; color: rgba(255,255,255,0.25); }
.auth-left-footer a { color: rgba(255,255,255,0.45); text-decoration: none; }
.auth-left-footer a:hover { color: rgba(255,255,255,0.8); }

/* mode toggle (signup/login) */
.mode-toggle {
  display: flex; background: var(--surface);
  border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 28px;
}
.mode-btn {
  flex: 1; font-size: 13.5px; font-weight: 600; padding: 9px 0;
  border: none; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.mode-btn.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

.form-heading { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 6px; line-height: 1.1; }
.form-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
.form-sub a { text-decoration: none; font-weight: 600; }
.form-sub a.violet-link { color: var(--violet); }
.form-sub a.coral-link { color: var(--coral); }
.form-sub a:hover { text-decoration: underline; }

.forgot { text-align: right; margin-top: -8px; margin-bottom: 16px; }
.forgot a { font-size: 12.5px; text-decoration: none; font-weight: 500; }

/* niche tiles */
.niche-grid-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
/* Tiles are <button aria-pressed> so they're keyboard-operable and expose their
   state — these resets keep the button looking exactly like the old div. */
.niche-tile {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px;
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--ink);
  transition: border-color 0.15s, background 0.15s; user-select: none;
  font-family: inherit; background: var(--white); text-align: left; width: 100%;
}
.niche-tile:hover { border-color: rgba(0,0,0,0.2); }
.niche-tile.selected-coral  { border-color: var(--coral);  background: var(--coral-soft);  color: var(--coral); }
.niche-tile.selected-violet { border-color: var(--violet); background: var(--violet-soft); color: var(--violet); }
.niche-emoji { font-size: 15px; }

/* mobile logo on auth pages */
.mobile-logo { display: none; margin-bottom: 32px; text-decoration: none; }
@media (max-width: 860px) { .mobile-logo { display: block; } }
.mobile-logo .logo-lockup { font-size: 30px; }

/* ── ACCESSIBILITY: skip link ── */
.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 600; z-index: 200;
  text-decoration: none; transition: top 0.18s;
}
.skip-link:focus { top: 8px; }

/* ── ACCESSIBILITY: screen-reader-only text ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── ACCESSIBILITY: visually hidden but still focusable ──
   display:none on a file input drops it out of the tab order entirely, which
   left avatar/banner upload unreachable by keyboard. This hides it the same way
   visually while keeping it focusable; .file-label draws the ring for it. */
.sr-file {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file-label:focus-within { outline: 2.5px solid var(--violet); outline-offset: 3px; }

/* ── ACCESSIBILITY: visible focus ring for keyboard users ── */
:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}
/* don't double up on inputs that already have a focus box-shadow */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ── MOBILE NAV (hamburger + drawer) ── */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 9px;
  align-items: center; justify-content: center;
  color: var(--ink);
}
.nav-toggle:hover { background: var(--surface); }
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-drawer {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(14,14,16,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.22s, visibility 0.22s;
}
.mobile-drawer.open { opacity: 1; visibility: visible; }
.mobile-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(300px, 82vw);
  background: var(--white);
  padding: 24px;
  transform: translateX(100%); transition: transform 0.26s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mobile-drawer-close { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.mobile-drawer-close:hover { background: var(--surface); color: var(--ink); }
.mobile-drawer a.m-link { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 12px 10px; border-radius: 10px; transition: background 0.15s; }
.mobile-drawer a.m-link:hover { background: var(--surface); }
.mobile-drawer-divider { height: 1px; background: var(--border); margin: 14px 0; }
.mobile-drawer .m-cta { text-align: center; margin-top: 4px; }

/* ── SCROLL-REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-actions .nav-btn-ghost,
  .nav-actions .nav-btn-brand,
  .nav-actions .nav-btn-creator { display: none; }
  .nav-toggle { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}