/*
  Raft AI Superset — Dark Theme Override
  Layered on top of raft-styles.css
*/

/* ── DARK TOKENS ─────────────────────────────────────────── */
:root {
  --bg: #07080f;
  --surface: #0e1117;
  --surface-2: #141820;
  --surface-3: #1a2230;
  --hero-bg: #0a0e1a;
  --text: #eef2ff;
  --text-strong: #ffffff;
  --muted: rgba(220, 228, 255, 0.58);
  --faint: rgba(220, 228, 255, 0.32);
  --line: rgba(255, 255, 255, 0.09);
  --hero-line: rgba(0, 195, 255, 0.15);
  --soft-blue: rgba(0, 195, 255, 0.12);
  --shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 18px 56px rgba(0, 0, 0, 0.55);
}

/* ── PAGE ────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  background: rgba(7, 8, 15, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
.topbar.solid {
  background: rgba(7, 8, 15, 0.96) !important;
}
.brand {
  color: var(--text) !important;
}
.nav-a {
  color: var(--muted) !important;
}
.nav-a:hover,
.nav-a.act {
  color: var(--text) !important;
}
.nav-dd-menu {
  background: #141820 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
.nav-dd-menu a {
  color: var(--muted) !important;
}
.nav-dd-menu a:hover,
.nav-dd-menu a.act {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ── MOBILE NAV ──────────────────────────────────────────── */
.mobile-nav {
  background: #0e1117 !important;
  border-left-color: rgba(255, 255, 255, 0.07) !important;
}
.m-link,
.m-sub {
  color: var(--muted) !important;
}
.m-link.act,
.m-sub.act {
  color: var(--text) !important;
}
.m-close {
  color: var(--muted) !important;
}
.hamburger span {
  background: var(--text) !important;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, #0a0c1a 0%, #07080f 100%) !important;
}
.hero-wrap {
  background: linear-gradient(180deg, #0e1020, #0a0e1a) !important;
  border-color: rgba(0, 195, 255, 0.12) !important;
}
.h1-static {
  color: var(--text) !important;
}
.rot-word {
  color: #00c3ff !important;
}
.hero-lead {
  color: var(--muted) !important;
}
.hero-pill {
  background: rgba(0, 195, 255, 0.12) !important;
  color: #00c3ff !important;
  border-color: rgba(0, 195, 255, 0.22) !important;
}
/* Hero screen mock */
.hero .screen,
.visual .screen {
  background: linear-gradient(180deg, #0e1525, #0a1020) !important;
  border-color: rgba(0, 195, 255, 0.15) !important;
}
.hero .screenHead,
.visual .screenHead {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--muted) !important;
}
.hero .panel,
.visual .panel {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.hero .meta,
.visual .meta {
  color: var(--muted) !important;
}
.hero .bubble,
.visual .bubble {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.hero .aiBubble,
.visual .aiBubble {
  background: rgba(0, 195, 255, 0.12) !important;
  color: #00c3ff !important;
}
.hero .pill,
.visual .pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
}
.hero .pill b {
  color: #00c3ff !important;
}

/* ── SECTION DIVIDERS ────────────────────────────────────── */
.section-divider {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ── ALL SECTIONS ────────────────────────────────────────── */
.section,
.section--white,
.section--soft,
.section--band {
  background: var(--bg) !important;
}
.section-head h2,
.section-head .h2,
h2,
h3 {
  color: var(--text) !important;
}
.section-head p,
.section-head .sub {
  color: var(--muted) !important;
}
.eyebrow {
  color: #00c3ff !important;
  background: rgba(0, 195, 255, 0.1) !important;
  border-color: rgba(0, 195, 255, 0.2) !important;
}

/* ── TRUST / НАМ ДОВЕРЯЮТ ────────────────────────────────── */
.trust-head {
  color: var(--text) !important;
}
.trust-static {
  color: var(--muted) !important;
}
.logo-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.logo-card.act {
  border-color: rgba(0, 195, 255, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(0, 195, 255, 0.2),
    var(--shadow-sm) !important;
}
.logo-mark {
  color: var(--text) !important;
}
.logo-desc {
  color: var(--muted) !important;
}
.client-corner-icon {
  background: rgba(0, 195, 255, 0.1) !important;
  color: #00c3ff !important;
}
.client-logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* ── SERVICES / COMPARE ──────────────────────────────────── */
.compare {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.compare .meta {
  color: var(--muted) !important;
}
.compare h3 {
  color: var(--text) !important;
}
.compare ul li {
  color: var(--muted) !important;
}
.compare ul li::before {
  color: var(--primary) !important;
}

/* ── BENEFIT CARDS ───────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.card h3 {
  color: var(--text) !important;
}
.card p {
  color: var(--muted) !important;
}

/* ── FLOW ────────────────────────────────────────────────── */
.flowCell,
.flow-cell {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* ── RESULTS ─────────────────────────────────────────────── */
.cardPlain,
.card-plain {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.cardPlain h3,
.card-plain h3 {
  color: var(--text) !important;
}
.cardPlain li,
.card-plain li {
  color: var(--muted) !important;
}

/* ── STAGES ──────────────────────────────────────────────── */
.number {
  background: rgba(0, 195, 255, 0.12) !important;
  color: #00c3ff !important;
}

/* ── SOLUTIONS / CHIPS ───────────────────────────────────── */
.chip,
.chipWrap {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
.chip:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.solutionBlock {
  border-color: var(--line) !important;
}
.screen {
  background: linear-gradient(180deg, #0e1525, #0a1020) !important;
  border-color: rgba(0, 195, 255, 0.15) !important;
}
.screenHead {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--muted) !important;
}
.panel {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.solutionItem {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.solutionDivider {
  background: var(--line) !important;
}

/* ── FEATURES TABS ───────────────────────────────────────── */
.tab-nav {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.tab-btn {
  color: var(--muted) !important;
  background: transparent !important;
}
.tab-btn.act {
  background: rgba(47, 107, 255, 0.18) !important;
  color: #fff !important;
}
.tab-btn:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.tab-panel .tab-copy h3 {
  color: var(--text) !important;
}
.tab-panel .tab-copy p {
  color: var(--muted) !important;
}
.link-arrow {
  color: var(--primary) !important;
}
/* TV monitor mock */
.tv {
  background: #0e1525 !important;
  border-color: rgba(0, 195, 255, 0.15) !important;
}
.tv-bar {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.tv-lbl {
  color: var(--muted) !important;
}
.tv-body {
  background: transparent !important;
}
.tv-bubble {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.tv-bubble.ai {
  background: rgba(0, 195, 255, 0.12) !important;
  color: #00c3ff !important;
  border-color: rgba(0, 195, 255, 0.2) !important;
}
.tv-query {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.tv-mini-lbl {
  color: #111 !important;
}
.tv-metric {
  color: #111 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.tv-metric .val {
  color: #111 !important;
}
.tv-tag {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--muted) !important;
}
.tv-tag.warn {
  background: rgba(244, 184, 96, 0.12) !important;
  color: var(--viz-amber) !important;
}
.tv-bar-row {
  background: linear-gradient(
    90deg,
    #5c88ff,
    rgba(92, 136, 255, 0.15)
  ) !important;
}
.tv-schema {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--muted) !important;
}
.tv-schema strong {
  color: var(--text) !important;
}
.tv-log {
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.tv-log .ts {
  color: #111 !important;
}
.tv-log .msg {
  color: #111 !important;
}
.tv-log .ok {
  color: var(--viz-green) !important;
}

/* ── ROLES ───────────────────────────────────────────────── */
.role-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.role-card:hover {
  border-color: rgba(47, 107, 255, 0.3) !important;
}
.role-card-body h3 {
  color: var(--text) !important;
}
.role-card-body p {
  color: var(--muted) !important;
}
.role-icon {
  background: rgba(0, 195, 255, 0.1) !important;
}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.tcard {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.tcard-text {
  color: var(--muted) !important;
}
.tcard-name {
  color: var(--text) !important;
}
.tcard-role {
  color: var(--faint) !important;
}
.tcard-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.tcard-avatar {
  background: rgba(47, 107, 255, 0.2) !important;
  color: var(--primary) !important;
}
.tcard-quote {
  color: var(--primary) !important;
}
.tcarousel-dot {
  background: rgba(255, 255, 255, 0.18) !important;
}
.tcarousel-dot.act {
  background: var(--primary) !important;
}

/* ── CASES ───────────────────────────────────────────────── */
.cases-grid .card,
article.case {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.meta {
  color: var(--faint) !important;
}

/* ── CONTACT ─────────────────────────────────────────────── */
.section--soft {
  background: #0b0d18 !important;
}
.contact-copy h2 {
  color: var(--text) !important;
}
.contact-copy p {
  color: var(--muted) !important;
}
.c-form {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.c-field label {
  color: var(--muted) !important;
}
.c-field input,
.c-field textarea {
  background: var(--surface-2) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
}
.c-field input::placeholder,
.c-field textarea::placeholder {
  color: var(--faint) !important;
}
.c-field input:focus,
.c-field textarea:focus {
  border-color: rgba(47, 107, 255, 0.5) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12) !important;
}
.c-submit {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: #050609 !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}
.footer-inner {
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.footer-brand,
.footer-copy {
  color: var(--muted) !important;
}
.footer-links a {
  color: var(--faint) !important;
}
.footer-links a:hover {
  color: var(--text) !important;
}

/* ── SECONDARY BUTTON ────────────────────────────────────── */
.btn-s {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--text) !important;
}
.btn-s:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ── PLANS ───────────────────────────────────────────────── */
.plan-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.plan-card--featured {
  border-color: rgba(47, 107, 255, 0.5) !important;
  background: rgba(47, 107, 255, 0.07) !important;
}
.plan-name {
  color: #00c3ff !important;
}
.plan-price {
  color: var(--text) !important;
}
.plan-currency {
  color: var(--muted) !important;
}
.plan-period {
  color: var(--faint) !important;
}
.plan-divider {
  background: rgba(255, 255, 255, 0.08) !important;
}
.plan-features li {
  color: var(--muted) !important;
}
.plan-features li::before {
  background-color: rgba(0, 195, 255, 0.08) !important;
  border-color: rgba(0, 195, 255, 0.35) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%2300c3ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.plan-card--featured .plan-features li::before {
  background-color: rgba(0, 195, 255, 0.22) !important;
  border-color: rgba(0, 195, 255, 0.5) !important;
}
.plans-note {
  color: var(--faint) !important;
}

/* ── SKIP LINK ───────────────────────────────────────────── */
.skip-link {
  background: var(--surface) !important;
  color: var(--primary) !important;
}

/* ── SECTION HEADS & EYEBROWS ────────────────────────────── */
.section-head h2.h2 {
  color: var(--text) !important;
}
.section--dark .eyebrow {
  color: #00c3ff !important;
}
.section--dark .h2 {
  color: #fff !important;
}

/* ── ALREADY-DARK SECTIONS stay as-is ───────────────────── */
.section--dark {
  background: #07080f !important;
}
.achievements-dark {
  background: #050609 !important;
}