:root{
  --bg:#0b0e13; --bg2:#0f141b; --panel:#141b24; --line:#222c38; --fg:#e8eef5; --muted:#8fa0b3;
  --acc:#4cc2ff; --acc2:#7c5cff; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.8 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{line-height:1.3;margin:0}
.muted{color:var(--muted)}.small{font-size:13px}.mini{font-size:13px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px max(16px,calc((100vw - var(--maxw))/2));backdrop-filter:blur(14px);background:rgba(11,14,19,.72);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.02em}
.mark{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 0 18px rgba(76,194,255,.45)}
.navlinks{display:flex;align-items:center;gap:20px;font-size:14px}
.navlinks a{color:var(--muted);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--fg)}
.cta{display:inline-block;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#08131c;font-weight:700;text-decoration:none;
  border-radius:999px;padding:11px 22px;box-shadow:0 8px 24px rgba(76,194,255,.25);transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(76,194,255,.35)}
.cta.small{padding:7px 16px;font-size:13px;box-shadow:none;background:rgba(76,194,255,.14);color:var(--acc);border:1px solid rgba(76,194,255,.55)}
.cta.small:hover{background:rgba(76,194,255,.22);transform:none}
.cta.big,.ghost.big{padding:14px 28px;font-size:16px}
.ghost{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:11px 22px;text-decoration:none;color:var(--fg);transition:border-color .2s,background .2s}
.ghost:hover{border-color:var(--acc);background:rgba(76,194,255,.07)}
@media (max-width:860px){.navlinks a:not(.cta){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px max(16px,calc((100vw - var(--maxw))/2)) 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:70vh;
  background:radial-gradient(60% 60% at 30% 20%,rgba(76,194,255,.16),transparent 70%),radial-gradient(50% 50% at 75% 10%,rgba(124,92,255,.16),transparent 70%);filter:blur(10px);pointer-events:none}
.heroinner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{margin:0 0 14px;color:var(--acc);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
h1{font-size:clamp(34px,5vw,58px);font-weight:900;letter-spacing:-.03em;word-break:keep-all}
.strike{position:relative;display:inline-block;white-space:nowrap;color:var(--muted)}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:5px;border-radius:3px;background:var(--bad);transform:rotate(-2deg) scaleX(0);transform-origin:left;animation:strike .7s .5s forwards cubic-bezier(.2,.7,.3,1)}
@keyframes strike{to{transform:rotate(-2deg) scaleX(1)}}
.grad{background:linear-gradient(120deg,var(--acc),var(--acc2) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,1.6vw,19px);color:#c6d3e1;margin:20px 0 26px}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* hero demo panel */
.herodemo{display:flex;flex-direction:column;gap:14px}
.panelcard{background:linear-gradient(180deg,var(--panel),#101720);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.pcHead{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.dot{width:9px;height:9px;border-radius:50%;background:#2b3644}
.pcTitle{margin-left:8px;font-size:12px;color:var(--muted)}
.pcQ{font-size:15px;font-weight:700;margin-bottom:10px}
.pcBars{display:flex;flex-direction:column;gap:7px}
.pcBar{display:grid;grid-template-columns:96px 1fr 44px;gap:10px;align-items:center;font-size:13px}
.pcBar .track{height:12px;border-radius:6px;background:#0a0f16;overflow:hidden}
.pcBar .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--acc2));width:0;transition:width .8s cubic-bezier(.2,.7,.3,1)}
.pcBar.dim .fill{background:#2f3d4d}
.pcBar .pct{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.pcFoot{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px}
.badge{background:rgba(63,185,80,.14);color:var(--ok);border-radius:999px;padding:2px 12px;font-weight:700}
.vs{background:rgba(20,27,36,.5);border:1px dashed var(--line);border-radius:14px;padding:12px 14px}
.vsRow{display:flex;align-items:center;gap:10px;min-width:0}
.vsTag{font-size:11px;border-radius:999px;padding:2px 10px;background:#2a2230;color:#c0a5ff;white-space:nowrap}
.typing{font-size:13px;color:#b9c6d4;font-family:ui-monospace,monospace;overflow:hidden;white-space:nowrap;min-width:0;flex:1;text-overflow:clip}
.caret{display:inline-block;width:7px;height:14px;background:var(--muted);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.vsNote{font-size:11px;margin-top:6px}
.scroll{text-align:center;color:var(--muted);margin-top:30px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media (max-width:920px){.heroinner{grid-template-columns:1fr;gap:32px}.hero{padding-top:44px}}
@media (max-width:520px){
  .pcBar{grid-template-columns:78px 1fr 38px;font-size:12px}
  .lede{font-size:15px}
  .herobtns .cta,.herobtns .ghost{padding:10px 18px}
  .nav{padding:10px 14px}
  .sec{padding:56px 14px}
  .footer{padding:24px 14px}
}

/* ---------- band ---------- */
.band{border-block:1px solid var(--line);background:var(--bg2)}
.bandinner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 16px}
.bandItem{text-align:center}
.bandItem b{display:block;font-size:22px;background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bandItem span{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.bandinner{grid-template-columns:repeat(2,1fr);gap:16px}}

/* ---------- sections ---------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:84px 16px}
.sec.alt{max-width:none;background:var(--bg2);border-block:1px solid var(--line)}
.sec.alt > *{max-width:var(--maxw);margin-inline:auto}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em}
.sub{color:var(--muted);margin:10px 0 34px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.on{opacity:1;transform:none}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.step .num{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:800;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(76,194,255,.2),rgba(124,92,255,.2));color:var(--acc);border:1px solid var(--line)}
.step h3{font-size:17px;margin-bottom:8px}
.step p{margin:0;font-size:14px;color:#bccadb}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.col{border-radius:14px;padding:20px 22px;border:1px solid var(--line)}
.col h4{font-size:15px;margin-bottom:10px}
.col ul{margin:0;padding-left:18px;font-size:14px;color:#bccadb}
.col li{margin:6px 0}
.col.bad{background:rgba(248,81,73,.05);border-color:rgba(248,81,73,.25)}
.col.bad h4{color:#ff9a94}
.col.good{background:rgba(63,185,80,.06);border-color:rgba(63,185,80,.28)}
.col.good h4{color:var(--ok)}
@media (max-width:820px){.steps,.compare{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.card .big{font-size:34px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.card .big span{font-size:17px}.card .big small{font-size:13px;color:var(--muted);-webkit-text-fill-color:var(--muted);margin:0 4px}
.card h4{font-size:14px;margin:6px 0 6px}
.card p{margin:0;font-size:13px;color:var(--muted);line-height:1.7}
.foot{margin-top:18px;font-size:12.5px}
.foot a{color:var(--acc)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}

.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.demo{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.demo:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.thumb{height:104px;position:relative;overflow:hidden}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(20,27,36,.9))}
.t1{background:linear-gradient(135deg,#123 0%,#1b2e46 100%);}
.t1::before{content:"";position:absolute;inset:18px 24px;background:
  linear-gradient(90deg,var(--acc) 62%,transparent 62%) top/100% 9px no-repeat,
  linear-gradient(90deg,var(--ok) 24%,transparent 24%) center/100% 9px no-repeat,
  linear-gradient(90deg,var(--warn) 12%,transparent 12%) bottom/100% 9px no-repeat;opacity:.9;border-radius:4px}
.t2{background:linear-gradient(135deg,#10202c,#16304a)}
.t2::before{content:"";position:absolute;inset:0;background:
  radial-gradient(4px 4px at 22% 60%,#fff,transparent),radial-gradient(4px 4px at 45% 40%,#fff,transparent),
  radial-gradient(4px 4px at 68% 62%,#fff,transparent),radial-gradient(4px 4px at 86% 34%,#fff,transparent),
  linear-gradient(72deg,transparent 46%,var(--acc) 46.6%,var(--acc) 48%,transparent 48.6%)}
.t3{background:linear-gradient(135deg,#0f2430,#13394a)}
.t3::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(-14deg,rgba(76,194,255,.28) 0 7px,transparent 7px 22px)}
.t4{background:linear-gradient(135deg,#1a1630,#2a2350)}
.t4::before{content:"";position:absolute;left:50%;top:52%;width:62px;height:62px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid rgba(124,92,255,.85);
  box-shadow:0 0 0 10px rgba(124,92,255,.12)}
.t5{background:linear-gradient(135deg,#0f1f22,#14343a)}
.t5::before{content:"";position:absolute;left:38%;top:34%;width:56px;height:36px;border-radius:7px;background:var(--acc);opacity:.85}
.t5::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(20,27,36,.9))}
.demo h3{font-size:16px;padding:16px 18px 0}
.demo p{margin:8px 18px 14px;font-size:13.5px;color:var(--muted);flex:1;line-height:1.75}
.demo .go{padding:0 18px 16px;color:var(--acc);font-size:13px;font-weight:700}
@media (max-width:980px){.demos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.demos{grid-template-columns:1fr}}

.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.use{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.use h4{font-size:15px;margin-bottom:8px;color:var(--acc)}
.use p{margin:0;font-size:13.5px;color:#bccadb}
@media (max-width:980px){.uses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.uses{grid-template-columns:1fr}}

.cta-sec{text-align:center}
.ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

.footer{border-top:1px solid var(--line);background:var(--bg2);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:30px max(16px,calc((100vw - var(--maxw))/2))}
.footer p{margin:6px 0 0}

/* アプリ配布のブロック (デモ一覧の下) */
.applink{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:28px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.applink h3{margin:0 0 6px}
.applink p{margin:0 0 4px;max-width:62ch}
@media (max-width:640px){.applink{flex-direction:column;align-items:flex-start}}