/*
Theme Name: Cost of Iran War
Theme URI: https://costofiranwar.com
Author: CostOfIranWar Team
Author URI: https://costofiranwar.com
Description: Live real-time counter tracking the cost of the US war with Iran (Operation Epic Fury). Single-purpose, SEO-optimized, mobile-first WordPress theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: costofiranwar
*/

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1e293b;
  --bg-card: rgba(17, 24, 39, 0.8);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-red: #ef4444;
  --accent-red-bright: #f87171;
  --accent-amber: #f59e0b;
  --accent-green: #22c55e;
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --glow-red: 0 0 40px rgba(239,68,68,0.35), 0 0 80px rgba(239,68,68,0.15);
  --glow-red-subtle: 0 0 20px rgba(239,68,68,0.2);
  --border-subtle: rgba(255,255,255,0.08);
  --border-card: rgba(255,255,255,0.1);
  --font-counter: 'JetBrains Mono','Courier New',monospace;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --max-width: 1200px;
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
}

/* ========================================
   RESET & BASE
   ======================================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,video,iframe { max-width:100%; height:auto; display:block; }

a { color:var(--accent-blue); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--accent-amber); }

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--bg-tertiary); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

.skip-link { position:absolute; top:-100%; left:0; background:var(--accent-red); color:#fff; padding:0.5rem 1rem; z-index:9999; font-size:0.875rem; }
.skip-link:focus { top:0; }

/* ========================================
   LAYOUT
   ======================================== */
.site-wrapper { max-width:var(--max-width); margin:0 auto; padding:0 1rem; }
section { padding:4rem 0; }
.section-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:700; margin-bottom:2rem; text-align:center; letter-spacing:-0.02em; }

/* ========================================
   PROMO BANNER (promptandlern.com)
   ======================================== */
.promo-banner { background:linear-gradient(90deg,#0f172a 0%,#1e0a3c 35%,#0f1a2e 70%,#0a1628 100%); border-bottom:1px solid rgba(168,85,247,0.3); padding:0.65rem 1rem; position:relative; z-index:200; }
.promo-banner-inner { display:flex; align-items:center; justify-content:center; gap:1rem; max-width:var(--max-width); margin:0 auto; flex-wrap:wrap; }
.promo-banner-content { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; justify-content:center; }
.promo-banner-icon { font-size:1.4rem; flex-shrink:0; }
.promo-banner-text { font-size:0.85rem; color:#cbd5e1; line-height:1.4; }
.promo-banner-text strong { color:#a78bfa; font-weight:700; font-size:0.9rem; }
.promo-banner-tag { display:inline-block; background:linear-gradient(90deg,#7c3aed,#a855f7); color:#fff; font-size:0.6rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:0.15rem 0.45rem; border-radius:4px; margin-right:0.35rem; vertical-align:middle; }
.promo-banner-highlight { display:inline-block; background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.4); border-radius:6px; padding:0.1rem 0.5rem; color:#d8b4fe; font-weight:600; font-size:0.82rem; margin:0 0.2rem; }
.promo-banner-cta { display:inline-flex; align-items:center; gap:0.35rem; background:linear-gradient(90deg,#7c3aed,#a855f7); color:#fff !important; font-size:0.8rem; font-weight:700; padding:0.45rem 1rem; border-radius:9999px; text-decoration:none; white-space:nowrap; flex-shrink:0; box-shadow:0 0 20px rgba(168,85,247,0.4); transition:box-shadow 0.2s,transform 0.2s; }
.promo-banner-cta:hover { box-shadow:0 0 32px rgba(168,85,247,0.65); transform:translateY(-1px); color:#fff !important; }
.promo-banner-close { background:none; border:none; color:#64748b; font-size:1rem; cursor:pointer; padding:0.2rem 0.4rem; line-height:1; flex-shrink:0; transition:color 0.2s; }
.promo-banner-close:hover { color:#94a3b8; }
@media (max-width:640px) { .promo-banner-text .hide-mobile { display:none; } .promo-banner-inner { gap:0.5rem; } }

/* ========================================
   HEADER
   ======================================== */
.site-header { padding:1rem 0; border-bottom:1px solid var(--border-subtle); position:relative; z-index:100; }

.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-width); margin:0 auto; padding:0 1rem;
}

.site-brand { font-size:1rem; font-weight:600; color:var(--text-primary); letter-spacing:-0.01em; }
.site-brand a { color:inherit; }

.live-badge {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--accent-red); background:rgba(239,68,68,0.1);
  padding:0.25rem 0.75rem; border-radius:9999px; border:1px solid rgba(239,68,68,0.3);
}

.live-dot { width:8px; height:8px; background:var(--accent-red); border-radius:50%; animation:pulse-dot 1.5s ease-in-out infinite; }

@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.5; transform:scale(0.8); }
}

/* Navigation */
.site-nav { display:flex; align-items:center; }
.nav-menu { display:flex; list-style:none; gap:0.15rem; flex-wrap:wrap; }
.nav-menu li a {
  color:var(--text-muted); font-size:0.78rem; font-weight:500;
  padding:0.35rem 0.6rem; border-radius:var(--radius-sm);
  transition:color 0.2s,background 0.2s; white-space:nowrap;
}
.nav-menu li a:hover,
.nav-menu .current-menu-item a { color:var(--text-primary); background:rgba(255,255,255,0.06); }

/* Live streams CTA */
.live-streams-cta { display:inline-flex; flex-direction:column; align-items:center; gap:0.5rem; margin-top:2.5rem; cursor:pointer; text-decoration:none; transition:opacity 0.2s,transform 0.2s; }
.live-streams-cta:hover { opacity:0.85; color:inherit; transform:translateY(2px); }
.live-cta-badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(239,68,68,0.12); border:2px solid var(--accent-red); border-radius:9999px; padding:0.45rem 1.4rem; box-shadow:0 0 24px rgba(239,68,68,0.45),0 0 48px rgba(239,68,68,0.2); animation:live-pulse-glow 2s ease-in-out infinite; }
@keyframes live-pulse-glow { 0%,100%{box-shadow:0 0 24px rgba(239,68,68,0.45),0 0 48px rgba(239,68,68,0.2);} 50%{box-shadow:0 0 40px rgba(239,68,68,0.75),0 0 80px rgba(239,68,68,0.4);} }
.live-cta-text { font-size:2rem; font-weight:900; color:var(--accent-red); letter-spacing:0.14em; text-transform:uppercase; line-height:1; }
.live-cta-arrow { animation:bounce 1.6s ease-in-out infinite; }
.live-cta-arrow svg { width:32px; height:32px; color:var(--accent-red); }
.live-streams-cta-text { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-muted); }
.live-streams-cta svg { width:18px; height:18px; color:var(--text-muted); }

@keyframes bounce-cta {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(8px); }
}

/* ========================================
   HERO / COUNTER SECTION
   ======================================== */
.counter-section {
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1rem; position:relative; overflow:hidden;
}

.counter-section::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:800px; height:800px;
  background:radial-gradient(ellipse at center,rgba(239,68,68,0.08) 0%,rgba(239,68,68,0.03) 40%,transparent 70%);
  pointer-events:none; z-index:0;
}
.counter-section > * { position:relative; z-index:1; }

.counter-label { font-size:clamp(1rem,2.5vw,1.5rem); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.15em; font-weight:600; margin-bottom:1rem; }

.counter-value {
  font-family:var(--font-counter); font-size:clamp(2.5rem,10vw,7rem); font-weight:700;
  color:var(--accent-red); text-shadow:var(--glow-red); letter-spacing:-0.02em;
  line-height:1.1; margin-bottom:1rem; min-height:1.2em; animation:glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,100% { text-shadow:var(--glow-red); }
  50% { text-shadow:0 0 60px rgba(239,68,68,0.5),0 0 120px rgba(239,68,68,0.2); }
}

.counter-suffix { font-size:clamp(1rem,2.5vw,1.5rem); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.15em; font-weight:600; margin-bottom:2rem; }

.counter-meta { display:flex; flex-direction:column; align-items:center; gap:0.75rem; }

.counter-rate { display:flex; align-items:center; gap:0.75rem; font-size:1rem; color:var(--text-secondary); }
.counter-rate .rate-value { color:var(--accent-amber); font-family:var(--font-counter); font-weight:700; }

.since-opened { font-size:0.9rem; color:var(--text-muted); background:var(--bg-secondary); padding:0.5rem 1.25rem; border-radius:9999px; border:1px solid var(--border-card); }
.since-opened .since-value { color:var(--accent-amber); font-family:var(--font-counter); font-weight:700; }

.digit-wrapper { display:inline-block; position:relative; overflow:hidden; vertical-align:top; }
.digit { display:inline-block; transition:transform 0.3s ease-out,opacity 0.3s ease-out; }
.digit-exit { position:absolute; transform:translateY(-100%); opacity:0; }
.digit-enter { animation:digit-slide-in 0.3s ease-out; }
@keyframes digit-slide-in { from { transform:translateY(50%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.digit-static { display:inline-block; }

.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); animation:bounce 2s ease-in-out infinite; color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; display:flex; flex-direction:column; align-items:center; gap:0.25rem; }
.scroll-indicator svg { width:20px; height:20px; }
@keyframes bounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(8px); } }

/* ========================================
   STATS BAR
   ======================================== */
.stats-bar { padding:3rem 0; }
.stats-grid { display:grid; grid-template-columns:1fr; gap:1rem; max-width:var(--max-width); margin:0 auto; padding:0 1rem; }

.stat-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); padding:1.5rem; text-align:center; backdrop-filter:blur(10px); transition:border-color 0.2s,transform 0.2s; }
.stat-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-2px); }
.stat-icon { font-size:1.5rem; margin-bottom:0.5rem; opacity:0.8; }
.stat-value { font-family:var(--font-counter); font-size:clamp(1.5rem,3vw,2rem); font-weight:700; color:var(--accent-red); margin-bottom:0.25rem; }
.stat-label { font-size:0.85rem; color:var(--text-secondary); font-weight:500; }

/* ========================================
   LIVE STREAMS SECTION
   ======================================== */
.streams-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }

.streams-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:var(--max-width); margin:0 auto; padding:0 1rem; }

.stream-card { background:var(--bg-secondary); border:1px solid var(--border-card); border-radius:var(--radius); overflow:hidden; }

.stream-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom:1px solid var(--border-subtle); }
.stream-source { font-size:0.85rem; font-weight:600; color:var(--text-primary); }

.stream-embed { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.stream-embed iframe { position:absolute; top:0; left:0; width:100%; height:100% !important; border:0; }

.streams-grid-4 { display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:var(--max-width); margin:0 auto; padding:0 1rem; }

.streams-subtitle { text-align:center; color:var(--text-muted); font-size:0.88rem; margin-top:-1rem; margin-bottom:1.75rem; padding:0 1rem; }

.stream-tag { font-size:0.68rem; color:var(--accent-red); background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); padding:0.2rem 0.5rem; border-radius:9999px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }

.stream-embed .stream-placeholder { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg-primary); cursor:pointer; transition:background 0.2s; }
.stream-embed .stream-placeholder:hover { background:var(--bg-tertiary); }
.stream-placeholder .play-icon { width:64px; height:64px; background:var(--accent-red); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; transition:transform 0.2s; }
.stream-placeholder:hover .play-icon { transform:scale(1.1); }
.stream-placeholder .play-icon svg { width:24px; height:24px; fill:#fff; margin-left:3px; }
.stream-placeholder span { color:var(--text-secondary); font-size:0.9rem; }

/* ========================================
   ALTERNATIVES SECTION
   ======================================== */
.alternatives-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.alternatives-grid { display:grid; grid-template-columns:1fr; gap:1rem; max-width:var(--max-width); margin:0 auto; padding:0 1rem; }

.alt-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); padding:1.5rem; border-left:4px solid var(--accent-blue); backdrop-filter:blur(10px); transition:border-color 0.2s,transform 0.2s; }
.alt-card:hover { transform:translateY(-2px); }
.alt-card:nth-child(2) { border-left-color:var(--accent-green); }
.alt-card:nth-child(3) { border-left-color:var(--accent-amber); }
.alt-card:nth-child(4) { border-left-color:var(--accent-purple); }
.alt-card:nth-child(5) { border-left-color:var(--accent-red); }
.alt-card:nth-child(6) { border-left-color:var(--accent-blue); }

.alt-value { font-family:var(--font-counter); font-size:clamp(1.25rem,2.5vw,1.75rem); font-weight:700; color:var(--accent-red-bright); display:block; margin-bottom:0.25rem; }
.alt-label { font-size:0.95rem; color:var(--text-primary); display:block; margin-bottom:0.5rem; }
.alt-source { font-size:0.75rem; color:var(--text-muted); font-style:normal; }

/* ========================================
   COMPARISON SECTION
   ======================================== */
.comparison-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.comparison-note { text-align:center; color:var(--text-secondary); font-size:0.9rem; margin-bottom:2rem; }
.comparison-bars { max-width:800px; margin:0 auto; padding:0 1rem; display:flex; flex-direction:column; gap:1.25rem; }
.bar-row { display:flex; align-items:center; gap:1rem; }
.bar-label { flex:0 0 160px; font-size:0.85rem; color:var(--text-secondary); text-align:right; font-weight:500; }
.bar-track { flex:1; height:36px; background:var(--bg-secondary); border-radius:var(--radius-sm); overflow:hidden; position:relative; }
.bar-fill { height:100%; border-radius:var(--radius-sm); transition:width 1s ease-out; display:flex; align-items:center; padding-left:0.75rem; min-width:fit-content; }
.bar-fill.iran { background:linear-gradient(90deg,var(--accent-red),#dc2626); animation:bar-grow 2s ease-out; }
.bar-fill.iraq { background:linear-gradient(90deg,var(--accent-amber),#d97706); }
.bar-fill.afghanistan { background:linear-gradient(90deg,var(--accent-blue),#2563eb); }
.bar-fill.gulf { background:linear-gradient(90deg,var(--accent-green),#16a34a); }
.bar-fill.libya { background:linear-gradient(90deg,var(--accent-purple),#9333ea); }
@keyframes bar-grow { from { width:0; } }
.bar-amount { font-family:var(--font-counter); font-size:0.8rem; font-weight:700; color:#fff; white-space:nowrap; }

/* ========================================
   TIMELINE SECTION
   ======================================== */
.timeline-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.timeline { max-width:700px; margin:0 auto; padding:0 1rem; position:relative; }
.timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--border-card); }
.timeline-item { position:relative; padding-left:2.5rem; padding-bottom:2rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { position:absolute; left:0; top:4px; width:18px; height:18px; background:var(--bg-primary); border:2px solid var(--accent-red); border-radius:50%; z-index:1; }
.timeline-item:last-child .timeline-dot { background:var(--accent-red); animation:pulse-dot 1.5s ease-in-out infinite; }
.timeline-date { font-size:0.8rem; color:var(--accent-amber); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.25rem; }
.timeline-text { font-size:0.95rem; color:var(--text-primary); }
.timeline-source { font-size:0.75rem; color:var(--text-muted); margin-top:0.25rem; }

/* ========================================
   FAQ SECTION
   ======================================== */
.faq-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.faq-list { max-width:800px; margin:0 auto; padding:0 1rem; }
.faq-list details { border-bottom:1px solid var(--border-subtle); }
.faq-list summary { padding:1.25rem 0; font-size:1rem; font-weight:600; color:var(--text-primary); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:color 0.2s; }
.faq-list summary:hover { color:var(--accent-amber); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; font-size:1.5rem; font-weight:300; color:var(--text-muted); transition:transform 0.3s; flex-shrink:0; }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-answer { padding:0 0 1.25rem; color:var(--text-secondary); line-height:1.7; font-size:0.95rem; }
.faq-answer p { margin-bottom:0.75rem; }
.faq-answer p:last-child { margin-bottom:0; }

/* ========================================
   SOURCES SECTION
   ======================================== */
.sources-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.sources-content { max-width:800px; margin:0 auto; padding:0 1rem; }
.sources-list { list-style:decimal; padding-left:1.5rem; color:var(--text-secondary); font-size:0.9rem; line-height:2; }
.sources-list a { color:var(--accent-blue); }
.sources-meta { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-subtle); font-size:0.85rem; color:var(--text-muted); }
.methodology-link { display:inline-flex; align-items:center; gap:0.5rem; margin-top:1rem; color:var(--accent-amber); font-weight:600; font-size:0.95rem; }

/* ========================================
   GLOBAL / MULTILINGUAL SECTION
   ======================================== */
.global-section { padding:4rem 0; border-top:1px solid var(--border-subtle); }
.global-subtitle { text-align:center; color:var(--text-muted); font-size:0.9rem; margin-top:-1.25rem; margin-bottom:2rem; }
.global-grid { display:grid; grid-template-columns:1fr; gap:0.75rem; max-width:900px; margin:0 auto; padding:0 1rem; }
.global-card { display:flex; align-items:center; gap:1rem; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:0.75rem 1rem; transition:border-color 0.2s; }
.global-card:hover { border-color:rgba(255,255,255,0.15); }
.global-lang { font-size:0.75rem; color:var(--text-muted); flex:0 0 110px; font-weight:500; }
.global-term { font-size:0.95rem; color:var(--text-primary); font-weight:600; flex:1; }
.global-sub { font-size:0.72rem; color:var(--text-muted); text-align:right; flex:0 0 auto; display:none; }

/* ========================================
   SHARE SECTION
   ======================================== */
.share-section { padding:4rem 0; text-align:center; border-top:1px solid var(--border-subtle); }
.share-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; margin-top:1.5rem; max-width:var(--max-width); margin-left:auto; margin-right:auto; padding:0 1rem; }
.share-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.5rem; border:1px solid var(--border-card); border-radius:9999px; background:var(--bg-secondary); color:var(--text-primary); font-family:var(--font-body); font-size:0.9rem; font-weight:500; cursor:pointer; transition:all 0.2s; min-height:44px; }
.share-btn:hover { border-color:rgba(255,255,255,0.3); transform:translateY(-2px); }
.share-btn.share-x:hover { border-color:var(--text-primary); background:rgba(255,255,255,0.1); }
.share-btn.share-facebook:hover { border-color:#1877f2; background:rgba(24,119,242,0.1); }
.share-btn.share-reddit:hover { border-color:#ff4500; background:rgba(255,69,0,0.1); }
.share-btn.share-copy:hover { border-color:var(--accent-green); background:rgba(34,197,94,0.1); }
.share-btn svg { width:18px; height:18px; fill:currentColor; }
.embed-code-wrap { max-width:600px; margin:1.5rem auto 0; padding:0 1rem; }
.embed-code { background:var(--bg-secondary); border:1px solid var(--border-card); border-radius:var(--radius-sm); padding:0.75rem 1rem; font-family:var(--font-counter); font-size:0.8rem; color:var(--text-secondary); width:100%; resize:none; outline:none; cursor:pointer; }
.embed-code:focus { border-color:var(--accent-amber); }

/* ========================================
   FOOTER
   ======================================== */
.site-footer { padding:2rem 0; border-top:1px solid var(--border-subtle); text-align:center; }
.footer-inner { max-width:var(--max-width); margin:0 auto; padding:0 1rem; }
.footer-text { font-size:0.8rem; color:var(--text-muted); line-height:1.8; }
.footer-text a { color:var(--text-secondary); }
.footer-disclaimer { font-size:0.75rem; color:var(--text-muted); margin-top:1rem; max-width:600px; margin-left:auto; margin-right:auto; }

/* ========================================
   PAGE / POST CONTENT
   ======================================== */
.page-content { max-width:800px; margin:0 auto; padding:3rem 1rem; }
.entry-header { margin-bottom:2rem; }
.entry-title { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:700; letter-spacing:-0.02em; margin-bottom:0.75rem; }
.entry-content { color:var(--text-secondary); line-height:1.8; font-size:1rem; }
.entry-content h2 { font-size:1.35rem; color:var(--accent-amber); margin:2rem 0 1rem; }
.entry-content h3 { font-size:1.1rem; color:var(--text-primary); margin:1.5rem 0 0.75rem; }
.entry-content p { margin-bottom:1rem; }
.entry-content ul,.entry-content ol { padding-left:1.5rem; margin-bottom:1rem; }
.entry-content li { margin-bottom:0.5rem; }
.entry-content a { color:var(--accent-blue); }
.entry-content a:hover { color:var(--accent-amber); }
.entry-content strong { color:var(--text-primary); }
.entry-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.entry-content th,.entry-content td { padding:0.75rem; border:1px solid var(--border-card); font-size:0.9rem; text-align:left; }
.entry-content th { background:var(--bg-secondary); color:var(--text-primary); font-weight:600; }
.entry-content td { color:var(--text-secondary); }
.entry-content code { font-family:var(--font-counter); background:var(--bg-secondary); padding:0.15rem 0.4rem; border-radius:3px; font-size:0.85rem; color:var(--accent-amber); }
.entry-date { font-size:0.85rem; color:var(--text-muted); margin-top:0.5rem; }
.entry-meta { display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.article-cat,.read-time { font-size:0.75rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:9999px; }
.article-cat { background:rgba(239,68,68,0.1); color:var(--accent-red); border:1px solid rgba(239,68,68,0.25); }
.read-time { background:var(--bg-secondary); color:var(--text-muted); border:1px solid var(--border-subtle); }

/* Articles grid */
.articles-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2rem; }
.article-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); padding:1.5rem; transition:border-color 0.2s,transform 0.2s; }
.article-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-2px); }
.article-meta { display:flex; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }
.article-date { font-size:0.75rem; color:var(--text-muted); }
.article-title { font-size:1.1rem; font-weight:600; margin-bottom:0.75rem; line-height:1.4; }
.article-title a { color:var(--text-primary); }
.article-title a:hover { color:var(--accent-amber); }
.article-excerpt { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; margin-bottom:1rem; }
.read-more { font-size:0.85rem; color:var(--accent-amber); font-weight:500; }
.page-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:700; margin-bottom:2rem; }

/* Methodology page */
.methodology-page { max-width:800px; margin:0 auto; padding:3rem 1rem; }
.methodology-page h1 { font-size:2rem; margin-bottom:2rem; }
.methodology-page h2 { font-size:1.35rem; margin-top:2.5rem; margin-bottom:1rem; color:var(--accent-amber); }
.methodology-page p,.methodology-page li { color:var(--text-secondary); line-height:1.8; margin-bottom:1rem; }
.methodology-page ul,.methodology-page ol { padding-left:1.5rem; }
.methodology-page table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.methodology-page th,.methodology-page td { padding:0.75rem; border:1px solid var(--border-card); font-size:0.9rem; text-align:left; }
.methodology-page th { background:var(--bg-secondary); color:var(--text-primary); font-weight:600; }
.methodology-page td { color:var(--text-secondary); }
.methodology-page code { font-family:var(--font-counter); background:var(--bg-secondary); padding:0.15rem 0.4rem; border-radius:3px; font-size:0.85rem; color:var(--accent-amber); }
.back-link { display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:2rem; color:var(--accent-amber); font-weight:500; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (min-width: 640px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .alternatives-grid { grid-template-columns:repeat(2,1fr); }
  .streams-grid { grid-template-columns:repeat(2,1fr); }
  .streams-grid-4 { grid-template-columns:repeat(2,1fr); }
  .global-grid { grid-template-columns:repeat(2,1fr); }
  .global-sub { display:block; }
  .articles-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 768px) {
  section { padding:5rem 0; }
  .bar-label { flex:0 0 200px; }
}

@media (min-width: 900px) {
  .global-grid { grid-template-columns:repeat(3,1fr); }
}

@media (min-width: 1024px) {
  .alternatives-grid { grid-template-columns:repeat(3,1fr); }
  .counter-section::before { width:1200px; height:1200px; }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
}

/* ========================================
   PRINT
   ======================================== */
@media print {
  body { background:#fff; color:#000; }
  .counter-value { color:#000; text-shadow:none; }
  .streams-section,.share-section,.scroll-indicator,.live-badge { display:none !important; }
  .stat-card,.alt-card { border:1px solid #ccc; background:#f9f9f9; }
}