/* Shop-specific styles - build on tokens.css + pages.css (ne overridaj .hero, već koristi .hero-* iz pages.css) */

/* ===== PAGINATION (custom default view) ===== */
.pagination { margin-top: 32px; display: flex; justify-content: center; }
.pagination ul {
    display: inline-flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--black-card);
    border: 1px solid var(--gray-line);
    color: var(--white-dim);
    font-family: var(--font-condensed);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.15s;
    text-decoration: none;
}
.pagination li a:hover {
    border-color: var(--red);
    color: var(--red);
}
.pagination li.active span {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.pagination li .disabled,
.pagination li .ellipsis {
    color: var(--gray-text);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* ===== KODEKS sekcija ===== */
.kodeks-section {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(196,30,42,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(196,30,42,0.05) 0%, transparent 50%),
        linear-gradient(180deg, #050505 0%, #020202 50%, #050505 100%);
    border-top: 1px solid rgba(196,30,42,0.15);
    border-bottom: 1px solid rgba(196,30,42,0.15);
    padding-top: 90px;
    padding-bottom: 90px;
}
.kodeks-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 48px, rgba(255,255,255,0.015) 48px, rgba(255,255,255,0.015) 50px),
        repeating-linear-gradient(90deg, transparent 0, transparent 98px, rgba(255,255,255,0.012) 98px, rgba(255,255,255,0.012) 100px);
    pointer-events: none;
    z-index: 1;
}
.kodeks-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (max-width: 1000px) { .kodeks-layout { grid-template-columns: 1fr; gap: 50px; } }

/* Lijevi tekst */
.kodeks-text { max-width: 560px; }
.kodeks-text .section-title { margin-bottom: 26px; }
.kodeks-lead {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--white);
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    text-transform: uppercase;
    padding-left: 18px;
    border-left: 3px solid var(--red);
}
.kodeks-lead em {
    display: block;
    font-style: normal;
    color: var(--red);
    font-size: 15px;
    letter-spacing: 3px;
    margin-top: 6px;
    font-weight: 500;
}

/* Lista 3 stuba */
.kodeks-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kodeks-pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 18px 20px 18px 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(196,30,42,0.5);
    transition: all 0.25s ease;
    position: relative;
}
.kodeks-pillar:hover {
    background: rgba(196,30,42,0.06);
    border-left-color: var(--red);
    transform: translateX(4px);
}
.kodeks-pillar-num {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--red);
    letter-spacing: -1px;
    width: 60px;
    flex-shrink: 0;
}
.kodeks-pillar-content { min-width: 0; }
.kodeks-pillar-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
    color: var(--white);
    text-shadow: 0 0 30px rgba(196,30,42,0.25);
}
.kodeks-pillar-content p {
    color: var(--white-dim);
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
}

/* Desni collage - 3 slike asimetrično */
.kodeks-collage {
    position: relative;
    aspect-ratio: 1 / 0.95;
    max-width: 760px;
    width: 100%;
    margin: 0;
}
.kodeks-img {
    position: absolute;
    overflow: hidden;
    border: 1px solid var(--gray-line);
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.4s;
}
.kodeks-img svg,
.kodeks-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Slika 1 - gornja lijeva, vertikalna */
.kodeks-img-1 {
    top: 14%;
    left: 0;
    width: 56%;
    height: 70%;
    transform: rotate(-3deg);
    z-index: 1;
}
/* Slika 2 - sredina, kvadratna */
.kodeks-img-2 {
    top: 0%;
    left: 28%;
    width: 52%;
    height: 50%;
    z-index: 2;
    border-color: rgba(196, 30, 42, 0.5);
    box-shadow: 0 25px 60px rgba(0,0,0,0.65), 0 0 40px rgba(196,30,42,0.15);
}
/* Slika 3 - donja desna, preklapa srednju */
.kodeks-img-3 {
    bottom: 0;
    right: 0%;
    width: 50%;
    height: 60%;
    transform: rotate(4deg);
    z-index: 3;
}
.kodeks-img-tag {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(10,10,10,0.92);
    color: var(--red);
    border: 1px solid var(--red);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    z-index: 2;
    white-space: nowrap;
}

.kodeks-collage:hover .kodeks-img-1 { transform: rotate(-4deg) translate(-6px, -6px); }
.kodeks-collage:hover .kodeks-img-2 { transform: translateY(-8px); }
.kodeks-collage:hover .kodeks-img-3 { transform: rotate(5deg) translate(6px, 6px); }

/* "EST. 2020" pečat preko collage-a - pravougaoni ink stamp */
.kodeks-stamp {
    position: absolute;
    bottom: 4%;
    left: 4%;
    width: 200px;
    height: 110px;
    color: var(--red);
    z-index: 4;
    transform: rotate(-7deg);
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
    opacity: 0.92;
    /* distressed/used ink stamp effect */
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, black 25%, black 70%, rgba(0,0,0,0.6) 95%, rgba(0,0,0,0.85) 100%);
            mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, black 25%, black 70%, rgba(0,0,0,0.6) 95%, rgba(0,0,0,0.85) 100%);
}
.kodeks-stamp svg { width: 100%; height: 100%; display: block; }
.kodeks-stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 70%, rgba(10,10,10,0.5) 0%, transparent 5%),
        radial-gradient(circle at 78% 30%, rgba(10,10,10,0.5) 0%, transparent 4%),
        radial-gradient(circle at 50% 85%, rgba(10,10,10,0.4) 0%, transparent 4%),
        radial-gradient(circle at 88% 78%, rgba(10,10,10,0.45) 0%, transparent 3%);
    pointer-events: none;
    mix-blend-mode: multiply;
}
@media (max-width: 600px) {
    .kodeks-stamp { width: 160px; height: 88px; }
}

@media (max-width: 1000px) {
    .kodeks-collage { max-width: 500px; margin: 0 auto; }
}

/* Dvije hero slike na dnu desno - resize-ovane da stanu, bottom-aligned, ne prelaze vrh */
.hero-shots {
    position: absolute;
    right: 8%;
    bottom: 0;
    height: 92%;
    max-width: 58vw;
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
}
.hero-shot {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(196,30,42,0.15));
}
.hero-shot-1 { z-index: 1; margin-right: -40px; }
.hero-shot-2 { z-index: 2; }

@media (max-width: 1200px) {
    .hero-shots { height: 70%; max-width: 45vw; right: 4%; }
}
@media (max-width: 1024px) {
    .hero-shots { height: 55%; max-width: 50vw; opacity: 0.9; right: 2%; }
}

/* ============================================
   MARQUEE STRIP (ispod hero-a)
   ============================================ */
.marquee-strip {
    background: var(--red);
    overflow: hidden;
    position: relative;
    z-index: 5;
    padding: 14px 0;
    border-top: 1px solid rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.4);
}
.marquee-strip::before, .marquee-strip::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
    z-index: 2; pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--red), transparent); }
.marquee-strip::after { right: 0; background: linear-gradient(-90deg, var(--red), transparent); }
.marquee-track {
    display: inline-flex; align-items: center; gap: 32px;
    white-space: nowrap;
    animation: marqueeScroll 60s linear infinite;
    will-change: transform;
}
.marquee-track span {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}
.marquee-track span:nth-child(odd) {
    color: rgba(255,255,255,0.5);
    font-family: var(--font-condensed);
    font-size: 14px;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================
   SEKTORI (CLUB / STREET / CARTEL)
   ============================================ */
.sector { position: relative; overflow: hidden; }
.sector .sector-bg {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: 0.25;
    background-position: center;
    background-size: cover;
    filter: blur(2px) saturate(0.7);
}
.sector .sector-overlay {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
}
.sector > *:not(.sector-bg):not(.sector-overlay) { position: relative; z-index: 2; }

.sector-eyebrow {
    color: var(--red-bright) !important;
    font-weight: 700 !important;
}
.sector-tagline {
    font-family: var(--font-condensed);
    color: var(--white-dim);
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 14px;
}
.sector-tagline strong {
    color: var(--red-bright);
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1px;
}

/* STREET - sepia, ulica, raw */
.sector-street .sector-bg {
    background-image:
        linear-gradient(180deg, rgba(10,10,10,0.85) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.95) 100%),
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(196,30,42,0.04) 4px 5px),
        radial-gradient(circle at 75% 30%, rgba(196,30,42,0.18) 0%, transparent 55%);
    filter: contrast(1.1) saturate(0.5);
}
.sector-street::before {
    content: 'STREET';
    position: absolute; right: -2vw; top: 30%;
    font-family: var(--font-display);
    font-size: clamp(120px, 20vw, 320px);
    font-weight: 400;
    color: rgba(255,255,255,0.025);
    letter-spacing: -4px;
    line-height: 0.85;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-90deg);
    transform-origin: right top;
    white-space: nowrap;
}

/* CLUB - neon, tama */
.sector-club { background: linear-gradient(180deg, #0a0a0a 0%, #100507 60%, #0a0a0a 100%); }
.sector-club .sector-bg {
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(196,30,42,0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 20%, rgba(229,37,53,0.22) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,40,60,0.15) 0%, transparent 60%);
    filter: blur(40px);
    opacity: 0.6;
    animation: clubPulse 6s ease-in-out infinite;
}
@keyframes clubPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.7; }
}
.sector-club::before {
    content: 'CLUB';
    position: absolute; left: -1vw; top: 25%;
    font-family: var(--font-display);
    font-size: clamp(120px, 20vw, 320px);
    color: rgba(229,37,53,0.04);
    letter-spacing: -4px;
    line-height: 0.85;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

/* ============================================
   KODEKS V2 - full-bleed photo panels
   ============================================ */
.kodeks-v2 { position: relative; }
.kodeks-v2-intro {
    text-align: center;
    padding: 80px 24px 40px;
    position: relative;
}
.kodeks-v2-intro .hero-sub { color: var(--red-bright); margin-bottom: 14px; }
.kodeks-v2-lead {
    font-family: var(--font-condensed);
    color: var(--white-dim);
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 18px;
}
.kodeks-v2-lead strong { color: var(--red-bright); font-family: var(--font-display); font-size: 24px; }

.kodeks-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: #000;
}
.kodeks-panel {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: default;
    isolation: isolate;
}
.kodeks-panel-bg {
    position: absolute; inset: 0;
    background-image: var(--panel-img);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.15) brightness(0.55);
    transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
}
.kodeks-panel::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 35%, rgba(10,10,10,0.85) 100%),
        radial-gradient(ellipse at center, transparent 55%, rgba(196,30,42,0.18) 100%);
    z-index: 1;
    transition: opacity 0.5s ease;
}
.kodeks-panel:hover .kodeks-panel-bg {
    filter: grayscale(0%) contrast(1.1) brightness(0.7);
    transform: scale(1.04);
}
.kodeks-panel:hover::before { opacity: 0.7; }

/* Crveni X overlay */
.kodeks-panel-x {
    position: absolute; inset: 14% 22%;
    z-index: 3;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kodeks-panel:hover .kodeks-panel-x {
    opacity: 0.4;
    transform: scale(0.92) rotate(2deg);
}
.x-line {
    position: absolute; top: 50%; left: 0;
    width: 100%; height: 5px;
    background: var(--red);
    box-shadow: 0 0 30px rgba(196,30,42,0.6);
    transform-origin: center;
}
.x-line-1 { transform: translateY(-50%) rotate(-22deg); }
.x-line-2 { transform: translateY(-50%) rotate(22deg); }

.kodeks-panel-num {
    position: absolute;
    top: 24px; left: 28px;
    font-family: var(--font-stencil);
    font-size: clamp(64px, 8vw, 110px);
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    line-height: 1;
    z-index: 4;
    text-shadow: 4px 4px 0 var(--red);
    letter-spacing: -2px;
}

.kodeks-panel-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 32px 36px;
    z-index: 4;
}
.kodeks-panel-eyebrow {
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    margin-bottom: 8px;
    font-weight: 700;
}
.kodeks-panel-h3 {
    font-family: var(--font-display);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    line-height: 0.95;
    margin-bottom: 16px;
}
.kodeks-panel-text {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.65;
    max-width: 360px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease 0.1s;
}
.kodeks-panel-text strong { color: var(--red-bright); font-weight: 700; }
.kodeks-panel:hover .kodeks-panel-text {
    max-height: 200px;
    opacity: 1;
}

.kodeks-v2-foot {
    text-align: center;
    padding: 50px 24px;
}

@media (max-width: 900px) {
    .kodeks-panels { grid-template-columns: 1fr; }
    .kodeks-panel { aspect-ratio: 16 / 11; }
    .kodeks-panel-text { max-height: 200px; opacity: 1; } /* na mobilnom uvijek vidljiv */
    .kodeks-panel-num { font-size: 80px; }
    .marquee-track span { font-size: 18px; }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal-init {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-init.reveal-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1; transform: none; transition: none; }
}

/* HERO VIDEO BACKGROUND */
.hero-video-poster {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 1;
    filter: contrast(1.05) saturate(0.9) brightness(0.85);
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    pointer-events: none;
    filter: contrast(1.05) saturate(0.9) brightness(0.85);
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.85) 100%),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
}

/* HERO entrance animacije (na page load, ne na scroll) */
.hero.hero-video-mode .hero-est,
.hero.hero-video-mode .hero-content-bottom > * {
    opacity: 0;
    transform: translateY(40px);
    animation: heroFadeIn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero.hero-video-mode .hero-est { animation-delay: 0.3s; transform: translateY(0); }
.hero.hero-video-mode .hero-est { animation-name: heroFadeInPlain; }
.hero.hero-video-mode .hero-content-bottom .hero-sub  { animation-delay: 0.5s; }
.hero.hero-video-mode .hero-content-bottom .hero-h1   { animation-delay: 0.75s; }
.hero.hero-video-mode .hero-content-bottom .hero-desc { animation-delay: 1s; }
.hero.hero-video-mode .hero-content-bottom .hero-btns { animation-delay: 1.2s; }
/* Scroll hint - ne diraj transform da ostane centriran (pulse animacija ima translateX(-50%)) */
.hero.hero-video-mode .hero-scroll-hint {
    opacity: 0;
    animation: heroFadeInPlain 0.8s ease-out 1.5s forwards, heroScrollPulse 2s ease-in-out 2.3s infinite;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroFadeInPlain {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* HERO VIDEO MODE — full-bleed video, content bottom-center */
.hero.hero-video-mode {
    position: relative;
    /* Računa nav (70px) — hero filuje viewport ispod nav-a kad announce scroluje */
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    min-height: 0;
    max-height: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    background: #000;
}
.hero.hero-video-mode .hero-content-bottom {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 900px;
    text-align: center;
    padding: 0 32px 72px;
    margin: 0 auto;
}
.hero.hero-video-mode .hero-content-bottom .hero-sub {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 24px;
    font-size: 12px;
    letter-spacing: 4px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(196,30,42,0.4);
    padding: 8px 18px;
}
.hero.hero-video-mode .hero-content-bottom .hero-sub .hs-star {
    color: var(--red);
    font-size: 14px;
    line-height: 1;
}
.hero.hero-video-mode .hero-content-bottom .hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 120px);
    font-weight: 400;
    margin-bottom: 24px;
    line-height: 0.92;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.6);
    letter-spacing: 1.5px;
    white-space: nowrap;
    color: var(--white);
}
.hero.hero-video-mode .hero-content-bottom .hero-h1 em {
    display: inline;
    font-family: var(--font-stencil);
    font-weight: 900;
    font-style: normal;
    color: var(--red);
    -webkit-text-stroke: 0;
    text-shadow: 3px 3px 0 #000, 0 0 30px rgba(196,30,42,0.5);
    margin-left: 12px;
    letter-spacing: 2px;
}
@media (max-width: 700px) {
    .hero.hero-video-mode .hero-content-bottom .hero-h1 {
        white-space: normal;
        font-size: clamp(42px, 12vw, 68px);
    }
}
.hero.hero-video-mode .hero-content-bottom .hero-desc {
    margin: 0 auto 32px;
    max-width: 600px;
    font-size: 16px;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.hero.hero-video-mode .hero-content-bottom .hero-btns {
    justify-content: center;
}
.hero.hero-video-mode .hero-est {
    z-index: 5;
    color: rgba(255,255,255,0.6);
}

/* Scroll hint na dnu */
.hero-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--font-condensed);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    pointer-events: none;
    animation: heroScrollPulse 2s ease-in-out infinite;
}
.hero-scroll-hint .hsh-arrow {
    font-size: 14px;
    color: var(--red-bright);
}
@keyframes heroScrollPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* Sakri stare hero-shots (više se ne koriste) */
.hero.hero-video-mode .hero-shots { display: none; }

@media (max-width: 700px) {
    .hero.hero-video-mode .hero-content-bottom { padding: 0 20px 80px; }
    .hero.hero-video-mode .hero-content-bottom .hero-h1 em { display: block; margin-left: 0; margin-top: 6px; }
    .hero-scroll-hint { bottom: 16px; }
}

/* OVERRIDE — video-mode hero ostaje bottom-aligned i full-bleed na mobile (ne stack) */
@media (max-width: 820px) {
    .hero.hero-video-mode {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        height: calc(100vh - 70px) !important;
        height: calc(100dvh - 70px) !important;
    }
    .hero.hero-video-mode .hero-content-bottom {
        padding: 0 20px 90px;
        text-align: center;
        max-width: 100%;
    }
    .hero.hero-video-mode .hero-content-bottom .hero-sub {
        font-size: 10px;
        letter-spacing: 2.5px;
        padding: 6px 12px;
    }
    .hero.hero-video-mode .hero-content-bottom .hero-h1 {
        font-size: clamp(40px, 11vw, 64px);
        text-align: center;
    }
    .hero.hero-video-mode .hero-content-bottom .hero-btns {
        justify-content: center;
    }
    .hero.hero-video-mode .hero-shots { display: none !important; }
}

@media (max-width: 480px) {
    .hero.hero-video-mode .hero-content-bottom { padding: 0 16px 76px; }
    .hero.hero-video-mode .hero-content-bottom .hero-h1 {
        font-size: clamp(36px, 12vw, 56px);
    }
    .hero.hero-video-mode .hero-content-bottom .hero-sub {
        font-size: 9px;
        letter-spacing: 2px;
        gap: 8px;
        padding: 5px 10px;
    }
}

/* Mobile: tekst gore, slike dole - full stack layout */
@media (max-width: 820px) {
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 80px 0 0;
    }
    .hero-content {
        padding: 0 24px 32px;
        max-width: 100%;
        text-align: left;
    }
    .hero-h1 { font-size: clamp(48px, 14vw, 72px); margin-bottom: 18px; }
    .hero-desc { margin-bottom: 24px; max-width: 100%; }
    .hero-btns { justify-content: flex-start; }

    .hero-shots {
        position: relative;
        right: auto;
        bottom: auto;
        height: clamp(260px, 55vw, 420px);
        max-width: 100%;
        width: 100%;
        margin-top: 8px;
        opacity: 1;
        justify-content: center;
        align-items: flex-end;
        padding: 0 12px;
    }
    .hero-shot { object-position: bottom center; }
    .hero-shot-1 { margin-right: -28px; }

    /* Vanta fog ostaje iza, ali da ne prekrije slike */
    .hero-vanta-fog { height: 240px; }
}

@media (max-width: 480px) {
    .hero-shots { height: clamp(220px, 60vw, 320px); }
    .hero-shot-1 { margin-right: -16px; }
}

/* Vanta.js fog na dnu hero sekcije */
.hero-vanta-fog {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    pointer-events: none;
    z-index: 2;
    /* maska koja postupno otkriva fog odozdo prema gore */
    -webkit-mask-image: linear-gradient(to top, black 0%, black 50%, transparent 100%);
            mask-image: linear-gradient(to top, black 0%, black 50%, transparent 100%);
    opacity: 0.85;
}
.hero-vanta-fog canvas { display: block; }

/* ===== PRODUCT CARD ===== */
.prod-grid {
  display: grid; grid-template-columns: repeat(var(--card-cols, 4), 1fr); gap: 24px;
  position: relative; z-index: 2;
}
@media (max-width: 1200px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .prod-grid { grid-template-columns: 1fr; } }

.prod-card {
  display: flex; flex-direction: column; background: var(--black-card);
  border: 1px solid var(--gray-line); transition: all 0.3s; position: relative;
  overflow: hidden;
}
.prod-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(196,30,42,0.15); }
.prod-img { aspect-ratio: 4/5; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.prod-img-hover {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.4s ease; z-index: 1;
}
.prod-card.has-hover:hover .prod-img-hover { opacity: 1; }
/* Mobile - manje slike (-sm 600px variant umjesto 1200px main) */
@media (max-width: 900px) {
    .prod-img, .prod-img-hover { background-image: var(--bg-sm) !important; }
}
.prod-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--red); color: white;
  padding: 5px 12px;
  font-family: var(--font-condensed); font-size: 10px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.prod-info { padding: 20px; }
.prod-cat {
  font-family: var(--font-condensed); font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--red);
  margin-bottom: 8px;
}
.prod-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2;
  margin-bottom: 10px; color: var(--white);
}
.prod-price { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--red); }
.price-old { text-decoration: line-through; color: var(--gray-text); font-size: 14px; margin-right: 8px; }
.price-new { color: var(--red); }

/* Istaknute vrijednosti na cardu */
.prod-attrs { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.prod-attrs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prod-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
    flex-shrink: 0;
}
.prod-chip {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--gray-line);
    font-family: var(--font-condensed);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white-dim);
}
.prod-attrs-count {
    font-family: var(--font-condensed);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-left: 2px;
}

/* ===== SHOP LAYOUT ===== */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 40px 80px; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; padding: 32px 20px; } }
.shop-sidebar h4 {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 16px; color: var(--red);
}
.shop-sidebar ul { list-style: none; margin-bottom: 32px; }
.shop-sidebar ul li { padding: 8px 0; border-bottom: 1px solid var(--gray-line); }
.shop-sidebar ul li a {
  font-family: var(--font-condensed); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white-dim); transition: color 0.2s;
}
.shop-sidebar ul li a:hover, .shop-sidebar ul li a.active { color: var(--red); }
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-line);
}
.shop-toolbar select { background: var(--black-card); color: var(--white); border: 1px solid var(--gray-line); padding: 10px 14px; font-family: var(--font-condensed); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.shop-count { font-family: var(--font-condensed); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-text); }

/* ===== PDP ===== */
.pdp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding: 110px 80px 40px; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; padding: 95px 20px 32px; } }
.pdp-gallery { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.pdp-gallery.pdp-gallery-single { grid-template-columns: 1fr; }
.pdp-gallery > .pdp-main-wrap { order: 2; }
.pdp-gallery > .pdp-thumbs-wrap { order: 1; }
@media (max-width: 700px) {
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-gallery > .pdp-main-wrap { order: 1; }
    .pdp-gallery > .pdp-thumbs-wrap { order: 2; }
}
.pdp-main-wrap { position: relative; }
.pdp-main-img { aspect-ratio: 4/5; background: var(--black-card) center/cover no-repeat; border: 1px solid var(--gray-line); cursor: zoom-in; transition: background-size 0.3s ease, filter 0.2s; }
@media (hover: hover) {
    .pdp-main-img.zoomed { background-size: 220%; cursor: zoom-out; }
}

/* Thumbs wrap sa up/down nav buttonima */
.pdp-thumbs-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    max-height: 100%;
}
.pdp-thumbs-nav {
    flex-shrink: 0;
    width: 100%;
    height: 28px;
    background: var(--black-card);
    border: 1px solid var(--gray-line);
    color: var(--white-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.pdp-thumbs-nav:hover:not(:disabled) {
    border-color: var(--red);
    color: var(--red);
    background: rgba(196,30,42,0.06);
}
.pdp-thumbs-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pdp-thumbs-nav svg { width: 16px; height: 16px; }

.pdp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
    /* Sakri scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

@media (max-width: 700px) {
    .pdp-thumbs-wrap { flex-direction: row; }
    .pdp-thumbs-nav { display: none; }
    .pdp-thumbs { flex-direction: row; flex-wrap: wrap; overflow: visible; }
    .pdp-thumb { width: calc(25% - 6px); }
}

.pdp-thumb { aspect-ratio: 1; background: var(--black-card) center/cover no-repeat; border: 1px solid var(--gray-line); cursor: pointer; transition: border-color 0.15s, transform 0.15s; flex-shrink: 0; }
.pdp-thumb:hover { border-color: var(--white-dim); transform: scale(1.02); }
.pdp-thumb.active { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.pdp-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(10,10,10,0.75);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 3;
    backdrop-filter: blur(8px);
}
.pdp-nav svg { width: 20px; height: 20px; }
.pdp-nav:hover { background: var(--red); border-color: var(--red); }
.pdp-nav-prev { left: 12px; }
.pdp-nav-next { right: 12px; }
.pdp-main-img:hover ~ .pdp-nav,
.pdp-nav:hover { opacity: 1; }
@media (min-width: 900px) {
    .pdp-nav { opacity: 0; }
    .pdp-main-wrap:hover .pdp-nav { opacity: 1; }
}
.pdp-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(10,10,10,0.75);
    color: #fff;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    z-index: 3;
}
.pdp-zoom-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(10,10,10,0.75);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 3;
    backdrop-filter: blur(8px);
    opacity: 0;
}
.pdp-zoom-btn svg { width: 16px; height: 16px; }
.pdp-main-wrap:hover .pdp-zoom-btn { opacity: 1; }
.pdp-zoom-btn:hover { background: var(--red); border-color: var(--red); }

/* ===== LIGHTBOX ===== */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.pdp-lightbox.open { display: flex; animation: lb-fade-in 0.2s ease-out; }
@keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pdp-lb-imgwrap {
    max-width: 95%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    line-height: 0;
}
.pdp-lb-img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.15s ease-out;
}
.pdp-lb-img.lb-zoomed {
    cursor: zoom-out;
    transform: scale(2.4);
    transition: transform 0.2s ease-out;
}
.pdp-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 44px;
    height: 44px;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 2;
}
.pdp-lb-close:hover { background: var(--red); border-color: var(--red); }
.pdp-lb-counter {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white-dim);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
}
.pdp-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
}
.pdp-lb-nav svg { width: 28px; height: 28px; }
.pdp-lb-nav:hover { background: var(--red); border-color: var(--red); }
.pdp-lb-prev { left: 24px; }
.pdp-lb-next { right: 24px; }
@media (max-width: 600px) {
    .pdp-lb-nav { width: 44px; height: 44px; }
    .pdp-lb-prev { left: 8px; }
    .pdp-lb-next { right: 8px; }
}
.pdp-info h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 12px; }
.pdp-price { font-family: var(--font-display); font-size: 32px; color: var(--red); margin-bottom: 24px; font-weight: 700; }
.pdp-desc { color: var(--white-dim); line-height: 1.7; margin-bottom: 32px; }
/* Bogati opis (liste/bold iz opis_html) */
.pdp-rich ul, .pdp-rich ol { margin: 8px 0; padding-left: 20px; }
.pdp-rich li { margin-bottom: 6px; line-height: 1.55; }
.pdp-rich p { margin: 0 0 10px; }
.pdp-rich strong, .pdp-rich b { color: var(--white); font-weight: 700; }
.pdp-opts { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.opt-label { font-family: var(--font-condensed); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-text); margin-bottom: 10px; font-weight: 600; }
.opt-values { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { padding: 10px 18px; border: 1px solid var(--gray-line); background: transparent; color: var(--white-dim); font-family: var(--font-condensed); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
.opt-chip:hover { border-color: var(--white-dim); }
.opt-chip.active { background: var(--red); border-color: var(--red); color: white; }
.opt-chip.boja { width: 38px; height: 38px; padding: 0; border-radius: 50%; border-width: 2px; }
.opt-chip.boja.active { border-color: var(--red); box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--red); }
.opt-chip.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    position: relative !important;
    color: var(--gray-text) !important;
    background: transparent !important;
    border-color: var(--gray-line) !important;
    overflow: hidden;
}
.opt-chip.disabled::before {
    content: '';
    position: absolute;
    top: 50%; left: -10%;
    width: 120%; height: 1.5px;
    background: var(--red);
    transform: rotate(-18deg);
    pointer-events: none;
    z-index: 2;
}
.opt-chip.disabled:hover { border-color: var(--gray-line) !important; }

.opt-chip.boja.disabled {
    opacity: 0.6 !important;
}
.opt-chip.boja.disabled::before {
    top: 50%; left: -8%;
    width: 116%; height: 2px;
    background: var(--red);
    transform: rotate(-45deg);
}
button[type="submit"].btn-red:disabled {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.qty-input { display: flex; border: 1px solid var(--gray-line); }
.qty-input button { width: 40px; height: 44px; background: transparent; color: var(--white); font-size: 18px; }
.qty-input input { width: 50px; height: 44px; background: transparent; border: none; text-align: center; color: var(--white); font-family: var(--font-display); font-size: 16px; }

/* ===== KORPA ===== */
.cart { padding: 40px 80px; }
@media (max-width: 900px) { .cart { padding: 32px 20px; } }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.cart-table th, .cart-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--gray-line); }
.cart-table th { font-family: var(--font-condensed); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-text); }
.cart-table td.amount, .cart-table th.amount { text-align: right; font-family: var(--font-display); font-weight: 600; }
.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-summary { background: var(--black-card); border: 1px solid var(--gray-line); padding: 24px; }
.cart-summary h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; color: var(--red); }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.cart-summary .row.total { border-top: 1px solid var(--gray-line); margin-top: 12px; padding-top: 16px; font-size: 20px; font-family: var(--font-display); font-weight: 700; color: var(--red); }
.cart-thumb { width: 80px; height: 100px; background: var(--black-card) center/cover no-repeat; border: 1px solid var(--gray-line); }
.cart-item-info { display: flex; gap: 16px; align-items: center; }
.cart-item-attrs { font-size: 12px; color: var(--gray-text); margin-top: 4px; }

/* ===== CHECKOUT ===== */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 40px 80px; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; padding: 32px 20px; } }
.checkout h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin: 24px 0 16px; color: var(--red); }
.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.checkout-row.single { grid-template-columns: 1fr; }

/* ===== KORPA / CHECKOUT RESPONSIVE FIX ===== */
.cart, .checkout { max-width: 100%; box-sizing: border-box; }
.cart-layout > *, .checkout > * { min-width: 0; }
.checkout-row > * { min-width: 0; }
.checkout .field input,
.checkout .field textarea,
.checkout .field select,
.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
    /* Cart tabela -> stack u kartice */
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table thead { display: none; }
    .cart-table tr {
        border: 1px solid var(--gray-line);
        margin-bottom: 14px;
        padding: 8px 12px;
    }
    .cart-table td {
        border: none !important;
        padding: 8px 0 !important;
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
    }
    .cart-table td[data-label]::before {
        content: attr(data-label);
        font-family: var(--font-condensed);
        font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
        color: var(--gray-text);
        flex-shrink: 0;
    }
    .cart-table td:first-child { display: block; padding-bottom: 12px !important; }
    .cart-table td:last-child { justify-content: flex-end; }

    /* Checkout - dva polja u jedno */
    .checkout-row { grid-template-columns: 1fr; }
}
.ship-option { border: 1px solid var(--gray-line); padding: 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
.ship-option:hover { border-color: var(--white-dim); }
.ship-option input { position: absolute; opacity: 0; }
.ship-option.selected { border-color: var(--red); background: rgba(196,30,42,0.05); }
/* Jedna opcija - statično, bez hover/select efekta */
.ship-option.ship-static { cursor: default; }
.ship-option.ship-static:hover { border-color: var(--gray-line); }
.ship-option.ship-static.selected { border-color: var(--gray-line); background: transparent; }
.ship-flex { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.ship-name { font-family: var(--font-condensed); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; font-size: 14px; }
.ship-desc { font-size: 12px; color: var(--gray-text); margin-top: 4px; }
.ship-cena { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--red); padding-right: 12px; white-space: nowrap; }

/* ===== HVALA ===== */
.thanks { max-width: 640px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.thanks-icon { width: 80px; height: 80px; border: 2px solid var(--red); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--red); font-size: 40px; }
.thanks h1 { font-family: var(--font-display); font-size: clamp(36px, 6vw, 56px); letter-spacing: -1px; text-transform: uppercase; margin-bottom: 12px; }
.thanks .broj { font-family: var(--font-mono); font-size: 20px; color: var(--red); margin: 20px 0; }

/* ============================================
   STATS SECTION (counters)
   ============================================ */
.stats {
    position: relative;
    padding: 90px 32px;
    overflow: hidden;
    background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
}
.stats-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(circle at 25% 50%, rgba(196,30,42,0.12) 0%, transparent 45%),
        radial-gradient(circle at 75% 50%, rgba(196,30,42,0.08) 0%, transparent 45%),
        repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.015) 60px 61px);
    pointer-events: none;
}
.stats-inner {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.stat-item {
    text-align: center;
    padding: 24px 20px;
    border-right: 1px solid var(--gray-line);
    position: relative;
}
.stat-item:last-child { border-right: none; }
.stat-item::before {
    content: '★';
    position: absolute; top: -8px; left: 50%;
    transform: translateX(-50%);
    color: var(--red);
    font-size: 12px;
    opacity: 0.6;
}
.stat-num {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 110px);
    font-weight: 400;
    line-height: 1;
    color: var(--white);
    letter-spacing: -2px;
    margin-bottom: 14px;
    text-shadow: 0 0 40px rgba(196,30,42,0.25);
}
.stat-num .stat-suffix { color: var(--red); }
.stat-label {
    font-family: var(--font-stencil);
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 700;
    margin-bottom: 4px;
}
.stat-sub {
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
}
@media (max-width: 700px) {
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2n) { border-right: none; }
    .stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--gray-line); padding-bottom: 30px; margin-bottom: 30px; }
}

/* ============================================
   CINEMATIC QUOTE STRIP (parallax)
   ============================================ */
.quote-strip {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 32px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.quote-bg {
    position: absolute; inset: -10%;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(196,30,42,0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(229,37,53,0.18) 0%, transparent 55%),
        linear-gradient(135deg, #100507 0%, #050505 50%, #0a0303 100%);
    background-attachment: fixed;
    background-size: cover;
    filter: blur(20px);
    transform: scale(1.2);
}
.quote-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.05) 3px 4px),
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}
.quote-content {
    position: relative; z-index: 3;
    text-align: center;
    max-width: 1100px;
}
.quote-text {
    font-family: var(--font-stencil);
    font-size: clamp(48px, 9vw, 140px);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: -1px;
    margin: 30px 0;
    position: relative;
}
.quote-text .quote-line {
    display: block;
    text-shadow: 4px 4px 0 var(--red), 0 0 60px rgba(196,30,42,0.4);
}
.quote-text .quote-line em {
    font-style: normal;
    -webkit-text-stroke: 3px var(--red);
    color: transparent;
    text-shadow: none;
    margin-right: 16px;
}
.quote-text .quote-mark {
    color: var(--red);
    font-family: var(--font-display);
    font-size: 0.5em;
    line-height: 0;
    vertical-align: top;
    opacity: 0.6;
}
.quote-author {
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-top: 30px;
}

/* ============================================
   COUNTDOWN SECTION
   ============================================ */
.countdown-section {
    position: relative;
    padding: 100px 32px;
    text-align: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #100506 50%, #0a0a0a 100%);
    overflow: hidden;
}
.countdown-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(196,30,42,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.countdown-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.countdown-eyebrow {
    font-family: var(--font-condensed);
    font-size: 13px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--red-bright);
    margin-bottom: 16px;
    font-weight: 700;
}
.countdown-title {
    font-family: var(--font-display);
    font-size: clamp(64px, 10vw, 130px);
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: -1px;
}
.countdown-title em {
    font-style: normal;
    -webkit-text-stroke: 2px var(--red);
    color: transparent;
    transition: color 0.6s ease, -webkit-text-stroke 0.6s ease;
}
.countdown-title em.text-fill-active {
    color: var(--red);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 40px rgba(196,30,42,0.5);
}
.countdown-tagline {
    font-family: var(--font-condensed);
    color: var(--white-dim);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 40px;
}
.countdown-tagline strong { color: var(--red-bright); }
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}
.cd-block {
    background: var(--black-card);
    border: 1px solid rgba(196,30,42,0.3);
    padding: 22px 18px 14px;
    min-width: 110px;
    box-shadow: 0 0 30px rgba(196,30,42,0.1), inset 0 0 30px rgba(0,0,0,0.5);
    position: relative;
}
.cd-block::after {
    content: '';
    position: absolute; top: 50%; left: 0; right: 0; height: 1px;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}
.cd-num {
    display: block;
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 0 20px rgba(196,30,42,0.4);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.cd-lbl {
    display: block;
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
}
.cd-sep {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--red);
    line-height: 1;
    align-self: flex-start;
    margin-top: 22px;
    animation: cdBlink 1.4s ease-in-out infinite;
}
@keyframes cdBlink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.3; } }
@media (max-width: 600px) {
    .countdown-timer { gap: 6px; flex-wrap: wrap; }
    .cd-block { min-width: 70px; padding: 14px 8px 10px; }
    .cd-num { font-size: 32px; }
    .cd-sep { font-size: 32px; margin-top: 14px; }
}

/* ============================================
   JOIN THE CARTEL
   ============================================ */
.join-section {
    position: relative;
    padding: 120px 32px;
    overflow: hidden;
    background: var(--black);
    isolation: isolate;
}
.join-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(196,30,42,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(229,37,53,0.1) 0%, transparent 50%),
        repeating-linear-gradient(45deg, rgba(196,30,42,0.04) 0 2px, transparent 2px 60px);
    pointer-events: none;
}
.join-bigtext {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-stencil);
    font-size: clamp(180px, 28vw, 480px);
    color: rgba(196,30,42,0.06);
    line-height: 1;
    letter-spacing: -8px;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}
.join-content {
    position: relative; z-index: 3;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.join-content .hero-sub { color: var(--red-bright); font-weight: 700; }
.join-desc {
    font-family: var(--font-body);
    color: var(--white-dim);
    font-size: 16px;
    line-height: 1.8;
    margin: 28px auto 36px;
    max-width: 560px;
}
.join-desc strong { color: var(--white); }
.join-form { position: relative; }
.join-input-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: var(--black-card);
    border: 1px solid rgba(196,30,42,0.3);
    padding: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(196,30,42,0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.join-input-wrap:focus-within {
    border-color: var(--red);
    box-shadow: 0 20px 60px rgba(196,30,42,0.25), inset 0 0 30px rgba(196,30,42,0.1);
}
.join-marker {
    color: var(--red);
    font-family: var(--font-display);
    font-size: 24px;
    padding: 0 14px;
    line-height: 1;
}
.join-input {
    background: transparent;
    border: none;
    padding: 18px 8px;
    color: var(--white);
    font-family: var(--font-condensed);
    font-size: 16px;
    letter-spacing: 1px;
    width: 100%;
    outline: none;
}
.join-input::placeholder { color: var(--gray-text); }
.join-btn {
    background: var(--red);
    color: white;
    border: none;
    padding: 14px 26px;
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.join-btn:hover { background: var(--red-bright); }
.join-success {
    margin-top: 16px;
    color: var(--red-bright);
    font-family: var(--font-condensed);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
}
.join-form.joined .join-input-wrap { border-color: #4CAF50; opacity: 0.6; pointer-events: none; }
.join-form.joined .join-success { opacity: 1; transform: none; color: #4CAF50; }
.join-meta {
    margin-top: 30px;
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
    background: linear-gradient(90deg, transparent, rgba(196,30,42,0.08), transparent);
    padding: 12px 0;
}
@media (max-width: 600px) {
    .join-input-wrap { grid-template-columns: 1fr; gap: 4px; }
    .join-marker { display: none; }
    .join-btn { width: 100%; justify-content: center; padding: 16px; }
}

/* ============================================
   MARQUEE STRIP ALT
   ============================================ */
.marquee-strip-alt {
    background: var(--black);
    border-top: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    padding: 18px 0;
}
.marquee-strip-alt::before { background: linear-gradient(90deg, var(--black), transparent); }
.marquee-strip-alt::after { background: linear-gradient(-90deg, var(--black), transparent); }
.marquee-strip-alt .marquee-track span:nth-child(odd) {
    color: var(--red);
    font-size: 22px;
}
.marquee-strip-alt .marquee-track span:nth-child(even) {
    color: var(--white);
    font-family: var(--font-stencil);
    font-size: 26px;
    letter-spacing: 6px;
}

/* Custom cursor uklonjen - koristimo system default */
.cursor-dot, .cursor-ring { display: none !important; }

/* Scroll progress bar uklonjen */
.scroll-progress { display: none !important; }

/* ============================================
   GLITCH HOVER NA NAV LOGO
   ============================================ */
.nav-logo.glitchable { position: relative; }
.nav-logo.glitchable:hover::before,
.nav-logo.glitchable:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.nav-logo.glitchable:hover::before {
    color: var(--red);
    animation: glitchA 0.4s linear infinite;
    z-index: 1;
}
.nav-logo.glitchable:hover::after {
    color: #00d4ff;
    animation: glitchB 0.4s linear infinite;
    z-index: 2;
    mix-blend-mode: screen;
}
@keyframes glitchA {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 2px); }
}
@keyframes glitchB {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(2px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, -2px); }
}

/* ============================================
   TEXT-FILL ON SCROLL u kodeks intro
   ============================================ */
.kodeks-v2-intro .section-title em {
    transition: -webkit-text-stroke 0.6s ease, color 0.6s ease, text-shadow 0.6s ease;
}
.kodeks-v2-intro .section-title em.text-fill-active {
    color: var(--red);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 40px rgba(196,30,42,0.5);
}

/* ============================================
   REVEAL VARIANTS - slide left/right/scale
   ============================================ */
.reveal-init { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.stat-item.reveal-init { transform: translateY(40px) scale(0.94); }
.stat-item.reveal-init.reveal-in { transform: none; }
.quote-content.reveal-init { transform: translateY(60px); }

/* ============================================
   MANIFEST / CHANT - multi-stanza
   ============================================ */
.manifest {
    position: relative;
    padding: 130px 32px;
    overflow: hidden;
    background: #050505;
    isolation: isolate;
    text-align: center;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.manifest-bg {
    position: absolute; inset: -10%;
    z-index: 0;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(196,30,42,0.32) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(229,37,53,0.18) 0%, transparent 55%),
        linear-gradient(135deg, #0e0506 0%, #050202 50%, #100507 100%);
    filter: blur(40px);
    transform: scale(1.1);
}
.manifest-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.06) 3px 4px),
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
}
.manifest-bigtext {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-stencil);
    font-size: clamp(280px, 45vw, 720px);
    color: rgba(196,30,42,0.05);
    line-height: 0.9;
    letter-spacing: -10px;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    white-space: nowrap;
}
.manifest-flares { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.flare {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,37,53,0.55) 0%, rgba(196,30,42,0.2) 30%, transparent 70%);
    filter: blur(30px);
    opacity: 0.7;
    animation: flarePulse 4s ease-in-out infinite;
}
.flare-1 { top: 12%; left: 6%; }
.flare-2 { bottom: 10%; right: 8%; animation-delay: -2s; }
@keyframes flarePulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.manifest-content {
    position: relative; z-index: 4;
    max-width: 1100px;
}
.manifest-eyebrow { color: var(--red-bright) !important; margin-bottom: 36px; font-weight: 700; }

.manifest-stanza {
    margin-bottom: 28px;
}
.manifest-line {
    display: block;
    font-family: var(--font-stencil);
    font-size: clamp(36px, 6.5vw, 92px);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: -0.5px;
    text-shadow: 3px 3px 0 var(--red), 0 0 60px rgba(196,30,42,0.35);
    margin-bottom: 6px;
}
.manifest-line em {
    font-style: normal;
    -webkit-text-stroke: 2.5px var(--red);
    color: transparent;
    text-shadow: none;
    margin-right: 14px;
}

.manifest-divider {
    width: 60px; height: 2px;
    background: var(--red);
    margin: 36px auto;
    box-shadow: 0 0 12px var(--red);
}

.manifest-foot {
    margin-top: 48px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gray-text);
    flex-wrap: wrap;
    justify-content: center;
}
.manifest-foot .manifest-tag { color: var(--white-dim); }
.manifest-foot .manifest-dot { color: var(--red); }

@media (max-width: 600px) {
    .manifest { padding: 90px 20px; min-height: 70vh; }
    .manifest-divider { margin: 24px auto; }
}

/* ============================================
   TIFO - full-bleed atmosphere
   ============================================ */
.tifo {
    position: relative;
    padding: 0;
    background: #000;
    overflow: hidden;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.tifo-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    background: #000;
}
.tifo-img {
    overflow: hidden;
    position: relative;
}
.tifo-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1) brightness(0.55);
    transition: filter 0.6s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tifo-img:hover img {
    filter: grayscale(0%) contrast(1.15) brightness(0.75);
    transform: scale(1.06);
}
.tifo-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 50%, rgba(196,30,42,0.25) 100%);
    pointer-events: none;
}

.tifo-content {
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #100507 0%, #050202 100%);
    position: relative;
    overflow: hidden;
}
.tifo-content::before {
    content: 'TIFO';
    position: absolute;
    top: 5%; right: -3%;
    font-family: var(--font-stencil);
    font-size: clamp(160px, 22vw, 360px);
    color: rgba(196,30,42,0.06);
    line-height: 0.85;
    letter-spacing: -6px;
    pointer-events: none;
    transform: rotate(-90deg);
    transform-origin: right top;
    white-space: nowrap;
}
.tifo-eyebrow {
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 700;
    margin-bottom: 20px;
    position: relative; z-index: 2;
}
.tifo-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 96px);
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 28px;
    position: relative; z-index: 2;
}
.tifo-title span { display: block; }
.tifo-title-em {
    font-family: var(--font-stencil);
    -webkit-text-stroke: 2px var(--red);
    color: transparent;
    margin-top: 6px;
}
.tifo-text {
    font-family: var(--font-body);
    color: var(--white-dim);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 36px;
    max-width: 540px;
    position: relative; z-index: 2;
}
.tifo-text strong { color: var(--white); }
.tifo-text em { color: var(--red-bright); font-style: normal; font-weight: 600; }
.tifo-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-text);
    position: relative; z-index: 2;
}
.tifo-stats strong {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--red);
    margin-right: 6px;
    letter-spacing: 0;
}
.tifo-stats .tifo-sep { color: var(--red); }

@media (max-width: 1000px) {
    .tifo { grid-template-columns: 1fr; }
    .tifo-grid { aspect-ratio: 16/10; }
    .tifo-content { padding: 60px 32px; }
    .tifo-content::before { display: none; }
}

/* ============================================
   VALUES - stamp grid
   ============================================ */
.values {
    position: relative;
    padding: 100px 32px;
    background: linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    overflow: hidden;
}
.values-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.values-lead {
    font-family: var(--font-condensed);
    color: var(--white-dim);
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 18px;
}
.values-lead strong { color: var(--red-bright); }
.values-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* === NOVI VALUE-CARD sa pozadinskom slikom === */
.value-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: default;
    isolation: isolate;
    border: 1px solid var(--gray-line);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s;
}
.value-card:hover {
    transform: translateY(-6px);
    border-color: var(--red);
}
.value-card-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background-image: var(--vc-img);
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.2) brightness(0.45);
    transition: filter 0.6s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.value-card:hover .value-card-bg {
    filter: grayscale(0%) contrast(1.1) brightness(0.7);
    transform: scale(1.06);
}
/* Mobile: koristi -sm variant ako postoji (600px umjesto 800px) */
@media (max-width: 900px) {
    .value-card-bg { background-image: var(--vc-img-sm, var(--vc-img)); }
}
.value-card-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(10,10,10,0.5) 0%, transparent 35%, rgba(10,10,10,0.92) 100%),
        radial-gradient(ellipse at 30% 80%, transparent 50%, rgba(196,30,42,0.25) 100%);
    pointer-events: none;
    transition: opacity 0.5s;
}
.value-card:hover .value-card-overlay { opacity: 0.75; }

/* Stencil broj u gornjem lijevom uglu */
.value-card-num {
    position: absolute;
    top: 16px; left: 18px;
    z-index: 3;
    font-family: var(--font-stencil);
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.92);
    text-shadow: 3px 3px 0 var(--red);
    letter-spacing: -2px;
    transition: transform 0.5s;
}
.value-card:hover .value-card-num {
    transform: scale(1.05);
}

/* ★ u gornjem desnom uglu */
.value-card-corner {
    position: absolute;
    top: 18px; right: 22px;
    z-index: 3;
    color: var(--red);
    font-size: 16px;
    opacity: 0.85;
    transition: transform 0.5s, color 0.4s;
}
.value-card:hover .value-card-corner {
    color: var(--red-bright);
    transform: rotate(180deg) scale(1.2);
}

/* Tekst sadržaj u dnu */
.value-card-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    padding: 22px 24px 26px;
}
.value-card-name {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.4vw, 52px);
    font-weight: 400;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 0;
    margin-bottom: 8px;
    text-shadow: 2px 2px 0 var(--red);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.value-card:hover .value-card-name {
    transform: translateY(-4px);
}
.value-card-desc {
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white-dim);
    border-left: 2px solid var(--red);
    padding-left: 10px;
    transition: color 0.4s, border-color 0.4s;
}
.value-card:hover .value-card-desc {
    color: var(--white);
    border-left-color: var(--red-bright);
}

/* Stari .value-stamp legacy block - sakrivamo (već zamijenjen) */
.value-stamp { display: none; }
.value-stamp-inner, .value-num, .value-name, .value-desc {
    /* legacy classes - da ne breakaju */
}

/* Zadržava se animacija staggered reveal */
.value-card.reveal-init { opacity: 0; transform: translateY(30px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.value-card.reveal-init.reveal-in { opacity: 1; transform: none; }

@media (max-width: 800px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
    .values-grid { grid-template-columns: 1fr; gap: 14px; }
    .value-card { aspect-ratio: 16 / 11; }
}

/* Original .value-stamp pravila ostaju ispod, ali sakrivena gore */
.value-stamp {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--red);
    background:
        repeating-linear-gradient(45deg, rgba(196,30,42,0.05) 0 1px, transparent 1px 6px),
        rgba(10,10,10,0.6);
    transform: rotate(-1deg);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 8px 30px rgba(0,0,0,0.4);
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, black 25%, black 75%, rgba(0,0,0,0.85) 100%);
            mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, black 25%, black 75%, rgba(0,0,0,0.85) 100%);
}
.value-stamp:nth-child(2n) { transform: rotate(1.5deg); }
.value-stamp:nth-child(3n) { transform: rotate(-2deg); }
.value-stamp:hover {
    transform: rotate(0deg) scale(1.04);
    border-color: var(--red-bright);
}
.value-stamp::before {
    content: attr(data-num);
    position: absolute;
    top: 12px; left: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--red);
    opacity: 0.6;
}
.value-stamp::after {
    content: '★';
    position: absolute;
    bottom: 12px; right: 14px;
    color: var(--red);
    font-size: 14px;
    opacity: 0.6;
}
.value-stamp-inner {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}
.value-num {
    font-family: var(--font-stencil);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--red);
    margin-bottom: 8px;
}
.value-name {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 0;
    margin-bottom: 14px;
    text-shadow: 2px 2px 0 rgba(196,30,42,0.5);
}
.value-desc {
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white-dim);
}

@media (max-width: 800px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .values-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CHANT - pjesma sa tribine
   ============================================ */
.chant {
    position: relative;
    padding: 100px 32px;
    overflow: hidden;
    text-align: center;
    background: var(--red);
}
.chant-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 4px, transparent 4px 12px),
        radial-gradient(ellipse at center, rgba(229,37,53,0.4) 0%, transparent 60%),
        linear-gradient(180deg, var(--red-dark) 0%, var(--red) 50%, var(--red-dark) 100%);
    pointer-events: none;
}
.chant::before, .chant::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, #fff 0 12px, var(--black) 12px 24px);
    z-index: 2;
}
.chant::before { top: 0; }
.chant::after { bottom: 0; }
.chant-content { position: relative; z-index: 3; }
.chant-content .hero-sub { color: rgba(255,255,255,0.85) !important; margin-bottom: 36px; }
.chant-lines {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 28px;
    margin-bottom: 30px;
}
.chant-line {
    font-family: var(--font-stencil);
    font-size: clamp(48px, 9vw, 140px);
    line-height: 0.95;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    text-shadow: 4px 4px 0 var(--black);
    letter-spacing: -1px;
}
.chant-line.outlined {
    -webkit-text-stroke: 2.5px var(--white);
    color: transparent;
    text-shadow: none;
    font-size: clamp(36px, 7vw, 100px);
}
.chant-foot {
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-top: 18px;
}

/* ============================================
   STORY / TIMELINE - od osnivanja
   ============================================ */
.story {
    position: relative;
    padding: 100px 32px;
    background: linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
    overflow: hidden;
}
.story-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 70px;
}
.story-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.story-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--red) 8%, var(--red) 92%, transparent);
    transform: translateX(-50%);
    z-index: 0;
}
.story-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 60px;
    z-index: 1;
}
.story-step.last { margin-bottom: 0; }
.story-step .story-year {
    font-family: var(--font-stencil);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    color: var(--red);
    text-align: right;
    padding-right: 40px;
    letter-spacing: -1px;
}
.story-step.right .story-year {
    grid-column: 3;
    text-align: left;
    padding-right: 0;
    padding-left: 40px;
}
.story-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 3px solid #050505;
    box-shadow: 0 0 0 2px var(--red), 0 0 20px var(--red);
    grid-column: 2;
    z-index: 2;
}
.story-dot.pulse { animation: storyPulse 2s ease-in-out infinite; }
@keyframes storyPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--red), 0 0 20px var(--red); }
    50% { box-shadow: 0 0 0 6px rgba(196,30,42,0.4), 0 0 40px var(--red-bright); }
}
.story-card {
    grid-column: 3;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--gray-line);
    border-left: 3px solid var(--red);
    padding: 24px 28px;
    transition: all 0.3s;
}
.story-step.right .story-card {
    grid-column: 1;
    border-left: 1px solid var(--gray-line);
    border-right: 3px solid var(--red);
}
.story-card:hover {
    background: rgba(196,30,42,0.06);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(196,30,42,0.15);
}
.story-card.highlight {
    background: linear-gradient(135deg, rgba(196,30,42,0.12) 0%, rgba(196,30,42,0.04) 100%);
    border-left-color: var(--red-bright);
}
.story-step.right .story-card.highlight { border-right-color: var(--red-bright); }
.story-card h3 {
    font-family: var(--font-display);
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 10px;
}
.story-card p {
    color: var(--white-dim);
    line-height: 1.7;
    font-size: 14px;
}
.story-card p strong { color: var(--white); }

/* Timeline reveal animation */
.story-step.reveal-init { opacity: 0; }
.story-step.reveal-init:not(.right) { transform: translateX(-30px); }
.story-step.reveal-init.right { transform: translateX(30px); }
.story-step.reveal-init.reveal-in { opacity: 1; transform: none; }

/* Stamps reveal */
.value-stamp.reveal-init { transform: rotate(-1deg) scale(0.8); opacity: 0; }
.value-stamp.reveal-init.reveal-in { transform: rotate(-1deg) scale(1); opacity: 1; }
.value-stamp:nth-child(2n).reveal-init { transform: rotate(1.5deg) scale(0.8); }
.value-stamp:nth-child(2n).reveal-init.reveal-in { transform: rotate(1.5deg) scale(1); }
.value-stamp:nth-child(3n).reveal-init { transform: rotate(-2deg) scale(0.8); }
.value-stamp:nth-child(3n).reveal-init.reveal-in { transform: rotate(-2deg) scale(1); }

@media (max-width: 700px) {
    .story-line { left: 16px; }
    .story-step,
    .story-step.right { grid-template-columns: 16px 1fr; gap: 20px; }
    .story-step .story-year,
    .story-step.right .story-year {
        grid-column: 2;
        text-align: left;
        padding: 0;
        font-size: 28px;
        margin-bottom: 8px;
    }
    .story-step .story-card,
    .story-step.right .story-card {
        grid-column: 2;
    }
    .story-dot { grid-column: 1; align-self: start; margin-top: 14px; }
}

/* Manifest stanza reveal */
.manifest-stanza.reveal-init { transform: translateY(40px); opacity: 0; }
.manifest-stanza.reveal-init.reveal-in { transform: none; opacity: 1; }
.manifest-stanza:nth-child(3) { transition-delay: 100ms; }
.manifest-stanza:nth-child(5) { transition-delay: 200ms; }
.manifest-stanza:nth-child(7) { transition-delay: 300ms; }

/* Tifo content reveal */
.tifo-content.reveal-init { opacity: 0; transform: translateX(40px); }
.tifo-content.reveal-init.reveal-in { opacity: 1; transform: none; }
.tifo-img.reveal-init { opacity: 0; }
.tifo-img.reveal-init.reveal-in { opacity: 1; }

/* Chant reveal */
.chant-line.reveal-init { opacity: 0; transform: scale(0.8); }
.chant-line.reveal-init.reveal-in { opacity: 1; transform: none; }
.chant-line:nth-child(1) { transition-delay: 0ms; }
.chant-line:nth-child(2) { transition-delay: 100ms; }
.chant-line:nth-child(3) { transition-delay: 200ms; }
.chant-line:nth-child(4) { transition-delay: 300ms; }
.chant-line:nth-child(5) { transition-delay: 400ms; }

/* ============================================
   TRUST STRIP (ispod marquee-a)
   ============================================ */
.trust-strip {
    background: var(--black);
    border-bottom: 1px solid var(--gray-line);
    padding: 18px 32px;
}
.trust-strip-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid var(--gray-line);
    padding-right: 24px;
}
.trust-item:last-child { border-right: none; padding-right: 0; }
.trust-item svg {
    width: 26px; height: 26px;
    color: var(--red);
    flex-shrink: 0;
}
.trust-item span {
    display: flex; flex-direction: column;
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-text);
    line-height: 1.3;
}
.trust-item strong {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
@media (max-width: 800px) {
    .trust-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trust-item { padding-right: 14px; }
    .trust-item:nth-child(2n) { border-right: none; padding-right: 0; }
    .trust-item:nth-child(-n+2) { padding-bottom: 14px; border-bottom: 1px solid var(--gray-line); margin-bottom: 4px; }
}
@media (max-width: 480px) {
    .trust-item span { font-size: 10px; letter-spacing: 1px; }
    .trust-item strong { font-size: 13px; }
    .trust-item svg { width: 22px; height: 22px; }
}

/* ============================================
   STATS QUIET - negative-space sekcija
   ============================================ */
.stats-quiet {
    background: var(--black);
    padding: 70px 32px;
    border-top: 1px solid var(--gray-line);
    border-bottom: 1px solid var(--gray-line);
}
.stats-quiet .stats-bg,
.stats-quiet .splatter,
.stats-quiet .drip { display: none !important; }
.stats-quiet::before, .stats-quiet::after { content: none !important; }
.stats-quiet .stat-num {
    text-shadow: none;
    color: var(--white);
}
.stats-quiet .stat-label {
    color: var(--white);
    text-shadow: none;
}

/* ============================================
   TIFO V2 - full-bleed jedna slika
   ============================================ */
.tifo-v2 {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    padding: 100px 32px;
}
.tifo-v2-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.tifo-v2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%) contrast(1.2) brightness(0.45);
}
.tifo-v2-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(135deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.4) 50%, rgba(196,30,42,0.4) 100%),
        radial-gradient(ellipse at 30% 50%, transparent 20%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
}
.tifo-v2-content {
    position: relative;
    z-index: 3;
    max-width: 760px;
    text-align: left;
}
.tifo-v2-content .tifo-eyebrow {
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 700;
    margin-bottom: 22px;
}
.tifo-v2-title {
    font-family: var(--font-display);
    font-size: clamp(52px, 8.5vw, 130px);
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}
.tifo-v2-title span { display: block; color: var(--white); text-shadow: 3px 3px 0 var(--red); }
.tifo-v2-title-em {
    font-family: var(--font-stencil);
    -webkit-text-stroke: 2.5px var(--red);
    color: transparent !important;
    text-shadow: none !important;
    margin-top: 8px;
}
.tifo-v2-text {
    font-family: var(--font-body);
    color: var(--white-dim);
    font-size: 18px;
    line-height: 1.85;
    margin-bottom: 36px;
    max-width: 560px;
}
.tifo-v2-text strong { color: var(--white); }
.tifo-v2-text em { color: var(--red-bright); font-style: normal; font-weight: 600; }
.tifo-v2-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-text);
}
.tifo-v2-stats strong {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--red);
    margin-right: 6px;
    letter-spacing: 0;
}
.tifo-v2-stats .tifo-sep { color: var(--red); opacity: 0.5; }

@media (max-width: 800px) {
    .tifo-v2 { min-height: 70vh; padding: 80px 24px; }
}

/* ============================================
   MANIFEST V2 - editorial spread sa fotkama
   ============================================ */
.manifest-v2 {
    position: relative;
    padding: 100px 32px 0;
    background: #050505;
    overflow: hidden;
    isolation: isolate;
}
.manifest-v2-grain {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.08;
    mix-blend-mode: overlay;
}
.manifest-v2-bigtext {
    position: absolute;
    top: 8%; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-stencil);
    font-size: clamp(140px, 22vw, 360px);
    color: rgba(196,30,42,0.05);
    line-height: 0.85;
    letter-spacing: -8px;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    white-space: nowrap;
    font-weight: 900;
}

.manifest-v2-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    max-width: 1320px;
    margin: 0 auto;
    align-items: stretch;
    padding-bottom: 80px;
}

/* === Glavna fotka (lijevo) === */
.manifest-v2-photo-main {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(196,30,42,0.25);
    isolation: isolate;
}
.manifest-v2-photo-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.1) saturate(0.85) brightness(0.85);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s;
    display: block;
}
.manifest-v2-photo-main:hover img {
    transform: scale(1.03);
    filter: contrast(1.15) saturate(1) brightness(0.95);
}
.manifest-v2-photo-main::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%),
        radial-gradient(ellipse at 30% 80%, transparent 40%, rgba(196,30,42,0.3) 100%);
    z-index: 2;
    pointer-events: none;
}
.manifest-v2-photo-main::after {
    /* film perforation top */
    content: '';
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 18px);
    opacity: 0.5;
    z-index: 3;
}

.manifest-v2-frame-tag {
    position: absolute;
    bottom: 22px; left: 22px;
    z-index: 4;
    background: rgba(0,0,0,0.85);
    border: 1px solid var(--red);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 8px;
}
.manifest-v2-frame-tag .dot { color: var(--red); font-size: 8px; }

.manifest-v2-photo-num {
    position: absolute;
    top: 22px; right: 22px;
    z-index: 4;
    font-family: var(--font-stencil);
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255,255,255,0.95);
    text-shadow: 4px 4px 0 var(--red);
    letter-spacing: -2px;
}

/* === Tekstualni blok (desno) === */
.manifest-v2-text {
    position: relative;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.manifest-v2-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-condensed);
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 700;
    margin-bottom: 28px;
}
.manifest-v2-eyebrow .star { color: var(--red); }

.manifest-v2-headline {
    font-family: var(--font-display);
    font-size: clamp(48px, 5.8vw, 96px);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: -1px;
    margin-bottom: 36px;
}
.manifest-v2-headline span {
    display: block;
    text-shadow: 3px 3px 0 rgba(196,30,42,0.4);
}
.manifest-v2-headline em {
    font-style: normal;
    font-family: var(--font-stencil);
    -webkit-text-stroke: 2.5px var(--red);
    color: transparent;
    text-shadow: none;
}
.manifest-v2-headline strong {
    color: var(--red-bright);
    font-weight: inherit;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
.manifest-v2-headline .line-1 { transition-delay: 100ms; }
.manifest-v2-headline .line-2 { transition-delay: 250ms; }
.manifest-v2-headline .line-3 { transition-delay: 400ms; }

.manifest-v2-rule {
    width: 80px;
    height: 3px;
    background: var(--red);
    margin-bottom: 32px;
    box-shadow: 0 0 16px var(--red);
}

.manifest-v2-body {
    font-family: var(--font-body);
    color: var(--white-dim);
    margin-bottom: 36px;
}
.manifest-v2-body p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
    max-width: 540px;
}
.manifest-v2-body p.lead {
    font-size: 19px;
    line-height: 1.65;
    color: var(--white);
    font-weight: 500;
    border-left: 3px solid var(--red);
    padding-left: 20px;
}
.manifest-v2-body strong { color: var(--white); font-weight: 700; }

.manifest-v2-sig {
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
    padding-top: 24px;
    border-top: 1px solid var(--gray-line);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.manifest-v2-sig strong { color: var(--white); font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; }
.manifest-v2-sig .star { color: var(--red); font-size: 16px; }

/* Mala polaroid u uglu tekst panela */
.manifest-v2-polaroid {
    position: absolute;
    bottom: 0;
    right: -10px;
    width: 190px;
    transform: rotate(6deg);
    background: #f5f0e8;
    padding: 10px 10px 42px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    z-index: 5;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.manifest-v2-polaroid:hover { transform: rotate(2deg) scale(1.05); }
.manifest-v2-polaroid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: contrast(1.1) saturate(0.6) sepia(0.15);
    display: block;
}
/* Rezerviši prostor u tekst bloku da polaroid ne prekriva tekst */
.manifest-v2-text { padding-bottom: 230px; }
.manifest-v2-polaroid-cap {
    position: absolute;
    bottom: 14px; left: 0; right: 0;
    text-align: center;
    font-family: var(--font-marker);
    font-size: 14px;
    color: #2a2a2a;
    letter-spacing: 0.5px;
}

/* === Donja strip linija (full-width - break out of section padding) === */
.manifest-v2-strip {
    position: relative;
    z-index: 3;
    background: var(--red);
    color: #fff;
    padding: 14px 32px;
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.4);
    /* Probija side padding section-a da bude edge-to-edge */
    margin-left: -32px;
    margin-right: -32px;
    width: calc(100% + 64px);
}
@media (max-width: 900px) {
    .manifest-v2-strip { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); }
}
.manifest-v2-strip .dot { color: rgba(255,255,255,0.6); font-size: 8px; }

/* === Reveal animacije === */
.manifest-v2-photo-main { opacity: 0; transform: translateX(-30px); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2,0.8,0.2,1); }
.manifest-v2-text { opacity: 0; transform: translateX(30px); transition: opacity 0.9s 0.2s, transform 0.9s 0.2s cubic-bezier(0.2,0.8,0.2,1); }
.manifest-v2.in-view .manifest-v2-photo-main,
.manifest-v2.in-view .manifest-v2-text { opacity: 1; transform: none; }

.manifest-v2-headline span { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.manifest-v2.in-view .manifest-v2-headline span { opacity: 1; transform: none; }

/* === Responsive === */
@media (max-width: 900px) {
    .manifest-v2 { padding: 70px 20px 0; }
    .manifest-v2-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 100px; }
    .manifest-v2-photo-main { aspect-ratio: 4 / 5; max-height: 70vh; }
    .manifest-v2-photo-num { font-size: 60px; }
    .manifest-v2-text { padding-bottom: 0; }
    .manifest-v2-polaroid {
        position: relative;
        bottom: auto; right: auto;
        margin: 30px auto 0;
        width: 200px;
        transform: rotate(-3deg);
    }
}
@media (max-width: 480px) {
    .manifest-v2-strip { gap: 8px; font-size: 10px; letter-spacing: 2px; padding: 12px 16px; }
    .manifest-v2-rule { width: 50px; }
}

/* ============================================
   text-distressed - reservira za hero
   ============================================ */
.section-title.text-distressed {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.hero-h1.text-distressed {
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9), -1px -1px 0 rgba(0,0,0,0.5), 0 0 40px rgba(196,30,42,0.2), 0 0 80px rgba(196,30,42,0.08);
}

/* ============================================
   AMBIENT MOTION - suptilni pokreti za "živost"
   ============================================ */

/* 1. ANIMIRANI GRAIN - film noise drift (svuda gdje je .grain) */
.grain::after {
    animation: grainDrift 8s steps(8) infinite;
    will-change: background-position;
}
@keyframes grainDrift {
    0%   { background-position: 0 0; }
    12%  { background-position: -50px 30px; }
    25%  { background-position: 80px -20px; }
    37%  { background-position: -30px 60px; }
    50%  { background-position: 60px 40px; }
    62%  { background-position: -70px -10px; }
    75%  { background-position: 40px -50px; }
    87%  { background-position: -20px 20px; }
    100% { background-position: 0 0; }
}

/* 2. SUPTILNI GLOW PULSE - section title em (ovo je već crvene/outlined) */
.section-title em,
.kodeks-panel-h3,
.value-name,
.tifo-v2-title-em,
.manifest-v2-headline em {
    animation: subtleGlow 5s ease-in-out infinite;
}
@keyframes subtleGlow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 14px rgba(196,30,42,0.5)); }
}

/* 3. FLOATING PARTICLES - sitne crvene tačke u manifest/dark sekcijama */
.ambient-particles {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.ambient-particles span {
    position: absolute;
    display: block;
    width: 3px; height: 3px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--red);
    opacity: 0;
    animation: particleFloat 14s linear infinite;
}
.ambient-particles span:nth-child(1)  { left: 8%;  animation-delay: 0s;    animation-duration: 16s; }
.ambient-particles span:nth-child(2)  { left: 22%; animation-delay: -3s;   animation-duration: 18s; }
.ambient-particles span:nth-child(3)  { left: 38%; animation-delay: -7s;   animation-duration: 14s; width: 2px; height: 2px; }
.ambient-particles span:nth-child(4)  { left: 55%; animation-delay: -11s;  animation-duration: 20s; }
.ambient-particles span:nth-child(5)  { left: 70%; animation-delay: -2s;   animation-duration: 17s; width: 4px; height: 4px; }
.ambient-particles span:nth-child(6)  { left: 85%; animation-delay: -9s;   animation-duration: 15s; }
.ambient-particles span:nth-child(7)  { left: 14%; animation-delay: -5s;   animation-duration: 19s; width: 2px; height: 2px; }
.ambient-particles span:nth-child(8)  { left: 62%; animation-delay: -13s;  animation-duration: 16s; }
.ambient-particles span:nth-child(9)  { left: 90%; animation-delay: -6s;   animation-duration: 22s; width: 2px; height: 2px; }
.ambient-particles span:nth-child(10) { left: 30%; animation-delay: -15s;  animation-duration: 18s; }

@keyframes particleFloat {
    0%   { transform: translateY(110vh) translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    50%  { transform: translateY(50vh) translateX(20px); opacity: 0.8; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-10vh) translateX(-10px); opacity: 0; }
}

/* 4. DRIP - sporo "kapljanje" (već postoji, dodajemo finiji loop) */
.drip::before {
    animation: dripExtend 6s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes dripExtend {
    0%, 100% { transform: scaleY(1); opacity: var(--drip-op, 0.35); }
    50%      { transform: scaleY(1.08); opacity: calc(var(--drip-op, 0.35) * 1.4); }
}

/* 5. STATS - broj suptilno fleker pulsa (samo svako malo) */
.stat-num {
    animation: numFlicker 9s ease-in-out infinite;
}
@keyframes numFlicker {
    0%, 95%, 100% { opacity: 1; }
    96.5%         { opacity: 0.6; }
    97%           { opacity: 1; }
    98%           { opacity: 0.4; }
    98.5%         { opacity: 1; }
}

/* 6. MARQUEE - drugi malo brži/sporiji za varijetu */
.marquee-strip-alt .marquee-track { animation-duration: 50s; }

/* 7. POLAROID - gentle idle sway */
.manifest-v2-polaroid:not(:hover) {
    animation: polaroidSway 7s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes polaroidSway {
    0%, 100% { transform: rotate(6deg); }
    50%      { transform: rotate(4deg) translateY(-4px); }
}

/* 8. FRAME-TAG na manifestu - pulsa border */
.manifest-v2-frame-tag {
    animation: tagBlink 4s ease-in-out infinite;
}
@keyframes tagBlink {
    0%, 100% { border-color: var(--red); box-shadow: 0 0 0 transparent; }
    50%      { border-color: var(--red-bright); box-shadow: 0 0 20px rgba(196,30,42,0.4); }
}

/* 9. WATERMARK - manifest pozadinski tekst lagano lebdi */
.manifest-v2-bigtext,
.join-bigtext,
.tifo-content::before,
.sector-street::before,
.sector-club::before {
    animation: bigTextDrift 18s ease-in-out infinite;
    will-change: transform;
}
@keyframes bigTextDrift {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(calc(-50% + 12px), calc(-50% - 6px)); }
}
.tifo-content::before,
.sector-street::before,
.sector-club::before {
    /* Ovi imaju različite početne pozicije, koristimo blaži drift */
    animation: bigTextDriftAlt 20s ease-in-out infinite;
}
@keyframes bigTextDriftAlt {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

/* Scan linija uklonjena - svaka sekcija ima svoje unique animacije */

/* 11. PRODUCT CARD - idle "breathing" (vrlo blago, samo kad nije hover) */
.prod-card:not(:hover) .prod-img {
    animation: cardBreath 6s ease-in-out infinite;
}
@keyframes cardBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.012); }
}

/* 12. CHANT - pozadinske pruge polako pulse */
.chant-bg {
    animation: chantStripe 8s ease-in-out infinite;
}
@keyframes chantStripe {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.1) saturate(1.2); }
}

/* 13. KODEKS PANEL X - suptilno pulsira kad nije hover (kao srce) */
.kodeks-panel:not(:hover) .kodeks-panel-x {
    animation: xHeartbeat 3.5s ease-in-out infinite;
}
@keyframes xHeartbeat {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.02); }
}

/* 14. STORY DOT pulse je već tu (.story-dot.pulse), dodajemo i običnim dotama suptilni pulse */
.story-dot:not(.pulse) {
    animation: dotIdle 4s ease-in-out infinite;
}
@keyframes dotIdle {
    0%, 100% { box-shadow: 0 0 0 2px var(--red), 0 0 12px rgba(196,30,42,0.5); }
    50%      { box-shadow: 0 0 0 2px var(--red), 0 0 20px rgba(196,30,42,0.8); }
}

/* 15. JOIN INPUT - pulse focus border kao "alive" form */
.join-input-wrap:not(:focus-within) {
    animation: joinPulse 4s ease-in-out infinite;
}
@keyframes joinPulse {
    0%, 100% { border-color: rgba(196,30,42,0.3); }
    50%      { border-color: rgba(196,30,42,0.5); }
}

/* 16. NAV LOGO - TM pulse (legacy, samo za tekstualni logo) */
.nav-logo:not(.nav-logo-patch) span { display: inline-block; animation: tmPulse 3s ease-in-out infinite; transform-origin: center; }
@keyframes tmPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* 17. VALUE STAMP - sporo "ink-bleed" pulse (border) */
.value-stamp {
    animation: stampInk 7s ease-in-out infinite;
}
@keyframes stampInk {
    0%, 100% { box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 8px 30px rgba(0,0,0,0.4); }
    50%      { box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 8px 30px rgba(196,30,42,0.2), 0 0 30px rgba(196,30,42,0.15); }
}
.value-stamp:nth-child(2) { animation-delay: -1s; }
.value-stamp:nth-child(3) { animation-delay: -2s; }
.value-stamp:nth-child(4) { animation-delay: -3s; }
.value-stamp:nth-child(5) { animation-delay: -4s; }
.value-stamp:nth-child(6) { animation-delay: -5s; }

/* Section dots nav i sticky drop tag uklonjeni */
.section-dots, .sticky-drop-tag { display: none !important; }

/* (legacy stilovi ostaju za slučaj ali nikad ne renderiraju) */
.section-dots-legacy {
    position: fixed;
    top: 50%; right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9000;
    padding: 16px 12px;
    background: rgba(10,10,10,0.4);
    backdrop-filter: blur(8px);
    border-left: 2px solid var(--red);
    transition: opacity 0.3s, transform 0.3s;
}
.section-dots .dot {
    position: relative;
    width: 10px; height: 10px;
    display: flex; align-items: center; justify-content: center;
}
.section-dots .dot span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: all 0.3s;
}
.section-dots .dot:hover span {
    background: var(--red);
    transform: scale(1.4);
    box-shadow: 0 0 8px var(--red);
}
.section-dots .dot.active span {
    background: var(--red);
    box-shadow: 0 0 10px var(--red);
    transform: scale(1.5);
}
/* Tooltip label */
.section-dots .dot::before {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    background: rgba(10,10,10,0.92);
    padding: 6px 10px;
    border: 1px solid var(--red);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.section-dots .dot:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}
@media (max-width: 900px) { .section-dots { display: none; } }

/* ============================================
   STICKY DROP TAG (desno, scroll-aware)
   ============================================ */
.sticky-drop-tag {
    position: fixed;
    right: 0; top: 30%;
    z-index: 8500;
    background: var(--red);
    color: #fff;
    padding: 16px 22px 16px 26px;
    text-decoration: none;
    box-shadow: -8px 8px 24px rgba(0,0,0,0.4), inset 0 0 30px rgba(0,0,0,0.15);
    transform: translateX(calc(100% - 56px));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    border-left: 3px solid #fff;
}
.sticky-drop-tag::before {
    content: '★ DROP ★';
    position: absolute;
    left: -3px; top: 0; bottom: 0;
    width: 56px;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: var(--font-stencil);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
}
.sticky-drop-tag:hover {
    transform: translateX(0);
}
.sdt-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 56px;
    min-width: 180px;
}
.sdt-eyebrow {
    font-family: var(--font-condensed);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.85;
}
.sdt-main {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}
.sdt-main em {
    font-style: normal;
    -webkit-text-stroke: 1.5px #fff;
    color: transparent;
    margin-left: 2px;
}
.sdt-tag {
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sdt-arrow { transition: transform 0.3s; }
.sticky-drop-tag:hover .sdt-arrow { transform: translateX(4px); }
.sticky-drop-tag.hidden {
    transform: translateX(110%);
    opacity: 0;
}
@media (max-width: 768px) {
    .sticky-drop-tag { display: none; }
}

/* Floating tags i section flash uklonjeni - svaka sekcija ima svoje elemente unutar sebe */
.floating-tags, .section-flash { display: none !important; }

/* (legacy stilovi ostaju ali ne renderiraju) */
.floating-tags-legacy {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.ft {
    position: absolute;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 32px;
    opacity: 0;
    animation: ftFloat 22s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(196,30,42,0.5);
    will-change: transform, opacity;
}
.ft-1 { left: 5%;  top: 30%; animation-delay: 0s;    color: rgba(196,30,42,0.7); }
.ft-2 { left: 92%; top: 60%; animation-delay: -7s;   color: rgba(255,255,255,0.6); font-size: 24px; }
.ft-3 { left: 8%;  top: 75%; animation-delay: -12s;  font-size: 20px; }
.ft-4 { left: 88%; top: 22%; animation-delay: -18s;  font-size: 26px; }
.ft-5 { left: 50%; top: 88%; animation-delay: -4s;   color: rgba(255,255,255,0.5); }
.ft-6 { left: 95%; top: 45%; animation-delay: -10s;  font-size: 18px; }
@keyframes ftFloat {
    0%, 100% { opacity: 0; transform: translateY(20px) rotate(-5deg); }
    20%      { opacity: 0.6; transform: translateY(0) rotate(0deg); }
    50%      { opacity: 0.4; transform: translateY(-15px) rotate(8deg); }
    80%      { opacity: 0.5; transform: translateY(-30px) rotate(-3deg); }
}

/* ============================================
   SECTION ENTER FLASH (red horizontal sweep)
   ============================================ */
.section-flash {
    position: fixed;
    left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    box-shadow: 0 0 30px var(--red);
    z-index: 9100;
    pointer-events: none;
    opacity: 0;
    top: 50%;
    transition: opacity 0.4s, top 0.6s ease-out;
}
.section-flash.fire {
    opacity: 0.9;
    animation: flashSweep 0.8s ease-out forwards;
}
@keyframes flashSweep {
    0%   { opacity: 0; top: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; top: 100%; }
}

/* ============================================
   3D TILT na value-card i prod-card
   ============================================ */
.value-card, .prod-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}
.value-card.tilt-active, .prod-card.tilt-active {
    transition: transform 0.08s linear;
}

/* ============================================
   STAT NUMBER SCRAMBLE (vidi se kao "rolanje")
   ============================================ */
.stat-num-value.scrambling {
    color: var(--red);
    text-shadow: 0 0 20px rgba(196,30,42,0.6);
}

/* ============================================
   PER-SECTION UNIQUE AMBIENT
   Svaka sekcija dobija svoj karakter
   ============================================ */

/* === 1. HERO - neonska treperka EST teksta + tamni puls === */
.hero-est {
    animation: heroNeon 5s ease-in-out infinite;
    text-shadow: 0 0 0 transparent;
}
@keyframes heroNeon {
    0%, 100% { color: var(--gray-text); text-shadow: 0 0 4px rgba(196,30,42,0.3); }
    48%      { color: var(--red-bright); text-shadow: 0 0 16px var(--red-bright), 0 0 32px rgba(196,30,42,0.5); }
    50%      { color: var(--gray-text); text-shadow: 0 0 0 transparent; }
    52%      { color: var(--red-bright); text-shadow: 0 0 16px var(--red-bright); }
    54%      { color: var(--gray-text); text-shadow: 0 0 0 transparent; }
}
.hero {
    background: var(--black);
}
.hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(ellipse at 80% 40%, rgba(196,30,42,0.08) 0%, transparent 60%);
    animation: heroBgShift 14s ease-in-out infinite;
    pointer-events: none;
}
@keyframes heroBgShift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50%      { transform: translate(-30px, 20px) scale(1.1); opacity: 1; }
}

/* === 2. SEKTOR STREET (Asfalt) - bg "STREET" tekst glich jitter === */
.sector-street::before {
    animation: streetJitter 0.5s steps(2) infinite;
}
@keyframes streetJitter {
    0%, 90%, 100% { transform: rotate(-90deg) translate(0, 0); opacity: 1; }
    91%           { transform: rotate(-90deg) translate(2px, -1px); opacity: 0.8; }
    92%           { transform: rotate(-90deg) translate(-1px, 2px); opacity: 1; }
    93%           { transform: rotate(-90deg) translate(0, 0); opacity: 0.6; }
}

/* === 3. SEKTOR CLUB (Bas i krug) - pulsiranje neona iz uglova === */
.sector-club::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 0% 100%, rgba(229,37,53,0.18) 0%, transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(229,37,53,0.14) 0%, transparent 30%);
    animation: clubNeonWave 5s ease-in-out infinite alternate;
}
@keyframes clubNeonWave {
    0%   { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.05); }
}

/* === 4. KODEKS PANELI - random crveni "lightning" flash === */
.kodeks-panel::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 5;
    background: rgba(196,30,42,0.4);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
.kodeks-panel:nth-child(1)::after { animation: panelFlash 11s ease-in-out infinite; animation-delay: 2s; }
.kodeks-panel:nth-child(2)::after { animation: panelFlash 13s ease-in-out infinite; animation-delay: 5s; }
.kodeks-panel:nth-child(3)::after { animation: panelFlash 9s ease-in-out infinite;  animation-delay: 8s; }
@keyframes panelFlash {
    0%, 95%, 100% { opacity: 0; }
    96%           { opacity: 0.4; }
    97%           { opacity: 0; }
    98%           { opacity: 0.6; }
    98.5%         { opacity: 0; }
}

/* === 5. MANIFEST - film burn marks koji se pomjeraju === */
.manifest-v2 .manifest-v2-grain {
    /* postojeći grain dobija film burn glow */
    background:
        radial-gradient(circle at 20% 70%, rgba(196,30,42,0.18) 0%, transparent 12%),
        radial-gradient(circle at 80% 30%, rgba(255,180,80,0.08) 0%, transparent 10%),
        radial-gradient(circle at 55% 85%, rgba(196,30,42,0.12) 0%, transparent 8%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: auto, auto, auto, 200px 200px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    animation: filmBurn 10s ease-in-out infinite, grainDrift 8s steps(8) infinite;
}
@keyframes filmBurn {
    0%, 100% { background-position:
        20% 70%,
        80% 30%,
        55% 85%,
        0 0;
    }
    50%      { background-position:
        25% 65%,
        78% 32%,
        58% 87%,
        0 0;
    }
}

/* === 6. TIFO - light leak (cinematic) === */
.tifo-v2-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,200,150,0.08) 50%, transparent 65%);
    animation: lightLeak 9s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes lightLeak {
    0%, 100% { transform: translateX(-30%); opacity: 0; }
    50%      { transform: translateX(30%); opacity: 1; }
}

/* === 7. VRIJEDNOSTI - kartice naizmjenično "udišu" === */
.value-card:nth-child(1) { animation: vcBreath 4.5s ease-in-out infinite; animation-delay: 0s; }
.value-card:nth-child(2) { animation: vcBreath 5s   ease-in-out infinite; animation-delay: -0.8s; }
.value-card:nth-child(3) { animation: vcBreath 5.5s ease-in-out infinite; animation-delay: -1.6s; }
.value-card:nth-child(4) { animation: vcBreath 4.8s ease-in-out infinite; animation-delay: -2.4s; }
.value-card:nth-child(5) { animation: vcBreath 5.2s ease-in-out infinite; animation-delay: -3.2s; }
.value-card:nth-child(6) { animation: vcBreath 4.6s ease-in-out infinite; animation-delay: -4s; }
.value-card:hover { animation: none; }
@keyframes vcBreath {
    0%, 100% { box-shadow: 0 0 0 transparent, 0 4px 20px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 0 24px rgba(196,30,42,0.18), 0 4px 20px rgba(0,0,0,0.5); }
}

/* === 8. CHANT - sportsku tribinu sa "vatrenim" pulse === */
.chant::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12) 0%, transparent 50%);
    animation: chantSpotlight 6s ease-in-out infinite;
}
@keyframes chantSpotlight {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50%      { opacity: 0.7; transform: scale(1.1); }
}

/* === 9. STORY - linija svjetli odozdo prema vrhu kao da se "puni" === */
.story-line {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(196,30,42,0.3) 8%,
        var(--red) 25%,
        var(--red) 75%,
        rgba(196,30,42,0.3) 92%,
        transparent 100%);
    background-size: 100% 200%;
    animation: storyLineFlow 6s ease-in-out infinite;
}
@keyframes storyLineFlow {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 100%; }
}

/* === 10. JOIN SECTION - CARTEL bigtext rotira polako === */
.join-section .join-bigtext {
    animation: cartelRotate 30s linear infinite;
    transform-origin: center;
}
@keyframes cartelRotate {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(2deg); }
}
.join-section::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(196,30,42,0.08) 0%, transparent 40%);
    animation: joinPulseBg 5s ease-in-out infinite;
}
@keyframes joinPulseBg {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.15); }
}

/* === 11. STATS QUIET - povremeni "tick" - okvir treperi === */
.stats-quiet {
    animation: statsTick 8s ease-in-out infinite;
}
@keyframes statsTick {
    0%, 90%, 100% { border-color: var(--gray-line); }
    93%           { border-color: var(--red); }
    96%           { border-color: var(--gray-line); }
}

/* === 12. SECTOR HEADER - eyebrow lebdi sa lijeve strane === */
.sector-eyebrow {
    animation: eyebrowSlide 6s ease-in-out infinite;
    transform-origin: left center;
    display: inline-block;
}
@keyframes eyebrowSlide {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%      { transform: translateX(6px); opacity: 0.85; }
}

/* === 13. KODEKS PANEL NUM - red shadow njihanje === */
.kodeks-panel-num {
    animation: kodeksNumShake 4s ease-in-out infinite;
}
@keyframes kodeksNumShake {
    0%, 100% { text-shadow: 4px 4px 0 var(--red); }
    50%      { text-shadow: 6px 6px 0 var(--red), 0 0 20px rgba(196,30,42,0.3); }
}

/* === 14. MANIFEST FRAME-TAG - već ima blink, dodajemo subtle slide === */
.manifest-v2-frame-tag::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 100%; height: 1px;
    background: var(--red);
    animation: tagUnderline 3s ease-in-out infinite;
}
@keyframes tagUnderline {
    0%, 100% { transform: scaleX(0); transform-origin: left; }
    50%      { transform: scaleX(1); transform-origin: left; }
    51%      { transform-origin: right; }
    99%      { transform: scaleX(0); transform-origin: right; }
}

/* === 15. TIFO V2 STATS - broj povremeno se "fleker" === */
.tifo-v2-stats strong {
    animation: tifoStatPulse 5s ease-in-out infinite;
}
.tifo-v2-stats strong:nth-of-type(2) { animation-delay: -1.5s; }
.tifo-v2-stats strong:nth-of-type(3) { animation-delay: -3s; }
@keyframes tifoStatPulse {
    0%, 90%, 100% { color: var(--red); text-shadow: none; }
    50%           { color: var(--red-bright); text-shadow: 0 0 12px rgba(196,30,42,0.5); }
}

/* Scroll-reactive sistem uklonjen - bio razbio layout. Ostavljamo idle ambient animacije. */
.split-char, .wipe-init { display: revert; clip-path: none !important; opacity: 1 !important; transform: none !important; }
.prod-card.cascade-init { opacity: 1 !important; transform: none !important; }
.tifo-v2-bg img, .hero-shot, .manifest-v2-photo-main img, .value-card-bg, .kodeks-panel-bg { clip-path: none !important; }

/* 18. PERFORMANCE - poštuj reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   3 CHAPTERS - STREET / CLUB / CARTEL
   Svaka kao zasebna brand priča, vezana za motive na odjeći
   ============================================ */
.chapter {
    position: relative;
    padding: 100px 32px;
    overflow: hidden;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.chapter-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.chapter-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.chapter-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* === STREET - sepia/asphalt, raw urban === */
.chapter-street { background: #1a1410; }
.chapter-street .chapter-bg img {
    filter: sepia(0.45) grayscale(50%) contrast(1.2) brightness(0.4);
}
.chapter-street .chapter-overlay {
    background:
        linear-gradient(135deg, rgba(20,15,10,0.92) 0%, rgba(20,15,10,0.5) 50%, rgba(196,30,42,0.25) 100%),
        radial-gradient(ellipse at 30% 80%, transparent 30%, rgba(0,0,0,0.7) 100%);
}

/* === CLUB - deep black + crveni neon === */
.chapter-club { background: #050308; }
.chapter-club .chapter-bg img {
    filter: grayscale(100%) contrast(1.3) brightness(0.32);
}
.chapter-club .chapter-overlay {
    background:
        linear-gradient(180deg, rgba(0,0,5,0.9) 0%, rgba(0,0,5,0.5) 40%, rgba(196,30,42,0.4) 100%),
        radial-gradient(ellipse at 70% 70%, rgba(229,37,53,0.3) 0%, transparent 50%);
    animation: clubGlow 6s ease-in-out infinite;
}
@keyframes clubGlow {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* === CARTEL - najveći, ornate, red dominant === */
.chapter-cartel {
    background: linear-gradient(180deg, #1a0408 0%, #0a0303 50%, #1a0408 100%);
    min-height: 110vh;
}
.chapter-cartel .chapter-bg img {
    filter: grayscale(60%) contrast(1.25) brightness(0.45) sepia(0.25);
}
.chapter-cartel .chapter-overlay {
    background:
        linear-gradient(135deg, rgba(40,5,8,0.85) 0%, rgba(20,3,4,0.6) 50%, rgba(196,30,42,0.45) 100%),
        radial-gradient(ellipse at 50% 60%, transparent 25%, rgba(0,0,0,0.75) 100%);
}
/* Ornate crveni okvir za CARTEL */
.chapter-cartel::before, .chapter-cartel::after {
    content: '';
    position: absolute;
    left: 32px; right: 32px;
    height: 2px;
    background: var(--red);
    opacity: 0.4;
    z-index: 2;
}
.chapter-cartel::before { top: 32px; box-shadow: 0 0 20px var(--red); }
.chapter-cartel::after  { bottom: 32px; box-shadow: 0 0 20px var(--red); }

/* === Bigtext watermark === */
.chapter-bigtext {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-stencil);
    font-size: clamp(180px, 28vw, 460px);
    line-height: 0.85;
    letter-spacing: -8px;
    color: rgba(255,255,255,0.04);
    pointer-events: none;
    z-index: 1;
    user-select: none;
    white-space: nowrap;
    font-weight: 900;
}
.chapter-cartel .chapter-bigtext { color: rgba(229,37,53,0.07); }
.chapter-bigtext-large { font-size: clamp(220px, 32vw, 560px); }

/* === Content === */
.chapter-content {
    position: relative;
    z-index: 3;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}
.chapter-header {
    margin-bottom: 60px;
    max-width: 720px;
}
.chapter-header-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* === Tag (broj + label) === */
.chapter-tag {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    font-family: var(--font-condensed);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.chapter-num {
    color: var(--red-bright);
    font-weight: 700;
    font-family: var(--font-mono);
    background: rgba(196,30,42,0.12);
    border: 1px solid var(--red);
    padding: 4px 10px;
    letter-spacing: 2px;
}
.chapter-tag-line { width: 50px; height: 1px; background: var(--gray-text); }
.chapter-label { color: var(--white-dim); font-weight: 600; }

/* === Headline === */
.chapter-headline {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 120px);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: -1px;
    margin-bottom: 28px;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.6);
}
/* Single-line samo za STREET i CLUB; CARTEL (chapter-headline-big) zadržava 3 reda */
.chapter-headline:not(.chapter-headline-big) {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .chapter-headline { white-space: normal !important; }
}
.chapter-headline em {
    font-style: normal;
    font-family: var(--font-stencil);
    -webkit-text-stroke: 2.5px var(--red);
    color: transparent;
    text-shadow: none;
}
.chapter-headline-big { font-size: clamp(56px, 7.5vw, 120px); }
.chapter-headline-big span { display: block; }
/* "to the" + "Cártel." moraju ostati na istoj liniji */
.chapter-headline-big .line-2 {
    white-space: nowrap;
}
.chapter-headline-big .line-2 em {
    display: inline-block;
    margin-right: 0.25em;
    vertical-align: baseline;
}
@media (max-width: 700px) {
    .chapter-headline-big .line-2 { white-space: normal; }
}

/* === Lead paragraf === */
.chapter-lead {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--white-dim);
    margin-bottom: 24px;
    max-width: 640px;
}
.chapter-lead-big { font-size: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
.chapter-lead strong { color: var(--white); }

/* === Meta tags ispod lead-a === */
.chapter-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gray-text);
    flex-wrap: wrap;
}
.chapter-meta .dot { color: var(--red); font-size: 8px; }

/* === Foot CTA === */
.chapter-foot {
    text-align: center;
    margin-top: 70px;
}

/* === Reveal animacije === */
.chapter-bg img,
.chapter-header,
.chapter .prod-grid {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
}
.chapter.in-view .chapter-bg img,
.chapter.in-view .chapter-header,
.chapter.in-view .prod-grid {
    opacity: 1;
    transform: none;
}
.chapter.in-view .prod-grid { transition-delay: 0.2s; }

/* ===== JUST HOOLIGANS - Arhiva sektora (homepage blok) ===== */
.jh-arhiva { margin: 0 0 60px; }
.jh-arhiva-head { position: relative; margin-bottom: 26px; }
.jh-arhiva-kicker {
    display: block; margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--red-bright);
}
.jh-arhiva-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 44px); line-height: 0.95;
    text-transform: uppercase; color: var(--white); letter-spacing: -0.5px;
}
.jh-arhiva-title em {
    font-style: normal; font-family: var(--font-stencil);
    -webkit-text-stroke: 1.5px var(--red); color: transparent;
}
.jh-arhiva-all {
    display: inline-block; margin-top: 12px;
    font-family: var(--font-condensed); font-size: 12px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--red-bright);
    text-decoration: none;
}
.jh-arhiva-all span { display: inline-block; transition: transform .2s ease; }
.jh-arhiva-all:hover span { transform: translateX(4px); }
.jh-arhiva-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jh-arhiva-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: rgba(10,8,8,0.72);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--red);
    transition: border-color .25s ease, transform .25s ease;
}
.jh-arhiva-card:not(.is-empty):hover { border-left-color: var(--red-bright); transform: translateY(-4px); }
.jh-arhiva-thumb {
    position: relative; aspect-ratio: 16 / 10;
    background: #0c0a0a center / cover no-repeat;
    border-bottom: 1px solid rgba(255,255,255,0.06); overflow: hidden;
}
.jh-arhiva-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65));
}
.jh-arhiva-num {
    position: absolute; left: 12px; bottom: 10px; z-index: 2;
    font-family: var(--font-display); font-size: 36px; line-height: 1;
    color: rgba(255,255,255,0.85); text-shadow: 2px 2px 0 var(--red);
}
.jh-arhiva-body { padding: 15px 18px 20px; }
.jh-arhiva-meta {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-family: var(--font-condensed); font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--gray-text);
}
.jh-arhiva-meta .dot { color: var(--red); font-size: 7px; }
.jh-arhiva-headline {
    font-family: var(--font-display); font-size: 19px;
    text-transform: uppercase; color: var(--white); line-height: 1.05; margin-bottom: 8px;
}
.jh-arhiva-excerpt { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--white-dim); }
.jh-arhiva-card.is-empty { opacity: 0.5; border-left-color: var(--gray-text); }
.jh-arhiva-card.is-empty .jh-arhiva-num { color: rgba(255,255,255,0.4); text-shadow: 2px 2px 0 rgba(196,30,42,0.4); }
.chapter .jh-arhiva {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1), transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
    transition-delay: 0.1s;
}
.chapter.in-view .jh-arhiva { opacity: 1; transform: none; }
@media (max-width: 860px) {
    .jh-arhiva-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* Mobile === */
@media (max-width: 800px) {
    .chapter { padding: 70px 20px; min-height: auto; }
    .chapter-cartel { min-height: auto; }
    .chapter-cartel::before, .chapter-cartel::after { left: 20px; right: 20px; }
    .chapter-headline { font-size: clamp(44px, 13vw, 72px); }
    .chapter-headline-big { font-size: clamp(52px, 15vw, 84px); }
    .chapter-tag { gap: 10px; }
    .chapter-bigtext { font-size: clamp(120px, 35vw, 240px); }
}


/* === PDP SPECS — ikone + naziv + vrijednost === */
.pdp-specs {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px dashed rgba(196,30,42,0.3);
}
.pdp-specs-title {
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
    text-align: center;
}
.pdp-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--gray-line);
    border: 1px solid var(--gray-line);
}
.pdp-spec {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--black-card);
    transition: background 0.2s;
}
.pdp-spec:hover {
    background: rgba(196,30,42,0.06);
}
.pdp-spec-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,30,42,0.4);
    color: var(--red-bright);
    background: rgba(196,30,42,0.08);
}
.pdp-spec-icon svg { width: 20px; height: 20px; }
.pdp-spec-body { min-width: 0; flex: 1; }
.pdp-spec-lbl {
    font-family: var(--font-condensed);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-bottom: 4px;
}
.pdp-spec-val {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--white);
    line-height: 1.4;
}
@media (max-width: 600px) {
    .pdp-specs-grid { grid-template-columns: 1fr; }
}


/* === PDP DESC BLOCK (sa naslovom) === */
.pdp-desc-block {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px dashed rgba(196,30,42,0.3);
}
.pdp-desc-title {
    font-family: var(--font-condensed);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 16px;
    text-align: center;
}


/* === GLOBAL LETTER-SPACING FIX — slova malo dalja na naslovima === */
.section-title,
.chapter-headline,
.chapter-headline-big,
.hero-h1,
.manifest-v2-headline,
.tifo-v2-title,
.tifo-v2-title-em,
.ab-hero-h1,
.ab-section-title,
.ab-philo-headline,
.ab-pillar h3,
.kodeks-panel-h3,
.value-card-name,
.chant-line,
.manifest-line,
.thanks h1,
.policy-block h2,
.countdown-title,
.chapter-num {
    letter-spacing: 1.5px !important;
}

/* Em delovi (stencil outlined) trebaju malo više */
.section-title em,
.chapter-headline em,
.manifest-v2-headline em,
.ab-hero-h1 .em-stencil,
.ab-section-title em,
.ab-philo-headline .em-stencil,
.tifo-v2-title-em,
.hero-h1 em {
    letter-spacing: 2px !important;
}

/* Big stencil watermarks — drže tighter, ne diraj */
.manifest-v2-bigtext,
.join-bigtext,
.chapter-bigtext,
.ab-origin-bigtext,
.ab-cta-bigtext {
    /* override removed — ostaju kako jesu */
}


/* ============================================
   RESPONSIVE SAFETY GUARDS — home stranica
   ============================================ */

/* Globalna - spriječi horizontalni scroll na svim sekcijama */
.chapter, .stats, .stats-quiet, .manifest-v2, .tifo-v2, .values,
.chant, .join-section, .drop-banner, .marquee-strip {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Manifest polaroid - na malom mobile cap-uj veličinu */
@media (max-width: 480px) {
    .manifest-v2-polaroid { width: 160px; }
    .manifest-v2-polaroid-cap { font-size: 12px; }
}

/* Stats - na ultra-small svaki broj manji */
@media (max-width: 380px) {
    .stat-num, .stats-quiet .stat-num { font-size: 36px !important; }
    .stat-label { font-size: 11px !important; letter-spacing: 2px !important; }
}

/* Chant lines - na malom mobile manji */
@media (max-width: 600px) {
    .chant-line { font-size: clamp(36px, 12vw, 64px); }
    .chant-line.outlined { font-size: clamp(28px, 10vw, 50px); -webkit-text-stroke-width: 2px; }
    .chant-lines { gap: 10px 16px; }
    .chant { padding: 70px 20px; }
}

/* Chapter tag - na malom wrap-uj sigurno */
@media (max-width: 480px) {
    .chapter-tag { flex-wrap: wrap; gap: 8px 12px; font-size: 11px; }
    .chapter-tag-line { display: none; }
    .chapter-meta { font-size: 10px; gap: 8px; }
    .chapter-foot .btn { width: 100%; justify-content: center; }
}

/* Drop banner - manja veličina hero-sub i naslov na 480 */
@media (max-width: 480px) {
    .drop-banner .section-title { font-size: clamp(36px, 11vw, 56px) !important; }
    .drop-banner p { font-size: 14px !important; }
}

/* Hero scroll hint - sakrij na vrlo niskim ekranima */
@media (max-height: 600px) {
    .hero-scroll-hint { display: none; }
}

/* Hero EST text - na portretnom mobile ne smije previše velika biti */
@media (max-width: 480px) {
    .hero-est { font-size: 10px !important; left: 16px !important; letter-spacing: 3px !important; }
}

/* Manifest headline - na malom ne smije biti pretežak */
@media (max-width: 600px) {
    .manifest-v2-headline { font-size: clamp(32px, 9vw, 48px); }
    .manifest-v2-rule { width: 50px; }
    .manifest-v2-body p { font-size: 14px; }
    .manifest-v2-body p.lead { font-size: 16px; padding-left: 16px; }
}

/* Tifo v2 stats - manji brojevi na mobile */
@media (max-width: 500px) {
    .tifo-v2-stats strong { font-size: 26px; }
    .tifo-v2-stats { font-size: 11px; gap: 8px; }
}

/* Values header lead - manji tekst na mobile */
@media (max-width: 600px) {
    .values-lead { font-size: 14px; letter-spacing: 1.5px; }
    .values-lead strong { font-size: 16px; }
}

/* Join input wrap - sigurnije na vrlo malom */
@media (max-width: 380px) {
    .join-input { padding: 14px 6px; font-size: 14px; }
    .join-meta { font-size: 9px; letter-spacing: 1.5px; }
}

/* Footer - osigura wrap kategorija */
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Mini cart drawer - na vrlo niskim ekranima sigurnije */
@media (max-height: 600px) {
    .mc-head { padding: 14px 18px; }
    .mc-foot { padding: 12px 18px 16px; }
}

/* ============================================
   CARTEL VIDEO INTRO (prije Chapter 03)
   ============================================ */
.cartel-video-intro {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 480px;
    max-height: 760px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.cvi-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
}
.cvi-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.65) 100%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
}
.cvi-tag {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(196,30,42,0.5);
    padding: 10px 22px;
    font-family: var(--font-condensed);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
    animation: cviTagPulse 4s ease-in-out infinite;
}
.cvi-tag span:first-child,
.cvi-tag span:last-child { color: var(--red); font-size: 14px; }
@keyframes cviTagPulse {
    0%, 100% { border-color: rgba(196,30,42,0.5); box-shadow: 0 0 0 transparent; }
    50%      { border-color: var(--red-bright); box-shadow: 0 0 24px rgba(196,30,42,0.4); }
}
@media (max-width: 700px) {
    .cartel-video-intro { height: 50vh; min-height: 320px; }
    .cvi-tag { font-size: 10px; letter-spacing: 3px; padding: 8px 16px; bottom: 20px; }
}

/* ============================================
   CHAPTER OUTRO VIDEOS (ispod chapter sekcija)
   ============================================ */
.chapter-video {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    max-height: 700px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.chapter-video .cv-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
}
.chapter-video .cv-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.6) 100%),
        radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.4) 100%);
}
@media (max-width: 700px) {
    .chapter-video { height: 45vh; min-height: 280px; }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Smanji workload na slabijim uređajima
   ============================================ */
@media (max-width: 900px) {
    /* Disable expensive animacije */
    .grain::after,
    .ambient-particles,
    .flare,
    .manifest-v2-bigtext,
    .join-bigtext,
    .chapter-bigtext,
    .ab-origin-bigtext,
    .ab-cta-bigtext,
    .sector-street::before,
    .sector-club::before,
    .sector-club .sector-bg,
    .chant-bg,
    .chapter-club .chapter-overlay {
        animation: none !important;
    }

    /* Sakri "ambient particles" potpuno - tešak DOM render */
    .ambient-particles { display: none !important; }
    .floating-tags { display: none !important; }

    /* Smanji ili ukloni blur (najskuplji filter) */
    .quote-bg, .stats-bg, .smoke-blob, .flare {
        filter: none !important;
    }

    /* Backdrop-filter veoma skup na mobile - samo na trust elementima ostavi */
    .nav, .ab-hero-photo-tag, .manifest-v2-frame-tag, .cv-tag, .stock-low-tag {
        backdrop-filter: none !important;
    }

    /* Grayscale filteri su skupi - simplify */
    .chapter-bg img,
    .tifo-v2-bg img,
    .manifest-v2-photo-main img,
    .ab-philo-bg img,
    .ab-forwhom-photo img,
    .value-card-bg,
    .kodeks-panel-bg {
        filter: brightness(0.5) !important;
        transition: none !important;
    }

    /* Disable transform animacije na mnoge ambient stvari */
    .value-stamp,
    .ab-stamp,
    .manifest-v2-polaroid,
    .nav-logo span,
    .story-dot,
    .stock-dot {
        animation: none !important;
    }

    /* Smanji text-shadow kompleksnost (multi-layer shadows su skupi) */
    .hero-h1.text-distressed,
    .section-title.text-distressed,
    .chapter-headline,
    .manifest-v2-headline,
    .quote-text .quote-line {
        text-shadow: 2px 2px 0 rgba(0,0,0,0.6) !important;
    }

    /* Pojednostavi gradijente */
    .stats-bg, .quote-bg, .ab-philo-overlay {
        background: rgba(10,10,10,0.7) !important;
    }

    /* Disable video parallax na mobile */
    .hero-video, .cv-video, .cvi-video {
        filter: none !important;
    }
}

/* Tablet i ispod - smanji marquee brzinu (CPU spasilac) */
@media (max-width: 768px) {
    .marquee-track {
        animation-duration: 80s !important;
    }
}

/* Smanji reveal-init transitions na mobile da budu kraće */
@media (max-width: 700px) {
    .reveal-init, .ab-reveal-in {
        transition-duration: 0.4s !important;
    }
}

/* Will-change cleanup - dodaj will-change samo gdje treba */
@media (hover: none) {
    /* Skip will-change na touch devices da ne pojede memoriju */
    .ambient-particles span,
    .flare,
    .manifest-v2-bigtext,
    .join-bigtext {
        will-change: auto !important;
    }
}

/* Slow phones - prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video, .cv-video, .cvi-video, video {
        display: none !important;
    }
}

/* ============================================
   MOBILE SCROLL BOOST (DODATNO)
   ============================================ */
@media (max-width: 900px) {
    /* content-visibility uklonjen - uzrokovao je lazy rendering = kašnjenje pri scroll-u */

    /* Disable smooth scroll - zna uzrokovati stutter na mobile */
    html { scroll-behavior: auto !important; }

    /* Uklanjam will-change svuda gdje ne treba aktivno (memorija) */
    .hero-shot, .hero-video, .marquee-track, .ambient-particles span,
    .manifest-v2-bigtext, .join-bigtext, .chapter-bigtext,
    .stat-num, .value-card-bg, .kodeks-panel-bg {
        will-change: auto !important;
    }

    /* Box-shadow je skup repaint-om; pojednostavi */
    .chapter, .stats, .stats-quiet, .tifo-v2, .values, .manifest-v2, .join-section,
    .vchip, .stock-box, .ab-pillar, .value-card, .prod-card,
    .nalog-card, .auth-card, .policy-block {
        box-shadow: none !important;
    }

    /* Disable transforms na common bg elementima da spriječim layer composition */
    .smoke, .flare, .splatter {
        animation: none !important;
        transform: none !important;
    }

    /* Smanjuje frequency repainta - browser komprimira slike na mobile */
    img {
        image-rendering: auto;
    }
}

/* ============================================
   TOUCH DEVICES - dodatne optimizacije
   ============================================ */
@media (hover: none) {
    /* Onemogući hover transformacije koje pokreću layout */
    .prod-card:hover,
    .ab-pillar:hover,
    .value-card:hover,
    .kodeks-panel:hover,
    .chapter:hover,
    .vchip:hover {
        transform: none !important;
    }

    /* Sticky elements - manje skupo */
    .nav { will-change: auto; }
}

/* ============================================
   MOBILE - bez fade-in animacija
   ============================================ */
@media (max-width: 900px) {
    /* Sve reveal/fade animacije se ugase, sve odmah vidljivo */
    .reveal-init,
    .ab-reveal-in > *,
    .cascade-init,
    .wipe-init,
    .split-char,
    .prod-card.cascade-init,
    .stat-item,
    .manifest-stanza,
    .tifo-v2-content,
    .values-header,
    .value-card,
    .chant-line,
    .join-content,
    .ab-hero-text > *,
    .ab-hero-photo,
    .ab-origin-text > *,
    .ab-origin-quote,
    .ab-pillar,
    .ab-philo-content > *,
    .ab-stat,
    .ab-forwhom-text > *,
    .ab-forwhom-photo,
    .ab-cta-content > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        clip-path: none !important;
    }

    /* Hero entrance fade - na mobile odmah vidi sve */
    .hero.hero-video-mode .hero-est,
    .hero.hero-video-mode .hero-content-bottom > *,
    .hero.hero-video-mode .hero-scroll-hint {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Manifest V2 reveal - odmah pokaži */
    .manifest-v2-photo-main,
    .manifest-v2-text,
    .manifest-v2-headline span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Chapter reveal - odmah pokaži */
    .chapter-bg img,
    .chapter-header,
    .chapter .prod-grid {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Sve reveal-* klase odmah pokaži - bez observer rebound-a */
    .reveal-init, .cascade-init, .wipe-init, .split-char,
    [class*="reveal-"], [class*="cascade-"], [class*="-init"] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Slike: aspect-ratio sprječava CLS dok se učitavaju */
    img[width][height] { height: auto; }

    /* Story step reveal */
    .story-step,
    .story-step.reveal-init {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}