:root {
  --accent: #FFD700;
  --accent-dark: #FFD700cc;
  --accent-light: #FFD70044;
  --surface-dark: #0a0a1a;
  --surface-mid: #12122e;
  --surface-light: #1a1a3e;
  --text-primary: #f5f5ff;
  --text-body: #c0c0e0;
  --text-muted: #8080a0;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition: all 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--surface-dark); color:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--text-primary); }
img { max-width:100%; height:auto; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Navigation */
nav { position:sticky; top:0; z-index:100; background:rgba(10,10,26,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.05); padding:12px 0; }
nav .container { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.nav-logo { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo:hover { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { color:var(--text-muted); padding:8px 14px; border-radius:var(--radius-sm); font-size:0.9rem; text-decoration:none; transition:var(--transition); }
.nav-links a:hover { background:rgba(255,255,255,0.05); color:var(--text-primary); }
.nav-search { display:flex; align-items:center; background:var(--surface-light); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); padding:4px 12px; }
.nav-search input { background:transparent; border:none; color:var(--text-primary); font-size:0.85rem; padding:6px 8px; width:160px; outline:none; }
.nav-search input::placeholder { color:var(--text-muted); }
.nav-search button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.9rem; padding:4px; }
.nav-search button:hover { color:var(--accent); }
.nav-toggle { display:none; background:none; border:none; color:var(--text-primary); font-size:1.5rem; cursor:pointer; }

/* Hero Section */
.hero { text-align:center; padding:80px 20px 60px; background:linear-gradient(180deg, var(--surface-mid) 0%, transparent 100%); }
.hero-badge { display:inline-block; padding:6px 16px; border-radius:20px; background:rgba(255,215,0,0.15); color:#FFD700; font-size:0.8rem; font-weight:600; letter-spacing:1px; margin-bottom:16px; border:1px solid rgba(255,215,0,0.3); }
.hero h1 { font-family:var(--font-heading); font-size:2.8rem; font-weight:800; color:var(--text-primary); margin-bottom:16px; line-height:1.2; }
.hero p { font-size:1.1rem; color:var(--text-muted); max-width:600px; margin:0 auto; }
.hero-cta { display:inline-block; margin-top:24px; padding:16px 40px; background:linear-gradient(135deg, #FFD700, #FF8C00); color:#000; font-weight:700; border-radius:var(--radius-md); font-size:1.1rem; transition:var(--transition); text-decoration:none; box-shadow:0 4px 20px rgba(255,215,0,0.3); }
.hero-cta:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(255,215,0,0.5); color:#000; }

/* Stats Bar */
.stats-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; margin:40px 0; }
.stat-card { background:var(--surface-mid); border:1px solid rgba(255,255,255,0.05); border-radius:var(--radius-md); padding:24px; text-align:center; }
.stat-number { font-family:var(--font-heading); font-size:1.8rem; font-weight:700; color:var(--accent); }
.stat-label { font-size:0.8rem; color:var(--text-muted); margin-top:4px; }
.section { padding:60px 0; }
.section-title { font-family:var(--font-heading); font-size:2rem; font-weight:700; color:var(--text-primary); text-align:center; margin-bottom:40px; }

/* Breadcrumbs */
.breadcrumbs { display:flex; align-items:center; gap:8px; padding:16px 0; font-size:0.85rem; color:var(--text-muted); flex-wrap:wrap; }
.breadcrumbs a { color:var(--text-muted); text-decoration:none; }
.breadcrumbs a:hover { color:var(--accent); }
.breadcrumbs span { color:var(--text-muted); }
.breadcrumbs .current { color:var(--text-primary); font-weight:500; }

/* Breadcrumbs - JSON-LD hidden */
.breadcrumb-list { display:none; }

/* Article Controls - Search, Sort, Filter */
.article-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px; }
.article-controls input[type="text"] { flex:1; min-width:200px; padding:12px 16px; background:var(--surface-mid); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.9rem; }
.article-controls input::placeholder { color:var(--text-muted); }
.article-controls select { padding:12px 16px; background:var(--surface-mid); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.9rem; cursor:pointer; }
.article-controls select option { background:var(--surface-dark); }

/* Article Grid */
.article-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.article-card { background:var(--surface-mid); border:1px solid rgba(255,255,255,0.05); border-radius:var(--radius-md); padding:20px; display:flex; align-items:center; gap:16px; transition:var(--transition); }
.article-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.article-card-icon { font-size:1.8rem; flex-shrink:0; }
.article-card-content { flex:1; }
.article-card-content h3 { font-size:1rem; font-weight:600; color:var(--text-primary); margin-bottom:4px; line-height:1.4; }
.article-card-content .meta { font-size:0.8rem; color:var(--text-muted); margin-bottom:4px; }
.article-card-content p { font-size:0.85rem; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.article-tag { display:inline-block; padding:2px 8px; border-radius:4px; background:rgba(255,215,0,0.1); color:var(--accent); font-size:0.7rem; font-weight:500; }
.read-more { font-size:0.85rem; color:var(--accent); font-weight:500; }

/* Pagination */
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin:40px 0; flex-wrap:wrap; }
.page-btn { padding:10px 18px; background:var(--surface-mid); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-sm); color:var(--text-body); font-size:0.9rem; cursor:pointer; transition:var(--transition); }
.page-btn:hover { border-color:var(--accent); color:var(--accent); }
.page-btn.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
.page-btn:disabled { opacity:0.4; cursor:not-allowed; }
.page-info { color:var(--text-muted); font-size:0.85rem; }

/* CTA Section */
.cta-section { background:linear-gradient(135deg, var(--surface-mid), var(--surface-light)); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); text-align:center; padding:60px 20px; }
.cta-section h2 { font-family:var(--font-heading); font-size:2rem; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.cta-section p { color:var(--text-muted); margin-bottom:24px; font-size:1.05rem; max-width:500px; margin-left:auto; margin-right:auto; }
.cta-button { display:inline-block; padding:14px 36px; background:var(--accent); color:#000; font-weight:600; border-radius:10px; font-size:1rem; transition:var(--transition); text-decoration:none; }
.cta-button:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-light); color:#000; }

/* Featured Product */
.featured-product { background:linear-gradient(135deg, #1a1a3e, #0d0d2b); border:1px solid rgba(255,215,0,0.2); border-radius:var(--radius-lg); padding:32px; margin:40px auto; max-width:500px; text-align:center; }
.featured-product h3 { font-family:var(--font-heading); color:var(--text-primary); font-size:1.5rem; margin-bottom:8px; }
.featured-product .price { font-size:2rem; font-weight:800; color:var(--accent); margin:12px 0; }
.featured-product p { color:var(--text-muted); font-size:0.9rem; margin-bottom:16px; }

/* Footer */
footer { text-align:center; padding:40px 20px; border-top:1px solid rgba(255,255,255,0.05); }
.footer-links { display:flex; justify-content:center; gap:20px; margin-top:12px; flex-wrap:wrap; }
.footer-links a { color:var(--text-muted); font-size:0.85rem; }
.footer-links a:hover { color:var(--accent); }
.footer-copy { color:var(--text-muted); font-size:0.8rem; }

/* Page Content */
.page-content { max-width:800px; margin:60px auto; padding:0 20px; }
.page-content h1 { font-family:var(--font-heading); font-size:2.5rem; font-weight:700; color:var(--text-primary); margin-bottom:24px; }
.page-content h2 { font-family:var(--font-heading); font-size:1.5rem; font-weight:600; color:var(--text-primary); margin-top:40px; margin-bottom:16px; }
.page-content p { font-size:1.05rem; line-height:1.8; margin-bottom:16px; }
.page-content ul { margin-bottom:24px; padding-left:24px; }
.page-content li { margin-bottom:8px; line-height:1.6; }
.page-content li strong { color:var(--text-primary); }

/* Mobile */
@media (max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(10,10,26,0.98); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.05); padding:16px; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .nav-search { display:none; }
  .hero h1 { font-size:2rem; }
  .hero p { font-size:1rem; }
  .article-grid { grid-template-columns:1fr; }
  .article-controls { flex-direction:column; }
  .article-controls input[type="text"] { width:100%; }
  .section-title { font-size:1.5rem; }
}