/* ═══════════════════════════════════════════════════════════════
   TRAXIUM — Homepage (DTC hero + simplified connections graphic)
   Depends on: theme.css → shared.css → styles.css → site-shell.css
═══════════════════════════════════════════════════════════════ */

.home-hero {
  padding: 56px 0 20px;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 40px;
  align-items: center;
}
.home-hero-copy { max-width: 520px; }
.home-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #4CC9F0;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(76,201,240,0.3); background: rgba(76,201,240,0.06);
  margin-bottom: 22px;
}
.home-hero-eyebrow .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #4CC9F0; box-shadow: 0 0 8px rgba(76,201,240,0.8); }
.home-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08; letter-spacing: -0.03em;
  margin: 0 0 20px; color: var(--text-primary);
}
.home-hero-sub { font-size: 17px; line-height: 1.62; color: var(--text-secondary); margin: 0 0 28px; max-width: 500px; }
.home-hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Live connection constellation ── */
.home-connect {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  height: min(640px, 66vh);
  min-height: 560px;
  overflow: hidden;
}
.home-connect .tx-constellation { position: absolute; }

/* Sizing — this widget was designed for a full-width hero; the card is now
   wide/tall enough to show it near full scale, just trimmed slightly. */
.home-connect .tx-node-card { padding: 9px 13px; gap: 9px; border-radius: 12px; }
.home-connect .tx-node-card--center { padding: 16px 22px; min-width: 190px; border-radius: 16px; }
.home-connect .tx-node-card img { width: 20px; height: 20px; }
.home-connect .tx-node-icon,
.home-connect .tx-carrier-logo { width: 25px; height: 25px; border-radius: 7px; }
.home-connect .tx-node-icon svg,
.home-connect .tx-carrier-logo svg { width: 15px; height: 15px; }
.home-connect .tx-carrier-logo { font-size: 0.54rem; }
.home-connect .tx-node-name { font-size: 0.72rem; }
.home-connect .tx-node-status { font-size: 0.58rem; }
.home-connect .tx-node-eyebrow { font-size: 0.58rem; }
.home-connect .tx-node-title { font-size: 1.1rem; }
.home-connect .tx-node-sub { font-size: 0.66rem; gap: 6px; }

/* Repositioned nodes — spread to fill the taller/wider box, clear of edges */
.home-connect .tx-node--tl { --x: 15%; --y: 20%; }
.home-connect .tx-node--t1 { --x: 39%; --y: 7%; }
.home-connect .tx-node--t2 { --x: 65%; --y: 7%; }
.home-connect .tx-node--tr { --x: 89%; --y: 20%; }
.home-connect .tx-node--bl { --x: 7%; --y: 84%; }
.home-connect .tx-node--r1 { --x: 89%; --y: 62%; }
.home-connect .tx-node--r2 { --x: 93%; --y: 82%; }
.home-connect .tx-node--r3 { --x: 63%; --y: 95%; }
.home-connect .tx-ribbon--tl { top: 18px; left: 18px; }
.home-connect .tx-ribbon--br { bottom: 18px; right: 18px; }

/* ── Brief overview strip ── */
.home-overview { padding: 64px 0; }
.home-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-copy { max-width: none; }
  .home-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* tx-constellation hides itself here; collapse the empty card too */
  .home-connect { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERITAGE LIGHT — Landing-page-only vision treatment
   The scoped selector deliberately leaves the shared shell and every
   non-home surface untouched. Structure, routes, and constellation
   animation remain unchanged.
═══════════════════════════════════════════════════════════════ */
.home-vision {
  --heritage-cream: #f7f0df;
  --heritage-panel: #fffaf0;
  --heritage-green: #50604d;
  --heritage-olive: #697451;
  --heritage-burgundy: #5c2117;
  --heritage-coral: #b45140;
  --heritage-line: #9b796b;
  background: var(--heritage-cream);
  color: var(--heritage-burgundy);
}

.home-vision .site-sidebar {
  background: var(--heritage-green);
  border-color: rgba(255, 250, 240, 0.16);
}
.home-vision .site-sidebar-logo,
.home-vision .site-sidebar-footer { border-color: rgba(255, 250, 240, 0.16); }
.home-vision .site-sidebar .tx-logo-word {
  background: none;
  color: #fff8e9;
  -webkit-text-fill-color: currentColor;
}
.home-vision .site-sidebar .tx-logo-sub,
.home-vision .site-sidebar-tagline { color: rgba(255, 248, 233, 0.70); }
.home-vision .site-nav-item { color: rgba(255, 248, 233, 0.84); }
.home-vision .site-nav-item:hover {
  background: rgba(255, 248, 233, 0.10);
  color: #fff8e9;
}
.home-vision .site-nav-item.active {
  background: #848b62;
  color: #fff8e9;
  border-color: rgba(255, 248, 233, 0.12);
  box-shadow: none;
}
.home-vision .theme-toggle-btn {
  background: rgba(255, 248, 233, 0.10);
  border-color: rgba(255, 248, 233, 0.26);
  color: #fff8e9;
  box-shadow: none;
}
.home-vision .theme-toggle-btn:hover { background: rgba(255, 248, 233, 0.18); }

.home-vision .site-main,
.home-vision .site-scroll { background: var(--heritage-cream); }
.home-vision .site-topbar {
  background: rgba(255, 250, 240, 0.88);
  border-color: rgba(92, 33, 23, 0.10);
}
.home-vision .site-topbar .btn-ghost-sm {
  background: var(--heritage-olive) !important;
  border-color: transparent !important;
  color: #fff8e9 !important;
  box-shadow: none !important;
}
.home-vision .site-topbar .btn-cyan-sm {
  background: var(--heritage-coral) !important;
  color: #fff8e9 !important;
  box-shadow: none !important;
}
.home-vision .site-topbar .btn-ghost-sm:hover,
.home-vision .site-topbar .btn-cyan-sm:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}
.home-vision .site-shell-toggle {
  background: var(--heritage-panel);
  border-color: rgba(92, 33, 23, 0.16);
}
.home-vision .site-shell-toggle span { background: var(--heritage-burgundy); }

.home-vision .home-hero { padding-top: 40px; }
.home-vision .home-hero-eyebrow {
  color: var(--heritage-burgundy);
  background: #eee3c9;
  border-color: rgba(92, 33, 23, 0.14);
}
.home-vision .home-hero-eyebrow .badge-dot {
  background: var(--heritage-burgundy);
  box-shadow: none;
}
.home-vision .home-hero-title,
.home-vision .section-title,
.home-vision .cta-headline,
.home-vision .diff-title { color: var(--heritage-burgundy) !important; }
.home-vision .gradient-text {
  background: none;
  color: var(--heritage-burgundy);
  -webkit-text-fill-color: currentColor;
}
.home-vision .home-hero-sub,
.home-vision .section-subtitle,
.home-vision .cta-sub,
.home-vision .diff-desc { color: #714234 !important; }

.home-vision .btn-cyan {
  background: var(--heritage-coral) !important;
  color: #fff8e9 !important;
  border-color: transparent !important;
  box-shadow: 0 7px 16px rgba(151, 68, 47, 0.17) !important;
}
.home-vision .btn-ghost {
  background: var(--heritage-green) !important;
  color: #fff8e9 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.home-vision .btn-cyan:hover,
.home-vision .btn-ghost:hover {
  opacity: 1;
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.home-vision .home-connect {
  background: var(--heritage-panel);
  border-color: rgba(92, 33, 23, 0.10);
  box-shadow: 0 10px 26px rgba(92, 33, 23, 0.05);
}
.home-vision .tx-constellation-svg > circle:first-of-type {
  fill: #c6c99d;
  opacity: 0.26;
}
.home-vision #tx-line-cyan stop,
.home-vision #tx-line-purple stop,
.home-vision #tx-line-gold stop { stop-color: var(--heritage-line); }
.home-vision .tx-line { opacity: 0.78; stroke-width: 1.35; }
.home-vision .tx-packet,
.home-vision .tx-packet--purple,
.home-vision .tx-packet--gold {
  fill: var(--heritage-coral);
  filter: none;
}
.home-vision .tx-node-card {
  background: #fff8ea;
  border-color: rgba(92, 33, 23, 0.12);
  color: var(--heritage-burgundy);
  box-shadow: 0 4px 12px rgba(92, 33, 23, 0.10);
}
.home-vision .tx-node-card:hover {
  border-color: rgba(92, 33, 23, 0.26);
  box-shadow: 0 8px 18px rgba(92, 33, 23, 0.14);
}
.home-vision .tx-node-status { color: #806253; }
.home-vision .tx-node-card--center {
  background: #7e895f;
  border-color: #aeb486;
  box-shadow: 0 14px 28px rgba(74, 85, 51, 0.20), 0 0 0 6px rgba(126, 137, 95, 0.10);
}
.home-vision .tx-node-card--center::before {
  background: radial-gradient(ellipse at center, rgba(126, 137, 95, 0.30), transparent 70%);
}
.home-vision .tx-node-card--center .tx-node-eyebrow,
.home-vision .tx-node-card--center .tx-node-title,
.home-vision .tx-node-card--center .tx-node-sub { color: #fff8e9; }
.home-vision .tx-node-icon--purple {
  background: #645b7a;
  border-color: transparent;
  color: #fff8e9;
}
.home-vision .tx-carrier-logo { background: #f2ead9; border-color: rgba(92, 33, 23, 0.10); }
.home-vision .tx-ribbon {
  background: rgba(255, 250, 240, 0.94);
  border-color: rgba(92, 33, 23, 0.10);
  color: #806253;
  box-shadow: 0 3px 10px rgba(92, 33, 23, 0.05);
}
.home-vision .tx-ribbon span {
  background: none;
  color: var(--heritage-coral);
  -webkit-text-fill-color: currentColor;
}

.home-vision .home-overview { background: #f4ecd9; }
.home-vision .diff-card {
  background: var(--heritage-panel) !important;
  border-color: rgba(92, 33, 23, 0.10) !important;
  box-shadow: 0 4px 14px rgba(92, 33, 23, 0.05) !important;
}
.home-vision .section-cta {
  background: #eee4cf !important;
  border-color: rgba(92, 33, 23, 0.10);
}
.home-vision .cta-glow {
  background: radial-gradient(ellipse, rgba(232, 120, 95, 0.13) 0%, rgba(129, 138, 97, 0.10) 48%, transparent 74%);
}
.home-vision .footer {
  background: #f7f0df !important;
  border-color: rgba(92, 33, 23, 0.10);
}
.home-vision .footer .tx-logo-word {
  background: none;
  color: var(--heritage-burgundy);
  -webkit-text-fill-color: currentColor;
}
.home-vision .footer .tx-logo-sub,
.home-vision .footer-tagline,
.home-vision .footer-heading,
.home-vision .footer-link,
.home-vision .footer-bottom { color: #806253 !important; }
.home-vision .footer-link:hover { color: var(--heritage-burgundy) !important; }

.home-vision a:focus-visible,
.home-vision button:focus-visible {
  outline: 3px solid rgba(232, 120, 95, 0.52);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .home-vision .site-sidebar { box-shadow: 0 24px 48px rgba(52, 59, 39, 0.24); }
  .home-vision.site-nav-open::after { background: rgba(61, 51, 37, 0.42); }
}

/* ── DARK MODE: restore the shared dark palette over the heritage skin ── */
:root[data-theme="dark"] .home-vision {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .site-sidebar,
:root[data-theme="dark"] .home-vision .site-sidebar-logo,
:root[data-theme="dark"] .home-vision .site-sidebar-footer {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .home-vision .site-sidebar .tx-logo-word,
:root[data-theme="dark"] .home-vision .site-sidebar .tx-logo-sub,
:root[data-theme="dark"] .home-vision .site-sidebar-tagline,
:root[data-theme="dark"] .home-vision .site-nav-item {
  color: var(--text-secondary) !important;
}
:root[data-theme="dark"] .home-vision .site-sidebar .tx-logo-word,
:root[data-theme="dark"] .home-vision .site-nav-item.active {
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .site-nav-item:hover,
:root[data-theme="dark"] .home-vision .site-nav-item.active {
  background: var(--bg-4) !important;
  border-color: var(--border-cyan) !important;
}
:root[data-theme="dark"] .home-vision .theme-toggle-btn {
  background: var(--glass) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .site-main,
:root[data-theme="dark"] .home-vision .site-scroll,
:root[data-theme="dark"] .home-vision .home-overview,
:root[data-theme="dark"] .home-vision .footer {
  background: var(--bg) !important;
}
:root[data-theme="dark"] .home-vision .site-topbar {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .home-vision .site-topbar .btn-ghost-sm,
:root[data-theme="dark"] .home-vision .site-topbar .btn-cyan-sm,
:root[data-theme="dark"] .home-vision .btn-ghost {
  background: var(--bg-4) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .site-topbar .btn-cyan-sm,
:root[data-theme="dark"] .home-vision .btn-cyan {
  background: var(--grad-cta) !important;
  border-color: transparent !important;
  color: #fff !important;
}
:root[data-theme="dark"] .home-vision .home-hero-eyebrow {
  background: var(--primary-soft) !important;
  border-color: var(--border-cyan) !important;
  color: var(--primary) !important;
}
:root[data-theme="dark"] .home-vision .home-hero-title,
:root[data-theme="dark"] .home-vision .section-title,
:root[data-theme="dark"] .home-vision .cta-headline,
:root[data-theme="dark"] .home-vision .diff-title {
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .gradient-text {
  background: var(--grad-brand) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
:root[data-theme="dark"] .home-vision .home-hero-sub,
:root[data-theme="dark"] .home-vision .section-subtitle,
:root[data-theme="dark"] .home-vision .cta-sub,
:root[data-theme="dark"] .home-vision .diff-desc {
  color: var(--text-secondary) !important;
}
:root[data-theme="dark"] .home-vision .home-connect,
:root[data-theme="dark"] .home-vision .diff-card,
:root[data-theme="dark"] .home-vision .section-cta {
  background: var(--bg-3) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}
:root[data-theme="dark"] .home-vision .tx-constellation-svg > circle:first-of-type {
  fill: url(#tx-core-glow) !important;
  opacity: 0.85 !important;
}
:root[data-theme="dark"] .home-vision #tx-line-cyan stop,
:root[data-theme="dark"] .home-vision #tx-line-purple stop,
:root[data-theme="dark"] .home-vision #tx-line-gold stop {
  stop-color: var(--primary) !important;
}
:root[data-theme="dark"] .home-vision .tx-packet,
:root[data-theme="dark"] .home-vision .tx-packet--purple,
:root[data-theme="dark"] .home-vision .tx-packet--gold {
  fill: var(--primary) !important;
  filter: drop-shadow(0 0 5px var(--primary)) !important;
}
:root[data-theme="dark"] .home-vision .tx-node-card,
:root[data-theme="dark"] .home-vision .tx-ribbon {
  background: var(--bg-3) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
}
:root[data-theme="dark"] .home-vision .tx-node-card--center {
  background: linear-gradient(135deg, var(--bg-4), var(--bg-3)) !important;
  border-color: var(--border-cyan) !important;
}
:root[data-theme="dark"] .home-vision .tx-node-card--center .tx-node-eyebrow,
:root[data-theme="dark"] .home-vision .tx-node-card--center .tx-node-title,
:root[data-theme="dark"] .home-vision .tx-node-card--center .tx-node-sub {
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision .tx-node-status,
:root[data-theme="dark"] .home-vision .footer .tx-logo-sub,
:root[data-theme="dark"] .home-vision .footer-tagline,
:root[data-theme="dark"] .home-vision .footer-heading,
:root[data-theme="dark"] .home-vision .footer-link,
:root[data-theme="dark"] .home-vision .footer-bottom {
  color: var(--text-muted) !important;
}
:root[data-theme="dark"] .home-vision .footer .tx-logo-word,
:root[data-theme="dark"] .home-vision .footer-link:hover {
  color: var(--text-primary) !important;
}
:root[data-theme="dark"] .home-vision a:focus-visible,
:root[data-theme="dark"] .home-vision button:focus-visible {
  outline-color: var(--primary) !important;
}

@media (max-width: 1024px) {
  :root[data-theme="dark"] .home-vision .site-sidebar { box-shadow: var(--shadow-lift) !important; }
  :root[data-theme="dark"] .home-vision.site-nav-open::after { background: rgba(4, 10, 20, 0.70) !important; }
}