/**
 * Q-DASH Search Intelligence & Organic Growth Center (Platform V3)
 * Terminal Scenes, Ranking Curves, SERP Simulators, Crawl Nodes, Heatmaps & Labs
 * File: assets/css/seo-platform-v3-scenes.css
 * Strictly Scoped to .seo3
 */

/* Hero Search Intelligence Terminal */
.seo3-hero-terminal {
  background: linear-gradient(165deg, rgba(12, 24, 44, 0.96) 0%, rgba(4, 8, 16, 0.98) 100%);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: var(--seo-radius-xl);
  padding: clamp(20px, 3.5vw, 32px);
  box-shadow: var(--seo-shadow-terminal), 0 0 45px rgba(6, 182, 212, 0.15);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.seo3-terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.seo3-terminal-dots {
  display: flex;
  gap: 6px;
}

.seo3-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.seo3-query-bar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: monospace;
  font-size: 0.88rem;
  color: #38bdf8;
  margin-bottom: 16px;
}

.seo3-serp-snippet {
  background: rgba(4, 8, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: start;
}

.seo3-serp-url {
  font-size: 0.75rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.seo3-serp-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 4px;
  text-decoration: none;
}

.seo3-serp-desc {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.seo3-terminal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.seo3-terminal-kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.seo3-terminal-kpi-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
}

.seo3-terminal-kpi-lbl {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Center 2: Organic vs Paid Acquisition Mix & Simulator */
.seo3-simulator-box {
  background: #ffffff;
  border: 1.5px solid rgba(242, 101, 34, 0.3);
  border-radius: var(--seo-radius-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--seo-shadow-elevated);
}

.seo3-sim-input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.seo3-sim-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--seo-slate-300);
  background: var(--seo-slate-50);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--seo-navy);
}

.seo3-sim-output-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: linear-gradient(145deg, #0e1c34 0%, #060d1a 100%);
  border-radius: var(--seo-radius-lg);
  padding: 24px;
  color: #ffffff;
  text-align: center;
}

.seo3-sim-metric-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #f26522;
  margin-top: 4px;
}

/* Center 3: Keyword Explorer Table */
.seo3-kw-table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border-radius: var(--seo-radius-lg);
  border: 1px solid var(--seo-slate-200);
  box-shadow: var(--seo-shadow-soft);
}

.seo3-kw-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 0.9rem;
}

.seo3-kw-table th {
  background: var(--seo-slate-100);
  padding: 14px 18px;
  font-weight: 800;
  color: var(--seo-navy);
  border-bottom: 1.5px solid var(--seo-slate-200);
}

.seo3-kw-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--seo-slate-100);
  color: var(--seo-slate-700);
}

.seo3-kw-table tr:hover td {
  background: var(--seo-slate-50);
}

/* Intent Pills */
.seo3-intent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
}

.seo3-intent-commercial { background: rgba(242, 101, 34, 0.12); color: #f26522; border: 1px solid rgba(242, 101, 34, 0.3); }
.seo3-intent-transactional { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.seo3-intent-local { background: rgba(6, 182, 212, 0.12); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); }
.seo3-intent-info { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.3); }

/* Center 4: Technical Health & Crawl Nodes */
.seo3-health-gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.seo3-health-card {
  background: linear-gradient(145deg, #0e1c34 0%, #060d1a 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--seo-radius-lg);
  padding: 20px;
  text-align: center;
  color: #fff;
}

.seo3-crawl-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.seo3-crawl-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  color: #fff;
  font-size: 0.82rem;
  transition: var(--seo-transition);
}

.seo3-crawl-node:hover {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.15);
  transform: translateY(-3px);
}

/* Center 5: Topical Authority & Internal Linking Network */
.seo3-cluster-stage {
  background: radial-gradient(circle at center, #10203a 0%, #050b14 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--seo-radius-xl);
  padding: 32px 20px;
  color: #fff;
  text-align: center;
}

.seo3-cluster-pillar {
  display: inline-block;
  background: linear-gradient(135deg, #f26522 0%, #ff8548 100%);
  color: #fff;
  font-weight: 900;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(242, 101, 34, 0.4);
  margin-bottom: 20px;
}

.seo3-cluster-children {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.seo3-cluster-leaf {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: #38bdf8;
  font-weight: 700;
}

/* Center 6: Qatar Local Search Map Pack Simulation */
.seo3-map-pack-box {
  background: #ffffff;
  border: 1px solid var(--seo-slate-300);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--seo-shadow-soft);
  text-align: start;
}

.seo3-map-pack-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--seo-slate-100);
}

.seo3-map-pack-item:last-child {
  border-bottom: none;
}

/* Center 7: Dynamic Industry SEO Explorer */
.seo3-industry-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.seo3-ind-btn {
  padding: 10px 18px;
  border-radius: 50px;
  background: var(--seo-white);
  border: 1.5px solid var(--seo-slate-200);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--seo-navy);
  cursor: pointer;
  transition: var(--seo-transition);
}

.seo3-ind-btn:hover {
  border-color: var(--seo-orange);
  color: var(--seo-orange);
}

.seo3-ind-btn.active {
  background: linear-gradient(135deg, var(--seo-navy) 0%, #152442 100%);
  color: #fff !important;
  border-color: var(--seo-orange);
  box-shadow: 0 6px 18px rgba(9, 19, 34, 0.25);
}

.seo3-industry-display {
  background: #ffffff;
  border: 1.5px solid rgba(242, 101, 34, 0.3);
  border-radius: var(--seo-radius-xl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--seo-shadow-elevated);
}

/* Center 7: Opportunity Heatmap Matrix */
.seo3-matrix-table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border-radius: var(--seo-radius-lg);
  border: 1px solid var(--seo-slate-200);
  box-shadow: var(--seo-shadow-soft);
  margin-top: 36px;
}

.seo3-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: center;
}

.seo3-matrix-table th {
  background: var(--seo-slate-100);
  padding: 12px 10px;
  font-weight: 800;
  color: var(--seo-navy);
  border: 1px solid var(--seo-slate-200);
}

.seo3-matrix-table td {
  padding: 10px 8px;
  border: 1px solid var(--seo-slate-200);
  font-weight: 800;
}

.seo3-heat-high { background: #dcfce7; color: #15803d; }
.seo3-heat-med { background: #fef9c3; color: #a16207; }
.seo3-heat-core { background: #ffedd5; color: #c2410c; }

/* Center 8: SERP Preview Lab */
.seo3-serp-preview-box {
  background: #ffffff;
  border-radius: var(--seo-radius-lg);
  border: 1.5px solid var(--seo-slate-200);
  padding: 24px;
  box-shadow: var(--seo-shadow-soft);
}

/* Center 9: SEO Growth Timeline */
.seo3-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.seo3-timeline-card {
  background: #ffffff;
  border-radius: var(--seo-radius-md);
  border: 1.5px solid var(--seo-slate-200);
  padding: 18px 12px;
  text-align: center;
  transition: var(--seo-transition);
}

.seo3-timeline-card:hover {
  border-color: var(--seo-orange);
  transform: translateY(-4px);
  box-shadow: var(--seo-shadow-soft);
}

.seo3-timeline-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #091322, #152442);
  color: #fff;
  font-weight: 900;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px auto;
}

@media (max-width: 1024px) {
  .seo3-sim-input-grid,
  .seo3-sim-output-grid,
  .seo3-health-gauge-grid,
  .seo3-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .seo3-sim-input-grid,
  .seo3-sim-output-grid,
  .seo3-health-gauge-grid,
  .seo3-timeline-grid,
  .seo3-terminal-kpi-grid {
    grid-template-columns: 1fr;
  }
}