/* ============================================================
   MILLE BACI · DIZAJN 3 · shared base (all pages)
   Paleta: sladoled papir / pistacija / malina pop / mango / kakao / teal
   Tip: Unbounded (display) + Onest (body) + Caveat (hand notes)
   ============================================================ */

:root{
  --paper:#FFFDFB;
  --ink:#1E2A66;
  --teal:#26A19C;
  --pink:#E4487C;
  --mango:#F6A22B;
  --pist:#5F7F3E;
  --pistlt:#DCE8C2;
  --cacao:#5C1130;
  --cacao2:#33081B;
  --amber:#F67E36;
  --plum:#961E42;
  --navy:#1E2A66;
  --cream:#FFDCE9;
  --disp:"Unbounded",sans-serif;
  --body:"Onest",system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --w:min(1180px,92vw);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.25,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.06rem;line-height:1.62;
  overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
::selection{background:var(--pink);color:#fff}

.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--pink);color:var(--paper);padding:.6rem 1rem}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{
  font-family:var(--disp);font-weight:600;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;
}
.sec{width:var(--w);margin:0 auto;padding:clamp(4.5rem,11vh,8rem) 0}
.sec-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.05;margin-bottom:1rem;letter-spacing:-.01em;
}
.sec-lead{max-width:56ch;font-size:1.12rem}

/* chips */
.chip{
  display:inline-block;font-family:var(--disp);font-weight:600;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.45em 1em;border-radius:999px;margin:.15rem .2rem .15rem 0;
}
.chip-teal{background:var(--teal);color:#fff;transform:rotate(-2deg)}
.chip-pink{background:var(--pink);color:#fff;transform:rotate(1.6deg)}
.chip-mango{background:var(--mango);color:var(--ink);transform:rotate(-1.2deg)}
.chip-line{border:2px solid var(--pink);transform:rotate(-1deg)}
.chip-mini{
  border:1.5px solid currentColor;font-size:.6rem;padding:.3em .7em;margin-left:.3rem;
  transform:none;border-radius:999px;vertical-align:middle;
}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pink);color:var(--paper);padding:.9rem 1.6rem;border-radius:999px;
  transition:transform .3s var(--spring),background .2s,color .2s;
  box-shadow:0 4px 0 rgba(228,72,124,.25);border:0;cursor:pointer;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background:var(--pink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--pink);box-shadow:none}
.btn.ghost:hover{background:var(--pink);color:var(--paper)}
.btn.big{font-size:.95rem;padding:1.1rem 2.2rem}

/* hand note (Caveat) */
.hand{
  font-family:var(--hand);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.15;letter-spacing:0;text-transform:none;
}

/* ---------- highlighter marker ----------
   .wv wavy ems are excluded via :where() so the exclusion adds NO specificity:
   page-level colour overrides (.melt-h .hl etc.) must keep winning */
.sec-h em:where(:not(.wv)),.hl:where(:not(.wv)){
  font-style:normal;color:var(--ink);
  background-image:linear-gradient(transparent 58%,var(--mango) 58%);
  background-repeat:no-repeat;background-position:0 .84em;background-size:0% .42em;
  transition:background-size .8s var(--ease) .2s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em;
}
.rv-in em:where(:not(.wv)),.rv-in .hl:where(:not(.wv)),.sec-h.rv-in em:where(:not(.wv)){background-size:100% .42em}
@media (prefers-reduced-motion:reduce){.sec-h em:where(:not(.wv)),.hl:where(:not(.wv)){background-size:100% .42em;transition:none}}

/* ---------- WAVY underline: draws in on scroll reveal, then swims ----------
   colour via --wvc; works on light or dark; keep on phrases that fit one line */
.wv{position:relative;font-style:normal;white-space:nowrap}
.wv::after{
  content:"";position:absolute;left:-.05em;right:-.05em;bottom:-.16em;height:.22em;pointer-events:none;
  background:var(--wvc,var(--pink));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;-webkit-mask-position:0 50%;-webkit-mask-size:auto 100%;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-repeat:repeat-x;mask-position:0 50%;mask-size:auto 100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s var(--ease) .25s;
}
.rv-in .wv::after,.wv.rv-in::after{
  clip-path:inset(0 0 0 0);
  animation:wvswim 2.8s linear 1.1s infinite;
}
@keyframes wvswim{
  from{-webkit-mask-position:0 50%;mask-position:0 50%}
  to{-webkit-mask-position:16px 50%;mask-position:16px 50%}
}
@media (prefers-reduced-motion:reduce){
  .wv::after{clip-path:inset(0 0 0 0);transition:none;animation:none !important}
}

/* ---------- header: floating sticker toolbar ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px)}
.hdr-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.hdr-brand img{width:44px;height:44px;border-radius:12px;transition:transform .35s var(--spring)}
.hdr-brand:hover img{transform:rotate(-8deg) scale(1.1)}
/* nav rides in its own bordered pill, display font, current page = filled pill */
.hdr-nav{
  display:flex;gap:.15rem;align-items:center;
  border:3px solid var(--pink);border-radius:999px;
  background:color-mix(in srgb,#fff 72%,transparent);backdrop-filter:blur(8px);
  padding:.3rem .4rem;box-shadow:4px 5px 0 rgba(228,72,124,.16);
}
.hdr-nav a{
  text-decoration:none;font-family:var(--disp);font-weight:600;font-size:.68rem;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.5rem .8rem;border-radius:999px;
  transition:transform .25s var(--spring),color .2s,background .25s;
  display:inline-block;position:relative;
}
.hdr-nav a:hover{color:var(--pink);transform:translateY(-1px) rotate(-1deg)}
/* wavy pink underline wipes in on hover (inside the pill) */
.hdr-nav a:not(.hdr-cta)::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.32rem;height:5px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%23E4487C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
  background-size:14px 5px;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .4s var(--ease);
}
.hdr-nav a:not(.hdr-cta):hover::after{clip-path:inset(0 0 0 0)}
.hdr-nav a[aria-current="page"]{
  background:var(--pink);color:#fff;transform:rotate(-1.6deg);
  box-shadow:2px 3px 0 rgba(228,72,124,.25);
}
.hdr-nav a[aria-current="page"]::after{display:none}
@keyframes hdrswim{from{background-position:0 50%}to{background-position:16px 50%}}
@media (prefers-reduced-motion:reduce){
  .hdr-nav a:not(.hdr-cta)::after{transition:none;animation:none !important}
}
.hdr-cta{
  background:var(--pink);color:var(--paper) !important;
  margin-left:.25rem;
}
.hdr-cta:hover{color:#fff !important;background:var(--pink);transform:translateY(-1px) rotate(1deg) !important}
.hdr-right{
  display:flex;align-items:center;gap:.55rem;
  border:3px solid var(--pink);border-radius:999px;
  background:color-mix(in srgb,#fff 72%,transparent);backdrop-filter:blur(8px);
  padding:.22rem .3rem .22rem .75rem;box-shadow:4px 5px 0 rgba(228,72,124,.16);
}
.lang{display:flex;align-items:center;font-size:.76rem;font-weight:700;color:var(--ink)}
.lang button{padding:.25rem .3rem;opacity:.42;transition:opacity .2s,color .2s;position:relative}
.lang button+button::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:currentColor;opacity:.3;
}
.lang button[aria-pressed="true"]{opacity:1;color:var(--pink)}
.lang button:hover{opacity:1}
@media (max-width:460px){.lang{font-size:.68rem}.lang button{padding:.25rem .2rem}}
/* burger: round button, visible on ALL widths, opens the big menu */
.burger{
  display:block;width:40px;height:40px;position:relative;border-radius:50%;
  background:var(--pink);transition:transform .3s var(--spring),background .25s;
}
.burger:hover{transform:rotate(-6deg) scale(1.06);background:var(--pink)}
.burger span{position:absolute;left:11px;right:11px;height:3px;border-radius:3px;background:var(--paper);transition:transform .3s var(--spring),top .3s var(--spring)}
.burger span:first-child{top:15px}
.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* ---------- full-screen menu ---------- */
.mbmenu[hidden]{display:none}
.mbmenu{
  position:fixed;inset:0;z-index:55;background:var(--pink);color:var(--paper);
  display:flex;flex-direction:column;overflow:hidden auto;
  padding:5.2rem clamp(1.4rem,6vw,4rem) 1.6rem;
}
.mbmenu::before{
  content:"";position:fixed;inset:auto -18% -34% -18%;height:62%;pointer-events:none;
  background:radial-gradient(50% 90% at 22% 100%,rgba(228,72,124,.32),transparent 70%),
             radial-gradient(46% 86% at 62% 100%,rgba(246,162,43,.25),transparent 70%),
             radial-gradient(44% 80% at 92% 100%,rgba(38,161,156,.3),transparent 70%);
  filter:blur(10px);
}
.mbmenu-grid{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:clamp(1.5rem,4vw,4rem);align-items:center;flex:1}
.mbmenu-list{display:flex;flex-direction:column}
.mbmenu-list a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  padding:.34rem 0;border-bottom:1.5px solid rgba(255,253,251,.14);
  opacity:0;transform:translateY(22px);
}
.mbmenu.open .mbmenu-list a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .55s var(--spring) var(--d,0s),color .2s;
}
.mbmenu-list .mn{
  font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.14em;
  color:var(--paper);opacity:.5;min-width:2.2em;
}
.mbmenu-list .mw{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.45rem,4.6vh,2.6rem);line-height:1.16;transition:transform .3s var(--spring),color .2s;
}
.mbmenu-list .ms{
  margin-left:auto;font-family:var(--disp);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.55;
}
.mbmenu-list a:hover .mw,.mbmenu-list a:focus-visible .mw{color:var(--mc,var(--pink));transform:translateX(10px) rotate(-.5deg)}
.mbmenu-list a[aria-current="page"] .mw{color:var(--mc,var(--pink))}
.mbmenu-list a[aria-current="page"] .mn{opacity:1;color:var(--mc,var(--pink))}
.mbmenu-fig{
  position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  border:3px solid var(--paper);transform:rotate(2.2deg);
  box-shadow:10px 12px 0 rgba(228,72,124,.35);
  opacity:0;transition:opacity .45s var(--ease);
}
.mbmenu.open .mbmenu-fig{opacity:1}
.mbmenu-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease)}
.mbmenu-fig img.on{opacity:1}
/* close button lives INSIDE the overlay (the header sits below it) */
.mbmenu-x{
  position:absolute;top:.9rem;right:clamp(1rem,4vw,2.2rem);z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:3px solid var(--paper);cursor:pointer;
  transition:transform .3s var(--spring),background .25s;
  box-shadow:3px 4px 0 rgba(0,0,0,.3);
}
.mbmenu-x::before,.mbmenu-x::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:3px;border-radius:3px;
  background:var(--pink);
}
.mbmenu-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.mbmenu-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mbmenu-x:hover{transform:rotate(-90deg) scale(1.08);background:var(--pink)}
.mbmenu-x:hover::before,.mbmenu-x:hover::after{background:#fff}
.mbmenu-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.4rem;position:relative;
}
.mbmenu-foot a{color:var(--paper);font-weight:700;text-decoration:none}
.mbmenu-foot a:hover{color:var(--pink)}
.mbmenu-foot p{font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
@media (max-width:900px){
  .mbmenu-grid{grid-template-columns:1fr}
  .mbmenu-fig{display:none}
  .mbmenu-list .mw{font-size:clamp(1.3rem,4.1vh,2rem)}
}

/* ---------- next page band ---------- */
.nextp{width:var(--w);margin:0 auto;padding:clamp(2.4rem,6vh,4rem) 0 clamp(3rem,7vh,4.5rem)}
.nextp a{
  display:block;text-decoration:none;border:4px solid var(--pink);border-radius:26px;
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.6rem);position:relative;overflow:hidden;
  background:var(--npbg,var(--mango));color:var(--npink,var(--ink));
  box-shadow:8px 10px 0 rgba(228,72,124,.18);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.nextp a:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:12px 16px 0 rgba(228,72,124,.24)}
.nextp .np-k{font-family:var(--disp);font-weight:600;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:.5rem;display:block}
.nextp .np-w{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.9rem,6vw,4rem);line-height:1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.nextp .np-w span{display:inline-block;transition:transform .35s var(--spring)}
.nextp a:hover .np-w span{transform:translateX(12px)}

/* ---------- footer ---------- */
.ftr{background:var(--teal);color:#fff;margin-top:3rem;overflow:hidden;position:relative;z-index:6}
.ftr-hero{
  width:var(--w);margin:0 auto;padding:clamp(3rem,7vh,5rem) 0 2.4rem;text-align:center;
  border-bottom:2px solid rgba(255,255,255,.25);
}
.ftr-eyebrow{font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#D9F4EF;margin-bottom:1rem}
.ftr-say{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,7vw,5rem);line-height:1;letter-spacing:-.01em}
.ftr-say em{font-style:normal;color:var(--mango)}
.ftr-top-link{
  display:inline-block;margin-top:1.5rem;text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:#fff;
  border-radius:999px;padding:.8rem 1.7rem;box-shadow:0 4px 0 rgba(228,72,124,.3);
  transition:transform .3s var(--spring),background .2s,color .2s;
}
.ftr-top-link:hover{transform:translateY(-3px) rotate(-1deg);background:var(--mango)}
.ftr-top-link span{display:inline-block;transition:transform .3s var(--spring)}
.ftr-top-link:hover span{transform:translateX(5px)}
.ftr-big{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem);white-space:nowrap;opacity:.22;
  padding:2rem 0 0;user-select:none;
}
.ftr-top{
  width:var(--w);margin:0 auto;padding:2.4rem 0 3rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,4vw,3rem);
}
.ftr-brand img{border-radius:14px;border:3px solid rgba(255,255,255,.9)}
.ftr-brand p{margin-top:1rem;font-size:.95rem;max-width:30ch}
.ftr-social{display:flex;gap:.7rem;margin-top:1.3rem}
.ftr-social a{
  width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s var(--spring),color .3s,transform .3s var(--spring);
}
.ftr-social a:hover{background:#fff;color:var(--teal);transform:translateY(-3px) rotate(-6deg)}
.ftr-col h3{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;margin-bottom:1rem;color:#D9F4EF;
}
.ftr-col a{display:block;text-decoration:none;padding:.28rem 0;font-weight:500}
.ftr-col a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ftr-col p{font-size:.95rem;padding:.28rem 0;color:#D9F4EF}
.ftr-cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.ftr-cols2 a{white-space:nowrap}
.ftr-bar{border-top:2px solid rgba(255,255,255,.25)}
.ftr-bar p{width:var(--w);margin:0 auto;padding:.35rem 0;font-size:.85rem;color:#D9F4EF}
.ftr-bar p:first-child{padding-top:1.1rem}
.ftr-bar p:last-child{padding-bottom:1.3rem}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--spring)}
.js .rv.rv-in{opacity:1;transform:none}
.js .rv-pop{opacity:0;transform:scale(.6) rotate(-4deg);transition:opacity .45s var(--ease),transform .6s var(--spring)}
.js .rv-pop.rv-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .hdr-nav{display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .ftr-top{grid-template-columns:1fr;gap:1.8rem}
  .nextp .np-w{font-size:clamp(1.6rem,8vw,2.6rem)}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.15s !important}
  .js .rv,.js .rv-pop{transform:none}
  .mbmenu-list a{opacity:1;transform:none}
}