/* SCROLL HOME COLOR SYSTEM - SIMPLE AND FIXED */
/* Created: October 9, 2025 */
/* NEVER CHANGE THESE RULES */

/* ================================
   NAVIGATION - Always white text on dark/transparent
   ================================ */
nav {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

nav a,
nav span,
nav button {
    color: #ffffff;
}

nav .gold-gradient-text {
    background: linear-gradient(135deg, #F0D98D 0%, #D4AF37 50%, #B8941F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   HERO SECTION - Always white text on dark gradient
   ================================ */
.hero-section {
    background: linear-gradient(135deg, #000000 0%, #0f1621 100%);
    color: #ffffff;
}

.hero-section h1,
.hero-section p,
.hero-section a {
    color: #ffffff;
}

.hero-section .gold-gradient-text {
    background: linear-gradient(135deg, #F0D98D 0%, #D4AF37 50%, #B8941F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   CONTENT SECTIONS - Always black text on white
   ================================ */
.problem-section,
.solution-section,
.features-section,
.how-it-works-section,
.pricing-section {
    background: #ffffff;
    color: #000000;
}

/* ================================
   PRICING SECTION SPECIFIC - Fix contrast issues
   ================================ */
.pricing-section {
    background: #ffffff !important;
}

.pricing-section h2,
.pricing-section h3,
.pricing-section h4,
.pricing-section p,
.pricing-section li,
.pricing-section span:not(.gold-gradient-text),
.pricing-section div:not([class*="gradient"]) {
    color: #000000 !important;
}

/* DIY Plan Card - Gold gradient background needs white text */
.pricing-section [class*="from-gold"],
.pricing-section [class*="to-yellow"] {
    color: #ffffff !important;
}

.pricing-section [class*="from-gold"] *,
.pricing-section [class*="to-yellow"] * {
    color: #ffffff !important;
}

/* Diwali Banner - Orange/red gradient needs white text */
.pricing-section [class*="from-orange"],
.pricing-section [class*="to-red"] {
    color: #ffffff !important;
}

.pricing-section [class*="from-orange"] *,
.pricing-section [class*="to-red"] * {
    color: #ffffff !important;
}

.social-proof-section {
    background: #f9fafb;
    color: #000000;
}

.problem-section h2,
.problem-section div,
.problem-section p,
.solution-section h2,
.solution-section div,
.solution-section p,
.features-section h2,
.features-section h3,
.features-section p,
.how-it-works-section h2,
.how-it-works-section h3,
.how-it-works-section p,
.pricing-section h2,
.pricing-section h3,
.pricing-section p,
.social-proof-section h2,
.social-proof-section h3,
.social-proof-section p {
    color: #000000;
}

/* Feature cards - white background, black text */
.features-section .bg-white {
    background: #ffffff;
}

.features-section .bg-white h3,
.features-section .bg-white p {
    color: #000000;
}

/* Demo preview box */
.solution-section .bg-gray-100,
.solution-section .bg-white {
    background: #ffffff;
}

.solution-section .bg-gray-100 div,
.solution-section .bg-white div,
.solution-section .bg-gray-100 p,
.solution-section .bg-white p {
    color: #000000;
}

/* ================================
   FOOTER - Always white text on dark
   ================================ */
footer {
    background: #1a1a1a;
    color: #ffffff;
}

footer span,
footer p,
footer a {
    color: #ffffff;
}

footer a:hover {
    color: #D4AF37;
}

footer .gold-gradient-text {
    background: linear-gradient(135deg, #F0D98D 0%, #D4AF37 50%, #B8941F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   SPECIAL ELEMENTS
   ================================ */

/* Gold gradient text - always gold */
.gold-gradient-text {
    background: linear-gradient(135deg, #F0D98D 0%, #D4AF37 50%, #B8941F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.bg-gold {
    background: #D4AF37;
    color: #ffffff;
}

.bg-gold:hover {
    background: #F0D98D;
}

/* Material icons - inherit parent color */
.material-symbols-outlined {
    color: inherit;
}

/* Gold icons */
.text-gold,
.material-symbols-outlined.text-gold {
    color: #D4AF37;
}