/* =====================================================
   ChessWithRahul.in — style.css
   Personal Chess Coach Mumbai
   Version: 4.0 — Overflow fixed, mobile-first perfect
===================================================== */

/* =====================================================
   1. CSS VARIABLES
===================================================== */
:root {
    --primary-color:    #1a3a5c;
    --primary-dark:     #0f2540;
    --primary-light:    #2a5298;
    --primary-lightest: #e8f0fe;
    --accent-gold:      #c9a227;
    --accent-gold-light:#f0d060;
    --success:          #2e7d32;
    --white:            #ffffff;
    --off-white:        #fafaf8;
    --gray-50:  #f8f9fa;
    --gray-100: #f1f3f4;
    --gray-200: #e8eaed;
    --gray-300: #dadce0;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --section-padding:    5rem 0;
    --section-padding-sm: 3rem 0;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08);
    --transition:      0.25s ease;
    --transition-slow: 0.35s ease;
    --nav-height: 70px;
}

/* =====================================================
   2. RESET & BASE
===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--gray-800);
    background-color: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* OVERFLOW FIX — every element respects viewport width */
img, video, iframe, table, pre, figure {
    max-width: 100%;
    height: auto;
    display: block;
}

a { color: var(--primary-color); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-light); }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-900);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1 { font-size: clamp(1.5rem, 4.5vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.5rem); }

p { margin-bottom: 0; word-wrap: break-word; overflow-wrap: break-word; }
strong { font-weight: 600; color: inherit; }

/* =====================================================
   3. LAYOUT
===================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 480px)  { .container { padding: 0 1.25rem; } }
@media (min-width: 768px)  { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 2.5rem; } }

.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { color: var(--primary-dark); margin-bottom: 0.75rem; }
.section-subtitle { font-size: var(--text-lg); color: var(--gray-600); max-width: 700px; margin: 0 auto; line-height: 1.6; }
.section-title-centered { text-align: center; margin-bottom: 2rem; font-size: clamp(1.2rem,3vw,1.8rem); }

/* =====================================================
   4. BUTTONS
===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    max-width: 100%;
}
.btn-primary {
    background: var(--accent-gold);
    color: #1a1a1a;
    border-color: var(--accent-gold);
}
.btn-primary:hover { background: var(--accent-gold-light); color: #1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201,162,39,0.35); }
.btn-secondary {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}
.btn-secondary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-2px); }
.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline:hover { background: var(--primary-color); color: var(--white); transform: translateY(-2px); }
.btn-large { padding: 1rem 2rem; font-size: var(--text-lg); }
.btn-xl    { padding: 1.1rem 2.5rem; font-size: var(--text-xl); }

/* =====================================================
   5. HEADER & NAVIGATION
===================================================== */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    transition: box-shadow var(--transition);
    height: var(--nav-height);
}
.header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.navbar { height: var(--nav-height); display: flex; align-items: center; }
.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    min-width: 0;
}

/* Logo */
.logo a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap; }
.logo-icon { font-size: 1.6rem; line-height: 1; }
.logo-text { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--primary-dark); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: background var(--transition);
    /* MOBILE FIX: ensure tap always registers */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    position: relative;
    z-index: 1001;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}
.hamburger:hover { background: var(--gray-100); }
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop nav */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    min-width: 0;
}
.nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--gray-700);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--primary-color); background: var(--primary-lightest); }

/* Dropdown */
.nav-item.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 200px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    list-style: none;
    z-index: 200;
}
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown-link {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--gray-700);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
}
.dropdown-link:hover { background: var(--primary-lightest); color: var(--primary-color); }
.btn-nav-cta { padding: 0.5rem 1.2rem; font-size: var(--text-sm); }

/* =====================================================
   6. HERO — VIDEO BACKGROUND
===================================================== */
.hero-video {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 3rem;
    background-color: var(--primary-dark);
    overflow: hidden;
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,37,64,0.80) 0%, rgba(15,37,64,0.65) 60%, rgba(26,58,92,0.50) 100%);
    z-index: 1;
}
.hero-video .container { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 800px; }
.hero-label {
    display: inline-block;
    background: var(--accent-gold);
    color: #1a1a1a;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-title {
    font-size: clamp(1.6rem, 4.5vw, 3rem);
    color: var(--white);
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    line-height: 1.2;
}
.hero-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: rgba(255,255,255,0.92);
    line-height: 1.8;
    margin-bottom: 1.75rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-subtitle strong { color: var(--accent-gold-light); }
.hero-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.feature-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--white);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    backdrop-filter: blur(4px);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.hero-note { color: rgba(255,255,255,0.75); font-size: var(--text-sm); margin-bottom: 1.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.hero-social-proof { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.social-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
}
.social-badge:hover { background: rgba(255,255,255,0.20); color: var(--white); transform: translateY(-2px); }

/* =====================================================
   7. INTRO SECTION
===================================================== */
.intro-section { padding: var(--section-padding); background: var(--white); }
.intro-content { text-align: center; max-width: 900px; margin: 0 auto; }
.intro-content h2 { margin-bottom: 1.25rem; color: var(--primary-dark); }
.intro-text { font-size: var(--text-lg); color: var(--gray-700); line-height: 1.8; margin-bottom: 2.5rem; max-width: 820px; margin-left: auto; margin-right: auto; }
.intro-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.5rem; text-align: left; margin-top: 2.5rem; }
.intro-highlight { background: var(--gray-50); padding: 1.5rem; border-radius: var(--radius-xl); border-left: 4px solid var(--primary-color); transition: transform var(--transition), box-shadow var(--transition); }
.intro-highlight:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.highlight-num { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--white); background: var(--primary-color); width: 48px; height: 48px; border-radius: var(--radius-md); margin-bottom: 1rem; }
.intro-highlight h3 { font-size: var(--text-lg); margin-bottom: 0.5rem; color: var(--primary-dark); }
.intro-highlight p  { color: var(--gray-600); font-size: var(--text-sm); }

/* =====================================================
   8. TRUST SECTION
===================================================== */
.trust-section { padding: var(--section-padding-sm); background: var(--primary-dark); }
.trust-section .section-title-centered { color: var(--white); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.25rem; }
.trust-item { text-align: center; padding: 1.75rem 1.25rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); transition: all var(--transition); }
.trust-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.trust-icon   { font-size: 2rem; margin-bottom: 0.75rem; }
.trust-number { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: var(--accent-gold); margin-bottom: 0.4rem; }
.trust-label  { color: rgba(255,255,255,0.8); font-size: var(--text-sm); line-height: 1.4; }

/* =====================================================
   9. VIDEO SECTIONS
===================================================== */
.single-video-section { padding: var(--section-padding); }
.video-1 { background: var(--off-white); }
.video-2 { background: var(--white); }
.single-video-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.video-container-large { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-description h3 { font-size: var(--text-2xl); color: var(--primary-dark); margin-bottom: 1rem; }
.video-description > p { color: var(--gray-700); line-height: 1.8; margin-bottom: 1.5rem; }
.highlight-point { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--gray-100); font-size: var(--text-sm); color: var(--gray-700); }
.highlight-point:last-child { border-bottom: none; }
.highlight-icon { flex-shrink: 0; }
.video-highlights { margin-bottom: 1.75rem; }
.video-cta-box { background: var(--primary-lightest); border: 1px solid var(--primary-color); border-radius: var(--radius-xl); padding: 1.5rem; }
.video-cta-box p { color: var(--primary-dark); font-weight: 600; margin-bottom: 1rem; }

/* Success stats */
.success-stats-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.success-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-box { background: var(--primary-lightest); padding: 1.5rem; border-radius: var(--radius-xl); text-align: center; }
.stat-number { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: var(--primary-color); margin-bottom: 0.25rem; }
.stat-label  { font-size: var(--text-xs); color: var(--gray-600); line-height: 1.4; }
.success-description h3 { font-size: var(--text-2xl); color: var(--primary-dark); margin-bottom: 1rem; }
.success-description p  { color: var(--gray-600); line-height: 1.8; margin-bottom: 1.75rem; }

/* =====================================================
   10. WHY PERSONAL COACHING — COMPARISON
===================================================== */
.why-personal-section { padding: var(--section-padding); background: var(--gray-50); }
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.comparison-card { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.comparison-card.personal { border: 2px solid var(--success); }
.comparison-card.group    { border: 2px solid var(--gray-300); opacity: 0.9; }
.comparison-header { padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.comparison-card.personal .comparison-header { background: #e8f5e9; }
.comparison-card.group    .comparison-header { background: var(--gray-100); }
.comparison-header h3 { font-size: var(--text-base); margin: 0; }
.badge-best    { background: var(--success); color: var(--white); padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.badge-warning { background: #e53935; color: var(--white); padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.comparison-list { list-style: none; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.comparison-list li { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.5; padding-bottom: 0.6rem; border-bottom: 1px solid var(--gray-100); }
.comparison-list li:last-child { border-bottom: none; padding-bottom: 0; }
.comparison-price { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.9rem 1.25rem; background: var(--gray-50); border-top: 1px solid var(--gray-200); flex-wrap: wrap; }
.comparison-card.personal .comparison-price { background: #e8f5e9; }
.price-label { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--primary-dark); }
.price-value { font-size: var(--text-sm); color: var(--gray-600); }
.comparison-cta { text-align: center; margin-top: 2.5rem; padding: 2rem 1.5rem; background: var(--primary-dark); border-radius: var(--radius-2xl); }
.comparison-cta h3 { color: var(--white); font-size: var(--text-2xl); margin-bottom: 0.75rem; }
.comparison-cta p  { color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 1.75rem; }

/* =====================================================
   11. ABOUT SECTION
===================================================== */
.about-section { padding: var(--section-padding); background: var(--white); }
.about-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.about-image { position: relative; min-width: 0; }
.about-image .coach-photo { width: 100%; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); object-fit: cover; aspect-ratio: 1 / 1; }
.credentials-badge { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: var(--accent-gold); color: #1a1a1a; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); box-shadow: var(--shadow-lg); flex-wrap: wrap; }
.about-text { min-width: 0; }
.about-text h3 { font-size: var(--text-xl); color: var(--primary-dark); margin-bottom: 0.85rem; margin-top: 1.5rem; }
.about-text h3:first-child { margin-top: 0; }
.about-text p  { color: var(--gray-600); line-height: 1.85; margin-bottom: 1rem; }
.benefits-list { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.benefits-list li { display: flex; align-items: flex-start; gap: 0.85rem; background: var(--gray-50); padding: 0.9rem 1rem; border-radius: var(--radius-lg); border-left: 3px solid var(--primary-color); }
.benefit-icon { flex-shrink: 0; font-size: 1.1rem; margin-top: 0.05em; }
.benefit-text { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.6; min-width: 0; }
.benefit-text strong { color: var(--primary-dark); font-weight: 600; display: block; margin-bottom: 0.1rem; }
.about-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* =====================================================
   12. PROGRAMS SECTION
===================================================== */
.programs-section { padding: var(--section-padding); background: var(--off-white); }
.programs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.75rem; }
.program-card { background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); transition: all var(--transition); position: relative; }
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--primary-light); }
.program-card.featured { border: 2px solid var(--accent-gold); }
.featured-badge { position: absolute; top: 1rem; right: 1rem; background: var(--accent-gold); color: #1a1a1a; font-size: var(--text-xs); font-weight: 700; padding: 0.3rem 0.8rem; border-radius: var(--radius-full); z-index: 10; }
.program-image { position: relative; overflow: hidden; }
.program-image img { width: 100%; height: 190px; object-fit: cover; transition: transform var(--transition-slow); }
.program-card:hover .program-image img { transform: scale(1.05); }
.program-content { padding: 1.25rem; }
.program-content h3 { font-size: var(--text-lg); color: var(--primary-dark); margin-bottom: 0.65rem; }
.program-content p  { color: var(--gray-600); font-size: var(--text-sm); line-height: 1.7; margin-bottom: 1rem; }
.program-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.program-price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--primary-color); }

/* =====================================================
   13. WHY HOME TUITION
===================================================== */
.why-home-tuition { padding: var(--section-padding); background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); }
.advantages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.advantage-card { background: var(--white); padding: 1.75rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); transition: all var(--transition); }
.advantage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.advantage-icon { font-size: 2.2rem; margin-bottom: 0.85rem; line-height: 1; }
.advantage-card h3 { font-size: var(--text-lg); color: var(--primary-dark); margin-bottom: 0.5rem; }
.advantage-card p  { color: var(--gray-600); font-size: var(--text-sm); line-height: 1.7; }

/* =====================================================
   14. GOOGLE REVIEWS / MAP
===================================================== */
.gbp-reviews-section { padding: var(--section-padding); background: var(--white); }
.gbp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.gbp-rating-display { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.gbp-score { font-family: var(--font-display); font-size: 4rem; font-weight: 800; color: var(--primary-dark); line-height: 1; }
.gbp-stars { font-size: 1.4rem; margin-bottom: 0.25rem; }
.gbp-count { font-size: var(--text-sm); color: var(--gray-600); }
.gbp-map-embed { margin-top: 2.5rem; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.gbp-map-embed iframe { width: 100%; height: 350px; border: none; display: block; }

/* =====================================================
   15. TESTIMONIALS
===================================================== */
.testimonials-section { padding: var(--section-padding); background: var(--off-white); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.testimonial-card { background: var(--white); padding: 1.75rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); transition: all var(--transition); }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testimonial-rating { font-size: 1.1rem; margin-bottom: 0.75rem; }
.testimonial-text { color: var(--gray-700); font-size: var(--text-sm); line-height: 1.75; margin-bottom: 1rem; font-style: italic; }
.testimonial-author { border-top: 1px solid var(--gray-100); padding-top: 0.85rem; }
.testimonial-author strong { display: block; color: var(--primary-dark); font-size: var(--text-sm); font-style: normal; }
.testimonial-author span { font-size: var(--text-xs); color: var(--gray-600); }
.testimonials-cta { text-align: center; }
.social-proof { color: var(--gray-700); font-size: var(--text-base); margin-bottom: 1.25rem; }
.testimonials-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* =====================================================
   16. PRICING
===================================================== */
.pricing-section { padding: var(--section-padding); background: var(--white); }
.pricing-container {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}
.pricing-card-main { background: var(--primary-dark); color: var(--white); border-radius: var(--radius-2xl); padding: 2.5rem; min-width: 0; }
.pricing-header { margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 1.5rem; }
.pricing-header h3 { color: var(--white); font-size: var(--text-2xl); margin-bottom: 0.5rem; }
.pricing-header p  { color: rgba(255,255,255,0.7); font-size: var(--text-sm); }
.pricing-amount { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.price-number { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: var(--accent-gold); }
.price-period { color: rgba(255,255,255,0.6); font-size: var(--text-sm); }
.price-badge { display: inline-block; background: var(--accent-gold); color: #1a1a1a; font-size: var(--text-xs); font-weight: 700; padding: 0.2rem 0.75rem; border-radius: var(--radius-full); margin-bottom: 1.5rem; }
.pricing-features { list-style: none; padding: 0; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--text-sm); color: rgba(255,255,255,0.9); line-height: 1.5; }
.pricing-cta { display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-cta .btn { width: 100%; }
.pricing-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.value-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1.5rem; }
.value-card h4 { font-size: var(--text-base); color: var(--primary-dark); margin-bottom: 0.75rem; }
.value-card p, .value-card li { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.6; }
.value-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.trial-note { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border: 1px solid #4caf50; border-radius: var(--radius-xl); padding: 1.5rem; }
.trial-note h4 { color: var(--success); margin-bottom: 0.5rem; font-size: var(--text-base); }
.trial-note p { font-size: var(--text-sm); color: #1b5e20; }

/* =====================================================
   17. FAQ
===================================================== */
.faq-section { padding: var(--section-padding); background: var(--gray-50); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.faq-item { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 1.25rem 1.5rem; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--primary-dark); transition: background var(--transition); }
.faq-question:hover { background: var(--gray-50); }
.faq-icon { flex-shrink: 0; font-size: 1.1rem; transition: transform 0.3s; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: var(--text-sm); color: var(--gray-700); line-height: 1.7; }
.faq-answer a { color: var(--primary-color); font-weight: 600; }

/* =====================================================
   18. AREAS SERVED
===================================================== */
.areas-section { padding: var(--section-padding); background: var(--primary-dark); }
.areas-section .section-header h2 { color: var(--white); }
.areas-section .section-subtitle { color: rgba(255,255,255,0.7); }
.areas-intro { text-align: center; color: rgba(255,255,255,0.8); margin-bottom: 2rem; font-size: var(--text-lg); }
.areas-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.area-badge {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all var(--transition);
    cursor: default;
}
.area-badge:hover { background: var(--accent-gold); border-color: var(--accent-gold); color: #1a1a1a; transform: translateY(-2px); }
.areas-note { text-align: center; color: rgba(255,255,255,0.65); font-size: var(--text-sm); }

/* =====================================================
   19. FINAL CTA
===================================================== */
.final-cta-section { padding: var(--section-padding); background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%); }
.final-cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
.cta-subtitle { color: rgba(255,255,255,0.85); font-size: var(--text-lg); margin-bottom: 2rem; }
.final-cta-content h2 { color: var(--white); margin-bottom: 1rem; }
.cta-features-final { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
.cta-feature { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: var(--white); padding: 0.4rem 0.85rem; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; }
.cta-buttons-final { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.cta-guarantee { color: rgba(255,255,255,0.7); font-size: var(--text-sm); margin-bottom: 1.5rem; }
.cta-social-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cta-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.cta-social-links a { color: rgba(255,255,255,0.8); font-size: var(--text-sm); transition: color var(--transition); }
.cta-social-links a:hover { color: var(--accent-gold); }

/* =====================================================
   20. FOOTER
===================================================== */
footer { background: var(--gray-900); color: rgba(255,255,255,0.85); }
.footer-main { padding: 4rem 0 2.5rem; }
.footer-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}
.footer-section h4 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white); margin-bottom: 1.25rem; }
.footer-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-section ul a { color: rgba(255,255,255,0.7); font-size: var(--text-sm); transition: color var(--transition); }
.footer-section ul a:hover { color: var(--accent-gold); }
.footer-contact-info { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-contact-info a { display: flex; align-items: center; gap: 0.6rem; color: rgba(255,255,255,0.7); font-size: var(--text-sm); transition: color var(--transition); }
.footer-contact-info a:hover { color: var(--accent-gold); }
.footer-icon { flex-shrink: 0; }
.footer-social { margin-top: 1.25rem; }
.footer-social p { font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; }
.footer-social-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.footer-social-links a { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); padding: 0.4rem 1rem; border-radius: var(--radius-full); font-size: var(--text-sm); transition: all var(--transition); }
.footer-social-links a:hover { background: var(--accent-gold); color: #1a1a1a; }
.footer-bottom { background: rgba(0,0,0,0.3); padding: 1.25rem 0; }
.footer-bottom-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.footer-legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal-links a { font-size: var(--text-xs); color: rgba(255,255,255,0.5); transition: color var(--transition); }
.footer-legal-links a:hover { color: var(--accent-gold); }

/* =====================================================
   21. WHATSAPP FLOAT
===================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37,211,102,0.45);
    z-index: 9000;
    transition: all var(--transition);
    text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 10px 30px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }

/* =====================================================
   22. MISC COMPONENTS
===================================================== */
.check-icon { flex-shrink: 0; }

/* Fade-in handled by JS */
.fade-hidden  { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
.fade-visible { opacity: 1; transform: none; }

/* =====================================================
   23. RESPONSIVE — TABLET (≤1024px)
===================================================== */
@media (max-width: 1024px) {
    .footer-content-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-content-grid .footer-section:first-child { grid-column: 1 / -1; }
    .about-content-grid { grid-template-columns: minmax(0,280px) minmax(0,1fr); gap: 2rem; }
    .single-video-showcase { gap: 2rem; }
    .success-stats-showcase { gap: 2rem; }
    .pricing-container { grid-template-columns: 1fr; max-width: 600px; }
    .faq-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   24. RESPONSIVE — MOBILE (≤768px)
===================================================== */
@media (max-width: 768px) {
    :root {
        --section-padding:    3rem 0;
        --section-padding-sm: 2.25rem 0;
    }

    /* Show hamburger, hide desktop nav */
    .hamburger { display: flex; }
    #navMenu   { display: none !important; }

    /* Hero */
    .hero-video { align-items: flex-start; padding-top: calc(var(--nav-height) + 1.25rem); padding-bottom: 2rem; }
    .hero-content { padding: 0; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; text-align: center; }

    /* All 2-col grids → 1 col */
    .single-video-showcase,
    .success-stats-showcase,
    .about-content-grid,
    .comparison-grid,
    .faq-grid { grid-template-columns: 1fr !important; }

    /* Footer */
    .footer-content-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-content-grid .footer-section:first-child { grid-column: auto; }
    .footer-bottom-content { flex-direction: column; text-align: center; }
    .footer-legal-links { justify-content: center; }

    /* About */
    .about-image { max-width: 320px; margin: 0 auto; }
    .about-cta { flex-direction: column; }
    .about-cta .btn { width: 100%; text-align: center; }

    /* Buttons */
    .cta-buttons-final { flex-direction: column; align-items: stretch; }
    .cta-buttons-final .btn { width: 100%; }
    .testimonials-buttons { flex-direction: column; align-items: stretch; }
    .testimonials-buttons .btn { width: 100%; }
    .program-meta { flex-direction: column; align-items: flex-start; }
    .program-meta .btn { width: 100%; text-align: center; }

    /* Section headers */
    .section-header { margin-bottom: 2rem; }

    /* GBP */
    .gbp-header { flex-direction: column; }

    /* Pricing */
    .pricing-card-main { padding: 1.75rem; }
}

/* =====================================================
   25. RESPONSIVE — SMALL PHONES (≤480px)
===================================================== */
@media (max-width: 480px) {
    .hero-features  { gap: 0.35rem; }
    .feature-badge  { font-size: 0.72rem; padding: 0.3rem 0.65rem; }
    .trust-grid     { grid-template-columns: 1fr 1fr; }
    .success-stats  { grid-template-columns: 1fr 1fr; }
    .cta-features-final { gap: 0.35rem; }
    .areas-badges   { gap: 0.5rem; }
    .area-badge     { font-size: var(--text-xs); padding: 0.4rem 0.85rem; }
    .logo-text      { font-size: 1.1rem; }
    .gbp-score      { font-size: 3rem; }
    .comparison-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================
   PRICING INNER ELEMENTS (match HTML class names)
===================================================== */
.pricing-amount .currency { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent-gold); align-self: flex-start; margin-top: 0.4rem; }
.pricing-amount .price    { font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem); font-weight: 800; color: var(--accent-gold); line-height: 1; }
.pricing-amount .period   { color: rgba(255,255,255,0.6); font-size: var(--text-sm); align-self: flex-end; padding-bottom: 0.4rem; }
.pricing-features h4 { color: rgba(255,255,255,0.9); font-size: var(--text-base); margin-bottom: 1rem; font-family: var(--font-body); font-weight: 600; }
.pricing-features ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: var(--text-sm); color: rgba(255,255,255,0.85); line-height: 1.5; }
.pricing-cta .trial-note { color: rgba(255,255,255,0.65); font-size: var(--text-xs); text-align: center; }
.value-card .comparison { margin-top: 0.75rem; font-size: var(--text-xs); color: var(--gray-600); line-height: 1.5; border-top: 1px solid var(--gray-200); padding-top: 0.75rem; }
.value-card h4 { font-family: var(--font-body); font-weight: 700; }
.value-card ul { display: flex; flex-direction: column; gap: 0.4rem; }
.value-card ul li { font-size: var(--text-sm); color: var(--gray-700); }

/* Location cards (new SEO section) */
.location-section { padding: var(--section-padding); background: var(--white); }
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.location-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1.5rem; transition: all var(--transition); }
.location-card:hover { border-color: var(--primary-color); background: var(--primary-lightest); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.location-card h3 { font-size: var(--text-base); color: var(--primary-dark); margin-bottom: 0.4rem; }
.location-card p { font-size: var(--text-sm); color: var(--gray-600); line-height: 1.5; }
.location-icon { font-size: 1.75rem; margin-bottom: 0.6rem; }

/* GBP reviews */
.gbp-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 1.25rem; margin-top: 2rem; }
.gbp-review-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1.25rem; }
.gbp-review-card .stars { font-size: 0.95rem; margin-bottom: 0.4rem; }
.gbp-review-card .reviewer { font-weight: 700; color: var(--primary-dark); font-size: var(--text-sm); }
.gbp-review-card .review-text { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.6; margin: 0.4rem 0; font-style: italic; }
.gbp-review-card .review-date { font-size: var(--text-xs); color: var(--gray-600); }
.gbp-cta { text-align: center; margin-top: 2rem; }