/* ============================================================================
   MB INŽENJERING — ZAJEDNIČKI STILOVI (Nivo 1)
   Ovaj fajl se linkuje na SVIM stranicama. Menja se na JEDNOM mestu.

   Sadržaj:
     1) TOKENI (dizajn-agnostički sloj — jedino mesto za brend boje)
     2) BASE + A11Y
     3) HEADER (sticky, top-bar, navigacija, dugmad, burger)
     4) MOBILNI MENI
     5) FOOTER
     6) POMOĆNE KLASE (utilities)
     7) PRIVREMENA KOMPATIBILNOST (staro označavanje — briše se po završetku migracije)
     8) PREFERS-REDUCED-MOTION

   NAPOMENA: stilovi specifični za pojedinačnu stranicu (lightbox, timeline,
   tabovi, FAQ, forma) stoje inline u toj stranici, u njenom style bloku
   označenom komentarom PAGE SPECIFIC.
   ============================================================================ */


/* ============================================================
   1) TOKENI — jedino mesto za brend boje
   Brend boje su izvučene iz logotipa (logo.jfif):
     plava #1F74B7 · narandža #F4802A · siva #9A9B9F
   Pravila: 0 gradijenata, 0 senki, ivice 2px.
   Narandža je NAMENJENA samo punim plohama (uz crn tekst) —
   narandžasti TEKST na belom je --c-accent (#B85C10).
   ============================================================ */
:root {
    /* Brend */
    --c-primary:          #1f74b7;
    --c-primary-hover:    #1a6199;
    --c-primary-ink:      #1a6199;
    --c-on-primary:       #ffffff;
    --c-accent:           #b85c10;
    --c-action:           #f4802a;
    --c-action-hover:     #e06f18;
    --c-on-action:        #15181d;

    /* Površine */
    --c-surface:          #ffffff;
    --c-surface-alt:      #dfe4ea;
    --c-surface-raised:   #ffffff;
    --c-surface-card:     #ffffff;
    --c-surface-dark:     #15181d;

    /* Tekst */
    --c-text:             #23262b;
    --c-text-muted:       #62666d;
    --c-text-invert:      #f4f6f8;
    --c-text-invert-muted:#a7adb6;

    /* Linije */
    --c-border:           #dde1e6;
    --c-border-dark:      #2b3037;
    --c-hairline:         rgba(31, 116, 183, .16);
    --c-focus:            #1f74b7;
    --c-success:          #1f7a4d;
    --c-error:            #c0392b;

    /* Geometrija — ravne plohe, zaobljena dugmad */
    --radius-sm:   8px;
    --radius-btn:  8px;
    --radius-card: 2px;
    --radius-pill: 9999px;

    /* Senke — flat */
    --shadow-card:       none;
    --shadow-card-hover: none;
    --shadow-header:     0 1px 0 rgba(21, 24, 29, .06);

    /* Ritam */
    --header-h:          76px;
    --header-h-scrolled: 60px;
    --space-section:     5rem;
    --transition-fast:   .2s ease;
    --transition-base:   .3s ease;

    /* Tipografija */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Archivo', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ============================================================
   2) BASE + A11Y
   ============================================================ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
    font-family: var(--font-sans);
    color: var(--c-text);
    background-color: var(--c-surface);
}

:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--c-surface);
    color: var(--c-text);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    left: 0;
}

/* Scroll lock dok je mobilni meni otvoren */
body.menu-open {
    overflow: hidden;
}


/* ============================================================
   3) HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    transition: box-shadow var(--transition-base),
                background-color var(--transition-base);
}
.site-header.scrolled,
.site-header.is-scrolled {
    box-shadow: var(--shadow-header);
    background-color: var(--c-surface);
}

/* Top-bar: vidljiv samo na većim ekranima, nestaje pri skrolovanju */
.topbar {
    border-bottom: 1px solid var(--c-border);
    background-color: var(--c-surface-alt);
    transition: max-height var(--transition-base), opacity var(--transition-fast);
    max-height: 44px;
    opacity: 1;
    overflow: hidden;
}
.site-header.is-scrolled .topbar,
.site-header.scrolled .topbar {
    max-height: 0;
    opacity: 0;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--c-text-muted);
    font-size: .8125rem;
}
.topbar-item:hover {
    color: var(--c-text);
}

/* Glavni red */
.header-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding var(--transition-base);
}
.site-header.is-scrolled .header-row,
.site-header.scrolled .header-row {
    padding-top: .625rem;
    padding-bottom: .625rem;
}

/* Logo */
.logo-mark {
    width: 64px;
    height: 64px;
    flex: none;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: transparent;
    transition: width var(--transition-base), height var(--transition-base);
}
.logo-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Logo — CEO lockup kao jedna slika (zupčanik + ime firme).
   Visina je izabrana tako da i linija „MAŠINSKA OBRADA“ bude čitljiva
   (u izvornom logotipu je ta linija visoka 64 px od 1080 px). */
.site-logo {
    display: block;
    height: 120px;
    width: auto;
    flex: none;
    transition: height var(--transition-base);
}
.site-header.is-scrolled .site-logo,
.site-header.scrolled .site-logo { height: 96px; }

/* Tamne plohe (futer, mobilni meni) — svetla verzija istog logotipa */
.site-logo--footer { height: 96px; }
.site-logo--menu { height: 72px; }

@media (max-width: 639px) {
    .site-logo { height: 88px; }
    .site-logo--footer { height: 80px; }
    .site-logo--menu { height: 64px; }
}
.site-header.is-scrolled .logo-mark,
.site-header.scrolled .logo-mark {
    width: 52px;
    height: 52px;
}

/* Desktop navigacija */
.nav-link {
    position: relative;
    color: var(--c-text-muted);
    font-weight: 500;
    padding: .25rem 0;
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.nav-link:hover {
    color: var(--c-text);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background-color: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}
.nav-link:hover::after {
    transform: scaleX(1);
}
.nav-link.active {
    color: var(--c-text);
    font-weight: 700;
}
.nav-link.active::after {
    transform: scaleX(1);
}

/* Dugmad */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
    cursor: pointer;
}
.btn-primary {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
    padding: .625rem 1.25rem;
}
.btn-primary:hover {
    background-color: var(--c-primary-hover);
}
.btn-outline {
    border: 1px solid var(--c-border);
    color: var(--c-text);
    padding: .5rem 1rem;
}
.btn-outline:hover {
    background-color: var(--c-surface-alt);
}

/* --- CTA „Kontakt i ponuda": ista veličina na svim mestima --- */
a[href="kontakt.html"]:not(.footer-link):not(.nav-link):not(.mobile-nav-link):not(.cta-desktop):not(.skip-link):not(.link-arrow):not(.extra-card-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 240px;
    width: auto;
    height: 50px;
    padding: 0 1.5rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.cta-desktop {
    min-width: 240px;
    height: 50px;
    padding: 0 1.5rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

/* Burger */
.burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--c-text);
    background: transparent;
    border: 1px solid transparent;
}
.burger-btn:hover {
    background-color: var(--c-surface-alt);
    border-color: var(--c-border);
}

/* Vidljivost: desktop nav vs burger */
.nav-desktop { display: flex; }
.cta-desktop { display: inline-flex; }

@media (max-width: 1023px) {
    .nav-desktop { display: none; }
    .cta-desktop { display: none; }
    .burger-btn { display: inline-flex; }
    .topbar { display: none; }
}


/* ============================================================
   4) MOBILNI MENI
   ============================================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mobile-menu.is-open,
.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(88%, 380px);
    background-color: var(--c-surface-dark);
    color: var(--c-text-invert);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel,
.mobile-menu.open .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text-invert);
    border-bottom: 1px solid var(--c-border-dark);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.mobile-nav-link:hover {
    color: var(--c-text-invert);
    padding-left: .5rem;
}
.mobile-nav-link.active {
    color: var(--c-text-invert);
}
.mobile-nav-link.active::before {
    content: "";
    width: 3px;
    height: 20px;
    background-color: var(--c-on-primary);
    margin-right: -3px;
}
.mobile-nav-link i {
    color: var(--c-text-invert-muted);
}

.mobile-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    color: var(--c-text-invert-muted);
}


/* ============================================================
   5) FOOTER
   ============================================================ */
.site-footer {
    background-color: var(--c-surface-dark);
    color: var(--c-text-invert);
}
.footer-col-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-invert-muted);
    margin-bottom: 1rem;
}
.footer-link {
    display: inline-block;
    font-size: .875rem;
    color: var(--c-text-invert-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-link:hover {
    color: var(--c-text-invert);
    transform: translateX(3px);
}
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-dark);
    color: var(--c-text-invert-muted);
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
}
.footer-social:hover {
    color: var(--c-text-invert);
    border-color: var(--c-text-invert-muted);
    background-color: rgba(255, 255, 255, .06);
}
.footer-hours {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--c-text-invert-muted);
    padding: .3125rem 0;
}
.footer-hours span:last-child {
    color: var(--c-text-invert);
    white-space: nowrap;
}


/* ============================================================
   6) POMOĆNE KLASE (utilities)
   ============================================================ */
.smooth-transition {
    transition: all var(--transition-base);
}

.hover-scale {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-scale:hover {
    transform: translateY(-8px);
}

/* Nazad na vrh */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--c-primary);
    color: var(--c-on-primary);
    box-shadow: var(--shadow-card-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                transform var(--transition-base);
}
.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Standardna kartica */
.card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
}


/* ============================================================
   7) PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   8) DIZAJN — BREnd SLOJ (plava · narandža · siva, ravno)
   Redosled: tipografija → brend linija → heder → dugmad →
             hero → traka sa brojkama → sekcije → kartice → trake
   ============================================================ */

/* --- Tipografija --- */
h1, h2, h3, h4,
.hero-title, .section-title {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

/* --- Brend linija: plava | narandža (dve pune boje, bez prelaza) --- */
.brand-rule { display: flex; }
.brand-rule span { height: 3px; }
.brand-rule span:first-child { width: 56%; background-color: var(--c-primary); }
.brand-rule span:last-child { flex: 1 1 auto; background-color: var(--c-action); }

/* --- Heder --- */
.site-header { border-bottom: 0; overflow-anchor: none; }
.topbar {
    background-color: var(--c-surface-dark);
    border-bottom-color: transparent;
}
.topbar-item { color: var(--c-text-invert-muted); }
.topbar-item:hover { color: var(--c-text-invert); }
.nav-link.active { color: var(--c-primary-ink); }
.header-row { padding-top: .5rem; padding-bottom: .5rem; }
/* Pri skrolovanju se skupljaju SAMO top-bar i logo — padding ostaje isti
   (ranije je rastao na .625rem, pa je heder pri skrolu bio viši!) */
.site-header.is-scrolled .header-row,
.site-header.scrolled .header-row { padding-top: .5rem; padding-bottom: .5rem; }

/* --- Dugmad --- */
.btn { border-radius: var(--radius-btn); font-weight: 600; }

/* I dugmad koja su u markapu označena Tailwind klasama (rounded-lg/md/xl)
   — zaobljena su isto, dok kartice (`div.rounded-lg`) ostaju ravne */
a.rounded-lg, button.rounded-lg,
a.rounded-md, button.rounded-md,
a.rounded-xl, button.rounded-xl {
    border-radius: var(--radius-btn);
}

/* Meni velikim slovima */
.nav-link,
.mobile-nav-link {
    text-transform: uppercase;
    letter-spacing: .05em;
}
.nav-link { font-size: .8125rem; font-weight: 600; }
.btn-primary { background-color: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background-color: var(--c-primary-hover); }
.btn-action {
    background-color: var(--c-action);
    color: var(--c-on-action);
    padding: .625rem 1.25rem;
}
.btn-action:hover { background-color: var(--c-action-hover); }
.btn-outline {
    border: 1px solid var(--c-primary-ink);
    color: var(--c-primary-ink);
    padding: .5rem 1rem;
}
.btn-outline:hover { background-color: rgba(31, 116, 183, .07); }
.btn-ghost {
    border: 1px solid rgba(255, 255, 255, .6);
    color: #ffffff;
    padding: .5rem 1rem;
}
.btn-ghost:hover { background-color: rgba(255, 255, 255, .14); }
.hero-btn { height: 50px; padding: 0 1.5rem; }

/* --- HERO (puna brend plava; sav tekst beo) --- */
.hero {
    position: relative;
    background-color: var(--c-primary);
    color: #ffffff;
}
.hero-grid {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 1rem 0;
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #ffffff;
    margin-bottom: 1.25rem;
}
.hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background-color: var(--c-action);
}
.hero-title {
    font-size: clamp(2.15rem, 4.4vw, 3.5rem);
    line-height: 1.06;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.5rem;
    max-width: 24ch;
}
.hero-title .hl {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--c-action);
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}
.hero-lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #ffffff;
    max-width: 36rem;
    margin-bottom: 2rem;
}
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.hero-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: #ffffff;
}
.hero-note i { color: #ffffff; flex: none; }
/* Na plavoj plohi outline dugme je belo */
.hero .btn-outline {
    border-color: rgba(255, 255, 255, .7);
    color: #ffffff;
}
.hero .btn-outline:hover { background-color: rgba(255, 255, 255, .14); }

.hero-visual { position: relative; }
.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .35);
}
.hero-float {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    background-color: var(--c-action);
    color: var(--c-on-action);
    padding: .875rem 1.25rem;
    border-radius: var(--radius-btn);
}
.hero-float-value {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}
.hero-float-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
}

/* --- Traka sa brojkama (tamnija nijansa plave, puna širina) --- */
.hero-facts {
    margin-top: 3.5rem;
    background-color: var(--c-primary-hover);
}
.hero-stats {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;
    list-style: none;
}
.hero-stats li {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.hero-stat-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}
.hero-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffffff;
}

/* --- Traka sa ključnim podacima --- */
.trust-strip {
    background-color: var(--c-surface-alt);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.trust-grid { display: grid; grid-template-columns: 1fr; list-style: none; }
.trust-grid li {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--c-border);
}
.trust-grid li:last-child { border-bottom: 0; }
.trust-grid i { color: var(--c-primary-ink); }
.trust-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
}
.trust-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-text-muted);
}

/* --- Sekcije --- */
.section-head { max-width: 52rem; margin-bottom: 3rem; }

/* Plavi natpisi („eyebrow") na svetlim/sivim plohama — tamnija plava radi AA */
body [class*="eyebrow"]:not(.hero-eyebrow):not([class*="cta__eyebrow"]) { color: var(--c-primary-ink); }
/* Izuzeci: eyebrow na TAMNIM panelima (svetla plava) i u plavom heroju (belo) */
body [class*="cta__eyebrow"] { color: #7fb4dd; }

/* Na plavoj CTA traci sav tekst je beo (uključujući Tailwind `text-blue-100`) */
.band-cta p, .band-cta h2, .band-cta h3, .band-cta li {
    color: #ffffff;
}
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-primary-ink);
    margin-bottom: .875rem;
}
.section-kicker::before {
    content: "";
    width: 24px;
    height: 2px;
    background-color: var(--c-action);
}
.section-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--c-text);
    margin-bottom: .875rem;
}
.section-sub {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--c-text-muted);
}

/* --- Kartice (ravne, bez senki) --- */
.card-flat {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.card-flat:hover {
    border-color: var(--c-primary);
    box-shadow: inset 0 3px 0 var(--c-primary);
}
.card-kicker {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-primary-ink);
    margin-bottom: .5rem;
}
.icon-square {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-surface-alt);
    color: var(--c-primary-ink);
    border-radius: var(--radius-btn);
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--c-primary-ink);
}
.link-arrow:hover { color: #144c78; }

/* --- Trake --- */
.band-dark { background-color: var(--c-surface-dark); color: var(--c-text-invert); }
.band-dark .section-kicker { color: #7fb4dd; }
.panel-dark { background-color: var(--c-surface-dark); color: var(--c-text-invert); }
.panel-dark p { color: var(--c-text-invert-muted); }
.panel-dark h3 { color: #ffffff; }
.band-cta { background-color: var(--c-primary); color: #ffffff; }
.band-cta .section-kicker { color: #ffffff; }
.band-cta .section-title,
.band-cta .section-sub { color: #ffffff; }

/* --- Responsive --- */
@media (min-width: 640px) {
    .hero-actions { flex-direction: row; flex-wrap: wrap; }
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-grid li {
        padding: 1.75rem 1.5rem;
        border-bottom: 0;
        border-left: 1px solid var(--c-border);
    }
    .trust-grid li:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 768px) {
    .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-stats li {
        border-bottom: 0;
        border-left: 1px solid rgba(255, 255, 255, .22);
        padding: 1.5rem;
    }
    .hero-stats li:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; padding-top: 4.5rem; }
    .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}