/* --- 1. Base Variables & Reset --- */
:root {
    /* Palette */
    --brand-navy: #022550;
    --brand-orange: #EF7B45;
    --brand-blue: #8FA1E0;
    --brand-amber: #edae49;
    
    /* NEW: The Gradient */
    --brand-gradient: linear-gradient(135deg, #EF7B45 0%, #8FA1E0 100%);
    --brand-gradient-hover: linear-gradient(135deg, #ff8c56 0%, #aabbf5 100%);

    /* Theme Colors - Made slightly clearer/glassy */
    --bg-void: #05070a;       
    --bg-surface: #0f121d;    
    --bg-card: rgba(255, 255, 255, 0.03); /* Keep low opacity, we rely on blur now */
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);
    
    --text-main: #ffffff;
    --text-muted: #a0aec0; /* Slightly lighter gray for better readability */
    
    /* Fonts */
    --font-main: 'Inter', sans-serif;
    --font-head: 'Outfit', sans-serif;
}

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

body {
    background-color: var(--bg-void);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: white; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { display: block; max-width: 100%; }
.section-spacing {
    margin-top: 100px;
}
/* --- 2. Ambient Backgrounds --- */
.bg-noise {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0; opacity: 0.4;
}
/* Center the check-list under pricing */
.center-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 0 auto;
    padding: 0;
}
.subscription-note {
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 1rem;
    text-align: center;
    padding-bottom: 40px; /* Add bottom padding for spacing */
}
.trial-badge {
    display: inline-block;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    padding: 6px 18px;
    font-size: 1rem;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.pricing-section {
    padding-bottom: 80px; 
}
.ambient-light {
    position: fixed; width: 800px; height: 800px; border-radius: 50%;
    filter: blur(140px); opacity: 0.15; z-index: -1; pointer-events: none;
}
.light-1 { top: -200px; left: -100px; background: var(--brand-navy); }
.light-2 { bottom: -200px; right: -100px; background: var(--brand-blue); }

/* --- 3. Utilities --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.text-orange { color: var(--brand-orange); }
.text-blue { color: var(--brand-blue); }
.text-amber { color: var(--brand-amber); }
.center { text-align: center; }

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Ensure gradient applies correctly */
}
.bento-card, 
.mot-card, 
.pricing-option, 
.expert-profile {
    /* Lighter, Glassy Background */
    background: rgba(20, 25, 40, 0.4); 
    
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    /* Subtle Border with top-light accent */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 24px -1px rgba(0, 0, 0, 0.2), /* Drop shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.08); /* Top inner highlight */
        
    border-radius: 24px;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}


/* --- Navbar (unified with index.css) --- */
.navbar {
    position: fixed; top: 20px; left: 0; width: 100%;
    display: flex; justify-content: center; z-index: 1000;
    padding: 0 20px;
}
.nav-pill {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    padding: 10px 24px;
    display: flex; align-items: center; gap: 32px; flex-wrap: nowrap    ;
    position: relative;
    background-clip: padding-box;
    border: 1px solid transparent;
}
.nav-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(239, 123, 69, 0.3), rgba(143, 161, 224, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.logo { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: white; }
.logo-text { font-weight: 800; }
.nav-link {
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.nav-link:hover, .nav-link.active {
    background: var(--brand-gradient, linear-gradient(135deg, #EF7B45 0%, #8FA1E0 100%));
    color: #fff;
}
.nav-links-desktop {
    display: flex;
    gap: 20px;
    align-items: center;
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-dropdown { position: relative; }
.lang-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
    color: white; padding: 6px 14px; border-radius: 20px;
    cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.85rem;
    transition: 0.2s;
}
.lang-btn:hover { background: rgba(255,255,255,0.1); }
.lang-menu {
    display: none; position: absolute; top: 120%; right: 0;
    background: #111; border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden; min-width: 120px;
}
.lang-dropdown.active .lang-menu {
    display: block;
}
.lang-menu a {
    display: block; 
    width: 100%; 
    text-align: left; 
    background: none; 
    border: none;
    color: var(--text-muted); 
    padding: 10px 16px; 
    cursor: pointer; 
    font-size: 0.9rem;
    text-decoration: none; /* Removes the default link underline */
    box-sizing: border-box; /* Ensures padding doesn't break the width */
}
.lang-menu a:hover { 
    background: rgba(255,255,255,0.05); 
    color: white; 
}
.menu-btn { display: none; background: none; border: none; color: white; font-size: 1.2rem; }

.mobile-menu {
    position: absolute;
    top: 100%; /* Positions it directly below the navbar */
    left: 20px;
    right: 20px;
    background: rgba(20, 25, 40, 0.95);    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 1001;
}
.mobile-menu.active {
    display: flex;
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    padding: 14px 20px;
    border-radius: 16px;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.mobile-nav-link:hover {
    background: var(--brand-gradient);
    color: white;
    transform: translateX(4px);
    border-color: rgba(255,255,255,0.1);
}
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;

}
@media (max-width: 900px) {
    .nav-links-desktop { display: none; }
    .menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
        cursor: pointer;
    }
    .nav-pill {
        gap: 15px;
        width: 100%;
        justify-content: space-between;
    }
}
@media (max-width: 600px) {
    .nav-pill { gap: 8px; padding: 6px 20px; }
    .logo { font-size: 0.95rem; }
    .nav-link { font-size: 1rem; padding: 12px 10px; }
}

/* --- 5. Hero Section --- */
.hero { padding: 160px 0 100px; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(239, 123, 69, 0.1); border: 1px solid rgba(239, 123, 69, 0.3);
    color: var(--brand-orange); padding: 6px 12px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600; margin-bottom: 24px;
}
.dot { width: 6px; height: 6px; background: var(--brand-orange); border-radius: 50%; box-shadow: 0 0 8px var(--brand-orange); }

.hero-text h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 24px; letter-spacing: -1.5px; }
.hero-text p { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 40px; max-width: 90%; }

.store-buttons-row { display: flex; gap: 16px; margin-bottom: 40px; }
.store-btn {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: 10px 20px; color: white; transition: 0.3s;
}
.store-btn:hover { border-color: var(--brand-orange); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.store-btn i { font-size: 1.8rem; }
.btn-content { display: flex; flex-direction: column; line-height: 1.1; }
.small { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.large { font-weight: 700; font-size: 1rem; }

.stats-row { display: flex; gap: 30px; border-top: 1px solid var(--border-subtle); padding-top: 24px; }
.stat { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }

.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-frame {
    border-radius: 36px; border: 3px solid #1a1a1a;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    overflow: hidden; background: #000; position: relative; z-index: 2;
    height: 535px; width: 255px;
}

.visual-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px; background: var(--brand-orange);
    filter: blur(100px); opacity: 0.3; z-index: 1;
}

/* --- 6. PETKA CAROUSEL STYLE (WayUp Colors) --- */
.carousel-section { padding: 60px 0; }
.section-head { margin-bottom: 40px; }
.section-head h2 { font-size: 2.5rem; margin-bottom: 10px; }
.section-head p { color: var(--text-muted); }

/* The Container (Matches Petka layout logic) */
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 30px;
    padding: 30px 50vw 30px 50vw; /* Padding left/right to center items */
    /* Hide scrollbars */
    -ms-overflow-style: none;

    scroll-snap-type: x mandatory;
}
.carousel-container::-webkit-scrollbar { display: none; }

/* The Item */
.carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.4;
    transform: scale(0.8);
    transition: all 0.4s ease;
}

/* Active State (Triggered by JS) */
.carousel-item.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.carousel-item.active .phone-frame {
    border-color: var(--brand-blue);
    box-shadow: 0 10px 40px rgba(239, 123, 69, 0.2);
}

.lang-tag {
    margin-top: 16px; display: flex; align-items: center; gap: 8px;
    font-weight: 600; background: rgba(255,255,255,0.05); padding: 6px 12px;
    border-radius: 20px; font-size: 0.9rem;
    color: var(--text-muted);
}
.carousel-item.active .lang-tag {
    color: white;
    background: rgba(239, 123, 69, 0.2);
}

/* Navigation Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.carousel-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dots button.active {
    background-color: var(--brand-orange);
    transform: scale(1.2);
}

/* --- 7. Features Grid --- */
.features-section { padding: 100px 0; }
.bento-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto; gap: 20px;
}

.bento-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: 24px; padding: 24px; position: relative; overflow: hidden;
}
.bento-card.large { grid-row: span 2; padding-bottom: 0; }
.bento-card.wide { grid-column: span 2; }

.icon-sq {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px;
}
.icon-sq.orange { 
    background: rgba(239, 123, 69, 0.1); 
    color: var(--brand-orange);
    border: 1px solid rgba(239, 123, 69, 0.2);
}
.icon-sq.blue { 
    background: rgba(143, 161, 224, 0.1); 
    color: var(--brand-blue);
    border: 1px solid rgba(143, 161, 224, 0.2);
}

.bento-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.bento-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; }

.card-visual-bottom {
    margin-top: auto; height: 150px; background: linear-gradient(to top, rgba(239,123,69,0.1), transparent);
    border-top: 1px solid var(--border-subtle); position: relative;
}
.line-chart-viz {
    width: 100%; height: 100%;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 11px);
}
.card-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.card-viz-right { font-size: 4rem; opacity: 0.1; color: white; padding-right: 20px; }

/* --- 8. Experts & Pricing --- */
.experts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 40px;
}

.expert-profile {
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 24px 18px;
    min-width: 220px;
    max-width: 260px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    text-align: center;
    transition: box-shadow 0.3s, background 0.3s;
}
.profile-img {
    width: 60px; height: 60px; background: #222; border-radius: 50%;
    margin: 0 auto 16px; border: 2px solid var(--border-highlight);
}
.role { font-size: 0.7rem; text-transform: uppercase; color: var(--brand-blue); font-weight: 700; letter-spacing: 1px; }

.pricing-wrapper { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; align-items: center; }
.pricing-info h2 { font-size: 2.5rem; margin-bottom: 16px; }
.check-list li { display: flex; gap: 10px; margin-bottom: 12px; color: var(--text-muted); font-size: 0.95rem; }
.check-list i { color: var(--brand-orange); }
.pricing-info.center {
    text-align: center;
    margin-bottom: 32px;
}

.pricing-options-row {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
}
.pricing-option {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    text-align: center;
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pricing-option.featured {
    border-color: var(--brand-orange);
    background: linear-gradient(180deg, rgba(239,123,69,0.05), transparent);
}

.badge-sm {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-orange);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 10px 0;
    color: white;
}
.price span {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}
.savings {
    color: var(--brand-orange);
    font-size: 1rem;
    margin-top: 8px;
}


/* --- Motivation Section (New) --- */
.motivation-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

/* --- Motivation Section Layout --- */
.motivation-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

/* 2-Column Layout Container */
.motivation-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch; /* Ensures columns are same height */
    /* Set a minimum height for Desktop to allow flex-grow to work beautifully */
    min-height: 750px; 
}

/* The Columns */
.motivation-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Make sure cards fill the width of the column */
.motivation-col .mot-card,
.motivation-col .challenge-image-card {
    width: 100%;
    margin: 0; /* Reset margins */
    max-width: none; /* Remove any max-width limits */
    box-shadow: 0 4px 32px rgba(0,0,0,0.2);
}

/* --- Left Column Ratios --- */
/* Stat Card: Tall (1.4 flex) */
.motivation-col:first-child .profile-stat-card {
    flex: 1.4; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Rewards Card: Short (1 flex) */
.motivation-col:first-child .rewards-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Right Column Ratios --- */
/* VS Card: Short (1 flex) */
.motivation-col:last-child .vs-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Challenge HTML Card Design --- */

/* Replaces the old image container logic */
.motivation-col:last-child .challenge-card-html {
    flex: 1.4; /* Matches previous layout ratio */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Card Visuals (Gradient Background) */
    background: linear-gradient(145deg, #a3481f 0%, #0f1422 60%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}



/* --- Responsive Mobile --- */
@media (max-width: 900px) {
    .motivation-layout {
        grid-template-columns: 1fr;
  
    }
    .profile-stat-card, .rewards-card, .vs-card, .challenge-image-card {
        flex: unset !important; /* Let content dictate height on mobile */
        min-height: 200px; /* Minimum visual size */
    }
}

/* Base Card Style */
.mot-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}
/* Find the "1. Spraywall Card" section and update/replace with this: */

.spraywall-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    /* Ensure the card layout stretches to fill its grid area */
    height: 100%; 
}

/* This makes the visual container take up all extra empty space */
.spraywall-visual {
    flex: 1;
    display: flex;
    align-items: center;     /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    width: 100%;
    padding: 24px 0;         /* Adds some breathing room top/bottom */
}

/* Ensure the header text spans full width */
.spraywall-card .comm-header {
    width: 100%;
    margin-bottom: 0; 
}

/* Center the description text at the bottom */
.spraywall-card .comm-desc {
    text-align: center;
    margin-top: 0;
}

/* Card 1: Profile Stat (Tall card on left) */
.profile-stat-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(2,37,80,0.4) 0%, rgba(10,15,28,0.8) 100%);
    border: 1px solid rgba(143, 161, 224, 0.2);
}

/* Level Ring */
.level-circle-container {
    margin-bottom: 30px;
    position: relative;
}
.level-ring {
    width: 140px; height: 140px;
    border-radius: 50%;
    /* Conic gradient trick for progress bar */
    background: conic-gradient(from 0deg, var(--brand-orange), var(--brand-blue), rgba(255,255,255,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(143, 161, 224, 0.15);
}
.level-inner {
    width: 120px; height: 120px;
    background: var(--bg-surface);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lvl-label { font-size: 0.8rem; letter-spacing: 2px; color: var(--text-muted); font-weight: 700; }
.lvl-num { font-size: 3rem; font-weight: 800; color: white; line-height: 1; }

/* Streak */
.streak-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
    background: rgba(255,255,255,0.05);
    padding: 12px 24px;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
}
.fire-icon {
    font-size: 1.8rem;
    color: #FF4500;
    filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.6));
    animation: flicker 2s infinite alternate;
}
@keyframes flicker {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(0.95); }
}
.streak-text h4 { font-size: 1.1rem; margin: 0; }
.streak-text p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

/* XP Bar */
.xp-bar-wrapper { width: 100%; }
.xp-text { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.xp-track { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.xp-fill { height: 100%; background: var(--brand-blue); border-radius: 10px; }


/* Card 2: VS Challenge */
.vs-card {
    display: flex;
    flex-direction: column;
}
.vs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }


.vs-visual {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.player { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.player img { width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--border-highlight); object-fit: cover; }
.player.p1 img { border-color: var(--brand-blue); }
.player.p2 img { border-color: var(--brand-orange); }
.score { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; }

.vs-divider {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
    background: #222; border: 2px solid white; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.vs-text { font-style: italic; font-weight: 900; font-size: 0.8rem; }
.action-btn-small { margin-top: auto; padding: 10px; background: rgba(255,255,255,0.1); border: 1px solid var(--border-subtle); color: white; border-radius: 8px; cursor: pointer; transition: 0.2s; font-size: 0.9rem; }
.action-btn-small:hover { background: white; color: black; }
.vs-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; line-height: 1.4; }


/* Card 3: Rewards */
.rewards-card { display: flex; flex-direction: column; }
.rewards-showcase { display: flex;  margin: 50px 0; justify-content: space-around; }

.reward-item { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.reward-icon {
    width: 60px; height: 60px; background: rgba(0,0,0,0.3); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #ffd700;
    border: 1px solid var(--border-subtle);
}
.gold-border { border: 2px solid #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.2); }
.glow-border .mini-avatar { width: 40px; height: 40px; background: #555; border-radius: 50%; border: 2px solid var(--brand-blue); box-shadow: 0 0 8px var(--brand-blue); }
.reward-desc { font-size: 0.9rem; color: var(--text-muted); margin-top: auto; }
/* VS Challenge Progress Bars */

.vs-progressbars {
    margin: 18px 0 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vs-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vs-user-label {
    width: 40px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: right;
}
.vs-progress-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 6px;
}
.vs-progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.4s;
}
.vs-progress-fill-me {
    width: 30%;
    /* Gradient from Orange to lighter Orange */
    background: linear-gradient(90deg, var(--brand-orange), #ff9f75);
    box-shadow: 0 0 10px rgba(239, 123, 69, 0.3);
}

.vs-progress-fill-tom {
    width: 60%;
    /* Gradient from Blue to lighter Blue */
    background: linear-gradient(90deg, var(--brand-blue), #b5c3f0);
}

.vs-progress-count {
    width: 18px;
    font-size: 0.9rem;
    color: white;
    text-align: left;
}

.challenge-image-card {
    width: 100%;
    margin: 32px auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(34,46,79,0.12);
    background: #222e4f;
    display: flex;
    justify-content: center;
    align-items: center;
}
.challenge-img {
    width: 100%;
    display: block;

}
/* Responsive Motivation */
@media (max-width: 768px) {
    .motivation-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .profile-stat-card {
        grid-row: span 1;
        padding: 40px 20px;
    }
}


/* --- Community Section --- */
.community-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    max-width: 1100px; 
    width: 100%;
    margin: 0 auto;
}

/* Common Community Card Styles */
.comm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.comm-header h3 {
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.comm-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 16px;
    line-height: 1.4;
}

/* 1. Spraywall Card */
.spraywall-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column; 
}

.phone-frame-container {

 
    border-radius: 16px;
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px; /* Increased minimum height */
    margin-bottom: 16px;
}

/* Ensure image scales to fill the new larger container */
.phone-mockup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100%;

}
.video-wrapper {
    position: relative;
    width: 100%;
    /* Changed from 16/9 to 4/5 to match vertical climbing content & adjacent cards */
    aspect-ratio: 4/5;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin: auto 0;
}

.beta-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video fits inside without cutting off */
    display: block;
}

.video-control-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239, 123, 69, 0.9);
    border: none;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 10;
}
.video-control-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #fff;
    color: var(--brand-orange);
}

.video-overlay-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.grade-pill, .badge-pill {
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-pill {
    background: var(--brand-orange);
}

/* 3. Session Hub (Wide) */
.wide-card {
    grid-column: span 2;
}
.online-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.online-count i {
    color: #4CAF50;
    font-size: 0.6rem;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.session-hub-visual {
    background: rgba(0,0,0,0.2);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-subtle);
    gap: 16px;
    margin: 16px 0;
}

.session-invite-box {
    background: linear-gradient(135deg, #2a2d3e 0%, #1a1d2e 100%);
    border-left: 4px solid var(--brand-orange);
    padding: 16px;
    border-radius: 12px;
    flex: 1;
    min-width: 200px;
}
.day-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--brand-orange);
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.session-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.session-details .time {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}
.session-details .location {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.session-host {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.host-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--brand-orange);
}

.connection-line {
    color: var(--text-muted);
    font-size: 1.2rem;
    opacity: 0.5;
}

.friends-grid-box {
    display: flex;
    align-items: center;
    gap: 12px;
}
.friend-slot {
    position: relative;
    width: 48px;
    height: 48px;
}
.friend-slot img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--bg-card);
    object-fit: cover;
}
.status-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    background: #4CAF50;
    border-radius: 50%;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}
.empty-slot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
}


/* 4. Instagram Share Card */
.share-preview-container {
    width: 100%;
    aspect-ratio: 4/5; /* Portrait aspect like stories */
    overflow: hidden;
    border-radius: 16px;
    margin: 16px 0;
    position: relative;
}

.share-bg-image {
    width: 100%;
    height: 100%;
    background-image: url('share_to_story.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.share-overlay-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1000%;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}

.share-data-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    color: white;
    font-family: var(--font-main);
}

.share-route-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.share-meta-row, .share-stats-row, .share-equip-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
}

.share-meta-row i, .share-stats-row i, .share-equip-row i {
    width: 16px;
    text-align: center;
    margin-right: 4px;
}
.custom-icon-share {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
}
.share-logo-watermark {
    position: absolute;
    bottom: 0;
    right: 0;
    /* Removed fixed font-size so image controls size */
    display: flex;
    align-items: flex-end; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.watermark-logo {
    width: 48px; /* Adjust this width to match your overlay_logo.png preferences */
    height: auto;
    display: block;
}


/* Responsive Community Grid */
@media (max-width: 900px) {
    .community-grid {
        grid-template-columns: 1fr;
    }
    .wide-card {
        grid-column: span 1;
    }
    .spraywall-card {
        grid-row: span 1;
    }
    .session-hub-visual {
        flex-direction: column;
        gap: 20px;
    }
    .connection-line {
        transform: rotate(90deg);
    }
}
/* --- Logbook Card Design --- */
.logbook-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

/* UI Visual Area */
.lb-visual-section {
    flex: 1;
    display: flex;
    flex-direction: column;

    margin-top: 20px;
}

/* Tabs Top */
.lb-tabs-row {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.lb-tab {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.lb-tab.active {
    color: white;
    font-weight: 600;
}

.lb-tab.active::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0; right: 0;
    height: 2px;
    background: var(--brand-blue);
    border-radius: 2px;
}

/* The "Flutter" Card Mockup */
.lb-item-card {
    background: rgba(255,255,255,0.05); /* Slightly lighter than card bg */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    overflow: hidden;
    height: 100px; /* Fixed height for nice proportions */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}


/* Left Column: Info */
.lb-info-col {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0; 
}

.lb-date { font-size: 0.7rem; color: var(--text-muted); }

.lb-route-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.lb-meta-row { display: flex; align-items: center; gap: 6px; }

.lb-grade {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-blue);
    background: rgba(143, 161, 224, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

.lb-location {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* Right Column: Image */
.lb-img-col {
    width: 90px;
    height: 100%;
}

.lb-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom Text Content */
.lb-content-bottom .lb-header-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.icon-sq.small {
    width: 32px; height: 32px; font-size: 0.9rem; margin-bottom: 0;
}

.lb-content-bottom h3 { font-size: 1.1rem; margin: 0; }
.lb-content-bottom p { font-size: 0.85rem; margin: 0; }


/* 1. The Container for the list */
.training-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;             
    margin-top: 40px;    
    margin-bottom: 20px;  
    width: 100%;
}

/* 2. Individual Category Cards (Row Style) */
.train-cat-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 20px;
    
    /* Layout: Horizontal Row */
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    gap: 20px; /* Space between icon and text */
    
    width: 100%; /* Force full width */
    cursor: pointer;
    transition: all 0.2s ease-out;
}

/* Hover Effect: Highlight and slide right */
.train-cat-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--brand-orange);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Icon Styling */
.train-cat-item i {
    font-size: 1.25rem;
    color: var(--brand-orange);
    width: 24px;   /* Fixed width to ensure text aligns perfectly vertically */
    text-align: center;
    transition: 0.2s;
}

.train-cat-item:hover i {
    color: white;
    transform: scale(1.1);
}

/* Text Styling */
.train-cat-item span {
    font-size: 1rem;
    color: #e0e0e0;
    font-weight: 500;
}
/* --- Shoe Tracking Card Design --- */
.icon-sq .custom-icon-img {
    width: 24px;  
    height: 24px;
    object-fit: contain;

}
.shoe-tracking-card {
    justify-content: space-between; /* Spreads header and content */
}

.shoe-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.shoe-tag {
    font-size: 0.75rem;
    background: rgba(255,255,255,0.08); /* Subtle pill bg */
    padding: 4px 10px;
    border-radius: 12px;
    color: var(--text-muted);
    height: fit-content;
    font-weight: 500;
}

.shoe-model-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
}

.shoe-metrics-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px; 
}

.metric-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.metric-top i {
    width: 16px; 
    text-align: center; 
    margin-right: 4px;
}

.m-val { 
    color: white; 
    font-weight: 600; 
}

.metric-track {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 100px;
    overflow: hidden;
}

.metric-fill { 
    height: 100%; 
    border-radius: 100px; 
}

.metric-fill.orange { background: var(--brand-blue); }
.metric-fill.blue { background: var(--brand-orange); }
/* --- Detailed Statistics Card Dashboard --- */

.stats-custom-card {
    padding: 24px !important; /* Ensure padding matches design */
    background: #020b1a; /* Darker navy background for contrast */
}

/* Layout: Side-by-side Columns on Desktop */
.stats-internal-layout {
    display: flex;
    gap: 24px;
    height: 100%;
}

.stats-group {
    display: flex;
    flex-direction: column;
    flex: 1; /* Both columns take equal width initially */
}

.stats-group-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: white;
}

/* Container for small favorite cards */
.stats-cards-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* The Box Style (imitating screenshot cards) */
.stat-box {
    background: rgba(2, 37, 80, 0.4); /* Card bg */
    border: 1px solid var(--border-highlight);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Specific styling for favorites */
.grade-box { border-color: rgba(239, 123, 69, 0.3); }
.style-box { border-color: rgba(143, 161, 224, 0.3); flex-grow: 1; }
.full-height { height: 100%; justify-content: flex-start; }

/* Labels & Values */
.stat-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.stat-label { font-size: 0.85rem; color: var(--text-muted); }

.stat-main-val {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.text-white { color: white; }

.stat-sub-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.stat-highlight { font-weight: 700; color: white; }

/* Progress Bars */
.stat-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}
.stat-progress-fill { height: 100%; border-radius: 4px; }
.orange-fill { background: var(--brand-orange); }
.white-fill { background: white; }

/* Breakdown Section Styles */
.box-title {
    font-size: 1rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bd-item { display: flex; flex-direction: column; gap: 6px; }
.bd-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: white;
}
.bd-nums { color: var(--text-muted); font-size: 0.85rem; }
.bd-nums strong { color: white; margin-right: 4px; }

/* Status Colors */
.blue-1 { background: #5a8dee; }
.blue-2 { background: #8fa1e0; }
.blue-3 { background: #6b7cb3; }
.blue-4 { background: #48547a; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .stats-internal-layout {
        flex-direction: column;
    }
    .stats-cards-row {
        flex-direction: row; 
    }
    .stat-box { min-height: 140px; }
}
@media (max-width: 500px) {
    .stats-cards-row { flex-direction: column; }
}


/* --- Experts Carousel --- */
.trainer-carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;


}
.trainer-carousel-container::-webkit-scrollbar { display: none; } 

.trainer-carousel-item {
    flex: 0 0 85%; /* Card width relative to screen */
    max-width: 350px;
    scroll-snap-align: center;
    position: relative;
    display: flex; /* Ensures the child fills height */
}
.trainer-carousel-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}
.trainer-chevron {
    display: none;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    color: #EF7B45;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(143,161,224,0.13);
    z-index: 2;
    transition: background 0.2s;
}
.trainer-chevron:hover {
    background: #f5f5f5;
}
@media (min-width: 900px) {
    .trainer-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .trainer-chevron.left {
        left: -20px;
    }
    .trainer-chevron.right {
        right: -20px;
    }
    .trainer-carousel-wrapper {
        margin: 0 40px;
    }
}

/* Update Card to accommodate Description */
.expert-profile {
    width: 100%;
    min-height: 280px; /* Force taller card for description */
    display: flex;
    flex-direction: column; /* Stack Image Top, Text Bottom */
    justify-content: flex-start;
    align-items: flex-start;
    padding: 24px;
    gap: 16px;
}
.profile-img img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border-highlight);
    display: block;
}
.expert-profile .profile-img {
    width: 70px; 
    height: 70px;
    margin-bottom: 4px; /* Space before text */
}

.profile-info {
    width: 100%;
}

/* Description Text Styling */
.trainer-desc {
    display: block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-highlight); /* Separator line */
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
}
/* --- Scroll to Top Button --- */
#scrollToTopBtn {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 1200;
    background: var(--brand-navy);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
#scrollToTopBtn:hover {
    background: var(--brand-gradient-hover);
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}

/* --- 9. Footer --- */
footer { border-top: 1px solid var(--border-subtle); padding: 60px 0 30px; background: #010205; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-left p { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; }
.store-buttons-row.small { margin: 0; }
.store-btn.small { padding: 6px 16px; font-size: 0.8rem; }
.socials { display: flex; gap: 16px; margin-bottom: 10px; justify-content: flex-end; }
.socials a { color: var(--text-muted); font-size: 1.2rem; }
.copyright { font-size: 0.8rem; color: #555; }



/* --- Responsive --- */
@media (max-width: 900px) {
    .hero-layout, .pricing-wrapper { grid-template-columns: 1fr; text-align: center; }
        .hero-visual { 
        margin-top: 40px; 
        background: transparent; 
        height: auto; 
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
        /* NEW: Ensures the phone image resizes nicely on mobile */
    .main-phone img {
        max-width: 80vw; /* Scales with screen width */
        width: 300px;    /* Max nice width */
        height: auto;
        margin: 0 auto;
    }
    .store-buttons-row, .stats-row { justify-content: center; }
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .bento-card.large, .bento-card.wide { grid-column: span 1; grid-row: span 1; }
    .nav-links { display: none; }
    .menu-btn { display: block; }
    .experts-row { grid-template-columns: 1fr 1fr; }
    .footer-content { flex-direction: column; gap: 30px; text-align: center; }
        .pricing-options-row {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }
    .pricing-option {
        max-width: 100%;
    }
}
@media (min-width: 900px) {
    .experts-row {
        justify-content: flex-start;
        gap: 32px;
    }
    .expert-profile {
        flex: 1 1 calc(33.333% - 32px);
        max-width: 320px;
        min-width: 0;
    }
    /* Center last row if not full */
    .experts-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* Tablet: 2 per row */
@media (min-width: 600px) and (max-width: 899px) {
    .experts-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .expert-profile {
        max-width: 100%;
    }
}

/* Mobile: 1 per row, full width */
@media (max-width: 599px) {
    .experts-row {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .expert-profile {
        max-width: 100%;
        min-width: 0;
    }
}