html {
  scroll-behavior: smooth;
}

body {
    background: #090909 !important;
}

.btn {
    color: white;
    background-color: #222222;
    border-color: #f8f9fa00 !important;
}

.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0rem #fff;
    border-color:rgba(237, 123, 182);
    border-color: #f8f9fa00;
}

.btn:hover {
    color: white;
    background-color:rgb(237, 123, 182);
    border-color: #f8f9fa00;
}

.btn:not(.disabled):active:focus {
    color: white;
    background-color: #222222;
}

.navbar-brand img {
    width: 150px;
}

.nav-item {
    margin: 0px 10px 0px 10px;
}

.links {
    max-width: 25px;
}

.title {
    font-family: PPSupplyMono;
    opacity: 0.75;
    position: absolute;
    transform: translateX(-50%);
    color: white;
    /* font-weight: bold; */
    text-shadow: 2px 2px 20px black;
    line-height: 1.4;
}

.title.a1 {
    top: 18%;
    left: 23%;
    font-size: 8.25vw;
}

.title.a2 {
    top: 75%;
    left: 23%;
    font-size: 2.9vw;
}


.navbar {
    padding: .5rem 3.5rem;
}

.navbar.glass {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-brand {
    font-family: PPSupplyMono;
    font-size: 20px;
    margin: 0px 0rem -4px 0px;
}

.nav-item .nav-link {
    font-size: 20px;
}

.navbar-nav {
    flex-wrap: wrap;
}

/* @media (max-width: 540px) {
    .nav-item .nav-link {
        font-size: 10px;
    }
} */

.metric {
    font-family: PPSupplyMono;
    display: flex;
    justify-content: center;
    color: white;
    opacity: 0.75;
    margin: 6vw 0vw;
}

.metric h1 {
    font-size: 4vw;
}




/* Subtle, corporate, minimal */
body { background: #0b0b0d; color: #e6e6e6; }

.navbar .nav-link, .navbar .navbar-brand { color: #e6e6e6!important; }

.metric { padding: 40px 0; text-align:center; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

.section { padding: 70px 0; }
.section h2 { font-weight: 700; letter-spacing: .02em; margin-bottom: 24px; }
.muted { color: #a5a5a5; }

.kpi-strip { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top: -12px;}
.kpi { min-width: 260px; padding:16px 20px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(255,255,255,0.03); text-align:center;}
.kpi h3{ margin:0; font-size:28px; }
.kpi span{ display:block; margin-top:6px; color:#a5a5a5; font-size:13px; }

.card-lite { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
.card-lite .card-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.08); }
.btn-ghost { border:1px solid rgba(255,255,255,0.25); color:#fff; }
.btn-ghost:hover { background:#fff; color:#000; }

.ticker { white-space: nowrap; overflow: hidden; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);}




.ticker-line {
  display: inline-block;
  will-change: transform;
  animation: scroll 28s linear infinite; /* adjust speed here */
}

/* Two identical copies so -50% shift is seamless */
.ticker-line::before,
.ticker-line::after {
  content: attr(data-text) " \00A0\00A0\00A0 "; /* 3 non-breaking spaces as a gap */
}

/* Shift by exactly one copy's width */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.bar { height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow:hidden; }
.bar > div { height: 100%; width: 0%; background: #e6e6e6; transition: width 1s ease; }

.quote { font-style: italic; opacity: .85; }
.divider { border-top: 1px solid rgba(255,255,255,0.08); margin: 28px 0; }

.footer { background:#111; border-top:1px solid rgba(255,255,255,0.08); }
.links { width:26px; height:26px; }
a, a:hover { color: #c8c8ff; text-decoration: none; }



.modal-content {
    background: rgba(0, 0, 0, 0.7);
}