/* ===========
   TOPBAR (PURPLE PREMIUM / SERIOUS)
   =========== */

:root{
  --dk-accent: #5a2e91;
  --dk-accent2: #7b43c4;

  --dk-ink: rgba(15,11,28,.96);
  --dk-text: rgba(11,18,32,.92);
  --dk-muted: rgba(11,18,32,.68);

  --dk-stroke: rgba(17,12,26,.12);
  --dk-stroke2: rgba(17,12,26,.08);

  --dk-white: #fff;
  --dk-card: rgba(255,255,255,.86);

  --dk-shadow: 0 22px 70px rgba(24,12,40,.12);
  --dk-shadow2: 0 14px 44px rgba(24,12,40,.08);

  --dk-radius-lg: 22px;
  --dk-radius-md: 14px;

  /* single source of truth */
  --topbarH: 80px;
}

/* Prevent content hiding under fixed header */
body{ padding-top: var(--topbarH); }

/* =====================================
   FIXED TOPBAR
   ===================================== */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;

  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(17,12,26,.08);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(90,46,145,.10), rgba(90,46,145,0) 60%),
    radial-gradient(740px 320px at 84% 18%, rgba(47,209,255,.06), rgba(47,209,255,0) 55%);
  opacity: .9;
}

.topbar__inner{
  position: relative;
  display:flex;
  align-items:center;
  gap: 22px;
  height: var(--topbarH);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* LEFT */
.topbar__left{ display:flex; align-items:center; }

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap: 12px;
}

.topbar__logoImg{
  height: 70px; 
  width: auto;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* NAV */
.topbar__nav{
  flex:1;
  display:flex;
  justify-content:center;
}

.topbar__right{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Group */
.nav-group{ display:flex; align-items:center; gap: 6px; }

/* NAV PILL */
.nav-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;

  color: rgba(11,18,32,.86);

  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.nav-pill:focus,
.nav-pill:active{ outline:none; }

/* Hover */
.nav-pill:hover{
  color: var(--dk-accent);
  background: linear-gradient(180deg, rgba(90,46,145,.10), rgba(90,46,145,.06));
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(24,12,40,.06),
    inset 0 0 0 1px rgba(90,46,145,.18);
}

/* Open / active */
.nav-pill.is-open{
  color: var(--dk-accent);
  background: linear-gradient(180deg, rgba(90,46,145,.14), rgba(90,46,145,.08));
  box-shadow:
    0 14px 32px rgba(90,46,145,.10),
    inset 0 0 0 1px rgba(90,46,145,.24);
}

/* Chevron */
.nav-chev{
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  margin-top:-2px;
  transition: transform .18s ease, opacity .18s ease;
  opacity:.62;
}
.nav-pill:hover .nav-chev{ opacity:.95; }
.nav-pill.is-open .nav-chev{ transform: rotate(225deg); opacity: 1; }

/* ICON BUTTONS */
.icon-btn{
  width: 40px; height: 40px;
  border-radius: 12px;

  border: 1px solid rgba(17,12,26,.10);
  background: rgba(17,12,26,.03);

  display:grid;
  place-items:center;
  cursor:pointer;

  color: rgba(11,18,32,.82);

  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}

.icon-btn:hover{
  color: var(--dk-accent);
  background: rgba(90,46,145,.08);
  border-color: rgba(90,46,145,.18);
  box-shadow: 0 12px 26px rgba(24,12,40,.10);
  transform: translateY(-1px);
}

.icon{ width:18px; height:18px; }

/* LANGUAGE */
.lang{
  display:flex;
  align-items:center;
  gap:6px;

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;

  padding: 9px 12px;
  border-radius: 12px;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(11,18,32,.82);

  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.lang:hover{
  color: var(--dk-accent);
  background: rgba(90,46,145,.08);
  border-color: rgba(90,46,145,.16);
  transform: translateY(-1px);
}

.lang-chev{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
}

/* CTA BUTTON */
.primary{
  border-radius: 14px;
  padding: 10px 16px;

  font-weight: 950;
  font-size: 12px;
  letter-spacing: .02em;

  border: 1px solid rgba(90,46,145,.30);
  background: linear-gradient(135deg, #5a2e91, #7b43c4);
  color: #fff;

  box-shadow: 0 14px 34px rgba(90,46,145,.18);
  cursor:pointer;

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(90,46,145,.22);
  filter: brightness(1.02);
}

/* ===============================
   MEGA DROPDOWN (SERIOUS / PREMIUM)
   =============================== */

.megaShell{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--topbarH);
  z-index: 900;

  display: none;

  /* premium glass */
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(90,46,145,.10), rgba(90,46,145,0) 60%),
    radial-gradient(740px 320px at 84% 18%, rgba(47,209,255,.06), rgba(47,209,255,0) 55%),
    rgba(255,255,255,.92);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(17,12,26,.10);
  box-shadow: 0 26px 70px rgba(24,12,40,.14);

  padding: 5px 0 10px;
}

.megaShell.is-open{ display:block; }

/* Panel: centered, card-like */
.megaPanel{
  width: min(1120px, calc(100vw - 48px));
  margin: 0 auto;

  border-radius: 22px;
  border: 1px solid rgba(17,12,26,.10);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(24,12,40,.10);

  padding: 14px;
}

/* Grid */
.megaLeft{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

/* Links */
.megaLink{
  text-decoration:none;
  color: rgba(11,18,32,.92);
  display:block;

  padding: 12px 12px;
  border-radius: 16px;

  border: 1px solid rgba(17,12,26,.08);
  background: rgba(255,255,255,.72);

  transition: background .15s ease, transform .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.megaLink strong{
  display:block;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.15;
}

.megaLink span{
  display:block;
  color: rgba(11,18,32,.62);
  font-size: 13px;
  line-height: 1.35;
}

.megaLink:hover{
  color: var(--dk-accent);
  background: rgba(90,46,145,.08);
  border-color: rgba(90,46,145,.18);
  box-shadow: 0 14px 44px rgba(24,12,40,.08), inset 0 0 0 1px rgba(90,46,145,.14);
  transform: translateY(-1px);
}

.megaLink:hover span{ color: rgba(90,46,145,.82); }

/* Burger */
.burger{
  display:none;
  margin-left:auto;

  width:44px;
  height:44px;

  border-radius:14px;
  border:1px solid rgba(17,12,26,.10);
  background:rgba(17,12,26,.03);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.burger:hover{
  background: rgba(90,46,145,.08);
  border-color: rgba(90,46,145,.18);
  box-shadow: 0 12px 26px rgba(24,12,40,.10);
  transform: translateY(-1px);
}

.burger span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(11,18,32,.86);
  margin:4px auto;
}

/* Responsive */
@media (max-width: 1100px){
  .megaLeft{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 920px){
  .topbar__nav, .topbar__right{ display:none; }
  .burger{ display:block; }
}


/* ===============================
   MOBILE NAV (burger)
   =============================== */

.mNav{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}

.mNav.is-open{ display: block; }

.mNav__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,10,20,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mNav__sheet{
  position:absolute;
  left: 12px;
  right: 12px;
  top: calc(var(--topbarH) + 10px);

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(90,46,145,.20), rgba(90,46,145,0) 60%),
    radial-gradient(740px 320px at 84% 18%, rgba(47,209,255,.10), rgba(47,209,255,0) 55%),
    linear-gradient(135deg, #5a2e91 0%, #7b43c4 58%, #2b1550 100%);

  color:#fff;
  box-shadow: 0 30px 90px rgba(24,12,40,.26);
  overflow:hidden;

  transform: translateY(-10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.mNav.is-open .mNav__sheet{
  transform: translateY(0);
  opacity: 1;
}

.mNav__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.mNav__title{
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 14.8px;
}

.mNav__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight: 950;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mNav__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}

.mNav__links{
  padding: 10px 10px 12px;
  display:grid;
  gap: 8px;
}

/* ===============================
   MOBILE ACCORDION
   =============================== */

.mAcc{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.mAcc + .mAcc{ margin-top: 10px; }

.mAcc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
  border: 0;
  background: transparent;
  color:#fff;
  cursor:pointer;

  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 16px;
}

.mAcc__chev{
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.92);
  border-bottom: 2px solid rgba(255,255,255,.92);
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.85;
}

/* panel animation via grid trick */
.mAcc__panel{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .20s ease;
}

.mAcc__inner{
  overflow:hidden;
  padding: 0 10px 10px;
}

.mAcc.is-open .mAcc__panel{
  grid-template-rows: 1fr;
}

.mAcc.is-open .mAcc__chev{
  transform: rotate(225deg);
  opacity: 1;
}

/* items inside dropdown */
.mAcc__link{
  display:block;
  text-decoration:none;

  border-radius: 16px;
  padding: 12px 12px;

  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.mAcc__link + .mAcc__link{ margin-top: 8px; }

.mAcc__link strong{
  display:block;
  font-weight: 950;
  font-size: 13.8px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.mAcc__link span{
  display:block;
  margin-top: 4px;
  color: rgba(255,255,255,.78);
  font-size: 12.8px;
  line-height: 1.35;
}

.mAcc__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.mNav__link{
  text-decoration:none;
  color: rgba(255,255,255,.92);

  padding: 12px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);

  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mNav__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

/* make the sheet scrollable */
.mNav__sheet{
  /* keep your existing styles... */

  max-height: calc(100vh - var(--topbarH) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* optional: nicer scrolling + spacing */
.mNav__links{
  padding-bottom: 12px;
}

.mNav__actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* keep your background/border from earlier */
}

.mNav__actions{
  padding: 12px 12px 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* buttons inside mobile panel */
.mNav__btn{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 950;
  cursor:pointer;
}

.mNav__btn--ghost{
  background: rgba(255,255,255,.90);
  color:#000000;
}

.mNav__btn--primary{
  background: rgba(255,255,255,.96);
  color: rgba(15,11,28,.92);
  border-color: rgba(255,255,255,.30);
  grid-column: 1 / -1;
}

/* Only relevant on mobile */
@media (min-width: 921px){
  .mNav{ display:none !important; }
}