/* ============================================================
   MAIN.CSS — Master Stylesheet for NeoD2C Website
   ------------------------------------------------------------
   STRUCTURE:
   1.  Google Fonts Import
   2.  CSS Variables (Colors, Fonts, Typography Tokens)
   3.  Global Reset & Base Styles
   4.  Navbar
   5.  Footer
   6.  Hero Section          — nh-
   7.  Stats / Pain Points   — sp-
   8.  Features Section      — feat2- + feat-
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,900&display=swap');


/* ============================================================
   2. CSS VARIABLES
   ============================================================ */
:root {
    /* Fonts */
    --font-primary:   'Satoshi', sans-serif;
    --font-nunito:    'Nunito Sans', sans-serif;
    --font-serif:     'Georgia', 'Times New Roman', serif;
    --font-sora:      'Sora', sans-serif;

    /* Brand Colors */
    --color-primary:        #053679;
    --color-primary-dark:   #085394;
    --color-primary-light:  #CFE8FF;
    --color-accent:         #DBE6FE;
    --color-accent-hover:   #E9F0FE;
    --color-bg-light:       #F3F7FF;
    --color-bg-grey:        #F5F7FA;
    --color-bg-main:        #EFEFEF;

    /* Text Colors */
    --color-text-dark:      #272727;
    --color-text-body:      #333333;
    --color-text-muted:     #7A7A7A;
    --color-text-white:     #ffffff;

    /* Status Colors */
    --color-success:        #5BA640;
    --color-error:          #DB504A;
    --color-warning:        #FFCE26;
    --color-warning-light:  #FFF2C6;
    --color-orange:         #FD7238;
    --color-orange-light:   #FFE0D3;

    /* Neutrals */
    --color-white:          #ffffff;
    --color-grey-light:     #eeeeee;
    --color-grey:           #AAAAAA;
    --color-border:         #D0D5DD;

    /* Shadows */
    --shadow-card:    0px 4px 8px 0px #ABBED1;
    --shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:      0 16px 48px rgba(59, 91, 219, 0.13);

    /* Border Radius */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   24px;

    /* Transitions */
    --transition-fast:   0.2s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.5s ease;

    /* ══════════════════════════════════════════════════════
       TYPOGRAPHY TOKENS  — single source of truth
       Every font-size and font-weight in every section must
       reference one of these tokens. No hardcoded px sizes.
    ══════════════════════════════════════════════════════ */

    /* Hero / CTA headline — largest display text on the page */
    --text-hero:            36px;
    --weight-hero:          800;

    /* Section titles — h2 across every section */
    --text-section-title:   28px;
    --weight-section-title: 800;

    /* Section eyebrow labels — ALL caps badges above titles */
    --text-eyebrow:         13px;
    --weight-eyebrow:       700;

    /* Section subtitle / description paragraph under titles */
    --text-section-desc:    15px;
    --weight-section-desc:  400;

    /* Card / feature titles */
    --text-card-title:      15px;
    --weight-card-title:    700;

    /* Card body copy */
    --text-card-desc:       14px;
    --weight-card-desc:     400;

    /* Stat numbers shown in stats bars / cards */
    --text-stat-number:     32px;
    --weight-stat-number:   800;

    /* Small stat numbers inside compact cards/mockups */
    --text-stat-small:      22px;
    --weight-stat-small:    800;

    /* Tiny labels, timestamps, badges */
    --text-label:           12px;
    --weight-label:         500;

    /* General body text */
    --text-body:            14px;
    --weight-body:          400;

    /* Nav links */
    --text-nav:             15px;
    --weight-nav:           600;

    /* Footer links / small text */
    --text-footer:          14px;
    --weight-footer:        400;
}

body.dark {
    --color-white:      #0C0C1E;
    --color-grey-light: #060714;
    --color-text-dark:  #FBFBFB;
}


/* ============================================================
   3. GLOBAL RESET & BASE STYLES
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    color: var(--color-text-dark);
    background-color: var(--color-white);
    font-size: var(--text-body);
    font-weight: var(--weight-body);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Global heading scale — section classes can reference these
      but must NOT override with hardcoded px values ── */
h1 {
    font-size: var(--text-hero);
    font-weight: var(--weight-hero);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text-dark);
}

h2 {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--color-text-dark);
}

h3 {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    line-height: 1.4;
    color: var(--color-text-dark);
}

h4 {
    font-size: var(--text-section-desc);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-dark);
}

h5 {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

p {
    font-size: var(--text-body);
    font-weight: var(--weight-body);
    line-height: 1.65;
    color: var(--color-text-body);
}

hr {
    height: 2px;
    border: none;
    background-color: #e0e0e0;
    margin-top: 6%;
}


/* ============================================================
   4. NAVBAR
   ============================================================ */
nav {
    position: absolute;
    top: 0;
    width: -webkit-fill-available;
}

.navMain {
    height: 72px;
    padding: 20px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: -webkit-fill-available;
    background: var(--color-white);
    z-index: 9999;
    top: 0;
    border-bottom: 1px solid var(--color-grey-light);
}

.menu {
    display: none;
}

.navMain ul {
    list-style: none;
    display: flex;
    align-items: center;
    column-gap: 50px;
    margin-top: 20px;
}

.navMain ul li a {
    display: flex;
    column-gap: 5px;
    align-items: center;
    color: var(--color-text-dark);
    justify-content: space-between;
}

.navMain ul img {
    object-fit: scale-down;
    width: 32px;
    height: 25px;
    margin-top: 2px;
}

.navMain ul li h3 {
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
    line-height: 1.4;
    padding: 0;
}

.navMain ul li p {
    font-weight: var(--weight-nav);
    margin-top: 5px;
    font-size: var(--text-nav);
    margin-left: 5px;
}

.navMain ul li a.active,
.navMain ul li.active a h3 {
    color: var(--color-primary);
    font-weight: 700;
}

.nav-link {
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
    text-decoration: none;
    color: #000;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
    text-underline-offset: 5px;
}

.displayMb {
    display: flex;
    align-items: center;
    gap: 25px;
}

.menu-nav-link {
    width: auto;
}

.menu-nav-link h3 {
    margin: 0;
    white-space: nowrap;
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
}

.platformsNav {
    position: relative;
}

.downArrowListDis {
    display: none;
}

.arrow-container {
    position: absolute;
    top: -13px;
    left: 95px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 13px solid var(--color-white);
}

.navMain ul li .downArrowListDis .downArrowList {
    position: absolute;
    width: 158%;
    border: none;
    border-radius: var(--radius-md);
    margin-top: 18px;
    padding: 10px;
    display: grid;
    background: var(--color-white);
    box-shadow: 0px 0px 4px 4px beige;
}

.navMain ul li .downArrowListDis .downArrowList p {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
}

.navMain ul li .downArrowListDis .downArrowList li a span {
    display: flex;
    padding: 2px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--color-white);
    border-bottom: none !important;
}

.navMain ul li .downArrowListDis .downArrowList li a span:hover {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 700;
    border-left: 2px solid var(--color-primary);
    border-bottom: none !important;
}

.navMain ul li .downArrowListDis .downArrowList li a p:hover {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 500;
    border-left: 4px solid var(--color-white);
    border-bottom: none !important;
}

.solutions-nav-item {
    position: relative;
}

.solutions-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 237px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-accent);
    box-shadow: var(--shadow-lg), 0 2px 8px rgba(0,0,0,0.06);
    padding: 10px;
    z-index: 9999;
    animation: dropIn 0.2s ease;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.solutions-dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--color-white);
    border-left: 1px solid var(--color-accent);
    border-top: 1px solid var(--color-accent);
    transform: translateX(-50%) rotate(45deg);
}

.solutions-nav-item:hover .solutions-dropdown,
.solutions-nav-item.open .solutions-dropdown { display: block; }

.solutions-nav-item:hover .chevron,
.solutions-nav-item.open .chevron { transform: rotate(180deg); }

.dropdown-option:hover { background: var(--color-accent-hover) !important; }
.dropdown-option:hover .option-arrow { opacity: 1 !important; transform: translateX(3px); }

.active-page { background: var(--color-accent-hover); }
.active-page strong { color: #3b5bdb !important; }

.underline-effect,
.underline-effect1,
.underline-effect2,
.underline-effect3 {
    position: relative;
}

.underline-effect::after,
.underline-effect1::after,
.underline-effect2::after,
.underline-effect3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-slow);
}

.underline-effect:hover,
.underline-effect1:hover,
.underline-effect2:hover { color: var(--color-primary); }

.underline-effect3:hover { color: #000079; }
.underline-effect3::after { background-color: #000079; }

.underline-effect:hover::after  { width: 72%; }
.underline-effect1:hover::after { width: 100%; }
.underline-effect2:hover::after { left: 8px; width: 70%; }
.underline-effect3:hover::after { width: 100%; }

/* ------------------------------------------------------------
   NAVBAR — TABLET (≤1067px)
   Nav links collapse into a hamburger-triggered dropdown panel.
   JS toggles #displayMbId between display:flex / display:none.
------------------------------------------------------------ */
@media screen and (max-width: 1067px) {
    .navMain {
        padding: 15px 40px;
        height: 60px;
        width: 100%;
    }

    .leftNav img { width: 150px; }

    .menu {
        display: block;
        align-items: center;
        position: relative;
        cursor: pointer;
        z-index: 10000;
    }

    /* Dropdown panel — hidden by default, JS switches to display:flex */
    .navMain .displayMb,
    #displayMbId {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
        row-gap: 4px;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        text-align: left;
        background: var(--color-white);
        padding: 10px 40px 20px;
        margin-top: 0;
        box-shadow: var(--shadow-md);
        border-bottom: 1px solid var(--color-grey-light);
    }

    .navMain ul.displayMb li {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--color-grey-light);
    }

    .navMain ul.displayMb li:last-child {
        border-bottom: none;
    }

    .menu-nav-link a { width: 100%; }

    .navMain ul li h3 { font-size: var(--text-nav); }

    .navMain ul li .downArrowListDis .downArrowList {
        position: static;
        display: grid;
        justify-content: flex-start;
        width: 100%;
        margin-top: 10px;
        box-shadow: none;
        border: 1px solid var(--color-grey-light);
    }

    .navMain ul li .downArrowListDis .downArrowList li {
        border-bottom: none;
        padding: 4px 0;
    }

    .navMain ul li .downArrowListDis .downArrowList p { padding: 5px; font-weight: 500; }

    .solutions-dropdown {
        display: none;
        position: static;
        transform: none;
        width: 100%;
        margin-top: 10px;
        box-shadow: none;
        border: 1px solid var(--color-grey-light);
        animation: none;
    }
    .solutions-dropdown::before { display: none; }
    .solutions-nav-item:hover .solutions-dropdown { display: none; }
    .solutions-nav-item.open .solutions-dropdown { display: block; }

    .underline-effect::after,
    .underline-effect1::after,
    .underline-effect2::after,
    .underline-effect3::after { content: none; }

    /* Login button stays visible next to the hamburger */
    .navMain > div:last-child { flex-shrink: 0; }
    .navMain > div:last-child img { width: 120px; }
}

/* ------------------------------------------------------------
   NAVBAR — MOBILE (≤600px)
------------------------------------------------------------ */
@media screen and (max-width: 600px) {
    .navMain { padding: 15px 20px; }
    .leftNav img { width: 130px; }

    .navMain .displayMb,
    #displayMbId {
        top: 56px;
        padding: 10px 20px 18px;
        max-height: calc(100vh - 56px);
    }

    .nav-link {
        font-size: var(--text-nav);
        padding: 1px 15px;
    }

    .menu {
        display: block;
        font-size: 18px;
        cursor: pointer;
        margin: 0;
    }

    .navMain ul li h3 { font-size: var(--text-nav); font-weight: var(--weight-nav); }
    .navMain ul li .downArrowListDis .downArrowList p { font-size: var(--text-card-desc); font-weight: var(--weight-card-desc); }
    .navMain ul li .downArrowListDis .downArrowList img { width: 30px; }
    .menu-nav-link a { margin-left: 0; }
    .downArrowListDis { display: none; }

    .navMain ul li .downArrowListDis .downArrowList {
        position: relative;
        width: 100%;
        margin-top: 0;
        background: var(--color-white);
    }

    .navMain ul li .downArrowListDis .downArrowList li { text-align: left; }

    .navMain ul li .downArrowListDis .downArrowList li a span {
        display: flex;
        padding: 5px;
        border-radius: var(--radius-sm);
        border-left: 4px solid var(--color-white);
        border-bottom: none !important;
    }

    .navMain ul li .downArrowListDis .downArrowList li a span:hover {
        color: var(--color-primary);
        cursor: pointer;
        font-weight: 500;
        border-left: 4px solid var(--color-primary);
        border-bottom: none !important;
    }

    .navMain > div:last-child img { width: 96px; }
}
@media screen and (max-width: 1067px) {
    .navMain ul.displayMb li {
        border-bottom: none;
    }
}

/* ============================================================
   5. FOOTER
   ============================================================ */
.footer_main {
    background-size: 100%;
    color: var(--color-white);
    padding-top: 20px;
}

.footer_span {
    display: flex;
    justify-content: space-around;
    padding-bottom: 20px !important;
}

.footer_logo {
    width: auto;
    margin-top: 11px;
    margin-left: 25px;
}

.footerDiv a {
    color: var(--color-white);
    font-style: normal;
    font-weight: var(--weight-footer);
    font-size: var(--text-footer);
    line-height: 1.5;
}

.footerDiv a:hover {
    color: #4699E3;
    transition: color var(--transition-base);
}

.footer_span1 {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.footer_span1 span {
    display: flex;
    gap: 10px;
}

.footer_span1 span img {
    width: 32px;
    aspect-ratio: 1/1;
    object-fit: contain;
    align-self: baseline;
}
.neoD2CFooterLogo{
    width: 360px;
    height: auto;
    object-fit: contain;
}
.vailoFooterSpan1 p {
    display: flex;
    font-style: normal;
    font-weight: 500;
    font-size: var(--text-footer);
    color: var(--color-white);
}

.footerHead {
    font-size: var(--text-card-title) !important;
    font-weight: var(--weight-card-title) !important;
    margin-bottom: 10px;
    color: var(--color-white);
}

.hrBottomFooter {
    margin: 10px 62px;
    border: 1px solid var(--color-white);
}

.footerBottom {
    display: flex;
    justify-content: space-between;
    margin: 10px 45px;
    align-items: center;
}

.footerBottom > div {
    display: flex;
    margin: 0 17px;
    align-items: center;
    row-gap: 15px;
    column-gap: 49px;
}

.footerBottom p {
    font-size: var(--text-footer);
    font-weight: var(--weight-footer);
    color: var(--color-white);
}

.footerBottom1 {
    text-align: center;
    padding-bottom: 10px;
}

.socialLinkDiv { column-gap: 15px !important; }

.socialLink {
    display: inline-flex;
    column-gap: 15px;
}

.footer_icon1 {
    display: flex;
    text-decoration: none;
    justify-content: space-around;
}

.footer_icon1 p {
    font-style: normal;
    font-weight: var(--weight-footer);
    font-size: var(--text-footer);
    text-decoration: none !important;
    color: var(--color-white);
}

.footer_icon1 a:hover {
    text-decoration: none;
    color: #4699E3;
}

.footer_icon {
    text-decoration: none;
    padding: 5px;
    display: inline-flex !important;
    font-size: large !important;
}

.footer_icon p { margin-left: 10px; }

.arrowUpF {
    position: absolute;
    right: 48.9%;
    top: 6px;
    width: 28px;
}

.lineImg {
    width: -webkit-fill-available;
    margin: 0 81px;
}

/* ------------------------------------------------------------
   FOOTER — MOBILE (≤600px)
------------------------------------------------------------ */
@media screen and (max-width: 600px) {
    .footer_span {
        display: flex !important;
        flex-direction: column !important;
        text-align: start;
        margin: 0 20px;
    }

    .footerLogoVailo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        object-fit: scale-down;
    }

    .neoD2CFooterLogo { width: 220px; }

    .footer_span1 {
        width: 100%;
        margin: 20px 0;
        text-align: left;
    }

    .hrBottomFooter { margin: 0; }

    .footerBottom {
        margin: 10px 20px;
        display: grid;
        row-gap: 20px;
    }

    .footerBottom > div {
        display: grid;
        margin: 0;
        row-gap: 10px;
    }

    .arrowUpF {
        right: 48%;
        top: 4px;
        object-fit: contain;
        width: 4%;
    }

    .lineImg {
        width: -webkit-fill-available;
        aspect-ratio: 20/1;
        margin: 0;
    }
}

/* ------------------------------------------------------------
   FOOTER — narrow tablet / large mobile (≤1050px)
   Wrap items two-per-row so nothing overflows.
------------------------------------------------------------ */
@media screen and (max-width: 1050px) {
    .footer_span {
        display: flex !important;
        flex-wrap: wrap !important;
        row-gap: 24px;
        padding-left: 0;
    }

    .footer_span .footerDiv {
        flex: 0 0 50% !important;
    }
}

/* ------------------------------------------------------------
   FOOTER — TABLET (601px–1024px)
   Clean 2-column grid: logo full width on top, remaining
   columns auto-flow two per row.
------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1024px) {
    .footer_span {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 40px;
        row-gap: 30px;
        justify-content: center;
        padding-bottom: 20px !important;
        margin: 10px 60px 10px;
    }

    .footer_span .footerDiv {
        flex: unset !important;
    }

    .item1f {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
    }

    .neoD2CFooterLogo { width: 260px; }

    .footerBottom {
        flex-wrap: wrap;
        row-gap: 15px;
        margin: 10px 30px;
    }

    .footerBottom > div {
        column-gap: 24px;
        row-gap: 10px;
        flex-wrap: wrap;
        margin: 0;
    }

    .hrBottomFooter { margin: 10px 30px; }

    .arrowUpF {
        right: 49%;
        top: 2px;
        width: 20px;
    }
}


/* ============================================================
   6. HERO SECTION  —  nh- prefix
   ============================================================ */

.nh-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    margin-top: -140px;
    margin-bottom: -140px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

/* ── Dot grid background ── */
.nh-dotgrid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#ABBED1 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    opacity: 0.30;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.5) 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.5) 100%);
}

/* ── Two-column wrap ── */
.nh-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

/* ── LEFT COLUMN ── */
.nh-left {
    display: flex;
    flex-direction: column;
}

/* Badge */
.nh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 24px;
    width: fit-content;
}

.nh-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
    animation: nh-pulse 2.2s ease-in-out infinite;
}

@keyframes nh-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22); }
    50%       { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.06); }
}

/* Headline — uses hero token */
.nh-headline {
    font-size: var(--text-hero);
    font-weight: var(--weight-hero);
    line-height: 1.1;
    color: var(--color-text-dark);
    letter-spacing: -0.03em;
    margin: 0 0 18px;
}

.nh-headline-blue { color: var(--color-primary); }

/* Sub-text */
.nh-sub {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 420px;
    margin: 0 0 32px;
}

.nh-sub strong {
    color: var(--color-text-body);
    font-weight: 600;
}

/* CTA buttons */
.nh-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.nh-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--color-primary);
    color: var(--color-text-white);
    font-family: var(--font-primary);
    font-size: var(--text-card-desc);
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 18px rgba(5, 54, 121, 0.22);
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
    line-height: 1;
}

.nh-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(5, 54, 121, 0.28);
}

.nh-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.nh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-white);
    color: var(--color-text-dark);
    font-family: var(--font-primary);
    font-size: var(--text-card-desc);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1.5px solid var(--color-border);
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    line-height: 1;
}

.nh-btn-ghost:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-light);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.nh-btn-ghost:active { transform: translateY(0); }

.nh-play-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-white);
    flex-shrink: 0;
    transition: background var(--transition-base);
}

.nh-btn-ghost:hover .nh-play-wrap { background: var(--color-primary-dark); }

/* Trust row */
.nh-trust {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.nh-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── RIGHT COLUMN ── */
.nh-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nh-hero-img-wrap {
    position: relative;
    width: 100%;
    max-width: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nh-hero-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 24px 60px rgba(5, 54, 121, 0.12));
}

@media screen and (max-width: 1067px) {
    .nh-section {
        min-height: auto;
        margin-top: 60px;
        padding: 40px 40px 40px;
    }

    .nh-wrap { grid-template-columns: 1fr; gap: 40px; }

    .nh-left { align-items: center; text-align: center; }

    .nh-sub   { max-width: 100%; }
    .nh-ctas  { justify-content: center; }
    .nh-trust { justify-content: center; }

    .nh-right { width: 100%; }
    .nh-hero-img-wrap { max-width: 420px; margin: 0 auto; }
}

@media screen and (max-width: 600px) {
    .nh-section { margin-top: 60px; padding: 30px 20px 30px; }

    .nh-headline { font-size: calc(var(--text-hero) * 0.75); }

    .nh-ctas { flex-direction: column; align-items: center; width: 100%; }

    .nh-btn-primary,
    .nh-btn-ghost { width: 100%; max-width: 300px; justify-content: center; }

    .nh-trust { flex-direction: column; gap: 10px; }

    .nh-hero-img-wrap { max-width: 300px; visibility: hidden; }
}
/* ── Responsive ── */
@media screen and (max-width: 768px) {
    .blg-benefit-stats { grid-template-columns: 1fr; gap: 12px; }
}
 
@media screen and (max-width: 600px) {
    .blg-benefit-stats { grid-template-columns: 1fr; }
}

@media screen and (max-width: 600px) {
    .nh-hero-img-wrap {
        overflow: hidden;
        margin-top: -100px;   /* adjust until the gap is gone */
    }
}

@media screen and (max-width: 1067px) {
    .nh-section {
        margin-top: 24px;   /* was 60px */
        padding: 40px 40px 40px;
    }
}

@media screen and (max-width: 600px) {
    .nh-section {
        margin-top: 20px;   /* was 60px */
        padding: 30px 20px 30px;
        margin-bottom: -370px;
    }
}


/* ============================================================
   7. STATS / PAIN POINTS SECTION  —  sp- prefix
   ============================================================ */

.sp-section {
    width: 100%;
    background: var(--color-bg-light);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.sp-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Header */
.sp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.sp-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sp-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

/* Grid */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.sp-card {
    background: var(--color-white);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 28px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-fast), border-color var(--transition-base);
}

.sp-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--color-accent);
}

/* Icon box */
.sp-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.sp-icon--red    { background: #FFF0EE; color: #E8472A; border: 1px solid #FFCFC9; }
.sp-icon--orange { background: #FFF6EC; color: #D97706; border: 1px solid #FDDBA6; }
.sp-icon--purple { background: #F4F0FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.sp-icon--blue   { background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--color-primary-light); }

/* Stat number */
.sp-stat {
    font-size: var(--text-stat-number);
    font-weight: var(--weight-stat-number);
    color: var(--color-text-dark);
    letter-spacing: -0.04em;
    line-height: 1;
}

/* Label */
.sp-label {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    line-height: 1.3;
}

/* Description */
.sp-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

@media screen and (max-width: 1067px) {
    .sp-section { padding: 60px 40px; }
    .sp-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media screen and (max-width: 600px) {
    .sp-section    { padding: 50px 20px; }
    .sp-container  { gap: 36px; }

    .sp-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sp-card {
        padding: 22px 20px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .sp-icon { margin-bottom: 0; }
    .sp-stat { font-size: var(--text-stat-small); width: 100%; }
}


/* ============================================================
   8. PLATFORM FLOW SECTION  —  pf- prefix
   ============================================================ */

.pf-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.pf-container {
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ── Header ── */
.pf-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.pf-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.pf-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

/* ── Flow row ── */
.pf-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
}

/* ── Arrow ── */
.pf-arrow {
    font-size: 20px;
    color: #C5CDD8;
    flex-shrink: 0;
    margin-top: 28px;
    padding: 0 6px;
    line-height: 1;
    font-weight: 300;
}

/* ── Single step ── */
.pf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    flex: 1;
    min-width: 0;
    padding: 0 4px;
}

/* ── Icon circle ── */
.pf-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.pf-step:hover .pf-icon {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.pf-icon--blue    { background: #EBF4FF; color: #1D6FD8; border: 1.5px solid #C3DEFF; }
.pf-icon--green   { background: #E6F7EF; color: #1A7A4A; border: 1.5px solid #B3E8CF; }
.pf-icon--orange  { background: #FFF4E6; color: #D97706; border: 1.5px solid #FDDBA6; }
.pf-icon--teal    { background: #E6FAF8; color: #0F8C7E; border: 1.5px solid #A7E8E3; }
.pf-icon--purple  { background: #F0EEFF; color: #6C47D9; border: 1.5px solid #D4C9F9; }
.pf-icon--amber   { background: #FFF8E6; color: #C07800; border: 1.5px solid #FFE49A; }
.pf-icon--emerald { background: #EAFAF0; color: #1A8C4E; border: 1.5px solid #A3E8C0; }

/* ── Step label ── */
.pf-label {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    line-height: 1.2;
    display: block;
}

/* ── Step description ── */
.pf-desc {
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: block;
    max-width: 90px;
}

@media screen and (max-width: 1067px) {
    .pf-section { padding: 60px 30px; }

    .pf-icon     { width: 52px; height: 52px; }
    .pf-icon svg { width: 22px; height: 22px; }

    .pf-arrow  { font-size: 16px; margin-top: 22px; padding: 0 2px; }
}

@media screen and (max-width: 768px) {
    .pf-section    { padding: 50px 20px; }
    .pf-container  { gap: 40px; }

    .pf-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px 0;
    }

    .pf-arrow { display: none; }

    .pf-step { flex: 0 0 25%; padding: 0 8px; }

    .pf-icon { width: 56px; height: 56px; }
}

@media screen and (max-width: 480px) {
    .pf-step { flex: 0 0 33.33%; }
}


/* ============================================================
   LEGACY feat2- HEADER CLASSES (kept for backward compat)
   ============================================================ */

.feat2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.feat2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-accent);
    border: 1px solid var(--color-primary-light);
    padding: 6px 16px;
    border-radius: 100px;
}

.feat2-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

.feat2-title-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    text-align: left;
    width: 100%;
    max-width: 900px;
}

.feat2-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

.feat2-title-accent { color: var(--color-primary); }

.feat2-subtitle {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0;
}

.feat2-header::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-grey-light);
    margin-top: 12px;
}

.feat2-subheader {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-bg-light);
}

.feat2-subheader-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feat2-subbadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.06em;
    color: var(--color-primary);
    width: fit-content;
}

.feat2-subbadge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
    animation: feat2-pulse 2.2s ease-in-out infinite;
}

@keyframes feat2-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22); }
    50%       { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0.06); }
}

.feat2-subtitle-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.02em;
    margin: 0;
}

.feat2-subtitle-blue { color: var(--color-primary); }

.feat2-subheader-desc {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0;
    padding-bottom: 6px;
}

@media screen and (max-width: 1067px) {
    .feat2-title-row {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 100%;
        text-align: center;
    }

    .feat2-subheader { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   FEATURE DEEP-DIVE SECTION  —  fd- prefix
   ============================================================ */

.fd-section {
    width: 100%;
    background: var(--color-white);
    padding: 20px 100px 80px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.fd-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Eyebrow ── */
.fd-eyebrow-wrap { text-align: center; }

.fd-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* ── 3-col grid ── */
.fd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Card outer ── */
.fd-card {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--color-accent);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.fd-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* ── Card header ── */
.fd-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fd-card-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0;
}

.fd-card-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

/* ── White inner mockup area ── */
.fd-card-mockup {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 18px;
    flex: 1;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-grey-light);
}

/* ══ CARD 1 — CATALOG MOCKUP ══ */
.fd-catalog { display: flex; flex-direction: column; gap: 12px; }

.fd-catalog-collection {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
}

.fd-catalog-sub {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
    margin: 0;
    margin-top: -8px;
}

.fd-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.fd-catalog-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.fd-catalog-img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
}

.fd-catalog-img--1 { background: linear-gradient(135deg, #F5E6D8, #E8C9A8); }
.fd-catalog-img--2 { background: linear-gradient(135deg, #D8E8F5, #A8C9E8); }
.fd-catalog-img--3 { background: linear-gradient(135deg, #E8F5D8, #C9E8A8); }

.fd-catalog-price {
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--color-text-dark);
}

.fd-catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-card-desc);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 4px;
    transition: gap var(--transition-fast);
}

.fd-catalog-link:hover { gap: 8px; }

/* ══ CARD 2 — CAMPAIGN MOCKUP ══ */
.fd-campaign { display: flex; flex-direction: column; gap: 14px; }

.fd-campaign-label {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
}

.fd-campaign-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.fd-stat-item { display: flex; flex-direction: column; gap: 2px; }

.fd-stat-num {
    font-size: var(--text-card-desc);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1;
}

.fd-stat-item--blue .fd-stat-num { color: var(--color-primary); }

.fd-stat-lbl {
    font-size: var(--text-label);
    color: var(--color-text-muted);
    font-weight: var(--weight-label);
}

.fd-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 90px;
    padding-top: 10px;
    border-bottom: 1px solid var(--color-grey-light);
}

.fd-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
}

.fd-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    transition: opacity var(--transition-fast);
}

.fd-bar--light { background: #BFD7F7; }
.fd-bar--dark  { background: var(--color-primary); }

.fd-bar-group:hover .fd-bar { opacity: 0.8; }


/* ============================================================
   FEATURES SECTION  —  fd2- prefix
   ============================================================ */

.fd2-section {
    width: 100%;
    background: var(--color-bg-light);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.fd2-eyebrow {
    text-align: center;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 32px;
}

.fd2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1130px;
    margin: 0 auto;
}

/* ── Card shell ── */
.fd2-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #E4EDFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.fd2-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(5, 54, 121, 0.10);
}

/* ── Card header ── */
.fd2-card-head { padding: 24px 24px 16px; }

.fd2-card-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-primary);
    margin: 0 0 8px;
    line-height: 1.2;
}

.fd2-card-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Card body ── */
.fd2-card-body {
    padding: 0 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Inner white box ── */
.fd2-inner-box {
    background: var(--color-white);
    border: 1px solid #E4EDFF;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ════ CARD 1 — CATALOG ════ */
.fd2-catalog-label {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0 0 2px;
}

.fd2-catalog-sub {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

.fd2-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.fd2-catalog-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fd2-catalog-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    overflow: hidden;
    object-fit: cover;
    display: block;
}

.fd2-catalog-price {
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--color-text-dark);
}

.fd2-catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-card-desc);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--transition-fast);
}

.fd2-catalog-link:hover { gap: 8px; }

.fd2-catalog-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ════ CARD 2 — CAMPAIGNS ════ */
.fd2-camp-label {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0 0 12px;
}

.fd2-camp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 14px;
    background: var(--color-bg-light);
    border-radius: 10px;
    padding: 10px 8px;
}

.fd2-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.fd2-stat-lbl {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
}

.fd2-stat-num {
    font-size: var(--text-card-desc);
    font-weight: 800;
    color: var(--color-text-dark);
    line-height: 1;
}

.fd2-stat-num--blue { color: var(--color-primary); }

/* ── Bar chart ── */
.fd2-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 80px;
    border-bottom: 1.5px solid var(--color-grey-light);
    margin-top: auto;
}

.fd2-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
}

.fd2-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    transition: opacity var(--transition-fast);
}

.fd2-bar--light { background: var(--color-primary-light); }
.fd2-bar--dark  { background: var(--color-primary); }
.fd2-bar-group:hover .fd2-bar { opacity: 0.75; }

/* Bar heights */
.fd2-bar--h28 { height: 28px; }
.fd2-bar--h30 { height: 30px; }
.fd2-bar--h32 { height: 32px; }
.fd2-bar--h38 { height: 38px; }
.fd2-bar--h42 { height: 42px; }
.fd2-bar--h44 { height: 44px; }
.fd2-bar--h46 { height: 46px; }
.fd2-bar--h48 { height: 48px; }
.fd2-bar--h52 { height: 52px; }
.fd2-bar--h56 { height: 56px; }
.fd2-bar--h58 { height: 58px; }
.fd2-bar--h62 { height: 62px; }
.fd2-bar--h66 { height: 66px; }
.fd2-bar--h72 { height: 72px; }
.fd2-bar--h76 { height: 76px; }

/* ════ CARD 3 — CHAT ════ */
.fd2-inner-box--chat { gap: 10px; padding: 14px; }

.fd2-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.fd2-chat-row--right { justify-content: flex-end; }
.fd2-chat-row--left  { justify-content: flex-start; }

.fd2-chat-arrow {
    font-size: var(--text-card-desc);
    color: var(--color-grey);
    text-align: center;
    padding-left: 36px;
    line-height: 1;
}

.fd2-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.fd2-avatar svg { width: 15px; height: 15px; flex-shrink: 0; }

.fd2-avatar--blue  { background: #EBF4FF; color: var(--color-primary); border: 1px solid var(--color-primary-light); }
.fd2-avatar--green { background: #E6F7EF; color: #1A7A4A; border: 1px solid #B3E8CF; }

.fd2-bubble {
    padding: 8px 12px;
    max-width: 75%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fd2-bubble--user {
    background: var(--color-bg-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
}

.fd2-bubble--bot {
    background: var(--color-white);
    border: 1px solid var(--color-grey-light);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.fd2-tag {
    font-size: var(--text-label);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.fd2-tag--green { color: #1A7A4A; }

.fd2-bubble p {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.45;
}

@media screen and (max-width: 1067px) {
    .fd2-section { padding: 50px 40px 60px; }

    .fd2-grid { grid-template-columns: 1fr; gap: 16px; }

    .fd2-card { flex-direction: row; align-items: stretch; }

    .fd2-card-head {
        flex: 0 0 36%;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid #EEF3FF;
    }

    .fd2-card-body { flex: 1; }
    .fd2-camp-stats { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .fd2-section { padding: 44px 20px 54px; }

    .fd2-card { flex-direction: column; }

    .fd2-card-head { flex: unset; border-right: none; }
}

@media screen and (max-width: 480px) {
    .fd2-catalog-grid { gap: 6px; }
}


/* ============================================================
   STATS BAR SECTION  —  sb- prefix
   ============================================================ */

.sb-section {
    width: 100%;
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.sb-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 32px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    padding: 0 32px;
}

.sb-item:first-child { padding-left: 0; }
.sb-item:last-child  { padding-right: 0; }

.sb-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sb-icon svg { width: 22px; height: 22px; color: var(--color-white); flex-shrink: 0; }

.sb-text { display: flex; flex-direction: column; gap: 4px; }

/* Stat numbers in the full-width stats bar */
.sb-number {
    font-size: var(--text-stat-number);
    font-weight: var(--weight-stat-number);
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.sb-label {
    font-size: var(--text-card-desc);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
}

.sb-divider {
    width: 1px;
    height: 52px;
    background: rgba(255, 255, 255, 0.20);
    flex-shrink: 0;
}

@media screen and (max-width: 1067px) {
    .sb-section   { padding: 0 40px 50px; }
    .sb-container { padding: 28px 32px; }
    .sb-item      { padding: 0 20px; gap: 14px; }
    .sb-number    { font-size: var(--text-stat-small); }
    .sb-icon      { width: 44px; height: 44px; }
    .sb-icon svg  { width: 18px; height: 18px; }
    .sb-divider   { height: 44px; }
}

@media screen and (max-width: 768px) {
    .sb-section   { padding: 0 20px 44px; }
    .sb-container { flex-wrap: wrap; padding: 24px 20px; gap: 0; }

    .sb-item {
        flex: 0 0 50%;
        padding: 16px 20px;
        box-sizing: border-box;
    }

    .sb-item:first-child { padding-left: 20px; }
    .sb-item:last-child  { padding-right: 20px; }

    .sb-divider { display: none; }
    .sb-item:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}

@media screen and (max-width: 480px) {
    .sb-item       { flex: 0 0 100%; }
    .sb-item + .sb-item { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}


/* ============================================================
   INTEGRATIONS SECTION  —  ig- prefix
   ============================================================ */

.ig-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.ig-container {
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ig-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.ig-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.ig-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    cursor: default;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
    white-space: nowrap;
}

.ig-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 16px rgba(5, 54, 121, 0.10);
    transform: translateY(-2px);
}

.ig-logo {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ig-logo--woo {
    background: #7F54B3;
    border-radius: 5px;
    width: 32px;
    height: 20px;
}

.ig-woo-badge {
    font-size: var(--text-label);
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ig-name {
    font-size: var(--text-card-desc);
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1;
}

.ig-more {
    font-size: var(--text-card-desc);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
}

@media screen and (max-width: 1067px) {
    .ig-section { padding: 44px 40px 54px; }
    .ig-card    { padding: 10px 16px; gap: 8px; }
}

@media screen and (max-width: 768px) {
    .ig-section { padding: 40px 20px 48px; }
    .ig-card    { padding: 9px 14px; }
}

@media screen and (max-width: 480px) {
    .ig-card { padding: 8px 12px; gap: 7px; }
    .ig-logo svg { width: 20px; height: 20px; }
}


/* ============================================================
   TESTIMONIAL SECTION
   ============================================================ */


.ts-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.ts-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Header ── */
.ts-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.ts-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ts-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

/* ── Grid ── */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ── Card — matches ce-col exactly ── */
.ts-card {
    background: var(--color-white);
    border-radius: 20px;
    border: 1px solid #E4EDFF;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(5, 54, 121, 0.05);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.ts-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ── Stars ── */
.ts-stars {
    display: flex;
    gap: 4px;
}

.ts-star {
    color: #F5A623;
    font-size: 14px;
}

/* ── Quote text ── */
.ts-quote {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    line-height: 1.8;
    color: var(--color-text-body);
    margin: 0;
    flex: 1;
}

/* ── Divider ── */
.ts-divider {
    height: 1px;
    background: #E4EDFF;
    border: none;
    margin: 0;
}

/* ── Author row ── */
.ts-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ts-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #E4EDFF;
}

/* Avatar fallback initials */
.ts-avatar-initials {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    flex-shrink: 0;
}

.ts-avatar-initials--blue   { background: #5B9BD5; }
.ts-avatar-initials--purple { background: #9B72CF; }
.ts-avatar-initials--green  { background: #4CAF7D; }

.ts-author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ts-author-name {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
}

.ts-author-role {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Metric badge ── */
.ts-metric {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.ts-metric-num {
    font-size: var(--text-card-title);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.ts-metric-lbl {
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── Dots ── */
.ts-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ts-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D0D5DD;
    transition: background var(--transition-base), width var(--transition-base);
}

.ts-dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: 100px;
}

/* ── Responsive ── */
@media screen and (max-width: 1067px) {
    .ts-section { padding: 60px 40px; }
    .ts-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media screen and (max-width: 600px) {
    .ts-section { padding: 50px 20px; }
    .ts-grid    { grid-template-columns: 1fr; gap: 16px; }
}
/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
    padding: 50px 50px;
    background: var(--color-bg-light);
    margin-top: 0;
}

.cta-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid #EEF2F7;
    border-radius: 28px;
    padding: 50px 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.cta-content {
    max-width: 520px;
    position: relative;
    z-index: 2;
}

/* CTA headline — uses section-title token, NOT a one-off 48px */
.cta-content h2 {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-primary);
    margin-bottom: 16px;
    letter-spacing: -0.025em;
}

.cta-content p {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    color: var(--color-text-muted);
}

.cta-action {
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 320px;
    height: 56px;
    background: linear-gradient(90deg, var(--color-primary), #1D72FF);
    color: var(--color-white);
    font-size: var(--text-card-title);
    font-weight: 700;
    border-radius: 14px;
    transition: var(--transition-base);
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta-btn span { font-size: 22px; }

.cta-features {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
}

.cta-pattern-left,
.cta-pattern-right {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cta-pattern-left {
    width: 220px;
    height: 220px;
    left: -120px;
    top: -40px;
    background: radial-gradient(circle, #DCE8FF 2px, transparent 2px);
    background-size: 10px 10px;
    opacity: 0.8;
}

.cta-pattern-right {
    width: 260px;
    height: 260px;
    right: -140px;
    bottom: -120px;
    background: radial-gradient(circle, #DCE8FF 2px, transparent 2px);
    background-size: 10px 10px;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 50px 30px;
    }

    .cta-btn { min-width: 280px; }
}

@media (max-width: 768px) {
    .cta-section { padding: 60px 20px; }

    .cta-btn {
        width: 100%;
        min-width: auto;
        height: 56px;
    }

    .cta-features { gap: 8px; }
}

/* ============================================================
   PLATFORM PAGE — HERO SECTION  (.plat-)
   ============================================================ */
/* ============================================================
   PLATFORM PAGE — HERO SECTION
   ============================================================ */
/* ============================================================
   PLATFORM PAGE — HERO SECTION  (.plat-section, applied on top of .nh-section)
   ============================================================ */
   .plat-section {
    margin-top: -50px;
    margin-bottom: -50px;
    padding-top: 70px;
    padding-right: 0;
}

.plat-section .nh-wrap {
    grid-template-columns: 0.7fr 1.3fr;
    max-width: 100%;
    padding-right: 0;
}

.plat-section .nh-right {
    justify-content: flex-end;
}

.plat-section .nh-hero-img-wrap {
    max-width: 100%;
    width: 100%;
}
@media screen and (min-width: 1068px) {
    .plat-section {
        margin-top: -50px;
        margin-bottom: -50px;
        padding-top: 70px;
        padding-right: 0;
    }

    .plat-section .nh-wrap {
        grid-template-columns: 0.7fr 1.3fr;
        max-width: 100%;
        padding-right: 0;
    }

    .plat-section .nh-right {
        justify-content: flex-end;
    }

    .plat-section .nh-hero-img-wrap {
        max-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 1067px) {
    .plat-section {
        margin-top: 24px;      /* matches .nh-section's own tablet value */
        margin-bottom: 0;
        padding-top: 40px;
    }

    .plat-section .nh-wrap {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 40px;
    }

    .plat-section .nh-right {
        justify-content: center;
    }

    .plat-section .nh-hero-img-wrap {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 600px) {
    .plat-section {
        margin-top: 20px;
        padding-top: 30px;
        margin-bottom: -240px;
    }

    .plat-section .nh-hero-img-wrap {
        max-width: 300px;
        visibility: hidden;
    }
}

/* ============================================================
   CUSTOMER EXPERIENCE SECTION  —  ce- prefix
   ============================================================ */

.ce-section {
    width: 100%;
    background: #F8FAFF;
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.ce-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Header ── */
.ce-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.ce-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ce-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

/* ── 3 col grid ── */
.ce-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ── Single column card ── */
.ce-col {
    background: var(--color-white);
    border-radius: 20px;
    border: 1px solid #E4EDFF;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(5, 54, 121, 0.05);
    height: 100%;
}

/* ── Feature row ── */
.ce-feat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ce-feat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ce-feat-icon--green  { background: #E6F7EF; color: #1A7A4A; border: 1px solid #B3E8CF; }
.ce-feat-icon--purple { background: #F0EEFF; color: #6C47D9; border: 1px solid #D4C9F9; }
.ce-feat-icon--blue   { background: #EBF4FF; color: #1D6FD8; border: 1px solid #C3DEFF; }

.ce-feat-text { display: flex; flex-direction: column; gap: 6px; }

.ce-feat-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.3;
}

.ce-feat-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Mockup wrapper ── */
.ce-mockup {
    background: #F8FAFF;
    border-radius: 14px;
    border: 1px solid #E4EDFF;
    padding: 14px;
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 280px;
    align-items: stretch;
}

.ce-mockup--col,
.ce-mockup--support {
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

/* ══ COL 1 — Chat list + window ══ */
.ce-chat-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.ce-chat-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0F4FF;
}

.ce-chat-item:last-child { border-bottom: none; padding-bottom: 0; }

.ce-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-white);
    flex-shrink: 0;
}

.ce-avatar--pink   { background: #E8A0BF; }
.ce-avatar--blue   { background: #5B9BD5; }
.ce-avatar--purple { background: #9B72CF; }

.ce-chat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.ce-chat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ce-chat-name  { font-size: 11px; font-weight: 700; color: var(--color-text-dark); }
.ce-chat-time  { font-size: 10px; color: var(--color-text-muted); }

.ce-chat-preview {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-chat-window {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* ── Bubbles ── */
.ce-bubble {
    padding: 9px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.ce-bubble p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    color: var(--color-text-dark);
}

.ce-bubble-time {
    font-size: 10px;
    color: var(--color-text-muted);
    align-self: flex-end;
}

.ce-bubble--bot {
    background: var(--color-white);
    border: 1px solid #E4EDFF;
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    align-self: flex-start;
}

.ce-bubble--user {
    background: #E8F5E9;
    border-radius: 12px 12px 4px 12px;
    align-self: flex-start;
}

.ce-bubble--right {
    align-self: flex-end;
    border-radius: 12px 4px 12px 12px;
}

/* ══ COL 2 — Product card ══ */
.ce-product-card {
    display: flex;
    gap: 12px;
    background: var(--color-white);
    border-radius: 12px;
    border: 1px solid #E4EDFF;
    padding: 12px;
    align-items: center;
}

.ce-product-img {
    width: 70px;
    height: 88px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F5E6D8, #E8C9A8);
    overflow: hidden;
    flex-shrink: 0;
}

.ce-product-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ce-product-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.ce-product-name {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
}

.ce-product-sub  { font-size: 11px; color: var(--color-text-muted); margin: 0; }

.ce-product-price {
    font-size: var(--text-card-title);
    font-weight: 800;
    color: var(--color-text-dark);
    margin: 0;
}

.ce-product-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
    border: 1px solid var(--color-primary-light);
    padding: 4px 10px;
    border-radius: 6px;
    text-align: center;
    transition: background 0.2s ease;
}

.ce-product-link:hover { background: var(--color-accent); }

.ce-wa-msg {
    background: var(--color-white);
    border: 1px solid #E4EDFF;
    border-radius: 4px 12px 12px 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-wa-msg p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin: 0;
}

/* ══ COL 3 — Support chat ══ */
.ce-support-reply {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ce-support-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EBF4FF;
    border: 1px solid #C3DEFF;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media screen and (max-width: 1067px) {
    .ce-section { padding: 60px 40px; }
    .ce-grid    { grid-template-columns: 1fr; gap: 16px; }
    .ce-col     { height: auto; }
}

@media screen and (max-width: 600px) {
    .ce-section  { padding: 50px 20px; }
    .ce-mockup   { flex-direction: column; min-height: auto; }
    .ce-col      { padding: 18px; }
}


/* ============================================================
   POWERFUL MODULES SECTION  —  pm- prefix
   ============================================================ */
/* ============================================================
   POWERFUL MODULES SECTION  (pm-)
   ============================================================ */
/* ── Section & layout ── */
.pm-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.pm-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pm-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.pm-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.pm-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    line-height: 1.2;
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    margin: 0;
}

.pm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ── 3 missing icon colors not in ce- ── */
.ce-feat-icon--orange  { background: #FFF4E6; color: #D97706; border: 1px solid #FDDBA6; }
.ce-feat-icon--emerald { background: #EAFAF0; color: #1A8C4E; border: 1px solid #A3E8C0; }
.ce-feat-icon--peach   { background: #FFF0EE; color: #E8472A; border: 1px solid #FFCFC9; }

/* ── Mockup shell ── */
.pm-mockup {
    width: 100%;
    background: #F8FAFF;
    border: 1px solid #E4EDFF;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Leads */
.pm-lead-item { display: flex; justify-content: space-between; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #E8EDF5; }
.pm-lead-item:last-child { border-bottom: none; padding-bottom: 0; }
.pm-lead-info  { display: flex; flex-direction: column; gap: 2px; }
.pm-lead-label { font-size: 10px; font-weight: 700; color: var(--color-primary); }
.pm-lead-phone { font-size: 10px; font-weight: 500; color: var(--color-text-dark); }
.pm-lead-time  { font-size: 9px; color: var(--color-text-muted); white-space: nowrap; }

/* Campaign */
.pm-campaign-name  { font-size: 11px; font-weight: 700; color: var(--color-text-dark); margin: 0; }
.pm-campaign-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pm-campaign-stat  { display: flex; flex-direction: column; gap: 2px; }
.pm-stat-lbl { font-size: 9px; color: var(--color-text-muted); }
.pm-stat-num { font-size: 12px; font-weight: 800; color: var(--color-text-dark); }
.pm-view-btn { width: 100%; padding: 6px; font-size: 10px; font-weight: 700; color: var(--color-primary); background: var(--color-white); border: 1px solid var(--color-primary-light); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-primary); transition: background var(--transition-base); }
.pm-view-btn:hover { background: var(--color-accent); }

/* Inbox */
.pm-inbox-item { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #E8EDF5; }
.pm-inbox-item:last-child { border-bottom: none; padding-bottom: 0; }
.pm-inbox-info   { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pm-inbox-name   { font-size: 10px; font-weight: 700; color: var(--color-text-dark); }
.pm-inbox-status { font-size: 9px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-inbox-dot    { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }

/* Analytics */
.pm-analytics-head   { display: flex; align-items: center; justify-content: space-between; }
.pm-analytics-title  { font-size: 10px; font-weight: 700; color: var(--color-text-dark); }
.pm-analytics-period { font-size: 9px; color: var(--color-text-muted); }
.pm-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; border-bottom: 1px solid var(--color-grey-light); }
.pm-bar { flex: 1; background: var(--color-primary-light); border-radius: 2px 2px 0 0; }
.pm-bar--active { background: var(--color-primary); }
.pm-analytics-foot   { display: flex; align-items: center; justify-content: space-between; }
.pm-analytics-value  { font-size: 11px; font-weight: 800; color: var(--color-text-dark); }
.pm-analytics-growth { font-size: 9px; font-weight: 700; color: var(--color-success); }

/* Loyalty */
.pm-loyalty-points        { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #E8EDF5; }
.pm-loyalty-lbl           { font-size: 9px; color: var(--color-text-muted); }
.pm-loyalty-row           { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pm-loyalty-num           { font-size: var(--text-stat-small); font-weight: var(--weight-stat-number); color: var(--color-text-dark); }
.pm-loyalty-badge         { font-size: 8px; font-weight: 700; color: #1A7A4A; background: #E6F7EF; padding: 2px 6px; border-radius: 100px; white-space: nowrap; }
.pm-loyalty-progress      { width: 100%; height: 5px; background: var(--color-grey-light); border-radius: 100px; overflow: hidden; }
.pm-loyalty-progress-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 100px; }
.pm-loyalty-progress-lbl  { font-size: 9px; color: var(--color-text-muted); }
.pm-loyalty-rewards       { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pm-loyalty-rewards-lbl   { font-size: 9px; color: var(--color-text-muted); }
.pm-reward-item  { display: flex; align-items: center; gap: 8px; }
.pm-reward-icon  { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.pm-reward-info  { display: flex; flex-direction: column; gap: 1px; }
.pm-reward-name  { font-size: 10px; font-weight: 700; color: var(--color-text-dark); }
.pm-reward-points { font-size: 9px; color: var(--color-text-muted); }

/* Workflow */
.pm-workflow-step       { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; color: var(--color-text-dark); }
.pm-workflow-dot        { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.pm-workflow-dot--blue  { background: var(--color-accent); border: 1.5px solid var(--color-primary-light); }
.pm-workflow-dot--green { background: #E6F7EF; border: 1.5px solid #B3E8CF; }
.pm-workflow-dot--grey  { background: var(--color-grey-light); border: 1.5px solid var(--color-border); }
.pm-workflow-line       { width: 1px; height: 12px; background: var(--color-border); margin-left: 9px; }

/* Responsive */
@media screen and (max-width: 1067px) {
    .pm-section { padding: 60px 40px; }
    .pm-grid    { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media screen and (max-width: 600px) {
    .pm-section   { padding: 50px 20px; }
    .pm-container { gap: 36px; }
    .pm-grid      { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   INTEGRATION CATEGORIES 
   Prefix: ig-
   
   REUSED (nothing duplicated here):
     .ts-section   → wrapper padding + bg
     .ts-container → max-width + flex column + gap
     .ts-header    → center flex column + gap
     .ts-eyebrow   → uppercase label style
     .ts-title     → section heading style
     .ts-grid      → grid gap + align-items
     .ts-card      → card border, radius, shadow, hover
   
   NEW (only what ts- classes don't cover):
     .ig-section   → overrides ts-grid to 4 columns
     .ig-title-accent → blue span colour
     .ig-desc      → subtitle under heading
     .ig-icon-wrap → icon pill + 12 colour tints
     .ig-card-title / .ig-card-desc → reuse token values
     .ig-card-link → arrow link row
     Responsive    → 4col→3col→2col→1col
   ============================================================ */
/* ============================================================
   INTEGRATION PAGE HERO  —  plat-section
   ============================================================ */
/* ============================================================
   INTEGRATION PAGE HERO  —  .integ-hero-section
   ============================================================ */

.integ-hero-section {
    background: var(--color-white);
    margin-top: 0 !important;
    margin-bottom: -50px;
    padding-top: -50px;   /* clears the 72px fixed navbar on desktop */
    padding-right: 0;
}

@media screen and (min-width: 1068px) {
    .integ-hero-section {
        margin-left: -50px;
    }

    .integ-hero-section .nh-wrap {
        grid-template-columns: 1fr 1fr;
        max-width: 1400px;
        align-items: center;
        gap: 0;
    }

    .integ-hero-section .nh-left {
        padding: 0 0 60px 60px;
    }
}

.integ-hero-section .nh-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.integ-hero-section .nh-hero-img-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.integ-hero-section .nh-hero-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 24px 60px rgba(5, 54, 121, 0.08));
}

.integ-hero-section .nh-dotgrid {
    mask-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 55%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 55%);
}

@media screen and (max-width: 1067px) {
    .integ-hero-section {
        margin-bottom: 0;
        padding-top: 90px;
    }

    .integ-hero-section .nh-wrap {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .integ-hero-section .nh-left {
        padding: 0 40px 40px;
        text-align: center;
        align-items: center;
    }

    .integ-hero-section .nh-right {
        justify-content: center;
        padding: 0 40px 60px;
    }

    .integ-hero-section .nh-hero-img-wrap {
        max-width: 480px;
        margin: 0 auto;
    }

    .integ-hero-section .nh-ctas  { justify-content: center; }
    .integ-hero-section .nh-trust { justify-content: center; }
}

@media screen and (max-width: 600px) {
    .integ-hero-section {
        padding-top: 80px;
    }

    .integ-hero-section .nh-left {
        padding: 0 20px 30px;
    }

    .integ-hero-section .nh-hero-img-wrap {
        max-width: 320px;
    }
    .integ-hero-section {
        margin-bottom: -200px !important;   /* reduce gap on mobile */
    }

}
/* Force 4-column grid (ts-grid defaults to 3) */
.ig-section .ts-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Blue accent on title span */
.ig-title-accent {
    color: var(--color-primary);
}

/* Subtitle paragraph under the heading */
.ig-desc {
    font-size: var(--text-section-desc);
    font-weight: var(--weight-section-desc);
    color: var(--color-text-muted);
    max-width: 520px;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* ── Icon pill ── */
.ig-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Per-category tint backgrounds */
.ig-icon-wrap--green  { background: #EDFAF3; }
.ig-icon-wrap--blue   { background: #EBF2FF; }
.ig-icon-wrap--purple { background: #F3EEFF; }
.ig-icon-wrap--teal   { background: #E6FAF8; }
.ig-icon-wrap--indigo { background: #ECEEFF; }
.ig-icon-wrap--orange { background: #FFF3ED; }
.ig-icon-wrap--pink   { background: #FFF0F5; }
.ig-icon-wrap--red    { background: #FFF0F0; }
.ig-icon-wrap--yellow { background: #FFFBE6; }
.ig-icon-wrap--cyan   { background: #E6FBFF; }
.ig-icon-wrap--rose   { background: #FFF0F3; }
.ig-icon-wrap--grape  { background: #F5EEFF; }

/* ── Card text — uses same tokens as ts-card text ── */
.ig-card-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    line-height: 1.3;
    margin: 0;
}

.ig-card-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.55;
    flex: 1;
    margin: 0;
}

/* ── Arrow link at bottom ── */
.ig-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--transition-fast);
}

.ig-card-link svg {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.ig-card-link:hover {
    gap: 8px;
}

.ig-card-link:hover svg {
    transform: translateX(2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape — 3 columns */
@media screen and (max-width: 1200px) {
    .ig-section .ts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet portrait — 2 columns */
@media screen and (max-width: 900px) {
    .ig-section .ts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ig-section .ts-title {
        font-size: 24px;
    }
}

/* Large mobile — 2 columns, tighter cards */
@media screen and (max-width: 600px) {
    .ig-section {
        padding: 48px 20px 40px;
    }
    .ig-section .ts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ig-section .ts-card {
        padding: 18px 16px;
        gap: 10px;
    }
    .ig-section .ts-title {
        font-size: 20px;
    }
    .ig-desc {
        font-size: 13px;
    }
}

/* Small mobile — 1 column */
@media screen and (max-width: 380px) {
    .ig-section .ts-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   HOW INTEGRATION WORKS SECTION — 
   Prefix: hiw-
   Reuses: all --color-*, --text-*, --weight-*, --radius-*,
           --transition-* tokens from :root in main.css
   ============================================================ */

/* ── Section wrapper ── */

.hiw-section {
    display: flex;
    justify-content: center;
   padding: 60px !important;
    background: var(--color-bg-light);
}
/* ── Inner card — the light rounded box from the design ── */
.hiw-container {
    max-width: 1200px;
    width: 100%;             /* ← add this */
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #E4EDFF;
    box-shadow: 0 2px 16px rgba(5, 54, 121, 0.06);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── Header ── */
.hiw-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Eyebrow — small pill with dot, reuses --color-primary token */
.hiw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hiw-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* Title — reuses h2 token values */
.hiw-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    color: var(--color-text-dark);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0;
}

/* ── Steps row ── */
.hiw-steps {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Single step ── */
.hiw-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

/* ── Icon pill — same pattern as .ig-icon-wrap ── */
.hiw-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hiw-icon-wrap--blue   { background: #EBF2FF; }
.hiw-icon-wrap--green  { background: #EDFAF3; }
.hiw-icon-wrap--purple { background: #F3EEFF; }
.hiw-icon-wrap--orange { background: #FFF3ED; }

/* ── Step text ── */
.hiw-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

/* Reuses card title token */
.hiw-step-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.3;
}

/* Reuses card desc token */
.hiw-step-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Arrow between steps ── */
.hiw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape — tighter padding */
@media screen and (max-width: 1067px) {
    .hiw-section { padding: 40px 32px !important; }
}

@media screen and (max-width: 860px) {
    .hiw-section { padding: 36px 24px !important; }
}

@media screen and (max-width: 540px) {
    .hiw-section { padding: 28px 16px !important; }
}
/* ── MOBILE (≤600px) ── */
@media screen and (max-width: 600px) {
    .hiw-section {
        padding: 24px 16px !important;
    }

    .hiw-container {
        padding: 22px 16px;
        gap: 18px;
        border-radius: var(--radius-md);
    }

    .hiw-title {
        font-size: 20px;
    }

    .hiw-eyebrow {
        font-size: 11px;
    }

    .hiw-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .hiw-arrow {
        display: none;
    }

    .hiw-step {
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .hiw-icon-wrap {
        width: 40px;
        height: 40px;
    }

    .hiw-icon-wrap svg {
        width: 18px;
        height: 18px;
    }

    .hiw-step-title {
        font-size: 14px;
    }

    .hiw-step-desc {
        font-size: 13px;
        line-height: 1.5;
    }
}
/* ============================================================
   WHY BUSINESSES LOVE INTEGRATIONS — 
   Prefix: wbi-
   
   REUSED CLASSES (zero duplication needed):
     .hiw-section      → bg-grey + section padding
     .hiw-container    → white card, border, shadow, padding
     .hiw-steps        → horizontal flex row layout
     .hiw-step         → flex row: icon + text
     .hiw-step-text    → flex column: title + desc
     .hiw-step-title   → card title token styles
     .hiw-step-desc    → card desc token styles
     .hiw-icon-wrap    → circular icon pill
     .hiw-icon-wrap--* → colour tints (blue, green, purple)
     .ts-eyebrow       → uppercase label style
     All --color-*, --text-*, --weight-* tokens

   NEW (only differences from hiw- section):
     .wbi-header       → center-aligned eyebrow
     .wbi-container    → removes bottom gap (no title needed)
     .wbi-steps        → divider line between steps
     .hiw-icon-wrap--teal → one new tint not in hiw- section
   ============================================================ */

.wbi-section {
    background: var(--color-white) !important;
    padding: 0 60px 60px;        /* no top padding — eyebrow sits at top of card */
    margin-bottom: 10px;
}
 
/* 2. Remove the card-style border/shadow from wbi container
      — in the image it's a flat borderless layout, not a card */
.wbi-container {
    background: var(--color-bg-light);
    border: 1px solid #E4EDFF;
    box-shadow: none;
    padding: 36px 40px;
    border-radius: var(--radius-lg);
}
 
/* ── Responsive ── */
@media screen and (max-width: 1067px) {
    .wbi-section { padding: 0 32px 48px; }
    .wbi-container { padding: 28px 28px; }
}
 
@media screen and (max-width: 860px) {
    .wbi-section { padding: 0 24px 40px; }
    .wbi-container { padding: 24px 20px; border-radius: var(--radius-md); }
}
 
@media screen and (max-width: 540px) {
    .wbi-section { padding: 0 16px 32px; }
    .wbi-container { padding: 20px 16px; }
}





/* ============================================================
   ABOUT US PAGE HERO  —  about-hero-section
   ============================================================ */

.about-hero-section {
    background: var(--color-white);
    padding: 72px 60px 60px;  /* 72px clears fixed navbar */
    margin: 0;
}

.about-hero-section .nh-wrap {
    grid-template-columns: 0.9fr 1.1fr;
    max-width: 1400px;
    align-items: center;
    gap: 60px;
    min-height: auto;
}

/* ── Left column ── */
.about-hero-section .nh-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: center;
}

/* Two-paragraph sub spacing */
.about-hero-section .nh-sub + .nh-sub {
    margin-top: -8px;
}

/* ── Right column ── */
.about-hero-section .nh-right {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* ── Image ── */
.about-hero-section .nh-hero-img-wrap {
    width: 100%;
    max-width: 620px;
}

.about-hero-section .nh-hero-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 16px 48px rgba(5, 54, 121, 0.10));
}

/* ── Dotgrid — fade right side ── */
.about-hero-section .nh-dotgrid {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.3) 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.3) 100%);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 1067px) {
    .about-hero-section {
        padding: 72px 40px 60px;
    }

    .about-hero-section .nh-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero-section .nh-left {
        align-items: center;
        text-align: center;
    }

    .about-hero-section .nh-sub {
        max-width: 100%;
    }

    .about-hero-section .nh-ctas  { justify-content: center; }

    .about-hero-section .nh-right {
        justify-content: center;
    }

    .about-hero-section .nh-hero-img-wrap {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 600px) {
    .about-hero-section {
        padding: 72px 20px 50px;
        
    }

    .about-hero-section .nh-hero-img-wrap {
        max-width: 320px;
    }
    .about-hero-section{
     margin-bottom: -270px;
    }
}


.impact-section {
    background: var(--color-white);
}
 
/* 2. Eyebrow badge pill — same pattern as .nh-badge in main.css §6 */
.impact-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    border: 1px solid var(--color-primary-light);
    padding: 5px 14px;
    border-radius: 100px;
}
 
/* 3. Animated green dot — same keyframe as .nh-badge-dot */
.impact-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
    animation: nh-pulse 2.2s ease-in-out infinite; /* reuses existing keyframe */
}
 
/* 4. Blue accent on section title span */
.sp-title-accent {
    color: var(--color-primary);
}
 
/* 5. Green icon tint — fills the gap in sp-icon colour set */
.sp-icon--green {
    background: #E6F7EF;
    color: #1A7A4A;
    border: 1px solid #B3E8CF;
}
 
/* ============================================================
   RESPONSIVE — mirrors existing sp- breakpoints in main.css
   ============================================================ */
 
/* Tablet (already handled by sp- rules, no extra needed) */
 
/* Mobile: badge stays centered */
@media screen and (max-width: 600px) {
    .impact-eyebrow-badge {
        align-self: center;
    }
}


/* 1. White background for this section */
.journey-section {
    background: var(--color-white);
}
 
/* 2. Eyebrow pill — same pattern as .impact-eyebrow-badge */
.journey-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    border: 1px solid var(--color-primary-light);
    padding: 5px 14px;
    border-radius: 100px;
}
 
/* 3. Animated green dot — reuses existing nh-pulse keyframe */
.journey-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.22);
    animation: nh-pulse 2.2s ease-in-out infinite;
}
 
/* 4. Green accent — "purpose" word in title */
.journey-title-green {
    color: #25A244;
}
 
/* 5. Blue accent — "innovation" word in title */
.journey-title-blue {
    color: var(--color-primary);
}
 
/* 6. Dashed arrow — overrides the text-based pf-arrow with the SVG version */
.pf-arrow-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 32px;   /* aligns with center of icon circle */
    padding: 0;
    font-size: 0;       /* hides any fallback text */
}
 
/* ── pf-desc text alignment in journey — center aligned ── */
.journey-section .pf-desc {
    text-align: center;
}
 
/* ── pf-label bold weight in journey ── */
.journey-section .pf-label {
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: var(--text-card-title);
}
 
/* ============================================================
   RESPONSIVE — mirrors existing pf- breakpoints in main.css
   ============================================================ */
 
/* Tablet: hide dashed arrows, wrap steps */
@media screen and (max-width: 1067px) {
    .pf-arrow-dashed {
        display: none;
    }
}
 
/* Mobile */
@media screen and (max-width: 600px) {
    .journey-eyebrow-badge {
        align-self: center;
    }
}


/* ============================================================
   MISSION & VISION SECTION  —  mv- prefix
   ============================================================ */

/* ============================================================
   MISSION & VISION SECTION  —  mv- prefix
   ============================================================ */
.mv-section {
    background: var(--color-bg-light);
    padding: 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1150px;
    margin: 24px auto 0;
}

.mv-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.mv-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.mv-card--blue {
    background: var(--color-bg-light);
    border-color: var(--color-primary-light);
}

.mv-card--green {
    background: #F0FFF6;
    border-color: #B3E8CF;
}

.mv-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mv-icon--blue {
    background: var(--color-accent);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
}

.mv-icon--green {
    background: #C8F0D8;
    color: #1A7A4A;
    border: 1px solid #B3E8CF;
}

.mv-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.3;
}

.mv-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .mv-section { padding: 50px 40px; }
    .mv-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media screen and (max-width: 600px) {
    .mv-section { padding: 40px 20px; }
}

/* ============================================================
   CORE VALUES SECTION  —  cv- prefix
   ============================================================ */

.cv-section {
    width: 100%;
    background: var(--color-white);
    padding: 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.cv-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Header row: badge left, title right inline ── */
.cv-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}


.cv-title {
    font-size: var(--text-section-title);
    font-weight: var(--weight-section-title);
    color: var(--color-text-dark);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

.cv-title-accent {
    color: var(--color-primary);
}

/* ── 6-col card grid ── */
.cv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* ── Single value card ── */
.cv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-grey-light);
    background: var(--color-white);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.cv-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* ── Icon circle ── */
.cv-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cv-icon--blue   { background: #EBF4FF; color: #1D6FD8; }
.cv-icon--green  { background: #E6F7EF; color: #1A7A4A; }
.cv-icon--purple { background: #F0EEFF; color: #6C47D9; }
.cv-icon--orange { background: #FFF4E6; color: #D97706; }
.cv-icon--red    { background: #FFF0EE; color: #E8472A; }
.cv-icon--teal   { background: #E6FAF8; color: #0F8C7E; }

/* ── Card text ── */
.cv-card-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.3;
}

.cv-card-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Responsive ── */
@media screen and (max-width: 1067px) {
    .cv-section { padding: 50px 40px; }
    .cv-grid    { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media screen and (max-width: 768px) {
    .cv-header  { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cv-title   { white-space: normal; }
    .cv-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media screen and (max-width: 480px) {
    .cv-section { padding: 40px 20px; }
    .cv-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cv-card    { padding: 16px 14px; }
}

/* ============================================================
   WHY BRANDS SECTION  —  wb- prefix
   ============================================================ */

.wb-section {
    width: 100%;
    background: var(--color-bg-light);
    padding: 40px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.wb-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.wb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.wb-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-grey-light);
    background: var(--color-white);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.wb-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.wb-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wb-icon--blue   { background: var(--color-primary); color: var(--color-white); }
.wb-icon--green  { background: #25A244;               color: var(--color-white); }
.wb-icon--purple { background: #7C3AED;               color: var(--color-white); }
.wb-icon--orange { background: #F59E0B;               color: var(--color-white); }

.wb-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-stat {
    font-size: var(--text-stat-number);
    font-weight: var(--weight-stat-number);
    color: var(--color-text-dark);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
}

.wb-label {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.wb-footer-badge {
    display: flex;
    align-items: center;
}
.wb-top-badge {
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 1067px) {
    .wb-section { padding: 40px 40px; }
    .wb-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media screen and (max-width: 600px) {
    .wb-section { padding: 36px 20px; }
    .wb-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wb-card    { padding: 18px 14px; gap: 12px; }
    .wb-stat    { font-size: var(--text-stat-small); }
}

@media screen and (max-width: 380px) {
    .wb-grid { grid-template-columns: 1fr; }
}

.cert-section {
    background: var(--color-white);
    padding-top: 40px;
    padding-bottom: 40px;
}
 
/* ── 4-column card grid ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
 
/* ── Card shell: logo left, text right ── */
.cert-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-fast), border-color var(--transition-base);
}
 
.cert-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--color-primary-light);
}
 
/* ── Logo container ── */
.cert-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}
 
/* ── SVG inside logo stays constrained ── */
.cert-logo-svg {
    width: 44px;
    height: 44px;
    display: block;
}
 
/* ── ISO globe slightly larger ── */
.cert-logo--iso .cert-logo-svg {
    width: 48px;
    height: 48px;
}
 
/* ── Text block ── */
.cert-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
 
/* Bold card title — reuses card-title token values */
.cert-name {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}
 
/* Muted subtitle — reuses label token values */
.cert-sub {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}
 
/* ============================================================
   RESPONSIVE
   ============================================================ */
 
/* Tablet landscape — 2 columns */
@media screen and (max-width: 1067px) {
    .cert-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }
 
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}
 
/* Large mobile — 2 columns, tighter cards */
@media screen and (max-width: 600px) {
    .cert-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
 
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
 
    .cert-card {
        padding: 16px 14px;
        gap: 10px;
    }
 
    .cert-logo {
        width: 40px;
        height: 40px;
    }
 
    .cert-logo-svg {
        width: 36px;
        height: 36px;
    }
 
    .cert-name {
        white-space: normal;
    }
}
 
/* Small mobile — 1 column */
@media screen and (max-width: 380px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FEATURES PAGE HERO  —  fp- prefix
============================================================ */
.fp-hero-section {
    background: var(--color-white);
    background-image: none;  /* ← kills the dot grid */
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.fp-hero-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1280px;
}

.fp-headline {
    font-size: 42px;
    line-height: 1.08;
}

@media screen and (max-width: 1067px) {
    .fp-hero-section .nh-left  { align-items: center; text-align: center; }
    .fp-hero-section .nh-sub   { max-width: 100%; }
    .fp-hero-section .nh-ctas  { justify-content: center; }
    .fp-hero-section .nh-trust { justify-content: center; }
    .fp-hero-wrap               { grid-template-columns: 1fr; }
    .fp-headline                { font-size: 34px; }
}

@media screen and (max-width: 600px) {
    .fp-headline { font-size: 28px; }
    .fp-hero-section{
        margin-bottom: -100px;
    }
}

.ss-section {
    background: var(--color-bg-light);
    margin-top: 0;
    margin-bottom: 0;
}
 
/* ── Bullet list ── */
.ss-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
 
.ss-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-card-desc);
    font-weight: 500;
    color: var(--color-text-body);
    line-height: 1.5;
}
 
.ss-list-item svg {
    flex-shrink: 0;
}
 
/* ── Responsive: already handled by nh- breakpoints ── */
@media screen and (max-width: 1067px) {
    .ss-section .nh-left {
        align-items: center;
        text-align: center;
    }
    .ss-list-item {
        justify-content: center;
    }
}
 
@media screen and (max-width: 600px) {
    .ss-list-item {
        justify-content: flex-start;
        text-align: left;
    }
}

.eb-wrap {
    grid-template-columns: 1fr 1fr;
}
 
/* Tablet / mobile: stack naturally, no flip needed */
@media screen and (max-width: 1067px) {
    .eb-wrap {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ICON FEATURE STRIP SECTION — ifs-
   ============================================================ */

.ifs-section {
    padding: 20px 0;
}

.ifs-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 24px;

    background: var(--color-white);
    border: 1px solid rgba(5, 54, 121, 0.08);
    border-radius: var(--radius-lg);

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;

    box-shadow: 0 4px 20px rgba(5, 54, 121, 0.05);
}

.ifs-item {
    text-align: center;
    transition: var(--transition-base);
}

.ifs-item:hover {
    transform: translateY(-4px);
}

.ifs-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--color-bg-light);
}

.ifs-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ifs-item h3 {
    font-size: var(--text-label);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}

/* ==========================
   Tablet
   ========================== */
@media (max-width: 991px) {
    .ifs-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================
   Mobile
   ========================== */
@media (max-width: 576px) {
    .ifs-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .ifs-icon {
        width: 48px;
        height: 48px;
    }
}
.ifs-icon svg {
    width: 24px;
    height: 24px;
}

/* Color Variants */

.ifs-blue {
    color: #356DFF;
    background: rgba(53,109,255,.10);
}

.ifs-green {
    color: #22C55E;
    background: rgba(34,197,94,.10);
}

.ifs-orange {
    color: #FF7A30;
    background: rgba(255,122,48,.10);
}

.ifs-purple {
    color: #7C4DFF;
    background: rgba(124,77,255,.10);
}
fp-hero-section,
.fp-hero-section * {
    background-image: none !important;
}

.fp-hero-section::before,
.fp-hero-section::after,
.fp-hero-section *::before,
.fp-hero-section *::after {
    display: none !important;
}


.blog-hero-section {
    margin-top: 10px;   /* clears fixed navbar height */
    margin-bottom: 0;
    padding: 48px 60px 40px;
}

/* ============================================================
   BLOG SECTION — blg- prefix
   Add these rules to main.css (or merge into your global file).

   FULLY REUSED from main.css (zero duplication here):
     Layout/container : .feat-container
     Section bg/pad   : .hiw-section, .wbi-container, .sp-card
     Icon pills        : .sp-icon, .sp-icon--blue/green/orange/purple/red
                         .hiw-icon-wrap, .hiw-icon-wrap--blue/green/purple
     Step rows         : .hiw-steps, .hiw-step, .hiw-step-text,
                         .hiw-step-title, .hiw-step-desc
     Typography        : .feat2-subtitle-title, .fd2-card-desc,
                         .sp-label, .sp-desc, .sp-eyebrow, .pf-eyebrow
     Badge/btn         : .nh-badge, .nh-badge-dot
     All --color-*, --text-*, --weight-*, --radius-* tokens

   NEW (only what main.css doesn't cover):
     blg-outer         section wrapper
     blg-layout        2-col article + sidebar grid
     blg-article       white card column
     blg-sidebar       sticky sidebar column
     blg-block         article content block + divider
     blg-block-head    icon + heading row
     blg-steps-col     vertical step list override
     blg-bullet-list/item  takeaway bullet list
     blg-benefit-list  numbered benefit container
     blg-benefit-item  single benefit row
     blg-benefit-num   step number column
     blg-benefit-body  icon + text row inside benefit
     blg-demo-card     navy demo CTA card
     blg-demo-btn      white button on navy bg
     blg-toc-card/list/item/dot/sub  table of contents
     blg-sim-card/row  similar blogs card
   ============================================================ */

/* ── Section outer wrapper ── */
.blg-outer {
    background: var(--color-bg-light);
    padding: 48px 60px;
    box-sizing: border-box;
}
 
/* ── Two-column grid ── */
.blg-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
 
/* ── Article white card ── */
.blg-article {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #E4EDFF;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
 
/* ── Content block inside article ── */
.blg-block {
    padding: 24px 28px;
    border-bottom: 1px solid var(--color-grey-light);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
 
.blg-block--last   { border-bottom: none; }
.blg-block--accent { background: var(--color-accent); border-bottom-color: var(--color-primary-light); }
 
/* ── Icon + heading row ── */
.blg-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.blg-block-head .sp-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
 
/* ── Section heading (h2 inside article blocks) ── */
.blg-section-title {
    font-size: var(--text-card-title);
    font-weight: var(--weight-card-title);
    color: var(--color-primary);
    line-height: 1.3;
    margin: 0;
}
 
/* ── Bullet list (Key Takeaways) ── */
.blg-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
 
.blg-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-body);
    line-height: 1.65;
}
 
.blg-bullet-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 6px;
}
 
/* ── hiw-steps vertical override ── */
.blg-steps-col {
    flex-direction: column;
    gap: 10px;
}
 
.blg-why-step {
    background: var(--color-bg-light);
    border: 1px solid #E4EDFF;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    gap: 12px;
    align-items: flex-start;
}
 
.blg-why-step .hiw-icon-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
 
/* ── Small icon variant (36×36) ── */
.blg-icon-sm {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
 
/* ── Numbered benefit list ── */
.blg-benefit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
 
.blg-benefit-item {
    padding: 14px 16px !important;
    border-radius: var(--radius-md) !important;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
 
.blg-benefit-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
 
.blg-benefit-num {
    flex-shrink: 0;
    padding-top: 2px;
}
 
.blg-benefit-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}
 
/* ── Sidebar column ── */
.blg-sidebar {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
 
/* ── Demo card (primary navy bg) ── */
.blg-demo-card {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
 
.blg-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--color-white);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    width: fit-content;
    margin-bottom: 2px;
}
 
.blg-demo-title {
    font-size: var(--text-section-desc);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0;
}
 
.blg-demo-desc {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0;
}
 
.blg-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: var(--text-card-desc);
    font-weight: 700;
    font-family: var(--font-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    border: none;
    margin-top: 6px;
    line-height: 1;
    transition: background var(--transition-base), transform var(--transition-fast);
}
 
.blg-demo-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
    transform: translateY(-2px);
}
 
/* ── Sidebar card shared eyebrow ── */
.blg-sidebar-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-eyebrow);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
}
 
/* ── TOC card (sp-card provides shell) ── */
.blg-toc-card { padding: 18px !important; }
 
.blg-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
 
.blg-toc-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    font-size: var(--text-card-desc);
    font-weight: 500;
    color: var(--color-text-body);
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 1.4;
    transition: background var(--transition-fast), color var(--transition-fast);
}
 
.blg-toc-item:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}
 
.blg-toc-sub {
    padding-left: 22px;
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
}
 
.blg-toc-sub:hover { color: var(--color-primary); }
 
.blg-toc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
 
.blg-toc-dot--green { background: #16a34a; }
.blg-toc-dot--blue  { background: var(--color-primary); }
 
/* ── Similar Blogs card (sp-card provides shell) ── */
.blg-sim-card { padding: 18px !important; }
 
.blg-sim-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-grey-light);
    transition: background var(--transition-fast);
}
 
.blg-sim-row:last-child { border-bottom: none; }
.blg-sim-row:hover      { background: var(--color-bg-light); }
 
.blg-sim-title {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-title);
    color: var(--color-text-dark);
    line-height: 1.3;
    margin: 0 0 3px;
}
 
.blg-sim-meta {
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    color: var(--color-text-muted);
}
 
/* ============================================================
   RESPONSIVE
   ============================================================ */
 
@media screen and (max-width: 1067px) {
    .blg-outer  { padding: 36px 40px; }
    .blg-layout { grid-template-columns: 1fr; gap: 20px; }
    .blg-sidebar { position: static; top: auto; }
}
 
@media screen and (max-width: 600px) {
    .blg-outer        { padding: 24px 16px; }
    .blg-block        { padding: 18px 16px; }
    .blg-benefit-item { flex-direction: column; gap: 8px; }
    .blg-benefit-body { flex-direction: column; gap: 8px; }
}


.blg-benefit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
 
/* ── Single benefit card ── */
.blg-stat-card {
    background: var(--color-bg-light);
    border: 1px solid #E4EDFF;
    border-radius: var(--radius-md);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
 
.blg-stat-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
 
/* ── Icon sizing inside stat card (inherits sp-icon shape/color) ── */
.blg-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-bottom: 2px;
}