:root {
  --primary: #0A0E27;
  --secondary: #00D9FF;
  --text: #1A1A1A;
  --text-light: #666666;
  --background: #FFFFFF;
  --gray-100: #F7F7F7;
  --gray-200: #E5E5E5;
  --success: #00C851;
  --warning: #FF6B35;
}

*{box-sizing:border-box}
html{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;color:var(--text);background:var(--background);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{width:100%;padding:0 16px;margin:0 auto}
.main-header{background:var(--background);border-bottom:1px solid rgba(10,14,39,0.06);position:sticky;top:0;z-index:50}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo a{color:var(--primary);font-weight:800;font-size:20px;text-decoration:none;letter-spacing:0.2px}
.search input{padding:10px;border:1px solid var(--gray-200);border-radius:10px;min-width:160px}
.hamburger{background:transparent;border:0;font-size:22px}
.main-nav{display:flex;gap:14px;padding:8px 0}
.main-nav a{color:var(--text-light);text-decoration:none;font-size:14px;padding:6px 8px;border-radius:6px}
.main-nav a.active{color:var(--primary);background:rgba(0,217,255,0.06);font-weight:700}

.hero{padding:20px 0}
.featured{background:linear-gradient(180deg,rgba(10,14,39,0.03),transparent);padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(10,14,39,0.04)}
.featured img{width:100%;height:auto;border-radius:10px}
.featured h2{font-size:22px;margin:12px 0;color:var(--primary);line-height:1.2}
.featured-secondary{display:flex;gap:12px;margin-top:14px}
.featured-secondary article{flex:1;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent);padding:8px;border-radius:10px}
.featured-secondary article img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.featured-secondary article h3{font-size:16px;margin:8px 0}

.latest{padding:22px 0}
.articles-grid{display:grid;grid-template-columns:1fr;gap:16px}
.card{display:block;background:linear-gradient(180deg, #ffffff, var(--gray-100));padding:12px;border-radius:12px;text-decoration:none;color:inherit;box-shadow:0 6px 14px rgba(10,14,39,0.04);border:1px solid rgba(10,14,39,0.03)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.card h4{font-size:16px;margin:10px 0}

.categories{padding:20px 0}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cats a{background:transparent;padding:8px 12px;border-radius:20px;text-decoration:none;color:var(--primary);font-weight:600;border:1px solid rgba(10,14,39,0.05)}
.cats a.active{box-shadow:inset 0 -3px 0 var(--secondary);color:var(--primary)}


.articles-grid .card{transition:opacity .25s ease,transform .25s ease;will-change:opacity,transform}
.articles-grid .card.is-hidden{display:none!important}

.no-results{padding:24px;text-align:center;color:var(--text-light);background:var(--gray-100);border-radius:8px;margin-top:12px}
.no-results.is-hidden{display:none}

.main-footer{border-top:1px solid rgba(10,14,39,0.06);padding:28px 0;margin-top:28px}
.main-footer .newsletter form{display:flex;gap:8px}
.main-footer input{padding:10px;border:1px solid var(--gray-200);border-radius:8px}
.main-footer button{background:var(--primary);color:white;border:0;padding:10px 14px;border-radius:8px}

/* Article styles */
.article-hero{max-width:760px;margin:24px auto}
.article-hero img{border-radius:10px;box-shadow:0 8px 20px rgba(10,14,39,0.06)}
.article-content{max-width:760px;margin:18px auto;font-size:18px}
.article-content h1{font-size:30px;margin-bottom:8px}
.byline{color:var(--text-light);font-size:14px}

.ad-container{margin:40px auto;text-align:center;max-width:100%;padding:20px 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}

@media(min-width:768px){
  .featured h2{font-size:28px}
  .featured-secondary{gap:16px}
  .featured-secondary article img{height:160px}
  .articles-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1024px){
  .container{max-width:1280px}
  .content-grid{display:grid;grid-template-columns:1fr 300px;gap:40px}
  .articles-grid{grid-template-columns:repeat(3,1fr)}
}