/* ===================================
   ROOT VARIABLES
=================================== */

:root{

--accent:#eb6835;
--accent-dark:#d45524;
--secondary:#6c5ce7;

--bg:#f7f7f8;
--card:#ffffff;

--text:#111827;
--text-light:#6b7280;

--border:#e5e7eb;

--sidebar-width:260px;
--navbar-height:70px;

--radius:24px;

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

--transition:.3s ease;

}

/* ===================================
   RESET
=================================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'DM Sans',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

/* ===================================
   DARK MODE
=================================== */

body.dark-mode{

--bg:#0f1117;
--card:#161b22;

--text:#ffffff;
--text-light:#9ca3af;

--border:#272d37;

}

/* ===================================
   NAVBAR
=================================== */

.navbar{

position:fixed;

top:0;
left:var(--sidebar-width);
right:0;

height:var(--navbar-height);

display:flex;
align-items:center;
justify-content:space-between;

padding:0 40px;

background:rgba(255,255,255,.85);

backdrop-filter:blur(20px);

border-bottom:1px solid var(--border);

z-index:1000;

}

.dark-mode .navbar{
background:rgba(15,17,23,.9);
}

.logo{

font-size:1.5rem;
font-weight:800;

color:var(--accent);

}

.nav-links{

display:flex;
gap:28px;

}

.nav-links a{

color:var(--text-light);
font-weight:600;

transition:var(--transition);

}

.nav-links a:hover{

color:var(--accent);

}

.theme-toggle{

width:42px;
height:42px;

border-radius:50%;

border:1px solid var(--border);

background:none;

cursor:pointer;

color:var(--text);

}

/* ===================================
   SIDEBAR
=================================== */

.sidebar{

position:fixed;

top:0;
left:0;

width:var(--sidebar-width);
height:100vh;

background:
linear-gradient(
180deg,
#141726,
#10131f
);

overflow-y:auto;

z-index:1200;

}

.sidebar-brand{

padding:24px;

display:flex;
align-items:center;
gap:10px;

border-bottom:
1px solid rgba(255,255,255,.05);

}

.brand-icon{

font-size:1.5rem;
color:var(--accent);

}

.brand-text{

font-size:1.4rem;
font-weight:800;
color:white;

}

.sidebar-nav{

padding:15px;

}

.sidebar-nav li{

margin-bottom:6px;

}

.sidebar-nav a{

display:flex;
align-items:center;
gap:12px;

padding:14px;

border-radius:14px;

color:#9ca3af;

transition:var(--transition);

}

.sidebar-nav a:hover{

background:
rgba(255,255,255,.05);

color:white;

}

.sidebar-nav .active a{

background:
rgba(235,104,53,.15);

color:var(--accent);

}

/* ===================================
   MAIN CONTENT
=================================== */

.main-content{

margin-left:var(--sidebar-width);
padding-top:var(--navbar-height);

}

/* ===================================
   HERO
=================================== */

.hero{

padding:120px 40px;

text-align:center;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(235,104,53,.15),
transparent 70%
);

top:-200px;
right:-150px;

}

.hero-badge{

display:inline-flex;
align-items:center;
gap:8px;

padding:10px 18px;

border-radius:999px;

background:
rgba(235,104,53,.1);

color:var(--accent);

font-weight:700;

margin-bottom:30px;

}

.hero h1{

font-family:'Syne',sans-serif;

font-size:clamp(
3rem,
7vw,
5.5rem
);

line-height:1.05;

margin-bottom:25px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
var(--accent),
#ffb086
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:700px;

margin:auto;

font-size:1.1rem;

line-height:1.8;

color:var(--text-light);

}

.hero-actions{

margin-top:35px;

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}

/* ===================================
   BUTTONS
=================================== */

.primary-btn{

background:var(--accent);

padding:15px 28px;

border-radius:999px;

color:white;
font-weight:700;

transition:var(--transition);

}

.primary-btn:hover{

transform:translateY(-4px);

}

.secondary-btn{

padding:15px 28px;

border-radius:999px;

border:1px solid var(--border);

background:var(--card);

color:var(--text);

}

/* ===================================
   SEARCH
=================================== */

.search-section{

display:flex;
justify-content:center;

padding:20px;

}

.search-form{

width:min(500px,90%);

display:flex;
align-items:center;

gap:10px;

padding:14px 20px;

background:var(--card);

border-radius:50px;

border:1px solid var(--border);

}

.search-form input{

width:100%;

border:none;
outline:none;

background:none;

font-size:15px;

color:var(--text);

}

/* ===================================
   FEATURED ARTICLE
=================================== */

.featured-article{

width:min(1200px,92%);

margin:70px auto;

display:grid;

grid-template-columns:
1.1fr 1fr;

background:var(--card);

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

}

.featured-image img{

height:100%;

object-fit:cover;

}

.featured-content{

padding:50px;

display:flex;
flex-direction:column;
justify-content:center;

}

.featured-tag{

display:inline-block;

width:max-content;

padding:8px 16px;

border-radius:999px;

background:
rgba(235,104,53,.1);

color:var(--accent);

font-weight:700;

margin-bottom:20px;

}

.featured-content h2{

font-family:'Syne',sans-serif;

font-size:3rem;

line-height:1.1;

margin-bottom:20px;

}

.featured-content p{

line-height:1.8;

color:var(--text-light);

margin-bottom:30px;

}

.featured-meta{

display:flex;
justify-content:space-between;
align-items:center;

}

.author{

display:flex;
align-items:center;
gap:15px;

}

.avatar{

width:50px;
height:50px;

border-radius:50%;

background:var(--accent);

display:flex;
align-items:center;
justify-content:center;

color:white;
font-weight:700;

}
/* ===================================
   ARTICLES SECTION
=================================== */

.articles-section{

padding:100px 40px;

}

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:
rgba(235,104,53,.1);

color:var(--accent);

font-size:.8rem;
font-weight:700;

margin-bottom:18px;

}

.section-header h2{

font-family:'Syne',sans-serif;

font-size:clamp(
2.5rem,
5vw,
4rem
);

margin-bottom:15px;

}

.section-header p{

color:var(--text-light);

font-size:1rem;

}

/* ===================================
   ARTICLE GRID
=================================== */

.articles-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(320px,1fr)
);

gap:30px;

}

/* ===================================
   ARTICLE CARD
=================================== */

.article-card{

background:var(--card);

border-radius:28px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.4s ease;

}

.article-card:hover{

transform:
translateY(-10px);

box-shadow:
0 20px 40px rgba(0,0,0,.12);

}

.article-image{

position:relative;

overflow:hidden;

}

.article-image img{

height:240px;

object-fit:cover;

transition:.5s ease;

}

.article-card:hover
.article-image img{

transform:scale(1.08);

}

.category{

position:absolute;

top:15px;
left:15px;

padding:8px 14px;

border-radius:999px;

background:
rgba(0,0,0,.65);

backdrop-filter:blur(12px);

color:white;

font-size:.75rem;
font-weight:700;

}

.article-content{

padding:28px;

}

.article-meta{

display:flex;
gap:20px;

font-size:.85rem;

color:var(--text-light);

margin-bottom:15px;

}

.article-content h3{

font-size:1.6rem;

line-height:1.3;

margin-bottom:15px;

font-family:'Syne',sans-serif;

}

.article-content p{

line-height:1.8;

color:var(--text-light);

margin-bottom:20px;

}

.read-more{

display:inline-flex;
align-items:center;
gap:8px;

color:var(--accent);

font-weight:700;

transition:.3s ease;

}

.read-more:hover{

gap:14px;

}

/* ===================================
   CATEGORIES SECTION
=================================== */

.categories{

padding:100px 40px;

}

.category-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(260px,1fr)
);

gap:25px;

}

.category-box{

background:var(--card);

padding:35px;

border-radius:28px;

border:1px solid var(--border);

text-align:center;

transition:.4s ease;

}

.category-box:hover{

transform:
translateY(-8px);

}

.category-box i{

font-size:2.5rem;

color:var(--accent);

margin-bottom:20px;

}

.category-box h3{

font-size:1.5rem;

margin-bottom:12px;

font-family:'Syne',sans-serif;

}

.category-box p{

line-height:1.8;

color:var(--text-light);

}

/* ===================================
   NEWSLETTER
=================================== */

.newsletter{

padding:100px 40px;

}

.newsletter-content{

max-width:1100px;

margin:auto;

padding:70px;

border-radius:35px;

background:
linear-gradient(
135deg,
var(--accent),
#ff8a55,
var(--secondary)
);

color:white;

text-align:center;

overflow:hidden;

position:relative;

}

.newsletter-content h2{

font-family:'Syne',sans-serif;

font-size:
clamp(
2.5rem,
5vw,
4rem
);

margin-bottom:20px;

}

.newsletter-content p{

max-width:700px;

margin:auto;

line-height:1.8;

opacity:.9;

}

.newsletter-form{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter-form input{

width:350px;

padding:16px 20px;

border:none;

border-radius:16px;

outline:none;

font-size:15px;

}

.newsletter-form button{

padding:16px 28px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

transition:.3s ease;

}

.newsletter-form button:hover{

transform:
translateY(-3px);

}

/* ===================================
   FOOTER
=================================== */

.footer{

margin-top:80px;

background:#0f1117;

color:#b0b8c5;

}

.footer-container{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr 2fr;

gap:40px;

padding:70px 50px;

}

.footer-logo{

font-size:1.8rem;

font-weight:800;

color:var(--accent);

margin-bottom:15px;

}

.footer-col h3{

color:white;

margin-bottom:18px;

font-size:1rem;

letter-spacing:1px;

text-transform:uppercase;

}

.footer-col p{

line-height:1.8;

}

.footer-col ul{

display:flex;
flex-direction:column;
gap:12px;

}

.footer-col a{

color:#9ca3af;

transition:.3s ease;

}

.footer-col a:hover{

color:var(--accent);

padding-left:5px;

}

.socials{

display:flex;
gap:12px;

margin-top:20px;

}

.socials a{

width:42px;
height:42px;

border-radius:50%;

background:#1c2330;

display:flex;
align-items:center;
justify-content:center;

color:white;

}

.socials a:hover{

background:var(--accent);

}

.footer-bottom{

border-top:
1px solid rgba(255,255,255,.08);

padding:25px;

text-align:center;

font-size:.9rem;

}

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

@media(max-width:1100px){

.featured-article{

grid-template-columns:1fr;

}

.footer-container{

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

}

}

@media(max-width:768px){

.navbar{

left:0;

padding:0 20px;

}

.nav-links{

display:none;

}

.sidebar{

display:none;

}

.main-content{

margin-left:0;

}

.hero{

padding:90px 20px;

}

.hero h1{

font-size:3rem;

}

.articles-section,
.categories,
.newsletter{

padding:70px 20px;

}

.newsletter-content{

padding:40px 25px;

}

.footer-container{

grid-template-columns:1fr;

padding:50px 25px;

}

.featured-content{

padding:30px;

}

.featured-content h2{

font-size:2rem;

}

}

@media(max-width:480px){

.hero-actions{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

  .nav-links {
    display: none;
  }
}

/* ==========================================
   ARTICLE COMPONENTS PACK

.breaking-news,
.premium-article,
.reading-challenge,
.newsletter-showcase,
.editor-collection,
.author-leaderboard,
.article-faq,
.reader-dashboard,
.reading-queue,
.article-comparison,
.featured-slider,
.article-quote-card {
  margin: 2rem 0;
}

/* ==========================================
   BREAKING NEWS

.breaking-news {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(255,90,95,.12),
    rgba(255,140,0,.08)
  );
  border: 1px solid rgba(255,255,255,.08);
}

.breaking-badge {
  padding: .75rem 1rem;
  border-radius: 999px;
  background: #ff5a5f;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.breaking-content h2 {
  margin-bottom: .75rem;
}

/* ==========================================
   FEATURED SLIDER

.featured-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 1.5rem;
}

.slide-card {
  padding: 1.8rem;
  border-radius: 22px;
  background: var(--card-bg,#fff);
  border: 1px solid rgba(255,255,255,.08);
  transition: .35s ease;
}

.slide-card:hover {
  transform: translateY(-6px);
}

.slide-tag {
  display: inline-block;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  margin-bottom: 1rem;
  font-size: .8rem;
  font-weight: 700;
}

/* ==========================================
   ARTICLE COMPARISON

.article-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 1.5rem;
}

.compare-card {
  padding: 2rem;
  border-radius: 24px;
  background: var(--card-bg,#fff);
  border: 1px solid rgba(255,255,255,.08);
}

.compare-card span {
  display: inline-block;
  margin-bottom: .8rem;
  color: var(--primary,#6366f1);
  font-weight: 700;
}

/* ==========================================
   READING QUEUE

.reading-queue {
  padding: 2rem;
  border-radius: 24px;
  background: var(--card-bg,#fff);
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

/* ==========================================
   QUOTE CARD

.article-quote-card {
  padding: 3rem;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(99,102,241,.12),
    rgba(0,212,255,.08)
  );
}

.article-quote-card blockquote {
  font-size: 1.4rem;
  line-height: 1.7;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ==========================================
   READER DASHBOARD

.reader-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 1.5rem;
}

.reader-stat {
  text-align: center;
  padding: 2rem;
  border-radius: 22px;
  background: var(--card-bg,#fff);
}

.reader-stat h3 {
  font-size: 2rem;
  margin-bottom: .4rem;
}

/* ==========================================
   EDITOR COLLECTION

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 1.5rem;
}

.collection-card {
  padding: 2rem;
  border-radius: 22px;
  text-align: center;
  background: var(--card-bg,#fff);
  transition: .35s ease;
}

.collection-card:hover {
  transform: translateY(-6px);
}

.collection-card h3 {
  margin-bottom: .5rem;
}

/* ==========================================
   PREMIUM ARTICLE

.premium-article {
  text-align: center;
  padding: 3rem;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(255,215,0,.12),
    rgba(255,165,0,.08)
  );
}

.premium-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.premium-article h2 {
  margin-bottom: 1rem;
}

.premium-article p {
  max-width: 700px;
  margin: auto auto 1.5rem;
}

/* ==========================================
   AUTHOR LEADERBOARD

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leader-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--card-bg,#fff);
}

.leader-item span {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary,#6366f1);
}

.leader-item small {
  margin-left: auto;
  opacity: .75;
}

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

.article-faq details {
  margin-top: 1rem;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-bg,#fff);
}

.article-faq summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
}

.article-faq details p {
  padding: 0 1.2rem 1.2rem;
}

/* ==========================================
   READING CHALLENGE

.reading-challenge {
  padding: 2rem;
  text-align: center;
  border-radius: 24px;
  background: var(--card-bg,#fff);
}

.challenge-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(255,99,71,.12);
  font-weight: 700;
}

.challenge-progress {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin: 1.5rem 0;
  background: rgba(255,255,255,.08);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #6366f1,
    #00d4ff
  );
}

/* ==========================================
   NEWSLETTER SHOWCASE

.newsletter-showcase {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  padding: 2rem;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgba(99,102,241,.08),
    rgba(0,212,255,.08)
  );
}

.digest-card {
  padding: 2rem;
  border-radius: 22px;
  text-align: center;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

/* ==========================================
   HOVER EFFECTS

.breaking-news,
.compare-card,
.collection-card,
.reader-stat,
.leader-item,
.digest-card,
.queue-item {
  transition: .35s ease;
}

.breaking-news:hover,
.compare-card:hover,
.reader-stat:hover,
.leader-item:hover,
.queue-item:hover {
  transform: translateY(-5px);
}

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

@media (max-width: 992px) {

  .newsletter-showcase,
  .breaking-news {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

}

@media (max-width: 768px) {

  .article-quote-card {
    padding: 2rem;
  }

  .article-quote-card blockquote {
    font-size: 1.1rem;
  }

  .premium-article,
  .reading-queue,
  .reading-challenge {
    padding: 1.5rem;
  }

}