:root {
  --ink: #f5f8ff;
  --muted: #b6c5de;
  --line: rgba(255,255,255,.16);
  --blue: #67d9ff;
  --violet: #9b8cff;
  --panel: rgba(13, 25, 54, .72);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
  background:
    radial-gradient(circle at 14% 10%, rgba(103,217,255,.25), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(155,140,255,.27), transparent 30rem),
    #080d1d;
}

a { color: inherit; text-decoration: none; }

.page { width: min(100% - 40px, 980px); margin: 0 auto; padding: 34px 0 60px; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.back-link { display: inline-block; color: var(--muted); font-weight: 700; }
.back-link:hover, .back-link:focus-visible { color: var(--blue); }

.language-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.07); }
.language-button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.language-button:hover, .language-button:focus-visible { color: var(--ink); outline: none; }
.language-button.is-active { color: #071323; background: linear-gradient(135deg, var(--blue), var(--violet)); }

.hero, .app-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
}

.hero { margin-top: 24px; padding: clamp(32px, 7vw, 70px); }
.eyebrow, .status { margin: 0; color: var(--blue); font-size: .82rem; font-weight: 800; letter-spacing: .11em; }
h1 { margin: 14px 0; font-size: clamp(3rem, 10vw, 6rem); letter-spacing: -.06em; }
h1 span { color: var(--blue); }
.intro { max-width: 38rem; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.8; }

section { margin-top: 50px; }
h2 { margin: 0 0 18px; font-size: 1.8rem; }
.app-card { display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 30px; }
.app-mark { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 25px; color: #071323; background: linear-gradient(135deg, var(--blue), var(--violet)); font-size: 1.1rem; font-weight: 900; }
.app-card h3 { margin: 8px 0; font-size: clamp(1.6rem, 5vw, 2.35rem); }
.app-card p:not(.status) { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.button { display: inline-flex; padding: 13px 18px; border-radius: 12px; color: #071323; background: linear-gradient(135deg, var(--blue), var(--violet)); font-weight: 850; }
.button:hover, .button:focus-visible { filter: brightness(1.12); }
footer { margin-top: 45px; color: var(--muted); text-align: center; }

@media (max-width: 560px) { .page { width: min(100% - 28px, 980px); } .page-header { align-items: flex-start; flex-direction: column; } .app-card { grid-template-columns: 1fr; } }