/* 
   EPIC OVERHAUL - CINEMATIC 3D INTERACTIVE THEME
   Based on "AyunoFit" Identity (Turquoise) but Elevated to "Cosmos Premium" 
*/

:root {
    /* Core Palette - Preserved but Adapted for Dark Mode Bloom */
    --primary-color: #00dafe;
    /* Slighly brighter turquoise for glow on dark */
    --primary-deep: #009bb0;
    --primary-glow: rgba(0, 218, 254, 0.6);

    /* Cinematic Dark Theme */
    --bg-deep: #050a14;
    --bg-cosmos: radial-gradient(circle at 50% 50%, #1a2c3d 0%, #050a14 100%);

    /* Text */
    --text-main: #ffffff;
    --text-muted: #b0c4de;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    /* Ultra subtle */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(0, 196, 180, 0.1);

    /* 3D Depth */
    --depth-z: 10px;
    --font-main: 'Outfit', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    /* Disable standard tap highlight to use our custom one */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background: var(--bg-deep);
    background-image: var(--bg-cosmos);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    perspective: 1000px;
    /* Enable 3D space */
}

/* --- 5. EPIC STARRY BACKGROUND (CSS Only) --- */
/* Creating stars via multiple box-shadow layers for performance */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow:
        10vw 20vh 0px 0px #fff, 30vw 80vh 1px 0px #fff,
        70vw 10vh 0px 0px #fff, 90vw 50vh 1px 0px #fff,
        40vw 40vh 0px 0px rgba(255, 255, 255, 0.8), 60vw 90vh 1px 0px #fff,
        20vw 60vh 0px 0px rgba(255, 255, 255, 0.6), 80vw 30vh 1px 0px #fff,
        50vw 10vh 0px 0px #fff, 10vw 90vh 1px 0px rgba(255, 255, 255, 0.7);
    animation: starsDefault 100s linear infinite;
    z-index: -2;
    opacity: 0.6;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        15vw 15vh 1px 0px rgba(0, 218, 254, 0.4), 85vw 25vh 2px 0px rgba(0, 218, 254, 0.3),
        35vw 75vh 1px 0px rgba(0, 218, 254, 0.5), 65vw 55vh 2px 0px rgba(0, 218, 254, 0.4);
    animation: starsParallax 150s linear infinite;
    z-index: -1;
}

@keyframes starsDefault {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

@keyframes starsParallax {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50vh);
    }
}


/* --- LAYOUT & CONTAINER --- */
#app {
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Remove solid white */
    box-shadow: none;
}

/* Header - Floating Glass */
#main-header {
    padding: 20px 24px;
    background: rgba(5, 10, 20, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-weight: 800;
    font-size: 26px;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px var(--primary-glow);
    animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Progress Bar - Glowing Neon */
.progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 12px;
}

.progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--primary-color);
    position: relative;
}

.progress-bar::after {
    content: "";
    /* Shimmer effect on bar */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: translateX(-100%);
    animation: barShimmer 2s infinite;
}

@keyframes barShimmer {
    100% {
        transform: translateX(100%);
    }
}


#quiz-container {
    flex: 1;
    padding: 30px 20px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    perspective: 1000px;
}

/* --- TYPOGRAPHY 3D & MOTION --- */
h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Motion Type: Reveal */
    animation: textReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform-origin: center bottom;
}

h2 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 30px;
    color: var(--text-muted);
    text-align: center;
    animation: textAppear 1s ease forwards 0.2s;
    opacity: 0;
    /* logic handles fill */
}

.copy-text {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-muted);
    font-size: 17px;
    animation: textAppear 1s ease forwards 0.2s;
    opacity: 0;
}

@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) rotateX(10deg);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

@keyframes textAppear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3. 3D CARDS & OPTIONS (Micro-interactions) --- */
.options-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

.grid-2-cols {
    grid-template-columns: 1fr 1fr;
}

.option-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    /* Epic rounded */
    padding: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy spring */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Hover Effect: Expansion + Reflection */
.option-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--glass-highlight);
    box-shadow: 0 15px 35px rgba(0, 196, 180, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.option-card::before {
    /* Mobile Reflection */
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
    pointer-events: none;
}

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

/* Active Click Effect (3D Sink) */
.option-card:active {
    transform: scale(0.95) rotateX(5deg);
    transition: 0.1s;
}

/* Selected State */
.option-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 218, 254, 0.15);
    box-shadow: 0 0 20px var(--primary-glow);
}

.option-card.selected .option-label {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 218, 254, 0.5);
}

.option-label {
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    transition: color 0.3s;
}

/* Images in Cards (Parallax feel) */
.option-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: transform 0.5s ease;
}

.option-card:hover .option-image {
    transform: scale(1.05);
}

/* Grid Specifics (Portrait Photos) */
.options-grid.grid-2-cols .option-card {
    padding: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    /* Darker glass for images */
}

.options-grid.grid-2-cols .option-image {
    height: 320px;
    margin-bottom: 0;
    border-radius: 0;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.options-grid.grid-2-cols .option-content {
    padding: 16px;
    width: 100%;
    align-items: center;
    background: transparent;
    border-top: none;
}

.options-grid.grid-2-cols .option-label {
    text-align: center;
    font-size: 18px;
}


/* --- 1. EPIC BUTTONS (Interactions) --- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-deep) 100%);
    color: #000;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    cursor: pointer;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 218, 254, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Bloom/Glow on Hover */
.btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 218, 254, 0.5), 0 0 20px var(--primary-color) inset;
}

/* Click Press 3D */
.btn-primary:active {
    transform: translateY(2px) scale(0.96);
    box-shadow: 0 5px 15px rgba(0, 218, 254, 0.2);
}

/* Ripple Effect (Managed within button logic or CSS pseudo) */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s, opacity 0.6s;
    pointer-events: none;
}

.btn-primary:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: 0s;
}


/* --- SLIDERS (Particles embedded visually) --- */
.slider-container {
    padding: 40px 0;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    margin-top: -12px;
    box-shadow: 0 0 20px var(--primary-color);
    transition: transform 0.2s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}


/* --- TRANSITION ANIMATIONS --- */
.fade-in-epic {
    animation: enterScene 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes enterScene {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(40px) rotateX(10deg);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}


/* --- Image 3D Wrappers --- */
.hero-image-container,
.side-image-container,
.split-image-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateZ(0);
    /* Hardware accel */
    transition: transform 0.1s linear;
    /* Smooth tilt */
}

.hero-image,
.side-image {
    width: 100%;
    border-radius: 12px;
    display: block;
}


/* --- Checkbox Styling 2.0 --- */
.checkbox-container {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.option-card.selected .checkbox-container {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    transform: scale(1.1) rotate(5deg);
    /* Juicy selection */
}

/* --- Sales Page Adaptations (Dark) --- */
.sales-page-container {
    color: #edf2f7;
}

.sales-logo {
    text-align: center;
}

/* Already handled generically */
.sales-title {
    color: white;
    text-align: center;
    font-size: 28px;
    line-height: 1.3;
    margin-top: 20px;
}

.how-it-works-box,
.plan-includes-section,
.guarantee-box,
.offer-box {
    background: rgba(255, 255, 255, 0.05);
    /* Glass dark */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
}

.feature-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.price-container {
    color: #fff;
    text-align: center;
}

.new-price {
    font-size: 48px;
    color: var(--primary-color);
    font-weight: 800;
    text-shadow: 0 0 20px var(--primary-glow);
}

/* Remove old helpers */
.hidden {
    display: none !important;
}

.btn-offer {
    /* Inherit Epic Button Styles */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* Green specific for sales? User said "exact tones", usually sales is Green/Primary. Keeping greenish for distinction or Primary? Let's use Primary for consistency with "epic" theme */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-deep) 100%);
    color: black;
    border: none;
    padding: 18px;
    border-radius: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 218, 254, 0.4);
    animation: pulseOffer 2s infinite;
}

@keyframes pulseOffer {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 218, 254, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 218, 254, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 218, 254, 0);
    }
}

/* Info Steps content override for text color */
.info-content p,
.info-content h2,
.info-content h3 {
    color: #e2e8f0 !important;
    /* Force light text override inline styles if any */
}

/* Specific Utilities */
.option-card.simple-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.option-card.simple-pill:hover {
    background: rgba(255, 255, 255, 0.15);
}

.option-card.horizontal .option-content {
    align-items: center;
    /* Centralize Text */
}

.option-icon {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* Fix Hero/Split Layout - Side by Side on Mobile too per request */
.split-content-row {
    display: flex;
    flex-direction: row;
    /* Force Row */
    gap: 12px;
    align-items: center;
    /* Center align items */
}

.side-image-container {
    width: 40%;
    /* Reduced width */
    margin-bottom: 0;
    flex-shrink: 0;
}

.side-options-container {
    flex: 1;
}

@media (min-width: 768px) {
    .split-content-row {
        gap: 24px;
    }

    .side-image-container {
        width: 45%;
    }
}

/* PARTICLE SYSTEM CONTAINER */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: popParticle 0.8s ease-out forwards;
}

@keyframes popParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* --- END EPIC CSS --- */

/* --- FIX: RE-ADD MISSING HELPERS FOR SPECIFIC LAYOUTS --- */

/* Horizontal List with Right Image (Unified) */
.option-card.right-image-layout {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 20px;
    /* Reduced vertical padding for tighter look */
    align-items: center;
    min-height: 100px;
}

/* Large Square Image (List - Goal Step) */
.option-card.right-image-layout .option-image-large {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    margin-left: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Circle Image (List Horizontal) */
.option-image-circle {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    /* Circle */
    margin-right: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Grid Horizontal (Current Size - Half/Half) */
.options-grid.grid-horizontal .option-card {
    flex-direction: row;
    padding: 0;
    height: auto;
    min-height: 90px;
    overflow: hidden;
}

.options-grid.grid-horizontal .option-content {
    flex: 1;
    padding-left: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    border-top: none;
}

.options-grid.grid-horizontal .option-image-half {
    width: 40%;
    /* Slightly smaller than 50% for better balance */
    height: 100%;
    min-height: 90px;
    object-fit: cover;
    object-position: top center;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-bottom: 0;
}

/* --- EPIC TESTIMONIAL CARD --- */
.testimonial-card-epic {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

/* Subtle glow effect on top */
.testimonial-card-epic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.testimonial-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 16px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 218, 254, 0.3);
}

.testimonial-info {
    display: flex;
    flex-direction: column;
}

.testimonial-name {
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.stars {
    font-size: 14px;
    margin-bottom: 2px;
    filter: drop-shadow(0 0 5px rgba(255, 200, 0, 0.5));
}

.testimonial-text {
    color: #e2e8f0;
    /* Light gray text for readability */
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.9;
}

/* Fix for Grid 2 Cols Horizontal specific override */
.options-grid.grid-2-cols.grid-horizontal .option-card {
    flex-direction: row;
    /* Override column direction */
}

.options-grid.grid-2-cols.grid-horizontal .option-image {
    display: none;
    /* Hide standard image */
}

/* --- EPIC FOOD PREFERENCES (Un-cramping) --- */
.section-title {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 218, 254, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.options-grid.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Increased gap from default */
}

/* Specific styling for the simple pill options (Food Prefs) */
.option-card.simple-pill {
    background: rgba(255, 255, 255, 0.05);
    /* Lighter glass */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 16px 12px;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    text-align: center;
    min-height: 60px;
    /* Taller touch target */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.option-card.simple-pill .option-content {
    align-items: center;
    /* Ensure text is centered */
    justify-content: center;
    padding: 0;
    width: 100%;
}

.option-card.simple-pill .option-label {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
}

.option-card.simple-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.option-card.simple-pill.selected {
    background: rgba(0, 218, 254, 0.2);
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 218, 254, 0.4);
}

/* --- EPIC INFO CARD (Career Impact / General Info) --- */
.epic-info-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 24px 20px;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.epic-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
}

.epic-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    text-align: center;
}

.epic-text .highlight {
    color: var(--primary-color);
    font-weight: 700;
    text-shadow: 0 0 15px rgba(0, 218, 254, 0.4);
}
}

/* --- EPIC WARNING CARD (BMI Result) --- */
.epic-warning-card {
    background: rgba(254, 252, 232, 0.05);
    /* Very subtle yellow tint glass */
    border: 1px solid rgba(234, 179, 8, 0.3);
    /* Golden border */
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    text-align: left;
    margin-top: 10px;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
}

.warning-title {
    color: #facc15;
    /* Bright gold/yellow */
    font-size: 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.warning-text {
    color: #fefce8;
    /* Very light yellow/white text */
    font-size: 15px;
    line-height: 1.6;
}

.highlight-warning {
    color: #facc15;
    font-weight: 700;
    border-bottom: 1px dashed rgba(250, 204, 21, 0.5);
}

/* --- EPIC GRAPH CARD (Projection) --- */
.epic-graph-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 24px 16px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.epic-graph-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #fff 0%, #a5f3fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.epic-projection-box {
    background: linear-gradient(90deg, rgba(0, 218, 254, 0.1) 0%, rgba(0, 218, 254, 0.05) 100%);
    border: 1px solid rgba(0, 218, 254, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.projection-text {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
}

/* --- EPIC LOADING SCREEN --- */
.epic-loading-container {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.epic-loader-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 30px;
}

.epic-loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 218, 254, 0.2);
    animation: spin-epic 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.epic-loader-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: rgba(0, 218, 254, 0.6);
    filter: blur(8px);
    z-index: -1;
}

.loading-percentage-epic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 218, 254, 0.5);
}

.loading-percentage-epic span {
    font-size: 16px;
    margin-left: 2px;
    opacity: 0.8;
}

.loading-status-text {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 8px;
    min-height: 27px;
    /* Prevent layout shift */
    font-weight: 600;
    animation: pulse-text 2s infinite;
}

.loading-subtext {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 40px;
}

@keyframes spin-epic {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-text {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(0, 218, 254, 0.6);
    }
}

/* --- CAROUSEL FIXES --- */
/* --- CAROUSEL FIXES --- */
.testimonial-carousel {
    width: 100%;
    max-width: 340px;
    /* Limit width */
    margin: 20px auto;
    /* Center horizontally */
    overflow: hidden;
    position: relative;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    padding: 0;
    /* Remove padding to let images be full bleed if desired, or keep small padding */
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    width: 100%;
    height: auto;
    /* Let content dictate height */
}

.testimonial-slide {
    flex: 0 0 100%;
    /* Rigid 100% width */
    width: 100%;
    padding: 0;
    /* Removing padding for cleaner look */
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-slide img {
    width: 100%;
    height: auto;
    display: block;
    /* Adjust border radius if container has it, or remove */
    border-radius: 16px;
}


/* --- EPIC SALES PAGE (Final Step) --- */

/* Base Container */
.sales-page-container {
    padding-bottom: 40px;
    animation: enterScene 0.8s ease-out;
}

/* Header */
.sales-header {
    text-align: center;
    margin-bottom: 24px;
}

.sales-logo {
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.header-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 218, 254, 0.5), transparent);
    margin-top: 12px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.sales-title {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    color: #fff;
    margin-bottom: 24px;
    line-height: 1.3;
    text-shadow: 0 0 20px rgba(0, 218, 254, 0.3);
}

/* Glass Cards Generic */
.epic-glass-card,
.epic-content-box,
.epic-offer-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Hero Image */
.sales-hero-image {
    width: 100%;
    border-radius: 16px;
    display: block;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* Indicators */
.indicators-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

.indicator-col h3 {
    font-size: 14px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
    letter-spacing: 1px;
    font-weight: 700;
}

.indicator-item {
    margin-bottom: 12px;
}

.ind-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #ccc;
    margin-bottom: 4px;
}

.ind-bar-bg {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.ind-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.bar-red {
    background: #ef4444;
    width: 85%;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.bar-green {
    background: #10b981;
    width: 85%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.text-red {
    color: #ef4444;
    font-weight: 700;
}

.text-green {
    color: #10b981;
    font-weight: 700;
}

/* Content Boxes (How it works, Plan Includes) */
.box-title,
.section-heading {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.box-text {
    font-size: 15px;
    line-height: 1.6;
    color: #e2e8f0;
}

/* Features Grid */
/* Features Grid */
/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    /* significantly larger gap */
}

.feature-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Fainter border initially */
    padding: 28px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.feature-item::before {
    /* Gradient Border Reveal on Hover */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(0, 218, 254, 0.5), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.feature-item:hover {
    transform: translateY(-8px) scale(1.01);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 218, 254, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-item:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 32px;
    background: linear-gradient(135deg, rgba(0, 218, 254, 0.15) 0%, rgba(0, 150, 255, 0.05) 100%);
    color: var(--primary-color);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 218, 254, 0.2);
    box-shadow: 0 0 15px rgba(0, 218, 254, 0.1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(0, 218, 254, 0.25) 0%, rgba(0, 150, 255, 0.1) 100%);
    box-shadow: 0 0 25px rgba(0, 218, 254, 0.4);
    border-color: rgba(0, 218, 254, 0.5);
}

.feature-content h4 {
    font-size: 19px;
    margin-bottom: 10px;
    font-weight: 800;
    background: linear-gradient(90deg, #fff, #e0f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    /* Subtle shadow for contrast */
}

.feature-content p {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
}

.feature-content h4 {
    color: #fff;
    font-size: 18px;
    /* Larger title */
    margin-bottom: 8px;
    font-weight: 700;
}

.feature-content p {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.6;
}

/* Offer Card */
.epic-offer-card {
    background: linear-gradient(180deg, rgba(0, 218, 254, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 218, 254, 0.15);
    text-align: center;
}

.offer-badge {
    background: var(--primary-color);
    color: #000;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 16px;
    animation: pulse-badge 2s infinite;
}

.offer-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.price-container {
    margin: 20px 0;
}

.old-price {
    font-size: 18px;
    /* Larger */
    color: #fff !important;
    /* White */
    text-decoration: none !important;
    /* No strikethrough */
    margin-bottom: 4px;
    opacity: 0.9;
}

.new-price {
    font-size: 42px;
    color: var(--primary-color);
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 218, 254, 0.6);
}

.installment-text {
    font-size: 16px;
    /* Larger */
    color: #fff !important;
    /* White */
    margin-top: 4px;
    font-weight: 500;
}

.countdown-bar {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pulse-button {
    animation: pulse-button-anim 2s infinite;
}

.security-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 12px;
    color: #94a3b8;
}

/* Galleries */
.gallery-grid,
.testimonials-sales-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column for larger images */
    gap: 20px;
    /* Increased gap slightly */
    margin-bottom: 30px;
}

.gallery-item img,
.testimonial-img-sales {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s;
}

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

.section-heading-centered {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 20px;
    color: #fff;
}

/* Guarantee */
.guarantee-centered {
    text-align: center;
}

.guarantee-icon {
    width: 80px;
    justify-content: center;
    margin-bottom: 16px;
}

.guarantee-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.guarantee-text {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.6;
}

.support-email {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    display: block;
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.testimonial-name {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    margin-top: 4px;
    /* Added spacing */
}

.stars {
    font-size: 14px;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    color: #000 !important;
    /* Forced Black */
    font-style: italic;
    opacity: 1;
    text-shadow: none !important;
}

/* FORCED STYLES FOR EPIC TESTIMONIAL CARD */
/* FORCED STYLES FOR EPIC TESTIMONIAL CARD */
.testimonial-card-epic {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #000000 !important;
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}

/* Ensure specificity wins over .info-content p */
.info-content .testimonial-card-epic *,
.testimonial-card-epic * {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

.testimonial-card-epic .testimonial-name {
    font-weight: 800 !important;
    font-size: 18px !important;
    margin-bottom: 4px !important;
    color: #111827 !important;
}

.testimonial-card-epic .testimonial-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-style: italic !important;
    opacity: 0.9 !important;
    color: #374151 !important;
    /* Dark slate for aesthetic readability */
    margin-top: 12px;
}

.testimonial-card-epic .stars {
    color: #fbbf24 !important;
    font-size: 16px !important;
    margin-bottom: 4px;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes pulse-button-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 218, 254, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 218, 254, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 218, 254, 0);
    }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    width: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 218, 254, 0.5);
}

/* Highlight Blue Text Style */
.highlight-blue {
    color: var(--primary-color) !important;
    text-shadow: 0 0 12px rgba(0, 218, 254, 0.6);
    font-weight: 700;
}