/* =====================================================
   VUEAX — Responsive Layer (premium edition)
   Drawer kicks in below 1280px so the navbar always stays one row.
   Goal: NO horizontal scroll on any device.
   ===================================================== */

/* Universal anti-overflow safety net */
img, svg, video, canvas { max-width: 100%; }
.section, .container, .hero { max-width: 100vw; }

/* ===== ≤ 1480px (compact desktop nav) ===== */
@media (max-width: 1480px) {
    .nav-list { gap: 0; }
    .nav-link { padding: 7px 9px; font-size: 0.8rem; }
}

/* ===== ≤ 1280px (tablet landscape — switch to drawer) ===== */
@media (max-width: 1280px) {
    .container { max-width: 100%; padding: 0 32px; }
    .section { padding: 96px 0; }

    /* Yalnız yuxarı navbar-dakı nav menyu siyahısını gizlədirik (drawer ilə əvəz olunur) */
    .site-header .nav-list { display: none; }

    /* Mobil menyunun içindəki siyahını mütləq göstəririk */
    .mobile-drawer .nav-list { display: flex; }
    
    /* iOS Safari-də alt hissənin kəsilməməsi üçün hündürlüyü dinamik edirik */
    .mobile-drawer { height: 100dvh; }

    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .nav-tools { gap: 8px; }

    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; margin-inline: auto; }
    .pricing-grid.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: 18px; }
    .brokers-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .hero-inner { gap: 36px; }
    .hero-right { height: 440px; }
}

/* ===== ≤ 1024px (tablet landscape) ===== */
@media (max-width: 1024px) {
    .trader-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid, .indicators-grid { grid-template-columns: repeat(2, 1fr); }
    .edu-layout { grid-template-columns: 1fr; gap: 50px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .modal-shell { padding: 28px 26px; max-width: 92vw; }
    .ea-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ea-modal-grid { grid-template-columns: 1fr; }
    .trader-modal-grid .stats-row { grid-template-columns: repeat(2, 1fr); }
    .brokers-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-inner { grid-template-columns: 1fr; gap: 50px; text-align: left; }
    .hero-right { max-width: 560px; margin: 0 auto; height: 420px; width: 100%; }
    .hero-stats { max-width: 720px; }
}

/* ===== ≤ 992px (tablet) ===== */
@media (max-width: 992px) {
    :root { --header-h: 70px; }

    .brand .brand-mark { width: 32px; height: 32px; }
    .brand { font-size: 1.1rem; }

    .section { padding: 80px 0; }
    .section-head { margin-bottom: 44px; }

    .hero { min-height: auto; padding: calc(var(--header-h) + 50px) 0 60px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 50px; max-width: 100%; }

    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-visual { max-width: 460px; margin: 0 auto; aspect-ratio: 4/3; }

    .ct-intro { grid-template-columns: 1fr; gap: 40px; }
    .ct-image { max-width: 600px; margin: 0 auto; }

    .contact-grid { grid-template-columns: 1fr; gap: 30px; }

    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-grid.pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

    .results-toolbar { flex-direction: column; align-items: stretch; }
    .results-summary { justify-content: flex-start; }
    .results-chart-head { flex-direction: column; align-items: stretch; }
    .results-chart-canvas { height: 300px; }
}

/* ===== ≤ 820px ===== */
@media (max-width: 820px) {
    .hero-sentences { font-size: clamp(1.6rem, 5.4vw, 2.4rem); min-height: 3.8em; }
    .hero-actions .btn { padding: 12px 22px; font-size: 0.88rem; }
    .edu-hex-grid { grid-template-columns: 1fr 1fr; }

    .section-divider { height: 60px; }
    .section-divider .badge-icon { margin: 0 14px; width: 44px; height: 44px; }

    .ct-info-banner { padding: 26px 22px; }
    .ct-info-banner h3 { font-size: 1.3rem; }

    .form-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 26px; }

    .brokers-grid { grid-template-columns: repeat(2, 1fr); }
    .broker-card { min-height: 200px; padding: 22px 18px; }

    .hero-right { height: 380px; }
    .hero-card.h-roi { width: 220px; }
    .hero-card.h-pair { width: 200px; }
    .hero-card.h-signal { width: 240px; }

    .trader-modal-grid .stats-row { grid-template-columns: 1fr; }
    .ea-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ea-quick-grid { grid-template-columns: 1fr; }
}

/* ===== ≤ 768px (mobile landscape / small tablet) ===== */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .section { padding: 64px 0; }

    h1, h2, h3 { letter-spacing: -0.015em; }
    .section-title { font-size: clamp(1.6rem, 5.4vw, 2.2rem); }
    .section-lead { font-size: 0.95rem; margin-bottom: 36px; }

    .hero-sentences { font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.15; min-height: 4em; }

    .trader-grid { grid-template-columns: 1fr; gap: 18px; }
    .product-grid, .indicators-grid { grid-template-columns: 1fr; gap: 20px; }
    .modal-shell { padding: 26px 22px; border-radius: var(--radius-lg); }
    .modal-head h3 { font-size: 1.2rem; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; text-align: center; align-items: center; }

    .price-card { padding: 30px 24px; }
    .price-amount .value { font-size: 2.8rem; }

    .analysis-stage { padding: 18px; border-radius: var(--radius-lg); }
    .analysis-tab { padding: 8px 14px; font-size: 0.78rem; }
    .comparison-wrap { aspect-ratio: 4/3; }
    .comparison .label { font-size: 0.62rem; padding: 4px 10px; top: 10px; }
    .comparison .label.before { left: 10px; }
    .comparison .label.after { right: 10px; }
    .comparison .handle .grip { width: 38px; height: 38px; }

    .hero-right { height: 340px; max-width: 460px; }
    .hero-card.h-roi { width: 200px; padding: 14px 16px; }
    .hero-card.h-roi .hc-value { font-size: 1.3rem; }
    .hero-card.h-pair { width: 180px; padding: 14px 16px; }
    .hero-card.h-signal { width: 220px; padding: 14px 16px; right: 30px; }

    .results-table { font-size: 0.78rem; min-width: 700px; }
    .results-table thead th, .results-table tbody td { padding: 10px 12px; }
}

/* ===== ≤ 576px (mobile) ===== */
@media (max-width: 576px) {
    .container { padding: 0 16px; }
    .section { padding: 54px 0; }
    .section-head { margin-bottom: 34px; }

    .nav-inner { gap: 8px; }
    .nav-tools .lang-switch { display: none; } /* drawer one takes over */
    .nav-tools { gap: 6px; }
    .brand .brand-mark { width: 30px; height: 30px; }
    .brand { font-size: 1.1rem; }
    .brand .brand-text { letter-spacing: -0.02em; }

    .hero { padding: calc(var(--header-h) + 30px) 0 40px; }
    .hero-eyebrow { font-size: 0.62rem; padding: 6px 14px; letter-spacing: 0.18em; }
    .hero-sentences { font-size: clamp(1.4rem, 7vw, 1.85rem); line-height: 1.18; min-height: 4.2em; }
    .hero-sub { font-size: 0.95rem; margin-bottom: 1.6rem; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 36px; gap: 10px; }
    .hero-stat { padding: 14px 10px; }
    .hero-stat-value { font-size: 1.4rem; }
    .hero-stat-label { font-size: 0.62rem; }
    .hero-scroll { display: none; }
    .hero-right { height: 300px; }
    .hero-card.h-roi { right: 8px; top: 16px; }
    .hero-card.h-pair { left: 8px; top: 150px; }
    .hero-card.h-signal { right: 30px; bottom: 0; }

    .eyebrow { font-size: 0.65rem; padding: 5px 12px; letter-spacing: 0.14em; }

    .pricing-toggle { width: 100%; max-width: 360px; }
    .pricing-toggle button { flex: 1; padding: 9px 8px; font-size: 0.72rem; }
    .pricing-toggle button .save { display: none; }

    .price-card { padding: 26px 20px; }
    .price-name { font-size: 1.2rem; }
    .price-amount .value { font-size: 2.4rem; }
    .price-icon { width: 50px; height: 50px; }
    .price-icon .material-symbols-outlined { font-size: 28px; }

    .ct-info-banner { padding: 22px 18px; border-radius: var(--radius); }
    .ct-info-banner h3 { font-size: 1.15rem; }
    .ct-banner-pills { gap: 6px; }
    .ct-banner-pills .pill { font-size: 0.72rem; padding: 6px 12px; }
    .ct-feature { padding: 14px; gap: 12px; }
    .ct-feature .icon-box { width: 42px; height: 42px; }

    .trader-card { padding: 18px; }
    .trader-name { font-size: 0.95rem; }
    .trader-pair { font-size: 0.7rem; }
    .trader-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .trader-stat { padding: 6px 2px; }
    .trader-stat .v { font-size: 0.82rem; }
    .trader-stat .l { font-size: 0.55rem; }
    .copy-btn { padding: 7px 14px; font-size: 0.72rem; }

    .faq-cats { gap: 6px; }
    .faq-cat { padding: 8px 14px; font-size: 0.75rem; }
    .faq-cat .material-symbols-outlined { font-size: 16px; }
    .faq-q { padding: 16px; font-size: 0.92rem; gap: 10px; }
    .faq-q .toggle-ico { width: 28px; height: 28px; }
    .faq-item.open .faq-a { padding: 0 16px 18px; max-height: 600px; }
    .faq-q-icon { display: none; }

    .contact-form { padding: 22px 18px; }
    .contact-card { padding: 18px; gap: 12px; }
    .contact-card .icon { width: 42px; height: 42px; }
    .contact-card h5 { font-size: 0.95rem; }

    .analysis-tabs { gap: 6px; }
    .analysis-tab { padding: 7px 12px; font-size: 0.72rem; }
    .analysis-pair { font-size: 0.95rem; }
    .analysis-foot { flex-direction: column; align-items: flex-start; }

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-brand .brand { justify-content: center; }
    .footer-brand p { margin: 0 auto 16px; }
    .footer-socials { justify-content: center; }
    .footer-col ul { justify-items: center; }
    .footer-col ul a { justify-content: center; }

    .float-actions { right: 14px; bottom: 16px; }
    .float-wa { width: 54px; height: 54px; }
    .float-wa svg, .float-wa .material-symbols-outlined { font-size: 24px; }
    #scrollTopBtn { left: 14px; bottom: 16px; width: 44px; height: 44px; }
    #scrollTopBtn .material-symbols-outlined { font-size: 22px; }

    .ticker-item { font-size: 0.74rem; }
    .ticker-track { gap: 28px; }

    .brokers-grid { grid-template-columns: 1fr; }
    /* flex-direction row yerinə column edirik və ölçüləri normallaşdırırıq */
    .broker-card { min-height: auto; flex-direction: column; align-items: stretch; padding: 20px; }
    .broker-card .broker-foot { padding-top: 14px; border-top: 1px dashed var(--c-border); margin-left: 0; width: 100%; }

    .ea-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ea-stat-card .v { font-size: 1.2rem; }
    .modal-shell { padding: 22px 18px; }
    .modal-head { gap: 12px; }
    .modal-head .avatar { width: 48px; height: 48px; }
    .modal-head h3 { font-size: 1.1rem; }
    .modal-foot { justify-content: stretch; flex-direction: column; }
    .modal-foot .btn { width: 100%; }
    .modal-chart-wrap { height: 220px; }

    .results-pagination { justify-content: center; }
    .results-pagination .page-info { width: 100%; text-align: center; order: 2; }
    .results-pagination .page-controls { order: 1; }
    .results-table { min-width: 640px; }
}

/* ===== ≤ 420px ===== */
@media (max-width: 420px) {
    .nav-tools .lang-btn { padding: 6px 8px; font-size: 0.7rem; }
    .nav-tools .lang-btn .flag { width: 18px; height: 11px; }
    .hero-sentences { font-size: clamp(1.3rem, 7.5vw, 1.65rem); }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .pricing-toggle button { font-size: 0.65rem; padding: 8px 4px; }
    .price-amount .value { font-size: 2.1rem; }
    .price-amount .currency { font-size: 1.1rem; }
    .ct-banner-pills .pill { font-size: 0.66rem; padding: 5px 10px; }
    .hero-card { font-size: 0.85em; }
    .hero-card.h-pair { display: none; }
    .results-summary { font-size: 0.74rem; gap: 10px; }
}

/* ===== ≤ 360px ===== */
@media (max-width: 360px) {
    .container { padding: 0 12px; }
    .section { padding: 44px 0; }
    .hero-sentences { font-size: 1.3rem; }
    .hero-sub { font-size: 0.88rem; }
    .price-card { padding: 22px 16px; }
    .contact-form { padding: 18px 14px; }
    .form-control { padding: 12px 14px; font-size: 0.9rem; }
    .btn { padding: 12px 18px; font-size: 0.85rem; }
    .trader-stats { grid-template-columns: repeat(2, 1fr); }
    .results-table { min-width: 520px; }
    .results-table thead th, .results-table tbody td { padding: 8px 10px; font-size: 0.72rem; }
}

/* ===== ≤ 320px (extra-tiny) ===== */
@media (max-width: 320px) {
    .container { padding: 0 10px; }
    .hero-sentences { font-size: 1.15rem; }
    .section-title { font-size: 1.4rem; }
    .nav-toggle .material-symbols-outlined { font-size: 26px; }
    .brand .brand-mark { width: 28px; height: 28px; }
    .brand { font-size: 1rem; }
    .pricing-toggle button { font-size: 0.6rem; }
    .lang-btn { padding: 5px 7px; font-size: 0.66rem; }
    .lang-btn .flag { width: 16px; height: 10px; }
}

/* ===== Tall phones / aspect-ratio tweaks ===== */
@media (max-height: 600px) and (orientation: landscape) {
    .hero { min-height: 120vh; padding-top: calc(var(--header-h) + 24px); }
    .hero-stats { margin-top: 22px; }
}

/* =====================================================
   BLOG — responsive layers
   ===================================================== */

/* Latest-blog strip on home: 3 → 2 → 1 */
@media (max-width: 1024px) {
    .latest-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .latest-blog-grid { grid-template-columns: 1fr; }
}

/* Blog listing: 2-col by default → 1-col on phones */
@media (max-width: 1180px) {
    .blog-layout { grid-template-columns: 260px 1fr; gap: 24px; }
}
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-side { position: static; }
}
@media (max-width: 640px) {
    .blog-feed { grid-template-columns: 1fr; gap: 16px; }
}

/* Post page tweaks */
@media (max-width: 768px) {
    .post-title { font-size: clamp(1.4rem, 6vw, 2rem); }
    .post-body { font-size: 0.98rem; }
    .post-body h2 { font-size: 1.4rem; }
    .post-body h3 { font-size: 1.18rem; }
    .post-body .post-chart canvas { height: 260px !important; }
    .post-body-card { padding: 22px 20px; }
    .blog-hero { padding-top: calc(var(--header-h) + 28px); }
    .blog-section--post { padding-top: calc(var(--header-h) + 24px); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .ticker-track { animation: none; }
    .hero-scroll { animation: none; }
    .hero-orb, .hero-card { animation: none !important; }
    .float-wa { animation: none !important; }
    .float-wa::before, .float-wa::after { display: none; }
}

/* ===== Print ===== */
@media print {
    .site-header, .float-actions, #scrollTopBtn, .hero-video-wrap, .hero-overlay, .hero-grid, .hero-orb { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding: 20px 0; page-break-inside: avoid; }
}

/* ===== High DPI fine-tuning ===== */
@media (min-resolution: 2dppx) {
    .product-thumb img, .ct-image img, .about-visual img { image-rendering: -webkit-optimize-contrast; }
}

/* ===== Ultra-wide (≥ 1600px) ===== */
@media (min-width: 1600px) {
    .container { max-width: 1380px; }
    .hero-sentences { font-size: 3.6rem; }
}