/* ============================================
   UNTROUBLED BRIDES - ENHANCED STYLESHEET
   ============================================
   
   TABLE OF CONTENTS:
   1. CSS Variables & Global Styles
   2. Accessibility Features
   3. Typography & Base Styles
   4. Layout Containers
   5. Animation Classes
   6. Skip Link (Accessibility)
   7. Hero Header & Navigation
   8. Hero Section
   9. Quiz Section
   10. Problem Section (Accordions)
   11. Solution Section
   12. Testimonials Section
   13. Pillars Section
   14. Products Section
   15. Shop Section
   16. Blog Section
   17. Final CTA Section
   18. Modal Styles
   19. Footer Styles
   20. Loading States
   21. Enhanced Interactions
   22. Responsive Design
   23. Animation Keyframes
   24. Print Styles
   25. Additional UX Enhancements
   ============================================ */

/* ============================================
   1. CSS VARIABLES & GLOBAL STYLES
   ============================================ */
:root {
    /* Color Palette */
    --color-cream: #FEFDFB;
    --color-sage: #728A7B;
    --color-dusty-rose: #EAD2AC;
    --color-dark-blue: #2C3E50;
    --color-gray: #6c757d;
    --color-light-gray: #f8f9fa;
    
    /* Enhanced Colors for Better Contrast */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #444444;
    --color-border: rgba(0, 0, 0, 0.1);
    
    /* Spacing System */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Typography Scale */
    --font-size-base: 1rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 50px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ============================================
   2. ACCESSIBILITY FEATURES
   ============================================ */

/* Respect user's motion preferences - critical for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-text-primary: #000000;
        --color-border: #000000;
    }
    
    .cta-button,
    .quiz-option,
    .product-button {
        border-width: 3px;
    }
}

/* Focus visible styles for keyboard navigation - WCAG 2.1 compliant */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(114, 138, 123, 0.2);
}

/* ============================================
   3. TYPOGRAPHY & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal scroll on mobile devices */
html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--color-cream);
    color: var(--color-text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Prevent font size adjustment on orientation change (iOS) */
    -webkit-text-size-adjust: 100%;
}

/* Main content should grow to push footer down */
main {
    flex-grow: 1;
}

/* Heading styles with consistent hierarchy */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

/* Improve paragraph readability */
p {
    margin-bottom: var(--spacing-sm);
    max-width: 75ch;
}

/* Link styles */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   4. LAYOUT CONTAINERS
   ============================================ */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

/* Section title and subtitle shared styles */
.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-dark-blue);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg) auto;
    color: var(--color-gray);
}

/* Common section padding */
section {
    padding: 100px 0;
    position: relative;
}

/* Grid layouts with improved responsiveness */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--spacing-md);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--spacing-md);
}

/* ============================================
   5. ANIMATION CLASSES
   ============================================ */

/* Fade in up animation for scroll reveals */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for sequential reveals */
.fade-in-up:nth-child(1) { transition-delay: 0.1s; }
.fade-in-up:nth-child(2) { transition-delay: 0.2s; }
.fade-in-up:nth-child(3) { transition-delay: 0.3s; }
.fade-in-up:nth-child(4) { transition-delay: 0.4s; }
.fade-in-up:nth-child(5) { transition-delay: 0.5s; }
.fade-in-up:nth-child(6) { transition-delay: 0.6s; }

/* ============================================
   6. SKIP LINK (ACCESSIBILITY)
   ============================================ */

/* Skip to main content link - hidden until focused (for screen readers & keyboard users) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-dark-blue);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-tooltip);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   7. HERO HEADER & NAVIGATION
   ============================================ */

/* Header that fades out on scroll */
.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-sticky);
    padding: 30px 0;
    opacity: 1;
    transition: opacity var(--transition-slow);
    pointer-events: all;
}

.hero-header.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

/* Logo styling */
.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.logo-img {
    height: 70px;
    width: auto;
    display: block;
    transition: transform var(--transition-base);
}

.logo-img:hover {
    transform: scale(1.05);
}

/* Blog button - circular floating button */
.blog-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-sage), var(--color-dark-blue));
    border-radius: 50%;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base),
                background var(--transition-base);
    box-shadow: var(--shadow-md);
}

.blog-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-sage));
}

/* Active state for button press */
.blog-button:active {
    transform: translateY(-2px) scale(1.02);
}

/* ============================================
   8. HERO SECTION
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1519220392283-1a154a42859d?q=80&w=2940&auto=format&fit=crop') no-repeat center center/cover;
    background-color: var(--color-sage);
}

/* Dark overlay for better text contrast - WCAG compliant */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-md);
}

/* Hero headings with enhanced text shadow for readability */
.hero h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    color: #ffffff;
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
                 1px 1px 3px rgba(0, 0, 0, 0.9);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

.hero p {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-lg);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    max-width: 65ch;
}

/* Primary CTA button with enhanced hover effects */
.cta-button {
    display: inline-block;
    background-color: var(--color-sage);
    color: #fff;
    padding: 15px 40px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base),
                background-color var(--transition-base);
    box-shadow: var(--shadow-lg);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
}

/* Ripple effect on hover */
.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    background-color: var(--color-dark-blue);
}

.cta-button:active {
    transform: translateY(-2px);
}

/* Subtext below CTA */
.cta-sub {
    color: rgba(255, 255, 255, 0.85);
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    font-style: italic;
}

/* ============================================
   9. QUIZ SECTION
   ============================================ */

.section-quiz {
    background-color: var(--color-light-gray);
}

.quiz-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Progress bar for quiz (can be added via JS) */
.quiz-progress {
    width: 100%;
    height: 6px;
    background-color: rgba(114, 138, 123, 0.2);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-sage), var(--color-dusty-rose));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.quiz-question h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-blue);
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

/* Quiz option buttons with enhanced interactivity */
.quiz-option {
    background: #fff;
    border: 2px solid var(--color-sage);
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-sage);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 44px;
}

.quiz-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.quiz-option:hover::before {
    left: 100%;
}

.quiz-option:hover {
    background-color: var(--color-sage);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.quiz-option:active {
    transform: translateY(-1px);
}

/* Quiz result card */
.quiz-result {
    background: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: slideIn 0.4s ease-out;
}

.quiz-result h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark-blue);
}

.quiz-result p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

#result-tools {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
}

#result-tools a {
    width: 100%;
    max-width: 350px;
}

#result-tools .cta-button {
    padding: 12px 30px;
    font-size: 1rem;
}

/* Back button for quiz */
.quiz-back-button {
    background: none;
    border: none;
    color: var(--color-gray);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-base), transform var(--transition-fast);
    padding: var(--spacing-xs) var(--spacing-sm);
    align-self: flex-start;
}

.quiz-back-button:hover {
    color: var(--color-sage);
    transform: translateX(-5px);
}

/* ============================================
   10. PROBLEM SECTION (ACCORDIONS)
   ============================================ */

.section-problem {
    background-color: #fff;
}

/* Problem cards with hover effects - more compact */
.problem-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base);
    border: 1px solid var(--color-border);
    height: fit-content;
}

.problem-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-sage);
}

.problem-card .emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    user-select: none;
}

.problem-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Accordion functionality */
.accordion-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-select: none;
    transition: opacity var(--transition-fast);
}

.accordion-header:hover {
    opacity: 0.8;
}

/* Add visual indicator for expandable accordion */
.accordion-header::after {
    content: '▼';
    font-size: 0.7rem;
    color: var(--color-sage);
    margin-top: 0.5rem;
    transition: transform var(--transition-base);
}

.accordion.active .accordion-header::after {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.accordion-content p {
    padding-top: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   11. SOLUTION SECTION
   ============================================ */

.section-solution {
    background-color: var(--color-cream);
    text-align: center;
}

.section-solution .section-subtitle {
    max-width: 900px;
    line-height: 1.8;
}

/* ============================================
   12. TESTIMONIALS SECTION (FIXED - MORE COMPACT)
   ============================================ */

.section-testimonials {
    background-color: #fff;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.testimonial-card {
    background: var(--color-light-gray);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 5px solid var(--color-dusty-rose);
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.testimonial-text {
    font-style: italic;
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    position: relative;
    padding-left: var(--spacing-md);
}

.testimonial-text::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 2.5rem;
    color: var(--color-dusty-rose);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.testimonial-author img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--color-sage);
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-author h4 {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
    color: var(--color-dark-blue);
}

.testimonial-author p {
    font-size: 0.8rem;
    color: var(--color-gray);
    margin: 0;
}

/* ============================================
   13. PILLARS SECTION
   ============================================ */

.section-pillars {
    background-color: var(--color-cream);
}

/* Custom grid specifically for pillars - 3 columns on large screens */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pillar-card {
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-base);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-sage);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.pillar-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-sage);
    line-height: 1.3;
}

.pillar-card p {
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;
    max-width: 35ch;
}

/* ============================================
   14. PRODUCTS SECTION
   ============================================ */

.section-products {
    background-color: #fff;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--spacing-lg);
}

.product-card {
    background: linear-gradient(145deg, 
                rgba(234, 210, 172, 0.15), 
                rgba(114, 138, 123, 0.15));
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-sage);
    text-align: center;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.product-card h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-blue);
}

.product-card p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
    line-height: 1.7;
    flex-grow: 1;
}

/* Product buttons with ripple effect */
.product-button {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    background-color: transparent;
    color: var(--color-sage);
    padding: 12px 30px;
    border: 2px solid var(--color-sage);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-base), 
                color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    text-align: center;
    flex-shrink: 0;
}

.product-button + .product-button {
    margin-top: 15px;
}

.product-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(114, 138, 123, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.product-button:hover::before {
    width: 300px;
    height: 300px;
}

.product-button:hover {
    background-color: var(--color-sage);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.product-button:active {
    transform: translateY(0);
}

/* ============================================
   15. SHOP SECTION
   ============================================ */

.section-shop {
    background-color: var(--color-cream);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: var(--spacing-md);
}

.shop-card {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base);
}

.shop-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

/* Gradient overlay for better text readability */
.shop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
    transition: background var(--transition-base);
}

.shop-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.shop-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-lg);
    z-index: 2;
    color: #fff;
    text-align: center;
    transform: translateY(0);
    transition: transform var(--transition-base);
}

.shop-card:hover .shop-card-content {
    transform: translateY(-10px);
}

.shop-card-content h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xs);
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.shop-card-content p {
    margin-bottom: var(--spacing-md);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.shop-button {
    display: inline-block;
    background-color: var(--color-sage);
    color: #fff;
    padding: 12px 30px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
    border: 2px solid transparent;
    min-height: 44px;
    min-width: 44px;
}

.shop-button:hover {
    background-color: #fff;
    color: var(--color-dark-blue);
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* ============================================
   16. BLOG SECTION
   ============================================ */

.section-blog {
    background-color: #fff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--spacing-md);
}

.blog-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    border: 1px solid var(--color-border);
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-sage);
}

.blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card:hover img {
    transform: scale(1.1);
}

.blog-content {
    padding: var(--spacing-md);
}

.blog-content h3 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-dark-blue);
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.blog-link {
    color: var(--color-sage);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.blog-link:hover {
    color: var(--color-dark-blue);
    gap: 10px;
}

/* ============================================
   17. FINAL CTA SECTION
   ============================================ */

.section-final-cta {
    background: linear-gradient(135deg, var(--color-dark-blue), #1a2633);
    color: #fff;
    text-align: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.section-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(114, 138, 123, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(234, 210, 172, 0.1) 0%, transparent 50%);
    z-index: 0;
}

.section-final-cta .container {
    position: relative;
    z-index: 1;
}

.section-final-cta .section-title {
    color: #fff;
}

.section-final-cta .section-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.section-final-cta .cta-button {
    background-color: var(--color-dusty-rose);
    color: var(--color-dark-blue);
    font-size: 1.2rem;
    padding: 18px 45px;
}

.section-final-cta .cta-button:hover {
    background-color: #fff;
    transform: translateY(-5px) scale(1.05);
}

/* ============================================
   18. MODAL STYLES
   ============================================ */

.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s ease;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 700px;
    position: relative;
    animation: slideIn 0.4s ease;
    box-shadow: var(--shadow-xl);
}

.modal-close {
    color: var(--color-gray);
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: color var(--transition-fast), transform var(--transition-fast);
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    color: var(--color-dark-blue);
    transform: rotate(90deg);
    background-color: var(--color-light-gray);
}

.modal h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-blue);
}

.modal img {
    width: 100%;
    border-radius: var(--radius-sm);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-sm);
}

.modal p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ============================================
   19. FOOTER STYLES
   ============================================ */

.main-footer {
    background-color: var(--color-dark-blue);
    color: #fff;
    padding: 30px 0 20px;
    border-top: 3px solid var(--color-sage);
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-left p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.footer-center {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.footer-icon {
    color: rgba(255, 255, 255, 0.8);
    transition: color var(--transition-base), transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
}

.footer-icon:hover {
    color: var(--color-dusty-rose);
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.2);
}

.footer-icon svg {
    width: 20px;
    height: 20px;
}

.footer-right {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-base);
    position: relative;
    padding-bottom: 2px;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-dusty-rose);
    transition: width var(--transition-base);
}

.footer-link:hover {
    color: var(--color-dusty-rose);
}

.footer-link:hover::after {
    width: 100%;
}

/* ============================================
   20. LOADING STATES
   ============================================ */

/* Loading state for buttons and interactive elements */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading for content */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-light-gray) 25%,
        #e0e0e0 50%,
        var(--color-light-gray) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   21. ENHANCED INTERACTIONS
   ============================================ */

/* Smooth scroll padding to account for fixed headers */
html {
    scroll-padding-top: 100px;
}

/* Selection color customization */
::selection {
    background-color: var(--color-sage);
    color: #fff;
}

::-moz-selection {
    background-color: var(--color-sage);
    color: #fff;
}

/* Custom scrollbar styles (WebKit browsers) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--color-sage);
    border-radius: 6px;
    border: 2px solid var(--color-light-gray);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark-blue);
}

/* Improve form input styles */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-sage);
    box-shadow: 0 0 0 4px rgba(114, 138, 123, 0.1);
}

/* Disabled state */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   22. RESPONSIVE DESIGN
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 1024px) {
    :root {
        --spacing-lg: 3rem;
        --spacing-xl: 4rem;
    }
    
    section {
        padding: 80px 0;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    :root {
        --spacing-md: 1.5rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
    
    /* Prevent text zoom on iOS when form inputs are focused */
    body {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Hero adjustments */
    .hero {
        min-height: 100svh;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero h2 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    /* Header adjustments */
    .hero-header {
        padding: 15px 0;
    }
    
    .logo-img {
        height: 50px;
    }
    
    .blog-button {
        width: 60px;
        height: 60px;
        font-size: 0.85rem;
    }
    
    /* Grid adjustments */
    .product-grid,
    .shop-grid,
    .testimonials-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-2,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    /* Quiz adjustments */
    .quiz-options {
        grid-template-columns: 1fr;
    }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: var(--spacing-md);
    }
    
    /* Section padding */
    section {
        padding: 60px 0;
    }
    
    /* Footer stack vertically on mobile */
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .footer-center,
    .footer-right {
        justify-content: center;
    }
    
    /* Shop card height adjustment */
    .shop-card {
        height: 350px;
    }
    
    /* Reduce card padding on mobile */
    .problem-card,
    .product-card {
        padding: var(--spacing-md);
    }
    
    /* Testimonials - single column, compact */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-card {
        padding: var(--spacing-sm);
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
    
    /* Pillars - compact on mobile */
    .pillars-grid {
        grid-template-columns: 1fr;
    }
    
    .pillar-card {
        padding: var(--spacing-sm);
    }
    
    .pillar-card h3 {
        font-size: 1.2rem;
    }
    
    .pillar-card p {
        font-size: 0.9rem;
    }
    
    /* Problem cards - compact on mobile */
    .problem-card {
        padding: var(--spacing-md);
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero h1 {
        font-size: 1.75rem;
    }
    
    .cta-button {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    /* Even more compact on very small screens */
    .testimonial-card {
        padding: 1rem;
    }
    
    .testimonial-text {
        font-size: 0.9rem;
        padding-left: 1rem;
    }
    
    .testimonial-text::before {
        font-size: 2rem;
        top: -8px;
    }
    
    .testimonial-author img {
        width: 40px;
        height: 40px;
    }
    
    .pillar-card {
        padding: 1rem;
    }
    
    .pillar-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .pillar-card p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .problem-card {
        padding: 1rem;
    }
    
    .problem-card .emoji {
        font-size: 2rem;
    }
    
    .problem-card h3 {
        font-size: 1.1rem;
    }
}

/* Landscape phone orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 60px 0;
    }
    
    section {
        padding: 40px 0;
    }
}

/* Large desktop adjustments */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    
    /* Keep testimonials at max 3 columns even on very large screens */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Pillars stay at 3 columns with limited width */
    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
    }
}

/* Extra large screens */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }
}

/* ============================================
   23. ANIMATION KEYFRAMES
   ============================================ */

/* Fade in animation for modals and overlays */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide in from top animation */
@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide in from bottom animation */
@keyframes slideInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse animation for attention-grabbing elements */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Rotate animation for loading spinners */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bounce animation for scroll indicators */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ============================================
   24. PRINT STYLES
   ============================================ */

@media print {
    /* Hide non-essential elements when printing */
    .hero-header,
    .blog-button,
    .cta-button,
    .modal,
    .main-footer,
    .quiz-container,
    .section-shop,
    .section-products {
        display: none !important;
    }
    
    /* Optimize print layout */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    /* Prevent page breaks inside elements */
    .testimonial-card,
    .blog-card,
    .problem-card {
        page-break-inside: avoid;
    }
    
    /* Add page breaks before major sections */
    section {
        page-break-before: always;
        padding: 20px 0;
    }
    
    section:first-of-type {
        page-break-before: avoid;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
    
    /* Don't show URLs for internal links */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
}

/* ============================================
   25. ADDITIONAL UX ENHANCEMENTS
   ============================================ */

/* FLOATING CTA BUTTON */
.floating-cta {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: var(--z-fixed);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(100px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.floating-cta.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.floating-cta .cta-button {
    padding: 20px 14px;
    font-size: 0.9rem;
    box-shadow: var(--shadow-xl);
    animation: pulse-float 2s infinite;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    letter-spacing: 0.05em;
}

@keyframes pulse-float {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: var(--shadow-xl);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    }
}

/* SCROLL TO TOP BUTTON */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--color-sage);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    background: var(--color-dark-blue);
    box-shadow: var(--shadow-xl);
}

.scroll-to-top:active {
    transform: translateY(-2px);
}

/* Enhanced accordion visual indicator */
.accordion {
    transition: all var(--transition-base);
}

.accordion.active {
    border-color: var(--color-sage);
    box-shadow: var(--shadow-md);
}

.accordion.active .accordion-header {
    color: var(--color-sage);
}

.accordion-header {
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.accordion-header::after {
    content: '▼';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--color-sage);
    transition: transform var(--transition-base);
}

.accordion.active .accordion-header::after {
    transform: translateX(-50%) rotate(180deg);
}

/* Enhanced quiz - loading state */
.quiz-option {
    position: relative;
    overflow: hidden;
}

.quiz-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.quiz-option:hover::before {
    left: 100%;
}

/* Loading state for quiz */
.quiz-option.loading {
    pointer-events: none;
    position: relative;
}

.quiz-option.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Enhanced product cards - whole block clickable */
.product-card {
    cursor: pointer;
    transition: all var(--transition-base);
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-xl);
}

/* Modal - enhanced animation */
.modal {
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.modal-content {
    animation: slideInModal 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes slideInModal {
    from {
        transform: translateY(-100px) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Enhanced modal close button */
.modal-close {
    transition: all var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    background-color: var(--color-light-gray);
    transform: rotate(90deg);
}

/* Hero - enhanced contrast on mobile */
@media (max-width: 768px) {
    .hero::before {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.65) 50%,
            rgba(0, 0, 0, 0.8) 100%
        );
    }
    
    .floating-cta {
        top: auto;
        bottom: 70px;
        right: 10px;
        transform: translateY(100px);
    }
    
    .floating-cta.visible {
        transform: translateY(0);
    }
    
    .floating-cta .cta-button {
        padding: 10px 20px;
        font-size: 0.85rem;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        border-radius: var(--radius-full);
    }
    
    .scroll-to-top {
        bottom: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .floating-cta .cta-button {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    
    .scroll-to-top {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        bottom: 10px;
    }
}

/* FOCUS VISIBLE - enhanced accessibility */
.scroll-to-top:focus-visible,
.floating-cta .cta-button:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(114, 138, 123, 0.2);
}

/* Quiz result animation */
#quiz-result {
    animation: slideInUp 0.5s ease;
}

/* Enhanced "Back" button in quiz */
.quiz-back-button {
    transition: all var(--transition-base);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.quiz-back-button:hover {
    background-color: var(--color-light-gray);
    transform: translateX(-5px);
    color: var(--color-sage);
}

/* Smooth scroll with header offset */
html {
    scroll-padding-top: 20px;
}

/* Enhanced typography for long texts */
p {
    text-rendering: optimizeLegibility;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.fade-in-up {
    will-change: opacity, transform;
}

/* Performance optimization */
.hero,
.floating-cta,
.scroll-to-top {
    will-change: transform;
}

/* Print - hide floating elements */
@media print {
    .floating-cta,
    .scroll-to-top {
        display: none !important;
    }
}

/* ============================================
   26. DECORATIVE WEDDING ELEMENTS
   ============================================ */

/* Decorative dividers between sections */
.section-title::before,
.section-title::after {
    content: '✦';
    display: inline-block;
    margin: 0 15px;
    color: var(--color-dusty-rose);
    font-size: 0.6em;
    opacity: 0.7;
}

/* Elegant floral corners for hero section */
.hero-content::before,
.hero-content::after {
    content: '❦';
    position: absolute;
    font-size: 3rem;
    color: rgba(234, 210, 172, 0.3);
    z-index: 1;
}

.hero-content::before {
    top: 20px;
    left: 20px;
    transform: rotate(-15deg);
}

.hero-content::after {
    bottom: 20px;
    right: 20px;
    transform: rotate(15deg);
}

/* Subtle floral pattern background for alternating sections */
.section-quiz::before,
.section-testimonials::before,
.section-pillars::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    background-image: 
        radial-gradient(circle at 20% 20%, var(--color-sage) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--color-dusty-rose) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* Decorative hearts for testimonials */
.testimonial-card::before {
    content: '♥';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--color-dusty-rose);
    opacity: 0.3;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.testimonial-card:hover::before {
    opacity: 0.6;
    transform: scale(1.2);
}

.testimonial-card {
    position: relative;
}

/* Elegant borders with corner decorations */
.product-card::before,
.product-card::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-dusty-rose);
    opacity: 0.4;
    transition: opacity var(--transition-base);
}

.product-card::before {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

.product-card::after {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

.product-card:hover::before,
.product-card:hover::after {
    opacity: 0.8;
}

.product-card {
    position: relative;
}

/* Floating petals animation */
@keyframes float-petal {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

.section-solution::after,
.section-final-cta::after {
    content: '✿';
    position: absolute;
    font-size: 2rem;
    color: var(--color-dusty-rose);
    opacity: 0.2;
    animation: float-petal 6s ease-in-out infinite;
    pointer-events: none;
}

.section-solution::after {
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.section-final-cta::after {
    top: 20%;
    left: 10%;
    animation-delay: 2s;
}

/* Decorative line under hero title */
.hero h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-dusty-rose),
        transparent
    );
    margin: 15px auto 0;
    opacity: 0.6;
}

/* Elegant blog card ribbon */
.blog-card::before {
    content: '✦';
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: var(--color-sage);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.blog-card:hover::before {
    opacity: 1;
}

.blog-card {
    position: relative;
}

/* Decorative separator lines */
.section-problem::before,
.section-products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-dusty-rose),
        transparent
    );
    opacity: 0.5;
}

/* Delicate corner flourishes for quiz */
.quiz-container::before,
.quiz-container::after {
    content: '✿';
    position: absolute;
    font-size: 2.5rem;
    color: var(--color-sage);
    opacity: 0.15;
}

.quiz-container::before {
    top: -30px;
    left: -30px;
}

.quiz-container::after {
    bottom: -30px;
    right: -30px;
    transform: rotate(180deg);
}

.quiz-container {
    position: relative;
}

/* Sparkle effect on CTA buttons */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.cta-button::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1rem;
    animation: sparkle 2s ease-in-out infinite;
    pointer-events: none;
}

/* Elegant shop card frame */
.shop-card::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 2;
    transition: border-color var(--transition-base);
}

.shop-card:hover::after {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Romantic pillar card decoration */
.pillar-card::before {
    content: '•';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--color-sage);
    opacity: 0.2;
}

.pillar-card {
    position: relative;
}

/* Footer decorative top border */
.main-footer::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-dusty-rose),
        var(--color-sage),
        var(--color-dusty-rose),
        transparent
    );
}

.main-footer {
    position: relative;
}

/* Accordion decorative element */
.accordion.active::before {
    content: '❀';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: var(--color-sage);
    opacity: 0.3;
    animation: float-petal 4s ease-in-out infinite;
}

/* Mobile adjustments for decorative elements */
@media (max-width: 768px) {
    .hero-content::before,
    .hero-content::after {
        font-size: 2rem;
    }
    
    .hero-content::before {
        top: 10px;
        left: 10px;
    }
    
    .hero-content::after {
        bottom: 10px;
        right: 10px;
    }
    
    .section-title::before,
    .section-title::after {
        margin: 0 8px;
        font-size: 0.5em;
    }
    
    .quiz-container::before,
    .quiz-container::after {
        display: none;
    }
    
    .product-card::before,
    .product-card::after {
        width: 20px;
        height: 20px;
    }
    
    .product-card::before {
        top: 10px;
        left: 10px;
    }
    
    .product-card::after {
        bottom: 10px;
        right: 10px;
    }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .section-solution::after,
    .section-final-cta::after,
    .accordion.active::before {
        animation: none;
    }
    
    .cta-button::after {
        animation: none;
        opacity: 0.5;
    }
}

/* ============================================
   END OF DECORATIVE ELEMENTS
   ============================================ */
/* EMERGENCY FIX - добавить в самый конец файла */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.product-card > * {
    width: 100% !important;
}

.product-card button,
.product-card a {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-card button + button,
.product-card button + a,
.product-card a + button,
.product-card a + a {
    margin-top: 15px !important;
}

/* ============================================
   SIMPLE PRODUCT SECTION STYLES
   Add this to the end of your style.css file
   ============================================ */

/* Simple Product Card */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 1.5rem;
}

.product-card h3 {
    margin-bottom: 0.5rem;
}

/* Price Badge */
.product-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, var(--color-sage), var(--color-dark-blue));
    border-radius: var(--radius-md);
    color: white;
    box-shadow: var(--shadow-md);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.product-price::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Cormorant Garamond', Georgia, serif;
    line-height: 1;
}

.price-label {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.95;
}

/* Product Description */
.product-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Peek Inside Link - Elegant inline link */
.peek-inside-link {
    color: var(--color-sage);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-sage);
    transition: all var(--transition-fast);
    padding-bottom: 2px;
    cursor: pointer;
}

.peek-inside-link:hover {
    color: var(--color-dark-blue);
    border-bottom-color: var(--color-dark-blue);
    padding-bottom: 4px;
}

/* Main CTA Button - BIG with arrow */
.product-button-primary {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 20px 40px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-sage), var(--color-dark-blue));
    color: white;
    box-shadow: var(--shadow-lg);
    border: none;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
}

.product-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-sage));
}

.product-button-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.product-button-primary:hover::before {
    width: 500px;
    height: 500px;
}

.product-button-primary:active {
    transform: translateY(-1px);
}

/* Etsy line - simple one-liner */
.etsy-line {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-gray);
}

.etsy-link {
    color: #0066cc;
    text-decoration: underline;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.etsy-link:hover {
    color: #004499;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .product-price {
        padding: 1rem 2rem;
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
    
    .price-label {
        font-size: 0.8rem;
    }
    
    .product-button-primary {
        font-size: 1.1rem;
        padding: 16px 32px;
        max-width: 100%;
    }
    
    .product-description {
        font-size: 0.95rem;
    }
    
    .etsy-line {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .price-amount {
        font-size: 2rem;
    }
    
    .product-button-primary {
        font-size: 1rem;
        padding: 14px 28px;
    }
}

/* Accessibility */
.product-button-primary:focus-visible,
.peek-inside-link:focus-visible,
.etsy-link:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
}