/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.6;color:#0f172a;background:#0b1020}
a{color:#60a5fa;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:#0b1020cc;border-bottom:1px solid #1f2937;backdrop-filter:blur(8px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.logo img{width:36px;height:36px}
.menu{display:flex;flex-wrap:wrap;gap:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid #334155;background:#111827;color:#e5e7eb}
.btn--primary{background:linear-gradient(135deg,#2563eb,#06b6d4);border-color:transparent;color:#fff}
.btn:hover{opacity:.95}

/* Hero */
.hero{padding:56px 0;background:radial-gradient(1200px 400px at 50% -10%,#0f172a,#0b1020)}
.hero h1{font-size:42px;line-height:1.1;margin-bottom:14px;color:#fff}
.hero p{color:#cbd5e1;margin-bottom:20px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.badge{font-size:12px;border:1px solid #334155;color:#cbd5e1;background:#0f172a;padding:6px 10px;border-radius:999px}

/* Grid */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(1,1fr)}}

.card{background:#0f172a;border:1px solid #1f2937;border-radius:16px;overflow:hidden}
.card__img{aspect-ratio:16/9;background:#020617}
.card__body{padding:14px}
.card__title{color:#e5e7eb;font-weight:600;margin-bottom:6px}
.card__meta{color:#94a3b8;font-size:12px}

/* Sections */
.section{padding:40px 0}
.section h2{color:#fff;font-size:28px;margin-bottom:12px}
.section p.lead{color:#cbd5e1;margin-bottom:14px}

/* Footer */
.footer{padding:32px 0;color:#94a3b8;border-top:1px solid #1f2937}
.footer a{color:#cbd5e1}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1f2937;padding:10px;text-align:left;color:#cbd5e1}
.table th{color:#e5e7eb}

/* FAQ */
.faq details{background:#0f172a;border:1px solid #1f2937;border-radius:12px;margin-bottom:10px;padding:12px}
.faq summary{cursor:pointer;color:#e5e7eb;font-weight:600}

/* Banner */
.banner{display:flex;gap:16px;align-items:center;background:linear-gradient(90deg,#111827,#0b1020);border:1px solid #1f2937;padding:16px;border-radius:14px}
.banner img{width:56px;height:56px}

/* Mobile menu */
#menuToggle{display:none}
@media (max-width:768px){
  #menuToggle{display:inline-flex}
  .menu{display:none;flex-direction:column;background:#0b1020;position:absolute;top:60px;left:0;right:0;border-bottom:1px solid #1f2937;padding:12px}
  .menu.open{display:flex}
}