/* =========================
   Core Theme
   ========================= */
:root {
    --purple: #6A11CB;
    --blue: #2575FC;
    --accent: #FFA726;
    --accent-2: #FF6B6B;
    --bg: #0f172a;
    --card-bg: #ffffff;
    --muted: #7f8c8d;
    --glass: rgba(255,255,255,0.08);
    --card-radius: 18px;
    --easing: cubic-bezier(.22,.84,.42,1);
    --autoplay-sec: 7;

    --lemon: #FFF59D;
    --dark: #2c3e50;
    --light: #f8f9fa;
    --white: #ffffff;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    letter-spacing: 0.5px;
}

/* Scalable heading sizes */
h1, .hero-title { font-size: clamp(1.5rem, 1.2rem + 2.2vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.25rem, 1.05rem + 1.8vw, 2.5rem); font-weight: 700; }
.mcard-title { font-size: clamp(1.1rem, 1.05rem + .6vw, 1.6rem); font-weight: 700; }
.mcard-subtitle, .section-subtitle { font-size: clamp(.95rem, .9rem + .3vw, 1.05rem); }
.body-text { font-size: clamp(.94rem, .9rem + .25vw, 1.05rem); }

/* Typography */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin-bottom: 1.2rem;
    line-height: 1.5;
}

/* =========================
   Premium Navbar Styles
   ========================= */

/* Main Navbar Container */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.8rem 0;
    transition: all 0.4s var(--easing);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    z-index: 1030;
}

/* Navbar layout: logo far-left, nav+CTA on right */
.navbar-shell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

.navbar-shell > .navbar-brand {
    flex: 0 0 auto;
    margin: 0;
    margin-right: 0;
}

.navbar-shell > .navbar-toggler {
    margin-left: auto;
}

.navbar-shell > .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
}

@media (min-width: 992px) {
    .navbar-shell > .navbar-brand {
        /* Logo is visually scaled via transform; reserve extra layout space to prevent overlap */
        margin-right: clamp(24px, 4vw, 90px);
    }

    .navbar-shell {
        flex-wrap: nowrap;
    }

    .navbar-shell > .navbar-toggler {
        margin-left: 0;
    }

    .navbar-shell > .navbar-collapse {
        flex-basis: auto;
        display: flex;
        align-items: center;
    }
}

/* Scrolled State - Glassmorphism Effect */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
}

/* Logo Styles */
.navbar-brand {
    position: relative;
    z-index: 1031;
}

.navbar-brand img {
    transition: transform 0.3s var(--easing);
}

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

.logo-img {
    height: 42px;
    width: auto;
    display: block;
    transform-origin: left center;
    transform: scale(1.8);
    margin-top: -9px;
}

.navbar-brand:hover .logo-img {
    transform: scale(1.87);
}

/* Navigation Links Container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-item {
    position: relative;
}

/* Navigation Links - Default State */
.navbar-nav .nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #1a202c !important;
    padding: 0.65rem 1.3rem !important;
    border-radius: 50px;
    transition: all 0.3s var(--easing);
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Navigation Links - Hover Effect */
.navbar-nav .nav-link:not(.active):hover {
    color: #ff6b6b !important;
    transform: translateY(-2px) scale(1.05);
}

/* Underline Slide Animation for Non-Active Links */
.navbar-nav .nav-link:not(.active) .nav-link-text::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, #ff6b6b, #ffa500);
    border-radius: 2px;
    transition: transform 0.3s var(--easing);
}

.navbar-nav .nav-link:not(.active):hover .nav-link-text::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link-text {
    position: relative;
    display: inline-block;
}

/* Active Link - Pill Gradient Background */
.navbar-nav .nav-link.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transform: translateY(-2px);
}

.navbar-nav .nav-link.active:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    transform: translateY(-3px);
}

/* CTA Button - "Join Now" */
.navbar-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-sign-in {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    background: rgba(255, 255, 255, 0.85);
    color: #ff6b6b !important;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid rgba(255, 107, 107, 0.55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-sign-in::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 60%, #ffd93d 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}

.btn-sign-in > span,
.btn-sign-in > i {
    position: relative;
    z-index: 1;
}

.btn-sign-in:hover {
    transform: translateY(-2px);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255, 107, 107, 0.25);
}

.btn-sign-in:hover::before {
    opacity: 1;
}

.btn-sign-in i {
    transition: transform 0.25s ease;
}

.btn-sign-in:hover i {
    transform: translateX(2px);
}

.btn-join-now {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.8rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 50%, #ffd93d 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;

    border: none;
    outline: none;

    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.35);
    transition: all 0.3s ease;
}

.btn-join-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.45);
}

.btn-join-now i {
    transition: transform 0.3s ease;
}

.btn-join-now:hover i {
    transform: translateX(4px);
}

.btn-join-now::before,
.btn-join-now::after {
    display: none;
}


/* Mobile Toggle Button */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: rgba(255, 107, 107, 0.1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
    outline: none;
}

.navbar-toggler-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 107, 107, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive Design */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        margin-top: 1rem;
        padding: 1.5rem;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.8rem 1.5rem !important;
    }

    .navbar-cta {
        margin-top: 1rem;
        width: 100%;
        flex-direction: column;
    }

    .btn-sign-in {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.8rem;
    }

    .btn-join-now {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.8rem;
    }
}

@media (max-width: 768px) {
    .logo-img { 
        transform: scale(1.5); 
        margin-top: -5px; 
    }
    
    .navbar-brand:hover .logo-img {
        transform: scale(1.55);
    }
    
    .navbar.fixed-top .container,
    .navbar .container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (max-width: 480px) {
    .logo-img { 
        transform: scale(1.35); 
        margin-top: -2px; 
    }
    
    .navbar-brand:hover .logo-img {
        transform: scale(1.4);
    }
}

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .navbar.fixed-top .container,
        .navbar .container { 
            padding-right: max(16px, env(safe-area-inset-right));
            padding-left: max(16px, env(safe-area-inset-left));
        }
    }
}

/* Animation for Mobile Menu */
.navbar-collapse {
    transition: all 0.3s ease-in-out;
}

.navbar-collapse.collapsing {
    transition: height 0.35s ease;
}

/* =========================
   End of Premium Navbar
   ========================= */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
    color: white;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-section .row {
    min-height: auto;
    padding: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .hero-section .row {
        min-height: auto;
        padding: 0;
    }
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.1)"><polygon points="1000,100 1000,0 0,100"/></svg>');
    background-size: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem 0;
}

.hero-section .col-lg-6 {
    padding-top: 0;
    padding-bottom: 0;
}

.hero-title {
    color: white;
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    animation: fadeInUp 1s ease 0.2s both;
}

.offer-banner {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    padding: 1rem 2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease 0.4s both;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}

.offer-banner i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.hero-buttons {
    animation: fadeInUp 1s ease 0.6s both;
    margin-top: 1rem;
}

.trust-badges {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.navbar-brand {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0;
}

.navbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 992px) {
    .navbar-brand {
        /* Logo is visually scaled via transform; reserve extra layout space to prevent overlap */
        margin-right: clamp(24px, 4vw, 90px);
    }

    .navbar-right {
        flex: 1 1 auto;
        width: 100%;
        margin-left: 18px;
        gap: 1rem;
        justify-content: space-between;
    }

    .navbar-right .navbar-nav {
        margin-right: auto;
    }

    .navbar-right .navbar-cta {
        margin-left: auto;
    }
}
.hero-image {
    position: relative;
    z-index: 2;
    animation: fadeInRight 1s ease 0.8s both;
}

.hero-image img {
    border-radius: 20px;
    rotate: 0deg;
    animation: heroSpin 60s linear infinite;
    will-change: transform, rotate;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero-image img:hover {
    transform: scale(1.05);
    opacity: 1;
}

@keyframes heroSpin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* Buttons */
.btn {
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #ff6b6b, var(--accent));
    border: none;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.5);
    background: linear-gradient(135deg, #ff5252, #ff9800);
}

.btn-outline-light {
    border: 2px solid rgba(255,255,255,0.9);
    color: #fff;
    background: transparent;
}

.btn-outline-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Button Shine Animation */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -50%;
    width: 50%;
    height: 400%;
    transform: rotate(25deg);
    background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100% );
    animation: shine 3s infinite;
}
@keyframes shine {
    0% { left: -60%; }
    50% { left: 110%; }
    100% { left: 110%; }
}

/* Cards */
.benefit-card,
.highlight-card,
.testimonial-card,
.city-card,
.product-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.benefit-card:hover,
.highlight-card:hover,
.testimonial-card:hover,
.city-card:hover,
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Product Cards */
.product-card {
    overflow: hidden;
    padding: 0;
}

.product-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product-image img {
    width: 100% !important;             
    height: 100% !important;            
    object-position: center center;     
    display: block;                    
    transition: transform 0.3s ease;
}

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

.product-info {
    padding: 1.5rem;
}

.product-info h5 {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff6b6b;
    margin-bottom: 1rem;
}

/* Save badge on products */
.save-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--lemon);
    color: #8a6d00;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Testimonials */
.stars {
    margin-bottom: 1rem;
}

.customer-info {
    margin-top: 1rem;
}

.customer-info strong {
    color: #2c3e50;
    display: block;
}

/* City Cards */
.city-card {
    padding: 1.5rem;
}

.city-card h5 {
    color: #2c3e50;
    font-weight: 600;
    margin-top: 1rem;
}

/* Sections */
.py-5 {
    padding: 5rem 0;
}

.bg-light {
    background: #f8f9fa !important;
}

/* Health Benefits Section */
.health-benefits {
    background:
      radial-gradient(1200px 300px at -10% -50%, rgba(255,255,255,0.12), rgba(255,255,255,0) 70%),
      linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
    color: white;
    position: relative;
}

/* light fruit pattern */
.health-benefits::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='rgba(255,255,255,0.08)'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='80' cy='30' r='4'/%3E%3Ccircle cx='50' cy='90' r='5'/%3E%3C/ g%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

.health-benefits .section-title,
.health-benefits .section-subtitle {
    color: white;
}

.health-benefits .benefit-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: #000;
}
.health-benefits .benefit-card h4,
.health-benefits .benefit-card h5 {
    color: #000 !important;
    font-weight: 600;
}
.health-benefits .benefit-card p {
    color: #000 !important;
}
.health-benefits .benefit-card i {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
.health-benefits .benefit-card:hover {
    background: rgba(255,255,255,0.98);
}

/* Footer */
.footer {
    background: #2c3e50 !important;
}

.footer .container {
    max-width: 1140px;
}

.footer-top {
    row-gap: 1.25rem;
}

.footer-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
}

.footer-logo {
    height: 200px !important;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
}

.footer h5 {
    color: #ff6b6b;
    margin-bottom: 0.95rem;
    font-weight: 600;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

.footer p {
    margin-bottom: 0;
}

.footer ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer ul li a:hover {
    color: #ff6b6b;
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #34495e;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    transition: all 0.3s ease;
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.footer-contact-list li i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.footer-follow .social-links {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-follow .social-links a {
    margin-right: 0 !important;
}

.footer-bottom {
    row-gap: 0.5rem;
}

.footer-bottom a {
    display: inline-block;
}

@media (max-width: 991.98px) {
    .footer-top {
        row-gap: 1.5rem;
    }

    .footer-brand {
        justify-content: flex-start;
    }

    .footer-follow {
        text-align: left !important;
    }
}

@media (max-width: 767.98px) {
    .footer {
        padding-top: 1.25rem !important;
        padding-bottom: 1rem !important;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer h5 {
        margin-bottom: 0.75rem;
    }

    .footer ul {
        margin-bottom: 0;
    }

    .footer-bottom {
        text-align: left;
    }

    .footer-bottom .text-md-end {
        text-align: left !important;
    }
}

.social-links a:hover {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    transform: translateY(-3px);
}

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.whatsapp-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-btn a:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

/* Modal */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
    padding: 2rem 2rem 0;
}

.modal-body {
    padding: 0 2rem 2rem;
}

.form-control {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .section-subtitle { font-size: 1rem; }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-section {
        text-align: center;
    }
    
    .hero-buttons .btn {
        margin-bottom: 1rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .py-5 {
        padding: 3rem 0;
    }
    
    .offer-banner {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .whatsapp-btn {
        bottom: 20px;
        right: 20px; /* keep inside safe area on mobile */
    }
    
    .whatsapp-btn a {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
        .whatsapp-btn { bottom: 20px; right: 20px; }
}
@supports (right: max(0px)) {
    @media (max-width: 768px){
        .whatsapp-btn {
            right:  max(20px, env(safe-area-inset-right));
            bottom: max(20px, env(safe-area-inset-bottom));
        }
    }
    .hero-title {
        font-size: 1.8rem;
    }
    
    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .modal-body {
        padding: 0 1rem 1rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-custom {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #ff6b6b, #ffa500) border-box;
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hero decorative background for transparent image */
.hero-image {
    max-width: 500px;
}
.hero-image-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(255,255,255,0) 60%),
               linear-gradient(135deg, #6d63ff, #8a4fff);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15));
    z-index: 1;
    padding: 12%;
}
@media (max-width: 768px){
  .hero-image{max-width:320px;margin:40px auto 0;}
}

/* Contain potential horizontal overflow on mobile */
@media (max-width: 768px){
    .fp-slider, .fp-viewport { overflow: hidden; }
    .hero-section, .guarantee-strip { overflow: hidden; }
}

/* How It Works */
.how-it-works .step-card {
        background: #fff;
        border-radius: 18px;
        padding: 1.75rem;
        text-align: center;
        height: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: transform .3s ease, box-shadow .3s ease;
}
.how-it-works .step-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.how-it-works .icon-wrap { width:64px; height:64px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--purple), var(--blue)); color:#fff; font-size:1.5rem; margin-bottom:1rem; }

/* Guarantee ticker */
.guarantee-strip { background: #0f172a; color:#fff; padding: .5rem 0; overflow:hidden; }
.guarantee-ticker { display:flex; gap:2rem; white-space:nowrap; animation: ticker 18s linear infinite; }
.guarantee-item { display:inline-flex; align-items:center; gap:.5rem; opacity:.9; }
.guarantee-item i { color: var(--accent); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Video section */
.video-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.18); background: #000; }
.video-thumb { display:block; width:100%; height:auto; opacity:.9; }
.play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play-button { width:84px; height:84px; border-radius:50%; background: rgba(0,0,0,0.55); border:3px solid rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; transition: transform .25s ease, background .25s ease; }
.play-button:hover { transform: scale(1.06); background: rgba(0,0,0,0.7); }

/* Floating icons */
.float-icon { position:absolute; opacity:.25; animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-12px);} }

/* Buttons sizing for premium feel */
.btn { letter-spacing: 0.5px; font-size: 1.125rem; }

/* =========================
     Premium Nutrition Calculator
     ========================= */
.nutrition-pro { background: #F7F9FB; }
.nutri-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.nutri-select { position: relative; }
.nutri-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid #e8ecf2;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,1));
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.nutri-trigger .fruit-icon { font-size: 1.35rem; display:inline-block; }
.nutri-trigger .fruit-label { font-weight: 600; }
.nutri-trigger .chevron { transition: transform .2s ease; color: #7c8aa0; }
.nutri-trigger:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.06); }
.nutri-select.open .nutri-trigger .chevron { transform: rotate(180deg); }
.nutri-menu {
    position: absolute; inset: auto 0 auto 0; top: calc(100% + 8px); z-index: 10;
    background:#fff; border:1px solid #e8ecf2; border-radius:14px; box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    padding: .5rem; max-height: 280px; overflow:auto; opacity:0; pointer-events:none;
    transform: translateY(10px) scale(.98); transition: opacity .2s ease, transform .2s ease;
}
.nutri-select.open .nutri-menu { opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }
.nutri-menu li { display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:10px; cursor:pointer; }
.nutri-menu li .i { width:22px; text-align:center; }
.nutri-menu li:hover { background:#f2f6fb; }

.radial-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.radial { width: 180px; height: 180px; transform: rotate(-90deg); }
.radial .bg { fill: none; stroke: #eef2f7; stroke-width: 10; }
.radial .fg { fill: none; stroke: url(#gradCalories); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.22,.84,.42,1); }
.calories-display { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; transform: rotate(0deg); }
.calories-display .value { font-size: 2.25rem; font-weight: 700; }
.calories-display .unit { color:#7f8c8d; font-size:.9rem; }
.calories-display .per { color:#9aa7b3; font-size:.8rem; }

/* Gradient definition via inline background fallback */
.radial .fg { stroke: url(#gradCalories), linear-gradient(135deg, var(--purple), var(--blue)); }

.serving input[type=range] { width:100%; appearance:none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--blue)); outline:none; }
.serving input[type=range]::-webkit-slider-thumb { appearance:none; width:20px; height:20px; background:#fff; border:2px solid var(--blue); border-radius:50%; box-shadow: 0 6px 16px rgba(37,117,252,.3); transition: transform .15s ease; }
.serving input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.08); }

.nutrients { display:flex; flex-direction:column; gap:1rem; }
.nutrients .bar { display:grid; grid-template-columns: 120px 1fr 70px; gap:.75rem; align-items:center; }
.nutrients .bar .label { font-weight:600; color:#2c3e50; display:flex; align-items:center; gap:.5rem; }
.nutrients .bar .track { background:#eef2f7; height:12px; border-radius:999px; overflow:hidden; }
.nutrients .bar .fill { height:100%; width:0; background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width .6s cubic-bezier(.22,.84,.42,1); }
.nutrients .bar .val { text-align:right; color:#52606d; }

.benefits .benefit-title { font-weight:700; color:#2c3e50; }
.benefit-list { list-style:none; padding:0; margin: .5rem 0 0; display:grid; grid-template-columns: 1fr; gap:.5rem; }
.benefit-list li { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border:1px solid #eef2f7; border-radius:12px; background:#fff; position:relative; overflow:hidden; }
.benefit-list li .sparkle { color: var(--accent); animation: sparkle 1.2s ease both; }
@keyframes sparkle { 0%{ opacity:0; transform: scale(.6) rotate(-20deg);} 50%{ opacity:1; transform: scale(1.1);} 100%{ opacity:1; transform: scale(1);} }

/* Fruit icon pop */
.pop { animation: pop .3s ease; }
@keyframes pop { 0%{ transform: scale(1);} 50%{ transform: scale(1.2);} 100%{ transform: scale(1);} }

/* Toast */
.nutri-toast { position: fixed; bottom: 24px; left: 24px; background:#111827; color:#fff; padding:.7rem 1rem; border-radius:12px; box-shadow: 0 10px 26px rgba(0,0,0,.25); opacity:0; transform: translateY(10px); transition: all .25s ease; z-index: 1100; }
.nutri-toast.show { opacity:1; transform: translateY(0); }

/* Subtle scroll reveal scale */
.nutrition-pro [data-aos=fade-up] { transform: translateY(10px) scale(.98); }

@media (max-width: 768px){
    .nutri-card{ padding: 1.25rem; }
    .radial-wrap { width: 160px; height:160px; }
    .radial { width:160px; height:160px; }
}

/* =========================
   Featured Products Slider
   ========================= */
:root{
    --fp-accent: #ff6b6b;
    --fp-bg: #0f172a;
    --fp-card-bg: #ffffff;
    --fp-blur: 4px;
    --fp-card-radius: 18px;
    --fp-shadow: 0 18px 40px rgba(0,0,0,.12);
    --fp-ease: cubic-bezier(.22,.84,.42,1);
    --fp-autoplay-ms: 3000;
    --fp-overlay: 0.55;
    --fp-overlay-center: 0.42;
    --gold-1: #fff3b0;
    --gold-2: #ffe27a;
    --gold-3: #ffd24d;
}

.featured-products{ background: #f7f9fb; }
.fp-slider{ position: relative; max-width: 1000px; margin: 0 auto; }
.fp-viewport{ position: relative; height: 420px; overflow: visible; }
.fp-track{ position: relative; width: 100%; height:100%; }

.fp-card{ position: absolute; top: 50%; left: 50%; width: min(90%, 680px); height: 360px; transform: translate(-50%, -50%); border-radius: var(--fp-card-radius); background: var(--fp-card-bg); box-shadow: var(--fp-shadow); overflow: hidden; transition: transform .6s var(--fp-ease), opacity .6s var(--fp-ease), filter .6s var(--fp-ease); will-change: transform; }
.fp-card::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0, var(--fp-overlay)); pointer-events:none; transition: background .3s var(--fp-ease); }
.fp-center::before{ background: rgba(0,0,0, var(--fp-overlay-center)); }
.fp-card .fp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; filter: brightness(.82) saturate(1.05) contrast(1.02); }
.fp-card .fp-info{ position:absolute; inset:auto 0 0 0; padding: 1.25rem 1.25rem 1.4rem; background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,0) ); color: #fff; }
.fp-title{ font-size: 1.5rem; font-weight: 700; margin: .15rem 0 .25rem; }
.fp-desc{ opacity: .9; margin: 0 0 .4rem; }
.fp-price{ 
    font-weight: 900; 
    margin-bottom: .8rem; 
    background: linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--gold-2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* brighter glow with subtle crispness */
    text-shadow: 0 0 10px rgba(255, 233, 145, 0.65), 0 1px 1px rgba(0,0,0,.15);
    -webkit-text-stroke: 0.35px rgba(255,255,255,0.25);
    animation: goldShimmer 5s linear infinite;
}
.fp-price::after{
    content: ""; display:block; height: 2px; width: 54px; margin-top: 6px;
    background: linear-gradient(90deg, rgba(255,232,140,0), rgba(255,232,140,1), rgba(255,232,140,0));
    filter: drop-shadow(0 0 8px rgba(255,232,140,.6));
}
@keyframes goldShimmer{ 
    0%{ background-position: 0% 50%; }
    100%{ background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce){
    .fp-price{ animation: none; }
}
.fp-badge{ display:inline-block; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); padding:.25rem .55rem; border-radius: 999px; font-size:.8rem; }
.fp-badge.accent{ background: var(--fp-accent); border-color: var(--fp-accent); color:#fff; }

/* States computed by JS */
.fp-center{ z-index: 3; transform: translate(-50%, -50%) scale(1.03); opacity: 1; filter: blur(0); }
.fp-left{ z-index: 2; transform: translate(calc(-50% - 36%), -50%) rotateZ(-1.2deg) scale(.92); opacity: .72; filter: blur(var(--fp-blur)); }
.fp-right{ z-index: 2; transform: translate(calc(-50% + 36%), -50%) rotateZ(1.2deg) scale(.92); opacity: .72; filter: blur(var(--fp-blur)); }
.fp-off{ z-index: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.86); filter: blur(var(--fp-blur)); }

/* Arrows */
.fp-arrow{ position:absolute; top:50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(15,23,42,.35); background: #fff; color:#111827; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px rgba(0,0,0,.12); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; z-index: 5; }
.fp-prev{ left: -12px; }
.fp-next{ right: -12px; }
.fp-arrow:hover{ transform: translateY(-50%) scale(1.06); box-shadow: 0 16px 40px rgba(0,0,0,.18); border-color: var(--fp-accent); }
.fp-arrow:focus-visible{ outline: 3px solid var(--fp-accent); outline-offset: 2px; }
/* entrance */
.fp-prev{ animation: fpInL .55s var(--fp-ease) both .15s; }
.fp-next{ animation: fpInR .55s var(--fp-ease) both .25s; }
@keyframes fpInL{ from{ transform: translate(-8px, -50%); opacity:.0;} to{ transform: translate(0, -50%);} }
@keyframes fpInR{ from{ transform: translate(8px, -50%); opacity:.0;} to{ transform: translate(0, -50%);} }

/* Dots */
.fp-dots{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top: 24px; }
.fp-dot{ width:10px; height:10px; border-radius:50%; background:#d1d5db; border:none; transition: transform .2s ease, background .2s ease; }
.fp-dot[aria-selected="true"], .fp-dot.active{ background: var(--fp-accent); transform: scale(1.25); }
.fp-dot:focus-visible{ outline: 3px solid var(--fp-accent); outline-offset: 2px; }

/* Mobile responsiveness */
@media (max-width: 768px){
    .fp-viewport{ height: 380px; }
    .fp-card{ width: 92%; height: 320px; }
    .fp-left{ transform: translate(calc(-50% - 28%), -50%) rotateZ(-1.2deg) scale(.9); }
    .fp-right{ transform: translate(calc(-50% + 28%), -50%) rotateZ(1.2deg) scale(.9); }
    .fp-prev{ left: 4px; }
    .fp-next{ right: 4px; }
    /* Hide slider arrows on mobile to avoid overlaying text */
    .fp-arrow{ display: none !important; }
}
@media (min-width: 769px) and (max-width: 992px){
    .fp-viewport{ height: 400px; }
    .fp-card{ width: 86%; }
    .fp-left{ transform: translate(calc(-50% - 24%), -50%) rotateZ(-1deg) scale(.92); }
    .fp-right{ transform: translate(calc(-50% + 24%), -50%) rotateZ(1deg) scale(.92); }
    .fp-slider, .fp-viewport{ overflow:hidden; }
    html, body { overflow-x: hidden; }
    .fp-left, .fp-right, .fp-off{ filter: none; }
}

@media (max-width: 576px){
    .fp-card{ width: 88%; height: 300px; }
    .fp-left{ transform: translate(calc(-50% - 16%), -50%) rotateZ(-1deg) scale(.9); opacity:.78; }
    .fp-right{ transform: translate(calc(-50% + 16%), -50%) rotateZ(1deg) scale(.9); opacity:.78; }
    .fp-prev{ left: 0; }
    .fp-next{ right: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .fp-card, .fp-arrow, .fp-dot{ transition: none !important; animation: none !important; }
}

/* Visually hidden utility */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space:nowrap; }

/* =========================
   Membership Page
   ========================= */
.membership-hero {
    background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
    color: #fff;
}
.membership-hero .hero-title { color:#ffffff; }
.membership-hero .hero-subtitle { color: rgba(255,255,255,.9); }

.plan-grid { align-items: stretch; }
.plan-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eef2f7;
    box-shadow: 0 12px 28px rgba(0,0,0,.06);
    padding: 1.1rem 1.1rem 1.2rem;
    transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
    cursor: pointer;
}
.plan-card:hover { transform: scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.plan-card:focus-visible { outline: 3px solid #ff6b6b; outline-offset: 2px; }
.plan-card.is-active { box-shadow: 0 16px 44px rgba(34,197,94,.18); }
.plan-card .plan-media { margin-top:.25rem; }
.plan-card .plan-img { max-height: 140px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
@media (max-width: 576px){ .plan-card .plan-img { max-height: 110px; } }
.plan-header .plan-title { font-weight:800; margin-bottom:.25rem; color:#0f172a; }
.plan-header .plan-subtitle { color:#64748b; margin:0; }
.plan-features { list-style: disc; padding-left: 1.25rem; margin: .25rem 0 .25rem; }
.plan-features li { padding:.35rem 0; color:#334155; position:relative; }
.plan-features li::marker { content: '• '; color:#ff6b6b; }
.plan-footer { margin-top: auto; display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
.plan-price { margin:0; color:#0f172a; font-weight:700; }
.btn-cta {
    --g1: #ff6b6b;
    --g2: var(--accent);
    border-radius: 999px;
    padding: .6rem 1.1rem;
    font-weight:700;
    color:#fff;
    background: linear-gradient(135deg, var(--g1), var(--g2));
    box-shadow: 0 10px 22px rgba(34,197,94,.25);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 14px 30px rgba(255, 107, 107, .35); }
.btn-cta:focus-visible { outline: 3px solid #22c55e; outline-offset: 2px; }

.badge-popular {
    position:absolute; top:10px; right:10px;
    font-size:.75rem; font-weight:800; color:#fff;
    padding:.35rem .6rem; border-radius:999px;
    background: linear-gradient(135deg, #ff6b6b, var(--accent));
    box-shadow: 0 8px 18px rgba(255,107,107,.28);
}
.plan-card.is-popular { border-color: rgba(255,107,107,.35); box-shadow: 0 16px 40px rgba(255,107,107,.12); }

@media (prefers-reduced-motion: reduce){
    .plan-card, .btn-cta { transition: none !important; }
    .plan-card:hover { transform:none !important; }
}

/* =========================
    Premium Membership Cards
    ========================= */
.membership-plans-section { position: relative; }
.membership-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 992px){ .membership-cards{ grid-template-columns: 1fr; gap: 16px; } }

.mcard { position: relative; display:flex; flex-direction: column; background: var(--card-bg); border-radius: var(--card-radius); padding: 20px 18px 18px; box-shadow: 0 14px 34px rgba(0,0,0,.08); border: 1px solid #eef2f7; will-change: transform, opacity; transition: transform .45s var(--easing), box-shadow .45s var(--easing), filter .45s var(--easing), border-color .45s var(--easing); transform-style: preserve-3d; outline: none; }
.mcard:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.mcard:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 22px 60px rgba(0,0,0,.14); }
.mcard::after{ content:""; position:absolute; left:10%; right:10%; bottom:-10px; height:16px; background: radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0)); filter: blur(6px); z-index:-1; }

.mcard.is-center { border-color: transparent; }
.mcard.is-center::before{ content:""; position:absolute; inset: -1px; z-index:0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 18px rgba(255,107,107,.35)); }

.mcard-glass{ position:absolute; inset: 0 0 auto 0; height: 68px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); backdrop-filter: blur(6px); pointer-events:none; opacity:.8; }

.mcard-badge{ position:absolute; top:10px; right:12px; display:inline-block; padding:.35rem .6rem; border-radius:999px; font-weight:800; font-size:.78rem; color:#fff; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 20px rgba(255,107,107,.25); transform-origin: top right; animation: badgeIn .6s var(--easing) .15s both; z-index: 5; pointer-events: none; }
@keyframes badgeIn{ 0%{ transform: scale(.75); opacity:0; } 60%{ transform: scale(1.08); opacity:1; } 100%{ transform: scale(1); } }

.mcard-imgwrap{ position: relative; display:flex; justify-content:center; align-items:center; margin-top: 6px; min-height: 140px; }
.mcard-img{ height: 200px; width: 100%; max-width: 200px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.18)); transition: transform .45s var(--easing), filter .45s var(--easing); transform: translateZ(30px); }
.mcard:hover .mcard-img{ transform: translateZ(40px) rotateZ(.6deg); filter: drop-shadow(0 14px 30px rgba(0,0,0,.22)); }
@media (max-width: 576px){ .mcard-img{ height: 110px; max-width: 160px; } }

.mcard-header{ text-align:center; margin-top: 6px; }
.mcard-title{ color:#0f172a; margin: 2px 0 2px; }
.mcard-subtitle{ color:#64748b; margin: 0; }

.mcard-features{ list-style:none; padding: 10px 2px; margin: 0; display:flex; flex-direction:column; gap: 8px; }
.mcard-features li{ display:flex; align-items:center; gap: 10px; color:#1f2937; }
.mcard-features .icon-check{ color: var(--accent-2); flex: 0 0 18px; }
.mcard-features .icon-check path{ fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .6s var(--easing); }
.mcard.is-center .mcard-features .icon-check path{ stroke-dashoffset: 0; }

.mcard-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.mcard-price{ font-weight: 800; color:#0f172a; }
.mcard-cta{ appearance:none; border:0; border-radius:999px; padding: .65rem 1.2rem; font-weight:700; color:#fff; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 26px rgba(255,107,107,.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.mcard-cta:hover{ transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 36px rgba(255,107,107,.34); }
.mcard-cta:active{ transform: translateY(0) scale(.98); }
.mcard-cta:focus-visible{ outline: 3px solid #22c55e; outline-offset: 2px; }

@media (max-width: 768px){
    .membership-page .mcard-footer{ justify-content: center; align-items: center; flex-direction: column; gap: 10px; }
    .membership-page .mcard-price{ text-align: center; width: 100%; }
    /* Disable hover transforms on touch/mobile to avoid conflicting with scroll-driven focus */
    .mcard:hover { transform: none !important; box-shadow: 0 14px 34px rgba(0,0,0,.08) !important; }
    .mcard:hover .mcard-img{ transform: none !important; }
}

/* Center emphasis scaling */
.mcard{ transform: perspective(900px) translateZ(0) scale(.96); }
.mcard.is-center{ transform: perspective(900px) translateZ(30px) scale(1.02); }

/* Controls & Dots */
.membership-controls{ display:flex; align-items:center; justify-content:center; gap: 12px; margin-top: 18px; }
.mnav{ width: 44px; height: 44px; border-radius:50%; border:1px solid #e5e7eb; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 10px 26px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.mnav:hover{ transform: scale(1.06); box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.mdots{ display:flex; gap:8px; }
.mdot{ width:10px; height:10px; border-radius:50%; border:none; background:#d1d5db; transition: transform .2s ease, background .2s ease; }
.mdot.is-active, .mdot[aria-selected="true"]{ background: var(--accent-2); transform: scale(1.25); }

/* Entrance animation */
.mcard{ opacity: 0; animation: mcardIn .55s var(--easing) both; }
.mcard:nth-child(1){ animation-delay: .08s; }
.mcard:nth-child(2){ animation-delay: .18s; }
.mcard:nth-child(3){ animation-delay: .28s; }
@keyframes mcardIn{ from{ opacity:0; transform: translateY(18px) scale(.94); } to{ opacity:1; transform: translateY(0) scale(1); } }

/* "Shiny" sweep for Choose button */
.membership-page .mcard-cta{ position: relative; overflow: hidden; isolation: isolate; }
.membership-page .mcard-cta::after{
    content: "";
    position: absolute;
    top: -150%;
    bottom: -150%;
    left: -40%;
    width: 38%;
    transform: skewX(-20deg);
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
    opacity: 1;
    pointer-events: none;
    animation: mcta-shine 1.8s var(--easing) infinite;
}
@keyframes mcta-shine{ from{ left:-40%; } to{ left: 140%; } }

.membership-page .mcard-cta:hover{ box-shadow: 0 16px 42px rgba(255,107,107,.42); }

@media (prefers-reduced-motion: reduce){
    .membership-page .mcard-cta::after{ display:none; animation: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .mcard{ opacity: 1 !important; }
    .mcard, .mnav, .mdot{ transition: none !important; animation: none !important; }
    .mcard:hover{ transform: none !important; }
}

/* =========================
    About Page
    ========================= */
.about-page { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; color:#212529; }
.about-hero { padding: 64px 0; }
.about-hero .title { font-family:'Montserrat', sans-serif; font-weight:700; letter-spacing:-.02em; }
.about-hero .subtitle { font-size:1.1rem; color:#555; }
.about-hero .hero-card { background:transparent; border-radius:0; box-shadow:none; overflow:hidden; }
.about-hero .hero-image { width:100%; height:100%; object-fit:cover; }

.offer-list { list-style:none; padding:0; margin:0; }
.offer-list li { display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; }
.offer-list li i { color: var(--accent); margin-top:.15rem; }

.product-grid .card { border:0; border-radius:16px; box-shadow:0 14px 38px rgba(0,0,0,.07); overflow:hidden; height:100%; transition:transform .25s ease, box-shadow .25s ease; }
.product-grid .card:hover { transform: translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,.10); }
.product-thumb { width:100%; aspect-ratio: 16/10; object-fit:cover; }
.product-logo { width:78px; height:78px; border-radius:16px; background:#f3f6f8; display:flex; align-items:center; justify-content:center; font-size:34px; color: var(--blue); margin:18px auto 0; }
.product-body { padding:1.1rem 1.1rem 1.3rem; }
.product-title { font-weight:600; }
.feature-bullets { list-style:none; padding:0; margin:.5rem 0 0; }
.feature-bullets li { display:flex; align-items:flex-start; gap:.55rem; color:#4a5568; padding:.3rem 0; }
.feature-bullets i { color:#00b894; margin-top:.2rem; }

.values-grid .value { background:#fff; border:0; border-radius:16px; padding:24px; box-shadow:0 12px 30px rgba(0,0,0,.06); height:100%; }
.values-grid .icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#f3f6f8; margin-bottom:12px; font-size:20px; }

.steps { display:flex; gap:18px; flex-wrap:wrap; }
.step { flex:1 1 220px; background:#fff; border-radius:14px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.05); }
.step h5 { font-weight:600; margin-bottom:.25rem; }
.step .num { width:32px; height:32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#e8f7ef; color:#0f9d58; font-weight:700; margin-right:.5rem; }

.cta-strip { background: linear-gradient(135deg, var(--purple), var(--blue)); color:#fff; border-radius:18px; padding:36px 24px; }
.cta-strip .btn { border-radius:999px; padding:.7rem 1.25rem; font-weight:600; }

@media (max-width: 991.98px) {
    .about-hero { padding: 40px 0; }
    .about-hero .title { font-size: 1.8rem; }
}