/* ---------- CSS Variables ---------- */
    :root{
      --header-height:64px;

      /* Colors */
      --bg-primary:#ffffff;
      --bg-secondary:#f8fafc;
      --bg-tertiary:#f1f5f9;
      --bg-elevated:#ffffff;

      --text-primary:#191a1b;
      --text-secondary:#64748b;
      --text-tertiary:#94a3b8;
      --text-inverse:#ffffff;

      --border-primary:#e2e8f0;
      --border-secondary:#cbd5e1;
      --border-hover:#94a3b8;

      --accent-primary:#191a1b;
      --accent-primary-hover:#64748b;
      --accent-secondary:#3b82f6;
      --accent-secondary-hover:#186ffa;

      --gradient-text: linear-gradient(45deg, #1625ff 0%, #2bb4aa 60%, #1625ff 85%);

      /* Layout / Motion */
      --spacing-xs:.25rem;
      --spacing-sm:.5rem;
      --spacing-md:1rem;
      --spacing-lg:1.5rem;
      --spacing-xl:2rem;
      --spacing-2xl:3rem;
      --radius-sm:.0rem;
      --radius-md:.5rem;
      --radius-lg:.75rem;
      --radius-pill:30px;
      --shadow-md:0 4px 10px rgba(0,0,0,.08);
      --transition-fast:150ms ease-in-out;
      --transition-normal:250ms ease-in-out;

      /* Type */
      --font-size-sm:.875rem;
      --font-size-base:1rem;
      --font-size-lg:1.125rem;

      /* Components */
      --flip-speed:.25s; /* <— needed for nav button flip */

      /* Mobile nav */
      --mobile-nav-bg:var(--bg-elevated);

      --color-blur: #ffffffad;
    }

    .dark{
      --gradient-text: linear-gradient(45deg, #fff 0%, #71d3cb 60%, #1625ff 85%);
      --bg-primary:#121416;
      --bg-secondary:#1a1c20;
      --bg-tertiary:#1e1f22;
      --bg-elevated:#1D2025;
      --color-blur: #121416ad;

      --text-primary:#f2f3f5;
      --text-secondary:#bed3df;
      --text-tertiary:#94aab4;
      --text-inverse:#191a1b;

      --border-primary:#2c3033;
      --border-secondary:#353a3d;
      --border-hover:#424d57;

      --accent-primary:#ffffff;
      --accent-primary-hover:#e9eaec;
      --accent-secondary:#60a5fa;
      --accent-secondary-hover:#3b82f6;

      --mobile-nav-bg:var(--bg-elevated);
    }

    /* ---------- Reset-ish ---------- */
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Inter',sans-serif;
      background:var(--bg-primary);
      color:var(--text-primary);
      line-height:1.7;
      overflow-x:hidden;
      min-height:100vh;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit;background:none;border:none}
    i[class^="ti"]{font-size:1em;line-height:1}

    /* ==============================
       HEADER (shared component)
    =============================== */
    .header{
      background-color:var(--color-blur);
      border-bottom:1px solid var(--border-primary);
      padding:0 var(--spacing-lg);
      position:sticky;top:0;z-index:1000;
      backdrop-filter:blur(25px);
    }
    .header{ position: sticky; top:0; z-index:1000; }
    .header--fixed{
      position: fixed; top: 0; left: 0; right: 0; z-index: 2001;
    }
    .header-container{
      display:flex;align-items:center;justify-content:space-between;
      height:var(--header-height);margin:0 auto;
    }
    .header-left{display:flex;align-items:center;gap:var(--spacing-md)}
    .logo-btn{
      padding:.5rem .75rem;border-radius:var(--radius-md);
      padding-left: 0;
      border:1px solid #fff0;text-transform:uppercase;font-weight:600;letter-spacing:1px;
      transition:all var(--transition-fast);
      color:var(--text-primary);
      font-size: var(--font-size-lg);
      white-space: nowrap;
    }
    .logo-span{ color: var(--text-tertiary); transition:all var(--transition-fast); }
    .logo-btn:hover .logo-span{ color: var(--accent-secondary) }

    .header-right{display:flex;gap:.75rem;align-items:center}
    @media (max-width: 860px){
        .header{
          padding:0 var(--spacing-sm);
        }
    }
    .btn{
      display:inline-flex;align-items:center;gap:.25rem;
      padding:.5rem 1rem;border-radius:var(--radius-md);
      font-size:var(--font-size-base);transition:all var(--transition-fast);
    }
    .btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary)}
    .btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--border-hover)}

    .btn-open{
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      padding: 0.5rem 1.25rem; border: 1px solid transparent;
      background: var(--accent-primary); color: var(--text-inverse);
      border-radius: var(--radius-pill); overflow: hidden; transition:all .35s ease; white-space: nowrap;
    }
    .btn-open.fill-sweep::before{
      content: ""; position: absolute; inset: 0; width: 0%; height: 100%;
      background: var(--text-inverse); transition: width .6s cubic-bezier(.68,-.55,.265,1.55); z-index: 0;
    }
    .btn-open.fill-sweep span{ position: relative; z-index: 1; transition: color .35s ease; }
    .btn-open.fill-sweep:hover{ border-color: var(--accent-secondary); border-radius: var(--radius-sm); }
    .btn-open.fill-sweep:hover::before{ width: 100%; }
    .btn-open.fill-sweep:hover span{ color: var(--accent-primary); }
    @media (prefers-reduced-motion: reduce){
    .btn-open.fill-sweep::before{ transition: none; width: 100%; }
    .btn-open.fill-sweep{ transition: none; }
    }
    @media (max-width: 550px){
    .btn-open{
    padding: 0.5rem 0.75rem; 
        font-size: var(--font-size-sm);               
    }
    .logo-btn{
    padding: 0.5rem 0.5rem;       
    padding-left: 0;
      font-size: var(--font-size-md);
    }
    }
    /* Primary nav (desktop) */
    .nav-menu{display:flex;gap:1rem;padding:0 0rem}
    .nav-item{position:relative;display:inline-block;line-height:var(--font-size-base);perspective:800px}
    .nav-active.btn-flip::before{color:var(--text-primary)}
    .btn-flip::before{
      content:attr(data-front);
      display:block;padding:.5rem .75rem;background:transparent;color:var(--text-secondary);
      transition:transform var(--flip-speed) ease,opacity var(--flip-speed) ease;
      transform:translateY(0) rotateX(0);will-change:transform,opacity;backface-visibility:hidden;
    }
    .btn-flip::after{
      content:attr(data-back);
      position:absolute;inset:0;display:flex;justify-content:center;align-items:center;
      background:transparent;color:var(--text-primary);
      opacity:0;transform:translateY(100%) rotateX(-90deg);
      transition:transform var(--flip-speed) ease,opacity var(--flip-speed) ease;
      will-change:transform,opacity;backface-visibility:hidden;
    }
    .btn-flip:hover::after,.btn-flip:focus-visible::after{opacity:1;transform:translateY(0) rotateX(0)}
    .btn-flip:hover::before,.btn-flip:focus-visible::before{opacity:0;transform:translateY(-100%) rotateX(-90deg)}

    /* Dropdown */
    .dropdown{position:relative}
    .dropdown-trigger{cursor:pointer;padding:.5rem;border-radius:var(--radius-md)}
    .dropdown-trigger:hover{background:var(--bg-secondary)}
    .profile-avatar{
      width:32px;height:32px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
      display:flex;align-items:center;justify-content:center;color:var(--text-inverse);font-weight:600;font-size:var(--font-size-sm);
    }

    .dropdown-menu{
      position:absolute; top:calc(100% + 4px); right:0; min-width:240px;
      background:var(--bg-elevated); border:1px solid var(--border-primary); border-radius:var(--radius-lg);
      box-shadow:0 24px 60px rgb(0 0 0 / .10); z-index:1000; overflow:hidden;
      transform-origin: 90% 0; transform: translateY(-6px) scaleY(.96);
      opacity: 0; visibility: hidden;
      transition:
        transform 360ms cubic-bezier(.18,.89,.32,1.28),
        opacity   320ms cubic-bezier(.2,.8,.2,1),
        visibility 0s linear 360ms;
      will-change: transform, opacity;
    }
    .dropdown-menu.active{
      visibility: visible; transform: translateY(0) scaleY(1); opacity: 1;
      transition: transform 360ms cubic-bezier(.18,.89,.32,1.28), opacity 320ms cubic-bezier(.2,.8,.2,1), visibility 0s;
    }
    .dropdown-item{
      display:flex; align-items:center; gap:.5rem; padding:1rem; width:100%;
      color:var(--text-primary); text-align:left; cursor:pointer;
      font-size:var(--font-size-base); line-height:1.25;
    }
    .dropdown-item:hover{ background:var(--bg-secondary); }
    .dropdown-item.hidden{ display:none; }
    .dropdown-divider{height:1px;background:var(--border-primary)}

    /* Theme switch (inside dropdown) */
    .theme-switch{
      --switch-h:28px; --switch-w:54px; --knob:22px;
      position:relative; display:flex; align-items:center; justify-content:space-between; width:100%;
      gap:.75rem;
    }
    .theme-switch .label{flex:1}
    .switch{
      position:relative; width:var(--switch-w); height:var(--switch-h);
      background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:999px;
      transition:background var(--transition-fast), border-color var(--transition-fast);
      flex:0 0 auto; cursor: pointer;
    }
    .switch-knob{
      position:absolute; top:50%; transform:translateY(-50%); left:3px;
      width:var(--knob); height:var(--knob); border-radius:50%;
      background:var(--accent-primary); transition:left var(--transition-fast), background var(--transition-fast);
      box-shadow:0 2px 6px rgba(0,0,0,.15); cursor: pointer;
    }
    body.dark .switch-knob{ background:var(--accent-secondary); }
    .switch--on .switch-knob{ left:calc(var(--switch-w) - var(--knob) - 6px); }
    .switch-icons{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
      padding:0 7px; pointer-events:none; font-size:14px; color:var(--text-secondary);
    }

    /* ==============================
       MOBILE NAV (shared)
    =============================== */
    .hamburger{
      display:none; align-items:center; justify-content:center; width:40px; height:40px;
      border-radius:var(--radius-md); cursor:pointer;
    }
    .hamburger:hover{background:var(--bg-secondary)}
    .hamburger .bar{width:20px;height:2px;background:var(--text-primary);position:relative}
    .hamburger .bar::before,.hamburger .bar::after{
      content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary);transition:transform var(--transition-fast),opacity var(--transition-fast)
    }
    .hamburger .bar::before{top:-6px}
    .hamburger .bar::after{top:6px}
    .hamburger[aria-expanded="true"] .bar{background:transparent}
    .hamburger[aria-expanded="true"] .bar::before{transform:translateY(6px) rotate(45deg)}
    .hamburger[aria-expanded="true"] .bar::after{transform:translateY(-6px) rotate(-45deg)}

    .mobile-nav{
      position:fixed; top:var(--header-height); left:0; right:0;
      background:var(--mobile-nav-bg); border-bottom:1px solid var(--border-primary);
      transform:translateY(-110%); opacity:0; visibility:hidden;
      transition:transform var(--transition-normal), opacity var(--transition-fast), visibility var(--transition-fast);
      z-index:900;
    }
    .mobile-nav.open{ transform:translateY(0); opacity:1; visibility:visible; }
    .mobile-nav-inner{ max-width:1200px; margin:0 auto; padding:var(--spacing-md) var(--spacing-lg); }
    .mobile-nav a{
      display:block; padding:.875rem 0; border-top:1px solid var(--border-primary); color:var(--text-secondary);
    }
    .mobile-nav a:hover{ color:var(--text-primary); }
    .mobile-nav a:first-child{border-top:none}

    .notif-badge {
      position: absolute; top: 3px; right: -3px;
      min-width: 24px; height: 24px; padding: 0 4px; line-height: 19px; font-size: 12px; font-weight: 500;
      color: var(--text-inverse); background: var(--accent-secondary);
      border-radius: 999px; text-align: center; pointer-events: none; border: 2px solid var(--color-blur);
    }
    .notif-badge.hidden { display: none !important; }
    .notif-badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; line-height: 10px; font-size: 0; border-radius: 50%; }

    /* ==============================
       PAGE SHELL (shared for non-home)
    =============================== */
    .page{
      min-height: calc(100vh - var(--header-height));
      background: var(--bg-primary);
    }
    .container{
      width:100%; max-width:1200px; margin:0 auto;
      padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 24px);
    }
    .page-title{
      font-family:'PP Neue Montreal',sans-serif;
      font-size: clamp(24px, 5vw, 40px);
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: .5rem;
      color: var(--text-primary);
    }
    .page-subtitle{
      color: var(--text-secondary);
      margin-bottom: clamp(12px, 2vw, 24px);
      max-width: 65ch;
    }

    /* Responsive */
    @media (max-width: 980px){
      .nav-menu{display:none}
      .hamburger{display:flex}
    }

    /* ==============================
   FOOTER
============================== */
.site-footer{
  position: relative;
  z-index: 1;
  background: var(--color-blur);
  backdrop-filter: blur(25px);
  border-top: 1px solid var(--border-primary);
}

.footer-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 24px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 24px;
}

.footer-logo{
  padding-left: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff0; /* keep hover behavior consistent */
  font-size: 1.05rem;
}
.footer-logo i{
  font-size: 1.15rem;
}
.footer-tagline{
  grid-column: 1 / 2;
  margin: 0;
  color: var(--text-tertiary);
  font-size: .95rem;
  line-height: 1.4;
}

.footer-right{
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: .95rem;
}
.footer-link{
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer-link:hover{
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.footer-links .dot{
  color: var(--border-hover);
}

.footer-socials{
  display: inline-flex;
  gap: 8px;
  margin-left: 6px;
}
.social-btn{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.social-btn:hover{
  background: var(--bg-tertiary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.footer-bottom{
  border-top: 1px solid var(--border-primary);
  padding: 10px clamp(16px, 4vw, 24px);
  color: var(--text-tertiary);
  font-size: .85rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 860px){
  .footer-container{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .footer-right{
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 10px;
  }
}
@media (max-width: 520px){
  .footer-right{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-links{ gap: 8px; }
}