/* =============================
   Design Tokens
   ============================= */
:root {
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem;

  --content-wide: 1200px;
}

/* =============================
   Dark Mode (Default)
   ============================= */
:root, [data-theme="dark"] {
  --color-bg: #0c0c0e;
  --color-surface: #141416;
  --color-surface-2: #1c1c20;
  --color-surface-elevated: #222228;
  --color-border: #2a2a32;
  --color-border-hover: #3a3a44;
  --color-text: #e8e8ed;
  --color-text-muted: #8e8e9a;
  --color-text-faint: #55555f;
  --color-accent: #1e88e5;
  --color-accent-hover: #42a5f5;
  --color-best: #00c853;
  --color-best-bg: rgba(0,200,83,0.08);
  --color-best-border: rgba(0,200,83,0.2);
  --color-worst: #ff5252;
  --color-worst-bg: rgba(255,82,82,0.08);
  --color-worst-border: rgba(255,82,82,0.2);
  --color-gold: #ffd740;
  --color-silver: #b0bec5;
  --color-bronze: #ff8a65;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --color-bg: #f4f4f7;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f4;
  --color-surface-elevated: #ffffff;
  --color-border: #d8d8e0;
  --color-border-hover: #b8b8c4;
  --color-text: #1a1a22;
  --color-text-muted: #6e6e7a;
  --color-text-faint: #a0a0ab;
  --color-accent: #1565c0;
  --color-accent-hover: #1976d2;
  --color-best: #2e7d32;
  --color-best-bg: rgba(46,125,50,0.06);
  --color-best-border: rgba(46,125,50,0.2);
  --color-worst: #c62828;
  --color-worst-bg: rgba(198,40,40,0.06);
  --color-worst-border: rgba(198,40,40,0.2);
  --color-gold: #f9a825;
  --color-silver: #78909c;
  --color-bronze: #e64a19;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
}

/* =============================
   Layout
   ============================= */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

/* =============================
   Header
   ============================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.logo svg { width: 36px; height: 36px; }

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.header-nav a:hover { color: var(--color-text); }

@media (max-width: 640px) {
  .header-nav a { display: none; }
}

.theme-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.theme-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* =============================
   Hero
   ============================= */
.hero {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24)) clamp(var(--space-12), 6vw, var(--space-20));
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}

.hero-tabs {
  display: inline-flex;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: var(--space-1);
}

.hero-tab {
  padding: var(--space-2) var(--space-6);
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
}
.hero-tab:hover { color: var(--color-text); }
.hero-tab.active-best {
  background: var(--color-best);
  color: #fff;
}
.hero-tab.active-worst {
  background: var(--color-worst);
  color: #fff;
}

/* =============================
   Engine Cards
   ============================= */
.engines-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.engine-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: start;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.engine-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card);
}

.engine-card.best { border-left: 3px solid var(--color-best); }
.engine-card.worst { border-left: 3px solid var(--color-worst); }

@media (max-width: 768px) {
  .engine-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }
}

/* Rank badge */
.rank-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.best .rank-badge {
  background: var(--color-best-bg);
  color: var(--color-best);
  border: 2px solid var(--color-best-border);
}
.worst .rank-badge {
  background: var(--color-worst-bg);
  color: var(--color-worst);
  border: 2px solid var(--color-worst-border);
}

.rank-badge.gold { color: var(--color-gold); border-color: var(--color-gold); background: rgba(255,215,64,0.08); }
.rank-badge.silver { color: var(--color-silver); border-color: var(--color-silver); background: rgba(176,190,197,0.08); }
.rank-badge.bronze { color: var(--color-bronze); border-color: var(--color-bronze); background: rgba(255,138,101,0.08); }

/* Engine info */
.engine-info { min-width: 0; }

.engine-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.engine-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.engine-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

/* Specs grid */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}

.spec-item {
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.spec-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.spec-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* Tag */
.engine-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.tag.good { color: var(--color-best); border-color: var(--color-best-border); background: var(--color-best-bg); }
.tag.bad { color: var(--color-worst); border-color: var(--color-worst-border); background: var(--color-worst-bg); }

/* Applied Models */
.applied-models {
  margin-top: var(--space-4);
}

.applied-models-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.models-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 500;
}

.model-chip .model-series {
  color: var(--color-text);
  font-weight: 700;
}

/* Verdict */
.verdict-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.best .verdict-box {
  background: var(--color-best-bg);
  border: 1px solid var(--color-best-border);
  color: var(--color-best);
}
.worst .verdict-box {
  background: var(--color-worst-bg);
  border: 1px solid var(--color-worst-border);
  color: var(--color-worst);
}

.verdict-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

/* Score bar */
.score-section {
  flex-shrink: 0;
  width: 160px;
  text-align: center;
}

@media (max-width: 768px) {
  .score-section { width: 100%; }
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
}

.best .score-circle {
  background: var(--color-best-bg);
  border: 3px solid var(--color-best);
  color: var(--color-best);
}
.worst .score-circle {
  background: var(--color-worst-bg);
  border: 3px solid var(--color-worst);
  color: var(--color-worst);
}

.score-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* =============================
   Section Headers
   ============================= */
.section-header {
  text-align: center;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.section-header p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto;
}

/* =============================
   Footer
   ============================= */
.footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
  text-align: center;
}
.footer p {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0 auto;
}
.footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer a:hover { color: var(--color-accent); }

/* =============================
   Scroll Reveal
   ============================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hidden list */
.list-hidden { display: none; }