/* ===================================================
   DESIGN UPGRADE - Inner Child Healing
   Direction: Organic/Editorial — warm, feminine, high-quality healing product
   Fonts: Noto Serif SC (display) + DM Sans (body)
   =================================================== */

/* --- Typography --- */
body {
  font-family: 'DM Sans', Inter, ui-sans-serif, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Heading font: Noto Serif SC for all display text */
h1, h2, h3, .card-modal-copy h2 {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #3c3141;
}

.section-head h2,
.product-hero h2,
.quiz-side h2,
.result-main h2,
.final-cta-copy h2,
.daily-draw-copy h2,
.deck-hero h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.18;
}

/* --- Color system upgrade --- */
:root {
  --bg: #faf5f0;
  --surface: rgba(255,255,255,0.78);
  --primary: #7c5c83;
  --primary-deep: #5b4062;
  --primary-light: rgba(124,92,131,.08);
  --gold: #c4954a;
  --gold-soft: rgba(196,149,74,.12);
  --text: #332838;
  --muted: #6e5e72;
  --line: rgba(92,72,98,.1);
  --shadow: 0 8px 32px rgba(60,36,66,.1);
  --shadow-deep: 0 20px 60px rgba(60,36,66,.14);
}

/* --- Subtle grain texture overlay --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* --- Hero section upgrade --- */
.hero.card {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(196,149,74,.08), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(124,92,131,.07), transparent 50%),
    rgba(255,255,255,0.78);
  border: 1px solid rgba(196,149,74,.16);
}

/* --- Card upgrade --- */
.card {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(92,72,98,.09);
  box-shadow: 0 4px 24px rgba(60,36,66,.07), 0 1px 3px rgba(60,36,66,.05);
}
.card:hover {
  box-shadow: 0 8px 40px rgba(60,36,66,.12);
}

/* --- Buttons upgrade --- */
.btn-primary {
  background: linear-gradient(135deg, #6b4d73 0%, #5b4062 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(91,64,98,.28);
  letter-spacing: .02em;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #7c5c83 0%, #6b4d73 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(91,64,98,.36);
}
.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(92,72,98,.2);
  color: #5b4062;
  font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-secondary:hover {
  background: rgba(255,255,255,1);
  border-color: rgba(92,72,98,.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60,36,66,.1);
}

/* --- Section tags --- */
.section-tag, .eyebrow {
  background: linear-gradient(90deg, rgba(124,92,131,.12), rgba(196,149,74,.1));
  color: #5b4062;
  border: 1px solid rgba(92,72,98,.14);
  font-weight: 600;
  letter-spacing: .04em;
}

/* --- Hero stat points --- */
.hero-points li {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124,92,131,.07);
  border: 1px solid rgba(92,72,98,.1);
  font-size: .9rem;
  font-weight: 500;
  color: #5b4062;
}

/* --- Lead text upgrade --- */
.lead {
  font-size: 1.1rem;
  color: #6e5e72;
  line-height: 1.85;
}

/* --- Price card upgrade --- */
.price-card {
  background: linear-gradient(160deg, #5b4062 0%, #3e2848 100%);
  color: #fff;
  border: none;
  box-shadow: 0 20px 60px rgba(60,36,66,.28);
}
.price-card .mini-label { color: rgba(255,255,255,.65); font-weight: 500; }
.price-card strong { color: #fff; font-family: 'Noto Serif SC', serif; }
.price-card p { color: rgba(255,255,255,.7); }
.price-card small { color: rgba(255,255,255,.55); }
.price-card .btn-primary {
  background: linear-gradient(135deg, #c4954a 0%, #a8782c 100%);
  box-shadow: 0 4px 18px rgba(168,120,44,.4);
}
.price-card .btn-primary:hover {
  background: linear-gradient(135deg, #d4a55a 0%, #b88a3c 100%);
  box-shadow: 0 8px 28px rgba(168,120,44,.5);
}

/* --- Testimonials upgrade --- */
.testimonial-item {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(92,72,98,.09);
  box-shadow: 0 4px 20px rgba(60,36,66,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(60,36,66,.12);
}
.testimonial-quote {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #332838;
}
.testimonial-author { color: #7c5c83; font-weight: 600; }

/* --- FAQ upgrade --- */
details summary {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: #3c3141;
  transition: color .18s ease;
}
details summary:hover { color: #5b4062; }
details[open] summary { color: #5b4062; }

/* --- Flip card back upgrade --- */
.flip-card-back { background: #fff; }
.card-back-design {
  background:
    radial-gradient(circle at 30% 20%, rgba(196,149,74,.15), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(124,92,131,.12), transparent 35%),
    linear-gradient(180deg, #fff8f3 0%, #f2e6f5 100%);
}
.card-back-design strong {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
}

/* --- Daily state copy upgrade --- */
.daily-card-copy h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.35rem;
  color: #3c3141;
}
.daily-question, .daily-action {
  border-left: 3px solid #c4954a;
  background: rgba(196,149,74,.07);
}
.daily-question strong, .daily-action strong { color: #a8782c; }

/* --- Card modal upgrade --- */
.card-modal-panel {
  background: rgba(255,253,250,.97);
}
.card-modal-prev, .card-modal-next {
  border: 1.5px solid rgba(92,72,98,.18);
  color: #5b4062;
}
.card-modal-prev:hover, .card-modal-next:hover {
  background: linear-gradient(135deg, #6b4d73, #5b4062);
}
.card-modal-question, .card-modal-action {
  border-left: 4px solid #c4954a;
  background: rgba(196,149,74,.06);
}
.card-modal-question strong, .card-modal-action strong { color: #a8782c; }

/* --- Deck cards upgrade --- */
.deck-detail-card {
  background: rgba(255,255,255,0.82);
  transition: transform .25s ease, box-shadow .25s ease;
}
.deck-detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(60,36,66,.16);
}

/* --- Progress bar upgrade --- */
#progress-fill {
  background: linear-gradient(90deg, #7c5c83 0%, #c4954a 100%);
}

/* --- Archive grid upgrade --- */
.archetype-item {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(92,72,98,.09);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.archetype-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(60,36,66,.13);
  border-color: rgba(92,72,98,.2);
}

/* --- Site header upgrade --- */
.site-header {
  background: rgba(250,245,240,.9);
  border-bottom: 1px solid rgba(92,72,98,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header .brand {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  letter-spacing: .01em;
}
.top-nav button {
  font-weight: 500;
  transition: color .18s ease;
}
.top-nav button:hover { color: #5b4062; }

/* --- Section head text upgrade --- */
.section-head p.lead { max-width: 40em; }

/* --- Staggered load animations --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy h1 { animation: fadeUp .7s ease both; }
.hero-copy .lead { animation: fadeUp .7s .1s ease both; }
.hero-copy .hero-actions { animation: fadeUp .7s .2s ease both; }
.hero-copy .hero-points { animation: fadeUp .7s .3s ease both; }
.hero-art { animation: fadeUp .8s .15s ease both; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Focus states --- */
:focus-visible {
  outline: 2.5px solid #7c5c83;
  outline-offset: 3px;
}

/* --- Result CTA box upgrade --- */
.result-cta-box {
  background: linear-gradient(180deg, rgba(255,253,250,.92), rgba(246,236,248,.94));
  border: 1px solid rgba(196,149,74,.16);
  box-shadow: 0 12px 36px rgba(60,36,66,.09);
}

/* --- Copy example box upgrade --- */
.copy-example-box {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,242,250,.9));
  border: 1px solid rgba(92,72,98,.1);
  box-shadow: 0 4px 20px rgba(60,36,66,.06);
}

/* --- Process items upgrade --- */
.process-item > span {
  font-family: 'Noto Serif SC', serif;
  font-size: 2rem;
  font-weight: 700;
  color: rgba(92,72,98,.15);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}

/* --- Deck tabs sticky upgrade --- */
.deck-module-tabs {
  background: rgba(250,245,240,.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(92,72,98,.1);
  box-shadow: 0 4px 20px rgba(60,36,66,.08);
}
.deck-tab.active {
  background: linear-gradient(135deg, #6b4d73, #5b4062);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91,64,98,.25);
}

/* --- Final CTA card upgrade --- */
.final-cta-card {
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(245,236,248,.94) 100%);
  border: 1px solid rgba(92,72,98,.1);
}

/* --- Checkout modal upgrade --- */
.checkout-panel {
  background: rgba(255,253,250,.97);
}
.checkout-price {
  font-family: 'Noto Serif SC', serif;
  background: linear-gradient(90deg, #5b4062, #c4954a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mobile upgrade */
@media (max-width: 768px) {
  .hero-copy h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  .section-head h2, .product-hero h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
}