/* HERO TITLE FIX */

body.dark .hero h1{
  color:#ffffff !important;
}

body.dark .hero .badge{
  color:#cbd5e1 !important;
}

body.dark .hero .micro span{
  color:#cbd5e1 !important;
  border-color:rgba(255,255,255,.15) !important;
}

/* ===== DARK MODE HERO FIX ===== */

/* input box */
body.dark .input{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* placeholder text */
body.dark .input input{
  color:#e2e8f0 !important;
}

/* tip text */
body.dark .hint{
  color:#94a3b8 !important;
}

/* badges */
body.dark .micro span{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#cbd5e1 !important;
}

/* section titles */
body.dark .section h2{
  color:#ffffff !important;
}
/* FORCE GUIDES GRID */

.section.blog .blog-grid{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:24px !important;
max-width:1100px;
margin:auto;
}

.section.blog .blog-card{
background:#fff;
padding:22px;
border:1px solid var(--border);
border-radius:12px;
}

/* mobile */

@media (max-width:900px){

.section.blog .blog-grid{
grid-template-columns:1fr !important;
}

}

/* dark */

body.dark .blog-card{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.1);
}
/* =========================
   Guides / Blog Cards PRO
========================= */

.section.blog{
  padding: 50px 0 !important;
}

.section.blog h2{
  text-align: center;
  margin-bottom: 26px;
}

.section.blog .blog-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.section.blog .blog-card{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.section.blog .blog-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .10) !important;
  border-color: rgba(37,99,235,.22) !important;
}

.section.blog .blog-card h3{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: var(--navy) !important;
}

.section.blog .blog-card p{
  margin: 0 0 16px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

.section.blog .blog-card .btn{
  width: 100% !important;
  justify-content: center !important;
}

/* Mobile */
@media (max-width: 980px){
  .section.blog .blog-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Dark */
body.dark .section.blog .blog-card{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.30) !important;
}

body.dark .section.blog .blog-card h3{
  color: #ffffff !important;
}

body.dark .section.blog .blog-card p{
  color: #94a3b8 !important;
}
/* CTA button inside articles */

.cta-tool{
display:inline-block;
margin-top:12px;
padding:14px 22px;
border-radius:10px;
background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#fff;
font-weight:600;
text-decoration:none;
transition:.2s;
}

.cta-tool:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(37,99,235,.35);
}/* Article mini tool */

.article-tool-box{
margin:20px 0 30px;
padding:20px;
border-radius:14px;
background:rgba(37,99,235,.05);
border:1px solid var(--border);
}

.tool-title{
margin-bottom:10px;
font-weight:600;
}

.tool-inline{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.tool-input{
flex:1;
padding:12px 14px;
border-radius:8px;
border:1px solid var(--border);
}

.tool-btn{
padding:12px 18px;
border-radius:8px;
background:#2563eb;
color:#fff;
text-decoration:none;
font-weight:600;
}

/* dark */

body.dark .article-tool-box{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.1);
}
/* Article layout */

.article{
max-width:760px;
margin:auto;
}

.article h1{
font-size:40px;
margin-bottom:10px;
}

.article .lead{
font-size:18px;
color:var(--muted);
margin-bottom:28px;
}

.article h2{
margin-top:36px;
margin-bottom:10px;
}

.article p{
line-height:1.7;
margin-bottom:16px;
}

.article ul{
margin:16px 0;
padding-left:20px;
}

.article pre{
padding:14px;
border-radius:10px;
background:#0f172a;
overflow:auto;
}.videoInfo{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
font-size:14px;
}

.videoInfo img{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
}

.videoInfo .videoMeta{
line-height:1.3;
}/* FINAL GUIDES FIX */

.blog{
padding:60px 0 !important;
}

.blog h2{
text-align:center !important;
margin-bottom:30px !important;
}

.blog-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:24px !important;
max-width:1100px !important;
margin:0 auto !important;
padding:0 20px !important;
align-items:stretch !important;
}

.blog-card{
display:block !important;
background:#ffffff !important;
border:1px solid #e5e7eb !important;
border-radius:16px !important;
padding:24px !important;
min-height:210px !important;
box-sizing:border-box !important;
}

@media (max-width:900px){
.blog-grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width:600px){
.blog-grid{
grid-template-columns:1fr !important;
}
}