/* ===== Maxton Design — sadržaj strane (mx*). Tokeni, .wrap/.blk/.btn/.cbtn/.marq/.sec-h
   žive u spojleri.css i NE dupliraju se ovde. ===== */

/* zajedničko */
.mxlbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--steel)}
.mxlbl::before{content:"";width:18px;height:2px;background:var(--red);transform:skewX(-14deg);flex:none}
.mxbody{color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.8;max-width:56ch}
.mxbody+.mxbody{margin-top:14px}
/* --edge = tačno do ivice ekrana (procenti u margin-u se računaju od grid trake, ne od .wrap) */
.mxlead-fig,.mx2005-fig,.mxsup-fig,.mxph.p2{--edge:calc(-1 * (max(0px,(100vw - var(--wrap))/2) + 24px))}
.mxghost{position:absolute;font-family:var(--h);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.05em;line-height:.78;color:var(--fg);opacity:.035;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
/* traka „šta radimo": statična, centrirana u wrap-u; desktop jedan red, ≤900px dva reda po 4
   (red se nikad ne završava „/" - inače vizuelno beži ulevo); duplikat za marquee skriven */
.marq-t{--mq:clamp(8px,1.5vw,26px);width:auto;max-width:var(--wrap);margin:0 auto;padding:0 24px;justify-content:center;flex-wrap:nowrap;animation:none;row-gap:8px;column-gap:calc(var(--mq) - 1.5px)}
.marq-t span{font-size:clamp(1rem,1.5vw,1.25rem);padding:0;gap:var(--mq)}
.marq-t span:nth-child(n+9){display:none}
.marq-t span:nth-child(8)::after{content:none}
@media(max-width:900px){
  .marq-t{flex-wrap:wrap;padding:0 16px}
  .marq-t::after{content:"";flex-basis:100%;order:1}
  .marq-t span:nth-child(n+5){order:2}
  .marq-t span:nth-child(4)::after{content:none}
}
@media(max-width:420px){.marq-t{--mq:7px}.marq-t span{font-size:.9rem}}

/* ---------- 1. MASTHEAD ---------- */
.mxlead{padding:var(--page-top) 0 clamp(18px,2.6vw,34px);position:relative;overflow:hidden}
.mxlead .wrap{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(18px,2.6vw,40px);align-items:center;position:relative;z-index:2}
.mxlead h1{font-size:clamp(3rem,8.6vw,7.4rem);color:var(--fg);letter-spacing:-.035em}
.mxlead h1 .ln{display:block;overflow:hidden}
.mxlead h1 .ln>span{display:block;transform:translateY(104%);animation:mxRise 1s cubic-bezier(.22,1,.36,1) both}
.mxlead h1 .ln:nth-child(1)>span{animation-delay:.05s}
.mxlead h1 .ln:nth-child(2)>span{animation-delay:.16s}
.mxlead h1 b{color:var(--red);font-weight:inherit}
@keyframes mxRise{to{transform:none}}
.mxsub{font-family:var(--h);font-weight:700;font-style:italic;text-transform:uppercase;line-height:1.06;letter-spacing:-.01em;font-size:clamp(1.05rem,1.7vw,1.5rem);color:var(--fg);max-width:26ch;margin:20px 0 14px}
.mxsub em{color:var(--red);font-style:inherit}
.mxlead-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mxfacts{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.mxfacts div{position:relative;padding-left:14px}
.mxfacts div::before{content:"";position:absolute;left:0;top:4px;width:3px;height:calc(100% - 8px);background:var(--red);transform:skewX(-14deg)}
.mxfacts b{display:block;font-family:var(--h);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.12rem;line-height:1;color:var(--fg)}
.mxfacts span{display:block;font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:.64rem;color:var(--steel);margin-top:6px}
.mxlead-fig{margin-right:var(--edge);opacity:0;transform:translateX(48px) scale(1.05);animation:mxFig 1.25s cubic-bezier(.22,1,.36,1) .2s both}
.mxlead-fig img{width:100%;height:auto}
@keyframes mxFig{to{opacity:1;transform:none}}
.mxlead .mxghost{left:-1.5%;bottom:-4%;font-size:clamp(6rem,17vw,15rem)}

/* ---------- 2. STICKY TEKST + FOTOGRAFIJE KOJE PROLAZE ---------- */
.mxstick .wrap{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(24px,5vw,86px);align-items:start}
.mxstick-t{position:sticky;top:calc(var(--head-h) + var(--search-h) + 30px)}
.mxstick-t h2{font-size:clamp(2rem,4.4vw,3.3rem);color:var(--fg);margin:14px 0 20px}
.mxpills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.mxpill{font-family:var(--h);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;line-height:1;padding:10px 17px;border:1px solid var(--line);color:var(--fg);transform:skewX(-14deg)}
.mxpill>span{display:inline-block;transform:skewX(14deg)}
.mxphs{display:grid;gap:clamp(46px,9vh,120px)}
.mxph{position:relative;will-change:transform}
.mxph img{width:100%}
.mxph figcaption{display:flex;align-items:baseline;gap:12px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--steel)}
.mxph figcaption b{color:var(--red);font-weight:800;font-style:italic;letter-spacing:0;font-size:.9rem}
.mxph.p2{margin-left:clamp(16px,9%,110px);margin-right:var(--edge)}
.mxph.p3{margin-right:clamp(16px,7%,86px)}

/* ---------- 3. PRELAMANJE FOTOGRAFIJE (split) ---------- */
.mxsplit{position:relative;padding:clamp(26px,4vw,56px) 0 clamp(40px,5vw,72px);overflow:hidden}
.mxstage{position:relative;width:100%;max-width:1180px;margin:0 auto;aspect-ratio:3/2}
.mxstage .hf{position:absolute;inset:0;overflow:hidden;will-change:transform}
.mxstage .hf img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mxstage .hf.l{clip-path:inset(0 50% 0 0);transform:translateX(calc(-1 * var(--sp,0px)))}
.mxstage .hf.r{clip-path:inset(0 0 0 50%);transform:translateX(var(--sp,0px))}
.mxstage-t{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84%,440px);text-align:center;z-index:3;opacity:var(--so,0);transition:opacity .2s linear}
.mxstage-t h2{font-size:clamp(1.7rem,3.6vw,2.9rem);color:var(--fg)}
.mxstage-t h2 em{color:var(--red);font-style:inherit}
.mxstage-t .mxlbl{margin-bottom:14px}
.mxstage-t p{color:var(--fg-2);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.7;margin-top:14px}
.mxnums{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,44px);margin-top:26px}
.mxnums div{position:relative;padding-top:13px;text-align:left}
.mxnums div::before{content:"";position:absolute;left:0;top:0;width:26px;height:3px;background:var(--red);transform:skewX(-14deg)}
.mxnums b{display:block;font-family:var(--h);font-weight:900;font-style:italic;font-size:clamp(1.15rem,2vw,1.7rem);line-height:1;color:var(--fg)}
.mxnums span{display:block;font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:.62rem;color:var(--steel);margin-top:7px}

/* ---------- 4. 2005 ---------- */
.mx2005{position:relative;overflow:hidden}
.mx2005 .wrap{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);gap:clamp(20px,3.4vw,54px);align-items:center;position:relative;z-index:2}
.mx2005-fig{margin-left:var(--edge);order:-1;will-change:transform}
.mx2005-fig img{width:100%}
.mxyear{position:relative;width:max-content;font-family:var(--h);font-weight:900;font-style:italic;font-size:clamp(4.4rem,13vw,11rem);line-height:.76;letter-spacing:-.055em;color:var(--fg);padding-bottom:18px;margin-bottom:22px}
.mxyear::after{content:"";position:absolute;left:2%;bottom:0;width:70%;height:7px;background:var(--red);transform:skewX(-14deg)}
.mx2005 h2{font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--fg);margin-bottom:16px}
.mx2005 .mxghost{right:2%;bottom:4%;font-size:clamp(3.4rem,8.6vw,7.2rem)}

/* ---------- 5. OFFSET GRID DETALJA ---------- */
.mxdet-h{max-width:620px;margin-bottom:clamp(26px,4vw,52px)}
.mxdet-h h2{font-size:clamp(1.9rem,4.2vw,3rem);color:var(--fg);margin:14px 0 18px}
.mxdet{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.6vw,24px);align-items:start}
.mxdet figure{position:relative;will-change:transform}
.mxdet figure img{width:100%}
.mxdet .d1{grid-column:1/6}
.mxdet .d2{grid-column:6/10;margin-top:clamp(34px,7vw,110px)}
.mxdet .d3{grid-column:10/13;margin-top:clamp(10px,2vw,30px)}
.mxdet figcaption{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--h);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--steel)}

/* ---------- 6. FOTO TRAKA #MAXTONIZED ---------- */
.mxstrip{overflow:hidden;padding:clamp(28px,4vw,52px) 0 clamp(34px,4.5vw,60px);position:relative}
.mxstrip-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(16px,2.4vw,30px)}
.mxstrip-h h2{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--fg)}
.mxstrip-h span{font-family:var(--h);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:var(--steel)}
.mxroll{display:flex;width:max-content;gap:clamp(12px,1.8vw,28px);animation:mxRoll 58s linear infinite}
.mxroll figure{flex:none;width:clamp(230px,25vw,400px)}
.mxroll img{width:100%}
.mxstrip:hover .mxroll{animation-play-state:paused}
@keyframes mxRoll{to{transform:translateX(-50%)}}

/* ---------- 7. PODRŠKA ---------- */
.mxsup .wrap{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);gap:clamp(20px,3.6vw,60px);align-items:center}
.mxsup-fig{margin-left:var(--edge);will-change:transform}
.mxsup-fig img{width:100%}
.mxsup h2{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--fg);margin:14px 0 18px}
.mxcont{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.mxcont a{display:inline-flex;align-items:center;gap:11px;font-family:var(--h);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--fg);border:1px solid var(--line);padding:13px 19px;transform:skewX(-14deg);transition:background .2s,color .2s,border-color .2s}
.mxcont a>*{transform:skewX(14deg)}
.mxcont a svg{width:17px;height:17px;stroke:var(--red);fill:none;stroke-width:1.9;flex:none}
.mxcont a:hover{background:var(--panel);border-color:var(--panel);color:var(--panel-fg)}
.mxcont a:hover svg{stroke:#fff}

/* ---------- 8. FAQ ---------- */
.mxfaq-w{background:var(--bg-2)}
.mxfaq{max-width:940px;margin:0 auto}
.mxq{border-bottom:1px solid var(--line);position:relative}
.mxq:first-child{border-top:1px solid var(--line)}
.mxq>summary{list-style:none;cursor:pointer;position:relative;padding:24px 60px 24px 22px;font-family:var(--h);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12;font-size:clamp(1.05rem,2.1vw,1.42rem);color:var(--fg);transition:color .2s}
.mxq>summary::-webkit-details-marker{display:none}
.mxq>summary:hover{color:var(--red)}
.mxq>summary::before,.mxq>summary::after{content:"";position:absolute;right:10px;top:50%;background:var(--red);transition:transform .25s}
.mxq>summary::before{width:16px;height:2px;transform:translateY(-50%)}
.mxq>summary::after{width:2px;height:16px;right:17px;transform:translateY(-50%)}
.mxq[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
.mxq>summary:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.mxq-b{padding:0 60px 26px 22px}
.mxq-b p{color:var(--fg-2);font-size:1.02rem;line-height:1.75;max-width:64ch}
.mxq::before{content:"";position:absolute;left:0;top:24px;width:5px;height:32px;background:var(--red);transform:skewX(-14deg) scaleY(0);transform-origin:top;transition:transform .3s}
.mxq[open]::before{transform:skewX(-14deg) scaleY(1)}

/* ---------- 9. ZAVRŠNI CTA ---------- */
.mxend{position:relative;overflow:hidden;text-align:center}
.mxend .wrap{position:relative;z-index:2}
.mxend h2{font-size:clamp(2rem,5.4vw,4rem);color:var(--fg);margin-bottom:16px}
.mxend h2 em{color:var(--red);font-style:inherit}
.mxend .mxlbl{justify-content:center}
.mxend p{color:var(--fg-2);font-size:1.05rem;line-height:1.7;max-width:50ch;margin:0 auto}
.mxend-b{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}
.mxend-ig{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--h);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--steel);transition:color .2s}
.mxend-ig svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.mxend-ig:hover{color:var(--red)}
.mxend .mxghost{left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(5rem,19vw,15rem);opacity:.028}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .mxlead .wrap,.mxstick .wrap,.mx2005 .wrap,.mxsup .wrap{grid-template-columns:1fr}
  .mxlead-fig{margin-right:var(--edge);margin-left:var(--edge)}
  .mx2005-fig,.mxsup-fig{margin-right:var(--edge)}
  .mxstick-t{position:static}
  .mxph.p2,.mxph.p3{margin-left:0;margin-right:0}
  .mxdet .d1{grid-column:1/8}
  .mxdet .d2{grid-column:8/13}
  .mxdet .d3{grid-column:3/11;margin-top:clamp(18px,4vw,40px)}
  .mxstage-t{width:min(94%,460px)}
}
@media(max-width:640px){
  .mxlead-fig,.mx2005-fig,.mxsup-fig,.mxph.p2{--edge:calc(-1 * (max(0px,(100vw - var(--wrap))/2) + 16px))}
  .mxlead-cta .cbtn,.mxend-b .cbtn{width:100%;justify-content:center}
  .mxstage{aspect-ratio:1/1}
  .mxstage .hf{z-index:2}            /* polovine idu PREKO teksta */
  .mxstage-t{width:84%;z-index:1}    /* tekst je ispod, otkriva ga razmicanje */
  .mxstage-t p{margin-top:10px}
  .mxnums{margin-top:18px}
  .mxdet{grid-template-columns:1fr}
  .mxdet .d1,.mxdet .d2,.mxdet .d3{grid-column:1/2;margin-top:0}
  .mxq>summary{padding:20px 46px 20px 16px}
  .mxq-b{padding:0 20px 22px 16px}
  .mxfacts{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .mxlead h1 .ln>span,.mxlead-fig{animation:none;opacity:1;transform:none}
  .mxroll{animation:none}
  .mxph,.mxdet figure,.mx2005-fig,.mxsup-fig{transform:none!important}
  .mxstage .hf{transform:none!important}
  .mxstage-t{opacity:1!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:640px){
  /* bez animacije: polovine stoje razmaknute, tekst je odmah čitljiv u procepu */
  .mxstage .hf.l{transform:translateX(-44vw)!important}
  .mxstage .hf.r{transform:translateX(44vw)!important}
}