:root {
    --color-brand-primary: #061730;          /* Darker navy – more authority */
    --color-brand-primary-light: #0E2A50;    /* Slightly lighter for hover/accents */
    --color-brand-primary-dark: #040E1B;     /* Almost black, max depth */
    --color-white: #FFFFFF;
    --color-black: #000000;

    --gray-50: #F4F5F8;
    --gray-100: #E9EBF0;
    --gray-200: #CFCFD9;
    --gray-300: #A0A4B0;
    --gray-400: #707686;
    --gray-500: #50566B;
    --gray-600: #383E51;
    --gray-700: #262B3C;
    --gray-800: #131725;
    --gray-900: #0A0D16;

    --accent-green: #00A86B;                 /* Slightly deeper neon green */
    --accent-green-dark: #008555;
    --accent-red: #D32F2F;                   /* Darker, more serious red */
    --accent-yellow: #E6A733;                /* Darker, richer yellow-orange */

    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-inverse: var(--color-white);      /* Fixed reference */
    --text-muted: var(--gray-500);

    --bg-main: var(--color-white);           /* Fixed reference */
    --bg-soft: var(--gray-50);
    --bg-section: var(--gray-100);
    --bg-dark: var(--color-brand-primary-dark);

    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.18);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --font-sans: 'Inter', system-ui, sans-serif;

    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem;

    --transition-fast: 0.15s ease;
    --transition-med: 0.3s ease;
}


  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: var(--font-sans);
      font-size: var(--fs-base);
      line-height: 1.6;
      color: var(--text-primary);
      background-color: var(--bg-main);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  /* ANIMATED BACKGROUND */
  .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
  }

  /* PARTICLE CANVAS */
  #particleCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
  }

  .grid-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
          linear-gradient(rgba(10, 61, 98, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(10, 61, 98, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: gridMove 20s linear infinite;
  }

  @keyframes gridMove {
      0% {
          transform: translate(0, 0);
      }

      100% {
          transform: translate(50px, 50px);
      }
  }

  .floating-shapes {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .shape {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.15;
      animation: float 20s infinite ease-in-out;
  }

  .shape:nth-child(1) {
      width: 300px;
      height: 300px;
      background: var(--color-brand-primary);
      top: 10%;
      left: 10%;
      animation-delay: 0s;
      animation-duration: 25s;
  }

  .shape:nth-child(2) {
      width: 200px;
      height: 200px;
      background: var(--color-brand-primary-light);
      top: 60%;
      right: 15%;
      animation-delay: 5s;
      animation-duration: 20s;
  }

  .shape:nth-child(3) {
      width: 250px;
      height: 250px;
      background: var(--accent-green);
      bottom: 10%;
      left: 50%;
      animation-delay: 10s;
      animation-duration: 30s;
  }

  @keyframes float {

      0%,
      100% {
          transform: translate(0, 0) rotate(0deg);
      }

      33% {
          transform: translate(30px, -50px) rotate(120deg);
      }

      66% {
          transform: translate(-20px, 20px) rotate(240deg);
      }
  }

  /* LAYOUT */
  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-6);
      position: relative;
      z-index: 1;
  }

  .container--narrow {
      max-width: 800px;
  }

  /* NAVIGATION */

/* --------------------------------------------- */
/* BASE NAVIGATION STYLES (YOUR ORIGINAL)        */
/* --------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all var(--transition-med);
}

.nav.scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.95);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
}

.nav__logo {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-brand-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: transform var(--transition-fast);
}

.nav__logo:hover {
    transform: translateY(-2px);
}

.nav__logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-light) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__links {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.nav__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-brand-primary);
    transition: width var(--transition-med);
}

.nav__link:hover {
    color: var(--color-brand-primary);
}

.nav__link:hover::after {
    width: 100%;
}


/* --------------------------------------------- */
/* MOBILE HAMBURGER + RESPONSIVE MENU (NEW)      */
/* --------------------------------------------- */

/* HAMBURGER BUTTON */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav__toggle span {
    width: 26px;
    height: 3px;
    background: var(--color-brand-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger → X animation */
.nav__toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav__toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav__toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* --------------------------------------------- */
/* MOBILE MENU (SLIDE-IN PANEL)                  */
/* --------------------------------------------- */
@media (max-width: 820px) {

    .nav__toggle {
        display: flex;
    }

    .nav__links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 74%;
        height: 100vh;
        background: var(--color-white);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
        padding: var(--space-10) var(--space-6);
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        transition: right 0.35s ease;
        z-index: 999;
    }

    .nav__links.open {
        right: 0;
    }

    .nav__link {
        font-size: var(--fs-lg);
        color: var(--text-primary);
    }

    .nav__cta {
        width: 100%;
        text-align: center;
    }

    /* Prevent body scroll when menu is open */
    body.nav-open {
        overflow: hidden;
    }
}
  /* BUTTONS */
  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-sans);
      font-size: var(--fs-base);
      font-weight: 600;
      padding: var(--space-3) var(--space-6);
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      transition: all var(--transition-med);
      text-decoration: none;
      position: relative;
      overflow: hidden;
  }

  .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
  }

  .btn:hover::before {
      width: 300px;
      height: 300px;
  }

  .btn--primary {
      background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-light) 100%);
      color: var(--color-white);
      box-shadow: var(--shadow-md);
  }

  .btn--primary:hover {
      box-shadow: var(--shadow-xl);
      transform: translateY(-2px);
  }

  .btn--outline {
      background-color: transparent;
      color: var(--color-brand-primary);
      border: 2px solid var(--color-brand-primary);
  }

  .btn--outline:hover {
      background-color: var(--color-brand-primary);
      color: var(--color-white);
  }

  .btn--lg {
      font-size: var(--fs-lg);
      padding: var(--space-4) var(--space-8);
  }


  /* FOOTER */
  .footer {
      background: var(--bg-dark);
      color: var(--text-inverse);
      padding: var(--space-12) 0 var(--space-6);
  }

  .footer__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: var(--space-6);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: var(--space-6);
  }

  .footer__logo {
      font-size: var(--fs-xl);
      font-weight: 700;
  }

  .footer__links {
      display: flex;
      gap: var(--space-8);
  }

  .footer__link {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: all var(--transition-fast);
      position: relative;
  }

  .footer__link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--color-white);
      transition: width var(--transition-med);
  }

  .footer__link:hover {
      color: var(--color-white);
  }

  .footer__link:hover::after {
      width: 100%;
  }

  .footer__bottom {
      text-align: center;
      color: rgba(255, 255, 255, 0.6);
      font-size: var(--fs-sm);
  }

  /* RESPONSIVE */

  @media (max-width: 768px) {
      .nav__links {
          gap: var(--space-4);
      }



      .btn--lg {
          width: 100%;
          max-width: 300px;
      }

      .footer__content {
          flex-direction: column;
          gap: var(--space-6);
          text-align: center;
      }

      .footer__links {
          flex-direction: column;
          gap: var(--space-4);
      }
  }

  /* Custom Scrollbar for Modern Professional Theme */

  /* Chrome, Edge, Safari */
  ::-webkit-scrollbar {
      width: 12px;
      /* thickness of scrollbar */
      background: var(--bg-soft);
      /* track background */
      border-radius: var(--radius-lg);
  }

  ::-webkit-scrollbar-track {
      background: var(--bg-soft);
      border-radius: var(--radius-lg);
  }

  ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--color-brand-primary-light), var(--color-brand-primary));
      border-radius: var(--radius-lg);
      border: 3px solid var(--bg-soft);
      /* padding effect inside track */
      transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--color-brand-primary), var(--color-brand-primary-dark));
  }

  /* Firefox */
  * {
      scrollbar-width: thin;
      scrollbar-color: var(--color-brand-primary) var(--bg-soft);
  }

  /* Optional: Smooth hover shadow for thumb */
  ::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
  }




  /* AUTH MODAL STYLES - uses your root variables */
  .auth-modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 2000;
      font-family: var(--font-sans);
  }

  /* backdrop */
  .auth-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 61, 98, 0.45);
      backdrop-filter: blur(4px);
      transition: opacity var(--transition-fast);
  }

  /* dialog */
  .auth-modal__dialog {
      position: relative;
      max-width: 520px;
      margin: 8vh auto;
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--shadow-xl);
      z-index: 2;
      transform: translateY(12px);
      transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  /* show class toggles */
  .auth-modal.show {
      display: block;
  }

  .auth-modal.show .auth-modal__dialog {
      transform: translateY(0);
  }

  /* close */
  .auth-modal__close {
      position: absolute;
      right: 12px;
      top: 12px;
      background: transparent;
      border: none;
      font-size: 18px;
      color: var(--text-muted);
      cursor: pointer;
  }

  /* branding */
  .auth-modal__brand {
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-4);
  }

  /* header */
  .auth-modal__title {
      font-size: var(--fs-2xl);
      font-weight: 700;
      color: var(--color-brand-primary);
      text-align: center;
      margin-bottom: 6px;
  }

  .auth-modal__subtitle {
      text-align: center;
      color: var(--text-secondary);
      margin-bottom: var(--space-6);
  }

  /* form */
  .auth-form .form-row {
      margin-bottom: var(--space-4);
  }

  .form-label {
      display: block;
      font-size: var(--fs-sm);
      color: var(--text-muted);
      margin-bottom: var(--space-2);
  }

  .form-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-light);
      font-size: var(--fs-base);
      color: var(--text-primary);
      background: var(--color-white);
      transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  }

  .form-input:focus {
      outline: none;
      border-color: var(--color-brand-primary);
      box-shadow: 0 6px 20px rgba(10, 61, 98, 0.06);
  }

  /* errors */
  .form-error {
      color: var(--accent-red);
      font-size: 0.85rem;
      margin-top: 6px;
      min-height: 18px;
  }

  /* actions row */
  .form-row--actions {
      display: flex;
      gap: var(--space-4);
      align-items: center;
      justify-content: space-between;
  }

  .form-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      font-size: var(--fs-sm);
  }

  /* toggle */
  .auth-switch {
      display: flex;
      gap: var(--space-4);
      justify-content: center;
      align-items: center;
      margin-top: var(--space-4);
  }

  .auth-switch__text {
      color: var(--text-muted);
  }

  /* server error */
  .auth-form__server-error {
      margin-top: var(--space-4);
      color: var(--accent-red);
      font-weight: 600;
      text-align: center;
  }

  /* responsive */
  @media (max-width: 600px) {
      .auth-modal__dialog {
          margin: 6vh 16px;
          padding: var(--space-4);
      }
  }

  /* modal container */
  .auth-modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 2000;
      font-family: var(--font-sans);
      overflow: auto;
      /* allow modal scrolling if content taller than viewport */
  }

  /* prevent body scroll when modal is open */
  body.auth-modal-open {
      overflow: hidden;
  }

  /* backdrop */
  .auth-modal__backdrop {
      position: fixed;
      /* fixed so background stays covered */
      inset: 0;
      background: rgba(10, 61, 98, 0.45);
      backdrop-filter: blur(4px);
      transition: opacity var(--transition-fast);
  }

  /* dialog */
  .auth-modal__dialog {
      position: relative;
      max-width: 520px;
      margin: 8vh auto;
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--shadow-xl);
      z-index: 2;
      transform: translateY(12px);
      transition: transform var(--transition-fast), opacity var(--transition-fast);
      max-height: 84vh;
      /* limit modal height */
      overflow-y: auto;
      /* enable scroll inside modal */
  }

  /* responsive adjustments */
  @media (max-width: 600px) {
      .auth-modal__dialog {
          margin: 6vh 16px;
          padding: var(--space-4);
          max-height: 88vh;
      }
  }

  /* ---------- ADD THESE STYLES (or merge into your modal CSS) ---------- */

  .auth-social {
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-4);
  }

  /* Google button (theme-matched) */
  .btn--google {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-md);
      text-decoration: none;
      color: var(--text-primary);
      background: #fff;
      border: 1px solid var(--border-light);
      box-shadow: var(--shadow-sm);
      font-weight: 600;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      width: 100%;
      /* full width on mobile, neat centered block */
      max-width: 360px;
      /* cap width on desktop */
  }

  .btn--google:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
  }

  /* small icon inside button */
  .btn--google .btn__icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
  }

  /* adjust layout on small screens */
  @media (max-width: 420px) {
      .btn--google {
          padding: 12px;
          gap: 12px;
      }
  }
  
  
  
  .sidebar__menu-item--has-sub .sidebar__submenu {
    display: none;
    padding-left: var(--space-4);
    flex-direction: column;
    gap: var(--space-2);
}

.sidebar__menu-item--has-sub.open .sidebar__submenu {
    display: flex;
}

.sidebar__submenu-item .sidebar__link {
    font-size: var(--fs-sm);
    padding-left: var(--space-6);
    color: var(--text-secondary);
}

.sidebar__submenu-icon {
    margin-left: auto;
    width: 16px;
    height: 16px;
    transition: transform var(--transition-med);
}

.sidebar__menu-item--has-sub.open .sidebar__submenu-icon {
    transform: rotate(180deg);
}



.sidebar__menu-item--has-sub .sidebar__submenu {
    display: none;
    list-style: none;        /* remove bullets */
    padding-left: var(--space-4); /* adjust left padding */
    margin: 0;               /* remove default margin */
    flex-direction: column;
    gap: var(--space-2);
}

.sidebar__submenu-item .sidebar__link {
    font-size: var(--fs-sm);
    padding-left: var(--space-4); /* less left padding than parent */
    color: var(--text-secondary);
}