/* ==========================================================================
   COLORPOP — vivid accent layer, loaded after effects.css.
   The client asked for a more colorful site with effects on every home-page
   item. An 8-colour accent wheel cycles across any .rainbow-grid row: each
   card gets its own hue for the icon tile, top bar, glow, link and hover.
   Everything animates transform/opacity only; reduced-motion kills it all.
   ========================================================================== */

:root {
    --pop-1: #2563EB;   /* royal blue   */
    --pop-2: #0D9488;   /* teal         */
    --pop-3: #7C3AED;   /* violet       */
    --pop-4: #EA580C;   /* orange       */
    --pop-5: #0891B2;   /* cyan         */
    --pop-6: #DB2777;   /* magenta      */
    --pop-7: #9333EA;   /* purple       */
    --pop-8: #16A34A;   /* green        */
}

/* hand each direct column its accent, cycling every 8 */
.rainbow-grid > *:nth-child(8n + 1) { --acc: var(--pop-1); }
.rainbow-grid > *:nth-child(8n + 2) { --acc: var(--pop-2); }
.rainbow-grid > *:nth-child(8n + 3) { --acc: var(--pop-3); }
.rainbow-grid > *:nth-child(8n + 4) { --acc: var(--pop-4); }
.rainbow-grid > *:nth-child(8n + 5) { --acc: var(--pop-5); }
.rainbow-grid > *:nth-child(8n + 6) { --acc: var(--pop-6); }
.rainbow-grid > *:nth-child(8n + 7) { --acc: var(--pop-7); }
.rainbow-grid > *:nth-child(8n + 8) { --acc: var(--pop-8); }

/* ---------- cards: coloured icon tile, top bar, glow, link ---------------- */
.rainbow-grid .feature-icon {
    background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 62%, #0E2C48));
    color: #fff;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--acc) 70%, transparent);
    transition: transform .25s ease, box-shadow .25s ease;
}
.rainbow-grid .feature-icon.gold {
    background: linear-gradient(140deg, #F59E0B, #D97706);
    color: #fff;
}

.rainbow-grid .service-card,
.rainbow-grid .feature-card,
.rainbow-grid .hero-card.h-100 {
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* accent top bar that stretches on hover */
.rainbow-grid .service-card::after,
.rainbow-grid .feature-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 42px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, transparent));
    transition: width .3s ease;
}
.rainbow-grid .service-card:hover::after,
.rainbow-grid .feature-card:hover::after { width: 100%; }

/* soft tinted wash + coloured lift */
.rainbow-grid .service-card:hover,
.rainbow-grid .feature-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--acc) 55%, transparent);
    box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--acc) 55%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--acc) 6%, #fff), #fff 46%);
}
.section-dark .rainbow-grid .feature-card:hover {
    background: rgba(255, 255, 255, .10);
}

/* the icon jumps and tilts with its card */
.rainbow-grid .service-card:hover .feature-icon,
.rainbow-grid .feature-card:hover .feature-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--acc) 80%, transparent);
}

/* link + arrow pick up the accent */
.rainbow-grid .service-card .more { color: var(--acc); }
.rainbow-grid .service-card .more .bi { transition: transform .22s ease; }
.rainbow-grid .service-card:hover .more .bi { transform: translateX(5px); }
.rainbow-grid .badge-soft {
    background: color-mix(in srgb, var(--acc) 14%, #fff);
    color: color-mix(in srgb, var(--acc) 80%, #000);
}

/* ---------- trust strip: gradient numbers, one hue each ------------------- */
.trust-strip .rainbow-grid .stat { transition: transform .22s ease; }
.trust-strip .rainbow-grid .stat:hover { transform: translateY(-3px) scale(1.03); }
.trust-strip .rainbow-grid .stat-num {
    background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #0E2C48));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not (background-clip: text) {
    .trust-strip .rainbow-grid .stat-num { color: var(--acc); background: none; }
}
/* a little coloured tick under each value */
.trust-strip .rainbow-grid .stat-num::after {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin: .45rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 35%, transparent));
}

/* ---------- process steps: vivid numbers with a pulse ring ---------------- */
.rainbow-grid .process-step .step-num,
.rainbow-grid.process-row > * .step-num {
    background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #0E2C48));
    color: #fff;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--acc) 75%, transparent);
    position: relative;
}
.rainbow-grid .process-step:hover .step-num::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 2px solid color-mix(in srgb, var(--acc) 45%, transparent);
    animation: pop-ring 1s ease-out infinite;
}
@keyframes pop-ring {
    from { transform: scale(.82); opacity: 1; }
    to   { transform: scale(1.18); opacity: 0; }
}

/* ---------- hero: warmer light + gradient CTA + badge shimmer ------------- */
.hero .aurora::after {
    content: "";
    position: absolute;
    width: 46%; height: 46%;
    right: -6%; bottom: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .30), transparent 65%);
    filter: blur(80px);
    animation: pop-drift 22s ease-in-out infinite alternate;
}
@keyframes pop-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-8%, -10%, 0) scale(1.15); }
}
.hero .btn-gold {
    background: linear-gradient(115deg, #16A34A, #0D9488 55%, #2563EB 130%);
    background-size: 190% 100%;
    border: 0;
    transition: background-position .45s ease, transform .18s ease, box-shadow .18s ease;
}
.hero .btn-gold:hover {
    background-position: 92% 0;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -14px rgba(13, 148, 136, .8);
}
.hero-badge {
    animation: pop-badge-glow 3.2s ease-in-out infinite;
}
@keyframes pop-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(69, 168, 69, 0); }
    50%      { box-shadow: 0 0 22px 2px rgba(69, 168, 69, .35); }
}

/* ---------- arc mark draws itself when its section reveals ---------------- */
.is-revealed .arc-mark path,
.arc-mark.is-revealed path {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: pop-arc .9s ease-out .15s forwards;
}
@keyframes pop-arc { to { stroke-dashoffset: 0; } }

/* ---------- photos: gentle zoom; carrier tiles: coloured ring ------------- */
.photo-figure img { transition: transform .6s ease; }
.photo-figure:hover img { transform: scale(1.04); }
.carrier-tile:hover {
    border-color: color-mix(in srgb, var(--pop-1) 55%, transparent);
    box-shadow: 0 16px 32px -18px rgba(37, 99, 235, .5);
}

/* ---------- section eyebrows pick up colour ------------------------------- */
.section-head .eyebrow {
    background: linear-gradient(96deg, var(--ais-blue-mid, #4080C0), var(--ais-green, #309030));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not (background-clip: text) {
    .section-head .eyebrow { color: var(--ais-blue-mid, #4080C0); background: none; }
}

/* ---------- restraint switch ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero .aurora::after,
    .hero-badge,
    .rainbow-grid .process-step:hover .step-num::before,
    .is-revealed .arc-mark path,
    .arc-mark.is-revealed path { animation: none !important; }
    .rainbow-grid .service-card:hover,
    .rainbow-grid .feature-card:hover,
    .trust-strip .rainbow-grid .stat:hover,
    .photo-figure:hover img { transform: none; }
    .is-revealed .arc-mark path { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ---------- compliance tiles on the dark band ----------------------------- */
.section-dark .rainbow-grid .hero-card {
    border-left: 3px solid var(--acc);
    transition: transform .22s ease, box-shadow .22s ease;
}
.section-dark .rainbow-grid .hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--acc) 60%, transparent);
}
.section-dark .rainbow-grid .col .hero-card .text-teal {
    color: color-mix(in srgb, var(--acc) 55%, #fff);
}

/* ---------- carrier logos: full colour at rest ----------------------------- */
/* The muted-until-hover treatment read as "dull" - marks now show in their
   real brand colours all the time, with a lift + ring on hover instead. */
.carrier-logo,
.carrier-tile:hover .carrier-logo,
.marquee .carrier-logo { filter: none; opacity: 1; }
.carrier-tile:hover { transform: translateY(-3px); }

/* ---------- hero-card tooltips -------------------------------------------- */
.check-list .has-tip { cursor: help; position: relative; border-radius: 6px; }
.check-list .has-tip:hover,
.check-list .has-tip:focus-visible { background: rgba(37, 99, 235, .07); }
.check-list .has-tip:focus-visible { outline: 2px solid var(--pop-1); outline-offset: 2px; }
.check-list .tip-ico {
    font-size: .78rem;
    color: var(--pop-1);
    opacity: .55;
    margin-left: .25rem;
    transition: opacity .15s ease, transform .15s ease;
}
.check-list .has-tip:hover .tip-ico { opacity: 1; transform: scale(1.15); }

/* brand the Bootstrap tooltip itself */
.tooltip .tooltip-inner {
    background: #0E2C48;
    color: #fff;
    font-size: .82rem;
    line-height: 1.45;
    padding: .55rem .75rem;
    max-width: 270px;
    border-radius: 8px;
    box-shadow: 0 14px 30px -12px rgba(14, 44, 72, .6);
    border-left: 3px solid var(--pop-8);
    text-align: left;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #0E2C48; }
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #0E2C48; }
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #0E2C48; }
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #0E2C48; }

/* ==========================================================================
   Headings - colour pass. Section headings run from ink into the brand
   blue/teal so every heading finishes in colour; dark bands get the light
   variant; card titles adopt their card's accent on hover.
   ========================================================================== */

/* section headings on light grounds */
.section-head h2,
.section h2:not(.section-dark h2),
main > .section h2 {
    background: linear-gradient(94deg, #1B2430 0%, #1B2430 42%, #2563EB 74%, #0D9488 104%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* gradient underline swash beneath the main section headings */
.section-head h2 {
    display: inline-block;
    padding-bottom: .35rem;
    position: relative;
}
.section-head h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 4px;
    width: 64px;
    border-radius: 4px;
    background: linear-gradient(90deg, #2563EB, #0D9488 55%, #16A34A);
    transition: width .45s ease;
}
.section-head.center h2::after { left: 50%; transform: translateX(-50%); }
.section-head:hover h2::after,
.is-revealed .section-head h2::after,
.section-head[data-reveal].is-revealed h2::after { width: 100%; max-width: 190px; }

/* dark bands: white resolving into light blue / light green */
.section-dark h2,
.section-dark .section-head h2,
.cta-band h2 {
    background: linear-gradient(94deg, #FFFFFF 0%, #FFFFFF 40%, #8FC1EA 72%, #A7E0A7 104%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* inner-page hero titles (quote, carriers, services, about...) */
.page-hero h1 {
    background: linear-gradient(94deg, #FFFFFF 0%, #FFFFFF 32%, #9CC8EE 66%, #A7E0A7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* card titles adopt their accent on hover */
.rainbow-grid .service-card:hover h3,
.rainbow-grid .feature-card:hover h3 { color: var(--acc); transition: color .18s ease; }

/* h3s outside accent grids get a subtle ink-to-blue finish */
.section-tint h3,
.section h3 { transition: color .18s ease; }

/* graceful fallback when text clipping is unsupported */
@supports not (background-clip: text) {
    .section-head h2, .section h2 { color: #1B2430; background: none; }
    .section-dark h2, .cta-band h2, .page-hero h1 { color: #fff; background: none; }
}

/* ---------- developer credit ---------------------------------------------- */
.footer-bottom .dev-credit { color: rgba(255,255,255,.55); font-size: .875rem; }
.footer-bottom .dev-credit a {
    color: #A7E0A7;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(90deg, #8FC1EA, #A7E0A7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.footer-bottom .dev-credit a:hover { text-decoration: underline; text-decoration-color: #A7E0A7; }

/* ==========================================================================
   Legal pages (privacy / terms / accessibility) - modern document styling.
   Content is never reveal-gated, so these pages can never render blank.
   ========================================================================== */
.legal-copy { counter-reset: legal; font-size: 1.02rem; }
.section div.legal-copy h2 {
    counter-increment: legal;
    position: relative;
    margin-top: 2.6rem;
    padding: .6rem 1rem .6rem 3.4rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(37, 99, 235, .08), rgba(13, 148, 136, .04) 70%, transparent);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #16233B;
}
.section div.legal-copy h2::before {
    content: counter(legal, decimal-leading-zero);
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ais-font-head, Archivo, sans-serif);
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(120deg, #2563EB, #0D9488);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.legal-copy p, .legal-copy li { color: #3B4757; }
.legal-copy strong { color: #16233B; }
.legal-copy ul li::marker { color: #0D9488; }
.legal-copy a { color: #2563EB; text-underline-offset: 3px; }

/* the on-this-page card: sticky, chip links */
.legal-copy ~ *,
.section .card.bg-teal-soft { border: 0; }
.section .col-lg-3 .card.bg-teal-soft {
    position: sticky;
    top: 92px;
    background: linear-gradient(165deg, #EFF6FF, #ECFDF5);
    box-shadow: 0 16px 36px -22px rgba(14, 44, 72, .35);
    border-radius: 16px;
}
.section .col-lg-3 .card.bg-teal-soft .card-body a {
    display: block;
    padding: .42rem .7rem;
    margin-bottom: 2px;
    border-radius: 8px;
    color: #2A3B52;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.section .col-lg-3 .card.bg-teal-soft .card-body a:hover {
    background: rgba(37, 99, 235, .10);
    border-left-color: #2563EB;
    color: #1D4ED8;
    transform: translateX(3px);
}

/* ==========================================================================
   Card anatomy: icon and heading side by side, everywhere.
   Works structurally on every .service-card / .feature-card without touching
   each page: the icon and the h3 share the first row; every other child
   (copy, lists, links) spans the full width beneath them.
   ========================================================================== */





/* flagship badge floats to the card corner instead of crowding the title row */
.service-card .badge-soft {
    position: absolute;
    top: .9rem;
    right: .95rem;
    margin: 0 !important;
    flex-basis: auto;
}

/* hero checklist: detail text lives inline under each point (no tooltips) */
.check-list .li-title { display: block; font-weight: 600; color: #16233B; }
.check-list .li-sub {
    display: block;
    font-size: .82rem;
    line-height: 1.45;
    color: #52616F;
    margin-top: .1rem;
}
.check-list li + li { margin-top: .65rem; }

/* ---------- social icons (footer) - each in its brand colour --------------- */
.social-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.05rem;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.social-link:hover, .social-link:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5);
}
.social--facebook:hover  { background: #1877F2; }
.social--twitter:hover   { background: #111111; }
.social--linkedin:hover  { background: #0A66C2; }
.social--instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.social--youtube:hover   { background: #FF0000; }
.social--whatsapp:hover  { background: #25D366; }
@media (prefers-reduced-motion: reduce) { .social-link:hover { transform: none; } }

/* ==========================================================================
   Three-tier header: topbar / brand bar / gradient nav strip with mega menu.
   ========================================================================== */
.hdr3 { box-shadow: 0 6px 24px -18px rgba(14, 44, 72, .45); }
.hdr-brandbar { background: #fff; padding: .55rem 0; }

/* contact chips */
.hdr-chip { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.hdr-chip .chip-ico {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(140deg, #2563EB, #1D4ED8);
    box-shadow: 0 10px 20px -10px rgba(37, 99, 235, .7);
    transition: transform .18s ease;
}
.hdr-chip .chip-ico--green { background: linear-gradient(140deg, #16A34A, #0D9488); box-shadow: 0 10px 20px -10px rgba(22, 163, 74, .7); }
.hdr-chip:hover .chip-ico { transform: translateY(-2px) rotate(-5deg); }
.hdr-chip small { display: block; font-size: .72rem; color: #64748B; line-height: 1.1; }
.hdr-chip strong { font-family: var(--ais-font-head); font-size: .95rem; color: #16233B; }
.hdr-chip:hover strong { color: #2563EB; }
.hdr-cta { white-space: nowrap; }

/* gradient nav strip (sticky) */
.hdr-nav {
    position: sticky; top: 0; z-index: 1030;
    background: linear-gradient(94deg, #0E2C48 0%, #1D4ED8 70%, #0D9488 130%);
}
.hdr-nav .nav-link {
    color: rgba(255, 255, 255, .88);
    font-family: var(--ais-font-head);
    font-weight: 600;
    font-size: .95rem;
    padding: .9rem 1.05rem;
    position: relative;
}
.hdr-nav .nav-link:hover, .hdr-nav .nav-link:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.hdr-nav .nav-link.active { color: #fff; }
.hdr-nav .nav-link.active::after {
    content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: 6px;
    height: 3px; border-radius: 3px; background: linear-gradient(90deg, #4ADE80, #86EFAC);
}
.hdr-nav .nav-login { color: #A7E0A7; }
.site-header.is-scrolled .hdr-nav { box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }

/* mega menu panel */
.mega-panel {
    width: 100%; border: 0; border-radius: 0 0 18px 18px; margin-top: 0; padding: 1.4rem 0;
    box-shadow: 0 30px 60px -30px rgba(14, 44, 72, .55);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #2563EB, #0D9488, #16A34A) 1;
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding-right: 1.2rem; }
.mega-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .75rem; border-radius: 12px; text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}
.mega-link:hover, .mega-link.active { background: color-mix(in srgb, var(--acc, #2563EB) 9%, #fff); transform: translateX(3px); }
.mega-ico {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(140deg, var(--acc, #2563EB), color-mix(in srgb, var(--acc, #2563EB) 62%, #0E2C48));
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--acc, #2563EB) 70%, transparent);
}
.mega-txt strong { display: block; font-family: var(--ais-font-head); font-size: .92rem; color: #16233B; line-height: 1.2; }
.mega-link:hover .mega-txt strong { color: var(--acc, #2563EB); }
.mega-txt small { color: #64748B; font-size: .78rem; line-height: 1.25; }
.mega-all {
    grid-column: 1 / -1; margin-top: .4rem; padding: .65rem .75rem;
    font-family: var(--ais-font-head); font-weight: 600; font-size: .9rem;
    color: #2563EB; text-decoration: none; border-top: 1px dashed #DDE5EC;
}
.mega-all:hover { color: #1D4ED8; }
.mega-promo {
    background: linear-gradient(150deg, #0E2C48, #1D4ED8 90%);
    border-radius: 16px; color: rgba(255,255,255,.85); padding: 1.4rem;
    align-items: center;
}
/* desktop: open on hover as well as click */
@media (min-width: 992px) {
    .hdr-nav .dropdown:hover > .mega-panel { display: block; }
    .hdr-nav .dropdown:hover > .nav-link { color: #fff; background: rgba(255,255,255,.08); }
}
/* mobile: collapse panel becomes a simple tinted list */
@media (max-width: 991.98px) {
    .hdr-nav { position: static; }
    .mega-panel { box-shadow: none; border-radius: 12px; padding: .6rem; }
    .mega-grid { grid-template-columns: 1fr; padding-right: 0; }
    .hdr-nav .nav-link { padding: .7rem .5rem; }
}

/* ---------- topbar social icons ------------------------------------------- */
.tb-social {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 7px;
    color: rgba(255,255,255,.85); font-size: .8rem; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.tb-social:hover { color: #fff; transform: translateY(-1px); }
/* brand colours come from the shared .social--* hover rules */

/* ---------- floating "Get a Quote" tab (right edge) ------------------------ */
.quote-floater {
    position: fixed; right: 0; top: 50%; z-index: 1040;
    transform: rotate(180deg) translateY(50%);
    writing-mode: vertical-rl;
    display: flex; align-items: center; gap: .45rem;
    padding: 1rem .6rem;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, #16A34A, #0D9488 60%, #2563EB 140%);
    color: #fff; font-family: var(--ais-font-head); font-weight: 700; font-size: .9rem;
    letter-spacing: .04em; text-decoration: none;
    box-shadow: -8px 0 24px -10px rgba(13, 148, 136, .75);
    transition: padding .18s ease, filter .18s ease;
}
.quote-floater:hover, .quote-floater:focus-visible { color: #fff; padding-right: 1rem; filter: brightness(1.08); }
.quote-floater .bi { transform: rotate(90deg); }

/* ---------- whatsapp bubble (bottom-left) ---------------------------------- */
.wa-bubble {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(140deg, #25D366, #128C7E);
    color: #fff; font-size: 1.65rem; text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(18, 140, 126, .8);
    transition: transform .18s ease;
}
.wa-bubble:hover, .wa-bubble:focus-visible { color: #fff; transform: scale(1.1); }
.wa-bubble::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse {
    from { transform: scale(.85); opacity: 1; }
    to   { transform: scale(1.35); opacity: 0; }
}
@media (max-width: 575.98px) {
    .quote-floater { font-size: .8rem; padding: .8rem .5rem; }
    .wa-bubble { width: 50px; height: 50px; right: 14px; bottom: 16px; font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-bubble::before { animation: none; }
}
@media print { .quote-floater, .wa-bubble { display: none !important; } }

/* back-to-top stacks above the WhatsApp bubble on the right edge */
.back-to-top { bottom: 92px !important; right: 26px !important; }
@media (max-width: 575.98px) { .back-to-top { bottom: 78px !important; right: 18px !important; } }

/* ---------- hero: tighter, more decisive --------------------------------- */
.hero { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem); }
.hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.15rem); }
.hero .lead { font-size: clamp(.98rem, 1.2vw, 1.08rem); margin-bottom: 1.1rem !important; }
.hero-badge { margin-bottom: .75rem !important; }
.hero-card { padding: 1.35rem 1.4rem 1.5rem; }
.hero-card .h5 { margin-bottom: .75rem !important; }
.check-list li + li { margin-top: .45rem; }
.check-list .li-sub { font-size: .78rem; }
.hero-card .btn { padding: .55rem 1rem; }

/* ---------- mega panel: full-bleed positioning fix + small variant --------- */
.hdr-nav .dropdown.position-static > .mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(70vw, 1180px);
    border-radius: 0 0 18px 18px;
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .hdr-nav .dropdown.position-static > .mega-panel { width: 92vw; }
}
.hdr-nav .dropdown:not(.position-static) { position: relative; }
.mega-panel--sm {
    position: absolute; top: 100%; left: 0; right: auto;
    width: 340px; padding: .7rem;
    border-radius: 0 0 16px 16px;
    display: none;
}
.mega-panel--sm .mega-link { padding: .55rem .6rem; }
.mega-panel--sm .mega-all { border-top: 1px dashed #DDE5EC; margin-top: .35rem; padding: .55rem .6rem; display: block; }
@media (min-width: 992px) {
    .hdr-nav .dropdown:hover > .mega-panel--sm { display: block; }
}
@media (max-width: 991.98px) {
    .mega-panel--sm { position: static; width: 100%; box-shadow: none; border-radius: 12px; }
}

/* Cards that declared Bootstrap's flex-column keep icon-beside-heading too:
   force row (utility uses !important) so column-wrap can never spill sideways. */


/* icon-beside-heading, done structurally: markup wraps icon+title in .card-head */
.card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .7rem; }
.card-head .feature-icon { margin-bottom: 0 !important; flex: 0 0 auto; }
.card-head h3 { margin: 0; }

/* quote floater waits until the visitor scrolls past the hero */
.quote-floater { opacity: 0; transform: rotate(180deg) translateY(50%) translateX(-110%); pointer-events: none;
                 transition: opacity .3s ease, transform .3s ease; }
body.show-floater .quote-floater { opacity: 1; transform: rotate(180deg) translateY(50%) translateX(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .quote-floater { transition: none; } }

/* ==========================================================================
   Poppins pass - modern geometric headings + pill buttons + richer hero box.
   ========================================================================== */
:root { --ais-font-head: 'Poppins', 'Archivo', 'Helvetica Neue', Arial, sans-serif; }
h1, h2, h3, h4, h5, h6,
.hero h1, .navbar-nav .nav-link, .btn, .stat-num,
.mega-txt strong, .hdr-chip strong {
    font-family: var(--ais-font-head);
}
h1, .hero h1 { font-weight: 700; letter-spacing: -.02em; }

/* pill buttons across the public site */
.btn { border-radius: 999px; }
.btn-lg { padding: .8rem 1.7rem; }

/* the hero box, upgraded */
.hero-card {
    border-radius: 22px;
    background: linear-gradient(165deg, rgba(255,255,255,.99), rgba(240,247,255,.96));
    box-shadow: 0 30px 70px -30px rgba(4, 20, 40, .75), 0 0 0 1px rgba(255,255,255,.55);
}
.hero-card::before { height: 5px; border-radius: 22px 22px 0 0; }
.hero-card .h5 {
    font-family: var(--ais-font-head);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.01em;
    background: linear-gradient(94deg, #16233B 30%, #2563EB 75%, #0D9488 105%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.check-list .li-title { font-family: var(--ais-font-head); font-weight: 600; font-size: .93rem; }
.check-list li {
    position: relative;
    padding: .35rem .6rem .35rem 1.9rem;
    border-radius: 10px;
    transition: background-color .15s ease;
}
.check-list li::before { left: .5rem !important; top: .5rem !important; }
.check-list li:hover { background: rgba(37, 99, 235, .07); }
.hero-card .btn { font-weight: 600; }

/* soft dot texture over the hero so the navy has tactility */
.hero .container { position: relative; z-index: 1; }
.hero .dots {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.5), transparent 55%);
}

/* ==========================================================================
   Stylish fixed tooltips for the three floating controls.
   ========================================================================== */
[data-tip] { position: fixed; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: linear-gradient(140deg, #0E2C48, #14395C);
    border: 1px solid rgba(143, 193, 234, .4);
    color: #fff;
    font-family: var(--ais-font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .5rem .85rem;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 14px 30px -12px rgba(4, 20, 40, .8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
[data-tip]::before {
    content: "";
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(8px) rotate(45deg);
    width: 10px; height: 10px;
    background: #14395C;
    border-right: 1px solid rgba(143, 193, 234, .4);
    border-top: 1px solid rgba(143, 193, 234, .4);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotate(0deg);
}
[data-tip]:hover::before, [data-tip]:focus-visible::before {
    transform: translateY(-50%) translateX(0) rotate(45deg);
}

/* the rotated quote tab gets a sibling tip (rotation-proof) */
.qf-tip {
    position: fixed;
    right: 54px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    z-index: 1041;
    background: linear-gradient(140deg, #0E2C48, #14395C);
    border: 1px solid rgba(143, 193, 234, .4);
    color: #fff;
    font-family: var(--ais-font-head);
    font-size: .8rem;
    font-weight: 600;
    padding: .5rem .85rem;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 14px 30px -12px rgba(4, 20, 40, .8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.quote-floater:hover ~ .qf-tip,
.quote-floater:focus-visible ~ .qf-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
body:not(.show-floater) .qf-tip { display: none; }
@media (prefers-reduced-motion: reduce) {
    [data-tip]::after, [data-tip]::before, .qf-tip { transition: none; }
}

/* ---------- hero corner chips (overlapping mini stat cards) ---------------- */
.hero-card-wrap { position: relative; }
.hero-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid rgba(221, 229, 236, .9);
    border-radius: 14px;
    padding: .55rem .85rem;
    box-shadow: 0 18px 40px -16px rgba(4, 20, 40, .55);
    animation: chip-bob 5.5s ease-in-out infinite;
}
.hero-chip--tr { top: -20px; right: -18px; }
.hero-chip--bl { bottom: -18px; left: -20px; animation-delay: 2.7s; }
@keyframes chip-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.hero-chip .chip-tile {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; color: #fff; font-size: 1rem;
}
.chip-tile--gold  { background: linear-gradient(140deg, #F59E0B, #D97706); box-shadow: 0 8px 18px -8px rgba(217,119,6,.8); }
.chip-tile--green { background: linear-gradient(140deg, #22C55E, #0D9488); box-shadow: 0 8px 18px -8px rgba(13,148,136,.8); }
.hero-chip .chip-copy strong {
    display: block; font-family: var(--ais-font-head); font-weight: 700;
    font-size: 1.02rem; line-height: 1.05; color: #16233B;
}
.hero-chip .chip-copy small { font-size: .72rem; color: #64748B; line-height: 1; }
@media (max-width: 991.98px) {
    .hero-chip--tr { top: -14px; right: 2px; }
    .hero-chip--bl { bottom: -14px; left: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hero-chip { animation: none; } }

.hero-chip--bl { animation-name: chip-bob-sm; }
@keyframes chip-bob-sm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- mini bullet lists inside cards --------------------------------- */
.mini-points { list-style: none; margin: 0; padding: 0; }
.mini-points li {
    position: relative;
    padding: .28rem 0 .28rem 1.5rem;
    font-size: .92rem;
    color: #3B4757;
    line-height: 1.45;
}
.mini-points li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .3rem;
    font-size: .82rem;
    color: var(--acc, #0D9488);
}
.mini-points li + li { border-top: 1px dashed rgba(221, 229, 236, .8); }

/* structural guarantee: the page itself can never scroll sideways */
html { overflow-x: clip; }