/* ============================================================
   BookMyCab — Corporate Homepage v2  (index1.css)
   Palette: White + Cool Grey + Brand Teal accent
   ============================================================ */

/* ── Design tokens ── */
:root {
    --white:       #FFFFFF;
    --grey-50:     #F8FAFC;   /* page bg, section alt */
    --grey-100:    #F1F5F9;   /* card bg, input bg    */
    --grey-200:    #E2E8F0;   /* borders, dividers    */
    --grey-400:    #94A3B8;   /* placeholder, muted   */
    --grey-600:    #475569;   /* secondary text       */
    --grey-900:    #0F172A;   /* headings             */

    --teal-900:    #1E3A40;   /* darkest teal         */
    --teal-700:    #275059;   /* dark brand teal      */
    --teal:        #335A5F;   /* primary brand teal   */
    --teal-400:    #49969C;   /* lighter teal         */
    --teal-50:     #EEF7F8;   /* teal tint bg         */

    --orange:      #E8580C;   /* CTA accent           */
    --orange-h:    #CF4D0B;   /* CTA hover            */
    --orange-10:   #FEF0E7;   /* orange tint bg       */

    --nav-h:       66px;           /* fixed nav height for offset */
    --font:        'Inter', 'Segoe UI', system-ui, sans-serif;
    --r-sm:        6px;
    --r-md:        10px;
    --r-lg:        14px;
    --r-xl:        20px;
    --shadow-xs:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:   0 4px 12px rgba(15,23,42,.07);
    --shadow-md:   0 8px 28px rgba(15,23,42,.10);
    --shadow-lg:   0 20px 56px rgba(15,23,42,.12);
    --ease:        .2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;   /* prevent any element from causing horizontal white space */
}
body {
    font-family: var(--font);
    color: var(--grey-600);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; }


/* ── Typography helpers ── */
.eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--teal);
    display: block;
    margin-bottom: .5rem;
}
.section-h {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 800;
    color: var(--grey-900);
    line-height: 1.18;
    letter-spacing: -.4px;
}
.section-p {
    font-size: .95rem;
    color: var(--grey-400);
    line-height: 1.72;
    max-width: 520px;
}


/* ─────────────────────────────────────────
   NAVBAR  — fixed, transparent over hero,
            solid white after scroll
───────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Solid state — triggered by JS on scroll */
.nav.nav--solid {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--grey-200);
    box-shadow: var(--shadow-sm);
}

.nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Brand — white over image, dark when solid */
.nav__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* Logo image — always show natural colours, no filter */
.nav__logo-img {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 6px;
    transition: opacity .3s ease;
}
.nav__logo-img:hover { opacity: .85; }

/* Links */
.nav__links {
    display: flex;
    align-items: center;
    gap: .2rem;
    list-style: none;
    flex: 1;
}
.nav__links a {
    font-size: .84rem;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    padding: .38rem .8rem;
    border-radius: var(--r-sm);
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}
.nav__links a:hover {
    background: rgba(255,255,255,.12);
    color: var(--white);
}
.nav--solid .nav__links a { color: var(--grey-600); }
.nav--solid .nav__links a:hover { background: var(--grey-100); color: var(--grey-900); }

/* Phone pill */
.nav__phone {
    display: flex;
    align-items: center;
    gap: .38rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.25);
    padding: .35rem .85rem;
    border-radius: 20px;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
    white-space: nowrap;
}
.nav__phone:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.5); }
.nav__phone i { color: rgba(255,255,255,.75); font-size: .85rem; transition: color var(--ease); }
.nav--solid .nav__phone { color: var(--grey-600); border-color: var(--grey-200); }
.nav--solid .nav__phone:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
.nav--solid .nav__phone i { color: var(--teal); }

/* Buttons */
.nav__actions { display: flex; align-items: center; gap: .6rem; }
.btn-nav-login {
    font-size: .83rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    padding: .38rem .9rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    transition: all .3s ease;
    white-space: nowrap;
}
.btn-nav-login:hover { background: rgba(255,255,255,.12); color: var(--white); }
.nav--solid .btn-nav-login { color: var(--grey-600); border-color: var(--grey-200); background: var(--white); }
.nav--solid .btn-nav-login:hover { border-color: var(--teal); color: var(--teal); }
.btn-nav-cta {
    font-size: .83rem;
    font-weight: 700;
    color: var(--white);
    padding: .4rem 1.1rem;
    border-radius: var(--r-sm);
    background: var(--teal);
    transition: background var(--ease);
    white-space: nowrap;
}
.btn-nav-cta:hover { background: var(--teal-700); }

/* Hamburger */
.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: .4rem;
    border: none;
    background: none;
}
.nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.85);
    border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease), background .3s ease;
}
.nav--solid .nav__burger span { background: var(--grey-600); }

/* Mobile drawer — always solid white */
.nav__drawer {
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1.5rem 1rem;
    border-top: 1px solid var(--grey-200);
    background: var(--white);
}
.nav__drawer a {
    font-size: .88rem;
    color: var(--grey-600);
    padding: .5rem .5rem;
    border-radius: var(--r-sm);
    display: block;
}
.nav__drawer a:hover { background: var(--grey-100); color: var(--grey-900); }
.nav__drawer .drawer-cta {
    margin-top: .5rem;
    background: var(--teal);
    color: var(--white);
    text-align: center;
    padding: .62rem;
    border-radius: var(--r-sm);
    font-weight: 700;
}
.nav__drawer .drawer-cta:hover { background: var(--teal-700); }

/* Drawer section labels */
.nav__drawer .drawer-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--grey-400);
    padding: .6rem .5rem .3rem;
    margin-top: .3rem;
    display: block;
}

/* ── Desktop Dropdown menus ── */
.has-drop { position: relative; }
.has-drop > a {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.has-drop > a .caret {
    font-size: .6rem;
    transition: transform var(--ease);
    opacity: .6;
}
.has-drop:hover > a .caret { transform: rotate(180deg); }

.drop-menu {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: .4rem;
    z-index: 999;
    animation: dropIn .15s ease;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.has-drop:hover .drop-menu { display: block; }

.drop-menu a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--r-sm);
    font-size: .83rem;
    font-weight: 500;
    color: var(--grey-600);
    transition: background var(--ease), color var(--ease);
}
.drop-menu a:hover { background: var(--teal-50); color: var(--teal); }
.drop-menu a i {
    width: 28px; height: 28px;
    background: var(--grey-100);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--teal);
    flex-shrink: 0;
    transition: background var(--ease);
}
.drop-menu a:hover i { background: var(--teal-50); }
.drop-menu hr {
    border: none;
    border-top: 1px solid var(--grey-200);
    margin: .3rem .5rem;
}
.drop-cta {
    background: var(--teal-50) !important;
    color: var(--teal) !important;
    font-weight: 700 !important;
    margin-top: .2rem;
}
.drop-cta i { background: var(--teal) !important; color: var(--white) !important; }


/* ─────────────────────────────────────────
   HERO  — full-bleed background image
───────────────────────────────────────── */
.hero {
    /* bg image with directional overlay:
       left 60% stays dark for text,
       right side lightens so the white
       search card floats naturally */
    background:
        linear-gradient(
            105deg,
            rgba(10, 22, 40, .82) 0%,
            rgba(10, 22, 40, .72) 38%,
            rgba(10, 22, 40, .45) 62%,
            rgba(10, 22, 40, .18) 100%
        ),
        url('bg7.webp') center center / cover no-repeat;
    background-color: var(--teal-900);   /* fallback */
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 5rem;
    min-height: 92vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Subtle bottom fade to white — blends into next section */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(248,250,252,.18));
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero__left {}

/* Label — glass pill */
.hero__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.92);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: .32rem .9rem;
    border-radius: 20px;
    margin-bottom: 1.3rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero__label i { font-size: .85rem; color: var(--teal-400); }

/* Headline — white */
.hero__h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.13;
    letter-spacing: -.6px;
    margin-bottom: 1.15rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.hero__h1 em {
    font-style: normal;
    color: var(--teal-400);
    position: relative;
}
.hero__h1 em::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-400), transparent);
    border-radius: 2px;
    opacity: .5;
}
.hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    line-height: 1.72;
    max-width: 440px;
    margin-bottom: 1.8rem;
}
.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.88);
    font-size: .75rem;
    font-weight: 500;
    padding: .28rem .75rem;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--ease), border-color var(--ease);
}
.hero__badge:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.32);
}
.hero__badge i { color: var(--teal-400); font-size: .82rem; }


/* ── Search card — pops against the dark image bg ── */
.search-card {
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.15);
    border: 1px solid rgba(255,255,255,.9);
    overflow: hidden;
}

/* Tabs */
.stabs {
    display: flex;
    border-bottom: 1px solid var(--grey-200);
    background: var(--grey-50);
}
.stab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--grey-400);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
    white-space: nowrap;
}
.stab i { font-size: .9rem; }
.stab:hover { color: var(--grey-900); background: rgba(0,0,0,.02); }
.stab.active { color: var(--teal); border-bottom-color: var(--orange); background: var(--white); }

/* Search body */
.search-body { padding: 1.6rem; }
.spane { display: none; }
.spane.active { display: block; }

.srow { display: grid; gap: .8rem; }
.srow-2 { grid-template-columns: 1fr 1fr; }
.srow-3 { grid-template-columns: 1fr auto 1fr; }

/* Field */
.sf {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.sf label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--grey-400);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.sf label i { font-size: .8rem; color: var(--teal); }
.sf input,
.sf select,
.sf textarea {
    font-family: var(--font);
    font-size: .88rem;
    color: var(--grey-900);
    background: var(--grey-100);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-md);
    padding: .62rem .85rem;
    width: 100%;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
    outline: none;
    -webkit-appearance: none;
}
.sf input::placeholder,
.sf textarea::placeholder { color: var(--grey-400); }
.sf input:focus,
.sf select:focus,
.sf textarea:focus {
    border-color: var(--teal);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(51,90,95,.09);
}

/* Radio row */
.sradios {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}
.sradio {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--grey-600);
    cursor: pointer;
}
.sradio input { accent-color: var(--teal); width: 14px; height: 14px; }

/* Swap btn */
.swap-btn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .02rem;
}
.swap-btn button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--grey-200);
    background: var(--white);
    color: var(--teal);
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ease);
    box-shadow: var(--shadow-xs);
}
.swap-btn button:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }

/* Info alert in card */
.sinfo {
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.12);
    border-radius: var(--r-md);
    padding: .7rem 1rem;
    font-size: .8rem;
    color: var(--teal-700);
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}
.sinfo i { flex-shrink: 0; margin-top: .1rem; font-size: .9rem; }

/* Search CTA button */
.btn-search {
    width: 100%;
    padding: .78rem 1rem;
    background: var(--teal);
    color: var(--white);
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 700;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    letter-spacing: .2px;
    transition: background var(--ease), transform var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.btn-search:hover { background: var(--teal-700); transform: translateY(-1px); }
.btn-search i { font-size: .9rem; }


/* ─────────────────────────────────────────
   CLIENTS / LOGO BAR
───────────────────────────────────────── */
.clients {
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    padding: 1.8rem 0;
    background: var(--white);
}
.clients__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.clients__label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--grey-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.clients__logos {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    flex: 1;
}
.client-pill {
    font-size: .78rem;
    font-weight: 700;
    color: var(--grey-400);
    letter-spacing: .5px;
    white-space: nowrap;
    opacity: .7;
    transition: opacity var(--ease);
}
.client-pill:hover { opacity: 1; color: var(--grey-900); }


/* ─────────────────────────────────────────
   STATS
───────────────────────────────────────── */
.stats {
    padding: 4rem 0;
    background: var(--white);
}
.stats__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
.stat {
    text-align: center;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--grey-200);
}
.stat:last-child { border-right: none; }
.stat__num {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--grey-900);
    line-height: 1;
    margin-bottom: .3rem;
    letter-spacing: -1px;
}
.stat__num span { color: var(--teal); }
.stat__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--grey-400);
}
.stat__sub {
    font-size: .75rem;
    color: var(--grey-400);
    margin-top: .2rem;
}


/* ─────────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────────── */
.section {
    padding: 5rem 0;
}
.section--grey { background: var(--grey-50); }
.section--white { background: var(--white); }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.two-col {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
}
.two-col--even { grid-template-columns: 1fr 1fr; }


/* ─────────────────────────────────────────
   FEATURE CARDS
───────────────────────────────────────── */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.fcard {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.fcard:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(51,90,95,.2);
    transform: translateY(-2px);
}
.fcard__icon {
    width: 40px; height: 40px;
    border-radius: 9px;
    background: var(--teal-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 1.1rem;
    margin-bottom: .9rem;
    transition: background var(--ease), color var(--ease);
}
.fcard:hover .fcard__icon { background: var(--teal); color: var(--white); }
.fcard h5 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .38rem;
    line-height: 1.3;
}
.fcard p {
    font-size: .82rem;
    color: var(--grey-400);
    line-height: 1.65;
}


/* ─────────────────────────────────────────
   SERVICE CARDS
───────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.scard {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--ease), transform var(--ease);
}
.scard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.scard__head {
    padding: 1.6rem 1.4rem 1.2rem;
    border-bottom: 1px solid var(--grey-200);
    background: var(--grey-50);
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}
.scard__ico {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--teal-50);
    color: var(--teal);
}
.scard__head h4 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .15rem;
    line-height: 1.3;
}
.scard__head span {
    font-size: .72rem;
    color: var(--grey-400);
}
.scard__body { padding: 1.1rem 1.4rem; }
.scard__body p {
    font-size: .8rem;
    color: var(--grey-400);
    line-height: 1.65;
    margin-bottom: .9rem;
}
.pill-group { display: flex; flex-wrap: wrap; gap: .3rem; }
.pill {
    font-size: .68rem;
    font-weight: 600;
    color: var(--teal-700);
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.12);
    padding: .2rem .6rem;
    border-radius: 10px;
}


/* ─────────────────────────────────────────
   CORPORATE SECTION
───────────────────────────────────────── */
.corp {
    padding: 5rem 0;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
}
.corp__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.corp__checks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 1.4rem 0 1.8rem;
}
.corp__checks li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .88rem;
    color: var(--grey-600);
    line-height: 1.55;
}
.corp__checks li i {
    color: var(--teal);
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .15rem;
}
.corp__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-teal {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--teal);
    color: var(--white);
    font-size: .86rem;
    font-weight: 700;
    padding: .65rem 1.4rem;
    border-radius: var(--r-md);
    border: 2px solid var(--teal);
    transition: all var(--ease);
}
.btn-teal:hover { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.btn-outline-teal {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: transparent;
    color: var(--teal);
    font-size: .86rem;
    font-weight: 700;
    padding: .65rem 1.4rem;
    border-radius: var(--r-md);
    border: 2px solid var(--grey-200);
    transition: all var(--ease);
}
.btn-outline-teal:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-50); }

/* Mock dashboard panel */
.dash-mock {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.dash-mock__bar {
    padding: .75rem 1.2rem;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--red   { background: #FF5F57; }
.dot--amber { background: #FEBC2E; }
.dot--green { background: #28C840; }
.dash-mock__bar span {
    font-size: .72rem;
    color: var(--grey-400);
    margin-left: auto;
    font-weight: 500;
}
.dash-mock__body { padding: 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.dash-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem;
    border: 1px solid var(--grey-200);
    border-radius: var(--r-md);
    background: var(--grey-50);
}
.dash-row__ico {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.dash-row__ico.teal  { background: var(--teal-50);  color: var(--teal); }
.dash-row__ico.orange { background: var(--orange-10); color: var(--orange); }
.dash-row__ico.grey  { background: var(--grey-100); color: var(--grey-600); }
.dash-row__text { flex: 1; min-width: 0; }
.dash-row__text strong {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .1rem;
}
.dash-row__text span { font-size: .7rem; color: var(--grey-400); }
.dash-row__val {
    font-size: .9rem;
    font-weight: 800;
    color: var(--teal);
}
.dash-bar-row { display: flex; flex-direction: column; gap: .4rem; padding: .75rem .75rem .5rem; }
.dash-bar-row__label {
    font-size: .7rem;
    color: var(--grey-400);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}
.dash-bar-track {
    height: 6px;
    background: var(--grey-200);
    border-radius: 3px;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-400));
}


/* ─────────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────────── */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
}
.steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5% + 28px);
    right: calc(12.5% + 28px);
    height: 1px;
    background: var(--grey-200);
    z-index: 0;
}
.step { text-align: center; position: relative; z-index: 1; }
.step__num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--grey-200);
    color: var(--teal);
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-xs);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.step:hover .step__num { background: var(--teal); border-color: var(--teal); color: var(--white); }
.step h6 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .35rem;
    line-height: 1.3;
}
.step p { font-size: .78rem; color: var(--grey-400); line-height: 1.6; }


/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.tcard {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
    padding: 1.6rem;
    transition: box-shadow var(--ease);
}
.tcard:hover { box-shadow: var(--shadow-sm); }
.tcard__stars { color: #F5A623; font-size: .82rem; margin-bottom: .8rem; }
.tcard__text {
    font-size: .85rem;
    color: var(--grey-600);
    line-height: 1.72;
    margin-bottom: 1.2rem;
    font-style: italic;
}
.tcard__author { display: flex; align-items: center; gap: .7rem; }
.tcard__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-400));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
}
.tcard__name { font-size: .84rem; font-weight: 700; color: var(--grey-900); }
.tcard__role { font-size: .72rem; color: var(--grey-400); }


/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
}
.contact__detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.cdetail {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    text-decoration: none;
    color: var(--grey-600);
}
.cdetail__ico {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 1rem;
    flex-shrink: 0;
}
.cdetail__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--grey-400); margin-bottom: .15rem; }
.cdetail__val { font-size: .88rem; font-weight: 600; color: var(--grey-900); }
.cdetail:hover .cdetail__val { color: var(--teal); }

/* Form */
.cform {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-xl);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}
.cform h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: 1.2rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.form-group label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--grey-400);
}
.form-group input,
.form-group textarea {
    font-family: var(--font);
    font-size: .88rem;
    color: var(--grey-900);
    background: var(--grey-100);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-md);
    padding: .62rem .85rem;
    width: 100%;
    outline: none;
    transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--teal);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(51,90,95,.08);
}
.form-group textarea { resize: none; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--grey-400); }
.btn-submit {
    width: 100%;
    padding: .78rem 1rem;
    background: var(--teal);
    color: var(--white);
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 700;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--ease), transform var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.btn-submit:hover { background: var(--teal-700); transform: translateY(-1px); }
.form-note {
    font-size: .72rem;
    color: var(--grey-400);
    text-align: center;
    margin-top: .75rem;
}
.form-feedback { display: none; margin-top: .75rem; border-radius: var(--r-md); padding: .65rem 1rem; font-size: .84rem; }
.form-feedback.success { background: #ECFDF5; color: #166534; border: 1px solid #BBF7D0; }
.form-feedback.error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }


/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer {
    background: #0A1628;
    padding: 4rem 0 0;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer__brand-name {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .75rem;
}
.footer__brand-icon {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__desc {
    font-size: .82rem;
    color: rgba(255,255,255,.4);
    line-height: 1.72;
    max-width: 240px;
    margin-bottom: 1.2rem;
}
.footer__contacts a {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    margin-bottom: .4rem;
    transition: color var(--ease);
}
.footer__contacts a:hover { color: rgba(255,255,255,.85); }
.footer__contacts i { color: var(--teal-400); font-size: .8rem; }
.footer__social { display: flex; gap: .5rem; margin-top: .85rem; }
.social-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    text-decoration: none;
    transition: all var(--ease);
}
.social-btn:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }

.footer__col-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.28);
    margin-bottom: .9rem;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.footer__links a {
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color var(--ease);
    display: flex;
    align-items: center;
    gap: .3rem;
}
.footer__links a:hover { color: rgba(255,255,255,.85); }

.footer__bottom {
    padding: 1.1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .74rem;
    color: rgba(255,255,255,.28);
}
.footer__bottom a { color: rgba(255,255,255,.28); text-decoration: none; }
.footer__bottom a:hover { color: rgba(255,255,255,.65); }


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1023px) {
    .hero { min-height: auto; padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 3.5rem; }
    .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero__sub { max-width: 100%; }
    .stats__inner { grid-template-columns: repeat(3, 1fr); }
    .hiw-flow { gap: .5rem; }
    .hiw-arrow { display: none; }
    .stat:nth-child(2) { border-right: none; }
    .stat:nth-child(3) { border-top: 1px solid var(--grey-200); }
    .stat:nth-child(4) { border-top: 1px solid var(--grey-200); border-right: none; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .corp__grid { grid-template-columns: 1fr; gap: 2rem; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps::before { display: none; }
    .testi-grid { grid-template-columns: 1fr 1fr; }
    .contact__grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .two-col { grid-template-columns: 1fr; gap: 2rem; }
    /* On tablet: image overlay is heavier since layout is stacked */
    .hero { background:
        linear-gradient(180deg, rgba(10,22,40,.78) 0%, rgba(10,22,40,.65) 100%),
        url('bg7.webp') center center / cover no-repeat; }
}
@media (max-width: 767px) {
    .nav__links, .nav__phone, .btn-nav-login { display: none !important; }
    .nav__burger { display: flex; }
    .hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.5rem; }
    .hero__h1 { font-size: 1.85rem; }
    .hero-notifs { display: none !important; }   /* avoid tall invisible stack on stacked hero */
    .stab span { display: none; }
    .srow-2 { grid-template-columns: 1fr; }
    .srow-3 { grid-template-columns: 1fr auto 1fr; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .testi-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .hiw-step { min-width: 130px; max-width: 170px; }
    .cap-strip__items { gap: 0; }
    /* Platform section: keep screens at 100% width */
    .plt-live__screens { width: 100%; }
    .plt-screen { width: 100%; }
}
@media (max-width: 479px) {
    .services-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .hero__badges .hero__badge span { display: none; }
    .stats__inner { grid-template-columns: repeat(2, 1fr); }
    .three-t-visual { flex-direction: column; gap: .5rem; }
    .ttv-connector { display: none; }
    .ttv-pill { min-width: auto; }
    .cap-strip__inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
    /* How it works: 2-col wrap on tiny screens */
    .hiw-step { min-width: calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
}

/* ─────────────────────────────────────────
   STAT ICON
───────────────────────────────────────── */
.stat__icon {
    font-size: 1.1rem;
    color: var(--teal-400);
    margin-bottom: .35rem;
    opacity: .7;
}

/* ─────────────────────────────────────────
   STORY LINES (About)
───────────────────────────────────────── */
.story-lines {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.sl-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.sl-year {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .5px;
    padding: .22rem .65rem;
    border-radius: 20px;
    background: var(--teal-50);
    color: var(--teal);
    border: 1px solid rgba(51,90,95,.15);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: .15rem;
}
.sl-text {
    font-size: .84rem;
    color: var(--grey-600);
    line-height: 1.6;
}
.sl-text strong { color: var(--teal-700); }
.sl-item--current .sl-text { color: var(--grey-800); }

/* 3T Visual Badge */
.three-t-visual {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-lg);
}
.ttv-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: var(--r-md);
    flex: 1;
    min-width: 120px;
}
.ttv-pill--t1 { background: var(--teal-50); border: 1px solid rgba(51,90,95,.15); }
.ttv-pill--t2 { background: #FFF3EB; border: 1px solid rgba(232,88,12,.15); }
.ttv-pill--t3 { background: #EFF6FF; border: 1px solid rgba(59,130,246,.15); }
.ttv-pill i { font-size: 1rem; }
.ttv-pill--t1 i { color: var(--teal); }
.ttv-pill--t2 i { color: var(--orange); }
.ttv-pill--t3 i { color: #3B82F6; }
.ttv-pill span { font-size: .72rem; line-height: 1.4; }
.ttv-pill span strong { display: block; font-size: .8rem; }
.ttv-connector {
    font-size: 1rem;
    font-weight: 900;
    color: var(--grey-400);
    flex-shrink: 0;
}

/* Milestone Stack (About right) */
.milestone-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ms-card {
    border-radius: var(--r-lg);
    padding: 1.2rem 1.3rem;
    transition: box-shadow var(--ease), transform var(--ease);
}
.ms-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.ms-card--heritage {
    background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
    color: #fff;
}
.ms-card--scale {
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
}
.ms-card--tech {
    background: var(--white);
    border: 1px solid var(--grey-200);
}

.ms-card__year {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: .25rem;
}
.ms-card__title {
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.ms-card--heritage .ms-card__title { color: #fff; }
.ms-card--scale .ms-card__title, .ms-card--tech .ms-card__title { color: var(--grey-900); }

.ms-card__body { display: flex; flex-direction: column; gap: .4rem; }
.ms-metric {
    font-size: .78rem;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.ms-metric span { font-weight: 700; color: rgba(255,255,255,.95); }

.ms-metrics-row {
    display: flex;
    gap: 0;
}
.ms-big-metric {
    flex: 1;
    text-align: center;
    padding: .5rem;
    border-right: 1px solid var(--grey-200);
}
.ms-big-metric:last-child { border-right: none; }
.ms-big-metric__val {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--teal);
    line-height: 1;
    margin-bottom: .2rem;
}
.ms-big-metric__lbl {
    font-size: .65rem;
    color: var(--grey-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ms-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.ms-tech-chips span {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 500;
    color: var(--grey-600);
    padding: .22rem .6rem;
    border-radius: 20px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
}
.ms-tech-chips span i { color: var(--teal); font-size: .7rem; }

/* ─────────────────────────────────────────
   LIVE PROOF (Why BMC section)
───────────────────────────────────────── */
.live-proof {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #ECFDF5;
    border: 1px solid rgba(34,197,94,.2);
    border-radius: var(--r-md);
    padding: .5rem .85rem;
    font-size: .75rem;
    color: #166534;
}
.lp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
    animation: lpPulse 1.5s ease-out infinite;
}
@keyframes lpPulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ─────────────────────────────────────────
   FEATURE CARDS — upgraded
───────────────────────────────────────── */
.fcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
}
.fcard__metric {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-50);
    border: 1px solid rgba(51,90,95,.12);
    padding: .2rem .55rem;
    border-radius: 10px;
}
.fcard__icon { margin-bottom: 0; }
.fcard__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .38rem;
    margin-top: .5rem;
}
.fcard__points li {
    font-size: .75rem;
    color: var(--grey-400);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}
.fcard__points li::before {
    content: '·';
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
   SERVICE CARD — features list
───────────────────────────────────────── */
.scard__features {
    list-style: none;
    padding: 0;
    margin: 0 0 .8rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.scard__features li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .75rem;
    color: var(--grey-500);
    line-height: 1.5;
}
.scard__features li i { color: var(--teal); font-size: .75rem; flex-shrink: 0; margin-top: .1rem; }
.scard--featured { border-color: rgba(232,88,12,.2); background: linear-gradient(135deg, #fff9f6, #fff); }
.scard--featured h4 { color: var(--orange); }

/* ─────────────────────────────────────────
   CORPORATE — checklist upgrade
───────────────────────────────────────── */
.corp__checks li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.corp__checks li > div { font-size: .84rem; color: var(--grey-600); line-height: 1.6; }
.corp__checks li > div strong { color: var(--grey-900); }

/* Dashboard live row */
.dash-live-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .65rem;
    color: #166534;
    background: #ECFDF5;
    border: 1px solid rgba(34,197,94,.18);
    border-radius: 6px;
    padding: .32rem .65rem;
    margin-bottom: .5rem;
}
.dash-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
    animation: lpPulse 1.5s ease-out infinite;
}
.dash-row--ai { border: 1px solid rgba(232,88,12,.12); background: #fff9f6; border-radius: var(--r-sm); }
.dash-row__badge {
    font-size: .6rem;
    font-weight: 700;
    background: rgba(232,88,12,.1);
    color: var(--orange);
    padding: .15rem .45rem;
    border-radius: 6px;
    border: 1px solid rgba(232,88,12,.2);
}

/* ─────────────────────────────────────────
   PLATFORM CAPABILITIES STRIP
───────────────────────────────────────── */
.cap-strip {
    background: var(--white);
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    padding: .9rem 0;
}
.cap-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cap-strip__label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--grey-400);
    flex-shrink: 0;
    white-space: nowrap;
}
.cap-strip__items {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    flex-wrap: wrap;
}
.cap-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--grey-600);
    padding: .25rem .7rem;
    white-space: nowrap;
    transition: color var(--ease);
}
.cap-item:hover { color: var(--teal); }
.cap-item i { color: var(--teal); font-size: .75rem; }
.cap-sep {
    width: 1px; height: 16px;
    background: var(--grey-200);
    flex-shrink: 0;
}
.cap-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--teal);
    white-space: nowrap;
    text-decoration: none;
    padding: .28rem .75rem;
    border: 1px solid rgba(51,90,95,.2);
    border-radius: 20px;
    background: var(--teal-50);
    transition: all var(--ease);
}
.cap-strip__cta:hover { background: var(--teal); color: #fff; }

/* ─────────────────────────────────────────
   HOW IT WORKS — Flow layout
───────────────────────────────────────── */
.hiw-flow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}
.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 160px;
    max-width: 200px;
    gap: .75rem;
}
.hiw-step__icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--teal-50);
    border: 2px solid rgba(51,90,95,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--teal);
    position: relative;
    flex-shrink: 0;
}
.hiw-step__icon--otp { background: #ECFDF5; border-color: rgba(34,197,94,.25); color: #16A34A; }
.hiw-step__icon--done { background: #EFF6FF; border-color: rgba(59,130,246,.2); color: #3B82F6; }
.hiw-step__content { width: 100%; }
.hiw-step__num {
    font-size: .6rem;
    font-weight: 900;
    color: var(--teal-400);
    letter-spacing: 1.5px;
    margin-bottom: .25rem;
}
.hiw-step h6 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--grey-900);
    margin-bottom: .5rem;
    line-height: 1.3;
}
.hiw-step ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .28rem;
}
.hiw-step ul li {
    font-size: .72rem;
    color: var(--grey-400);
    line-height: 1.5;
}
.hiw-arrow {
    font-size: 1rem;
    color: var(--grey-300);
    align-self: center;
    padding: 0 .25rem;
    margin-bottom: 2rem;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   SCROLL-REVEAL
════════════════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: none;
}
.reveal--delay-1 { transition-delay: .15s; }
.reveal--delay-2 { transition-delay: .30s; }
.reveal--delay-3 { transition-delay: .45s; }

/* ═══════════════════════════════════════════════════════
   HERO — FLOATING LIVE NOTIFICATIONS
════════════════════════════════════════════════════════ */
.hero-notifs {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1.75rem;
}
.hn-bubble {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255,255,255,.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: .55rem .8rem;
    color: #fff;
    font-size: .72rem;
    max-width: 300px;
    opacity: 0;
    transform: translateX(-12px);
    animation: hnPop .55s cubic-bezier(.22,1,.36,1) forwards;
}
.hn-bubble i {
    font-size: 1.05rem;
    flex-shrink: 0;
}
.hn-bubble > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hn-bubble strong {
    font-size: .74rem;
    font-weight: 700;
    display: block;
}
.hn-bubble span {
    opacity: .7;
    font-size: .68rem;
}
.hn-bubble--1 { animation-delay: 1.4s; }
.hn-bubble--2 { animation-delay: 2.8s; }
.hn-bubble--3 { animation-delay: 4.2s; }
.hn-bubble--1 i { color: #4ade80; }
.hn-bubble--2 i { color: #60a5fa; }
.hn-bubble--3 i { color: #f59e0b; }

@keyframes hnPop {
    to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════
   PLATFORM IN ACTION — SECTION
════════════════════════════════════════════════════════ */
.plt-live {
    background: #0d1a1b;
    padding: 5.5rem 0 4.5rem;
    overflow: hidden;
    position: relative;
}
.plt-live::before {
    content: '';
    position: absolute;
    top: -160px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(51,90,95,.22) 0%, transparent 70%);
    pointer-events: none;
}
.plt-live__head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.plt-live__head h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: .75rem;
}
.plt-live__head p {
    color: rgba(255,255,255,.55);
    max-width: 560px;
    margin: 0 auto;
    font-size: .95rem;
    line-height: 1.7;
}

/* Eyebrow on dark bg */
.eyebrow--light {
    color: var(--teal-400, #4a9ea7) !important;
    border-color: rgba(51,90,95,.4) !important;
    background: rgba(51,90,95,.15) !important;
}

/* Screens layout */
.plt-live__screens {
    display: grid;
    grid-template-columns: 1fr 88px 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

/* Individual screen window */
.plt-screen {
    background: #162526;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.plt-screen__bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.plt-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.plt-dot--r { background: #ff5f57; }
.plt-dot--y { background: #ffbd2e; }
.plt-dot--g { background: #28c840; }
.plt-screen__title {
    font-size: .62rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    letter-spacing: .9px;
    text-transform: uppercase;
    margin-left: .3rem;
}
.plt-screen__body {
    padding: .8rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 195px;
}
.plt-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .45rem;
    border-radius: 7px;
    font-size: .7rem;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.03);
}
.plt-row--active {
    background: rgba(51,90,95,.25);
    border: 1px solid rgba(51,90,95,.35);
}
.plt-status {
    font-size: .42rem;
    flex-shrink: 0;
}
.plt-status--live { color: #4ade80; animation: statusPulse 1.4s ease-in-out infinite; }
.plt-status--wait { color: #f59e0b; }
.plt-status--done { color: rgba(255,255,255,.2); }
.plt-status--pend { color: #60a5fa; }

@keyframes statusPulse {
    0%,100% { opacity: 1; }
    50% { opacity: .25; }
}
.plt-trip-id {
    font-size: .61rem;
    color: rgba(255,255,255,.3);
    font-family: monospace;
    flex-shrink: 0;
}
.plt-trip-info { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plt-trip-st {
    font-size: .59rem;
    font-weight: 700;
    padding: .13rem .38rem;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.plt-trip-st--go     { background: rgba(74,222,128,.15); color: #4ade80; }
.plt-trip-st--assign { background: rgba(245,158,11,.15);  color: #f59e0b; }
.plt-trip-st--done   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); }
.plt-trip-st--pend   { background: rgba(96,165,250,.12);  color: #60a5fa; }
.plt-row--ai {
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.18);
    color: #fbbf24;
    font-size: .66rem;
    gap: .5rem;
}
.plt-row--ai i { font-size: .85rem; }

/* Center flow element */
.plt-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
}
.plt-flow__pulse {
    position: relative;
    width: 60px; height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plt-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--teal, #335A5F);
    animation: pltPulse 2s ease-in-out infinite;
}
.plt-pulse-ring--outer {
    inset: -10px;
    opacity: .3;
    animation-delay: .5s;
}
@keyframes pltPulse {
    0%,100% { transform: scale(1); opacity: .6; }
    50% { transform: scale(1.25); opacity: 0; }
}
.plt-pulse-core {
    width: 44px; height: 44px;
    background: var(--teal, #335A5F);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 24px rgba(51,90,95,.55);
}
.plt-flow__label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.35);
    text-align: center;
    line-height: 1.4;
}
.plt-flow__arrows {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.plt-arrow {
    color: var(--teal, #335A5F);
    font-size: .95rem;
    opacity: .5;
    animation: pltArrow 1.6s ease-in-out infinite;
    text-align: center;
}
.plt-arrow--d2 { animation-delay: .8s; }
@keyframes pltArrow {
    0%,100% { opacity: .25; }
    50% { opacity: .9; }
}

/* Driver screen body */
.plt-screen__body--driver { gap: .55rem; min-height: 195px; }
.plt-driver-status {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    color: #4ade80;
    font-weight: 600;
}
.plt-driver-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: statusPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.plt-driver-trip {
    background: rgba(255,255,255,.05);
    border-radius: 9px;
    padding: .5rem .65rem;
}
.plt-dt-label {
    font-size: .58rem;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: .25rem;
}
.plt-dt-dest {
    font-size: .76rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: .2rem;
}
.plt-dt-dest i { color: #E8580C; margin-right: .25rem; }
.plt-dt-eta {
    font-size: .63rem;
    color: rgba(255,255,255,.45);
}
.plt-dt-eta i { color: rgba(255,255,255,.3); margin-right: .2rem; }
.plt-driver-otp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .64rem;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
    border-radius: 6px;
    padding: .35rem .55rem;
    border: 1px solid rgba(255,255,255,.06);
}
.plt-otp-val {
    font-family: monospace;
    font-size: .88rem;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: .15rem;
}
.plt-driver-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .67rem;
    color: rgba(255,255,255,.55);
    background: rgba(51,90,95,.2);
    border-radius: 6px;
    padding: .3rem .55rem;
}
.plt-driver-nav i { color: var(--teal, #335A5F); }
.pls-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    margin-left: auto;
    animation: statusPulse 1s ease-in-out infinite;
    flex-shrink: 0;
}
.plt-driver-wapp {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .65rem;
    color: rgba(255,255,255,.4);
}
.plt-driver-wapp i { color: #25D366; }

.plt-screen__label {
    padding: .4rem .75rem;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Bottom chips */
.plt-live__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.plt-chip {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .85rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65);
    font-size: .71rem;
    font-weight: 500;
    transition: background .2s, border-color .2s;
}
.plt-chip:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(51,90,95,.4);
}
.plt-chip i { color: var(--teal, #335A5F); font-size: .85rem; }

/* ═══════════════════════════════════════════════════════
   SECURITY & COMPLIANCE SECTION
════════════════════════════════════════════════════════ */
.sec-shield {
    background: #0e1c1d;
    padding: 5.5rem 0;
    position: relative;
    overflow: hidden;
}
.sec-shield::before,
.sec-shield::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.sec-shield::before {
    top: -120px; right: -80px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(51,90,95,.2), transparent 70%);
}
.sec-shield::after {
    bottom: -100px; left: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(232,88,12,.08), transparent 70%);
}
.sec-shield__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}
.sec-shield__left { color: #fff; }
.sec-shield__left h2 {
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: .75rem;
}
.sec-shield__left > p {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

/* Animated shield graphic */
.sec-shield__graphic {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
}
.shg-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 70px; height: 70px;
    background: linear-gradient(135deg, var(--teal, #335A5F), #1a4a50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: #fff;
    box-shadow: 0 0 32px rgba(51,90,95,.55);
    z-index: 3;
}
.shg-ring {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(51,90,95,.45);
    animation: shgSpin 22s linear infinite;
}
.shg-ring--2 {
    inset: 38px;
    animation-duration: 16s;
    animation-direction: reverse;
    border-color: rgba(232,88,12,.2);
}
.shg-node {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #1b2e2f;
    border: 1px solid rgba(51,90,95,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: var(--teal, #335A5F);
    /* place on ring circumference via CSS custom property */
    left: 50%; top: 0;
    transform-origin: 0 97px;
    transform: translateX(-50%) rotate(var(--ang)) translateY(-97px) rotate(calc(-1 * var(--ang)));
}
.shg-node--2 {
    width: 28px; height: 28px;
    color: #E8580C;
    border-color: rgba(232,88,12,.3);
    transform-origin: 0 68px;
    transform: translateX(-50%) rotate(var(--ang)) translateY(-68px) rotate(calc(-1 * var(--ang)));
}
@keyframes shgSpin { to { transform: rotate(360deg); } }

/* Security metric cards */
.sec-shield__right {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.sm-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    padding: 1.1rem 1.2rem;
    transition: background .2s, border-color .2s, transform .2s;
}
.sm-item:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(51,90,95,.3);
    transform: translateX(4px);
}
.sm-item__ico {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(51,90,95,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--teal, #335A5F);
    flex-shrink: 0;
}
.sm-item__title {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .3rem;
}
.sm-item__desc {
    font-size: .76rem;
    color: rgba(255,255,255,.48);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   Responsive — Platform & Security sections
════════════════════════════════════════════════════════ */

/* ── Tablet: 600–900px ── */
@media (max-width: 900px) {
    .plt-live__screens {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .plt-flow {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: .4rem 0;
    }
    .plt-flow__pulse { width: 50px; height: 50px; }
    .plt-pulse-core { width: 36px; height: 36px; font-size: .9rem; }
    .plt-flow__arrows { flex-direction: row; gap: .5rem; }
    .plt-flow__label { display: none; }
    .sec-shield__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .sec-shield__graphic { width: 190px; height: 190px; }
}

/* ── Mobile: ≤600px ── */
@media (max-width: 600px) {
    /* Hero notifications hidden on small screens — they disrupt single-column hero */
    .hero-notifs { display: none !important; }

    /* Platform section */
    .plt-live { padding: 3rem 0 2.5rem; }
    .plt-live__head { margin-bottom: 2rem; }
    .plt-live__head h2 { font-size: 1.5rem; }
    .plt-live__head p { font-size: .85rem; }
    .plt-live__screens { gap: .75rem; }
    .plt-screen__body { min-height: auto; }
    .plt-live__chips { gap: .35rem; }
    .plt-chip { font-size: .65rem; padding: .28rem .6rem; }

    /* Security section */
    .sec-shield { padding: 3rem 0; }
    .sec-shield__left h2 { font-size: 1.45rem; }
    .sec-shield__left > p { font-size: .84rem; }
    .sec-shield__graphic { display: none; }
    .sm-item { gap: .7rem; padding: .85rem .9rem; }
    .sm-item__ico { width: 36px; height: 36px; font-size: .9rem; border-radius: 9px; }
    .sm-item__title { font-size: .82rem; }
    .sm-item__desc { font-size: .73rem; }
}

/* ═══════════════════════════════════════════════════════
   LIVE NETWORK MAP SECTION
════════════════════════════════════════════════════════ */
.live-map-sect {
    position: relative;
    width: 100%;
    height: 500px;          /* comfortable on desktop */
    overflow: hidden;
    background: #f1f5f9;    /* fallback while map tiles load */
}

/* The MapLibre map container fills the section */
#homeMap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Top-left overlay — live count chip + time */
.lms-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

/* Green pulsing dot + label + count */
.lms-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(51, 90, 95, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
}
.lms-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: statusPulse 1.4s ease-in-out infinite;
}
.lms-label  { opacity: .8; }
.lms-divider{ opacity: .4; margin: 0 1px; }
.lms-unit   { opacity: .75; }
#homeMapCount { font-weight: 800; font-size: .88rem; }

/* Subtle timestamp under the chip */
.lms-time {
    font-size: .65rem;
    color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px 9px;
    border-radius: 999px;
    text-align: center;
    align-self: flex-start;
}

/* Bottom caption bar */
.lms-caption {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 8px 16px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .72rem;
    color: var(--grey-600);
    border-top: 1px solid rgba(0,0,0,.07);
    flex-wrap: wrap;
    text-align: center;
}
.lms-caption i { color: var(--teal); font-size: .8rem; }
.lms-caption a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.lms-caption a:hover { text-decoration: underline; }
.lms-caption a i { font-size: .65rem; vertical-align: middle; }

/* MapLibre attribution override (keep subtle) */
.maplibregl-ctrl-attrib { display: none !important; }
.maplibregl-ctrl-logo   { display: none !important; }

/* Navigation controls — push slightly inward from default */
.live-map-sect .maplibregl-ctrl-top-right { top: 12px; right: 12px; }

/* Responsive heights */
@media (max-width: 1023px) { .live-map-sect { height: 420px; } }
@media (max-width: 767px)  { .live-map-sect { height: 320px; } }
@media (max-width: 479px)  {
    .live-map-sect { height: 260px; }
    .lms-chip { font-size: .7rem; padding: 5px 10px; }
    .lms-time { font-size: .6rem; }
    .lms-caption { font-size: .65rem; padding: 6px 10px; }
}

/* ─────────────────────────────────────────
   Flatpickr overrides
───────────────────────────────────────── */
.flatpickr-calendar {
    font-family: var(--font) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--grey-200) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--teal) !important; border-color: var(--teal) !important; }
.flatpickr-day:hover { background: var(--teal-50) !important; }
.flatpickr-months .flatpickr-month { background: var(--white) !important; color: var(--grey-900) !important; }