/* ═══════════════════════════════════════════════════════════════
   CreateMySong — Visual Polish Layer
   CSS-only refinements. Zero HTML/JS changes.
   Direction: Warm boutique luxury — like opening a beautiful gift card
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography refinements ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] .section-title {
  letter-spacing: -0.025em;
  text-rendering: optimizeLegibility;
}

[data-theme="light"] .hero h1 {
  text-shadow: 0 1px 2px rgba(26,20,16,0.04);
}

[data-theme="light"] .section-eyebrow {
  letter-spacing: 0.18em;
  font-weight: 700;
}

[data-theme="light"] .section-sub {
  letter-spacing: 0.005em;
}

/* ── Warm atmospheric backgrounds ── */
[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(218,168,79,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(198,134,42,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(198,134,42,0.04) 0%, transparent 50%),
    var(--bg) !important;
}

/* Warmer section band transitions */
[data-theme="light"] .section-stripe::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198,134,42,0.12) 30%, rgba(198,134,42,0.12) 70%, transparent 95%) !important;
}

[data-theme="light"] .section-stripe.stripe-warm {
  background: linear-gradient(180deg, #F7F2E9 0%, #F3EDE2 100%) !important;
}

/* ── Card refinements — softer, more premium ── */
[data-theme="light"] .step-v2 {
  border-color: rgba(198,134,42,0.08) !important;
  box-shadow: 0 1px 3px rgba(26,20,16,0.03), 0 8px 24px rgba(26,20,16,0.04) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-theme="light"] .step-v2:hover {
  border-color: rgba(198,134,42,0.15) !important;
  box-shadow: 0 2px 6px rgba(26,20,16,0.04), 0 16px 40px rgba(26,20,16,0.07) !important;
  transform: translateY(-4px) !important;
}

/* Genre cards — richer depth */
[data-theme="light"] .genre-card {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-theme="light"] .genre-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* Review cards — warm lift */
[data-theme="light"] .review-card {
  border-color: rgba(198,134,42,0.06) !important;
  box-shadow: 0 1px 2px rgba(26,20,16,0.03), 0 6px 20px rgba(26,20,16,0.04) !important;
  transition: all 0.3s ease !important;
}

[data-theme="light"] .review-card:hover {
  box-shadow: 0 2px 4px rgba(26,20,16,0.04), 0 12px 32px rgba(26,20,16,0.06) !important;
  transform: translateY(-2px);
}

/* ── Pricing section — more drama ── */
[data-theme="light"] .section-stripe.stripe-invert {
  background: linear-gradient(175deg, #130F08 0%, #1A1410 50%, #0F0D0A 100%) !important;
}

[data-theme="light"] .section-stripe.stripe-invert .price-card {
  border-color: rgba(240,232,216,0.06) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-theme="light"] .section-stripe.stripe-invert .price-card:hover {
  border-color: rgba(198,134,42,0.25) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 20px rgba(198,134,42,0.06) !important;
  transform: translateY(-5px) !important;
}

[data-theme="light"] .section-stripe.stripe-invert .price-card.featured {
  border-color: rgba(198,134,42,0.4) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 30px rgba(198,134,42,0.08), inset 0 1px 0 rgba(198,134,42,0.1) !important;
}

/* ── Button refinements — more tactile ── */
[data-theme="light"] .hero-cta {
  box-shadow: 0 4px 16px rgba(198,134,42,0.35), 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-theme="light"] .hero-cta:hover {
  box-shadow: 0 8px 28px rgba(198,134,42,0.45), 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

[data-theme="light"] .hero-cta-preview {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(255,255,255,0.5) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[data-theme="light"] .hero-cta-preview:hover {
  background: rgba(255,255,255,0.8) !important;
  box-shadow: 0 8px 28px rgba(198,134,42,0.2) !important;
}

/* Price buttons */
[data-theme="light"] .section-stripe.stripe-invert .price-btn {
  transition: all 0.25s ease !important;
}

[data-theme="light"] .section-stripe.stripe-invert .price-card.featured .price-btn {
  box-shadow: 0 4px 16px rgba(198,134,42,0.3) !important;
}

[data-theme="light"] .section-stripe.stripe-invert .price-card.featured .price-btn:hover {
  box-shadow: 0 6px 24px rgba(198,134,42,0.4) !important;
  transform: translateY(-1px);
}

/* ── Nav refinement ── */
[data-theme="light"] nav {
  border-bottom-color: rgba(198,134,42,0.06) !important;
}

/* ── Trust bar — more integrated ── */
[data-theme="light"] .trust-bar {
  border-top: 1px solid rgba(198,134,42,0.08);
  border-bottom: 1px solid rgba(198,134,42,0.08);
}

/* ── Ticker — warmer ── */
[data-theme="light"] .ticker-wrap {
  background: linear-gradient(90deg, #0F0D0A 0%, #1A1510 50%, #0F0D0A 100%) !important;
  border-top: 1px solid rgba(198,134,42,0.15) !important;
  border-bottom: 1px solid rgba(198,134,42,0.15) !important;
}

/* ── FAQ refinement ── */
[data-theme="light"] .faq-q {
  transition: color 0.25s ease !important;
}

[data-theme="light"] .faq-item {
  border-bottom-color: rgba(198,134,42,0.08) !important;
}

/* ── Footer warmth ── */
[data-theme="light"] footer {
  background: linear-gradient(180deg, var(--bg) 0%, #F0EBE0 100%) !important;
  border-top: 1px solid rgba(198,134,42,0.08) !important;
}

/* ── Subtle scroll reveal ── */
[data-theme="light"] .step-v2,
[data-theme="light"] .genre-card,
[data-theme="light"] .review-card,
[data-theme="light"] .price-card {
  animation: subtle-rise 0.6s ease both;
}

@keyframes subtle-rise {
  from { opacity: 0.85; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger the cards */
[data-theme="light"] .step-v2:nth-child(2) { animation-delay: 0.08s; }
[data-theme="light"] .step-v2:nth-child(3) { animation-delay: 0.16s; }
[data-theme="light"] .genre-card:nth-child(2) { animation-delay: 0.04s; }
[data-theme="light"] .genre-card:nth-child(3) { animation-delay: 0.08s; }
[data-theme="light"] .genre-card:nth-child(4) { animation-delay: 0.12s; }
[data-theme="light"] .review-card:nth-child(2) { animation-delay: 0.06s; }
[data-theme="light"] .review-card:nth-child(3) { animation-delay: 0.12s; }
[data-theme="light"] .price-card:nth-child(2) { animation-delay: 0.06s; }
[data-theme="light"] .price-card:nth-child(3) { animation-delay: 0.12s; }

/* ── Value comparison warm glow ── */
[data-theme="light"] .value-comparison {
  border-color: rgba(198,134,42,0.1) !important;
}

/* ── Modal refinement ── */
[data-theme="light"] .modal {
  box-shadow: 0 16px 64px rgba(26,20,16,0.12), 0 4px 16px rgba(26,20,16,0.06) !important;
}

/* ── Grain texture — very subtle ── */
[data-theme="light"] body::before {
  opacity: 0.018 !important;
}


/* ── Hero spacing — room to breathe ── */
[data-theme="light"] .hero h1 {
  margin-bottom: 3.5rem !important;
}

[data-theme="light"] .hero-pills {
  margin-bottom: 1.75rem !important;
}

@media (max-width: 640px) {
  [data-theme="light"] .hero h1 {
    margin-bottom: 2rem !important;
  }
  [data-theme="light"] .hero-pills {
    margin-bottom: 1.25rem !important;
  }
}


/* ── Hero video background ── */
[data-theme="light"] .hero > *:not(#heroVideoWrap) {
  position: relative;
  z-index: 1;
}

[data-theme="light"] #heroVideoWrap {
  z-index: 0;
}

/* Warm overlay on the video to blend with cream theme */
[data-theme="light"] #heroVideoWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,246,240,0.85) 0%, rgba(250,246,240,0.75) 40%, rgba(250,246,240,0.9) 100%);
  pointer-events: none;
}


/* ── Trust bar — more compact ── */
[data-theme="light"] .trust-bar-inner {
  padding: 1rem 2rem !important;
  gap: 0.75rem !important;
}

[data-theme="light"] .trust-num {
  font-size: 1.1rem !important;
}

[data-theme="light"] .trust-item {
  gap: 0.1rem !important;
}

[data-theme="light"] .trust-divider {
  height: 28px !important;
}

@media (max-width: 640px) {
  [data-theme="light"] .trust-bar-inner {
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  [data-theme="light"] .trust-bar-inner span {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }
  [data-theme="light"] .trust-num {
    font-size: 0.95rem !important;
  }
}


/* ── Hero section — more vertical breathing room on desktop ── */
[data-theme="light"] .hero {
  padding-top: 9rem !important;
  padding-bottom: 6rem !important;
}

@media (max-width: 640px) {
  [data-theme="light"] .hero {
    padding-top: 6rem !important;
    padding-bottom: 3.5rem !important;
  }
}


/* ── Trust bar — gold background, dark text ── */
[data-theme="light"] .trust-bar {
  background: linear-gradient(90deg, #C6862A 0%, #D9AE4F 50%, #C6862A 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .trust-bar-inner span {
  color: rgba(26,20,16,0.85) !important;
  font-weight: 600 !important;
}

/* ── Ticker bar — gold background, dark text ── */
[data-theme="light"] .ticker-wrap {
  background: linear-gradient(90deg, #C6862A 0%, #D9AE4F 50%, #C6862A 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .ticker-item,
[data-theme="light"] .ticker-item span {
  color: rgba(26,20,16,0.75) !important;
}

[data-theme="light"] .ticker-name {
  color: rgba(26,20,16,0.95) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .ticker-badge {
  background: rgba(26,20,16,0.12) !important;
  color: rgba(26,20,16,0.85) !important;
}