*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#ffffff;
color:#1a1a2e;
}

.topbar{
background:#1a1a2e;
color:#fff;
text-align:center;
padding:10px 16px;
font-weight:500;
font-size:14px;
}

.topbar strong{
color:#a78bfa;
font-weight:700;
}

.navbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 40px;
border-bottom:1px solid #eee;
flex-wrap:wrap;
gap:12px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo .mark{
width:34px;
height:34px;
border-radius:8px;
background:linear-gradient(135deg,#7c3aed,#a78bfa);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-weight:800;
}

.navlinks{
display:flex;
gap:26px;
font-size:15px;
font-weight:500;
color:#444;
}

.navlinks a{
color:#444;
text-decoration:none;
}

.navlinks a.active{
color:#7c3aed;
font-weight:600;
}

.nav-cta{
background:#1a1a2e;
color:#fff;
padding:10px 22px;
border-radius:8px;
text-decoration:none;
font-weight:600;
font-size:14px;
}

@media(max-width:768px){
.navlinks{display:none;}
}

.container{
max-width:780px;
margin:auto;
padding:50px 24px 80px 24px;
}

.wide-container{
max-width:1100px;
margin:auto;
padding:50px 24px 80px 24px;
}

.title{
font-size:34px;
font-weight:700;
margin-bottom:14px;
line-height:1.25;
}

.page-title{
text-align:center;
font-size:42px;
font-weight:700;
margin-bottom:10px;
}

.page-subtitle{
text-align:center;
color:#666;
font-size:16px;
max-width:600px;
margin:0 auto 50px auto;
}

.meta{
color:#888;
font-size:14px;
margin-bottom:34px;
}

.post-body h2{
font-size:24px;
margin:34px 0 14px 0;
font-weight:600;
}

.post-body h3{
font-size:19px;
margin:26px 0 10px 0;
font-weight:600;
}

.post-body p{
font-size:16px;
line-height:1.75;
color:#333;
margin-bottom:16px;
}

.post-body ul, .post-body ol{
margin:0 0 18px 22px;
}

.post-body li{
font-size:16px;
line-height:1.7;
color:#333;
margin-bottom:8px;
}

.post-body a{
color:#7c3aed;
font-weight:600;
text-decoration:underline;
}

.callout{
background:#f3ecff;
border:1px solid #ddd0ff;
border-radius:14px;
padding:22px 26px;
margin:26px 0;
}

.callout p{
margin-bottom:8px;
color:#3b2a6b;
}

.callout strong{
color:#1a1a2e;
}

.btn-primary{
display:inline-block;
background:#1a1a2e;
color:#fff !important;
text-decoration:none !important;
font-weight:600;
padding:14px 30px;
border-radius:10px;
font-size:15px;
margin-top:6px;
}

table.compare{
width:100%;
border-collapse:collapse;
margin:20px 0 30px 0;
font-size:14.5px;
}

table.compare th, table.compare td{
border:1px solid #eee;
padding:12px 14px;
text-align:left;
}

table.compare th{
background:#faf9ff;
font-weight:600;
}

/* Blog index cards */
.blog-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

.blog-card{
border:1px solid #eee;
border-radius:16px;
padding:26px;
text-decoration:none;
display:block;
background:#fff;
transition:box-shadow .15s ease, transform .15s ease;
}

.blog-card:hover{
box-shadow:0 10px 30px rgba(0,0,0,.08);
transform:translateY(-2px);
}

.blog-tag{
display:inline-block;
background:#f3ecff;
color:#7c3aed;
font-size:12px;
font-weight:600;
padding:4px 12px;
border-radius:20px;
margin-bottom:12px;
}

.blog-card h3{
font-size:18px;
color:#1a1a2e;
margin-bottom:8px;
line-height:1.4;
}

.blog-card p{
font-size:14px;
color:#666;
line-height:1.55;
}

.blog-card .read-more{
font-size:13px;
color:#7c3aed;
font-weight:600;
margin-top:12px;
display:inline-block;
}

footer{
background:#faf9ff;
border-top:1px solid #eee;
padding:30px;
text-align:center;
font-size:13px;
color:#888;
}

footer a{
color:#7c3aed;
text-decoration:none;
font-weight:600;
}