* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background:#0b0e14; color:#f0f2f5; line-height:1.6; }

.nav { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:rgba(11,14,20,0.9); position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:#f0f2f5; text-decoration:none; }
.nav-logo img { border-radius:8px; }
.nav-dl { background:#facc15; color:#0b0e14; padding:8px 18px; border-radius:24px; font-weight:600; font-size:14px; text-decoration:none; }
.nav-dl:hover { background:#fde047; }

.btn-dl { display:inline-flex; align-items:center; gap:10px; background:#facc15; color:#0b0e14; padding:14px 32px; border-radius:60px; font-weight:700; font-size:18px; text-decoration:none; border:none; cursor:pointer; }
.btn-dl:hover { transform:scale(1.04); box-shadow:0 8px 32px rgba(250,204,21,0.3); }
.btn-dl svg { fill:currentColor; }

.hero { text-align:center; padding:60px 20px 80px; }
.hero h1 { font-size:clamp(32px,6vw,60px); font-weight:800; line-height:1.1; }
.hero .gold { background:linear-gradient(135deg,#facc15,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { color:#9ca3af; font-size:18px; max-width:560px; margin:16px auto 32px; }
.hero-info { display:flex; justify-content:center; gap:40px; margin-top:48px; flex-wrap:wrap; }
.hero-info div { text-align:center; }
.hero-info strong { display:block; font-size:28px; color:#facc15; }
.hero-info span { font-size:14px; color:#9ca3af; }

.cat-section { padding:30px 24px; max-width:1200px; margin:0 auto; }
.cat-section h2 { font-size:22px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.cat-scroll { display:flex; gap:14px; overflow-x:auto; padding:4px 0 12px; scroll-snap-type:x mandatory; }
.cat-scroll::-webkit-scrollbar { height:4px; }
.cat-scroll::-webkit-scrollbar-thumb { background:#facc15; border-radius:4px; }
.card { flex:0 0 150px; scroll-snap-align:start; background:rgba(255,255,255,0.04); border-radius:12px; overflow:hidden; cursor:pointer; }
.card:hover { transform:translateY(-4px); background:rgba(255,255,255,0.08); }
.card img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.card.wide { flex:0 0 260px; }
.card.wide img { aspect-ratio:16/9; }
.card .title { padding:8px 12px 12px; font-weight:600; font-size:14px; }

.highlights { padding:40px 24px; max-width:1200px; margin:0 auto; }
.highlights h2 { text-align:center; font-size:24px; margin-bottom:20px; }
.hl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.hl-grid div { background:rgba(255,255,255,0.04); padding:18px 12px; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,0.06); font-weight:500; }

.compare { padding:40px 24px; max-width:800px; margin:0 auto; }
.compare h2 { text-align:center; font-size:24px; margin-bottom:20px; }
.compare table { width:100%; border-collapse:collapse; background:rgba(255,255,255,0.03); border-radius:12px; overflow:hidden; }
.compare th,.compare td { padding:12px 16px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
.compare th { color:#9ca3af; font-weight:600; font-size:13px; }
.compare .gold { color:#facc15; }
.compare .ok { color:#4ade80; }
.compare .no { color:#f87171; }

.cta { text-align:center; padding:50px 24px; }
.cta h2 { font-size:28px; }
.cta p { color:#9ca3af; font-size:18px; margin:8px 0 24px; }

.steps { padding:40px 24px; max-width:700px; margin:0 auto; }
.steps h2 { text-align:center; font-size:24px; margin-bottom:20px; }
.step-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.step-list div { background:rgba(255,255,255,0.04); padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:12px; font-weight:500; }
.step-list .num { background:#facc15; color:#0b0e14; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }

.faq { padding:40px 24px; max-width:700px; margin:0 auto; }
.faq h2 { text-align:center; font-size:24px; margin-bottom:20px; }
.faq div { border-bottom:1px solid rgba(255,255,255,0.06); padding:14px 0; }
.faq strong { font-size:16px; display:block; }
.faq p { color:#9ca3af; margin-top:4px; }

.float-cta { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1a1f2a; border:1px solid rgba(255,255,255,0.1); border-radius:60px; padding:10px 20px; z-index:200; backdrop-filter:blur(12px); box-shadow:0 8px 40px rgba(0,0,0,0.6); }
.float-cta a { display:flex; align-items:center; gap:8px; background:#facc15; color:#0b0e14; padding:8px 20px; border-radius:40px; font-weight:700; font-size:14px; text-decoration:none; }
.float-cta a svg { fill:currentColor; }

footer { text-align:center; padding:24px; color:#6b7280; font-size:14px; border-top:1px solid rgba(255,255,255,0.06); }

@media (max-width:640px) {
  .nav { padding:10px 16px; }
  .nav-logo span { font-size:16px; }
  .hero-info { gap:16px; }
  .hero-info strong { font-size:20px; }
  .card { flex:0 0 120px; }
  .card.wide { flex:0 0 180px; }
  .float-cta { padding:8px 12px; max-width:calc(100% - 24px); }
  .float-cta a { font-size:12px; padding:6px 14px; }
}