/* ============================================================
   BRAND MAKER — navbar-premium.css  (CORRECTED — all devices)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Font Variables ── */
:root {
  --font-heading : 'Sora', sans-serif;
  --font-body    : 'Plus Jakarta Sans', sans-serif;
  --font-nav     : 'Plus Jakarta Sans', sans-serif;

  --purple       : #7C3AED;
  --purple-glow  : rgba(124,58,237,0.35);
  --purple-soft  : rgba(124,58,237,0.12);
  --orange       : #F97316;
  --orange-glow  : rgba(249,115,22,0.35);
  --orange-soft  : rgba(249,115,22,0.1);

  --nav-glass-bg       : rgba(15,5,30,0.55);
  --nav-glass-scrolled : rgba(10,2,22,0.88);
  --nav-border         : rgba(255,255,255,0.10);
  --nav-shadow         : 0 8px 32px rgba(0,0,0,0.35);
  --nav-shadow-scrolled: 0 12px 40px rgba(0,0,0,0.55);
}

/* ── Base font overrides ── */
body { font-family: var(--font-body); letter-spacing: -0.01em; }
h1,h2,h3,h4,h5,h6,
.hero-headline,.section-title,.nav-brand-name {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}
.nav-menu a,.nav-cta,.btn-primary,.btn-outline,
.section-tag,.counter-label,.footer-links a {
  font-family: var(--font-nav);
}

/* ============================================================
   NAVBAR — DESKTOP (base, no media query)
   ============================================================ */
#navbar {
  position  : fixed;
  top       : 16px;
  left      : 50%;
  transform : translateX(-50%);
  width     : calc(100% - 48px);
  max-width : 1200px;
  z-index   : 1000;
  padding   : 14px 28px;

  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 24px;

  background      : var(--nav-glass-bg);
  backdrop-filter : blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border          : 1px solid var(--nav-border);
  border-radius   : 20px;
  box-shadow      : var(--nav-shadow),
                    inset 0 1px 0 rgba(255,255,255,0.08);

  transition:
    background    0.45s cubic-bezier(0.4,0,0.2,1),
    box-shadow    0.45s cubic-bezier(0.4,0,0.2,1),
    padding       0.45s cubic-bezier(0.4,0,0.2,1),
    top           0.45s cubic-bezier(0.4,0,0.2,1),
    border-color  0.45s ease;

  animation: navbarEntry 0.8s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes navbarEntry {
  from { opacity:0; transform:translateX(-50%) translateY(-24px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Ambient glow behind nav (scrolled) */
#navbar::before {
  content    : '';
  position   : absolute;
  top        : -20px;
  left       : 50%;
  transform  : translateX(-50%);
  width      : 60%;
  height     : 60px;
  background : radial-gradient(ellipse, rgba(124,58,237,0.18) 0%, transparent 70%);
  filter     : blur(12px);
  z-index    : -1;
  opacity    : 0;
  pointer-events: none;
  transition : opacity 0.5s ease;
}

#navbar.scrolled {
  top        : 8px;
  background : var(--nav-glass-scrolled);
  border-color: rgba(124,58,237,0.25);
  box-shadow : var(--nav-shadow-scrolled),
               0 0 0 1px rgba(124,58,237,0.08),
               inset 0 1px 0 rgba(255,255,255,0.06);
  padding    : 10px 28px;
}
#navbar.scrolled::before { opacity: 1; }

/* ── Brand ── */
.nav-brand {
  display     : flex;
  align-items : center;
  gap         : 11px;
  flex-shrink : 0;
  text-decoration: none;
  transition  : opacity 0.3s ease;
  /* CRITICAL: always visible, never hidden */
  visibility  : visible !important;
  opacity     : 1;
  z-index     : 1001;
}
.nav-brand:hover { opacity: 0.88; }

.nav-logo {
  width : 38px;
  height: 38px;
  object-fit: contain;
  filter    : drop-shadow(0 0 8px rgba(249,115,22,0.4));
  transition: filter 0.35s ease, transform 0.35s ease;
  display   : block; /* ensure it renders */
}
.nav-brand:hover .nav-logo {
  filter   : drop-shadow(0 0 14px rgba(249,115,22,0.65));
  transform: rotate(-4deg) scale(1.05);
}

.nav-brand-text {
  display       : flex;
  flex-direction: column;
  line-height   : 1;
  gap           : 3px;
}
.nav-brand-name {
  font-family   : var(--font-heading);
  font-size     : 1.08rem;
  font-weight   : 700;
  letter-spacing: 0.02em;
  background    : linear-gradient(135deg,#fff 0%,var(--orange) 60%,#FF3D00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-brand-tagline {
  font-family   : var(--font-nav);
  font-size     : 0.52rem;
  font-weight   : 500;
  color         : rgba(167,139,250,0.75);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Desktop Nav Menu ── */
.nav-menu {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  flex           : 1;
  justify-content: center;
  list-style     : none;
  margin         : 0;
  padding        : 0;
}

.nav-menu li { position: relative; }

.nav-menu a {
  font-family   : var(--font-nav);
  font-size     : 0.8rem;
  font-weight   : 500;
  letter-spacing: 0.03em;
  color         : rgba(196,174,222,0.85);
  position      : relative;
  display       : inline-flex;
  align-items   : center;
  padding       : 7px 13px;
  border-radius : 10px;
  text-decoration: none;
  white-space   : nowrap;
  transition    :
    color      0.3s ease,
    background 0.3s ease,
    transform  0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.nav-menu a::before { display: none; }

.nav-menu a::after {
  content         : '';
  position        : absolute;
  bottom          : 5px;
  left            : 13px;
  right           : 13px;
  height          : 1.5px;
  background      : linear-gradient(90deg,var(--purple),var(--orange));
  border-radius   : 99px;
  transform       : scaleX(0);
  transform-origin: left center;
  transition      : transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow      : 0 0 8px var(--orange-glow);
}

.nav-menu a:hover {
  color      : #fff;
  background : rgba(255,255,255,0.06);
  transform  : scale(1.04) translateY(-1px);
}
.nav-menu a:hover::after { transform: scaleX(1); }

.nav-menu a.active {
  color      : #fff;
  background : rgba(124,58,237,0.12);
}
.nav-menu a.active::after {
  transform  : scaleX(1);
  background : linear-gradient(90deg,var(--orange),#FF3D00);
  box-shadow : 0 0 12px var(--orange-glow);
  animation  : activeGlow 2.5s ease infinite;
}
@keyframes activeGlow {
  0%,100% { box-shadow:0 0 8px var(--orange-glow); opacity:1; }
  50%     { box-shadow:0 0 18px var(--orange-glow), 0 0 6px var(--purple-glow); opacity:0.85; }
}

/* ── Nav CTA button ── */
.nav-cta {
  background  : linear-gradient(135deg,var(--orange) 0%,#E65000 100%);
  color       : #fff;
  padding     : 9px 22px;
  border-radius: 12px;
  font-family : var(--font-nav);
  font-size   : 0.8rem;
  font-weight : 600;
  flex-shrink : 0;
  position    : relative;
  overflow    : hidden;
  text-decoration: none;
  box-shadow  : 0 4px 18px var(--orange-glow),
                inset 0 1px 0 rgba(255,255,255,0.2);
  transition  : all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-cta::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 60%);
  opacity    : 0;
  transition : opacity 0.3s ease;
}
.nav-cta:hover {
  transform : translateY(-2px) scale(1.04);
  box-shadow: 0 8px 30px var(--orange-glow), 0 0 20px rgba(124,58,237,0.2);
}
.nav-cta:hover::before { opacity:1; }

/* ── Right group ── */
.nav-right-group {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-shrink: 0;
}

/* Admin button */
.nav-admin-btn {
  display     : inline-flex;
  align-items : center;
  gap         : 6px;
  font-family : var(--font-nav);
  font-size   : 0.78rem;
  font-weight : 600;
  color       : rgba(167,139,250,0.85);
  padding     : 8px 16px;
  border-radius: 12px;
  border      : 1px solid rgba(124,58,237,0.25);
  background  : rgba(124,58,237,0.08);
  text-decoration: none;
  position    : relative;
  overflow    : hidden;
  transition  : all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-admin-btn::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(135deg,rgba(124,58,237,0.15),rgba(249,115,22,0.08));
  opacity    : 0;
  transition : opacity 0.3s ease;
}
.nav-admin-btn i { font-size:0.72rem; transition:transform 0.3s ease; }
.nav-admin-btn:hover {
  color        : #fff;
  border-color : rgba(124,58,237,0.5);
  box-shadow   : 0 4px 20px rgba(124,58,237,0.25),
                 inset 0 1px 0 rgba(255,255,255,0.08);
  transform    : translateY(-2px) scale(1.03);
}
.nav-admin-btn:hover::before { opacity:1; }
.nav-admin-btn:hover i { transform:rotate(-15deg) scale(1.1); }

/* ============================================================
   HAMBURGER — hidden on desktop, shown on mobile
   ============================================================ */
.hamburger {
  /* DESKTOP: completely hidden */
  display        : none;
  align-items    : center;
  justify-content: center;
  width  : 42px;
  height : 42px;
  padding: 0;
  border-radius: 12px;
  border : 1px solid rgba(255,255,255,0.12);
  background   : rgba(255,255,255,0.06);
  cursor : pointer;
  position: relative;
  z-index : 10001; /* always on top of mobile menu */
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hamburger:hover {
  background  : rgba(124,58,237,0.15);
  border-color: rgba(124,58,237,0.45);
}

/* Three line spans — START as proper hamburger (NOT X) */
.hamburger span {
  display      : block;
  position     : absolute;
  width        : 20px;
  height       : 1.5px;
  background   : rgba(255,255,255,0.9);
  border-radius: 2px;
  transition   : all 0.38s cubic-bezier(0.4,0,0.2,1);
  left         : 50%;
  transform-origin: center;
}
/* Default (closed) positions */
.hamburger span:nth-child(1) { transform: translateX(-50%) translateY(-6px); }
.hamburger span:nth-child(2) { transform: translateX(-50%) translateY(0);    }
.hamburger span:nth-child(3) { transform: translateX(-50%) translateY(6px);  width: 13px; margin-left: -3.5px; }

/* Open → X shape */
.hamburger.open {
  border-color: rgba(249,115,22,0.5);
  background  : rgba(249,115,22,0.1);
}
.hamburger.open span { background: var(--orange); }
.hamburger.open span:nth-child(1) { transform: translateX(-50%) translateY(0) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateX(-50%) scaleX(0); opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateX(-50%) translateY(0) rotate(-45deg); width: 20px; margin-left: 0; }

/* ============================================================
   TABLET  769px – 1024px
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  #navbar { width: calc(100% - 40px); padding: 12px 22px; gap: 16px; }
  .nav-menu { gap: 2px; }
  .nav-menu a { padding: 6px 9px; font-size: 0.73rem; }
  .nav-cta { padding: 8px 16px; font-size: 0.74rem; }
  .nav-admin-btn span { display: none; }
  .nav-admin-btn { padding: 8px 12px; border-radius: 10px; }
}

/* ============================================================
   MOBILE  ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* — Navbar pill — */
  #navbar {
    top          : 10px;
    width        : calc(100% - 28px);
    padding      : 10px 16px;
    border-radius: 16px;
    gap          : 12px;
  }
  #navbar.scrolled { top: 6px; padding: 8px 16px; }

  /* — Brand always visible — */
  .nav-brand { display: flex; visibility: visible; }
  .nav-brand-name { font-size: 0.95rem; }

  /* — Hide right-group (CTA + admin) — */
  .nav-right-group { display: none !important; }
  .nav-cta         { display: none !important; }

 /* — Show hamburger — */
  .hamburger { display: flex; }
  .mobile-cta-item { display: flex !important; }

  /* ──────────────────────────────────────────────────────────
     NAV-MENU: OFF-CANVAS FULLSCREEN OVERLAY
     Key: start display:none so NO layout leakage at all.
     JS switches to display:flex when .open is added.
  ────────────────────────────────────────────────────────── */
  .nav-menu {
    /* Remove from normal document flow entirely */
    display          : none !important;
    position         : fixed !important;
    inset            : 0 !important;
    z-index          : 10000 !important;

    flex-direction   : column !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 4px;
    margin           : 0;
    padding          : 0;
    list-style       : none;

    background       : rgba(6,2,16,0.97);
    backdrop-filter  : blur(28px);
    -webkit-backdrop-filter: blur(28px);
  }

  /* When hamburger is toggled — JS adds .open to both elements */
  .nav-menu.open {
    display  : flex !important;
    animation: mobileMenuIn 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
  }

  @keyframes mobileMenuIn {
    from { opacity:0; transform:scale(0.96) translateY(-12px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }

  /* Stagger menu items */
  .nav-menu li {
    opacity  : 0;
    transform: translateY(18px);
    transition: opacity 0.32s ease, transform 0.32s ease;
  }
  .nav-menu.open li { opacity:1; transform:translateY(0); }
  .nav-menu.open li:nth-child(1) { transition-delay: 0.06s; }
  .nav-menu.open li:nth-child(2) { transition-delay: 0.12s; }
  .nav-menu.open li:nth-child(3) { transition-delay: 0.18s; }
  .nav-menu.open li:nth-child(4) { transition-delay: 0.24s; }
  .nav-menu.open li:nth-child(5) { transition-delay: 0.30s; }
  .nav-menu.open li:nth-child(6) { transition-delay: 0.36s; }
  .nav-menu.open li:nth-child(7) { transition-delay: 0.42s; }

  /* Large link text inside overlay */
  .nav-menu a {
    font-size    : 1.55rem;
    font-weight  : 700;
    letter-spacing: -0.02em;
    padding      : 13px 28px;
    color        : rgba(255,255,255,0.75);
    border-radius: 16px;
    width        : auto;
    text-align   : center;
    display      : inline-flex;
  }
  .nav-menu a:hover {
    color      : #fff;
    background : rgba(124,58,237,0.16);
    transform  : scale(1.04);
  }
  .nav-menu a::after { display: none; }

  /* CTA pill at bottom of overlay */
  .nav-menu::after {
    display      : none !important;
    content      : '' !important;
    display      : inline-block;
    margin-top   : 28px;
    background   : linear-gradient(135deg,var(--orange),#E65000);
    color        : #fff;
    padding      : 14px 40px;
    border-radius: 99px;
    font-family  : var(--font-nav);
    font-size    : 1rem;
    font-weight  : 700;
    box-shadow   : 0 6px 28px var(--orange-glow);
    opacity      : 0;
    transform    : translateY(12px);
    transition   : opacity 0.3s 0.46s ease, transform 0.3s 0.46s ease;
  }
  .nav-menu.open::after {
    opacity  : 1;
    transform: translateY(0);
  }

} /* end @media 768px */

/* ============================================================
   SMALL MOBILE  ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  #navbar { width: calc(100% - 20px); padding: 9px 14px; }
  .nav-brand-tagline { display: none; }
  .nav-brand-name    { font-size: 0.88rem; }
  .nav-logo          { width: 32px; height: 32px; }
  .hamburger         { width: 38px; height: 38px; }
  .nav-menu a        { font-size: 1.3rem; padding: 11px 22px; }
}

/* ============================================================
   EXTRA SMALL  ≤ 360px
   ============================================================ */
@media (max-width: 360px) {
  #navbar { width: calc(100% - 14px); padding: 8px 12px; border-radius: 14px; }
  .nav-logo       { width: 28px; height: 28px; }
  .nav-brand-name { font-size: 0.8rem; }
  .hamburger      { width: 36px; height: 36px; }
  .nav-menu a     { font-size: 1.2rem; padding: 10px 18px; }
}

/* ============================================================
   TYPOGRAPHY — shared enhancements
   ============================================================ */
.hero-headline { font-family:var(--font-heading); font-weight:800; letter-spacing:-0.03em; line-height:1.05; }
.section-title { font-family:var(--font-heading); font-weight:700; letter-spacing:-0.025em; line-height:1.2; }
.section-tag   { font-family:var(--font-nav);     font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.section-desc,.about-text,.hero-sub { font-family:var(--font-body); font-weight:400; line-height:1.75; letter-spacing:-0.005em; }
.btn-primary,.btn-outline { font-family:var(--font-nav); font-weight:600; letter-spacing:0.01em; }