*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f8fafc;color:#0f172a;line-height:1.6}
a{color:#0ea5e9;text-decoration:none}
header{background:rgba(15,23,42,.95);backdrop-filter:blur(8px);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:20;box-shadow:0 2px 20px rgba(0,0,0,.2)}
header .wrap{max-width:1140px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-weight:900;font-size:22px;color:#fff;letter-spacing:.2px}.logo span{color:#facc15}
nav a{color:#e2e8f0;margin:0 7px;font-size:14px;font-weight:600}nav a:hover{color:#facc15}
.hero{background:radial-gradient(900px 400px at 20% 0%,#1e3a8a 0%,transparent 60%),linear-gradient(135deg,#0f172a,#1e3a8a 55%,#0ea5e9);color:#fff;padding:56px 16px 44px;text-align:center}
.hero h1{font-size:38px;line-height:1.15;margin:0 0 12px}.hero p{color:#dbeafe;max-width:760px;margin:auto;font-size:17px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700}
.btn{display:inline-block;background:#22c55e;color:#fff;padding:13px 26px;border-radius:999px;font-weight:800;margin:16px 6px 0;box-shadow:0 8px 20px rgba(34,197,94,.35)}
.btn2{background:#facc15;color:#111;box-shadow:0 8px 20px rgba(250,204,21,.35)}
.wrap{max-width:1140px;margin:auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 24px rgba(15,23,42,.08);border:1px solid #e2e8f0}
.card h3{margin:0 0 8px;font-size:19px}.card p{margin:0;color:#475569}
.brand{background:linear-gradient(180deg,#fff,#f1f5f9);border:1px solid #e2e8f0;border-radius:18px;padding:20px}
.brand b{font-size:19px}
.step{background:#fff;border-radius:16px;padding:18px;margin:12px 0;border-left:5px solid #22c55e;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.note{background:#fef9c3;border:1px solid #fde68a;border-radius:14px;padding:16px;margin:20px 0}
h2{font-size:26px;margin:28px 0 6px}details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;margin:10px 0}details summary{font-weight:700;cursor:pointer}
footer{background:#0f172a;color:#94a3b8;padding:26px 16px;text-align:center;font-size:13px;line-height:1.7}
@media(max-width:600px){.hero{padding:40px 16px 32px}.hero h1{font-size:28px}h2{font-size:22px}nav a{margin:0 5px;font-size:13px}}

.wa-float{position:fixed;right:18px;bottom:88px;background:#22c55e;color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;box-shadow:0 10px 25px rgba(0,0,0,.25);z-index:50}
.chat-btn{position:fixed;right:18px;bottom:18px;background:#0f172a;color:#fff;border:0;padding:14px 18px;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.25);z-index:50}
.chat-box{position:fixed;right:18px;bottom:76px;width:320px;max-width:calc(100vw - 36px);background:#fff;border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,.3);z-index:51;overflow:hidden;display:none}
.chat-box.open{display:block}
.chat-head{background:#0f172a;color:#fff;padding:14px 16px;font-weight:800}
.chat-body{padding:14px 16px;font-size:14px;color:#334155}
.chat-body button{display:block;width:100%;text-align:left;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer;font-weight:600}
.chat-body button:hover{background:#dcfce7}
.chat-note{font-size:12px;color:#64748b}

.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(250,204,21,.25),transparent 40%),radial-gradient(circle at 80% 20%,rgba(34,197,94,.3),transparent 45%);animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.6}to{opacity:1}}
.hero>*{position:relative;z-index:1}
.cricket-ball{position:absolute;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid #dc2626;top:18px;right:8%;animation:ballmove 7s ease-in-out infinite;opacity:.9;z-index:0}
.cricket-ball::after{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:2px;background:#dc2626}
@keyframes ballmove{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(28px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
.pitch{position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,transparent,#facc15,transparent);animation:pitchmove 3s linear infinite}
@keyframes pitchmove{from{background-position:0 0}to{background-position:200px 0}}
@media(prefers-reduced-motion:reduce){.hero::before,.cricket-ball,.pitch{animation:none}}