/* ===== InfinitRoot — main.css (v5) ===== */

/* --- DESIGN TOKENS --- */
        :root {
            --brand-primary:  #0057FF;
            --brand-dark:     #003FBB;
            --brand-light:    #E8EFFF;
            --text-dark:      #111111;
            --text-body:      #333333;
            --text-muted:     #666666;
            --bg-white:       #FFFFFF;
            --bg-light:       #F4F6FA;
            --bg-dark:        #0D0D0D;
            --border:         #E2E5EC;
            --radius-sm:      8px;
            --radius-md:      12px;
            --radius-lg:      20px;
            --shadow-sm:      0 2px 12px rgba(0,0,0,0.06);
            --shadow-md:      0 6px 28px rgba(0,0,0,0.10);
            --shadow-lg:      0 12px 48px rgba(0,0,0,0.13);
            --container:      1600px;
            --section-v:      100px;
            --transition:     0.22s ease;

            /* FONTS — change here to update site-wide */
            --font-heading:  'Poppins', sans-serif;
            --font-body:     'Inter', sans-serif;
        }

        /* --- RESET --- */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        body {
            font-family: var(--font-body);
            font-size: 16px;
            line-height: 1.7;
            color: var(--text-body);
            background-color: var(--bg-white);
            padding-top: 70px;
        }
        img, svg { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font: inherit; }

        /* --- TYPOGRAPHY --- */
        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 700;
            line-height: 1.2;
            color: var(--text-dark);
        }
        h1 { font-size: clamp(36px, 5vw, 56px); }
        h2 { font-size: clamp(28px, 3.5vw, 42px); }
        h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 600; }

        /* --- CONTAINER --- */
        .ir-container {
            width: 100%;
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* --- BUTTONS --- */
        .ir-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-heading);
            font-weight: 600;
            border-radius: 50px;
            transition: background var(--transition), color var(--transition),
                        transform var(--transition), box-shadow var(--transition);
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
        }
        .ir-btn--primary {
            background: var(--brand-primary);
            color: #ffffff;
            border: 2px solid var(--brand-primary);
        }
        .ir-btn--primary:hover {
            background: var(--brand-dark);
            border-color: var(--brand-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,87,255,0.28);
        }
        .ir-btn--outline {
            background: transparent;
            color: var(--brand-primary);
            border: 2px solid var(--brand-primary);
        }
        .ir-btn--outline:hover {
            background: var(--brand-primary);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,87,255,0.18);
        }
        .ir-btn--lg { font-size: 17px; padding: 16px 36px; }
        .ir-btn--sm { font-size: 14px; padding: 10px 22px; }

        /* --- SECTION DEFAULTS --- */
        .ir-section { padding: var(--section-v) 0; }
        .ir-section--light { background: var(--bg-light); }
        .ir-section__header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 60px;
        }
        .ir-section__header p {
            font-size: 18px;
            color: var(--text-muted);
            margin-top: 14px;
        }

        /* --- BADGE --- */
        .ir-badge {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-heading);
            padding: 4px 12px;
            background: var(--brand-light);
            color: var(--brand-primary);
            border-radius: 50px;
            letter-spacing: 0.02em;
        }

        /* --- LOGO TEXT --- */
        .ir-logo-text {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 20px;
            color: var(--text-dark);
            letter-spacing: -0.02em;
        }
        .ir-logo-text--light { color: #ffffff; }

        .ir-main { overflow-x: hidden; }

        /* --- GLOBAL MOBILE --- */
        @media (max-width: 768px) {
            :root { --section-v: 64px; }
            body { padding-top: 60px; }
            h1 { font-size: 30px; }
            h2 { font-size: 26px; }
            .ir-btn--lg { font-size: 15px; padding: 14px 28px; }
        }
        @media (max-width: 1024px) {
            :root { --section-v: 80px; }
        }

/* PAIN POINTS — Desktop */
    .ir-pain { padding: 80px 0; background: #ffffff; }
    .ir-pain__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #FFF3F3;
        color: #CC2200;
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 50px;
        margin-bottom: 20px;
    }
    .ir-pain__heading {
        font-family: var(--font-heading);
        font-size: clamp(26px, 3.5vw, 40px);
        font-weight: 700;
        color: #111111;
        line-height: 1.2;
        margin-bottom: 14px;
    }
    .ir-pain__sub {
        font-size: 17px;
        color: #666666;
        line-height: 1.7;
        max-width: 580px;
        margin: 0 auto 52px;
    }
    .ir-pain__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
    .ir-pain__card {
        background: #FAFAFA;
        border: 1.5px solid #F0F0F0;
        border-radius: 16px;
        padding: 36px 28px;
        position: relative;
        transition: border-color 0.22s ease, box-shadow 0.22s ease;
    }
    .ir-pain__card:hover {
        border-color: #FFCDD2;
        box-shadow: 0 8px 32px rgba(204,34,0,0.07);
    }
    .ir-pain__card-num {
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #BBBBBB;
        text-transform: uppercase;
        margin-bottom: 16px;
    }
    .ir-pain__card-icon {
        width: 44px; height: 44px;
        background: #FFF0EE;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
    }
    .ir-pain__card h3 {
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 700;
        color: #111111;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    .ir-pain__card p { font-size: 14px; color: #666666; line-height: 1.7; }
    .ir-pain__card-x {
        position: absolute;
        top: 20px; right: 20px;
        width: 28px; height: 28px;
        background: #FFEDED;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* PAIN POINTS — Tablet */
    @media (max-width: 1024px) {
        .ir-pain__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* PAIN POINTS — Mobile */
    @media (max-width: 640px) {
        .ir-pain__grid { grid-template-columns: 1fr; }
        .ir-pain { padding: 60px 0; }
    }

/* TRUST BAR — Desktop */
    .ir-trust-bar {
        background: var(--bg-light);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 28px 0;
    }
    .ir-trust-bar__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex-wrap: wrap;
    }
    .ir-trust-bar__item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 14px;
        color: var(--text-dark);
        padding: 8px 36px;
    }
    .ir-trust-bar__divider {
        width: 1px;
        height: 28px;
        background: var(--border);
    }

    /* TRUST BAR — Tablet */
    @media (max-width: 1024px) {
        .ir-trust-bar__item { padding: 8px 20px; }
    }

    /* TRUST BAR — Mobile */
    @media (max-width: 768px) {
        .ir-trust-bar__inner { flex-wrap: wrap; gap: 8px; }
        .ir-trust-bar__divider { display: none; }
        .ir-trust-bar__item { padding: 8px 16px; width: 50%; justify-content: center; }
    }

/* WHO — Desktop */
    .ir-who__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .ir-who__card {
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 32px 24px;
        text-align: center;
        transition: transform var(--transition), box-shadow var(--transition);
    }
    .ir-who__card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-primary);
    }
    .ir-who__icon {
        width: 64px;
        height: 64px;
        background: var(--brand-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }
    .ir-who__card h3 { font-size: 17px; margin-bottom: 10px; }
    .ir-who__card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

    /* WHO — Tablet */
    @media (max-width: 1024px) {
        .ir-who__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* WHO — Mobile */
    @media (max-width: 768px) {
        .ir-who__grid { grid-template-columns: 1fr; }
    }

/* PROCESS — Desktop */
    .ir-process__steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
    }
    .ir-process__step {
        text-align: center;
        padding: 0 20px;
        position: relative;
    }
    .ir-process__step h3 { font-size: 16px; margin: 20px 0 10px; color: var(--text-dark); }
    .ir-process__step p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
    .ir-process__num {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--brand-primary);
        color: #fff;
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .ir-process__connector {
        position: absolute;
        top: 28px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: var(--border);
        z-index: 1;
    }

    /* PROCESS — Tablet */
    @media (max-width: 1024px) {
        .ir-process__steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        .ir-process__connector { display: none; }
    }

    /* PROCESS — Mobile */
    @media (max-width: 768px) {
        .ir-process__steps { grid-template-columns: 1fr; }
    }

/* WHY — Desktop */
    .ir-why__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }
    .ir-why__text h2 { margin-bottom: 20px; }
    .ir-why__text p { font-size: 17px; color: var(--text-muted); line-height: 1.8; }
    .ir-why__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .ir-why__item { display: flex; gap: 14px; align-items: flex-start; }
    .ir-why__item svg { flex-shrink: 0; margin-top: 3px; }
    .ir-why__item div { display: flex; flex-direction: column; gap: 3px; }
    .ir-why__item strong {
        font-family: var(--font-heading);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
    }
    .ir-why__item span { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

    /* WHY — Tablet */
    @media (max-width: 1024px) {
        .ir-why__inner { grid-template-columns: 1fr; gap: 48px; }
    }

    /* WHY — Mobile */
    @media (max-width: 768px) {
        .ir-why__grid { grid-template-columns: 1fr; }
    }

/* TESTIMONIALS — Desktop */
    .ir-testimonials__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ir-testimonials__card {
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 28px;
        transition: box-shadow var(--transition);
    }
    .ir-testimonials__card:hover { box-shadow: var(--shadow-md); }
    .ir-testimonials__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .ir-testimonials__stars { color: #F4B400; font-size: 18px; letter-spacing: 2px; }
    .ir-testimonials__text {
        font-size: 15px;
        color: var(--text-body);
        line-height: 1.7;
        margin-bottom: 20px;
        font-style: italic;
    }
    .ir-testimonials__author { display: flex; align-items: center; gap: 12px; }
    .ir-testimonials__avatar {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--brand-primary);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-heading);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ir-testimonials__author span { font-weight: 600; font-size: 14px; color: var(--text-dark); }

    /* TESTIMONIALS — Tablet */
    @media (max-width: 1024px) {
        .ir-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* TESTIMONIALS — Mobile */
    @media (max-width: 768px) {
        .ir-testimonials__grid { grid-template-columns: 1fr; }
    }

/* STATS ROW — Desktop */
    .ir-stats { padding: 72px 0; background: var(--brand-primary); }
    .ir-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    .ir-stats__item {
        text-align: center;
        padding: 20px 24px;
        position: relative;
    }
    .ir-stats__item + .ir-stats__item::before {
        content: '';
        position: absolute;
        left: 0; top: 20%; height: 60%;
        width: 1px;
        background: rgba(255,255,255,0.2);
    }
    .ir-stats__number {
        font-family: var(--font-heading);
        font-size: clamp(36px, 4vw, 56px);
        font-weight: 700;
        color: #ffffff;
        line-height: 1;
        margin-bottom: 10px;
    }
    .ir-stats__number sup {
        font-size: 0.5em;
        color: rgba(255,255,255,0.7);
        vertical-align: super;
    }
    .ir-stats__label {
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255,255,255,0.75);
        line-height: 1.5;
    }

    /* STATS ROW — Tablet */
    @media (max-width: 900px) {
        .ir-stats__grid { grid-template-columns: repeat(2, 1fr); }
        .ir-stats__item:nth-child(3)::before { display: none; }
        .ir-stats__item:nth-child(3),
        .ir-stats__item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.15); }
    }

    /* STATS ROW — Mobile */
    @media (max-width: 480px) {
        .ir-stats { padding: 52px 0; }
        .ir-stats__number { font-size: 32px; }
    }

/* RISK REVERSAL — Desktop */
    .ir-risk { padding: 40px 0; background: var(--bg-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .ir-risk__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 48px;
        flex-wrap: wrap;
    }
    .ir-risk__item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-heading);
        font-size: 15px;
        font-weight: 600;
        color: var(--text-dark);
    }

    /* RISK REVERSAL — Mobile */
    @media (max-width: 768px) {
        .ir-risk__inner { gap: 24px; flex-direction: column; align-items: flex-start; }
    }

/* DISCLAIMER — Desktop */
    .ir-disclaimer {
        background: #F4F6FA;
        border-top: 1px solid var(--border);
        padding: 40px 0;
    }
    .ir-disclaimer__inner {
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
    }
    .ir-disclaimer__label {
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #999999;
        margin-bottom: 14px;
    }
    .ir-disclaimer__text {
        font-size: 12px;
        color: #888888;
        line-height: 1.8;
    }
    .ir-disclaimer__text strong { color: #555555; font-weight: 600; }
    .ir-disclaimer__links {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .ir-disclaimer__links a {
        font-size: 12px;
        color: var(--brand-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* DISCLAIMER — Mobile */
    @media (max-width: 768px) {
        .ir-disclaimer__links { gap: 16px; }
    }

/* FOOTER — Desktop */
    .ir-footer {
        background: var(--bg-dark);
        padding: 36px 0;
    }
    .ir-footer__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }
    .ir-footer__links {
        display: flex;
        gap: 28px;
        align-items: center;
    }
    .ir-footer__links a {
        color: #999;
        font-size: 14px;
        transition: color var(--transition);
    }
    .ir-footer__links a:hover { color: #fff; }
    .ir-footer__copy { font-size: 13px; color: #666; }

    /* FOOTER — Mobile */
    @media (max-width: 768px) {
        .ir-footer__inner { flex-direction: column; text-align: center; gap: 16px; }
        .ir-footer__links { justify-content: center; }
    }

/* -----------------------------------------------
   MESSENGER FLOAT BUTTON
----------------------------------------------- */
.ir-messenger-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%);
    box-shadow: 0 4px 20px rgba(0, 106, 255, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: ir-float-in 0.5s ease 1s both;
}
.ir-messenger-float:hover {
    transform: scale(1.10) translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 106, 255, 0.50);
}
.ir-messenger-float svg {
    width: 28px;
    height: 28px;
    display: block;
}
@keyframes ir-float-in {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 768px) {
    .ir-messenger-float { bottom: 20px; right: 16px; width: 50px; height: 50px; }
    .ir-messenger-float svg { width: 24px; height: 24px; }
}

/* -----------------------------------------------
   CALENDLY SECTION — Button variant (no embed)
----------------------------------------------- */
.ir-calendly-btn-wrap {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ir-calendly-btn-wrap p {
    font-size: 14px;
    color: var(--text-muted);
}


/* ================================================
   v5.1 FIXES
================================================ */

/* FIX 1: Full-width layout — remove max-width constraint on container
   so sections fill the full browser width edge-to-edge */
html, body {
    width: 100%;
    overflow-x: hidden;
}
.ir-main {
    width: 100%;
    max-width: 100vw;
}
/* Sections fill full width; container inside keeps content readable */
.ir-section,
.ir-hero,
.ir-pain,
.ir-trust-bar,
.ir-stats,
.ir-risk,
.ir-disclaimer,
.ir-footer,
.ir-calendly {
    width: 100%;
}
/* Elementor section wrapper fix */
.elementor-section,
.elementor-top-section {
    width: 100% !important;
    max-width: 100% !important;
}

/* FIX 2: Emoji badge — ensure emoji font is loaded on all platforms */
.ir-badge,
.ir-hero .ir-badge {
    font-family: var(--font-heading), 'Apple Color Emoji', 'Segoe UI Emoji',
                 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif !important;
}

/* FIX 4: Stats grid — show 2 per row on mobile (not 1) */
@media (max-width: 600px) {
    .ir-stats__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ir-stats__item + .ir-stats__item::before {
        display: none;
    }
    .ir-stats__item:nth-child(3),
    .ir-stats__item:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,0.15);
    }
}

/* FIX 7: Pricing — Growth card first on mobile */
@media (max-width: 768px) {
    .ir-pricing__grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .ir-pricing__card--mobile-first {
        order: -1 !important;
    }
}

/* FIX 6: Counter span — ensure inline */
.ir-stats__number .ir-count {
    display: inline;
}


/* ================================================
   v5.2 FIXES — All 7 Issues
================================================ */

/* ── FIX 1: Full-width — remove any container max-width at section level ── */
/* Ensure no parent wrapper adds left/right space */
body > *,
.entry-content,
.page-content,
.elementor,
.elementor-inner,
.elementor-section-wrap,
.elementor-top-section,
.elementor-section,
.elementor-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* But keep ir-container centred with readable padding */
.ir-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}
/* Every ir-section fills full viewport width */
.ir-hero,
.ir-pain,
.ir-trust-bar,
.ir-stats,
.ir-risk,
.ir-disclaimer,
.ir-footer,
.ir-section,
.ir-calendly {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── FIX 3: Hero buttons center-align on mobile ── */
@media (max-width: 768px) {
    .ir-hero__btns {
        justify-content: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
}

/* ── FIX 4: "No long term" trust items — left-align on mobile ── */
@media (max-width: 768px) {
    .ir-hero__trust,
    .ir-hero__trust--left {
        align-items: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .ir-hero__trust li {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* ── FIX 5: "Who We Help" (3rd block) — 2-column grid on mobile ── */
@media (max-width: 768px) {
    .ir-who__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .ir-who__card {
        padding: 20px 16px !important;
    }
    .ir-who__card h3 {
        font-size: 14px !important;
    }
    .ir-who__card p {
        font-size: 12px !important;
    }
}

/* ── FIX 6: Pricing — Starter first, Growth second on mobile ── */
@media (max-width: 900px) {
    .ir-pricing__grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    /* Reset any order so DOM order wins: Starter → Growth → Pro */
    .ir-pricing__card {
        order: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
    .ir-pricing__card--featured {
        order: 0 !important;
        transform: none !important;
    }
}