/* ============================================================
   JUJU inner pages — professional navigation with 2D effects
   ============================================================ */
:root { --n-ease: cubic-bezier(.22, 1, .36, 1); --n-pink: #ec1c8c; --n-green: #4cb93a; --n-blue: #12a6e8; --n-yellow: #f6b40e; --n-ink: #241f35; }

/* top bar — slimmer and calmer */
.topbar { background: var(--n-ink); color: #ece8f4; font-size: .8rem; padding: .38rem 0; }
.topbar a, .topbar span { color: #ece8f4; }
.topbar a:hover { color: #ffd84d; }

/* header */
.site-header { border-bottom: 1px solid rgba(36,31,53,.08); background: #fff; box-shadow: none; transition: box-shadow .35s, background .35s; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--n-pink) 0 25%, var(--n-yellow) 25% 50%, var(--n-green) 50% 75%, var(--n-blue) 75%); transform-origin: left; transform: scaleX(var(--sp, 1)); transition: transform .15s linear; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(36,31,53,.45); }
.navbar { transition: padding .35s var(--n-ease); }
.site-header.is-scrolled .navbar { padding: .4rem 0; }
.brand-logo { transition: width .35s var(--n-ease), height .35s var(--n-ease), transform .5s var(--n-ease); }
.site-header.is-scrolled .brand-logo { width: 92px; height: 62px; }
.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.04); }

/* entrance */
.nav-links > li { transition: opacity .5s var(--n-ease), transform .5s var(--n-ease); transition-delay: calc(var(--i, 0) * 50ms + 120ms); }
body:not(.nav2d-ready) .nav-links > li { opacity: 0; transform: translateY(-8px); }

/* CTA — 2D pressable button */
.nav-links > li > .btn.nav-cta { position: relative; padding: .7rem 1.25rem; border-radius: 14px; font-size: .95rem; background: var(--n-pink); color: #fff; border: 2px solid var(--n-ink); box-shadow: 4px 4px 0 var(--n-ink); transform: translate(0, 0); transition: transform .18s ease, box-shadow .18s ease, background .2s; }
.nav-links > li > .btn.nav-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--n-ink); background: #f0369b; }
.nav-links > li > .btn.nav-cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--n-ink); }

/* ---------------- DESKTOP ---------------- */
@media (min-width: 1081px) {
  .nav-links { position: relative; gap: .2rem; }
  .nav-links > li:nth-child(4n+1) { --c: var(--n-pink); } .nav-links > li:nth-child(4n+2) { --c: var(--n-green); }
  .nav-links > li:nth-child(4n+3) { --c: var(--n-blue); } .nav-links > li:nth-child(4n+4) { --c: var(--n-yellow); }
  .nav-item-heading { position: relative; isolation: isolate; gap: 0; padding: .1rem .15rem .1rem .2rem; border-radius: 12px; transition: background .25s; }
  .nav-item-heading > a { padding: .55rem .2rem .55rem .65rem; font-size: .97rem; font-weight: 700; letter-spacing: .005em; transition: color .2s; }
  /* flat 2D tab: coloured block slides in behind the label */
  .nav-item-heading::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, #fff); border: 2px solid transparent; transform: scale(.85); opacity: 0; transition: transform .35s var(--n-ease), opacity .25s, border-color .25s, box-shadow .25s; z-index: -1; }
  .nav-links > li:hover > .nav-item-heading::before, .nav-links > li:focus-within > .nav-item-heading::before { transform: none; opacity: 1; }
  .nav-item-heading > a::after { left: 50%; bottom: 2px; width: 0; height: 3px; background: var(--c); transform: translateX(-50%); transition: width .3s var(--n-ease); }
  .nav-item-heading > a:hover::after { width: 0; }
  .nav-links > li:hover > .nav-item-heading > a, .nav-item-heading > a.active { color: var(--n-ink); }
  /* active page: solid 2D tab with offset shadow */
  .nav-item-heading:has(> a.active)::before { transform: none; opacity: 1; background: #fff; border-color: var(--n-ink); box-shadow: 3px 3px 0 var(--c); }
  .nav-item-heading > a.active::after { width: 0; }
  .dropdown-toggle { font-size: 1rem; padding: .35rem .45rem .35rem .1rem; color: #8a8597; transition: transform .35s var(--n-ease), color .2s; }
  .nav-links > li:hover .dropdown-toggle, .nav-links > li:focus-within .dropdown-toggle { transform: rotate(180deg); color: var(--c); }

  /* dropdown card — flat 2D with offset shadow */
  .nav-item--dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
  .dropdown-menu { display: block; top: calc(100% + 14px); left: 0; width: 300px; min-width: 0; max-height: none; overflow: visible; padding: .6rem; border: 2px solid var(--n-ink); border-radius: 16px; background: #fff; box-shadow: 7px 7px 0 var(--c); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .35s var(--n-ease), visibility 0s linear .35s; }
  .dropdown-menu::before { top: -9px; left: 1.4rem; width: 14px; height: 14px; background: #fff; border-top: 2px solid var(--n-ink); border-left: 2px solid var(--n-ink); border-radius: 3px 0 0 0; }
  .nav-item--dropdown:hover > .dropdown-menu, .nav-item--dropdown:focus-within > .dropdown-menu, .nav-item--dropdown.dropdown-open > .dropdown-menu { display: block; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .dropdown-menu li { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .3s var(--n-ease); }
  .nav-item--dropdown:hover .dropdown-menu li, .nav-item--dropdown:focus-within .dropdown-menu li, .nav-item--dropdown.dropdown-open .dropdown-menu li { opacity: 1; transform: none; transition-delay: calc(var(--j, 0) * 30ms + 50ms); }
  .dropdown-menu a { position: relative; display: flex; align-items: center; gap: .6rem; padding: .62rem .8rem; border-radius: 10px; font-size: .94rem; font-weight: 600; transition: background .2s, color .2s, transform .2s var(--n-ease); }
  .dropdown-menu a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; border: 2px solid var(--c); transform: rotate(45deg); transition: background .2s, transform .3s var(--n-ease); }
  .dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--n-ink); transform: translateX(4px); }
  .dropdown-menu a:hover::before { background: var(--c); transform: rotate(225deg); }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav-item-heading > a { font-size: .9rem; padding-left: .5rem; }
  .nav-links > li > .btn.nav-cta { padding: .6rem .9rem; font-size: .88rem; }
}

/* ---------------- MOBILE / TABLET ---------------- */
@media (max-width: 1080px) {
  .nav-toggle { position: relative; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 2px solid var(--n-ink); box-shadow: 3px 3px 0 var(--n-pink); font-size: 0; color: transparent; transition: transform .2s, box-shadow .2s, background .25s; z-index: 101; }
  .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2.5px; border-radius: 2px; background: var(--n-ink); transition: transform .4s var(--n-ease), top .4s var(--n-ease), box-shadow .2s; }
  .nav-toggle::before { top: 13px; box-shadow: 0 7px 0 var(--n-ink); }
  .nav-toggle::after { top: 27px; }
  .nav-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--n-pink); }
  body.nav2d-open .nav-toggle, .nav-toggle[aria-expanded="true"] { background: var(--n-yellow); }
  body.nav2d-open .nav-toggle::before, .nav-toggle[aria-expanded="true"]::before { top: 20px; box-shadow: none; transform: rotate(45deg); }
  body.nav2d-open .nav-toggle::after, .nav-toggle[aria-expanded="true"]::after { top: 20px; transform: rotate(-45deg); }
  .nav-links { background: #fff; border-left: 3px solid var(--n-ink); box-shadow: none; visibility: hidden; padding-top: 7rem; gap: .35rem; transition: transform .45s var(--n-ease), visibility 0s linear .45s; }
  .nav-links.open { visibility: visible; transition: transform .45s var(--n-ease), visibility 0s; box-shadow: -8px 0 0 rgba(236,28,140,.18), -20px 0 50px rgba(36,31,53,.18); }
  .nav-links > li { opacity: 0; transform: translateX(30px); transition: opacity .35s ease, transform .45s var(--n-ease); transition-delay: 0s; }
  .nav-links.open > li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
  .nav-links > li:nth-child(4n+1) { --c: var(--n-pink); } .nav-links > li:nth-child(4n+2) { --c: var(--n-green); }
  .nav-links > li:nth-child(4n+3) { --c: var(--n-blue); } .nav-links > li:nth-child(4n+4) { --c: var(--n-yellow); }
  .nav-item-heading { padding: .35rem .5rem .35rem .8rem; border-radius: 12px; border-left: 4px solid var(--c); background: #faf8fc; }
  .nav-item-heading > a { font-size: 1.05rem; font-weight: 700; }
  .nav-item-heading > a::after { display: none; }
  .nav-item--dropdown.dropdown-open > .nav-item-heading { background: color-mix(in srgb, var(--c) 14%, #fff); }
  .dropdown-menu a { position: relative; padding-left: 1.1rem; }
  .dropdown-menu a::before { content: ""; position: absolute; left: .3rem; top: 50%; width: 6px; height: 6px; border-radius: 2px; background: var(--c); transform: translateY(-50%) rotate(45deg); }
  .nav-links > li > .btn.nav-cta { display: block; width: 100%; text-align: center; margin: .6rem 0 0; }
  body.nav2d-open::before { content: ""; position: fixed; inset: 0; background: rgba(36,31,53,.35); backdrop-filter: blur(2px); z-index: 98; animation: n2dFade .3s ease; }
}
@keyframes n2dFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-header *::before, .site-header *::after { transition: none !important; animation: none !important; }
  body:not(.nav2d-ready) .nav-links > li { opacity: 1; transform: none; }
}
.dropdown-toggle { min-width: 24px; min-height: 28px; }