/* ============================================================
   smazka.ru — Redesign Prototype v2
   ============================================================ */

/* ---- TOKENS ---- */
:root {
    /* Brand */
    --brand-primary: #DC2626;
    --brand-primary-hover: #B91C1C;
    --brand-primary-deep: #7F1D1D;
    --brand-primary-subtle: #FEE2E2;
    --brand-secondary: #F59E0B;
    --brand-secondary-subtle: #FEF3C7;

    /* Neutrals — cool industrial */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-150: #EAEFF5;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;
    --neutral-950: #060B18;

    /* Semantic */
    --success: #15803D;
    --success-subtle: #DCFCE7;
    --warning: #B45309;
    --warning-subtle: #FFF7E6;
    --danger: #B91C1C;
    --danger-subtle: #FEE2E2;
    --info: #1D4ED8;
    --info-subtle: #DBEAFE;

    /* Spacing 4px */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-14: 56px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(15,23,42,0.05);
    --sh-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --sh-md: 0 6px 16px -4px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.04);
    --sh-lg: 0 20px 40px -12px rgba(15,23,42,0.22);
    --sh-glow: 0 0 0 4px rgba(220,38,38,0.16);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --d-fast: 150ms;
    --d-base: 250ms;
    --d-slow: 400ms;

    /* Type */
    --font-ui: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, monospace;

    /* Layout */
    --container: 1280px;
    --container-wide: 1440px;
    --header-h: 76px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--neutral-800);
    background: var(--neutral-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-6);
}
.container--wide { max-width: var(--container-wide); }

/* ---- TYPE ---- */
.h-display {
    font-size: clamp(40px, 5.6vw, 68px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--neutral-900);
    margin: 0;
    text-wrap: balance;
}
.h-1 {
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--neutral-900);
    margin: 0 0 var(--s-4);
    text-wrap: balance;
}
.h-2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; color: var(--neutral-900); margin: 0 0 var(--s-3); }
.h-3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--neutral-900); margin: 0 0 var(--s-2); letter-spacing: -0.005em; }
.h-4 { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--neutral-900); margin: 0; }
.lead { font-size: 18px; line-height: 1.55; color: var(--neutral-600); margin: 0 0 var(--s-4); text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }
.caption { font-size: 12px; line-height: 1.4; color: var(--neutral-500); }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 var(--s-3);
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
}
.eyebrow--plain::before { display: none; }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 14px 22px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: all var(--d-fast) var(--ease);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-hover); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-secondary { background: #fff; color: var(--neutral-900); border-color: var(--neutral-200); }
.btn-secondary:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.btn-dark { background: var(--neutral-900); color: #fff; }
.btn-dark:hover { background: var(--neutral-800); }
.btn-ghost { background: transparent; color: var(--brand-primary); }
.btn-ghost:hover { background: var(--brand-primary-subtle); }
.btn-outline { background: transparent; color: var(--neutral-900); border-color: var(--neutral-300); }
.btn-outline:hover { border-color: var(--neutral-900); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.btn-outline-light:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.6); }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-sm { padding: 10px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---- HEADER ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--neutral-200);
}
.header__top {
    background: var(--neutral-950);
    color: rgba(255,255,255,0.72);
    font-size: 12.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}
.header__top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    gap: var(--s-6);
}
.header__top a { color: rgba(255,255,255,0.78); transition: color var(--d-fast) var(--ease); }
.header__top a:hover { color: #fff; }
.header__top-left { display: flex; gap: var(--s-5); align-items: center; }
.header__top-right { display: flex; gap: var(--s-5); align-items: center; }
.header__top-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-secondary); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    height: var(--header-h);
}
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 800;
    font-size: 19px;
    color: var(--neutral-900);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.logo__img { height: 40px; width: auto; display: block; }
.logo__sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    padding-left: 14px;
    border-left: 1px solid var(--neutral-200);
    max-width: 140px;
}
.nav { display: flex; gap: var(--s-1); align-items: center; flex: 1; }
.nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-700);
    padding: 10px 12px;
    border-radius: var(--r-sm);
    transition: all var(--d-fast) var(--ease);
    position: relative;
}
.nav a:hover { color: var(--neutral-900); background: var(--neutral-100); }
.nav a.is-active { color: var(--brand-primary); background: var(--brand-primary-subtle); }
.header__cta {
    display: flex;
    gap: var(--s-3);
    align-items: center;
}
.header__phone {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--neutral-900);
    font-weight: 500;
    text-align: right;
    line-height: 1.2;
}
.header__phone span { display: block; font-size: 10.5px; color: var(--neutral-500); font-weight: 400; margin-top: 2px; letter-spacing: 0; }
.header__icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    color: var(--neutral-700);
    transition: all var(--d-fast) var(--ease);
}
.header__icon-btn:hover { background: var(--neutral-100); color: var(--neutral-900); }

@media (max-width: 1100px) {
    .nav { display: none; }
    .header__phone { display: none; }
}

/* ---- HERO ---- */
.hero {
    position: relative;
    background: var(--neutral-950);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 600px at 88% 12%, rgba(220,38,38,0.42), transparent 60%),
        radial-gradient(700px 500px at 12% 100%, rgba(245,158,11,0.16), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(255,255,255,0.025) 32px, rgba(255,255,255,0.025) 33px),
        repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(255,255,255,0.025) 32px, rgba(255,255,255,0.025) 33px);
    mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.3));
    pointer-events: none;
    z-index: -1;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-12);
    align-items: center;
    padding: var(--s-16) 0 var(--s-20);
    position: relative;
}
@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--s-10); padding: var(--s-12) 0 var(--s-16); }
}
.hero h1 { color: #fff; }
.hero__eyebrow {
    color: var(--brand-secondary);
    font-family: var(--font-mono);
    margin-bottom: var(--s-5);
}
.hero__sub {
    font-size: 18px;
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    margin: var(--s-5) 0 var(--s-8);
    max-width: 560px;
    text-wrap: pretty;
}
.hero__chips {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: var(--s-5);
}
.hero__chip {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    transition: all var(--d-fast) var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero__chip:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.32);
    color: #fff;
}
.hero__chip-arrow { color: var(--brand-secondary); }

/* Hero metrics row underneath */
.hero__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.hero__metric {
    padding: 0 var(--s-4) 0 0;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.hero__metric:last-child { border-right: 0; }
.hero__metric-num {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-secondary);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.hero__metric-label {
    font-size: 11.5px;
    color: rgba(255,255,255,0.58);
    line-height: 1.35;
}
@media (max-width: 600px) {
    .hero__metrics { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
    .hero__metric { border-right: 0; }
}

/* Selector widget */
.selector {
    background: #fff;
    color: var(--neutral-900);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--neutral-200);
    position: relative;
}
.selector__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    margin: 0 0 var(--s-5);
}
.selector__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0;
}
.selector__title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-subtle);
    animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--brand-primary-subtle); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.08); }
}
.selector__badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--success);
    background: var(--success-subtle);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    flex-shrink: 0;
}
.selector__tabs {
    display: flex;
    gap: 2px;
    background: var(--neutral-100);
    padding: 4px;
    border-radius: var(--r-md);
    margin-bottom: var(--s-5);
}
.selector__tab {
    flex: 1;
    padding: 9px 8px;
    background: transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-600);
    transition: all var(--d-fast) var(--ease);
    white-space: nowrap;
}
.selector__tab.is-active {
    background: #fff;
    color: var(--neutral-900);
    box-shadow: var(--sh-xs);
    font-weight: 600;
}
.selector__row {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--neutral-500);
    text-transform: uppercase;
    font-family: var(--font-mono);
}
.field select,
.field input {
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    font-size: 15px;
    color: var(--neutral-900);
    transition: all var(--d-fast) var(--ease);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.field input { background-image: none; padding-right: 14px; }
.field select:focus,
.field input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--sh-glow);
}
.selector__alt {
    text-align: center;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--neutral-400);
    margin: var(--s-4) 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.selector__alt::before, .selector__alt::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: var(--neutral-200);
}
.selector__alt::before { left: 0; }
.selector__alt::after { right: 0; }
.selector__direct {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.selector__direct input { flex: 1; }
.selector__foot {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--neutral-200);
    font-size: 12px;
    color: var(--neutral-500);
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.selector__foot a { color: var(--brand-primary); font-weight: 500; }

/* ---- TICKER STRIP ---- */
.ticker {
    background: var(--neutral-900);
    color: rgba(255,255,255,0.6);
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
.ticker__inner {
    display: flex;
    align-items: center;
    gap: var(--s-12);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: slide 40s linear infinite;
}
.ticker__item { display: inline-flex; align-items: center; gap: var(--s-3); }
.ticker__dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand-secondary);
}
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---- SECTIONS ---- */
.section { padding: var(--s-20) 0; }
.section--sm { padding: var(--s-14) 0; }
.section--alt { background: var(--neutral-50); }
.section--dark { background: var(--neutral-950); color: rgba(255,255,255,0.85); }
.section--dark .h-1, .section--dark .h-2 { color: #fff; }
.section--dark .lead { color: rgba(255,255,255,0.7); }

.section__head {
    max-width: 760px;
    margin: 0 auto var(--s-12);
    text-align: center;
}
.section__head--left {
    text-align: left;
    margin: 0 0 var(--s-10);
    max-width: none;
}
.section__head-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--s-6);
    flex-wrap: wrap;
    margin: 0 0 var(--s-10);
}

/* ---- AUDIENCE ---- */
.audience {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}
@media (max-width: 1024px) { .audience { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .audience { grid-template-columns: 1fr; } }

.audience__card {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    transition: all var(--d-base) var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.audience__card:hover {
    border-color: var(--neutral-300);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}
.audience__media {
    aspect-ratio: 1.1;
    border-radius: var(--r-md);
    background: var(--neutral-100);
    overflow: hidden;
    margin-bottom: var(--s-4);
    display: grid;
    place-items: center;
    position: relative;
}
.audience__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--d-slow) var(--ease);
}
.audience__card:hover .audience__media img { transform: scale(1.04); }
.audience__tag {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: rgba(15,23,42,0.86);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(8px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.audience__card h3 { margin-bottom: var(--s-2); font-size: 19px; }
.audience__card p {
    color: var(--neutral-600);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--s-4);
    flex: 1;
}
.audience__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary);
    transition: gap var(--d-fast) var(--ease);
}
.audience__card:hover .audience__cta { gap: 10px; }

/* ---- CATEGORIES ---- */
.cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s-3);
}
@media (max-width: 1100px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cats { grid-template-columns: repeat(2, 1fr); } }

.cat-card {
    padding: var(--s-5);
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: all var(--d-base) var(--ease);
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
}
.cat-card:hover {
    border-color: var(--neutral-900);
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}
.cat-card__thumb {
    width: 60%;
    aspect-ratio: 1;
    margin: auto;
    object-fit: contain;
    transition: transform var(--d-slow) var(--ease);
    filter: drop-shadow(0 8px 18px rgba(15,23,42,0.18));
}
.cat-card:hover .cat-card__thumb { transform: scale(1.07) rotate(-2deg); }
.cat-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-900);
    line-height: 1.3;
}
.cat-card__count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
}
.cat-card__arrow {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--neutral-100);
    color: var(--neutral-500);
    display: grid;
    place-items: center;
    transition: all var(--d-fast) var(--ease);
}
.cat-card:hover .cat-card__arrow {
    background: var(--brand-primary);
    color: #fff;
    transform: rotate(-45deg);
}

/* ---- FEATURED PRODUCTS ---- */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}
@media (max-width: 1024px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .featured-grid { grid-template-columns: 1fr; } }

/* ---- PRODUCT CARD ---- */
.product-card {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--d-base) var(--ease);
    text-decoration: none;
    color: inherit;
}
.product-card:hover {
    border-color: var(--neutral-300);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}
.product-card__media {
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 50% 70%, rgba(220,38,38,0.06), transparent 65%),
        var(--neutral-50);
    display: grid;
    place-items: center;
    position: relative;
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--s-5);
    overflow: hidden;
}
.product-card__photo {
    max-height: 86%;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--d-slow) var(--ease);
    filter: drop-shadow(0 12px 24px rgba(15,23,42,0.18));
}
.product-card:hover .product-card__photo { transform: scale(1.06) translateY(-2px); }
.product-card__badges {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.product-card__quick {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--neutral-700);
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    border: 1px solid var(--neutral-200);
    opacity: 0;
    transform: translateY(-4px);
    transition: all var(--d-base) var(--ease);
}
.product-card:hover .product-card__quick { opacity: 1; transform: translateY(0); }
.product-card__quick:hover { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }

.badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    background: var(--neutral-900);
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.badge--mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-weight: 500; }
.badge--success { background: var(--success); color: #fff; }
.badge--gold { background: var(--brand-secondary); color: var(--neutral-900); }
.badge--soft { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.badge--info { background: var(--info-subtle); color: var(--info); }
.badge--ghost { background: transparent; color: var(--neutral-600); border: 1px solid var(--neutral-200); }

.product-card__body {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s-3);
}
.product-card__sae {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
}
.product-card h3, .product-card__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--neutral-900);
    margin: 0;
    min-height: 2.7em;
    text-wrap: balance;
}
.product-card__approvals {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.product-card__approval {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--neutral-100);
    color: var(--neutral-700);
    padding: 3px 7px;
    border-radius: var(--r-sm);
    line-height: 1.3;
}
.product-card__foot {
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--neutral-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-2);
}
.product-card__avail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--success);
    font-weight: 500;
}
.product-card__avail::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(21,128,61,0.16);
}
.product-card__price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-900);
}
.product-card__price small { font-size: 10.5px; color: var(--neutral-500); font-weight: 400; }

/* ---- HALO PRODUCT (hero featured) ---- */
.halo {
    background: linear-gradient(135deg, #f1c0c0 0%, #f5e3e0 50%, #f6d2c8 100%);
    border-radius: var(--r-2xl);
    padding: var(--s-12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(220,38,38,0.18);
}
.halo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 80%, rgba(220,38,38,0.18), transparent 60%);
    pointer-events: none;
}
.halo__photo-wrap {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.halo__photo {
    max-width: 78%;
    max-height: 95%;
    filter: drop-shadow(0 32px 48px rgba(127,29,29,0.4));
}
.halo__sticker {
    position: absolute;
    top: 8%;
    right: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--neutral-900);
    color: var(--brand-secondary);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(8deg);
    border: 2px solid var(--brand-secondary);
    padding: 12px;
}
.halo__copy { padding-right: var(--s-4); }
.halo__copy h2 { color: var(--neutral-950); }
.halo__copy p { color: var(--neutral-700); font-size: 16px; line-height: 1.6; margin: 0 0 var(--s-6); }
.halo__bullets {
    display: grid;
    gap: var(--s-2);
    margin: 0 0 var(--s-6);
}
.halo__bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: 14px;
    color: var(--neutral-800);
}
.halo__bullet::before {
    content: "→";
    color: var(--brand-primary);
    font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .halo { grid-template-columns: 1fr; padding: var(--s-8); }
    .halo__copy { padding-right: 0; order: 2; }
    .halo__photo-wrap { order: 1; }
}

/* ---- TRUST / METRICS ---- */
.trust {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-xl);
    padding: var(--s-8);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: center;
}
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }
.trust__copy h2 { margin-bottom: var(--s-3); }
.trust__copy p { color: var(--neutral-600); margin: 0; font-size: 15px; line-height: 1.6; }
.trust__nums {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
}
.trust__num {
    background: var(--neutral-50);
    padding: var(--s-5);
    text-align: left;
}
.trust__num-val {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.trust__num-val span { color: var(--brand-primary); }
.trust__num-label {
    font-size: 12px;
    color: var(--neutral-600);
    line-height: 1.4;
}

/* ---- SERVICE BANNER ---- */
.service-banner {
    background: var(--neutral-950);
    color: #fff;
    border-radius: var(--r-2xl);
    padding: var(--s-12);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s-10);
    align-items: end;
    position: relative;
    overflow: hidden;
}
.service-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 400px at 90% 100%, rgba(245,158,11,0.28), transparent 60%),
        radial-gradient(500px 400px at 10% 0%, rgba(220,38,38,0.22), transparent 60%);
    pointer-events: none;
}
.service-banner > * { position: relative; }
.service-banner h2 { color: #fff; margin-bottom: var(--s-4); }
.service-banner p { color: rgba(255,255,255,0.78); font-size: 16px; margin: 0 0 var(--s-6); max-width: 540px; }
.service-banner__cta { display: flex; flex-direction: column; gap: var(--s-3); }
.service-banner__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2) var(--s-5);
    margin: var(--s-5) 0 var(--s-6);
    padding: 0;
    list-style: none;
}
.service-banner__list li {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.service-banner__list li::before {
    content: "✓";
    color: var(--brand-secondary);
    font-weight: 700;
}
@media (max-width: 800px) { .service-banner { grid-template-columns: 1fr; padding: var(--s-8); align-items: start; } }

/* ---- PRODUCTION SPLIT ---- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
    align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split__media {
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    background:
        linear-gradient(135deg, rgba(15,23,42,0.85), rgba(15,23,42,0.65)),
        var(--neutral-700);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

/* Production photo collage — replaces placeholder */
.prod-collage {
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    background: var(--ink);
    position: relative;
}
.prod-collage__cell {
    position: relative;
    overflow: hidden;
    background: var(--neutral-800);
}
.prod-collage__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.prod-collage__cell:hover img { transform: scale(1.04); }
.prod-collage__cell--main {
    grid-row: span 2;
}
.prod-collage__cell-cap {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(15,23,42,0.72);
    backdrop-filter: blur(6px);
    padding: 6px 10px;
    border-radius: 4px;
    z-index: 2;
}
.prod-collage__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: var(--brand-primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(231,29,38,0.3);
}
.prod-collage__stat {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;
    background: rgba(15,23,42,0.88);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    gap: 12px;
}
.prod-collage__stat-num {
    font-family: var(--font-display, var(--font-sans));
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}
.prod-collage__stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
    max-width: 130px;
}

/* Production photo strip — 5-up below the split */
.prod-strip {
    margin-top: var(--s-10);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 1100px) { .prod-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .prod-strip { grid-template-columns: repeat(2, 1fr); } }
.prod-strip__item {
    margin: 0;
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--neutral-800);
    cursor: pointer;
}
.prod-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: saturate(0.92);
}
.prod-strip__item:hover img { transform: scale(1.05); filter: saturate(1.1); }
.prod-strip__item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px;
    background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.6) 60%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-strip__cap {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    font-weight: 600;
}
.prod-strip__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}
.split__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 9px);
}
.split__media-label {
    position: absolute;
    bottom: var(--s-5);
    left: var(--s-5);
    right: var(--s-5);
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: rgba(255,255,255,0.92);
    z-index: 1;
}
.split__media-label-cap {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-secondary);
    margin-bottom: 4px;
}
.split__media-label-title { font-size: 15px; font-weight: 600; }
.split__media-pin {
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.86);
}
.split__media-icon {
    font-family: var(--font-mono);
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    text-align: center;
    z-index: 1;
}
.split__media-icon strong { display: block; font-size: 56px; color: #fff; line-height: 1; margin-bottom: 8px; }

.production-list {
    display: grid;
    gap: var(--s-5);
    margin: var(--s-6) 0 var(--s-8);
}
.production-item {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
}
.production-item__num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--brand-primary-subtle);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    line-height: 1;
}
.production-item__body strong { display: block; margin-bottom: 4px; color: var(--neutral-900); font-size: 16px; }
.production-item__body span { color: var(--neutral-600); font-size: 14.5px; line-height: 1.55; }

/* ---- ARTICLES ---- */
.articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}
@media (max-width: 900px) { .articles { grid-template-columns: 1fr; } }
.article-card {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--d-base) var(--ease);
    display: flex;
    flex-direction: column;
}
.article-card:hover {
    border-color: var(--neutral-300);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}
.article-card__media {
    aspect-ratio: 16/9;
    background:
        linear-gradient(135deg, var(--neutral-800), var(--neutral-950));
    border-bottom: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
}
.article-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 16px, rgba(255,255,255,0.04) 16px, rgba(255,255,255,0.04) 17px);
}
.article-card__media-num {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brand-secondary);
    letter-spacing: 0.08em;
}
.article-card__media-cap {
    position: absolute;
    bottom: var(--s-4);
    left: var(--s-4);
    font-family: var(--font-mono);
    font-size: 60px;
    line-height: 0.9;
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    letter-spacing: -0.04em;
}
.article-card__media--gold { background: linear-gradient(135deg, #b45309, #1a1208); }
.article-card__media--gold .article-card__media-cap { color: #fbbf24; }
.article-card__media--blue { background: linear-gradient(135deg, #1e3a8a, #0c1226); }

.article-card__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.article-card:hover .article-card__svg .anim {
    transform: scale(1.05);
}
.article-card__svg .anim {
    transition: transform 600ms var(--ease);
    transform-origin: center;
}
.article-card__media-num {
    z-index: 2;
}
.article-card__media-cap {
    z-index: 2;
    pointer-events: none;
}

.article-card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.article-card__tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: var(--s-2);
}
.article-card h4 { margin-bottom: var(--s-2); font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--neutral-900); text-wrap: balance; }
.article-card p { font-size: 14px; color: var(--neutral-600); margin: 0 0 var(--s-4); flex: 1; line-height: 1.55; }
.article-card__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    display: flex;
    justify-content: space-between;
    padding-top: var(--s-3);
    border-top: 1px solid var(--neutral-100);
}

/* ---- FAQ ---- */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item {
    border: 1px solid var(--neutral-200);
    background: #fff;
    border-radius: var(--r-md);
    margin-bottom: var(--s-2);
    overflow: hidden;
    transition: border-color var(--d-fast) var(--ease);
}
.faq-item[open] { border-color: var(--neutral-300); }
.faq-item summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
    padding: var(--s-4) var(--s-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: var(--s-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--neutral-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M6 2.5V9.5M2.5 6H9.5' stroke='%230F172A' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--d-base) var(--ease), background var(--d-fast) var(--ease);
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
    background-color: var(--brand-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M6 2.5V9.5M2.5 6H9.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/></svg>");
}
.faq-item__body {
    color: var(--neutral-700);
    padding: 0 var(--s-5) var(--s-5);
    font-size: 15px;
    line-height: 1.6;
}
.faq-item__body a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---- FOOTER ---- */
.footer {
    background: var(--neutral-950);
    color: rgba(255,255,255,0.7);
    padding: var(--s-16) 0 var(--s-6);
}
.footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--s-8);
    margin-bottom: var(--s-12);
}
@media (max-width: 1000px) {
    .footer__top { grid-template-columns: repeat(2, 1fr); }
    .footer__brand { grid-column: span 2; }
}
.footer__brand-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--s-4);
    text-decoration: none;
}
.footer__brand-img {
    height: 56px;
    width: auto;
    display: block;
    /* logo has black wordmark — invert to white on dark footer */
    filter: invert(1) hue-rotate(180deg) saturate(2.4) brightness(1.05);
}
.footer__brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--brand-primary);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.footer__brand-mark svg { width: 60%; height: 60%; fill: #fff; }
.footer__brand p { font-size: 14px; margin: 0 0 var(--s-4); line-height: 1.6; max-width: 360px; color: rgba(255,255,255,0.6); }
.footer__col h5 {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0 0 var(--s-4);
}
.footer__col ul { display: grid; gap: var(--s-2); }
.footer__col a {
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    transition: color var(--d-fast) var(--ease);
}
.footer__col a:hover { color: #fff; }
.footer__alert {
    background: rgba(245,158,11,0.1);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(245,158,11,0.25);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.5;
    margin-top: var(--s-4);
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}
.footer__alert::before {
    content: "!";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-secondary);
    color: var(--neutral-950);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.footer__alert strong { color: #fff; font-family: var(--font-mono); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--s-5);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-mono);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__social { display: flex; gap: var(--s-2); }
.footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    place-items: center;
    transition: all var(--d-fast) var(--ease);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.footer__social a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ---- BREADCRUMBS ---- */
.crumbs {
    padding: var(--s-5) 0;
    font-size: 13px;
    color: var(--neutral-500);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}
.crumbs a { color: var(--neutral-600); transition: color var(--d-fast) var(--ease); }
.crumbs a:hover { color: var(--brand-primary); }
.crumbs span { margin: 0 var(--s-2); color: var(--neutral-300); }

/* ---- CATALOG LAYOUT ---- */
.catalog {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--s-8);
    padding: var(--s-8) 0 var(--s-16);
}
@media (max-width: 1000px) {
    .catalog { grid-template-columns: 1fr; }
    .filters { display: none; }
}

.filters {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    height: fit-content;
    position: sticky;
    top: calc(var(--header-h) + 16px);
}
.filters__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--s-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--neutral-100);
}
.filters__title .reset {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.filter-group {
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--s-3) 0;
}
.filter-group:last-of-type { border-bottom: 0; }
.filter-group__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0 0 var(--s-2);
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
}
.filter-group__title::after {
    content: "−";
    color: var(--neutral-400);
    font-family: var(--font-mono);
}
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--neutral-700);
    cursor: pointer;
    transition: color var(--d-fast) var(--ease);
}
.checkbox:hover { color: var(--neutral-900); }
.checkbox input { accent-color: var(--brand-primary); width: 15px; height: 15px; }
.checkbox__count { margin-left: auto; color: var(--neutral-400); font-family: var(--font-mono); font-size: 11.5px; }

.catalog__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
    gap: var(--s-4);
}
.catalog__count {
    font-size: 14px;
    color: var(--neutral-600);
}
.catalog__count strong { color: var(--neutral-900); font-family: var(--font-mono); font-weight: 600; }
.catalog__active {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}
.catalog__chip {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background var(--d-fast) var(--ease);
}
.catalog__chip:hover { background: var(--brand-primary); color: #fff; }
.catalog__chip::after { content: "✕"; font-size: 10px; }

.sort {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 13.5px;
    color: var(--neutral-600);
}
.sort select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 13.5px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.view-toggle { display: flex; gap: 2px; background: var(--neutral-100); padding: 3px; border-radius: var(--r-sm); }
.view-toggle button { padding: 6px 8px; border-radius: 4px; color: var(--neutral-500); }
.view-toggle button.is-active { background: #fff; color: var(--neutral-900); box-shadow: var(--sh-xs); }

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}
@media (max-width: 1100px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .products { grid-template-columns: 1fr; } }

/* ---- PRODUCT PAGE ---- */
.product {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-12);
    padding: var(--s-6) 0;
}
@media (max-width: 1024px) { .product { grid-template-columns: 1fr; gap: var(--s-8); } }

.gallery {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--s-3);
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
}
@media (max-width: 600px) {
    .gallery { grid-template-columns: 1fr; position: static; }
    .gallery__thumbs { display: flex; flex-direction: row; }
}
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--s-2); }
.gallery__thumb {
    width: 80px;
    aspect-ratio: 1;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-sm);
    background: var(--neutral-50);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--neutral-400);
    transition: all var(--d-fast) var(--ease);
    padding: 4px;
    overflow: hidden;
}
.gallery__thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-subtle); }
.gallery__main {
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 50% 70%, rgba(220,38,38,0.07), transparent 65%),
        var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.gallery__main img {
    max-width: 70%;
    max-height: 86%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 24px 48px rgba(15,23,42,0.3));
}
.gallery__zoom {
    position: absolute;
    bottom: var(--s-4);
    right: var(--s-4);
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-700);
    backdrop-filter: blur(8px);
}
.gallery__badges {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.product__title {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.product h1 { margin-bottom: var(--s-3); font-size: 36px; line-height: 1.1; }
.product__rating {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    font-size: 13px;
    color: var(--neutral-600);
}
.product__rating-stars { color: var(--brand-secondary); letter-spacing: 1px; font-size: 14px; }
.product__rating a { color: var(--brand-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.product__lead { font-size: 16px; color: var(--neutral-700); margin: 0 0 var(--s-5); line-height: 1.6; }
.product__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--neutral-200);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12.5px;
    margin-bottom: var(--s-5);
}
.product__meta-cell {
    background: #fff;
    padding: var(--s-3);
    text-align: center;
}
.product__meta-cell-label { color: var(--neutral-500); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.product__meta-cell-val { color: var(--neutral-900); font-weight: 600; font-size: 14px; }

/* size selector */
.size-row {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}
.size-pill {
    padding: 10px 16px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--r-md);
    background: #fff;
    font-size: 14px;
    color: var(--neutral-800);
    cursor: pointer;
    transition: all var(--d-fast) var(--ease);
    font-family: var(--font-mono);
    font-weight: 500;
}
.size-pill:hover { border-color: var(--neutral-900); }
.size-pill.is-active { border-color: var(--brand-primary); background: var(--brand-primary-subtle); color: var(--brand-primary); font-weight: 600; }
.size-pill__cap { font-size: 10.5px; color: var(--neutral-500); display: block; margin-top: 2px; letter-spacing: 0.04em; }

/* partner list */
.partner-list {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
}
.partner-list h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-700);
    margin: 0 0 var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--neutral-200);
}
.partner-list__loc {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    margin-left: auto;
    font-weight: 400;
}
.partner-list__loc a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }

.partner {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3);
    background: #fff;
    border: 1px solid var(--neutral-150);
    border-radius: var(--r-md);
    margin-bottom: var(--s-2);
    transition: all var(--d-fast) var(--ease);
}
.partner:hover { border-color: var(--neutral-300); box-shadow: var(--sh-sm); }
.partner__logo {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--neutral-100);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    color: var(--neutral-700);
    letter-spacing: 0.02em;
}
.partner__name { font-size: 14px; font-weight: 600; color: var(--neutral-900); }
.partner__sub { font-size: 12px; color: var(--neutral-500); margin-top: 2px; line-height: 1.4; }
.partner__price {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-900);
    text-align: right;
}
.partner__price small { font-size: 11px; color: var(--neutral-500); font-weight: 400; display: block; }
.partner__btn {
    padding: 9px 14px;
    background: var(--neutral-900);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: background var(--d-fast) var(--ease);
}
.partner__btn:hover { background: var(--brand-primary); }
.partner--featured .partner__btn { background: var(--brand-primary); }
.partner--featured .partner__btn:hover { background: var(--brand-primary-hover); }
.partner--mp .partner__logo { background: var(--neutral-900); color: #fff; }
.partner--mp.partner--ozon .partner__logo { background: #005bff; }
.partner--mp.partner--wb .partner__logo { background: #cb11ab; }

.partner-list__more {
    display: block;
    text-align: center;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--neutral-200);
    font-size: 13px;
    color: var(--brand-primary);
    font-weight: 500;
}

/* ---- TABS ---- */
.tabs { margin-top: var(--s-12); }
.tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--neutral-200);
    margin-bottom: var(--s-6);
    overflow-x: auto;
}
.tabs__nav button {
    padding: var(--s-4) var(--s-5);
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-500);
    border-bottom: 2px solid transparent;
    transition: all var(--d-fast) var(--ease);
    white-space: nowrap;
    margin-bottom: -1px;
}
.tabs__nav button:hover { color: var(--neutral-900); }
.tabs__nav button.is-active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

/* ---- SPECS / APPROVALS / DOCS ---- */
.specs {
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    overflow: hidden;
}
.spec-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--neutral-100);
    font-size: 13.5px;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row:nth-child(even) { background: var(--neutral-50); }
.spec-row__label { color: var(--neutral-600); }
.spec-row__value { font-family: var(--font-mono); color: var(--neutral-900); font-weight: 500; }

.approvals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-3);
}
.approval {
    padding: var(--s-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    background: #fff;
    transition: border-color var(--d-fast) var(--ease);
}
.approval:hover { border-color: var(--brand-primary); }
.approval__code {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.approval__desc { font-size: 12px; color: var(--neutral-600); line-height: 1.5; }

.docs { display: grid; gap: var(--s-2); }
.doc {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    transition: all var(--d-fast) var(--ease);
}
.doc:hover { border-color: var(--brand-primary); transform: translateX(2px); }
.doc__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.doc__title { font-size: 14px; font-weight: 600; color: var(--neutral-900); }
.doc__meta { font-size: 11.5px; color: var(--neutral-500); font-family: var(--font-mono); margin-top: 2px; }
.doc__arrow { margin-left: auto; color: var(--neutral-400); font-size: 18px; }

/* ---- ALERT ---- */
.alert {
    background: var(--warning-subtle);
    border: 1px solid #F0D49B;
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    font-size: 13.5px;
    color: #6B4012;
    line-height: 1.5;
}
.alert__icon {
    color: var(--warning);
    font-weight: 700;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--warning);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    margin-top: 1px;
}
.alert a { color: #6B4012; text-decoration: underline; font-weight: 600; text-underline-offset: 3px; }

/* ---- DEMO BANNER ---- */
.demo-banner {
    background: linear-gradient(90deg, #FEF3C7, #FFE4B0);
    border-bottom: 1px solid #F0D49B;
    padding: 10px var(--s-6);
    font-size: 12.5px;
    color: #6B4012;
    text-align: center;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}
.demo-banner a { color: var(--brand-primary); font-weight: 600; }
.demo-banner strong { color: var(--neutral-900); }

/* ---- HELPERS ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.flex { display: flex; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.flex-wrap { flex-wrap: wrap; }
.fw-bold { font-weight: 600; }

/* Tweaks panel light overrides */
.tweaks-panel { font-family: var(--font-ui); }

/* ---- MOBILE FIXES (post-audit) ---- */
.product__tab-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
@media (max-width: 800px) { .product__tab-split { grid-template-columns: 1fr; gap: var(--s-7); } }

@media (max-width: 600px) {
    /* product meta 4-col → 2-col */
    .product__meta { grid-template-columns: repeat(2, 1fr) !important; }
    /* product title fluid */
    .product h1 { font-size: clamp(24px, 6vw, 36px); }
    /* hero metrics — kill border-right */
    .hero__metric { border-right: 0 !important; }
    /* header top — wrap & shrink */
    .header__top-inner { flex-wrap: wrap; gap: 6px var(--s-3); padding: 8px 0; justify-content: flex-start; }
    .header__top-left, .header__top-right { gap: var(--s-3); flex-wrap: wrap; font-size: 11.5px; }
    .header__top-right .header__top-cta { display: none; }
    .header__top-right a:nth-child(n+3) { display: none; }
    .header__top-left > *:nth-child(n+3) { display: none; }
    /* product tab split — stack on mobile */
    .product__tab-split { grid-template-columns: 1fr !important; gap: var(--s-7) !important; }
    /* tweaks panel — narrower on mobile */
    .tweaks-panel { width: calc(100vw - 24px) !important; max-width: 320px; right: 12px !important; bottom: 12px !important; }
}
@media (max-width: 480px) {
    /* racing hero overlay — compact */
    .racing__hero-overlay { padding: var(--s-3) var(--s-4) !important; gap: var(--s-3) !important; }
    .racing__stat-num { font-size: 24px; }
    .racing__stat-label { font-size: 10px; }
    .racing__stat { padding-left: 10px; }
    /* footer brand img smaller */
    .footer__brand-img { height: 44px; }
}

/* tabs nav — visual hint of horizontal scroll on mobile */
@media (max-width: 800px) {
    .tabs__nav {
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    }
    .tabs__nav button { white-space: nowrap; flex-shrink: 0; padding: var(--s-3) var(--s-4); font-size: 13px; }
}

/* ---- RACING TEAM ---- */
.racing {
    background: radial-gradient(ellipse at 30% 0%, #1a1d2e 0%, #0a0d18 60%, #06080f 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.racing::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(231,29,38,0.025) 80px, rgba(231,29,38,0.025) 81px),
        repeating-linear-gradient(0deg, transparent 0, transparent 80px, rgba(255,255,255,0.02) 80px, rgba(255,255,255,0.02) 81px);
    pointer-events: none;
}
.racing > .container { position: relative; z-index: 1; }

.racing__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-8);
    align-items: end;
    margin-bottom: var(--s-10);
}
@media (max-width: 800px) {
    .racing__head { grid-template-columns: 1fr; align-items: start; }
}
.racing__eyebrow {
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.racing__eyebrow::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--brand-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--brand-primary), 0 0 24px var(--brand-primary);
    animation: racing-pulse 1.6s ease-in-out infinite;
}
@keyframes racing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.racing__title { color: #fff; margin-top: var(--s-3); text-wrap: balance; }
.racing__lead {
    color: rgba(255,255,255,0.72);
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
    margin: var(--s-5) 0 0;
    text-wrap: pretty;
}

/* Hero photo with stats overlay */
.racing__hero {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: var(--s-8);
    aspect-ratio: 21/9;
    background: #000;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.racing__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.racing__hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--s-6) var(--s-8);
    background: linear-gradient(to top, rgba(6,8,15,0.95) 10%, rgba(6,8,15,0.7) 60%, transparent 100%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}
@media (max-width: 800px) {
    .racing__hero-overlay { grid-template-columns: repeat(2, 1fr); padding: var(--s-4); gap: var(--s-3); }
}
.racing__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid var(--brand-primary);
    padding-left: 14px;
}
.racing__stat-num {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
}
.racing__stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.62);
    line-height: 1.3;
}

/* Drivers + livery grid */
.racing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: var(--s-5);
}
@media (max-width: 1024px) {
    .racing__grid { grid-template-columns: 1fr 1fr; }
    .racing__livery { grid-column: span 2; }
}
@media (max-width: 600px) {
    .racing__grid { grid-template-columns: 1fr; }
    .racing__livery { grid-column: auto; }
}

.racing__driver {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.racing__driver::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(231,29,38,0.18) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.racing__driver:hover { border-color: rgba(231,29,38,0.4); transform: translateY(-2px); }
.racing__driver:hover::before { opacity: 1; }
.racing__driver-photo {
    aspect-ratio: 1/1;
    background:
        radial-gradient(ellipse at center bottom, rgba(231,29,38,0.25) 0%, transparent 60%),
        linear-gradient(180deg, #1a1d2e 0%, #0a0d18 100%);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: var(--s-4);
    position: relative;
    display: grid;
    place-items: end center;
}
.racing__driver-photo img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.racing__driver-num {
    position: absolute;
    top: var(--s-5);
    right: var(--s-6);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-primary);
    background: rgba(231,29,38,0.12);
    border: 1px solid rgba(231,29,38,0.32);
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.04em;
}
.racing__driver-name {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.racing__driver-role {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    margin-bottom: var(--s-2);
}
.racing__driver-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* Livery card */
.racing__livery {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: relative;
    overflow: hidden;
}
.racing__livery-cap {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
}
.racing__livery-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(231,29,38,0.25)) drop-shadow(0 8px 16px rgba(0,0,0,0.5));
    transition: transform 0.5s ease;
}
.racing__livery:hover .racing__livery-img { transform: translateX(6px); }
.racing__livery-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
}
.racing__livery-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.racing__livery-row span {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
}
.racing__livery-row strong {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}