/* BuyBestMonitor v2 — premium dark theme, compact type */
:root{
  --bg:#070b16; --bg2:#0a1120; --panel:#0e1628; --panel2:#111c33;
  --line:#1e2c47; --line2:#2a3c5f;
  --txt:#e8eef9; --mut:#9fb0cc; --dim:#7286a5;
  --acc:#5b8cff; --acc2:#00c2ff; --vio:#7c5cff;
  --grad:linear-gradient(92deg,#5b8cff,#00c2ff 55%,#7c5cff);
  --amber:#f5b544;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(1100px 500px at 85% -80px,rgba(124,92,255,.14),transparent 60%),
  radial-gradient(900px 480px at -10% 240px,rgba(0,194,255,.10),transparent 60%),
  var(--bg);
  color:var(--txt);
  font:16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",system-ui,sans-serif;line-height:1.22;color:#fff;margin:1.1em 0 .5em}
h1{font-size:1.72rem;letter-spacing:-.01em}
h2{font-size:1.32rem;margin-top:1.6em}
h3{font-size:1.06rem}
p{margin:.65em 0}
strong{color:#fff}
::selection{background:rgba(0,194,255,.35)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hwrap{max-width:1120px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.logo{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.28rem;color:#fff;letter-spacing:-.01em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover{text-decoration:none}
nav.main{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:var(--mut);font-size:.9rem;font-weight:600;padding:7px 11px;border-radius:9px}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}

/* ---------- layout ---------- */
.wrap{max-width:880px;margin:0 auto;padding:8px 20px 30px}
.hero + .wrap{max-width:1120px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,22,.93) 22%,rgba(7,11,22,.72) 55%,rgba(7,11,22,.38)),linear-gradient(0deg,var(--bg) 0,transparent 34%)}
.hero-inner{position:relative;max-width:1120px;margin:0 auto;padding:74px 20px 64px}
.hero-kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--acc2);margin:0 0 10px}
.hero h1{font-size:2.55rem;line-height:1.08;margin:0 0 14px;max-width:640px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-inner p{color:#c6d3ea;max-width:560px;font-size:1.02rem}
.cta{display:inline-block;margin-top:16px;background:var(--grad);color:#fff;font-weight:700;padding:13px 24px;border-radius:12px;box-shadow:0 10px 30px rgba(0,140,255,.35);transition:transform .15s ease,box-shadow .15s ease}
.cta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,140,255,.45)}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-stats span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#eaf1ff;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:999px}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:18px 0 8px}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card-img{width:100%;height:168px;object-fit:cover;display:block}
.grad-thumb{display:flex;align-items:center;justify-content:center;background:radial-gradient(600px 200px at 20% 0,rgba(245,181,84,.35),transparent),linear-gradient(120deg,#2a1f3d,#141b31 60%,#0a2e3f);color:var(--amber);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.5rem;text-align:center;line-height:1.15;letter-spacing:.06em}
.grad-thumb small{font-size:.68rem;letter-spacing:.3em;color:#e8d9b8}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:2px 0 0;font-size:1.08rem}
.card h3 a{color:#fff}
.card p{color:var(--mut);font-size:.93rem;margin:0}
.card .read{margin-top:auto;padding-top:8px;font-weight:700;font-size:.92rem}
.tag{align-self:flex-start;background:rgba(0,194,255,.12);border:1px solid rgba(0,194,255,.28);color:#8fdcff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}

/* ---------- article ---------- */
article.page{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 260px),var(--bg2);border:1px solid var(--line);border-radius:20px;padding:26px 30px 30px;margin-top:18px}
.crumb{color:var(--dim);font-size:.85rem;margin:0 0 6px}
.crumb a{color:var(--mut)}
.art-fig{margin:10px 0 4px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.art-fig img{width:100%;height:auto;display:block}
.meta{color:var(--dim);font-size:.88rem}
.disc{background:rgba(91,140,255,.08);border:1px solid rgba(91,140,255,.25);border-left:4px solid var(--acc);border-radius:12px;padding:13px 16px;font-size:.92rem;color:#c9d7f2;margin:16px 0}
.qa{background:linear-gradient(180deg,rgba(0,194,255,.09),rgba(124,92,255,.07));border:1px solid var(--line2);border-radius:14px;padding:15px 18px;margin:16px 0}
.note{color:var(--mut);font-size:.9rem}
.verdict{background:rgba(245,181,84,.08);border:1px solid rgba(245,181,84,.3);border-radius:14px;padding:15px 18px;margin:18px 0}

/* picks */
.pick{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:0 14px 14px 0;padding:16px 20px;margin:16px 0}
.pick h3{margin-top:0}
.specs{color:#b9c9e4;font-size:.92rem;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.specs strong{color:var(--amber)}

/* tables */
table.cmp{border-collapse:separate;border-spacing:0;width:100%;font-size:.92rem;margin:16px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.cmp th{background:var(--panel2);color:#fff;text-align:left;padding:10px 12px;font-family:"Space Grotesk",sans-serif;font-size:.86rem;letter-spacing:.02em}
table.cmp td{padding:9px 12px;border-top:1px solid var(--line);color:#cfdaee}
table.cmp tr:nth-child(even) td{background:rgba(255,255,255,.025)}

/* pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.pros,.cons{border-radius:14px;padding:6px 18px 12px;border:1px solid var(--line)}
.pros{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.3)}
.cons{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.28)}
.pros h4{color:#4ade80}.cons h4{color:#f87171}
.pros li::marker{color:#4ade80}.cons li::marker{color:#f87171}

/* faq */
.faq h3{color:#cfe2ff;margin-bottom:2px}
.faq p{color:var(--mut)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:#05080f;margin-top:44px}
.fwrap{max-width:1120px;margin:0 auto;padding:34px 20px 30px;color:var(--dim);font-size:.9rem}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-bottom:20px}
.fcols h4{color:#fff;margin:0 0 10px;font-size:.95rem}
.fcols a{display:block;color:var(--mut);padding:3px 0}
.fcols a:hover{color:#fff}

/* ---------- mobile ---------- */
@media (max-width:700px){
  body{font-size:15px}
  .hero-inner{padding:52px 18px 46px}
  .hero h1{font-size:1.9rem}
  h1{font-size:1.45rem} h2{font-size:1.18rem}
  article.page{padding:20px 17px 24px;border-radius:16px}
  .pc{grid-template-columns:1fr}
  nav.main{margin-left:0}
  table.cmp{font-size:.85rem}
}