/* Accessibility helper */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header & brand */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:1000}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0f172a}
.site-logo{height:56px;width:auto;max-width:220px;object-fit:contain}
@media (max-width:900px){ .site-logo{height:44px} }

/* Desktop nav */
.nav{display:flex}
.nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav a{display:inline-block;padding:8px 10px;text-decoration:none;color:#0f172a}
.nav a:hover{color:#0668e1}

/* Burger button */
.nav-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:#0f172a;margin:5px 0;transition:transform .2s,opacity .2s}

/* Mobile drawer */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:#fff;border-left:1px solid #eee;
       transform:translateX(100%);transition:transform .25s ease;display:block;padding:20px 16px;overflow:auto}
  .nav[data-state="open"]{transform:translateX(0)}
  .nav ul{display:block}
  .nav li{margin:8px 0}
  body.nav-open{overflow:hidden}
}

/* Burger to X */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


:root{
  --menu-bg: #ffffff;          /* panel background */
  --menu-grad1: #6c5ce7;       /* border gradient start */
  --menu-grad2: #00d4ff;       /* border gradient end   */
  --menu-radius: 16px;         /* corner roundness      */
  --menu-border: 2px;          /* border thickness      */
  --menu-shadow: 0 12px 32px rgba(0,0,0,.14);
}

@media (max-width:900px){
  /* Drawer base */
  .nav{
    position: fixed; inset: 12px 12px 12px auto;           /* adds margins so corners show */
    width: min(84vw, 340px);
    background: linear-gradient(135deg, #fff, #fafcff);
    border-radius: var(--menu-radius);
    box-shadow: var(--menu-shadow);
    overflow: hidden;
    transform: translateX(120%);                           /* off-screen by default */
    transition: transform .25s ease;
    display: block; padding: 20px 16px;
  }
  .nav[data-state="open"]{ transform: translateX(0); }

  /* Animated gradient border (GPU cheap) */
  .nav::before{
    content: "";
    position: absolute; inset: 0;
    padding: var(--menu-border);
    border-radius: inherit;
    background: conic-gradient(from var(--_rot,0deg), var(--menu-grad1), var(--menu-grad2), var(--menu-grad1));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;                       /* punch “hole” so it’s a border */
    pointer-events: none;
    animation: nav-spin 8s linear infinite;
  }

  /* Gentle background shimmer for depth */
  .nav::after{
    content:"";
    position:absolute; inset:-30% -10% auto -10%; height:60%;
    background: radial-gradient(60% 80% at 30% 30%, rgba(108,92,231,.08), transparent 60%),
                radial-gradient(60% 80% at 70% 60%, rgba(0,212,255,.06), transparent 60%);
    filter: blur(8px);
    pointer-events:none;
    animation: nav-bg 10s ease-in-out infinite alternate;
  }

  /* Menu items with pill hover */
  .nav ul{ display:block; margin:0; padding:0; }
  .nav li{ list-style:none; margin:10px 0; }
  .nav a{
    display:block; padding:10px 12px; border-radius: 10px;
    color:#0f172a; text-decoration:none; transition: background-color .2s ease, transform .08s ease;
  }
  .nav a:focus-visible{ outline:2px solid #6c5ce7; outline-offset:2px; }
  .nav a:hover{ background:#f3f6ff; }
  .nav a:active{ transform: translateY(1px); }
}

/* Animations */
@keyframes nav-spin { to { --_rot: 360deg; } }
@keyframes nav-bg   { 0%{transform:translateY(0)} 100%{transform:translateY(6px)} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav::before{ animation:none }
  .nav::after{ animation:none }
}

.site-logo{ height:56px; width:auto; max-width:240px; object-fit:contain; }
@media (max-width:900px){ .site-logo{ height:44px; } }
 /* === Desktop animated nav container (>=901px) === */
@media (min-width:901px){
  /* make the nav a compact pill on the right */
  #primary-nav{
    display:inline-flex;             /* shrink to content */
    margin-left:auto;                /* push to the right */
    position:relative;               /* anchor ::before */
    align-items:center;
    padding:6px 10px;
    border-radius:12px;              /* smooth corners */
    background:linear-gradient(135deg,#ffffff,#f8fbff);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transform:none !important;       /* cancel mobile transform if leftover */
    top:auto; right:auto; bottom:auto; left:auto;
  }

  /* animated gradient border (same style as mobile) */
  #primary-nav::before{
    content:"";
    position:absolute; inset:0;
    padding:2px; border-radius:inherit; pointer-events:none;
    background:conic-gradient(from var(--_rot,0deg), #6c5ce7, #00d4ff, #6c5ce7);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; /* cut hole => border */
    animation:navSpin 8s linear infinite;
  }

  /* keep links tidy inside the pill */
  #primary-nav ul{display:flex; gap:16px; margin:0; padding:0; list-style:none;}
  #primary-nav li{margin:0}
  #primary-nav a{
    display:block; padding:8px 10px; border-radius:8px;
    color:#0f172a; text-decoration:none; transition:background-color .2s ease, transform .08s ease;
  }
  #primary-nav a:hover{ background:#f3f6ff; }
}

/* keyframes (ensure present once) */
@keyframes navSpin{ to{ --_rot:360deg; } }

/* Logo never stretches anywhere */
.brand .site-logo{ height:56px; width:auto; max-width:240px; object-fit:contain; }
@media (max-width:900px){ .brand .site-logo{ height:44px; } }
/* Make nav panel fully transparent everywhere */
#primary-nav{ background: transparent !important; }


@media (max-width:900px){
  #primary-nav{
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(10px);          /* Safari/Chromium */
    -webkit-backdrop-filter: blur(10px);  /* iOS Safari */
  }
}
@media (min-width:901px){
  #primary-nav{
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.site-header {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid #eee;
	z-index: 1000;
	border-radius: 20px;
}