/* Nav component CSS — Desktop V1 + Mobile C2.3 Two-State */
/* Redesigned Animation System: Container ≠ Content animations */
:root {
  --nav-gold: #d4b06a;
  --nav-gold-light: #e8c87a;
  --nav-gold-dark: #c0a05a;
  --nav-bg: #06060d;
  --nav-bg-card: #0e0e18;
  --nav-text: #ffffff;
  --nav-text-dim: rgba(255,255,255,0.5);

  /* ── OPEN/CLOSE ANIMATION LANGUAGE — "The Ascent" / "The Descent" ── */
  --nav-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot springs (handle/brand) */
  --nav-ease-out:    cubic-bezier(0.4, 0, 0.2, 1);      /* draw-in / settle */
  --nav-ease-drop:   cubic-bezier(0.55, 0, 0.85, 0.36); /* weighted fall (gravity) */
  --nav-t-open:      520ms;  /* full sheet ascent */
  --nav-t-close:     480ms;  /* weighted descent */
  --nav-t-ridge:     400ms;  /* gold ridge draw */
  --nav-t-catchup:   220ms;  /* content catch-up offset after sheet lands */
}

/* ─── NAV BARS ─── */
.nav{position:fixed;z-index:200;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
.nav--bottom{position:fixed;bottom:0;left:0;right:0;height:90px;background:rgba(5,5,16,0.92);border-top:1px solid rgba(212,176,106,0.2);padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav--top{top:0;left:0;right:0;height:80px;background:rgba(6,6,13,0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,176,106,0.15);padding:0 48px;display:none}
.nav__logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__logo-icon{font-size:22px}
.nav__logo-text{font-size:14px;font-weight:600}
.nav--bottom .nav__logo-text{color:#fff}
.nav--top .nav__logo-text{color:#fff}
.nav__logo-sub{font-size:9px;color:rgba(255,255,255,0.4)}

/* Hamburger */
.hamburger{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index: 220}
.nav--bottom .hamburger{background:rgba(5,5,16,0.9);border:1.5px solid rgba(212,176,106,0.4)}
.nav--top .hamburger{background:transparent;border:1.5px solid rgba(212,176,106,0.4)}
.hamburger__line{width:20px;height:2.5px;border-radius:2px;position:absolute;transition:all .3s cubic-bezier(0.68,-0.55,0.265,1.55)}
.hamburger__line{background:#fff}
.hamburger__line:nth-child(1){transform:translateY(-8px)}
.hamburger__line:nth-child(2){transform:translateY(0)}
.hamburger__line:nth-child(3){transform:translateY(8px)}
.hamburger.active .hamburger__line:nth-child(1){transform:rotate(45deg)}
.hamburger.active .hamburger__line:nth-child(2){opacity:0}
.hamburger.active .hamburger__line:nth-child(3){transform:rotate(-45deg)}

/* Overlay */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);pointer-events:none;transition:background .4s;z-index:150}
.overlay.active{background:rgba(0,0,0,0.6);pointer-events:auto}

/* ─── DRAWER BASE ─── */
.drawer{position:fixed;left:0;right:0;background:#06060d;overflow:hidden;z-index:180}

/* ═══════════════════════════════════════════════════════════════
   ANIMATION SYSTEM — Premium Mobile Drawer
   ═══════════════════════════════════════════════════════════════
   
   DESIGN PHILOSOPHY:
   The drawer has TWO distinct animation layers:
   
   LAYER 1 — CONTAINER (the sheet itself)
     - Opening: The sheet arrives from below. Spring bounce. 
       This is the "hello, I'm here" moment.
     - Closing: The sheet departs downward. Smooth deceleration.
       This is the "goodbye" moment.
   
   LAYER 2 — CONTENT (what's inside the sheet)
     - Drill-Down: Content slides LEFT. Like pushing a card deck 
       deeper. Old content exits left, new content enters from right.
     - Drill-Up (Back): Content slides RIGHT. Like pulling a card 
       back. Old content exits right, new content enters from left.
     - Pill Switch: Crossfade with subtle scale. Like swapping 
       cards in a fan. Old fades out + shrinks slightly, new fades 
       in + grows slightly.
     - Staggered Reveal: Items cascade in from below with tiny 
       delays. Like a chorus line starting from the top.
   
   CRITICAL RULE: Container animation NEVER plays during content 
   changes. Only on open/close.
   
   TIMING OVERVIEW:
   ┌─────────────────┬──────────┬──────────────────────────────┐
   │ Animation       │ Duration │ Easing                       │
   ├─────────────────┼──────────┼──────────────────────────────┤
   │ Container Open  │ 520ms    │ ascent (spring keyframes + thud) │
   │ Container Close │ 480ms    │ descent (weighted drop, ease-in)  │
   │ Gold Ridge Draw │ 400ms    │ ease-out, delayed 60ms            │
   │ Brand Land ⛰️    │ 480ms    │ spring, delayed 140ms             │
   │ Content Catch-up│ 220ms    │ stagger + 220ms offset            │
   │ Drill-Down      │ 350ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Drill-Up        │ 350ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Pill Switch     │ 300ms    │ ease-out (0.4, 0, 0.2, 1)   │
   │ Stagger Reveal  │ 250ms    │ ease-out (0.4, 0, 0.2, 1)   │
   └─────────────────┴──────────┴──────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* ─── CONTAINER ANIMATIONS (Layer 1 — The Sheet) ─── */

/* ═══════════════════════════════════════════════════════════
   LAYER 1 — CONTAINER OPEN/CLOSE (premium)
   ═══════════════════════════════════════════════════════════
   OPEN  = "The Ascent" ⛰️
     The sheet does not just slide up — it RISES like a summit
     appearing above the fog. Multi-stage keyframes overshoot,
     settle, then land with a tiny 'thud' (the final 1% dip).
     While the sheet climbs:
       · the gold summit ridge draws itself across the top edge
       · the handle wipes into place at the sheet's crest
       · the ⛰️ mountain icon rises and PLANTS itself with a bounce
       · the WIZARDSKI letters spread apart as they fade in
       · content items CATCH UP (+220ms) after the sheet lands
   CLOSE = "The Descent"
     A tiny anticipation lift, then gravity takes over: the sheet
     accelerates off-screen with a WEIGHTED feel. Content settles
     (dims + sinks) just before the drop; the ridge retracts from
     the right; the mountain dips and the handle slips away.
   ═══════════════════════════════════════════════════════════ */

/* OPEN — the ascent. 520ms. Easing: smooth fast-out, bounces come
   from the keyframe stages themselves (no per-keyframe easing). */
@keyframes drawer-open {
  0%   { transform: translateY(100%); opacity: 0; }
  38%  { transform: translateY(-2.4%); opacity: 1; }   /* eager rise — overshoots the top */
  60%  { transform: translateY(1.4%); }                /* bounce back down */
  76%  { transform: translateY(-0.7%); }               /* second, smaller overshoot */
  89%  { transform: translateY(0.3%); }                /* THUD — the sheet lands */
  100% { transform: translateY(0); opacity: 1; }
}

/* CLOSE — the weighted descent. 480ms. Easing: ease-in (gravity). */
@keyframes drawer-close {
  0%   { transform: translateY(0); opacity: 1; }
  16%  { transform: translateY(-1.2%); opacity: 1; }   /* anticipation — braces to drop */
  60%  { transform: translateY(34%); opacity: 1; }     /* accelerating fall */
  100% { transform: translateY(105%); opacity: 0; }
}

/* GOLD RIDGE DRAW — the summit ridge draws itself left→right */
@keyframes gold-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* GOLD RIDGE RETRACT — the ridge recedes as the sheet departs */
@keyframes gold-retract {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* HANDLE ARRIVE — the grip wipes into place at the sheet's crest */
@keyframes handle-arrive {
  0%   { opacity: 0; transform: translateY(-10px) scaleX(0.5); }
  55%  { opacity: 1; transform: translateY(2px) scaleX(1.06); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

/* BRAND LAND — the ⛰️ icon rises and plants itself */
@keyframes brand-land {
  0%   { opacity: 0; transform: translateY(18px) scale(0.7); }
  52%  { opacity: 1; transform: translateY(-4px) scale(1.14); }
  74%  { transform: translateY(2px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* BRAND LABEL IN — WIZARDSKI letters spread apart as they fade in */
@keyframes brand-label-in {
  0%   { opacity: 0; transform: translateY(10px); letter-spacing: 8px; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 3px; }
}

/* CONTENT SETTLE — the list sinks slightly and dims before the drop */
@keyframes content-settle {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.55; transform: translateY(7px) scale(0.985); }
}

/* BRAND DIP — the mountain sinks as the sheet falls away */
@keyframes brand-dip {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.3; transform: translateY(8px) scale(0.86); }
}

/* HANDLE EXIT — the grip slips downward and fades */
@keyframes handle-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* ─── CONTENT NAVIGATION ANIMATIONS (Layer 2 — Inside the Sheet) ─── */

/* DRILL-DOWN: Old content slides out to the left */
@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-30%);
    opacity: 0.3;
  }
}

/* DRILL-DOWN: New content slides in from the right */
@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* DRILL-UP (BACK): Old content slides out to the right */
@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.3;
  }
}

/* DRILL-UP (BACK): New content slides in from the left */
@keyframes slide-in-left {
  0% {
    transform: translateX(-30%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* PILL SWITCH: Old content fades out with subtle shrink */
@keyframes pill-switch-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* PILL SWITCH: New content fades in with subtle grow */
@keyframes pill-switch-in {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* STAGGERED REVEAL: Items cascade from below */
@keyframes stagger-reveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── CSS CLASSES FOR ANIMATION HOOKS ─── */

/* Container States */
.drawer--mobile.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.drawer--mobile {
  background: var(--nav-bg);
  bottom: 90px;
  border-top: 1px solid rgba(212,176,106,0.3);
  transform: translateY(100%);
  opacity: 0;
  /* No base transition — open/close run as KEYFRAME animations
     (.opening = ascent, .closing = descent). This is what makes the
     container animation feel hand-crafted instead of CSS-default. */
  pointer-events: none;
  max-height: 80vh;
  overflow-y: auto;
}

/* Gold summit ridge — sits on the top edge. scaleX(0) when hidden,
   scaleX(1) while open, draws in on open, retracts on close. */
.drawer--mobile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-gold-light) 20%, var(--nav-gold) 50%, var(--nav-gold-light) 80%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
}
.drawer--mobile.active::before {
  transform: scaleX(1);
}

/* ─── OPEN — "The Ascent" (hamburger / overlay / Escape trigger) ─── */
.drawer--mobile.opening {
  animation: drawer-open var(--nav-t-open) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}
.drawer--mobile.opening::before {
  animation: gold-draw var(--nav-t-ridge) var(--nav-ease-out) 60ms forwards;
}
.drawer--mobile.opening .drawer__handle {
  animation: handle-arrive 320ms var(--nav-ease-spring) 60ms forwards;
}
.drawer--mobile.opening .drawer__brand {
  animation: brand-land 480ms var(--nav-ease-spring) 140ms forwards;
}
.drawer--mobile.opening .drawer__brand-label {
  animation: brand-label-in 340ms var(--nav-ease-out) 200ms forwards;
}
/* Content CATCHES UP after the sheet lands: +220ms on top of stagger */
.drawer--mobile.opening .drawer__cat,
.drawer--mobile.opening .drawer__sub,
.drawer--mobile.opening .drawer__pill {
  animation-delay: calc(var(--stagger, 0ms) + var(--nav-t-catchup));
}

/* ─── CLOSE — "The Descent" ─── */
.drawer--mobile.closing {
  animation: drawer-close var(--nav-t-close) var(--nav-ease-drop) forwards;
  pointer-events: none;
}
.drawer--mobile.closing::before {
  animation: gold-retract 260ms var(--nav-ease-drop) 40ms forwards;
  transform-origin: right center;
}
.drawer--mobile.closing .drawer__content {
  animation: content-settle 190ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.drawer--mobile.closing .drawer__brand {
  animation: brand-dip 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.drawer--mobile.closing .drawer__handle {
  animation: handle-exit 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Content Animation Classes */
.drawer__content {
  position: relative;
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Content transitions use animation, not transition */
}

/* Content exit states */
.drawer__content--exit-left {
  animation: slide-out-left 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--enter-right {
  animation: slide-in-right 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.drawer__content--exit-right {
  animation: slide-out-right 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--enter-left {
  animation: slide-in-left 350ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.drawer__content--pill-exit {
  animation: pill-switch-out 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}

.drawer__content--pill-enter {
  animation: pill-switch-in 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* ─── STAGGERED REVEAL for nav items ─── */
.drawer__cat,
.drawer__sub,
.drawer__pill {
  opacity: 0;
  /* Delay from --stagger var. The OPEN state adds a catch-up offset
     (calc(var(--stagger) + 220ms)) WITHOUT touching drill-down timing. */
  animation: stagger-reveal 250ms cubic-bezier(0.4, 0.0, 0.2, 1) var(--stagger, 0ms) forwards;
}

/* Stagger delays — each item 40ms later, capped at 200ms */
.drawer__cat:nth-child(3) { --stagger: 0ms; }   /* brand is 1, brand-label is 2 */
.drawer__cat:nth-child(4) { --stagger: 40ms; }
.drawer__cat:nth-child(5) { --stagger: 80ms; }
.drawer__cat:nth-child(6) { --stagger: 120ms; }
.drawer__cat:nth-child(n+7) { --stagger: 160ms; }

.drawer__sub:nth-child(4) { --stagger: 0ms; }   /* brand(1), brand-label(2), active-cat(3) */
.drawer__sub:nth-child(5) { --stagger: 40ms; }
.drawer__sub:nth-child(6) { --stagger: 80ms; }
.drawer__sub:nth-child(7) { --stagger: 120ms; }
.drawer__sub:nth-child(n+8) { --stagger: 160ms; }

.drawer__pill:nth-child(4) { --stagger: 0ms; }  /* brand(1), brand-label(2), active-cat(3) */
.drawer__pill:nth-child(5) { --stagger: 40ms; }
.drawer__pill:nth-child(6) { --stagger: 80ms; }
.drawer__pill:nth-child(n+7) { --stagger: 120ms; }

/* ─── DRAWER — DESKTOP V2 — Three Premium Variants ─── */
.drawer--desktop {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 900;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.drawer--desktop.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Gold ridge line — shared across all variants */
.drawer__ridge {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4b06a 20%, #e8c87a 50%, #d4b06a 80%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.5s ease 0.15s, opacity 0.4s ease 0.1s;
}

.drawer--desktop.active .drawer__ridge {
  opacity: 1;
  transform: scaleX(1);
}

/* Sub-item shared */
.drawer__sub-item {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  display: block;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 6px;
  position: relative;
}

.drawer__sub-item:hover {
  color: #d4b06a;
}

/* Language toggle shared */
.drawer__lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer__lang-item,
.drawer__lang-tab {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 4px 0;
}

.drawer__lang-item:hover,
.drawer__lang-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.drawer__lang-item.active,
.drawer__lang-tab.active {
  color: #d4b06a;
}

.drawer__lang-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 400;
  user-select: none;
}

/* ============================================================
   CONCEPT A — MEGA MENU (Stripe-style) — V2 Enhanced
   ============================================================ */

/* ─── KEYFRAME ANIMATIONS ─── */

/* Gold ridge draws in from left to right */
@keyframes mega-ridge-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Gold ridge retracts right to left on close */
@keyframes mega-ridge-retract {
  0%   { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Column slides in from above with fade */
@keyframes mega-col-enter {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Column slides out upward with fade on close */
@keyframes mega-col-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Individual item cascade in from below */
@keyframes mega-item-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Header underline sweep in */
@keyframes mega-underline-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ─── BASE MEGA MENU STYLES ─── */

.drawer--desktop.mega {
  background: rgba(8, 8, 18, 0.97);
  border-bottom: 1px solid rgba(212, 176, 106, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── OPEN ANIMATION ─── */
.drawer--desktop.mega.active .drawer__ridge {
  animation: mega-ridge-draw 380ms cubic-bezier(0.4, 0, 0.2, 1) 30ms forwards;
  transform-origin: left center;
}

/* Columns stagger in left→right with 40ms each */
.drawer--desktop.mega.active .drawer__col {
  animation: mega-col-enter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.drawer--desktop.mega.active .drawer__col:nth-child(1) { animation-delay: 0.06s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) { animation-delay: 0.10s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) { animation-delay: 0.14s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) { animation-delay: 0.18s; }

/* Items cascade within each column — delayed further */
.drawer--desktop.mega.active .drawer__sub-item {
  animation: mega-item-enter 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(1) { animation-delay: 0.12s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(2) { animation-delay: 0.16s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(3) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(4) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(1) .drawer__sub-item:nth-child(5) { animation-delay: 0.28s; }

.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(1) { animation-delay: 0.16s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(2) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(3) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(4) { animation-delay: 0.28s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(5) { animation-delay: 0.32s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(6) { animation-delay: 0.36s; }
.drawer--desktop.mega.active .drawer__col:nth-child(2) .drawer__sub-item:nth-child(7) { animation-delay: 0.40s; }

.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(1) { animation-delay: 0.20s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(2) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(3) .drawer__sub-item:nth-child(3) { animation-delay: 0.28s; }

.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(1) { animation-delay: 0.24s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(2) { animation-delay: 0.28s; }
.drawer--desktop.mega.active .drawer__col:nth-child(4) .drawer__sub-item:nth-child(3) { animation-delay: 0.32s; }

/* ─── CLOSE ANIMATION ─── */
/* When closing, we remove .active — the base .drawer--desktop transition
   handles the slide-up fade-out. We enhance with a brief delay for items. */

/* ─── GRID LAYOUT ─── */
.drawer--desktop.mega .drawer__mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 32px 48px 28px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ─── COLUMNS ─── */
.drawer--desktop.mega .drawer__col {
  position: relative;
}

/* Column divider lines (vertical separators between columns) */
.drawer--desktop.mega .drawer__col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -16px;
  bottom: 4px;
  width: 1px;
  background: rgba(212, 176, 106, 0.12);
}

/* ─── COLUMN HEADERS ─── */
.drawer--desktop.mega .drawer__col-header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #d4b06a;
  padding: 0 0 10px;
  margin-bottom: 18px;
  position: relative;
  /* Gold underline bar */
  border-bottom: 1.5px solid rgba(212, 176, 106, 0.25);
  /* Subtle text shadow for readability */
  text-shadow: 0 1px 4px rgba(212, 176, 106, 0.15);
  transition: color 0.2s ease;
}

/* Hover: gold underline sweep */
.drawer--desktop.mega .drawer__col-header::after {
  content: '';
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d4b06a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(212, 176, 106, 0.3);
}

.drawer--desktop.mega .drawer__col-header:hover::after {
  transform: scaleX(1);
}

.drawer--desktop.mega .drawer__col-header:hover {
  color: #e8c87a;
}

/* ─── SUB-ITEMS ─── */
.drawer--desktop.mega .drawer__col-items {
  display: flex;
  flex-direction: column;
}

.drawer--desktop.mega .drawer__sub-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  display: block;
  padding: 6px 0;
  line-height: 1.5;
  min-height: 28px;
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
  border-radius: 4px;
  position: relative;
}

/* First item in each column is gold */
.drawer--desktop.mega .drawer__sub-item--first {
  color: #d4b06a;
  font-weight: 500;
}

/* Hover: soft gold background on item rows */
.drawer--desktop.mega .drawer__sub-item:hover {
  color: #e8c87a;
  background: rgba(212, 176, 106, 0.07);
  padding-left: 6px;
}

/* ─── LANGUAGE TOGGLE (bottom of last column) ─── */
.drawer--desktop.mega .drawer__col-lang {
  margin-top: 20px;
  padding-top: 4px;
}

.drawer--desktop.mega .drawer__col-lang .drawer__lang-divider {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 176, 106, 0.2), rgba(212, 176, 106, 0.08) 80%, transparent);
  margin-bottom: 14px;
}

.drawer--desktop.mega .drawer__lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer--desktop.mega .drawer__lang-item {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 4px 0;
}

.drawer--desktop.mega .drawer__lang-item:hover {
  color: rgba(255, 255, 255, 0.7);
}

.drawer--desktop.mega .drawer__lang-item.active {
  color: #d4b06a;
}

.drawer--desktop.mega .drawer__lang-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 400;
  user-select: none;
}
/* ============================================================
   CONCEPT B — CENTERED GLASS CARD
   ============================================================ */

.drawer--desktop.glass {
  display: flex;
  justify-content: center;
  padding: 0 24px;
  background: transparent;
}

.drawer--desktop.glass .drawer__glass-panel {
  max-width: 720px;
  width: 100%;
  background: rgba(14, 14, 24, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(212, 176, 106, 0.15);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(212, 176, 106, 0.08);
  padding: 28px 32px 20px;
  transform: translateY(-4px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.drawer--desktop.glass.active .drawer__glass-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Ridge inside panel */
.drawer--desktop.glass .drawer__ridge {
  border-radius: 4px 4px 0 0;
  height: 2px;
  margin: -28px -32px 24px;
  background: linear-gradient(90deg, transparent, #d4b06a 15%, #e8c87a 50%, #d4b06a 85%, transparent);
}

/* 2×2 grid */
.drawer--desktop.glass .drawer__glass-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Individual card */
.drawer--desktop.glass .drawer__card {
  background: rgba(6, 6, 13, 0.5);
  border: 1px solid rgba(212, 176, 106, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.drawer--desktop.glass .drawer__card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 176, 106, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Card header — gold gradient strip */
.drawer--desktop.glass .drawer__card-header {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #06060d;
  background: linear-gradient(135deg, #e8c87a, #d4b06a 50%, #c0a05a);
  padding: 10px 16px 8px;
  line-height: 1;
}

/* Card body — sub-items */
.drawer--desktop.glass .drawer__card-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer--desktop.glass .drawer__sub-item {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.drawer--desktop.glass .drawer__sub-item::before {
  content: '▪';
  color: rgba(212, 176, 106, 0.3);
  margin-right: 10px;
  font-size: 8px;
  vertical-align: middle;
  transition: color 0.2s ease;
}

.drawer--desktop.glass .drawer__sub-item:hover {
  background: rgba(212, 176, 106, 0.08);
  border-color: rgba(212, 176, 106, 0.2);
  color: #d4b06a;
}

.drawer--desktop.glass .drawer__sub-item:hover::before {
  color: #d4b06a;
}

/* Lang below grid */
.drawer--desktop.glass .drawer__glass-lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.drawer--desktop.glass .drawer__lang-divider-short {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(212, 176, 106, 0.2);
  margin-bottom: 16px;
}

/* Stagger cards in */
.drawer--desktop.glass .drawer__card {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.drawer--desktop.glass.active .drawer__card {
  opacity: 1;
  transform: translateY(0);
}

.drawer--desktop.glass.active .drawer__card:nth-child(1) { transition-delay: 0.06s; }
.drawer--desktop.glass.active .drawer__card:nth-child(2) { transition-delay: 0.10s; }
.drawer--desktop.glass.active .drawer__card:nth-child(3) { transition-delay: 0.14s; }
.drawer--desktop.glass.active .drawer__card:nth-child(4) { transition-delay: 0.18s; }

/* Re-apply hover lift after stagger completes */
.drawer--desktop.glass.active .drawer__card:hover {
  transform: translateY(-2px);
}


/* ============================================================
   CONCEPT C — HORIZONTAL TABS (Linear-style)
   ============================================================ */

.drawer--desktop.tabs {
  background: rgba(6, 6, 13, 0.97);
  border-bottom: 1px solid rgba(212, 176, 106, 0.06);
}

.drawer--desktop.tabs .drawer__tabs-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Tab bar — top row */
.drawer--desktop.tabs .drawer__tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
}

.drawer--desktop.tabs .drawer__tabs-group {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  position: relative;
}

/* Individual tab button */
.drawer--desktop.tabs .drawer__tab {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 12px;
  position: relative;
  transition: color 0.2s ease;
}

.drawer--desktop.tabs .drawer__tab:hover {
  color: rgba(255, 255, 255, 0.85);
}

.drawer--desktop.tabs .drawer__tab.active {
  color: #d4b06a;
  font-weight: 700;
}

/* Gold underline indicator */
.drawer--desktop.tabs .drawer__tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #d4b06a, #e8c87a, #d4b06a);
  border-radius: 1px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(212, 176, 106, 0.4);
}

/* Language tabs — right side */
.drawer--desktop.tabs .drawer__tab-lang {
  display: flex;
  gap: 12px;
}

.drawer--desktop.tabs .drawer__lang-tab {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

.drawer--desktop.tabs .drawer__lang-tab:hover {
  background: rgba(212, 176, 106, 0.06);
}

.drawer--desktop.tabs .drawer__lang-tab.active {
  color: #d4b06a;
  background: rgba(212, 176, 106, 0.08);
}

/* Sub-items bar — bottom row */
.drawer--desktop.tabs .drawer__sub-bar {
  border-top: 1px solid rgba(212, 176, 106, 0.08);
  padding: 16px 0 14px;
  position: relative;
  min-height: 48px;
}

.drawer--desktop.tabs .drawer__sub-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer--desktop.tabs .drawer__sub-group.visible {
  opacity: 1;
  position: relative;
  top: auto;
  pointer-events: auto;
}

/* Sub-item in tabs mode */
.drawer--desktop.tabs .drawer__sub-item {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  display: inline;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.drawer--desktop.tabs .drawer__sub-item:hover {
  background: rgba(212, 176, 106, 0.08);
}

/* Dot divider between sub-items */
.drawer--desktop.tabs .drawer__sub-dot {
  color: rgba(212, 176, 106, 0.3);
  font-size: 16px;
  user-select: none;
  line-height: 1;
}


/* ─── MOBILE C2.3 COMPONENT STYLES ─── */
@media (max-width: 599px) {
  .nav--bottom {
    display: flex;
    height: 82px;
    padding: 0 22px;
    z-index: 1000;
  }
  .nav--top { display: none !important; }
  .drawer--desktop { display: none !important; }
  .drawer--mobile {
  background: var(--nav-bg);
    display: block;
    bottom: 82px;
    z-index: 999;
    max-height: min(76vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #0e0e18;
    border-top: 1px solid rgba(212,176,106,.55);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,.42);
  }
  .drawer__handle {
    width: 42px;
    height: 4px;
    margin: 13px auto 2px;
    border-radius: 99px;
    background: rgba(232,200,122,.72);
  }
  .drawer__content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 22px 22px;
    align-items: center;
  }
  .drawer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 38px;
    margin: 0 auto 2px;
    font-size: 25px;
    cursor: pointer;
  }
  .drawer__brand-label {
    margin: 0 auto 16px;
    color: #e8c87a;
    font: 700 11px/1 'Inter',sans-serif;
    letter-spacing: 4px;
    text-align: center;
  }
  .drawer__cat, .drawer__cat--active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    min-height: 42px;
    box-sizing: border-box;
    margin: 5px auto;
    padding: 10px 42px 10px 18px;
    border: 1px solid rgba(232,200,122,.5);
    border-radius: 12px;
    background: linear-gradient(135deg,#e8c87a,#d4b06a 55%,#bd9854);
    color: #06060d;
    font: 700 13px/1.1 'Inter',sans-serif;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0,0,0,.2);
  }
  .drawer__cat--active {
    background: transparent;
    color: #e8c87a;
    border: 1px solid #d4b06a;
    box-shadow: inset 0 0 0 1px rgba(212,176,106,.18);
  }
  .drawer__chevron {
    position: absolute;
    right: 17px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
  }
  .drawer__sub { background: rgba(6,6,13,.72); 
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    min-height: 38px;
    box-sizing: border-box;
    margin: 5px auto;
    padding: 9px 14px;
    border: 1px solid rgba(212,176,106,.34);
    border-radius: 10px;
    background: rgba(6,6,13,.72);
    color: #e4e4ec;
    font: 500 13px/1.2 'Inter',sans-serif;
    text-align: center;
    text-decoration: none;
  }
  .drawer__sub:hover, .drawer__sub:focus-visible { opacity: 0.9;
    color: #e8c87a;
    border-color: #d4b06a;
    background: rgba(212,176,106,.1);
  }
  .drawer__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    width: min(100%, 360px);
    margin: 15px auto 4px;
  }
  .drawer__pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 13px;
    border: 1px solid rgba(212,176,106,.65);
    border-radius: 99px;
    background: rgba(212,176,106,.12);
    color: #e8c87a;
    font: 600 11px/1 'Inter',sans-serif;
    letter-spacing: .7px;
    text-align: center;
    cursor: pointer;
  }
  .drawer__divider {
    width: min(100%, 360px);
    height: 1px;
    margin: 14px auto 11px;
    background: rgba(212,176,106,.2);
  }
  .drawer__toggle {
    color: rgba(228,228,236,.58);
    font: 600 11px/1 'Inter',sans-serif;
    letter-spacing: 2px;
    text-align: center;
  }
  .drawer__toggle--active { color: #d4b06a; }
}

/* ─── DESKTOP RESPONSIVE ─── */
@media (min-width: 600px) {
  .nav--bottom { display: none; }
  .nav--top { display: flex; }
  .drawer--mobile { display: none !important; }
  background: var(--nav-bg);
}