/* ============ Archon Dark+Glass Theme ============ */
:root {
  /* Neutral ladder for readable dark UI */
  --c-10: #ffffff;
  /* almost pure white */
  --c-20: #eaf2ff;
  /* light text accents */
  --c-50: #dbe7ff;
  --c-100: #cbd5e1;
  --c-200: #b6c2d9;
  --c-300: #9aa7bc;
  --c-400: #7b889b;
  /* body muted */
  --c-700: #263042;
  --c-800: #19202d;
  --c-850: #121924;
  --c-900: #0b111a;

  /* Brand gradient (sky → cyan) */
  --brand-a: #60a5fa;
  --brand-b: #22d3ee;

  /* Glass + borders */
  --bd: rgba(255, 255, 255, .14);
  --bd-700: rgba(255, 255, 255, .10);
  --blur: 12px;

  /* Surfaces */
  --deck: #0d1420;
  /* section alt bg */
  --deck-2: #0a121c;
  /* footer bg */
  --deck-3: #0f1726;
  /* inputs bg */

  --navh: 72px;
}

/* Utility text tokens */
.text-10 {
  color: var(--c-10) !important
}

.text-20 {
  color: var(--c-20) !important
}

.text-50 {
  color: var(--c-50) !important
}

.text-200 {
  color: var(--c-200) !important
}

.text-300 {
  color: var(--c-300) !important
}

.text-400 {
  color: var(--c-400) !important
}

.border-700 {
  border-color: var(--bd-700) !important
}

.border-800 {
  border-color: #101623 !important
}

/* Base */
html,
body {
  background: #000;
  color: var(--c-200)
}

.pt-nav {
  padding-top: var(--navh)
}


video {
  display: block;
  max-width: 100%;
  height: auto
}

img {
  display: block;
  max-width: 100%;
}

.of-cover {
  object-fit: cover
}

/* Glass layers */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  border: 1px solid var(--bd);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.glass-nav {
  background: linear-gradient(180deg, rgba(8, 12, 20, .75), rgba(8, 12, 20, .55));
  backdrop-filter: saturate(1.1) blur(8px);
}

/* Buttons */
.btn-grad {
  color: #07121f;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  border: none;
  box-shadow: 0 10px 24px rgba(34, 211, 238, .18);
}

.btn-grad:hover {
  filter: brightness(1.06);
  transform: translateY(-1px)
}

.btn-ghost {
  color: var(--c-20);
  background: transparent;
  border: 1px solid var(--bd);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .08)
}

.btn-soft {
  color: var(--c-10);
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--bd);
}

.btn-soft:hover {
  background: rgba(255, 255, 255, .16)
}

/* Links with underglow */
.link-underline {
  color: var(--c-50);
  text-decoration: none;
  position: relative
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s
}

.link-underline:hover {
  color: var(--c-20)
}

.link-underline:hover::after {
  transform: scaleX(1)
}

/* Hero */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease
}

.hero-video.is-active {
  opacity: 1
}

.hero-overlay {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(2, 6, 23, .22), rgba(2, 6, 23, .46)),
    linear-gradient(180deg, rgba(2, 6, 23, .10), rgba(2, 6, 23, .34));
}

.card-hero {
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45)
}

/* Carousel tweaks for dark */
.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  margin: 0 5px;
  background: rgba(255, 255, 255, .35)
}

.carousel-indicators .active {
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  width: 22px
}


/* Stats & tables */
.stat {
  background: linear-gradient(180deg, #0b1220, #121a2b);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.table-head {
  background: linear-gradient(90deg, rgba(96, 165, 250, .25), rgba(34, 211, 238, .25));
  color: #0b1220;
  font-weight: 700;
}

.table>:not(caption)>*>* {
  background: transparent;
  color: var(--c-200)
}

/* Section alt backgrounds */
.bg-deck {
  background: var(--deck)
}

.bg-deck-2 {
  background: var(--deck-2)
}

.bg-deck-3 {
  background: var(--deck-3)
}

/* Hover motion (tasteful scale+raise) */
.hvr-rise {
  transition: transform .25s ease, box-shadow .3s ease;
  will-change: transform
}

.hvr-rise:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35)
}

/* Headings weight */
.fw-extrabold {
  font-weight: 800
}

/* Borders */
.border-700 {
  border-color: rgba(255, 255, 255, .1) !important
}

/* Footer lines */
.border-800 {
  border-color: rgba(255, 255, 255, .06) !important
}




.carousel-indicators {
  bottom: -30px;
}