/* Shared Koe navigation + i18n toggle */
html[data-lang="ja"] .en { display: none !important; }
html[data-lang="en"] .ja { display: none !important; }

.koe-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:0.85rem 1.5rem;
  background:rgba(10,15,26,0.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.07);
  font-family:-apple-system,'Helvetica Neue','Hiragino Sans',sans-serif;
}
.koe-nav .koe-logo{
  font-size:1rem;font-weight:300;letter-spacing:0.3em;
  color:#f3f4f6;text-decoration:none;flex-shrink:0;
}
.koe-nav .koe-logo span{color:#10B981;font-weight:500}
.koe-nav-links{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;flex:1;padding:0 1.2rem}
.koe-nav-links a{
  font-size:0.8rem;color:#9ca3af;text-decoration:none;
  transition:color 0.15s;white-space:nowrap;
}
.koe-nav-links a:hover,
.koe-nav-links a.active{color:#f3f4f6}
.koe-nav-links a.active{position:relative}
.koe-nav-links a.active::after{
  content:'';position:absolute;bottom:-6px;left:0;right:0;
  height:2px;background:#10B981;border-radius:2px;
}
.koe-nav-right{display:flex;align-items:center;gap:0.8rem;flex-shrink:0}
.koe-lang-btn{
  font:inherit;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;
  color:#f3f4f6;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  padding:0.4rem 0.7rem;border-radius:999px;
  cursor:pointer;transition:all 0.15s;
}
.koe-lang-btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3)}
.koe-cta{
  font-size:0.75rem;color:#0a0f1a;
  background:linear-gradient(135deg,#10B981,#6366f1);
  padding:0.48rem 0.95rem;border-radius:999px;
  text-decoration:none;font-weight:600;
  transition:transform 0.15s, box-shadow 0.15s;
}
.koe-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,185,129,0.35)}

@media (max-width: 900px){
  .koe-nav-links{gap:0.8rem;font-size:0.75rem}
  .koe-nav-links a{font-size:0.72rem}
}
@media (max-width: 640px){
  .koe-nav{padding:0.7rem 1rem;flex-wrap:wrap}
  .koe-nav-links{order:3;width:100%;padding:0.5rem 0 0;gap:0.6rem;overflow-x:auto;flex-wrap:nowrap}
  .koe-nav-links::-webkit-scrollbar{display:none}
}

/* Body padding to avoid content under fixed nav */
body.koe-with-nav{padding-top:64px}
@media (max-width:640px){ body.koe-with-nav{padding-top:96px} }