/* ===== BLOG SHARED STYLES — LIGHT MODE ===== */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Manrope',sans-serif;
  background:#f8f9fb;
  color:#1a1a2e;
  line-height:1.8;
  padding-top:72px;
}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:0;left:0;right:0;
  height:72px;
  background:#fff;
  border-bottom:1px solid #e8eaf0;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  display:flex;align-items:center;
  padding:0 40px;
  justify-content:space-between;
  z-index:999;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  font-family:'Instrument Sans',sans-serif;
  font-size:1.3rem;font-weight:700;
  color:#1a1a2e;
  letter-spacing:0.3px;
}
.nav-logo img{height:28px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  color:#4a4a6a;text-decoration:none;
  font-size:0.95rem;font-weight:500;
  padding:8px 14px;border-radius:8px;
  transition:background 0.2s,color 0.2s;
}
.nav-links a:hover{background:#f0f1f8;color:#1a1a2e}
.nav-cta{
  background:#1a1a2e !important;
  color:#fff !important;
  padding:8px 18px !important;
  border-radius:8px !important;
  font-weight:600 !important;
}
.nav-cta:hover{background:#2d2d50 !important;color:#fff !important}

/* Hamburger */
.hamburger{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:8px;border-radius:8px;
  flex-direction:column;gap:5px;
}
.hamburger span{
  display:block;width:22px;height:2px;
  background:#1a1a2e;border-radius:2px;
  transition:all 0.3s;
}
.mobile-menu{
  display:none;
  position:fixed;top:72px;left:0;right:0;
  background:#fff;
  border-bottom:1px solid #e8eaf0;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  padding:16px 24px 24px;
  z-index:998;
  flex-direction:column;gap:4px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  color:#4a4a6a;text-decoration:none;
  font-size:1rem;font-weight:500;
  padding:12px 16px;border-radius:8px;
  transition:background 0.2s;
}
.mobile-menu a:hover{background:#f0f1f8;color:#1a1a2e}
.mobile-menu .nav-cta{
  background:#1a1a2e !important;
  color:#fff !important;
  text-align:center;margin-top:8px;
}

/* ===== LAYOUT ===== */
.container{max-width:860px;margin:0 auto;padding:56px 24px 80px}

/* ===== BREADCRUMB ===== */
.breadcrumb{
  font-size:0.88rem;color:#888;
  margin-bottom:28px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.breadcrumb a{color:#5b6af0;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:#bbb}

/* ===== TAG ===== */
.tag{
  display:inline-block;
  background:#ede9ff;color:#6c47d4;
  padding:4px 14px;border-radius:20px;
  font-size:0.82rem;font-weight:700;
  margin-bottom:16px;
  letter-spacing:0.3px;text-transform:uppercase;
}

/* ===== HEADINGS ===== */
h1{
  font-family:'Instrument Sans',sans-serif;
  font-size:2.4rem;line-height:1.2;
  margin-bottom:16px;
  color:#0f0f23;
  font-weight:700;
}
h2{
  font-family:'Instrument Sans',sans-serif;
  font-size:1.65rem;color:#0f0f23;
  margin:48px 0 14px;font-weight:700;
  padding-bottom:10px;
  border-bottom:2px solid #eef0f8;
}
h3{
  font-family:'Instrument Sans',sans-serif;
  font-size:1.15rem;color:#1a1a2e;
  margin-bottom:8px;font-weight:700;
}

/* ===== META ===== */
.meta{
  color:#888;font-size:0.92rem;
  margin-bottom:36px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.meta-dot{color:#ccc}

/* ===== INTRO BOX ===== */
.intro{
  font-size:1.08rem;color:#3a3a5c;
  margin-bottom:48px;
  padding:24px 28px;
  background:#fff;
  border-radius:14px;
  border-left:4px solid #6c47d4;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  line-height:1.8;
}

/* ===== BODY TEXT ===== */
p{color:#3a3a5c;margin-bottom:16px;font-size:1rem}
strong{color:#1a1a2e}
ul,ol{color:#3a3a5c;padding-left:22px;margin-bottom:16px}
ul li,ol li{margin-bottom:7px;font-size:1rem}

/* ===== AGENCY CARDS ===== */
.agency-card{
  background:#fff;
  border:1px solid #e8eaf0;
  border-radius:16px;
  padding:28px 32px;
  margin-bottom:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:box-shadow 0.25s,border-color 0.25s;
}
.agency-card:hover{
  box-shadow:0 6px 24px rgba(108,71,212,0.1);
  border-color:#c4b5fd;
}
.agency-card h3{color:#1a1a2e}

/* ===== RANK BADGE ===== */
.rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:linear-gradient(135deg,#6c47d4,#5b6af0);
  border-radius:50%;font-weight:700;font-size:1rem;
  color:#fff;margin-bottom:14px;
}
.rank-1{background:linear-gradient(135deg,#f59e0b,#f97316)}

/* ===== BADGE ===== */
.badge{
  display:inline-block;
  background:#ede9ff;color:#6c47d4;
  padding:2px 12px;border-radius:20px;
  font-size:0.78rem;font-weight:700;
  margin-left:8px;
}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:0.95rem}
th{
  background:#f0f1f8;color:#1a1a2e;
  padding:12px 16px;text-align:left;
  font-weight:700;font-size:0.9rem;
  border:1px solid #e0e2ee;
}
td{
  padding:11px 16px;
  border:1px solid #e8eaf0;
  color:#3a3a5c;
}
tr:nth-child(even) td{background:#fafbff}
.winner{color:#16a34a;font-weight:700}

/* ===== VERDICT / STEP BOXES ===== */
.verdict,.step{
  background:#fff;
  border:1px solid #e8eaf0;
  border-radius:14px;
  padding:24px 28px;
  margin:20px 0;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.verdict h3{color:#1a1a2e;margin-top:0;margin-bottom:12px}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:linear-gradient(135deg,#6c47d4,#5b6af0);
  border-radius:50%;font-weight:700;color:#fff;
  margin-bottom:10px;font-size:0.95rem;
}

/* ===== FLAGS ===== */
.red-flag{
  background:#fff5f5;border:1px solid #fecaca;
  border-radius:10px;padding:14px 18px;margin-bottom:10px;
}
.red-flag p{color:#b91c1c;margin:0;font-size:0.95rem}
.green-flag{
  background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:10px;padding:14px 18px;margin-bottom:10px;
}
.green-flag p{color:#15803d;margin:0;font-size:0.95rem}

/* ===== CTA BOX ===== */
.cta-box{
  background:linear-gradient(135deg,#1a1a2e 0%,#2d2060 100%);
  border-radius:20px;padding:44px 40px;
  text-align:center;margin:52px 0;
  box-shadow:0 8px 32px rgba(26,26,46,0.15);
}
.cta-box h2{
  color:#fff;margin:0 0 12px;
  font-size:1.75rem;border:none;padding:0;
}
.cta-box p{color:rgba(255,255,255,0.8);margin-bottom:24px}
.btn{
  display:inline-block;
  background:#fff;color:#1a1a2e;
  padding:12px 28px;border-radius:10px;
  text-decoration:none;font-weight:700;
  font-size:0.95rem;
  transition:all 0.2s;margin:5px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.btn:hover{background:#f0f1f8;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.btn-outline{
  background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,0.4);
}
.btn-outline:hover{background:rgba(255,255,255,0.1);color:#fff}

/* ===== RELATED ARTICLES ===== */
.related{margin-top:60px;padding-top:40px;border-top:2px solid #eef0f8}
.related h2{font-size:1.4rem;margin:0 0 20px;border:none;padding:0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.related-card{
  background:#fff;border:1px solid #e8eaf0;
  border-radius:12px;padding:18px;
  text-decoration:none;display:block;
  transition:box-shadow 0.2s,border-color 0.2s;
}
.related-card:hover{
  box-shadow:0 4px 16px rgba(108,71,212,0.1);
  border-color:#c4b5fd;
}
.related-card span{
  color:#6c47d4;font-size:0.78rem;
  font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
}
.related-card h4{color:#1a1a2e;margin:7px 0 5px;font-size:0.95rem;line-height:1.4}
.related-card p{color:#888;font-size:0.88rem;margin:0}

/* ===== FOOTER ===== */
.site-footer{
  background:#1a1a2e;
  padding:36px 24px;text-align:center;
  color:rgba(255,255,255,0.55);font-size:0.9rem;
}
.site-footer a{
  color:rgba(255,255,255,0.75);
  text-decoration:none;margin:0 10px;
  transition:color 0.2s;
}
.site-footer a:hover{color:#fff}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  h1{font-size:1.75rem}
  h2{font-size:1.35rem}
  .navbar{padding:0 20px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .container{padding:40px 16px 60px}
  .cta-box{padding:32px 20px}
  table{font-size:0.82rem}
  th,td{padding:9px 10px}
}
@media(max-width:480px){
  h1{font-size:1.5rem}
  .agency-card{padding:20px}
}