:root{
  --bg:#07080b;
  --fg:#f3f4f6;
  --muted:rgba(243,244,246,.74);
  --line:rgba(243,244,246,.14);
  --glass:rgba(8,10,14,.56);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background:var(--bg);
  color:var(--fg);
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

.header{
  position:fixed;left:0;top:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(to bottom, rgba(7,8,11,.78), rgba(7,8,11,0));
  z-index:50;
}

.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:100%;height:80px}
.brand-name{font-weight:700;letter-spacing:.02em}

.nav{display:flex;align-items:center;gap:16px}
.nav a{opacity:.86}
.nav a:hover{opacity:1}
.nav-cta{
  padding:10px 12px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.04);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  transition: background .15s ease, transform .15s ease;
}
.btn:hover{background:rgba(255,255,255,.12); transform: translateY(-1px)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

.section-title{font-size:22px;margin:0 0 14px}

.footer{border-top:1px solid var(--line);padding:26px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-brand{font-weight:700;letter-spacing:.02em}
.footer-copy{opacity:.66;margin-top:6px}
.footer-right{display:flex;gap:14px;opacity:.86}
.footer-right a:hover{opacity:1}

/* ===== Header SP fallback (wrap) ===== */
@media (max-width: 860px){
  .header{
    padding: 10px 12px;
  }
  .brand-logo{width:100%;height:40px}

  .nav{
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-end;
  }

  .nav a{
    font-size: 13px;
    padding: 8px 10px;
  }

  .nav-cta{
    padding: 8px 12px;
    border-radius: 999px;
  }
}
