:root {
  --main: #2266ea;
  --main-dark: #154493;
  --accent: #43c07a;
  --light: #f6f7fb;
  --border: #dde3ef;
  --radius: 15px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--light); font-family: 'Segoe UI', Arial, sans-serif; color: #222;
  min-height: 100vh;
}
.banner {
  background: linear-gradient(105deg, var(--main) 65%, #74b7fa 100%);
  color: #fff; border-radius: 0 0 var(--radius) var(--radius);
  text-align: center; padding: 2.5rem 1rem 2rem 1rem; position: relative;
}
.logoicon { 
  width:54px; height:54px; background:#fff3; border-radius:18px; display:inline-block;
  margin-bottom:12px; line-height:54px; font-size:2.2rem; user-select:none;
}
.banner h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; letter-spacing: -2px;}
.banner .slogan { font-size: 1.17rem; letter-spacing: 0.5px; margin-top:0.2rem; }
.animated-slogan { display:inline-block; border-bottom:2px solid #fff9; font-weight:700; padding-bottom:1px; }
.lang-switch { position: absolute; top: 18px; right: 24px;}
.lang-btn { background: #fff6; border: none; color: #2266ea; font-weight: bold; font-size: 1rem; margin-left: 6px; border-radius: 6px; padding: 2px 12px; cursor: pointer; }
.lang-btn.active, .lang-btn:focus { background: var(--main); color: #fff; }
.section { max-width: 700px; margin: 2.3rem auto 0 auto; background: #fff; border-radius: var(--radius); box-shadow:0 2px 14px #0001; padding: 2.0rem 1.2rem 1.2rem 1.2rem;}
.about { text-align:center;}
.about strong {color: var(--main);}
.features { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-top:1.3rem; }
.feature { flex: 1 1 180px; min-width:170px; background:var(--light); border-radius:11px; padding:1.1rem 1rem; border:1px solid var(--border); text-align:center;}
.feature .icon { font-size:1.7rem; color:var(--main); margin-bottom:5px;}
.quickguide { margin: 1.3rem 0 0.8rem 0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
.qgstep { background: var(--light); border-radius:11px; padding:1rem; border:1px solid var(--border); text-align:center; min-width:90px;}
.qgstep .qgnum { font-size:1.1rem; color:#fff; background:var(--accent); border-radius: 50%; display:inline-block; width:28px; height:28px; line-height:28px; margin-bottom:7px;}
.download-btn { background: var(--main); color: #fff; border: none; padding: 14px 26px; border-radius: 8px; font-size: 1.1rem; margin: 12px 13px 0 0; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition:background 0.18s;}
.download-btn.pro { background: var(--accent);}
.download-btn:hover { background: var(--main-dark);}
.download-note {color:#888;font-size:1rem;margin-top:11px;}
.donate-note { color: #888; margin-top: 12px; }
.donate-block {text-align:center;}
.donate-title {font-size:1.1rem; font-weight:600; color:var(--main);}
.donate-explain {font-size:1rem; color:#555; margin:7px 0 10px 0;}
.donate-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-top: 14px;}
.donate-option {background:var(--light); border-radius:12px; box-shadow:0 2px 8px #0001; padding:20px 19px 13px 19px; min-width:155px; margin-bottom:7px; display:flex; flex-direction:column; align-items:center;}
.momo-block img.momo-qr, .donate-option img.momo-qr { width: 128px; margin: 13px auto 5px auto; display: block; border-radius: 12px; box-shadow:0 3px 11px #0001;}
.momo-guide { color: #6a4; font-size: 1.1rem; margin-top: 7px;}
.form-block { text-align:center;}
.form-explain {font-size:1rem;color:#555;margin-bottom:8px;}
.nl-form { margin: auto; max-width:340px;}
.nl-form input[type=email], .nl-form textarea { font-size:1rem; padding:10px 12px; border-radius:8px; border:1px solid var(--border); width: 70%; margin-bottom:8px;}
.nl-form textarea { resize: vertical; }
.nl-form button { background: var(--main); color: #fff; border: none; padding: 11px 22px; border-radius: 7px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.small { font-size:13px; color:#888;}
.faq { margin-bottom:0.4rem;}
.faq-item { background:var(--light); margin-bottom:7px; border-radius:9px; border:1px solid var(--border);}
.faq-q { cursor:pointer; font-weight:600; padding:13px 14px 9px 18px; position:relative;}
.faq-q .arrow { margin-right:7px;}
.faq-q.open .arrow { transform:rotate(90deg);}
.faq-a { display:none; color:#266; font-size:1rem; border-top:1px dashed #aad; padding:11px 18px 13px 35px;}
.footer { text-align:center; color:#999; font-size:1rem; padding: 27px 0 11px 0; background: #eaf1fb; margin-top: 66px; border-radius: 20px 20px 0 0;}
.video-block {text-align:center; margin:1.2rem auto 0 auto;}
@media (max-width: 650px) {
  .section { padding: 1.2rem 0.4rem;}
  .banner h1 { font-size:1.55rem;}
  .features { gap: 0.8rem;}
  .feature { min-width:110px; font-size:0.92rem; }
  .quickguide { grid-template-columns:1fr; }
  .donate-options { flex-direction:column; align-items: center;}
  .video-block iframe {height:200px;}
}