/* ═══════════════ RESET & BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.8;max-width:820px;margin:0 auto;padding:20px;color:#d1d5db;background:#0a0a0a}

/* ═══════════════ NAVIGATION ═══════════════ */
nav{padding:12px 0;border-bottom:1px solid #1a1a2e;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{color:#fff;font-size:1.3em;font-weight:bold;text-decoration:none}
.nav-logo span{color:#00e676}
.nav-links{display:flex;gap:14px;font-size:.85em}
.nav-links a{color:#888;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:#00e676}

/* ═══════════════ TYPOGRAPHY ═══════════════ */
h1{font-size:2.2em;color:#fff;line-height:1.3;margin-bottom:.3em}
h2{font-size:1.4em;margin:2em 0 .5em;border-bottom:2px solid #1a1a2e;padding-bottom:8px;color:#e0e0e0}
h3{font-size:1.1em;color:#ccc;margin-top:1.5em}
p{margin:.8em 0}
a{color:#00e676;text-decoration:none}
a:hover{text-decoration:underline}
strong{color:#fff}

/* ═══════════════ BREADCRUMB ═══════════════ */
.breadcrumb{color:#666;font-size:.8em;margin:10px 0}
.breadcrumb a{color:#00e676;text-decoration:none}

/* ═══════════════ LEAD PARAGRAPH ═══════════════ */
.lead{font-size:1.1em;color:#999;border-left:4px solid #00e676;padding-left:15px;margin:20px 0}

/* ═══════════════ CARDS & BOXES ═══════════════ */
.card{background:#1a1a2e;border-radius:10px;padding:18px}
.card-dark{background:#1a1a2e;border-radius:10px;padding:16px 18px}

/* ═══════════════ FORMATION DIAGRAM ═══════════════ */
.diagram{background:#1a1a2e;border-radius:10px;padding:20px;margin:20px 0;text-align:center;font-family:monospace;line-height:1.8}

/* ═══════════════ PROS/CONS GRID ═══════════════ */
.pro-con{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}
.pro-con .box{padding:18px;border-radius:10px}
.pro-con .pro{background:#0a2a0a;border:1px solid #1a4a1a}
.pro-con .con{background:#2a0a0a;border:1px solid #4a1a1a}
.pro-con h3{margin:0 0 8px 0}
.pro-con li{color:#bbb;margin:6px 0;font-size:.95em}

/* ═══════════════ COMPARISON GRID ═══════════════ */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}
.compare-card{background:#1a1a2e;border-radius:10px;padding:18px}
.compare-card.pep{border-top:3px solid #6cb4ee}
.compare-card.arteta{border-top:3px solid #ef0107}
.compare-card h3{margin:0;font-size:1.1em}
.compare-card .detail{color:#999;font-size:.9em;margin-top:8px}

/* ═══════════════ DATA GRID ═══════════════ */
.data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:20px 0}
.data-card{background:#1a1a2e;border-radius:10px;padding:16px;text-align:center}
.data-card .num{font-size:2.2em;font-weight:bold;color:#00e676}
.data-card .label{color:#888;font-size:.8em;margin-top:4px}
.data-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #222;color:#bbb;font-size:.9em}
.data-row .val{font-weight:bold;color:#fff}

/* ═══════════════ SYSTEM BOX ═══════════════ */
.system-box{background:#1a1a2e;border-radius:10px;padding:18px;margin:15px 0}
.system-box h3{margin:0}
.system-box.high{border-left:4px solid #ef4444}
.system-box.low{border-left:4px solid #3b82f6}

/* ═══════════════ COMPARISON TABLE ═══════════════ */
.comparison-table{width:100%;border-collapse:collapse;margin:20px 0}
.comparison-table th{background:#1a1a2e;padding:10px;text-align:left;color:#ccc;font-size:.9em}
.comparison-table td{padding:10px;border-bottom:1px solid #1a1a2e;font-size:.95em}
.comparison-table .winner{color:#00e676;font-weight:bold}

/* ═══════════════ TRIGGER GRID (gegenpressing) ═══════════════ */
.trigger-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.trigger{background:#1a1a2e;border-radius:10px;padding:16px}
.trigger .num{font-size:1.8em;font-weight:bold;color:#ef4444}
.trigger h4{margin:4px 0}
.trigger p{color:#999;font-size:.9em}

/* ═══════════════ CASE STUDY ═══════════════ */
.case-study{background:#1a1a2e;border-radius:8px;padding:15px;margin:15px 0}
.case-study h4{margin:0;color:#00e676}
.case-study p{color:#999;font-size:.9em;margin:4px 0}

/* ═══════════════ QUOTE ═══════════════ */
.quote{background:#1a1a2e;border-left:4px solid #ffc107;padding:12px 15px;margin:15px 0;color:#bbb;font-style:italic;border-radius:4px}

/* ═══════════════ ERA / VARIANT / TIMELINE ═══════════════ */
.era{background:#1a1a2e;border-radius:10px;padding:18px;margin:12px 0}
.era .year{color:#00e676;font-weight:bold;font-size:.9em}
.era h4{margin:6px 0;font-size:1.1em}
.era p{color:#bbb;font-size:.95em}
.variant{background:#1a1a2e;border-radius:10px;padding:16px;margin:12px 0}
.variant h4{margin:0;color:#00e676}
.variant p{color:#999;font-size:.9em;margin:6px 0}

/* ═══════════════ CTA BOX ═══════════════ */
.cta-box{background:linear-gradient(135deg,#1a1a2e,#0a2a1a);border:1px solid #00e676;border-radius:12px;padding:20px;text-align:center;margin:30px 0}
.cta-box .cta-title{color:#ccc;margin-bottom:8px}
.cta-box a,.cta-btn{display:inline-block;background:#00e676;color:#000;font-weight:bold;padding:12px 32px;border-radius:6px;text-decoration:none;margin-top:10px;transition:background .2s,transform .2s}
.cta-box a:hover,.cta-btn:hover{background:#00ff7c;transform:translateY(-1px);text-decoration:none}

/* ═══════════════ FAQ ═══════════════ */
.faq{margin:20px 0}
.faq dt{font-weight:bold;color:#00e676;margin-top:15px}
.faq dd{margin-left:0;color:#999;margin-bottom:10px}

/* ═══════════════ HOMEPAGE GRID ═══════════════ */
.hero{padding:30px 0 20px}
.hero h1{font-size:2.4em;margin-bottom:.2em}
.hero .tagline{color:#888;font-size:1.1em}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:30px 0}
.article-card{background:#1a1a2e;border-radius:12px;padding:20px;transition:border-color .2s,transform .2s;border:1px solid transparent}
.article-card:hover{border-color:#00e676;transform:translateY(-2px)}
.article-card h2{font-size:1.15em;margin:0 0 8px;border:none;padding:0;color:#fff;line-height:1.4}
.article-card .excerpt{color:#888;font-size:.9em;line-height:1.5;margin-bottom:12px}
.article-card .meta{display:flex;justify-content:space-between;align-items:center}
.article-card .tag{font-size:.75em;background:rgba(0,230,118,.15);color:#00e676;padding:3px 10px;border-radius:12px}
.article-card .date{color:#555;font-size:.8em}
.read-more{color:#00e676;font-size:.85em;font-weight:600}

/* ═══════════════ ABOUT SECTION ═══════════════ */
.about{background:#1a1a2e;border-radius:12px;padding:24px;margin:40px 0;text-align:center}
.about h3{color:#00e676;margin-bottom:8px}
.about p{color:#999;font-size:.95em}

/* ═══════════════ CROSS-SITE LINKS ═══════════════ */
.cross-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0}
.cross-links a{background:#1a1a2e;padding:8px 16px;border-radius:20px;color:#888;font-size:.85em;transition:color .2s,background .2s}
.cross-links a:hover{color:#00e676;background:#222;text-decoration:none}

/* ═══════════════ FOOTER ═══════════════ */
footer{text-align:center;padding:20px;color:#555;font-size:.8em;margin-top:40px;border-top:1px solid #1a1a2e}
footer a{color:#00e676;text-decoration:none}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:640px){
  body{padding:14px}
  h1{font-size:1.6em}
  .hero h1{font-size:1.7em}
  .pro-con,.compare-grid,.trigger-grid{grid-template-columns:1fr}
  .data-grid{grid-template-columns:1fr 1fr}
  .article-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}

/* Satellite Cross-Link Footer */
.satellite-links {
  margin-top: 3rem;
  padding: 1.5rem;
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 8px;
  text-align: center;
}
.satellite-links__title {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.satellite-links__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.satellite-links__grid a {
  padding: 0.4rem 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
}
.satellite-links__grid a:hover {
  background: rgba(59, 130, 246, 0.2);
}