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

        :root {
            --green: #2e7d32;
            --green-dark: #1b5e20;
            --green-light: #4caf50;
            --red: #c62828;
            --gold: #f9a825;
            --bg: #fffde7;
            --white: #ffffff;
            --text: #1a1a1a;
            --muted: #555;
            --radius: 12px;
            --shadow: 0 4px 24px rgba(0,0,0,0.13);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Baloo 2', sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 16px;
            line-height: 1.6;
            padding-bottom: 90px;
        }

        img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
        a { text-decoration: none; }

        /* ───── HERO STRIP ───── */
        .hero-strip {
            background: linear-gradient(135deg, var(--green-dark), var(--green));
            color: var(--white);
            text-align: center;
            padding: clamp(16px, 4vw, 32px) clamp(16px, 5vw, 40px);
        }
        .hero-strip .tag {
            display: inline-block;
            background: var(--gold);
            color: #000;
            font-size: clamp(12px, 2.5vw, 14px);
            font-weight: 700;
            padding: 4px 16px;
            border-radius: 20px;
            margin-bottom: 10px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .hero-strip h1 {
            font-size: clamp(22px, 5vw, 42px);
            font-weight: 800;
            line-height: 1.25;
            margin-bottom: 6px;
        }
        .hero-strip h1 .highlight {
            color: var(--gold);
            text-decoration: underline wavy var(--gold);
            text-underline-offset: 4px;
        }
        .hero-strip h2 {
            font-size: clamp(16px, 3.5vw, 24px);
            font-weight: 600;
            opacity: 0.92;
            margin-bottom: 14px;
        }
        .delivery-badge {
            display: inline-block;
            background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.4);
            color: var(--white);
            font-size: clamp(13px, 2.5vw, 16px);
            font-weight: 700;
            padding: 6px 20px;
            border-radius: 30px;
            margin-bottom: 18px;
        }

        /* ───── MOVING BUTTON ───── */
        .btn-wrapper {
            width: 100%;
            text-align: center;
            overflow: hidden;
            padding: 10px 0;
        }
        .moving-btn {
            display: inline-block;
            background: var(--green);
            color: var(--white) !important;
            font-size: clamp(15px, 3.5vw, 26px);
            font-weight: 800;
            padding: clamp(12px, 2.5vw, 18px) clamp(20px, 5vw, 44px);
            border-radius: 8px;
            box-shadow: 0 5px 18px rgba(0,0,0,0.22);
            animation: sway 0.8s infinite alternate ease-in-out;
            max-width: 95%;
            text-align: center;
            cursor: pointer;
            border: none;
            font-family: 'Baloo 2', sans-serif;
        }
        @keyframes sway {
            0%   { transform: translateX(-14px); }
            100% { transform: translateX(14px); }
        }

        /* ───── CONTAINER ───── */
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 0 clamp(14px, 4vw, 32px);
            overflow-x: hidden;
        }
        body { overflow-x: hidden; }

        /* ───── HERO IMAGE ───── */
        .hero-img-section {
            background: var(--white);
            padding: clamp(16px, 3vw, 28px) 0;
        }
        .hero-img-section img {
            margin: 0 auto;
            border-radius: 12px;
            box-shadow: var(--shadow);
        }

        /* ───── PROBLEM SECTION ───── */
        .problem-section { padding: clamp(24px, 4vw, 48px) 0; }
        .problem-section .text-block p {
            font-size: clamp(14px, 2.5vw, 17px);
            color: var(--muted);
            margin-bottom: 16px;
        }
        .problem-section .text-block p strong { color: var(--text); font-weight: 700; }
        .problem-section .side-img { margin: 20px auto 0; max-width: 320px; }

        /* ───── PRODUCT CARD ───── */
        .product-section {
            padding: clamp(24px, 4vw, 48px) 0;
            background: var(--white);
        }
        .product-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            align-items: center;
        }
        @media (min-width: 640px) {
            .product-grid { grid-template-columns: 1fr 1fr; }
        }
        .product-info {
            background: linear-gradient(160deg, #e8f5e9, #f1f8e9);
            border: 2px solid var(--green-light);
            border-radius: var(--radius);
            padding: clamp(18px, 4vw, 32px);
            text-align: center;
        }
        .product-info .product-logo { width: clamp(80px, 20vw, 120px); margin: 0 auto 14px; }
        .product-info h2 {
            font-size: clamp(15px, 3vw, 20px);
            font-weight: 800;
            color: var(--green-dark);
            margin-bottom: 12px;
        }
        .price-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .price-old { font-size: clamp(16px, 3vw, 22px); color: var(--muted); text-decoration: line-through; }
        .price-new { font-size: clamp(24px, 5vw, 36px); font-weight: 800; color: var(--red); }
        .product-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin: 12px 0 18px;
        }
        .meta-tag {
            background: var(--green);
            color: var(--white);
            font-size: clamp(12px, 2vw, 14px);
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 20px;
        }

        /* ───── SCIENCE SECTION ───── */
        .science-section { padding: clamp(24px, 4vw, 48px) 0; }
        .section-heading {
            font-size: clamp(18px, 4vw, 28px);
            font-weight: 800;
            color: var(--green-dark);
            margin-bottom: 14px;
            text-align: center;
        }
        .section-heading.dark-bg {
            background: var(--green-dark);
            color: var(--white);
            padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 32px);
            border-radius: var(--radius);
            text-align: center;
        }
        .body-text { font-size: clamp(14px, 2.5vw, 16px); color: var(--muted); margin-bottom: 12px; }

        /* ───── FEATURES SECTION ───── */
        .features-section { padding: clamp(24px, 4vw, 48px) 0; background: var(--white); }
        .feature-item {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-bottom: 32px;
            align-items: center;
        }
        @media (min-width: 600px) {
            .feature-item { grid-template-columns: 1fr 1fr; }
            .feature-item:nth-child(even) .feature-text { order: -1; }
        }
        .feature-item img {
            margin: 0 auto;
            max-width: 380px;
            width: 100%;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }
        .feature-text { font-size: clamp(14px, 2.5vw, 16px); color: var(--muted); padding: 0 4px; }

        /* ───── SOCIAL PROOF ───── */
        .social-proof { padding: clamp(24px, 4vw, 48px) 0; }
        .bought-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff3e0;
            border: 2px solid #ff8f00;
            border-radius: 30px;
            padding: 8px 20px;
            font-size: clamp(14px, 2.5vw, 17px);
            font-weight: 800;
            color: #e65100;
            margin: 16px 0;
        }
        .bought-badge::before { content: "🔥"; font-size: 1.2em; }
        .reviews-img { margin: 16px auto; max-width: 100%; width: 100%; object-fit: contain; }
        .testimonials-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-top: 16px;
        }
        @media (min-width: 540px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
        .testimonials-grid img { width: 100%; border-radius: 10px; box-shadow: var(--shadow); }

        /* ───── STICKY BOTTOM BAR ───── */
        .sticky-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #dfe8f0;
            padding: 10px clamp(10px, 3vw, 20px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            z-index: 9999;
            box-shadow: 0 -3px 14px rgba(0,0,0,0.15);
        }
        .timer-block { flex: 1; max-width: 55%; position: relative; }
        .timer-label {
            position: absolute;
            top: -17px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--green);
            color: #fff;
            padding: 3px 12px;
            border-radius: 8px;
            font-size: clamp(10px, 2vw, 13px);
            font-weight: 700;
            white-space: nowrap;
        }
        .timer-inner {
            border: 2px solid #555;
            border-radius: 10px;
            padding: 8px;
            display: flex;
            justify-content: space-around;
            background: #dfe8f0;
        }
        .time-box { text-align: center; }
        .time-box span {
            display: block;
            font-size: clamp(22px, 6vw, 34px);
            font-weight: 800;
            color: var(--red);
            line-height: 1;
        }
        .time-box small { color: var(--red); font-size: clamp(10px, 2vw, 12px); }
        .order-btn {
            background: var(--green);
            color: #fff;
            padding: clamp(10px, 2vw, 14px) clamp(12px, 3vw, 24px);
            border-radius: 12px;
            text-align: center;
            font-size: clamp(14px, 3.5vw, 20px);
            font-weight: 800;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: clamp(110px, 30vw, 180px);
            line-height: 1.2;
            transition: transform 0.25s, box-shadow 0.25s;
            cursor: pointer;
            border: none;
            font-family: 'Baloo 2', sans-serif;
        }
        .order-btn small { font-size: clamp(10px, 2vw, 13px); color: #d0f0d0; margin-top: 3px; font-weight: 400; }
        .order-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,0.22); }

        /* ───── DIVIDER ───── */
        .section-divider { border: none; border-top: 2px dashed #c8e6c9; margin: 8px 0; }

        /* ───── UTILITY ───── */
        .text-center { text-align: center; }
        .mt-16 { margin-top: 16px; }
        .mt-24 { margin-top: 24px; }
        .mb-8  { margin-bottom: 8px; }
        .mb-16 { margin-bottom: 16px; }

        /* ═══════════════════════════════════════
           ORDER MODAL STYLES
        ═══════════════════════════════════════ */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 16px;
            backdrop-filter: blur(4px);
        }
        .modal-overlay.active {
            display: flex;
            animation: fadeIn 0.25s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        .modal-box {
            background: var(--white);
            border-radius: 20px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.35);
            overflow: hidden;
            animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }
        @keyframes slideUp {
            from { transform: translateY(60px) scale(0.95); opacity: 0; }
            to   { transform: translateY(0) scale(1); opacity: 1; }
        }

        .modal-header {
            background: linear-gradient(135deg, var(--green-dark), var(--green));
            color: var(--white);
            padding: 20px 24px 16px;
            text-align: center;
            position: relative;
        }
        .modal-header .modal-badge {
            display: inline-block;
            background: var(--gold);
            color: #000;
            font-size: 12px;
            font-weight: 800;
            padding: 3px 14px;
            border-radius: 20px;
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .modal-header h3 {
            font-size: clamp(17px, 4vw, 22px);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 4px;
        }
        .modal-header p {
            font-size: clamp(12px, 2.5vw, 14px);
            opacity: 0.85;
        }
        .modal-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: background 0.2s;
        }
        .modal-close:hover { background: rgba(255,255,255,0.35); }

        .modal-body {
            padding: 24px 24px 20px;
        }

        .form-group {
            margin-bottom: 16px;
        }
        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: var(--green-dark);
            margin-bottom: 6px;
            letter-spacing: 0.3px;
        }
        .form-group label span.req {
            color: var(--red);
            margin-left: 2px;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid #c8e6c9;
            border-radius: 10px;
            font-size: 15px;
            font-family: 'Baloo 2', sans-serif;
            color: var(--text);
            background: #f9fffe;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
            -webkit-appearance: none;
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--green);
            box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
            background: #fff;
        }
        .form-group input.error,
        .form-group textarea.error,
        .form-group select.error {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(198,40,40,0.1);
        }
        .form-group .err-msg {
            display: none;
            color: var(--red);
            font-size: 12px;
            margin-top: 4px;
            font-weight: 600;
        }
        .form-group .err-msg.show { display: block; }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .phone-hint {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px;
        }

        .modal-price-strip {
            background: linear-gradient(90deg, #e8f5e9, #f1f8e9);
            border: 1.5px solid #a5d6a7;
            border-radius: 10px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 6px;
        }
        .modal-price-strip .label {
            font-size: 13px;
            color: var(--muted);
            font-weight: 600;
        }
        .modal-price-strip .prices {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .modal-price-strip .old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
        .modal-price-strip .new { font-size: 20px; font-weight: 800; color: var(--red); }
        .modal-price-strip .cod-tag {
            background: var(--green);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--green), var(--green-dark));
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: clamp(16px, 3.5vw, 20px);
            font-weight: 800;
            font-family: 'Baloo 2', sans-serif;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 16px rgba(46,125,50,0.4);
            letter-spacing: 0.3px;
        }
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 22px rgba(46,125,50,0.45);
        }
        .submit-btn:active { transform: translateY(0); }

        .modal-footer-note {
            text-align: center;
            font-size: 12px;
            color: var(--muted);
            margin-top: 12px;
        }
        .modal-footer-note span { color: var(--green-dark); font-weight: 700; }

        /* ─── SUCCESS STATE ─── */
        .modal-success {
            display: none;
            padding: 36px 24px;
            text-align: center;
        }
        .modal-success.show { display: block; }
        .modal-success .check-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--green), #66bb6a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin: 0 auto 16px;
            box-shadow: 0 6px 20px rgba(46,125,50,0.35);
            animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes popIn {
            from { transform: scale(0); }
            to   { transform: scale(1); }
        }
        .modal-success h3 {
            font-size: clamp(18px, 4vw, 24px);
            font-weight: 800;
            color: var(--green-dark);
            margin-bottom: 8px;
        }
        .modal-success p {
            font-size: clamp(13px, 2.5vw, 15px);
            color: var(--muted);
            margin-bottom: 6px;
        }
        .modal-success .order-id {
            display: inline-block;
            background: #e8f5e9;
            border: 1.5px solid #a5d6a7;
            color: var(--green-dark);
            font-weight: 800;
            font-size: 14px;
            padding: 6px 18px;
            border-radius: 8px;
            margin-top: 8px;
        }
        .modal-success .close-success-btn {
            margin-top: 20px;
            display: inline-block;
            background: var(--green);
            color: #fff;
            padding: 12px 32px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            border: none;
            font-family: 'Baloo 2', sans-serif;
        }