:root {
  --tdf-yellow: #ffe500;
  --tdf-yellow-dark: #e2ca00;
  --tdf-black: #111111;
  --tdf-ink: #171717;
  --tdf-white: #ffffff;
  --tdf-soft: #f5f3e7;
  --tdf-gray: #6f6f67;
  --tdf-red: #c7192e;
  --tdf-radius: 1.35rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter,system-ui,sans-serif;
  color: var(--tdf-ink);
  background: #fff;
}

h1, h2, h3, .navbar-brand {
  font-family: Oswald,Inter,sans-serif;
}

.fw-black {
  font-weight: 800;
}

.text-white-75 {
  color: rgba(255,255,255,.76);
}

.bg-soft {
  background: var(--tdf-soft);
}

.section-pad {
  padding: 7rem 0;
}

.section-title {
  font-size: clamp(2.35rem,5vw,4.8rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .78rem;
  margin-bottom: 1rem;
}

.text-brand {
  color: var(--tdf-yellow-dark)!important;
}

.btn {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.btn-primary {
  --bs-btn-bg: var(--tdf-yellow);
  --bs-btn-border-color: var(--tdf-yellow);
  --bs-btn-color: #111;
  --bs-btn-hover-bg: var(--tdf-yellow-dark);
  --bs-btn-hover-border-color: var(--tdf-yellow-dark);
  --bs-btn-hover-color: #111;
}

.btn-outline-dark {
  --bs-btn-hover-bg: #111;
  --bs-btn-hover-border-color: #111;
}

.navbar {
  transition: .25s;
  background: rgba(17,17,17,.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar-brand img {
  max-height: 46px;
  width: auto;
}

.nav-link {
  font-weight: 800;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .025em;
}

.hero-section {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/img/tour-de-franz-5.jpeg');
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.42) 55%,rgba(0,0,0,.62));
}

.hero-logo {
  max-width: 360px;
  width: min(75vw,360px);
  filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.35));
}

.hero-title {
  font-size: clamp(4.4rem,11vw,9.6rem);
  line-height: .84;
  text-transform: uppercase;
  letter-spacing: -.06em;
}

.yellow-underline {
  position: relative;
  display: inline-block;
}

.yellow-underline:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: .11em;
  background: var(--tdf-yellow);
  z-index: -1;
}

.glass-card {
  background: rgba(17,17,17,.58);
  border: 1px solid rgba(255,229,0,.42);
  border-radius: var(--tdf-radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.2);
}

.stat-number {
  font-family: Oswald,sans-serif;
  font-size: clamp(1.9rem,3vw,2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tdf-yellow);
}

.small-stat {
  font-size: 1.7rem;
}

.stat-label {
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.74);
  font-weight: 800;
}

.feature-card {
  height: 100%;
  padding: 1.4rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-top: 5px solid var(--tdf-yellow);
}

.feature-card strong {
  font-weight: 900;
  text-transform: uppercase;
}

.feature-card span {
  color: var(--tdf-gray);
  font-size: .95rem;
}

.image-card {
  border-radius: var(--tdf-radius);
  overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.14);
  border: 10px solid #fff;
  transform: rotate(1deg);
}

.image-card img {
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}

.impact-card {
  border-radius: var(--tdf-radius);
  padding: 2rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.07);
  border: 1px solid #ece9d8;
}

.impact-card span {
  font-family: Oswald,sans-serif;
  font-size: 2.9rem;
  font-weight: 700;
  color: #111;
  letter-spacing: -.04em;
}

.impact-card p {
  margin: 0;
  color: var(--tdf-gray);
  font-weight: 800;
  text-transform: uppercase;
}

.impact-card.highlight {
  background: var(--tdf-yellow);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: 1rem;
}

.timeline-item {
  padding: 1rem;
  border-left: 5px solid var(--tdf-yellow);
  background: var(--tdf-soft);
  border-radius: .75rem;
}

.timeline-item b, .timeline-item span {
  display: block;
}

.timeline-item b {
  font-family: Oswald,sans-serif;
  font-size: 1.45rem;
}

.timeline-item span {
  font-weight: 900;
  color: var(--tdf-gray);
}

.help-photo {
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.18);
}

.help-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.benefit-card {
  height: 100%;
  padding: 1.6rem;
  border-radius: 1.2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.benefit-card h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
  text-transform: uppercase;
}

.benefit-card p {
  color: rgba(255,255,255,.68);
  margin: 0;
}

.event-card {
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.09);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

.event-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: repeating-linear-gradient(45deg,var(--tdf-yellow) 0 10px,#111 10px 20px);
}

.mini-info {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--tdf-soft);
  border-radius: 999px;
  font-weight: 900;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 1rem;
}

@media (min-width: 576px) {
  .sponsor-grid {
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  }
}

.sponsor-card {
  min-height: 110px;
  border: 1px solid #eee;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 .8rem 2rem rgba(0,0,0,.04);
}

.sponsor-card img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.sponsor-placeholder {
  font-weight: 900;
  color: #777;
  text-align: center;
  text-transform: uppercase;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.08);
  transition: .25s;
}

.gallery-grid a:hover img {
  transform: translateY(-4px);
}

.donate-section {
  background: radial-gradient(circle at 16% 10%,rgba(255,229,0,.22),transparent 32%),linear-gradient(135deg,#111,#222 48%,#090909);
}

.bank-card {
  border-radius: var(--tdf-radius);
  background: var(--tdf-yellow);
  color: #111;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.24);
}

.bank-card code {
  background: rgba(255,255,255,.55);
  padding: .2rem .45rem;
  border-radius: .35rem;
  color: #111;
}

.footer a {
  text-decoration: none;
}

.footer-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}

.modal-content {
  border: 0;
}

.modal-content img {
  max-height: 82svh;
  object-fit: contain;
}

@media (max-width:991.98px) {
  .section-pad {
    padding: 5rem 0;
  }
}

@media (max-width:991.98px) {
  .navbar-collapse {
    padding: 1rem 0;
  }
}

@media (max-width:991.98px) {
  .hero-section {
    min-height: 840px;
  }
}

@media (max-width:991.98px) {
  .hero-title {
    font-size: clamp(4rem,18vw,6rem);
  }
}

.hero-sites {
  background: var(--tdf-yellow);
}

.agency-box {
  background: var(--tdf-soft);
  border-radius: var(--tdf-radius);
}