/* ============================================================================
   Hemax Pro Wash — design system v3
   Clean, professional. Light grey / ink / brand green.
   ========================================================================== */

:root {
    /* Ink + paper */
    --ink:        #0e1311;
    --ink-soft:   #1c2320;

    /* Teget (navy) — tamna tema: header, futer, tamne sekcije, dugmad */
    --teget:      #16243f;
    --teget-soft: #213152;
    --teget-deep: #111c32;
    --bg:         #f3f5f4;
    --bg-2:       #e9edeb;
    --surface:    #ffffff;
    --mute:       #5f6c68;
    --mute-2:     #97a19d;
    --hairline:   #e2e7e5;
    --hairline-2: #d1d8d5;

    /* Brand green scale */
    --accent:     #2f9e5e;
    --accent-2:   #1f7a47;
    --accent-deep:#155e36; /* dovoljno tamno za beo tekst (WCAG AA) — bg dugmadi/hover */
    --accent-3:   #38b06b;
    --accent-4:   #86caa4;
    --accent-tint:#e7f4ec;
    --accent-glow: rgba(47, 158, 94, 0.18);

    /* Signal */
    --danger:     #b03a16;
    --warn:       #9a6a1d;
    --ok:         #2f7a44;
    --gold:       #b08534;

    /* Elevation — warm, emerald-tinted */
    --shadow-1: 0 1px 2px rgba(10,10,11,0.05);
    --shadow-2: 0 10px 30px -12px rgba(10,30,26,0.18);
    --shadow-3: 0 30px 70px -24px rgba(8,30,26,0.30);
    --shadow-accent: 0 22px 48px -20px rgba(14,93,78,0.45);

    --r-sm: 5px;
    --r-md: 10px;
    --r-lg: 18px;
    --r-xl: 26px;

    --maxw: 1280px;
    --maxw-wide: 1440px;
    --gut:  clamp(16px, 3vw, 40px);

    --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Fraunces', 'EB Garamond', Georgia, serif;
    --font-mono:  'JetBrains Mono', 'Menlo', monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
    --header-h: 68px;
}

* { box-sizing: border-box; }

.skip-link {
    position: fixed; top: -56px; left: 12px; z-index: 300;
    background: var(--teget); color: var(--bg);
    padding: 10px 18px; border-radius: 8px;
    font-size: 0.9rem;
    transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--hairline-2) transparent;
    /* uvek rezerviši mesto za skrolbar — kratke i duge strane (i light/dark) drže
       identične leve/desne margine, sadržaj ne „skače" ka sredini kad nema skrola */
    scrollbar-gutter: stable;
    /* clip na html (uz body) — sprečava overflow-propagaciju koja je coercовala
       body overflow-x u hidden i pravila body scroll-container; horizontalni overflow se
       sada seče na <main>, ne na html/body, pa position:sticky header radi. */
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem; /* prati html font-size — XL ekrani ga dižu (v10 dole) */
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv11';
    /* NEMA overflow-x: hidden/clip na body/html — to je pravilo scroll-container i
       rušilo position:sticky header. Horizontalni overflow se seče na `main` (ispod). */
}

/* Layered paper background: soft emerald glow up top, warm vignette */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 60% at 80% -10%, rgba(14,93,78,0.07), transparent 60%),
        radial-gradient(90% 50% at 0% 0%, rgba(176,133,52,0.05), transparent 55%);
    pointer-events: none;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; transition: color .18s var(--ease-out); }
a:hover { color: var(--accent); }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.08;
    margin: 0;
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--ink); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--mute); max-width: 60ch; line-height: 1.6; }

small, .small { font-size: 0.875rem; }
.kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.kicker::before {
    content: '';
    width: 22px; height: 1px;
    background: currentColor;
    opacity: .5;
}
.kicker--plain::before { display: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.container--wide { max-width: var(--maxw-wide); }
/* main je sidro za scroll-guide i apsolutne dekoracije */
/* overflow-x: clip seče horizontalni overflow sadržaja (npr. marquee/animacije) BEZ
   pravljenja scroll-container-a i bez diranja header-a (header je van <main>), pa sticky radi. */
main { position: relative; overflow-x: clip; }

.section { padding: clamp(56px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.muted { color: var(--mute); }

/* ============================================================================
   Scroll progress + smooth-scroll (Lenis) plumbing
   ========================================================================== */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; z-index: 120;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--gold));
    will-change: transform;
    pointer-events: none;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================================
   Reveal system — JS toggles .is-inview. No-JS shows everything.
   ========================================================================== */
.js [data-reveal] {
    opacity: 0;
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out);
    will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(34px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="left"]  { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="blur"]  { transform: translateY(20px); filter: blur(10px); }
.js [data-reveal].is-inview {
    opacity: 1;
    transform: none;
    filter: none;
}
/* Stagger children */
.js [data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js [data-stagger].is-inview > * { opacity: 1; transform: none; }

/* ============================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(247, 246, 241, 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.site-header.is-scrolled {
    background: rgba(247, 246, 241, 0.9);
    border-bottom-color: var(--hairline);
    box-shadow: var(--shadow-1);
}
.site-header__top {
    display: flex; align-items: center; justify-content: space-between;
    /* padding-block — NE „15px 0" jer to nuluje horizontalni padding .container-a (logo/korpa zalepljeni za ivicu na <1280px) */
    padding-block: 15px;
    gap: 24px;
    transition: padding .3s var(--ease-out);
}
.site-header.is-scrolled .site-header__top { padding-block: 9px; }

.brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.brand__mark {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    background: var(--teget);
    color: var(--bg);
    border-radius: 9px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease-out);
}
.brand__mark::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
    opacity: 0; transition: opacity .35s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand:hover .brand__mark::after { opacity: 1; }
.brand__mark span { position: relative; z-index: 1; }
.brand__logo { width: 34px; height: 34px; display: inline-flex; transition: transform .35s var(--ease-out); }
.brand__logo svg { width: 100%; height: 100%; display: block; }
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.05); }
/* pravi brend „wordmark" (HEMAX / PRO WASH) iz logotipa — boji se po currentColor (--ink) */
.brand__wordmark { height: 1.35em; display: inline-flex; align-items: center; }
.brand__wordmark svg { height: 100%; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
    font-size: 0.9rem; color: var(--ink); position: relative; padding: 4px 0;
}
.nav a.active { color: var(--accent); }
.nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-out);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    background: transparent;
    border: 1px solid var(--hairline-2);
    border-radius: 50%;
    color: var(--ink);
    position: relative;
    transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease-out);
}
.icon-btn:hover { border-color: var(--accent); background: var(--surface); color: var(--accent); transform: translateY(-1px); }
.icon-btn .badge-count {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--accent); color: #fff;
    border-radius: 999px;
    font-size: 0.65rem; font-weight: 600;
    display: inline-grid; place-items: center;
    font-family: var(--font-mono);
    box-shadow: 0 0 0 2px var(--bg);
}
.menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--hairline-2);
    border-radius: 50%;
    color: var(--ink);
}
/* ikonice u rem — width="16" atribut ostaje fallback, na XL ekranima rastu sa fontom */
.icon-btn svg, .menu-toggle svg { width: 1rem; height: 1rem; }

/* ---- Tamni header (dark traka na svetlom sajtu) ---- */
.site-header { background: rgba(22, 36, 63, .82); border-bottom-color: rgba(255, 255, 255, .07); }
.site-header.is-scrolled { background: rgba(17, 28, 50, .95); border-bottom-color: rgba(255, 255, 255, .12); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), var(--shadow-1); }
.site-header .brand { color: #f4f6f4; }
.site-header .icon-btn, .site-header .menu-toggle { color: #e7ebe9; border-color: rgba(255, 255, 255, .18); }
.site-header .icon-btn:hover { color: var(--ink); background: var(--accent-4); border-color: var(--accent-4); }
.site-header .icon-btn .badge-count { box-shadow: 0 0 0 2px #111c32; }
/* tekstualni nav linkovi su u tamnoj traci samo na desktopu; na mobilnom je meni svetli panel */
@media (min-width: 881px) {
    .site-header .nav > a, .site-header .nav__group > a { color: #dfe5e2; }
    .site-header .nav > a.active { color: var(--accent-4); }
    .site-header .nav > a::after, .site-header .nav__group > a::after { background: var(--accent-4); }
    .site-header .nav > a:hover, .site-header .nav__group > a:hover { color: #fff; }
}

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
    --btn-bg: var(--teget);
    --btn-fg: var(--bg);
    --btn-bd: var(--teget);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    /* em umesto px — dugme raste sa fontom na XL ekranima (15/26px na bazi) */
    padding: 1.02em 1.77em;
    border: 1px solid var(--btn-bd);
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), color .25s var(--ease-out), border-color .25s;
}
.btn::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: var(--accent);
    transform: translateY(101%);
    transition: transform .4s var(--ease-out);
}
.btn:hover { color: #fff; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--hairline-2); }
.btn--ghost:hover { color: #fff; }
.btn--accent { --btn-bg: var(--accent-2); --btn-fg: #fff; --btn-bd: var(--accent-2); } /* beo tekst na #1f7a47 = 5.4:1 (AA) */
.btn--accent::before { background: var(--accent-deep); }
.btn--accent:hover { border-color: var(--accent-deep); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light::before { background: var(--accent); }
.btn--sm { padding: .76em 1.37em; font-size: 0.82rem; }
.btn--block { width: 100%; }

/* ============================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    padding: clamp(64px, 11vw, 168px) 0 clamp(56px, 8vw, 104px);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.hero__copy { max-width: 60ch; position: relative; z-index: 2; }
.hero__copy h1 { margin: 20px 0 22px; }
.hero__copy .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Headline word-mask reveal */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-words .word > span { display: inline-block; will-change: transform; }
.hero__accent { color: var(--accent); font-style: italic; }

.hero__meta {
    display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px;
    padding-top: 24px; border-top: 1px solid var(--hairline);
    font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em;
    color: var(--mute); text-transform: uppercase;
}
.hero__meta b { color: var(--ink); font-weight: 600; }

.hero__visual {
    position: relative;
    aspect-ratio: 1 / 1.04;
    max-width: 540px;
    margin-left: auto;
    width: 100%;
}
.hero__stage {
    position: absolute; inset: 0;
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.9), rgba(247,246,241,0.4)),
        var(--accent-tint);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.hero__stage::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 50% at 50% 40%, var(--accent-glow), transparent 70%);
    opacity: .8;
}
.hero__visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__product {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none;
    padding: 12%;
    will-change: transform;
}
.hero__product svg { filter: drop-shadow(0 26px 40px rgba(8,30,26,0.22)); width: 78%; height: auto; }
.hero__caption {
    position: absolute; bottom: 16px; left: 18px;
    font-family: var(--font-mono);
    font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent-2);
    background: rgba(255,255,255,.7);
    padding: 5px 10px; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.hero__ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(14,93,78,0.18);
    inset: 8%;
    pointer-events: none;
}
.hero__ring--2 { inset: 20%; border-style: dashed; }

/* Scroll cue */
.scroll-cue {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 40px;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--mute);
}
.scroll-cue__line { position: relative; width: 46px; height: 1px; background: var(--hairline-2); overflow: hidden; }
.scroll-cue__line::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 40%;
    background: var(--accent); animation: cueSlide 1.8s var(--ease-io) infinite;
}
@keyframes cueSlide { 0% { transform: translateX(-100%);} 60%,100% { transform: translateX(280%);} }

/* ============================================================================
   Marquee strip
   ========================================================================== */
.marquee {
    display: flex; gap: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--teget);
    color: #fff;
    overflow: hidden;
    padding: 16px 0;
    --marquee-dur: 40s;
    /* edge fade na ivicama */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Dve identične grupe; svaka je min široka kao traka pa pri translateX(-100%)
   nema praznine ni na ultrawide ekranima — space-around razvuče stavke kad je
   grupa šira od sadržaja. (Stara tehnika -50% je gapovala čim je viewport > pola trake.) */
.marquee__group {
    flex: 0 0 auto;
    display: flex; align-items: center;
    min-width: 100%;
    justify-content: space-evenly;
    animation: marquee var(--marquee-dur) linear infinite;
    will-change: transform;
}
.marquee__item {
    flex: 0 0 auto;
    padding: 0 clamp(16px, 3.5vw, 30px);
    font-family: var(--font-serif); font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    color: #f2f1ec; white-space: nowrap;
}
/* ritam: roman/italic naizmenično + povremena zlatna tačka (klase iz PHP-a) */
.marquee__item--it { font-style: italic; color: var(--accent-4); }
.marquee__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-4); }
.marquee__dot--gold { background: var(--gold); }
@keyframes marquee { to { transform: translateX(-100%); } }
/* pauza: na hover + van viewporta (motion.js, štedi CPU) */
.marquee:hover .marquee__group,
.marquee.is-paused .marquee__group { animation-play-state: paused; }

/* ============================================================================
   USP row
   ========================================================================== */
.usp-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border-bottom: 1px solid var(--hairline);
}
.usp {
    padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 34px);
    border-right: 1px solid var(--hairline);
    transition: background .3s var(--ease-out);
}
.usp:last-child { border-right: 0; }
.usp:hover { background: var(--surface); }
.usp .kicker { display: inline-flex; margin-bottom: 12px; }
.usp__title { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 6px; }

/* ============================================================================
   Stat band
   ========================================================================== */
.stat-band { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
    padding: clamp(36px, 5vw, 64px) clamp(18px, 2vw, 32px);
    border-right: 1px solid var(--hairline);
    text-align: left;
}
.stat:last-child { border-right: 0; }
.stat__num {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1;
    color: var(--accent); letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 2px;
}
.stat__suffix { font-size: .5em; color: var(--ink); }
.stat__label { color: var(--mute); margin-top: 12px; font-size: .92rem; max-width: 22ch; }

/* ============================================================================
   Section heads
   ========================================================================== */
.section__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap;
}
.section__head h2 { max-width: 18ch; margin-top: 14px; position: relative; padding-bottom: 14px; /* prostor za underline draw (v5) */ }
.section__head .kicker { display: inline-flex; }
.section__head a.more {
    font-size: 0.9rem; color: var(--ink); display: inline-flex; align-items: center; gap: 7px;
    border-bottom: 1px solid var(--hairline-2); padding-bottom: 3px;
    transition: gap .25s var(--ease-out), color .2s, border-color .2s;
}
.section__head a.more:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }

/* ============================================================================
   Category grid
   ========================================================================== */
/* Kartice sa razmakom umesto 1px mozaika — mozaik je kod nepotpunog reda
   (6 pločica u 5 kolona) ostavljao sivu rupu od pozadine grida. Fiksne kolone
   3/2/1 pune redove na svakoj širini; ≥1920 ide u 6-u-redu (v10). */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 18px);
}
/* podkategorije na strani vertikale: promenljiv broj pločica → auto-fit */
.cat-grid--sub { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cat-tile {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 190px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.cat-tile::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(150deg, var(--accent), var(--accent-2));
    transform: translateY(100%);
    transition: transform .45s var(--ease-out);
    z-index: 0;
}
.cat-tile > * { position: relative; z-index: 1; }
.cat-tile:hover { color: #fff; }
.cat-tile:hover::before { transform: translateY(0); }
.cat-tile__idx { font-family: var(--font-mono); font-size: .72rem; color: var(--mute-2); letter-spacing: .12em; }
.cat-tile:hover .cat-tile__idx { color: rgba(255,255,255,.65); }
.cat-tile__name { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: inherit; line-height: 1.1; }
.cat-tile__count { color: var(--mute); font-size: 0.82rem; font-family: var(--font-mono); }
.cat-tile:hover .cat-tile__count { color: rgba(255,255,255,.8); }
.cat-tile__arrow { font-size: 1.5rem; align-self: flex-end; color: var(--mute-2); opacity: .6; transition: transform .35s var(--ease-out), color .35s, opacity .35s; }
.cat-tile:hover .cat-tile__arrow { transform: translate(4px, -4px); color: #fff; opacity: 1; }
.cat-tile:focus-visible .cat-tile__arrow { opacity: 1; } /* i sa tastature strelica oživi */

/* Foto-kartice kategorija: slika (::after) + stalni tamni gradijent (::before) za
   čitljivost teksta + blagi zoom i zelena nota na hover. Tekst je uvek beo. */
.cat-tile--img { min-height: 240px; color: #fff; }
.cat-tile--img::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--cat-img) center/cover no-repeat;
    transform: scale(1.04);
    transition: transform .6s var(--ease-out);
}
.cat-tile--img::before {
    background: linear-gradient(to top, rgba(8,16,14,.9) 4%, rgba(8,16,14,.32) 58%, rgba(8,16,14,.55));
    transform: none; z-index: 1;
}
.cat-tile--img > * { z-index: 2; }
.cat-tile--img:hover { color: #fff; }
.cat-tile--img:hover::after { transform: scale(1.11); }
.cat-tile--img:hover::before { background: linear-gradient(to top, rgba(13,77,52,.92) 4%, rgba(8,16,14,.4) 58%, rgba(15,60,44,.6)); }
.cat-tile--img .cat-tile__idx { color: rgba(255,255,255,.7); }
.cat-tile--img .cat-tile__count { color: rgba(255,255,255,.82); }
.cat-tile--img .cat-tile__arrow { color: #fff; opacity: .85; }

/* ============================================================================
   Product grid + cards
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: clamp(20px, 2.5vw, 34px);
}
.product-card { display: block; color: inherit; position: relative; }
/* Bez pločice — cutout lebdi na pozadini stranice, pečena senka ga prizemljuje */
.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1.08;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .4s var(--ease-out), border-color .3s var(--ease-out);
}
.product-card:hover .product-card__media,
.product-card:focus-visible .product-card__media { transform: translateY(-6px); }
/* Halo iza proizvoda — pali se na hover/focus, isti jezik kao .land-collage::before */
.product-card__media::before {
    content: '';
    position: absolute;
    inset: 6%;
    background: radial-gradient(60% 52% at 50% 58%, var(--accent-glow), transparent 70%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
    pointer-events: none;
}
.product-card:hover .product-card__media::before,
.product-card:focus-visible .product-card__media::before { opacity: 1; }
/* <picture> wrapper (responsive deriváti) se ponaša kao i goli <img>: blok koji
   popuni media kutiju, bez sopstvene kutije. img/svg unutra nose contain + padding,
   pa nema layout shift bez obzira da li je markup <img> ili <picture><img>. */
.product-card__media picture { position: relative; display: block; width: 100%; height: 100%; }
/* img pozicioniran da halo ::before slika ispod njega (pozicionirano bi inače prešlo preko statičnog) */
.product-card__media img,
.product-card__media svg { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: transform .5s var(--ease-out); }
.product-card:hover .product-card__media img,
.product-card:hover .product-card__media svg,
.product-card:focus-visible .product-card__media img,
.product-card:focus-visible .product-card__media svg { transform: scale(1.06) rotate(-1deg); }
.product-card:hover { z-index: 2; }
.product-card:focus-visible { outline-offset: 6px; border-radius: var(--r-sm); }
.product-card__sku {
    position: absolute; top: 13px; left: 13px;
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
    color: var(--mute); z-index: 2;
}
.product-card__badge {
    position: absolute; top: 11px; right: 11px; z-index: 2;
    padding: 5px 10px;
    background: var(--teget); color: var(--bg);
    border-radius: 999px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
}
.product-card__badge--accent { background: var(--accent); color: #fff; }
.product-card__badge--sale { background: var(--danger); color: #fff; }
.product-card__name { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.22; margin: 0 0 6px; transition: color .2s; }
.product-card:hover .product-card__name,
.product-card:focus-visible .product-card__name {
    color: var(--accent-2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-card__unit { font-size: 0.8rem; color: var(--mute); font-family: var(--font-mono); }
.product-card__price { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.product-card__price del { color: var(--mute-2); font-weight: 400; font-size: 0.82rem; }

/* ============================================================================
   Pinned scene (scrollytelling)
   ========================================================================== */
.scene { background: var(--teget); color: #d8d8dc; position: relative; overflow: hidden; }
.scene__inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    min-height: 100vh;
    padding: clamp(48px, 8vh, 96px) 0;
}
.scene__visual { position: relative; aspect-ratio: 1/1; max-width: 460px; width: 100%; margin: 0 auto; }
.scene__orb {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--accent-3), var(--accent-2) 55%, #06241d 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 40px 90px -20px rgba(14,93,78,.6);
    will-change: transform;
}
.scene__orb::after {
    content: ''; position: absolute; inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%);
}
.scene__ring {
    position: absolute; inset: -6%; border-radius: 50%;
    border: 1px dashed rgba(87,179,158,.35);
    will-change: transform;
}
.scene__tag {
    position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent-4);
}
.scene__panels { position: relative; }
.scene__steps { display: grid; gap: 6px; }
.scene__step {
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    opacity: .32;
    transition: opacity .4s var(--ease-out);
}
.scene__step.is-active { opacity: 1; }
.scene__step h3 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 8px; }
.scene__step p { color: #a9a9af; margin: 0; max-width: 46ch; }
.scene__step-idx { font-family: var(--font-mono); font-size: .72rem; color: var(--accent-4); letter-spacing: .14em; }

/* ============================================================================
   Feature split (B2B)
   ========================================================================== */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature-list { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink); }
.feature-list li svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.discount-card {
    background: linear-gradient(155deg, var(--accent), var(--accent-2));
    color: #eafaf4;
    border-radius: var(--r-lg);
    padding: clamp(28px, 3.4vw, 44px);
    font-family: var(--font-mono); font-size: .9rem; line-height: 1.8;
    box-shadow: var(--shadow-accent);
    position: relative; overflow: hidden;
}
.discount-card::before {
    content: ''; position: absolute; top: -40%; right: -20%;
    width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.discount-card strong.disc-title { font-family: var(--font-serif); font-size: 1.7rem; display: block; margin-bottom: 16px; font-weight: 400; color: #fff; }
.discount-card .disc-big { font-size: 1.3rem; color: #fff; font-weight: 600; }
.discount-card del { opacity: .65; }
.discount-card .disc-muted { opacity: .75; }

/* ============================================================================
   Process timeline (dark)
   ========================================================================== */
.timeline-section { background: var(--teget-soft); color: #cfcfd2; }
.timeline { position: relative; display: grid; gap: 0; margin-top: 8px; }
.timeline__track {
    position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
    background: rgba(255,255,255,.12);
}
.timeline__fill {
    position: absolute; left: 0; top: 0; width: 100%; height: 0;
    background: linear-gradient(var(--accent-4), var(--accent));
    will-change: height;
}
.timeline__step {
    position: relative; padding: 22px 0 22px 52px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.timeline__step:last-child { border-bottom: 0; }
.timeline__dot {
    position: absolute; left: 6px; top: 26px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--teget-soft); border: 2px solid rgba(255,255,255,.25);
    transition: border-color .3s, background .3s, box-shadow .3s;
}
.timeline__step.is-active .timeline__dot { border-color: var(--accent-4); background: var(--accent); box-shadow: 0 0 0 5px rgba(87,179,158,.18); }
.timeline__num { font-family: var(--font-mono); font-size: .74rem; color: var(--accent-4); letter-spacing: .14em; }
.timeline__step h3 { color: #fff; font-family: var(--font-serif); font-size: 1.3rem; margin: 6px 0 6px; }
.timeline__step p { color: #a4a4aa; margin: 0; max-width: 52ch; }

/* ============================================================================
   CTA band
   ========================================================================== */
.cta-band {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, var(--accent-2), var(--accent) 60%, var(--accent-3));
    color: #fff; border-radius: var(--r-xl);
    padding: clamp(40px, 6vw, 80px);
    text-align: center;
    box-shadow: var(--shadow-accent);
}
.cta-band::before, .cta-band::after {
    content: ''; position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
}
.cta-band::before { width: 50%; aspect-ratio: 1; top: -30%; left: -10%; }
.cta-band::after { width: 60%; aspect-ratio: 1; bottom: -40%; right: -10%; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 20ch; margin: 14px auto 18px; }
.cta-band .lead { color: rgba(255,255,255,.85); margin: 0 auto 30px; max-width: 52ch; }
.cta-band .kicker { color: var(--accent-4); justify-content: center; }
.cta-band .hero__cta, .cta-band .cta-actions { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================================
   Product page
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.pdp__media {
    aspect-ratio: 1/1;
    display: grid; place-items: center;
    padding: 5%;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    position: sticky; top: calc(var(--header-h) + 20px);
}
.pdp__media img, .pdp__media svg { width: 100%; height: 100%; object-fit: contain; }
.pdp__copy .kicker { display: inline-flex; margin-bottom: 14px; }
.pdp__copy h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 10px; }
.pdp__price-row { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); margin: 18px 0 24px; }
.pdp__price { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; }
.pdp__price--old { color: var(--mute-2); font-size: 1rem; text-decoration: line-through; }
.pdp__price-meta { font-size: 0.85rem; color: var(--mute); margin-left: auto; }
.pdp__buy { margin: 22px 0; }
.pdp__variants { border: 0; padding: 0; margin: 0 0 18px; }
.pdp__variants legend { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 10px; }
.variant-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-opt { position: relative; cursor: pointer; }
.variant-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variant-opt__label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 64px; padding: 11px 18px;
    border: 1px solid var(--hairline-2); border-radius: 999px;
    font-size: 0.9rem; font-weight: 500; color: var(--ink);
    transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease-out);
}
.variant-opt:hover .variant-opt__label { border-color: var(--accent); }
.variant-opt.is-selected .variant-opt__label { background: var(--accent); border-color: var(--accent); color: #fff; }
.variant-opt input:focus-visible + .variant-opt__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.product-card__price .from { font-family: var(--font-sans); font-weight: 400; font-size: 0.72rem; color: var(--mute); margin-right: 1px; }

.pdp__buy-row { display: flex; gap: 14px; align-items: stretch; margin: 0; flex-wrap: wrap; }
.qty-input { display: inline-flex; align-items: center; border: 1px solid var(--hairline-2); border-radius: 999px; overflow: hidden; }
.qty-input button { background: transparent; border: 0; padding: 13px 17px; font-size: 1.1rem; color: var(--ink); transition: background .2s; }
.qty-input button:hover { background: var(--bg-2); }
.qty-input input { width: 46px; text-align: center; border: 0; background: transparent; font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink); padding: 13px 0; }
.qty-input input:focus { outline: none; }
.qty-input:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 0.92rem; }
.spec-table th { text-align: left; font-weight: 500; color: var(--mute); padding: 13px 0; border-bottom: 1px solid var(--hairline); width: 38%; vertical-align: top; }
.spec-table td { padding: 13px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); }

.pdp__tabs { margin-top: 32px; }
.pdp__tabs h3 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; margin: 18px 0 8px; }

/* ============================================================================
   Shop / filters
   ========================================================================== */
.shop { display: grid; grid-template-columns: 250px 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 20px); }
.filter-group { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.filter-group:first-child { padding-top: 0; }
.filter-group h4, .filter-group__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; font-weight: 500; }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { margin: 6px 0; }
.filter-list a { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.92rem; color: var(--ink); transition: padding .2s var(--ease-out); }
.filter-list a:hover { color: var(--accent); padding-left: 6px; }
.filter-list a.active { color: var(--accent); font-weight: 500; }
.filter-list a span { color: var(--mute-2); font-family: var(--font-mono); font-size: 0.78rem; }
.filter-sublist { list-style: none; margin: 2px 0 10px; padding: 0 0 0 12px; border-left: 1px solid var(--hairline); }
.filter-sublist li { margin: 2px 0; }
.filter-sublist a { font-size: 0.84rem; color: var(--mute); padding: 3px 0; }
.shop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.shop__head h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.shop__sort select { font-family: var(--font-sans); font-size: 0.85rem; border: 1px solid var(--hairline-2); padding: 9px 14px; border-radius: 999px; background: var(--surface); }

/* ============================================================================
   Cart
   ========================================================================== */
.cart-page { padding: clamp(32px, 6vw, 64px) 0 80px; }
.cart-layout { display: grid; grid-template-columns: 1fr 370px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.cart-table td { padding: 16px 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.cart-table .cart-item { display: flex; align-items: center; gap: 14px; }
.cart-table .cart-thumb { width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.cart-table .cart-thumb img, .cart-table .cart-thumb svg { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.cart-table .cart-name { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.2; }
.cart-table .cart-sku { font-family: var(--font-mono); font-size: 0.72rem; color: var(--mute); }
.cart-table .cart-remove { background: none; border: 0; color: var(--mute); font-size: 0.85rem; padding: 0; cursor: pointer; transition: color .2s; }
.cart-table .cart-remove:hover { color: var(--danger); }
.cart-summary { padding: 26px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); position: sticky; top: calc(var(--header-h) + 20px); box-shadow: var(--shadow-1); }
.cart-summary h2 { font-size: 1.3rem; margin-bottom: 16px; }
.cart-summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.92rem; color: var(--ink); }
.cart-summary__row .muted { color: var(--mute); }
.cart-summary__row--total { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; padding-top: 14px; border-top: 1px solid var(--hairline); margin-top: 8px; }

.empty { padding: 88px 24px; text-align: center; border: 1px dashed var(--hairline-2); border-radius: var(--r-lg); color: var(--mute); }
.empty h2 { color: var(--ink); margin-bottom: 8px; }

/* ============================================================================
   Forms
   ========================================================================== */
form .row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
form .row--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--mute); margin-bottom: 7px; font-family: var(--font-mono); text-transform: uppercase; }
.field input, .field textarea, .field select {
    width: 100%; border: 1px solid var(--hairline-2); background: var(--surface);
    padding: 13px 15px; border-radius: var(--r-sm); font: inherit; color: var(--ink);
    transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.field textarea { min-height: 130px; resize: vertical; }
.field--check label { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 0.92rem; }
.field--check input { width: auto; margin-top: 3px; }

.payment-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.payment-options label { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border: 1px solid var(--hairline-2); border-radius: var(--r-md); cursor: pointer; transition: border-color .18s, background .18s; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 0.92rem; }
.payment-options input { accent-color: var(--accent); }
.payment-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }

/* ============================================================================
   Badges
   ========================================================================== */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.72rem; font-weight: 500; border-radius: 999px; background: var(--accent-tint); color: var(--accent-2); letter-spacing: 0.04em; }
.badge-new { background: #fff4e6; color: #aa4f00; }
.badge-accepted { background: var(--accent-tint); color: var(--accent-2); }
.badge-ready { background: #f3edff; color: #5b3f9d; }
.badge-shipped { background: #e5f1ff; color: #1a4f8c; }
.badge-delivered { background: #e8f1ee; color: var(--accent-2); }
.badge-canceled { background: #f8e6e1; color: #8d2c0c; }

/* ============================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--teget); color: #cfcfd2; padding: clamp(56px, 8vw, 88px) 0 32px; margin-top: clamp(64px, 9vw, 110px); position: relative; overflow: hidden; }
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-4), transparent);
    opacity: .6;
}
.site-footer a { color: #e8e8ea; }
.site-footer a:hover { color: var(--accent-4); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.footer-grid h2 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9a9aa0; margin: 0 0 16px; font-weight: 500; line-height: 1.2; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 9px 0; font-size: 0.92rem; }
.footer-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-size: 1.5rem; color: #fff; margin-bottom: 12px; }
.footer-brand__logo { width: 32px; height: 32px; display: inline-flex; flex: 0 0 auto; }
.footer-brand__logo svg { width: 100%; height: 100%; display: block; }
.footer-brand__wordmark { height: 30px; display: inline-flex; align-items: center; }
.footer-brand__wordmark svg { height: 100%; width: auto; display: block; }
.footer-tag { color: #a8a8ad; font-size: 0.92rem; max-width: 40ch; }
.footer-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #e8e8ea; }
.footer-social a:hover { color: var(--accent-4); }
.footer-social svg { width: 18px; height: 18px; flex: 0 0 auto; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 24px; font-size: 0.82rem; color: #8a8a90; gap: 12px; }

/* ============================================================================
   Breadcrumb
   ========================================================================== */
/* Putanja: sitna, prigušena, leva, širine container-a; lomi se mekano na mobilnom.
   Razdvojnici su tanji od linkova, poslednji čvor (trenutna strana) je tamniji. */
.crumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    row-gap: 4px;
    padding: 18px 0 0;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--mute);
}
.crumbs a {
    color: var(--mute);
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.crumbs a:hover { color: var(--accent-2); border-bottom-color: var(--accent-4); }
.crumbs > span:last-child { color: var(--ink-soft); } /* trenutna strana — nije link */
.crumbs span.sep { margin: 0 9px; color: var(--mute-2); user-select: none; }

/* ============================================================================
   B2B page
   ========================================================================== */
.b2b-hero { padding: clamp(64px, 9vw, 120px) 0; background: linear-gradient(160deg, var(--accent-tint), var(--bg)); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
.b2b-hero .container { position: relative; z-index: 1; } /* sadržaj iznad fx-orb mrlje, kao hero-pro__inner */
.b2b-hero .kicker { color: var(--accent); }
.b2b-hero h1 { color: var(--accent-2); max-width: 16ch; }
.b2b-hero p.lead { color: #2a4d44; max-width: 56ch; }
.b2b-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 36px; }
.b2b-benefit { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 26px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.b2b-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--accent-4); }
.b2b-benefit h3 { font-family: var(--font-serif); font-size: 1.18rem; margin-bottom: 8px; }

/* ============================================================================
   Tables
   ========================================================================== */
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding: 12px 8px; border-bottom: 1px solid var(--hairline); }
.table td { padding: 14px 8px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tr:hover td { background: rgba(0,0,0,0.015); }

/* ============================================================================
   Flash
   ========================================================================== */
.flash { padding: 14px 18px; border-radius: var(--r-sm); margin: 16px 0; font-size: 0.92rem; }
.flash--ok { background: var(--accent-tint); color: var(--accent-2); }
.flash--err { background: #fceae3; color: var(--danger); }

/* ============================================================================
   Cookie banner
   ========================================================================== */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130; background: var(--teget); color: #e8e8ea; border-radius: var(--r-md); padding: 18px 22px; display: none; align-items: center; gap: 16px; box-shadow: var(--shadow-3); max-width: 720px; margin: 0 auto; font-size: 0.88rem; }
.cookie.show { display: flex; }
.cookie a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie__btns { margin-left: auto; display: flex; gap: 8px; }
.cookie__btn { border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 0.82rem; transition: background .2s, color .2s; }
.cookie__btn:hover { background: rgba(255,255,255,.1); }
.cookie__btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.cookie__btn--primary:hover { background: var(--accent-4); border-color: var(--accent-4); }

/* ============================================================================
   Search modal
   ========================================================================== */
.search-modal { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,11,0.5); backdrop-filter: blur(8px); display: none; align-items: flex-start; padding-top: 12vh; }
.search-modal.open { display: flex; }
.search-modal__panel { width: min(680px, 92vw); margin: 0 auto; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); }
.search-modal__input { width: 100%; padding: 22px 26px; border: 0; border-bottom: 1px solid var(--hairline); font: inherit; font-size: 1.1rem; }
.search-modal__input:focus { outline: none; }
.search-modal__results { max-height: 60vh; overflow: auto; }
.search-modal__row { display: flex; align-items: center; gap: 14px; padding: 14px 22px; color: var(--ink); border-bottom: 1px solid var(--hairline); transition: background .15s; }
.search-modal__row:hover { background: var(--bg); }
.search-modal__thumb { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; }
.search-modal__thumb img, .search-modal__thumb svg { width: 100%; height: 100%; object-fit: contain; padding: 12%; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .shop { grid-template-columns: 1fr; }
    .filters { position: static; }
    .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
    .cart-layout { grid-template-columns: 1fr; }
    .pdp { grid-template-columns: 1fr; }
    .pdp__media { position: static; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { max-width: 420px; order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .feature-split { grid-template-columns: 1fr; }
    .scene__inner { grid-template-columns: 1fr; min-height: auto; gap: 40px; }
    .scene__visual { max-width: 320px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 720px) {
    .nav { display: none; }
    .menu-toggle { display: inline-grid; place-items: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    form .row, form .row--3 { grid-template-columns: 1fr; }
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; }
    .cart-table tr { border-bottom: 1px solid var(--hairline); padding: 10px 0; }
    .cart-table td { padding: 6px 0; border: 0; }
    .usp { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .usp-row { border-bottom: 0; }
}

/* ============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
    .js .h1-line > span { transform: none !important; }
    .section__head h2::after { transform: none !important; }
    .marquee__group { animation: none !important; }
    .scroll-cue { display: none; }
}

/* ============================================================================
   v3 — minimal homepage + real product photos
   ========================================================================== */
/* Gotove slike sa bele pozadine — bez ikakve senke; sede u čistoj beloj pločici. */
.product-card__media img.pmedia { padding: 5%; }

/* <picture> safety i na PDP-u (glavna slika + thumbs): wrapper je blok koji popuni
   kutiju, img unutra zadržava contain/padding — isti odnos stranica, bez skoka. */
.pdp__media picture, .pdp__thumb picture { display: block; width: 100%; height: 100%; }
.pdp__media picture img, .pdp__media picture svg { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb picture img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }

/* PDP gallery (main + thumbnails) */
.pdp__gallery { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 12px; }
.pdp__gallery .pdp__media { position: static; }
.pdp__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp__thumb { width: 74px; height: 74px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: transparent; cursor: pointer; overflow: hidden; transition: border-color .2s; }
.pdp__thumb:hover { border-color: var(--accent-4); }
.pdp__thumb.is-active { border-color: var(--accent); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
@media (max-width: 1024px) { .pdp__gallery { position: static; } }

/* ============================================================================
   Hero (pro) — product stage bez pločice: flaša lebdi na pozadini, iza nje
   vodeni žig segmenta, halo i mehurići; proizvod menja rotator (hero.js).
   Parallax: hero.js upisuje --hx/--hy (-1..1) na stage, slojevi ih množe.
   ========================================================================== */
.hero-pro { position: relative; overflow: hidden; padding: clamp(40px,6vw,92px) 0 clamp(30px,4.5vw,60px); }
.hero-pro__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.hero-pro__copy h1 { margin: 16px 0 18px; font-size: clamp(2.1rem, 4vw, 3.35rem); line-height: 1.08; }
.hero-pro__copy .lead { max-width: 54ch; }
.hl-accent { color: var(--accent-2); font-style: italic; }
.hero-pro__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.hero-pro__trust { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; padding: 22px 0 0; margin: 28px 0 0; border-top: 1px solid var(--hairline); }
.hero-pro__trust li { display: flex; align-items: center; gap: 12px; }
.hero-pro__tico { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent-2); }
.hero-pro__trust b { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.hero-pro__trust small { display: block; font-size: .8rem; color: var(--mute); }

/* Stage: slides drže odnos stranica, dots stoje ispod u toku */
.hero-pro__stage { position: relative; display: flex; flex-direction: column; }
.hero-pro__slides { position: relative; aspect-ratio: 1 / 0.94; }
.hero-pro__halo {
    position: absolute; left: 50%; top: 46%; width: 78%; aspect-ratio: 1/1; border-radius: 50%;
    transform: translate(-50%,-50%); /* drži centar i kad je animacija ugašena (reduced-motion) */
    background: radial-gradient(circle, var(--accent-glow), transparent 68%);
    filter: blur(26px); pointer-events: none;
    animation: hxBreathe 9s ease-in-out infinite;
}
.hero-pro__slide {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(24px) scale(.97);
    transition: opacity .65s var(--ease-out), transform .65s var(--ease-out), visibility 0s linear .65s;
}
.hero-pro__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 2; }

.hero-pro__wm {
    /* slova vire iza ramena flaše: cutout fotka pokriva ~86% visine scene,
       pa žig mora iznad njene gornje ivice (donja trećina tone iza ambalaže) */
    position: absolute; left: 50%; top: -6%;
    transform: translate(calc(-50% + var(--hx,0)*30px), calc(var(--hy,0)*14px));
    font-family: var(--font-serif); font-style: italic; font-weight: 500;
    font-size: clamp(4.6rem, 12vw, 9rem); letter-spacing: -0.03em; line-height: 1;
    color: var(--ink); opacity: .12; white-space: nowrap; user-select: none;
}
.hero-pro__prod { display: block; transform: translate(calc(var(--hx,0)*-12px), calc(var(--hy,0)*-12px)); }
.hero-pro__prod img { display: block; width: min(72%, 430px); height: auto; margin: 0 auto; filter: drop-shadow(0 26px 38px rgba(8,30,26,.16)); }
.hero-pro__slide.is-active .hero-pro__prod img { animation: hxFloat 7s ease-in-out infinite; }

/* Hero feature: statična grupna slika (umesto rotatora) — lebdi nad halom, blagi float + parallax */
.hero-pro__feature { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-pro__feature .hero-pro__prod { width: 100%; }
/* grupna slika kako ju je Zoran poslao — bez refleksije/ambijenta; čista svetla kartica */
.hero-pro__feature .hero-pro__prod img { width: min(100%, 900px); animation: hxFloat 7s ease-in-out infinite; filter: none; border-radius: 16px; border: 1px solid var(--hairline); background: #fff; box-shadow: 0 16px 40px -24px rgba(16, 36, 63, .26); }

.hero-pro__meta {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    display: grid; gap: 3px; width: max-content; max-width: 94%;
    padding: 11px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-1); transition: border-color .3s;
}
.hero-pro__seg { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-2); }
.hero-pro__meta strong { font-size: .95rem; font-weight: 600; color: var(--ink); }
.hero-pro__meta em { font-style: normal; font-size: .8rem; color: var(--mute); }
.hero-pro__slide:hover .hero-pro__meta { border-color: var(--accent-4); }

.hero-pro__dots { display: flex; justify-content: center; gap: 9px; padding: 18px 0 2px; }
.hero-pro__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--hairline-2); cursor: pointer; transition: width .35s var(--ease-out), background .25s; }
.hero-pro__dots button:hover { background: var(--mute-2); }
.hero-pro__dots button.is-active { width: 26px; background: var(--accent); }
.hero-pro__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Mehurići: penju se kroz scenu i izdahnu pre vrha; --bx daje blagi bočni drift */
.hero-pro__bubbles { position: absolute; inset: 0; pointer-events: none; }
.hero-pro__bubbles i {
    position: absolute; bottom: -28px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), var(--accent-glow) 72%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    animation: hxRise var(--bd,11s) linear var(--bdel,0s) infinite;
}
.hero-pro__bubbles i:nth-child(1) { left: 8%;  width: 14px; height: 14px; --bd: 10s;   --bdel: 0s;   --bx: -20px; }
.hero-pro__bubbles i:nth-child(2) { left: 22%; width: 9px;  height: 9px;  --bd: 13s;   --bdel: 2.4s; --bx: 14px; }
.hero-pro__bubbles i:nth-child(3) { left: 37%; width: 18px; height: 18px; --bd: 11.5s; --bdel: 5s;   --bx: -12px; }
.hero-pro__bubbles i:nth-child(4) { left: 52%; width: 8px;  height: 8px;  --bd: 9s;    --bdel: 1.2s; --bx: 22px; }
.hero-pro__bubbles i:nth-child(5) { left: 64%; width: 12px; height: 12px; --bd: 12.5s; --bdel: 3.6s; --bx: -16px; }
.hero-pro__bubbles i:nth-child(6) { left: 76%; width: 20px; height: 20px; --bd: 14s;   --bdel: 6.5s; --bx: 10px; }
.hero-pro__bubbles i:nth-child(7) { left: 87%; width: 10px; height: 10px; --bd: 10.5s; --bdel: 8s;   --bx: -24px; }
.hero-pro__bubbles i:nth-child(8) { left: 45%; width: 7px;  height: 7px;  --bd: 15s;   --bdel: 9.5s; --bx: 18px; }

@keyframes hxRise {
    0%   { transform: translate(0,0); opacity: 0; }
    10%  { opacity: .5; }
    62%  { opacity: .38; }
    100% { transform: translate(var(--bx,16px), -560px); opacity: 0; }
}
@keyframes hxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes hxBreathe {
    0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: .8; }
    50%      { transform: translate(-50%,-50%) scale(1.07); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-pro__bubbles { display: none; }
    .hero-pro__halo, .hero-pro__slide.is-active .hero-pro__prod img, .hero-pro__feature .hero-pro__prod img { animation: none; }
    .hero-pro__slide { transition: none; }
}

/* Why grid */
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,32px); }
.why { padding: 26px 24px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); transition: border-color .3s; }
.why:hover { border-color: var(--accent-4); } /* bez lifta — kartica nije link */
.why__no { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); letter-spacing: .1em; }
.why h3 { margin: 12px 0 8px; }
.why p { margin: 0; }
.muted { color: var(--mute); }

/* CTA lite */
.cta-lite { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(26px,4vw,46px); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--accent-tint); }
.cta-lite h2 { max-width: 22ch; }
.cta-lite .lead { margin-bottom: 0; color: var(--ink-soft); }
.cta-lite__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
    .hero-pro__inner { grid-template-columns: 1fr; gap: 10px; }
    .hero-pro__stage { order: -1; width: 100%; max-width: 540px; margin: 0 auto; }
    .hero-pro__slides { aspect-ratio: 1 / 0.86; }
    .hero-pro__prod img { width: min(62%, 290px); }
    .hero-pro__feature { aspect-ratio: auto; }
    .hero-pro__feature .hero-pro__prod img { width: 100%; }
    .hero-pro__wm { font-size: clamp(3.4rem, 16vw, 5rem); }
    .hero-pro__meta { padding: 9px 13px; }
    .hero-pro__dots { padding-top: 12px; }
    .hero-pro__bubbles i:nth-child(n+6) { display: none; }
    .hero-pro__trust { gap: 12px 14px; }
    .hero-pro__tico { width: 34px; height: 34px; }
    .why-grid { grid-template-columns: 1fr; }
    .cta-lite { flex-direction: column; align-items: flex-start; }
}

/* Cookie banner — stack on phones (was squeezing text to 1 word/line) */
@media (max-width: 560px) {
    .cookie { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; font-size: 0.92rem; }
    .cookie__btns { margin-left: 0; }
    .cookie__btn { flex: 1; padding: 12px 16px; font-size: 0.9rem; }
}

/* Contact grid -> single column on phones (moved out of inline <style> for W3C) */
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr !important; } }

/* ============================================================================
   v4 — atmosfera + segment landing stranice
   ========================================================================== */

/* Papirna tekstura preko cele strane — daje "štampani" karakter umesto sterilnog flata */
body::after {
    content: '';
    position: fixed; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pozadina više nije gola bela: hladan vertikalni tint (bg → svetli teget-siv) daje
   stranici dubinu, a tekst/kartice ostaju na čistim --surface pločicama. */
body {
    background: linear-gradient(180deg, var(--bg) 0%, #eef2f1 100%);
}
/* Aurora + jedva vidljiva blueprint mreža u istom sloju (::before, z-index -2, fiksiran).
   Mreža su dve ortogonalne hairline linije < 3% teget — daju „nacrtani" karakter bez šuma;
   maskiraju se ka dnu da ne smetaju futeru. Kontrast teksta netaknut. */
body::before {
    background:
        radial-gradient(110% 55% at 85% -8%, rgba(14, 93, 78, 0.10), transparent 58%),
        radial-gradient(70% 42% at -8% 18%, rgba(176, 133, 52, 0.07), transparent 55%),
        radial-gradient(60% 38% at 50% 115%, rgba(47, 158, 94, 0.06), transparent 60%),
        linear-gradient(to right, rgba(22, 36, 63, 0.026) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22, 36, 63, 0.026) 1px, transparent 1px);
    background-size: auto, auto, auto, 46px 46px, 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 98%);
}
@media (max-width: 720px) {
    /* na telefonu mreža odlazi (sitne linije = šum na malim ekranima); aurora ostaje */
    body::before {
        background:
            radial-gradient(110% 55% at 85% -8%, rgba(14, 93, 78, 0.10), transparent 58%),
            radial-gradient(70% 42% at -8% 18%, rgba(176, 133, 52, 0.07), transparent 55%),
            radial-gradient(60% 38% at 50% 115%, rgba(47, 158, 94, 0.06), transparent 60%);
        -webkit-mask-image: none; mask-image: none;
    }
}

/* Mekane svetlosne mrlje u hero zoni */
.fx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    animation: orbDrift 16s ease-in-out infinite alternate;
}
.fx-orb--a { width: 360px; height: 360px; top: -8%; right: 4%; background: radial-gradient(circle, rgba(47,158,94,.16), transparent 70%); }
.fx-orb--b { width: 280px; height: 280px; bottom: -14%; left: -4%; background: radial-gradient(circle, rgba(176,133,52,.10), transparent 70%); animation-delay: -8s; }
/* Drift ide preko translate/scale svojstava — transform ostaje slobodan za scroll parallax iz motion.js. */
@keyframes orbDrift {
    from { translate: 0 0; scale: 1; }
    to   { translate: -28px 22px; scale: 1.08; }
}

/* Animira `translate` svojstvo (ne transform) da hover scale() ostane nezavisan — koristi land-collage. */
@keyframes productFloat {
    from { translate: 0 6px; }
    to   { translate: 0 -10px; }
}

/* ============================================================================
   Segment kartice (Rešenja za vaš biznis)
   ========================================================================== */
.seg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 26px);
}
.seg-card {
    position: relative;
    display: flex; flex-direction: column; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: clamp(24px, 2.6vw, 36px);
    overflow: hidden;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.seg-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease-out);
}
.seg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--accent-4); }
.seg-card:hover::before { transform: scaleX(1); }
.seg-card__icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent-2);
    margin-bottom: 4px;
    transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.seg-card:hover .seg-card__icon,
.seg-card:focus-visible .seg-card__icon { background: var(--accent); color: #fff; transform: translateY(-2px); }
.seg-card__kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.seg-card__title { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.12; }
.seg-card__text { color: var(--mute); font-size: .94rem; margin: 0; flex: 1; }
.seg-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 16px;
    border-top: 1px solid var(--hairline);
    font-size: .86rem;
}
.seg-card__count { font-family: var(--font-mono); font-size: .76rem; color: var(--mute-2); }
.seg-card__go { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-2); font-weight: 500; transition: gap .25s var(--ease-out); }
.seg-card:hover .seg-card__go { gap: 12px; color: var(--accent); }

/* ============================================================================
   Segment landing stranice
   ========================================================================== */
.land-hero {
    position: relative;
    padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 5vw, 72px);
    overflow: hidden;
}
.land-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    position: relative; z-index: 1;
}
.land-hero__copy h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin: 16px 0 18px; max-width: 17ch; }
.land-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Kolaž: 3 proizvoda lebde nad zajedničkom scenom */
.land-collage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 500px;
    width: 100%;
    margin-left: auto;
}
.land-collage::before {
    content: '';
    position: absolute; inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, var(--accent-glow), transparent 68%);
}
.land-collage::after {
    content: '';
    position: absolute; inset: 12%;
    border: 1px dashed rgba(14,93,78,.18);
    border-radius: 50%;
}
.land-collage img {
    position: absolute;
    filter: drop-shadow(0 22px 30px rgba(8,30,26,.2));
    animation: productFloat 8s ease-in-out infinite alternate;
}
.land-collage img:nth-child(1) { width: 56%; left: 22%; top: 16%; z-index: 2; }
.land-collage img:nth-child(2) { width: 34%; left: 2%; bottom: 8%; animation-delay: -3s; animation-duration: 9s; }
.land-collage img:nth-child(3) { width: 30%; right: 2%; bottom: 12%; animation-delay: -6s; }

/* Problemi iz prakse */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.pain {
    background: var(--surface);
    padding: clamp(22px, 2.6vw, 34px);
    transition: background .3s var(--ease-out);
}
.pain:hover { background: var(--accent-tint); }
.pain__idx { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); letter-spacing: .14em; }
.pain h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.pain p { color: var(--mute); font-size: .94rem; margin: 0; }

/* Koraci saradnje */
.step-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); counter-reset: step; }
.step { position: relative; padding: 24px 22px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono); font-size: .78rem; color: var(--accent); letter-spacing: .1em;
}
.step h3 { font-size: 1.12rem; margin: 10px 0 6px; }
.step p { color: var(--mute); font-size: .92rem; margin: 0; }

/* FAQ (segment) — details/summary, bez JS-a. Sadrži samo <details>, pa je sam
   kontejner grid: jedna kolona na telefonu, dve od ~760px (kao home). Svaka
   stavka je kartica da kolone deluju uredno; align-items:start drži red ravnim. */
.faq { display: grid; gap: 14px; align-items: start; border-top: 0; }
@media (min-width: 760px) { .faq { grid-template-columns: 1fr 1fr; gap: 16px 18px; } }
.faq details {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.faq details:hover { border-color: var(--hairline-2); }
.faq details[open] { border-color: var(--accent-4); box-shadow: var(--shadow-1); }
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px;
    font-family: var(--font-serif);
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.32;
    transition: color .2s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-2); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-md); }
.faq summary::after {
    content: '+';
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 1.2rem; line-height: 1;
    color: var(--accent-2);
    border: 1px solid var(--hairline-2);
    border-radius: 50%;
    transition: transform .28s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.faq summary:hover::after { border-color: var(--accent-4); }
.faq details[open] summary::after { transform: rotate(135deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.faq details p { color: var(--mute); max-width: 60ch; margin: 0; padding: 2px 20px 20px; line-height: 1.6; }
.faq details[open] p { animation: faqReveal .32s var(--ease-out); }

/* Povezani segmenti */
.land-related { display: flex; flex-wrap: wrap; gap: 12px; }
.land-related a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 20px;
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    font-size: .9rem;
    background: var(--surface);
    transition: border-color .2s, color .2s, transform .2s var(--ease-out);
}
.land-related a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* Nav dropdown (Rešenja) */
.nav__group { position: relative; }
.nav__group > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__group > a svg { transition: transform .25s var(--ease-out); }
.nav__panel {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 250px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: 8px;
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
    z-index: 95;
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__group:hover > a svg,
.nav__group.is-open > a svg { transform: rotate(180deg); }
.nav__panel a {
    display: block;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: .88rem;
    transition: background .18s, color .18s;
}
.nav__panel a:hover { background: var(--accent-tint); color: var(--accent-2); }
.nav__panel a::after { display: none; }

/* Responsive za v4 */
@media (max-width: 1024px) {
    .seg-grid { grid-template-columns: 1fr; }
    .land-hero__inner { grid-template-columns: 1fr; }
    .land-collage { max-width: 360px; margin: 0 auto; order: -1; }
}
@media (max-width: 860px) {
    .pain-grid { grid-template-columns: 1fr; }
    .step-strip { grid-template-columns: 1fr; }
    .fx-orb { display: none; }
}
/* U mobilnom meniju dropdown postaje obična ugnježdena lista */
@media (max-width: 720px) {
    .nav__panel {
        position: static; transform: none;
        opacity: 1; visibility: visible;
        box-shadow: none; border: 0; background: transparent;
        padding: 6px 0 0 16px; min-width: 0;
    }
    .nav__group > a svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .land-collage img { animation: none; }
    .fx-orb { animation: none; }
    body::after { display: none; }
}

/* ============================================================================
   Zoom proizvoda — lupa + lightbox
   ========================================================================== */
.pdp__zoom { cursor: zoom-in; }
.pdp__zoom-hint {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.82); backdrop-filter: blur(4px);
    color: var(--ink); font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid var(--hairline);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
    pointer-events: none;
}
.pdp__zoom:hover .pdp__zoom-hint { opacity: 0; transform: translateY(6px); }

/* Kvadratna lupa — ista geometrija kao kartice (r 10px), hairline umesto belog prstena */
.pdp-lens {
    position: absolute; z-index: 5;
    left: 0; top: 0; /* pomera se kroz transform iz zoom.js — composite, bez layouta po frame-u */
    width: 280px; height: 280px;
    border-radius: 10px;
    border: 1px solid var(--hairline-2);
    box-shadow: 0 18px 44px -12px rgba(8,30,26,.4), inset 0 0 0 1px rgba(255,255,255,.6);
    background-repeat: no-repeat;
    background-color: var(--bg); /* podloga isečka prati temu — bez belog kvadrata na dark */
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s var(--ease-out);
}
.pdp-lens.is-on { opacity: 1; }
@media (max-width: 1240px) { .pdp-lens { width: 230px; height: 230px; } }

.lightbox {
    position: fixed; inset: 0; z-index: 400;
    display: none; place-items: center;
    background: rgba(8,12,11,.92);
    backdrop-filter: blur(6px);
    padding: 4vmin;
}
.lightbox.is-open { display: grid; }
.lightbox__stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.lightbox__img {
    max-width: 92vmin; max-height: 92vmin;
    object-fit: contain;
    cursor: grab; touch-action: none;
    transition: transform .08s linear;
    will-change: transform;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
.lightbox__img:active { cursor: grabbing; }
.lightbox__close {
    position: absolute; top: 18px; right: 22px; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    font-size: 1.6rem; line-height: 1;
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
.lightbox__hint {
    position: absolute; left: 0; right: 0; bottom: 20px;
    text-align: center; color: rgba(255,255,255,.62);
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
    pointer-events: none;
}
@media (max-width: 560px) { .pdp-lens { display: none; } .lightbox__hint { font-size: .64rem; } }

/* ============================================================================
   Kontrast (WCAG AA) — tekstualne upotrebe akcenta idu na tamniju nijansu;
   sitan tekst ne sme na --mute-2.
   ========================================================================== */
.kicker { color: var(--accent-2); }
.nav a.active { color: var(--accent-2); }
a:hover { color: var(--accent-2); }
.pain__idx, .why__no { color: var(--accent-2); }
.seg-card:hover .seg-card__go { color: var(--accent-2); }
.faq summary:hover { color: var(--accent-2); }
.product-card:hover .product-card__name, .product-card:focus-visible .product-card__name { color: var(--accent-2); }
.cta-band .kicker { color: #fff; }
.seg-card__count, .cat-tile__idx { color: var(--mute); }
.product-card__price del, .pdp__price--old { color: var(--mute); }

/* ============================================================================
   v5 — scroll narativ
   ========================================================================== */

/* Vizuelno skriven tekst — naslovi za čitače ekrana (stat traka i sl.) */
.vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Hero H1: tri zastupana proizvođača su glavna linija (#1 fokus),
   obećanje ispod je manji italic podnaslov. Prelom dozvoljen samo iza tačkica. */
.h1-line { display: block; }
.h1-brands { display: inline-block; text-wrap: balance; }
.h1-line--sub { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-top: 8px; }
.h1-dot { color: var(--accent-2); }

/* H1 line-mask: linije izranjaju ispod maske kad copy dobije .is-inview.
   Padding/negativna margina ostavljaju mesto descenderima (j, p) da ih maska ne seče. */
.js .h1-line { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .h1-line > span { display: inline-block; transform: translateY(110%); transition: transform .75s var(--ease-out); }
.js .h1-line:nth-child(2) > span { transition-delay: .12s; }
.js .is-inview .h1-line > span { transform: none; }

/* h2 underline draw — kratka linija se iscrta kad .section__head dobije .is-inview
   (prostor za nju drži padding-bottom u baznom .section__head h2 pravilu) */
.section__head h2::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
    transform-origin: left;
    transition: transform .6s var(--ease-out) .25s;
}
.js .section__head h2::after { transform: scaleX(0); }
.section__head.is-inview h2::after { transform: scaleX(1); }

/* Mehur pattern (tema pranja) — statičan, samo hero i CTA scena, ispod grain-a */
.hero-pro::before, .cta-lite::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%232f9e5e' stroke-width='1'%3E%3Ccircle cx='70' cy='80' r='34' opacity='.07'/%3E%3Ccircle cx='180' cy='40' r='14' opacity='.06'/%3E%3Ccircle cx='340' cy='120' r='52' opacity='.05'/%3E%3Ccircle cx='250' cy='250' r='22' opacity='.07'/%3E%3Ccircle cx='90' cy='330' r='44' opacity='.05'/%3E%3Ccircle cx='360' cy='340' r='16' opacity='.08'/%3E%3Ccircle cx='200' cy='150' r='8' opacity='.09'/%3E%3C/g%3E%3C/svg%3E") 0 0 repeat;
    opacity: .5;
}
.cta-lite { position: relative; overflow: hidden; }
.cta-lite > * { position: relative; z-index: 1; }

/* Aurora "disanje" — samo opacity, kompozitor (scale na full-viewport sloju nije vredeo troška) */
body::before { animation: auroraBreathe 26s ease-in-out infinite alternate; }
@keyframes auroraBreathe {
    from { opacity: .85; }
    to   { opacity: 1; }
}
@media (max-width: 720px) { body::before { animation: none; } }

/* Scroll guide linija (samo home, ≥1024px) — geometriju i čvorove crta motion.js.
   Meandrira levo-desno preko cele širine (sidro je main), suptilno preko sadržaja. */
.scroll-guide {
    position: absolute; top: 0; left: 0; height: 100%;
    width: 100%;
    z-index: 2; pointer-events: none;
}
/* gradijent niti: zelena → tirkiz → zlatna kako se spušta */
.gstop-0 { stop-color: var(--accent); }
.gstop-1 { stop-color: var(--accent-3); }
.gstop-2 { stop-color: var(--gold); }
.scroll-guide__base { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .28; }
.scroll-guide__draw { fill: none; stroke: url(#guideGrad); stroke-width: 2.25; stroke-linecap: round; opacity: .95; }
/* comet vrh: svetli čvor jaše ivicu crtanja dok se skroluje (motion.js ga pozicionira) */
.scroll-guide__tip, .scroll-guide__halo { opacity: 0; transition: opacity .35s var(--ease-out); }
.scroll-guide__tip  { fill: var(--accent-3); }
.scroll-guide__halo { fill: var(--accent-3); filter: blur(5px); }
.scroll-guide.is-drawing .scroll-guide__tip  { opacity: 1; }
.scroll-guide.is-drawing .scroll-guide__halo { opacity: .35; }
.gnode__dot  { fill: var(--surface); stroke: var(--accent); stroke-width: 1.75; transition: fill .3s var(--ease-out), stroke .3s var(--ease-out); }
.gnode__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gnode.is-lit .gnode__dot  { fill: var(--accent); stroke: var(--accent); }
.gnode.is-lit .gnode__ring { animation: nodePulse .65s var(--ease-out) 1; }
@keyframes nodePulse { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
/* Linija stoji IZA sadržaja: sekcije i hero iznad nje (guide je z-index 2), pa nit
   nikad ne prelazi preko teksta/proizvoda — vidi se samo u prazninama i marginama. */
.section, .hero-pro__inner, .stat-band { position: relative; z-index: 3; }
@media (max-width: 1023px) { .scroll-guide { display: none; } }

/* ============================================================================
   Leva nit-vodič na unutrašnjim stranama (katalog, kategorija, segment, PDP).
   Tanka vertikalna linija u levom pojasu sadržaja koja se PUNI sa skrolom kroz
   [data-guide] sekcije; mali čvor putuje niz nju. NE meandrira — strogo leva.
   Geometriju vodi motion.js postavljajući --rail (0..1) na element svaki frame.
   ≥1024px vidljiva; ispod se gasi (gornji .scroll-progress nosi progres).
   ========================================================================== */
.page-rail { display: none; }
@media (min-width: 1024px) {
    .page-rail {
        --rail: 0;
        display: block;
        position: absolute;
        top: 0; bottom: 0;
        /* u levom žlebu container-a: pola gutera od leve ivice main-a */
        left: max(14px, calc((100% - var(--maxw)) / 2 + var(--gut) * 0.42));
        width: 12px;
        z-index: 1; /* iza sadržaja (.section/.hero-pro__inner su z-index 3) */
        pointer-events: none;
    }
    /* sticky unutrašnji omotač drži nit u vidnom polju dok glavni element definiše opseg.
       Sam omotač je providan; vidljivi track je ::before (maskiran da bledi na krajevima),
       pa fill i node (deca) ostaju nemaskirani i node nikad ne nestane na vrhu/dnu. */
    .page-rail__line {
        position: sticky;
        top: calc(var(--header-h) + 64px);
        height: calc(100vh - var(--header-h) - 128px);
        width: 2px;
        margin: 0 auto;
        overflow: visible;
    }
    .page-rail__line::before {
        content: '';
        position: absolute; inset: 0;
        background: var(--hairline-2);
        border-radius: 2px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    /* pređeni deo: gradient nit raste odozgo, visina = --rail */
    .page-rail__fill {
        position: absolute; left: 0; top: 0;
        width: 100%;
        height: calc(var(--rail, 0) * 100%);
        background: linear-gradient(var(--accent), var(--accent-3));
        border-radius: 2px;
        will-change: height;
    }
    /* čvor jaše vrh popunjenog dela */
    .page-rail__node {
        position: absolute; left: 50%;
        top: calc(var(--rail, 0) * 100%);
        width: 9px; height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-glow);
        will-change: top;
    }
}
/* Reduce-motion: nit stoji puna i statična (bez praćenja skrola), čvor sakriven. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .page-rail__fill { height: 100%; }
    .page-rail__node { display: none; }
}

/* Header pri skrolu: tanka gradient nit na donjoj ivici — isti potpis kao vrh footera */
.site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-4), transparent);
    opacity: 0; transition: opacity .4s var(--ease-out);
    pointer-events: none;
}
.site-header.is-scrolled::after { opacity: .55; }

/* ============================================================================
   Mobilni header — full-screen meni + brand u jednom redu
   ========================================================================== */
/* backdrop-filter pravi containing block za position:fixed potomke, pa se
   fixed panel menija kačio za kutiju headera umesto za viewport i virila je
   samo traka od ~57px. Dok je meni otvoren blur ionako nema šta da pokaže —
   gasimo ga, a neprozirni --bg pokriva obe teme. Klasu postavlja app.js. */
body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--teget);   /* ostaje teget dok je meni otvoren — ikonice (svetle) i „X" vidljivi */
    z-index: 120;               /* iznad backdrop-a (90) i panela (95) — „X" uvek klikabilan */
}
/* is-scrolled skuplja header ispod 68px — dok je meni otvoren držimo punu
   visinu da se panel (top: var(--header-h)) nasloni bez rupe */
body.nav-open .site-header__top { min-height: var(--header-h); }

/* "Hemax Pro Wash" se na uskim ekranima lomio u dva reda (header 68 -> 95px,
   pa meni promaši njegovu donju ivicu) — zbijene alatke, brand u jednom redu */
@media (max-width: 430px) {
    .site-header__top { gap: 12px; }
    .header-tools { gap: 6px; }
    .icon-btn, .menu-toggle { width: 36px; height: 36px; }
    .brand { font-size: 1.05rem; gap: 9px; }
    .brand > span { white-space: nowrap; }
}

/* ============================================================================
   v10 — pun responsive raspon: mini telefoni → 4K/TV
   Bazni dizajn (1025–1535px) ostaje isti; ispod su slojevi za uske telefone
   i tablete + tier-ovi za velike ekrane (html font-size diže celu rem skalu,
   container raste sa viewportom umesto da ostane traka od 1280px).
   ========================================================================== */

/* ---- Tableti: nav se sklapa u burger ranije — 6 stavki ne staje do 720 ---- */
@media (max-width: 1140px) {
    .nav { gap: 20px; }
}
@media (max-width: 880px) {
    .nav { display: none; }
    .menu-toggle { display: inline-grid; place-items: center; }
    /* dropdown "Rešenja" u burger meniju postaje obična ugnježdena lista */
    .nav__panel {
        position: static; transform: none;
        opacity: 1; visibility: visible;
        box-shadow: none; border: 0; background: transparent;
        padding: 6px 0 0 16px; min-width: 0;
    }
    .nav__group > a svg { display: none; }
}

/* ---- Katalog/kategorija: filteri su sklopivi panel ispod 1025px ----
   (na telefonu je lista od ~25 linkova gurala proizvode ispod ekrana) */
.filters__summary {
    display: none; /* desktop: sidebar je uvek vidljiv */
    list-style: none;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px;
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-md);
    background: var(--surface);
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary svg { flex-shrink: 0; transition: transform .3s var(--ease-out); }
.filters__acc[open] .filters__summary svg { transform: rotate(180deg); }
@media (max-width: 1024px) {
    .filters__summary { display: flex; }
    .filters__summary:hover { border-color: var(--accent); color: var(--accent-2); }
    .filters__body {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
        gap: 0 36px;
        padding: 4px 4px 0;
    }
    .filters { margin-bottom: 22px; }
    .shop { gap: 16px; }
}

/* ---- Kategorije pločice: 2 kolone na tabletu, 1 na telefonu ---- */
@media (max-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-tile { min-height: 150px; }
    .cat-tile--img { min-height: 200px; }
}

/* ---- Proizvodi: 2 kolone na telefonu (1 kolona je trošila ceo ekran) ---- */
@media (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    .product-card__media { margin-bottom: 10px; }
    .product-card__name { font-size: 1.02rem; }
    .product-card__sku { top: 9px; left: 9px; font-size: .6rem; }
    .product-card__badge { top: 8px; right: 8px; padding: 4px 8px; font-size: .6rem; }
    .product-card__meta { flex-wrap: wrap; gap: 2px 10px; }
    .product-card__unit { font-size: .72rem; }
    .product-card__price { font-size: .88rem; }
}
@media (max-width: 369px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* ---- Mini telefoni (320–374): header mora da stane u jedan red ---- */
@media (max-width: 374px) {
    :root { --gut: 14px; }
    .site-header__top { gap: 8px; }
    .header-tools { gap: 4px; }
    .icon-btn, .menu-toggle { width: 33px; height: 33px; }
    .icon-btn svg, .menu-toggle svg { width: 15px; height: 15px; }
    .brand { font-size: .94rem; gap: 7px; }
    .brand__logo { width: 26px; height: 26px; }
    .hero-pro__trust { grid-template-columns: 1fr; } /* dve kolone su pretesne na 320 */
    .icon-btn .badge-count { top: -3px; right: -3px; min-width: 16px; height: 16px; font-size: .58rem; }
}

/* ---- Tabele (B2B nalog i sl.): scroll umesto razvlačenja na telefonu ---- */
@media (max-width: 720px) {
    .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================================
   Plutajuće dugme za poziv — fiksno dole-desno, širi se u pilulu na hover/fokus
   ========================================================================== */
.fab-call {
    position: fixed; right: 20px; bottom: 20px; z-index: 125;
    display: inline-flex; align-items: center;
    height: 58px; border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-2), #155e36);
    color: #fff; text-decoration: none;
    box-shadow: 0 12px 28px -8px rgba(47, 158, 94, .55), 0 4px 12px rgba(0, 0, 0, .18);
    transition: bottom .3s var(--ease-out), transform .2s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* sakrij FAB na korpi i checkout-u (telefon nije primarni CTA tih strana) */
.page-korpa .fab-call, .page-checkout .fab-call { display: none; }
.fab-call__ico { flex: 0 0 58px; display: grid; place-items: center; }
.fab-call__ico svg { width: 24px; height: 24px; }
.fab-call__label {
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
    transition: max-width .35s var(--ease-out), opacity .25s var(--ease-out), padding .35s var(--ease-out);
}
.fab-call:hover, .fab-call:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -8px rgba(47, 158, 94, .62), 0 6px 16px rgba(0, 0, 0, .22);
}
.fab-call:hover .fab-call__label, .fab-call:focus-visible .fab-call__label {
    max-width: 180px; opacity: 1; padding-right: 22px;
}
/* pulsirajući prsten koji povremeno skreće pažnju */
.fab-call::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--accent-3); pointer-events: none;
    animation: fabPulse 2.6s var(--ease-out) infinite;
}
@keyframes fabPulse {
    0%   { opacity: .55; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.45); }
    100% { opacity: 0;   transform: scale(1.45); }
}
/* podigni dugme iznad cookie trake dok je prikazana (da se ne preklapaju) */
body:has(.cookie.show) .fab-call { bottom: 86px; }
@media (max-width: 760px) { body:has(.cookie.show) .fab-call { bottom: 156px; } }
@media (max-width: 560px) {
    .fab-call { right: 14px; bottom: 14px; height: 54px; }
    .fab-call__ico { flex-basis: 54px; }
    body:has(.cookie.show) .fab-call { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .fab-call { transition: none; }
    .fab-call::before { animation: none; display: none; }
    .fab-call:hover, .fab-call:focus-visible { transform: none; }
}
@media print { .fab-call { display: none; } }

/* ============================================================================
   XL ekrani — od velikih monitora do TV-a. html font-size diže rem skalu
   (tekst, dugmad, ikonice), container prati viewport, gridovi dobijaju kolone.
   ========================================================================== */
@media (min-width: 1536px) {
    :root { --maxw: 1400px; --maxw-wide: 1580px; }
}

@media (min-width: 1920px) {
    html { font-size: 17px; }
    :root { --maxw: 1560px; --maxw-wide: 1760px; --header-h: 74px; --gut: clamp(24px, 2.6vw, 56px); }
    .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .cat-grid--sub { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(254px, 1fr)); }
    .shop { grid-template-columns: 280px 1fr; }
    .brand__logo { width: 38px; height: 38px; }
    .hero-pro__prod img { width: min(72%, 480px); }
}

@media (min-width: 2560px) {
    html { font-size: 19px; }
    :root { --maxw: 1920px; --maxw-wide: 2180px; --header-h: 80px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(318px, 1fr)); gap: clamp(34px, 1.6vw, 52px); }
    .shop { grid-template-columns: 320px 1fr; }
    .cart-layout { grid-template-columns: 1fr 430px; }
    .section { padding: 150px 0; }
    .section--tight { padding: 96px 0; }
    .hero-pro { padding: 110px 0 80px; }
    .site-footer { padding: 120px 0 48px; }
    .cta-band { padding: 110px 80px; }
    .brand__logo { width: 42px; height: 42px; }
    .icon-btn, .menu-toggle { width: 48px; height: 48px; }
    .pdp-lens { width: 360px; height: 360px; }
    .fx-orb--a { width: 540px; height: 540px; }
    .fx-orb--b { width: 430px; height: 430px; }
    .search-modal__panel { width: min(860px, 70vw); }
    .cookie { max-width: 880px; }
    .hero-pro__prod img { width: min(72%, 560px); }
    .land-collage { max-width: 640px; }
    .scene__visual { max-width: 560px; }
    .hero__visual { max-width: 640px; }
    .marquee { --marquee-dur: 56s; padding: 20px 0; }
}

@media (min-width: 3440px) {
    html { font-size: 21px; }
    :root { --maxw: 2360px; --maxw-wide: 2700px; --header-h: 88px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); }
    .shop { grid-template-columns: 380px 1fr; }
    .section { padding: 180px 0; }
    .section--tight { padding: 116px 0; }
    .brand__logo { width: 48px; height: 48px; }
    .icon-btn, .menu-toggle { width: 54px; height: 54px; }
    .pdp-lens { width: 440px; height: 440px; }
    .hero-pro__prod img { width: min(72%, 640px); }
    .marquee { --marquee-dur: 64s; }
}

@media (min-width: 3840px) {
    html { font-size: 22px; }
    :root { --maxw: 2560px; --maxw-wide: 2920px; }
}

/* ============================================================================
   Mobilni meni v2 — panel u bojama hedera (teget), ne preko celog ekrana,
   vidljiv „X", ikonice; + krupniji dugmići u headeru na telefonu
   ========================================================================== */
.nav__ico { display: none; }                 /* ikonice samo u mobilnom panelu */
.nav__cta { display: none; }                  /* „Pozovi" stavka samo na mobilnom */
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-burger { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.nav-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(8, 14, 24, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out), visibility .25s; }
.nav-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 880px) {
    /* krupniji tap-targeti u headeru */
    .site-header .icon-btn, .site-header .menu-toggle { width: 46px; height: 46px; border-radius: 13px; }
    .site-header .icon-btn svg, .site-header .menu-toggle svg { width: 21px; height: 21px; }
    .site-header__top { gap: 8px; }

    .nav { display: none; }
    .nav.open {
        display: flex; flex-direction: column; align-items: stretch; gap: 3px;
        position: fixed; top: calc(var(--header-h) + 6px); right: 10px; left: auto;
        width: min(88vw, 340px);
        background: var(--teget-deep, #111c32);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 16px; padding: 10px;
        box-shadow: 0 26px 70px -20px rgba(0, 0, 0, .6);
        max-height: calc(100dvh - var(--header-h) - 22px); overflow: auto;
        z-index: 95; font-size: 1rem;
        animation: navIn .22s var(--ease-out);
    }
    .nav.open > a, .nav.open .nav__group > a {
        display: flex; align-items: center; gap: 12px; width: 100%;
        color: #e7ebe9 !important; padding: 13px 14px; border-radius: 11px; font-size: 1rem;
    }
    .nav.open > a::after, .nav.open .nav__group > a::after { display: none; }
    .nav.open > a.active, .nav.open > a:hover, .nav.open .nav__group > a:hover { background: rgba(255, 255, 255, .09); color: #fff !important; }
    .nav.open .nav__ico { display: inline-flex !important; flex: 0 0 auto; width: 21px; height: 21px; color: var(--accent-4); }
    .nav.open .nav__ico svg { display: block !important; width: 100%; height: 100%; }
    .nav.open .nav__caret { margin-left: auto; }
    .nav.open .nav__cta { display: flex; margin-top: 4px; background: var(--accent); color: #fff !important; justify-content: center; font-weight: 600; }
    .nav.open .nav__cta .nav__ico { color: #fff; }
    /* podmeni „Rešenja" inline u panelu */
    .nav.open .nav__group { display: flex; flex-direction: column; }
    .nav.open .nav__panel {
        position: static; opacity: 1; visibility: visible; transform: none;
        background: transparent; border: 0; box-shadow: none; min-width: 0;
        display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 32px; margin: 0;
    }
    .nav.open .nav__panel a { color: #aeb8bf; padding: 9px 12px; border-radius: 9px; }
    .nav.open .nav__panel a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Mobilno centriranje — ništa zalepljeno uz levu ivicu
   ========================================================================== */
@media (max-width: 760px) {
    .hero-pro__copy { text-align: center; }
    .hero-pro__copy .kicker { justify-content: center; }
    .hero-pro__copy .lead { margin-left: auto; margin-right: auto; }
    .hero-pro__cta { justify-content: center; }
    .hero-pro__trust { max-width: 360px; margin-left: auto; margin-right: auto; }
    .section__head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .section__head .more { align-self: center; }
    .cta-lite { text-align: center; }
    .cta-lite .lead { margin-left: auto; margin-right: auto; }
    .cta-lite__actions { justify-content: center; }
    /* landing hero (segmenti) centriran */
    .land-hero__copy { text-align: center; }
    .land-hero__copy .kicker { justify-content: center; }
    .land-hero__copy .lead { margin-left: auto; margin-right: auto; }
    .land-hero__cta { justify-content: center; }
    .footer-grid { text-align: center; }
    .footer-brand, .footer-social { justify-content: center; }
    .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================================
   Hero sa fotografijom asortimana kao pozadinom (.hero-pro--bg)
   Bez belog scrim-a — fotografija je cela vidljiva; tekst CENTRIRAN u staklenoj
   (frosted) kartici koja ga izdvaja od pozadine.
   ========================================================================== */
.hero-pro--bg {
    background-image:
        radial-gradient(135% 125% at 50% 38%, transparent 34%, rgba(7,16,22,.32) 100%),
        var(--hero-bg);
    background-size: cover;
    background-position: 50% 44%;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--hairline);
}
.hero-pro--bg .hero-pro__inner {
    grid-template-columns: min(640px, 100%);
    justify-content: center;
    text-align: center;
}
.hero-pro--bg .fx-orb { display: none; }

/* Staklena kartica: frosted sloj je ::before (ne na samom copy-ju) — inače
   backdrop-filter u Chrome-u sakrije decu koja imaju transform iz reveal animacije. */
/* Bez ikakvog boxa/aure — svaki element nosi svoj tamni glow ispod (izdignut od slike). */
.hero-pro--bg .hero-pro__copy {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(22px, 3.4vw, 48px) clamp(24px, 4vw, 60px);
    color: #fff;
    /* 1px outline drži čitljivost; meka aura iza (::before) podiže tekst bez tvrde ivice */
    text-shadow:
        1px 0 0 rgba(0,0,0,.82), -1px 0 0 rgba(0,0,0,.82), 0 1px 0 rgba(0,0,0,.82), 0 -1px 0 rgba(0,0,0,.82),
        1px 1px 0 rgba(0,0,0,.82), -1px -1px 0 rgba(0,0,0,.82), 1px -1px 0 rgba(0,0,0,.82), -1px 1px 0 rgba(0,0,0,.82),
        0 0 7px rgba(0,0,0,.55);
}
/* Meka eliptična aura iza naslova/teksta — postepeno se gasi u potpunu providnost,
   pa nema linije/naglog prelaza ka slici (umesto isečenog text-shadow oblaka). */
.hero-pro--bg .hero-pro__copy::before {
    content: "";
    position: absolute;
    inset: -12% -10%;
    z-index: -1;
    background: radial-gradient(58% 64% at 50% 48%,
        rgba(6,13,18,.62) 0%, rgba(6,13,18,.5) 30%, rgba(6,13,18,.3) 54%,
        rgba(6,13,18,.12) 75%, rgba(6,13,18,0) 92%);
    pointer-events: none;
}
.hero-pro--bg .kicker { justify-content: center; color: #fff; font-weight: 700; }
.hero-pro--bg .kicker::before, .hero-pro--bg .kicker::after { background: rgba(255, 255, 255, .9); }
.hero-pro--bg .hero-pro__copy h1 { color: #fff; }
.hero-pro--bg .hl-accent { color: #7fe0c4; }
.hero-pro--bg .hero-pro__copy .lead { color: #fff; margin-left: auto; margin-right: auto; }
.hero-pro--bg .hero-pro__cta { justify-content: center; }
.hero-pro--bg .hero-pro__trust {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border-top-color: rgba(255, 255, 255, .18);
}
.hero-pro--bg .hero-pro__trust b { color: #fff; }
.hero-pro--bg .hero-pro__trust small { color: rgba(255, 255, 255, .92); }
.hero-pro--bg .hero-pro__tico { background: rgba(10, 22, 30, .62); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .22); }
.hero-pro--bg .hero-pro__cta .btn { box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.hero-pro--bg .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(8, 18, 26, .42); }
.hero-pro--bg .btn--ghost:hover { background: rgba(8, 18, 26, .62); border-color: #fff; }
.hero-pro--bg .hero-pro__trust { border-top-color: rgba(255, 255, 255, .26); }
@media (max-width: 860px) {
    .hero-pro--bg { background-position: 50% 64%; }
    .hero-pro--bg .hero-pro__inner { grid-template-columns: 1fr; }
    .hero-pro--bg .hero-pro__copy { padding: clamp(22px, 5vw, 34px) clamp(18px, 5vw, 30px); }
}

/* Override globalnog inline "Responsive emergency fix" stila (html,body overflow-x:hidden)
   koji je pravio body scroll-container i rušio position:sticky header. Horizontalni overflow
   se seče na <main> (gore), pa je ovo bezbedno i sticky header radi na svim stranicama. */
html, body { overflow-x: visible !important; }

/* ============================================================================
   Utisci klijenata (KP ocene) + FAQ
   ========================================================================== */
.reviews__top { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--accent-tint); margin-bottom: 26px; }
.reviews__rating { display: flex; align-items: center; gap: 14px; }
.reviews__stars { color: #f4a701; font-size: 1.1rem; letter-spacing: 2px; }
.reviews__big { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--ink); line-height: 1.12; }
.reviews__sub { font-size: .84rem; color: var(--mute); margin-top: 2px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.review { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); transition: border-color .3s; }
.review:hover { border-color: var(--accent-4); }
.review__stars { color: #f4a701; font-size: .82rem; letter-spacing: 1px; }
.review__text { margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: .95rem; }
.review__who { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); }
.review__name { font-weight: 600; font-size: .9rem; color: var(--ink); }
.review__date { font-size: .76rem; color: var(--mute); font-family: var(--font-mono); }

/* Pitanja (home): kartice u jednoj koloni na telefonu, dve od ~760px.
   align-items:start da otvorena kartica ne razvuče komšiju u svom redu. */
.faq-list { display: grid; gap: 14px; max-width: 920px; align-items: start; }
@media (min-width: 760px) {
    .faq-list { grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: none; }
}
.faq-item {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.faq-item:hover { border-color: var(--hairline-2); }
.faq-item[open] { border-color: var(--accent-4); box-shadow: var(--shadow-1); }
.faq-item summary {
    cursor: pointer; list-style: none;
    padding: 18px 20px; /* udoban tap target ≥44px */
    font-weight: 600; color: var(--ink); line-height: 1.4;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: color .2s var(--ease-out);
}
.faq-item summary:hover { color: var(--accent-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-md); }
/* +/- afordansa u kružiću — jasan signal da se otvara, zarotira u „−" kad je open */
.faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 1.2rem; line-height: 1;
    color: var(--accent-2);
    border: 1px solid var(--hairline-2);
    border-radius: 50%;
    transition: transform .28s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.faq-item summary:hover::after { border-color: var(--accent-4); }
.faq-item[open] summary::after { transform: rotate(135deg); background: var(--accent); color: #fff; border-color: var(--accent); }
.faq-item__a { margin: 0; padding: 2px 20px 20px; color: var(--mute); line-height: 1.6; max-width: 60ch; }
/* mek ulaz odgovora — gasi se uz reduce-motion (globalni guard nulira animation) */
.faq-item[open] .faq-item__a { animation: faqReveal .32s var(--ease-out); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }