/* ============================================================
   MILLE BACI · DIZAJN 3 · „Skini poklopac" — naslovna
   (zajednička osnova: d3.css; ovdje samo sekcije naslovne)
   ============================================================ */

/* worldbg paints the page colour, so the body itself stays transparent */
body{background:transparent}
.worldbg{position:fixed;inset:0;z-index:-1;background:var(--paper)}

/* ---------- signature scroll line (shared mbline.js) — center weave, BEHIND content ---------- */
#glavno{position:relative;z-index:0}
/* z-index:-1 keeps the line behind every card/text (above the fixed .worldbg) so it never covers content */
#lineart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
#linepath{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#linetip{
  fill:var(--pink);
  filter:drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 16px rgba(228,72,124,.9));
  opacity:0;transition:opacity .3s ease;
}
@media (prefers-reduced-motion:reduce){#linetip{display:none}}

/* ---------- hero ---------- */
/* ---------- intro reveal: the opening "explosion", then calm ---------- */
.mbintro{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
html:not(.js) .mbintro{display:none}
.mbintro.done{display:none}
.mbintro-bands{position:absolute;inset:0;display:flex}
.mbintro-bands i{flex:1;background:var(--paper);will-change:transform}
.mbintro-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
}
.mbintro-mark{width:clamp(84px,11vw,128px);height:auto;position:relative;z-index:2;will-change:transform}
/* the shockwave: one ring, expands once, gone */
.mbintro-ring{
  position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;border:3px solid var(--teal);opacity:0;will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){.mbintro{display:none}}

/* ---------- hero: brand first, colour bloom, no product ---------- */
.hero{
  width:var(--w);margin:0 auto;padding:8.4rem 0 3.2rem;position:relative;
  min-height:min(92svh,880px);display:flex;flex-direction:column;justify-content:center;
}
/* the "explosion": ten flavour colours bloom out from the centre, then hold. */
.hero-bloom{
  position:absolute;left:50%;top:40%;width:min(1180px,108%);aspect-ratio:1/.48;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  filter:blur(42px);opacity:.52;contain:paint;
}
.bl{
  position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));
  width:31%;aspect-ratio:1;border-radius:50%;background:var(--c);
  transform:translate(-50%,-50%) scale(var(--s));
  will-change:transform;
}
.hero-k{margin-bottom:1.3rem;position:relative;z-index:2}
.hero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,12vw,9.2rem);line-height:.9;letter-spacing:-.025em;
  position:relative;z-index:2;
}
.hw{display:block}
/* gelato run, warm at rest: teal into raspberry into mango; sweep passes flame and plum */
.hw2{
  display:block;
  background-image:linear-gradient(100deg,#26A19C,#E4487C,#F6A22B,#F0641E,#961E42,#26A19C);
  background-size:260% 100%;background-position:0% 50%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hw2{color:var(--pink);-webkit-text-fill-color:var(--pink);background-image:none}
}
.hero-row{
  display:flex;gap:2rem;align-items:flex-end;justify-content:space-between;
  margin-top:2rem;flex-wrap:wrap;position:relative;z-index:2;
}
.hero-sub{max-width:54ch;font-size:1.12rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
/* the four programmes, stated on arrival: this is not a cup shop */
.hero-fam{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.8rem;
  position:relative;z-index:2;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(.7rem,1.5vw,.85rem);letter-spacing:.2em;text-transform:uppercase;
}
.hero-fam li{display:flex;align-items:center;gap:1.5rem}
.hero-fam li+li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.38;flex:none;
}
@media (max-width:600px){
  .hero{min-height:auto;padding-top:7rem}
  .hero-bloom{filter:blur(32px);opacity:.4}
  /* "POLJUBACA." is the longest line: 12vw overflows 92vw at 375px */
  .hero-h{font-size:clamp(1.9rem,10.1vw,3.4rem);letter-spacing:-.03em}
  .hero-fam{gap:.45rem 1rem;letter-spacing:.14em}
  .hero-fam li{gap:1rem}
}

/* ---------- range: everything they actually make — full-colour bands ----------
   Each family is a solid band in its own brand colour: the whole range reads as
   one stack of colour on arrival, photos always visible (discoverability rule). */
.range{position:relative;z-index:2}
.rg-list{list-style:none;margin:3rem 0 0;display:grid;gap:clamp(.75rem,1.6vw,1.05rem)}
.rg-row{
  position:relative;border-radius:22px;
  background:var(--c);color:var(--ct,#fff);
  box-shadow:0 10px 26px rgba(228,72,124,.14);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.rg-row:hover,.rg-row:focus-within{transform:translateY(-5px);box-shadow:0 16px 34px rgba(228,72,124,.2)}
/* right 260px is a reserved lane: the photo lives there and never overlaps copy */
.rg-a{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto);
  align-items:center;gap:1.1rem 1.6rem;min-height:132px;
  padding:1.45rem 260px 1.45rem 1.25rem;text-decoration:none;color:inherit;position:relative;z-index:2;
}
.rg-n{
  font-family:var(--disp);font-weight:800;font-size:.78rem;
  background:#fff;color:var(--c);border:3px solid var(--pink);border-radius:999px;
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
}
.rg-name{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3rem);line-height:1;letter-spacing:-.015em;
  transition:transform .45s var(--ease);
}
.rg-row:hover .rg-name{transform:translateX(6px)}
.rg-d{font-size:.95rem;line-height:1.5;opacity:.92;max-width:38ch;justify-self:end;text-align:right}
.rg-go{
  width:42px;height:42px;border-radius:50%;border:2px solid currentColor;
  opacity:.55;position:absolute;right:1.2rem;top:50%;
  transform:translateY(-50%);
  transition:opacity .35s var(--ease),transform .45s var(--spring);
}
.rg-go::before{content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;background:currentColor;transform:translateY(-50%)}
.rg-go::after{
  content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.rg-row:hover .rg-go,.rg-row:focus-within .rg-go{opacity:1;transform:translateY(-50%) translateX(5px)}
/* photo pokes slightly past the band edges: alive, not clipped */
.rg-fig{
  position:absolute;right:4.6rem;top:50%;width:148px;aspect-ratio:4/5;z-index:3;
  border-radius:14px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  pointer-events:none;
  transform:translateY(-50%) rotate(3deg);
  transition:transform .5s var(--spring);
}
.rg-row:nth-child(even) .rg-fig{transform:translateY(-50%) rotate(-3deg)}
.rg-row:hover .rg-fig,.rg-row:nth-child(even):hover .rg-fig{transform:translateY(-50%) rotate(0deg) scale(1.05)}
.rg-fig img{width:100%;height:100%;object-fit:cover}
.rg-foot{margin-top:2.2rem;font-size:1.02rem}
.rg-foot a{font-weight:600;box-shadow:inset 0 -2px 0 var(--pink)}
.rg-foot a:hover{background:var(--pink);color:#fff;box-shadow:none}
@media (max-width:1040px){
  .rg-a{grid-template-columns:auto minmax(0,1fr);padding-right:200px;min-height:120px}
  .rg-d{grid-column:2/3;grid-row:2;justify-self:start;text-align:left;max-width:46ch}
  .rg-fig{right:4rem;width:118px}
}
@media (max-width:900px){
  .rg-a{grid-template-columns:auto minmax(0,1fr);padding:1.15rem 96px 1.2rem 1rem;min-height:0}
  .rg-go{display:none}
  .rg-fig{
    right:.9rem;width:66px;border-width:2px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.25);
    transform:translateY(-50%) rotate(2deg);
  }
  .rg-row:hover .rg-fig{transform:translateY(-50%) rotate(2deg)}
  .rg-d{max-width:34ch;font-size:.9rem}
  .rg-row{box-shadow:0 7px 18px rgba(228,72,124,.13)}
}

/* ---------- marquee (dual, counter-scrolling) ---------- */
.marq{margin:2.6rem 0;display:grid;gap:.5rem;transform:rotate(-1.4deg) scale(1.03)}
.marq-row{overflow:hidden;padding:.7rem 0}
/* two counter-scrolling bands must stay two colours: the first row was navy, and
   after the navy→pink swap both rows were pink, so the reversed row takes teal */
.marq-row:first-child{background:var(--pink);color:var(--paper)}
.marq-row.rev{background:var(--teal);color:#fff}
.marq-in{display:flex;white-space:nowrap;width:max-content}
.marq-in span{
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;padding-right:1rem;animation:marq 26s linear infinite;
}
.marq-row.rev .marq-in span{animation-duration:22s;animation-direction:reverse}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marq-in span{animation:none}}

/* ---------- worlds ---------- */
.worlds{position:relative}
.world{min-height:92svh;display:flex;align-items:center;padding:4rem 0}
.world-in{width:var(--w);margin:0 auto}
.world-n{
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.3em;
  margin-bottom:.6rem;opacity:.65;
}
.world-word{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,8.5vw,6.4rem);line-height:1;letter-spacing:-.01em;
  margin-bottom:2rem;
}
.world-row{display:grid;grid-template-columns:38fr 46fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.world-row.rev{grid-template-columns:46fr 38fr}
.world-row.rev .world-fig{order:2}
.world-fig{transform:rotate(2deg)}
.world-row.rev .world-fig{transform:rotate(-2deg)}
.world-fig img{
  border-radius:20px;border:4px solid currentColor;width:100%;
  aspect-ratio:4/5;object-fit:cover;
  box-shadow:8px 10px 0 rgba(0,0,0,.14);
}
.world-copy p{font-size:clamp(1.1rem,1.9vw,1.35rem);max-width:40ch}
.world-meta{
  margin-top:1.2rem;font-family:var(--disp);font-weight:600;font-size:.78rem !important;
  letter-spacing:.16em;text-transform:uppercase;opacity:.8;
}

/* ---------- cups (pinned horizontal rail) ---------- */
.cups{position:relative;padding-bottom:clamp(3rem,7vh,5rem)}
.cups-head{padding-bottom:1.6rem !important}
.cups-drag{
  margin-top:1rem;font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink);display:inline-flex;align-items:center;gap:.5rem;
}
.cups-drag span{display:inline-block;animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.cups-drag span{animation:none}}
.cup-pin{overflow:hidden}
.cup-rail{
  list-style:none;display:flex;gap:clamp(1rem,2vw,1.6rem);
  padding:.6rem clamp(1rem,4vw,2.4rem) 1.4rem;width:max-content;
}
.cup-card{
  width:clamp(244px,26vw,320px);height:clamp(410px,50vw,468px);flex:none;
  background:#fff;border:3px solid var(--pink);border-radius:20px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  transition:box-shadow .35s var(--spring);box-shadow:6px 7px 0 rgba(228,72,124,.16);
}
.cup-card:hover{box-shadow:12px 16px 0 var(--cc)}
@media (max-width:899px){
  .cup-card{transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
  .cup-card:active{transform:translateY(-4px)}
}
.cup-idx{
  position:absolute;top:.75rem;left:.75rem;z-index:3;font-family:var(--disp);font-weight:800;
  font-size:.72rem;background:var(--pink);color:var(--paper);border-radius:999px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.cup-card figure{flex:1;min-height:0;overflow:hidden;margin:0}
.cup-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.cup-card:hover img{transform:scale(1.07)}
.cup-card h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;padding:.75rem .9rem .1rem;flex:none}
.cup-card>p{font-size:.84rem;padding:0 .9rem .9rem;opacity:.85;flex:none}
/* flavour-name cards: big bold name poster, description pinned bottom
   (.type-card .tc-word beats .cup-card>p specificity so the name fills the card) */
.type-card{background:var(--cc);color:var(--ct)}
.cup-card .tc-word{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,2.7vw,2.5rem);line-height:.92;letter-spacing:-.03em;
  padding:2.7rem .8rem .4rem;opacity:1;hyphens:none;word-break:keep-all;
}
.type-card>p:not(.tc-word){opacity:1;padding:0 .95rem 1.05rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-weight:500;flex:none}
.cup-card-photo figure{flex:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* mobile: native swipe */
@media (max-width:899px){
  .cup-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .cup-card{scroll-snap-align:center}
}

/* ---------- pops ---------- */
/* ---------- popsicle flavour slider (real named flavours, user-driven, no scroll hijack) ---------- */
/* full-bleed tint sits at z-index:-2 so the scroll line (-1) still threads over it */
.pops{position:relative}
.pops-bg{
  position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;
  z-index:-2;background:transparent;opacity:0;
  transition:background-color .55s var(--ease),opacity .7s var(--ease);
}
.pops-bg.lit{opacity:1}
.pw{position:relative;margin-top:2.8rem;display:flex;align-items:center;gap:.6rem}
.pw-track{
  list-style:none;display:flex;gap:clamp(.9rem,2vw,1.6rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.6rem .2rem 1.4rem;margin:0;flex:1;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pw-track::-webkit-scrollbar{display:none}
.pw-slide{
  background:var(--paper);
  flex:0 0 clamp(190px,21vw,244px);scroll-snap-align:center;
  border:3px solid var(--pink);border-radius:20px;background:var(--paper);
  padding:1.5rem 1.2rem 1.4rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  transition:transform .5s var(--spring),box-shadow .4s var(--ease),opacity .4s var(--ease);
  /* the scroll line lives at z-index:-1; cards must sit above it, not under it */
  position:relative;z-index:1;
}
/* fade the CONTENTS, never the card: a translucent card lets the scroll line
   bleed straight through the paper background */
.pw-slide > *{opacity:.66;transition:opacity .4s var(--ease)}
.pw-slide.is-on > *{opacity:1}
.pw-slide.is-on{opacity:1;transform:translateY(-8px);box-shadow:9px 11px 0 var(--c)}
.pw-pop{width:clamp(58px,7vw,74px);height:auto;flex:none}
.pw-body{fill:var(--c)}
.pw-stick{fill:#1E2A66}
.pw-gloss{fill:#fff;opacity:.28}
.pw-badge{
  font-family:var(--disp);font-weight:600;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);
}
.pw-name{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.15;letter-spacing:-.01em;
  word-break:keep-all;
  /* two-line box so a wrapping name ("Aperol Spritz") keeps notes on one baseline */
  min-height:2.3em;display:flex;align-items:center;justify-content:center;
}
.pw-note{font-size:.86rem;line-height:1.45;opacity:.72}
.pw-nav{
  position:relative;z-index:1;
  width:46px;height:46px;flex:none;border-radius:50%;border:3px solid var(--pink);
  background:var(--paper);position:relative;transition:background-color .3s,color .3s,transform .3s var(--spring);
}
.pw-nav::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-top:3px solid currentColor;border-right:3px solid currentColor;
}
.pw-prev::after{transform:translate(-35%,-50%) rotate(-135deg)}
.pw-next::after{transform:translate(-65%,-50%) rotate(45deg)}
.pw-nav:hover{background:var(--pink);color:var(--paper)}
.pw-nav[disabled]{opacity:.3;pointer-events:none}
.pw-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
.pw-dot{
  width:9px;height:9px;border-radius:50%;border:2px solid var(--pink);background:transparent;
  padding:0;transition:background-color .3s,transform .3s var(--spring);
}
.pw-dot.is-on{background:var(--pink);transform:scale(1.35)}
.pw-foot{margin-top:1.6rem;text-align:center;font-size:1rem}
.pw-foot a{font-weight:600;box-shadow:inset 0 -2px 0 var(--mango)}
.pw-foot a:hover{background:var(--mango);color:var(--ink);box-shadow:none}
@media (max-width:760px){
  .pw-nav{display:none}
  .pw-slide{flex:0 0 clamp(168px,58vw,210px)}
  .pw-track{padding-left:.1rem;padding-right:.1rem}
}
@media (prefers-reduced-motion:reduce){
  .pw-track{scroll-behavior:auto}
  .pw-slide{opacity:1;transition:none}
  .pops-bg{transition:none}
}

/* ---------- bez ---------- */
.bez-card{
  background:var(--teal);color:#fff;border-radius:26px;border:4px solid var(--pink);
  padding:clamp(2rem,5vw,4rem);box-shadow:10px 12px 0 rgba(228,72,124,.2);
}
.bez-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.06;letter-spacing:-.01em;
}
.bez-h span{display:block}
.bez-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.6rem}
.bez-badge{
  font-family:var(--disp);font-weight:800;font-size:1.05rem;
  background:#fff;color:var(--teal);border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;min-width:64px;height:64px;padding:0 1rem;
  margin-bottom:1rem;border:3px solid var(--pink);
}
.bez-cols p:not(.bez-badge){font-size:.98rem}
.bez-accent.hl{color:var(--paper);background-image:linear-gradient(transparent 56%,var(--mango) 56%)}

/* ---------- zima (scroll-driven drift, no scrollbar) ---------- */
.zima-head{padding-bottom:1.6rem}
.zima-viewport{overflow:hidden;padding:.4rem 0 1.6rem}
.zima-strip{
  display:flex;gap:clamp(.9rem,2vw,1.4rem);
  padding:0 clamp(1rem,4vw,2.4rem);width:max-content;will-change:transform;
}
.zima-strip figure{
  flex:none;width:clamp(240px,30vw,380px);
  border-radius:18px;overflow:hidden;border:3px solid var(--pink);
  transform:rotate(-.8deg);
}
.zima-strip figure:nth-child(even){transform:rotate(.8deg)}
.zima-strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.zima-strip figure:nth-child(5) img{aspect-ratio:auto;height:100%}
/* reduced motion: fall back to native horizontal scroll */
@media (prefers-reduced-motion:reduce){
  .zima-viewport{overflow-x:auto}
  .zima-strip{transform:none !important}
}

/* ---------- IDI DUBLJE (explore the site) ---------- */
.ex-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
  margin-top:2.6rem;
}
.ex-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:#fff;border:3px solid var(--pink);border-radius:20px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(228,72,124,.16);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.ex-card:nth-child(3n+1){transform:rotate(-.7deg)}
.ex-card:nth-child(3n+2){transform:rotate(.5deg)}
.ex-card:nth-child(3n){transform:rotate(-.3deg)}
.ex-card:hover{transform:translateY(-7px) rotate(0);box-shadow:10px 14px 0 var(--xc)}
.ex-card figure{aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--pink)}
.ex-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.ex-card:hover img{transform:scale(1.07) rotate(.6deg)}
.ex-n{
  position:absolute;top:.7rem;left:.7rem;font-family:var(--disp);font-weight:800;font-size:.7rem;
  background:var(--pink);color:var(--paper);border-radius:999px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.ex-card h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);padding:.85rem 3rem .1rem .95rem;
}
.ex-card p{font-size:.9rem;opacity:.8;padding:0 3rem .95rem .95rem}
.ex-go{
  position:absolute;right:.85rem;bottom:.8rem;width:38px;height:38px;border-radius:50%;
  border:3px solid var(--pink);background:var(--xc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
  transition:transform .35s var(--spring);
}
.ex-card:hover .ex-go{transform:rotate(-45deg) scale(1.12)}

/* ---------- instagram ---------- */
.ig-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.3rem);
  margin-top:2.4rem;
}
.ig-grid a{
  display:block;border-radius:16px;overflow:hidden;border:3px solid var(--pink);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
  box-shadow:4px 5px 0 rgba(228,72,124,.14);
}
.ig-grid a:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:7px 10px 0 rgba(38,161,156,.4)}
.ig-grid a:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
.ig-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.ig-cta{text-align:center;margin-top:2.2rem}

/* ---------- u brojkama (springy count-up) ---------- */
.d3stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);text-align:center}
.d3stat{padding:1.6rem 1rem;border:3px solid var(--pink);border-radius:22px;background:#fff;box-shadow:6px 7px 0 rgba(228,72,124,.14);transition:transform .35s var(--spring)}
.d3stat:hover{transform:translateY(-6px) rotate(-1.2deg)}
.d3stat:nth-child(2){background:var(--pink);color:#fff}
.d3stat:nth-child(3){background:var(--mango)}
.d3stat:nth-child(4){background:var(--teal);color:#fff}
.d3num{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:1;display:block}
.d3stat p{font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.6rem}

/* ---------- randomizer (interactive) ---------- */
.rand-in{
  color:var(--paper);border-radius:28px;border:4px solid var(--pink);
  padding:clamp(2.5rem,6vw,4.5rem);text-align:center;position:relative;overflow:hidden;
}
/* fill on a ::before at z-index:-2 so the signature line (z-index:-1) threads over this big
   dark block instead of vanishing behind it; text/sprinkles stay above the line */
.rand-in::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pink)}
.rand-in .kicker{justify-content:center;color:var(--mango)}
.rand-in .sec-h{color:#fff}
.rand-slot{
  margin:1.6rem auto .4rem;min-height:clamp(3.5rem,9vw,6rem);display:flex;align-items:center;justify-content:center;
}
#randword{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6.5vw,5rem);line-height:1;letter-spacing:-.01em;
  color:var(--pink);display:inline-block;will-change:transform;
}
#randword.pop{animation:randpop .5s var(--spring)}
@keyframes randpop{0%{transform:scale(.6) rotate(-5deg)}60%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.rand-actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:1.4rem}
.rand-hint{font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#D9F4EF;opacity:.7}
.rand-link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mango);border-bottom:2px solid currentColor;padding-bottom:.15rem;
  transition:color .2s,transform .3s var(--spring);
}
.rand-link:hover{color:#fff;transform:translateY(-2px)}
.rand-link span:last-child{transition:transform .3s var(--spring)}
.rand-link:hover span:last-child{transform:translateX(4px)}
.sprinkle{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:2px;pointer-events:none;will-change:transform,opacity}

/* ---------- ljestvica (ranking bars) ---------- */
.rank-list{list-style:none;margin-top:2.4rem;display:grid;gap:1rem}
.rank-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;gap:1rem;align-items:center}
.rank-name{font-family:var(--disp);font-weight:600;font-size:clamp(.95rem,1.6vw,1.15rem)}
.rank-track{height:20px;background:rgba(228,72,124,.1);border-radius:999px;overflow:hidden}
.rank-bar{display:block;height:100%;width:var(--v);background:var(--c);border-radius:999px;transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
.rank-row.rv-in .rank-bar{transform:scaleX(1)}
.rank-pct{font-family:var(--disp);font-weight:800;font-size:1.1rem;min-width:2.6ch;text-align:right}
.rank-pct::after{content:"%";font-size:.7em;opacity:.6}
.rank-note{margin-top:1.4rem;font-size:.9rem;opacity:.65;font-style:italic}

/* ---------- responsive (home sections) ---------- */
@media (max-width:1000px){
  .d3stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .world-row,.world-row.rev{grid-template-columns:1fr}
  .world-row.rev .world-fig{order:0}
  .world-fig{max-width:440px}
  .ex-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bez-cols{grid-template-columns:1fr;gap:1.6rem}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ex-grid{grid-template-columns:1fr}
  .rank-row{grid-template-columns:1fr auto;grid-template-areas:"name pct" "track track";row-gap:.4rem}
  .rank-name{grid-area:name}
  .rank-pct{grid-area:pct}
  .rank-track{grid-area:track}
  .hero-stkr{width:88px;height:88px;font-size:.7rem;top:-1.6rem}
  .hero-fig img{max-height:56vh}
}