/* ---------- design tokens ----------
   Koto Labs VI v2.0 · Midnight #070B14 / Electric Blue #2563EB / Signal Cyan #22D3EE
   ライト = 既定、ダーク = システム設定または手動切替                              */
:root{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#EEF3FB;
  --line:#DDE4EE;
  --line-hover:#B9C7DD;
  --text:#070B14;
  --text-2:#334155;
  --muted:#64748B;
  --blue:#2563EB;
  --blue-soft:#1D4FD8;
  --accent:#0E7490;          /* テキスト用の信号青（コントラスト確保） */
  --node:#0891B2;            /* 図形ノード */
  --gold:#8A6A15;
  --nav-bg:rgba(248,250,252,.82);
  --grid-op:.5;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow-logo:0 6px 20px rgba(15,23,42,.18);
  --footer-grad:linear-gradient(180deg,rgba(226,232,240,.5) 0%,rgba(248,250,252,0) 70%);
  --live-grad:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 62%);
  --live-border:#BBD0F5;
  --badge-live-bg:rgba(8,145,178,.08);
  --badge-live-border:rgba(8,145,178,.35);
  --btn-hover:#1D4FD8;
  --radius:16px;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070B14;
    --surface:#0D1526;
    --surface-2:#111C31;
    --line:#1C2842;
    --line-hover:#2A3B60;
    --text:#F8FAFC;
    --text-2:#CBD5E1;
    --muted:#94A3B8;
    --blue:#2563EB;
    --blue-soft:#5B8DEF;
    --accent:#22D3EE;
    --node:#22D3EE;
    --gold:#E5C55A;
    --nav-bg:rgba(7,11,20,.82);
    --grid-op:.28;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadow-logo:0 6px 20px rgba(0,0,0,.35);
    --footer-grad:linear-gradient(180deg,rgba(13,21,38,.55) 0%,rgba(7,11,20,0) 70%);
    --live-grad:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 60%);
    --live-border:#25406E;
    --badge-live-bg:rgba(34,211,238,.08);
    --badge-live-border:rgba(34,211,238,.35);
    --btn-hover:#1D4FD8;
  }
}
:root[data-theme="dark"]{
  --bg:#070B14;
  --surface:#0D1526;
  --surface-2:#111C31;
  --line:#1C2842;
  --line-hover:#2A3B60;
  --text:#F8FAFC;
  --text-2:#CBD5E1;
  --muted:#94A3B8;
  --blue:#2563EB;
  --blue-soft:#5B8DEF;
  --accent:#22D3EE;
  --node:#22D3EE;
  --gold:#E5C55A;
  --nav-bg:rgba(7,11,20,.82);
  --grid-op:.28;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-logo:0 6px 20px rgba(0,0,0,.35);
  --footer-grad:linear-gradient(180deg,rgba(13,21,38,.55) 0%,rgba(7,11,20,0) 70%);
  --live-grad:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 60%);
  --live-border:#25406E;
  --badge-live-bg:rgba(34,211,238,.08);
  --badge-live-border:rgba(34,211,238,.35);
  --btn-hover:#1D4FD8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,"Noto Sans JP","Noto Sans SC","Hiragino Sans","PingFang SC",system-ui,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease,color .3s ease;
}
html[lang="ja"] body{font-family:"Noto Sans JP",Inter,"Hiragino Sans",system-ui,sans-serif}
html[lang="zh"] body{font-family:"Noto Sans SC",Inter,"PingFang SC",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:600;line-height:1.18}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* background signal grid */
.grid-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;opacity:var(--grid-op);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);max-width:none;padding:0;display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;border-bottom:1px solid transparent}
.nav-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.mark{width:30px;height:30px;display:block}
.wordmark{font-size:20px;font-weight:600;letter-spacing:-.03em;font-family:Inter,sans-serif}
.nav-links{display:flex;align-items:center;gap:24px;font-size:15px;color:var(--text-2)}
.nav-links>a{color:var(--muted);transition:color .2s}
.nav-links>a:hover{color:var(--text)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{
  background:none;border:0;color:var(--muted);font:inherit;font-size:13px;
  padding:6px 14px;cursor:pointer;transition:background .2s,color .2s;
}
.lang button:hover{color:var(--text)}
.lang button[aria-current="true"]{background:var(--blue);color:#fff}

/* theme toggle */
.theme-toggle{
  display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);
  cursor:pointer;transition:color .2s,border-color .2s;
}
.theme-toggle:hover{color:var(--text);border-color:var(--line-hover)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:none}
}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:64px;padding:96px 28px 120px}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:22px;
}
h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.035em}
.lead{color:var(--text-2);font-size:18px;margin-top:26px;max-width:620px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn{
  display:inline-block;padding:13px 24px;border-radius:10px;font-size:15px;font-weight:600;
  transition:transform .18s,background .2s,border-color .2s,color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{border:1px solid var(--line);color:var(--text-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--text)}
.hero-art{display:flex;justify-content:center}
.signal-grid{width:100%;max-width:420px;height:auto}
.sg-grid{stroke:var(--line)}
.sg-node{fill:var(--blue)}
.sg-out{fill:var(--node)}
.flow{stroke:var(--blue);stroke-dasharray:700;stroke-dashoffset:700;animation:draw 2.4s cubic-bezier(.65,0,.35,1) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pulse{animation:pulse 2.6s ease-in-out 2.4s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.flow{animation:none;stroke-dashoffset:0}.pulse{animation:none}}

/* sections */
.section{padding:110px 28px;border-top:1px solid var(--line);scroll-margin-top:100px}
h2{font-size:clamp(28px,3.4vw,42px)}
.statements{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.statements p{
  color:var(--text-2);font-size:19px;line-height:1.6;
  padding-left:20px;border-left:2px solid var(--blue);
}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:72px}
.pillar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .25s,transform .25s,box-shadow .25s;
}
.pillar:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:var(--shadow)}
.pillar b{display:block;font-size:11px;letter-spacing:.14em;color:var(--blue-soft);font-family:Inter,sans-serif}
.pillar h3{font-size:19px;margin:14px 0 10px}
.pillar p{font-size:15px;color:var(--muted);line-height:1.7}

/* products */
#products .lead{margin-top:20px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.product{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;
  min-height:230px;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s;
}
.product.live{
  grid-column:1 / -1;
  background:var(--live-grad);
  border-color:var(--live-border);
}
.product.live:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.product-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.idx{font-family:Inter,sans-serif;font-size:13px;color:var(--muted);letter-spacing:.1em}
.badge{
  font-size:11px;letter-spacing:.1em;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);
}
.badge-live{border-color:var(--badge-live-border);color:var(--accent);background:var(--badge-live-bg)}
.product h3{font-size:26px}
.product .sub{font-size:16px;font-weight:400;color:var(--muted)}
.product-brand{display:flex;align-items:center;gap:16px}
.plogo{width:56px;height:56px;border-radius:14px;flex:0 0 auto;box-shadow:var(--shadow-logo)}
.ptag{display:block;margin-top:4px;font-size:14px;color:var(--gold);letter-spacing:.02em}
.product-desc{margin-top:14px;color:var(--text-2);max-width:640px}
.product-more{
  margin-top:12px;color:var(--accent);font-size:15px;max-width:640px;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s;
}
.product.live:hover .product-more,.product.live:focus-visible .product-more{opacity:1;max-height:120px}
.go{margin-top:auto;padding-top:22px;color:var(--blue-soft);font-size:15px;font-weight:600;font-family:Inter,sans-serif}
.product.soon{opacity:.72}
.product.soon h3{font-size:20px;color:var(--muted);font-family:Inter,sans-serif}
.product.soon .product-desc{font-size:15px;color:var(--muted)}

/* contact */
.contact-box{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:52px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.contact-box .lead{margin-top:14px}

/* footer */
.site-footer{
  margin-top:40px;border-top:1px solid var(--line);
  background:var(--footer-grad);
}
.footer-top{
  display:grid;grid-template-columns:1.6fr .8fr .8fr 1.1fr;gap:40px;
  padding-top:64px;padding-bottom:52px;
}
.f-brand .brand{margin-bottom:18px}
.f-slogan{color:var(--text-2);font-size:15px;max-width:320px}
.f-loc{display:flex;align-items:center;gap:9px;margin-top:16px;color:var(--muted);font-size:14px}
.f-loc .dot{width:8px;height:8px;background:var(--node);display:inline-block;flex:0 0 auto}
.f-col{display:flex;flex-direction:column;gap:12px}
.f-col h4{
  margin:0 0 4px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-family:Inter,sans-serif;
}
.f-col a{color:var(--text-2);font-size:15px;width:fit-content;transition:color .2s}
.f-col a:hover{color:var(--blue)}
.f-muted{color:var(--muted);font-size:15px;opacity:.75}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:44px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;
}
.f-note{letter-spacing:.14em;text-transform:uppercase;font-size:11px;opacity:.8;font-family:Inter,sans-serif}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:48px;padding:64px 28px 88px}
  .hero-art{order:-1;max-width:300px}
  .statements,.pillars,.products{grid-template-columns:1fr}
  .section{padding:76px 28px}
  .contact-box{padding:34px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px;padding-top:48px;padding-bottom:40px}
  .f-brand{grid-column:1 / -1}
  .footer-bottom{padding-bottom:36px}
  .nav-links>a{display:none}
  .product-more{opacity:1;max-height:120px}
  .plogo{width:46px;height:46px}
}