/* ============================================================
   Cinematic page — re-skin everything after the hero
   so the rest of the page matches the dark/glass feel.
   Layered ON TOP of site.css; overrides selectively.
   ============================================================ */

:root {
  --cin-bg: #0A0A0B;
  --cin-bg-2: #111214;
  --cin-ink: #FFFFFF;
  --cin-ink-2: rgba(255, 255, 255, 0.72);
  --cin-ink-3: rgba(255, 255, 255, 0.55);
  --cin-ink-4: rgba(255, 255, 255, 0.38);
  --cin-line: rgba(255, 255, 255, 0.10);
  --cin-line-2: rgba(255, 255, 255, 0.18);
  --cin-surface: rgba(255, 255, 255, 0.035);
  --cin-surface-2: rgba(255, 255, 255, 0.06);
  --cin-orange: #FF6F00;
  --cin-orange-2: #DF5F00;
}

body {
  background: var(--cin-bg) !important;
  color: var(--cin-ink) !important;
}

/* Section shells */
.section {
  background: var(--cin-bg) !important;
}
.section#how,
.section#faq {
  background: var(--cin-bg-2) !important;
}
.section#post { background: var(--cin-bg) !important; }

/* Section headers */
.sec-head__eyebrow {
  color: var(--cin-ink-3) !important;
}
.sec-head__eyebrow .bar {
  background: var(--cin-orange) !important;
}
.sec-head__title {
  color: var(--cin-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}
.sec-head__title em,
.sec-head__title i {
  color: var(--cin-orange) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.sec-head__lead {
  color: var(--cin-ink-2) !important;
}

/* ============ Stat band ============ */
.band {
  background: var(--cin-bg) !important;
  border-top: 1px solid var(--cin-line) !important;
  border-bottom: 1px solid var(--cin-line) !important;
}
.band__item {
  border-left-color: var(--cin-line) !important;
}
.band__num {
  color: var(--cin-ink) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
}
.band__num em {
  color: var(--cin-orange) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.band__lbl {
  color: var(--cin-ink-3) !important;
}

/* ============ Cities section ============ */
.cities {
  background: var(--cin-surface) !important;
  border: 1px solid var(--cin-line) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* lock card height so it doesn't shift between cities */
.cities__grid { min-height: 680px; align-items: stretch !important; }
.city-detail { min-height: 680px !important; height: 100%; }
.city-match-list { flex: 1 1 auto; }
.city-detail__name {
  color: var(--cin-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}
.city-detail__sub {
  color: var(--cin-ink-2) !important;
}
.city-detail > div:first-child > div:first-child {
  color: var(--cin-ink-3) !important;
}

.city-stat {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--cin-line) !important;
  border-radius: 12px !important;
}
.city-stat__lbl { color: var(--cin-ink-3) !important; }
.city-stat__val { color: var(--cin-ink) !important; font-weight: 600 !important; }
.city-stat__val--accent { color: var(--cin-orange) !important; }
.city-stat__note { color: var(--cin-ink-4) !important; }
.city-stat__note > div { background: rgba(255,255,255,0.08) !important; }

.city-match-list {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--cin-line) !important;
  border-radius: 12px !important;
}
.city-match-list__head { color: var(--cin-ink-3) !important; }
.city-match { border-top-color: var(--cin-line) !important; }
.city-match__date { color: var(--cin-ink) !important; }
.city-match__teams { color: var(--cin-ink-3) !important; }
.city-match__type {
  background: rgba(255,255,255,0.05) !important;
  color: var(--cin-ink-2) !important;
  border: 1px solid var(--cin-line) !important;
}
.city-match__type[data-k="FINAL"],
.city-match__type[data-k="SEMI"],
.city-match__type[data-k="3RD"] {
  background: var(--cin-orange) !important;
  border-color: var(--cin-orange) !important;
  color: #fff !important;
}

/* city chips in the row + inline ones */
.city-chip {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cin-line-2) !important;
  color: var(--cin-ink-2) !important;
}
.city-chip:hover { border-color: rgba(255,255,255,0.35) !important; color: #fff !important; }
.city-chip--active,
.cities + div .city-chip[style*="ink-950"] {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* chip row below the map: force exactly 2 rows (6 + 5) via grid */
.cities + div {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin-top: 32px !important;
  justify-content: initial !important;
}
.cities + div .city-chip {
  width: 100% !important;
  justify-content: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 13px !important;
}
@media (max-width: 720px) {
  .cities + div { grid-template-columns: repeat(3, 1fr) !important; }
}

/* map container */
.city-map {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid var(--cin-line) !important;
}
@media (max-width: 760px) {
  .city-map { min-height: 0 !important; padding: 12px !important; }
}

/* ============ How it works ============ */
.step {
  border-top-color: var(--cin-line) !important;
}
.step:last-child { border-bottom-color: var(--cin-line) !important; }
.step__num { color: var(--cin-ink-4) !important; }
.step__title {
  color: var(--cin-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.step__body { color: var(--cin-ink-2) !important; }
.step__time { color: var(--cin-orange) !important; }

/* phone mock sits against dark bg now — tone down the drop shadow glow */
.phone-frame {
  box-shadow:
    0 40px 100px -10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 1.5px rgba(255,255,255,0.08) !important;
}

/* image-based phone mock */
.phone-frame-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 0;
}
.phone-frame-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 40px 60px rgba(0,0,0,0.55))
    drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

/* ============ Comparison ============ */
.compare {
  background: var(--cin-surface) !important;
  border: 1px solid var(--cin-line) !important;
  border-radius: 18px !important;
  overflow: hidden;
}
.compare__row + .compare__row { border-top-color: var(--cin-line) !important; }
.compare__cell { color: var(--cin-ink-2) !important; }
.compare__cell--lbl {
  color: var(--cin-ink) !important;
  font-weight: 500 !important;
}
.compare__cell--illuno {
  background: rgba(255,111,0,0.08) !important;
  color: var(--cin-ink) !important;
  border-left: 1px solid var(--cin-line) !important;
  border-right: 1px solid var(--cin-line) !important;
}
.compare__cell--illuno.compare__cell--head {
  background: var(--cin-orange) !important;
  color: #fff !important;
  border: 0 !important;
}
.compare__cell--other {
  background: transparent !important;
  color: var(--cin-ink-3) !important;
}
.compare__cell--head {
  color: var(--cin-ink-3) !important;
}
.compare__cell--lbl.compare__cell--head,
.compare__cell--other.compare__cell--head {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cin-ink-3) !important;
}
.compare__val-yes { color: var(--cin-ink) !important; font-weight: 600 !important; }

/* Mobile: restructure each row as a card with labeled side-by-side values */
@media (max-width: 760px) {
  .compare { background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible; }
  .compare__row:first-child { display: none !important; }
  .compare__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px;
    row-gap: 10px;
    padding: 16px 0 !important;
    border-top: 1px solid var(--cin-line) !important;
  }
  .compare__row + .compare__row { border-top: 1px solid var(--cin-line) !important; }
  .compare__row:nth-child(2) { border-top: 0 !important; }
  .compare__cell { padding: 0 !important; align-items: stretch !important; }
  .compare__cell--lbl {
    grid-column: 1 / -1;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cin-ink) !important;
  }
  .compare__cell--illuno,
  .compare__cell--other {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--cin-line) !important;
    font-size: 14px;
    line-height: 1.35;
  }
  .compare__cell--illuno {
    background: rgba(255,111,0,0.10) !important;
    border-color: rgba(255,111,0,0.35) !important;
  }
  .compare__cell--other {
    background: rgba(255,255,255,0.03) !important;
  }
  .compare__cell--illuno::before,
  .compare__cell--other::before {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
  }
  .compare__cell--illuno::before {
    content: "illuno";
    color: var(--cin-orange) !important;
  }
  .compare__cell--other::before {
    content: "Agency";
    color: var(--cin-ink-3) !important;
  }
  .compare__val-yes { display: block; }
}

/* ============ FAQ ============ */
.faq { border-top-color: var(--cin-line) !important; }
.faq:last-child { border-bottom-color: var(--cin-line) !important; }
.faq__q {
  color: var(--cin-ink) !important;
  font-weight: 400 !important;
}
.faq__icon {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cin-line-2) !important;
  color: var(--cin-ink-2) !important;
}
.faq[open] .faq__icon {
  background: var(--cin-orange) !important;
  border-color: var(--cin-orange) !important;
  color: #fff !important;
}
.faq__a { color: var(--cin-ink-2) !important; }

/* ============ Final CTA ============ */
.final {
  background: linear-gradient(135deg, #0F1012 0%, #1A1B1F 100%) !important;
  border: 1px solid var(--cin-line) !important;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.8);
}
.final::before {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,111,0,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,111,0,0.08), transparent 55%) !important;
}
.final__title {
  color: var(--cin-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
}
.final__title em {
  color: var(--cin-orange) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.final__lead { color: var(--cin-ink-2) !important; }

.final .btn--primary,
.final .btn--navy {
  background: var(--cin-orange) !important;
  border-color: var(--cin-orange) !important;
  color: #fff !important;
}
.final .btn--primary:hover,
.final .btn--navy:hover {
  background: var(--cin-orange-2) !important;
  border-color: var(--cin-orange-2) !important;
}
.final .btn--outline-light {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.final .btn--outline-light:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

@media (max-width: 760px) {
  .final { padding: 56px 24px !important; }
  .final__cta {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .final .btn--xl {
    padding: 16px 22px !important;
    font-size: 16px !important;
    white-space: normal !important;
    max-width: 100%;
  }
}

/* ============ Footer ============ */
.footer {
  background: var(--cin-bg) !important;
  border-top: 1px solid var(--cin-line) !important;
  color: var(--cin-ink-3) !important;
}
.footer a { color: var(--cin-ink-2) !important; }
.footer a:hover { color: #fff !important; }
.footer__brand {
  color: var(--cin-ink) !important;
}
.footer__brand-bar { background: var(--cin-orange) !important; }
.footer__tag { color: var(--cin-ink-3) !important; }
.footer a.footer__cta {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--cin-ink) !important;
}
.footer a.footer__cta:hover { border-color: var(--cin-orange) !important; background: rgba(255,111,0,0.06) !important; }
.footer__cta-label { color: var(--cin-ink) !important; }
.footer__cta-sub { color: var(--cin-ink-3) !important; }
.footer__cta-arrow { color: var(--cin-ink-3) !important; }
.footer__cta:hover .footer__cta-arrow { color: var(--cin-orange) !important; }
.footer__bottom { border-top-color: rgba(255,255,255,0.08) !important; color: var(--cin-ink-3) !important; }
.footer__legal a { color: var(--cin-ink-3) !important; }
.footer__legal a:hover { color: #fff !important; }

/* ============ Reveal still works on dark ============ */

/* ============ Kill legacy light-nav if any remnant renders ============ */
.nav {
  background: rgba(10,10,11,0.8) !important;
  border-bottom-color: var(--cin-line) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.nav__brand { color: var(--cin-ink) !important; }
.nav__link { color: var(--cin-ink-2) !important; }
.nav__link:hover { color: #fff !important; }
.nav__brand-bar { background: var(--cin-orange) !important; }

/* inset, centered nav */
.nav { padding: 10px 0 !important; background: transparent !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav .container.nav__row {
  max-width: 1080px !important;
  padding: 10px 18px !important;
  background: rgba(10,10,11,0.72) !important;
  border: 1px solid var(--cin-line) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}

/* ============ Tweaks panel stays dark-friendly ============ */
.tweaks {
  background: #15161A !important;
  border-color: var(--cin-line-2) !important;
  color: var(--cin-ink) !important;
}
.tweaks__head {
  background: #000 !important;
  border-bottom: 1px solid var(--cin-line) !important;
}
.tweak-group__lbl { color: var(--cin-ink-3) !important; }
.tweak-opt {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cin-line-2) !important;
  color: var(--cin-ink-2) !important;
}
.tweak-opt:hover { border-color: rgba(255,255,255,0.4) !important; }
.tweak-opt--active {
  background: var(--cin-orange) !important;
  border-color: var(--cin-orange) !important;
  color: #fff !important;
}
.tweak-toggle { color: var(--cin-ink) !important; }
.switch { background: rgba(255,255,255,0.15) !important; }
.switch--on { background: var(--cin-orange) !important; }
.tweaks-toggle {
  background: var(--cin-orange) !important;
  color: #fff !important;
}
.tweaks-toggle:hover { background: var(--cin-orange-2) !important; }