/* ============================================================
   RelicServices — "Spectral" dark theme
   A haunted-neon redesign: drifting aurora, glassmorphism,
   gradient type, and motion everywhere. Layout utilities come
   from Tailwind; this file owns the look, color and animation.
   ============================================================ */

:root {
  --bg:        #06060d;
  --bg-2:      #0a0a14;
  --ink:       #e9ebff;
  --muted:     #9aa0c8;

  --cyan:      #ffffff;
  --violet:    #cccccc;
  --mint:      #eeeeee;
  --brand:     #ffffff;

  --grad:      linear-gradient(120deg, #ffffff 0%, #e0e0e0 42%, #b0b0b0 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,255,255,.16), rgba(200,200,200,.16));
  --glass:     rgba(255,255,255,.045);
  --glass-2:   rgba(255,255,255,.07);
  --hair:      rgba(255,255,255,.10);
  --hair-soft: rgba(255,255,255,.06);

  --shadow:    0 24px 60px -18px rgba(0,0,0,.7);
  --glow-cyan:   0 0 40px -6px rgba(255,255,255,.25);
  --glow-violet: 0 0 46px -6px rgba(200,200,200,.25);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  background: var(--bg);
}

body {
  position: relative;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.04) 0%, transparent 60%),
    linear-gradient(180deg, #08080f 0%, #06060d 40%, #05050b 100%);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Drifting aurora (fixed, behind everything) ---------- */
#aurora {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#aurora .blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  opacity: .35;
  will-change: transform;
}
#aurora .b1 { background: radial-gradient(circle at center, rgba(255,255,255,.08) 0%, transparent 62%);  top: -6vmax; left: -4vmax;  animation: drift1 26s ease-in-out infinite; }
#aurora .b2 { background: radial-gradient(circle at center, rgba(200,200,200,.06) 0%, transparent 62%);  top: 18vmax;  right: -8vmax; animation: drift2 32s ease-in-out infinite; }
#aurora .b3 { background: radial-gradient(circle at center, rgba(150,150,150,.05) 0%, transparent 60%);  bottom: -10vmax; left: 28vmax; animation: drift3 38s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14vmax,8vmax,0) scale(1.18); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-12vmax,10vmax,0) scale(.85); } }
@keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10vmax,-12vmax,0) scale(1.2); } }

/* ---------- Film grain overlay (filmic horror texture) ---------- */
#grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* keep real content above the decorative layers */
header, main, footer { position: relative; z-index: 1; }

::selection { background: rgba(139,92,255,.35); color: #fff; }
.text-balance { text-wrap: balance; }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: rgba(139,92,255,.45);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(94,201,255,.6); }

/* ============================================================
   Gradient headline type
   ============================================================ */
.headline {
  background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 55%, #888888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(255,255,255,.18);
}
.grad-word {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,255,255,.35));
}

/* ============================================================
   Navigation
   ============================================================ */
#nav { background: transparent; transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
#nav.scrolled {
  background: rgba(9,9,16,.92);
  border-color: var(--hair-soft);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.04), 0 12px 40px -24px rgba(0,0,0,.9);
}
.nav-link {
  position: relative;
  font-size: 13px;
  color: rgba(233,235,255,.72);
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 100%;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }

/* nav CTA + footer CTA share this pill */
.nav-cta {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  padding: .42rem 1rem;
  font-size: 13px;
  font-weight: 600;
  color: #04121f;
  background: var(--grad);
  box-shadow: var(--glow-cyan);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 54px -6px rgba(94,201,255,.7); }
.nav-cta:active { transform: translateY(0); }

#mobile-menu { background: rgba(9,9,16,.98); border-color: var(--hair-soft); }
#menu-btn { color: var(--ink); transition: background .2s; }
#menu-btn:hover { background: var(--glass); }

/* ============================================================
   Section tiles
   ============================================================ */
.tile-dark  { background: transparent; color: #fff; }
.tile-light {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  color: var(--ink);
  border-color: var(--hair-soft) !important;
}
.tile-light::before, .tile-dark::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* ambient per-tile glows */
.glow {
  position: absolute;
  width: 60rem; height: 60rem;
  border-radius: 9999px;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
.glow-blue   { background: radial-gradient(circle, rgba(255,255,255,.2),  transparent 60%); top: -30rem; left: 50%; transform: translateX(-50%); animation: pulseGlow 9s ease-in-out infinite; }
.glow-violet { background: radial-gradient(circle, rgba(200,200,200,.2),  transparent 60%); bottom: -32rem; right: -12rem; animation: pulseGlow 11s ease-in-out infinite; }
.tile-dark > .reveal, .tile-dark > .mx-auto, .tile-light > .reveal, .tile-light > .mx-auto { position: relative; z-index: 1; }

@keyframes pulseGlow { 0%,100% { opacity: .38; } 50% { opacity: .62; } }

/* ============================================================
   Ghost art — float + glow + blinking eyes
   ============================================================ */
.ghost-art {
  filter: drop-shadow(0 18px 55px rgba(120,160,255,.5));
  animation: floaty 6s ease-in-out infinite;
}
.ghost-art svg { overflow: visible; }
.ghost-art circle { animation: blink 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes blink  { 0%,46%,54%,100% { opacity: 1; } 49%,51% { opacity: .15; } }

/* ============================================================
   Pills / badges
   ============================================================ */
.badge-pill, .badge-pill-dark {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px;
  padding: .34rem .85rem;
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: #dbe7ff;
  background: var(--grad-soft);
  border: 1px solid var(--hair);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 26px -10px rgba(255,255,255,.3);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary, .btn-ghost-light, .btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  padding: .72rem 1.5rem;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .28s ease, filter .25s ease, background .25s ease, border-color .25s ease;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  color: #04121f;
  background: var(--grad);
  background-size: 180% 180%;
  box-shadow: 0 10px 30px -10px rgba(255,255,255,.3), var(--glow-violet);
  animation: hueShift 8s ease infinite;
}
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 40px -10px rgba(94,201,255,.7), var(--glow-violet); }
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(0); }
@keyframes hueShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.btn-ghost-light {
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hair);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }

.btn-ghost-dark {
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.09); border-color: var(--brand); color: #fff; transform: translateY(-1px); }

/* ============================================================
   Feature icons
   ============================================================ */
.feat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 1rem;
  color: var(--cyan);
  background: var(--grad-soft);
  border: 1px solid var(--hair);
  box-shadow: var(--glow-cyan);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.feat-icon svg { width: 1.6rem; height: 1.6rem; }
.flex.flex-col.items-center:hover .feat-icon { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 50px -6px rgba(94,201,255,.8); }

/* stat tiles in hero */
#boosts-learn > div {
  transition: transform .3s ease, background .3s ease;
  background: rgba(255,255,255,.04) !important;
}
#boosts-learn > div:hover { transform: translateY(-3px); background: rgba(255,255,255,.08) !important; }
#boosts-learn .text-2xl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* stagger grid children */
.reveal.in .grid > * { animation: fadeUp .7s both; }
.reveal.in .grid > *:nth-child(2) { animation-delay: .08s; }
.reveal.in .grid > *:nth-child(3) { animation-delay: .16s; }
.reveal.in .grid > *:nth-child(4) { animation-delay: .24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================
   FAQ
   ============================================================ */
#faq-list { border-color: var(--hair-soft) !important; }
.faq-item {
  border-color: var(--hair-soft) !important;
  border-radius: 14px;
  margin: .4rem 0;
  padding: 0 .25rem;
  transition: background .25s ease;
}
.faq-item[open] { background: rgba(255,255,255,.03); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.15rem .9rem;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--brand);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] .chev { transform: rotate(135deg); }
.faq-item .answer {
  padding: 0 .9rem 1.2rem;
  font-size: 14.5px; line-height: 1.65;
  color: var(--muted);
  animation: faqOpen .4s ease both;
}
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Wizard — option cards, fields, checks, price
   ============================================================ */
#wiz-step > * { animation: stepIn .5s ease both; }
@keyframes stepIn { from { opacity: 0; } to { opacity: 1; } }

.opt-card {
  position: relative;
  display: flex; flex-direction: column; text-align: left;
  border-radius: 1.1rem;
  padding: 1.3rem 1.3rem;
  background: var(--glass);
  border: 1px solid var(--hair);
  color: var(--ink);
  cursor: pointer;
  transition: transform .2s ease, border-color .25s ease, box-shadow .3s ease, background .25s ease;
}
.opt-card:hover { transform: translateY(-3px); background: var(--glass-2); border-color: rgba(255,255,255,.22); box-shadow: var(--shadow); }
.opt-card.selected {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad) border-box;
  box-shadow: var(--glow-cyan), inset 0 0 0 1px rgba(255,255,255,.04);
}
.opt-card.selected::after {
  content: "";
  position: absolute; top: .9rem; right: .9rem;
  width: 1.4rem; height: 1.4rem;
  border-radius: 999px;
  background: var(--grad) center / 64% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2304121f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E") center no-repeat,
    var(--grad);
  box-shadow: var(--glow-cyan);
}

/* labels */
.field-label {
  display: block;
  margin-bottom: .55rem;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}

/* text inputs / selects / textareas */
.field {
  width: 100%;
  border-radius: .8rem;
  padding: .72rem .9rem;
  font-size: 14.5px;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair);
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
  appearance: none;
}
.field::placeholder { color: rgba(154,160,200,.55); }
.field:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(94,201,255,.16), 0 0 30px -10px rgba(94,201,255,.6);
}
.field.invalid { border-color: #ff5d6c; box-shadow: 0 0 0 4px rgba(255,93,108,.16); }
select.field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0c8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
select.field option { background: #11121b; color: var(--ink); }

/* check / radio rows */
.check-row {
  display: flex; align-items: flex-start; gap: .8rem;
  border-radius: .85rem;
  padding: .85rem .95rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hair-soft);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .3s ease;
}
.check-row:hover { background: rgba(255,255,255,.06); border-color: var(--hair); }
.check-row.selected {
  border-color: rgba(94,201,255,.55);
  background: linear-gradient(0deg, rgba(94,201,255,.07), rgba(139,92,255,.07));
  box-shadow: 0 0 30px -12px rgba(94,201,255,.7);
}
.check-row input[type="checkbox"], .check-row input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.2rem; height: 1.2rem;
  margin-top: .12rem;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: all .2s ease;
}
.check-row input[type="checkbox"] { border-radius: .42rem; }
.check-row input[type="radio"]    { border-radius: 999px; }
.check-row input:checked {
  border-color: transparent;
  background: var(--grad);
  box-shadow: var(--glow-cyan);
}
.check-row input[type="checkbox"]:checked {
  background-image: var(--grad), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2304121f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.check-row input[type="radio"]:checked { box-shadow: var(--glow-cyan), inset 0 0 0 4px var(--bg-2); }

/* segmented control (boost type) */
.seg {
  flex: 1 1 0;
  border-radius: 999px;
  padding: .6rem 1rem;
  font-size: 14px; font-weight: 600;
  color: rgba(233,235,255,.8);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hair-soft);
  cursor: pointer;
  transition: all .2s ease;
}
.seg:hover { background: rgba(255,255,255,.1); color: #fff; }
.seg.seg-on {
  color: #04121f;
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--glow-cyan);
}

/* money preset pills */
.pill {
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair);
  cursor: pointer;
  transition: all .2s ease;
}
.pill:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.pill.pill-on {
  color: var(--cyan);
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  box-shadow: var(--glow-cyan);
}

/* range sliders */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; flex: 1;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--grad);
  border: 2px solid #fff;
  box-shadow: var(--glow-cyan);
  cursor: pointer;
  transition: transform .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 2px solid #fff;
  border-radius: 999px; background: #5ec9ff; cursor: pointer;
}

/* price summary card */
.price-card {
  border-radius: 1.1rem;
  padding: 1.3rem;
  background: rgba(12,12,20,.85);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 0;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--hair-soft);
}
.price-row.muted { color: var(--muted); }
.price-row:last-of-type { border-bottom: 0; }
.price-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .85rem; padding-top: .85rem;
  border-top: 1px solid var(--hair);
  font-size: 18px; font-weight: 700;
}
.price-total span:last-child {
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* progress bar */
#wiz-bar {
  background: var(--grad) !important;
  background-size: 200% auto !important;
  box-shadow: 0 0 18px -2px rgba(94,201,255,.8);
  animation: shimmer 3s linear infinite;
}
.h-1.w-full.overflow-hidden.rounded-full { background: rgba(255,255,255,.1) !important; }

/* ============================================================
   Discord
   ============================================================ */
.discord-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  border-radius: .85rem;
  padding: .72rem 1.15rem;
  font-size: 14px; font-weight: 600;
  color: #000;
  background: linear-gradient(135deg, #eeeeee, #cccccc);
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 26px -8px rgba(88,101,242,.7);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.discord-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 34px -8px rgba(88,101,242,.85); }
.discord-btn:active { transform: translateY(0); }

.discord-card {
  display: flex; align-items: center; gap: .85rem;
  border: 1px solid var(--hair);
  border-radius: .9rem;
  padding: .8rem .95rem;
  background: rgba(255,255,255,.04);
}
.discord-card.linked { border-color: rgba(77,255,160,.4); background: linear-gradient(0deg, rgba(52,211,153,.07), rgba(52,211,153,.03)); box-shadow: 0 0 30px -12px rgba(52,211,153,.6); }
.discord-avatar { width: 2.4rem; height: 2.4rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.discord-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#eeeeee,#cccccc); color: #000; font-weight: 700; font-size: 15px; }
.linked-badge {
  display: inline-flex; align-items: center;
  border-radius: 9999px; padding: .18rem .65rem;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(52,211,153,.16); color: #4dffd0;
  box-shadow: 0 0 18px -4px rgba(52,211,153,.7);
}

/* ============================================================
   Success ring + errors + legal prose
   ============================================================ */
.success-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5rem; height: 5rem;
  margin: 0 auto;
  border-radius: 999px;
  color: #04121f;
  background: var(--grad);
  box-shadow: var(--glow-cyan), var(--glow-violet);
  animation: popIn .6s cubic-bezier(.2,1.2,.3,1) both, pulseGlow 3s ease-in-out 1s infinite;
}
@keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

.err { color: #ff7785; font-size: 13px; margin-top: .4rem; }

.prose-legal { color: var(--muted); font-size: 15px; line-height: 1.7; }
.prose-legal h2 { color: var(--ink); font-size: 18px; font-weight: 600; margin: 1.6rem 0 .5rem; }
.prose-legal p { margin: 0 0 .9rem; }

/* ============================================================
   Motion-reduction & responsive niceties
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}