:root{--bg:#f4f8ff;--primary:#111827;--secondary:#2f3945;--soft:#eff6ff;--soft-2:#dbeafe;--border:#dbeafe;--blue:#4285f4;--red:#ea4335;--yellow:#fbbc05;--green:#34a853;--active:#22c55e;--shadow:0 18px 45px #1d4ed824}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--primary);background:radial-gradient(circle at 18% 12%,#fff 0%,transparent 30%),radial-gradient(circle at 80% 18%,#dff8ff 0%,transparent 34%),radial-gradient(circle at 50% 95%,#dbeafe 0%,transparent 36%),linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#f7fbff 100%);display:flex;flex-direction:column;text-align:center;position:relative}
body::before,body::after{content:"";position:fixed;width:390px;height:390px;border-radius:999px;pointer-events:none;z-index:0;filter:blur(12px);opacity:.65}
body::before{left:-150px;top:16%;background:radial-gradient(circle,#bfdbfe 0%,transparent 68%)}
body::after{right:-150px;bottom:8%;background:radial-gradient(circle,#c7d2fe 0%,transparent 68%)}
.center{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem 1rem}
.card{width:100%;max-width:860px;padding:2rem 0 1rem;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;position:relative;overflow:visible;animation:fadeUp .45s ease both}
.card::before{display:none}
.card > *{position:relative;z-index:1}
@keyframes fadeUp {
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes buttonPulse {
0%{box-shadow:0 16px 35px #2563eb36,0 0 0 0 #4285f452}
70%{box-shadow:0 16px 35px #2563eb36,0 0 0 14px #4285f400}
100%{box-shadow:0 16px 35px #2563eb36,0 0 0 0 #4285f400}
}
.title{margin:0 0 1.05rem;display:flex;align-items:center;justify-content:center;gap:.85rem;line-height:1.08;flex-wrap:nowrap}
.titleIcon{width:60px;height:60px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0;background:transparent;border:0;box-shadow:none;overflow:hidden}
.titleIcon img{width:60px;height:60px;display:block;object-fit:contain}
.titleText{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:nowrap;gap:.28rem;white-space:nowrap;font-size:clamp(1.45rem,3.4vw,2.35rem);font-weight:800;letter-spacing:1px}
.titleBlack{color:#111827}
.titleGoogle,.titleChrome{display:inline-flex;letter-spacing:1px}
.googleBlue{color:#4285f4}
.googleRed{color:#ea4335}
.googleYellow{color:#fbbc05}
.googleGreen{color:#34a853}
p{max-width:620px;margin:1.3rem auto 0;color:var(--secondary);font-size:1.08rem;line-height:1.75}
.button{margin:2.2rem 0 0}
.button a{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.95rem 1.9rem;border-radius:999px;background:linear-gradient(135deg,#4285f4,#2563eb);color:#fff;font-weight:700;letter-spacing:.2px;text-decoration:none;box-shadow:0 16px 35px #2563eb36;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;animation:buttonPulse 1.8s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.button a:hover{transform:translateY(-2px);box-shadow:0 20px 42px #2563eb42}
.button a:active{transform:translateY(1px) scale(.985);box-shadow:0 12px 25px #2563eb30}
.button a:focus-visible{outline:4px solid #bfdbfe;outline-offset:4px}
.button a.active{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 16px 35px #16a34a33;animation:none}
.note{margin-top:1.55rem;padding:0;border-radius:0;background:transparent;border:0;color:#7c2d12;font-size:.95rem;line-height:1.65}
.note strong{display:inline-flex;align-items:center;justify-content:center;margin-right:.2rem;color:#ea4335;font-weight:800}
.faq{width:100%;max-width:720px;margin:3rem auto 0;text-align:left}
.faq h2{margin:0 0 1.15rem;color:#111827;text-align:center;font-size:clamp(1.35rem,3vw,1.85rem);font-weight:700;letter-spacing:.2px}
.faqList{display:flex;flex-direction:column;gap:.8rem}
.faqItem{border:1px solid #dbeafe;border-radius:18px;background:#ffffff82;box-shadow:0 10px 28px #1d4ed80f;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.faqQuestion{width:100%;padding:1.05rem 1.15rem;border:0;background:transparent;color:#111827;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;font:inherit;font-size:1rem;font-weight:700;line-height:1.45}
.faqQuestion:hover{background:#eff6ff8f}
.faqQuestion:focus-visible{outline:4px solid #bfdbfe;outline-offset:-4px}
.faqIcon{width:22px;height:22px;flex:0 0 auto;border-radius:999px;position:relative;background:#eff6ff;border:1px solid #bfdbfe}
.faqIcon::before,.faqIcon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;border-radius:999px;background:#2563eb;transform:translate(-50%,-50%);transition:transform .2s ease}
.faqIcon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqQuestion[aria-expanded="true"] .faqIcon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faqAnswer{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faqAnswer p{max-width:100%;margin:0;padding:0 1.15rem 1.15rem;color:var(--secondary);font-size:.98rem;line-height:1.7}
.faqItem.active .faqAnswer{max-height:260px}
.donate{margin:2.7rem auto 0;padding:0;max-width:420px;border-radius:0;background:transparent;border:0;box-shadow:none;font-size:1rem}
.donate p{margin:0 0 .65rem;color:#111827;font-weight:700;font-size:1rem;line-height:1.5}
.donate a{display:inline-flex;align-items:center;justify-content:center;color:#2563eb;font-weight:700;text-decoration:none;transition:color .18s ease,transform .18s ease}
.donate a:hover{color:#1d4ed8;transform:translateY(-1px);text-decoration:none}
.donate span{color:#94a3b8;margin:0 .45rem}
footer{position:relative;z-index:1;padding:1rem;color:var(--secondary);font-size:.9rem}
footer a{color:#111827;font-weight:700;text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:640px) {
.center{padding:1.5rem 1rem}
.card{max-width:100%;padding:1.5rem 0}
.title{margin:0 0 1rem;gap:.42rem}
.titleIcon{width:46px;height:46px}
.titleIcon img{width:46px;height:46px}
.titleText{font-size:clamp(20px,4.1vw,22px);gap:.08rem;letter-spacing:0}
.titleGoogle,.titleChrome{letter-spacing:0}
p{font-size:1rem;line-height:1.7}
.button a{width:100%;max-width:300px}
.faq{margin-top:2.5rem}
.faqQuestion{padding:1rem;font-size:.96rem}
.faqAnswer p{padding:0 1rem 1rem;font-size:.94rem}
.donate{margin-top:2.2rem}
}
@media (max-width:390px) {
.title{gap:.32rem}
.titleIcon{width:38px;height:38px}
.titleIcon img{width:38px;height:38px}
.titleText{font-size:clamp(18px,4.1vw,20px);font-weight:700;gap:.06rem;letter-spacing:0}
.titleGoogle,.titleChrome{letter-spacing:0}
}