/* === Navbar（活潑版） === */
:root{
    --yellow:#FFD400; --blue:#41B6FF; --ink:#0f172a;
    --pink:#FF6FB0; --mint:#34D399; --purple:#A78BFA;
  }
  
  /* 彩帶漸層條 */
  .nav{
    position:sticky; top:0; z-index:1000;
    background: linear-gradient(90deg, #fff 0 16px, #fff0 16px) , 
                linear-gradient(120deg, var(--yellow), var(--blue), var(--pink), var(--mint), var(--purple));
    background-size: 100% 100%, 280% 100%;
    animation: navFlow 10s linear infinite;
    border-bottom: 0;
    backdrop-filter: blur(6px) saturate(1.1);
  }
  @keyframes navFlow{0%{background-position:0 0,0 0}100%{background-position:0 0,280% 0}}
  
  .nav-inner{
    max-width:1080px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; height:72px; padding:0 16px;
    font-family:"Comic Neue", system-ui, -apple-system, "Segoe UI", Arial, "PingFang TC","Microsoft JhengHei", sans-serif;
  }
  
  .brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px; color:var(--ink); text-decoration:none}
  .brand .logo{
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg, var(--yellow), var(--blue));
    box-shadow:0 6px 14px rgba(0,0,0,.15);
  }
  .brand span{white-space:nowrap; text-shadow:0 1px 0 rgba(255,255,255,.6)}
  
  .nav-links{display:flex; align-items:center; gap:18px}
  
  .nav-links a{
    position:relative; color:#0b1d37; font-weight:900; padding:10px 8px; border-radius:10px; text-decoration:none;
  }
  .nav-links a::after{
    content:""; position:absolute; left:10px; right:10px; bottom:6px; height:4px; border-radius:999px;
    background:linear-gradient(90deg, var(--yellow), var(--blue)); transform:scaleX(0); transform-origin:left center;
    transition:transform .2s ease;
  }
  .nav-links a:hover::after{ transform:scaleX(1) }
  .nav-links a.active{
    background:rgba(255,255,255,.8);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }
  
  /* 主 CTA：果凍膠囊 */
  .nav-cta{
    display:inline-block; padding:12px 16px; border-radius:999px; font-weight:900;
    background:linear-gradient(90deg, var(--blue), #2aa7ff); color:#fff;
    box-shadow:0 10px 22px rgba(65,182,255,.35), inset 0 -3px 0 rgba(0,0,0,.08);
    text-decoration:none;
  }
  .nav-cta:hover{filter:saturate(1.08)}
  
  /* 漢堡 */
  .hamburger{
    display:none; border:none; background:#0b1d37; color:#fff;
    padding:10px 12px; border-radius:12px; font-weight:900; cursor:pointer; box-shadow:0 6px 12px rgba(0,0,0,.18);
  }
  
  /* Mobile menu */
  @media (max-width: 880px){
    .hamburger{display:block}
    .nav-links{display:none}
    .nav.open .nav-links{
      display:flex; position:absolute; inset:72px 0 auto 0; flex-direction:column;
      background:rgba(255,255,255,.96); padding:12px 16px 16px; gap:10px;
      border-bottom:1px solid #e2e8f0; box-shadow:0 12px 24px rgba(0,0,0,.12);
    }
    .nav.open .nav-cta{align-self:flex-start}
  }