/* ================================================================
   PUBLIC CSS
   Built: 2026-05-21 06:09:34
   DO NOT EDIT DIRECTLY — edit src/ files and run build.php
   ================================================================ */


/* ──────────────────────────────────────────────────────────────────── */
/* base/_fonts.css                                                    */
/* ──────────────────────────────────────────────────────────────────── */
/* Google Fonts loaded via <link> in head.php for better performance */


/* ──────────────────────────────────────────────────────────────────── */
/* base/_variables.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
:root {
    /* ── Dark system ──────────────────────────────────────── */
    --c-black:     #07111F;
    --c-dark:      #0B1628;
    --c-dark-2:    #101827;
    --c-grey-8:    #243447;

    /* ── Neutral greys ────────────────────────────────────── */
    --c-grey-5:    #64748B;
    --c-grey-4:    #8A98AA;
    --c-grey-3:    #A6B1C2;
    --c-grey-2:    #CBD5E1;
    --c-grey-1:    #E2E8F0;

    /* ── Light / surface system ───────────────────────────── */
    --c-white:     #FFFFFF;
    --c-cream:     #F1F5F9;
    --c-cream-d:   #E2E8F0;

    /* ── Brand primary ────────────────────────────────────── */
    --c-primary:       #0061c1;
    --c-primary-light: #3b8fe8;

    /* ── Accent (CTAs only) ───────────────────────────────── */
    --c-accent:    #0061c1;
    --c-accent-d:  #004d99;

    /* ── Premium layer (metalik gümüş) ────────────────────── */
    --c-premium:   #C9D6E3;

    /* ── Typography ───────────────────────────────────────── */
    --c-text:       #0F172A;
    --c-text-muted: #64748B;

    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* ── Layout ───────────────────────────────────────────── */
    --topbar-h:    38px;
    --nav-h:       72px;
    --total-nav:   110px;
    --section-pad: 100px;
    --max-w:       1320px;
    --ease:        cubic-bezier(.25,.46,.45,.94);
    --radius:      6px;

    /* ── Semantic / rol bazlı ─────────────────────────────── */
    --c-danger:       #DC2626;
    --c-danger-d:     #B91C1C;
    --c-error:        #E05252;
    --c-error-bg:     #FEF0EF;
    --c-error-text:   #C0392B;
    --c-success:      #34D399;
    --c-success-bg:   #D1FAE5;
    --c-success-text: #065F46;
    --c-accent-dim:   rgba(0,97,193,.10);

    /* ── Compatibility aliases (product-ecom + dark mode) ─── */
    --c-bg:      var(--c-cream);
    --c-surface: var(--c-white);
    --c-border:  var(--c-grey-1);
    --c-text-2:  var(--c-grey-5);
    --c-text-3:  var(--c-grey-4);
    --c-radius-lg: 12px;
}

/* ── Dark mode ────────────────────────────────────────────── */
html[data-theme="dark"] {
    --c-black:     #020617;
    --c-dark:      #07111F;
    --c-dark-2:    #101827;
    --c-grey-8:    #1E293B;

    --c-grey-5:    #94A3B8;
    --c-grey-4:    #CBD5E1;
    --c-grey-3:    #64748B;
    --c-grey-2:    #334155;
    --c-grey-1:    #1E293B;

    --c-cream:     #07111F;
    --c-cream-d:   #0B1628;

    --c-primary:       #0061c1;
    --c-primary-light: #38BDF8;

    --c-accent:    #0061c1;
    --c-accent-d:  #004d99;

    --c-premium:   #C9D6E3;

    --c-text:       #E5EDF7;
    --c-text-muted: #94A3B8;

    /* State token overrides */
    --c-error-bg:     rgba(224,82,82,.14);
    --c-error-text:   #FCA5A5;
    --c-success-bg:   rgba(52,211,153,.14);
    --c-success-text: #86EFAC;
    --c-accent-dim:   rgba(0,97,193,.20);

    /* Compatibility aliases — dark'ta farklı değerlere işaret eder */
    --c-bg:      var(--c-dark);
    --c-surface: var(--c-dark-2);
    --c-border:  var(--c-grey-8);
    --c-text-2:  var(--c-grey-3);
    --c-text-3:  var(--c-grey-5);
}

/* ── Theme transition (sadece motion-ok + hedefli) ────────── */
@media (prefers-reduced-motion: no-preference) {
    html[data-theme-transitioning] body,
    html[data-theme-transitioning] .nav,
    html[data-theme-transitioning] .footer,
    html[data-theme-transitioning] .section,
    html[data-theme-transitioning] .split-cta,
    html[data-theme-transitioning] .stats-bar,
    html[data-theme-transitioning] .why-card,
    html[data-theme-transitioning] .prod-card,
    html[data-theme-transitioning] .fr-section,
    html[data-theme-transitioning] .hfc-section,
    html[data-theme-transitioning] .cookie-banner {
        transition: background-color .25s ease, color .2s ease, border-color .2s ease;
    }
}


/* ──────────────────────────────────────────────────────────────────── */
/* base/_appearance.css                                               */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Appearance Tokens ────────────────────────────────────────
   Applied via data-* attributes on <html> (server-rendered).
   Only token/variable overrides — zero layout restructuring.
   ─────────────────────────────────────────────────────────── */

/* ── Layout Width ────────────────────────────────────────── */
html[data-layout="wide"] .container { max-width: 1600px; }

/* ── UI Density ──────────────────────────────────────────── */
html[data-density="compact"] {
    --section-pad: 64px;
    --radius:      4px;
    --radius-lg:   8px;
}
/* "comfortable" is the default — no overrides needed */

/* ── Border Radius ───────────────────────────────────────── */
html[data-radius="sharp"] {
    --radius:    2px;
    --radius-lg: 4px;
}
/* "soft" is the default */

/* ── Motion Level ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    html[data-motion="none"] *,
    html[data-motion="none"] *::before,
    html[data-motion="none"] *::after {
        transition:  none !important;
        animation:   none !important;
    }

    html[data-motion="rich"] {
        /* Richer animation tokens — extend here as needed */
        --transition-base: .4s cubic-bezier(.25,.46,.45,.94);
    }
}

/* ── Color Presets ───────────────────────────────────────── */

html[data-preset="ocean"] {
    --c-primary:       #0077b6;
    --c-primary-light: #48cae4;
    --c-accent:        #0096c7;
    --c-accent-d:      #005f8a;
    --c-accent-dim:    rgba(0, 119, 182, .10);
}
html[data-preset="ocean"][data-theme="dark"] {
    --c-primary:       #0096c7;
    --c-primary-light: #48cae4;
    --c-accent:        #0096c7;
    --c-accent-d:      #005f8a;
    --c-accent-dim:    rgba(0, 150, 199, .20);
}

html[data-preset="graphite"] {
    --c-primary:       #374151;
    --c-primary-light: #9ca3af;
    --c-accent:        #4b5563;
    --c-accent-d:      #1f2937;
    --c-accent-dim:    rgba(55, 65, 81, .10);
}
html[data-preset="graphite"][data-theme="dark"] {
    --c-primary:       #9ca3af;
    --c-primary-light: #d1d5db;
    --c-accent:        #9ca3af;
    --c-accent-d:      #6b7280;
    --c-accent-dim:    rgba(156, 163, 175, .20);
}

html[data-preset="emerald"] {
    --c-primary:       #059669;
    --c-primary-light: #34d399;
    --c-accent:        #10b981;
    --c-accent-d:      #047857;
    --c-accent-dim:    rgba(5, 150, 105, .10);
}
html[data-preset="emerald"][data-theme="dark"] {
    --c-primary:       #10b981;
    --c-primary-light: #34d399;
    --c-accent:        #10b981;
    --c-accent-d:      #059669;
    --c-accent-dim:    rgba(16, 185, 129, .20);
}


/* ──────────────────────────────────────────────────────────────────── */
/* base/_reset.css                                                    */
/* ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p   { color: var(--c-grey-5); line-height: 1.75; }


/* ──────────────────────────────────────────────────────────────────── */
/* layout/_container.css                                              */
/* ──────────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 860px; }
.container--prose  { max-width: 900px; }


/* ──────────────────────────────────────────────────────────────────── */
/* layout/_section.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
.section        { padding: var(--section-pad) 0; background: var(--c-white); }
.section--cream { background: var(--c-cream); }
.section--dark  { background: var(--c-dark); }
.section--black { background: var(--c-black); }

.section { padding: 56px 0; }
.page-hero + .section { padding-top: 44px; }

.section-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.section-label--muted {
    color: var(--c-grey-5);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-label--muted::before { content: '—'; }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.18;
    color: var(--c-text);
    letter-spacing: -.3px;
    margin-bottom: 18px;
}
.section-title--light    { color: var(--c-white); }
.section-subtitle        { font-size: 16px; color: var(--c-grey-5); line-height: 1.75; max-width: 600px; margin-bottom: 32px; }
.section-subtitle--light { color: rgba(255,255,255,.55); max-width: 600px; }
.section-header          { margin-bottom: 32px; }
.section-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}


/* ──────────────────────────────────────────────────────────────────── */
/* layout/_grid.css                                                   */
/* ──────────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }


/* ──────────────────────────────────────────────────────────────────── */
/* components/_topbar.css                                             */
/* ──────────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--c-primary);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}
.topbar__left {
    font-size: 11px;
    color: rgba(255,255,255,.42);
    font-weight: 400;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.topbar__right-group {
    display: flex;
    align-items: center;
    gap: 20px;
}
.topbar__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    font-weight: 400;
    transition: color .2s;
}
.topbar__item:hover { color: rgba(255,255,255,.9); }
.topbar__item svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .6; }
.topbar__item--hide-sm {}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_nav.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Desktop nav ─────────────────────────────────────────── */
.nav {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    z-index: 200;
    height: var(--nav-h);
    background: var(--c-white);
    border-bottom: 1px solid rgba(0,0,0,.08);
    transition: box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.09); }
.nav .container   { height: var(--nav-h); display: flex; align-items: center; }
.nav__inner       { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 32px; }
.nav__logo img    { height: 48px; width: auto; }
.nav__links       { display: flex; align-items: center; gap: 32px; }
.nav__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-dark);
    transition: color .2s;
    position: relative;
    letter-spacing: 0;
}
.nav__link:hover { color: var(--c-primary); }
.nav__link--cta {
    background: var(--c-accent);
    color: var(--c-white);
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    border-radius: var(--radius);
    transition: background .2s, transform .2s;
}
.nav__link--cta:hover { background: var(--c-accent-d); color: var(--c-white); transform: translateY(-1px); }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__cta {
    background: var(--c-primary);
    color: var(--c-white);
    padding: 11px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: var(--radius);
    transition: background .2s, transform .15s, box-shadow .15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15,58,109,.25);
}
.nav__cta:hover { background: var(--c-primary-light); color: var(--c-white); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,58,109,.3); }

/* ── Burger / Mobile nav ─────────────────────────────────── */
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: all .25s; }
.nav__burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nav__mobile {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--c-white);
    z-index: 300;
    overflow-y: auto;
}
.nav__mobile.is-open { display: flex; }

.nav__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    min-height: 68px;
    border-bottom: 1px solid var(--c-grey-1);
    flex-shrink: 0;
}
.nav__mobile-head img { height: 38px; width: auto; }
.nav__mobile-close {
    background: none; border: none; cursor: pointer;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text); border-radius: 6px; transition: background .15s;
}
.nav__mobile-close:hover { background: var(--c-cream); }
.nav__mobile-body { flex: 1; padding: 8px 0 24px; }
.nav__mobile-link {
    display: block; padding: 14px 24px; font-size: 15px; font-weight: 600;
    color: var(--c-text); border-bottom: 1px solid var(--c-grey-1);
    transition: color .15s, background .15s;
}
.nav__mobile-link:hover { color: var(--c-primary); background: var(--c-cream); }
.nav__mobile-link:last-child { border-bottom: none; }
.nav__mobile-link--sub {
    padding: 11px 24px 11px 40px; font-size: 13.5px; font-weight: 500;
    color: var(--c-grey-5); border-bottom: 1px solid var(--c-grey-1);
}
.nav__mobile-link--sub:hover { color: var(--c-primary); background: var(--c-cream); }
.nav__mobile-section       { margin-top: 8px; border-top: 2px solid var(--c-cream); }
.nav__mobile-section-label { padding: 14px 24px 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c-grey-3); }
.nav__mobile-group-label   { padding: 10px 24px 4px 40px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-primary); }
.nav__mobile-acc-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 24px; font-size: 15px; font-weight: 600;
    color: var(--c-text); background: none; border: none;
    border-bottom: 1px solid var(--c-grey-1); cursor: pointer; text-align: left;
    transition: background .15s, color .15s;
}
.nav__mobile-acc-toggle:hover { background: var(--c-cream); color: var(--c-primary); }
.nav__mobile-acc-icon { flex-shrink: 0; transition: transform .25s; color: var(--c-grey-5); }
.nav__mobile-acc-toggle[aria-expanded="true"] .nav__mobile-acc-icon { transform: rotate(180deg); }
.nav__mobile-acc-body         { display: none; }
.nav__mobile-acc-body.is-open { display: block; }
.nav__mobile-cta {
    display: block; margin: 20px 24px 0; padding: 14px;
    background: var(--c-accent); color: var(--c-white); text-align: center;
    font-size: 14px; font-weight: 600; border-radius: var(--radius); transition: background .2s;
}
.nav__mobile-cta:hover { background: var(--c-accent-d); color: var(--c-white); }

/* ── Mega menu ───────────────────────────────────────────── */
.nav__item { position: relative; display: flex; align-items: center; }
.mega-btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0;
    color: var(--c-dark); padding: 0; display: inline-flex; align-items: center; gap: 5px;
    transition: color .2s;
}
.mega-btn:hover { color: var(--c-primary); }
.mega-caret { transition: transform .22s var(--ease); flex-shrink: 0; opacity: .6; }
.has-mega.is-open .mega-caret  { transform: rotate(180deg); }
.has-mega.is-open .mega-btn    { color: var(--c-primary); }

.mega-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--c-white);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
    min-width: 520px; max-width: 840px;
    pointer-events: none; opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    z-index: 500;
}
.has-mega.is-open .mega-menu { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }
.mega-menu::before {
    content: ''; position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 11px; height: 11px; background: var(--c-white);
    border-left: 1px solid rgba(0,0,0,.07); border-top: 1px solid rgba(0,0,0,.07);
    border-radius: 2px 0 0 0;
}
.mega-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--c-grey-1); }
.mega-menu__heading { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c-grey-3); }
.mega-menu__all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c-primary); transition: gap .2s; }
.mega-menu__all:hover { gap: 9px; }
.mega-menu__grid { display: grid; grid-template-columns: repeat(var(--mega-cols, 3), 1fr); gap: 0; padding: 20px 16px; }
.mega-menu__col { padding: 0 12px; border-right: 1px solid var(--c-grey-1); }
.mega-menu__col:last-child { border-right: none; }
.mega-menu__group-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-grey-3); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-cream-d); }
.mega-menu__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mega-menu__link {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400;
    color: var(--c-grey-5); padding: 6px 4px; border-radius: 4px;
    transition: color .15s, background .15s, padding-left .15s;
}
.mega-menu__link::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--c-grey-3); flex-shrink: 0; transition: background .15s, transform .15s;
}
.mega-menu__link:hover { color: var(--c-primary); background: var(--c-cream); padding-left: 8px; }
.mega-menu__link:hover::before { background: var(--c-primary); transform: scale(1.3); }

/* ── Dark mode: nav background ───────────────────────────── */
html[data-theme="dark"] .nav {
    background: var(--c-dark-2);
    border-bottom-color: rgba(255,255,255,.07);
}
html[data-theme="dark"] .mega-menu { background: var(--c-dark-2); border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .mega-menu::before { background: var(--c-dark-2); border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .mega-menu__link:hover { background: var(--c-dark); }

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1.5px solid var(--c-grey-1);
    border-radius: 8px;
    background: transparent;
    color: var(--c-grey-5);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }
.theme-toggle__sun  { display: block; }
.theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle {
    border-color: var(--c-grey-2);
    color: var(--c-grey-3);
}
html[data-theme="dark"] .theme-toggle:hover { border-color: var(--c-primary-light); color: var(--c-primary-light); }
html[data-theme="dark"] .theme-toggle__sun  { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: block; }


/* ──────────────────────────────────────────────────────────────────── */
/* components/_buttons.css                                            */
/* ──────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 13px 28px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .22s var(--ease);
    white-space: nowrap;
}
.btn--primary      { background: var(--c-accent);   color: var(--c-white); }
.btn--primary:hover { background: var(--c-accent-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,86,168,.28); }
.btn--dark         { background: var(--c-primary);   color: var(--c-white); }
.btn--dark:hover   { background: var(--c-primary-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,58,109,.3); }
.btn--outline      { background: transparent; border: 1.5px solid var(--c-grey-1); color: var(--c-text); }
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-1px); }
.btn--outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: var(--c-white); }
.btn--outline-light:hover { border-color: rgba(255,255,255,.6); }
.btn--ghost        { background: transparent; border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.btn--ghost:hover  { background: var(--c-primary); color: var(--c-white); }
.btn--lg           { padding: 15px 36px; font-size: 14px; }
.btn--sm           { padding: 8px 16px; font-size: 12px; }
.btn--danger       { background: var(--c-danger);   color: var(--c-white); border: none; }
.btn--danger:hover { background: var(--c-danger-d); }


/* ──────────────────────────────────────────────────────────────────── */
/* components/_hero.css                                               */
/* ──────────────────────────────────────────────────────────────────── */
/* Home page hero — left/right grid layout */
.hero {
    padding-top: 0;
    min-height: calc(100vh - var(--total-nav));
    background: var(--c-cream);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.hero .container {
    max-width: 1500px;
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 640px);
    gap: 48px;
    align-items: center;
    width: 100%;
    padding: 64px 0 56px;
}
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--c-grey-5); margin-bottom: 24px;
}
.hero__badge::before { content: '—'; color: var(--c-primary); }
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.8vw, 58px);
    font-weight: 600; line-height: 1.08;
    color: var(--c-text); margin-bottom: 22px; letter-spacing: 0;
}
.hero__title em { font-style: italic; font-weight: 600; color: var(--c-primary-light); }
.hero__desc    { font-size: 15px; color: var(--c-grey-5); line-height: 1.75; max-width: 480px; margin-bottom: 36px; }
.hero__actions { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; flex-wrap: wrap; }
.hero__meta {
    display: flex; align-items: center; gap: 40px;
    padding-top: 40px; border-top: 1px solid var(--c-cream-d); margin-bottom: 28px;
}
.hero__meta-value {
    font-family: var(--font-display); font-size: 28px; font-weight: 600;
    color: var(--c-primary); line-height: 1;
}
.hero__meta-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-grey-5); margin-top: 4px; }
.hero__partners { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero__partner  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-grey-5); }
.hero__partner img { height: 28px; }
.hero__right {}

/* Hero visual (static image fallback) */
.hero__visual { position: relative; height: 560px; border-radius: 12px; overflow: hidden; background: var(--c-dark-2); }
.hero__visual-img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.hero__visual-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-black) 100%); }


/* ──────────────────────────────────────────────────────────────────── */
/* components/_hero-accordion.css                                     */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Desktop accordion ───────────────────────────────────── */
.hero-accordion {
    display: flex;
    flex-direction: row;
    height: 540px;
    border-radius: 14px;
    overflow: hidden;
    gap: 3px;
}
.hero-accordion__panel {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: flex .55s cubic-bezier(.25,.46,.45,.94);
}
.hero-accordion__panel--active  { flex: 4.2; }
.hero-accordion__panel:focus-visible { box-shadow: inset 0 0 0 3px var(--c-primary-light); }

.hero-accordion__image {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.06);
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.hero-accordion__image--empty { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-black) 100%); }
.hero-accordion__panel--active .hero-accordion__image { transform: scale(1); }

.hero-accordion__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.78) 100%);
    transition: background .5s;
}
.hero-accordion__panel--active .hero-accordion__overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.78) 100%);
}
.hero-accordion__panel:not(.hero-accordion__panel--active) .hero-accordion__overlay { background: rgba(0,0,0,.55); }

.hero-accordion__vertical-label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center; white-space: nowrap;
    font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.65); opacity: 1;
    transition: opacity .3s .1s; pointer-events: none;
}
.hero-accordion__panel--active .hero-accordion__vertical-label { opacity: 0; transition: opacity .15s; }

.hero-accordion__copy {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 28px 32px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .35s .15s, transform .35s .15s;
    pointer-events: none;
}
.hero-accordion__panel--active .hero-accordion__copy { opacity: 1; transform: translateY(0); pointer-events: all; }

.hero-accordion__eyebrow {
    display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--c-white); margin-bottom: 8px;
}
.hero-accordion__desc {
    font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.75); margin-bottom: 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-accordion__cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; letter-spacing: .4px;
    color: var(--c-white); background: var(--c-accent);
    padding: 9px 18px; border-radius: var(--radius); transition: background .2s, transform .2s;
}
.hero-accordion__cta:hover { background: var(--c-accent-d); transform: translateY(-1px); color: var(--c-white); }

/* ── Mobile stacked accordion (≤ 900px) ─────────────────── */
@media (max-width: 900px) {
    .hero-accordion {
        flex-direction: column;
        height: auto;
        gap: 3px;
        border-radius: 10px;
    }
    .hero-accordion__panel {
        flex: none !important;
        height: 66px;
        min-height: 66px;
        cursor: default;
        transition: height .48s cubic-bezier(.4,0,.2,1), min-height .48s cubic-bezier(.4,0,.2,1);
    }
    .hero-accordion__panel--active {
        height: 264px;
        min-height: 264px;
    }
    .hero-accordion__panel--active::before {
        content: ''; position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px; background: var(--c-premium); z-index: 5;
    }
    .hero-accordion__panel--active .hero-accordion__overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.74) 100%);
    }
    .hero-accordion__panel:not(.hero-accordion__panel--active) .hero-accordion__overlay { background: rgba(0,0,0,.58); }
    .hero-accordion__vertical-label { display: none; }
    .hero-accordion__panel:not(.hero-accordion__panel--active)::after {
        content: attr(data-name);
        position: absolute; top: 50%; left: 20px; transform: translateY(-50%);
        font-size: 12px; font-weight: 600; letter-spacing: .3px;
        color: rgba(255,255,255,.88); pointer-events: none; z-index: 5;
    }
    .hero-accordion__copy { padding: 16px 20px 20px; }
    .hero-accordion__desc { -webkit-line-clamp: 2; margin-bottom: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-accordion__panel,
    .hero-accordion__image,
    .hero-accordion__overlay,
    .hero-accordion__copy { transition: none !important; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_hero-carousel.css                                      */
/* ──────────────────────────────────────────────────────────────────── */
/* ══ Hero Feature Carousel V2 (.hfc-*) ══════════════════════ */
.hfc-section {
    overflow: hidden;
    /* Nav is position:fixed — offset matches hero v1 behaviour */
    padding: 0 0 40px;
}

.card-nav + .hfc-section {
    padding-top: 30px;
}

html[data-theme="dark"] .card-nav + .hfc-section {
    background:
        linear-gradient(to bottom, rgba(15, 35, 61, .28), rgba(7, 17, 31, 0) 120px),
        var(--c-dark);
}

.hfc-shell {
    display: flex;
    min-height: 560px;
    border-radius: 18px;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

/* ── Left chip panel ─────────────────────────────── */
.hfc-left {
    position: relative;
    width: 36%;
    background: var(--c-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.hfc-fade {
    position: absolute; left: 0; right: 0;
    height: 80px; z-index: 2; pointer-events: none;
}
.hfc-fade--top    { top: 0;    background: linear-gradient(to bottom, var(--c-accent), transparent); }
.hfc-fade--bottom { bottom: 0; background: linear-gradient(to top,   var(--c-accent), transparent); }

.hfc-chip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 48px 24px;
    overflow-y: auto;
    scrollbar-width: none;
}
.hfc-chip-list::-webkit-scrollbar { display: none; }

.hfc-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.6);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .2s, color .2s, border-color .2s;
    width: 100%;
}
.hfc-chip:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.hfc-chip--active {
    background: var(--c-white);
    color: var(--c-accent);
    border-color: rgba(255,255,255,.25);
    font-weight: 700;
}
.hfc-chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .45;
    transition: opacity .2s;
}
.hfc-chip--active .hfc-chip-dot { opacity: 1; }
.hfc-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Right card stage ────────────────────────────── */
.hfc-right {
    flex: 1;
    position: relative;
    background: var(--c-dark);
    overflow: hidden;
    /* Force paint containment — clips 3D-transformed children that
       would otherwise bleed through overflow:hidden in some browsers */
    contain: paint;
}
.hfc-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}
.hfc-card {
    position: absolute;
    width: 68%;
    height: 80%;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.25,.8,.25,1), opacity .5s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.hfc-card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; }

/* Card states — tighter offsets so prev/next stay within panel */
.hfc-card--active { transform: translateX(0)    scale(1)    rotateY(0deg);   opacity: 1;   z-index: 20; cursor: default; }
.hfc-card--prev   { transform: translateX(-40%) scale(.78)  rotateY(10deg);  opacity: .3;  z-index: 10; cursor: pointer; }
.hfc-card--next   { transform: translateX( 40%) scale(.78)  rotateY(-10deg); opacity: .3;  z-index: 10; cursor: pointer; }
.hfc-card--hidden { transform: translateX(0)    scale(.6)   rotateY(0deg);   opacity: 0;   z-index:  0; pointer-events: none; }

/* Card overlay */
.hfc-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}
.hfc-badge {
    align-self: flex-start;
    padding: 4px 12px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
}
.hfc-card-body { }
.hfc-card-title {
    font-size: clamp(17px, 2.4vw, 24px);
    font-weight: 700; color: var(--c-white);
    margin: 0 0 6px; line-height: 1.3;
}
.hfc-card-desc {
    font-size: 13px; color: rgba(255,255,255,.6);
    margin: 0 0 14px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hfc-card-link {
    display: inline-flex; align-items: center;
    padding: 8px 18px;
    background: var(--c-accent);
    color: var(--c-white); border-radius: 7px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.hfc-card-link:hover { background: var(--c-accent-d); transform: translateY(-1px); }

/* ── Mobile: stacked layout ──────────────────────── */
@media (max-width: 820px) {
    .hfc-section    { padding-bottom: 20px; }
    .card-nav + .hfc-section { padding-top: 18px; }
    .hfc-shell      { flex-direction: column; min-height: auto; border-radius: 16px; box-shadow: 0 10px 36px rgba(0,0,0,.22); }

    /* ── Chip panel: scroll affordance via pseudo-element fades ─ */
    .hfc-left {
        width: 100%;
        min-height: 0;
        position: relative; /* pseudo-elements anchor here */
    }
    /* Left / right fade overlays — toggled by JS via data-scroll attr */
    .hfc-left::before,
    .hfc-left::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        width: 40px;
        z-index: 2;
        pointer-events: none;
        transition: opacity .22s ease;
    }
    .hfc-left::before {
        left: 0;
        background: linear-gradient(to right, var(--c-accent), transparent);
        opacity: 0;              /* hidden at scroll start */
    }
    .hfc-left::after {
        right: 0;
        background: linear-gradient(to left, var(--c-accent), transparent);
        opacity: 1;              /* visible at scroll start (content to the right) */
    }
    /* Scroll reached the end: hide right fade */
    .hfc-left[data-scroll="end"]::after    { opacity: 0; }
    /* Scrolled away from start: show left fade */
    .hfc-left[data-scroll="middle"]::before,
    .hfc-left[data-scroll="end"]::before   { opacity: 1; }

    .hfc-fade { display: none; }

    /* ── Chip list ──────────────────────────────────────────── */
    .hfc-chip-list {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 12px 16px 14px;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
        /* Remove static mask — dynamic fade handles affordance */
        -webkit-mask-image: none;
        mask-image: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; /* momentum on iOS */
    }
    .hfc-chip-list::-webkit-scrollbar { display: none; }

    /* ── Individual chip ────────────────────────────────────── */
    .hfc-chip {
        /* max-width ensures the NEXT chip always peeks into view */
        max-width: min(190px, calc(100vw - 130px));
        width: auto;
        padding: 7px 13px;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;
        border-radius: 16px;
        min-height: 34px;
        display: inline-flex;
        align-items: flex-start; /* align dot with first text line */
        scroll-snap-align: start;
        white-space: normal;     /* allow label to wrap to 2 lines */
    }
    /* Bullet dot — nudge to align with first text line */
    .hfc-chip-dot { margin-top: 3px; flex-shrink: 0; }

    /* ── Chip label: 2-line clamp for long names ────────────── */
    .hfc-chip-label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        line-height: 1.35;
        text-align: left;
    }

    /* ── Active chip: compact, clear, not dominant ─────────── */
    .hfc-chip--active {
        background: rgba(255,255,255,.92);
        box-shadow: 0 2px 6px rgba(0,0,0,.18);
    }

    /* ── Card stage ─────────────────────────────────────────── */
    .hfc-right { min-height: 0; aspect-ratio: 4/3; }
    .hfc-card  { width: 84%; height: 84%; border-radius: 12px; }
    .hfc-card--prev,
    .hfc-card--next   { opacity: 0 !important; pointer-events: none; }

    .hfc-badge         { font-size: 10px; padding: 3px 10px; }
    .hfc-card-title    { font-size: 18px; margin-bottom: 4px; }
    .hfc-card-desc     { display: none; }
    .hfc-card-link     { padding: 7px 16px; font-size: 12px; }
    .hfc-card-overlay  { padding: 14px 16px; }
}

@media (max-width: 480px) {
    .hfc-right         { aspect-ratio: 1/1; }
    .hfc-card          { width: 90%; height: 90%; }
    .hfc-card-title    { font-size: 16px; }
    .hfc-badge         { display: none; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_card-nav.css                                           */
/* ──────────────────────────────────────────────────────────────────── */
.card-nav {
    position: sticky;
    top: var(--topbar-h);
    z-index: 260;
    margin-top: var(--topbar-h);
    padding: 22px 0 0;
    background: linear-gradient(to bottom, rgba(241,245,249,.86), rgba(241,245,249,0));
}

.card-nav .container {
    max-width: min(1200px, calc(100vw - 40px));
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow:
        0 24px 70px rgba(15, 23, 42, .14),
        0 1px 0 rgba(255, 255, 255, .75) inset;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.card-nav.is-open .container {
    border-color: rgba(100, 116, 139, .30);
    box-shadow:
        0 30px 90px rgba(15, 23, 42, .20),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.card-nav__bar {
    min-height: 76px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 12px;
}

.card-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    flex: 0 0 auto;
}

.card-nav__logo img {
    height: 48px;
    width: auto;
    display: block;
}

.card-nav__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--c-accent);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.card-nav__toggle {
    grid-column: 1;
    justify-self: start;
    min-width: 58px;
    height: 58px;
    padding: 7px 8px 6px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background .18s ease, transform .18s ease;
}

.card-nav__toggle:hover {
    background: rgba(15, 23, 42, .06);
}

.card-nav__toggle-icon {
    height: 18px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.card-nav__toggle-line {
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
}

.card-nav__toggle-label {
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.35px;
    color: currentColor;
    opacity: .68;
    transform: translateX(.7px);
}

.card-nav.is-open .card-nav__toggle-line:first-child {
    transform: translateY(4.5px) rotate(45deg);
}

.card-nav.is-open .card-nav__toggle-line:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
}

.card-nav__panel {
    height: 0;
    overflow: hidden;
    border-top: 1px solid rgba(148, 163, 184, 0);
    opacity: 0;
    transform: translateY(-8px);
    transition:
        height .36s cubic-bezier(.22,1,.36,1),
        opacity .24s ease,
        transform .36s cubic-bezier(.22,1,.36,1),
        border-color .2s ease;
    will-change: height, opacity, transform;
}

.card-nav.is-open .card-nav__panel {
    opacity: 1;
    transform: translateY(0);
    border-top-color: rgba(148, 163, 184, .18);
}

.card-nav__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 10px 12px 12px;
}

.card-nav-card {
    position: relative;
    min-height: 228px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.14), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--card-nav-bg, #171321) 88%, #fff 12%), var(--card-nav-bg, #171321));
    color: var(--card-nav-text, #fff);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, .18),
        0 1px 0 rgba(255,255,255,.10) inset;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition:
        opacity .38s ease,
        transform .42s cubic-bezier(.22,1,.36,1),
        box-shadow .22s ease;
}

.card-nav-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(120deg, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.08) 72%, transparent);
    opacity: .55;
    pointer-events: none;
}

.card-nav-card::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    right: -44px;
    top: -48px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    filter: blur(10px);
    pointer-events: none;
}

.card-nav.is-open .card-nav-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card-nav.is-open .card-nav-card:nth-child(1) { transition-delay: .05s; }
.card-nav.is-open .card-nav-card:nth-child(2) { transition-delay: .10s; }
.card-nav.is-open .card-nav-card:nth-child(3) { transition-delay: .15s; }

.card-nav-card:hover {
    transform: translateY(-2px) scale(1.006);
    box-shadow:
        0 26px 54px rgba(15, 23, 42, .22),
        0 1px 0 rgba(255,255,255,.12) inset;
}

.card-nav-card__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.card-nav-card__links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
}

.card-nav-card__link {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-size: 16px;
    font-weight: 650;
    opacity: .86;
    transition: opacity .15s, transform .15s;
}

.card-nav-card__link:hover {
    opacity: 1;
    transform: translateX(3px);
}

.card-nav-card__link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    order: -1;
}

html[data-theme="dark"] .card-nav {
    background: linear-gradient(to bottom, rgba(7,17,31,.86), rgba(7,17,31,0));
}

html[data-theme="dark"] .card-nav .container {
    background: rgba(16, 24, 39, .92);
    border-color: rgba(148, 163, 184, .16);
    box-shadow:
        0 28px 86px rgba(0, 0, 0, .36),
        0 1px 0 rgba(255,255,255,.05) inset;
}

html[data-theme="dark"] .card-nav__toggle:hover {
    background: rgba(255,255,255,.06);
}

@media (max-width: 900px) {
    .card-nav { padding-top: 12px; }
    .card-nav .container { max-width: calc(100vw - 32px); border-radius: 18px; }
    .card-nav__bar { min-height: 66px; padding: 0 8px; }
    .card-nav__logo img { height: 40px; }
    .card-nav__cta { display: none; }
    .card-nav__toggle { min-width: 52px; height: 52px; border-radius: 14px; padding-top: 6px; }
    .card-nav__toggle-line { width: 24px; }
    .card-nav__toggle-label { font-size: 8px; letter-spacing: 1.1px; }
    .card-nav__cards { grid-template-columns: 1fr; }
    .card-nav-card { min-height: 168px; padding: 20px; }
    .card-nav-card__title { font-size: 22px; }
    .card-nav-card__link { font-size: 15px; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_cookie-banner.css                                      */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Cookie Consent Banner + Preferences Modal ────────────── */

/* ── Banner (bottom bar) ─────────────────────────────────── */
.cb-banner {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9998;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -4px 32px rgba(0,0,0,.12);
    padding: 16px 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    overflow: hidden;
}
.cb-banner.is-visible { display: flex; }

.cb-banner__content {
    flex: 1;
    min-width: 260px;
    max-width: 680px;
}
.cb-banner__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 6px;
}
.cb-banner__text {
    font-size: 13px;
    color: var(--c-text-muted);
    line-height: 1.5;
}
.cb-banner__link {
    color: var(--c-accent);
    text-decoration: underline;
    margin-left: 4px;
}
.cb-banner__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Cookie Buttons ──────────────────────────────────────── */
.cb-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    transition: opacity .15s, background .15s;
}
.cb-btn:hover { opacity: .88; }
.cb-btn--reject {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    color: var(--c-text-2);
}
.cb-btn--manage {
    background: var(--c-surface);
    border: 1.5px solid var(--c-primary);
    color: var(--c-primary);
}
.cb-btn--accept {
    background: var(--c-primary);
    border: none;
    color: var(--c-white);
}
/* Modal variants (slightly bigger) */
.cb-btn--modal {
    padding: 9px 16px;
}
.cb-btn--accept-modal {
    background: var(--c-border);
    border: none;
    color: var(--c-text);
    padding: 9px 16px;
}
.cb-btn--save {
    background: var(--c-primary);
    border: none;
    color: var(--c-white);
    padding: 9px 18px;
}

/* ── Modal ───────────────────────────────────────────────── */
.cb-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cb-modal.is-visible { display: flex; }

.cb-modal__box {
    background: var(--c-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 24px 80px rgba(0,0,0,.2);
    overflow: hidden;
}
.cb-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--c-border);
}
.cb-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
}
.cb-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-size: 20px; line-height: 1;
    transition: background .15s;
    font-family: inherit;
}
.cb-modal__close:hover { background: var(--c-bg); }
.cb-modal__body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cb-modal__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--c-bg);
    border-radius: 8px;
    border: 1px solid var(--c-border);
}
.cb-modal__row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
}
.cb-modal__row-desc {
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.5;
}
.cb-badge-active {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-success-text);
    background: var(--c-success-bg);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 2px;
}
.cb-modal__row label { cursor: pointer; }
.cb-modal__row input[type="checkbox"] {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--c-primary);
}
.cb-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--c-border);
    gap: 8px;
    flex-wrap: wrap;
}
.cb-modal__footer-right { display: flex; gap: 8px; }

/* Cookie settings link in footer (already uses .footer__link) */
.cb-settings-link {
    font-size: 11px;
    color: rgba(255,255,255,.25);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_footer.css                                             */
/* ──────────────────────────────────────────────────────────────────── */
.footer { background: var(--c-dark); padding: 80px 0 36px; }
.footer__grid    { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer__logo    { height: 26px; opacity: 1; margin-bottom: 14px; }
.footer__tagline { font-size: 13px; color: rgba(255,255,255,.3); line-height: 1.7; max-width: 220px; margin-bottom: 20px; }
.footer__heading { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 18px; }
.footer__links   { display: flex; flex-direction: column; gap: 9px; }
.footer__link    { font-size: 13px; color: rgba(255,255,255,.45); transition: color .2s; }
.footer__link:hover { color: rgba(255,255,255,.9); }
.footer__bottom  { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.06); }
.footer__copy    { font-size: 12px; color: rgba(255,255,255,.2); }
.footer__social  { display: flex; gap: 12px; }
.footer__social a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); transition: all .2s; }
.footer__social a:hover { border-color: var(--c-premium); color: var(--c-premium); }
.footer__social svg { width: 14px; height: 14px; }


/* ──────────────────────────────────────────────────────────────────── */
/* components/_page-hero.css                                          */
/* ──────────────────────────────────────────────────────────────────── */
.page-hero {
    padding-top: 32px;
    min-height: 300px;
    background: var(--c-cream);
    display: flex;
    align-items: flex-end;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--c-cream-d);
}
.page-hero__label   { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-grey-5); margin-bottom: 10px; }
.page-hero__label a { color: var(--c-primary); }
.page-hero__title   { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 56px); font-weight: 600; color: var(--c-text); line-height: 1.12; }
.page-hero--compact { min-height: 0; padding-bottom: 40px; }

.page-hero:not(.page-hero--compact) {
    min-height: 150px;
    padding-bottom: 24px;
}

.page-hero--breadcrumb {
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    align-items: center;
}
.page-hero--breadcrumb .page-hero__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text-3);
    letter-spacing: 1.2px;
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_lightbox.css                                           */
/* ──────────────────────────────────────────────────────────────────── */
#lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.93);
    flex-direction: column; align-items: center; justify-content: center;
}
#lightbox.is-open { display: flex; }
[data-lightbox]   { cursor: zoom-in; }

#lb-img-wrap { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; }
#lightbox-img {
    max-width: 90vw; max-height: 78vh;
    object-fit: contain; border-radius: 6px; display: block;
    transition: opacity .18s ease; user-select: none; -webkit-user-drag: none;
}
#lightbox-img.lb-fade { opacity: 0; }

#lb-footer {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; padding: 12px 60px 18px; min-height: 48px; width: 100%;
    pointer-events: none;
}
#lightbox-caption { text-align: center; color: rgba(255,255,255,.82); }
#lightbox-caption strong { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
#lightbox-caption span   { font-size: 12px; color: rgba(255,255,255,.52); }
#lb-counter { font-size: 12px; color: rgba(255,255,255,.38); white-space: nowrap; flex-shrink: 0; }

.lb-btn {
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.82); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .18s, color .18s, opacity .2s; flex-shrink: 0;
}
.lb-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.lb-btn svg   { display: block; }

#lb-close { position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; z-index: 10; }
#lb-prev, #lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; z-index: 10; }
#lb-prev { left: 18px; }
#lb-next { right: 18px; }
#lb-prev[hidden], #lb-next[hidden] { display: none; }

@media (max-width: 600px) {
    #lb-prev { left: 8px; } #lb-next { right: 8px; }
    #lb-prev, #lb-next { width: 42px; height: 42px; }
    #lb-close { top: 10px; right: 10px; width: 36px; height: 36px; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* components/_animations.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_stats.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
.stats-bar {
    background: var(--c-black);
    padding: 24px 0;
    border-top: 1px solid rgba(15,58,109,.4);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stats-grid .stat-item { text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.06); }
.stats-grid .stat-item:last-child { border-right: none; }
.stat-item__value {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600; color: var(--c-white); line-height: 1; margin-bottom: 10px;
}
.stat-item__suffix { font-size: clamp(24px, 2.5vw, 36px); }
.stat-item__label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,.4);
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_cards.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Horizontal scroll product cards ────────────────────── */
.cards-scroll-outer { position: relative; }
.cards-scroll {
    display: flex; gap: 20px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.cards-scroll::-webkit-scrollbar { display: none; }

.prod-card {
    flex: 0 0 300px; scroll-snap-align: start;
    background: var(--c-white); border: 1px solid var(--c-grey-1);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s; display: block;
}
.prod-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); border-color: var(--c-primary-light); }
.prod-card__img-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-grey-1); }
.prod-card__img      { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.prod-card:hover .prod-card__img { transform: scale(1.04); }
.prod-card__body     { padding: 20px; }
.prod-card__title    { font-size: 15px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.prod-card__desc     { font-size: 12px; color: var(--c-grey-5); line-height: 1.6; margin-bottom: 14px; }
.prod-card__link     { font-size: 12px; font-weight: 600; color: var(--c-primary); display: flex; align-items: center; gap: 6px; transition: gap .2s; }
.prod-card:hover .prod-card__link { gap: 10px; }

.scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: var(--c-white);
    border: 1px solid var(--c-grey-1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; box-shadow: 0 2px 12px rgba(0,0,0,.1);
    transition: all .2s; color: var(--c-dark);
}
.scroll-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.scroll-btn--prev { left: -20px; }
.scroll-btn--next { right: -20px; }

@media (max-width: 768px) {
    /* 72vw card leaves ~40px peek of next card at 360px — clear scroll affordance */
    .prod-card { flex: 0 0 72vw; scroll-snap-stop: always; }
}

/* ── Category cards (grid layout) ───────────────────────── */
.cat-card {
    position: relative; display: block; overflow: hidden;
    background: var(--c-dark-2); aspect-ratio: 4/3; border-radius: var(--radius);
}
.cat-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cat-card:hover .cat-card__img { transform: scale(1.04); }
.cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 55%); }
.cat-card__content { position: absolute; bottom: 0; left: 0; padding: 24px; }
.cat-card__title   { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--c-white); margin-bottom: 4px; }
.cat-card__sub     { font-size: 12px; color: rgba(255,255,255,.6); }
.cat-card__arrow   { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); opacity: 0; transform: translateY(4px); transition: all .25s; }
.cat-card:hover .cat-card__arrow { opacity: 1; transform: translateY(0); }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_featured.css                                             */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Featured product grid (image + content) ─────────────── */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.featured__img-wrap {
    position: relative; border-radius: 10px; overflow: hidden;
    aspect-ratio: 4/5; background: var(--c-primary);
}
.featured__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.featured__img-placeholder {
    width: 100%; height: 100%; min-height: 400px;
    background: var(--c-grey-1); display: flex; align-items: center; justify-content: center;
}
.featured__img-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(7,17,31,.72); backdrop-filter: blur(6px);
    padding: 18px 24px; font-size: 10px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.7);
}

/* Benefit checklist */
.benefit-list { list-style: none; padding: 0; margin: 18px 0 24px; }
.benefit-list li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; color: var(--c-grey-5); line-height: 1.6;
    padding: 8px 0; border-bottom: 1px solid var(--c-grey-1);
}
.benefit-list li:last-child { border-bottom: none; }
.benefit-list li::before {
    content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px;
    background: var(--c-primary); border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l3 3 4-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px; background-position: center; background-repeat: no-repeat;
}

/* Product detail prose & video */
.prod-full-desc { font-size: 15px; color: var(--c-grey-5); line-height: 1.85; }
.prod-full-desc h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--c-dark); margin: 28px 0 12px; }
.prod-full-desc p  { margin-bottom: 14px; }
.prod-full-desc strong { color: var(--c-dark); font-weight: 600; }
.prod-video { width: 100%; border-radius: 12px; display: block; box-shadow: 0 4px 24px rgba(0,0,0,.10); }
.prod-video-badge {
    position: absolute; top: 14px; right: 14px;
    display: flex; align-items: center; gap: 7px;
    background: rgba(7,17,31,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .5px;
    padding: 7px 13px 7px 10px; border-radius: 40px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.18); transition: background .2s, transform .2s;
}
.prod-video-badge:hover { background: rgba(7,17,31,.85); transform: scale(1.04); color: var(--c-white); }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_why.css                                                  */
/* ──────────────────────────────────────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
}
.why__left .section-subtitle { margin-bottom: 24px; }
.why-partners { display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px 40px; margin-top: 8px; align-items: center; }
.why-partner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-top: 1px solid var(--c-grey-1);
}
.why-partner img      { height: 36px; }
.why-partner__text    { font-size: 11px; color: var(--c-grey-5); line-height: 1.5; max-width: 200px; }
.why-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.why-card {
    background: var(--c-cream); border: 1px solid var(--c-cream-d); border-radius: 10px;
    padding: 22px 24px; transition: box-shadow .25s, border-color .25s;
    display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 10px; align-items: center;
}
.why-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); border-color: var(--c-premium); }
.why-card__icon {
    grid-column: 1; grid-row: 1;
    width: 40px; height: 40px; background: var(--c-primary); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: var(--c-white);
}
.why-card__icon svg  { width: 18px; height: 18px; }
.why-card__title     { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.why-card__text      { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--c-grey-5); line-height: 1.65; }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_focus-rail.css                                           */
/* ──────────────────────────────────────────────────────────────────── */
/* ══ Highlights Focus Rail V2 (.fr-*) ══════════════════════ */

/* ── Section shell ───────────────────────────────────────── */
.fr-section {
    position: relative;
    background: var(--c-dark);
    overflow: hidden;
    padding: 64px 0;
}

/* Ambient blurred background — updated by JS */
.fr-bg {
    position: absolute;
    inset: -5%;
    background-size: cover;
    background-position: center;
    filter: blur(64px) brightness(.22) saturate(1.6);
    pointer-events: none;
    z-index: 0;
    transition: background-image .7s ease;
}

.fr-container {
    position: relative;
    z-index: 1;
}

/* ── Heading row ─────────────────────────────────────────── */
.fr-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.fr-section-title {
    color: var(--c-white);
    margin-bottom: 6px;
}

.fr-section-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,.4);
    line-height: 1.7;
    max-width: 480px;
    margin: 0;
}

.fr-all-btn {
    flex-shrink: 0;
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.65);
    white-space: nowrap;
}
.fr-all-btn:hover {
    border-color: var(--c-premium);
    color: var(--c-premium);
    background: transparent;
}

/* ── Rail: stage + info ──────────────────────────────────── */
.fr-rail {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── 3-D card stage ──────────────────────────────────────── */
.fr-stage {
    position: relative;
    height: 360px;
    perspective: 1100px;
    perspective-origin: 50% 45%;
    /* overflow visible so side cards show outside container */
    overflow: visible;
    cursor: ew-resize;
}

/* Individual cards — JS applies transforms */
.fr-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 270px;
    height: 360px;
    margin-top: -180px;
    margin-left: -135px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .55s cubic-bezier(.25,.8,.25,1),
                opacity .55s ease,
                filter .55s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.fr-card-inner {
    width: 100%;
    height: 100%;
}

.fr-card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

.fr-card--active {
    cursor: pointer;
    box-shadow: 0 28px 80px rgba(0,0,0,.6);
}

/* ── Info panel ──────────────────────────────────────────── */
.fr-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 0 4px;
    min-height: 80px;
}

.fr-info-text {
    flex: 1;
    min-width: 0;
}

.fr-meta {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-premium);
    margin-bottom: 10px;
    min-height: 14px;
}

.fr-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 600;
    color: var(--c-white);
    line-height: 1.2;
    margin: 0 0 10px;
    letter-spacing: -.2px;
    transition: opacity .3s;
}

.fr-desc {
    font-size: 14px;
    color: rgba(255,255,255,.4);
    line-height: 1.7;
    margin: 0;
    max-width: 540px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity .3s;
}

/* ── Controls: prev / count / next + link ─────────────────── */
.fr-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.fr-btn {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, color .2s, background .2s;
    flex-shrink: 0;
}

.fr-btn:hover {
    border-color: var(--c-premium);
    color: var(--c-premium);
    background: rgba(176,141,87,.08);
}

.fr-count {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.28);
    letter-spacing: .5px;
    min-width: 38px;
    text-align: center;
}

.fr-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--c-accent);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, transform .15s;
}

.fr-link:hover {
    background: var(--c-accent-d);
    transform: translateY(-1px);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .fr-stage { height: 330px; }
    .fr-card  { width: 250px; height: 330px; margin-top: -165px; margin-left: -125px; }
}

@media (max-width: 900px) {
    .fr-heading   { margin-bottom: 28px; }
    .fr-stage     { height: 300px; }
    .fr-card      { width: 230px; height: 300px; margin-top: -150px; margin-left: -115px; }
    .fr-info      { align-items: flex-start; }
}

@media (max-width: 768px) {
    .fr-section   { padding: 44px 0; }
    .fr-heading   { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
    .fr-stage     { height: 270px; }
    .fr-card      { width: 210px; height: 270px; margin-top: -135px; margin-left: -105px; }
    .fr-rail      { gap: 28px; }
    .fr-info      { flex-direction: column; align-items: flex-start; gap: 18px; }
    .fr-title     { font-size: 20px; }
    .fr-controls  { width: 100%; justify-content: flex-start; }
}

@media (max-width: 480px) {
    .fr-section   { padding: 36px 0; }
    .fr-stage     { height: 240px; }
    .fr-card      { width: 190px; height: 245px; margin-top: -122px; margin-left: -95px; }
    .fr-desc      { display: none; }
    .fr-title     { font-size: 18px; }
    .fr-link      { font-size: 12px; padding: 8px 16px; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_split-cta.css                                            */
/* ──────────────────────────────────────────────────────────────────── */
.split-cta { background: var(--c-dark); padding: 64px 0; }
.split-cta__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.split-cta__badge {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: var(--c-premium); margin-bottom: 20px;
}
.split-cta__title {
    font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 600; color: var(--c-white); line-height: 1.18; margin-bottom: 16px; letter-spacing: -.3px;
}
.split-cta__desc    { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; margin-bottom: 24px; max-width: 400px; }
.split-cta__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.split-cta__right   { padding-top: 8px; }

.contact-info-cards { display: flex; flex-direction: column; gap: 12px; }
.contact-card {
    display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius); transition: background .2s;
}
.contact-card:hover { background: rgba(255,255,255,.07); }
.contact-card__icon {
    width: 36px; height: 36px; background: rgba(15,58,109,.18); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-primary-light); flex-shrink: 0;
}
.contact-card__icon svg { width: 16px; height: 16px; }
.contact-card__label    { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 4px; }
.contact-card__value    { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); line-height: 1.5; }
.contact-card__value a  { color: inherit; transition: color .2s; }
.contact-card__value a:hover { color: var(--c-primary-light); }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_products.css                                             */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Series cards — text left, image right ───────────────── */
.series-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.series-card {
    display: flex; flex-direction: row; align-items: stretch;
    border: 1px solid var(--c-grey-1); border-radius: 12px;
    overflow: hidden; background: var(--c-white);
    box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: box-shadow .2s;
}
.series-card:hover         { box-shadow: 0 6px 24px rgba(0,0,0,.09); }
.series-card__info         { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.series-card__name         { font-size: 18px; font-weight: 600; color: var(--c-dark); letter-spacing: -.3px; }
.series-card__divider      { width: 32px; height: 2px; background: var(--c-primary); border-radius: 2px; }
.series-card__desc         { font-size: 14px; color: var(--c-grey-5); line-height: 1.7; margin: 0; }
.series-card__img-wrap     { width: 220px; flex-shrink: 0; background: var(--c-grey-1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.series-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .series-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
    .series-card__img-wrap { width: 140px; }
    .series-card__info     { padding: 16px; }
    .series-card__name     { font-size: 15px; }
}

/* ── Subcategory grid (product group pages) ──────────────── */
.subcategory-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.subcategory-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
.subcategory-grid--1 { grid-template-columns: minmax(0, 380px); justify-content: center; }

.subcat-card {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--c-grey-1); text-decoration: none; color: inherit;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.subcat-card:hover { box-shadow: 0 16px 48px rgba(10,20,60,.1); transform: translateY(-5px); border-color: var(--c-grey-2); }
.subcat-card__img  { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-grey-1); flex-shrink: 0; }
.subcat-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.subcat-card:hover .subcat-card__img img { transform: scale(1.04); }
.subcat-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-grey-3); }
.subcat-card__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.subcat-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--c-dark); margin-bottom: 8px; line-height: 1.3; }
.subcat-card__desc { font-size: 14px; color: var(--c-grey-5); line-height: 1.65; margin: 0 0 20px; flex: 1; }
.subcat-card__cta  { font-size: 13px; font-weight: 600; color: var(--c-primary); display: flex; align-items: center; gap: 6px; margin-top: auto; transition: gap .2s ease; }
.subcat-card:hover .subcat-card__cta { gap: 10px; }

/* ── Group intro (no-image text variant) ─────────────────── */
.group-intro {
    max-width: 780px; margin: 0 auto; text-align: center; padding: 64px 0 56px;
}
.group-intro__label {
    display: inline-block; font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: var(--c-primary); margin-bottom: 16px;
}
.group-intro__title {
    font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px);
    font-weight: 400; color: var(--c-dark); margin-bottom: 20px; line-height: 1.2;
}
.group-intro__desc    { font-size: 17px; color: var(--c-grey-5); line-height: 1.75; margin-bottom: 36px; }
.group-intro__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Product detail page helpers ────────────────────────── */
.prod-intro      { font-size: 17px; color: var(--c-grey-5); margin-bottom: 20px; line-height: 1.7; }
.prod-desc       { font-size: 15px; color: var(--c-grey-5); line-height: 1.85; margin-bottom: 28px; }
.prod-group-desc { font-size: 15px; color: var(--c-grey-5); line-height: 1.85; }
.prod-actions    { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.prod-section-block { margin-top: 28px; }
.prod-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: var(--c-text-3);
    padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
    margin-bottom: 2px;
}
.prod-benefit-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.prod-benefit-tag {
    display: inline-flex; align-items: center; min-height: 34px;
    padding: 7px 12px; border: 1px solid var(--c-border); border-radius: 999px;
    background: var(--c-surface); color: var(--c-text-2);
    font-size: 13px; font-weight: 650; line-height: 1.35;
}
.prod-app-tag {
    background: color-mix(in srgb, var(--c-accent) 5%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-accent) 25%, var(--c-border));
}

/* Trix rich text output — consistent styling inside description containers */
.prod-desc p, .prod-group-desc p           { color: var(--c-grey-5); font-size: 15px; line-height: 1.85; margin-bottom: 10px; }
.prod-desc p:last-child,
.prod-group-desc p:last-child              { margin-bottom: 0; }
.prod-desc ul, .prod-desc ol,
.prod-group-desc ul, .prod-group-desc ol   { color: var(--c-grey-5); font-size: 15px; line-height: 1.85; padding-left: 20px; margin-bottom: 10px; }
.prod-desc li, .prod-group-desc li         { margin-bottom: 4px; }
.prod-desc strong, .prod-group-desc strong { color: var(--c-dark); font-weight: 600; }
.prod-desc em, .prod-group-desc em         { font-style: italic; }
.prod-desc a, .prod-group-desc a           { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.prod-desc a:hover, .prod-group-desc a:hover { opacity: .8; }
.section-title--flat { margin-bottom: 0; }

/* ── Feature items (numbered list, product detail) ───────── */
.feature-item        { padding: 28px 0; border-top: 1px solid var(--c-grey-1); }
.feature-item__num   { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--c-primary); margin-bottom: 10px; }
.feature-item__title { font-size: 17px; font-weight: 600; color: var(--c-text); margin-bottom: 8px; }
.feature-item__text  { font-size: 14px; color: var(--c-grey-5); line-height: 1.7; }

/* Product group premium showcase */
.product-group-hero {
    padding: 34px 0 42px;
    background:
        radial-gradient(circle at 84% 8%, rgba(42, 144, 232, .18), transparent 32%),
        linear-gradient(180deg, rgba(241,245,249,.88), rgba(255,255,255,1));
}
.product-group-hero__shell {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 22px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .12);
}
.product-group-hero__media {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: var(--c-dark);
}
.product-group-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7,17,31,0) 64%, rgba(7,17,31,.18)),
        linear-gradient(to top, rgba(7,17,31,.20), transparent 44%);
    pointer-events: none;
}
.product-group-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-group-hero__tag {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 1;
    max-width: calc(100% - 44px);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(7, 17, 31, .62);
    color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-group-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3.2vw, 42px);
}
.product-group-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--c-text-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.product-group-hero__eyebrow a {
    color: var(--c-accent);
    text-decoration: none;
}
.product-group-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0;
}
.product-group-hero__lead {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text-2);
}
.product-group-hero__desc-wrap {
    position: relative;
    margin-top: 14px;
    overflow: hidden;
    transition: max-height .28s ease;
}
.product-group-hero__desc-wrap.is-collapsed {
    max-height: 96px;
}
.product-group-hero__desc-wrap.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
    pointer-events: none;
}
.product-group-hero__desc { margin-top: 0; font-size: 14px; line-height: 1.72; }
.product-group-hero__more {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.product-group-hero__more:hover { color: var(--c-primary-light); }
.product-group-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.product-group-rich-section { padding-top: 58px; }
.product-models-section {
    padding-top: 46px;
    padding-bottom: 58px;
    background:
        linear-gradient(180deg, rgba(241,245,249,.58), rgba(255,255,255,0) 180px),
        var(--c-bg);
}
.product-models-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}
.product-models-head p {
    max-width: 520px;
    margin: 0;
    color: var(--c-text-2);
    font-size: 15px;
    line-height: 1.7;
}
.product-models-section .subcat-card {
    background: var(--c-surface);
    border-color: var(--c-border);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}
.product-models-section .subcat-card:hover {
    box-shadow: 0 26px 62px rgba(15,23,42,.14);
    transform: translateY(-4px);
    border-color: rgba(14,105,191,.26);
}
.product-models-section .subcat-card__img {
    aspect-ratio: 1 / 1;
    padding: 12px;
}
.product-models-section .subcat-card__img img {
    border-radius: 10px;
}

/* Product catalog */
.catalog-hero {
    padding: 58px 0 34px;
    background:
        radial-gradient(circle at 82% 4%, rgba(42, 144, 232, .14), transparent 30%),
        linear-gradient(180deg, rgba(241,245,249,.92), rgba(255,255,255,1));
}
.catalog-hero__label {
    margin-bottom: 12px;
    color: var(--c-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.catalog-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 4.5vw, 58px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--c-text);
}
.catalog-hero__desc {
    max-width: 640px;
    margin: 14px 0 0;
    color: var(--c-text-2);
    font-size: 16px;
    line-height: 1.65;
}
.catalog-section { padding: 42px 0 72px; background: var(--c-bg); }
.catalog-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.catalog-filters {
    position: sticky;
    top: 112px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}
.catalog-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.catalog-filters__head h2 {
    margin: 0;
    color: var(--c-text);
    font-size: 16px;
    font-weight: 800;
}
.catalog-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.catalog-filter-block {
    padding: 18px 0;
    border-top: 1px solid var(--c-border);
}
.catalog-filter-block:first-of-type { padding-top: 0; border-top: 0; }
.catalog-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .8px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}
.catalog-filter-title__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.catalog-filter-unit {
    color: var(--c-text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.catalog-filter-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
    opacity: .72;
}
.catalog-filter-block.is-open .catalog-filter-chevron {
    transform: translateY(2px) rotate(225deg);
}
.catalog-filter-options {
    display: grid;
    gap: 9px;
    max-height: 238px;
    overflow: auto;
    padding-right: 4px;
}
.catalog-filter-options[hidden] { display: none; }
.catalog-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}
.catalog-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--c-accent);
}
.catalog-main { min-width: 0; }
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-2);
    font-size: 14px;
}
.catalog-count { color: var(--c-text); font-weight: 800; }
.catalog-filter-toggle {
    display: none;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: 800;
}
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.catalog-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.catalog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14,105,191,.24);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .12);
}
.catalog-card.is-hidden { display: none; }
.catalog-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e8eef5;
}
.catalog-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s var(--ease);
}
.catalog-card:hover .catalog-card__media img { transform: scale(1.035); }
.catalog-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(14,105,191,.12));
}
.catalog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}
.catalog-card__group {
    min-height: 16px;
    margin-bottom: 8px;
    color: var(--c-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.catalog-card__title {
    margin: 0;
    color: var(--c-text);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}
.catalog-card__meta {
    margin: 10px 0 0;
    color: var(--c-text-2);
    font-size: 13px;
    line-height: 1.45;
}
.catalog-card__price {
    margin-top: 14px;
    color: var(--c-text);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}
.catalog-card__price span {
    color: var(--c-text-3);
    font-size: 12px;
    font-weight: 700;
}
.catalog-card__link {
    margin-top: auto;
    padding-top: 18px;
    color: var(--c-accent);
    font-size: 13px;
    font-weight: 850;
}
.catalog-empty {
    display: none;
    padding: 26px;
    border: 1px dashed var(--c-border);
    border-radius: 14px;
    color: var(--c-text-2);
    background: rgba(255,255,255,.48);
}
.catalog-empty.is-visible { display: block; }

html[data-theme="dark"] .product-group-hero {
    background:
        radial-gradient(circle at 84% 8%, rgba(42, 144, 232, .16), transparent 34%),
        linear-gradient(180deg, rgba(7,17,31,1), rgba(7,17,31,.92));
}
html[data-theme="dark"] .product-group-hero__shell {
    background: rgba(16, 24, 39, .74);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 28px 88px rgba(0,0,0,.32);
}
html[data-theme="dark"] .product-group-hero__desc-wrap.is-collapsed::after {
    background: linear-gradient(to bottom, rgba(16,24,39,0), rgba(16,24,39,.96));
}
html[data-theme="dark"] .product-models-section {
    background:
        linear-gradient(180deg, rgba(15, 35, 61, .22), rgba(7,17,31,0) 180px),
        var(--c-dark);
}
html[data-theme="dark"] .product-models-section .subcat-card {
    box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
html[data-theme="dark"] .product-models-section .subcat-card__img {
    background: #0b1628;
}
html[data-theme="dark"] .catalog-hero {
    background:
        radial-gradient(circle at 82% 4%, rgba(42, 144, 232, .14), transparent 32%),
        linear-gradient(180deg, rgba(7,17,31,.98), rgba(7,17,31,.9));
}
html[data-theme="dark"] .catalog-card__media { background: #101827; }
html[data-theme="dark"] .catalog-empty { background: rgba(16,24,39,.55); }

@media (max-width: 980px) {
    .product-group-hero__shell { grid-template-columns: 1fr; }
    .product-group-hero__media { min-height: 360px; }
    .product-models-head { display: block; }
    .product-models-head p { margin-top: 12px; }
    .catalog-shell { grid-template-columns: 1fr; }
    .catalog-filters {
        position: static;
        display: none;
        max-height: none;
        overflow: visible;
    }
    .catalog-filters.is-open { display: block; }
    .catalog-filter-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .product-group-hero { padding: 22px 0 32px; }
    .product-group-hero__shell { border-radius: 18px; }
    .product-group-hero__media { min-height: 260px; }
    .product-group-hero__content { padding: 24px 20px 26px; }
    .product-group-hero__title { font-size: clamp(26px, 8vw, 34px); }
    .product-group-hero__lead { font-size: 14px; }
    .product-group-hero__actions { flex-direction: column; align-items: stretch; }
    .product-group-hero__actions .btn { justify-content: center; }
    .product-group-hero__desc-wrap.is-collapsed { max-height: 92px; }
    .product-models-section { padding-top: 36px; padding-bottom: 48px; }
    .catalog-hero { padding: 36px 0 24px; }
    .catalog-section { padding: 28px 0 52px; }
    .catalog-grid { grid-template-columns: 1fr; }
    .catalog-toolbar { align-items: stretch; flex-direction: column; }
    .catalog-filter-toggle { width: 100%; }
    .catalog-card__body { padding: 18px; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_product-ecom.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
/* ── PRODUCT E-COMMERCE LAYOUT ──────────────────────────── */

.prod-ecom-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 44px;
    align-items: start;
    padding: 0;
}

@media (max-width: 900px) {
    .prod-ecom-hero { grid-template-columns: 1fr; gap: 28px; }
    .prod-ecom__images { position: static; }
    .prod-ecom__main-img { padding: 20px; }
}

.product-detail-hero-section { padding: 36px 0 44px; }
.product-detail-tabs-section { padding: 34px 0 40px; }
.product-detail-related-section { padding: 0 0 44px; }

@media (max-width: 768px) {
    .product-detail-hero-section { padding: 28px 0 34px; }
    .product-detail-tabs-section { padding: 32px 0; }
    .product-detail-related-section { padding-bottom: 36px; }
    .prod-ecom__title { font-size: 26px; }
    .prod-ecom__specs { padding: 16px; }
    .prod-ecom__spec-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
}

/* Left: Image Panel */
.prod-ecom__images {
    position: relative;
}

.prod-ecom__main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    padding: 28px;
    cursor: zoom-in;
    box-shadow: 0 12px 36px rgba(15,23,42,.06);
}

.prod-ecom__main-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-3);
}

.prod-ecom__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.prod-ecom__thumb {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--c-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.prod-ecom__thumb:hover,
.prod-ecom__thumb.is-active {
    border-color: var(--c-accent);
}

.prod-ecom__thumb:hover {
    transform: translateY(-1px);
}

.prod-ecom__thumb.is-active {
    box-shadow: 0 0 0 2px var(--c-accent-dim);
}

/* Right: Info + CTA Panel */
.prod-ecom__info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 2px;
}

.prod-ecom__group-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-accent);
    text-decoration: none;
}

.prod-ecom__group-link:hover { opacity: .75; }

.prod-ecom__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.14;
    color: var(--c-text);
    margin: 0;
    letter-spacing: 0;
}

.prod-ecom__short-desc {
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.55;
    margin: 0;
}

/* Benefits in info panel */
.prod-ecom__benefits {
    list-style: none;
    padding: 0;
    margin: 2px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.prod-ecom__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--c-text-2);
}

.prod-ecom__specs {
    margin-top: 4px;
    padding: 18px 20px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--c-surface);
}

.prod-ecom__specs-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 12px;
}

.prod-ecom__specs-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.prod-ecom__spec-row {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) 1fr;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--c-border);
}

.prod-ecom__spec-label,
.prod-ecom__spec-value {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.prod-ecom__spec-label { color: var(--c-text-3); }
.prod-ecom__spec-value { color: var(--c-text); font-weight: 600; }
.prod-ecom__spec-unit  { color: var(--c-text-2); font-weight: 500; }

.prod-ecom__benefits li::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    background: var(--c-accent);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5 6.5-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Variant selector */
.prod-ecom__variants {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prod-ecom__variants-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-text-3);
}

.prod-ecom__variant-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prod-ecom__variant-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.prod-ecom__variant-btn[data-lightbox] {
    cursor: zoom-in;
}

.prod-ecom__variant-btn[data-lightbox]::after {
    content: '';
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    background: currentColor;
    opacity: .72;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 3.5h6v6M12.5 3.5l-7 7M3.5 5v7.5h7.5' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 3.5h6v6M12.5 3.5l-7 7M3.5 5v7.5h7.5' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.prod-ecom__variant-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.prod-ecom__variant-btn.is-active {
    border-color: var(--c-accent);
    background: var(--c-accent-dim, rgba(26,82,118,.08));
    color: var(--c-accent);
    font-weight: 600;
}

/* Variant detail panel */
.prod-ecom__variant-detail {
    padding: 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.6;
    display: none;
}

.prod-ecom__variant-detail.is-visible { display: block; }

/* Quick Quote CTA Box */
.prod-ecom__cta-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prod-ecom__cta-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}

.prod-ecom__cta-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prod-ecom__cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.prod-ecom__cta-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: 7px;
    font-size: 13px;
    background: var(--c-bg);
    color: var(--c-text);
    transition: border-color .15s;
    box-sizing: border-box;
    font-family: inherit;
}

.prod-ecom__cta-input:focus {
    outline: none;
    border-color: var(--c-accent);
}

.prod-ecom__cta-input.is-error { border-color: #e53e3e; }

.prod-ecom__cta-textarea {
    resize: vertical;
    min-height: 72px;
}

.prod-ecom__cta-submit {
    width: 100%;
    padding: 13px;
    background: var(--c-accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    font-family: inherit;
}

.prod-ecom__cta-submit:hover { opacity: .9; }
.prod-ecom__cta-submit:disabled { opacity: .5; cursor: not-allowed; }

.prod-ecom__cta-success {
    display: none;
    padding: 12px;
    background: #d1fae5;
    border: 1px solid #34d399;
    border-radius: 7px;
    font-size: 13px;
    color: #065f46;
    text-align: center;
}

.prod-ecom__cta-error {
    display: none;
    padding: 10px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 7px;
    font-size: 12px;
    color: #991b1b;
}

.prod-ecom__cta-hint {
    font-size: 11px;
    color: var(--c-text-3);
    text-align: center;
}

/* ── PRODUCT TABS ────────────────────────────────────────── */

.prod-tabs {
    border-bottom: 1px solid rgba(148, 163, 184, .26);
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18);
    backdrop-filter: blur(18px);
}

.prod-tabs::-webkit-scrollbar { display: none; }

.prod-tab {
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 650;
    color: var(--c-text-2);
    border: 1px solid transparent;
    border-radius: 12px;
    margin-bottom: 0;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
    font-family: inherit;
}

.prod-tab:hover { color: var(--c-text); }

.prod-tab.is-active {
    color: var(--c-accent);
    border-color: rgba(0, 103, 199, .16);
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
    font-weight: 600;
}

.prod-tab-panel {
    display: none;
    padding: 30px 0 24px;
}

.prod-tab-panel.is-active { display: block; }

.product-detail-tabs-section .series-grid {
    gap: 18px;
}

.product-detail-tabs-section .series-card {
    position: relative;
    min-height: 250px;
    border-color: rgba(148, 163, 184, .24);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
    box-shadow: 0 18px 54px rgba(15, 23, 42, .08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-detail-tabs-section .series-card::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 80px;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: var(--c-accent);
}

.product-detail-tabs-section .series-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 103, 199, .26);
    box-shadow: 0 24px 68px rgba(15, 23, 42, .12);
}

.product-detail-tabs-section .series-card--clickable {
    cursor: zoom-in;
}

.product-detail-tabs-section .series-card__info {
    padding: 34px 28px;
    gap: 18px;
}

.product-detail-tabs-section .series-card__name {
    font-size: 20px;
    line-height: 1.25;
    color: var(--c-text);
}

.product-detail-tabs-section .series-card__divider {
    display: none;
}

.product-detail-tabs-section .series-card__desc {
    max-width: 28ch;
    color: var(--c-text-2);
    font-size: 15px;
}

.product-detail-tabs-section .series-card__img-wrap {
    width: 270px;
    padding: 16px;
    background:
        radial-gradient(circle at 50% 20%, rgba(0,103,199,.08), transparent 52%),
        #f8fafc;
}

.product-detail-tabs-section .series-card__img-wrap img {
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(15,23,42,.12));
}

.product-docs {
    display: grid;
    gap: 18px;
}

.product-doc-card {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr);
    gap: 18px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,251,255,.94));
    box-shadow: 0 18px 54px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.product-doc-card__body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.product-doc-card__badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--c-accent-dim, rgba(26,82,118,.08));
    color: var(--c-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.product-doc-card__title,
.product-doc-image__title {
    margin: 0;
    color: var(--c-text);
    font-size: 18px;
    line-height: 1.3;
}

.product-doc-card__desc,
.product-doc-image__desc {
    margin: 0;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.65;
}

.product-doc-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.product-doc-card__preview {
    min-height: 360px;
    background: var(--c-surface);
    border-left: 1px solid var(--c-border);
}

.product-doc-card__preview iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
    background: #fff;
}

.product-doc-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.product-doc-image {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 14px;
    background: var(--c-bg);
    overflow: hidden;
    cursor: zoom-in;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.product-doc-image:hover,
.product-doc-image:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0, 103, 199, .28);
    box-shadow: 0 18px 44px rgba(15,23,42,.1);
    outline: none;
}

.product-doc-image__media {
    aspect-ratio: 4 / 3;
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-doc-image__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

.product-doc-image__body {
    padding: 14px 16px 16px;
}

html[data-theme="dark"] .prod-tabs {
    background: rgba(8, 16, 30, .68);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .prod-tab.is-active {
    background: rgba(20, 32, 50, .94);
}

html[data-theme="dark"] .product-detail-tabs-section .series-card {
    background: linear-gradient(135deg, rgba(13,24,41,.96), rgba(8,17,31,.94));
    border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .product-detail-tabs-section .series-card__img-wrap {
    background:
        radial-gradient(circle at 50% 20%, rgba(42,144,232,.13), transparent 52%),
        rgba(255,255,255,.04);
}

html[data-theme="dark"] .product-doc-card {
    background: linear-gradient(135deg, rgba(13,24,41,.96), rgba(8,17,31,.94));
    border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .product-doc-card__preview,
html[data-theme="dark"] .product-doc-image__media {
    background: rgba(255,255,255,.04);
}

@media (max-width: 900px) {
    .product-detail-tabs-section .series-card {
        min-height: 220px;
    }
    .product-detail-tabs-section .series-card__img-wrap {
        width: 230px;
    }
    .product-doc-card {
        grid-template-columns: 1fr;
    }
    .product-doc-card__preview {
        display: none;
    }
}

@media (max-width: 640px) {
    .prod-tabs {
        gap: 6px;
        padding: 6px;
        border-radius: 14px;
    }
    .prod-tab {
        padding: 10px 13px;
        font-size: 13px;
    }
    .product-detail-tabs-section .series-card {
        flex-direction: column;
    }
    .product-detail-tabs-section .series-card::before {
        left: 22px;
        top: 70px;
    }
    .product-detail-tabs-section .series-card__info {
        padding: 28px 22px 8px;
    }
    .product-detail-tabs-section .series-card__img-wrap {
        width: 100%;
        height: 320px;
    }
}

/* ── RELATED PRODUCTS ────────────────────────────────────── */

.related-products {
    padding: 32px 0;
    border-top: 1px solid var(--c-border);
}

.related-products__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 18px;
}

.related-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .related-products__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .related-products__grid { grid-template-columns: repeat(2, 1fr); }
}

.related-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: box-shadow .2s, transform .2s;
    background: var(--c-bg);
}

.related-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.related-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--c-surface);
}

.related-card__img-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--c-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-3);
}

.related-card__body {
    padding: 14px 16px;
}

.related-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card__desc {
    font-size: 12px;
    color: var(--c-text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_gallery.css                                              */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Bento gallery (gallery page) ───────────────────────── */
.bento-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px; grid-auto-flow: dense; gap: 10px;
}
.bento-item {
    position: relative; overflow: hidden; border-radius: 14px;
    cursor: zoom-in; background: var(--c-grey-1); outline: none;
}
.bento-item--lg { grid-column: span 2; grid-row: span 2; }
.bento-item img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.bento-item:hover img { transform: scale(1.07); }
.bento-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(7,17,31,.88) 0%, rgba(7,17,31,.38) 48%, transparent 100%);
    opacity: 0; transition: opacity .32s ease;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 18px 18px;
}
.bento-item:hover .bento-overlay { opacity: 1; }
.bento-overlay__content { transform: translateY(10px); transition: transform .32s ease; }
.bento-item:hover .bento-overlay__content { transform: translateY(0); }
.bento-overlay__title { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.bento-overlay__desc  { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }

/* ── Masonry gallery (product pages) ────────────────────── */
.gallery-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-masonry-item {
    position: relative; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 4 / 3; cursor: zoom-in; background: var(--c-grey-1);
}
.gallery-masonry-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gallery-masonry-item:hover img { transform: scale(1.05); }
.gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(7,17,31,.82) 0%, rgba(7,17,31,.3) 55%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 16px 16px;
    opacity: 0; transition: opacity .3s ease;
}
.gallery-masonry-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay__title { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.gallery-overlay__desc  { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.4; }

/* ── Gallery filter tabs ─────────────────────────────────── */
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.gal-filter {
    padding: 8px 20px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--c-grey-1); border-radius: 100px;
    background: var(--c-white); color: var(--c-grey-5); cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.gal-filter:hover      { border-color: var(--c-primary); color: var(--c-primary); }
.gal-filter.is-active  { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.gal-filter__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px; border-radius: 100px;
    font-size: 10px; font-weight: 700; background: rgba(0,0,0,.08); margin-left: 5px; line-height: 1;
}
.gal-filter.is-active .gal-filter__count { background: rgba(255,255,255,.25); }
.gal-section            { margin-bottom: 56px; }
.gal-section__title     { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--c-dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--c-grey-1); }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_certificates.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
.cert-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 64px;
    background:
        radial-gradient(circle at 78% 8%, rgba(42, 144, 232, .24), transparent 34%),
        linear-gradient(135deg, #07111f 0%, #0f2f52 54%, #07111f 100%);
    color: #fff;
}

.cert-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.cert-hero__inner {
    max-width: 760px;
}

.cert-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
}

.cert-hero__desc {
    max-width: 620px;
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(226, 237, 247, .78);
}

.cert-section {
    padding: 56px 0 72px;
    background: var(--c-bg);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cert-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
    cursor: zoom-in;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cert-card:hover,
.cert-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(14, 105, 191, .28);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .14);
    outline: none;
}

.cert-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(135deg, rgba(15, 58, 109, .08), rgba(14, 105, 191, .04)),
        var(--c-white);
    padding: 18px;
}

.cert-card__media::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(15, 58, 109, .10);
    border-radius: 8px;
    pointer-events: none;
}

.cert-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
}

.cert-card__body {
    padding: 18px 18px 20px;
}

.cert-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--c-text);
}

.cert-card__desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-2);
}

.cert-empty {
    padding: 52px 0;
    text-align: center;
    color: var(--c-text-2);
}

html[data-theme="dark"] .cert-section {
    background: var(--c-dark);
}

html[data-theme="dark"] .cert-card {
    background: var(--c-surface);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .cert-card__media {
    background:
        linear-gradient(135deg, rgba(42, 144, 232, .08), rgba(255,255,255,.03)),
        #0b1628;
}

html[data-theme="dark"] #lightbox {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
    .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .cert-hero { padding: 48px 0 44px; }
    .cert-hero__desc { font-size: 15px; }
    .cert-section { padding: 36px 0 52px; }
    .cert-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_static-pages.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
.static-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 62px;
    background:
        radial-gradient(circle at 82% 8%, rgba(42, 144, 232, .22), transparent 34%),
        linear-gradient(135deg, #07111f 0%, #0f2f52 56%, #07111f 100%);
    color: #fff;
}

.static-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}

.static-hero__inner {
    max-width: 820px;
}

.static-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--c-primary-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.static-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: 0;
}

.static-hero__desc {
    max-width: 680px;
    margin: 20px 0 0;
    color: rgba(226, 237, 247, .76);
    font-size: 17px;
    line-height: 1.7;
}

.static-content {
    padding: 58px 0 68px;
    background:
        linear-gradient(180deg, rgba(241,245,249,.54), rgba(255,255,255,0) 180px),
        var(--c-bg);
}

.static-content--soft {
    padding-top: 0;
}

.static-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .10);
}

.static-showcase__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 62px);
}

.static-showcase__title {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    color: var(--c-text);
}

.static-showcase__media {
    min-height: 420px;
    background:
        linear-gradient(135deg, rgba(15, 58, 109, .08), rgba(14, 105, 191, .05)),
        var(--c-white);
}

.static-showcase__media img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.static-showcase__placeholder {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(14,105,191,.10), transparent 36%),
        var(--c-grey-1);
}

.static-showcase__placeholder img {
    width: auto;
    height: 72px;
    min-height: 0;
    opacity: .16;
}

.static-panel {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: var(--c-surface);
    box-shadow: 0 18px 52px rgba(15, 23, 42, .08);
}

.static-showcase + .static-panel {
    margin-top: 36px;
}

.static-prose {
    color: var(--c-text-2);
    font-size: 16px;
    line-height: 1.85;
}

.static-prose p,
.static-prose ul,
.static-prose ol {
    margin-bottom: 14px;
}

.static-prose p:last-child,
.static-prose ul:last-child,
.static-prose ol:last-child {
    margin-bottom: 0;
}

.static-prose h2,
.static-prose h3 {
    margin: 26px 0 12px;
    color: var(--c-text);
    line-height: 1.22;
}

.static-prose strong {
    color: var(--c-text);
    font-weight: 700;
}

.static-prose a {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.static-partners {
    padding: 52px 0 64px;
    background: var(--c-bg);
}

.static-section-head {
    max-width: 620px;
    margin: 0 auto 32px;
    text-align: center;
}

.static-partners__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

.static-partners__grid a,
.static-partners__grid > img {
    display: grid;
    place-items: center;
    min-width: 148px;
    min-height: 78px;
    padding: 16px 22px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    background: var(--c-surface);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.static-partners__grid img {
    max-width: 150px;
    max-height: 48px;
    object-fit: contain;
    display: block;
}

html[data-theme="dark"] .static-content,
html[data-theme="dark"] .static-partners {
    background:
        linear-gradient(180deg, rgba(15, 35, 61, .18), rgba(7,17,31,0) 180px),
        var(--c-dark);
}

html[data-theme="dark"] .static-showcase,
html[data-theme="dark"] .static-panel,
html[data-theme="dark"] .static-partners__grid a,
html[data-theme="dark"] .static-partners__grid > img {
    background: rgba(16, 24, 39, .78);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 24px 72px rgba(0,0,0,.28);
}

html[data-theme="dark"] .static-showcase__media {
    background:
        linear-gradient(135deg, rgba(42, 144, 232, .08), rgba(255,255,255,.03)),
        #0b1628;
}

html[data-theme="dark"] .static-showcase__placeholder {
    background:
        radial-gradient(circle at 50% 45%, rgba(42,144,232,.10), transparent 36%),
        #0b1628;
}

@media (max-width: 920px) {
    .static-showcase {
        grid-template-columns: 1fr;
    }
    .static-showcase__media {
        order: -1;
        min-height: 320px;
    }
    .static-showcase__media img,
    .static-showcase__placeholder {
        min-height: 320px;
    }
}

@media (max-width: 620px) {
    .static-hero {
        padding: 46px 0 42px;
    }
    .static-hero__desc {
        font-size: 15px;
    }
    .static-content {
        padding: 36px 0 48px;
    }
    .static-showcase,
    .static-panel {
        border-radius: 16px;
    }
    .static-showcase__body {
        padding: 26px 22px 30px;
    }
    .static-showcase__media,
    .static-showcase__media img,
    .static-showcase__placeholder {
        min-height: 250px;
    }
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_cta-block.css                                            */
/* ──────────────────────────────────────────────────────────────────── */
.cta-block {
    background: var(--c-cream);
    border-top: 1px solid var(--c-grey-1);
    padding: 56px 0;
    text-align: center;
}
.cta-block .container { display: flex; flex-direction: column; align-items: center; }
.cta-block__title {
    font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px);
    font-weight: 700; color: var(--c-text); margin-bottom: 12px; letter-spacing: -.4px;
}
.cta-block__sub { font-size: 16px; color: var(--c-grey-5); margin-bottom: 22px; max-width: 480px; }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_map.css                                                  */
/* ──────────────────────────────────────────────────────────────────── */
.map-embed            { margin-top: 16px; border-radius: 8px; overflow: hidden; line-height: 0; }
.map-embed iframe     { display: block; width: 100% !important; max-width: 100%; height: 300px; border: 0; }


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_contact-form.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 62px;
    background:
        radial-gradient(circle at 82% 8%, rgba(42, 144, 232, .22), transparent 34%),
        linear-gradient(135deg, #07111f 0%, #0f2f52 56%, #07111f 100%);
    color: #fff;
}
.contact-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.contact-hero__inner { max-width: 760px; }
.contact-hero__label {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--c-primary-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.contact-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: 0;
}
.contact-hero__desc {
    max-width: 650px;
    margin: 20px 0 0;
    color: rgba(226, 237, 247, .76);
    font-size: 17px;
    line-height: 1.7;
}

.contact-section {
    padding: 58px 0 72px;
    background:
        linear-gradient(180deg, rgba(241,245,249,.54), rgba(255,255,255,0) 180px),
        var(--c-bg);
}
.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .74fr);
    gap: 24px;
    align-items: start;
}
.contact-form-panel,
.contact-info-panel {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 24px 72px rgba(15, 23, 42, .10);
}
.contact-form-panel { padding: clamp(28px, 4vw, 46px); }
.contact-info-panel {
    padding: clamp(24px, 3.2vw, 34px);
    position: sticky;
    top: calc(var(--topbar-h) + 112px);
}
.contact-panel-head { margin-bottom: 26px; }
.contact-panel-head h2 {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    color: var(--c-text);
}

.contact-form { max-width: none; }
.hp-field { display: none; visibility: hidden; }
.c-form-group { margin-bottom: 20px; }
.c-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-grey-5);
    margin-bottom: 8px;
}
.c-form-input,
.c-form-select,
.c-form-textarea {
    width: 100%;
    background: rgba(255,255,255,.56);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-text);
    padding: 13px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.c-form-input:focus,
.c-form-select:focus,
.c-form-textarea:focus {
    background: var(--c-surface);
    border-color: rgba(14,105,191,.45);
    box-shadow: 0 0 0 4px rgba(14,105,191,.10);
}
.c-form-textarea { resize: vertical; min-height: 120px; }
.c-form-input.is-error,
.c-form-select.is-error,
.c-form-textarea.is-error { border-color: var(--c-error); }
.form-error {
    background: var(--c-error-bg);
    border-left: 3px solid var(--c-error);
    color: var(--c-error-text);
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 20px;
    border-radius: var(--radius);
}
.form-error ul { padding-left: 16px; }
.c-required    { color: var(--c-accent); }
.form-optional { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-grey-4); margin-left: 4px; }
.c-form-helper { font-size: 12px; color: var(--c-grey-4); margin-top: 6px; line-height: 1.5; }
.form-hint     { font-size: 12px; color: var(--c-grey-5); margin-top: 12px; text-align: center; }
.btn--full     { width: 100%; justify-content: center; }
.c-form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.contact-info-items { display: flex; flex-direction: column; gap: 12px; }
.contact-info-card {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 14px;
    background: var(--c-surface);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.contact-info-card:hover {
    transform: translateY(-2px);
    border-color: rgba(14,105,191,.28);
    box-shadow: 0 16px 40px rgba(15,23,42,.10);
}
.contact-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-grey-5);
    margin-bottom: 6px;
}
.contact-meta-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-meta-value--sm { font-size: 18px; }
.contact-info-panel .map-embed {
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .contact-section {
    background:
        linear-gradient(180deg, rgba(15, 35, 61, .18), rgba(7,17,31,0) 180px),
        var(--c-dark);
}
html[data-theme="dark"] .contact-form-panel,
html[data-theme="dark"] .contact-info-panel,
html[data-theme="dark"] .contact-info-card {
    background: rgba(16, 24, 39, .78);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: 0 24px 72px rgba(0,0,0,.28);
}
html[data-theme="dark"] .c-form-input,
html[data-theme="dark"] .c-form-select,
html[data-theme="dark"] .c-form-textarea {
    background: rgba(7,17,31,.42);
    border-color: rgba(148, 163, 184, .20);
}

@media (max-width: 900px) {
    .contact-shell { grid-template-columns: 1fr; }
    .contact-info-panel { position: static; }
}
@media (max-width: 620px) {
    .contact-hero { padding: 46px 0 42px; }
    .contact-hero__desc { font-size: 15px; }
    .contact-section { padding: 36px 0 52px; }
    .contact-form-panel,
    .contact-info-panel { border-radius: 16px; }
    .c-form-row { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* sections/_configurator.css                                         */
/* ──────────────────────────────────────────────────────────────────── */
.configurator { max-width: 860px; margin: 0 auto; background: var(--c-white); border-radius: 20px; padding: 52px 56px; box-shadow: 0 2px 40px rgba(10,20,50,.07); }

/* Info pills */
.cfg-notices     { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.cfg-notice-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--c-grey-5); background: var(--c-grey-1); padding: 7px 14px; border-radius: 20px; line-height: 1.4; }
.cfg-notice-pill svg { flex-shrink: 0; opacity: .7; }
.cfg-label       { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c-grey-5); margin-bottom: 16px; }

/* Step progress bar */
.config-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 52px; position: relative; }
.config-steps::before { content: ''; position: absolute; top: 20px; left: calc(100% / 10); right: calc(100% / 10); height: 1px; background: var(--c-grey-1); z-index: 0; }
.config-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.config-step::after { content: ''; position: absolute; top: 19px; left: 50%; right: -50%; height: 2px; background: var(--c-grey-1); transition: background .4s; z-index: 0; }
.config-step:last-child::after  { display: none; }
.config-step.is-done::after     { background: var(--c-primary); }
.config-step__num { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-grey-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--c-grey-5); margin: 0 auto 10px; background: var(--c-white); position: relative; z-index: 1; transition: all .3s; }
.config-step.is-active .config-step__num { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-white); box-shadow: 0 0 0 4px rgba(15,58,109,.1); }
.config-step.is-done   .config-step__num { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-white); }
.config-step__label { font-size: 11px; color: var(--c-grey-5); font-weight: 500; letter-spacing: .3px; }
.config-step.is-active .config-step__label { color: var(--c-primary); font-weight: 600; }
.config-step.is-done   .config-step__label { color: var(--c-grey-3); }

/* Panels */
.config-panel           { display: none; }
.config-panel.is-active { display: block; animation: cfgFadeUp .22s ease; }
@keyframes cfgFadeUp    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Use case cards */
.usecase-cards          { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px; }
.usecase-card           { border: 1.5px solid var(--c-grey-1); padding: 28px 20px 22px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; text-align: center; border-radius: 12px; background: var(--c-white); }
.usecase-card:hover     { border-color: var(--c-grey-3); box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.usecase-card.selected  { border-color: var(--c-primary); background: rgba(15,58,109,.04); box-shadow: 0 4px 20px rgba(15,58,109,.1); }
.usecase-card__icon     { color: var(--c-primary); margin-bottom: 12px; display: flex; justify-content: center; opacity: .7; }
.usecase-card.selected .usecase-card__icon { opacity: 1; }
.usecase-card__name     { font-size: 14px; font-weight: 600; color: var(--c-dark); }
.cfg-empty-state        { padding: 28px 0; font-size: 14px; color: var(--c-grey-5); text-align: center; border: 1px dashed var(--c-grey-3); border-radius: 8px; }

/* Type cards */
.type-cards             { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.type-card              { border: 1.5px solid var(--c-grey-1); padding: 22px 20px 20px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; text-align: center; border-radius: 12px; position: relative; background: var(--c-white); }
.type-card:hover        { border-color: var(--c-grey-3); box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.type-card.selected     { border-color: var(--c-primary); background: rgba(15,58,109,.03); box-shadow: 0 4px 20px rgba(15,58,109,.1); }
.type-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--c-primary); font-weight: 700; }
.type-card__name        { font-size: 14px; font-weight: 600; color: var(--c-dark); margin-bottom: 6px; }
.type-card__price       { display: inline-block; font-size: 11px; color: var(--c-primary); font-weight: 700; background: rgba(15,58,109,.08); padding: 2px 8px; border-radius: 20px; }
.type-card__desc        { font-size: 12px; color: var(--c-grey-5); margin-top: 8px; line-height: 1.5; }

/* Mount options */
.mount-options          { display: flex; flex-direction: column; gap: 8px; }
.mount-option           { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1.5px solid var(--c-grey-1); cursor: pointer; transition: border-color .2s, background .2s; border-radius: 10px; background: var(--c-white); gap: 12px; }
.mount-option:hover     { border-color: var(--c-grey-3); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.mount-option.selected  { border-color: var(--c-primary); background: rgba(15,58,109,.03); }
.mount-option.selected .mount-option__name { color: var(--c-primary); font-weight: 600; }
.mount-option__left     { display: flex; align-items: center; gap: 12px; }
.mount-option__radio    { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-grey-2); flex-shrink: 0; transition: all .2s; position: relative; }
.mount-option.selected .mount-option__radio { border-color: var(--c-primary); background: var(--c-primary); }
.mount-option.selected .mount-option__radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-white); }
.mount-option__name     { font-size: 14px; font-weight: 500; color: var(--c-dark); }
.mount-option__surcharge { font-size: 12px; color: var(--c-grey-5); white-space: nowrap; }

/* Dimension inputs */
.dim-inputs             { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 420px; }
.dim-group label        { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-grey-5); margin-bottom: 10px; }
.dim-group input        { width: 100%; border: none; border-bottom: 2px solid var(--c-grey-2); font-size: 24px; font-weight: 300; color: var(--c-dark); padding: 8px 0; background: transparent; outline: none; font-family: var(--font-body); transition: border-color .2s; }
.dim-group input:focus  { border-bottom-color: var(--c-primary); }
.dim-group .unit        { font-size: 12px; color: var(--c-grey-5); margin-top: 6px; }

/* Color swatches */
.color-swatches         { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch           { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; padding: 10px 8px; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; border-radius: 12px; min-width: 68px; }
.color-swatch:hover     { border-color: var(--c-grey-2); }
.color-swatch.selected  { border-color: var(--c-primary); background: rgba(15,58,109,.03); box-shadow: 0 2px 12px rgba(15,58,109,.12); }
.color-swatch__dot      { width: 48px; height: 48px; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); transition: transform .2s; }
.color-swatch:hover .color-swatch__dot { transform: scale(1.08); }
.color-swatch__name     { font-size: 11px; color: var(--c-grey-5); text-align: center; font-weight: 500; }
.color-swatch__surcharge { font-size: 10px; color: var(--c-primary); font-weight: 700; }

/* Cart / review */
.cart-items             { margin-bottom: 8px; }
.cart-item              { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-grey-1); }
.cart-item:last-child   { border-bottom: none; }
.cart-item__info        { font-size: 14px; font-weight: 500; color: var(--c-dark); }
.cart-item__dim         { font-size: 12px; color: var(--c-grey-5); margin-top: 3px; }
.cart-item__price       { font-size: 14px; font-weight: 700; color: var(--c-dark); white-space: nowrap; }
.cart-item__remove      { font-size: 11px; color: var(--c-grey-3); cursor: pointer; margin-left: 12px; transition: color .2s; padding: 4px; }
.cart-item__remove:hover { color: var(--c-danger); }
.cart-total             { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 16px; font-weight: 700; border-top: 2px solid var(--c-grey-1); margin-top: 4px; }
.review-current         { padding: 20px 22px; border: 2px solid var(--c-primary); border-radius: 12px; background: rgba(15,58,109,.04); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.review-current__meta   { font-size: 12px; color: var(--c-grey-5); margin-top: 4px; }
.review-current__price  { font-size: 22px; font-weight: 700; color: var(--c-primary); white-space: nowrap; flex-shrink: 0; }
.review-section-label   { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-grey-5); margin-bottom: 12px; margin-top: 28px; }

/* Navigation + loading */
.config-nav     { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-grey-1); gap: 12px; }
.config-notice  { border-left: 3px solid var(--c-primary); background: rgba(15,58,109,.05); padding: 14px 18px; font-size: 13px; color: var(--c-grey-5); margin-bottom: 20px; line-height: 1.6; border-radius: 0 var(--radius) var(--radius) 0; }
.config-loading { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--c-grey-5); }
.config-loading.is-visible { display: flex; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border: 2px solid var(--c-grey-1); border-top-color: var(--c-primary); border-radius: 50%; animation: spin .6s linear infinite; }


/* ──────────────────────────────────────────────────────────────────── */
/* _responsive.css                                                    */
/* ──────────────────────────────────────────────────────────────────── */
/* ── RESPONSIVE OVERRIDES ────────────────────────────────────
   Global breakpoint rules that affect multiple modules.
   Component-specific responsive rules live in their own files
   (e.g. _hero-accordion.css, _lightbox.css, _products.css).
   ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .bento-grid      { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; }
    .hero__grid      { grid-template-columns: 1fr; }
    .hero__visual    { height: 400px; }
    .hero-accordion  { height: 420px; }
    .why-grid        { grid-template-columns: 1fr; gap: 32px; }
    .why-grid .why__left { max-width: 600px; }
    .split-cta__grid { grid-template-columns: 1fr; gap: 32px; }
    .featured-grid   { gap: 32px; }
    .stats-bar       { padding: 24px 0; }
    .stats-grid      { grid-template-columns: repeat(2,1fr); gap: 0; }
    .stats-grid .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 18px 12px; }
    .stats-grid .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.06); }
    .stats-grid .stat-item:nth-child(3),
    .stats-grid .stat-item:nth-child(4)   { border-bottom: none; }
    .stat-item__value  { font-size: 28px; margin-bottom: 4px; }
    .stat-item__suffix { font-size: 18px; }
}

@media (max-width: 900px) {
    :root            { --section-pad: 56px; }
    .section { padding: 44px 0; }
    .page-hero + .section { padding-top: 36px; }
    .split-cta, .cta-block { padding: 44px 0; }
    .featured-grid   { grid-template-columns: 1fr; }
    .footer__grid    { grid-template-columns: 1fr 1fr; gap: 40px; }
    .grid-3          { grid-template-columns: repeat(2,1fr); }
    .subcategory-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .mega-menu       { min-width: 340px; }
    .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --topbar-h:   0px;
        --nav-h:      68px;
        --total-nav:  68px;
        --section-pad: 44px;
    }
    .page-hero       { min-height: 0; padding-bottom: 24px; align-items: flex-start; padding-top: 22px; }
    .section { padding: 36px 0; }
    .page-hero + .section { padding-top: 32px; }
    .page-hero:not(.page-hero--compact) { padding-bottom: 20px; }
    .page-hero--breadcrumb { padding-bottom: 18px; }
    .split-cta, .cta-block { padding: 36px 0; }
    .page-hero__title { font-size: clamp(24px, 7vw, 36px); }
    .topbar          { display: none; }
    .nav             { top: 0; }
    .container       { padding: 0 20px; }
    .nav__links      { display: none; }
    .nav__burger     { display: flex; }
    .nav__cta        { display: none; }
    .nav__logo img   { height: 40px; }
    .nav__burger span { width: 24px; height: 2.5px; }
    .hero__grid      { padding: 32px 0 28px; }
    .hero__meta      { gap: 24px; }
    .why-cards       { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .subcategory-grid { grid-template-columns: 1fr; gap: 14px; }
    .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
    .bento-grid      { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 8px; }
    .bento-item--lg  { grid-column: span 2; grid-row: span 1; }
    .usecase-cards   { grid-template-columns: repeat(2, 1fr); }
    .type-cards      { grid-template-columns: 1fr 1fr; }
    .footer__grid    { grid-template-columns: 1fr; gap: 28px; }
    .section-header--split { flex-direction: column; align-items: flex-start; }
    .scroll-btn      { display: none; }
    .stats-grid      { grid-template-columns: 1fr 1fr; }
    .configurator    { padding: 32px 24px; border-radius: 14px; }
    .config-step__label { font-size: 10px; }
    .config-nav      { flex-wrap: wrap; }
    .config-nav > div { display: flex; flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    .gallery-masonry { grid-template-columns: 1fr; }
    .bento-grid      { grid-auto-rows: 160px; }
    .hero__actions   { flex-direction: column; align-items: flex-start; }
    .usecase-cards   { grid-template-columns: repeat(2, 1fr); }
    .type-cards      { grid-template-columns: 1fr; }
    .dim-inputs      { grid-template-columns: 1fr; }
    .stats-grid      { grid-template-columns: 1fr 1fr; }
    .configurator    { padding: 24px 16px; border-radius: 12px; }
    .config-step__label { display: none; }
    .config-step.is-active .config-step__label,
    .config-step.is-done   .config-step__label { display: block; }
    .config-step__num     { width: 34px; height: 34px; font-size: 12px; }
    .config-steps::before { top: 17px; }
    .config-step::after   { top: 16px; }
    .config-steps         { margin-bottom: 36px; }
    .review-current       { flex-direction: column; align-items: flex-start; gap: 8px; }
    .review-current__price { font-size: 18px; }
    .config-nav           { flex-direction: column; }
    .config-nav > div     { width: 100%; }
    .config-nav .btn      { flex: 1; justify-content: center; text-align: center; }
}


/* ──────────────────────────────────────────────────────────────────── */
/* base/_dark-mode.css                                                */
/* ──────────────────────────────────────────────────────────────────── */
/* ── Dark mode component overrides ───────────────────────────
   Loaded last so these rules take precedence over base styles.
   Only surface/text overrides — spacing/layout untouched.
   ─────────────────────────────────────────────────────────── */

/* ── Section surfaces (base uses --c-white for bg) ──────── */
html[data-theme="dark"] .section          { background: var(--c-dark-2); }
html[data-theme="dark"] .section--cream   { background: var(--c-dark); }

/* ── Navigation ──────────────────────────────────────────── */
html[data-theme="dark"] .nav__link              { color: rgba(226,237,247,.78); }
html[data-theme="dark"] .nav__link:hover        { color: var(--c-primary-light); }
html[data-theme="dark"] .nav__right .nav__link--cta { color: var(--c-white); }
html[data-theme="dark"] .mega-btn               { color: rgba(226,237,247,.78); }
html[data-theme="dark"] .mega-btn:hover,
html[data-theme="dark"] .has-mega.is-open .mega-btn { color: var(--c-primary-light); }
html[data-theme="dark"] .mega-menu__link        { color: rgba(226,237,247,.62); }
html[data-theme="dark"] .mega-menu__heading     { color: rgba(226,237,247,.35); }
html[data-theme="dark"] .mega-menu__col         { border-right-color: var(--c-border); }
html[data-theme="dark"] .nav__mobile            { background: var(--c-dark-2); }
html[data-theme="dark"] .nav__mobile-link,
html[data-theme="dark"] .nav__mobile-acc-toggle { color: var(--c-text); border-bottom-color: var(--c-border); }
html[data-theme="dark"] .nav__mobile-link:hover,
html[data-theme="dark"] .nav__mobile-acc-toggle:hover { background: var(--c-dark); }
html[data-theme="dark"] .nav__mobile-link--sub  { color: var(--c-text-2); border-bottom-color: var(--c-border); }

/* ── Page hero breadcrumb ────────────────────────────────── */
html[data-theme="dark"] .page-hero             { background: var(--c-dark); }
html[data-theme="dark"] .page-hero__title      { color: var(--c-text); }

/* ── Product series / subcat cards (--c-dark text + #fff bg) */
html[data-theme="dark"] .series-card           { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .series-card__name     { color: var(--c-text); }

html[data-theme="dark"] .subcat-card           { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .subcat-card:hover     { border-color: var(--c-grey-2); }
html[data-theme="dark"] .subcat-card__name     { color: var(--c-text); }

html[data-theme="dark"] .group-intro__title    { color: var(--c-text); }

/* ── Product scrollable cards ────────────────────────────── */
html[data-theme="dark"] .prod-card             { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .prod-card__title      { color: var(--c-text); }

/* ── Rich text description (--c-dark used for strong/h3) ── */
html[data-theme="dark"] .prod-desc strong,
html[data-theme="dark"] .prod-group-desc strong,
html[data-theme="dark"] .prod-full-desc strong { color: var(--c-text); }
html[data-theme="dark"] .prod-full-desc h3     { color: var(--c-text); }

/* ── Product ecom (detail page) ─────────────────────────── */
html[data-theme="dark"] .prod-ecom__main-img,
html[data-theme="dark"] .prod-ecom__main-placeholder { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .prod-ecom__title             { color: var(--c-text); }
html[data-theme="dark"] .prod-ecom__cta-box           { background: var(--c-surface); border-color: var(--c-border); }

/* Related products */
html[data-theme="dark"] .related-products             { border-top-color: var(--c-border); }
html[data-theme="dark"] .related-card                 { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .related-card__name           { color: var(--c-text); }

/* ── Why cards ───────────────────────────────────────────── */
html[data-theme="dark"] .why-card                     { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .why-card__title              { color: var(--c-text); }

/* ── Configurator / use-case / type / mount cards ──────── */
html[data-theme="dark"] .configurator                 { background: var(--c-surface); }
html[data-theme="dark"] .usecase-card                 { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .usecase-card:hover           { border-color: var(--c-grey-2); }
html[data-theme="dark"] .usecase-card__name           { color: var(--c-text); }
html[data-theme="dark"] .type-card                    { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .type-card:hover              { border-color: var(--c-grey-2); }
html[data-theme="dark"] .type-card__name              { color: var(--c-text); }
html[data-theme="dark"] .mount-option                 { background: var(--c-surface); border-color: var(--c-border); }
html[data-theme="dark"] .config-step__num             { background: var(--c-surface); }
html[data-theme="dark"] .cart-item__info,
html[data-theme="dark"] .cart-item__price,
html[data-theme="dark"] .cart-total                   { color: var(--c-text); }
html[data-theme="dark"] .review-current               { background: rgba(14,165,233,.06); border-color: var(--c-primary); }

/* ── Contact page ────────────────────────────────────────── */
html[data-theme="dark"] .contact-meta-value           { color: var(--c-text); }

/* ── Forms — native select + date picker ────────────────── */
html[data-theme="dark"] .c-form-input,
html[data-theme="dark"] .c-form-select,
html[data-theme="dark"] .c-form-textarea {
    color: var(--c-text);
    color-scheme: dark;
    border-bottom-color: var(--c-border);
}
html[data-theme="dark"] .c-form-select   { background: var(--c-surface); }

/* ── Gallery filters ─────────────────────────────────────── */
html[data-theme="dark"] .gal-filter                   { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-2); }
html[data-theme="dark"] .gal-filter:hover             { border-color: var(--c-primary); color: var(--c-primary-light); }
html[data-theme="dark"] .gal-section__title           { color: var(--c-text); }

/* ── Stats bar text ──────────────────────────────────────── */
html[data-theme="dark"] .stat-item__label             { color: rgba(255,255,255,.45); }