/* =============================================================================
   MONVIQ — STRANA: HOME (P0)  ·  public/css/mv/home.css
   Prenos odobrenog mockupa /public/web-design/index.html (HERO → 07 Insights).
   Sve vrednosti iz tokens.css (--mv-*). Prefiks klasa: .mv-hm-*
   WOW momenti (rezervisani za naslovnu): peak foto scale+lift u herou,
   razilaženje redova H1, cursor glow, slojeviti monogram parallax,
   horizontalna Method traka koja se puni, Industries marquee.
   ========================================================================== */

/* =============================================================================
   1. HERO  —  full-bleed, tekst dole levo, foto vrha desno
   ========================================================================== */
.mv-hm-hero{position:relative;isolation:isolate;min-height:100svh;display:flex;
  flex-direction:column;justify-content:flex-end;overflow:hidden;
  padding:calc(var(--mv-header-h) + 66px) 0 clamp(38px,7vw,70px);
  background:var(--mv-grad-hero);color:var(--mv-on-dark)}
/* meki scrim pod headerom — foto ostaje vidljiva, nav ostaje čitljiv */
.mv-hm-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:210px;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,17,.62) 0%,rgba(7,10,17,.34) 46%,rgba(7,10,17,0) 100%)}

.mv-hm-beam{position:absolute;inset:-40% -20% -40% 10%;pointer-events:none;opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.35) 62%,transparent 76%);
  mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.35) 62%,transparent 76%);
  background:conic-gradient(from 200deg at 62% 50%,rgba(212,175,55,0) 0deg,rgba(212,175,55,.16) 26deg,
    rgba(232,199,102,.03) 46deg,rgba(212,175,55,0) 72deg,rgba(212,175,55,0) 300deg,
    rgba(212,175,55,.08) 332deg,rgba(212,175,55,0) 360deg);
  animation:mvHmBeam var(--mv-beam) var(--mv-ease-line) infinite}
@keyframes mvHmBeam{to{transform:rotate(360deg)}}

.mv-hm-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(237,239,242,.05) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}

/* mek prelaz ka levoj koloni: maska je na KONTEJNERU (hvata i ::after prevlaku),
   pa nema vidljive vertikalne ivice fotografije */
.mv-hm-peak{position:absolute;right:-4%;top:50%;width:min(64%,980px);height:112%;
  transform:translateY(-50%);pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.34) 32%,
    rgba(0,0,0,.72) 52%,#000 74%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.34) 32%,
    rgba(0,0,0,.72) 52%,#000 74%)}
.mv-hm-peak img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;display:block;
  animation:mvHmZoom var(--mv-dur-zoom) var(--mv-ease) both}
@keyframes mvHmZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.mv-hm-peak::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--mv-ink) 2%,rgba(7,10,17,.2) 34%,transparent 62%)}

/* cursor glow — samo pointer uređaji (JS pomera) */
.mv-hm-glow{position:absolute;left:0;top:0;width:720px;height:720px;margin:-360px 0 0 -360px;
  pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(212,175,55,.12) 0%,rgba(212,175,55,.04) 38%,rgba(212,175,55,0) 68%)}

.mv-hm-hero__in{position:relative;z-index:3;width:100%;will-change:transform,opacity}

.mv-hm-heb{display:flex;align-items:center;gap:var(--mv-sp-4);margin-bottom:var(--mv-sp-e4)}
.mv-hm-heb__ln{width:56px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--mv-accent),rgba(212,175,55,.1))}
.mv-hm-heb__t{font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-eyebrow);text-transform:uppercase;color:var(--mv-accent)}

.mv-hm-h1{font-weight:var(--mv-fw-bold)}
.mv-hm-ln{display:block;overflow:hidden;padding-bottom:.06em;will-change:transform}
.mv-hm-ln>span{display:block;transform:translateY(106%);
  animation:mvHmRise var(--mv-dur-hero) var(--mv-ease) forwards}
.mv-hm-ln+.mv-hm-ln>span{animation-delay:.14s}
@keyframes mvHmRise{to{transform:translateY(0)}}

.mv-hm-sub{margin-top:var(--mv-sp-e4);max-width:560px;padding-left:var(--mv-sp-e2);
  border-left:1px solid var(--mv-line-gold-strong);font-size:var(--mv-fs-hero-sub);
  line-height:var(--mv-lh-prose);color:rgba(237,239,242,.66)}
.mv-hm-sub b{color:var(--mv-white);font-weight:var(--mv-fw-medium)}
.mv-hm-hbtns{margin-top:var(--mv-sp-e5)}

.mv-hm-fade{opacity:0;animation:mvHmFade 1s var(--mv-ease) forwards}
.mv-hm-d1{animation-delay:.5s}.mv-hm-d2{animation-delay:.62s}
.mv-hm-d3{animation-delay:.74s}.mv-hm-d4{animation-delay:.86s}
@keyframes mvHmFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.mv-hm-side{position:absolute;right:clamp(16px,2.6vw,44px);top:28%;z-index:4;display:flex;
  flex-direction:column;align-items:center;gap:18px;pointer-events:none}
.mv-hm-side__t{writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--mv-on-dark-soft)}
.mv-hm-side__i{position:relative;display:block;width:1px;height:88px;overflow:hidden;
  background:rgba(237,239,242,.16)}
.mv-hm-side__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--mv-gold-light),transparent);
  animation:mvHmScroller 2.6s ease-in-out infinite}
@keyframes mvHmScroller{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.mv-hm-rail{position:relative;z-index:3;margin-top:clamp(46px,7vh,84px);
  border-top:1px solid var(--mv-line-gold);will-change:transform,opacity}
.mv-hm-rail__in{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mv-hm-rail__c{position:relative;padding:var(--mv-sp-e2) 0 0}
.mv-hm-rail__c+.mv-hm-rail__c{padding-left:clamp(18px,2.4vw,42px)}
.mv-hm-rail__c+.mv-hm-rail__c::before{content:"";position:absolute;left:0;top:22px;bottom:4px;width:1px;
  background:rgba(212,175,55,.18)}
.mv-hm-rail__t{display:block;font-family:var(--mv-font-display);font-weight:var(--mv-fw-bold);
  font-size:var(--mv-fs-label-lg);letter-spacing:.02em;text-transform:uppercase;color:var(--mv-white)}
.mv-hm-rail__p{display:block;margin-top:var(--mv-sp-2);font-size:12.5px;line-height:1.55;
  color:var(--mv-on-dark-soft);max-width:26ch}

/* =============================================================================
   2. 01 WHAT WE DO  —  svetla sekcija + slojeviti monogram (parallax)
   ========================================================================== */
.mv-hm-wwd{padding-top:var(--mv-section-xl);overflow-x:clip}
.mv-hm-wwd>.mv-wrap{position:relative;z-index:1}
.mv-hm-mono{position:absolute;right:clamp(14px,2.6vw,54px);top:1.5%;width:min(21%,238px);
  aspect-ratio:104/120;pointer-events:none;z-index:0}
.mv-hm-mono>*{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.mv-hm-mono__glow{left:-22%;top:-18%;width:144%;height:136%;filter:blur(30px);
  background:radial-gradient(circle at 52% 46%,rgba(212,175,55,.34) 0%,rgba(212,175,55,.1) 40%,
    rgba(212,175,55,0) 68%)}
.mv-hm-mono__ring{left:9%;top:9%;width:82%;height:82%;border:1px solid rgba(138,107,24,.11);
  transform:rotate(45deg)}
.mv-hm-l1{opacity:.07}.mv-hm-l2{opacity:.2}.mv-hm-l3{opacity:.5}.mv-hm-l4{opacity:.34}

.mv-hm-top{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--mv-gap-col);align-items:end;
  margin-top:var(--mv-sp-e5)}
.mv-hm-top>*{min-width:0}
.mv-hm-wwd h2{max-width:14ch}
.mv-hm-wwd .mv-trio{margin-top:var(--mv-gap-block)}
/* FTS span ostavlja beli razmak pre tačke — poništi ga da tačka nalegne na reč */
.mv-hm-wwd .mv-trio__t i{margin-left:-.25em}

/* =============================================================================
   3. 02 THE MONVIQ METHOD  —  tamna traka koja se puni skrolom
   ========================================================================== */
.mv-hm-me{background:var(--mv-grad-method);color:var(--mv-on-dark);overflow:hidden}
.mv-hm-me__bg{position:absolute;right:0;top:0;width:min(46%,620px);height:100%;opacity:.14;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);
  mask-image:linear-gradient(90deg,transparent,#000 70%)}
.mv-hm-me__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.mv-hm-me>.mv-wrap{position:relative;z-index:1}
.mv-hm-me__head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,72px);
  align-items:end;margin-top:var(--mv-sp-e5)}
.mv-hm-me__head>*{min-width:0}
.mv-hm-blk{display:block}

.mv-hm-mrail{position:relative;margin-top:var(--mv-gap-block)}
.mv-hm-mline{position:absolute;left:0;right:0;top:0;height:1px;background:var(--mv-line-dark)}
.mv-hm-mfill{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--mv-accent),var(--mv-gold-light))}
.mv-hm-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:1px}
.mv-hm-step{position:relative;padding:var(--mv-sp-e4) clamp(10px,1.2vw,22px) 0 0;
  --mv-hm-dx:-7.5px;--mv-hm-dy:-7.5px}
.mv-hm-step::before{content:"";position:absolute;left:var(--mv-hm-dx);top:var(--mv-hm-dy);
  width:15px;height:15px;border-radius:var(--mv-r-circle);background:var(--mv-anth);
  border:1px solid var(--mv-line-dark-strong);
  transition:background .45s var(--mv-ease),border-color .45s,transform .45s var(--mv-ease),
             box-shadow .45s}
.mv-hm-step::after{content:"";position:absolute;left:calc(var(--mv-hm-dx) + 5px);
  top:calc(var(--mv-hm-dy) + 2.5px);width:5px;height:9px;
  border:1.7px solid var(--mv-navy);border-top:0;border-left:0;
  transform:rotate(45deg) scale(.2);transform-origin:center;opacity:0;
  transition:opacity .25s .12s,transform .45s .12s var(--mv-ease)}
.mv-hm-step.is-lit::before{background:var(--mv-accent);border-color:var(--mv-accent);
  animation:mvHmPulse 1.6s var(--mv-ease) forwards}
.mv-hm-step.is-lit::after{opacity:1;transform:rotate(45deg) scale(1)}
@keyframes mvHmPulse{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.6),0 0 0 0 rgba(212,175,55,.35);transform:scale(1)}
  35%{transform:scale(1.28)}
  100%{box-shadow:0 0 0 16px rgba(212,175,55,0),0 0 26px 6px rgba(212,175,55,.22);transform:scale(1)}}
.mv-hm-step__n{font-style:normal;font-size:var(--mv-fs-micro);font-weight:var(--mv-fw-semi);
  letter-spacing:var(--mv-ls-micro);color:var(--mv-accent)}
.mv-hm-step.is-lit .mv-hm-step__n{color:var(--mv-gold-light)}
.mv-hm-step__t{display:block;margin-top:var(--mv-sp-3);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-label-lg);text-transform:uppercase;
  letter-spacing:.01em}
.mv-hm-step.is-lit .mv-hm-step__t{color:var(--mv-white)}
.mv-hm-step__p{display:block;margin-top:10px;font-size:13px;line-height:1.62;
  color:var(--mv-on-dark-soft)}
.mv-hm-cta{margin-top:clamp(44px,5vw,64px)}

/* =============================================================================
   4. 03 SERVICES  —  svetla sekcija, pet redova
   ========================================================================== */
.mv-hm-svc{padding-top:clamp(92px,10vw,146px);overflow:hidden}
.mv-hm-svc__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mv-hm-svc__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;opacity:.075;
  filter:grayscale(.85) contrast(.8) blur(1.6px);transform:scale(1.06);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 72%,transparent 100%)}
.mv-hm-svc>.mv-wrap{position:relative;z-index:1}
.mv-hm-hdrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mv-sp-5);
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--mv-line-light);
  margin-top:var(--mv-sp-e5)}
.mv-hm-hdrow__tag{font-style:normal;font-size:11.5px;font-weight:var(--mv-fw-semi);
  letter-spacing:.22em;text-transform:uppercase;color:var(--mv-accent-deep)}
.mv-hm-svc__lead{margin-top:var(--mv-sp-e3);max-width:60ch}
.mv-hm-rows{margin-top:clamp(34px,4vw,54px)}
.mv-hm-row{grid-template-columns:64px minmax(0,.92fr) minmax(0,1.08fr) 30px}
.mv-hm-svc .mv-hm-cta{margin-top:clamp(38px,4.5vw,58px)}

/* =============================================================================
   5. 04 INDUSTRIES  —  uska tamna traka + marquee
   ========================================================================== */
.mv-hm-ind{background:var(--mv-canvas);color:var(--mv-on-dark);overflow:hidden;
  padding:var(--mv-section-snug) 0 var(--mv-section-snug-end)}
.mv-hm-ind__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);
  align-items:center}
.mv-hm-ind__in>*{min-width:0}
.mv-hm-ind h2{max-width:18ch;line-height:1.1}
.mv-hm-ind__eb{margin-bottom:var(--mv-sp-5)}
.mv-hm-ind__p{margin-top:20px;font-size:var(--mv-fs-body-sm);line-height:var(--mv-lh-lead);
  color:rgba(237,239,242,.55);max-width:44ch}
.mv-hm-marq{margin-top:clamp(44px,5.5vw,74px);padding:20px 0;
  border-top:1px solid var(--mv-line-gold);border-bottom:1px solid var(--mv-line-gold);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mv-hm-marq__track{display:flex;width:max-content;
  animation:mvHmMarq var(--mv-marquee) var(--mv-ease-line) infinite}
.mv-hm-marq:hover .mv-hm-marq__track{animation-play-state:paused}
@keyframes mvHmMarq{to{transform:translateX(-50%)}}
.mv-hm-marq__track>span{display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  padding-right:clamp(24px,3vw,48px);font-family:var(--mv-font-display);font-weight:var(--mv-fw-bold);
  font-size:var(--mv-fs-marquee);letter-spacing:.02em;text-transform:uppercase;
  color:rgba(237,239,242,.82);white-space:nowrap}
.mv-hm-marq__track>span::after{content:"";width:6px;height:6px;flex:0 0 auto;
  background:var(--mv-accent)}

/* =============================================================================
   6. 05 LEADERSHIP  —  svetla sekcija, portret + izjava
   ========================================================================== */
.mv-hm-ld__in{display:grid;grid-template-columns:1.26fr .84fr;gap:clamp(30px,4vw,64px);
  align-items:center;margin-top:clamp(34px,4vw,46px)}
.mv-hm-ld__in>*{min-width:0}
.mv-hm-ld__txt{margin-top:var(--mv-sp-e3);font-size:var(--mv-fs-prose);line-height:1.75;
  color:var(--mv-on-light-mut);max-width:56ch}
.mv-hm-ld__txt b{color:var(--mv-on-light);font-weight:var(--mv-fw-semi)}
.mv-hm-ld__cta{margin-top:var(--mv-sp-6)}

/* =============================================================================
   7. 06 NATIONWIDE FIELD NETWORK  —  tamna sekcija, foto traka (Marijine fotografije)
   ========================================================================== */
.mv-hm-fn{background:var(--mv-canvas);color:var(--mv-on-dark);padding:clamp(84px,10vw,138px) 0}
.mv-hm-fn__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);
  align-items:end;margin-top:var(--mv-sp-e5)}
.mv-hm-fn__top>*{min-width:0}
.mv-hm-fn h2{max-width:15ch}
.mv-hm-fn__act{margin-top:var(--mv-sp-e2)}
.mv-hm-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,26px);
  margin-top:clamp(48px,6vw,84px)}
.mv-hm-strip figure{position:relative;margin:0;min-width:0;overflow:hidden;
  border-radius:var(--mv-r3);background:var(--mv-surface-2)}
.mv-hm-strip img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.02);transition:transform var(--mv-dur-zoom) var(--mv-ease)}
.mv-hm-strip figure:hover img{transform:scale(1.03)}
.mv-hm-f1{grid-column:span 4;height:clamp(320px,36vw,560px)}
.mv-hm-f2{grid-column:span 8;height:clamp(220px,25vw,392px);align-self:end}
.mv-hm-f3{grid-column:span 7;height:clamp(210px,23vw,352px)}
.mv-hm-f4{grid-column:span 5;height:clamp(300px,31vw,470px)}

/* =============================================================================
   8. 07 INSIGHTS  —  tamna sekcija, namerno prazno stanje (nema objavljenih tekstova)
   ========================================================================== */
.mv-hm-ins{background:var(--mv-surface);color:var(--mv-on-dark);padding:clamp(80px,10vw,130px) 0}
.mv-hm-ins__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);
  align-items:end;margin-top:var(--mv-sp-e5)}
.mv-hm-ins__top>*{min-width:0}
.mv-hm-empty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--mv-sp-5);
  align-items:center;margin-top:clamp(46px,6vw,74px);padding:clamp(30px,3.6vw,44px) 2px;
  border-top:1px solid var(--mv-line-dark);border-bottom:1px solid var(--mv-line-dark)}
.mv-hm-empty__t{display:block;font-family:var(--mv-font-display);font-weight:var(--mv-fw-semi);
  font-size:var(--mv-fs-title-sm);letter-spacing:var(--mv-ls-tight)}
.mv-hm-empty__p{display:block;margin-top:var(--mv-sp-2);font-size:var(--mv-fs-body-xs);
  line-height:var(--mv-lh-prose);color:var(--mv-on-dark-soft);max-width:56ch}

/* =============================================================================
   9. RESPONSIVE
   ========================================================================== */
@media(max-width:1000px){
  .mv-hm-top,.mv-hm-me__head,.mv-hm-ind__in,.mv-hm-ld__in,.mv-hm-ins__top,.mv-hm-fn__top{
    grid-template-columns:1fr;gap:var(--mv-sp-e3);align-items:start}
  .mv-hm-ld__in{gap:44px}
  .mv-hm-steps{grid-template-columns:repeat(3,1fr)}
  .mv-hm-step{padding-bottom:var(--mv-sp-5)}
  .mv-hm-peak{width:74%;right:-14%;opacity:.44}
  .mv-hm-side{display:none}
  .mv-hm-mono{width:min(34%,230px);top:1%}
  .mv-hm-ld .mv-portrait{max-width:460px}
}
@media(max-width:760px){
  .mv-hm-hero{padding-top:120px;min-height:92svh}
  .mv-hm-grid{background-size:calc(100% / 3) 100%}
  .mv-hm-heb__ln{display:none}
  .mv-hm-heb__t{font-size:10.5px;letter-spacing:.22em}
  .mv-hm-mono{width:165px;right:-26px;top:1.2%;opacity:.55}
  .mv-hm-rail__in{display:flex;gap:0;justify-content:space-between}
  .mv-hm-rail__c,.mv-hm-rail__c+.mv-hm-rail__c{border:0;padding:16px 0 0}
  .mv-hm-rail__c+.mv-hm-rail__c::before{display:none}
  .mv-hm-rail__p{display:none}
  .mv-hm-rail__t{font-size:14px;letter-spacing:.14em}
  .mv-hm-steps{grid-template-columns:1fr;gap:0;padding-left:22px}
  .mv-hm-mline{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .mv-hm-mfill{width:100%;height:0}
  .mv-hm-step{padding:0 0 32px;--mv-hm-dx:-29.5px;--mv-hm-dy:1px}
  .mv-hm-row{grid-template-columns:1fr;gap:var(--mv-sp-3);padding:26px 2px}
  .mv-hm-row .mv-go{position:absolute;right:2px;top:26px;justify-self:auto}
  .mv-hm-strip{grid-template-columns:1fr 1fr}
  .mv-hm-f1,.mv-hm-f4{grid-column:span 1;height:clamp(240px,62vw,320px)}
  .mv-hm-f2,.mv-hm-f3{grid-column:span 1;height:clamp(180px,46vw,240px)}
  .mv-hm-empty{grid-template-columns:1fr;gap:var(--mv-sp-4)}
  .mv-hm-empty .mv-badge{justify-self:start}
}

@media(prefers-reduced-motion:reduce){
  .mv-hm-ln>span{transform:none}
  .mv-hm-fade{opacity:1}
  .mv-hm-peak img{animation:none}
  .mv-hm-beam,.mv-hm-marq__track,.mv-hm-side__i::after{animation:none}
  .mv-hm-glow{display:none}
}