:root {
  --brand-red: #ff0000;
  --brand-red-dark: #cc0000;
  --brand-red-hover: #e60000;
  --brand-red-subtle: rgba(255, 0, 0, 0.08);
  --brand-red-glow: rgba(255, 0, 0, 0.28);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f3f5;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff0000;
}

/* Glass & Glow utilities */
.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-nav-dark {
  background: rgba(10, 12, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2.5s infinite ease-in-out;
}



/* Hero slide content entrance animation */
@keyframes hero-content-enter {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-content-enter {
  animation: hero-content-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-content-enter > div:nth-child(1) { animation-delay: 60ms; }
.hero-content-enter > h1 { animation-delay: 120ms; }
.hero-content-enter > div:nth-child(3) { animation-delay: 180ms; }
.hero-content-enter > p { animation-delay: 240ms; }
.hero-content-enter > div:nth-child(5) { animation-delay: 300ms; }

.hero-content-enter > div,
.hero-content-enter > h1,
.hero-content-enter > p {
  animation-name: hero-content-enter;
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content-enter,
  .hero-content-enter > div,
  .hero-content-enter > h1,
  .hero-content-enter > p {
    animation: none !important;
  }
}

/* Subtle section reveal on scroll */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.scroll-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Keep the footer at the bottom of short pages without covering content. */
#root > div {
  min-height: 100vh;
}

/* Slider visual refinement */
.hero-slider,
.hero-section,
[class*="hero-slider"],
[class*="HeroSlider"] {
  background: #fff;
}

.hero-slider::after,
.hero-section::after,
[class*="hero-slider"]::after,
[class*="HeroSlider"]::after {
  opacity: .18 !important;
}

.hero-slider .hero-content > *,
.hero-section .hero-content > *,
[class*="hero-slider"] [class*="content"] > *,
[class*="HeroSlider"] [class*="content"] > * {
  animation: sofhourHeroIn .75s cubic-bezier(.22,1,.36,1) both;
}

.hero-slider .hero-content > *:nth-child(2),
.hero-section .hero-content > *:nth-child(2),
[class*="hero-slider"] [class*="content"] > *:nth-child(2),
[class*="HeroSlider"] [class*="content"] > *:nth-child(2) {
  animation-delay: .10s;
}
.hero-slider .hero-content > *:nth-child(3),
.hero-section .hero-content > *:nth-child(3),
[class*="hero-slider"] [class*="content"] > *:nth-child(3),
[class*="HeroSlider"] [class*="content"] > *:nth-child(3) {
  animation-delay: .18s;
}
.hero-slider .hero-content > *:nth-child(4),
.hero-section .hero-content > *:nth-child(4),
[class*="hero-slider"] [class*="content"] > *:nth-child(4),
[class*="HeroSlider"] [class*="content"] > *:nth-child(4) {
  animation-delay: .26s;
}

@keyframes sofhourHeroIn {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Single clean CTA */
.hero-slider a,
.hero-section a,
[class*="hero-slider"] a,
[class*="HeroSlider"] a {
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-content > *,
  .hero-section .hero-content > *,
  [class*="hero-slider"] [class*="content"] > *,
  [class*="HeroSlider"] [class*="content"] > * {
    animation: none !important;
  }
  .sofhour-scroll-indicator::before { animation: none; }
}

/* Final hero slider cleanup */
.hero-content-enter > * {
  animation: sofhourHeroTextIn .72s cubic-bezier(.22,1,.36,1) both;
}
.hero-content-enter > *:nth-child(2) { animation-delay: .08s; }
.hero-content-enter > *:nth-child(3) { animation-delay: .16s; }
.hero-content-enter > *:nth-child(4) { animation-delay: .24s; }

/* Keep the image visible; avoid the heavy black wash. */
.hero-slider-overlay-light {
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.08) 100%) !important;
}

.sofhour-scroll-indicator {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 30px;
  height: 52px;
  border: 1.5px solid rgba(17,24,39,.32);
  border-radius: 17px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 9px;
  box-sizing: border-box;
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
.sofhour-scroll-indicator span {
  display:block;
  width:4px;
  height:9px;
  border-radius:4px;
  background:#111827;
  animation: sofhourMouseScroll 1.6s ease-in-out infinite;
}
@keyframes sofhourHeroTextIn {
  from { opacity:0; transform:translate3d(0,22px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes sofhourMouseScroll {
  0%,100% { transform:translateY(0); opacity:.35; }
  45% { transform:translateY(16px); opacity:1; }
}
@media (max-width:768px) {
  .sofhour-scroll-indicator { left:10px; width:27px; height:47px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-content-enter > * { animation:none !important; }
  .sofhour-scroll-indicator span { animation:none !important; }
}

/* Keep the single hero action clean and simple. */
.hero-content-enter button {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
}
.hero-content-enter button:hover {
  background: #f3f4f6 !important;
}

html.js-scroll-reveal main > * { opacity: 0; }

/* Clean mouse scroll indicator */
.sofhour-scroll-indicator {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: auto;
  top: auto;
  transform: none;
  z-index: 60;
  width: 34px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 5px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9px;
  box-sizing: border-box;
}
.sofhour-scroll-indicator::before {
  content: "";
  width: 5px;
  height: 9px;
  border-radius: 5px;
  background: #fff;
  animation: sofhourMouseWheel 1.65s ease-in-out infinite;
}
.sofhour-scroll-indicator::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255,255,255,.95);
  border-bottom: 1.5px solid rgba(255,255,255,.95);
  transform: rotate(45deg);
  bottom: -13px;
  left: 50%;
  margin-left: -4px;
  opacity: .9;
}
@keyframes sofhourMouseWheel {
  0%, 100% { transform: translateY(0); opacity: .35; }
  45% { transform: translateY(17px); opacity: 1; }
}

/* Mobile: centered at the bottom, away from slider controls */
@media (max-width: 768px) {
  .sofhour-scroll-indicator {
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    width: 30px;
    height: 46px;
    border-width: 1.7px;
    border-radius: 16px;
  }
  .sofhour-scroll-indicator::after {
    bottom: -11px;
    width: 6px;
    height: 6px;
    margin-left: -3.5px;
  }
}

/* Keep it clear above slider thumbnails/navigation */
@media (min-width: 769px) {
  .sofhour-scroll-indicator {
    right: 24px;
    bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sofhour-scroll-indicator::before { animation: none; }
}

/* Clean mouse scroll indicator */
.sofhour-scroll-indicator {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 34px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 5px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9px;
  box-sizing: border-box;
}
.sofhour-scroll-indicator::before {
  content: "";
  width: 5px;
  height: 9px;
  border-radius: 5px;
  background: #fff;
  animation: sofhourMouseWheel 1.65s ease-in-out infinite;
}
.sofhour-scroll-indicator::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255,255,255,.95);
  border-bottom: 1.5px solid rgba(255,255,255,.95);
  transform: rotate(45deg);
  bottom: -13px;
  left: 50%;
  margin-left: -4px;
  opacity: .9;
}
@keyframes sofhourMouseWheel {
  0%, 100% { transform: translateY(0); opacity: .35; }
  45% { transform: translateY(17px); opacity: 1; }
}
@media (max-width: 768px) {
  .sofhour-scroll-indicator {
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    width: 30px;
    height: 46px;
    border-width: 1.7px;
    border-radius: 16px;
  }
  .sofhour-scroll-indicator::after {
    bottom: -11px;
    width: 6px;
    height: 6px;
    margin-left: -3.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sofhour-scroll-indicator::before { animation: none; }
}

/* Final hero text treatment - no content box */
.hero-slider-content {
  position: relative;
  z-index: 10;
  background: transparent !important;
  isolation: auto;
}
.hero-slider-content h1 {
  text-shadow: 0 3px 18px rgba(0,0,0,.48);
}
.hero-slider-content p {
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}


/* Final hero text layout - transparent and readable */
.hero-slider-content,
.hero-content-enter {
  position: relative;
  z-index: 10;
  background: transparent !important;
}
.hero-slider-content h1,
.hero-content-enter h1 {
  text-shadow: 0 3px 16px rgba(0,0,0,.52);
}
.hero-slider-content p,
.hero-content-enter p {
  text-shadow: 0 2px 9px rgba(0,0,0,.55);
}
@media (min-width: 1024px) {
  .hero-slider-content h1,
  .hero-content-enter h1 {
    font-size: clamp(3.4rem, 4.4vw, 5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em;
    max-width: 760px !important;
    text-wrap: balance;
  }
}
@media (max-width: 768px) {
  .hero-slider-content,
  .hero-content-enter {
    width: calc(100% - 34px) !important;
    max-width: 390px !important;
  }
  .hero-slider-content h1,
  .hero-content-enter h1 {
    font-size: clamp(2rem, 8.4vw, 2.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em;
    max-width: 350px !important;
    text-wrap: balance;
  }
  .hero-slider-content p,
  .hero-content-enter p {
    max-width: 340px !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }
}


/* Welcome intro slide */
.welcome-hero-content {
  animation: welcomeContentIn 900ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes welcomeContentIn {
  from { opacity: 0; transform: translate3d(42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 768px) {
  .welcome-hero-content h1 {
    max-width: 330px !important;
    font-size: clamp(2.2rem, 10vw, 3.3rem) !important;
    line-height: 1.02 !important;
  }
  .welcome-hero-content p {
    max-width: 330px !important;
  }
}

/* First-visit welcome slide */
.welcome-centered {
  width: 100%;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.welcome-centered h1 {
  width: 100%;
  max-width: 1100px !important;
  margin-left: auto;
  margin-right: auto;
}
.welcome-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.78);
  animation: welcomeFadeUp .65s cubic-bezier(.22,1,.36,1) both;
}
.welcome-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem .75rem;
  width: 100%;
  max-width: 1050px;
  margin: .25rem auto 0;
}
.welcome-brand {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.96);
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 600;
  animation: welcomeBrandIn .7s cubic-bezier(.22,1,.36,1) both;
}
.welcome-centered > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 850px !important;
}
.welcome-centered > div:last-child {
  margin-left: auto;
  margin-right: auto;
}
@keyframes welcomeFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcomeBrandIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
  .welcome-centered {
    max-width: 100% !important;
    padding: 0 4px;
  }
  .welcome-centered h1 {
    font-size: clamp(2.15rem, 10vw, 3.4rem) !important;
    line-height: 1.02 !important;
  }
  .welcome-eyebrow {
    font-size: .68rem;
  }
  .welcome-brands {
    gap: .38rem .45rem;
    max-width: 390px;
  }
  .welcome-brand {
    font-size: .68rem;
    padding: .3rem .55rem;
  }
  .welcome-centered > p {
    font-size: .78rem !important;
    line-height: 1.45 !important;
    max-width: 360px !important;
  }
}

/* Final welcome spacing and clean brand presentation */
.welcome-centered {
  gap: 0 !important;
}
.welcome-centered .welcome-eyebrow {
  margin-bottom: 1.1rem;
}
.welcome-centered h1 {
  margin-bottom: 1.35rem !important;
}
.welcome-brands {
  gap: .7rem 1.05rem !important;
  margin-top: .15rem !important;
  margin-bottom: 1.35rem !important;
}
.welcome-brand {
  padding: .45rem .85rem !important;
  font-size: .8rem !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.34) !important;
  letter-spacing: .005em;
}
.welcome-centered > p {
  margin-top: .1rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.6 !important;
}
.welcome-centered .welcome-eyebrow,
.welcome-centered h1,
.welcome-centered .welcome-brands,
.welcome-centered > p,
.welcome-centered > div:last-child {
  width: 100%;
}
@media (min-width: 769px) {
  .welcome-centered h1 {
    font-size: clamp(3.8rem, 5.4vw, 6rem) !important;
  }
  .welcome-centered > p {
    max-width: 900px !important;
    font-size: 1.05rem !important;
  }
}
@media (max-width: 768px) {
  .welcome-centered .welcome-eyebrow {
    margin-bottom: .8rem;
  }
  .welcome-centered h1 {
    margin-bottom: 1rem !important;
  }
  .welcome-brands {
    gap: .55rem .55rem !important;
    margin-bottom: 1rem !important;
  }
  .welcome-brand {
    font-size: .68rem !important;
    padding: .35rem .62rem !important;
  }
  .welcome-centered > p {
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
  }
}