:root{

--bg:#f5f3ef;
--bg-dark:#0f1923;
--ink:#1a1a2e;
--accent:#00c8e0;
--white:#fff;

--radius:18px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:var(--ink);

line-height:1.7;

}

.container{

width:90%;

max-width:1200px;

margin:auto;

}

header{

background:#0f1923;

padding:18px 0;

position:sticky;

top:0;

z-index:999;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-family:'DM Serif Display',serif;

font-size:30px;

color:white;

text-decoration:none;

}

.menu{

display:flex;

gap:25px;

}

.menu a{

color:white;

text-decoration:none;

font-weight:600;

}

.hero{

padding:180px 0 110px;

background:linear-gradient(135deg,#0f1923,#163247);

color:white;

text-align:center;

}

.hero h1{

font-size:54px;

line-height:1.2;

margin-bottom:25px;

}

.hero p{

max-width:760px;

margin:auto;

font-size:20px;

opacity:.9;

}

.search-box{

margin-top:40px;

}

.search-box input{

width:100%;

max-width:650px;

padding:18px;

border:none;

border-radius:40px;

font-size:17px;

outline:none;

}

.featured{

padding:80px 0;

}

.section-title{

font-size:38px;

margin-bottom:35px;

font-family:'DM Serif Display';

}

.feature-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

display:grid;

grid-template-columns:1fr 1fr;

}

.feature-image{

background:#dbeeff;

min-height:320px;

display:flex;

align-items:center;

justify-content:center;

font-size:70px;

overflow:hidden;  

}

.feature-content{

padding:40px;

}

.badge{

display:inline-block;

background:#00c8e0;

color:white;

padding:8px 18px;

border-radius:30px;

margin-bottom:20px;

font-size:14px;

}

.feature-content h2{

font-size:34px;

margin-bottom:20px;

}

.feature-content p{

margin-bottom:25px;

color:#555;

}

.btn{

display:inline-block;

padding:14px 28px;

background:#00c8e0;

color:white;

border-radius:40px;

text-decoration:none;

font-weight:bold;

}

.latest{

padding:80px 0;

background:white;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.blog-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 5px 18px rgba(0,0,0,.08);

transition:.3s;

}

.blog-card:hover{

transform:translateY(-8px);

}

.blog-thumb{

height:220px;

background:#dbeeff;

}

.blog-content{

padding:25px;

}

.blog-content h3{

margin-bottom:15px;

font-size:24px;

}

.blog-content p{

color:#555;

margin-bottom:20px;

}

@media(max-width:900px){

.blog-grid{

grid-template-columns:1fr;

}

.feature-card{

grid-template-columns:1fr;

}

.hero h1{

font-size:38px;

}

}

/* ==========================================
ARTICLE TEMPLATE
========================================== */

.breadcrumb{
padding:18px 0;
background:#f8f9fb;
border-bottom:1px solid #e8e8e8;
}

.breadcrumb .container{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
flex-wrap:wrap;
}

.breadcrumb a{
color:var(--accent);
text-decoration:none;
font-weight:600;
}

.breadcrumb span{
color:#666;
}

.article-hero{
padding:70px 0 40px;
text-align:center;
background:linear-gradient(135deg,#0f1923,#163247);
color:#fff;
}

.article-hero h1{
font-size:52px;
line-height:1.2;
max-width:950px;
margin:25px auto;
font-family:'DM Serif Display',serif;
}

.article-hero p{
max-width:820px;
margin:auto;
font-size:20px;
opacity:.9;
}

.article-meta{
display:flex;
justify-content:center;
gap:30px;
margin-top:30px;
flex-wrap:wrap;
font-size:15px;
opacity:.95;
}

.article-featured{
padding:50px 0;
background:#fff;
}

.featured-image{
width:100%;
border-radius:22px;
display:block;
box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.article-wrapper{
padding:70px 0;
background:#f7f8fa;
}

.article-grid{
display:grid;
grid-template-columns:2fr 360px;
gap:40px;
align-items:start;
}

.article-content{
background:#fff;
padding:45px;
border-radius:22px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.article-content h2{
margin-top:45px;
margin-bottom:18px;
font-size:34px;
font-family:'DM Serif Display',serif;
}

.article-content p{
font-size:18px;
line-height:1.9;
margin-bottom:22px;
color:#555;
}

.table-of-contents{
background:#eef8fb;
padding:28px;
border-radius:18px;
margin-bottom:40px;
}

.table-of-contents h2{
margin:0 0 20px;
font-size:28px;
}

.table-of-contents ol{
padding-left:20px;
}

.table-of-contents li{
margin-bottom:12px;
}

.table-of-contents a{
text-decoration:none;
color:#163247;
font-weight:600;
}

.article-sidebar{
position:sticky;
top:110px;
display:flex;
flex-direction:column;
gap:25px;
}

.sidebar-card{
background:#fff;
padding:28px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.sidebar-card h3{
margin-bottom:18px;
font-size:24px;
}

.sidebar-card p{
margin-bottom:22px;
color:#555;
}

.sidebar-card ul{
padding-left:18px;
}

.sidebar-card li{
margin-bottom:14px;
}

.sidebar-card a{
text-decoration:none;
color:#163247;
font-weight:600;
}

/* ==========================================
FAQ
========================================== */

#faq{
margin-top:60px;
}

#faq h2{
font-size:36px;
margin-bottom:30px;
font-family:'DM Serif Display',serif;
}

.faq-item{
background:#fff;
border:1px solid #e9ecef;
border-radius:16px;
padding:25px;
margin-bottom:20px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.faq-item h3{
font-size:22px;
margin-bottom:12px;
}

.faq-item p{
margin:0;
color:#555;
line-height:1.8;
}

/* ==========================================
RELATED ARTICLES
========================================== */

.related-articles{
padding:70px 0;
}

.related-articles h2{
text-align:center;
margin-bottom:40px;
font-size:38px;
font-family:'DM Serif Display',serif;
}

/* ==========================================
CTA
========================================== */

.article-cta{
padding:80px 0;
text-align:center;
background:linear-gradient(135deg,#0f1923,#163247);
color:#fff;
}

.article-cta h2{
font-size:42px;
margin-bottom:20px;
font-family:'DM Serif Display',serif;
}

.article-cta p{
max-width:700px;
margin:0 auto 35px;
font-size:19px;
opacity:.9;
}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1100px){

.article-grid{
grid-template-columns:1fr;
}

.article-sidebar{
position:relative;
top:auto;
}

}

@media(max-width:768px){

.article-hero{
padding:55px 0 35px;
}

.article-hero h1{
font-size:34px;
}

.article-hero p{
font-size:17px;
}

.article-content{
padding:28px;
}

.article-content h2{
font-size:28px;
}

.article-content p{
font-size:17px;
}

.article-meta{
gap:15px;
font-size:14px;
}

.table-of-contents{
padding:22px;
}

.related-articles h2{
font-size:30px;
}

.article-cta h2{
font-size:30px;
}

}

/* ==========================================
BROWSE CATEGORIES
========================================== */

.categories{
padding:80px 0;
background:#fff;
}

.section-subtitle{
max-width:760px;
margin:15px auto 40px;
text-align:center;
color:#666;
font-size:18px;
}

.category-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

.category-btn{
display:inline-block;
padding:14px 28px;
background:#0f1923;
color:#fff;
text-decoration:none;
border-radius:40px;
font-weight:600;
transition:.3s;
}

.category-btn:hover{
background:var(--accent);
transform:translateY(-3px);
}

@media(max-width:768px){

.category-grid{
gap:12px;
}

.category-btn{
width:100%;
text-align:center;
}

}

.hero-ctas{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:35px;
}

.footer-col a,
.footer-col a:visited{
color:#ffffff;
text-decoration:none;
}

.footer-col a:hover{
color:var(--accent);
}

.feature-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.35s;
}

.feature-card:hover .feature-image img{
transform:scale(1.05);
}