/* Big centered brand icon above the card title ----------------------------- */
.feature-tiles .sd-card-title i[class*="vast-"] {
  display: block;
  font-size: 2.9em;
  line-height: 1;
  margin: 0.15em auto 0.4em;
  color: var(--vast-cyan);
  vertical-align: middle;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.feature-tiles .sd-card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The card itself — rounder, lifts and glows the icon on hover -------------- */
.feature-tiles .sd-card {
  border-radius: 16px;
  height: 100%;
}

.feature-tiles .sd-card:hover .sd-card-title i[class*="vast-"] {
  transform: translateY(-2px) scale(1.06);
}

/* Dark mode — give the icon the website's cyan glow ------------------------ */
body[data-theme="dark"] .feature-tiles .sd-card-title i[class*="vast-"] {
  filter: drop-shadow(0 0 14px rgba(31, 217, 254, 0.40));
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .feature-tiles .sd-card-title i[class*="vast-"] {
    filter: drop-shadow(0 0 14px rgba(31, 217, 254, 0.40));
  }
}

/* Slightly smaller on phones so three tiles still breathe ------------------- */
@media (max-width: 40em) {
  .feature-tiles .sd-card-title i[class*="vast-"] { font-size: 2.4em; }
}

/* --------------------------------------------------------------------------
   Tab covers — give the images in the capability tab-set a consistent,
   branded frame and a subtle zoom on hover (pairs with .about-cover).
   -------------------------------------------------------------------------- */
.tab-content img.about-cover {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}

.tab-content img.about-cover:hover {
  transform: scale(1.01);
  box-shadow: 0 16px 40px rgba(3, 20, 44, 0.16);
}

body[data-theme="dark"] .tab-content img.about-cover:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 26px rgba(31, 217, 254, 0.18);
}

/* Lead line that introduces each tab (bold, brand-tinted) ------------------- */
.tab-lead {
  display: block;
  font-family: var(--vast-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vast-cyan-dim);
  margin: 0.2rem 0 0.6rem;
}

body[data-theme="dark"] .tab-lead { color: var(--vast-cyan); }

/* --------------------------------------------------------------------------
   Stat band — the KPI strip on the statistics page (real numbers).
   -------------------------------------------------------------------------- */
.vob-statband {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 1.2rem 0 1.6rem;
}

.vob-stat {
  flex: 1 1 150px;
  text-align: center;
  padding: 18px 14px;
  border-radius: 14px;
  border: 1px solid var(--vast-gray-mid);
  background: linear-gradient(160deg, rgba(31, 217, 254, 0.06), rgba(3, 20, 44, 0));
}

.vob-stat .num {
  display: block;
  font-family: var(--vast-font-display);
  font-size: 2.0rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--vast-cyan-dim);
}

.vob-stat .lab {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--color-foreground-secondary, #5b6470);
}

body[data-theme="dark"] .vob-stat {
  border-color: var(--vast-line);
  background: linear-gradient(160deg, rgba(31, 217, 254, 0.10), rgba(3, 20, 44, 0));
}

body[data-theme="dark"] .vob-stat .num { color: var(--vast-cyan); }

/* ==========================================================================
   HERO BANNER — logo + slogan centered over a darkened cover image,
   with the call-to-action buttons centered just below.
   Markup: index.rst .vob-hero  >  .vob-hero__bg (image) + .vob-hero__inner
   (the logo comes from logo_include.rst; .vob-hero__tagline is the slogan).
   ========================================================================== */

.vob-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 360px;
  margin: 0.5rem 0 1.5rem;
  margin-top: 70px;
  margin-bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.25rem 1.5rem;
  background: var(--vast-navy, #0b1f33);
}

/* The cover image, darkened so the logo/slogan read clearly and it looks pro */
.vob-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.3) saturate(2.05);
  transform: scale(1.02);   /* hides edge seams from the blur/scale */
}

.vob-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

/* Logo always rendered in its light variant on top of the dark cover,
   regardless of the active site theme. */
.vob-hero .vorbit-hero { margin: 0; }
.vob-hero .vorbit-logo {
  width: 120%;
  max-width: 700px;
  filter: drop-shadow(0 0 32px rgba(31, 217, 254, 0.30));
}
.vob-hero .vorbit-art  { fill: var(--vast-white, #ffffff) !important; }
.vob-hero .vorbit-mark { fill: #FAF7F7 !important; }

/* Hover/focus: the whole mark turns VAST Cyan (wins over the white fills).
   Triggers on the logo SVG itself AND on a .vorbit-logo-link wrapper if one
   exists, so it works no matter how logo_include.rst is structured. */
.vob-hero .vorbit-logo:hover .vorbit-art,
.vob-hero .vorbit-logo:hover .vorbit-mark,
.vob-hero .vorbit-logo:focus-within .vorbit-art,
.vob-hero .vorbit-logo:focus-within .vorbit-mark,
.vob-hero .vorbit-logo-link:hover .vorbit-art,
.vob-hero .vorbit-logo-link:hover .vorbit-mark,
.vob-hero .vorbit-logo-link:focus-visible .vorbit-art,
.vob-hero .vorbit-logo-link:focus-visible .vorbit-mark,
.vob-hero a:hover .vorbit-art,
.vob-hero a:hover .vorbit-mark {
  fill: var(--vast-cyan, #1FD9FE) !important;
}
.vob-hero .vorbit-logo:hover,
.vob-hero .vorbit-logo-link:hover .vorbit-logo,
.vob-hero a:hover .vorbit-logo {
  filter: drop-shadow(0 0 26px rgba(31, 217, 254, 0.50)) !important;
}

.vob-hero__tagline {
  margin: 1.1rem auto 0;
  max-width: 680px;
  font-family: var(--vast-font-display, inherit);
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* Call-to-action buttons, centered as one row under the hero */
.vob-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem auto 0;
}
.vob-hero-cta p { margin: 0; }
.vob-hero-cta .sd-btn { min-width: 240px; justify-content: center; }

@media (max-width: 600px) {
  .vob-hero { min-height: 280px; padding: 2.25rem 1rem; }
  .vob-hero__tagline { font-size: 1.15rem; }
  .vob-hero .vorbit-logo { width: 100%; }
}
/* ==========================================================================
   "Start Learning" CTA — light-blue (VAST cyan) brand button under a card grid
   Markup: .. container:: vob-learn-cta  >  .. button-ref:: ... :class: vob-learn-btn
   ========================================================================== */
.vob-learn-cta { text-align: center; margin: 1.75rem 0 0.5rem; }

.vob-learn-cta a.sd-btn,
a.vob-learn-btn.sd-btn {
  background: var(--vast-cyan, #1FD9FE) !important;
  border: 1px solid var(--vast-cyan, #1FD9FE) !important;
  color: var(--vast-navy, #03142C) !important;
  font-family: var(--vast-font-display, inherit);
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 260px;
  padding: 0.7rem 1.6rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.vob-learn-cta a.sd-btn:hover,
a.vob-learn-btn.sd-btn:hover {
  background: var(--vast-cyan-dim, #15A8C7) !important;
  transform: translateY(-2px);
  box-shadow: var(--vast-glow, 0 0 24px rgba(31, 217, 254, 0.35)) !important;
}
body[data-theme="dark"] .vob-learn-cta a.sd-btn,
body[data-theme="dark"] a.vob-learn-btn.sd-btn {
  color: var(--vast-navy, #03142C) !important;   /* dark text stays readable on cyan */
}

.vob-video {
  position: relative; width: 100%; max-width: 920px;
  margin: 1.75rem auto 2rem; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: var(--vast-navy, #03142C);
  box-shadow: 0 18px 50px rgba(3, 20, 44, 0.28);
}
.vob-video video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block; }
body[data-theme="dark"] .vob-video {
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 30px rgba(31,217,254,0.18); }