/* ==========================================================
   NEURON WORX — Design System v6
   Black base · white contrast · orange accent
   "ごちゃごちゃかつ綺麗" editorial energy
========================================================== */

:root {
  --bg:       #080808;
  --bg-1:     #0e0e0e;
  --bg-2:     #141414;
  --bg-3:     #1c1c1c;
  --ink:      #f0ede5;
  --ink-2:    #888888;
  --ink-3:    #444444;
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.14);
  --white:    #f0ede5;

  --orange:   #252745;
  --orange-2: #3a3d70;

  --accent:   var(--orange);
  --accent-2: var(--orange-2);

  --sans:     "Inter","Noto Sans JP",system-ui,sans-serif;
  --serif:    "Bodoni Moda","Noto Serif JP",serif;
  --serif-jp: "Noto Serif JP",serif;
  --mono:     "JetBrains Mono",ui-monospace,monospace;

  --display:        var(--sans);
  --display-style:  normal;
  --display-weight: 900;

  --motion: 2;
  --max: 1400px;
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt","pkna";
  /* 日本語組版: 句読点・助詞の位置で自然に折り返す */
  word-break:auto-phrase;
  overflow-wrap:break-word;
  line-break:strict;
}
/* 見出し: 行末バランスを均等に保つ */
h1,h2,h3,h4{
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
}
/* 本文段落: 読みやすい位置で折り返す */
p{
  text-wrap:pretty;
  word-break:auto-phrase;
  overflow-wrap:break-word;
}
::selection{background:var(--accent);color:#000;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ─── Nav ─── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--line);
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(16px);
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.logo-mark{width:18px;height:18px;}
.logo-mark svg{width:100%;height:100%;display:block;}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-contact{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 18px;background:var(--accent);color:#fff;
  border:none;cursor:pointer;transition:background .15s;
}
.nav-contact:hover{background:var(--orange-2);}
.nav-hamburger{
  width:40px;height:40px;background:var(--bg-3);border:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:background .15s;
}
.nav-hamburger:hover{background:var(--accent);}
.nav-hamburger span{display:block;width:15px;height:1.5px;background:var(--ink);}

/* ─── Menu overlay ─── */
.menu-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:72px 48px;
  pointer-events:none;opacity:0;
  transition:opacity .3s ease;
}
.menu-overlay.open{opacity:1;pointer-events:all;}
.menu-close{
  position:absolute;top:14px;right:28px;
  font-family:var(--sans);font-size:24px;font-weight:300;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:8px;
  opacity:.5;transition:opacity .15s;
}
.menu-close:hover{opacity:1;}
.menu-links{list-style:none;}
.menu-links li{overflow:hidden;border-bottom:1px solid var(--line);}
.menu-links a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(32px,6vw,88px);
  letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink);line-height:1;padding:.12em 0;
  transform:translateY(110%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),color .15s;
}
.menu-overlay.open .menu-links a{transform:translateY(0);}
.menu-links li:nth-child(1) a{transition-delay:.04s;}
.menu-links li:nth-child(2) a{transition-delay:.07s;}
.menu-links li:nth-child(3) a{transition-delay:.10s;}
.menu-links li:nth-child(4) a{transition-delay:.13s;}
.menu-links li:nth-child(5) a{transition-delay:.16s;}
.menu-links li:nth-child(6) a{transition-delay:.19s;}
.menu-links li:nth-child(7) a{transition-delay:.22s;}
.menu-links li:nth-child(8) a{transition-delay:.25s;}
.menu-links li:nth-child(9) a{transition-delay:.28s;}
.menu-links a:hover{color:var(--accent);}
.menu-links a .arr{font-size:.45em;opacity:.35;transition:opacity .15s;}
.menu-links a:hover .arr{opacity:1;color:var(--accent);}
.menu-foot{
  position:absolute;bottom:28px;left:48px;right:48px;
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ─── Layout ─── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}
main{position:relative;z-index:1;}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  padding:13px 26px;border:1px solid var(--line-2);
  color:var(--ink);cursor:pointer;transition:all .2s;
}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn.primary:hover{background:var(--orange-2);border-color:var(--orange-2);}

/* ─── Reveal ─── */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:none;}

/* ─── Page transition ─── */
.page-trans{
  position:fixed;inset:0;z-index:190;background:var(--accent);
  pointer-events:none;transform:translateY(100%);
  transition:transform .5s cubic-bezier(.77,0,.18,1);
}
.page-trans.enter{transform:translateY(0);}

/* ─── Tweaks ─── */
.tweaks{
  position:fixed;right:20px;bottom:20px;z-index:80;width:268px;
  background:var(--bg-2);border:1px solid var(--line-2);
  padding:14px;font-family:var(--mono);display:none;
}
.tweaks.active{display:block;}
.tweaks h4{font-size:10px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:12px;display:flex;justify-content:space-between;text-transform:uppercase;}
.tweaks h4 .close{cursor:pointer;}
.tw-row{margin-bottom:10px;}
.tw-row .label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:5px;}
.tw-opts{display:flex;flex-wrap:wrap;gap:4px;}
.tw-opt{padding:4px 9px;border:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s;background:none;}
.tw-opt:hover{border-color:var(--ink-2);color:var(--ink);}
.tw-opt.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ─── Footer ─── */
.site-footer{
  border-top:1px solid var(--line);padding:72px 0 48px;
  position:relative;z-index:1;background:var(--bg);
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  max-width:var(--max);margin:0 auto;padding:0 48px;
}
.footer-grid h5{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;margin-bottom:16px;}
.footer-grid ul{list-style:none;display:grid;gap:9px;}
.footer-grid ul li a{font-family:var(--sans);font-size:13px;color:var(--ink-3);transition:color .2s;}
.footer-grid ul li a:hover{color:var(--accent);}
.footer-copy{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--max);margin:48px auto 0;padding:28px 48px 0;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;
}

/* ─── Responsive ─── */
@media(max-width:900px){
  .site-nav{padding:0 16px;}
  .wrap{padding:0 20px;}
  .menu-overlay{padding:64px 20px 56px;}
  .menu-foot{left:20px;right:20px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;padding:0 20px;}
  .footer-copy{padding:24px 20px 0;flex-direction:column;gap:8px;text-align:center;}
  /* ボタンのタッチターゲットを確保 */
  .btn{padding:14px 22px;}
  .nav-contact{padding:9px 14px;font-size:10px;letter-spacing:.14em;}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:24px;}
  .menu-links a{font-size:clamp(26px,8vw,40px);}
  .menu-overlay{justify-content:flex-start;padding-top:80px;}
}
@media(max-width:480px){
  .site-nav{height:48px;}
  .logo{font-size:10px;}
  .nav-contact{display:none;}
}