:root{
  --blue:#0b5fff; --blue-dark:#08379e; --bg:#f5f7fb; --card:#ffffff;
  --text:#1a1f2b; --muted:#5b6472; --green:#16a34a; --orange:#e8720c; --border:#e5e9f0;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.6;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1000px; margin:0 auto; padding:0 16px;}

header.site-header{background:var(--blue-dark); color:#fff; position:sticky; top:0; z-index:50;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; max-width:1000px; margin:0 auto; flex-wrap:wrap; row-gap:10px;}
.logo{font-size:1.3rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;}
.logo-img{height:34px; width:34px; border-radius:6px; background:#fff; padding:2px; flex-shrink:0;}
.logo span{color:#ffd166;}
nav.main-nav{display:flex; gap:18px; flex-wrap:wrap;}
nav.main-nav a{color:#dce6ff; font-weight:500; font-size:.95rem;}
nav.main-nav a:hover{color:#fff;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer;}

@media(max-width:720px){
  nav.main-nav{display:none; flex-direction:column; width:100%; background:var(--blue-dark); padding:10px 16px;}
  nav.main-nav.open{display:flex;}
  .menu-toggle{display:block;}
  .header-inner{flex-wrap:wrap;}
}

.hero{background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; padding:36px 0 30px;}
.hero h1{font-size:1.7rem; margin-bottom:8px;}
.hero p{color:#e2ebff; max-width:640px;}
.breaking{background:#fff3cd; color:#7a5b00; padding:10px 14px; border-radius:8px; margin-top:16px; font-size:.9rem; font-weight:600;}

.checker-box{background:#fff; border-radius:10px; padding:18px; margin-top:18px; color:var(--text);}
.checker-box h3{margin-bottom:10px; font-size:1.05rem;}
.checker-form{display:flex; flex-wrap:wrap; gap:10px;}
.checker-form input, .checker-form select{flex:1; min-width:150px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:.95rem;}
.checker-form button{background:var(--orange); color:#fff; border:none; padding:10px 20px; border-radius:6px; font-weight:600; cursor:pointer;}
.checker-form button:hover{background:#c95f00;}
.note-small{font-size:.8rem; color:var(--muted); margin-top:8px;}

section{padding:30px 0;}
section h2{font-size:1.35rem; margin-bottom:16px;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:18px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; cursor:pointer;}
.card:hover{transform:translateY(-6px); box-shadow:0 12px 28px rgba(11,95,255,.14); border-color:var(--blue);}
.card:hover .icon{transform:scale(1.15) rotate(-4deg);}
.card:hover h3{color:var(--blue);}
.card:hover .view-link{text-decoration:underline;}
.card .icon{font-size:1.6rem; display:inline-block; transition:transform .25s ease;}
.card h3{margin:8px 0 4px; font-size:1.05rem; transition:color .25s ease;}
.status{display:inline-block; font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:20px; margin:6px 0;}
.status.soon{background:#fff3cd; color:#8a6300;}
.status.live{background:#d1f7dd; color:#0f7a3c;}
.card p{color:var(--muted); font-size:.9rem;}
.card .view-link{display:inline-block; margin-top:8px; font-weight:600; font-size:.9rem;}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.92rem;}
table th, table td{border:1px solid var(--border); padding:9px 12px; text-align:left;}
table th{background:#eef2fa;}

.steps{padding-left:20px; margin:12px 0;}
.steps li{margin-bottom:8px;}

.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
.faq-item summary{font-weight:600; cursor:pointer; font-size:.98rem;}
.faq-item p{color:var(--muted); margin-top:8px; font-size:.92rem;}

.quick-links{display:flex; flex-wrap:wrap; gap:10px;}
.quick-links a{background:#eef2fa; padding:8px 14px; border-radius:20px; font-size:.88rem; font-weight:600;}

.disclaimer{background:#fdf2f2; border:1px solid #f5c6c6; padding:14px; border-radius:8px; font-size:.85rem; color:#7a2424;}

footer.site-footer{background:#101828; color:#a9b3c4; padding:30px 0; margin-top:30px; font-size:.88rem;}
footer.site-footer a{color:#cdd8ec;}
footer .foot-links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px;}

.breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:10px;}

.social-strip{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; background:#101828; padding:8px 10px;}
.social-btn{font-size:.8rem; font-weight:700; padding:7px 14px; border-radius:20px; color:#fff !important; text-decoration:none;}
.social-btn.wa{background:#25D366;}
.social-btn.tg{background:#229ED9;}
.social-btn:hover{opacity:.9; text-decoration:none;}

.subscribe-banner{background:linear-gradient(135deg,#128C7E,#075E54); color:#fff; border-radius:12px; padding:22px; margin:10px 0; text-align:center;}
.subscribe-banner h3{margin-bottom:6px; font-size:1.15rem;}
.subscribe-banner p{color:#dff5ef; font-size:.9rem; margin-bottom:14px;}
.subscribe-banner .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.subscribe-banner .btns a{padding:10px 20px; border-radius:24px; font-weight:700; font-size:.9rem; color:#fff; text-decoration:none;}
.subscribe-banner .btns a.wa{background:#25D366;}
.subscribe-banner .btns a.tg{background:#229ED9;}
.subscribe-banner .btns a:hover{opacity:.92;}