/* ===========================================================================
   site-nav.css — the one header every Shigoto AI page uses.
   Markup lives in each page (copy it from index.html); behaviour is in
   site-nav.js. Self-contained: it does not rely on any page's variables.
   =========================================================================== */
.snav{
  --sn-fg:#fff;--sn-muted:rgba(255,255,255,.66);--sn-red:#C41E3A;--sn-red-glow:rgba(196,30,58,.42);
  --sn-ease:cubic-bezier(.2,.7,.2,1);
  position:fixed;top:0;left:0;right:0;z-index:50;
  font-family:"DM Sans","Noto Sans JP",ui-sans-serif,system-ui,sans-serif;
  border-bottom:1px solid transparent;
  transition:background .3s var(--sn-ease),border-color .3s var(--sn-ease);
}
.snav.scrolled,.snav.open{
  background:rgba(13,13,13,.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:rgba(196,30,58,.32);
}
.snav *,.snav *::before,.snav *::after{box-sizing:border-box}
.snav a{color:inherit;text-decoration:none}
.snav-inner{
  max-width:1240px;margin:0 auto;padding:18px 28px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
}
.snav-logo{display:flex;align-items:center}
.snav-logo img{height:54px;width:auto;display:block}
.snav-links{display:flex;justify-content:center;gap:34px;list-style:none;margin:0;padding:0}
.snav-links a{
  position:relative;font-size:14px;color:var(--sn-muted);letter-spacing:-.005em;
  transition:color .2s var(--sn-ease);
}
.snav-links a:hover,.snav-links a[aria-current="page"]{color:var(--sn-fg)}
.snav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--sn-red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--sn-ease);
}
.snav-links a:hover::after,.snav-links a[aria-current="page"]::after{transform:scaleX(1)}
.snav-cta{display:flex;align-items:center;gap:14px}
.snav-signin{font-size:14px;color:var(--sn-muted);transition:color .2s var(--sn-ease)}
.snav-signin:hover{color:var(--sn-fg)}
.snav-btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:10px 16px;border-radius:6px;font-size:13px;font-weight:500;color:#fff !important;
  background:var(--sn-red);box-shadow:0 0 0 1px var(--sn-red),0 14px 38px -16px var(--sn-red-glow);
  transition:background .25s var(--sn-ease),transform .25s var(--sn-ease);
}
.snav-btn:hover{background:#d3243f;transform:translateY(-1px);text-decoration:none !important}
.snav-btn svg{width:14px;height:14px;transition:transform .25s var(--sn-ease)}
.snav-btn:hover svg{transform:translateX(3px)}
.snav a:focus-visible,.snav button:focus-visible{outline:2px solid var(--sn-red);outline-offset:3px;border-radius:3px}
.snav-toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);border-radius:6px;background:none;cursor:pointer;padding:0;
}
.snav-toggle span{width:14px;height:1px;background:var(--sn-fg);position:relative;display:block}
.snav-toggle span::before,.snav-toggle span::after{content:"";position:absolute;left:0;width:14px;height:1px;background:var(--sn-fg)}
.snav-toggle span::before{top:-5px}
.snav-toggle span::after{top:5px}

/* Pages other than the homepage start their content below the fixed bar. */
body.snav-pad{padding-top:90px}

@media (max-width:1080px){
  .snav-links{gap:22px}
  .snav-inner{gap:20px}
}
@media (max-width:900px){
  .snav-links,.snav-signin{display:none}
  .snav-toggle{display:inline-flex}
  .snav-inner{padding:14px 20px;gap:16px}
  .snav-logo img{height:44px}
  .snav-links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:#0d0d0d;
    padding:8px 20px 16px;border-bottom:1px solid rgba(196,30,58,.32);
  }
  .snav-links.open a{display:block;padding:13px 0;font-size:16px;color:var(--sn-fg)}
  .snav-links.open a::after{display:none}
  body.snav-pad{padding-top:74px}
}
.snav-links .snav-mobile-only{display:none}
@media (max-width:900px){.snav-links.open .snav-mobile-only{display:list-item}}
@media (max-width:420px){
  .snav-btn{padding:9px 12px}
}
@media (prefers-reduced-motion: reduce){
  .snav,.snav *{transition:none !important}
}