/* =========================================================
   CITELINE marketing homepage stylesheet
   Dark mode first. Editorial type. Real SVG data viz.
   ========================================================= */
:root {
  --bg-0: #08080C;
  --bg-1: #0A0A0F;
  --bg-2: #0F0F17;
  --bg-3: #14141C;
  --bg-4: #1A1A24;
  --bg-5: #22222E;
  --line: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);
  --fg: #F2F3F5;
  --fg-2: #C6C8CE;
  --fg-3: #8A8D96;
  --fg-4: #5A5D66;
  --fg-5: #3A3D45;
  --accent: #00FF94;
  --accent-2: #00C271;
  --accent-soft: rgba(0,255,148,0.12);
  --accent-glow: rgba(0,255,148,0.35);
  --danger: #FF5C5C;
  --warn: #FFB547;
  --info: #6AA0FF;
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-1); color: var(--fg); }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11','ss01','ss02';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.display { font-family: 'General Sans', 'Inter', sans-serif; letter-spacing: -0.025em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* ----- NAV ----- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease, padding 250ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,10,15,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding: 12px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'General Sans'; font-weight: 600; font-size: 18px; letter-spacing: 0.01em; }
.brand-glyph { width: 22px; height: 22px; display: inline-flex; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--fg-2); }
.nav-links a { transition: color 150ms ease; }
.nav-links a:hover { color: var(--fg); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
  padding: 10px 16px; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; transition: all 150ms ease;
}
.btn-primary {
  background: var(--accent); color: #001A0F;
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 24px -2px var(--accent-glow);
  font-weight: 600;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-2), 0 0 40px -2px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-3); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); }
.btn-secondary { background: rgba(255,255,255,0.04); color: var(--fg); border-color: var(--line-2); }
.btn-secondary:hover { background: rgba(255,255,255,0.08); }
.btn-lg { padding: 16px 24px; font-size: 15px; border-radius: 10px; }
.btn-xl { padding: 22px 32px; font-size: 17px; border-radius: 12px; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta .btn-secondary { display: none; }
}

/* ----- HERO ----- */
.hero {
  position: relative;
  padding: 180px 0 120px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,255,148,0.07), transparent 60%),
    radial-gradient(800px 400px at 80% 30%, rgba(0,255,148,0.04), transparent 60%),
    linear-gradient(180deg, #0A0A0F 0%, #0E0E16 70%, #14141C 100%);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 70%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  font-size: 12px; color: var(--fg-2);
  letter-spacing: 0.01em;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

h1.hero-h1 {
  font-family: 'General Sans';
  font-size: clamp(40px, 6.2vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 22px 0 24px;
  color: var(--fg);
  text-wrap: balance;
}
.hero-h1 .accent { color: var(--accent); font-style: italic; font-weight: 500; }
.hero-sub {
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 0 36px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; }

.live-chip {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  font-size: 13px; color: var(--fg-2);
}
.live-chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
.live-chip .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0;
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.8; } 80% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
.live-chip .sep { width: 1px; height: 14px; background: var(--line-3); }
.live-chip .num { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* floating donor card */
.donor-card-wrap { position: relative; }
.donor-card {
  background: linear-gradient(180deg, #15151E 0%, #11111A 100%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.02);
  position: relative; overflow: hidden;
}
.donor-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 80% -10%, rgba(0,255,148,0.06), transparent 70%);
  pointer-events: none;
}
.donor-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.donor-domain { display: flex; align-items: center; gap: 10px; }
.donor-fav { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #2A3144, #1A1F2E); display: grid; place-items: center; color: var(--fg-2); font-weight: 700; font-size: 12px; border: 1px solid var(--line-2); }
.donor-domain .name { font-weight: 600; font-size: 15px; }
.donor-domain .sub { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.accept-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(0,255,148,0.10);
  color: var(--accent);
  font-family: 'JetBrains Mono'; font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(0,255,148,0.25);
}
.accept-stamp svg { width: 11px; height: 11px; }

.donor-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.donor-stat { padding: 0 12px; border-right: 1px solid var(--line); }
.donor-stat:first-child { padding-left: 0; }
.donor-stat:last-child { border-right: none; }
.donor-stat .label { font-size: 10px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; font-family: 'JetBrains Mono'; }
.donor-stat .val { font-size: 19px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-family: 'General Sans'; }
.donor-stat .delta { font-size: 11px; color: var(--accent); margin-left: 6px; font-family: 'JetBrains Mono'; font-weight: 500; }

.donor-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.mini-card { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.mini-title { font-size: 10px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono'; }

.wayback-row { display: flex; gap: 4px; margin-top: 12px; align-items: flex-end; }
.wayback-cell { flex: 1; height: 14px; background: rgba(255,255,255,0.06); border-radius: 2px; }
.wayback-cell.ok { background: rgba(0,255,148,0.5); }
.wayback-cell.warn { background: rgba(255,181,71,0.55); }
.wayback-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--fg-4); }

.floating-pip {
  position: absolute; right: -10px; top: 30px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  padding: 8px 12px; border-radius: 8px;
  font-size: 11px; color: var(--fg-2);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  font-family: 'JetBrains Mono';
}
.floating-pip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@media (max-width: 980px) { .floating-pip { display: none; } }

/* ----- SOCIAL PROOF ----- */
.proof { padding: 80px 0 60px; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-label { text-align: center; font-size: 11px; color: var(--fg-4); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 32px; font-family: 'JetBrains Mono'; }
.stealth-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 980px) { .stealth-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stealth-grid { grid-template-columns: repeat(2, 1fr); } }
.stealth {
  border: 1px dashed var(--line-3);
  border-radius: 10px;
  padding: 22px 14px;
  text-align: center;
  background: rgba(255,255,255,0.012);
  overflow: hidden;
}
.stealth .blur-mark {
  filter: blur(6px);
  font-family: 'General Sans'; font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  color: var(--fg-3); user-select: none;
}
.stealth .stealth-label { font-size: 12px; color: var(--fg-2); margin-top: 14px; font-weight: 500; }
.stealth .stealth-nda { font-size: 10px; color: var(--fg-4); margin-top: 4px; font-style: italic; font-family: 'JetBrains Mono'; letter-spacing: 0.04em; }

.stat-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
@media (max-width: 880px) { .stat-chips { grid-template-columns: 1fr; } }
.stat-chip {
  background: linear-gradient(180deg, #14141E, #0F0F17);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 28px;
  position: relative; overflow: hidden;
}
.stat-chip::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,255,148,0.16), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; pointer-events: none;
}
.stat-chip .big { font-family: 'General Sans'; font-size: 56px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--fg); display: flex; align-items: baseline; gap: 4px; }
.stat-chip .big .unit { font-size: 26px; color: var(--accent); font-weight: 500; }
.stat-chip .copy { color: var(--fg-2); font-size: 15px; margin-top: 12px; line-height: 1.45; }

/* ----- SECTION GENERIC ----- */
section { position: relative; }
.section { padding: 140px 0; }
.section-eyebrow { font-size: 11px; color: var(--accent); font-family: 'JetBrains Mono'; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.section-head { max-width: 880px; margin: 0 auto 64px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-h {
  font-family: 'General Sans';
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 18px;
  text-wrap: balance;
}
.section-sub { color: var(--fg-2); font-size: 17px; line-height: 1.55; margin: 0; max-width: 720px; }

/* ----- 7 LAYER AUDIT ----- */
.audit { background: var(--bg-1); }
.audit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 880px) { .audit-grid { grid-template-columns: 1fr; } }

.audit-card {
  background: linear-gradient(180deg, #11111A 0%, #0D0D14 100%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms ease;
}
.audit-card.open { border-color: rgba(0,255,148,0.30); box-shadow: 0 0 0 1px rgba(0,255,148,0.10), 0 30px 60px -30px rgba(0,255,148,0.10); }
.audit-card-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: none; border: none; width: 100%; text-align: left;
  color: inherit;
}
.audit-num {
  width: 38px; height: 38px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono'; font-size: 13px; color: var(--fg-3);
  background: rgba(255,255,255,0.02);
}
.audit-card.open .audit-num { color: var(--accent); border-color: rgba(0,255,148,0.30); background: rgba(0,255,148,0.05); }
.audit-title { font-family: 'General Sans'; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.audit-summary { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.audit-body { display: grid; grid-template-rows: 1fr; }
.audit-body-inner { overflow: hidden; }
.audit-body-pad { padding: 0 24px 24px 86px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .audit-body-pad { grid-template-columns: 1fr; padding-left: 24px; } }

.audit-detail { color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }
.audit-detail p { margin: 0 0 10px; }
.audit-detail .reject, .audit-detail .accept-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono'; font-size: 10px;
  padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase;
  margin-right: 6px;
}
.audit-detail .reject { color: var(--danger); background: rgba(255,92,92,0.08); }
.audit-detail .accept-tag { color: var(--accent); background: rgba(0,255,148,0.08); }

.audit-viz {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  min-height: 200px;
}
.viz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.viz-title { font-size: 10px; color: var(--fg-4); letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono'; }
.viz-tag { font-family: 'JetBrains Mono'; font-size: 11px; color: var(--fg-3); }

.preview-chart { display: none; }

/* ----- AI SECTION ----- */
.ai-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .ai-split { grid-template-columns: 1fr; } }

.ai-answer {
  background: linear-gradient(180deg, #11111A, #0C0C13);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.ai-answer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,0.2); }
.ai-answer-head .agent-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #00FF94, #00C271); display: grid; place-items: center; color: #001A0F; font-weight: 700; font-size: 12px; font-family: 'General Sans'; }
.ai-answer-head .agent-name { font-weight: 600; font-size: 13px; }
.ai-answer-head .agent-status { font-size: 11px; color: var(--fg-3); margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono'; letter-spacing: 0.04em; }
.ai-answer-head .agent-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.ai-prompt { padding: 14px 18px; font-size: 13px; color: var(--fg-2); background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--line); font-family: 'JetBrains Mono'; }
.ai-prompt::before { content: "❯ "; color: var(--accent); }

.ai-body { padding: 20px 22px; font-size: 14px; color: var(--fg-2); line-height: 1.7; }
.ai-body .hl { color: var(--fg); font-weight: 500; }
.ai-body .citation { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: rgba(0,255,148,0.14); color: var(--accent); font-size: 10px; font-weight: 600; margin: 0 2px; vertical-align: super; font-family: 'JetBrains Mono'; }

.ai-sources { padding: 16px 22px 8px; border-top: 1px solid var(--line); background: rgba(0,0,0,0.18); }
.ai-sources .lbl { font-size: 10px; color: var(--fg-4); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; font-family: 'JetBrains Mono'; }
.src-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.src-row:last-child { border-bottom: none; }
.src-rank { width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--fg-3); display: grid; place-items: center; font-family: 'JetBrains Mono'; font-size: 10px; flex: 0 0 auto; }
.src-row.you .src-rank { background: var(--accent); color: #001A0F; }
.src-row.you .src-domain { color: var(--accent); font-weight: 600; }
.src-domain { font-family: 'JetBrains Mono'; font-size: 12.5px; color: var(--fg-2); }
.src-row.you::after { content: "your placement"; margin-left: auto; font-size: 9px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; font-family: 'JetBrains Mono'; }

.ai-caption { font-size: 11px; color: var(--fg-4); padding: 10px 22px 18px; font-style: italic; }

.ai-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 72px; }
@media (max-width: 720px) { .ai-features { grid-template-columns: 1fr; } }
.ai-feat { padding: 24px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; }
.ai-feat .ic { width: 36px; height: 36px; border-radius: 8px; background: rgba(0,255,148,0.08); border: 1px solid rgba(0,255,148,0.2); display: grid; place-items: center; color: var(--accent); margin-bottom: 16px; }
.ai-feat .ft-title { font-family: 'General Sans'; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.ai-feat .ft-body { font-size: 13.5px; color: var(--fg-3); line-height: 1.55; }

/* ----- CSM ----- */
.csm-section { background: var(--bg-1); }
.csm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .csm-grid { grid-template-columns: 1fr; } }
.csm-card {
  background: linear-gradient(180deg, #12121B, #0E0E16);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 32px 28px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.csm-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.csm-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  margin-bottom: 22px;
  position: relative; overflow: hidden;
  border: 1px solid var(--line-3);
}
.csm-avatar::before { content: ""; position: absolute; inset: 0; }
.csm-avatar.a1::before { background: conic-gradient(from 200deg, #00FF94, #1A8A6A 40%, #0A3A2B 80%, #00FF94); filter: blur(8px); }
.csm-avatar.a2::before { background: conic-gradient(from 30deg, #6AA0FF, #2A4F8C 50%, #0E1E3C 80%, #6AA0FF); filter: blur(8px); }
.csm-avatar.a3::before { background: conic-gradient(from 130deg, #FFB547, #7A5418 50%, #2A1E0C 80%, #FFB547); filter: blur(8px); }
.csm-avatar::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }

.csm-name { font-family: 'General Sans'; font-size: 19px; font-weight: 600; }
.csm-title { color: var(--accent); font-size: 12px; margin-top: 4px; font-family: 'JetBrains Mono'; letter-spacing: 0.06em; text-transform: uppercase; }
.csm-cred { color: var(--fg-3); font-size: 14px; margin-top: 14px; line-height: 1.55; }

/* ----- CLIENT PANEL ----- */
.panel-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel-shell {
  background: linear-gradient(180deg, #0E0E16, #0A0A12);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
}
.panel-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
}
.win-dots { display: flex; gap: 6px; }
.win-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.panel-tabs { display: flex; gap: 4px; font-size: 12px; color: var(--fg-3); }
.panel-tab { padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.panel-tab.active { background: rgba(255,255,255,0.06); color: var(--fg); }
.panel-search { margin-left: auto; padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }

.panel-body { display: grid; grid-template-columns: 1fr 320px; gap: 0; min-height: 460px; }
@media (max-width: 980px) { .panel-body { grid-template-columns: 1fr; } }

.panel-main { padding: 22px; overflow-x: auto; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.panel-title { font-family: 'General Sans'; font-size: 18px; font-weight: 600; }
.panel-meta { font-size: 11px; color: var(--fg-3); font-family: 'JetBrains Mono'; }

.link-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.link-table thead th {
  text-align: left; font-size: 10px; color: var(--fg-4); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 10px; border-bottom: 1px solid var(--line); font-weight: 500; font-family: 'JetBrains Mono';
}
.link-table tbody td { padding: 14px 10px; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.link-table tbody tr:last-child td { border-bottom: none; }
.link-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.link-table .domain { font-family: 'JetBrains Mono'; font-size: 12.5px; color: var(--fg); }
.link-table .num-c { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono'; font-size: 12.5px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-family: 'JetBrains Mono'; letter-spacing: 0.06em; }
.status-pill .d { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.healthy { background: rgba(0,255,148,0.08); color: var(--accent); }
.status-pill.healthy .d { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); animation: dot-pulse 2.2s ease-out infinite; }
.status-pill.warn { background: rgba(255,181,71,0.08); color: var(--warn); }
.status-pill.warn .d { background: var(--warn); }
.status-pill.danger { background: rgba(255,92,92,0.08); color: var(--danger); }
.status-pill.danger .d { background: var(--danger); animation: dot-pulse 1.4s ease-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.panel-side { border-left: 1px solid var(--line); padding: 22px; background: rgba(255,255,255,0.012); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) { .panel-side { border-left: none; border-top: 1px solid var(--line); } }
.side-card, .cite-chart-card { background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.side-title { font-size: 10px; color: var(--fg-4); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono'; }
.side-title .live-d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: dot-pulse 2.4s ease-out infinite; box-shadow: 0 0 6px var(--accent-glow); }
.crawl-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fg-2); padding: 7px 0; border-bottom: 1px solid var(--line); }
.crawl-line:last-child { border-bottom: none; }
.crawl-line .v { font-family: 'JetBrains Mono'; color: var(--fg); font-size: 12px; }
.crawl-line .v.ok { color: var(--accent); }

.cite-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.cite-big .n { font-family: 'General Sans'; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; }
.cite-big .delta { color: var(--accent); font-size: 12px; font-family: 'JetBrains Mono'; }

.panel-caption { text-align: center; color: var(--fg-3); font-size: 14px; margin-top: 22px; font-style: italic; }

/* ----- GUARANTEE ----- */
.guarantee { background: var(--bg-1); padding: 140px 0; }
.guarantee-panel {
  position: relative;
  border-radius: 18px;
  padding: 64px 56px;
  background:
    radial-gradient(800px 300px at 50% -10%, rgba(0,255,148,0.10), transparent 60%),
    linear-gradient(180deg, #0F0F18, #0B0B12);
  border: 1px solid rgba(0,255,148,0.25);
  overflow: hidden;
}
@media (max-width: 720px) { .guarantee-panel { padding: 44px 28px; } }
.guarantee-panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 50% 110%, rgba(0,255,148,0.08), transparent 60%);
  pointer-events: none;
}
.g-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(0,255,148,0.3); border-radius: 999px; color: var(--accent); font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.g-h { font-family: 'General Sans'; font-weight: 600; font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.03em; line-height: 1.04; margin: 20px 0 12px; max-width: 760px; }
.g-sub { font-size: 17px; color: var(--fg-2); max-width: 720px; margin: 0; }

.steps { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: stretch; gap: 0; margin-top: 56px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: 14px; } .step-line { display: none; } }
.step { background: rgba(255,255,255,0.02); border: 1px solid var(--line-2); border-radius: 12px; padding: 24px; }
.step .step-num { font-family: 'JetBrains Mono'; font-size: 10px; color: var(--accent); letter-spacing: 0.14em; }
.step .step-title { font-family: 'General Sans'; font-size: 19px; font-weight: 600; margin: 10px 0 6px; }
.step .step-body { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.step-line { display: flex; align-items: center; justify-content: center; color: var(--fg-4); }
.step-line svg { width: 100%; }

.g-note { margin: 36px auto 0; color: var(--fg-3); font-size: 14px; font-style: italic; text-align: center; max-width: 760px; }

/* ----- PRIVATE / FIT ----- */
.private-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col {
  background: linear-gradient(180deg, #11111A, #0D0D14);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 32px;
}
.fit-col h3 { font-family: 'General Sans'; font-size: 20px; font-weight: 600; margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.fit-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.fit-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--fg-2); line-height: 1.5; padding: 14px 0; border-top: 1px solid var(--line); }
.fit-col li:first-child { border-top: none; padding-top: 0; }
.tick { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.tick.good { background: rgba(0,255,148,0.10); color: var(--accent); }
.tick.bad { background: rgba(255,92,92,0.10); color: var(--danger); }

/* ----- FAQ ----- */
.faq-section { background: var(--bg-1); }
.faq-grid { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; cursor: pointer; user-select: none; gap: 24px; background: none; border: none; width: 100%; text-align: left; color: inherit; }
.faq-q .qt { font-family: 'General Sans'; font-size: 19px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.faq-q .qi { color: var(--fg-3); transition: transform 200ms ease, color 200ms ease; flex: 0 0 auto; }
.faq-item.open .qi { transform: rotate(45deg); color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-pad { padding: 0 0 24px; color: var(--fg-2); font-size: 15px; line-height: 1.65; max-width: 740px; }

/* ----- FINAL CTA ----- */
.final-cta {
  position: relative;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(0,255,148,0.08), transparent 60%),
    linear-gradient(180deg, #0B0B12, #08080C);
  padding: 160px 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent 70%);
  pointer-events: none;
}
.final-cta h2 { font-family: 'General Sans'; font-size: clamp(40px, 5vw, 74px); letter-spacing: -0.035em; line-height: 1; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.final-cta .sub { font-size: 18px; color: var(--fg-2); max-width: 680px; margin: 0 auto 40px; }
.final-cta .slots { margin-top: 28px; font-size: 13px; color: var(--fg-3); font-family: 'JetBrains Mono'; }
.final-cta .slots .acc { color: var(--accent); }

/* ----- FOOTER ----- */
.footer { background: var(--bg-0); padding: 80px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 16px; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--fg-2); transition: color 150ms ease; }
.footer-col a:hover { color: var(--fg); }
.footer-brand { font-family: 'General Sans'; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-desc { color: var(--fg-3); font-size: 13.5px; line-height: 1.55; max-width: 320px; }
.newsletter { display: flex; gap: 6px; margin-top: 12px; }
.newsletter input {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: var(--fg); font-family: inherit;
  outline: none; transition: border-color 150ms;
}
.newsletter input::placeholder { color: var(--fg-4); }
.newsletter input:focus { border-color: rgba(0,255,148,0.35); }
.newsletter button { padding: 10px 14px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 40px; margin-top: 56px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-4); }
@media (max-width: 720px) { .footer-bottom { flex-direction: column; gap: 12px; } }

/* motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-parallax { transform: none !important; }
}
.counter { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ----- NAME / BRAND NARRATIVE SECTION ----- */
.name-section { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.name-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 320px at 50% 0%, rgba(0,255,148,0.06), transparent 70%),
    radial-gradient(500px 280px at 50% 100%, rgba(0,255,148,0.04), transparent 70%);
}
.name-section > .container { position: relative; }
.name-mark {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 40px 0 64px;
  font-family: 'General Sans'; font-weight: 600;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 1; letter-spacing: -0.04em;
}
.name-mark .nm-part { color: var(--fg-1); }
.name-mark .nm-glyph { display: inline-flex; align-items: center; transform: translateY(4px); }
@media (max-width: 720px) {
  .name-mark { gap: 14px; margin: 28px 0 44px; }
  .name-mark .nm-glyph svg { width: 32px; height: 32px; }
}
.name-narrative { max-width: 720px; margin: 0 auto; color: var(--fg-2); font-size: 17px; line-height: 1.72; }
.name-narrative p { margin: 0 0 18px; }
.name-narrative .lede { color: var(--fg-1); font-weight: 500; }
.name-narrative .lede .accent { color: var(--accent); font-weight: 600; }
.name-narrative .accent { color: var(--accent); }
.name-narrative em { color: var(--accent); font-style: normal; font-weight: 500; }
.name-narrative .name-cta-line {
  color: var(--fg-1); font-family: 'General Sans'; font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; margin: 30px 0 18px;
}
.name-quote {
  max-width: 720px; margin: 56px auto 8px;
  padding: 26px 30px;
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(0,255,148,0.05), transparent 80%);
  font-family: 'General Sans'; font-size: clamp(22px, 2.6vw, 28px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.3; color: var(--fg-1);
  border-radius: 0 8px 8px 0;
}
.name-quote .nq-mark { color: var(--accent); font-family: 'General Sans'; font-weight: 700; margin-right: 6px; }