/* CSS Reset & Variable Definitions */
        :root {
            --primary-navy: #0c1938;
            --accent-pink: #e52d65;
            --soft-pink-bg: #fff0f3;
            --dark-gray: #4a5568;
            --light-gray: #f7fafc;
            --border-color: #fce2e6;
            --gold-primary: #b28a30;
            --gold-light: #fdfaf2;
            --gold-border: #dfc793;
            --shadow-sm: 0 2px 8px rgba(229, 45, 101, 0.05);
            --shadow-md: 0 10px 25px rgba(12, 25, 56, 0.06);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f6f8;
            color: var(--primary-navy);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        /* Fixed Mobile Only Container Layout (Locked 480px wide) */
        .phone-container {
            width: 480px;
            min-width: 480px;
            background-color: #ffffff;
            min-height: 100vh;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
            position: relative;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            flex-shrink: 0;
            /* Keeps the structure from compressing on desktop screens */
        }

        /* --- HEADER --- */
        .main-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 20px 10px;
            background-color: #ffffff;
            position: relative;
            z-index: 20;
        }

        .hamburger-menu {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 22px;
            height: 16px;
            cursor: pointer;
        }

        .hamburger-menu span {
            width: 100%;
            height: 2.5px;
            background-color: var(--primary-navy);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

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

        .logo-title {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary-navy);
            line-height: 1;
        }

        .logo-subtitle {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 2.5px;
            color: var(--accent-pink);
            text-transform: uppercase;
            margin-top: 4px;
        }

        .cart-wrapper {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .cart-badge {
            position: absolute;
            top: -5px;
            right: -8px;
            background-color: var(--accent-pink);
            color: #ffffff;
            font-size: 10px;
            font-weight: 700;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- LIMIT DROP BANNER --- */
        .drop-banner {
            background-color: #ffeef2;
            color: var(--accent-pink);
            text-align: center;
            padding: 8px 16px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin: 0px 75px 8px;
            border-radius: 25px;
            text-transform: uppercase;
            position: relative;
            z-index: 20;
        }

        /* --- HERO INTRO SECTION (AS BACKGROUND APPROACH) --- */
        .hero-section {
            padding: 24px 20px 45px;
            display: flex;
            flex-direction: column;
            position: relative;
            /* Premium Box Image set perfectly as a background fitting modern mobiles */
            background-image: url('../img/hero-box.webp');
            background-size: cover;
            background-position: right center;
            background-repeat: no-repeat;
            min-height: 475px;
            justify-content: flex-start;
        }

        /* Constrains left text content block to avoid overlapping background artwork */
        .hero-text-content {
            max-width: 75%;
            display: flex;
            flex-direction: column;
            z-index: 5;
        }

        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 30px;
            font-weight: 700;
            line-height: 1.15;
            color: var(--primary-navy);
            margin-bottom: 12px;
        }

        .hero-title span {
            color: var(--accent-pink);
            font-style: italic;
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            font-variant-numeric: lining-nums;
        }

        .hero-description {
            font-size: 14.5px;
            line-height: 1.45;
            color: var(--dark-gray);
            margin-bottom: 16px;
        }

        .hero-description .highlight-gold {
            color: var(--gold-primary);
            font-weight: 700;
        }

        .hero-description .highlight-pink {
            color: var(--accent-pink);
            font-weight: 700;
            font-size: 24px;
        }

        /* Helper class to level/align mathematical symbols like "+" perfectly on baseline */
        .plus-align {
            display: inline-block;
            position: relative;
            top: 0.06em;
            /* Shifts down subtly to align beautifully with numbers */
            margin-left: -1px;
            /* Kerning fix */
        }

        /* Golden Surprise Guarantee Card */
        .guarantee-badge-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background-color: var(--gold-light);
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            padding: 8px 12px;
            margin-bottom: 40px;
            align-self: flex-start;
            max-width: 100%;
        }

        .guarantee-badge-box .gb-icon {
            background-color: #ffffff;
            border: 1px solid var(--gold-border);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            min-width: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold-primary);
            box-shadow: 0 2px 6px rgba(178, 138, 48, 0.08);
        }

        .guarantee-badge-box .gb-text {
            font-size: 10.5px;
            line-height: 1.35;
            color: var(--primary-navy);
            text-align: left;
        }

        .guarantee-badge-box .gb-text strong {
            font-weight: 600;
        }

        .guarantee-badge-box .gb-text span {
            color: var(--gold-primary);
            font-weight: 700;
        }

        .hero-bullets {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .bullet-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--primary-navy);
        }

        .bullet-icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-pink);
            background-color: #fff;
            box-shadow: var(--shadow-sm);
        }

        .bullet-item span {
            filter: drop-shadow(2px 4px 6px white);
        }

        /* Floating Stickers overlaying background box accurately */
        .floating-value-sticker {
            position: absolute;
            top: 40px;
            right: 20px;
            width: 86px;
            height: 86px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1.5px solid var(--gold-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(178, 138, 48, 0.15);
            animation: gentle-bounce 3s ease-in-out infinite;
            z-index: 10;
        }

        @keyframes gentle-bounce {

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

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

        .sticker-lbl {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--gold-primary);
            margin-bottom: -1px;
        }

        .sticker-value {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 800;
            color: var(--gold-primary);
            line-height: 1;
            font-variant-numeric: lining-nums;
        }

        .sticker-unit {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--gold-primary);
            margin-bottom: 2px;
        }

        .sticker-stars {
            display: flex;
            gap: 2px;
            color: var(--gold-border);
            font-size: 6px;
        }

        /* Ribbon corner badge: "Potrivită și pentru cadou" positioned over background */
        .ribbon-badge {
            position: absolute;
            bottom: 40px;
            right: 15px;
            background: linear-gradient(135deg, #e0cb9e 0%, #b28a30 100%);
            border-radius: 6px;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 12px rgba(178, 138, 48, 0.25);
            z-index: 10;
        }

        .ribbon-badge::before {
            content: "";
            position: absolute;
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid #dfc793;
        }

        .ribbon-badge::after {
            content: "";
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #b28a30;
        }

        .ribbon-badge svg {
            color: #ffffff;
            fill: #ffffff;
            min-width: 14px;
        }

        .ribbon-badge span {
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
            white-space: nowrap;
        }

        /* --- MAIN FEATURES GRID --- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: -25px 16px 24px;
            padding: 16px 12px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: var(--shadow-md);
            position: relative;
            z-index: 15;
            border: 1px solid #f9f9fb;
        }

        .feature-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            /* Setup absolute context for subtle vertical dividers */
        }

        /* Added Subtle Lines between feature items */
        .feature-card:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -6px;
            /* Centered precisely in the 10px grid gap */
            top: 15%;
            height: 70%;
            width: 1px;
            background-color: var(--accent-pink);
            opacity: 0.25;
            /* Crisp, elegant, and matches image_0881a3.png */
            border-radius: 1px;
        }

        .feature-icon-wrapper {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: var(--gold-primary);
            background-color: var(--gold-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }

        .feature-label {
            font-size: 12px;
            font-weight: 600;
            line-height: 1.3;
            color: var(--primary-navy);
        }

        /* --- WHAT IS INSIDE SECTION --- */
        .inside-section {
            padding: 0px 16px 14px;
            text-align: center;
            background-color: #ffffff;
        }

        .section-divider-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary-navy);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .section-divider-title::before,
        .section-divider-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #e2e8f0;
            max-width: 40px;
        }

        .inside-description {
            font-size: 14px;
            line-height: 1.5;
            color: var(--dark-gray);
            margin-bottom: 24px;
            padding: 0 10px;
        }

        /* Aesthetic Circle Categories */
        .categories-scroll {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 6px;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 18%;
        }

        .category-image-wrapper {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            overflow: hidden;
            border: 1.5px solid var(--border-color);
            padding: 2px;
            background-color: #ffffff;
            margin-bottom: 8px;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s ease;
        }

        .category-image-wrapper:hover {
            transform: scale(1.05);
        }

        .category-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .category-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--primary-navy);
        }

        /* --- BRAND MARQUEE SECTION --- */
        .brand-marquee-section {
            padding: 10px 20px 24px;
            background-color: #ffffff;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
        }

        .brand-marquee-headline {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--gold-primary);
            margin-bottom: 6px;
        }

        .brand-marquee-subtitle {
            font-size: 13.5px;
            color: var(--dark-gray);
            line-height: 1.45;
            margin-bottom: 18px;
        }

        .brand-marquee-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            padding: 14px 0;
            background-color: #faf9f6;
            border-radius: 12px;
            margin-bottom: 16px;
            border: 1px solid #f3eff0;
        }

        .brand-track {
            display: flex;
            gap: 48px;
            width: max-content;
            animation: scrollBrandsRightToLeft 30s linear infinite;
            align-items: center;
        }

        .brand-logo-item {
            font-family: 'Playfair Display', serif;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #8a91a0;
            /* Classy monochromatic gray placeholder text */
            white-space: nowrap;
            text-transform: uppercase;
        }

        /* Continuous scroll animation going from right to left */
        @keyframes scrollBrandsRightToLeft {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .brand-disclaimer-ribbon {
            background-color: var(--gold-light);
            border: 1px solid var(--gold-border);
            padding: 10px 14px;
            border-radius: 10px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            text-align: left;
        }

        .brand-disclaimer-icon {
            width: 16px;
            height: 16px;
            min-width: 16px;
            color: var(--gold-primary);
            margin-top: 2px;
        }

        .brand-disclaimer-text {
            font-size: 9.5px;
            font-weight: 500;
            line-height: 1.4;
            color: var(--primary-navy);
        }

        /* --- REBUILT HIGH-FIDELITY VALUE PROPOSITION CARD --- */
        .value-card-premium {
            background-color: #fffafb;
            border: 1.5px solid var(--border-color);
            border-radius: 20px;
            margin: 28px 16px 40px;
            /* Space added at bottom to cleanly offset the overlapping savings ribbon */
            padding: 24px 16px 36px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(229, 45, 101, 0.35);
            position: relative;
        }

        .val-garantata-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid var(--gold-border);
            border-radius: 20px;
            padding: 4px 14px;
            background-color: #ffffff;
            color: var(--gold-primary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            position: absolute;
            left: 50%;
            top: 4px;
            transform: translate(-50%, -50%);
            z-index: 15;
            box-shadow: var(--shadow-sm);
        }

        .premium-value-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 800;
            color: var(--primary-navy);
            margin-top: 10px;
            margin-bottom: 6px;
            line-height: 1.25;
            font-variant-numeric: lining-nums;
        }

        .premium-value-subtitle {
            font-size: 13.5px;
            color: var(--dark-gray);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .premium-value-subtitle span {
            color: var(--accent-pink);
            font-weight: 600;
        }

        .premium-value-subtitle .sparkle {
            color: var(--gold-primary);
            font-weight: bold;
        }

        .premium-vs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* Rebuilt into 2 exact columns */
            gap: 16px;
            align-items: stretch;
            margin-bottom: 20px;
            position: relative;
        }

        .prem-col {
            border-radius: 16px;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            background-color: var(--gold-light);
            border: 1.5px solid var(--gold-border);
            position: relative;
        }

        .prem-col.right-col {
            background: linear-gradient(135deg, #fff0f3 0%, #ffffff 100%);
            border: 1.5px solid var(--border-color);
        }

        .prem-header-row {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            text-align: left;
        }

        .prem-icon-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            flex-shrink: 0;
        }

        .gold-circle {
            background-color: #ffffff;
            border: 1.5px solid var(--gold-border);
            color: var(--gold-primary);
        }

        .pink-circle {
            background-color: #ffffff;
            border: 1.5px solid var(--border-color);
            color: var(--accent-pink);
        }

        .prem-header-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .prem-col-tag {
            font-size: 14px;
            font-weight: 800;
            color: var(--primary-navy);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .prem-col-subtag {
            font-size: 10px;
            color: var(--dark-gray);
        }

        .prem-col-price {
            font-family: 'Playfair Display', serif;
            font-size: 23px;
            font-weight: 800;
            margin: 16px 0;
            line-height: 1;
            font-variant-numeric: lining-nums;
            text-align: center;
            width: 100%;
        }

        .gold-price {
            color: var(--gold-primary);
        }

        .pink-price {
            color: var(--accent-pink);
        }

        .prem-inner-divider {
            height: 1px;
            background-color: rgba(0, 0, 0, 0.06);
            width: 100%;
            margin-bottom: 14px;
        }

        .prem-footer-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            width: 100%;
            text-align: left;
        }

        .prem-icon-small {
            color: var(--gold-primary);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .prem-col-desc {
            font-size: 10px;
            color: var(--dark-gray);
            line-height: 1.4;
        }

        /* Connector Bubble (Repositioned absolutely on top of the grid) */
        .prem-center-bubble-absolute {
            position: absolute;
            left: 50%;
            top: 46%;
            /* Perfectly centered vertically with price rows */
            transform: translate(-50%, -50%);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            /* Allows scrolling over the element seamlessly */
        }

        .multiplier-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1.5px solid var(--gold-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(178, 138, 48, 0.15);
            background-color: #ffffff;
        }

        .mult-num {
            font-family: 'Playfair Display', serif;
            font-size: 30px;
            font-weight: 800;
            color: var(--accent-pink);
            line-height: 1;
            font-variant-numeric: lining-nums;
        }

        .mult-lbl {
            font-size: 9px;
            font-weight: 800;
            color: var(--primary-navy);
            letter-spacing: 0.5px;
        }

        /* Decorative High-Fidelity Curved Connecting Arrows */
        .vs-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .arrow-left {
            right: calc(100% - 6px);
        }

        .arrow-right {
            left: calc(100% - 6px);
        }

        /* Right column mini checklist features */
        .prem-mini-features {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }

        .mini-feat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            font-weight: 700;
            color: var(--dark-gray);
            text-align: left;
        }

        .mini-feat-item svg {
            color: var(--accent-pink);
            flex-shrink: 0;
        }

        /* Bottom Savings Ribbon (Overlaps outer border flatly, no button shadows) */
        .prem-savings-ribbon {
            background: linear-gradient(135deg, #e52d65 0%, #bd194a 100%);
            border-radius: 8px;
            /* Less button-like, more flat ribbon-like */
            padding: 10px 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #ffffff;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            position: absolute;
            bottom: 8px;
            /* Positioned directly centered over bottom line boundary */
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
            white-space: nowrap;
            border: 2.5px solid #ffffff;
            /* Creates visual cutout space around container border */
            box-shadow: 0 4px 10px rgba(229, 45, 101, 0.25);
            pointer-events: none;
            /* Eliminates button click cursor feel */
        }

        .pct-icon-box {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 900;
        }

        .savings-banner-text {
            text-transform: uppercase;
        }

        /* Disclaimer ribbon at base of the card */
        .prem-disclaimer-ribbon {
            background-color: var(--light-gray);
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            text-align: left;
            margin-top: 10px;
        }

        .prem-disclaimer-ribbon svg {
            color: var(--accent-pink);
            width: 14px;
            height: 14px;
            min-width: 14px;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .prem-disclaimer-ribbon p {
            font-size: 9px;
            line-height: 1.4;
            color: var(--dark-gray);
        }

        /* --- NEW: COMPREHENSIVE ORDER FORM SECTION --- */
        .order-form-section {
            background-color: #f7f5f0;
            /* Light neutral cream background */
            padding: 32px;
            border-top: 1.5px solid #e8e5de;
            border-bottom: 1.5px solid #e8e5de;
            text-align: center;
            position: relative;
        }

        .form-title {
            font-family: 'Inter', sans-serif;
            font-size: 26px;
            font-weight: 800;
            color: #000000;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1.2;
            margin-bottom: 10px;
            text-wrap: balance;
        }

        .form-subtitle {
            font-size: 13.5px;
            font-weight: 400;
            color: var(--dark-gray);
            line-height: 1.45;
            margin-bottom: 14px;
            padding: 0 10px;
        }

        .work-hours {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 24px;
        }

        .green-dot {
            width: 8px;
            height: 8px;
            background-color: #4ade80;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
        }

        .work-hours span {
            text-decoration: underline;
        }

        .form-inputs-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 18px;
        }

        .input-group {
            position: relative;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border: 1px solid #e2e0da;
            border-radius: 14px;
            padding: 0 16px;
            height: 56px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.01);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .input-group:focus-within {
            border-color: var(--accent-pink);
            box-shadow: 0 0 0 3px rgba(229, 45, 101, 0.1);
        }

        .input-group svg {
            color: #718096;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .input-field {
            width: 100%;
            border: none;
            outline: none;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: var(--primary-navy);
            background: transparent;
            font-weight: 500;
        }

        .input-field::placeholder {
            color: #a0aec0;
        }

        /* Submit Toast Success Alert */
        .success-toast {
            position: fixed;
            bottom: 120px;
            left: 50%;
            transform: translate(-50%, 50px);
            background-color: var(--primary-navy);
            color: #ffffff;
            padding: 14px 20px;
            border-radius: 30px;
            font-size: 13.5px;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            width: calc(100% - 40px);
            max-width: 440px;
            justify-content: center;
        }

        .success-toast.show {
            opacity: 1;
            transform: translate(-50%, 0);
            pointer-events: auto;
        }

        .success-toast svg {
            color: #4ade80;
            flex-shrink: 0;
        }

        /* --- GUARANTEES SECTION --- */
        .risk-free-section {
            padding: 10px 16px 28px;
            text-align: center;
            border-top: 1px solid #f0f0f0;
            background-color: #ffffff;
        }

        .risk-free-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .risk-free-title::before {
            content: "♥";
            color: var(--accent-pink);
            font-size: 25px;
            margin-bottom: 4px;
        }

        .risk-free-desc {
            font-size: 14px;
            color: var(--dark-gray);
            line-height: 1.5;
            margin-bottom: 24px;
            padding: 0 15px;
        }

        .risk-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 50px;
        }

        .risk-card {
            background-color: #fffbfe;
            border: 1px solid #fad4db;
            border-radius: 12px;
            padding: 16px 12px;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .risk-icon-container {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--soft-pink-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-pink);
            margin-bottom: 12px;
        }

        .risk-card h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 6px;
        }

        .risk-card p {
            font-size: 14px;
            color: var(--dark-gray);
            line-height: 1.4;
        }

        /* --- BOX INCLUSION SECTION --- */
        .box-guarantee-section {
            margin: 20px 16px;
            border-radius: 10px;
            background-image: url('../img/backgrounds/box-guarantee.webp');
            background-size: cover;
            background-repeat: no-repeat;
            padding: 16px 16px;
            min-height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .box-guarantee-content-left {
            max-width: 58%;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .box-guarantee-title {
            font-family: 'Playfair Display', serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--primary-navy);
            line-height: 1.25;
        }

        .box-guarantee-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .box-guarantee-list-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            text-align: left;
        }

        .pink-check-icon {
            width: 18px;
            height: 18px;
            min-width: 18px;
            border-radius: 50%;
            background-color: var(--accent-pink);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            margin-top: 1px;
        }

        .pink-check-icon svg {
            width: 10px;
            height: 10px;
            stroke-width: 3.5;
        }

        .box-guarantee-list-item span {
            font-size: 13px;
            font-weight: 700;
            color: var(--primary-navy);
            line-height: 1.35;
        }

        .box-guarantee-footer-info {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 14px;
            max-width: 58%;
            text-align: left;
        }

        .info-circle-icon {
            width: 16px;
            height: 16px;
            min-width: 16px;
            color: var(--accent-pink);
            margin-top: 1px;
        }

        .box-guarantee-footer-note {
            font-size: 9.5px;
            font-weight: 500;
            color: var(--dark-gray);
            line-height: 1.35;
        }

        /* --- KNOW VS DISCOVER SECTION --- */
        .split-discovery-section {
            padding: 28px 16px;
            text-align: center;
            background-color: #ffffff;
        }

        .split-title {
            font-family: 'Playfair Display', serif;
            font-size: 21px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .split-cards-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 18px;
        }

        .split-card {
            border-radius: 16px;
            padding: 20px 12px;
            text-align: left;
            position: relative;
        }

        .split-card.left-sure {
            background-color: #fff3f5;
            border: 1px solid #ffdcd0;
        }

        .split-card.right-discover {
            background-color: #faf5ff;
            border: 1px solid #f3e8ff;
        }

        .split-card-badge {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }

        .split-card.left-sure .split-card-badge {
            color: var(--accent-pink);
        }

        .split-card.right-discover .split-card-badge {
            color: #9f7aea;
        }

        .split-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--primary-navy);
        }

        .split-card.left-sure h4 {
            color: var(--accent-pink);
        }

        .split-card.right-discover h4 {
            color: #805ad5;
        }

        .split-card-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .split-card-list li {
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-navy);
            padding-left: 14px;
            position: relative;
        }

        .split-card-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: -1px;
            font-size: 14px;
        }

        .split-card.left-sure .split-card-list li::before {
            color: var(--accent-pink);
        }

        .split-card.right-discover .split-card-list li::before {
            color: #9f7aea;
        }

        .split-quote-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--accent-pink);
            background-color: #fff0f3;
            padding: 10px 14px;
            border-radius: 20px;
            margin-top: 10px;
        }

        /* --- HOW IT WORKS --- */
        .how-it-works-section {
            padding: 28px 16px;
            background-color: #fffcfc;
            border-top: 1px solid #f0f0f0;
            text-align: center;
        }

        .how-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 24px;
            position: relative;
            display: inline-block;
        }

        .how-title::after {
            content: "";
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 2px;
            background-color: var(--accent-pink);
        }

        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            text-align: left;
        }

        .step-row {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            background-color: #ffffff;
            padding: 16px;
            border-radius: 12px;
            border: 1px solid #f5f5f5;
            box-shadow: var(--shadow-sm);
        }

        .step-num-badge {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            background-color: var(--soft-pink-bg);
            color: var(--accent-pink);
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .step-content-side {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .step-heading-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .step-icon-icon {
            width: 20px;
            height: 20px;
            color: var(--accent-pink);
        }

        .step-content-side h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--primary-navy);
        }

        .step-content-side p {
            font-size: 13px;
            color: var(--dark-gray);
            line-height: 1.4;
        }

        /* --- TESTIMONIALS CONSTANT CAROUSEL SECTION --- */
        .testimonials-section {
            padding: 28px 0;
            /* Expanded padding to handle carousel edge bleeding */
            text-align: center;
            background-color: #ffffff;
            border-top: 1px solid #f0f0f0;
            overflow: hidden;
        }

        .testimonials-title {
            font-family: 'Playfair Display', serif;
            font-size: 21px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 24px;
            line-height: 1.3;
            padding: 0 16px;
            text-wrap: balance;
        }

        .testimonials-marquee-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            padding: 10px 0;
        }

        /* Continuous seamless scrolling track sliding from Right to Left */
        .marquee-track {
            display: flex;
            gap: 12px;
            width: max-content;
            animation: scrollMarquee 28s linear infinite;
        }

        /* Pause marquee on hover or finger touch so users can easily read them */
        .testimonials-marquee-container:hover .marquee-track {
            animation-play-state: paused;
        }

        .testimonial-card {
            min-width: 250px;
            width: 250px;
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            border-radius: 14px;
            padding: 18px;
            text-align: left;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .stars-row {
            display: flex;
            gap: 2px;
            margin-bottom: 12px;
            color: #feb2b2;
        }

        .star-item {
            width: 14px;
            height: 14px;
            fill: #f53d7a;
        }

        .testimonial-body {
            font-size: 15px;
            color: var(--primary-navy);
            line-height: 1.5;
            font-style: italic;
            margin-bottom: 16px;
        }

        .testimonial-user-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--border-color);
        }

        .user-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-navy);
        }

        /* Keyframes animation to scroll infinitely from Right to Left */
        @keyframes scrollMarquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* --- ACCORDION FAQ SECTION --- */
        .faq-section {
            padding: 28px 16px;
            text-align: center;
            background-color: #fffbfa;
            border-top: 1px solid #f0f0f0;
        }

        .faq-title {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-navy);
            margin-bottom: 24px;
            position: relative;
            display: inline-block;
        }

        .faq-title::after {
            content: "";
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 2px;
            background-color: var(--accent-pink);
        }

        .faq-accordion-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }

        .faq-item {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-header-trigger {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
        }

        .faq-header-trigger span {
            font-size: 15px;
            font-weight: 700;
            color: var(--primary-navy);
            line-height: 1.3;
        }

        .faq-plus-minus {
            font-size: 18px;
            font-weight: 500;
            color: var(--accent-pink);
            transition: transform 0.2s ease;
        }

        .faq-content-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            padding: 0 16px;
            background-color: #fffcfd;
        }

        .faq-content-panel p {
            font-size: 14px;
            color: var(--dark-gray);
            line-height: 1.5;
            padding-bottom: 16px;
        }

        .faq-item.active-item {
            border-color: var(--border-color);
        }

        .faq-item.active-item .faq-content-panel {
            max-height: 240px;
            /* Adjusted safe height to contain longer objection FAQs comfortably */
            padding-top: 4px;
        }

        .faq-item.active-item .faq-plus-minus {
            transform: rotate(45deg);
        }

        /* --- STICKY FOOTER CTA AREA --- */
        .cta-box {
            padding: 12px 16px;
            background-color: #ffffff;
            position: sticky;
            bottom: 0;
            z-index: 100;
            box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05);
            border-top: 1px solid #f0f0f0;
            width: 100%;
            /* Spans exactly across the locked 480px parent width */
        }

        .glowbox-button {
            width: 100%;
            background: linear-gradient(135deg, #e52d65 0%, #bd194a 100%);
            border: none;
            border-radius: 12px;
            padding: 14px 16px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(229, 45, 101, 0.35);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .glowbox-button:active {
            transform: scale(0.98);
            box-shadow: 0 2px 8px rgba(229, 45, 101, 0.2);
        }

        .btn-cart-icon {
            width: 34px;
            height: 34px;
            fill: #ffffffdb;
        }

        .btn-text-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: left;
        }

        .btn-main-text {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .btn-sub-text {
            font-size: 11px;
            font-weight: 400;
            opacity: 0.9;
            margin-top: 1px;
        }

        /* --- TRUST BADGES BAR --- */
        .trust-badges-bar {
            background-color: #ffffff;
            padding: 16px 8px;
            border-top: 1px solid #f5f5f5;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
        }

        .trust-badge-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .trust-icon-box {
            color: var(--primary-navy);
            margin-bottom: 6px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .trust-label {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.3;
            color: var(--primary-navy);
        }

        button {
            font-family: 'Inter', sans-serif;
        }

        .pct-icon-box::before {
            /* content: url("data:image/svg+xml,%3Csvg width='80px' height='80px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 3C3.399 3.597 4.145 4 5 4C5.854 4 6.600 3.597 7 3C7.299 2.402 7.859 2 8.5 2C9.140 2 9.700 2.402 10 3C10.399 3.597 11.145 4 12 4C12.854 4 13.600 3.597 14 3C14.299 2.402 14.859 2 15.5 2C16.141 2 16.700 2.402 17 3C17.399 3.597 18.145 4 19 4C19.854 4 20.600 3.597 21 3V21C20.600 20.402 19.854 20 19 20C18.145 20 17.399 20.402 17 21C16.700 21.597 16.141 22 15.5 22C14.859 22 14.299 21.597 14 21C13.600 20.402 12.854 20 12 20C11.145 20 10.399 20.402 10 21C9.700 21.597 9.140 22 8.5 22C7.859 22 7.299 21.597 7 21C6.600 20.402 5.854 20 5 20C4.145 20 3.399 20.402 3 21V3Z' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Ccircle cx='8.5' cy='9.5' r='1.5' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Ccircle cx='15.5' cy='15.5' r='1.5' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M17 8.000L8.000 16' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); */
            content: url("data:image/svg+xml,%3Csvg width='34' height='29' viewBox='0 0 68 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M25.400 22.538C24.771 22.781 24.099 22.895 23.425 22.874C22.091 22.874 20.811 22.349 19.867 21.405C18.923 20.461 18.393 19.181 18.393 17.847C18.393 16.512 18.923 15.232 19.867 14.288C20.811 13.345 22.091 12.815 23.425 12.815C24.099 12.793 24.771 12.907 25.400 13.150C26.029 13.393 26.602 13.760 27.087 14.23C27.571 14.699 27.956 15.260 28.219 15.881C28.482 16.502 28.618 17.170 28.618 17.844C28.618 18.518 28.482 19.186 28.219 19.807C27.956 20.428 27.571 20.99 27.087 21.459C26.602 21.928 26.029 22.295 25.400 22.538Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M47.523 42.047C46.579 42.990 45.299 43.521 43.964 43.521C42.630 43.521 41.350 42.990 40.406 42.047C39.462 41.103 38.932 39.823 38.932 38.489C38.932 37.154 39.462 35.874 40.406 34.930C41.350 33.987 42.630 33.456 43.964 33.456C45.299 33.456 46.579 33.987 47.523 34.930C48.466 35.874 48.996 37.154 48.996 38.489C48.996 39.823 48.466 41.103 47.523 42.047Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M65.684 13.76V19.731C63.842 20.526 62.274 21.842 61.171 23.518C60.069 25.194 59.482 27.155 59.482 29.161C59.482 31.167 60.069 33.129 61.171 34.805C62.274 36.481 63.842 37.797 65.684 38.591V44.568C65.684 50.237 61.612 54.032 55.415 54.838C38.372 57.046 28.842 57.061 11.769 54.838C5.746 54.052 1.5 50.237 1.5 44.568V38.591C3.341 37.797 4.910 36.481 6.013 34.805C7.115 33.129 7.702 31.167 7.702 29.161C7.702 27.155 7.115 25.194 6.013 23.518C4.910 21.842 3.341 20.526 1.5 19.731V13.76C1.5 8.086 5.787 4.501 11.769 3.490C28.637 0.625 38.301 1.056 55.415 3.490C61.073 4.291 65.684 8.086 65.684 13.76Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M21.813 39.890C32.211 31.336 37.407 26.196 45.371 16.337' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
            ;
            rotate: 90deg;
        }


        .promo-banner {
            margin: 0px 32px;
            border-radius: 30px;
            background: radial-gradient(circle at 10% 45%, rgba(255, 255, 255, 0.18), transparent 28%), linear-gradient(90deg, #f16a92 0%, #e54374 48%, #d83268 100%);
            background: linear-gradient(0deg, #E24165, #ea5177);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(216, 50, 104, 0.52);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            padding-left: 40px;
            font-size: 18px;
        }

        .promo-icon {
            position: absolute;
            left: -10px;
            width: 58px;
            height: 58px;
            flex: 0 0 58px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02)), #e2386c;
            border: 1px solid rgba(255, 255, 255, 0.85);
            transform: translateY(-1px);
            box-shadow: 0 0 0 3px #e2386c, 0 0 0 4px rgba(255, 255, 255), 0 0 3px 5px #e2386c, 0 7px 6px 6px rgba(125, 10, 47, 0.1);
            background: linear-gradient(0deg, #E24165, #ea5177);
        }

        .promo-icon svg {
            width: 40px;
            height: 40px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 1.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            margin-top: -3px;
        }

        .promo-text {
            color: #ffffff;
            font-weight: 600;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            white-space: nowrap;
            text-shadow: 0 1px 0 rgba(122, 0, 42, 0.12);
        }

        .promo-text span {
            font-weight: 900;
        }

        .video1 {
            display: block;
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgb(220 126 154 / 35%);
            height: 600px;
            object-fit: cover;
            
        }

        .footer {
            margin-top: 40px;
            border-radius: 30px 30px 0 0;
            padding: 20px;
            padding-bottom: 130px;
            background-color: #0a0a0a;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 35px;
            font-size: 15px;
            line-height: 24px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
        }

        .footer a {
            text-decoration: underline;
        }

        .footer__nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 19px 20px;
            padding: 0 10px;
        }

        .footer__nav a {
            color: #fff;
        }

        

        .cta-box {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            padding: 12px;
            background: #fff;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        max-width: 480px;
        margin-inline: auto;
            transform: translateY(120%);
            opacity: 0;
            pointer-events: none;
            transition: all 0.25s ease;
        }
        
        .cta-box.is-visible {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }