:root{
  --bg:#0b0c10; --bg2:#131520; --card:#171a26; --card2:#1e2230;
  --text:#eef1f7; --muted:#9aa3b2; --line:#252a3a;
  --accent:#4c8dff; --accent-weak:rgba(76,141,255,.14); --ok:#38c793;
  --maxw:960px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --bg2:#eef1f7; --card:#ffffff; --card2:#f2f4fa;
    --text:#151824; --muted:#5b6473; --line:#e3e7f0;
    --accent:#2f6bff; --accent-weak:rgba(47,107,255,.10);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",Roboto,sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header */
header.site{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--text)}
.brand:hover{text-decoration:none}
.logo{width:28px; height:28px; flex:0 0 auto}
nav.top a{color:var(--muted); font-size:14px; margin-left:20px}
nav.top a:hover{color:var(--text); text-decoration:none}

/* hero */
.hero{padding:72px 0 40px; text-align:center}
.hero h1{font-size:clamp(28px,5vw,44px); line-height:1.3; margin:0 0 14px; letter-spacing:.01em}
.hero p.lead{font-size:clamp(16px,2.4vw,19px); color:var(--muted); max-width:640px; margin:0 auto 28px}
.cta{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:12px 22px; border-radius:12px; font-weight:600; font-size:15px}
.cta:hover{text-decoration:none; opacity:.92}
.cta.ghost{background:var(--card2); color:var(--text); border:1px solid var(--line)}
.hint{display:block; margin-top:12px; color:var(--muted); font-size:13px}

/* sections */
section{padding:44px 0}
h2{font-size:clamp(22px,3.4vw,28px); margin:0 0 8px}
.section-lead{color:var(--muted); margin:0 0 28px}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.feature{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
.feature .ic{width:26px; height:26px; color:var(--accent); margin-bottom:10px}
.feature h3{font-size:16px; margin:0 0 6px}
.feature p{margin:0; color:var(--muted); font-size:14px}

/* content pages */
.page{padding:40px 0 60px}
.page h1{font-size:clamp(26px,4vw,34px); margin:0 0 6px}
.page .updated{color:var(--muted); font-size:13px; margin:0 0 28px}
.page h2{font-size:19px; margin:30px 0 8px}
.page h3{font-size:15px; margin:20px 0 6px}
.page p,.page li{color:var(--text)}
.page .muted,.page small{color:var(--muted)}
.page ul{padding-left:1.2em}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px}
.mail{font-weight:600}
.divider{height:1px; background:var(--line); border:0; margin:40px 0}
.lang-note{color:var(--muted); font-size:13px; margin:0 0 24px}

/* footer */
footer.site{border-top:1px solid var(--line); padding:32px 0; color:var(--muted); font-size:13px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
footer.site nav a{color:var(--muted); margin-right:16px}
footer.site nav a:hover{color:var(--text)}