:root {
  /* Brand Palette */
  --color-primary-red: #e31837;
  --color-accent-yellow: #fff302;
  --color-text-title: #111111;
  --color-text-subtitle: #6b6b6b;
  --color-bg-page: #f5f5f5;
  --color-bg-navbar: #ffffff;

  /* Typography */
  --font-family-base: Arial, Helvetica, sans-serif;

  /* Header Dimensions (1024px reference) */
  --top-bar-height: 5px;
  --navbar-height: 80px;
  --navbar-padding-x: 40px;
  --logo-width: 122px;
  --logo-height: 43px;

  /* Stripe Accents */
  --stripe-height: 3px;
  --stripe-yellow-width: 19px;
  --stripe-red-width: 37px;
  --badge-gap: 10px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-page);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* 1. Top Bar Accent: 5px height */
.top-bar {
  display: flex;
  width: 100%;
  height: var(--top-bar-height);
  flex-shrink: 0;
}

.top-bar-yellow {
  /* Exactly spans 0 to 161px in reference image (40px padding + 122px logo = 162px) */
  width: calc(var(--navbar-padding-x) + var(--logo-width));
  height: 100%;
  background-color: var(--color-accent-yellow);
  flex-shrink: 0;
}

.top-bar-red {
  flex: 1;
  height: 100%;
  background-color: var(--color-primary-red);
}

/* 2. Header / Navbar: 80px white bar */
.navbar {
  width: 100%;
  height: var(--navbar-height);
  background-color: var(--color-bg-navbar);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: var(--navbar-padding-x);
  padding-right: var(--navbar-padding-x);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  object-fit: contain;
  object-position: left center;
}

/* 3. Main Hero / Centered Content */
.main-content {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--color-bg-page);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* COMING SOON Row */
.badge-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap);
  margin-bottom: 8px;
  max-width: 100%;
}

.stripe-line {
  display: inline-flex;
  height: var(--stripe-height);
  align-items: center;
  flex-shrink: 0;
}

.stripe-line span {
  display: inline-block;
  height: 100%;
}

.segment-yellow {
  width: var(--stripe-yellow-width);
  background-color: var(--color-accent-yellow);
}

.segment-red {
  width: var(--stripe-red-width);
  background-color: var(--color-primary-red);
}

.badge-text {
  color: var(--color-primary-red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Main Heading */
.main-title {
  color: var(--color-text-title);
  font-size: 27.2px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 3px 0;
  text-align: center;
}

/* Subtitle */
.main-subtitle {
  color: var(--color-text-subtitle);
  font-size: 13.1px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0;
  text-align: center;
  max-width: 520px;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */

/* Large Desktop screens (1440px and above) */
@media screen and (min-width: 1440px) {
  :root {
    --navbar-padding-x: 60px;
  }
}

/* Tablet screens (768px - 1023px) */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  :root {
    --navbar-padding-x: 32px;
    --logo-width: 116px;
    --logo-height: 41px;
    --navbar-height: 76px;
  }

  .main-title {
    font-size: 24px;
  }

  .main-subtitle {
    font-size: 13px;
  }
}

/* Mobile Devices (under 768px) */
@media screen and (max-width: 767px) {
  :root {
    --navbar-padding-x: 20px;
    --logo-width: 102px;
    --logo-height: 36px;
    --navbar-height: 68px;
    --stripe-yellow-width: 14px;
    --stripe-red-width: 24px;
    --badge-gap: 8px;
  }

  .main-content {
    padding: 24px 20px;
  }

  .content-wrapper {
    max-width: 100%;
  }

  .badge-row {
    margin-bottom: 12px;
  }

  .badge-text {
    font-size: 9px;
  }

  .main-title {
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .main-subtitle {
    font-size: clamp(12px, 3.4vw, 13px);
    line-height: 1.45;
    max-width: 320px;
  }
}

/* Small mobile devices (under 360px) */
@media screen and (max-width: 359px) {
  :root {
    --navbar-padding-x: 16px;
    --logo-width: 90px;
    --logo-height: 32px;
    --stripe-yellow-width: 10px;
    --stripe-red-width: 16px;
    --badge-gap: 6px;
  }

  .badge-text {
    font-size: 8.5px;
  }

  .main-title {
    font-size: 18.5px;
  }

  .main-subtitle {
    font-size: 11.5px;
  }
}