/* ============ MotoAIR — shared styles ============ */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #0A0A0A;
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
.font-display {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  letter-spacing: 0.01em;
}
.h1 { font-size: clamp(44px, 9vw, 72px); line-height: 0.95; }
.h2 { font-size: clamp(32px, 6vw, 44px); line-height: 1.0; }
.h3 { font-size: clamp(22px, 3.5vw, 28px); line-height: 1.1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 14px;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn-red      { background:#E92B2B; color:#fff; }
.btn-red:hover{ background:#ff3a3a; box-shadow: 0 10px 30px rgba(233,43,43,.35); }
.btn-yellow   { background:#FFC107; color:#000; }
.btn-yellow:hover{ background:#ffcf33; box-shadow: 0 10px 30px rgba(255,193,7,.35); }
.btn-outline  { border:2px solid #FFC107; color:#FFC107; background:transparent; }
.btn-outline:hover{ background:#FFC107; color:#000; }
.btn-ghost    { border:1px solid #7A7A7A; color:#fff; background:transparent; }
.btn-ghost:hover{ border-color:#FFC107; color:#FFC107; }

/* Card hover */
.card-lift { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.6); }

/* Hero overlay */
.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 60%, rgba(10,10,10,1) 100%);
}
.page-hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.78) 70%, rgba(10,10,10,1) 100%);
}

/* Navbar */
#navbar { background: transparent; }
.nav-scrolled { background:#000 !important; border-bottom:1px solid #1a1a1a; }

/* Final: Translucent glassy light navbar at top; solid cream on scroll */
#navbar {
  background: rgba(244, 239, 230, 0.62) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav-scrolled {
  background: #F4EFE6 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#navbar .nav-link { color: #1a1a1a; }
#navbar .nav-link:hover { color: #E92B2B; }
#navbar .nav-link.active { color: #000; border-bottom-color: #E92B2B; }
#navbar #mobile-menu-btn { color: #1a1a1a; }
#navbar #mobile-menu { background: #F4EFE6; border-top-color: rgba(0,0,0,.1); }

#navbar-logo-wrap { display: inline-block; padding: 0; background: transparent; }
#footer-logo-wrap {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
}
.logo-svg { color: #ffffff; }

.nav-link {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover { color: #FFC107; }
.nav-link.active { color: #FFFFFF; border-bottom-color: #E92B2B; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .25s ease;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal-panel {
  position: relative;
  width: 100%; max-width: 880px;
  background: #0A0A0A;
  border: 1px solid #1f1f1f;
  border-top: 3px solid #E92B2B;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: rise .3s ease;
  margin: auto;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
body.modal-open { overflow: hidden; }

/* Creator ring */
.creator-ring { box-shadow: 0 0 0 3px #0A0A0A, 0 0 0 5px #E92B2B; }
.creator-ring.alt { box-shadow: 0 0 0 3px #0A0A0A, 0 0 0 5px #FFC107; }

/* Helpers */
.label-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  color:#FFC107;
}
.rule { height:1px; background: linear-gradient(90deg, #E92B2B, transparent); }
::selection { background:#E92B2B; color:#fff; }

/* Mobile sticky CTA spacing */
@media (max-width: 767px){
  main { padding-bottom: 84px; }
}

/* Form */
.input-field {
  width: 100%;
  background: #111111;
  border: 1px solid rgba(122,122,122,.3);
  color: #fff;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.input-field::placeholder { color: #7A7A7A; }
.input-field:focus { border-color: #FFC107; background: #0e0e0e; }
textarea.input-field { min-height: 140px; resize: vertical; }


/* slide wrapper — JS sets width dynamically */
.sl-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}
 
/* card base */
.sl-card {
  height: 100%;
  box-sizing: border-box;
  transition: background 0.3s, box-shadow 0.3s;
}
 
/* highlighted card when avatar clicked */
.sl-card.highlighted {
  background: #272218 !important;
  box-shadow: inset 0 0 0 1px rgba(200, 168, 75, 0.35);
}
 
/* avatar states */
#slAvatars img {
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
#slAvatars img:hover {
  transform: scale(1.1) translateY(-4px);
  border-color: #c8a84b;
  z-index: 2;
}
#slAvatars img.active-av {
  transform: scale(1.15) translateY(-6px);
  border-color: #c8a84b !important;
  box-shadow: 0 8px 24px rgba(200, 168, 75, 0.4);
  z-index: 3;
}
 
/* prev / next buttons */
.sl-ctrl-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.sl-ctrl-btn:hover {
  border-color: #c8a84b;
  background: rgba(200, 168, 75, 0.08);
}
.sl-ctrl-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
 
/* dot indicators */
.sl-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.sl-dot.on {
  background: #c8a84b;
  transform: scale(1.35);
}
 
/* swipe hint — mobile only */
.sl-hint {
  text-align: center;
  font-size: 0.68rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 10px;
  transition: opacity 0.4s;
}
.sl-hint.hide { opacity: 0; pointer-events: none; }
@media (min-width: 640px) { .sl-hint { display: none; } }