:root { color-scheme: dark; --ink:#eaf1f7; --muted:#8ea1b5; --line:rgba(179,203,224,.14); --cyan:#64e5d1; --blue:#5a8cff; font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:#07111f; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); background:linear-gradient(rgba(112,154,191,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(112,154,191,.04) 1px,transparent 1px),radial-gradient(circle at 50% 10%,#112942 0,#07111f 44%,#050b14 100%); background-size:64px 64px,64px 64px,auto; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.35)); }
.ambient { position:fixed; border-radius:50%; filter:blur(1px); opacity:.3; pointer-events:none; }
.ambient-one { width:36rem; height:36rem; left:-22rem; top:18%; border:1px solid rgba(100,229,209,.35); box-shadow:0 0 100px rgba(100,229,209,.08); }
.ambient-two { width:46rem; height:46rem; right:-29rem; top:-18rem; border:1px solid rgba(90,140,255,.3); box-shadow:0 0 110px rgba(90,140,255,.09); }
.site-header,footer { position:relative; z-index:2; width:min(1180px,calc(100% - 48px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.site-header { height:92px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-size:.98rem; font-weight:750; letter-spacing:.14em; }
.brand-mark { display:inline-flex; align-items:end; gap:3px; width:24px; height:22px; }
.brand-mark i { display:block; width:5px; border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,var(--cyan),var(--blue)); transform:skew(-13deg); }
.brand-mark i:nth-child(1) { height:10px; opacity:.65; } .brand-mark i:nth-child(2) { height:16px; opacity:.82; } .brand-mark i:nth-child(3) { height:22px; }
.status { display:inline-flex; align-items:center; gap:9px; color:var(--muted); font:600 .68rem/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 2.5s ease-in-out infinite; }
main { position:relative; z-index:1; min-height:calc(100vh - 188px); display:grid; place-items:center; }
.hero { width:min(1040px,calc(100% - 48px)); padding:88px 0 80px; text-align:center; }
.eyebrow { margin:0 0 30px; color:var(--cyan); font:650 .7rem/1.5 Inter,sans-serif; letter-spacing:.3em; }
h1 { margin:0; font-size:clamp(2.6rem,6.6vw,5.5rem); line-height:1.2; letter-spacing:-.045em; font-weight:650; }
h1 em { color:transparent; font-style:normal; background:linear-gradient(105deg,#f1f7fb 8%,#93ebdf 50%,#78a0ff); background-clip:text; -webkit-background-clip:text; }
.lead { margin:36px auto 0; color:var(--muted); font-size:clamp(.95rem,1.5vw,1.08rem); line-height:2; letter-spacing:.055em; }
.signals { width:min(760px,100%); margin:70px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.signal { position:relative; padding:25px 18px 26px; display:grid; gap:7px; }
.signal + .signal { border-left:1px solid var(--line); }
.signal span { position:absolute; top:10px; left:12px; color:rgba(142,161,181,.45); font:500 .58rem/1 Inter,sans-serif; }
.signal strong { font:600 .85rem/1.4 Inter,sans-serif; letter-spacing:.14em; }
.signal small { color:var(--muted); font-size:.72rem; letter-spacing:.08em; }
footer { height:96px; color:rgba(142,161,181,.62); font:500 .64rem/1.5 Inter,sans-serif; letter-spacing:.11em; text-transform:uppercase; border-top:1px solid var(--line); }
@keyframes pulse { 50% { opacity:.45; transform:scale(.85); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; } }
@media (max-width:640px) {
  .site-header,footer,.hero { width:min(100% - 32px,1040px); } .site-header { height:76px; }
  .status { font-size:.58rem; letter-spacing:.09em; } main { min-height:calc(100vh - 164px); }
  .hero { padding:62px 0 56px; } .eyebrow { margin-bottom:22px; font-size:.6rem; letter-spacing:.2em; }
  h1 { font-size:clamp(2.35rem,12vw,3.35rem); } .lead { margin-top:28px; line-height:1.9; } .desktop-only { display:none; }
  .signals { margin-top:48px; } .signal { padding:24px 5px 22px; } .signal span { display:none; }
  .signal strong { font-size:.7rem; letter-spacing:.05em; } .signal small { font-size:.62rem; letter-spacing:0; }
  footer { height:88px; } footer p:first-child { display:none; }
}