/* ============================================================
   MAIN.CSS — Master Stylesheet for NeoD2C Website  (CLEANED)
   ------------------------------------------------------------
   This file was audited against all 6 templates you supplied
   (home, platform, features, integration, about-us, base) and
   every genuinely UNUSED rule was removed. See the summary in
   chat for the full list of what was dropped and why.

   Classes kept under a "⚠ USED ELSEWHERE?" comment could not be
   confirmed against the templates you gave me (e.g. blog page
   is not included) — verify before deleting those.

   STRUCTURE:
   1.  Google Fonts Import
   2.  CSS Variables (Colors, Fonts, Typography Tokens)
   3.  Global Reset & Base Styles
   4.  Navbar
   5.  Footer
   6.  Home Hero              — home-hero-section + nh-
   7.  Brand Logo Marquee     — ig-  (home page)
   8.  Pain Points Strip      — wc-
   9.  Journey / Flow Steps   — pf-
   10. WhatsApp Features Grid — wn-
   11. Feature Cards (3-up)   — fd2-
   12. Stats Bar              — sb-
   13. Testimonials           — ts-
   14. CTA Bar                — cta- / cta--bar
   15. Platform / Section Hero (shared) — platform-hero-section
   16. Customer Experience Cards — ce-
   17. Powerful Modules       — pm-
   18. Integration Categories — ig- (integration page)
   19. Features Page — icon strip (ifs-), feature cards, ss-list
   20. About Us — mission/vision, core values, why-brands, certs
   21. Blog components (⚠ not confirmed — no blog template given)
   ============================================================ */


/* ============================================================
   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.
    ══════════════════════════════════════════════════════ */
    --text-hero:            36px;
    --weight-hero:          800;

    --text-section-title:   28px;
    --weight-section-title: 800;

    --text-eyebrow:         15px;
    --weight-eyebrow:       700;

    --text-section-desc:    15px;
    --weight-section-desc:  400;

    --text-card-title:      15px;
    --weight-card-title:    700;

    --text-card-desc:       14px;
    --weight-card-desc:     400;

    --text-stat-number:     32px;
    --weight-stat-number:   800;

    --text-stat-small:      22px;
    --weight-stat-small:    800;

    --text-label:           12px;
    --weight-label:         500;

    --text-body:            14px;
    --weight-body:          400;

    --text-nav:             15px;
    --weight-nav:           600;

    --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 reference these tokens,
   they should 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
   Matches the flat <ul id="displayMbId"> nav in d2chome.html.
   (Dropdown/mega-menu classes that no template uses — .nav-link,
   .solutions-dropdown, .downArrowList, .platformsNav,
   .underline-effect(1/2/3), .active-page — were removed.)
   ============================================================ */
nav {
    position: absolute;
    top: 0;
    width: -webkit-fill-available;
}

.navMain {
    height: 72px;
    padding: 20px 60px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    box-sizing: border-box;
    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 li h3 {
    font-size: var(--text-nav);
    font-weight: var(--weight-nav);
    line-height: 1.4;
    padding: 0;
}

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

.navMain ul li a h3 {
    position: relative;
}

/* underline sweep on the active nav item */
.navMain ul li a h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 2px;
    width: 0;
    background: var(--color-primary);
    border-radius: 2px;
}

.navMain ul li.active a h3::after {
    animation: navUnderline 0.4s ease forwards;
}

@keyframes navUnderline {
    from { width: 0%; }
    to { width: 100%; }
}

.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);
}

/* ------------------------------------------------------------
   NAVBAR — TABLET (≤1067px)
------------------------------------------------------------ */
@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); }

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

/* ------------------------------------------------------------
   Navbar Buttons: Login + Book a Demo
------------------------------------------------------------ */
.navBtnGroup {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
}

.navBtnGroup a {
    display: flex;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
}

.navBtnGroup a img {
    height: 44px;
    width: auto;
}

.navBtnGroup .nh-btn-primary {
    height: 44px;
    padding: 0 22px;
    box-shadow: none;
    transform: none;
}

.navBtnGroup .nh-btn-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

.nav-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--text-nav);
    font-weight: var(--weight-card-title);
    text-decoration: none;
    box-sizing: border-box;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.nav-login-btn:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary);
}

/* ------------------------------------------------------------
   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);
    }

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

    .navMain ul li h3 { font-size: var(--text-nav); font-weight: var(--weight-nav); }
    .menu-nav-link a { margin-left: 0; }

    .navMain > div:last-child img { width: 96px; }
}

/* Shrink nav buttons on tablets/small laptops */
@media screen and (max-width: 1067px) {
    .navBtnGroup { height: 36px; gap: 8px; }
    .navBtnGroup a,
    .navBtnGroup a img { height: 36px; width: auto; }
    .navBtnGroup .nh-btn-primary { display: none; }
    .nav-login-btn { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* Shrink further on phones */
@media screen and (max-width: 600px) {
    .navBtnGroup { gap: 6px; }
    .navBtnGroup .nh-btn-primary { display: none; }
    .nav-login-btn { padding: 0 10px; font-size: 12px; }
}

@media screen and (max-width: 1067px) {
    .navMain ul.displayMb li { border-bottom: none; }
}


/* ============================================================
   5. FOOTER
   (Removed unused .footer_logo, .footer_icon1, .footer_icon,
   .arrowUpF, .lineImg — none of these appear in d2chome.html;
   the footer only uses .footer_span1 span > img for icons.)
   ============================================================ */
.footer_main {
    background-size: 100%;
    color: var(--color-white);
    padding-top: 20px;
}

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

.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 — 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;
    }
}

/* ------------------------------------------------------------
   FOOTER — narrow tablet / large mobile (≤1050px)
------------------------------------------------------------ */
@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)
------------------------------------------------------------ */
@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; }
}


/* ============================================================
   6. HOME PAGE HERO — home-hero-section (home.html only)
   Shares the base .nh-* hero classes below (also used, with
   different overrides, as .platform-hero-section on every
   other page).
   ============================================================ */
.home-hero-section {
    position: relative;
    overflow: hidden;
    background: #f3f8ff !important;
    min-height: auto !important;
    padding: 0 !important;
    margin-top: -20px !important;
    margin-bottom: 0 !important;
    display: block !important;
}

.home-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 45%, rgba(210, 230, 255, 0.65), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.home-hero-section::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 520px;
    right: -40px;
    top: 80px;
    border-radius: 50%;
    background: rgba(215, 232, 255, 0.18);
    border: 1px solid rgba(150, 195, 245, 0.18);
    box-shadow:
        0 0 0 55px rgba(175, 210, 250, 0.08),
        0 0 0 110px rgba(175, 210, 250, 0.05),
        0 0 0 165px rgba(175, 210, 250, 0.03);
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 1;
}

/* ── Shared hero base (nh-) — reused on every page's hero ── */
.nh-section {
    width: 100%;
    background: var(--color-white);
    padding: 70px 60px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.nh-dotgrid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.home-hero-section .nh-dotgrid {
    opacity: 0.08;
    background-image: radial-gradient(#8da9d1 0.8px, transparent 0.8px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.4) 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.4) 100%);
}

.nh-left { 
    display: flex; 
    flex-direction: column; 
}

.nh-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* padding: 50px 100px 60px 10px; */
}

.home-hero-section .nh-wrap {
    position: relative;
    z-index: 2;
    max-width: 1270px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 46% 54%;
    gap: 20px;
    align-items: center;
    transform: translateY(-80px);
    margin-bottom: -260px;
}

.home-hero-section .nh-wrap > :first-child {
    position: relative;
    top: -40px;
}

.home-hero-section .nh-left,
.home-hero-section .nh-right {
    position: relative;
    z-index: 4;
}

.nh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.75);
    border: 1px solid #d7e1ef;
    color: #17335f;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
    width: fit-content;
}

.home-hero-section .nh-badge {
    background: rgba(255,255,255,0.75);
    border: 1px solid #d7e1ef;
    color: #17335f;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
}

.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); }
}

.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;
}

.home-hero-section .nh-headline {
    font-size: 32px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2px;
    color: #10244a;
    margin: 0 0 24px;
}

.nh-headline-blue { color: var(--color-primary); }
.home-hero-section .nh-headline-blue { color: #1455b8; }

.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; }

.home-hero-section .nh-sub {
    max-width: 510px;
    font-size: 16px;
    line-height: 1.65;
    color: #39475c;
    margin-bottom: 30px;
}

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

.home-hero-section .nh-ctas { gap: 18px; margin-bottom: 24px; }

.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); }

.home-hero-section .nh-btn-primary,
.home-hero-section .nh-btn-ghost {
    min-width: 195px;
    height: 54px;
    padding: 0 28px;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
}

.home-hero-section .nh-btn-primary {
    background: #063b82;
    border: 1px solid #063b82;
}

.home-hero-section .nh-btn-ghost {
    border: 1px solid #8da1bf;
    color: #17335f;
    background: var(--color-white);
}

.home-hero-section .nh-btn-primary:hover,
.home-hero-section .nh-btn-ghost:hover {
    transform: translateY(-2px);
}

.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);
}

.home-hero-section .nh-trust { gap: 20px; }
.home-hero-section .nh-trust-item { font-size: 13px; font-weight: 500; color: #46556b; }

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

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

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

.home-hero-section .nh-hero-img-wrap {
    max-width: 620px;
    justify-content: center;
}

.home-hero-section .nh-hero-img {
    width: 100%;
    max-width: 100%;
    filter: drop-shadow(0 25px 55px rgba(5, 54, 121, 0.12));
}

/* ── RESPONSIVE — tablet (≤1067px) ── */
@media screen and (max-width: 1067px) {
    .nh-section { min-height: auto; margin-top: 60px; padding: 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 { display: none !important; }
    .nh-hero-img-wrap { display: none !important; }

    .home-hero-section {
        min-height: auto !important;
        margin: 50px 0 0 0 !important;
        padding: 50px 40px !important;
    }
    .home-hero-section .nh-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
        transform: none;
        margin-bottom: 0;
    }
    .home-hero-section .nh-left {
        align-items: center;
        text-align: center;
        transform: translateY(-50px);
    }
    .home-hero-section .nh-sub   { max-width: 600px; }
    .home-hero-section .nh-ctas  { justify-content: center; }
    .home-hero-section .nh-trust { justify-content: center; }
    .home-hero-section .nh-right { display: none !important; }
    .home-hero-section .nh-hero-img-wrap { display: none !important; }
    .home-hero-section .nh-btn-primary,
    .home-hero-section .nh-btn-ghost,
    .home-hero-section .nh-trust {
        transform: none;
    }
    .home-hero-section .nh-btn-primary:hover,
    .home-hero-section .nh-btn-ghost:hover {
        transform: translateY(-2px);
    }
    .home-hero-section .nh-wrap > :first-child { top: 0; }
}

/* ── RESPONSIVE — mobile (≤600px) ── */
@media screen and (max-width: 600px) {
    .nh-section { margin-top: 60px; padding: 30px 20px; }
    .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,
    .nh-right { display: none !important; }

    .home-hero-section {
        padding: 35px 20px 50px !important;
        margin-top: 50px !important;
    }
    .home-hero-section .nh-headline {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.2px;
    }
    .home-hero-section .nh-wrap { transform: none; margin-bottom: 0; }
    .home-hero-section .nh-left {
        width: 100%;
        max-width: 100%;
        text-align: left;
        align-items: center;
        transform: none;
    }
    .home-hero-section .nh-ctas {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .home-hero-section .nh-btn-primary,
    .home-hero-section .nh-btn-ghost {
        width: 100%;
        max-width: 320px;
    }
    .home-hero-section .nh-trust {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }
    .home-hero-section .nh-wrap > :first-child { top: 0; }
}


/* ============================================================
   7. BRAND LOGO MARQUEE  —  ig- prefix  (home page)
   NOTE: on the integration page, .ig- is reused for a different
   component (icon cards) — see section 18. Marquee-only rules
   for an unused WooCommerce badge variant were removed.
   ============================================================ */
.ig-section {
    width: 100%;
    background: var(--color-white);
    padding: 20px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.ig-container {
    max-width: 1270px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
}

.ig-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dark);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
}

.ig-row-outer {
    flex: 1;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.ig-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 25px;
    width: max-content;
    animation: ig-marquee 18s linear infinite;
}

.ig-row:hover { animation-play-state: paused; }

@keyframes ig-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ig-card {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: opacity var(--transition-base), transform var(--transition-fast);
}

.ig-card:hover { opacity: 0.75; transform: translateY(-1px); }

.ig-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

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

@media screen and (max-width: 1067px) {
    .ig-section { padding: 20px 40px; }
    .ig-row { gap: 24px; }
}

@media screen and (max-width: 900px) {
    .ig-section { padding: 30px 20px; }
    .ig-container { flex-direction: column; align-items: center; text-align: center; flex-wrap: nowrap; gap: 14px; }
    .ig-eyebrow { width: 100%; text-align: center; font-size: 9px; }
    .ig-row-outer { width: 100%; }
    .ig-row { gap: 20px; }
}

@media screen and (max-width: 600px) {
    .ig-section { padding: 25px 16px; }
    .ig-container { gap: 15px; }
    .ig-eyebrow { font-size: 10px; }
    .ig-row { gap: 22px; }
    .ig-logo { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
    .ig-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media screen and (max-width: 480px) {
    .ig-row { gap: 18px 10px; }
    .ig-card { gap: 5px; }
    .ig-logo { width: 18px; height: 18px; }
    .ig-name { font-size: 11px; }
}


/* ============================================================
   8. PAIN POINTS / SELL-POINTS STRIP  —  wc- prefix
   Used as a real section wrapper on: home ("customers are
   already on WhatsApp"), platform ("more ways to sell"),
   integration ("why businesses love integrations"), and reused
   for several about-us grids (impact stats, journey, core
   values, why-brands, certifications) inside a .sb-section /
   .pf-section outer wrapper.
   ============================================================ */
.wc-section {
    width: 100%;
    background: var(--color-bg-light);
    padding: 40px 60px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.wc-container {
    max-width: 1270px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;
    gap: 0;
}

.wc-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 24px;
}

.wc-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-text-dark);
    margin: 0;
    text-transform: uppercase;
}

.wc-subtitle {
    font-size: var(--text-card-desc);
    font-weight: var(--weight-card-desc);
    color: var(--color-text-muted);
    margin: 0;
}

.wc-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
    border-left: 1px solid var(--color-grey-light);
}

.wc-icon {
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

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

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

@media screen and (max-width: 1067px) {
    .wc-section { padding: 40px 40px; }
    .wc-container { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .wc-heading { grid-column: 1 / -1; padding-right: 0; }
    .wc-item:nth-child(2) { border-left: none; }
}

@media screen and (max-width: 600px) {
    .wc-section { padding: 32px 20px; }
    .wc-container { grid-template-columns: 1fr; gap: 24px; }
    .wc-item { border-left: none; padding: 20px 0 0; border-top: 1px solid var(--color-grey-light); }
    .wc-title { font-size: 20px; }
}


/* ============================================================
   9. JOURNEY / FLOW STEPS  —  pf- prefix
   Used as the step-flow component across every page (Home
   Journey, Platform Journey, Integration "How it Works",
   About-Us "Our Journey"). `.pf-header`/`.pf-title` are also
   reused standalone as section headings inside other wrappers
   (about-us Mission&Vision / Core Values / Why Brands /
   Certifications).
   ============================================================ */
.pf-section {
    width: 100%;
    background: var(--color-white);
    padding: 30px 60px 36px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

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

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

.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;
}

.pf-title-accent {
    display: block;
    color: var(--color-primary);
    margin-top: 4px;
}

.pf-subtitle {
    font-size: 14px;
    font-weight: var(--weight-section-desc);
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

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

/* dashed connector arrow between steps (SVG lives inline in markup) */
.pf-arrow {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 20px;
    padding: 0 6px;
    line-height: 1;
    font-weight: 300;
}

.pf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    flex: 1;
    min-width: 0;
    padding: 0 2px;
}

.pf-icon {
    width: 48px;
    height: 48px;
    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-icon svg { width: 20px; height: 20px; }

.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; }

.pf-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-dark);
    letter-spacing: 0.02em;
    line-height: 1.2;
    display: block;
}

.pf-desc {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.45;
    display: block;
    max-width: 110px;
}

/* dashed SVG connector — overrides the plain text .pf-arrow fallback above */
.pf-arrow-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 32px;
    padding: 0;
    font-size: 0;
}

/* small accent colors used only in "Our Journey" headings */
.journey-title-green { color: #25A244; }
.journey-title-blue  { color: var(--color-primary); }

@media screen and (max-width: 1067px) {
    .pf-section { padding: 44px 30px; }
    .pf-icon     { width: 44px; height: 44px; }
    .pf-icon svg { width: 18px; height: 18px; }
    .pf-arrow      { font-size: 16px; margin-top: 18px; padding: 0 2px; }
    .pf-title    { font-size: 24px; }
    .pf-subtitle { font-size: 13px; max-width: 90%; }
    .pf-arrow-dashed { display: none; }
}

@media screen and (max-width: 768px) {
    .pf-section    { padding: 36px 20px; }
    .pf-container  { gap: 28px; }
    .pf-flow { flex-wrap: wrap; justify-content: center; gap: 28px 0; }
    .pf-arrow     { display: none; }
    .pf-step { flex: 0 0 25%; padding: 0 8px; }
    .pf-icon { width: 52px; height: 52px; }
    .pf-icon svg { width: 20px; height: 20px; }
    .pf-title    { font-size: 22px; }
    .pf-subtitle { font-size: 13px; max-width: 100%; }
    .pf-desc     { max-width: 100px; }
}

@media screen and (max-width: 480px) {
    .pf-step { flex: 0 0 33.33%; }
    .pf-title         { font-size: 20px; line-height: 1.3; }
    .pf-title-accent  { margin-top: 2px; }
    .pf-subtitle      { font-size: 12.5px; }
    .pf-icon     { width: 46px; height: 46px; }
    .pf-icon svg { width: 18px; height: 18px; }
    .pf-label { font-size: 12px; }
    .pf-desc  { font-size: 10.5px; max-width: 84px; }
}


/* ============================================================
   10. WHATSAPP FEATURES + SHOPIFY CONNECT  —  wn- prefix
   Home page only. (Unused .wn-graphic* icon-chain — that
   markup is HTML-commented-out in home.html — was removed.)
   ============================================================ */
.wn-section {
    width: 100%;
    background: var(--color-white);
    padding: 30px 60px 50px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.wn-container {
    max-width: 1270px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.wn-left {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.wn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.wn-card {
    background: var(--color-white);
    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);
}

.wn-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.wn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wn-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.3;
}

.wn-card-desc {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

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

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

.wn-right {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.wn-shopify-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.wn-shopify-logo { width: 24px; height: 24px; }

.wn-shopify-badge span {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text-dark);
}

.wn-right-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text-dark);
    margin: 0 0 10px;
}

.wn-right-desc {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 280px;
}

.wn-sync-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wn-sync-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-body);
}

.wn-sync-list svg { color: var(--color-primary); flex-shrink: 0; }

.wn-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 12px 20px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-base), transform var(--transition-fast);
}

.wn-connect-btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); }

@media screen and (max-width: 1200px) {
    .wn-container { grid-template-columns: 1fr; }
    .wn-right { max-width: 100%; }
}

@media screen and (max-width: 1067px) {
    .wn-section { padding: 40px 40px; }
    .wn-left, .wn-right { padding: 22px; }
}

@media screen and (max-width: 768px) {
    .wn-grid { grid-template-columns: repeat(2, 1fr); }
    .wn-right-desc { max-width: 100%; }
}

@media screen and (max-width: 600px) {
    .wn-section { padding: 32px 20px; }
    .wn-left, .wn-right { padding: 18px; border-radius: var(--radius-md); }
    .wn-grid { grid-template-columns: 1fr; gap: 10px; }
    .wn-card { padding: 16px 14px; }
    .wn-heading { font-size: 17px; }
    .wn-right-title { font-size: 18px; }
    .wn-right-desc  { font-size: 13px; }
    .wn-shopify-badge span { font-size: 16px; }
    .wn-connect-btn { width: 100%; justify-content: center; }
}

@media screen and (max-width: 380px) {
    .wn-grid { gap: 8px; }
    .wn-card { padding: 14px 12px; }
    .wn-card-title { font-size: 13px; }
    .wn-card-desc  { font-size: 12px; }
}


/* ============================================================
   11. FEATURE CARDS (3-up)  —  fd2- prefix
   Used on home page (catalog / campaign / chatbot cards) and
   as the outer grid/card shell on platform.html (wrapping the
   ce- cards) and features.html (wrapping custom-styled cards).
   (Removed unused `.fd2-chat-arrow` — not present in markup.)
   ============================================================ */
.fd2-section {
    width: 100%;
    background: var(--color-bg-light);
    padding: 30px 60px 40px;
    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: 1270px;
    margin: 0 auto;
}

.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); }

.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;
}

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

.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 mockup ── */
.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: campaign mockup ── */
.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); }

.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; }

.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: chatbot conversation mockup ── */
.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-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; }
}


/* ============================================================
   12. STATS BAR  —  sb- prefix
   Used as a wrapper on every page for both the blue stats
   band AND (about-us) reused as an outer wrapper for other
   sub-sections. See section 20 for those about-us reuses.
   ============================================================ */
.sb-section {
    width: 100%;
    padding: 40px 60px 40px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.sb-container {
    max-width: 1270px;
    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; }

.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); }
}


/* ============================================================
   13. TESTIMONIALS  —  ts- prefix
   Used on home page for customer quotes, and reused on the
   integration page for the 12-card "Integration Categories"
   grid (just the shell classes — .ts-section/.ts-container/
   .ts-header/.ts-eyebrow/.ts-title/.ts-grid/.ts-card).
   (Removed unused `.ts-dots`/`.ts-dot` — no slider dots in
   either template.)
   ============================================================ */
.ts-section {
    width: 100%;
    background: var(--color-white);
    padding: 30px 60px 40px;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

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

.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;
}

.ts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: 1270px;
    margin: 0 auto;
}

.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); }

.ts-stars { display: flex; gap: 4px; }
.ts-star { color: #F5A623; font-size: 14px; }

.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;
}

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

.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;
}

.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; }

.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; }

@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; }
}


/* ============================================================
   14. CTA BAR  —  cta- / cta--bar
   The only CTA design actually rendered anywhere is the
   `cta-section cta-section--bar` combo (home page). Legacy
   full-width gradient CTA parts (.cta-content, .cta-btn,
   .cta-action, .cta-pattern-left/right) only ever appeared
   inside HTML comments on every other page and were removed.
   `.cta-section` / `.cta-container` / `.cta-features` are kept
   because the live markup applies them *together with* the
   `--bar` modifier classes.
   ============================================================ */
.cta-section {
    padding: 40px 40px;
    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-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);
}

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

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

/* ── cta-section--bar: the live, single-row navy CTA ── */
.cta-section--bar {
    width: 100%;
    padding: 30px 0;
    background: transparent;
    margin: 40px 0px;
}

.cta-container--bar {
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    max-width: 1270px;
    padding: 18px 32px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    box-sizing: border-box;
}

.cta-content--bar { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.cta-icon--bar { width: 60px; height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cta-icon-svg--bar { width: 60px; height: 60px; }

.cta-title--bar { color: var(--color-text-white); font-size: 22px; font-weight: 800; line-height: 1.3; flex: 0 0 auto; margin: 0; }

.cta-sub--bar { color: var(--color-text-white); font-size: 15px; line-height: 1.4; flex: 0 0 auto; margin: 0; text-align: left; }

.cta-action--bar { text-align: right; }

.cta-buttons--bar { display: flex; gap: 10px; flex-wrap: wrap; }

.cta-btn--outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    min-width: auto;
    padding: 10px 20px;
    height: auto;
}

.cta-btn--outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }

.cta-action--bar .cta-features { justify-content: flex-end; margin-top: 8px; color: var(--color-primary-light); }

@media screen and (max-width: 1024px) {
    .cta-container--bar { flex-direction: column; justify-content: center; text-align: center; padding: 24px 28px; gap: 18px; }
    .cta-content--bar { justify-content: center; text-align: center; }
    .cta-title--bar { text-align: center; font-size: 20px; }
    .cta-sub--bar { text-align: center; }
    .cta-action--bar .cta-features { margin-top: 8px; color: var(--color-primary-light); }
}

@media screen and (max-width: 768px) {
    .cta-container--bar { padding: 22px 24px; gap: 16px; border-radius: var(--radius-sm); }
    .cta-icon--bar, .cta-icon-svg--bar { width: 52px; height: 52px; }
    .cta-title--bar { font-size: 19px; }
    .cta-sub--bar { font-size: 14px; }
}

@media screen and (max-width: 480px) {
    .cta-container--bar { padding: 20px 18px; gap: 14px; }
    .cta-content--bar { flex-direction: column; gap: 10px; }
    .cta-icon--bar, .cta-icon-svg--bar { width: 44px; height: 44px; }
    .cta-title--bar { font-size: 18px; line-height: 1.25; }
    .cta-sub--bar { font-size: 13px; }
    .cta-buttons--bar { flex-direction: column; width: 100%; }
    .cta-buttons--bar a { width: 100%; text-align: center; box-sizing: border-box; }
    .cta-features { justify-content: center; row-gap: 4px; font-size: 12px; }
}

@media screen and (max-width: 360px) {
    .cta-container--bar { padding: 18px 14px; }
    .cta-title--bar { font-size: 16px; }
    .cta-sub--bar { font-size: 12px; }
    .cta-features { font-size: 11px; gap: 6px; }
}


/* ============================================================
   15. SHARED PAGE HERO — .platform-hero-section
   This is the ACTUAL hero wrapper used on platform.html,
   features.html, integration.html and about-us.html (all four
   apply `class="nh-section platform-hero-section"`). Page-
   specific hero classes that were defined but never applied in
   markup — .plat-section, .about-hero-section,
   .integ-hero-section, .fp-hero-section — were removed.
   `.fp-hero-wrap` IS used (features page grid override) and is
   kept.
   ============================================================ */
.platform-hero-section {
    position: relative;
    overflow: hidden;
    background: #f3f8ff !important;
    padding: 15px 60px 15px !important;
}

.platform-hero-section .nh-wrap {
    position: relative;
    z-index: 2;
    width: 1270px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 850px;
    justify-content: space-between;
    gap: 0px;
    align-items: center;
}

.platform-hero-section .nh-right { justify-content: flex-start; }

.platform-hero-section .nh-hero-img-wrap {
    width: 100%;
    max-width: 1000px;
    justify-content: center;
    margin-left: -40px;
}

.platform-hero-section .nh-hero-img {
    width: 100%;
    max-width: 100%;
    filter: drop-shadow(0 25px 55px rgba(5, 54, 121, 0.12));
}

.platform-hero-section .nh-btn-primary,
.platform-hero-section .nh-btn-ghost {
    min-width: 195px;
    height: 54px;
    padding: 0 28px;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
}

/* features page: 2-col hero grid override (fp-hero-wrap IS used) */
.fp-hero-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1280px;
}

@media screen and (max-width: 1067px) {
    .platform-hero-section {
        min-height: auto !important;
        padding: 50px 40px !important;
    }
    .platform-hero-section .nh-wrap { grid-template-columns: 1fr; gap: 40px; }
    .platform-hero-section .nh-left { align-items: center; text-align: center; }
    .platform-hero-section .nh-sub { max-width: 600px; margin-left: auto; margin-right: auto; }
    .platform-hero-section .nh-ctas,
    .platform-hero-section .nh-trust { justify-content: center; }
    .fp-hero-wrap { grid-template-columns: 1fr; }
}

@media screen and (max-width: 600px) {
    .platform-hero-section { padding: 35px 20px 45px !important; }
    .platform-hero-section .nh-headline { font-size: 34px; line-height: 1.1; letter-spacing: -1px; }
    .platform-hero-section .nh-badge { white-space: nowrap; font-size: 13px; }
    .platform-hero-section .nh-ctas { width: 100%; flex-direction: column; align-items: center; }
    .platform-hero-section .nh-btn-primary,
    .platform-hero-section .nh-btn-ghost { width: 100%; max-width: 320px; }
    .platform-hero-section .nh-trust { flex-direction: column; gap: 10px; }
}


/* ============================================================
   16. CUSTOMER EXPERIENCE CARDS  —  ce- prefix
   Inner content of the 3-up .fd2-card cards on platform.html
   ("Superior Customer Experience") and features.html header
   (ce-header/ce-eyebrow/ce-title). ce-col is also reused as the
   card shell inside the Powerful Modules section (section 17).
   (Removed unused wrapper rules .ce-section/.ce-container/
   .ce-grid — that outer wrapper is actually `.fd2-section` /
   `.fd2-grid` in the live markup.)
   ============================================================ */
.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;
}

/* card shell reused for Powerful Modules (pm-) cards too */
.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%;
}

.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-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; }

.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;
}

.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 mockup ── */
.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; }

.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 recommendation 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 mockup ── */
.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: 600px) {
    .ce-mockup { flex-direction: column; min-height: auto; }
}


/* ============================================================
   17. POWERFUL MODULES  —  pm- prefix (platform.html)
   Wrapper is `.fd2-section` in the live markup, so `.pm-section`
   was removed. Only the 3 mockups actually built (leads,
   inbox, loyalty) are kept — the unused campaign/analytics/
   rewards/workflow mockup variants were removed since no card
   renders them.
   ============================================================ */
.pm-container {
    max-width: 1270px;
    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;
}

.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 mockup */
.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; }

/* inbox mockup */
.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; }

/* loyalty mockup */
.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); }

@media screen and (max-width: 1067px) {
    .pm-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

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


/* ============================================================
   18. INTEGRATION CATEGORIES  —  ig- prefix (integration.html)
   Layers on top of the reused .ts-* card system (section 13).
   ============================================================ */
.ig-section .ts-grid {
    grid-template-columns: repeat(4, 1fr);
}

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

.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;
}

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

.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; }

.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;
}

.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); }

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

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

@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; }
}

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


/* ============================================================
   19. FEATURES PAGE  —  ifs- (icon strip) + ss- (bullet list)
   ============================================================ */
.ifs-section { padding: 30px 0; }

.ifs-container {
    max-width: 1270px;
    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 svg { width: 24px; height: 24px; }

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

.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); }

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

@media (max-width: 576px) {
    .ifs-container { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .ifs-icon { width: 48px; height: 48px; }
}

/* bullet checklist inside feature cards (doc3 "ss-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; }


/* ============================================================
   20. ABOUT US — Mission & Vision (mv-), Core Values (cv-),
   Why Brands (wb-), Certifications (cert-)
   All 4 outer section wrappers below were removed because the
   template actually wraps these grids in `.sb-section` /
   `.wc-section` instead — only the grid/card classes are used.
   ============================================================ */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1270px;
    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-grid { grid-template-columns: 1fr; gap: 16px; }
}

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

.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); }

.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; }

.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; }

@media screen and (max-width: 1067px) {
    .cv-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media screen and (max-width: 768px) {
    .cv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

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

/* ── Why Brands stat cards ── */
.wb-container {
    max-width: 1270px;
    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; }

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

@media screen and (max-width: 600px) {
    .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; }
}

/* ── Certifications & Partnerships ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.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); }

.cert-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.cert-logo-svg { width: 44px; height: 44px; display: block; }

.cert-logo .meta-logo { width: 56px; height: 56px; display: block; margin: auto; }
.cert-card:has(.meta-logo) .cert-logo { width: 58px; height: 58px; }

.cert-logo--iso .cert-logo-svg { width: 48px; height: 48px; }

.cert-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.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; }
.cert-sub { font-size: var(--text-label); font-weight: var(--weight-label); color: var(--color-text-muted); margin: 0; line-height: 1.4; }

@media screen and (max-width: 1067px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media screen and (max-width: 600px) {
    .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; }
}

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

/* ── About-us "impact stats" heading accent (kept — used class) ── */
.sp-title-accent { color: var(--color-primary); }


/* ============================================================
   21. BLOG COMPONENTS  —  blg- prefix
   ⚠ NOT CONFIRMED — none of the 5 page templates you gave me
   use these classes, but the footer/nav both link to
   `{% url 'blogs' %}`, so a separate blogs.html article
   template almost certainly relies on this block. Kept as-is;
   please verify against that template before deleting.
   ============================================================ */
.blg-outer {
    background: var(--color-bg-light);
    padding: 48px 60px;
    box-sizing: border-box;
}

.blg-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.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;
}

.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); }

.blg-block-head { display: flex; align-items: center; gap: 10px; }
.blg-block-head .sp-icon { width: 36px; height: 36px; flex-shrink: 0; }

.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;
}

.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;
}

.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; }
.blg-icon-sm { width: 36px; height: 36px; flex-shrink: 0; }

.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; }

.blg-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }

.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); }

.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;
}

.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); }

.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); }

.blg-benefit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.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); }
.blg-stat-icon { width: 40px; height: 40px; flex-shrink: 0; margin-bottom: 2px; }

/* minimal icon-pill reused by blg-why-step (only 3 tints referenced) */
.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; }

@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; }
}




/* ============================================================
   PER-PAGE HERO IMAGE SIZE OVERRIDES
   Each page's hero image can now be resized independently
   without affecting the others.
   ============================================================ */


/* Features page hero image */
.platform-hero-section .nh-hero-img.hero-img--features {
    padding: 50px 100px 60px 0;
}


/* About-us page hero image */
.platform-hero-section .nh-hero-img.hero-img--about {
    padding: 60px 90px 100px 10px;

}




/* ========================== animation ============================== */


/* ============================================================
   ORBIT — rotating ring graphic with stable icons
   ============================================================ */
.orbit-wrap {
    position: relative;
    width: 410px;
    height: 410px;
    max-width: 100%;
    margin: 30px auto;
}

/* Rings — outline only, no fill/background, no rotation by default */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid rgba(20, 85, 184, 0.15);
}

/* Outer ring — the ONLY thing that rotates. Dashed + spinning. */
.ring-outer {
    width: 365px;
    height: 365px;
    border-style: dashed;
    border-color: rgba(20, 85, 184, 0.35);
    animation: ring-spin 50s linear infinite;
}

.ring-mid   { width: 250px; height: 250px; }
.ring-inner { width: 145px; height: 145px; }

@keyframes ring-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Center WhatsApp bubble — static */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 12px 30px rgba(5, 54, 121, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.orbit-center-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Group — NO animation here. Icons stay fixed. */
.orbit-group {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 3;
}

/* Each item sits at a fixed angle around the circle — static, never rotates */
.orbit-item {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotate(var(--angle)) translateY(-182px) rotate(calc(-1 * var(--angle)));
}

/* Icon box — NO animation here either. Fully stable. */
.orbit-icon {
    width: 55px;
    height: 55px;
    margin: -30px 0 0 -30px;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(5, 54, 121, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

/* Badge — sits below the ring, pushed to the right side */
.orbit-badge {
    position: absolute;
    top: 80%;      
    right: -20%;      
    margin-top: 20px;   
    background: var(--color-white);
    border-radius: 14px;
    padding: 16px 22px;
    box-shadow: 0 12px 28px rgba(5, 54, 121, 0.10);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 6;
}

.orbit-badge-num {
    font-size: 26px;
    font-weight: 800;
    color: #1455b8;
    line-height: 1;
}

.orbit-badge-label {
    font-size: 13px;
    font-weight: 600;
    color: #17335f;
}

@media screen and (max-width: 1067px) {
    .orbit-outer { display: none; }
}