/* investors.html — page-level dark theme + component styles
   Mirrors the ai-one.html dark design system without importing ai-one.css
   (which has conflicting :root overrides). Scoped with
   body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) where isolation is needed. */

/* ── CSS vars ─────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) {
  --inv-bg:            #070816;
  --inv-bg-2:          #0b1024;
  --inv-panel:         rgba(255,255,255,0.065);
  --inv-panel-2:       rgba(255,255,255,0.095);
  --inv-panel-border:  rgba(255,255,255,0.14);
  --inv-text:          #f7f8ff;
  --inv-muted:         #b6bfd9;
  --inv-radius:        26px;
  --inv-brand:         #8c5cff;
  --inv-brand-2:       #34d5ff;
  --inv-brand-3:       #20f0a0;
  --inv-danger:        #ff5c93;
  --inv-shadow:        0 24px 80px rgba(0,0,0,0.42);
  --inv-max:           1180px;
}

/* ── Dark body ────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) {
  background:
    radial-gradient(circle at 18% 0%, rgba(140,92,255,0.22), transparent 36%),
    radial-gradient(circle at 82% 8%,  rgba(52,213,255,0.14), transparent 34%),
    linear-gradient(180deg, #060715 0%, #0b1024 44%, #070816 100%);
  color: var(--inv-text);
  overflow-x: hidden;
}

/* ── Typography overrides (light text on dark bg) ────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h1,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h2,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h3,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h4,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h5,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) h6 {
  color: var(--inv-text) !important;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) p {
  color: var(--inv-muted);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) p.lead {
  color: var(--inv-text);
  font-size: 1.125rem;
  line-height: 1.7;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) strong {
  color: var(--inv-text);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .muted {
  color: var(--inv-muted) !important;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .eyebrow {
  color: var(--inv-brand-2);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .dot {
  background: var(--inv-brand-2);
}

/* ── Navbar (dark glass) ──────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .navbar {
  background: rgba(7,8,22,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .nav-link,
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .nav-brand {
  color: var(--inv-text) !important;
}

/* ── Section layout: centred, max-width ──────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section {
  width: min(var(--inv-max), calc(100% - 40px));
  margin: 0 auto;
  padding: 94px 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .hero {
  background: transparent;  /* override styles.css white gradient */
  min-height: unset;
  display: block;
  padding: 100px 0 60px;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .hero-content {
  /* inherit dark card from styles.css (.hero-content glass card) */
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 52px 56px;
  position: relative;
  z-index: 2;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .trust-chip {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--inv-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

/* ── Grid utilities ───────────────────────────────────────────────────────── */
.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ── Card (dark panel) ────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .card {
  border: 1px solid var(--inv-panel-border);
  background: var(--inv-panel);
  border-radius: var(--inv-radius);
  padding: 26px;
  box-shadow: 0 14px 54px rgba(0,0,0,0.20);
  min-height: 100%;
  overflow: hidden;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .card:hover {
  background: var(--inv-panel-2);
  border-color: rgba(255,255,255,0.22);
  transform: none;
  box-shadow: 0 14px 54px rgba(0,0,0,0.30);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .card:hover::before { opacity: 0; }

/* ── Icon box ─────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(140,92,255,0.30), rgba(52,213,255,0.16));
  margin-bottom: 20px;
  font-size: 22px;
}

/* ── section-head ─────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 34px;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section-head .muted {
  max-width: 760px;
  margin-bottom: 0;
}

/* ── problem-band ─────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .problem-band {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 34px;
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(255,92,147,0.10), transparent 40%),
    rgba(255,255,255,0.04);
}

/* ── Flow steps ───────────────────────────────────────────────────────────── */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  padding: 22px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
  min-height: 170px;
}
.flow-step::before {
  counter-increment: flow;
  content: "0" counter(flow);
  display: inline-flex;
  color: #34d5ff;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 18px;
}
.flow-step h3 { font-size: 18px; margin: 0 0 8px; }
.flow-step p  { color: #b6bfd9; font-size: 14px; line-height: 1.55; margin: 0; }

/* ── Comparison (2-col) ───────────────────────────────────────────────────── */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.compare-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
}
.compare-list li {
  padding-left: 30px;
  position: relative;
  color: #b6bfd9;
  line-height: 1.55;
}
.compare-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}
.bad  li::before { content: "×"; color: #ff5c93; }
.good li::before { content: "✓"; color: #20f0a0; }

/* ── Use-case card (numbers/roadmap) ─────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .use-case {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: start;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .use-number {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #34d5ff;
  font-weight: 900;
  font-size: 22px;
}

/* ── FAQ accordion ────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 14px; }
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) details {
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  padding: 20px 22px;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--inv-text);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) details p {
  margin: 16px 0 0;
  color: var(--inv-muted);
  line-height: 1.65;
}

/* ── CTA panel ────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .cta-panel {
  text-align: center;
  padding: 70px 34px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(circle at 28% 0%, rgba(140,92,255,0.34), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(52,213,255,0.22), transparent 36%),
    rgba(255,255,255,0.055);
  box-shadow: var(--inv-shadow);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .cta-panel .lead {
  margin-inline: auto;
  max-width: 640px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .btn {
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--inv-text);
  background: rgba(255,255,255,0.07);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.30);
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .btn-primary {
  background: linear-gradient(135deg, var(--inv-brand), #6b3fcf);
  border-color: transparent;
  color: #fff;
}
body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .btn-primary:hover {
  background: linear-gradient(135deg, #9d6fff, var(--inv-brand));
}

/* ── Market data: metrics + charts ───────────────────────────────────────── */

/* Metric cards row */
.mkt-metrics { margin-bottom: 32px; }
.mkt-metric {
  background: var(--inv-panel);
  border: 1px solid var(--inv-panel-border);
  border-radius: 22px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-value {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mkt-metrics .mkt-metric:nth-child(1) .mkt-value { color: #34d5ff; }
.mkt-metrics .mkt-metric:nth-child(2) .mkt-value { color: #ff5c93; }
.mkt-metrics .mkt-metric:nth-child(3) .mkt-value { color: #ffc857; }
.mkt-metrics .mkt-metric:nth-child(4) .mkt-value { color: #20f0a0; }
.mkt-label {
  font-size: 0.85rem;
  color: var(--inv-text);
  line-height: 1.5;
}
.mkt-source {
  font-size: 0.72rem;
  color: var(--inv-muted);
  margin-top: 4px;
  opacity: 0.7;
}

/* Charts row */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.chart-card {
  background: var(--inv-panel);
  border: 1px solid var(--inv-panel-border);
  border-radius: 26px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chart-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--inv-text);
}
.chart-subtitle {
  font-size: 0.75rem;
  color: var(--inv-muted);
  margin-bottom: 20px;
}
.chart-note {
  font-size: 0.7rem;
  color: var(--inv-muted);
  opacity: 0.6;
  margin-top: 12px;
}

/* Vertical bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 180px;
  flex: 1;
}
.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.bar-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  transition: height 0.6s ease;
}
.bar--2024 { height: 51%; background: #8c5cff; }
.bar--2026 { height: 63%; background: #7a52ee; }
.bar--2028 { height: 79%; background: #5a3fd8; }
.bar--2030 { height: 100%; background: linear-gradient(180deg, #34d5ff, #8c5cff); }
.bar-label-year {
  font-size: 0.75rem;
  color: var(--inv-muted);
  font-weight: 600;
}
.bar-label-val {
  font-size: 0.72rem;
  color: var(--inv-text);
  font-weight: 700;
}

/* Horizontal bar chart */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.hbar-row {
  display: grid;
  grid-template-columns: 130px 1fr 52px;
  align-items: center;
  gap: 12px;
}
.hbar-label {
  font-size: 0.78rem;
  color: var(--inv-muted);
  line-height: 1.4;
}
.hbar-label small { font-size: 0.68rem; opacity: 0.7; }
.hbar-track {
  height: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5a3fd8, #8c5cff);
}
.hbar-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--inv-text);
  text-align: right;
}
/* Per-row widths and colors */
.hbar-ai    .hbar-fill { width: 100%; background: linear-gradient(90deg, #8c5cff, #34d5ff); }
.hbar-saas  .hbar-fill { width:  44%; background: linear-gradient(90deg, #5a3fd8, #8c5cff); }
.hbar-esw   .hbar-fill { width:  40%; background: linear-gradient(90deg, #3d2faa, #6b52d8); }
.hbar-it    .hbar-fill { width:  29%; background: linear-gradient(90deg, #2a1f7a, #4a3aa8); }
.hbar-agi   .hbar-fill { width: 100%; background: linear-gradient(90deg, #20f0a0, #34d5ff); }
.hbar-row--highlight .hbar-label { color: var(--inv-text); font-weight: 600; }
.hbar-row--highlight .hbar-val   { color: #20f0a0; }
.hbar-row--highlight .hbar-track {
  background: rgba(32,240,160,0.12);
  height: 12px;
}

/* ── Vision / foundation narrative ───────────────────────────────────────── */
.vision-prose {
  display: grid;
  gap: 18px;
}
.vision-prose p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0;
}
.vision-prose .vision-assumption,
.vision-prose .vision-kicker {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--inv-text);
}
.vision-prose .vision-kicker {
  background: linear-gradient(120deg, var(--inv-brand-3), var(--inv-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vision-prose .vision-closer {
  margin-top: 8px;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1px solid rgba(32,240,160,0.22);
  background: linear-gradient(135deg, rgba(140,92,255,0.12), rgba(52,213,255,0.06));
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--inv-text);
  line-height: 1.6;
}

/* ── Execution gap callout ───────────────────────────────────────────────── */
.exec-gap {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: center;
  padding: 32px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(32,240,160,0.10), rgba(52,213,255,0.05));
  border: 1px solid rgba(32,240,160,0.22);
}
.exec-gap-stat { text-align: center; }
.exec-gap-num {
  font-size: 4.2rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(120deg, #20f0a0, #34d5ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.exec-gap-cap { font-size: 0.85rem; color: var(--inv-muted); margin-top: 10px; line-height: 1.5; }
.exec-gap-body h3 { font-size: 1.3rem; margin: 0 0 10px; color: var(--inv-text); }
.exec-gap-body p { margin: 0; }
.exec-gap-body strong { color: var(--inv-text); }
.exec-gap-src { font-size: 0.72rem; color: var(--inv-muted); opacity: 0.7; margin-top: 12px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .comparison  { grid-template-columns: 1fr; }
  .charts-row  { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section-head { display: block; }
  body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section {
    width: min(var(--inv-max), calc(100% - 28px));
    padding: 70px 0;
  }
}

@media (max-width: 880px) {
  .exec-gap { grid-template-columns: 1fr; text-align: center; gap: 18px; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .flow { grid-template-columns: 1fr; }
  .hbar-row { grid-template-columns: 100px 1fr 44px; }
  body:is([data-marketing-shell="investors"], [data-marketing-shell="team"]) .section { padding: 56px 0; }
}