/* ============================================================================
   Hemija Svilenković — design system v2
   Lab-grade, editorial, motion-rich. Cream / ink / deep-emerald.
   ========================================================================== */

:root {
    /* Ink + paper */
    --ink:        #0a0a0b;
    --ink-soft:   #1a1a1d;
    --bg:         #f7f6f1;
    --bg-2:       #f1efe7;
    --surface:    #ffffff;
    --mute:       #6e6e74;
    --mute-2:     #9a9a9f;
    --hairline:   #e9e6dd;
    --hairline-2: #d9d5cb;

    /* Emerald scale */
    --accent:     #0e5d4e;
    --accent-2:   #084538;
    --accent-3:   #15806c;
    --accent-4:   #57b39e;
    --accent-tint:#e7f1ee;
    --accent-glow: rgba(14, 93, 78, 0.16);

    /* 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; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--hairline-2) transparent;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    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';
    overflow-x: hidden;
}

/* 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); }

.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: 15px 0;
    gap: 24px;
    transition: padding .3s var(--ease-out);
}
.site-header.is-scrolled .site-header__top { padding: 9px 0; }

.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(--ink);
    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; }

.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);
}

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--bg);
    --btn-bd: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px;
    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); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent::before { background: var(--accent-2); }
.btn--accent:hover { border-color: var(--accent-2); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light::before { background: var(--accent); }
.btn--sm { padding: 10px 18px; 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 {
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    padding: 16px 0;
    --marquee-dur: 32s;
}
.marquee__track {
    display: flex; align-items: center; gap: 0;
    width: max-content;
    animation: marquee var(--marquee-dur) linear infinite;
    will-change: transform;
}
.marquee__item {
    display: inline-flex; align-items: center; gap: 18px;
    flex: 0 0 auto;
    padding: 0 26px;
    font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.6rem);
    color: #f2f1ec; white-space: nowrap;
}
.marquee__item span { color: var(--accent-4); }
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-4); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { 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; }
.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
   ========================================================================== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.cat-tile {
    background: var(--surface);
    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); transition: transform .35s var(--ease-out), color .35s; }
.cat-tile:hover .cat-tile__arrow { transform: translate(4px, -4px); color: #fff; }

/* ============================================================================
   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; }
.product-card__media {
    position: relative;
    aspect-ratio: 1 / 1.08;
    background:
        radial-gradient(120% 100% at 50% 0%, #fff, var(--bg-2));
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color .3s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.product-card:hover .product-card__media {
    border-color: var(--accent-4);
    transform: translateY(-6px);
    box-shadow: var(--shadow-2);
}
.product-card__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--ease-out);
}
.product-card:hover .product-card__media::after { transform: translateX(120%); }
.product-card__media img,
.product-card__media svg { width: 100%; height: 100%; object-fit: contain; padding: 16%; transition: transform .5s var(--ease-out); }
.product-card:hover .product-card__media img,
.product-card:hover .product-card__media svg { transform: scale(1.06) rotate(-1deg); }
.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(--ink); 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 { color: var(--accent); }
.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(--ink); 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(--ink-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(--ink-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;
    background: radial-gradient(120% 100% at 50% 0%, #fff, var(--bg-2));
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    display: grid; place-items: center;
    padding: 8%;
    position: sticky; top: calc(var(--header-h) + 20px);
    box-shadow: var(--shadow-1);
}
.pdp__media img, .pdp__media svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(8,30,26,0.14)); }
.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-row { display: flex; gap: 14px; align-items: stretch; margin: 24px 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; }

.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 { 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; }
.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; border: 1px solid var(--hairline); border-radius: 8px; display: grid; place-items: center; background: var(--surface); flex-shrink: 0; }
.cart-table .cart-thumb img, .cart-table .cart-thumb svg { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.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(--ink); 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.5fr repeat(3, 1fr); gap: 48px; 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 { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; margin-bottom: 12px; }
.footer-tag { color: #a8a8ad; font-size: 0.92rem; max-width: 40ch; }
.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
   ========================================================================== */
.crumbs { padding: 18px 0 0; font-size: 0.8rem; color: var(--mute); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: lowercase; }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--accent); }
.crumbs span.sep { margin: 0 8px; color: var(--mute-2); }

/* ============================================================================
   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 .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(--ink); 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; border: 1px solid var(--hairline); border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.search-modal__thumb img, .search-modal__thumb svg { width: 100%; height: 100%; object-fit: contain; padding: 18%; }

/* ============================================================================
   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; }
    .marquee__track { animation: none !important; }
    .scroll-cue { display: none; }
}

/* ============================================================================
   v3 — minimal homepage + real product photos
   ========================================================================== */
/* Real product photos: trim padding + blend white JPEG bg into the card */
.product-card__media img.pmedia { padding: 9%; mix-blend-mode: multiply; }
.pdp__media img.pmedia { mix-blend-mode: multiply; filter: none; }
.cart-table .cart-thumb img.pmedia { mix-blend-mode: multiply; }

/* 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: var(--surface); 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%; mix-blend-mode: multiply; }
@media (max-width: 1024px) { .pdp__gallery { position: static; } }

/* Hero (lite) */
.hero-lite { padding: clamp(36px,6vw,88px) 0 clamp(28px,4vw,64px); }
.hero-lite__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,72px); align-items: center; }
.hero-lite__copy h1 { margin: 16px 0 18px; }
.hl-accent { color: var(--accent); font-style: italic; }
.hero-lite__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-lite__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 20px 0 0; margin: 30px 0 0; border-top: 1px solid var(--hairline); }
.hero-lite__trust li { font-size: .9rem; color: var(--mute); }
.hero-lite__trust b { color: var(--ink); font-weight: 600; }
.hero-lite__media { position: relative; display: block; aspect-ratio: 1/1; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: radial-gradient(120% 100% at 50% 0%, #fff, var(--bg-2)); box-shadow: var(--shadow-2); overflow: hidden; }
.hero-lite__media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; transition: transform .5s var(--ease-out); }
.hero-lite__media:hover img { transform: scale(1.04); }
.hero-lite__tag { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: .7rem; color: var(--ink); background: rgba(255,255,255,.78); padding: 5px 11px; border-radius: 999px; }

/* 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); }
.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-lite__inner { grid-template-columns: 1fr; }
    .hero-lite__media { max-width: 340px; order: -1; margin: 0 auto; width: 100%; }
    .why-grid { grid-template-columns: 1fr; }
    .cta-lite { flex-direction: column; align-items: flex-start; }
}


/* ============================================================================
   Dark theme (hemija2) — flips design tokens; product image tiles stay light
   so the real photos remain legible against the dark UI.
   ========================================================================== */
body.theme-dark {
    --ink: #f4f3ee; --ink-soft: #d9d8d2;
    --bg: #0c0e0d; --bg-2: #141816; --surface: #161a18;
    --mute: #a6a8a2; --mute-2: #74776f;
    --hairline: #262b27; --hairline-2: #353b34;
    --accent: #2fb89b; --accent-2: #1f8f78; --accent-3: #46c9ab; --accent-4: #6fd4bd;
    --accent-tint: #12231e; --accent-glow: rgba(47,184,155,.18);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-3: 0 30px 70px -24px rgba(0,0,0,.72);
    --shadow-accent: 0 22px 48px -20px rgba(47,184,155,.35);
    color-scheme: dark;
}
body.theme-dark::before {
    background:
        radial-gradient(120% 60% at 80% -10%, rgba(47,184,155,.08), transparent 60%),
        radial-gradient(90% 50% at 0% 0%, rgba(176,133,52,.04), transparent 55%);
}
body.theme-dark .site-header { background: rgba(12,14,13,.72); }
body.theme-dark .site-header.is-scrolled { background: rgba(12,14,13,.92); }
body.theme-dark .site-footer { background: #080f0d; }
body.theme-dark .btn--light { --btn-fg: #0c0e0d; }
/* Keep product image tiles light (photos have white/transparent bg) */
body.theme-dark .product-card__media,
body.theme-dark .pdp__media,
body.theme-dark .hero-lite__media { background: radial-gradient(120% 100% at 50% 0%, #faf9f5, #ece9e1); }
body.theme-dark .pdp__thumb,
body.theme-dark .cart-table .cart-thumb { background: #faf9f5; }
body.theme-dark .hero-lite__tag { background: rgba(0,0,0,.55); color: #fff; }

/* 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; }
}

/* Dark theme: cookie banner must stay dark-surfaced (var(--ink) flips light in dark) */
body.theme-dark .cookie { background: #161a18; color: #e8e8ea; border: 1px solid #2a2f2b; }
body.theme-dark .cookie__btn--primary { color: #0c0e0d; }
body.theme-dark .cookie a { color: #fff; }