/**
 * Site-wide structural components: header, mega menu, mobile nav, search
 * overlay, footer, hero, CTA band, error pages, breadcrumb, sticky widget.
 * docs/design/13_Navigation.md, 14_Mega_Menu.md, 15_Header.md, 16_Footer.md,
 * 17_Homepage_UI.md, 26_Contact_UI.md, 28_Error_Pages.md.
 */

/* ---------- Top utility bar ----------
   Slim brand ribbon above the sticky header — tagline left, contact right.
   Scrolls away naturally (only .site-header is sticky), keeping the header
   compact once the visitor starts reading. */
.top-bar {
    background: var(--color-primary-900);
    color: var(--color-neutral-300);
    font-size: var(--text-body-sm);
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 38px;
    padding-block: var(--space-1);
}

.top-bar__tagline { margin: 0; font-size: inherit; line-height: 1.4; }

.top-bar__contact { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; }

.top-bar__contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-neutral-300);
    white-space: nowrap;
}

.top-bar__contact a:hover { color: var(--color-white); text-decoration: none; }

@media (max-width: 767px) {
    /* On phones the tagline yields to the two tappable contact links. */
    .top-bar__tagline { display: none; }
    .top-bar__inner { justify-content: center; }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    transition: background-color var(--duration-base) var(--ease-out),
                backdrop-filter var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: var(--space-6);
    transition: height var(--duration-base) var(--ease-out);
}

/* Shrink-on-scroll + glass morphism — toggled by assets/js/modules/navigation.js */
.site-header.is-scrolled {
    background: color-mix(in srgb, var(--color-white) 80%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
}

.site-header.is-scrolled .site-header__inner {
    height: 64px;
}

/* Transparent-on-hero variant — homepage only, before scroll */
.site-header--transparent:not(.is-scrolled) {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
}

.site-header--transparent:not(.is-scrolled) .primary-nav__link,
.site-header--transparent:not(.is-scrolled) .icon-button {
    color: var(--color-white);
}

.site-header--transparent:not(.is-scrolled) .btn--primary {
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none !important;
}

.site-header__logo-img {
    height: 52px;
    width: auto;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), height var(--duration-base) var(--ease-out);
}

/* Phone-width header: a smaller logo and tighter gaps make room for the
   compact Get Free Audit CTA + hamburger without clipping off-screen. */
@media (max-width: 479px) {
    .site-header__inner { gap: var(--space-3); }
    .site-header__logo-img { height: 38px; }
    .site-header__utility { gap: var(--space-1); }
    .site-header__utility .btn--primary { padding: 0 var(--space-3); height: 40px; }
}

.site-header.is-scrolled .site-header__logo-img {
    height: 42px;
}

/* Logo animation: swap light/dark mark as the header crosses from
   transparent-over-hero to solid/glass — docs brief's "logo animation". */
.site-header__logo-img--dark { display: none; }
.site-header--transparent:not(.is-scrolled) .site-header__logo-img--dark { display: none; }
.site-header--transparent:not(.is-scrolled) .site-header__logo-img--light { display: block; }
.site-header:not(.site-header--transparent) .site-header__logo-img--light,
.site-header.is-scrolled .site-header__logo-img--light { display: none; }
.site-header:not(.site-header--transparent) .site-header__logo-img--dark,
.site-header.is-scrolled .site-header__logo-img--dark { display: block; }

.site-header__logo:hover .site-header__logo-img {
    transform: scale(1.04);
}

.primary-nav__list {
    display: none;
    align-items: center;
    gap: var(--space-4);
}

/* Switches at 1280px, not 1024px: the full desktop nav (4 dropdown
   triggers + 5 links + logo + utility) needs more room than a 1024px
   "small laptop" viewport has to offer without cramming or wrapping —
   the polished mobile nav covers 1024–1279px instead. */
@media (min-width: 1280px) {
    .primary-nav__list { display: flex; }
}

@media (min-width: 1440px) {
    .primary-nav__list { gap: var(--space-6); }
}

/* No position:relative here — .mega-menu (position:absolute; left:0; right:0)
   must resolve against .site-header (position:sticky, the nearest positioned
   ancestor once this item isn't one), so the panel spans the full header
   width instead of collapsing to this <li>'s own content width. */
.primary-nav__item { position: static; flex-shrink: 0; }

.primary-nav__link {
    display: inline-block;
    font-weight: var(--weight-semibold);
    font-size: 1.0625rem;
    color: var(--color-neutral-900);
    padding: var(--space-2) 0;
    position: relative;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
    /* The animated ::before IS the underline — suppress the global a:hover
       text-decoration so plain <a> nav items (About, Blog, …) never show a
       second, doubled line under the animated one. */
    text-decoration: none !important;
}

/* ONE animated underline per nav item — ::before is the only underline
   element, shared by hover, .is-active, and open-menu states, so no state
   combination can ever render a second (doubled) line. It slides in on
   hover and stays fully drawn while active/open. */
.primary-nav__link::before {
    content: '';
    position: absolute;
    left: 0; right: 100%; bottom: -2px;
    height: 2px;
    background: var(--color-primary-600);
    transition: right var(--duration-fast) var(--ease-out);
}

.primary-nav__link:hover::before,
.primary-nav__link.is-active::before,
.primary-nav__trigger[aria-expanded="true"]::before { right: 0; }

.site-header--transparent:not(.is-scrolled) .primary-nav__link::before {
    background: var(--color-white);
}

/* A mega-menu trigger with its panel open ([aria-expanded="true"], set by
   megaMenu.js) gets identical treatment to .is-active — otherwise the
   trigger looks visually inert the moment the cursor leaves the button text
   for the open panel below it, even though that section is clearly the
   "current" nav context. Every one of the 9 primary-nav items — dropdown
   triggers and plain links alike — resolves through this one shared rule. */
.primary-nav__link.is-active,
.primary-nav__link:hover,
.primary-nav__trigger[aria-expanded="true"] {
    color: var(--color-primary-600);
}

.site-header--transparent:not(.is-scrolled) .primary-nav__link.is-active,
.site-header--transparent:not(.is-scrolled) .primary-nav__link:hover,
.site-header--transparent:not(.is-scrolled) .primary-nav__trigger[aria-expanded="true"] {
    color: var(--color-white);
}

.site-header__utility {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-2);
}

@media (min-width: 1440px) {
    .site-header__utility { gap: var(--space-3); }
}

/* Below the desktop nav breakpoint the WhatsApp button hides (the sticky
   bottom bar carries it), but the primary "Get Free Audit" CTA stays as a
   compact, thumb-friendly button beside the hamburger. */
.site-header__utility .btn { display: none; }

.site-header__utility .btn--primary {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    height: 42px;
    min-width: 0;
    padding: 0 var(--space-4);
    font-size: var(--text-body-sm);
}

@media (min-width: 1280px) {
    .site-header__utility .btn {
        display: inline-flex;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .site-header__utility .btn--primary {
        height: 48px;
        padding: 0 var(--space-6);
        font-size: 1.0625rem;
    }
}

/* The full 9-item nav + two CTAs get tight right at the 1280 breakpoint
   (the scrollbar leaves ~1265px usable). Hold the secondary WhatsApp button
   back until there's comfortable room — it remains on the floating widget
   and in the footer — so the header never overflows at laptop widths. */
@media (max-width: 1459px) {
    .site-header__utility .site-header__whatsapp { display: none; }
}

.mobile-nav-trigger {
    display: inline-flex;
}

@media (min-width: 1280px) {
    .mobile-nav-trigger { display: none; }
}

/* ---------- Mega Menu ---------- */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-mega-menu);
}

.mega-menu__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    gap: var(--space-12);
    padding-block: var(--space-10);
    justify-content: flex-start;
}

.mega-menu__heading {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-neutral-100);
}

.mega-menu__list li { margin-bottom: var(--space-1); }

.mega-menu__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    font-size: var(--text-body-sm);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    text-decoration: none;
}

.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-10);
}

.mega-menu__grid-item {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-neutral-700);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-regular);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.mega-menu__grid-item:hover,
.mega-menu__grid-item:focus-visible {
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
    text-decoration: none;
}

.mega-menu__view-all {
    display: block;
    margin: 0;
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-neutral-100);
}

/* ---------- Mobile Nav ---------- */
.mobile-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(100%, 360px);
    background: var(--color-white);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
}

.mobile-nav__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--color-neutral-200); }
.mobile-nav__logo img { height: 38px; width: auto; display: block; }
.mobile-nav__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.mobile-nav__footer { padding: var(--space-4); border-top: 1px solid var(--color-neutral-200); display: flex; flex-direction: column; gap: var(--space-3); }

.mobile-nav__accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-3) 0;
    font-weight: var(--weight-semibold);
    border-bottom: 1px solid var(--color-neutral-200);
}

.mobile-nav__group-label { font-size: var(--text-label); color: var(--color-neutral-500); margin: var(--space-3) 0 var(--space-1); }
.mobile-nav__accordion-panel li { padding: var(--space-2) 0; }
.mobile-nav__simple-links { margin-top: var(--space-4); }
.mobile-nav__simple-links li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-200); }

/* ---------- Search Overlay ---------- */
.search-overlay {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.search-overlay__form { display: flex; gap: var(--space-3); padding-block: var(--space-6); }
.search-overlay__input { flex: 1; height: 48px; padding: 0 var(--space-4); border: 1.5px solid var(--color-neutral-300); border-radius: var(--radius-md); }
.search-overlay__results { padding-bottom: var(--space-6); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-primary-900);
    color: var(--color-neutral-100);
    margin-top: var(--space-24);
}

.site-footer__top { padding-block: var(--space-16); display: flex; flex-direction: column; gap: var(--space-10); }

@media (min-width: 1024px) {
    .site-footer__top { flex-direction: row; justify-content: space-between; }
}

.site-footer__logo { display: inline-block; }
.site-footer__logo img { height: 50px; width: auto; }
.site-footer__tagline { max-width: 320px; color: var(--color-neutral-300); margin-top: var(--space-3); }

.site-footer__contact {
    list-style: none;
    padding: 0;
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 320px;
}

.site-footer__contact li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-neutral-300); }
.site-footer__contact a { color: var(--color-neutral-300); }
.site-footer__contact a:hover { color: var(--color-secondary-100); }
.site-footer__contact-icon { flex-shrink: 0; color: var(--color-secondary-100); margin-top: 2px; }

.site-footer__social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-primary-700);
    color: var(--color-neutral-100);
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.site-footer__social a:hover { background: var(--color-secondary-600); transform: translateY(-2px); }

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .site-footer__columns { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .site-footer__columns { grid-template-columns: repeat(6, 1fr); }
}

.site-footer__column h3 { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-300); margin-bottom: var(--space-3); }
.site-footer__column li { margin-bottom: var(--space-2); }
.site-footer__column a { color: var(--color-neutral-100); }
.site-footer__column a:hover { color: var(--color-secondary-100); }

.site-footer__cities,
.site-footer__tech {
    padding-block: var(--space-8);
    border-top: 1px solid var(--color-primary-700);
}

.site-footer__cities h3,
.site-footer__tech h3 {
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-300);
    margin-bottom: var(--space-3);
}

.site-footer__cities-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    font-size: var(--text-body-sm);
    color: var(--color-neutral-300);
}

.site-footer__cities-list a { color: var(--color-neutral-100); }
.site-footer__cities-list a:hover { color: var(--color-secondary-100); }

.site-footer__tech-list { font-size: var(--text-body-sm); color: var(--color-neutral-300); }

.site-footer__legal {
    border-top: 1px solid var(--color-primary-700);
    padding-block: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-caption);
    color: var(--color-neutral-300);
}

@media (min-width: 768px) {
    .site-footer__legal { flex-direction: row; justify-content: space-between; }
}

.site-footer__legal ul { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer__legal a { color: var(--color-neutral-300); }

/* ---------- Hero ----------
   Gradient wash + faint grid pattern + soft floating shapes, all CSS-only
   (no image assets). Pattern and shapes sit behind .hero__inner via
   negative z-index rather than pseudo-elements on .hero itself, so the
   overflow:hidden needed to clip the shapes never clips focus outlines on
   real content. */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--color-primary-900) 0%, var(--color-primary-600) 55%, var(--color-secondary-700) 100%);
    padding-block: var(--space-16);
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .hero { padding-block: var(--space-32); }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 90% 80% at 30% 20%, #000 40%, transparent 90%);
}

.hero__shape {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.35;
    background: radial-gradient(circle at 30% 30%, var(--color-info-600), transparent 70%);
}

.hero__shape--1 { width: 260px; height: 260px; top: -60px; right: 8%; }
.hero__shape--2 { width: 160px; height: 160px; bottom: -30px; right: 28%; background: radial-gradient(circle at 30% 30%, var(--color-accent-600), transparent 70%); opacity: 0.25; }
.hero__shape--3 { width: 120px; height: 120px; top: 30%; left: -20px; background: radial-gradient(circle at 30% 30%, var(--color-secondary-600), transparent 70%); }

@media (prefers-reduced-motion: no-preference) {
    .hero__shape--1 { animation: hero-float 7s ease-in-out infinite; }
    .hero__shape--2 { animation: hero-float 9s ease-in-out infinite reverse; }
    .hero__shape--3 { animation: hero-float 8s ease-in-out infinite; }
}

.hero__inner { position: relative; z-index: 1; max-width: 820px; }

/* Split hero — content left, floating product mockup right. Collapses to a
   single stacked column below the lg breakpoint (visual under the copy). */
.hero__grid { position: relative; z-index: 1; }

@media (min-width: 1024px) {
    .hero--split .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        align-items: center;
        gap: var(--space-16);
    }
    .hero--split .hero__inner { max-width: none; }
}

.hero__visual { position: relative; z-index: 1; margin-top: var(--space-10); }

@media (min-width: 1024px) {
    .hero__visual { margin-top: 0; justify-self: end; width: 100%; max-width: 480px; }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__visual .ui-mock { animation: hero-float 9s ease-in-out infinite; }
}

.hero__float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.hero__float-card strong { display: block; font-family: var(--font-heading); font-size: var(--text-h5); color: var(--color-neutral-900); line-height: 1; }
.hero__float-card span { font-size: var(--text-caption); color: var(--color-neutral-500); }
/* Specificity note: .hero__float-card span (below) targets the text label
   span too, and as a class+element selector it would otherwise beat this
   class-only rule's white icon color — scope to .hero__float-card to win. */
.hero__float-card .hero__float-icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-1); color: var(--color-white);
}
.hero__float-card .hero__float-icon--alt { background: var(--gradient-icon-4); }
.hero__float-card--1 { top: -18px; left: -22px; }
.hero__float-card--2 { bottom: -20px; right: -14px; }

@media (max-width: 479px) {
    .hero__float-card--1 { left: -6px; top: -14px; }
    .hero__float-card--2 { right: -4px; }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__float-card--1 { animation: hero-float 7s ease-in-out infinite reverse; }
    .hero__float-card--2 { animation: hero-float 8s ease-in-out infinite; }
}

.hero .eyebrow { color: var(--color-info-600); font-size: var(--text-body-sm); letter-spacing: 0.12em; margin-bottom: var(--space-4); }
.hero__headline { font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-5); color: var(--color-white); text-wrap: balance; }
.hero__subheadline { font-size: var(--text-subtitle); line-height: var(--leading-normal); max-width: 640px; margin-bottom: var(--space-8); color: rgba(255, 255, 255, 0.82); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }

.hero__trust-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.hero__trust-chip {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .hero__trust-chip:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); }
}

.hero__trust-chip strong { font-family: var(--font-heading); font-size: var(--text-h4); font-variant-numeric: tabular-nums; color: var(--color-white); }
.hero__trust-chip span { font-size: var(--text-caption); color: rgba(255, 255, 255, 0.75); }

/* ---------- CTA Band ---------- */
.cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-600) 55%, var(--color-secondary-700) 100%);
    color: var(--color-white);
    padding-block: var(--space-20);
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 90% at 70% 30%, #000 30%, transparent 80%);
}

.cta-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.cta-band h2 { color: var(--color-white); max-width: 720px; text-wrap: balance; }
.cta-band__subtitle { max-width: 560px; color: rgba(255, 255, 255, 0.82); font-size: var(--text-body-lg); margin-top: calc(var(--space-4) * -1); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

.section--newsletter__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .section--newsletter__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Technology Stack strip (Homepage Manager) ---------- */
.tech-stack-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-6);
}

.tech-stack-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: var(--color-neutral-500);
    font-weight: var(--weight-medium);
    filter: grayscale(1);
    opacity: 0.75;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.tech-stack-strip__item:hover { filter: none; opacity: 1; }
.tech-stack-strip__item img { max-height: 32px; width: auto; }

/* ---------- Statistics Showcase (docs/design/17_Homepage_UI.md §17.9) ----------
   Distinct from the pre-existing .stat-band in pages.css (an inline, bordered,
   2-3 numeral strip used on the Case Study detail page) — this is a full-bleed
   dark section for the homepage, different enough visually and structurally
   to warrant its own name rather than fighting that component's cascade. */
.stat-showcase {
    background: var(--color-primary-900);
    padding-block: var(--space-12);
}

.stat-showcase__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    text-align: center;
}

@media (min-width: 768px) {
    .stat-showcase__row { grid-template-columns: repeat(4, 1fr); }
}

.stat-showcase__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.stat-showcase__label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--color-neutral-300);
}

/* ---------- Process timeline (docs/design/17_Homepage_UI.md §17.7) ----------
   Centered steps with a connector line running exactly between icon centers.
   The rail uses zero flex gap (spacing comes from each step's own padding)
   so the ::after connector's percentage offsets — which are relative to the
   step's width — land precisely on the neighbouring icon's edge instead of
   overshooting. Mobile stacks vertically with a short centered connector. */
.process-rail {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-8);
}

@media (min-width: 1024px) {
    .process-rail {
        flex-direction: row;
        align-items: flex-start;
    }
}

.process-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-8);
}

@media (min-width: 1024px) {
    .process-step { padding-bottom: 0; }
}

.process-step .card__icon-tile {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--space-2);
}

.process-step__number {
    position: absolute;
    top: -8px;
    left: calc(50% + 14px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-white);
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    border: 2px solid var(--color-white);
}

/* Desktop connector: from this icon's right edge to the next icon's left
   edge (icon tile is 48px wide → half-width 24px + 4px breathing room). */
@media (min-width: 1024px) {
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 23px;
        left: calc(50% + 28px);
        right: calc(-50% + 28px);
        height: 2px;
        background: var(--color-neutral-200);
    }
}

/* Mobile connector: a short centered vertical line between stacked steps. */
@media (max-width: 1023px) {
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: var(--space-2);
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: var(--space-5);
        background: var(--color-neutral-200);
    }
}

.process-step__title { margin: 0; }
.process-step__description { margin: 0; color: var(--color-neutral-700); font-size: var(--text-body-sm); max-width: 220px; }

/* ---------- Trusted Clients (docs/design/17_Homepage_UI.md §17.11) ---------- */
.trusted-clients__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    margin-top: var(--space-6);
}

.trusted-clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    filter: grayscale(1);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);
}

.trusted-clients__item:hover { filter: none; opacity: 1; }
.trusted-clients__item img { max-height: 36px; width: auto; }

/* Client logo tiles — grayscale at rest, full color + lift on hover. When a
   real logo hasn't been uploaded yet, a branded monogram tile stands in. */
.client-logo-tile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    background: var(--color-white);
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .client-logo-tile:hover {
        filter: none;
        opacity: 1;
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }
}

.client-logo-tile__img { max-height: 32px; width: auto; }

.client-logo-tile__monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-3);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-body-md);
}

.client-logo-tile__name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    color: var(--color-neutral-700);
    white-space: nowrap;
}

/* ---------- Problems We Solve (split layout) ---------- */
.problems-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}

@media (min-width: 1024px) {
    .problems-split { grid-template-columns: 5fr 7fr; align-items: start; }
    .problems-split__intro { position: sticky; top: 120px; }
}

.problems-split__intro p { max-width: 440px; color: var(--color-neutral-700); margin-bottom: var(--space-8); }

.problems-split__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .problems-split__list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); }
}

.problem-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .problem-item:hover { background: var(--color-white); transform: translateX(4px); }
}

.problem-item__icon { width: 44px; height: 44px; flex-shrink: 0; margin: 0; }
.problem-item__title { font-size: var(--text-h5); margin: 0 0 var(--space-1); }
.problem-item__description { font-size: var(--text-body-sm); color: var(--color-neutral-700); margin: 0; }

/* Gradient cycling for the problem rows (mirrors the card-grid pattern). */
.problems-split__list > .problem-item:nth-child(4n+1) .card__icon-tile { background: var(--gradient-icon-1); }
.problems-split__list > .problem-item:nth-child(4n+2) .card__icon-tile { background: var(--gradient-icon-2); }
.problems-split__list > .problem-item:nth-child(4n+3) .card__icon-tile { background: var(--gradient-icon-3); }
.problems-split__list > .problem-item:nth-child(4n+4) .card__icon-tile { background: var(--gradient-icon-4); }

/* ---------- Trusted-by marquee wrapper ----------
   Wraps .trusted-clients__row and, when there are enough logos to make a
   continuous loop worthwhile, duplicates the row visually via animation
   rather than duplicating markup (keeps it screen-reader-sane — the CSS
   animation is purely decorative motion of one real list). */
.trusted-clients-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .trusted-clients-marquee.is-scrolling .trusted-clients__row {
        flex-wrap: nowrap;
        width: max-content;
        animation: trusted-marquee 28s linear infinite;
    }

    .trusted-clients-marquee.is-scrolling:hover .trusted-clients__row { animation-play-state: paused; }
}

/* ---------- Cities Served (homepage section) ---------- */
.cities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.city-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-900);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .city-pill:hover {
        text-decoration: none;
        transform: translateY(-2px);
        background: var(--color-primary-600);
        border-color: var(--color-primary-600);
        color: var(--color-white);
    }
}

/* ---------- Technology Stack icon-card showcase ---------- */
.tech-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-8);
}

@media (min-width: 640px) { .tech-icon-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tech-icon-grid { grid-template-columns: repeat(5, 1fr); } }

.tech-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.tech-icon-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-1);
    color: var(--color-white);
}

.tech-icon-card span { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-white); }

@media (hover: hover) {
    .tech-icon-card:hover {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.28);
    }
    .tech-icon-card:hover .tech-icon-card__icon { transform: scale(1.1) rotate(-4deg); }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-block: var(--space-6); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-neutral-500); }
.breadcrumb__item a {
    position: relative;
    color: var(--color-neutral-500);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb__home { display: inline-flex; align-items: center; }
.breadcrumb__separator { display: inline-flex; align-items: center; color: var(--color-neutral-300); }
.breadcrumb__current { color: var(--color-neutral-900); font-weight: var(--weight-semibold); }

@media (hover: hover) {
    .breadcrumb__item a:hover { color: var(--color-primary-600); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .breadcrumb__item a { transition: color var(--duration-fast) var(--ease-out), background-size var(--duration-base) var(--ease-out); }
    .breadcrumb__item a:hover { background-size: 100% 1px; }
}

/* ---------- Error Pages ---------- */
.error-page { padding-block: var(--space-24); text-align: center; }
.error-page__inner { max-width: 640px; margin-inline: auto; }
.error-page__code { font-family: var(--font-heading); font-size: var(--text-display-lg); color: var(--color-primary-600); font-weight: var(--weight-bold); }
.error-page__search { max-width: 480px; margin: var(--space-8) auto; }
.error-page__links { display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.error-page--minimal { padding-block: var(--space-16); }

/* ---------- Floating Contact Buttons ----------
   Desktop: circular WhatsApp/Call stack, bottom-right. Mobile: a sticky
   full-width bottom bar with labeled half-width buttons (thumb-reachable). */
.sticky-contact-widget {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-sticky-widget);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sticky-contact-widget__button {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-fast) var(--ease-out);
}

.sticky-contact-widget__button:hover { transform: translateY(-3px); color: var(--color-white); text-decoration: none; }
.sticky-contact-widget__button--whatsapp { background: var(--color-secondary-600); }
.sticky-contact-widget__button--call { background: var(--color-primary-600); }
.sticky-contact-widget__label { display: none; }

@media (max-width: 767px) {
    .sticky-contact-widget {
        right: 0;
        left: 0;
        bottom: 0;
        flex-direction: row;
        gap: 0;
    }

    .sticky-contact-widget__button {
        flex: 1;
        min-width: 0; /* flex min-content must never widen the bar past the viewport */
        width: auto;
        height: 54px;
        border-radius: 0;
        font-weight: var(--weight-semibold);
        font-size: var(--text-body-md);
        box-shadow: 0 -2px 8px rgba(18, 21, 28, 0.15);
    }

    .sticky-contact-widget__button:hover { transform: none; }
    .sticky-contact-widget__label { display: inline; }

    /* Keep the bottom bar from covering the footer's last line. */
    .site-footer { padding-bottom: 54px; }
}

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--success { background: var(--color-success-700); }
.toast--error { background: var(--color-danger-600); }
.toast--info { background: var(--color-info-600); }

/* ---------- Empty States ---------- */
.empty-state {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-neutral-700);
}

.empty-state h3 { margin-bottom: var(--space-2); color: var(--color-neutral-900); }
.empty-state p { margin-bottom: var(--space-6); }

.search-results-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-neutral-200);
}