:root {
  color-scheme: light dark;
  --bg:#f6f7f9; --panel:#fff; --text:#16181d; --muted:#626975;
  --line:#dfe3e8; --accent:#0878d1; --accent2:#005ba6; --warn:#fff7db;
  --warn-line:#e3b72f; --shadow:0 18px 52px rgba(25,36,50,.09);
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.7 }
a { color:var(--accent2) }
img { max-width:100%; height:auto }
.wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto }
.top { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(246,247,249,.92); backdrop-filter:blur(15px) }
.top .wrap { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { color:var(--text); text-decoration:none; font-weight:800; letter-spacing:-.02em }
.nav { display:flex; align-items:center; gap:18px; font-size:.92rem }
.nav a { color:var(--text); text-decoration:none }
.langs { white-space:nowrap }
.hero { padding:72px 0 60px }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.6fr); gap:64px; align-items:start }
.eyebrow { color:var(--accent2); font-weight:800; margin:0 0 10px }
h1 { margin:0; max-width:820px; font-size:clamp(2.35rem,5.2vw,4.65rem); line-height:1.08; letter-spacing:-.045em }
.lead { color:var(--muted); max-width:760px; font-size:clamp(1.05rem,2vw,1.28rem); margin:24px 0 }
.badges { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px }
.badge { padding:6px 11px; border:1px solid var(--line); background:var(--panel); border-radius:999px; font-size:.86rem }
.cta { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 20px; border-radius:13px; color:white; background:var(--accent); font-weight:750; text-decoration:none; box-shadow:0 9px 25px rgba(8,120,209,.23) }
.hero-shot { padding:20px; border:1px solid var(--line); border-radius:28px; background:var(--panel); box-shadow:var(--shadow); text-align:center }
.hero-shot img { width:min(100%,330px); border-radius:18px }
section { padding:68px 0; border-top:1px solid var(--line) }
h2 { margin:0; font-size:clamp(1.75rem,3.5vw,2.65rem); line-height:1.2; letter-spacing:-.03em }
.sub { color:var(--muted); margin:10px 0 28px }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card { padding:23px; border:1px solid var(--line); border-radius:18px; background:var(--panel) }
.card h3 { margin:0 0 8px; font-size:1.08rem }
.card p { color:var(--muted); margin:0 }
.values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin:0; padding:0; list-style:none }
.values li { padding:13px 0; border-bottom:1px solid var(--line) }
.notice { margin-top:24px; padding:20px 22px; background:var(--warn); color:#45390c; border:1px solid var(--warn-line); border-radius:16px }
.notice strong { display:block; margin-bottom:4px }
.faq { display:grid; gap:11px }
details { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:0 18px }
summary { cursor:pointer; font-weight:700; padding:16px 0 }
details p { color:var(--muted); margin:0; padding:0 0 18px }
.support { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--panel) }
.support p { margin:6px 0 0; color:var(--muted) }
footer { padding:35px 0 100px; color:var(--muted); font-size:.9rem }
.mobile-cta { display:none }
@media (prefers-color-scheme:dark) {
  :root { --bg:#101216; --panel:#181b21; --text:#f4f5f7; --muted:#b3bac5; --line:#303640; --accent:#2c9bf0; --accent2:#77bffc; --warn:#302a15; --warn-line:#756124; --shadow:none }
  .top { background:rgba(16,18,22,.92) }
  .notice { color:#f3e8b9 }
}
@media (max-width:800px) {
  .nav a:not(.langs) { display:none }
  .hero { padding:44px 0 }
  .hero-grid { grid-template-columns:1fr; gap:32px }
  .hero-shot { max-width:430px; margin:auto }
  .cards { grid-template-columns:1fr }
  .values { grid-template-columns:1fr }
  .support { grid-template-columns:1fr }
  body { padding-bottom:72px }
  footer { padding-bottom:36px }
  .mobile-cta { display:flex; position:fixed; z-index:30; left:16px; right:16px; bottom:12px; min-height:52px; align-items:center; justify-content:center; border-radius:14px; background:var(--accent); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.28) }
}