/* ═══════════════════════════════════════════════════════════════
   ZYNQOR — Large Screen Responsive System
   Additive-only. Only min-width queries. Zero effect below 1920px.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   BREAKPOINT 0: Large Laptops / Scaled Big Screens (≥ 1440px)
   Target: Big monitors with 125-150% Windows scaling
   ───────────────────────────────────────────── */
@media (min-width: 1440px) {
    .footer.fp-footer-overlay {
        padding-top: 8px !important;
    }

    .footer-affiliate-cta {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }
}


/* ─────────────────────────────────────────────
   BREAKPOINT 1: Full HD+ (≥ 1920px)
   Target: 24"–27" monitors, 1920×1080
   ───────────────────────────────────────────── */
@media (min-width: 1920px) {

    /* ── Container ── */
    :root {
        --container-max: 1600px;
        --section-padding: clamp(100px, 8vw, 160px);
    }

    .container {
        padding: 0 clamp(32px, 4vw, 100px);
    }

    /* ── Typography ── */
    .hero-title {
        font-size: clamp(48px, 4.2vw, 68px);
    }

    .section-title {
        font-size: clamp(38px, 3.2vw, 52px);
    }

    .section-subtitle {
        font-size: 18px;
    }

    .section-header {
        max-width: 800px;
    }

    /* ── Hero ── */
    .hero-content {
        max-width: 700px;
    }

    .hero .container {
        gap: 80px;
    }

    /* ── Grids ── */
    .features-grid {
        gap: 24px;
    }

    .pricing-grid {
        gap: 28px;
    }

    .testimonials-grid {
        gap: 32px;
    }

    /* ── Cards ── */
    .feature-card {
        padding: 28px;
    }

    .pricing-card {
        padding: 36px;
    }

    .testimonial-card {
        padding: 32px;
    }

    /* ── FAQ ── */
    .faq-grid {
        max-width: 900px;
    }

    .faq-question {
        font-size: 18px;
        padding: 18px 0;
    }

    /* ── Stats ── */
    .stat-number {
        font-size: 48px;
    }

    /* ── Navbar ── */
    .nav-links a {
        font-size: 15px;
    }

    /* ── Logo Scroll ── */
    .platform-logo {
        font-size: 15px;
    }

    .logo-track {
        gap: 70px;
    }

    /* ── Plan Preview ── */
    .plan-preview {
        max-width: 760px;
    }

    .plan-preview-card {
        padding: 24px 16px;
    }

    .plan-preview-price {
        font-size: 32px;
    }

    /* ── Affiliate: Commission Panel ── */
    .aff-commission-grid {
        max-width: 1100px;
        gap: 28px;
    }

    .aff-commission-card {
        padding: 40px 32px;
    }

    .aff-card-price {
        font-size: 52px;
    }

    .aff-earn-value {
        font-size: 28px;
    }

    /* ── Affiliate: Hero ── */
    .aff-hero h1 {
        font-size: clamp(56px, 6vw, 80px);
    }

    .aff-hero-sub {
        font-size: 19px;
    }

    /* ── Guide Styles ── */
    .guide-content {
        max-width: 900px;
    }

    /* ── Footer ── */
    .footer.fp-footer-overlay {
        zoom: 1.1;
        padding-top: 8px !important;
    }

    .footer-affiliate-cta {
        margin-top: 0 !important;
    }
}


/* ─────────────────────────────────────────────
   BREAKPOINT 2: QHD (≥ 2560px)
   Target: 27"–32" monitors, 2560×1440
   ───────────────────────────────────────────── */
@media (min-width: 2560px) {

    /* ── Container ── */
    :root {
        --container-max: 1800px;
        --section-padding: clamp(120px, 8vw, 200px);
    }

    .container {
        padding: 0 clamp(40px, 4vw, 120px);
    }

    /* ── Typography ── */
    .hero-title {
        font-size: clamp(56px, 3.8vw, 80px);
    }

    .section-title {
        font-size: clamp(44px, 3vw, 64px);
    }

    .section-subtitle {
        font-size: 20px;
    }

    .section-header {
        max-width: 900px;
    }

    .hero-subtitle {
        font-size: 22px;
    }

    /* ── Hero ── */
    .hero-content {
        max-width: 800px;
    }

    .hero .container {
        gap: 100px;
    }

    .hero h1 {
        font-size: clamp(64px, 3.8vw, 88px);
    }

    /* ── Grids ── */
    .features-grid {
        gap: 32px;
    }

    .pricing-grid {
        gap: 36px;
    }

    .testimonials-grid {
        gap: 40px;
    }

    /* ── Cards ── */
    .feature-card {
        padding: 32px;
        border-radius: 16px;
    }

    .pricing-card {
        padding: 44px;
        border-radius: 20px;
    }

    .testimonial-card {
        padding: 40px;
        border-radius: 18px;
    }

    /* ── FAQ ── */
    .faq-grid {
        max-width: 1000px;
    }

    .faq-question {
        font-size: 19px;
        padding: 20px 0;
    }

    .faq-answer p {
        font-size: 16px;
    }

    /* ── Stats ── */
    .stat-number {
        font-size: 56px;
    }

    .stat-text {
        font-size: 12px;
    }

    /* ── Navbar ── */
    .navbar .container {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .nav-links a {
        font-size: 16px;
    }

    .nav-links {
        gap: 36px;
    }

    .btn-download {
        font-size: 15px;
        padding: 12px 28px;
    }

    /* ── Logo Scroll ── */
    .platform-logo {
        font-size: 16px;
    }

    .logo-track {
        gap: 80px;
    }

    /* ── Plan Preview ── */
    .plan-preview {
        max-width: 860px;
        gap: 20px;
    }

    .plan-preview-card {
        padding: 28px 20px;
    }

    .plan-preview-price {
        font-size: 36px;
    }

    .plan-preview-name {
        font-size: 16px;
    }

    /* ── Trust Badges ── */
    .trust-badge {
        font-size: 15px;
        gap: 10px;
    }

    .trust-badges {
        gap: 32px;
    }

    /* ── Affiliate: Commission Panel ── */
    .aff-commission-grid {
        max-width: 1200px;
        gap: 32px;
    }

    .aff-commission-card {
        padding: 44px 36px;
        border-radius: 24px;
    }

    .aff-card-tier {
        font-size: 16px;
    }

    .aff-card-price {
        font-size: 56px;
    }

    .aff-earn-value {
        font-size: 30px;
    }

    .aff-card-perks li {
        font-size: 15px;
        padding: 8px 0;
    }

    /* ── Affiliate: Hero ── */
    .aff-hero h1 {
        font-size: clamp(64px, 5vw, 96px);
    }

    .aff-hero-sub {
        font-size: 20px;
    }

    .aff-stat-pill {
        padding: 12px 20px;
    }

    .aff-stat-value {
        font-size: 24px;
    }

    .aff-stat-label {
        font-size: 10px;
    }

    /* ── Guide Styles ── */
    .guide-content {
        max-width: 1000px;
    }

    /* ── Footer ── */
    .footer.fp-footer-overlay {
        zoom: 1.25;
    }
}


/* ─────────────────────────────────────────────
   BREAKPOINT 3: Ultrawide (≥ 3440px)
   Target: 34" ultrawide, 3440×1440
   ───────────────────────────────────────────── */
@media (min-width: 3440px) {

    /* ── Container ── */
    :root {
        --container-max: 2000px;
        --section-padding: clamp(140px, 8vw, 240px);
    }

    .container {
        padding: 0 clamp(48px, 5vw, 140px);
    }

    /* ── Typography ── */
    .hero-title {
        font-size: clamp(64px, 3.2vw, 96px);
    }

    .section-title {
        font-size: clamp(52px, 2.8vw, 76px);
    }

    .section-subtitle {
        font-size: 22px;
    }

    .section-header {
        max-width: 1000px;
    }

    .hero-subtitle {
        font-size: 24px;
    }

    /* ── Hero ── */
    .hero-content {
        max-width: 900px;
    }

    .hero .container {
        gap: 120px;
    }

    .hero h1 {
        font-size: clamp(72px, 3.2vw, 100px);
    }

    /* ── Grids ── */
    .features-grid {
        gap: 36px;
    }

    .pricing-grid {
        gap: 40px;
    }

    .testimonials-grid {
        gap: 48px;
    }

    /* ── Cards ── */
    .feature-card {
        padding: 36px;
    }

    .pricing-card {
        padding: 52px;
    }

    .testimonial-card {
        padding: 48px;
    }

    /* ── FAQ ── */
    .faq-grid {
        max-width: 1100px;
    }

    .faq-question {
        font-size: 21px;
        padding: 24px 0;
    }

    .faq-answer p {
        font-size: 17px;
    }

    /* ── Stats ── */
    .stat-number {
        font-size: 64px;
    }

    .stat-text {
        font-size: 13px;
    }

    /* ── Navbar ── */
    .nav-links a {
        font-size: 17px;
    }

    .nav-links {
        gap: 40px;
    }

    .btn-download {
        font-size: 16px;
        padding: 14px 32px;
    }

    /* ── Logo Scroll ── */
    .platform-logo {
        font-size: 17px;
    }

    .logo-track {
        gap: 90px;
    }

    /* ── Plan Preview ── */
    .plan-preview {
        max-width: 940px;
        gap: 24px;
    }

    .plan-preview-card {
        padding: 32px 24px;
    }

    .plan-preview-price {
        font-size: 40px;
    }

    /* ── Trust Badges ── */
    .trust-badge {
        font-size: 16px;
    }

    .trust-badges {
        gap: 40px;
    }

    /* ── Affiliate: Commission Panel ── */
    .aff-commission-grid {
        max-width: 1400px;
        gap: 36px;
    }

    .aff-commission-card {
        padding: 48px 40px;
    }

    .aff-card-price {
        font-size: 60px;
    }

    .aff-earn-value {
        font-size: 34px;
    }

    .aff-card-perks li {
        font-size: 16px;
        padding: 10px 0;
    }

    /* ── Affiliate: Hero ── */
    .aff-hero h1 {
        font-size: clamp(72px, 4.5vw, 110px);
    }

    .aff-hero-sub {
        font-size: 22px;
    }

    /* ── Guide Styles ── */
    .guide-content {
        max-width: 1100px;
    }

    /* ── Footer ── */
    .footer.fp-footer-overlay {
        zoom: 1.45;
    }
}


/* ─────────────────────────────────────────────
   BREAKPOINT 4: 4K (≥ 3840px)
   Target: 40" 4K displays, 3840×2160
   ───────────────────────────────────────────── */
@media (min-width: 3840px) {

    /* ── Container ── */
    :root {
        --container-max: 2200px;
        --section-padding: clamp(160px, 8vw, 280px);
    }

    .container {
        padding: 0 clamp(60px, 5vw, 160px);
    }

    /* ── Typography ── */
    .hero-title {
        font-size: clamp(72px, 2.8vw, 110px);
    }

    .section-title {
        font-size: clamp(56px, 2.4vw, 84px);
    }

    .section-subtitle {
        font-size: 24px;
        line-height: 1.8;
    }

    .section-header {
        max-width: 1100px;
        margin-bottom: 60px;
    }

    .hero-subtitle {
        font-size: 26px;
    }

    /* ── Hero ── */
    .hero-content {
        max-width: 1000px;
    }

    .hero .container {
        gap: 140px;
    }

    .hero h1 {
        font-size: clamp(80px, 2.8vw, 120px);
    }

    /* ── Grids ── */
    .features-grid {
        gap: 40px;
    }

    .pricing-grid {
        gap: 48px;
    }

    .testimonials-grid {
        gap: 56px;
    }

    /* ── Cards ── */
    .feature-card {
        padding: 40px;
        border-radius: 18px;
    }

    .pricing-card {
        padding: 56px;
        border-radius: 24px;
    }

    .testimonial-card {
        padding: 52px;
        border-radius: 20px;
    }

    /* ── FAQ ── */
    .faq-grid {
        max-width: 1200px;
    }

    .faq-question {
        font-size: 22px;
        padding: 28px 0;
    }

    .faq-answer p {
        font-size: 18px;
    }

    /* ── Stats ── */
    .stat-number {
        font-size: 72px;
    }

    .stat-text {
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* ── Navbar ── */
    .navbar {
        padding: 6px 0;
    }

    .nav-links a {
        font-size: 18px;
    }

    .nav-links {
        gap: 44px;
    }

    .btn-download {
        font-size: 17px;
        padding: 16px 36px;
        border-radius: 14px;
    }

    /* ── Logo Scroll ── */
    .platform-logo {
        font-size: 18px;
    }

    .logo-track {
        gap: 100px;
    }

    /* ── Plan Preview ── */
    .plan-preview {
        max-width: 1040px;
        gap: 28px;
    }

    .plan-preview-card {
        padding: 36px 28px;
        border-radius: 16px;
    }

    .plan-preview-price {
        font-size: 44px;
    }

    .plan-preview-name {
        font-size: 18px;
    }

    .plan-preview-for {
        font-size: 13px;
    }

    /* ── Trust Badges ── */
    .trust-badge {
        font-size: 17px;
    }

    .trust-badges {
        gap: 48px;
    }

    .hero-badge-bottom {
        font-size: 15px;
        padding: 10px 22px 10px 18px;
    }

    /* ── Affiliate: Commission Panel ── */
    .aff-commission-grid {
        max-width: 1600px;
        gap: 40px;
    }

    .aff-commission-card {
        padding: 52px 44px;
        border-radius: 28px;
    }

    .aff-card-tier {
        font-size: 18px;
    }

    .aff-card-price {
        font-size: 64px;
    }

    .aff-card-price span {
        font-size: 22px;
    }

    .aff-earn-value {
        font-size: 38px;
    }

    .aff-earn-label {
        font-size: 13px;
    }

    .aff-earn-period {
        font-size: 14px;
    }

    .aff-card-perks li {
        font-size: 17px;
        padding: 12px 0;
    }

    /* ── Affiliate: Hero ── */
    .aff-hero h1 {
        font-size: clamp(80px, 4vw, 120px);
    }

    .aff-hero-sub {
        font-size: 24px;
    }

    .aff-stat-pill {
        padding: 14px 24px;
    }

    .aff-stat-value {
        font-size: 28px;
    }

    .aff-stat-label {
        font-size: 11px;
    }

    /* ── Affiliate: Featured Badge ── */
    .aff-featured-badge {
        font-size: 12px;
        padding: 6px 18px;
    }

    /* ── Guide Styles ── */
    .guide-content {
        max-width: 1200px;
    }

    .guide-content h1 {
        font-size: 56px;
    }

    .guide-content h2 {
        font-size: 36px;
    }

    .guide-content h3 {
        font-size: 28px;
    }

    /* ── Footer ── */
    .footer.fp-footer-overlay {
        zoom: 1.65;
    }

    .guide-content p,
    .guide-content li {
        font-size: 18px;
    }
}


/* ─────────────────────────────────────────────
   BACKGROUND GRID — Scale for large screens
   ───────────────────────────────────────────── */
@media (min-width: 2560px) {
    body::before {
        background-size: 90px 90px;
    }
}

@media (min-width: 3840px) {
    body::before {
        background-size: 110px 110px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   AFFILIATE PAGE — FPS Panel Inline Style Overrides (!important)
   These MUST use !important because affiliate.html defines them
   in an inline <style> tag which has equal specificity but loads
   AFTER external CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1920px ── */
@media (min-width: 1920px) {
    .afp-inner {
        zoom: 1.15 !important;
        max-width: 90vw !important;
        padding: 84px clamp(32px, 4vw, 100px) 48px !important;
    }

    .afp-hero-split {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 40px !important;
    }

    .afp-hero-left {
        max-width: none !important;
    }

    .afp-hero-cta-text h2 {
        font-size: clamp(52px, 5vw, 72px) !important;
    }

    .afp-hero-title {
        font-size: 24px !important;
    }

    .afp-hero-sub {
        font-size: 20px !important;
    }

    .afp-inner .aff-commission-grid {
        gap: 24px !important;
    }

    .afp-inner .aff-commission-card {
        padding: 32px 28px !important;
    }

    .afp-inner .aff-card-price {
        font-size: 44px !important;
    }

    .afp-inner .aff-earn-value {
        font-size: 26px !important;
    }
}

/* ── 2560px ── */
@media (min-width: 2560px) {
    .afp-inner {
        zoom: 1.35 !important;
        max-width: 85vw !important;
        padding: 96px clamp(40px, 5vw, 120px) 56px !important;
    }

    .afp-hero-split {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 44px !important;
    }

    .afp-hero-left {
        max-width: none !important;
    }

    .afp-hero-cta-text h2 {
        font-size: clamp(60px, 4.5vw, 84px) !important;
    }

    .afp-hero-title {
        font-size: 28px !important;
    }

    .afp-hero-sub {
        font-size: 22px !important;
    }

    .afp-hero-trust span {
        font-size: 15px !important;
    }

    .afp-inner .aff-commission-grid {
        gap: 32px !important;
        max-width: 1400px !important;
    }

    .afp-inner .aff-commission-card {
        padding: 40px 36px !important;
    }

    .afp-inner .aff-card-price {
        font-size: 52px !important;
    }

    .afp-inner .aff-earn-value {
        font-size: 30px !important;
    }

    .afp-inner .aff-card-perks li {
        font-size: 15px !important;
    }

    /* Signup form scales */
    .aff-auth-card {
        padding: 40px !important;
    }

    .aff-auth-card h2 {
        font-size: 26px !important;
    }

    .aff-auth-card input,
    .aff-auth-card select {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }

    .aff-auth-card .btn {
        font-size: 17px !important;
        padding: 16px 32px !important;
    }
}

/* ── 3440px ── */
@media (min-width: 3440px) {
    .afp-inner {
        zoom: 1.55 !important;
        max-width: 80vw !important;
        padding: 108px clamp(48px, 5vw, 140px) 64px !important;
    }

    .afp-hero-split {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 48px !important;
    }

    .afp-hero-left {
        max-width: none !important;
    }

    .afp-hero-cta-text h2 {
        font-size: clamp(68px, 4vw, 96px) !important;
    }

    .afp-hero-title {
        font-size: 32px !important;
    }

    .afp-hero-sub {
        font-size: 24px !important;
    }

    .afp-hero-trust span {
        font-size: 17px !important;
    }

    .afp-inner .aff-commission-grid {
        gap: 40px !important;
        max-width: 1700px !important;
    }

    .afp-inner .aff-commission-card {
        padding: 48px 40px !important;
    }

    .afp-inner .aff-card-price {
        font-size: 60px !important;
    }

    .afp-inner .aff-earn-value {
        font-size: 34px !important;
    }

    .aff-auth-card {
        padding: 48px !important;
    }

    .aff-auth-card h2 {
        font-size: 30px !important;
    }

    .aff-auth-card input,
    .aff-auth-card select {
        font-size: 18px !important;
        padding: 16px 18px !important;
    }
}

/* ── 3840px ── */
@media (min-width: 3840px) {
    .afp-inner {
        zoom: 1.75 !important;
        max-width: 78vw !important;
        padding: 120px clamp(60px, 5vw, 160px) 72px !important;
    }

    .afp-hero-split {
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 52px !important;
    }

    .afp-hero-left {
        max-width: none !important;
    }

    .afp-hero-cta-text h2 {
        font-size: clamp(76px, 3.5vw, 110px) !important;
    }

    .afp-hero-title {
        font-size: 36px !important;
    }

    .afp-hero-sub {
        font-size: 28px !important;
    }

    .afp-hero-trust span {
        font-size: 18px !important;
    }

    .afp-inner .aff-commission-grid {
        gap: 48px !important;
        max-width: 2000px !important;
    }

    .afp-inner .aff-commission-card {
        padding: 56px 48px !important;
        border-radius: 28px !important;
    }

    .afp-inner .aff-card-price {
        font-size: 68px !important;
    }

    .afp-inner .aff-card-price span {
        font-size: 24px !important;
    }

    .afp-inner .aff-earn-value {
        font-size: 40px !important;
    }

    .afp-inner .aff-card-perks li {
        font-size: 18px !important;
        padding: 12px 0 !important;
    }

    .aff-auth-card {
        padding: 56px !important;
        border-radius: 24px !important;
    }

    .aff-auth-card h2 {
        font-size: 34px !important;
    }

    .aff-auth-card input,
    .aff-auth-card select {
        font-size: 20px !important;
        padding: 18px 20px !important;
        border-radius: 12px !important;
    }

    .aff-auth-card .btn {
        font-size: 20px !important;
        padding: 20px 40px !important;
        border-radius: 14px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MAIN SITE (index.html) — FPS Panel Overrides
   fps.css defines .fp-panel-inner with compact fixed values.
   These scale everything up for large monitors.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1920px ── */
@media (min-width: 1920px) {
    .fp-panel-inner {
        max-width: 1600px !important;
        padding: 40px clamp(32px, 4vw, 100px) 48px !important;
        gap: clamp(16px, 2vh, 28px) !important;
    }

    .fp-panel-inner .section-title {
        font-size: clamp(38px, 3.2vw, 52px) !important;
    }

    .fp-panel-inner .section-subtitle {
        font-size: clamp(15px, 1.3vw, 17px) !important;
        max-width: 620px !important;
    }

    .fp-panel-inner .feature-card {
        padding: clamp(28px, 3vh, 36px) !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: clamp(19px, 1.5vw, 22px) !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 16px !important;
    }

    .fp-panel-inner .features-grid-core {
        gap: 24px !important;
    }

    .fp-panel-inner .features-grid-advanced {
        gap: 24px !important;
    }

    .fp-panel-inner .pricing-card {
        padding: 24px 22px !important;
    }

    .fp-panel-inner .pricing-features li {
        font-size: 13.5px !important;
    }

    .fp-panel-inner .testimonial-card {
        padding: 24px !important;
    }

    .fp-panel-inner .testimonial-text {
        font-size: 14px !important;
    }

    .fp-panel-inner .faq-grid {
        gap: 8px 70px !important;
    }

    .fp-panel-inner .step-card {
        padding: 24px 20px !important;
    }

    #pan-cta .cta-left h2 {
        font-size: clamp(34px, 3.5vw, 54px) !important;
    }

    #pan-cta .cta-left p {
        font-size: 16px !important;
    }

    #pan-cta .container {
        padding: 0 clamp(56px, 6vw, 140px) !important;
    }

    /* Hero on main site */
    .hero .container {
        gap: 80px !important;
    }

    .hero-content {
        max-width: 700px !important;
    }
}

/* ── 2560px ── */
@media (min-width: 2560px) {
    .fp-panel-inner {
        max-width: 1900px !important;
        padding: 48px clamp(40px, 5vw, 120px) 56px !important;
        gap: clamp(20px, 2.5vh, 32px) !important;
    }

    .fp-panel-inner .section-title {
        font-size: clamp(44px, 2.8vw, 64px) !important;
    }

    .fp-panel-inner .section-subtitle {
        font-size: clamp(16px, 1.2vw, 20px) !important;
        max-width: 720px !important;
    }

    .fp-panel-inner .feature-card {
        padding: clamp(32px, 3vh, 40px) !important;
        min-height: 200px !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: clamp(20px, 1.5vw, 24px) !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 17px !important;
    }

    .fp-panel-inner .features-grid-core {
        gap: 28px !important;
    }

    .fp-panel-inner .features-grid-advanced {
        gap: 28px !important;
    }

    .fp-panel-inner .pricing-card {
        padding: 32px 28px !important;
    }

    .fp-panel-inner .pricing-features li {
        font-size: 14.5px !important;
        padding: 6px 0 !important;
    }

    .fp-panel-inner .testimonial-card {
        padding: 32px !important;
    }

    .fp-panel-inner .testimonial-text {
        font-size: 15px !important;
    }

    .fp-panel-inner .faq-grid {
        gap: 10px 80px !important;
    }

    .fp-panel-inner .faq-question {
        font-size: 18px !important;
    }

    .fp-panel-inner .step-card {
        padding: 28px 24px !important;
    }

    .fp-panel-inner .stat-number {
        font-size: 52px !important;
    }

    .fp-panel-inner .stat-text {
        font-size: 12px !important;
    }

    .fp-panel-inner .partners-grid {
        gap: 24px !important;
    }

    .fp-panel-inner .partner-card {
        padding: 14px 18px !important;
    }

    #pan-cta .cta-left h2 {
        font-size: clamp(40px, 3.2vw, 60px) !important;
    }

    #pan-cta .cta-left p {
        font-size: 18px !important;
    }

    #pan-cta .cta-buttons .btn {
        font-size: 17px !important;
        padding: 16px 36px !important;
    }

    #pan-cta .cta-quickstart {
        padding: 28px 32px !important;
    }

    #pan-cta .container {
        padding: 0 clamp(64px, 6vw, 160px) !important;
    }

    /* Hero on main site */
    .hero .container {
        gap: 100px !important;
    }

    .hero-content {
        max-width: 800px !important;
    }

    .hero h1 {
        font-size: clamp(60px, 3.8vw, 88px) !important;
    }

    .hero-subtitle {
        font-size: 22px !important;
    }
}

/* ── 3440px ── */
@media (min-width: 3440px) {
    .fp-panel-inner {
        max-width: 2200px !important;
        padding: 56px clamp(48px, 5vw, 140px) 64px !important;
        gap: clamp(24px, 3vh, 36px) !important;
    }

    .fp-panel-inner .section-title {
        font-size: clamp(52px, 2.5vw, 76px) !important;
    }

    .fp-panel-inner .section-subtitle {
        font-size: clamp(18px, 1.2vw, 22px) !important;
        max-width: 840px !important;
    }

    .fp-panel-inner .feature-card {
        padding: clamp(36px, 3.5vh, 48px) !important;
        min-height: 220px !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: clamp(22px, 1.4vw, 28px) !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 18px !important;
    }

    .fp-panel-inner .features-grid-core {
        gap: 32px !important;
    }

    .fp-panel-inner .features-grid-advanced {
        gap: 32px !important;
    }

    .fp-panel-inner .pricing-card {
        padding: 40px 36px !important;
    }

    .fp-panel-inner .pricing-features li {
        font-size: 16px !important;
        padding: 8px 0 !important;
    }

    .fp-panel-inner .testimonial-card {
        padding: 40px !important;
    }

    .fp-panel-inner .testimonial-text {
        font-size: 16px !important;
    }

    .fp-panel-inner .faq-grid {
        gap: 12px 100px !important;
    }

    .fp-panel-inner .faq-question {
        font-size: 20px !important;
    }

    .fp-panel-inner .stat-number {
        font-size: 60px !important;
    }

    .fp-panel-inner .stat-text {
        font-size: 14px !important;
    }

    #pan-cta .cta-left h2 {
        font-size: clamp(48px, 2.8vw, 72px) !important;
    }

    #pan-cta .cta-left p {
        font-size: 20px !important;
    }

    #pan-cta .cta-buttons .btn {
        font-size: 18px !important;
        padding: 18px 40px !important;
    }

    /* Hero */
    .hero .container {
        gap: 120px !important;
    }

    .hero-content {
        max-width: 900px !important;
    }

    .hero h1 {
        font-size: clamp(68px, 3.2vw, 100px) !important;
    }

    .hero-subtitle {
        font-size: 24px !important;
    }
}

/* ── 3840px ── */
@media (min-width: 3840px) {
    .fp-panel-inner {
        max-width: 2600px !important;
        padding: 64px clamp(60px, 5vw, 160px) 72px !important;
        gap: clamp(28px, 3vh, 40px) !important;
    }

    .fp-panel-inner .section-title {
        font-size: clamp(56px, 2.2vw, 84px) !important;
    }

    .fp-panel-inner .section-subtitle {
        font-size: clamp(20px, 1vw, 24px) !important;
        max-width: 960px !important;
    }

    .fp-panel-inner .feature-card {
        padding: clamp(40px, 4vh, 56px) !important;
        min-height: 240px !important;
        border-radius: 18px !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: clamp(24px, 1.3vw, 32px) !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 20px !important;
        line-height: 1.7 !important;
    }

    .fp-panel-inner .features-grid-core {
        gap: 36px !important;
    }

    .fp-panel-inner .features-grid-advanced {
        gap: 36px !important;
    }

    .fp-panel-inner .pricing-card {
        padding: 48px 44px !important;
        border-radius: 22px !important;
    }

    .fp-panel-inner .pricing-features li {
        font-size: 17px !important;
        padding: 10px 0 !important;
    }

    .fp-panel-inner .testimonial-card {
        padding: 48px !important;
        border-radius: 20px !important;
    }

    .fp-panel-inner .testimonial-text {
        font-size: 18px !important;
    }

    .fp-panel-inner .faq-grid {
        gap: 14px 120px !important;
    }

    .fp-panel-inner .faq-question {
        font-size: 22px !important;
    }

    .fp-panel-inner .faq-answer p {
        font-size: 17px !important;
    }

    .fp-panel-inner .stat-number {
        font-size: 72px !important;
    }

    .fp-panel-inner .stat-text {
        font-size: 15px !important;
    }

    .fp-panel-inner .partners-grid {
        gap: 32px !important;
    }

    .fp-panel-inner .partner-card {
        padding: 18px 24px !important;
    }

    #pan-cta .cta-left h2 {
        font-size: clamp(56px, 2.4vw, 84px) !important;
    }

    #pan-cta .cta-left p {
        font-size: 22px !important;
    }

    #pan-cta .cta-buttons .btn {
        font-size: 20px !important;
        padding: 20px 44px !important;
        border-radius: 14px !important;
    }

    #pan-cta .cta-quickstart {
        padding: 36px 40px !important;
    }

    #pan-cta .cta-quickstart-title h3 {
        font-size: 22px !important;
    }

    #pan-cta .cta-step-body h4 {
        font-size: 17px !important;
    }

    #pan-cta .cta-step-body p {
        font-size: 15px !important;
    }

    /* Hero */
    .hero .container {
        gap: 140px !important;
    }

    .hero-content {
        max-width: 1000px !important;
    }

    .hero h1 {
        font-size: clamp(76px, 2.8vw, 120px) !important;
    }

    .hero-subtitle {
        font-size: 26px !important;
    }

    .hero-badge-bottom {
        font-size: 16px !important;
        padding: 12px 24px 12px 20px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   EDGE-TO-EDGE NAVBAR & HERO VERTICAL FILL
   Eliminates empty side gaps and bottom dead space on large
   screens. Navbar stretches full-width; hero fills viewport.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1920px ── */
@media (min-width: 1920px) {

    /* Navbar: stretch edge-to-edge */
    .navbar .container {
        max-width: none !important;
        padding-left: clamp(32px, 3vw, 60px) !important;
        padding-right: clamp(32px, 3vw, 60px) !important;
    }

    /* Hero: fill viewport height */
    .hero .container {
        min-height: calc(100vh - 72px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Hero mockup scales up */
    .hero-visual {
        transform: scale(1.05) !important;
    }

    /* Trust badges at hero bottom — less gap */
    .hero .logo-scroll,
    .fp-page>.logo-scroll {
        padding: 16px 0 !important;
    }
}

/* ── 2560px ── */
@media (min-width: 2560px) {
    .navbar .container {
        max-width: none !important;
        padding-left: clamp(40px, 3vw, 80px) !important;
        padding-right: clamp(40px, 3vw, 80px) !important;
    }

    .hero .container {
        min-height: calc(100vh - 72px) !important;
    }

    .hero-visual {
        transform: scale(1.12) !important;
    }

    .hero .logo-scroll,
    .fp-page>.logo-scroll {
        padding: 20px 0 !important;
    }

    /* Trust badges scale */
    .trust-badge {
        font-size: 16px !important;
    }
}

/* ── 3440px ── */
@media (min-width: 3440px) {
    .navbar .container {
        max-width: none !important;
        padding-left: clamp(48px, 3vw, 100px) !important;
        padding-right: clamp(48px, 3vw, 100px) !important;
    }

    .hero .container {
        min-height: calc(100vh - 72px) !important;
    }

    .hero-visual {
        transform: scale(1.2) !important;
    }
}

/* ── 3840px ── */
@media (min-width: 3840px) {
    .navbar .container {
        max-width: none !important;
        padding-left: clamp(60px, 3vw, 120px) !important;
        padding-right: clamp(60px, 3vw, 120px) !important;
    }

    .hero .container {
        min-height: calc(100vh - 72px) !important;
    }

    .hero-visual {
        transform: scale(1.3) !important;
    }

    .hero .logo-scroll,
    .fp-page>.logo-scroll {
        padding: 24px 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   DYNAMIC PROPORTIONAL SCALING (zoom)
   The ultimate fix: scales EVERYTHING inside panels proportionally
   as the viewport grows. Works on all modern browsers.
   Hero panel excluded (uses full-bleed, already handled).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1920px ── */
@media (min-width: 1920px) {
    .fp-panel-inner {
        zoom: 1.15 !important;
        max-width: 90vw !important;
    }

    .afp-inner {
        zoom: 1.15 !important;
        max-width: 90vw !important;
    }

    .guide-content {
        zoom: 1.15 !important;
    }

    /* CTA panel: use full width */
    #pan-cta .fp-panel-inner {
        max-width: none !important;
    }
}

/* ── 2560px ── */
@media (min-width: 2560px) {
    .fp-panel-inner {
        zoom: 1.35 !important;
        max-width: 85vw !important;
    }

    .afp-inner {
        zoom: 1.35 !important;
        max-width: 85vw !important;
    }

    .navbar .container {
        zoom: 1.15 !important;
    }

    .guide-content {
        zoom: 1.35 !important;
    }

    .logo-scroll {
        zoom: 1.2 !important;
    }

    #pan-cta .fp-panel-inner {
        max-width: none !important;
    }
}

/* ── 3440px ── */
@media (min-width: 3440px) {
    .fp-panel-inner {
        zoom: 1.55 !important;
        max-width: 80vw !important;
    }

    .afp-inner {
        zoom: 1.55 !important;
        max-width: 80vw !important;
    }

    .navbar .container {
        zoom: 1.3 !important;
    }

    .guide-content {
        zoom: 1.55 !important;
    }

    .logo-scroll {
        zoom: 1.35 !important;
    }

    #pan-cta .fp-panel-inner {
        max-width: none !important;
    }
}

/* ── 3840px ── */
@media (min-width: 3840px) {
    .fp-panel-inner {
        zoom: 1.75 !important;
        max-width: 78vw !important;
    }

    .afp-inner {
        zoom: 1.75 !important;
        max-width: 78vw !important;
    }

    .navbar .container {
        zoom: 1.45 !important;
    }

    .guide-content {
        zoom: 1.75 !important;
    }

    .logo-scroll {
        zoom: 1.5 !important;
    }

    #pan-cta .fp-panel-inner {
        max-width: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Phone & Small Tablet Overrides
   Desktop styles remain COMPLETELY untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   BREAKPOINT: Tablet (≤ 768px)
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Nav: hide typewriter, it overflows ── */
    .nav-typewriter {
        display: none !important;
    }

    /* ── Hero: single column, hide mockup ── */
    .hero .container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 20px !important;
        padding-top: 20px !important;
    }

    .hero-visual {
        display: none !important;
    }

    .hero-content {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .hero-title {
        font-size: clamp(32px, 8vw, 48px) !important;
        letter-spacing: -1px !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
        padding: 0 10px !important;
    }

    .hero-cta {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 20px !important;
    }

    .hero-cta .btn {
        width: 100% !important;
    }

    .hero-badge-bottom {
        font-size: 11px !important;
        padding: 6px 14px 6px 10px !important;
    }

    .trust-badges {
        gap: 12px !important;
        font-size: 11px !important;
    }

    .trust-badge {
        font-size: 11px !important;
    }

    /* ── FPS Panel Inner: mobile padding + scrollable ── */
    .fp-panel-inner {
        padding: 80px 16px 24px !important;
        gap: clamp(8px, 1.5vh, 16px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fp-panel-content {
        align-items: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ── Section headers: compact ── */
    .fp-panel-inner .section-title {
        font-size: clamp(24px, 6vw, 32px) !important;
        margin-bottom: 40px !important;
        line-height: 1.2 !important;
    }

    .fp-panel-inner .section-subtitle {
        font-size: 13px !important;
        margin-top: -30px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .section-badge {
        font-size: 10px !important;
        padding: 6px 12px !important;
    }

    /* ── Feature Cards: 2 columns on mobile ── */
    .fp-panel-inner .features-grid-core,
    .features-grid-core {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    .fp-panel-inner .features-grid-advanced,
    .features-grid-advanced {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* 3-col advanced panel → 2 col on mobile */
    #pan-adv-2 .features-grid-advanced {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .fp-panel-inner .feature-card {
        padding: 14px 12px !important;
        min-height: auto !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .feature-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }

    .feature-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Feature visuals: shrink on mobile */
    .feature-visual {
        display: none !important;
    }

    /* bento-4 wide cards: full width */
    .fp-panel-inner .feature-card.bento-4,
    .feature-card.bento-4 {
        grid-column: 1 / -1 !important;
    }

    .feature-card.bento-2 {
        grid-column: 1 / -1 !important;
    }

    /* ── Pricing: single column ── */
    .fp-panel-inner .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .fp-panel-inner .pricing-card {
        padding: 16px 14px !important;
    }

    /* ── How It Works: compact ── */
    .fp-panel-inner .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .fp-panel-inner .step-card {
        padding: 16px 14px !important;
    }

    #pan-how .fp-panel-inner {
        padding-top: 72px !important;
    }

    /* ── Partners: scrollable, 2-col ── */
    .fp-panel-inner .partners-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .partner-cards {
        max-height: 240px !important;
    }

    .fp-panel-inner .partner-card {
        padding: 8px 10px !important;
    }

    /* ── Testimonials: single column ── */
    .fp-panel-inner .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fp-panel-inner .testimonial-card {
        padding: 16px !important;
    }

    .fp-panel-inner .testimonial-text {
        font-size: 12px !important;
    }

    /* ── FAQ: single column ── */
    .fp-panel-inner .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* ── CTA Panel: stacked layout ── */
    #pan-cta .fp-panel-content {
        padding-top: 72px !important;
        overflow-y: auto !important;
    }

    #pan-cta .fp-panel-inner {
        padding: 0 16px 20px !important;
    }

    #pan-cta .cta-layout {
        flex-direction: column !important;
        gap: 20px !important;
    }

    #pan-cta .cta-left h2 {
        font-size: clamp(24px, 6vw, 32px) !important;
    }

    #pan-cta .cta-left p {
        font-size: 13px !important;
    }

    #pan-cta .container {
        padding: 0 16px !important;
    }

    #pan-cta .cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #pan-cta .cta-buttons .btn {
        width: 100% !important;
        font-size: 14px !important;
        padding: 12px 20px !important;
    }

    #pan-cta .cta-quickstart {
        padding: 16px !important;
    }

    #pan-cta .cta-quickstart-title h3 {
        font-size: 14px !important;
    }

    #pan-cta .cta-steps {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ── FPS Nav Dots: smaller on mobile ── */
    .fp-nav {
        right: 8px !important;
        gap: 6px !important;
        padding: 6px 2px !important;
    }

    .fp-nav-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .fp-nav-dot::after {
        display: none !important;
    }

    /* ── 3D Floating Shapes: hide on mobile ── */
    .geo-float {
        display: none !important;
    }

    /* ── Logo Scroll: smaller ── */
    .logo-scroll {
        padding: 8px 0 !important;
    }

    .platform-logo {
        font-size: 11px !important;
    }

    .logo-track {
        gap: 40px !important;
    }

    /* ── Footer in FPS ── */
    .fp-footer-overlay .footer {
        padding: 12px 0 !important;
    }

    .footer-grid {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .footer-links-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .footer-affiliate-cta {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
}


/* ─────────────────────────────────────────────
   BREAKPOINT: Small Phone (≤ 480px)
   ───────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── Even tighter panel padding ── */
    .fp-panel-inner {
        padding: 72px 12px 20px !important;
    }

    /* ── Feature cards: still 2-col but tighter ── */
    .fp-panel-inner .features-grid-core,
    .fp-panel-inner .features-grid-advanced,
    .features-grid-core,
    .features-grid-advanced {
        gap: 8px !important;
    }

    .fp-panel-inner .feature-card {
        padding: 10px 8px !important;
    }

    .fp-panel-inner .feature-card h3 {
        font-size: 12px !important;
    }

    .fp-panel-inner .feature-card p {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    .feature-icon {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 6px !important;
    }

    /* ── Section title: smaller ── */
    .fp-panel-inner .section-title {
        font-size: clamp(22px, 6vw, 28px) !important;
        margin-bottom: 32px !important;
    }

    /* ── Navbar: tighter ── */
    .navbar {
        height: 60px !important;
    }

    .logo-icon {
        height: 48px !important;
    }

    .logo-text-img {
        height: 30px !important;
    }

    /* ── Stats: compact ── */
    .stats-grid {
        gap: 0 !important;
    }

    .stat-number {
        font-size: 24px !important;
    }

    .stat-text {
        font-size: 9px !important;
    }

    /* ── Pricing: tighter ── */
    .fp-panel-inner .pricing-card {
        padding: 12px 10px !important;
    }

    .fp-panel-inner .pricing-features li {
        font-size: 11px !important;
        padding: 2px 0 !important;
    }

    /* ── FPS dots: even smaller ── */
    .fp-nav {
        right: 4px !important;
        gap: 5px !important;
    }

    .fp-nav-dot {
        width: 4px !important;
        height: 4px !important;
    }
}


/* ─────────────────────────────────────────────
   MOBILE: Affiliate Page Overrides
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Hide typewriter on affiliate too ── */
    .nav-typewriter {
        display: none !important;
    }

    /* ── Affiliate Hero ── */
    .aff-hero {
        padding: 100px 0 40px !important;
    }

    .aff-hero h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
        letter-spacing: -1.5px !important;
    }

    .aff-hero-sub {
        font-size: 14px !important;
        padding: 0 16px !important;
    }

    .aff-hero-actions .btn {
        font-size: 14px !important;
        padding: 12px 28px !important;
    }

    /* ── Affiliate Auth: full width, stacked ── */
    .aff-auth-wrapper {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }

    .aff-auth-info {
        text-align: center !important;
    }

    .aff-auth-info h2 {
        font-size: clamp(24px, 6vw, 32px) !important;
    }

    .aff-auth-card {
        padding: 20px 16px !important;
    }

    .aff-auth-card h2 {
        font-size: 20px !important;
    }

    .aff-field input,
    .aff-field select {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* ── Commission cards: single column ── */
    .aff-commission-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 16px !important;
    }

    .aff-commission-card {
        padding: 24px 20px !important;
    }

    .aff-card-price {
        font-size: 36px !important;
    }

    .aff-earn-value {
        font-size: 20px !important;
    }

    /* ── Steps: stacked ── */
    .aff-steps-grid {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .aff-step-card {
        padding: 24px 20px !important;
        max-width: 100% !important;
    }

    /* ── Why Promote: single column ── */
    .aff-why-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .aff-why-card {
        padding: 20px 16px !important;
    }

    /* ── Assets: single column ── */
    .aff-assets-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── CTA ── */
    .aff-cta {
        padding: 60px 0 !important;
    }

    .aff-cta h2 {
        font-size: clamp(24px, 6vw, 36px) !important;
    }

    .aff-cta p {
        font-size: 14px !important;
    }

    .aff-cta-actions .btn {
        font-size: 14px !important;
        padding: 12px 28px !important;
    }

    /* ── Affiliate FPS inner ── */
    .afp-inner {
        padding: 80px 16px 24px !important;
        overflow-y: auto !important;
    }

    .afp-hero-split {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .afp-hero-left {
        text-align: center !important;
    }

    .afp-hero-cta-text h2 {
        font-size: clamp(28px, 7vw, 40px) !important;
    }
}