:root{
  --midnight:#070B14;
  --surface:#0D1526;
  --surface-2:#111C31;
  --line:#1C2842;
  --blue:#2563EB;
  --blue-soft:#5B8DEF;
  --cyan:#22D3EE;
  --violet:#7C3AED;
  --cloud:#F8FAFC;
  --gray:#E2E8F0;
  --muted:#94A3B8;
  --radius:16px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--midnight);color:var(--cloud);
  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;
}
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:.28;
  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:rgba(7,11,20,.82);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}
.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(--cloud)}
.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:28px;font-size:15px;color:var(--gray)}
.nav-links>a{color:var(--muted);transition:color .2s}
.nav-links>a:hover{color:var(--cloud)}
.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(--cloud)}
.lang button[aria-current="true"]{background:var(--blue);color:#fff}

/* 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(--cyan);font-weight:600;margin-bottom:22px;
}
h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.035em}
.lead{color:var(--gray);opacity:.82;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;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#1D4FD8}
.btn-ghost{border:1px solid var(--line);color:var(--gray)}
.btn-ghost:hover{border-color:var(--blue-soft);color:#fff}
.hero-art{display:flex;justify-content:center}
.signal-grid{width:100%;max-width:420px;height:auto}
.flow{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)}
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(--gray);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;
}
.pillar:hover{border-color:#2A3B60;transform:translateY(-2px)}
.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;
}
.product.live{
  grid-column:1 / -1;
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 60%);
  border-color:#25406E;
}
.product.live:hover{border-color:var(--blue);transform:translateY(-2px)}
.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:rgba(34,211,238,.35);color:var(--cyan);background:rgba(34,211,238,.08)}
.product h3{font-size:26px}
.product .sub{font-size:16px;font-weight:400;color:var(--muted)}
.product-desc{margin-top:14px;color:var(--gray);opacity:.85;max-width:640px}
.product-more{
  margin-top:12px;color:var(--cyan);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:.9;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:.62}
.product.soon h3{font-size:20px;color:var(--muted);font-family:Inter,sans-serif}
.product.soon .product-desc{font-size:15px}

/* 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}

.site-footer{
  margin-top:40px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(13,21,38,.55) 0%,rgba(7,11,20,0) 70%);
}
.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(--gray);opacity:.7;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(--cyan);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(--gray);opacity:.78;font-size:15px;width:fit-content;transition:opacity .2s,color .2s}
.f-col a:hover{opacity:1;color:#fff}
.f-muted{color:var(--muted);font-size:15px;opacity:.6}
.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:.75;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:.9;max-height:120px}
}

.section{scroll-margin-top:100px}

.product-brand{display:flex;align-items:center;gap:16px}
.plogo{width:56px;height:56px;border-radius:14px;flex:0 0 auto;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ptag{display:block;margin-top:4px;font-size:14px;color:#E5C55A;letter-spacing:.02em}
@media(max-width:900px){.plogo{width:46px;height:46px}}