/* ═══════════════════════════════════════════
   VCT Platform — Glass Overlay for Sub-pages
   Adds Liquid Glass aesthetic to pitch/docs/diagrams/pricing
   Include AFTER the page's own <style> or CSS
   ═══════════════════════════════════════════ */

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

/* ══ TOKEN BRIDGE — match sub-page vars to Tahoe tokens ══ */
[data-theme="dark"] {
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg2: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.1);
  --glass-border-hover: rgba(255,255,255,0.2);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
  --glass-blur: blur(40px) saturate(180%);
  --glass-glow: rgba(77,166,255,0.15);
  --glass-radius: 20px;
  --glass-radius-sm: 14px;
  --glass-radius-pill: 100px;
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --glass-shadow-hover: 0 16px 48px rgba(0,0,0,0.5), 0 0 30px rgba(77,166,255,0.08);
  --page-bg: #0a0a0f;
  --page-mesh: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(77,166,255,0.06), transparent),
               radial-gradient(ellipse 60% 40% at 80% 90%, rgba(193,119,255,0.04), transparent);
  --nav-bg: rgba(10,10,15,0.75);
  --nav-border: rgba(255,255,255,0.08);
}
[data-theme="light"] {
  --glass-bg: rgba(255,255,255,0.5);
  --glass-bg2: rgba(255,255,255,0.7);
  --glass-border: rgba(0,0,0,0.07);
  --glass-border-hover: rgba(0,0,0,0.14);
  --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, transparent 50%);
  --glass-blur: blur(40px) saturate(180%);
  --glass-glow: rgba(37,99,235,0.1);
  --glass-radius: 20px;
  --glass-radius-sm: 14px;
  --glass-radius-pill: 100px;
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.06);
  --glass-shadow-hover: 0 16px 48px rgba(0,0,0,0.1), 0 0 30px rgba(37,99,235,0.06);
  --page-bg: #f0f2f8;
  --page-mesh: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(37,99,235,0.04), transparent),
               radial-gradient(ellipse 60% 40% at 80% 90%, rgba(147,51,234,0.03), transparent);
  --nav-bg: rgba(255,255,255,0.65);
  --nav-border: rgba(0,0,0,0.06);
}

/* ══ BODY — Glass background mesh ══ */
body {
  background: var(--page-mesh), var(--page-bg) !important;
  transition: background 0.5s ease, color 0.5s ease;
}

/* ══ NAVIGATION — frosted glass overlay ══ */
.site-nav,
nav[style*="position:fixed"] {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  border-radius: 0 !important;
}

/* ══ CARDS — Glass material ══ */
.card,
.stat,
.diagram-section,
.toc,
.flow-diagram,
.interaction-map,
.arch-layer,
.pricing-card,
.roi-box,
.faq-item {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}
.card::before,
.stat::before,
.diagram-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.card:hover,
.stat:hover,
.diagram-section:hover {
  border-color: var(--glass-border-hover) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* ══ TAB BAR — Glass pill row ══ */
.tab-bar {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
}
.tab-btn {
  border-radius: var(--glass-radius-sm) !important;
  transition: all 0.3s ease !important;
}
.tab-btn.active {
  border-radius: var(--glass-radius-pill) !important;
}

/* ══ TABLE — Glass table ══ */
table {
  border-radius: var(--glass-radius-sm);
  overflow: hidden;
}
th {
  background: var(--glass-bg2) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ══ BADGES — Pill shape ══ */
.badge {
  border-radius: var(--glass-radius-pill) !important;
}

/* ══ FLOW — Glass border steps ══ */
.flow-step {
  border-radius: var(--glass-radius-sm) !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.flow-step:hover {
  box-shadow: 0 0 20px var(--glass-glow) !important;
}

/* ══ SWIMLANE — rounded glass ══ */
.swimlane-row:first-child {
  border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
}
.swimlane-row:last-child {
  border-radius: 0 0 var(--glass-radius) var(--glass-radius) !important;
}

/* ══ HERO — glass version badge ══ */
.version,
.hero-imm__version {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--glass-radius-pill) !important;
}

/* ══ FOOTER — glass separator ══ */
.footer,
.site-footer {
  border-top: 1px solid var(--glass-border) !important;
}

/* ══ PRICING — glass cards with shimmer ══ */
.pricing-card {
  position: relative;
  overflow: hidden;
}
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-shine);
  pointer-events: none;
}
.pricing-cta {
  border-radius: var(--glass-radius-pill) !important;
}
.pricing-card--popular {
  border-color: rgba(77,166,255,0.3) !important;
  box-shadow: 0 0 40px rgba(77,166,255,0.08) !important;
}

/* ══ CTA BANNER — glass ══ */
.cta-banner {
  background: var(--glass-bg2) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
}

/* ══ SECTION SEP — frosted ══ */
.section-sep::before,
.section-sep::after,
h2.sep {
  border-color: var(--glass-border) !important;
}

/* ══ ANIMATED GRADIENT BORDER (optional class) ══ */
.glass-glow-border {
  position: relative;
}
.glass-glow-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg),
    rgba(77,166,255,0.4),
    rgba(124,131,255,0.3),
    rgba(193,119,255,0.3),
    rgba(78,220,232,0.3),
    rgba(77,166,255,0.4));
  z-index: -1;
  animation: rotateGradient 4s linear infinite;
  opacity: 0;
  transition: opacity 0.4s;
}
.glass-glow-border:hover::after {
  opacity: 1;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateGradient {
  to { --angle: 360deg; }
}

/* ══ SCROLL REVEAL ══ */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}