@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ── TOKENS ── */
:root{
  --bg:#ffffff;--bg2:#f8fafc;--bg3:#f1f5f9;
  --card:#ffffff;--border:#e2e8f0;--border2:#cbd5e1;
  --ink:#0f172a;--body:#334155;--muted:#64748b;
  --or:#f97316;--or2:#ea580c;--or-light:#fff7ed;--or-border:#fed7aa;
  --gr:#059669;--gr-light:#ecfdf5;--gr-border:#a7f3d0;
  --amb:#d97706;--amb-light:#fffbeb;
  --re:#dc2626;--re-light:#fef2f2;
  --bl:#2563eb;--bl-light:#eff6ff;
  --vi:#7c3aed;--vi-light:#f5f3ff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 20px 40px rgba(0,0,0,.10),0 8px 16px rgba(0,0,0,.06);
  --r:12px;--r-sm:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--body);line-height:1.7;font-size:1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--or);text-decoration:none;transition:color .15s}
a:hover{color:var(--or2)}
strong,b{color:var(--ink);font-weight:600}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.nav-i{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;max-width:1200px;margin:auto;gap:1rem}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.logo span{color:var(--or)}
.nav-links{display:flex;gap:1.75rem}
.nav-links a{color:var(--muted);font-size:.875rem;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--or);color:#fff !important;padding:.48rem 1.1rem;border-radius:var(--r-sm);font-weight:700;font-size:.85rem;white-space:nowrap;transition:background .15s,transform .12s;box-shadow:0 2px 8px rgba(249,115,22,.3)}
.nav-cta:hover{background:var(--or2) !important;transform:translateY(-1px)}
@media(max-width:820px){.nav-links{display:none}}
@media(max-width:480px){.nav-i{padding:.65rem 1rem}}

/* ── LAYOUT ── */
.wrap{max-width:1200px;margin:auto;padding:0 1.5rem}
.content-wrap{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 7rem}
section{padding:4.5rem 1.5rem}
.bg-gray{background:var(--bg2)}
.bg-white{background:var(--bg)}

/* ── HOMEPAGE HERO ── */
.hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#1e40af 100%);color:#fff;padding:5rem 1.5rem 4.5rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 800px 400px at 50% -20%,rgba(249,115,22,.18),transparent),radial-gradient(ellipse 600px 300px at 80% 100%,rgba(99,102,241,.12),transparent);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);color:#fdba74;padding:.28rem .85rem;border-radius:99px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.25rem}
.hero h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;color:#fff;margin-bottom:1rem}
.hero h1 em{font-style:normal;color:#fb923c}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:500px;margin:0 auto 2.25rem}
.hero-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;padding-top:3rem;margin-top:3rem;border-top:1px solid rgba(255,255,255,.1)}
.hero-stat strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:2rem;font-weight:800;color:#fff}
.hero-stat span{font-size:.8rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}

/* ── SECTION HEADERS ── */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:.5rem}
.sec-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.55rem,2.5vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:.65rem;line-height:1.2}
.sec-sub{color:var(--muted);font-size:.95rem;max-width:520px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:'DM Sans',sans-serif;font-weight:700;border-radius:var(--r-sm);transition:all .15s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--or);color:#fff;padding:.85rem 1.75rem;font-size:.95rem;box-shadow:0 4px 16px rgba(249,115,22,.3)}
.btn-primary:hover{background:var(--or2);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(249,115,22,.35)}
.btn-primary.lg{padding:1rem 2.2rem;font-size:1.05rem}
.btn-primary.sm{padding:.55rem 1.1rem;font-size:.87rem}
.btn-primary.full{display:flex;width:100%}
.btn-outline{border:2px solid var(--border2);color:var(--ink);background:transparent;padding:.8rem 1.65rem;font-size:.95rem}
.btn-outline:hover{border-color:var(--or);color:var(--or);background:var(--or-light)}
.btn-ghost{color:var(--muted);background:transparent;padding:.65rem 1.1rem;font-size:.9rem;border:1px solid var(--border)}
.btn-ghost:hover{color:var(--ink);border-color:var(--border2);background:var(--bg2)}
.btn-white{background:#fff;color:var(--ink);padding:.85rem 1.75rem;font-size:.95rem;box-shadow:var(--shadow)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--ink)}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border2)}
.card.featured{border-color:var(--or-border);box-shadow:0 4px 20px rgba(249,115,22,.12)}
.card.featured:hover{box-shadow:0 8px 32px rgba(249,115,22,.18)}

/* ── RATING ── */
.stars{color:var(--amb);letter-spacing:.06em;font-size:.95rem}
.rating-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:2.4rem;color:var(--ink);line-height:1}
.rating-count{font-size:.78rem;color:var(--muted)}

/* ── TAGS / BADGES ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .65rem;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.badge-vpn{background:var(--bl-light);color:var(--bl)}
.badge-host{background:var(--gr-light);color:#065f46}
.badge-ai{background:var(--or-light);color:#9a3412}
.badge-home{background:var(--vi-light);color:var(--vi)}
.badge-kit{background:#fdf2f8;color:#9d174d}
.badge-out{background:#ecfeff;color:#155e75}
.badge-leg{background:var(--amb-light);color:#92400e}
.badge-edu{background:var(--bl-light);color:#1e40af}
.badge-furn{background:#fefce8;color:#713f12}
.badge-new{background:var(--gr-light);color:#065f46}
.badge-deal{background:var(--or-light);color:#9a3412}

/* ── TABLES ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:560px}
thead tr{background:var(--bg3)}
th{padding:.85rem 1rem;text-align:left;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
td{padding:.85rem 1rem;border-bottom:1px solid var(--border);font-size:.93rem;color:var(--body)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg2)}
.row-hi td{background:var(--or-light)}
.row-hi:hover td{background:#fde8cc}
.c-gr{color:var(--gr);font-weight:600}
.c-or{color:var(--or);font-weight:600}
.c-re{color:var(--re);font-weight:600}
.c-mu{color:var(--muted)}
.c-amb{color:var(--amb);font-weight:600}
.strike{text-decoration:line-through;color:var(--muted)}
.tbl-cta{display:inline-flex;align-items:center;background:var(--or);color:#fff;padding:.3rem .8rem;border-radius:6px;font-size:.8rem;font-weight:700;white-space:nowrap;transition:background .15s}
.tbl-cta:hover{background:var(--or2);color:#fff}

/* ── ARTICLE HERO ── */
.art-hero{background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:3.5rem 1.5rem 3rem;border-bottom:1px solid rgba(255,255,255,.06)}
.art-hero-inner{max-width:820px;margin:auto}
.art-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;color:#fff;margin:1rem 0 .85rem}
.art-meta{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55);align-items:center;margin-bottom:1.25rem}
.art-meta span{display:flex;align-items:center;gap:.3rem}
.verified-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(5,150,105,.15);border:1px solid rgba(5,150,105,.3);color:#6ee7b7;padding:.26rem .75rem;border-radius:99px;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.deal-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);color:#fdba74;padding:.26rem .75rem;border-radius:99px;font-size:.74rem;font-weight:700;letter-spacing:.04em}

/* ── BREADCRUMB ── */
.bc{font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:1.1rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.bc a{color:rgba(255,255,255,.45)}
.bc a:hover{color:rgba(255,255,255,.8)}
.bc-sep{opacity:.35}

/* ── ARTICLE CONTENT ── */
.art-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:2rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}
h2.art-h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.1rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}
h3.art-h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .65rem}
.art-p{color:var(--body);font-size:.96rem;margin-bottom:1rem;line-height:1.72}
.art-ul{color:var(--body);font-size:.95rem;margin:.25rem 0 1rem 1.1rem;line-height:1.7}
.art-ul li{margin-bottom:.4rem}

/* ── TOC ── */
.toc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.toc-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin-bottom:.85rem}
.toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .75rem}
.toc-grid a{font-size:.87rem;color:var(--muted);padding:.2rem 0;transition:color .15s}
.toc-grid a:hover{color:var(--or)}
@media(max-width:500px){.toc-grid{grid-template-columns:1fr}}

/* ── VERDICT / PROS-CONS ── */
.verdict{border-radius:var(--r);padding:1.75rem;margin-bottom:1.5rem;border:2px solid var(--or-border);background:var(--or-light)}
.verdict-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;color:var(--ink);margin-bottom:1.25rem}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pc-box{padding:1.1rem;border-radius:var(--r-sm)}
.pc-pros{background:var(--gr-light);border:1px solid var(--gr-border)}
.pc-cons{background:var(--re-light);border:1px solid #fca5a5}
.pc-label{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.77rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.65rem}
.pc-pros .pc-label{color:var(--gr)}
.pc-cons .pc-label{color:var(--re)}
.pc-box li{font-size:.88rem;color:var(--body);margin-bottom:.35rem;margin-left:1.1rem;line-height:1.55}
@media(max-width:520px){.pc-grid{grid-template-columns:1fr}}

/* ── SCORE GRID ── */
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.85rem;margin:1.25rem 0}
.score-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:1rem .75rem;text-align:center}
.score-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1}
.score-num.hi{color:var(--or)}
.score-label{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.score-bar{height:4px;background:var(--border);border-radius:99px;margin:.4rem auto 0;width:75%;overflow:hidden}
.score-fill{height:100%;background:var(--or);border-radius:99px}

/* ── CTA BLOCK ── */
.cta-block{background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1px solid var(--or-border);border-radius:var(--r);padding:2rem;text-align:center;margin:1.75rem 0}
.cta-block h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;color:var(--ink);margin-bottom:.45rem}
.cta-block p{color:var(--muted);font-size:.92rem;margin-bottom:1.35rem}

/* ── DEAL BOX ── */
.deal-box{background:linear-gradient(135deg,#0f172a,#1e3a5f);border-radius:var(--r);padding:2rem;text-align:center;margin-bottom:1.5rem;color:#fff}
.deal-pct{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:3.5rem;color:#fb923c;line-height:1;margin-bottom:.25rem}
.deal-price{font-family:'Bricolage Grotesque',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;margin:.35rem 0 .15rem}
.deal-price del{color:rgba(255,255,255,.4);font-size:1rem;font-weight:400;margin-right:.35rem}
.deal-desc{font-size:.9rem;color:rgba(255,255,255,.65);margin-bottom:1.5rem}

/* ── DISCLOSURE ── */
.disc{background:var(--amb-light);border:1px solid #fde68a;border-radius:var(--r-sm);padding:.8rem 1.1rem;font-size:.82rem;color:#92400e;margin-bottom:1.5rem;line-height:1.6}

/* ── STICKY BAR ── */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:150;background:#fff;border-top:2px solid var(--or);box-shadow:0 -4px 20px rgba(0,0,0,.1);padding:.85rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.sticky-text{font-size:.88rem;color:var(--body);line-height:1.4}
.sticky-text strong{color:var(--ink)}
@media(max-width:520px){.sticky-text{display:none};.sticky-bar{justify-content:center}}

/* ── CATEGORY INDEX HERO ── */
.cat-hero{background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;padding:5rem 1.5rem 4.5rem;text-align:center;position:relative;overflow:hidden}
.cat-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 350px at 50% -10%,rgba(249,115,22,.15),transparent);pointer-events:none}
.cat-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;color:#fff;margin-bottom:.75rem}
.cat-hero p{font-size:1.05rem;color:rgba(255,255,255,.72);max-width:480px;margin:0 auto}

/* ── ARTICLE LIST CARDS ── */
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-top:2.5rem}
.art-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm);transition:all .2s;display:flex;flex-direction:column}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border2)}
.art-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:.65rem 0 .55rem;line-height:1.35}
.art-card h3 a{color:var(--ink)}
.art-card h3 a:hover{color:var(--or)}
.art-card p{font-size:.88rem;color:var(--muted);line-height:1.6;flex:1}
.art-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:.85rem;margin-top:.85rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.read-more{color:var(--or);font-weight:600;font-size:.85rem}
.read-more:hover{color:var(--or2)}

/* ── HOMEPAGE PICKS GRID ── */
.picks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.25rem;margin-top:2.5rem}
.pick-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.75rem;box-shadow:var(--shadow-sm);transition:all .2s;display:flex;flex-direction:column;gap:1rem}
.pick-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pick-card.top{border-color:var(--or-border);background:linear-gradient(135deg,#fffbf7,#fff)}
.pick-rank{position:absolute;top:-10px;left:1.5rem;background:var(--or);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.06em;padding:.2rem .65rem;border-radius:99px;text-transform:uppercase}
.pick-header{display:flex;align-items:center;gap:.85rem}
.pick-icon{width:44px;height:44px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.pick-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink)}
.pick-sub{font-size:.78rem;color:var(--muted)}
.pick-desc{font-size:.9rem;color:var(--body);line-height:1.65}
.pick-meta{display:flex;justify-content:space-between;align-items:center;padding-top:.85rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}

/* ── CATEGORIES GRID ── */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2.5rem}
.cat-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;text-align:center;box-shadow:var(--shadow-sm);transition:all .2s;cursor:pointer;display:block;color:var(--ink)}
.cat-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--or-border);background:var(--or-light)}
.cat-item:hover .cat-item-name{color:var(--or)}
.cat-emoji{font-size:2rem;margin-bottom:.65rem}
.cat-item-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.97rem;color:var(--ink);margin-bottom:.25rem}
.cat-item-count{font-size:.77rem;color:var(--muted)}

/* ── ALL BRANDS TABLE ── */
.brands-tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-top:2.5rem}

/* ── FOOTER ── */
.footer{background:var(--ink);color:rgba(255,255,255,.75);padding:3.5rem 1.5rem 5.5rem}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:2.5rem;max-width:1200px;margin:0 auto 2.5rem}
.footer-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;margin-bottom:.7rem;display:block}
.footer-logo span{color:#fb923c}
.footer-desc{font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.5);max-width:260px}
.footer-col h5{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:.85rem}
.footer-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:.4rem;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.8rem;color:rgba(255,255,255,.35)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeUp .45s ease both}
@media(prefers-reduced-motion:reduce){.fade-in{animation:none}}

/* ── UTILITY ── */
.text-center{text-align:center}
.mt-sm{margin-top:1rem}.mt-md{margin-top:1.5rem}.mt-lg{margin-top:2.5rem}
.mb-sm{margin-bottom:.75rem}.mb-md{margin-bottom:1.25rem}
.gap-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

/* ── MOBILE MENU ── */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--ink);line-height:0}
.nav-toggle svg{width:24px;height:24px}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-direction:column;gap:0;padding:.5rem 0;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem 1.5rem;border-bottom:1px solid var(--border);font-size:.95rem}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a:hover{background:var(--bg2)}
  .nav-i{position:relative}
}

/* ── READING PROGRESS BAR ── */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--or),#f59e0b);z-index:300;width:0;transition:width .1s linear}

/* ── BACK TO TOP ── */
.btt{position:fixed;bottom:5.5rem;right:1.5rem;z-index:180;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s,background .15s;pointer-events:none}
.btt.show{opacity:1;transform:translateY(0);pointer-events:auto}
.btt:hover{background:var(--or)}
.btt svg{width:20px;height:20px}

/* ── CATEGORY-SPECIFIC ARTICLE HERO ACCENTS ── */
.art-hero.cat-vpn{background:linear-gradient(135deg,#0f172a,#1e3a5f,#1e40af)}
.art-hero.cat-hosting{background:linear-gradient(135deg,#0f172a,#064e3b,#065f46)}
.art-hero.cat-learning{background:linear-gradient(135deg,#0f172a,#312e81,#3730a3)}
.art-hero.cat-ai{background:linear-gradient(135deg,#0f172a,#7c2d12,#9a3412)}
.art-hero.cat-home{background:linear-gradient(135deg,#0f172a,#4c1d95,#5b21b6)}
.art-hero.cat-kitchen{background:linear-gradient(135deg,#0f172a,#831843,#9d174d)}
.art-hero.cat-outdoor{background:linear-gradient(135deg,#0f172a,#164e63,#155e75)}
.art-hero.cat-legal{background:linear-gradient(135deg,#0f172a,#78350f,#92400e)}
.art-hero.cat-furniture{background:linear-gradient(135deg,#0f172a,#713f12,#854d0e)}

/* ── DARK MODE ── */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;
    --card:#1e293b;--border:#334155;--border2:#475569;
    --ink:#f1f5f9;--body:#cbd5e1;--muted:#94a3b8;
    --or-light:#431407;--or-border:#9a3412;
    --gr-light:#022c22;--gr-border:#065f46;
    --amb-light:#451a03;
    --re-light:#450a0a;
    --bl-light:#172554;
    --vi-light:#2e1065;
    --shadow-sm:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);
    --shadow:0 4px 16px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15);
    --shadow-lg:0 20px 40px rgba(0,0,0,.35),0 8px 16px rgba(0,0,0,.2);
  }
  body{-webkit-font-smoothing:antialiased}
  .nav{background:rgba(15,23,42,.97);border-color:var(--border)}
  .nav-cta{box-shadow:0 2px 8px rgba(249,115,22,.2)}
  .disc{background:#451a03;border-color:#92400e;color:#fbbf24}
  .deal-box{background:linear-gradient(135deg,#1e293b,#0f172a)}
  .cta-block{background:linear-gradient(135deg,#431407,#451a03);border-color:#9a3412}
  .pick-card.top{background:linear-gradient(135deg,#1e293b,#27272a)}
  .footer{background:#020617}
  .sticky-bar{background:var(--bg);border-color:var(--or)}
  .hero{background:linear-gradient(135deg,#020617 0%,#0f172a 50%,#1e3a5f 100%)}
  .cat-hero{background:linear-gradient(135deg,#020617,#0f172a)}
  img{filter:brightness(.92)}
  .badge-vpn{background:#172554;color:#93c5fd}
  .badge-host{background:#022c22;color:#6ee7b7}
  .badge-ai{background:#431407;color:#fdba74}
  .badge-home{background:#2e1065;color:#c4b5fd}
  .badge-kit{background:#500724;color:#f9a8d4}
  .badge-out{background:#083344;color:#67e8f9}
  .badge-leg{background:#451a03;color:#fcd34d}
  .badge-edu{background:#172554;color:#93c5fd}
  .badge-furn{background:#422006;color:#fde047}
  .badge-new{background:#022c22;color:#6ee7b7}
  .badge-deal{background:#431407;color:#fdba74}
  .row-hi td{background:#431407}
  .row-hi:hover td{background:#7c2d12}
  @media(max-width:820px){
    .nav-links{background:rgba(15,23,42,.98)}
    .nav-links a{border-color:var(--border)}
    .nav-links a:hover{background:var(--bg2)}
  }
  .btt{background:var(--bg2);border:1px solid var(--border)}
  .pc-pros{background:#022c22;border-color:#065f46}
  .pc-cons{background:#450a0a;border-color:#991b1b}
  .verdict{background:#431407;border-color:#9a3412}
}

/* ── SMOOTH ENTRANCE ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── ENHANCED LINK HOVER IN ARTICLES ── */
.content-wrap a:not(.btn):not(.tbl-cta){border-bottom:1px solid rgba(249,115,22,.3);transition:border-color .15s,color .15s}
.content-wrap a:not(.btn):not(.tbl-cta):hover{border-bottom-color:var(--or)}

/* ── IMAGE PLACEHOLDER (for future images) ── */
.img-placeholder{background:var(--bg2);border:1px dashed var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;min-height:200px;margin:1.25rem 0}