/* SUDATURK — Gate 3A.3 Full Visual Implementation. Wave 0 foundations.
   Source of truth: the frozen prototype's own dark theme (see docs/FULL_VISUAL_IMPLEMENTATION_PLAN.md
   §2.1). Brand hex values are byte-identical to the existing site.css :root — no new brand colors,
   only new surface/dark-theme tokens and the components introduced in Wave 0. Full page-by-page
   retheme (applying these tokens everywhere) is Wave 1 scope; this file currently styles only the
   Wave 0 additions (header language dropdown, search overlay, BrandDevice, mobile drawer extras,
   4-column footer, RFQ badge) plus the Motion-level CSS driven by body[data-motion-level]. */

:root {
    /* Brand hex — identical to site.css, repeated here only as a single reference point for Wave 1 */
    --g3-red: #ec1c24;
    --g3-gold: #e1ba47;
    --g3-orange: #ea4a37;

    /* New dark-theme surface tokens (prototype visual language) */
    --g3-surface-0: #0b0b0c;   /* page background */
    --g3-surface-1: #141416;   /* card/panel background */
    --g3-surface-2: #1c1c1f;   /* raised panel / overlay background */
    --g3-border: rgba(225, 186, 71, .18);
    --g3-text: #f6f6f6;
    --g3-text-muted: #a8a8ad;
    --g3-radius: 10px;
}

/* ---- Header: language dropdown ---- */
.lang-switch { position: relative; }
.lang-switch-current {
    font: 700 13px/1 Inter, sans-serif; letter-spacing: .04em; color: inherit;
    background: transparent; border: 1px solid var(--g3-border); border-radius: 999px;
    padding: 8px 14px; cursor: pointer;
}
.lang-switch-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40;
    background: var(--g3-surface-2); border: 1px solid var(--g3-border); border-radius: var(--g3-radius);
    list-style: none; margin: 0; padding: 6px; min-width: 88px; box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.lang-switch-menu[hidden] { display: none; }
.lang-switch-menu li { margin: 0; }
.lang-switch-menu .lang-toggle {
    display: block; padding: 8px 10px; border-radius: 6px; text-align: center;
    font: 700 13px/1 Inter, sans-serif; color: var(--g3-text); text-decoration: none;
}
.lang-switch-menu .lang-toggle:hover { background: rgba(225, 186, 71, .12); }
.lang-switch-menu .lang-toggle.is-current { background: var(--g3-gold); color: #1a1a1a; }

/* ---- Header: RFQ badge (hidden while smart_rfq_enabled=0; styled for when it ships) ---- */
.rfq-badge {
    display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 Inter, sans-serif;
    letter-spacing: .04em; color: #fff; background: var(--g3-red); border-radius: 999px;
    padding: 8px 12px; text-decoration: none;
}
.rfq-badge span { background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 7px; }

/* ---- Header/mobile: search trigger + overlay ---- */
.header-search-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 999px; border: 1px solid var(--g3-border); background: transparent; color: inherit;
    cursor: pointer;
}
.header-search-toggle svg { width: 18px; height: 18px; }

/* Checkpoint 08R1 fix: at 390px the RFQ badge/lang-switch/search-toggle/menu-toggle had
   inconsistent, undersized tap targets (22-38px, some under the 40px minimum) and uneven
   vertical alignment (heights ranged 30-38px inside the same row). Deliberate mobile hierarchy:
   every .header-actions control gets the same ~40px min-height so the row reads as one
   consistent group instead of a crowded, uneven cluster. */
@media (max-width: 640px) {
    .header-actions {
        gap: 6px;
    }

    .lang-switch-current {
        min-width: 40px;
        min-height: 40px;
        padding: 8px 10px;
    }

    .rfq-badge {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 11px;
    }

    .header-search-toggle {
        width: 40px;
        height: 40px;
    }
}
.search-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(10,10,11,.86);
    display: flex; flex-direction: column; align-items: center; padding: 12vh 20px 20px;
}
.search-overlay[hidden] { display: none; }
.search-overlay-box {
    width: min(720px, 100%); display: flex; align-items: center; gap: 10px;
    background: var(--g3-surface-2); border: 1px solid var(--g3-border); border-radius: var(--g3-radius);
    padding: 14px 16px;
}
.search-overlay-input {
    flex: 1; background: transparent; border: none; outline: none; color: var(--g3-text);
    font: 500 16px/1.4 Inter, sans-serif;
}
.search-overlay-close {
    font: 700 11px/1 Inter, sans-serif; color: var(--g3-text-muted); background: transparent;
    border: 1px solid var(--g3-border); border-radius: 6px; padding: 6px 9px; cursor: pointer;
}
.search-overlay-results { width: min(720px, 100%); margin-top: 14px; color: var(--g3-text-muted); }

/* ---- Mobile drawer extras (search trigger + inline language links) ---- */
.mobile-nav-extra { display: none; }
@media (max-width: 768px) {
    .main-nav.open .mobile-nav-extra {
        display: flex; flex-direction: column; gap: 12px; margin-top: 16px;
        padding-top: 16px; border-top: 1px solid var(--g3-border);
    }
    .mobile-nav-search {
        text-align: start; background: rgba(255,255,255,.06); border: 1px solid var(--g3-border);
        border-radius: 999px; padding: 10px 16px; font: 700 14px/1 Inter, sans-serif; color: inherit;
        cursor: pointer;
    }
    .mobile-nav-langs { display: flex; gap: 8px; }
    .mobile-nav-langs .lang-toggle {
        flex: 1; text-align: center; padding: 8px 0; border-radius: 999px;
        border: 1px solid var(--g3-border); text-decoration: none; color: inherit;
        font: 700 13px/1 Inter, sans-serif;
    }
    .mobile-nav-langs .lang-toggle.is-current { background: var(--g3-gold); color: #1a1a1a; border-color: var(--g3-gold); }
}

/* ---- BrandDevice ----
   Must fill its parent (card/hero) so the JS geometry engine's el.clientWidth/clientHeight are
   real, non-zero numbers to compute the Head Safe Box against — without an explicit size here the
   element collapses to zero, the JS layout() guard bails out, and the image renders at its raw,
   unclamped natural size (a real bug caught by an actual visual test, not assumed away). The
   min-height fallback matches the prototype's own fieldStyle default for parents with no explicit
   height (auto-height contexts). */
.brand-device { position: relative; overflow: hidden; pointer-events: none; width: 100%; height: 100%; min-height: 120px; }
.brand-device img { display: block; user-select: none; }

/* ---- Home: Catalog Categories grid (prototype "categories" section, previously missing
   entirely from production per the parity report) ---- */
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .categories-grid { grid-template-columns: 1fr; } }
.category-card {
    position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; display: block;
    text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.category-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }
.category-card-watermark { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.category-card-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(12,11,10,.05), rgba(12,11,10,.8)); }
.category-card-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.category-card-title { font: 900 19px/1.15 Inter, sans-serif; color: #fff; margin: 0 0 5px; }
.category-card-meta { font: 600 11px/1.3 Inter, sans-serif; color: rgba(255,255,255,.72); }
/* Warm/cool gradient set matching the frozen prototype's category tiles, cycled by index */
.category-card[data-tone="0"] { background: linear-gradient(140deg, #3a2416, #7a3a1e); }
.category-card[data-tone="1"] { background: linear-gradient(140deg, #1c2430, #0f1620); }
.category-card[data-tone="2"] { background: linear-gradient(140deg, #2a1c12, #4a2f1a); }
.category-card[data-tone="3"] { background: linear-gradient(140deg, #141210, #241a14); }
.category-card[data-tone="4"] { background: linear-gradient(140deg, #12100e, #2a2416); }

/* ---- Home: Industries We Serve grid (design-parity R19 fix -- was a plain text-tag list with
   no cards/images/dark section, restoring the frozen prototype's dark graphite card-grid
   treatment). Reuses the .category-card visual language above (same gradient tones, same
   watermark/overlay/body layering) rather than inventing a second pattern. ---- */
.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr; } }
.industry-card {
    position: relative; min-height: 150px; border-radius: 16px; overflow: hidden; display: block;
    text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.industry-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.industry-card-watermark { position: absolute; inset: 0; opacity: .14; pointer-events: none; }
.industry-card-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(12,11,10,.1), rgba(12,11,10,.82)); }
.industry-card-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.industry-card-title { font: 800 15px/1.2 Inter, sans-serif; color: #fff; margin: 0; }
.industry-card[data-tone="0"] { background: linear-gradient(140deg, #1c2430, #0f1620); }
.industry-card[data-tone="1"] { background: linear-gradient(140deg, #3a2416, #7a3a1e); }
.industry-card[data-tone="2"] { background: linear-gradient(140deg, #141210, #241a14); }
.industry-card[data-tone="3"] { background: linear-gradient(140deg, #2a1c12, #4a2f1a); }
.industry-card[data-tone="4"] { background: linear-gradient(140deg, #12100e, #2a2416); }

/* ---- Home: closing CTA banner (design-parity R19) -- frozen prototype's full-width red banner
   before the footer, had no live equivalent at all. Reuses the same brand red token every other
   accent/CTA element on the site already reads. ---- */
.closing-cta {
    background: linear-gradient(120deg, var(--brand-red, var(--red)), #a8271f);
    padding: 48px 0;
    text-align: center;
}
.closing-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.closing-cta h2 { color: #fff; margin: 0; font-size: clamp(22px, 3vw, 32px); max-width: 720px; }
/* Design-parity R20: frozen prototype's closing CTA carries a one-line response-time subtext
   and a gold (not white) button -- both were missing from the initial R19 restoration. */
.closing-cta-subtext { color: rgba(255,255,255,.85); margin: 0 0 8px; font-size: 15px; }
.closing-cta-btn { margin-top: 4px; background: var(--gold, #e1ba47); color: #1a1a1a; border: none; font-weight: 700; }
.closing-cta-btn:hover { background: #cda23a; }

/* ---- Home: Featured Products cards (prototype "featured" section) — scoped to
   .featured-products so Catalog/Service Detail's own shared .product-card is untouched until
   their own Wave 1 retheme (they are separate, not-yet-started plan items). ---- */
.featured-products .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .featured-products .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .featured-products .product-grid { grid-template-columns: 1fr; } }
.featured-products .product-card {
    background: #fff; border: 1px solid #e2ded4; border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.featured-products .product-card:hover { transform: translateY(-3px); border-color: var(--g3-gold); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.featured-products .product-visual {
    height: 150px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #ecead9 0%, #cfc8b8 100%);
}
.featured-products .product-visual img { width: 100%; height: 100%; object-fit: cover; }
.featured-products .product-visual-watermark { position: absolute; inset: 0; opacity: .1; pointer-events: none; }
.featured-products .product-tag {
    position: absolute; top: 9px; inset-inline-start: 9px; font: 700 8px/1 ui-monospace, monospace;
    color: #6f6a5f; background: rgba(255,255,255,.72); padding: 4px 7px; border-radius: 5px; letter-spacing: .04em;
}
.featured-products .product-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.featured-products .product-meta { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 1px; color: #9a6a12; text-transform: uppercase; margin-bottom: 6px; }
.featured-products .product-body h3 { font: 800 15.5px/1.2 Inter, sans-serif; color: #1c1b1a; margin: 0 0 4px; }
.featured-products .product-body p { font: 500 11.5px/1.45 Inter, sans-serif; color: #6f6a5f; margin: 0 0 12px; flex: 1; }
.featured-products .product-actions { display: flex; gap: 8px; }

/* ---- Smart RFQ: basket item cards (kept behind smart_rfq_enabled=0 — visual rebuild only,
   backend add/remove/draft/submit logic is untouched) ---- */
.rfq-basket-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 700px) { .rfq-basket-grid { grid-template-columns: 1fr; } }
.rfq-basket-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-radius: var(--radius); background: #fff;
    border: 1px solid rgba(51,51,56,.08); box-shadow: 0 8px 22px rgba(51,51,56,.05);
}
.rfq-basket-item-main { display: flex; flex-direction: column; gap: 4px; }
.rfq-basket-item-badge {
    align-self: flex-start; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: var(--g3-gold); background: rgba(225,186,71,.12); border-radius: 999px; padding: 3px 9px;
}
.rfq-basket-item-main strong { color: var(--dark); font-size: 15px; }
.rfq-basket-item-qty { color: var(--gray); font-size: 13px; font-weight: 600; }
.rfq-basket-item-field { font-size: 12px; color: var(--gray); }
.rfq-basket-item-field small { font-weight: 700; color: var(--dark); }
.rfq-basket-item-remove {
    font: 700 12px/1 Inter, sans-serif; color: var(--red); background: transparent;
    border: 1px solid rgba(236,28,36,.28); border-radius: 999px; padding: 8px 14px; cursor: pointer;
    white-space: nowrap;
}
.rfq-basket-item-remove:hover { background: rgba(236,28,36,.06); }
.rfq-advanced { grid-column: 1 / -1; border-top: 1px solid rgba(51,51,56,.08); padding-top: 14px; margin-top: 4px; }
.rfq-advanced summary { cursor: pointer; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.rfq-advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
@media (max-width: 700px) { .rfq-advanced-fields { grid-template-columns: 1fr; } }
.rfq-status-section { display: flex; justify-content: center; }
.rfq-status-card { max-width: 560px; text-align: center; }
.rfq-status-card .btn { margin-top: 8px; }
.rfq-status-reference strong { color: var(--red); }
.rfq-status-link a { word-break: break-all; color: var(--red); font-weight: 700; }

/* ---- Footer: 4 columns + bottom row ---- */
.footer-grid-4 { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
@media (max-width: 900px) { .footer-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid-4 { grid-template-columns: 1fr; } }
.footer-bottom-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--g3-border);
}
.footer-policies { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-policies a { font-size: 13px; }
.footer-copyright { font-size: 13px; opacity: .75; margin: 0; }
.footer-bottom-langs { display: flex; gap: 8px; }
.footer-bottom-langs .lang-toggle {
    font: 700 12px/1 Inter, sans-serif; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--g3-border); text-decoration: none; color: inherit;
}
.footer-bottom-langs .lang-toggle.is-current { background: var(--g3-gold); color: #1a1a1a; border-color: var(--g3-gold); }

/* ---- Motion levels ----
   Off/Subtle/Standard control the .reveal rise distance and stagger amplitude. Reduced-motion
   always wins regardless of level — see the final media query below, matching the prototype's
   explicit "reduced-motion always wins" guardrail. */
body[data-motion-level="off"] .reveal { opacity: 1 !important; transform: none !important; }
/* Checkpoint 08R1 fix: gated behind .js-reveal-ready (see site.css) -- data-motion-level is
   server-rendered, so without this gate these applied opacity:0 before any JS ever ran. */
body.js-reveal-ready[data-motion-level="subtle"] .reveal { transform: translateY(12px); opacity: 0; transition: opacity .5s ease, transform .5s ease; }
body[data-motion-level="subtle"] .reveal.in-view { transform: translateY(0); opacity: 1; }
body.js-reveal-ready[data-motion-level="standard"] .reveal { transform: translateY(22px); opacity: 0; transition: opacity .6s ease, transform .6s ease; }
body[data-motion-level="standard"] .reveal.in-view { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Owner-flagged gap (2026-07-13 acceptance pass): the hero's decorative background
   .line/.node network (public/css/site.css, `flowLine`/`pulse` keyframes) ran forever
   regardless of the Motion level or the OS-level reduced-motion preference — it predates the
   Wave 0 Motion system and was never wired into it. Both must stop it, matching the same
   "reduced-motion always wins" guardrail already enforced for .reveal. */
body[data-motion-level="off"] .line,
body[data-motion-level="off"] .node { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .line, .node { animation: none !important; }
}

/* Per-section Motion & Animation matrix override (motion_section_settings.motion_enabled=false
   for a given section) — takes effect regardless of the global Motion level, matching the
   prototype's own per-section control intent. Owner-flagged gap (2026-07-13): the data model
   existed since Wave 0 but no template ever read it until this pass. */
.section-motion-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.section-motion-off .line,
.section-motion-off .node { animation: none !important; }

/* ---- BrandDevice — remaining public placements per plan §A14 (Service cards, Industries
   section, sourcing-process origin node, RFQ success state) — Category cards and Featured
   Products media were already wired in Wave 1; these close the rest of the required list. ---- */
.service-card { z-index: 0; }
.service-card-watermark { position: absolute; inset: 0; opacity: .05; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 0; }
.service-card > *:not(.service-card-watermark) { position: relative; z-index: 1; }

.section-watermark { position: absolute; inset: 0; opacity: .04; pointer-events: none; }

/* .timeline is display:grid with a fixed 7-column template (public/css/site.css) — the origin
   node is a direct child so it simply occupies one grid cell, matching the 6 timeline-step
   siblings (1 + 6 = 7) without touching the existing grid layout. */
.timeline-origin { position: relative; min-height: 150px; opacity: .5; }

.rfq-status-watermark { position: absolute; inset: 0; opacity: .05; pointer-events: none; overflow: hidden; border-radius: inherit; }
.rfq-status-card { position: relative; overflow: hidden; z-index: 0; }
.rfq-status-card > *:not(.rfq-status-watermark) { position: relative; z-index: 1; }

/* ---- Dark-section contrast fix (design-parity R21): a later, equal-specificity rule in site.css
   (".section h2 { color: var(--text-heading) }", added after ".graphite h2 { color: var(--white) }")
   was winning the cascade tie by source order, rendering Industries/Process/ELHAMEIDI titles at
   #333338 (near-black) on the graphite/dark background -- confirmed via getComputedStyle on the
   live page, not a visual guess. !important here guarantees this never regresses again regardless
   of future site.css edits/reordering. Kickers use the brand gold accent (not plain white) on dark
   sections for a readable but still on-brand eyebrow treatment. ---- */
.graphite h2,
.graphite .section-head h2 {
  color: #fff !important;
}
.graphite .section-kicker {
  color: var(--gold, #e1ba47) !important;
}
.graphite a:not(.btn) {
  color: var(--gold, #e1ba47);
}
.graphite a:not(.btn):focus-visible {
  outline-color: var(--gold, #e1ba47);
}

/* ---- ELHAMEIDI spotlight 2-column composition (design-parity R21) -- restores the frozen
   prototype's layout (text+link one side, company profile card the other), reusing the existing
   .split grid already used by the About section elsewhere on the site. ---- */
.spotlight-grid { align-items: start; }
.spotlight-intro { display: flex; flex-direction: column; gap: 14px; }
.spotlight-intro .section-kicker,
.spotlight-intro h2 { margin: 0; }
.spotlight-company-link { align-self: flex-start; margin-top: 6px; }
@media (max-width: 900px) { .spotlight-grid { grid-template-columns: 1fr; } }

/* ---- Compact prototype rhythm (design-parity R21): the frozen prototype is materially more
   compact than the live section spacing (96px vertical padding, 34px head margin) -- reduced
   toward the prototype's density without going pixel-identical. The existing 900px-breakpoint
   rule (78px/28px) is untouched; this only tightens the desktop baseline. ---- */
.section { padding: 72px 0; }
.section-head { margin-bottom: 24px; }
.hero { padding: 108px 0 56px; }

/* Header/logo proportions (design-parity R21): reduced toward the prototype (65px/83x30) from
   the live 86px/155x56, while staying well above the 44px minimum usable touch target. */
.site-header { min-height: 60px; padding: 8px 16px; }
.brand img { width: 112px; }

/* ---- Home Hero (design-parity R21): the frozen prototype's Hero is a dark graphite-to-brown
   gradient with a faint brand-device watermark, never a photograph. Scoped to
   .hero-prototype-graphite so an admin who genuinely uploads a custom hero image/video keeps
   that (existing functionality preserved) -- only the shipped default falls back to this. ---- */
.hero-prototype-graphite {
    background: linear-gradient(135deg, #1c1a18 0%, #2a2118 45%, #3a2416 100%);
}
.hero-graphite-watermark { position: absolute; inset: 0; opacity: .1; pointer-events: none; z-index: -3; }

/* ---- Home Hero value strip (design-parity R21): replaces the 3 numeric counters with the
   prototype's 4 qualitative values (Reliability/International reach/Full follow-up/Industrial
   focus). Light text on the Hero's own dark background/overlay, matching .stats-strip's contrast
   approach but a 4-column icon+title+description layout instead of a number+label pair. ---- */
.hero-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 900px; margin-top: 8px; }
.hero-value { display: flex; flex-direction: column; gap: 4px; }
.hero-value i { width: 20px; height: 20px; color: var(--gold, #e1ba47); margin-bottom: 2px; }
.hero-value strong { color: #fff; font: 800 14px/1.3 Inter, sans-serif; }
.hero-value span { color: rgba(255,255,255,.72); font: 500 12.5px/1.4 Inter, sans-serif; }
@media (max-width: 900px) { .hero-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero-values { grid-template-columns: 1fr; gap: 16px; } }