/* ═══════════════════════════════════════════════
   DESIGN TOKENS -White / Navy / Red
═══════════════════════════════════════════════ */
:root {
    --navy-deep: #080F1E;
    --navy: #0B1D3A;
    --navy-mid: #142444;
    --navy-light: #1E3260;
    --navy-glass: rgba(11,29,58,.85);
    --red: #C8102E;
    --red-bright: #E8192F;
    --red-glow: rgba(200,16,46,.35);
    --red-soft: rgba(200,16,46,.12);
    --white: #FFFFFF;
    --off-white: #F6F8FC;
    --slate: #8A9BB8;
    --slate-dark: #5A6B8A;
    --border-dark: rgba(255,255,255,.08);
    --border-light: rgba(11,29,58,.09);
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --trans: .3s cubic-bezier(.4,0,.2,1);
    --trans-bounce: .4s cubic-bezier(.34,1.56,.64,1);
}

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--navy-deep);
    color: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: 74px;
}
img { max-width: 100%; height: auto; display: block; }
/* <picture> is only ever a transparent wrapper around a single <img> (see webp_picture()
   in includes/img-helper.php) - without this, percentage height/max-height on the img
   can't resolve against an ancestor's height because <picture> itself has no intrinsic
   size, so images fall back to their natural pixel size and overflow their container. */
picture { display: contents; }
a { text-decoration: none; color: inherit; transition: color var(--trans); }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── INTERACTION: remove browser outlines, add modern states ── */
*:focus { outline: none !important; }
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--red) !important;
    outline-offset: 3px; border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(200,16,46,.15) !important;
}
a, button, [role="button"], input, textarea, select,
.cselect__trigger, .mobile-nav__row, .mobile-prod {
    -webkit-tap-highlight-color: transparent;
}

/* Press scale - makes every click feel physical */
button:active:not(:disabled),
.navbar__cta:active, .mobile-nav__cta:active,
.btn-submit:active, .mega-cta-card__btn:active,
.mobile-nav__close:active, .cselect__trigger:active,
.mega-link:active, .mobile-nav__row:active {
    transform: scale(0.955) !important;
    transition: transform 80ms cubic-bezier(.4,0,.2,1) !important;
}

/* Ripple wave element */
.ripple-wave {
    position: absolute; border-radius: 50%;
    pointer-events: none; z-index: 10;
    background: rgba(255,255,255,.28);
    width: 0; height: 0;
    transform: scale(0); opacity: 1;
    animation: _ripple .65s cubic-bezier(0,.5,.5,1) forwards;
}
.ripple-wave--dark { background: rgba(11,29,58,.12); }
@keyframes _ripple {
    to { transform: scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════
   ENHANCED NAVBAR - FULLY RESPONSIVE
═══════════════════════════════════════════════ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(11,29,58,.09);
    transition: all var(--trans);
    height: 74px;
}
.navbar--scrolled {
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 24px rgba(11,29,58,.08), 0 1px 0 rgba(11,29,58,.06);
    height: 64px;
}
.navbar--scrolled .navbar__inner { height: 64px; }
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1280px; margin: 0 auto; padding: 0 20px;
    height: 74px;
    transition: height var(--trans);
    width: 100%;
}

/* Logo */
.navbar__logo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -.05em;
    color: var(--white); display: flex; align-items: center; gap: 2px;
    position: relative; z-index: 1001;
    transition: all var(--trans); flex-shrink: 0;
}
.navbar__logo:hover { transform: scale(1.03); }
.navbar__logo img { height: 48px; width: auto; transition: height var(--trans); }
.navbar--scrolled .navbar__logo img { height: 40px; }

/* Desktop Navigation */
.navbar__nav { 
    display: flex; align-items: center; gap: 2px;
    margin: 0; padding: 0;
}
.navbar__nav > li { position: relative; }
.navbar__nav > li > a {
    font-size: clamp(.75rem, 1vw, .85rem); font-weight: 600; color: var(--navy);
    padding: 10px 12px; border-radius: 10px;
    transition: all var(--trans);
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; cursor: pointer;
    position: relative;
}
.navbar__nav > li > a:hover {
    color: var(--red); background: rgba(200,16,46,.06);
}

/* CTA Button */
.navbar__cta {
    background: linear-gradient(135deg, var(--red), var(--red-bright)) !important;
    color: #fff !important; 
    padding: 10px 18px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px var(--red-glow);
    transition: all var(--trans-bounce) !important;
    margin-left: 4px;
}
.navbar__cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px var(--red-glow) !important;
}

/* Chevron animation */
.nav-chevron { font-size: .72rem; transition: transform var(--trans); margin-left: 3px; }
.submeny:hover > a > .nav-chevron,
.submeny:focus-within > a > .nav-chevron,
.submeny.is-open > a > .nav-chevron { transform: rotate(180deg); }

/* ── SMALL DROPDOWNS (Training, About) ──────────────────────── */
.submeny .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid rgba(11,29,58,.1);
    border-radius: var(--radius-lg);
    padding: 10px;
    min-width: 290px;
    z-index: 1001;
    box-shadow: 0 12px 48px rgba(11,29,58,.14), 0 2px 8px rgba(11,29,58,.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--trans-bounce);
}
/* Invisible hover bridge so the cursor doesn't lose :hover when crossing
   the gap between the nav item and the dropdown panel. */
.submeny .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
}
.submeny:hover > .sub-menu,
.submeny:focus-within > .sub-menu,
.submeny.is-open > .sub-menu {
    opacity: 1; visibility: visible;
    pointer-events: all; transform: translateY(0);
}
.sub-menu__header {
    font-family: 'Outfit', sans-serif;
    font-size: .68rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--slate-dark);
    padding: 4px 12px 10px;
    border-bottom: 1px solid rgba(11,29,58,.07);
    margin-bottom: 6px;
}
.sub-menu li { margin: 2px 0; }
.sub-menu > ul > li > a {
    padding: 9px 12px; display: flex;
    align-items: center; gap: 12px;
    color: var(--navy) !important;
    border-radius: 10px;
    background: transparent !important;
    transition: all var(--trans);
}
.sub-menu > ul > li > a:hover {
    background: rgba(200,16,46,.06) !important;
    transform: translateX(3px);
}
.sub-menu > ul > li > a > i {
    width: 34px; height: 34px; flex-shrink: 0;
    background: rgba(11,29,58,.05); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; color: var(--slate-dark);
    transition: all var(--trans);
}
.sub-menu > ul > li > a:hover > i {
    background: rgba(200,16,46,.1); color: var(--red);
}
.sub-menu > ul > li > a > span > b {
    display: block; font-size: .83rem; font-weight: 600;
    color: var(--navy); line-height: 1.2; transition: color var(--trans);
}
.sub-menu > ul > li > a:hover > span > b { color: var(--red); }
.sub-menu > ul > li > a > span > small {
    display: block; font-size: .71rem; color: #6B7280;
    line-height: 1.3; margin-top: 2px;
}
.sub-menu .sub-menu { left: 100%; top: 0; margin-left: 4px; }

/* ── MEGA MENU (Solutions) ───────────────────────────────────── */
.navbar__nav > li.submeny--mega { position: static; }
.mega-drop {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: 100% !important; min-width: unset !important;
    margin-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    padding: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(11,29,58,.07) !important;
    box-shadow: 0 28px 70px rgba(11,29,58,.15), 0 4px 16px rgba(11,29,58,.05) !important;
    transform: translateY(14px) !important;
    overflow: visible;
}
/* Invisible hover bridge for the mega menu so hover isn't lost across
   the animated gap between the trigger and the dropped panel. */
.mega-drop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
}
.submeny:hover > .mega-drop,
.submeny:focus-within > .mega-drop,
.submeny.is-open > .mega-drop { transform: translateY(0) !important; }

.mega-drop__body {
    padding: 32px 0 24px;
    background: #fff;
    /* Cap the panel height to the viewport so it can never be cut off
       below the fold - if content is taller than the available space,
       it becomes internally scrollable instead of hiding items. */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(11,29,58,.25) transparent;
}
.mega-drop__body::-webkit-scrollbar { width: 8px; }
.mega-drop__body::-webkit-scrollbar-track { background: transparent; }
.mega-drop__body::-webkit-scrollbar-thumb {
    background: rgba(11,29,58,.18);
    border-radius: 8px;
}
.mega-drop__body::-webkit-scrollbar-thumb:hover { background: rgba(200,16,46,.4); }

.mega-drop__inner {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.mega-col {
    padding: 0 24px;
    border-right: 1px solid rgba(11,29,58,.07);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; padding-right: 0; }

.mega-col__head {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Outfit', sans-serif; font-size: .68rem;
    font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--navy); margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 2px solid rgba(200,16,46,.14);
}
.mega-col__icon {
    width: 26px; height: 26px;
    background: rgba(200,16,46,.1); border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--red); flex-shrink: 0;
}

.mega-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: 10px;
    transition: all var(--trans); margin-bottom: 2px;
    border: 1px solid transparent; text-decoration: none;
}
.mega-link:hover {
    background: rgba(200,16,46,.05);
    border-color: rgba(200,16,46,.14);
    transform: translateX(3px);
}
.mega-link__icon {
    width: 32px; height: 32px; flex-shrink: 0;
    background: rgba(11,29,58,.05); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; color: var(--slate-dark);
    transition: all var(--trans);
}
.mega-link:hover .mega-link__icon {
    background: rgba(200,16,46,.12); color: var(--red);
}
.mega-link__text b {
    display: block; font-size: .81rem; font-weight: 600;
    color: var(--navy); line-height: 1.2; transition: color var(--trans);
}
.mega-link:hover .mega-link__text b { color: var(--red); }
.mega-link__text small {
    display: block; font-size: .69rem; color: #6B7280;
    line-height: 1.3; margin-top: 1px;
}
.mega-link__badge {
    font-size: .58rem; font-weight: 700;
    background: var(--red); color: #fff;
    padding: 2px 7px; border-radius: 20px;
    letter-spacing: .06em; flex-shrink: 0;
    text-transform: uppercase;
}

.mega-link--featured {
    background: linear-gradient(135deg, rgba(200,16,46,.08), rgba(232,25,47,.03));
    border-color: rgba(200,16,46,.2);
}
.mega-link--featured .mega-link__icon {
    background: rgba(200,16,46,.15); color: var(--red);
}
.mega-link--featured .mega-link__text b { color: var(--red); }
.mega-link--featured:hover {
    background: linear-gradient(135deg, rgba(200,16,46,.13), rgba(232,25,47,.07));
    border-color: var(--red);
}

.mega-divider { height: 1px; background: rgba(11,29,58,.08); margin: 12px 0 10px; }

/* Expert CTA card */
.mega-cta-card {
    margin-top: 18px;
    background: linear-gradient(145deg, var(--navy), #1a2d50);
    border-radius: 14px; padding: 18px 14px; text-align: center;
}
.mega-cta-card__icon {
    width: 42px; height: 42px;
    background: rgba(200,16,46,.3); border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; font-size: 1rem; color: #fff;
}
.mega-cta-card__text {
    font-size: .76rem; color: rgba(255,255,255,.72);
    line-height: 1.45; margin-bottom: 12px;
}
.mega-cta-card__btn {
    display: block; background: var(--red); color: #fff !important;
    font-size: .77rem; font-weight: 700;
    padding: 9px 14px; border-radius: 8px;
    transition: all var(--trans); text-align: center;
}
.mega-cta-card__btn:hover {
    background: var(--red-bright);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(200,16,46,.45);
}

/* Mega footer bar */
.mega-drop__footer {
    border-top: 1px solid rgba(11,29,58,.08);
    background: rgba(11,29,58,.02);
}
.mega-drop__footer-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 13px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.mega-view-all {
    display: flex; align-items: center; gap: 8px;
    font-size: .81rem; font-weight: 700; color: var(--navy);
    transition: all var(--trans);
}
.mega-view-all .fa-arrow-right { transition: transform var(--trans); }
.mega-view-all:hover { color: var(--red); }
.mega-view-all:hover .fa-arrow-right { transform: translateX(4px); }
.mega-stats { display: flex; gap: 20px; }
.mega-stats span {
    font-size: .73rem; color: #6B7280;
    display: flex; align-items: center; gap: 5px;
}
.mega-stats i { color: var(--red); font-size: .68rem; }

@media (max-width: 1100px) { .mega-drop { display: none !important; } }

/* ═══════════════════════════════════════════════
   MOBILE NAVIGATION
═══════════════════════════════════════════════ */
.navbar__hamburger {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 10px 8px; border: none;
    background: transparent; z-index: 1002;
}
.navbar__hamburger span {
    display: block; width: 24px; height: 2px;
    background: var(--navy); border-radius: 2px;
    transition: all var(--trans-bounce); transform-origin: center;
}
.navbar__hamburger--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger--active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-in panel */
.mobile-nav {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff; z-index: 998;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden;
    transform: translateX(100%);
    transition: opacity .28s ease, visibility .28s ease, transform .32s cubic-bezier(.4,0,.2,1);
}
.mobile-nav--open { opacity: 1; visibility: visible; transform: translateX(0); }

/* Top bar with logo + close */
.mobile-nav__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px; height: 62px; flex-shrink: 0;
    border-bottom: 1px solid rgba(11,29,58,.09);
}
.mobile-nav__bar-logo img { height: 40px; width: auto; }
.mobile-nav__close {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(11,29,58,.12); background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem; color: var(--navy);
    transition: all var(--trans);
}
.mobile-nav__close:hover { background: rgba(200,16,46,.07); border-color: rgba(200,16,46,.2); color: var(--red); }

/* Scrollable body */
.mobile-nav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* Top-level row (Home, Clients, Contact) */
.mobile-nav__row {
    display: flex; align-items: center; gap: 12px;
    padding: 0 18px; height: 54px;
    font-size: .95rem; font-weight: 600; color: var(--navy);
    border-bottom: 1px solid rgba(11,29,58,.07);
    text-decoration: none; cursor: pointer;
    transition: background var(--trans), color var(--trans);
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav__row:hover, .mobile-nav__row:active { color: var(--red); background: rgba(200,16,46,.04); }
.mobile-nav__row .row-icon {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
    background: rgba(11,29,58,.05);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; color: var(--slate-dark); transition: all var(--trans);
}
.mobile-nav__row:hover .row-icon, .mobile-nav__row--open .row-icon { background: rgba(200,16,46,.1); color: var(--red); }
.mobile-nav__row .row-label { flex: 1; }
.mobile-nav__row .row-chevron { font-size: .7rem; color: var(--slate); transition: transform var(--trans); }
.mobile-nav__row--open { color: var(--red); background: rgba(200,16,46,.04); }
.mobile-nav__row--open .row-chevron { transform: rotate(180deg); color: var(--red); }

/* Accordion panel */
.mobile-accord {
    overflow: hidden; max-height: 0;
    transition: max-height .38s cubic-bezier(.4,0,.2,1);
    background: #fafbfd;
    border-bottom: 1px solid rgba(11,29,58,.07);
}
.mobile-accord--open { max-height: 2000px; }

/* Category label inside accordion */
.mobile-cat {
    display: flex; align-items: center; gap: 7px;
    padding: 14px 18px 7px;
    font-family: 'Outfit', sans-serif; font-size: .63rem;
    font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--red);
}
.mobile-cat + .mobile-cat { padding-top: 10px; }

/* Product / section link inside accordion */
.mobile-prod {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px 9px 26px;
    font-size: .875rem; font-weight: 500; color: var(--navy);
    text-decoration: none; border-left: 3px solid transparent;
    transition: all var(--trans); -webkit-tap-highlight-color: transparent;
}
.mobile-prod:hover, .mobile-prod:active {
    color: var(--red); border-left-color: var(--red);
    background: rgba(200,16,46,.04); padding-left: 30px;
}
.mobile-prod > i {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
    background: rgba(11,29,58,.05);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; color: var(--slate-dark); transition: all var(--trans);
}
.mobile-prod:hover > i, .mobile-prod:active > i { background: rgba(200,16,46,.1); color: var(--red); }
.mobile-prod__label { flex: 1; }
.mobile-prod__badge {
    font-size: .57rem; font-weight: 700; background: var(--red);
    color: #fff; padding: 2px 7px; border-radius: 10px;
    letter-spacing: .05em; flex-shrink: 0;
}
.mobile-accord__pad { height: 10px; }

/* Footer CTA */
.mobile-nav__footer {
    flex-shrink: 0; padding: 14px 18px 20px;
    border-top: 1px solid rgba(11,29,58,.09);
}
.mobile-nav__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--red), var(--red-bright));
    color: #fff !important; font-weight: 700; font-size: .95rem;
    padding: 15px 24px; border-radius: 14px; width: 100%;
    box-shadow: 0 6px 24px rgba(200,16,46,.32);
    transition: all var(--trans); margin-bottom: 14px;
    text-decoration: none;
}
.mobile-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200,16,46,.42); }
.mobile-nav__contact {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .8rem; color: #6B7280;
}
.mobile-nav__contact i { color: var(--red); }
.mobile-nav__contact a { color: var(--navy); font-weight: 600; }

/* ═══════════════════════════════════════════════
   FLOATING ACTION STACK
   One shared system for WhatsApp, Chat and Back-to-top,
   so spacing / sizing / z-index all stay consistent and the
   intermittently-visible button (Back-to-top) sits at the far
   end of the stack instead of leaving a gap in the middle.
   Order bottom → top: WhatsApp, Chat, Back-to-top.
═══════════════════════════════════════════════ */
:root {
    --fab-right: 26px;
    --fab-gap: 14px;
    --fab-base: 26px;      /* distance of the bottom-most button from the viewport edge */
}

.floating-whatsapp, .floating-chat, .back-to-top {
    position: fixed;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--trans-bounce), opacity .22s ease;
    z-index: 997;
}

/* Slot 0 - WhatsApp (bottom-most, primary contact channel) */
.floating-whatsapp {
    bottom: var(--fab-base); right: var(--fab-right);
    width: 56px; height: 56px;
    background: #25d366;
    box-shadow: 0 8px 25px rgba(37,211,102,.4);
}
.floating-whatsapp img { width: 27px; height: 27px; }
/* "Live" pulsing ring, matching the reference site's WhatsApp icon */
.floating-whatsapp::before {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid rgba(37,211,102,.55);
    animation: fabPulse 2.4s ease-out infinite;
    pointer-events: none;
}
.floating-whatsapp:hover { transform: scale(1.08) translateY(-3px); }
@keyframes fabPulse {
    0%   { transform: scale(.85); opacity: .9; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { opacity: 0; }
}

/* Slot 1 - Chat assistant */
.floating-chat {
    bottom: calc(var(--fab-base) + 56px + var(--fab-gap)); right: var(--fab-right);
    width: 56px; height: 56px; border: none;
    background: linear-gradient(135deg, var(--red), var(--red-bright));
    box-shadow: 0 8px 25px var(--red-glow);
    color: #fff; font-size: 22px; z-index: 999;
}
.floating-chat:hover { transform: scale(1.08) translateY(-3px); }
.floating-chat #chatIconClose { display: none; }
.floating-chat.is-open #chatIconOpen { display: none; }
.floating-chat.is-open #chatIconClose { display: block; }
/* "Live" pulsing ring around the chat button, same language as WhatsApp's,
   so it visibly reads as an always-on assistant rather than a static icon. */
.floating-chat::before {
    content: ""; position: absolute; inset: -6px;
    border-radius: 50%; border: 2px solid var(--red-glow);
    animation: fabPulse 2.4s ease-out infinite; animation-delay: 1.2s;
    pointer-events: none;
}
.floating-chat.is-open::before { display: none; }
.floating-chat__badge {
    position: absolute; top: -3px; right: -3px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #25d366; border: 2px solid #fff;
}
.floating-chat__badge::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; background: #25d366;
    animation: fabDotPulse 1.8s ease-out infinite;
}
@keyframes fabDotPulse {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Slot 2 - Back-to-top (top of the stack; only shown after scrolling,
   so its intermittent visibility never leaves a hole between the
   other, always-visible buttons). Solid navy for contrast on any
   background it happens to float over. */
.back-to-top {
    bottom: calc(var(--fab-base) + 2 * (56px + var(--fab-gap))); right: calc(var(--fab-right) + 6px);
    width: 44px; height: 44px;
    background: var(--navy);
    color: #fff; font-size: 15px;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 4px 16px rgba(11,29,58,.35);
    opacity: 0; visibility: hidden;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--red); box-shadow: 0 6px 20px var(--red-glow); }

/* While the chat panel is open, fade out the other floating buttons
   so the panel never visually collides with them and the corner
   doesn't feel cluttered. They reappear the moment chat is closed. */
.fab-aux.fab-hidden {
    opacity: 0; pointer-events: none; transform: scale(.85);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .navbar__nav { display: none; }
    .navbar__hamburger { display: flex; }
    body { padding-top: 64px; }
    .navbar { height: 64px; }
    .navbar__inner { height: 64px; }
    .navbar__logo img { height: 58px; }
}

@media (max-width: 768px) {
    .navbar__inner { padding: 0 16px; }
    :root {
        --fab-right: 18px;
        --fab-gap: 12px;
        --fab-base: 20px;
    }
    .floating-whatsapp { width: 50px; height: 50px; }
    .floating-whatsapp img { width: 24px; height: 24px; }
    .floating-chat {
        bottom: calc(var(--fab-base) + 50px + var(--fab-gap));
        width: 50px; height: 50px; font-size: 20px;
    }
    .back-to-top {
        bottom: calc(var(--fab-base) + 50px + 50px + 2 * var(--fab-gap));
        right: calc(var(--fab-right) + 6px);
        width: 38px; height: 38px; font-size: 13px;
    }
}

@media (max-width: 480px) {
    .navbar__logo img { height: 36px; }
    .navbar { height: 56px; }
    .navbar__inner { height: 56px; }
    body { padding-top: 56px; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.navbar { animation: fadeInDown .6s ease-out; }

/* ═══════════════════════════════════════════════
   CHATBOT PANEL
   Anchored to the chat button's own slot rather than a fixed
   pixel offset, and height-clamped to the viewport, so it can
   never get clipped at the top on shorter screens.
═══════════════════════════════════════════════ */
.chatbot-panel {
    position: fixed;
    bottom: calc(var(--fab-base) + 56px + var(--fab-gap) + 56px + 12px);
    right: var(--fab-right);
    width: 360px; max-width: calc(100vw - 32px);
    height: clamp(320px, 62vh, 520px);
    background: #fff; border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(11,29,58,.28), 0 4px 16px rgba(11,29,58,.1);
    z-index: 1000; overflow: hidden;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(16px) scale(.97);
    transform-origin: bottom right;
    transition: all var(--trans-bounce);
}
.chatbot-panel.is-open {
    opacity: 1; visibility: visible; pointer-events: all;
    transform: translateY(0) scale(1);
}

.chatbot-panel__header {
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    padding: 14px 16px; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
}
.chatbot-panel__title { display: flex; align-items: center; gap: 10px; }
.chatbot-panel__title img {
    width: 34px; height: 34px; border-radius: 9px; background: #fff;
    padding: 4px; object-fit: contain;
}
.chatbot-panel__title b { display: block; color: #fff; font-size: .88rem; font-family: 'Outfit', sans-serif; }
.chatbot-panel__title span {
    display: flex; align-items: center; gap: 5px;
    font-size: .68rem; color: rgba(255,255,255,.65);
}
.chatbot-panel__title span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #25d366; display: inline-block;
}
.chatbot-panel__close {
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--trans); flex-shrink: 0; font-size: .8rem;
}
.chatbot-panel__close:hover { background: rgba(255,255,255,.2); }

.chatbot-panel__messages {
    flex: 1; overflow-y: auto; padding: 16px; scroll-behavior: smooth;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--off-white);
}
.chat-msg { display: flex; max-width: 86%; }
.chat-msg--bot { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; }
.chat-msg__bubble {
    padding: 9px 13px; border-radius: 14px; font-size: .82rem; line-height: 1.45;
}
.chat-msg--bot .chat-msg__bubble {
    background: #fff; color: var(--navy);
    border: 1px solid rgba(11,29,58,.08);
    border-bottom-left-radius: 4px;
}
.chat-msg--user .chat-msg__bubble {
    background: linear-gradient(135deg, var(--red), var(--red-bright));
    color: #fff; border-bottom-right-radius: 4px;
}

.chatbot-panel__quick {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 16px; flex-shrink: 0; background: #fff;
    border-top: 1px solid rgba(11,29,58,.08);
}
.chat-chip {
    border: 1px solid rgba(200,16,46,.25); background: #fff;
    color: var(--red); font-size: .74rem; font-weight: 600;
    padding: 6px 12px; border-radius: 20px; cursor: pointer;
    transition: all var(--trans); white-space: nowrap;
}
.chat-chip:hover { background: rgba(200,16,46,.08); transform: translateY(-1px); }
.chat-chip--action {
    background: var(--navy); color: #fff; border-color: var(--navy);
    display: flex; align-items: center; gap: 6px;
}
.chat-chip--action:hover { background: var(--red); border-color: var(--red); }
.chat-chip:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.chat-inline-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-self: flex-start; max-width: 100%;
}

@media (max-width: 768px) {
    .chatbot-panel {
        bottom: 0; right: 0; left: 0; top: 0;
        width: 100%; max-width: 100%; height: 100%; max-height: 100%;
        border-radius: 0; transform: translateY(12px);
    }
    .chatbot-panel.is-open { transform: translateY(0); }
}