*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --void:    #08142E;
  --deep:    #0E2147;
  --cobalt:  #1B5FD4;
  --ice:     #5BA8FF;
  --frost:   #C2DEFF;
  --mist:    #EBF3FF;
  --fog:     #F4F7FC;
  --white:   #FFFFFF;
  --border:  rgba(91,168,255,0.15);
  --border2: rgba(91,168,255,0.08);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── ACCESSIBILITY ────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--cobalt); color: var(--white); font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: 0 0 8px 8px; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
.scroll-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cobalt); color: var(--white);
  border: 1px solid var(--ice); cursor: pointer;
  box-shadow: 0 8px 24px rgba(8,20,46,0.4);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--ice); }
body { font-family: 'Inter', sans-serif; background: var(--void); color: var(--white); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.en-headline { font-size: clamp(46px, 7vw, 88px); }
.en-h2 { font-size: clamp(28px, 4vw, 46px); }
.eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); opacity: 0.85; }

/* ── SCROLL REVEAL ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media(prefers-reduced-motion:reduce){ .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ── CUSTOM BLUE-DOT CURSOR ───────────────────────── */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
.cursor-dot { width: 8px; height: 8px; background: var(--ice); box-shadow: 0 0 10px rgba(91,168,255,0.7); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(91,168,255,0.5); transition: width 0.22s ease, height 0.22s ease, background 0.22s ease, border-color 0.22s ease; }
.cursor-ring.cursor-hover { width: 50px; height: 50px; background: rgba(91,168,255,0.12); border-color: rgba(91,168,255,0.8); }
@media(pointer:fine){ body { cursor: none; } body a, body button, body input, body .lang-btn, body .nav-toggle { cursor: none; } }
@media(pointer:coarse),(hover:none){ .cursor-dot, .cursor-ring { display: none; } }
/* Reduced motion: drop the custom cursor entirely and restore the native one */
@media(prefers-reduced-motion:reduce){
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
  body a, body .lang-btn { cursor: pointer; }
  body button, body .nav-toggle { cursor: pointer; }
  body input { cursor: text; }
}

/* ── LANGUAGE TOGGLE ──────────────────────────────── */
[data-ja], [data-en] { transition: opacity 0.25s; }
html[lang="ja"] [data-en] { display: none; }
html[lang="en"] [data-ja] { display: none; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.lang-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lang-btn.active {
  background: var(--cobalt);
  color: var(--white);
}

/* ── NAV ──────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(8,20,46,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border2);
}
.nav-left { display: flex; align-items: center; gap: 32px; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: var(--white); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-cta { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; background: var(--cobalt); color: var(--white); border: none; padding: 9px 22px; border-radius: 6px; cursor: pointer; text-decoration: none; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.85; }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 9px; }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--white); transition: transform 0.25s, opacity 0.25s; }
nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ─────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 120px 40px 116px; overflow: hidden; position: relative;
  background:
    radial-gradient(120% 85% at 78% 22%, rgba(27,95,212,0.22) 0%, transparent 55%),
    radial-gradient(100% 100% at 12% 95%, rgba(91,168,255,0.12) 0%, transparent 52%),
    var(--void); }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(91,168,255,0.10) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%); }
.hero::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -170px; top: -130px; pointer-events: none;
  background: radial-gradient(circle, rgba(91,168,255,0.16) 0%, transparent 65%);
  animation: glow-float 13s ease-in-out infinite; }
.hero-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,212,0.20) 0%, transparent 65%); top: 50%; right: -120px; transform: translateY(-50%); pointer-events: none; animation: glow-pulse 9s ease-in-out infinite; }
@keyframes glow-pulse { 0%,100%{ opacity: 0.8; transform: translateY(-50%) scale(1); } 50%{ opacity: 1; transform: translateY(-50%) scale(1.12); } }
@keyframes glow-float { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(48px,34px); } }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; max-width: 1180px; margin: 0 auto; width: 100%; }
html[lang="ja"] .hero-headline { font-size: clamp(38px, 5.8vw, 74px); }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ice); border: 1px solid rgba(91,168,255,0.3); padding: 6px 14px; border-radius: 20px; margin-bottom: 28px; }
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.hero-headline { color: var(--white); margin-bottom: 16px; }
.hero-headline .accent {
  color: var(--ice);
  background: linear-gradient(100deg, var(--ice) 0%, var(--ice) 38%, var(--mist) 50%, var(--ice) 62%, var(--ice) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accent-sheen 6s ease-in-out infinite;
}
@keyframes accent-sheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -60% 0; } }
.hero-sub { font-size: clamp(18px,2.4vw,26px); color: rgba(255,255,255,0.55); font-weight: 300; letter-spacing: -0.01em; margin-bottom: 28px; line-height: 1.5; }
.hero-body { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.75; margin-bottom: 44px; max-width: 440px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; background: var(--cobalt); color: var(--white); border: none; padding: 13px 28px; border-radius: 7px; cursor: pointer; text-decoration: none; transition: opacity 0.2s; display: inline-block; }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; background: transparent; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.18); padding: 13px 28px; border-radius: 7px; cursor: pointer; text-decoration: none; transition: border-color 0.2s, color 0.2s; display: inline-block; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.45); color: var(--white); }
.hero-mark-wrap { display: flex; align-items: center; justify-content: center; }

@keyframes bar-breathe { 0%,100%{transform:scaleY(1);opacity:var(--op-low)} 50%{transform:scaleY(1.38);opacity:var(--op-high)} }
.bar { transform-origin: center bottom; }
.b1{--op-low:.22;--op-high:.42;animation:bar-breathe 2.8s ease-in-out infinite 0.00s}
.b2{--op-low:.42;--op-high:.68;animation:bar-breathe 2.8s ease-in-out infinite 0.20s}
.b3{--op-low:.68;--op-high:1.0;animation:bar-breathe 2.8s ease-in-out infinite 0.40s}
.b4{--op-low:.42;--op-high:.68;animation:bar-breathe 2.8s ease-in-out infinite 0.60s}
.b5{--op-low:.22;--op-high:.42;animation:bar-breathe 2.8s ease-in-out infinite 0.80s}

/* ── HERO LIVE PLAYER ─────────────────────────────── */
.hero-player { position: relative; width: min(100%, 500px); perspective: 1100px; }
.hp-ping { position: absolute; left: 50%; top: 50%; width: min(500px, 96vw); aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(91,168,255,0.35); border-radius: 50%; pointer-events: none; animation: hp-ping 4.5s ease-out infinite; }
.hp-ping.p2 { animation-delay: 2.25s; }
@keyframes hp-ping { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.65; } 100% { transform: translate(-50%,-50%) scale(1.3); opacity: 0; } }
.hp-ambient { position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none; border-radius: 40px;
  background: radial-gradient(65% 65% at 50% 50%, rgba(27,95,212,0.45) 0%, rgba(91,168,255,0.12) 55%, transparent 75%);
  filter: blur(28px); animation: hp-ambient 7s ease-in-out infinite; }
@keyframes hp-ambient { 0%,100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.hp-device {
  position: relative; z-index: 1;
  background: #04070E; border: 1px solid rgba(91,168,255,0.28); border-radius: 12px; padding: 6px;
  box-shadow: 0 34px 80px rgba(2,6,18,0.7), 0 6px 18px rgba(2,6,18,0.5);
  transform-style: preserve-3d; transition: transform 0.18s ease-out;
}
.hp-device::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 2px; border-radius: 2px; background: var(--ice); opacity: 0.55; box-shadow: 0 0 5px rgba(91,168,255,0.9); }
.hp-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 26px; background: linear-gradient(180deg, rgba(4,7,14,0.85) 0%, rgba(4,7,14,0.35) 60%, transparent 100%);
  text-shadow: 0 1px 4px rgba(4,7,14,0.6); pointer-events: none; }
.hp-live { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.2em; color: #FF8080; }
.hp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF5C5C; box-shadow: 0 0 8px rgba(255,92,92,0.8); animation: blink 1.6s ease-in-out infinite; }
.hp-name { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-clock { margin-left: auto; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }
.hp-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: var(--void); cursor: pointer; container-type: inline-size; }
.hp-slide { position: absolute; inset: 0; display: flex; opacity: 0; transform: scale(1.03); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.hp-slide.is-active { opacity: 1; transform: none; }
.hp-slide-brand { flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(85% 90% at 50% 32%, rgba(27,95,212,0.35) 0%, transparent 70%), var(--void); }
.hp-brand-word { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--frost); }
.hp-slide-promo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 14% 10% 8%; background: linear-gradient(120deg, #1B5FD4 0%, #123A85 55%, #0E2147 100%); }
.hp-promo-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--frost); }
.hp-promo-big { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(38px, 11cqw, 54px); letter-spacing: -0.03em; line-height: 1.05; color: var(--white); }
.hp-promo-sub { font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); }
.hp-slide-info { flex-direction: column; justify-content: center; gap: 9px; padding: 13% 9% 7%; background: var(--void); }
.hp-info-head { font-size: 10px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ice); opacity: 0.8; margin-bottom: 4px; }
.hp-info-row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border2); padding-bottom: 8px; }
.hp-info-row b { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ice); }
.hp-info-row span { color: rgba(255,255,255,0.8); }
.hp-info-row i { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #4ADE80; }
.hp-slide-zones { padding: 13% 5% 5%; }
.hp-zones-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr auto; gap: 7px; width: 100%; }
.hp-zone { display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.24em; color: rgba(91,168,255,0.85); border: 1px dashed rgba(91,168,255,0.45); border-radius: 7px; background: rgba(27,95,212,0.12); }
.hp-zone.z-ticker { grid-column: 1 / 3; padding: 10px 0; }
.hp-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(4,7,14,0.5); overflow: hidden; }
.hp-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cobalt), var(--ice)); }
@keyframes hp-progress { from { width: 0; } to { width: 100%; } }
.hp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hp-dot { width: 22px; height: 4px; border: none; border-radius: 3px; background: rgba(91,168,255,0.22); cursor: pointer; padding: 0; transition: background 0.25s; }
.hp-dot:hover { background: rgba(91,168,255,0.5); }
.hp-dot.is-active { background: var(--ice); }
.hp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 11px; letter-spacing: 0.05em; color: rgba(255,255,255,0.45); }
.hp-uptime b { font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: var(--ice); font-variant-numeric: tabular-nums; margin-left: 4px; }
.hp-hint { white-space: nowrap; }

/* ── HERO TICKER ──────────────────────────────────── */
.hero-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top: 1px solid var(--border2); padding: 14px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero-ticker-track { display: flex; width: max-content; animation: ticker-scroll 42s linear infinite; }
.hero-ticker-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.hero-ticker-item { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(91,168,255,0.5); white-space: nowrap; }
.hero-ticker-group i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: rgba(91,168,255,0.4); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media(prefers-reduced-motion:reduce){
  .b1,.b2,.b3,.b4,.b5,.hero-badge-dot,.hero-glow,.hero::after{animation:none}
  .hero-ticker-track,.hp-ping,.hp-live-dot,.hp-progress span,.hp-ambient{animation:none !important}
  .hp-device{transition:none}
  .hp-slide{transition:none}
  .hero-headline .accent{animation:none;background:none;-webkit-text-fill-color:var(--ice);color:var(--ice)}
}

/* ── STATS ────────────────────────────────────────── */
.stats-strip { background: var(--deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 40px; }
.stats-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.stat-item { text-align: center; }
.stat-number { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(32px,4vw,52px); letter-spacing: -0.03em; color: var(--white); line-height: 1; margin-bottom: 6px; }
.stat-number span { color: var(--ice); }
.stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 3px; }
.stat-label-sub { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }

/* ── SYSTEM (device stage) ────────────────────────── */
.system-stage { position: relative; display: grid; grid-template-columns: 8fr 4fr; column-gap: 32px; align-items: start; }
.system-stage::before { content: ''; position: absolute; width: 62%; height: 72%; left: 19%; top: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,212,0.30) 0%, transparent 65%); pointer-events: none; }
.stage-browser { grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 1; }
.stage-tablet { grid-area: 2 / 1 / 3 / 2; position: relative; z-index: 2; width: 72%; margin: -12% 0 0 auto; transform: rotate(-1.2deg); }
.stage-phone { grid-area: 1 / 2 / 3 / 3; position: relative; z-index: 3; align-self: center; justify-self: start; width: min(70%, 232px); margin-left: -56px; transform: rotate(1.6deg); }
.stage-tablet, .stage-phone { transition: transform 0.35s ease; }
.stage-tablet:hover { transform: rotate(0deg) translateY(-5px); }
.stage-phone:hover { transform: rotate(0deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .stage-tablet, .stage-phone { transition: none; } }

.system-shot { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #0B1A38; }
.system-shot img { display: block; width: 100%; height: auto; }
.device-shadow { box-shadow: 0 30px 70px rgba(2,6,18,0.65), 0 8px 22px rgba(2,6,18,0.45); }

.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,0.05); border-bottom: 1px solid var(--border2); }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.browser-url { font-style: normal; font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); border-radius: 6px; padding: 3px 14px; margin-left: 10px; letter-spacing: 0.02em; }

.device-tablet { background: #070B16; border: 1px solid rgba(91,168,255,0.3); border-radius: 22px; padding: 14px; position: relative; }
.device-tablet::after { content: ''; position: absolute; top: 50%; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: #1C2A4A; transform: translateY(-50%); }
.device-tablet img { display: block; width: 100%; height: auto; border-radius: 10px; }
.device-phone { background: #070B16; border: 1px solid rgba(91,168,255,0.3); border-radius: 36px; padding: 10px; position: relative; }
.device-phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 54px; height: 7px; border-radius: 4px; background: #070B16; z-index: 1; }
.device-phone img { display: block; width: 100%; height: auto; border-radius: 27px; }

.system-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; }
.system-item { background: var(--void); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.system-badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); background: rgba(91,168,255,0.08); border: 1px solid rgba(91,168,255,0.2); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; }
.system-item h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; color: var(--white); letter-spacing: -0.02em; margin-bottom: 6px; }
.system-item p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.72; }

@media (max-width: 860px) {
  .system-stage { grid-template-columns: 1fr; column-gap: 0; }
  .stage-browser, .stage-tablet, .stage-phone { grid-area: auto; }
  .stage-tablet { width: 86%; margin: -8% auto 0 auto; }
  .stage-phone { width: 56%; max-width: 220px; margin: 28px auto 0 auto; justify-self: center; transform: none; }
  .system-legend { grid-template-columns: 1fr; margin-top: 44px; }
}

/* ── SHARED SECTION STYLES ────────────────────────── */
.section-dark { background: var(--void); padding: 100px 40px; border-top: 1px solid var(--border); }
.section-mid  { background: var(--deep); padding: 100px 40px; border-top: 1px solid var(--border); }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-header { max-width: 600px; margin-bottom: 60px; }
.section-header.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-header .eyebrow { display: block; margin-bottom: 16px; }
.section-header h2 { margin-bottom: 10px; }
.section-header .sub { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-top: 8px; }

/* ── FEATURES ─────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { background: var(--deep); border: 1px solid var(--border); border-radius: 14px; padding: 40px 36px; position: relative; overflow: hidden; transition: border-color 0.25s; }
.feature-card:hover { border-color: rgba(91,168,255,0.35); }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cobalt), var(--ice)); opacity: 0; transition: opacity 0.25s; }
.feature-card:hover::before { opacity: 1; }
.f-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 72px; letter-spacing: -0.04em; color: var(--cobalt); line-height: 1; opacity: 0.07; position: absolute; top: 16px; right: 24px; }
.f-icon { width: 44px; height: 44px; background: rgba(27,95,212,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.feature-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; color: var(--white); letter-spacing: -0.02em; margin-bottom: 5px; }
.feature-card .sub-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; margin-bottom: 14px; }
.feature-card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.72; }

/* ── HOW IT WORKS ─────────────────────────────────── */
.how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; position: relative; }
.how-steps::before { content: ''; position: absolute; top: 35px; left: calc(16.66% + 24px); right: calc(16.66% + 24px); height: 1px; background: linear-gradient(90deg, rgba(91,168,255,0.4), rgba(91,168,255,0.08), rgba(91,168,255,0.4)); }
.how-step { padding: 0 28px; text-align: center; }
.step-num { width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(91,168,255,0.3); background: var(--deep); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; position: relative; z-index: 1; }
.how-step h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--white); margin-bottom: 6px; letter-spacing: -0.02em; }
.how-step .sub-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; margin-bottom: 12px; }
.how-step p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* ── USE CASES ────────────────────────────────────── */
.usecases-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.usecase-card { background: var(--void); border: 1px solid var(--border); border-radius: 14px; padding: 36px 28px; transition: transform 0.22s, border-color 0.22s; }
.usecase-card:hover { transform: translateY(-4px); border-color: rgba(91,168,255,0.3); }
.uc-icon { width: 46px; height: 46px; background: rgba(27,95,212,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.usecase-card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--white); letter-spacing: -0.02em; margin-bottom: 4px; }
.usecase-card .sub-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; margin-bottom: 14px; }
.usecase-card p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 20px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 500; background: rgba(91,168,255,0.08); color: var(--ice); padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(91,168,255,0.2); }

/* ── BRAND / THE NAME ─────────────────────────────── */
.brand-band { position: relative; overflow: hidden; padding: 100px 40px; background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%); border-top: 1px solid var(--border2); }
.brand-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,212,0.16) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.brand-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.brand-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 24px; margin-bottom: 44px; }
.brand-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; text-align: center; transition: border-color 0.25s; }
.brand-card:hover { border-color: rgba(91,168,255,0.35); }
.brand-word { font-size: clamp(32px,5vw,52px); color: var(--ice); display: block; margin-bottom: 8px; }
.brand-meaning { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.brand-desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; }
.brand-plus { display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 32px; color: rgba(91,168,255,0.5); }
.brand-tagline { font-size: clamp(22px,3vw,34px); text-align: center; color: var(--white); letter-spacing: -0.02em; }

/* ── CTA ──────────────────────────────────────────── */
.cta-section { padding: 120px 40px; background: var(--void); text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.cta-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,212,0.18) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.cta-inner h2 { margin-bottom: 10px; }
.cta-inner .sub { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 48px; margin-top: 8px; }
.cta-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.cta-input { flex: 1; font-family: 'Inter', sans-serif; font-size: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--white); padding: 13px 18px; border-radius: 7px; outline: none; transition: border-color 0.2s; }
.cta-input::placeholder { color: rgba(255,255,255,0.5); }
.cta-input:focus { border-color: var(--ice); }
.cta-status { font-size: 13px; margin-top: 14px; }
.cta-status.is-ok { color: var(--ice); }
.cta-status.is-error { color: #FF8080; }
.cta-input:disabled, .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.cta-note { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 14px; }

/* ── FOOTER ───────────────────────────────────────── */
footer { background: var(--deep); border-top: 1px solid var(--border); padding: 80px 40px 36px; overflow-x: hidden; }
.footer-inner { max-width: 1080px; margin: 0 auto; }
.footer-divider { height: 1px; background: var(--border2); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.footer-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 56px; padding-bottom: 56px; }
.footer-brand { max-width: 320px; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.footer-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--white); }
.footer-tagline { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--white); margin-bottom: 12px; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.75; }
.footer-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.footer-col-title { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); opacity: 0.7; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-legal { display: flex; gap: 24px; list-style: none; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--white); }

.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card-grid-3 > div { transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.card-grid-3 > div:hover { transform: translateY(-4px); border-color: rgba(91,168,255,0.45) !important; box-shadow: 0 14px 32px rgba(8,20,46,0.5); }

/* ── RESPONSIVE ───────────────────────────────────── */

/* Tablet & small laptops */
@media(max-width:1000px){
  nav{padding:16px 28px}
  .nav-left{gap:24px}
  .nav-links{gap:20px}
  .section-dark,.section-mid,.brand-band{padding:84px 32px}
  .cta-section{padding:96px 32px}
  .hero{padding:108px 32px 104px}
  .hero-inner{gap:48px}
  .features-grid,.usecases-grid,.card-grid-3{grid-template-columns:repeat(2,1fr)}
  .how-steps{gap:8px}
  .how-steps::before{left:calc(25% + 4px);right:calc(25% + 4px)}
  .how-step{padding:0 16px}
}

/* Landscape phones & portrait tablets */
@media(max-width:768px){
  nav{padding:14px 20px}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed; top:55px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(8,20,46,0.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:6px 20px 14px;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:transform 0.25s, opacity 0.25s, visibility 0.25s;
  }
  nav.open .nav-links{transform:translateY(0); opacity:1; visibility:visible;}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:14px 2px; font-size:15px; border-bottom:1px solid var(--border2);}
  .hero{padding:100px 20px 96px}
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-mark-wrap{order:-1}
  .hero-player{margin:0 auto;width:min(100%,400px)}
  .hp-meta{justify-content:center;flex-wrap:wrap;text-align:center}
  .hero-actions{justify-content:center}
  .hero-body{margin-left:auto;margin-right:auto}
  .en-headline{font-size:clamp(36px,9vw,64px)}
  .section-dark,.section-mid{padding:72px 20px}
  .section-header{margin-bottom:44px}
  .stats-strip{padding:40px 20px}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .features-grid,.usecases-grid,.card-grid-3{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr;gap:40px}
  .how-steps::before{display:none}
  .brand-band{padding:72px 20px}
  .brand-grid{grid-template-columns:1fr;gap:14px}
  .brand-plus{padding:4px 0}
  .cta-section{padding:80px 20px}
  .cta-form{flex-direction:column}
  footer{padding:56px 20px 32px}
  .footer-top{grid-template-columns:1fr;gap:40px;padding-bottom:40px}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:18px}
}

/* Small phones */
@media(max-width:480px){
  body{overflow-x:hidden}
  nav{padding:12px 16px}
  .nav-wordmark{font-size:17px}
  .nav-cta{display:none}
  .nav-right{gap:10px}
  .lang-btn{padding:5px 10px}
  .hero{padding:92px 16px 88px}
  .en-headline{font-size:clamp(30px,8.5vw,44px)}
  html[lang="ja"] .hero-headline{font-size:clamp(27px,8vw,38px)}
  .hp-name{display:none}
  .hp-hint{display:none}
  .hero-body{font-size:15px}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%;text-align:center}
  .section-dark,.section-mid,.brand-band,.cta-section{padding:60px 16px}
  .stats-strip{padding:36px 16px}
  .feature-card{padding:32px 24px}
  .f-num{font-size:56px;top:12px;right:18px}
  .footer-nav{grid-template-columns:1fr;gap:24px}
}

/* ── LEGAL PAGES (privacy / terms) ────────────────── */
.legal-hero { position: relative; overflow: hidden; padding: 160px 40px 64px; background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%); border-bottom: 1px solid var(--border); }
.legal-hero .legal-inner { position: relative; z-index: 1; }
.legal-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(27,95,212,0.16) 0%, transparent 65%); top: -180px; right: -120px; pointer-events: none; }
.legal-inner { max-width: 820px; margin: 0 auto; }
.legal-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice); opacity: 0.75; display: block; margin-bottom: 16px; }
.legal-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(34px,5vw,56px); letter-spacing: -0.03em; color: var(--white); line-height: 1.05; }
.legal-updated { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 18px; }
.legal-body { background: var(--void); padding: 64px 40px 100px; }
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-intro { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.85; margin-bottom: 48px; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--white); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border2); }
.legal-section h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--white); margin: 22px 0 8px; }
.legal-section p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; margin-bottom: 14px; }
.legal-section ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.legal-section li { position: relative; padding-left: 22px; font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; }
.legal-section li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); opacity: 0.7; }
.legal-section a { color: var(--ice); text-decoration: none; transition: opacity 0.2s; }
.legal-section a:hover { opacity: 0.75; }
.legal-note { margin-top: 48px; padding: 22px 26px; background: rgba(91,168,255,0.06); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.7; }
@media(max-width:768px){
  .legal-hero{padding:120px 20px 48px}
  .legal-body{padding:48px 20px 72px}
}

/* ── DOC PAGES: code blocks & FAQ accordion ───────── */
.legal-section pre { background: var(--deep); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 8px 0 18px; }
.legal-section pre code { font-family: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.7; color: var(--frost); white-space: pre; }
.legal-section code.inline { font-family: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 13px; background: rgba(91,168,255,0.1); border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; color: var(--frost); }
.api-method { display: inline-block; font-family: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 5px; margin-right: 8px; color: var(--void); background: var(--ice); }
.api-method.post { background: #4ADE80; }
.api-method.del { background: #F87171; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: rgba(91,168,255,0.03); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ice); }
.faq-item summary::after { content: '+'; font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 24px; color: var(--ice); line-height: 1; transition: transform 0.25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 24px 22px; font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; }

/* ── GUIDE: overview flow + numbered steps ────────── */
.guide-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; margin-bottom: 56px; padding: 22px 24px; background: rgba(91,168,255,0.04); border: 1px solid var(--border); border-radius: 14px; }
.guide-flow-step { display: flex; align-items: center; gap: 10px; }
.guide-flow-step .n { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--cobalt); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.guide-flow-step .t { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); white-space: nowrap; }
.guide-flow-arrow { color: var(--ice); opacity: 0.5; font-size: 15px; }
.guide-steps { position: relative; }
.guide-step { position: relative; padding-left: 80px; padding-bottom: 44px; }
.guide-step:last-child { padding-bottom: 0; }
.guide-step::before { content: ''; position: absolute; left: 25px; top: 58px; bottom: 4px; width: 2px; background: linear-gradient(180deg, rgba(91,168,255,0.45), rgba(91,168,255,0.08)); }
.guide-step:last-child::before { display: none; }
.guide-num { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(91,168,255,0.35); background: var(--deep); color: var(--ice); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.guide-step h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--white); margin: 0 0 10px; padding-top: 12px; border: none; }
.guide-step p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.85; }
@media(max-width:768px){
  .guide-step { padding-left: 62px; }
  .guide-num { width: 44px; height: 44px; font-size: 17px; }
  .guide-step::before { left: 21px; top: 50px; }
}

/* ── LANGUAGE FLAGS ───────────────────────────────── */
.lang-btn { display: inline-flex; align-items: center; gap: 7px; }
.flag { width: 18px; height: 12px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }