html { scroll-behavior: smooth; }
:root {
  --bg: #faf8ff; --ink: #17172b; --muted: rgba(23,23,43,0.62);
  --surface: rgba(255,255,255,0.82); --surface-solid: #ffffff;
  --border: rgba(23,23,43,0.1); --field-bg: #fff; --field-ink: #17172b;
  --accent: #5b21b6; --accent-2: #7c3aed; --gold: #b45309;
}
html.dark {
  --bg: #080814; --ink: #f1f0fa; --muted: rgba(241,240,250,0.64);
  --surface: rgba(16,16,34,0.78); --surface-solid: #111126;
  --border: rgba(255,255,255,0.1); --field-bg: rgba(255,255,255,0.05); --field-ink: #fff;
  --accent: #a78bfa; --accent-2: #8b5cf6; --gold: #fbbf24;
  color-scheme: dark;
}
body { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--bg); color: var(--ink); transition: background 0.35s ease, color 0.35s ease; }
.font-display { font-family: "Space Grotesk", "Sora", "Inter", ui-sans-serif, system-ui, sans-serif; }
.font-mono2 { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
::selection { background: #6d28d9; color: #fff; }

/* ---------- backdrop ---------- */
.future-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background: linear-gradient(180deg, #f6f2ff 0%, #faf8ff 50%, #f2f7ff 100%); }
html.dark .future-bg { background: linear-gradient(180deg, #080814 0%, #0d0a26 55%, #081420 100%); }
.future-bg::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(90,60,180,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(90,60,180,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, black 25%, transparent 75%); }
html.dark .future-bg::before { background-image: linear-gradient(rgba(139,92,246,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.09) 1px, transparent 1px); }
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease;
  background-image: radial-gradient(1.2px 1.2px at 20px 30px, rgba(255,255,255,0.9), transparent), radial-gradient(1px 1px at 130px 80px, rgba(165,243,252,0.8), transparent),
    radial-gradient(1.2px 1.2px at 70px 150px, rgba(240,171,252,0.7), transparent), radial-gradient(1px 1px at 200px 40px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 260px 120px, rgba(196,181,253,0.8), transparent), radial-gradient(1px 1px at 320px 200px, rgba(255,255,255,0.7), transparent);
  background-size: 520px 260px; animation: twinkle 5s ease-in-out infinite alternate; }
html.dark .stars { opacity: 0.7; }
@keyframes twinkle { from { opacity: 0.4; } to { opacity: 0.75; } }
.orb { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: 0.35; animation: drift 16s ease-in-out infinite alternate; }
.orb-a { width: 460px; height: 460px; left: -140px; top: -160px; background: radial-gradient(circle, #c4b5fd, #818cf8 60%, transparent 72%); }
.orb-b { width: 400px; height: 400px; right: -120px; top: -60px; background: radial-gradient(circle, #ddd6fe, #a5b4fc 55%, transparent 72%); animation-delay: -6s; }
.orb-c { display: none; }
html.dark .orb { opacity: 0.32; }
html.dark .orb-a { background: radial-gradient(circle, #5b21b6, #2e1065 65%, transparent 75%); }
html.dark .orb-b { background: radial-gradient(circle, #0e7490, #083344 65%, transparent 75%); }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(30px, 24px) scale(1.06); } }

/* ---------- surfaces ---------- */
.card-shadow { box-shadow: 0 24px 60px -24px rgba(60, 30, 140, 0.22), 0 8px 24px -12px rgba(23, 23, 43, 0.14); }
html.dark .card-shadow { box-shadow: 0 0 0 1px rgba(139,92,246,0.18), 0 24px 70px -20px rgba(76,29,149,0.5), 0 8px 30px -10px rgba(0,0,0,0.7); }
.soft-shadow { box-shadow: 0 8px 28px -14px rgba(23, 23, 43, 0.16); }
html.dark .soft-shadow { box-shadow: 0 8px 28px -12px rgba(0,0,0,0.6); }
.glass { background: var(--surface); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }

/* dark-mode auto-adapt for light utilities used across pages */
html.dark .bg-white { background-color: rgba(17,17,38,0.85) !important; }
html.dark .bg-white\/60 { background-color: rgba(17,17,38,0.62) !important; }
html.dark [class*="text-black"] { color: rgba(241,240,250,0.76) !important; }
html.dark .text-black { color: #f1f0fa !important; }
html.dark [class*="border-black"] { border-color: rgba(255,255,255,0.11) !important; }
html.dark [class*="bg-black/5"] { background-color: rgba(255,255,255,0.06) !important; }
html.dark .bg-violet-50 { background-color: rgba(124,58,237,0.15) !important; border-color: rgba(124,58,237,0.32) !important; }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.28) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.11) !important; border-color: rgba(16,185,129,0.28) !important; }
html.dark .bg-sky-50 { background-color: rgba(56,189,248,0.11) !important; border-color: rgba(56,189,248,0.28) !important; }
html.dark .bg-orange-100, html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.16) !important; }
html.dark .bg-rose-50 { background-color: rgba(244,63,94,0.11) !important; }
html.dark input, html.dark select { color: var(--field-ink); }
html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* refined gradient ring + button */
.gradient-ring { position: relative; border-radius: 26px; padding: 1.5px;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6 35%, #38bdf8 70%, #6d28d9);
  background-size: 250% 250%; animation: ring-shift 10s ease infinite; }
html.dark .gradient-ring { box-shadow: 0 0 44px rgba(109,40,217,0.35); }
@keyframes ring-shift { 0%,100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
.gradient-ring > .ring-inner { border-radius: 24.5px; background: var(--surface); backdrop-filter: blur(22px) saturate(1.4); }

.btn-primary { background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  box-shadow: 0 12px 28px -10px rgba(109, 40, 217, 0.55), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 16px 36px -10px rgba(109, 40, 217, 0.65), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary:active { transform: scale(0.985); }

.grad-text { background: linear-gradient(100deg, #6d28d9, #9333ea 55%, #2563eb);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dark .grad-text { background: linear-gradient(100deg, #c4b5fd, #e9d5ff 45%, #7dd3fc); -webkit-background-clip: text; background-clip: text; }

.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: #10b981; flex-shrink: 0; }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid #10b981; opacity: 0.6; animation: ping2 1.8s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping2 { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } }

/* result card */
.holo { position: relative; overflow: hidden; background: linear-gradient(160deg, #12122b 0%, #1b1440 60%, #0a1a33 100%); }
.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 30px 30px; mask-image: radial-gradient(ellipse at center, black, transparent 82%); }
.holo > * { position: relative; z-index: 1; }
.num-glow { text-shadow: 0 0 28px rgba(167, 139, 250, 0.35); }

/* milestone dots (replaces emoji) */
.dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(125,125,160,0.4); flex-shrink: 0; }
.dot.done { background: #10b981; box-shadow: 0 0 10px rgba(16,185,129,0.6); }

/* cards */
.tool-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.tool-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.45) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.25), 0 18px 40px -16px rgba(109,40,217,0.4); }
.gen-card { position: relative; overflow: hidden; }
.gen-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gen, linear-gradient(90deg,#6d28d9,#8b5cf6)); opacity: 0.85; }

.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; flex-shrink: 0; }
.icon-tile svg { width: 22px; height: 22px; }

@keyframes float-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: float-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.animate-pop { animation: pop 0.35s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; border-radius: 8px; }
input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.field-input { transition: border-color 0.15s ease, box-shadow 0.15s ease; background: var(--field-bg); color: var(--field-ink); }
.field-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16); }

/* ================= Reference look: night hero + pastel cards ================= */
.script-font { font-family: "Caveat", cursive; }
.hero-night { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #0a1030 0%, #141b4d 45%, #3b2560 75%, #7a3b5e 100%); }
.hero-night .night-stars { position: absolute; inset: 0;
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 44% 22%, #cfe8ff, transparent), radial-gradient(1px 1px at 60% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 74% 20%, #fff, transparent), radial-gradient(1px 1px at 86% 12%, #ffd9ec, transparent),
    radial-gradient(1.2px 1.2px at 93% 30%, #fff, transparent), radial-gradient(1px 1px at 8% 38%, #fff, transparent),
    radial-gradient(1px 1px at 36% 34%, #fff, transparent), radial-gradient(1.3px 1.3px at 55% 30%, #fff, transparent),
    radial-gradient(1px 1px at 68% 38%, #cfe8ff, transparent), radial-gradient(1px 1px at 20% 28%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
.hero-night .moon { position: absolute; top: 12%; right: 12%; width: 74px; height: 74px; border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #f5e3b3 60%, #d9b988);
  box-shadow: 0 0 40px 12px rgba(255, 244, 200, 0.35); }
.hero-night .mountains { position: absolute; bottom: -2px; left: 0; right: 0; height: 150px; pointer-events: none; }
.hero-input { background: #fff; color: #17172b; border: 2px solid transparent; border-radius: 14px;
  padding: 0.7rem 0.9rem; width: 100%; font-weight: 700; font-size: 1.05rem; min-height: 60px; color-scheme: light; }
html.dark .hero-input { background: #fff; color: #17172b; }
html.dark .hero-input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
.hero-input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,0.35); }
.hero-input::placeholder { color: #9aa0b4; font-weight: 600; }
.hero-label { display: block; font-size: 11px; font-weight: 600; color: #9aa0b4; margin-bottom: 2px; }
.hero-cta { background: linear-gradient(90deg, #38bdf8, #818cf8 45%, #e879f9 90%); background-size: 150% auto;
  transition: background-position 0.4s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 30px -10px rgba(129, 140, 248, 0.7); }
.hero-cta:hover { background-position: right center; }
.hero-cta:active { transform: scale(0.985); }

/* pastel result cards */
.pastel { border-radius: 22px; padding: 1.25rem; border: 1px solid transparent; }
.pastel-blue { background: #eef4ff; border-color: #d9e6ff; color: #17172b; }
.pastel-green { background: #edf9f0; border-color: #d5efdb; color: #17172b; }
.pastel-pink { background: #fdf1f4; border-color: #f8dfe7; color: #17172b; }
.pastel-amber { background: #fffaef; border-color: #f5e6c8; color: #17172b; }
html.dark .pastel-blue { background: rgba(59,110,246,0.12); border-color: rgba(59,110,246,0.3); color: #f1f0fa; }
html.dark .pastel-green { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.28); color: #f1f0fa; }
html.dark .pastel-pink { background: rgba(244,114,182,0.1); border-color: rgba(244,114,182,0.28); color: #f1f0fa; }
html.dark .pastel-amber { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.28); color: #f1f0fa; }
html.dark .pastel .muted-dark { color: rgba(241,240,250,0.65) !important; }
.trait-chip { display: inline-block; font-size: 12px; font-weight: 600; background: rgba(34,197,94,0.18);
  border: 1px solid rgba(34,197,94,0.3); color: #15803d; border-radius: 9999px; padding: 0.2rem 0.7rem; }
html.dark .trait-chip { color: #86efac; }
.approx-row { display: flex; align-items: center; gap: 0.6rem; font-size: 14px; font-weight: 600; padding: 0.3rem 0; }
.approx-row svg { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; }

/* tools pastel tiles */
.tool-tile { border-radius: 20px; padding: 1.15rem; }
.tile-violet { background: #f3efff; } .tile-blue { background: #eef4ff; }
.tile-rose { background: #fdeef2; } .tile-green { background: #ecf8ef; }
html.dark .tile-violet { background: rgba(124,58,237,0.13); } html.dark .tile-blue { background: rgba(59,110,246,0.12); }
html.dark .tile-rose { background: rgba(244,114,182,0.1); } html.dark .tile-green { background: rgba(34,197,94,0.1); }
.try-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 13px; font-weight: 700;
  border-radius: 12px; padding: 0.6rem 1.4rem; min-height: 44px; transition: filter 0.2s ease, transform 0.15s ease; }
.try-btn:hover { filter: brightness(0.96); } .try-btn:active { transform: scale(0.97); }

/* milestone timeline */
.timeline { position: relative; padding-top: 2.4rem; }
.timeline-track { position: absolute; top: 3.35rem; left: 12px; right: 12px; height: 2px; background: rgba(120,120,160,0.3); border-radius: 2px; }
.timeline-fill { position: absolute; top: 3.35rem; left: 12px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #6d28d9, #e879f9); transition: width 1s ease; }
.timeline-pin { position: absolute; top: 0; transform: translateX(-50%); transition: left 1s ease; z-index: 2; }
.timeline-pin span { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff;
  background: #e11d78; border-radius: 9999px; padding: 0.2rem 0.65rem; box-shadow: 0 6px 16px -4px rgba(225,29,120,0.6); }
.timeline-pin::after { content: ""; display: block; width: 12px; height: 12px; margin: 2px auto 0; border-radius: 9999px;
  background: #e11d78; border: 3px solid #fff; box-shadow: 0 0 0 2px #e11d78; }
.timeline-dots { position: relative; display: flex; justify-content: space-between; }
.timeline-dot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.timeline-dot i { width: 10px; height: 10px; border-radius: 9999px; background: #b9bdd0; display: block; }
html.dark .timeline-dot i { background: #3f3f5e; }
.timeline-dot.done i { background: #6d28d9; }
.timeline-dot.now i { background: #e11d78; box-shadow: 0 0 0 4px rgba(225,29,120,0.25); width: 12px; height: 12px; }
.timeline-dot b { font-size: 11.5px; } .timeline-dot small { font-size: 10px; opacity: 0.5; }

/* faq two-col */
.faq-grid { display: grid; gap: 0.75rem; }
@media (min-width: 720px) { .faq-grid { grid-template-columns: 1fr 1fr; } }

/* footer night */
.footer-night { background: #0c1230; color: #c6cbe0; }
html.dark .footer-night { background: #070a1d; }

/* marquee tag pills + buttons */
.hero-marquee { display: block; }
.mq-pill { display: inline-block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9999px; padding: 0.3rem 0.85rem; margin-right: 0.5rem; white-space: nowrap; }
.mq-item { font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 600; opacity: 0.6; white-space: nowrap; }
.mq-star { opacity: 0.4; margin: 0 0.9rem; }
.mq-btn { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, #6d28d9, #9333ea); border-radius: 9999px; padding: 0.4rem 1rem; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { marquee { display: none; } }