/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* ============================================
   Theme Token System — CSS Custom Properties
   ============================================ */
:root {
  --color-primary: #4A90D9;
  --color-secondary: #3DB390;
  --color-bg: #FDFBF7;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-accent: #E8692D;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --font-heading: 'Pretendard Variable', 'Inter', system-ui, sans-serif;
  --font-body: 'Pretendard Variable', 'Inter', system-ui, sans-serif;
  --transition-speed: 0.3s;
}

*, *::before, *::after {
  transition: color var(--transition-speed) ease,
              background-color var(--transition-speed) ease,
              border-color var(--transition-speed) ease,
              box-shadow var(--transition-speed) ease;
}

/* ── Organic ─────────────────────────── */
:root[data-theme="organic"] {
  --color-primary:#6B7B5E;--color-secondary:#D4A5A5;--color-bg:#F5F0E8;--color-surface:#FDFAF5;--color-text:#3D3229;--color-accent:#C4856A;--radius:20px;--shadow:0 4px 16px rgba(61,50,41,0.06);--font-heading:'DM Serif Display',serif;--font-body:'DM Sans',sans-serif;
}
/* ── Dopamine ────────────────────────── */
:root[data-theme="dopamine"] {
  --color-primary:#FF6B35;--color-secondary:#BFFF00;--color-bg:#0D1B2A;--color-surface:#142236;--color-text:#FAFAFA;--color-accent:#FF2D6B;--radius:8px;--shadow:0 0 20px rgba(255,107,53,0.2);--font-heading:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;
}
/* ── Frost ───────────────────────────── */
:root[data-theme="frost"] {
  --color-primary:#4ECDC4;--color-secondary:#9B89B3;--color-bg:#1A1A2E;--color-surface:rgba(255,255,255,0.08);--color-text:#E8E8E8;--color-accent:#4ECDC4;--radius:16px;--shadow:6px 6px 12px rgba(0,0,0,0.4),-6px -6px 12px rgba(60,60,80,0.15);--font-heading:'Outfit',sans-serif;--font-body:'Outfit',sans-serif;
}
/* ── Clubroom ────────────────────────── */
:root[data-theme="clubroom"] {
  --color-primary:#C9A96E;--color-secondary:#A68B4B;--color-bg:#0A0A0A;--color-surface:#161616;--color-text:#F0EDE5;--color-accent:#C9A96E;--radius:4px;--shadow:0 1px 3px rgba(0,0,0,0.5);--font-heading:'Playfair Display',serif;--font-body:'Inter',sans-serif;
}
/* ── Motion ──────────────────────────── */
:root[data-theme="motion"] {
  --color-primary:#4A90D9;--color-secondary:#3DB390;--color-bg:#FDFBF7;--color-surface:#FFFFFF;--color-text:#1A1A1A;--color-accent:#E8692D;--radius:12px;--shadow:0 12px 24px rgba(74,144,217,0.15);--font-heading:'Inter',sans-serif;--font-body:'Inter',sans-serif;
}
/* ── Midnight Neon ───────────────────── */
:root[data-theme="midnight-neon"] {
  --color-primary:#B347EA;--color-secondary:#FF2D95;--color-bg:#0B0B1A;--color-surface:#151530;--color-text:#E8E0F0;--color-accent:#00F5D4;--radius:6px;--shadow:0 0 24px rgba(179,71,234,0.25);--font-heading:'Orbitron',sans-serif;--font-body:'Rajdhani',sans-serif;
}
/* ── Sunset Warm ─────────────────────── */
:root[data-theme="sunset-warm"] {
  --color-primary:#E07A5F;--color-secondary:#F2CC8F;--color-bg:#FFF8F0;--color-surface:#FFFFFF;--color-text:#3D2C2C;--color-accent:#E07A5F;--radius:16px;--shadow:0 4px 14px rgba(224,122,95,0.1);--font-heading:'Playfair Display',serif;--font-body:'Lora',serif;
}
/* ── Ocean Breeze ────────────────────── */
:root[data-theme="ocean-breeze"] {
  --color-primary:#0077B6;--color-secondary:#48CAE4;--color-bg:#F0F8FF;--color-surface:#FFFFFF;--color-text:#1B2A3D;--color-accent:#00B4D8;--radius:14px;--shadow:0 4px 12px rgba(0,119,182,0.08);--font-heading:'Quicksand',sans-serif;--font-body:'Nunito',sans-serif;
}
/* ── Monochrome ──────────────────────── */
:root[data-theme="monochrome"] {
  --color-primary:#111111;--color-secondary:#666666;--color-bg:#FAFAFA;--color-surface:#FFFFFF;--color-text:#111111;--color-accent:#333333;--radius:2px;--shadow:0 1px 3px rgba(0,0,0,0.08);--font-heading:'IBM Plex Sans',sans-serif;--font-body:'IBM Plex Sans',sans-serif;
}

/* ============================================
   Global Styles
   ============================================ */
body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.2; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Buttons ─────────────────────────── */
.btn-primary {
  display: inline-block; padding: .75rem 2rem; font-weight: 600;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }

.btn-secondary {
  display: inline-block; padding: .75rem 2rem; font-weight: 600;
  background: transparent; color: var(--color-primary);
  border: 2px solid var(--color-primary); border-radius: var(--radius);
}
.btn-secondary:hover { background: var(--color-primary); color: #fff; }

/* ── Card ────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* ============================================
   Navbar
   ============================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: .75rem 1.5rem;
}
.navbar__logo {
  font-size: 1.25rem; font-weight: 700; color: var(--color-primary);
  display: flex; align-items: center; gap: .5rem;
}
.navbar__links { display: flex; align-items: center; gap: 1.5rem; }
.navbar__links a { font-size: .875rem; font-weight: 500; color: var(--color-text); }
.navbar__links a:hover { opacity: .7; }
.navbar__links .accent { color: var(--color-accent); }
.navbar__links .btn-primary { padding: .5rem 1.25rem; font-size: .875rem; }
.navbar__hamburger { display: none; flex-direction: column; gap: 5px; }
.navbar__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; }
.navbar__mobile { display: none; padding: .5rem 1.5rem 1rem; background: var(--color-surface); border-top: 1px solid rgba(0,0,0,0.06); }
.navbar__mobile a { display: block; padding: .5rem 0; font-size: .875rem; color: var(--color-text); }
.navbar__mobile.open { display: block; }

@media (max-width: 768px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }
}

/* ============================================
   Hero
   ============================================ */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 1.5rem 3rem; position: relative; overflow: hidden;
}
.hero__blob1 {
  position: absolute; left: -8rem; top: -8rem;
  width: 24rem; height: 24rem; border-radius: 50%; opacity: .2; filter: blur(60px);
  background: var(--color-primary);
}
.hero__blob2 {
  position: absolute; right: -8rem; bottom: -8rem;
  width: 24rem; height: 24rem; border-radius: 50%; opacity: .15; filter: blur(60px);
  background: var(--color-secondary);
}
.hero__content { position: relative; z-index: 1; max-width: 56rem; }
.hero__badge {
  display: inline-block; padding: .375rem 1rem; margin-bottom: 1rem;
  border-radius: 9999px; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--color-primary); color: #fff;
}
.hero__title { font-size: clamp(2rem,5vw,3.75rem); font-weight: 800; margin-bottom: 1.5rem; }
.hero__title em { font-style: normal; color: var(--color-primary); }
.hero__desc { font-size: 1.125rem; opacity: .7; max-width: 40rem; margin: 0 auto 2.5rem; }
.hero__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero__buttons .btn-primary,
.hero__buttons .btn-secondary { padding: .875rem 2.5rem; font-size: 1.125rem; }
.hero__disclaimer { margin-top: 1.5rem; font-size: .75rem; opacity: .4; }

/* ============================================
   Features
   ============================================ */
.features { padding: 5rem 0; }
.section-title { text-align: center; margin-bottom: 3.5rem; }
.section-title h2 { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; margin-bottom: .75rem; }
.section-title h2 em { font-style: normal; color: var(--color-primary); }
.section-title p { font-size: 1.125rem; opacity: .6; }
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.feature-card { padding: 1.5rem; }
.feature-card__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--color-primary); }
.feature-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; }
.feature-card p { font-size: .875rem; opacity: .7; line-height: 1.6; }

/* ============================================
   How It Works
   ============================================ */
.how-it-works { padding: 5rem 0; background: var(--color-surface); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; text-align: center; }
.step__num {
  width: 4rem; height: 4rem; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius);
}
.step h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.step p { font-size: .875rem; opacity: .6; }

/* ============================================
   Report Preview
   ============================================ */
.report-preview { padding: 5rem 0; }
.report-box { border: 2px solid var(--color-primary); overflow: hidden; max-width: 900px; margin: 0 auto; }
.report-box__header {
  padding: 1rem 1.5rem; font-weight: 700; font-size: .875rem;
  background: var(--color-primary); color: #fff;
}
.report-box__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; }
@media (max-width: 640px) { .report-box__body { grid-template-columns: 1fr; } }
.report-table { width: 100%; font-size: .875rem; }
.report-table td { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.report-table td:first-child { opacity: .6; padding-right: 1rem; white-space: nowrap; }
.checklist { list-style: none; }
.checklist li { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; font-size: .875rem; }
.checklist__icon {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.checklist__icon--ok { background: var(--color-secondary); }
.checklist__icon--warn { background: var(--color-accent); }
.checklist__label { flex: 1; opacity: .7; }
.checklist__status { font-weight: 600; font-size: .8125rem; }
.checklist__status--ok { color: var(--color-secondary); }
.checklist__status--warn { color: var(--color-accent); }

/* ============================================
   Pricing
   ============================================ */
.pricing { padding: 5rem 0; background: var(--color-surface); }
.pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 960px; margin: 0 auto; }
.pricing-card { padding: 2rem; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.08); position: relative; }
.pricing-card--popular { border: 2px solid var(--color-primary); transform: scale(1.03); }
.pricing-card__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: .25rem 1rem; border-radius: 9999px; font-size: .75rem; font-weight: 700;
  background: var(--color-primary); color: #fff;
}
.pricing-card h3 { font-size: 1.25rem; font-weight: 700; }
.pricing-card__desc { font-size: .875rem; opacity: .5; margin-top: .25rem; }
.pricing-card__price { margin: 1rem 0 1.5rem; }
.pricing-card__price strong { font-size: 2.5rem; font-weight: 800; color: var(--color-primary); }
.pricing-card__price span { font-size: .875rem; opacity: .5; }
.pricing-card__features { flex: 1; margin-bottom: 2rem; }
.pricing-card__features li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; padding: .25rem 0; opacity: .7; }
.pricing-card__features li::before { content: "✓"; color: var(--color-secondary); font-weight: 700; }
.pricing-card .btn-primary,
.pricing-card .btn-secondary { text-align: center; }

/* ============================================
   CTA
   ============================================ */
.cta { padding: 5rem 0; text-align: center; }
.cta h2 { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; margin-bottom: 1rem; }
.cta p { font-size: 1.125rem; opacity: .6; margin-bottom: 2rem; }
.cta__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 3rem; font-size: .875rem; opacity: .5; }

/* ============================================
   Footer
   ============================================ */
.footer { border-top: 1px solid rgba(0,0,0,0.08); background: var(--color-surface); padding: 3rem 0; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.footer__brand h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-primary); margin-bottom: .75rem; }
.footer__brand p { font-size: .875rem; opacity: .7; }
.footer__col h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin-bottom: .75rem; }
.footer__col li { font-size: .875rem; opacity: .7; padding: .25rem 0; }
.footer__col a:hover { opacity: 1; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; font-size: .75rem; opacity: .5; }

/* ============================================
   Themes Page
   ============================================ */
.themes-page { padding: 6rem 0 3rem; min-height: 100vh; }
.theme-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; margin-bottom: 2rem;
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow);
}
.theme-status__current { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.theme-status__badge {
  padding: .25rem .75rem; border-radius: 9999px; font-size: .875rem; font-weight: 700;
  background: var(--color-primary); color: #fff;
}
.theme-status__actions { display: flex; gap: .5rem; }
.theme-status__actions button {
  padding: .5rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  border: 1px solid var(--color-primary); color: var(--color-primary);
}
.theme-status__actions button:hover { background: var(--color-primary); color: #fff; }
.theme-status__actions button:disabled { opacity: .3; cursor: not-allowed; }
.theme-status__actions button.reset-btn { border-color: var(--color-accent); color: var(--color-accent); }
.theme-status__actions button.reset-btn:hover { background: var(--color-accent); color: #fff; }

.themes-layout { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 1024px) { .themes-layout { grid-template-columns: 1fr; } }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.theme-swatch {
  overflow: hidden; text-align: left; cursor: pointer;
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.08);
}
.theme-swatch.active { border: 3px solid var(--color-primary); }
.theme-swatch__preview { display: block; height: 7rem; width: 100%; }
.theme-swatch__info { padding: .75rem 1rem; }
.theme-swatch__info h3 { font-size: .9375rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.theme-swatch__active-badge {
  font-size: .625rem; padding: .125rem .5rem; border-radius: 9999px;
  background: var(--color-primary); color: #fff;
}
.theme-swatch__info p { font-size: .75rem; opacity: .6; margin-top: .25rem; }

/* Live Preview sidebar */
.live-preview { position: sticky; top: 5rem; align-self: start; }
.live-preview__mini-hero {
  text-align: center; padding: 1.5rem; margin-bottom: 1rem;
  background: var(--color-bg); border-radius: var(--radius);
}
.live-preview__mini-hero h4 { font-size: 1.125rem; font-weight: 700; color: var(--color-primary); margin-bottom: .5rem; }
.live-preview__mini-hero p { font-size: .8125rem; opacity: .6; margin-bottom: 1rem; }
.live-preview__mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.live-preview__mini-card {
  padding: .5rem; text-align: center; font-size: .75rem; font-weight: 500;
  background: var(--color-surface); border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.06);
}
.live-preview__price {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem; background: var(--color-bg); border-radius: var(--radius); margin-bottom: 1rem;
}
.live-preview__price span:first-child { font-size: .875rem; opacity: .6; }
.live-preview__price span:last-child { font-size: 1.125rem; font-weight: 700; color: var(--color-primary); }
.live-preview__buttons { display: flex; gap: .75rem; margin-bottom: 1rem; }
.live-preview__buttons button { flex: 1; font-size: .875rem; }
.live-preview__tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.live-preview__token-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; margin: 0 auto .25rem;
  border: 1px solid rgba(0,0,0,0.15);
}
.live-preview__token-label { font-size: .625rem; opacity: .6; }

/* ============================================
   Toast
   ============================================ */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
  padding: .75rem 1.5rem; border-radius: var(--radius);
  background: var(--color-primary); color: #fff;
  font-size: .875rem; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ============================================
   Intake Form
   ============================================ */
.intake-page { padding: 6rem 0 3rem; min-height: 100vh; }
.intake-page h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: .5rem; }
.intake-page > .container > p { opacity: .6; margin-bottom: 2rem; }
.form-section {
  border: 1px solid rgba(0,0,0,0.1); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.form-section legend { font-size: .875rem; font-weight: 600; padding: 0 .5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .75rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: .625rem .75rem; border-radius: calc(var(--radius) / 2);
  border: 1px solid rgba(0,0,0,0.15); background: var(--color-surface); color: var(--color-text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(74,144,217,.15); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-footer p { font-size: .75rem; opacity: .4; flex: 1; }
.form-alert {
  padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  background: rgba(232,105,45,0.1); color: var(--color-accent); font-size: .875rem;
}
.form-success {
  padding: 2rem; text-align: center; border-radius: var(--radius);
  background: var(--color-surface); box-shadow: var(--shadow);
}
.form-success h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: .5rem; }
.map-stub {
  height: 12rem; display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(0,0,0,0.15); border-radius: var(--radius);
  background: var(--color-bg); font-size: .875rem; opacity: .5;
}