/* ═══════════════════════════════════════════════════
   HAMBURGER + MOBILE MENU
   ═══════════════════════════════════════════════════ */
.hamburger{
  display:none;
  width:36px;height:36px;
  border:1px solid var(--stroke);border-radius:10px;
  background:rgba(255,255,255,.05);
  cursor:pointer;position:relative;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .2s ease;
  z-index:102;
  padding:0;
  font-family:inherit;
}
.hamburger:hover{background:rgba(255,255,255,.1)}
.hamburger span{
  display:block;width:18px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .35s cubic-bezier(.16,1.2,.3,1),opacity .2s ease;
  transform-origin:center;
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:95;
  background:rgba(5,8,16,.96);
  backdrop-filter:blur(24px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu .mob-link{
  display:block;
  padding:18px 32px;
  font-size:clamp(22px,5vw,32px);font-weight:700;
  color:var(--muted);text-decoration:none;
  letter-spacing:-.01em;
  transform:translateY(30px);
  opacity:0;
  transition:transform .5s cubic-bezier(.16,1.2,.3,1),
             opacity .4s ease,
             color .2s ease;
  cursor:pointer;
}
.mobile-menu.open .mob-link{
  transform:translateY(0);opacity:1;
}
.mobile-menu .mob-link:nth-of-type(1){transition-delay:.05s}
.mobile-menu .mob-link:nth-of-type(2){transition-delay:.1s}
.mobile-menu .mob-link:nth-of-type(3){transition-delay:.15s}
.mobile-menu .mob-link:nth-of-type(4){transition-delay:.22s}
.mobile-menu .mob-link:nth-of-type(5){transition-delay:.28s}
.mobile-menu .mob-link:hover,
.mobile-menu .mob-link.active{color:var(--text)}
.mobile-menu .mob-link.active{
  background:linear-gradient(90deg,rgba(124,92,255,.12),transparent);
  border-radius:16px;
}
.mobile-menu .mob-divider{
  width:60px;height:1px;background:var(--stroke);margin:12px 0;
}
.mobile-menu .mob-brand{
  position:absolute;top:18px;left:24px;
  font-weight:700;font-size:15px;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.mobile-menu .mob-brand .brand-dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--accentA),var(--accentB));
}
.mobile-menu .mob-close{
  position:absolute;top:14px;right:20px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--muted);
  border:1px solid var(--stroke);border-radius:12px;
  background:rgba(255,255,255,.05);
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
  padding:0;
  font-family:inherit;
  line-height:1;
}
.mobile-menu .mob-close:hover{color:var(--text);background:rgba(255,255,255,.1)}
html[data-theme="light"] .hamburger{
  border-color:rgba(118,145,196,.22);
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 22px rgba(129,148,183,.14);
}
html[data-theme="light"] .hamburger:hover{background:rgba(255,255,255,.92)}
html[data-theme="light"] .mobile-menu{
  background:rgba(248,246,241,.96);
}
html[data-theme="light"] .mobile-menu .mob-link{
  color:#5b6984;
}
html[data-theme="light"] .mobile-menu .mob-link:hover,
html[data-theme="light"] .mobile-menu .mob-link.active{color:#1e2f4b}
html[data-theme="light"] .mobile-menu .mob-link.active{
  background:linear-gradient(90deg,rgba(74,108,255,.12),transparent);
}
html[data-theme="light"] .mobile-menu .mob-brand,
html[data-theme="light"] .mobile-menu .mob-close{
  color:#4f5e7a;
}
html[data-theme="light"] .mobile-menu .mob-close{
  border-color:rgba(118,145,196,.22);
  background:rgba(255,255,255,.76);
}
html[data-theme="light"] .mobile-menu .mob-close:hover{
  color:#1b2d49;
  background:rgba(255,255,255,.92);
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:768px){
  .topnav{
    top:10px;
    width:calc(100% - 14px);
    border-radius:18px;
  }
  .topnav-inner{
    padding:9px 10px;
    gap:10px;
  }
  .topnav-start{
    gap:8px;
  }
  .brand{
    padding:8px 11px;
    font-size:14px;
    border-radius:12px;
  }
  .theme-toggle{
    width:46px;
    height:36px;
    border-radius:12px;
  }
  .theme-toggle-thumb{
    left:4px;
    top:4px;
    width:20px;
    height:20px;
    border-radius:8px;
  }
  html[data-theme="light"] .theme-toggle-thumb{
    transform:translateX(18px);
  }
  .theme-icon{
    width:12px;
    height:12px;
  }
  .theme-icon-sun{right:8px}
  .theme-icon-moon{left:8px}
  .hamburger{display:flex}
  .nav-links{display:none!important}

  .scroll-ring-wrap{
    left:auto!important;right:20px!important;bottom:40px!important;
    z-index:92!important;
    opacity:1!important;
  }
  .scroll-ring-wrap:not(.show){
    opacity:.3!important;
  }

  .hamburger span{
    transition:transform .35s cubic-bezier(.16,1.2,.3,1),opacity .2s ease!important;
  }
  .mobile-menu{
    transition:opacity .4s ease!important;
  }
  .mobile-menu .mob-link{
    transition:transform .5s cubic-bezier(.16,1.2,.3,1),opacity .4s ease,color .2s ease!important;
  }
  .scroll-ring-wrap{
    transition:opacity .3s ease!important;
  }

  .hscroll-sticky{
    height:100vh;
    height:100svh;
  }
  .hscroll-tape{
    gap:20px;
    padding:0 20px;
  }
  .hscroll-panel{
    flex:0 0 min(86vw,420px)!important;
    min-height:52vh;
  }
  .hscroll-panel-media{
    height:200px;
    font-size:44px;
  }
  .hscroll-panel .body{
    padding:22px;
  }
  .hscroll-panel h3{
    font-size:18px;
  }

  .aitracker-iframe-wrap{
    left:12px!important;
    right:auto!important;
    bottom:82px!important;
    max-width:calc(100vw - 24px)!important;
  }
  .aitracker-iframe-wrap.minimized{
    left:12px!important;
    right:auto!important;
    bottom:82px!important;
  }
  [id^="aitracker-badge-pill-"]{
    left:12px!important;
    right:auto!important;
    bottom:12px!important;
  }
  [id^="aitracker-badge-panel-"]{
    left:12px!important;
    right:auto!important;
    bottom:82px!important;
    max-width:calc(100vw - 24px)!important;
  }
}

@media(hover:none),(pointer:coarse){
  .tilt,
  [data-magnet]{
    transform:none!important;
  }
}