/* ═══════════════════════════════════════════════════
   home.css — Hero · Cards · Comparator · Quiz · Use Cases
   ═══════════════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:8rem var(--s-8) 6rem;
  overflow:hidden;
}

/* Ambient glow behind hero */
.hero::before {
  content:''; position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:800px; height:600px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(245,158,11,0.07) 0%, transparent 65%);
  pointer-events:none;
}

/* Data flow lines — signature element */
.hero-lines {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.hero-line {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.15) 30%, rgba(20,184,166,0.1) 70%, transparent 100%);
  animation:flow-line 5s ease-in-out infinite;
  opacity:0;
}
.hero-line:nth-child(1) { top:22%; animation-delay:0s;   animation-duration:6s; }
.hero-line:nth-child(2) { top:38%; animation-delay:1.4s; animation-duration:8s; }
.hero-line:nth-child(3) { top:54%; animation-delay:0.7s; animation-duration:7s; }
.hero-line:nth-child(4) { top:70%; animation-delay:2.1s; animation-duration:9s; }

@keyframes flow-line {
  0%   { opacity:0; transform:translateX(-10%); }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateX(10%); }
}
@media(prefers-reduced-motion:reduce) { .hero-line { animation:none; opacity:0.05; } }

.hero-content { position:relative; z-index:1; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:0.68rem;
  color:var(--amber); background:var(--amber-pale);
  border:1px solid var(--border-amb); border-radius:100px;
  padding:0.28rem 1rem; letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:var(--s-6);
}
.hero-eyebrow-dot {
  width:6px; height:6px; background:var(--green); border-radius:50%;
  animation:pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
  50%      { opacity:0.8; box-shadow:0 0 0 5px rgba(34,197,94,0); }
}

.hero h1 {
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7vw,5.5rem);
  font-weight:700; letter-spacing:-0.05em; line-height:1.0;
  margin-bottom:var(--s-6);
}
.hero h1 em { font-style:normal; color:var(--amber); }
.hero h1 .dim { color:var(--text-3); font-weight:300; }

.hero-sub {
  font-size:1.05rem; color:var(--text-2); max-width:520px;
  margin:0 auto var(--s-8); line-height:1.75;
}

.hero-actions { display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s-10); }

/* Search bar */
.search-wrap {
  position:relative; width:100%; max-width:560px; margin:0 auto;
}
.search-wrap input {
  width:100%; background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:var(--r-xl); padding:0.95rem 3.5rem 0.95rem var(--s-5);
  font-size:0.95rem; font-family:var(--font-body); color:var(--text);
  outline:none; transition:border-color var(--t), box-shadow var(--t);
}
.search-wrap input:focus {
  border-color:var(--amber-dim); box-shadow:0 0 0 4px var(--amber-pale);
}
.search-wrap input::placeholder { color:var(--text-3); }
.search-icon {
  position:absolute; right:var(--s-4); top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:1rem; pointer-events:none;
}
.search-count {
  position:absolute; left:var(--s-4); top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:0.65rem; color:var(--text-3);
}

/* Category pills */
.cat-pills { display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:center; margin-top:var(--s-5); }
.cat-pill {
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:100px; padding:0.35rem var(--s-4);
  font-size:0.75rem; font-weight:500; color:var(--text-2);
  cursor:pointer; transition:all var(--t); user-select:none;
}
.cat-pill:hover, .cat-pill.active {
  border-color:var(--border-amb); color:var(--amber); background:var(--amber-pale);
}

/* ── CATEGORY SECTION HEADER ── */
.cat-section { margin-bottom:var(--s-16); }
.cat-section-header {
  display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:var(--s-6); padding-bottom:var(--s-4);
  border-bottom:1px solid var(--border);
}
.cat-section-bar {
  width:4px; height:28px; border-radius:2px; flex-shrink:0;
}
.cat-section-bar.sql        { background:var(--cat-sql); }
.cat-section-bar.nosql      { background:var(--cat-nosql); }
.cat-section-bar.graph      { background:var(--cat-graph); }
.cat-section-bar.vector     { background:var(--cat-vector); }
.cat-section-bar.timeseries { background:var(--cat-timeseries); }
.cat-section-bar.newsql     { background:var(--cat-newsql); }
.cat-section-bar.embedded   { background:var(--cat-embedded); }

.cat-section-name { font-size:1.05rem; font-weight:700; letter-spacing:-0.02em; }
.cat-section-count { font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); margin-left:auto; }

/* ── DB CARDS ── */
.db-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:var(--s-4); }

.db-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
  position:relative;
}
/* Category color left border */
.db-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.db-card.sql::before        { background:var(--cat-sql); }
.db-card.nosql::before      { background:var(--cat-nosql); }
.db-card.graph::before      { background:var(--cat-graph); }
.db-card.vector::before     { background:var(--cat-vector); }
.db-card.timeseries::before { background:var(--cat-timeseries); }
.db-card.newsql::before     { background:var(--cat-newsql); }
.db-card.embedded::before   { background:var(--cat-embedded); }

.db-card:hover { border-color:var(--border-2); transform:translateY(-3px); box-shadow:var(--shadow-md); }

.db-card-top {
  padding:var(--s-5) var(--s-5) var(--s-4);
  display:flex; align-items:flex-start; gap:var(--s-3);
}
.db-logo-box {
  width:46px; height:46px; flex-shrink:0;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; overflow:hidden; padding:6px;
}
.db-logo-box img { width:100%; height:100%; object-fit:contain; }
.db-logo-initials {
  width:46px; height:46px; flex-shrink:0;
  background:var(--bg-4); border:1px solid var(--border);
  border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono);
  font-size:0.62rem; font-weight:700; color:var(--amber); line-height:1.2; text-align:center;
}

.db-name  { font-size:1rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:0.2rem; }
.db-scale {
  font-family:var(--font-mono); font-size:0.6rem; color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.07em;
}
.db-pop {
  margin-left:auto; display:flex; flex-direction:column; align-items:flex-end;
  flex-shrink:0; gap:0.1rem;
}
.db-pop-stars { font-size:0.68rem; color:var(--amber); letter-spacing:-1px; }
.db-pop-rank  { font-family:var(--font-mono); font-size:0.58rem; color:var(--text-3); }

.db-desc { padding:0 var(--s-5) var(--s-3); font-size:0.82rem; color:var(--text-2); line-height:1.65; }

.db-meta-row {
  padding:0 var(--s-5) var(--s-3);
  display:flex; flex-wrap:wrap; gap:var(--s-2);
}
.db-meta-chip {
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:0.18rem 0.55rem;
  font-size:0.65rem; color:var(--text-2); font-family:var(--font-mono);
}

.db-snippet-wrap { margin:0 var(--s-5) var(--s-4); }

.db-pros-cons {
  padding:var(--s-3) var(--s-5); background:var(--bg-1);
  border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);
}
.pros-cons-col { font-size:0.76rem; }
.pros-cons-label { font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.3rem; }
.pros-cons-label.pros { color:var(--green); }
.pros-cons-label.cons { color:var(--red);   }
.pros-cons-text { color:var(--text-2); line-height:1.5; }

.db-actions { padding:var(--s-3) var(--s-5) var(--s-5); display:flex; gap:var(--s-2); margin-top:auto; }
.db-actions .btn { flex:1; }

/* ── COMPARATOR ── */
.comparator-outer {
  background:var(--bg-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:var(--s-20) 0;
}
.compare-selects {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:var(--s-4); align-items:center; margin-bottom:var(--s-8);
}
.cmp-select-wrap { position:relative; }
.cmp-select-wrap select {
  width:100%; appearance:none; background:var(--bg-3);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1rem 2.5rem 1rem var(--s-5);
  font-size:0.9rem; font-family:var(--font-body); color:var(--text);
  outline:none; cursor:pointer; transition:border-color var(--t);
}
.cmp-select-wrap select:focus { border-color:var(--amber-dim); }
.cmp-select-wrap::after {
  content:'▾'; position:absolute; right:var(--s-4); top:50%;
  transform:translateY(-50%); color:var(--text-3); pointer-events:none;
}
.vs-chip {
  width:42px; height:42px; background:var(--bg-4); border:1px solid var(--border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.68rem; font-weight:700; color:var(--text-3); flex-shrink:0;
}
.compare-table { width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.compare-table th, .compare-table td { padding:0.85rem var(--s-5); text-align:left; border-bottom:1px solid var(--border); font-size:0.84rem; }
.compare-table th { background:var(--bg-3); font-weight:700; }
.compare-table th.col-a { color:var(--amber); }
.compare-table th.col-b { color:var(--teal);  }
.compare-table th:first-child { color:var(--text-3); font-size:0.7rem; font-weight:400; text-transform:uppercase; letter-spacing:0.06em; }
.compare-table td:first-child { font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-2); background:var(--bg-2); width:140px; }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom:none; }
.compare-table tr:hover td:not(:first-child) { background:var(--bg-3); }

/* ── QUIZ ── */
.quiz-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s-10);
  max-width:680px; margin:0 auto;
}
.quiz-progress { display:flex; gap:var(--s-2); margin-bottom:var(--s-8); }
.quiz-step { flex:1; height:3px; background:var(--bg-4); border-radius:100px; transition:background 0.35s; }
.quiz-step.done   { background:var(--amber); }
.quiz-step.active { background:var(--amber-dim); }

.quiz-q { font-size:1.1rem; font-weight:700; margin-bottom:var(--s-6); line-height:1.45; letter-spacing:-0.02em; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.quiz-opt {
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-5); cursor:pointer;
  transition:all var(--t); text-align:left;
}
.quiz-opt:hover    { border-color:var(--border-amb); background:var(--bg-4); }
.quiz-opt.selected { border-color:var(--amber);      background:var(--amber-pale); }
.quiz-opt-title { font-size:0.88rem; font-weight:600; margin-bottom:0.25rem; }
.quiz-opt-desc  { font-size:0.74rem; color:var(--text-2); line-height:1.45; }

.quiz-result-wrap { text-align:center; }
.quiz-result-label { font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); margin-bottom:var(--s-2); text-transform:uppercase; letter-spacing:0.08em; }
.quiz-result-db { font-size:2.4rem; font-weight:700; color:var(--amber); letter-spacing:-0.04em; margin-bottom:var(--s-3); }
.quiz-result-why { font-size:0.88rem; color:var(--text-2); max-width:460px; margin:0 auto var(--s-6); line-height:1.75; }
.quiz-result-actions { display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; }

/* ── USE CASES ── */
.uc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
.uc-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-5);
  transition:border-color var(--t), transform var(--t);
}
.uc-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.uc-icon  { font-size:1.75rem; margin-bottom:var(--s-3); display:block; }
.uc-name  { font-size:0.9rem; font-weight:700; margin-bottom:var(--s-2); letter-spacing:-0.01em; }
.uc-desc  { font-size:0.76rem; color:var(--text-2); margin-bottom:var(--s-4); line-height:1.6; }
.uc-recs  { display:flex; flex-wrap:wrap; gap:var(--s-1); margin-bottom:var(--s-2); }
.uc-rec   { background:var(--amber-pale); border:1px solid var(--border-amb); border-radius:var(--r-sm); padding:0.18rem 0.5rem; font-family:var(--font-mono); font-size:0.62rem; color:var(--amber); }
.uc-avoid { font-size:0.71rem; color:var(--text-3); }
.uc-avoid span { color:var(--red); }

/* ── RESPONSIVE ── */
@media(max-width:1100px) { .uc-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px)  { .uc-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px) {
  .db-grid           { grid-template-columns:1fr; }
  .compare-selects   { grid-template-columns:1fr; }
  .vs-chip           { display:none; }
  .quiz-options      { grid-template-columns:1fr; }
  .uc-grid           { grid-template-columns:1fr; }
  .quiz-card         { padding:var(--s-6); }
  .db-pros-cons      { grid-template-columns:1fr; }
}