*{margin:0;padding:0;box-sizing:border-box}
:root{--orange:#E8600A;--dark:#1a1a1a;--gray:#2a2a2a;--light:#f5f5f5;--yellow:#f0c14b;--text:#333;--white:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text);line-height:1.6;background:var(--white)}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* NAV */
header{background:var(--dark);color:var(--white);padding:0 20px;position:sticky;top:0;z-index:100}
.nav-wrap{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-size:1.3rem;font-weight:700;color:var(--white)}
.logo span{color:var(--orange)}
nav ul{list-style:none;display:flex;gap:24px}
nav a{color:var(--white);font-size:.9rem;font-weight:500}
nav a:hover{color:var(--orange);text-decoration:none}
.hamburger{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer}

/* HERO */
.hero{background:linear-gradient(135deg,var(--dark) 0%,#333 100%);color:var(--white);padding:60px 20px;text-align:center}
.hero h1{font-size:2.4rem;margin-bottom:16px}
.hero h1 span{color:var(--orange)}
.hero p{font-size:1.1rem;max-width:700px;margin:0 auto 24px;opacity:.9}

/* BUTTONS */
.btn{display:inline-block;padding:12px 28px;border-radius:6px;font-weight:700;font-size:.95rem;text-decoration:none;transition:opacity .2s}
.btn:hover{opacity:.85;text-decoration:none}
.btn-orange{background:var(--orange);color:var(--white)}
.btn-yellow{background:var(--yellow);color:#111;border:1px solid #c7a733}
.btn-dark{background:var(--dark);color:var(--white)}

/* SECTIONS */
.section{max-width:1200px;margin:auto;padding:48px 20px}
.section h2{font-size:1.8rem;margin-bottom:24px;color:var(--dark)}
.section h3{font-size:1.3rem;margin-bottom:12px;color:var(--dark)}

/* CARDS */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:var(--white);border:1px solid #ddd;border-radius:10px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.card h3{margin-bottom:8px}
.card .rank{display:inline-block;background:var(--orange);color:var(--white);padding:2px 10px;border-radius:4px;font-size:.8rem;font-weight:700;margin-bottom:12px}

/* REVIEW BLOCK */
.review{border:1px solid #ddd;border-radius:10px;padding:28px;margin-bottom:28px;background:var(--white)}
.review.top-pick{border-color:var(--orange);border-width:2px}
.review h3{font-size:1.4rem}
.review .badge{display:inline-block;background:var(--orange);color:var(--white);padding:4px 12px;border-radius:4px;font-size:.8rem;font-weight:700;margin-bottom:12px}
.review .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.review ul{padding-left:20px}
.review li{margin-bottom:6px;font-size:.95rem}
.review .buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* COMPARISON TABLE */
.table-wrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{background:var(--dark);color:var(--white);padding:12px;text-align:left}
td{padding:12px;border-bottom:1px solid #eee}
tr:hover td{background:#f9f9f9}

/* DISCLOSURE */
.disclosure{background:#fff8f0;border-left:4px solid var(--orange);padding:16px 20px;margin:20px auto;max-width:1200px;font-size:.85rem;color:#666;border-radius:0 6px 6px 0}

/* FOOTER */
footer{background:var(--dark);color:#aaa;padding:40px 20px;font-size:.85rem}
.footer-wrap{max-width:1200px;margin:auto}
.footer-wrap h4{color:var(--white);margin-bottom:12px;font-size:.95rem}
.network-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px}
.network-links a{color:#aaa}
.network-links a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid #444;padding-top:16px;margin-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* MOBILE */
@media(max-width:768px){
  .hero h1{font-size:1.6rem}
  nav ul{display:none;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--dark);padding:20px;gap:16px}
  nav ul.open{display:flex}
  .hamburger{display:block}
  .review .pros-cons{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}