@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0a1628;
  --bg2:        #0d1f38;
  --card:       #0f2035;
  --card2:      #112338;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(255,255,255,0.12);

  --cyan-400:  #22d3ee;
  --cyan-500:  #06b6d4;
  --em-500:    #10b981;
  --em-400:    #34d399;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;
  --purple-400:#a78bfa;
  --orange-400:#fb923c;
  --red-400:   #f87171;
  --red-500:   #ef4444;
  --yellow-400:#fbbf24;
  --green-400: #4ade80;
  --teal-400:  #2dd4bf;

  --text-100:  #f1f5f9;
  --text-200:  #e2e8f0;
  --text-400:  #94a3b8;
  --text-500:  #64748b;

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius:    0.625rem;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-200);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--cyan-400); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  background: rgba(10,22,40,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
}
.nav-inner {
  display: flex; align-items: center; gap: 0.5rem; height: 3.5rem;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.125rem; color: var(--text-100);
  text-decoration: none; flex-shrink: 0; margin-right: 0.5rem;
}
.logo-box {
  background: var(--blue-500); color: white;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.2rem 0.35rem; border-radius: 0.3rem;
}
.nav-links { display: flex; list-style: none; gap: 0.125rem; }
.nav-links a {
  color: var(--text-400); font-size: 0.875rem; font-weight: 500;
  padding: 0.375rem 0.625rem; border-radius: 0.375rem;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover { color: var(--text-100); background: rgba(255,255,255,0.06); }

.nav-search {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  border-radius: 0.4rem;
  overflow: hidden; flex: 1; max-width: 280px; margin: 0 0.5rem;
}
.nav-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-100); font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  font-family: var(--font-mono);
}
.nav-search input::placeholder { color: var(--text-500); }
.nav-search-btn {
  background: rgba(255,255,255,0.06); border: none; cursor: pointer;
  color: var(--text-400); padding: 0.375rem 0.5rem;
  display: flex; align-items: center; transition: background 0.15s;
}
.nav-search-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-100); }

.btn-nav-check {
  background: var(--blue-500); color: white !important;
  padding: 0.375rem 0.875rem; border-radius: 0.4rem;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  transition: background 0.15s; text-decoration: none !important;
}
.btn-nav-check:hover { background: #2563eb; }

.nav-lang { font-size: 1rem; margin-left: 0.25rem; cursor: pointer; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.375rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem;
  font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  border: none; transition: all 0.15s; white-space: nowrap;
  text-decoration: none !important;
}
.btn-primary { background: var(--em-500); color: white; }
.btn-primary:hover { background: #059669; }
.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text-200); border: 1px solid var(--border); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn-outline { background: transparent; color: var(--cyan-400); border: 1px solid rgba(34,211,238,0.3); }
.btn-outline:hover { background: rgba(34,211,238,0.08); }

/* ── Dashboard Hero ──────────────────────────────────────────── */
.dash-hero {
  padding: 3rem 0 2rem; text-align: center;
  background: linear-gradient(180deg, rgba(6,182,212,0.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.dash-back-link {
  display: inline-block; margin-bottom: 1.25rem;
  font-size: 0.875rem; color: var(--text-400); text-decoration: none;
  transition: color 0.15s;
}
.dash-back-link:hover { color: var(--cyan-400); }
.dash-title {
  font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 50%, #67e8f9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 0.625rem;
}
.dash-subtitle { color: var(--text-400); font-size: 1.0625rem; margin-bottom: 2rem; }

.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; max-width: 700px; margin: 0 auto;
}
.dash-stat {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 0.875rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.dash-stat-value { font-size: 1.375rem; font-weight: 700; font-family: var(--font-mono); }
.dash-stat-value.cyan { color: var(--cyan-400); }
.dash-stat-label { font-size: 0.75rem; color: var(--text-500); }

/* ── Dashboard Body ──────────────────────────────────────────── */
.dash-body { padding: 2rem 0 4rem; }

.dash-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1rem;
}
.dash-grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin-bottom: 1rem;
}

/* ── Dashboard Cards ─────────────────────────────────────────── */
.dash-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 1.25rem;
  position: relative; overflow: hidden;
}
.dash-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
}
.accent-blue::before   { background: var(--blue-400); }
.accent-teal::before   { background: var(--teal-400); }
.accent-orange::before { background: var(--orange-400); }
.accent-purple::before { background: var(--purple-400); }
.accent-gray::before   { background: var(--text-500); }
.accent-blue2::before  { background: var(--blue-500); }

.dash-card-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem;
}
.dash-card-header h3 {
  font-size: 0.9375rem; font-weight: 600; color: var(--text-100); flex: 1;
}
.dash-card-icon { font-size: 1rem; }

.dash-refresh {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-400); width: 1.75rem; height: 1.75rem;
  border-radius: 0.375rem; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.dash-refresh:hover { background: rgba(255,255,255,0.1); color: var(--text-100); }

/* IP display */
.dash-ip-display {
  font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700;
  color: var(--cyan-400); margin-bottom: 1rem; letter-spacing: 0.02em;
}

/* Rows */
.dash-rows { display: flex; flex-direction: column; gap: 0; }
.dash-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}
.dash-row:last-child { border-bottom: none; }
.dash-label { color: var(--text-500); }
.dash-value { color: var(--text-200); font-family: var(--font-mono); font-weight: 500; text-align: right; max-width: 60%; }
.dash-value.small { font-size: 0.75rem; }
.dash-value.highlight { color: var(--cyan-400); }

/* Risk badges */
.risk-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.625rem; border-radius: 0.25rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
}
.risk-clean    { background: rgba(74,222,128,0.15);  color: var(--green-400); }
.risk-low      { background: rgba(96,165,250,0.15);  color: var(--blue-400); }
.risk-medium   { background: rgba(251,191,36,0.15);  color: var(--yellow-400); }
.risk-high     { background: rgba(249,115,22,0.15);  color: var(--orange-400); }
.risk-critical { background: rgba(239,68,68,0.15);   color: var(--red-400); }

/* Check icons */
.check-icon {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
}
.check-ok   { background: rgba(34,197,94,0.15); color: #4ade80; }
.check-warn { background: rgba(239,68,68,0.15); color: var(--red-400); }

/* ── Map ─────────────────────────────────────────────────────── */
.dash-map-wrap {
  border: 1px solid var(--border2); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1rem;
}

/* ── Chart legend ─────────────────────────────────────────────── */
.chart-legend {
  display: flex; gap: 0.75rem; align-items: center;
  flex-wrap: wrap; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-500);
}
.legend-dot {
  width: 0.625rem; height: 0.625rem; border-radius: 50%; display: inline-block;
}
.legend-dot.green  { background: rgba(74,222,128,0.8); }
.legend-dot.yellow { background: rgba(251,191,36,0.8); }
.legend-dot.orange { background: rgba(249,115,22,0.8); }
.legend-dot.red    { background: rgba(239,68,68,0.8); }

/* ── Streaming ─────────────────────────────────────────────────── */
.streaming-summary {
  display: flex; align-items: center; margin-bottom: 1rem;
}
.streaming-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem;
}
.stream-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  font-size: 0.8125rem; position: relative;
}
.stream-name { font-weight: 600; color: var(--text-100); margin-bottom: 0.125rem; }
.stream-desc { color: var(--text-500); font-size: 0.75rem; }
.stream-region { color: var(--text-500); font-size: 0.6875rem; margin-top: 0.375rem; }
.stream-badge {
  position: absolute; top: 0.5rem; right: 0.5rem;
  padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  font-size: 0.6875rem; font-weight: 700;
}
.stream-badge.checking  { background: rgba(100,116,139,0.2); color: var(--text-500); }
.stream-badge.available { background: rgba(74,222,128,0.15); color: var(--green-400); }
.stream-badge.blocked   { background: rgba(239,68,68,0.15);  color: var(--red-400); }

/* ── Error ─────────────────────────────────────────────────────── */
.dash-error {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius); padding: 1.25rem;
  color: var(--red-400); margin-bottom: 1.5rem;
}

/* ── AI Check pages ──────────────────────────────────────────── */
.ai-hero {
  padding: 3rem 0 2.5rem; text-align: center;
  background: linear-gradient(180deg, rgba(139,92,246,0.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.ai-hero-result { text-align: left; }
.ai-hero-badge {
  display: inline-block; margin-bottom: 1rem;
  padding: 0.3rem 0.875rem; border-radius: 99px;
  background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25);
  font-size: 0.8125rem; font-weight: 600; color: #a78bfa;
}
.ai-hero-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800;
  color: var(--text-100); margin-bottom: 0.75rem; line-height: 1.15;
}
.ai-hero-sub {
  font-size: 1.0625rem; color: var(--text-400);
  max-width: 600px; margin: 0 auto 2rem;
}

/* Search */
.ai-search-wrap { max-width: 640px; margin: 0 auto; }
.ai-search-form {
  display: flex; gap: 0.5rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.375rem 0.375rem 0.375rem 1rem;
}
.ai-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 0.9375rem; color: var(--text-100);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ai-search-hint {
  margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-500);
}
.ai-search-hint a { color: var(--cyan-400); text-decoration: none; }
.ai-search-hint a:hover { text-decoration: underline; }

/* Risk strip */
.ai-risk-strip {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px;
}
.ai-risk-item { display: flex; flex-direction: column; gap: 0.25rem; }
.ai-risk-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-500); font-weight: 600; }
.ai-risk-value { font-size: 1rem; font-weight: 700; color: var(--text-100); }
.ai-risk-flag  { font-size: 0.875rem; font-weight: 600; }
.flag-warn { color: var(--orange-500); }
.flag-ok   { color: var(--green-400); }

/* Warning banner */
.ai-warn-banner {
  margin-top: 1rem; padding: 0.75rem 1.25rem;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px; font-size: 0.875rem; color: var(--orange-400);
  line-height: 1.5;
}

/* Service grid */
.ai-grid-title {
  font-size: 1.125rem; font-weight: 700; color: var(--text-100);
  margin-bottom: 1.25rem;
}
.ai-result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.5rem;
}
.ai-live-note { font-size: 0.8125rem; color: var(--text-500); font-style: italic; }

.ai-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ai-service-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.125rem 1.25rem;
  transition: border-color 0.2s;
}
.ai-service-card:hover { border-color: rgba(139,92,246,0.35); }
.ai-service-card.ai-preview { opacity: 0.85; }

.ai-service-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.625rem;
}
.ai-service-emoji { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.ai-service-name  { font-size: 0.9375rem; font-weight: 700; color: var(--text-100); line-height: 1.2; }
.ai-service-cat   { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-500); margin-top: 0.1rem; }
.ai-service-desc  { font-size: 0.8125rem; color: var(--text-400); margin-bottom: 0.5rem; line-height: 1.5; }
.ai-service-url   { font-size: 0.7rem; color: var(--text-500); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ai-service-detail { font-size: 0.75rem; color: var(--text-500); margin-top: 0.375rem; min-height: 1em; }

/* Status badges */
.ai-status-badge {
  margin-left: auto; flex-shrink: 0;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  font-size: 0.7rem; font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ai-status-idle     { background: var(--bg3); border-color: var(--border); color: var(--text-500); }
.ai-status-checking { background: rgba(6,182,212,0.08); border-color: rgba(6,182,212,0.25); color: var(--cyan-400); animation: ai-pulse 1.5s ease-in-out infinite; }
.ai-status-accessible { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: var(--green-400); }
.ai-status-blocked  { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: var(--red-400); }
.ai-status-timeout  { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: var(--orange-400); }

@keyframes ai-pulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }

/* Info row on form page */
.ai-info-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem; margin-top: 2rem;
}
.ai-info-card {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.125rem 1.25rem;
}
.ai-info-icon { font-size: 1.375rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; }
.ai-info-card strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--text-100); margin-bottom: 0.25rem; }
.ai-info-card p { font-size: 0.8125rem; color: var(--text-400); line-height: 1.5; margin: 0; }

/* Disclaimer */
.ai-disclaimer {
  font-size: 0.8rem; color: var(--text-500); line-height: 1.6;
  padding: 1rem 1.25rem; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
}

/* ── Inner pages ─────────────────────────────────────────────── */
.page-hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.page-hero h1 {
  font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 800;
  color: var(--text-100); letter-spacing: -0.02em; margin-bottom: 0.625rem;
}
.page-hero p { font-size: 1rem; color: var(--text-400); max-width: 600px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
  color: var(--em-400); padding: 0.3rem 0.875rem;
  border-radius: 2rem; font-size: 0.8rem; font-weight: 600;
  margin-bottom: 0.875rem;
}
.section-sm { padding: 2rem 0 4rem; }

/* Shared search box (inner pages) */
.search-box { max-width: 640px; margin: 0 auto 0.75rem; }
.search-box form {
  display: flex; gap: 0.5rem; background: var(--card);
  border: 1px solid var(--border2); border-radius: 0.625rem; padding: 0.375rem;
  transition: border-color 0.2s;
}
.search-box form:focus-within { border-color: var(--cyan-500); }
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-100); font-family: var(--font-mono); font-size: 0.9375rem;
  padding: 0.5rem 0.625rem;
}
.search-box input::placeholder { color: var(--text-500); }
.search-hint { font-size: 0.8125rem; color: var(--text-500); text-align: center; }
.search-hint a { color: var(--cyan-400); }

/* ── Card (generic) ─────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 1.5rem;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.card h3 { font-size: 1rem; font-weight: 600; color: var(--text-100); margin-bottom: 0.5rem; }
.card p  { font-size: 0.875rem; color: var(--text-400); line-height: 1.6; }

/* ── Result page ─────────────────────────────────────────────── */
.ip-display { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text-100); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-400); }
.info-value { color: var(--text-100); font-weight: 500; font-family: var(--font-mono); }
.bool-true  { color: var(--green-400); }
.bool-false { color: var(--text-500); }

/* ── Blog ─────────────────────────────────────────────────────── */
.blog-card { display: block; text-decoration: none; }
.blog-card:hover .blog-card-title { color: var(--cyan-400); }
.blog-card-category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--em-500); margin-bottom: 0.5rem; }
.blog-card-title { font-size: 1.0625rem; font-weight: 600; color: var(--text-100); margin-bottom: 0.5rem; transition: color 0.15s; line-height: 1.4; }
.blog-card-desc  { font-size: 0.875rem; color: var(--text-400); line-height: 1.6; }
.blog-meta { margin-top: 0.875rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-500); }

/* ── Prose ─────────────────────────────────────────────────────── */
.prose { max-width: 720px; color: var(--text-200); line-height: 1.8; }
.prose h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-100); margin: 2rem 0 1rem; }
.prose h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-100); margin: 1.5rem 0 0.75rem; }
.prose p  { margin-bottom: 1.25rem; }
.prose ul, .prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--text-100); font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: 0.875em; background: rgba(255,255,255,0.06); padding: 0.125em 0.375em; border-radius: 0.25rem; color: var(--cyan-400); }
.prose a { color: var(--cyan-400); }
.prose blockquote { border-left: 3px solid var(--cyan-500); padding-left: 1rem; color: var(--text-400); margin: 1.5rem 0; }

/* ── FAQ ─────────────────────────────────────────────────────── */
details { border: 1px solid var(--border2); border-radius: 0.5rem; margin-bottom: 0.625rem; overflow: hidden; }
details summary { padding: 0.875rem 1.125rem; cursor: pointer; font-weight: 500; color: var(--text-100); list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; color: var(--cyan-400); font-size: 1.25rem; font-weight: 300; }
details[open] summary { background: rgba(34,211,238,0.04); }
details[open] summary::after { content: '−'; }
.faq-answer { padding: 0.5rem 1.125rem 1.125rem; color: var(--text-400); font-size: 0.9375rem; line-height: 1.7; border-top: 1px solid var(--border); }

/* ── IPQS CTA Banner ─────────────────────────────────────────── */
.ipqs-cta { background: linear-gradient(90deg, var(--bg2) 0%, color-mix(in srgb, var(--em-900) 60%, var(--bg2)) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.ipqs-cta-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ipqs-cta-text { flex: 1; min-width: 220px; }
.ipqs-cta-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--em-500); display: block; margin-bottom: 0.25rem; }
.ipqs-cta-text p { font-size: 0.875rem; color: var(--text-300); margin: 0; }
.ipqs-cta-links { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.ipqs-cta-pill { font-size: 0.8125rem; font-weight: 500; color: var(--text-300); background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.875rem; text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; }
.ipqs-cta-pill:hover { color: var(--em-400); border-color: var(--em-700); background: color-mix(in srgb, var(--em-900) 30%, var(--bg3)); }

/* ── Footer ──────────────────────────────────────────────────── */
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; }
.footer-brand p { font-size: 0.875rem; color: var(--text-400); margin-top: 0.75rem; max-width: 280px; line-height: 1.6; }
.footer-links h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-400); margin-bottom: 0.875rem; }
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a { font-size: 0.875rem; color: var(--text-400); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--text-100); }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--text-500); }

/* ── Utility ─────────────────────────────────────────────────── */
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}
.text-center{text-align:center} .text-muted{color:var(--text-400)}
.text-sm{font-size:.875rem} .text-mono{font-family:var(--font-mono)}
.w-full{width:100%} .hidden{display:none}

/* ── Performance Metrics Rows ────────────────────────────────── */
.perf-rows { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.25rem; }
.perf-row { display: flex; align-items: center; gap: 0.75rem; }
.perf-label { font-size: 0.875rem; color: var(--text-200); min-width: 110px; display: flex; align-items: center; gap: 0.375rem; }
.perf-bar-wrap { flex: 1; background: rgba(255,255,255,0.06); border-radius: 999px; height: 8px; overflow: hidden; }
.perf-bar { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.perf-bar-green  { background: linear-gradient(90deg, #059669, #34d399); }
.perf-bar-cyan   { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.perf-bar-yellow { background: linear-gradient(90deg, #d97706, #fbbf24); }
.perf-time { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-400); min-width: 48px; text-align: right; }
.perf-notice {
  background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
  border-radius: 0.5rem; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; color: var(--em-400);
}

/* ── Privacy Security Check ──────────────────────────────────── */
.extra-section { padding: 0 0 0.5rem; }
.privacy-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem;
}
.privacy-header h3 { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--text-100); }
.privacy-recheck {
  background: none; border: none; color: var(--em-400); font-size: 0.8125rem;
  font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem;
  border-radius: 0.25rem; transition: background 0.15s;
}
.privacy-recheck:hover { background: rgba(16,185,129,0.1); }
.privacy-alert {
  border-radius: 0.5rem; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; font-weight: 500; margin-bottom: 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.privacy-alert-neutral { background: rgba(100,116,139,0.1); border: 1px solid rgba(100,116,139,0.25); color: var(--text-400); }
.privacy-alert-warn    { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3);   color: var(--red-400); }
.privacy-alert-ok      { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.25); color: var(--em-400); }
.privacy-rows { display: flex; flex-direction: column; }
.privacy-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem;
}
.privacy-row:last-child { border-bottom: none; }
.privacy-row-label { color: var(--text-400); }
.privacy-ip { font-family: var(--font-mono); font-weight: 600; color: var(--cyan-400); }
.privacy-checking { color: var(--text-500); font-style: italic; }
.privacy-ok-text   { color: var(--green-400); font-weight: 500; }
.privacy-warn-text { color: var(--red-400);   font-weight: 500; }

/* ── Analysis Summary ────────────────────────────────────────── */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.summary-panel h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-100); margin-bottom: 0.875rem; }
.summary-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.summary-item { font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.summary-item::before { content: '✓'; font-weight: 700; flex-shrink: 0; margin-top: 0.125rem; }
.summary-item.ok::before   { color: var(--green-400); }
.summary-item.warn::before { content: '⚠'; color: var(--orange-400); }
.summary-item.ok   { color: var(--text-400); }
.summary-item.warn { color: var(--text-200); }
.security-features { display: flex; flex-direction: column; }
.security-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem;
  color: var(--text-400);
}
.security-row:last-child { border-bottom: none; }
.sec-val-ok   { color: var(--green-400); font-weight: 600; }
.sec-val-warn { color: var(--red-400);   font-weight: 600; }

/* ── Marketing Section ───────────────────────────────────────── */
/* ── Notable IP Explorer ─────────────────────────────── */
.ip-explore-section {
  padding: 3.5rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.ip-explore-title {
  font-size: 1.375rem; font-weight: 700; color: var(--text-100);
  margin-bottom: 0.375rem; text-align: center;
}
.ip-explore-sub {
  font-size: 0.875rem; color: var(--text-500);
  text-align: center; margin-bottom: 2rem;
}
.ip-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 1rem;
}
.ip-explore-card { padding: 1.25rem; }
.ip-explore-card-hdr {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.ip-explore-card-icon  { font-size: 1rem; line-height: 1; }
.ip-explore-card-label {
  font-size: 0.875rem; font-weight: 600; color: var(--text-200);
  flex: 1;
}
.ip-explore-card-note  {
  font-size: 0.7rem; color: var(--text-500);
  font-style: italic;
}
.ip-explore-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ip-chip {
  display: inline-flex; align-items: baseline; gap: 0.35em;
  padding: 0.275rem 0.65rem;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; text-decoration: none;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.775rem; color: var(--cyan-400);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ip-chip:hover {
  background: rgba(6,182,212,0.08);
  border-color: var(--cyan-400);
  color: #67e8f9;
}
.ip-chip span {
  font-size: 0.675rem; color: var(--text-500);
  font-family: system-ui, sans-serif;
}
.ip-chip:hover span { color: var(--text-400); }

.marketing-section { padding: 4rem 0 5rem; background: var(--bg2); border-top: 1px solid var(--border); }
.marketing-hero { text-align: center; margin-bottom: 3rem; }
.marketing-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800;
  color: var(--cyan-400); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem;
}
.marketing-subtitle { color: var(--text-400); max-width: 700px; margin: 0 auto; font-size: 1rem; line-height: 1.7; }

.features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; margin-bottom: 3rem;
}
.feature-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 1.5rem;
  position: relative; overflow: hidden;
}
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan-400), transparent); }
.feature-icon { font-size: 1.5rem; margin-bottom: 0.875rem; }
.feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--text-100); margin-bottom: 0.625rem; line-height: 1.3; }
.feature-card > p { font-size: 0.875rem; color: var(--text-400); margin-bottom: 0.875rem; line-height: 1.6; }
.feature-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.feature-card li { font-size: 0.8125rem; color: var(--text-400); }
.feature-card li::before { content: '• '; color: var(--cyan-400); }

.why-section { text-align: center; }
.why-title { font-size: 1.5rem; font-weight: 700; color: var(--cyan-400); margin-bottom: 1.5rem; }
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; max-width: 900px; margin: 0 auto;
}
.why-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 0.5rem; padding: 1rem 1.25rem;
  font-size: 0.9375rem; color: var(--text-200);
  display: flex; align-items: center; gap: 0.75rem;
  text-align: left;
}
.why-check { color: var(--em-400); font-weight: 700; font-size: 1.125rem; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dash-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .nav-lang { display: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dash-grid-3, .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-search { max-width: 160px; }
  .streaming-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}