* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f7;
  color: #1d1d1f;
  line-height: 1.5;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 40px 24px 80px; }

.site-nav { text-align: center; font-size: 0.85rem; margin-bottom: 14px; }
.site-nav a { color: #6e6e73; text-decoration: none; margin: 0 8px; }
.site-nav a.active { color: #FF6A00; font-weight: 600; }
.site-nav .sep { color: #c7c7cc; }

.lang-switch {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 32px;
}
.lang-switch a {
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  color: #6e6e73; padding: 6px 14px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.lang-switch a.active { color: #fff; background: #FF6A00; }

header.page-header { text-align: center; margin-bottom: 48px; }
header.page-header img { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.15); margin-bottom: 16px; }
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.intro { color: #6e6e73; font-size: 1.05rem; }
.intro a { color: #FF6A00; font-weight: 600; text-decoration: none; }
.intro a:hover { text-decoration: underline; }

section { margin-top: 56px; }
section > h2 {
  font-size: 1.5rem; font-weight: 700; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
section > h2 .dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6A00; }
.pro-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em;
  color: #fff; background: #171310; padding: 3px 8px; border-radius: 6px;
}

.card { background: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.card h3 .emoji { font-size: 1.2rem; }
.card p { color: #48484a; font-size: 0.97rem; }

.steps { counter-reset: step; }
.step { display: flex; gap: 16px; margin-bottom: 18px; }
.step .num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #FF6A00; color: #fff; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.step .body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.step .body p { color: #48484a; font-size: 0.95rem; }

details.faq { background: #fff; border-radius: 16px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
details.faq summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 0.98rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: #FF6A00; font-weight: 700; font-size: 1.2rem; }
details.faq[open] summary::after { content: "–"; }
details.faq .answer { padding: 0 20px 18px; color: #48484a; font-size: 0.95rem; }
details.faq .answer a { color: #FF6A00; }

.privacy-item { margin-bottom: 18px; }
.privacy-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.privacy-item p { color: #48484a; font-size: 0.95rem; }

.contact-grid { display: grid; gap: 14px; }
.contact-card { background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.contact-card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.contact-card a.email { color: #FF6A00; font-weight: 600; text-decoration: none; }
.contact-card a.email:hover { text-decoration: underline; }
.contact-card p { color: #6e6e73; font-size: 0.92rem; margin-top: 4px; }

footer { text-align: center; margin-top: 64px; color: #86868b; font-size: 0.85rem; }
footer a { color: #86868b; }