/* === Cinematic layer with readability-focused treatment === */
:root{
  --cin-panel-bg: rgba(7,10,14,.84);
  --cin-panel-bg-soft: rgba(8,11,15,.74);
  --cin-text-strong: #f7f3ea;
  --cin-text-body: rgba(247,243,234,.88);
  --cin-text-muted: rgba(247,243,234,.70);
  --cin-text-accent: #f3cb6a;
}
body{
  background:#050607 !important;
}
.page{
  position:relative;
  z-index:10;
}
.bg-stage{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:#050607;
  pointer-events:none;
}
.bg-scene{
  position:absolute;
  inset:-4%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.03) translate3d(0,0,0);
  filter:brightness(.60) saturate(.92);
  transition:opacity .9s ease, transform .6s ease-out, filter .9s ease;
}
.bg-scene.is-active{
  opacity:1;
  filter:brightness(.66) saturate(.96);
}
.bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.64)),
    radial-gradient(circle at 50% 84%, rgba(255,194,76,.10), transparent 24%),
    radial-gradient(circle at 50% 18%, rgba(255,221,135,.03), transparent 28%);
}
.bg-glow{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(255,216,120,.035), transparent 42%);
  mix-blend-mode: screen;
}
.cinematic-hud{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:35;
  min-width:190px;
  padding:14px 16px;
  display:block;
}
.cinematic-hud__label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cin-text-accent);
  font-weight:800;
}
.cinematic-hud__mode{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  color:var(--cin-text-strong);
}
.cinematic-hud__small{
  margin-top:4px;
  font-size:12px;
  color:var(--cin-text-muted);
}
.cinematic-hud__meter{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  margin-top:12px;
  overflow:hidden;
}
.cinematic-hud__meter span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow:0 0 24px rgba(255,196,69,.28);
}
.nav{
  z-index:30;
  background:linear-gradient(180deg, rgba(4,6,9,.84), rgba(4,6,9,.08)) !important;
  backdrop-filter: blur(10px);
}
.hero, .section, .footer{
  position:relative;
  z-index:10;
}
.hero.section,
.section{
  overflow:visible;
}
.hero.section{
  min-height:92vh;
  align-items:center;
}
.hero.section::before,
.section::before{
  content:"";
  position:absolute;
  inset:6% 4%;
  background: radial-gradient(circle at center, rgba(0,0,0,.48), rgba(0,0,0,.24) 58%, rgba(0,0,0,0) 100%);
  z-index:0;
  pointer-events:none;
}
.hero .hero__grid,
.section .container,
.section .grid-2,
.section .grid-3,
.section .cards,
.section .hero__visual,
.section .hero__copy,
.footer .container{
  position:relative;
  z-index:1;
}
.glass{
  background:linear-gradient(180deg, var(--cin-panel-bg), rgba(7,10,14,.74)) !important;
  border:1px solid rgba(255,215,120,.14) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter:blur(18px) !important;
}
.card,
.stat,
.kv,
.timeline__item,
.explorer-card,
.pool-card,
.download-card{
  background:var(--cin-panel-bg-soft) !important;
  border-color:rgba(255,215,120,.10) !important;
}
h1,h2,h3,h4,h5,h6,strong,.brand__name,.nav__name{
  color:var(--cin-text-strong) !important;
}
p,li,dd,dt,.meta,.muted,.sub,.lede,.small{
  color:var(--cin-text-body) !important;
}
.eyebrow,
.kicker,
.overline,
.stat__label,
.kv__label,
.label{
  color:var(--cin-text-accent) !important;
}
.fact-list span,
.summary-grid span,
.meter-readouts span,
.hero .subtle,
.section .subtle{
  color:var(--cin-text-muted) !important;
}
.btn--ghost{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.10) !important;
}
.btn--gold{
  box-shadow:0 12px 32px rgba(255,196,69,.16) !important;
}
.hero .title,
.hero h1{
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
#loader{
  z-index:100;
}
.footer{
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
}
@media (max-width:760px){
  .cinematic-hud{
    left:16px;
    bottom:16px;
  }
  .hero.section::before,
  .section::before{
    inset:6% 3%;
    background: radial-gradient(circle at center, rgba(0,0,0,.48), rgba(0,0,0,.24) 60%, rgba(0,0,0,0) 100%);
  }
}


@media (min-width: 1101px){
  .hero.section{
    min-height: 86vh;
    padding-top: 86px;
  }
  .section{
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .hero .hero__grid{
    align-items: start;
  }
}


/* === Requested refinement pass === */

/* Remove any icon bubble space if HTML still contains empty placeholders */
.card__icon,
.how .card__icon,
#how .card__icon {
  display: none !important;
}

/* More prominent logo showcase in hero */
.hero-logo-showcase{
  margin-top: 18px;
  width: min(260px, 42vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: rgba(7,10,14,.84) !important;
  border: 1px solid rgba(255,215,120,.16) !important;
}
.hero-logo-showcase__img{
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255,215,120,.30));
}

/* Compact downloads section */
.downloads-compact .cards,
#downloads .cards{
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px)) !important;
  justify-content: center !important;
  align-items: stretch;
}

.downloads-compact .card,
#downloads .card,
.downloads-compact .download-card,
#downloads .download-card{
  max-width: 280px;
  width: 100%;
  margin-inline: auto;
  padding: 18px !important;
}

.downloads-compact .row,
#downloads .row{
  gap: 8px !important;
}

.downloads-compact .btn,
#downloads .btn{
  min-height: 40px;
  padding: 10px 12px;
  font-size: 13px;
}

/* If downloads uses a grid-3 layout, shrink it */
#downloads .grid-3{
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px)) !important;
  justify-content: center;
  gap: 14px !important;
}

/* If downloads uses direct links, make them pill-sized */
#downloads .socialbar,
#downloads .download-list,
#downloads .downloads-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

#downloads .social,
#downloads .download-link,
#downloads .downloads-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto !important;
  max-width:none !important;
  min-height:42px;
  padding:10px 14px !important;
  border-radius:14px;
  background: rgba(8,11,15,.74) !important;
  border:1px solid rgba(255,215,120,.10) !important;
}

/* Keep sections from feeling oversized on desktop */
@media (min-width:1101px){
  #downloads.section,
  .downloads-compact.section{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}


/* === Remove leftover scene/camera bubble overlays completely === */
.cinematic-hud,
.hud,
.camera-ui,
.camera-overlay,
.scene-indicator {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === Logo transition between hero and Quick Facts === */
.section--logo-transition{
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  position: relative;
  z-index: 12;
}
.section--logo-transition::before{
  display:none !important;
}
.logo-transition{
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(7,10,14,.84) !important;
  border: 1px solid rgba(255,215,120,.16) !important;
}
.logo-transition__line{
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,215,120,.95), transparent);
  box-shadow: 0 0 18px rgba(255,215,120,.20);
}
.logo-transition__mark{
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255,215,120,.10), rgba(255,215,120,.03) 55%, transparent 70%);
  box-shadow:
    0 0 26px rgba(255,215,120,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.logo-transition__mark img{
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255,215,120,.32));
}

@media (max-width: 760px){
  .section--logo-transition{
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
  .logo-transition{
    gap: 12px;
    padding: 12px 14px;
  }
  .logo-transition__mark{
    width: 90px;
    height: 90px;
  }
}