:root{
    --bg:#0f1724;
    --panel:#0b1220;
    --muted:#9aa6b2;
    --accent:#4f9cff;
    --accent-2:#6ce6b8;
    --card:#0f1b2a;
    --glass: rgba(255,255,255,0.03);
    --text:#e6eef8;
    --radius:14px;
    --maxw:1180px;
    --glass-border: rgba(255,255,255,0.04);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:
        radial-gradient(1000px 400px at 10% 10%, rgba(79,156,255,0.06), transparent 8%),
        radial-gradient(800px 300px at 90% 80%, rgba(108,230,184,0.03), transparent 8%),
        var(--bg);
    line-height:1.5;
    color:var(--text);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
}
.wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:4px;
}
/* Header */
.site-header{
    position:sticky; top:12px; z-index:60;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    backdrop-filter: blur(6px);
    border-radius:12px;
    margin:12px;
    padding:10px 14px;
    box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border:1px solid var(--glass-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{
    font-weight:800;
    color:var(--text);
    text-decoration:none;
    font-size:1.5em;
    display:flex;
    align-items:center;
    gap:10px;
    letter-spacing:-0.02em;
    text-decoration: none !important;
}
.logo::before{
    content:"";
    width:36px;height:36px;border-radius:9px;
    background:linear-gradient(135deg,var(--accent),#2fb1ff);
    box-shadow:0 6px 18px rgba(79,156,255,0.18);
    display:inline-block;
}
.main-nav{display:flex;gap:14px;align-items:center}
.main-nav a{
    text-decoration: none;
    color: var(--muted);
    margin-left: 1.5rem;
    font-weight: 500;
    transition: color 0.3s;
}
.main-nav a:hover,
.main-nav a:focus{
    color:var(--text);
    background:linear-gradient(90deg, rgba(79,156,255,0.07), rgba(108,230,184,0.03));
    outline:none;
}
/* HEADLINE STYLING — emphasized */
h1, h2, h3, h4, h5 {
    color: var(--text);
    margin: 0 0 10px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
/* Hero */
.hero{padding:56px 0 36px}
.hero-inner{
    /* display:grid; */
    grid-template-columns:1fr 260px;
    gap:28px;
    align-items:center;
}
.hero-text h1{
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);   /* larger */
    font-weight:900;                         /* heavier */
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin:0 0 12px;
    letter-spacing: -0.02em;
    text-shadow: 0 6px 18px rgba(47,155,255,0.08);
}
.lede{
    margin:0 0 18px;
    color:var(--muted);
    /* max-width:62ch; */
    font-size:1em
}
.cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(90deg,var(--accent),#2fb1ff);
    color:#021026;
    padding:11px 16px;border-radius:12px;
    text-decoration:none;font-weight:700;
    box-shadow:0 10px 30px rgba(47,177,255,0.12);
    transition:transform .12s ease, box-shadow .12s ease;
}
.cta:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(47,177,255,0.16)}
/* hero aside card */
.score-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:18px;border-radius:14px;border:1px solid var(--glass-border);
    box-shadow:0 8px 30px rgba(2,6,23,0.6);
    text-align:center;
}
.score{font-size:36px;font-weight:900;color:var(--accent)}
.score-meta{font-size:12px;color:var(--muted)}
/* Sections */
section { margin-top: 26px; }
.wrap h2{
    font-size: 2rem;
    font-weight:800;
    background: linear-gradient(90deg, rgba(108,230,184,0.06), rgba(79,156,255,0.06));
    padding:8px 12px;
    border-radius:10px;
    /* display:inline-block; */
    color: var(--accent);
    /* color:var(--text); */
    box-shadow: 0 8px 20px rgba(2,6,23,0.35);
    margin-bottom:12px;
}
.muted{color:var(--muted)}
/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:18px;margin-top:16px}
/* .cards{display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;margin-top:16px} */
.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    border:1px solid var(--glass-border);
    padding:18px;border-radius:12px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.55);
    transition:transform .12s ease, box-shadow .12s ease;
    display: flex;
    flex-direction: column;
}
.card:hover{transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,0.6)}
.card h3{
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:-0.01em;
    margin:0 0 8px;
}
.card-lead{margin:0 0 10px;color:var(--muted);font-weight:600}
.mini-list{list-style:none;padding:0;margin:0 0 10px;font-size:0.95rem;color:var(--muted)}
.pros,.cons{margin:6px 0;font-size:0.95rem}
.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}
.btn-sm{
    display:inline-block;
    margin-top:8px;
    padding:8px 12px;
    background:transparent;
    border-radius:10px;
    color:var(--accent);
    border:1px solid rgba(79,156,255,0.12);
    text-decoration:none;
    font-weight:700;
    text-align: center;
}
/* Table */
.table-wrap{overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:10px;border-radius:12px;border:1px solid var(--glass-border);box-shadow:0 8px 30px rgba(2,6,23,0.55)}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.95rem}
.compare-table th,.compare-table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}
.compare-table thead th{
  position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--muted);font-weight:800;font-size:0.95rem;
}
.compare-table tbody tr:hover td{background:linear-gradient(90deg, rgba(79,156,255,0.02), transparent)}
.compare-table td:first-child{font-weight:700;color:var(--text)}
/* Methodology & author */
.methodology ol{padding-left:1.1rem;color:var(--muted)}
.author-box{
  display:flex;gap:14px;align-items:center;margin-top:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:12px;border-radius:10px;border:1px solid var(--glass-border);
}
.author-box img{width:64px;height:64px;border-radius:12px;flex-shrink:0}
.byline{font-size:0.98rem;font-weight:700}
.cred{font-size:0.85rem;color:var(--muted)}
/* Review sample */
.review-sample .two-col{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:start}
.review-stats{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:14px;border-radius:12px;border:1px solid var(--glass-border);
}
.score-large{font-size:40px;color:var(--accent);font-weight:900}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
.pros-cons h5{margin:0 0 8px;color:var(--muted)}
/* Smaller headings inside content */
h4{font-size:1rem;font-weight:800;margin-top:12px;margin-bottom:8px}
h5{font-size:0.95rem;font-weight:800}
/* FAQ */
.faq details{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:12px;border-radius:10px;margin-bottom:10px;border:1px solid var(--glass-border);
}
.faq summary {cursor:pointer; font-weight:800; color:var(--text); list-style: none; font-size: 1.3em;}
.faq summary::-webkit-details-marker{display:none}
/* Resources */
.resources-list{list-style:disc;padding-left:20px; line-height: 1.0; }
.resources-list li {
  padding: 0; 
  margin: 0; 
}
.resources-list a{
  font-size: 16px;
  font-weight: bold !important;
  color:var(--accent);
  text-decoration:none;
  background:linear-gradient(90deg, rgba(79,156,255,0.06), transparent);
  padding:6px 8px;
  border-radius:8px;
  display:inline-block;
}
/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.02);
  margin-top:28px;padding:28px 18px;border-radius:10px;background:transparent;
}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.site-footer h4{margin:0 0 8px;font-weight:800}
.site-footer p{margin:0;color:var(--muted)}
.small{font-size:0.85rem}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Responsive tweaks */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .review-sample .two-col{grid-template-columns:1fr;order:0}
  .hero-aside{display:none}
  .header-inner{flex-direction:row;gap:12px}
  .site-header{padding:10px}
}
@media (max-width:768px){
    .cards{grid-template-columns:1fr}
}
@media (max-width:520px){
    .wrap{padding:18px}
    .main-nav{display:none}
    .logo{font-size:1rem}
    .cards{grid-template-columns:1fr}
    .compare-table th,.compare-table td{padding:10px}
}
/* Accessibility focus */
a:focus, button:focus, .btn-sm:focus, .cta:focus{
    outline:3px solid rgba(79,156,255,0.18);
    outline-offset:3px;
    border-radius:10px;
}
/* Images */
.content-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}