/* Responsive & Aesthetic Overrides - v2026.03.29 — fix GEO sections layout */

:root {
    --primary-glow: rgba(16, 185, 129, 0.4);
    --secondary-glow: rgba(99, 102, 241, 0.4);
    --dark-surface-translucent: rgba(30, 41, 59, 0.85);
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .feature-gallery-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* --- Base Reset --- */
    body {
        font-size: 16px;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .container, .hero, .section,
    section:not(.geo-quick-facts):not(.geo-comparison), div[class*="section"],
    main, article {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        box-sizing: border-box !important;
    }

    /* --- Override ALL inline max-width (only max-width, not width) --- */
    [style*="max-width: 1200"],
    [style*="max-width: 1100"],
    [style*="max-width: 1000"],
    [style*="max-width: 900"],
    [style*="max-width: 800"],
    [style*="max-width: 750"],
    [style*="max-width: 700"],
    [style*="max-width: 600"],
    [style*="max-width: 560"],
    [style*="max-width: 500"],
    [style*="max-width: 480"],
    [style*="max-width:1200"],
    [style*="max-width:1100"],
    [style*="max-width:1000"],
    [style*="max-width:900"],
    [style*="max-width:800"],
    [style*="max-width:750"],
    [style*="max-width:700"],
    [style*="max-width:600"],
    [style*="max-width:560"],
    [style*="max-width:500"],
    [style*="max-width:480"] {
        max-width: 100% !important;
    }

    /* --- Override inline fixed widths (use ;width to avoid matching max-width) --- */
    /* Note: ;width only works when width is NOT the first property. For safety,
       also target by class or use broader approach with max-width:100% above */
    .hero-subtitle,
    .hero-image,
    .indicator-content,
    .showcase-image-container,
    .gallery-legal-disclaimer {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Broad inline width override — sets max-width to constrain but doesn't force width */
    [style*="width: 1400"],
    [style*="width: 1280"],
    [style*="width: 1200"],
    [style*="width: 1100"],
    [style*="width: 1000"],
    [style*="width: 900"],
    [style*="width: 800"],
    [style*="width: 768"],
    [style*="width: 750"],
    [style*="width: 700"],
    [style*="width: 600"],
    [style*="width: 560"],
    [style*="width: 500"],
    [style*="width: 480"],
    [style*="width:1400"],
    [style*="width:1200"],
    [style*="width:1100"],
    [style*="width:1000"],
    [style*="width:900"],
    [style*="width:800"],
    [style*="width:768"],
    [style*="width:700"],
    [style*="width:600"],
    [style*="width:500"],
    [style*="width:480"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Override inline grids to 1 column (except auto-fit/auto-fill) --- */
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* --- Grids by class name — force single column --- */
    .feature-gallery-grid,
    .gallery-grid,
    .pricing-grid,
    .stats-grid,
    .value-grid,
    .features-grid,
    .footer-grid,
    .data-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Flex containers — force wrapping --- */
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    .hero-cta-group,
    .hero-stats,
    .showcase-stats {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    /* --- Typography Scaling --- */
    h1, .hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    h2, .section-header h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    /* --- Images — override HTML width/height attributes --- */
    img,
    img[width],
    img[height] {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* --- Popup/toast images — fixed size on mobile (more specific, wins over above) --- */
    .persuasion-toast img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }

    .floating-comet img {
        width: 70px !important;
        height: 70px !important;
        max-width: 70px !important;
    }

    .social-proof-popup img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
    }

    /* --- Hero sections — fix height clipping --- */
    .hero,
    [class*="hero"],
    .hero-content,
    .hero-showcase,
    .edge-society-banner,
    .power-banner,
    .power-banner-executor,
    .secret-banner {
        height: auto !important;
        min-height: unset !important;
    }

    .hero-showcase-img {
        width: 100% !important;
        height: auto !important;
    }

    /* --- Override inline excessive padding --- */
    [style*="padding: 100px"],
    [style*="padding:100px"],
    [style*="padding: 80px"],
    [style*="padding: 60px"],
    [style*="padding:80px"],
    [style*="padding:60px"] {
        padding: 32px 16px !important;
    }

    .indicator-section {
        padding: 32px 16px !important;
    }

    [style*="padding: 50px"],
    [style*="padding:50px"] {
        padding: 28px 16px !important;
    }

    [style*="padding: 40px"],
    [style*="padding:40px"] {
        padding: 24px 14px !important;
    }

    .custom-cta,
    .cta-section,
    .showcase-cta {
        padding: 32px 16px !important;
    }

    /* --- Override inline excessive margins --- */
    [style*="margin: 40px auto"],
    [style*="margin: 60px auto"],
    [style*="margin:40px auto"],
    [style*="margin:60px auto"] {
        margin: 20px auto !important;
    }

    /* --- Cards — full width stacking --- */
    .pricing-card,
    .value-card,
    .feature-card,
    .order-card,
    .card-3d {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

    .bundle-section {
        flex-direction: column !important;
        padding: 24px 16px !important;
    }

    /* --- Additional flex containers — force wrap/stack --- */
    .steps-container,
    .bundle-icons,
    .feature-icon,
    .order-types {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    /* --- Social proof popup — fit mobile --- */
    .social-proof-popup {
        width: 90% !important;
        max-width: 320px !important;
        flex-wrap: wrap !important;
    }

    /* --- Feature overlay — reflow --- */
    .feature-overlay {
        position: relative !important;
        width: 100% !important;
    }

    /* --- Overflow hidden containers — prevent clipping on mobile --- */
    [style*="overflow: hidden"],
    [style*="overflow:hidden"] {
        overflow: visible !important;
    }

    /* Preserve overflow:hidden where needed */
    body,
    .image-lightbox,
    .btn-primary.glow,
    .navbar {
        overflow-x: hidden !important;
    }

    /* --- Feature gallery items --- */
    .feature-gallery-item,
    .gallery-item {
        width: 100% !important;
        min-width: unset !important;
    }

    /* --- Stats items — stack and center --- */
    .stat-item,
    .counter-stat {
        width: 100% !important;
        text-align: center !important;
    }

    /* --- Navigation --- */
    .nav-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-links {
        display: none !important;
    }

    .hamburger-menu {
        display: flex !important;
    }

    .nav-cta {
        display: none !important;
    }

    .navbar {
        padding: 8px 12px !important;
    }

    /* --- Buttons — full width --- */
    .btn-primary, .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* --- FAQ — prevent clipping --- */
    .faq-container,
    .faq-item,
    .faq-answer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* --- Modals & Popups --- */
    .modal-content,
    .popup-content,
    .exit-popup-content {
        width: 92% !important;
        max-width: 92% !important;
        padding: 24px 16px !important;
        margin: 20px auto !important;
    }

    /* --- Tables — horizontal scroll wrapper --- */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* GEO sections — preserve designed layout on mobile */
    .geo-quick-facts {
        padding: 40px 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .geo-quick-facts dl {
        grid-template-columns: 1fr !important;
    }

    .geo-comparison {
        padding: 40px 16px !important;
    }

    .geo-comparison table {
        display: table !important;
        width: 100% !important;
        min-width: unset !important;
    }

    /* --- Pricing features list --- */
    .pricing-features {
        padding: 0 8px !important;
    }

    .pricing-features li {
        font-size: 14px !important;
    }

    /* --- Indicator showcase --- */
    .indicator-showcase,
    .indicator-gallery,
    .feature-showcase {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* --- Secret/Power banners --- */
    .secret-banner-content {
        flex-direction: column !important;
        padding: 24px 16px !important;
        text-align: center !important;
    }

    /* --- Persuasion toast — reposition --- */
    .persuasion-toast {
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important;
        max-width: calc(100% - 20px) !important;
        width: auto !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
    }

    .persuasion-toast .toast-title {
        font-size: 16px !important;
    }

    .social-proof-popup {
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100% - 20px) !important;
        width: auto !important;
        font-size: 14px !important;
    }

    /* --- Image lightbox --- */
    .image-lightbox img {
        max-width: 95% !important;
        max-height: 70vh !important;
    }

    /* --- Slide-in CTA hide on small screens --- */
    .slide-in-cta {
        display: none !important;
    }

    /* --- Footer --- */
    .footer-bottom {
        padding: 24px 16px !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-brand {
        text-align: center !important;
    }

    /* --- Lang toggle --- */
    .lang-toggle {
        font-size: 14px !important;
    }

    /* --- Constrain decorative absolute elements on mobile --- */
    /* Prevent overflow but don't hide (might contain visible gradients) */
    [style*="position: absolute"][style*="pointer-events: none"],
    [style*="position: absolute"][style*="pointer-events:none"],
    [style*="position:absolute"][style*="pointer-events: none"],
    [style*="position:absolute"][style*="pointer-events:none"] {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    /* Hide oversized floating decorations (200%+ width/height) */
    [style*="position: absolute"][style*="width: 200%"],
    [style*="position: absolute"][style*="height: 200%"],
    [style*="position:absolute"][style*="width: 200%"],
    [style*="position:absolute"][style*="height: 200%"] {
        display: none !important;
    }

    /* --- Inline fixed widths: smaller sizes missed --- */
    [style*="width: 400"],
    [style*="width: 350"],
    [style*="width: 300"],
    [style*="width: 280"],
    [style*="width: 250"],
    [style*="width:400"],
    [style*="width:350"],
    [style*="width:300"],
    [style*="width:280"],
    [style*="width:250"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Min-width overrides --- */
    [style*="min-width: 350"],
    [style*="min-width: 300"],
    [style*="min-width: 280"],
    [style*="min-width: 250"],
    [style*="min-width: 220"],
    [style*="min-width:350"],
    [style*="min-width:300"],
    [style*="min-width:280"],
    [style*="min-width:250"],
    [style*="min-width:220"] {
        min-width: unset !important;
        width: 100% !important;
    }

    /* --- Preserve auto-fit grids (they self-adapt) --- */
    [style*="grid-template-columns: repeat(auto-fit"],
    [style*="grid-template-columns: repeat(auto-fill"],
    [style*="grid-template-columns:repeat(auto-fit"],
    [style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
    }
}

/* ============================================
   SMALL PHONE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    h1, .hero h1 {
        font-size: 24px !important;
    }

    h2, .section-header h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    .container, .hero, .section,
    section:not(.geo-quick-facts):not(.geo-comparison), main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .geo-quick-facts {
        padding: 32px 12px !important;
    }

    .geo-comparison {
        padding: 32px 12px !important;
    }

    .navbar {
        top: 0 !important;
        padding: 6px 10px !important;
    }

    /* Even tighter padding overrides */
    [style*="padding: 80px"],
    [style*="padding: 60px"],
    [style*="padding: 50px"],
    [style*="padding:80px"],
    [style*="padding:60px"],
    [style*="padding:50px"] {
        padding: 24px 12px !important;
    }

    .btn-primary, .btn-secondary {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    .pricing-card {
        padding: 20px 12px !important;
    }

    /* Stats grid single column */
    .stats-grid,
    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    /* Popup even smaller */
    .exit-popup-content,
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 20px 12px !important;
    }
}

/* ============================================
   EXTRA SMALL (max-width: 360px) - iPhone SE
   ============================================ */
@media (max-width: 360px) {
    h1, .hero h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    .container, .hero, .section,
    section:not(.geo-quick-facts):not(.geo-comparison), main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .geo-quick-facts,
    .geo-comparison {
        padding: 24px 10px !important;
    }

    .btn-primary, .btn-secondary {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   BLOG-SPECIFIC MOBILE FIXES
   ============================================ */

/* Blog index & posts share these classes/elements */
@media (max-width: 768px) {
    /* --- Blog body padding --- */
    body {
        padding: 16px !important;
    }

    /* --- Blog page wrapper (2-col grid → 1-col) --- */
    .page-wrapper {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 16px !important;
    }

    /* --- Blog card grid — force single column --- */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .blog-card {
        width: 100% !important;
        min-width: unset !important;
    }

    /* --- Blog lead magnet hero — stack vertically --- */
    [style*="min-width: 300px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    [style*="padding: 40px"] {
        padding: 20px 16px !important;
    }

    [style*="padding: 30px"] {
        padding: 16px !important;
    }

    [style*="gap: 60px"] {
        gap: 24px !important;
    }

    [style*="gap: 30px"] {
        gap: 16px !important;
    }

    /* --- Blog nav dropdown — touch friendly --- */
    .nav-dropdown .dropdown-content {
        min-width: 180px !important;
    }

    .top-nav {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nav-btn {
        font-size: 14px !important;
    }

    /* --- Blog sidebar cards --- */
    .sidebar-card {
        padding: 20px 16px !important;
    }

    /* --- Blog article typography --- */
    article {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    article h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    article h2 {
        font-size: 22px !important;
    }

    /* --- Blog CTA buttons --- */
    .btn-cta {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* --- Blog footer --- */
    footer {
        padding: 32px 16px !important;
    }

    footer [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    footer [style*="min-width: 250"] {
        min-width: 0 !important;
    }
}

@media (max-width: 480px) {
    body {
        padding: 12px !important;
    }

    .page-wrapper {
        padding: 12px !important;
        gap: 16px !important;
    }

    article h1 {
        font-size: 22px !important;
    }

    article h2 {
        font-size: 19px !important;
    }

    article {
        font-size: 15px !important;
    }

    .sidebar-card {
        padding: 16px 12px !important;
    }

    footer {
        padding: 24px 12px !important;
    }
}

@media (max-width: 360px) {
    article h1 {
        font-size: 20px !important;
    }

    .top-nav {
        padding: 8px 10px !important;
    }
}

/* Rich Aesthetics Improvements */

/* Glassmorphism for Cards */
.value-card, .pricing-card, .feature-card {
    background: var(--dark-surface-translucent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Enhanced Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button Glow Effects */
.btn-primary.glow {
    position: relative;
    overflow: hidden;
}

.btn-primary.glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    transform: rotate(45deg);
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Footer Version Styling */
.footer-version {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
    margin-top: 2rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 1rem;
}