#fw-section-hero-video-b63caf22-23e8-4a76-aa5b-7fe6db7af5c3 {

/* PREMIUM EDITORIAL HERO CSS - STATIC & MODERN */
/* Inspired by high-end magazine and tech landing pages */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');

/* 1. THE HEADING - MASSIVE & TIGHT */
.hero__heading, 
.hero h1,
[data-testid="main.single.section"] h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(3rem, 10vw, 6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  line-height: 0.9 !important;
  color: #000000 !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

/* 2. THE SUBTEXT - REFINED */
.hero__text,
.hero p,
[data-testid="main.single.section"] p {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  color: #555555 !important;
  max-width: 550px !important;
  line-height: 1.4 !important;
  margin-bottom: 40px !important;
  text-align: left !important;
  opacity: 1 !important;
  letter-spacing: -0.01em !important;
}

/* 3. THE BUTTON - OVERSIZED PILL */
.hero .button,
.hero a.button,
.hero .button--primary,
[data-testid="main.single.section"] .button--primary {
  background-color: #d466a1 !important; /* Your Pink */
  color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 100px !important;
  padding: 22px 60px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(212, 102, 161, 0.2) !important;
}

.hero .button:hover,
.hero a.button:hover {
  background-color: #000000 !important; /* Invert to black on hover for a premium feel */
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* 4. LAYOUT ADJUSTMENTS */
.hero__content {
  text-align: left !important;
  align-items: flex-start !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.hero__cta-container {
  justify-content: flex-start !important;
}

/* 5. MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .hero__heading {
    font-size: 3.5rem !important;
  }
  .hero .button--primary {
    padding: 18px 40px !important;
    width: 100% !important;
  }
}

}





#fw-section-announcement-bar-0 {
--font-heading-scale: 0.7;
--font-body-scale: 1.09;
}
#fw-section-announcement-bar-0 {
--color-primary: #0091ad;
--color-primary-rgb: 0, 145, 173;
--color-background: #F6EDFB;
--color-background-rgb: 246, 237, 251;
--color-on-background: #171043;
--color-on-background-rgb: 23, 16, 67;
--color-on-primary: #fff4e4;
--color-on-primary-rgb: 255, 244, 228;
--color-product-image-background: #171043;
--color-background-brightness: 241;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #0091ad;
--primary-btn-text: #fff4e4;
--primary-btn-border-color: #171043;
--secondary-btn-bg: transparent;
--secondary-btn-text: #171043;
--secondary-btn-border-color: #171043;

}
#fw-section-header {

/* Main Font Style */
header a, 
nav a, 
.site-header a, 
.nav-menu a, 
.menu-item a {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important; /* Medium thickness */
  color: #52525b !important; /* Modern soft dark gray */
  text-decoration: none !important; /* Removes any default underlines */
  letter-spacing: 0.5px !important; /* Slight spacing between letters for a clean look */
  text-transform: capitalize !important; /* Ensures the first letter is capitalized */
  transition: color 0.3s ease !important; /* Smooth fade for the hover effect */
}

/* Font Hover Effect */
header a:hover, 
nav a:hover, 
.site-header a:hover, 
.nav-menu a:hover, 
.menu-item a:hover {
  color: #000000 !important; /* Text changes to solid black when hovered */
}
}