:root {
  color-scheme: dark;
  --bg: #0b0f10;
  --panel: #12191b;
  --line: #1fd5d0;
  --text: #f5f7f7;
  --muted: #aeb9bc;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", "Noto Sans JP", sans-serif; }
body { min-height: 100vh; }
a { color: var(--line); }
.wrap { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 96px; }
.hero { padding: 36px 0 26px; border-bottom: 1px solid rgba(31, 213, 208, .35); margin-bottom: 28px; }
.hero.compact { padding-top: 12px; }
.eyebrow { color: var(--line); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.08; margin: 10px 0 16px; }
.lead { color: var(--muted); font-size: 1.15rem; }
.card { background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-left: 4px solid var(--line); padding: 24px 26px; margin: 18px 0; }
h2 { margin-top: 0; }
p { line-height: 1.8; }
@media (max-width: 640px) { .wrap { width: min(100% - 24px, 980px); padding-top: 36px; } .card { padding: 20px; } }