:root {
  /* ===== CORE COLORS ===== */
  --color-bg: #f3e8ff;
  --color-fg: #1b152b;
  --color-primary: #7b5cff;
  --color-secondary: #a855f7;
  --color-button: #1f0036;
  --color-white: #ffffff;

  /* Gray Scale */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ===== SECTION-SPECIFIC COLORS ===== */
  /* Problem Statement */
  --color-problem-card-bg: #e6f7ff;
  --color-problem-gradient-start: #e6dfff;
  --color-problem-gradient-end: #dbeafe;

  /* AI Mock Interview */
  --color-ai-mock-bg: #efe8f8;
  --color-ai-mock-accent: #7b5cff;

  /* Cover Letter */
  --color-cover-letter-bg: var(--color-ai-mock-bg);
  --color-cover-letter-accent: rgba(91, 217, 202, 1);

  /* Resume */
  --color-resume-bg: var(--color-white);
  --color-resume-accent: rgba(255, 175, 120, 1);
  /* Testimonials */
  --color-testimonials-bg: #e6f7ff;
  --color-testimonial-purple: #725bd9;
  --color-testimonial-teal: #5bd9ca;

  /* Universities */
  --color-universities-overlay: rgba(0, 0, 0, 0.6);
  --color-universities-text: #ffffff;
  --color-universities-cta-bg: #7b5cff;
  --color-universities-cta-hover: #6b4ce6;

  /* Pricing */
  --color-pricing-bg: var(--color-white);
  --color-pricing-card-bg: #e6dfff;
  --color-pricing-card-bg-featured: #f7f0ff;
  --color-pricing-card-border: rgba(123, 92, 255, 0.1);
  --color-pricing-card-border-featured: rgba(123, 92, 255, 0.3);
  --color-pricing-price-accent: #8a2be2;
  --color-pricing-cta-bg: #4b0082;
  --color-pricing-cta-ring: rgba(75, 0, 130, 0.2);
  --color-pricing-cta-hover: #3a0066;

  /* Resources */
  --color-resources-bg: #e6f7ff;
  --color-resources-card-bg: transparent;

  /* Webinar */
  --color-webinar-bg: hsl(260, 40%, 98%);
  --color-webinar-overlay: rgba(0, 0, 0, 0.35);
  --color-webinar-dot-1: hsl(26, 96%, 64%);
  --color-webinar-dot-2: hsl(268, 92%, 70%);

  /* CTA */
  --color-cta-section-bg: #c3acff;
  --color-footer-bg: #1e0c31;
  --color-text-on-dark: hsl(0, 0%, 100%);
  --color-button-bg: hsl(263, 75%, 20%);
  --color-button-hover: hsl(263, 80%, 25%);
  --color-button-ring: hsla(260, 90%, 60%, 0.5);
  --color-link: hsl(260, 28%, 14%);
  --color-link-hover: hsl(260, 36%, 22%);

  /* ===== TEXT COLORS ===== */
  --color-text-strong: hsl(260, 28%, 14%);
  --color-text-muted: hsl(260, 15%, 40%);
  --color-text-muted-light: hsl(260, 12%, 42%);
  --color-primary-dark: hsl(263, 75%, 20%);
  --color-primary-deep: hsl(263, 75%, 20%);

  /* ===== GRADIENTS ===== */
  /* Button gradient with border effect */
  --gradient-button-bg: var(--color-button);
  --gradient-button-border: none;

  /* Accent gradient */
  --gradient-accent: linear-gradient(
    90deg,
    hsl(260, 90%, 60%),
    hsl(295, 85%, 70%)
  );

  /* Text gradient */
  --gradient-text: linear-gradient(261.73deg, #ff51dc -3.73%, #602bff 95.41%);

  /* ===== SPACING SYSTEM ===== */
  --space-1: 0.25em;
  --space-2: 0.5em;
  --space-3: 0.75em;
  --space-4: 1em;
  --space-5: 1.25em;
  --space-6: 1.5em;
  --space-8: 2em;
  --space-10: 2.5em;
  --space-12: 3em;
  --space-16: 4em;
  --space-20: 5em;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.5em;
  --radius-base: 1em;
  --radius-lg: 1.25em;
  --radius-xl: 1.5em;
  --radius-2xl: 2em;
  --radius-avatar: 1.5em;
  --radius-button: 1.375em;
  --radius-card: 1em;
  --radius-pill: 2em;
  --radius-circle: 6.25em;
  --radius-video: 1.5em;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 0.125em 0.5em rgba(0, 0, 0, 0.08);
  --shadow-base: 0 0.375em 1.25em rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 0.625em 1.5625em rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 0.75em 2.5em rgba(0, 0, 0, 0.12);
  --shadow-card: 0 0.5em 2em rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 0.75em 2.5em rgba(0, 0, 0, 0.12);

  /* ===== TYPOGRAPHY ===== */
  --font-family: "DM Sans", system-ui, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-base: 1em;
  --font-size-lg: 1.125em;
  --font-size-xl: 1.25em;
  --font-size-2xl: 1.5em;
  --font-size-3xl: 1.875em;
  --font-size-4xl: 2.25em;
  --font-size-5xl: 3em;
  --font-size-6xl: 3.75em;
  --hero-title-font-size: 3.375em;
  --hero-section-font-size: 1.313em;

  /* Legacy Font Size Aliases */
  --fs-body: var(--font-size-base);
  --fs-sub: 1.125em;
  --fs-h2: 2.25em;
  --fs-h2-lg: 2.75em;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ===== LAYOUT ===== */
  --nav-height: 5em;
  --container-padding: var(--space-12);
  --container-max: 70em;
  --content-max-width: 65em;
  --card-min: 16em;
  --card-gap: 2em;

  /* ===== BREAKPOINTS ===== */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* ===== COMPONENT SIZES ===== */
  /* Video/Media */
  --video-width-sm: 50%;
  --video-width-md: 80%;
  --video-width-lg: 70%;
  --video-aspect: 56.25%;
  --thumb-size-xs: 20%;
  --thumb-size-sm: 30%;
  --thumb-size-lg: 40%;
  --play-size: 12%;
  --cta-max: 24em;
  --collage-max: 70%;

  /* Shapes */
  --shape-forward-size: 19.125em;
  --shape-forward-x: 0;
  --shape-forward-y: 0;
  --shape-human-size: 23.125em;
  --shape-human-x: 0%;
  --shape-human-y: 4%;
  --shape-left-width: 24%;
  --shape-left-top: 18%;
  --shape-left-left: -1%;
  --shape-right-width: 22%;
  --shape-right-top: 28%;
  --shape-right-right: 13%;

  /* Background Elements */
  --bg-curve-width: 40%;
  --bg-curve-height: 60%;
  --bg-curve-x: 65%;
  --bg-curve-y: 4%;
  --bg-grid-size: 25%;
  --bg-grid-x: 5%;
  --bg-grid-y: 50%;
  --bg-rect-size: 25%;
  --bg-rect-x: 28%;
  --bg-rect-y: 26%;

  /* CTA Layout */
  --section-padding-y: 6em;
  --section-padding-x: 0;
  --col-gap: 8%;
  --cta-width: 46%;
  --footer-height: 20%;
  --footer-vector-width: 100%;
  --footer-vector-left: 0%;
  --footer-vector-bottom: 0%;

  /* ===== IMAGES ===== */
  --img-main: "assets/webinar-section/main-image.jpg";
  --img-thumb-1: "assets/webinar-section/image-thumb-1.jpg";
  --img-thumb-2: "assets/webinar-section/image-thumb-2.jpg";
  --img-thumb-3: "assets/webinar-section/image-thumb-3.jpg";
  --img-thumb-4: "assets/webinar-section/image-thumb-4.jpg";
  --img-thumb-5: "assets/webinar-section/image-thumb-5.jpg";
  --img-play: "assets/webinar-section/play-icon.svg";
  --img-logo-overlay: "assets/webinar-section/logo-overlay.svg";
  --bg-shape-1: "assets/webinar-section/bg-rect-1.svg";
  --bg-shape-2: "assets/webinar-section/bg-rect-2.svg";
  --bg-shape-3: "assets/webinar-section/bg-rect-3.svg";

  /* ===== ANIMATIONS ===== */
  --transition-timing-function: cubic-bezier(0.32, 2, 0.55, 0.27);
}

/* CTA Section */
.cta-section {
  background: var(--color-cta-section-bg);
  position: relative;
  padding: var(--section-padding-y) var(--section-padding-x) 0
    var(--section-padding-x);
  overflow: hidden;
}

.cta-container {
  max-width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  position: relative;
  z-index: 2;
  height: 60%;
}

.cta-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  height: 50%;
  align-self: center;
  width: 80%;
  justify-self: start;

  .cta-left-button-container {
    width: 100%;
    display: flex;
    justify-content: start;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
}

.cta-title {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
  margin: 0;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-circle);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  transition:
    all 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  width: fit-content;
  box-shadow: var(--shadow-base);
  border: var(--gradient-button-border);
}

.btn-pill:hover {
  transform: translateY(0.0625em) scale(0.95);
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.15);
}

.btn-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.btn-pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: #1e0c31;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  border: 0.125em solid #1e0c31;
  transition:
    all 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  width: fit-content;
  cursor: pointer;
}

.btn-pill-secondary:hover {
  transform: translateY(0.0625em) scale(0.95);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

.cta-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 50%;
  align-self: center;
}

.cta-col {
  justify-self: start;
  align-self: start;
}

.cta-col h3 {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2) 0;
}

.cta-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cta-col li {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  transition: transform 0.2s var(--transition-timing-function);

  &:hover {
    transform: translateY(0.125em) scale(0.98);
  }
}

.cta-col a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: color 0.2s ease;
}

.cta-bottom {
  width: 80%;
  margin: 0 auto 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7%;
  margin-bottom: var(--space-6);
}

.contact-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}

.contact-info a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info .address {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
  margin: 0;
  font-weight: 600;
}

/* Background Shapes */
.bg-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.bg-shape-left {
  width: var(--shape-left-width);
  height: calc(var(--shape-left-width) + 1rem);
  top: var(--shape-left-top);
  left: var(--shape-left-left);
}

.bg-shape-right {
  width: var(--shape-right-width);
  height: calc(var(--shape-right-width) + 1rem);
  top: var(--shape-right-top);
  right: var(--shape-right-right);
}

/* Site Footer */
.cts-footer {
  background: var(--color-footer-bg);
  /* position: relative; */
  height: 30%;
  overflow: hidden;
}

.footer-vector {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center center;
  /* z-index: 1; */
}

@media screen and (max-width: 768px) {
  .cta-section {
    font-size: 0.9em;
    .cts-footer {
      .footer-vector {
        object-fit: contain;
      }
    }
    .cta-container {
      max-width: 90%;
      gap: 0;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      .cta-links {
        height: 100%;
        .cta-col {
          align-self: center;
        }
      }
    }

    .cta-left {
      .cta-left-button-container {
        flex-direction: column;
        align-items: stretch;

        .glow-button,
        .btn-pill-secondary {
          width: 100%;
          a {
            width: 100%;
            display: flex;
            justify-content: center;
          }
        }

        .btn-pill-secondary {
          display: flex;
          justify-content: center;
        }
      }
    }

    .cta-bottom {
      flex-direction: column;
      align-items: start;
      margin-inline: auto;
      width: 90%;
    }
  }

  .top-nav-bar {
    width: 90%;
    margin: 0 auto;
    padding: 0 !important;
    font-size: 0.9em;

    .top-nav-bar-right-menu {
      display: none;
    }

    .top-nav-bar-hamburger {
      display: flex;
      position: relative;
      img {
        width: 2.5em;
        height: auto;
        object-fit: contain;
        transition: opacity 0.3s ease;
      }
    }
  }
}

@media screen and (min-width: 769px) {
  .cta-section,
  .webinar-container {
    scroll-snap-align: start;
    height: 100svh;
    min-height: 40em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cta-section {
    .cta-title {
      font-size: var(--font-size-4xl);
    }
    .btn-pill {
      font-size: var(--font-size-base);
    }
    .footer-vector {
      object-position: left center;
    }
  }
}
@media (min-width: 1280px) {
  .cta-title {
    font-size: 54px;
  }
}

@media (min-width: 1440px) {
  .cta-title {
    font-size: 72px;
  }
}
@media (min-width: 1440px) and (max-height: 800px) {
  .cta-title {
    font-size: var(--font-size-6xl);
  }
}
@media (min-width: 1024px) and (max-height: 600px) {
  .cta-title {
    font-size: var(--font-size-4xl);
  }
}

.top-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Height includes safe area for notch (iPhone X and newer) */
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  background: transparent;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Padding accounts for safe areas on all sides (notch, rounded corners) */
  padding: env(safe-area-inset-top, 0px)
    calc(var(--container-padding) + env(safe-area-inset-right, 0px)) 0
    calc(var(--container-padding) + env(safe-area-inset-left, 0px));
  transition: color 0.3s ease;
}

/* White text for navigation when over universities section */
.top-nav-bar.nav-white-text .top-nav-bar-left-menu a,
.top-nav-bar.nav-white-text .top-nav-bar-right-menu a,
.top-nav-bar.nav-white-text .top-nav-bar-right-menu button {
  color: var(--color-white);
}

.top-nav-bar.nav-white-text .top-nav-bar-left-menu a:hover,
.top-nav-bar.nav-white-text .top-nav-bar-right-menu a:hover,
.top-nav-bar.nav-white-text .top-nav-bar-right-menu button:hover {
  color: var(--color-white);
  opacity: 0.8;
}

.top-nav-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex: 1;
}

.top-nav-bar-left-logo {
  position: relative;
  cursor: pointer;
}

.top-nav-bar-left-logo img {
  height: 2em;
  width: auto;
  transition: opacity 0.3s ease;
}

.nav-logo-white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Show white logo when nav has white text class */
.top-nav-bar.nav-white-text .nav-logo {
  opacity: 0;
}

.top-nav-bar.nav-white-text .nav-logo-white {
  opacity: 1;
}

/* Navigation button changes when in universities section */
.top-nav-bar.nav-white-text .btn-primary {
  background: var(--color-white);
  color: #1f0036;
  border: 0.125em solid var(--color-white);
}

.top-nav-bar.nav-white-text .btn-primary-icon {
  display: none;
}

.top-nav-bar.nav-white-text .btn-primary-icon-white {
  display: block;
}

/* Hamburger icon changes when nav has white text class */
.top-nav-bar.nav-white-text .hamburger-icon {
  opacity: 0;
}

.hamburger-icon-white {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.top-nav-bar.nav-white-text .hamburger-icon-white {
  opacity: 1;
}

.top-nav-bar.nav-white-text .top-nav-bar-hamburger-menu {
  background-color: var(--color-white);
  button {
    color: var(--color-footer-bg);
  }
}

.top-nav-bar-left-menu {
  display: flex;
  gap: var(--space-8);
}

.top-nav-bar-left-menu a {
  text-decoration: none;
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--font-size-base);
  transition:
    color 0.2s,
    background-color 0.2s,
    text-shadow 0.2s,
    transform 0.3s cubic-bezier(0.32, 2, 0.55, 0.27); /* springy "jump" effect */
}

.top-nav-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.top-nav-bar-right-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.top-nav-bar-right-menu a,
.top-nav-bar-right-menu button {
  text-decoration: none;
  line-height: 1.5;
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition:
    color 0.2s,
    background-color 0.2s,
    text-shadow 0.2s,
    transform 0.3s var(--transition-timing-function);
}

.top-nav-bar-right-menu a:hover,
.top-nav-bar-right-menu button:hover,
.top-nav-bar-left-menu a:hover {
  color: var(--color-primary);
  background-color: var(--primary-bg, transparent);
  text-shadow: 0 0.125em 0.625em rgba(51, 57, 240, 0.12);
  transform: translateY(0.0625em) scale(0.95); /* jump up and slightly enlarge */
}

.top-nav-bar-right-menu,
.top-nav-bar-left-menu {
  button:hover,
  a:hover {
    color: var(--color-primary);
    background-color: var(--primary-bg, transparent);
    text-shadow: 0 0.125em 0.625em rgba(51, 57, 240, 0.12);
    transform: translateY(0.0625em) scale(0.95); /* jump up and slightly enlarge */
  }
}

.top-nav-bar-right-menu {
  button {
    background: none;
    border: none;
    color: var(--color-fg);
    cursor: pointer;
    font-weight: 500;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition:
      color 0.2s,
      background-color 0.2s,
      text-shadow 0.2s,
      transform 0.3s var(--transition-timing-function); /* springy "jump" effect */
  }
  a {
    text-decoration: none;
    color: var(--color-fg);
    font-weight: 500;
    font-size: var(--font-size-base);
    transition:
      color 0.2s,
      background-color 0.2s,
      text-shadow 0.2s,
      transform 0.3s cubic-bezier(0.32, 2, 0.55, 0.27); /* springy "jump" effect */
  }
}

.top-nav-bar-hamburger {
  display: none;
  position: relative;
  .top-nav-bar-hamburger-menu {
    position: absolute;
    height: auto;
    inset: 3em 0em 0 -7em;
    background-color: var(--color-footer-bg);
    display: flex;
    flex-direction: column;
    width: 10em;
    height: 0;
    border-radius: var(--radius-base);
    overflow: hidden;
    transition:
      height 0.1s cubic-bezier(0.25, 0.1, 0.25, 1),
      overflow 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    button {
      text-decoration: none;
      color: var(--color-white);
      font-weight: 600;
      background: transparent;
      border: none;
      padding: var(--space-3) var(--space-2);
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-lg);
    }
  }
  &.menu-open {
    .top-nav-bar-hamburger-menu {
      overflow: visible;
      height: 7em;
    }
  }
}

/* Buttons */
.top-nav-bar-right {
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-button);
    color: var(--color-white);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-circle);
    font-weight: 800;
    font-size: var(--font-size-sm);
    transition:
      transform 0.2s var(--transition-timing-function),
      box-shadow 0.2s var(--transition-timing-function);
    position: relative;
  }

  .btn-primary-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: block;
  }

  .btn-primary-icon-white {
    width: 1em;
    height: 1em;
    object-fit: contain;
    display: none;
  }

  .btn-primary:hover {
    transform: translateY(0.0625em) scale(0.95);
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--color-fg);
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border: 0.125em solid #1e0c31;
    border-radius: var(--radius-circle);
    font-weight: 800;
    font-size: var(--font-size-sm);
    transition:
      all 0.2s var(--transition-timing-function),
      box-shadow 0.2s;
    cursor: pointer;
  }
}

.webinar-container {
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0));
  padding-bottom: var(--space-12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}

#root {
  display: block;
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

/* Video Modal Styles */
/*
 * VIDEO MODAL OVERLAY: Full-Screen Fixed Positioning
 * 
 * SPECIFICATION:
 * Fixed-position overlay covering entire viewport for video modal display.
 * 
 * TECHNICAL IMPLEMENTATION:
 * 
 * Positioning:
 * - position: fixed - Fixed to viewport, removed from document flow
 * - top: 0, left: 0 - Anchored to viewport origin
 * - width: 100% - Full viewport width
 * - height: 100svh - Full viewport height using small viewport unit
 * 
 * HEIGHT SPECIFICATION:
 * - Unit: 100svh (Small Viewport Height)
 * - Rationale: Fixed positioning requires explicit viewport unit specification
 * - Behavior: Covers entire viewport regardless of browser chrome state
 * - Stability: Maintains full coverage even when Safari UI appears/disappears
 * 
 * USE CASE:
 * Full-screen modal overlays require complete viewport coverage. Using 100svh
 * ensures the overlay remains fully visible on iOS Safari, where viewport
 * dimensions change dynamically based on browser chrome visibility.
 * 
 * ADDITIONAL PROPERTIES:
 * - background: rgba(0, 0, 0, 0.8) - Semi-transparent dark overlay
 * - backdrop-filter: blur(0.5em) - Visual blur effect
 * - z-index: 9999 - Maximum stacking order for overlay visibility
 */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Height: 100% of small viewport height for full-screen coverage */
  height: 100svh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(0.5em);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: var(--space-4);
}

.video-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.video-modal-container {
  position: relative;
  width: 100%;
  max-width: 56.25em; /* 16:9 aspect ratio for 1000px width */
  max-height: 90vh;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.video-modal-overlay.show .video-modal-container {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2.5em;
  height: 2.5em;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.video-modal-content {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
}

.video-modal-content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.video-hidden {
  display: none;
}

/* Video Loading State */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.loading-spinner {
  width: 3em;
  height: 3em;
  border: 0.25em solid rgba(255, 255, 255, 0.3);
  border-top: 0.25em solid var(--color-white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-3);
}

.loading-text {
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 500;
  margin: 0;
  text-align: center;
}

/* Hide loading when video is ready */
.video-modal-content.loaded .video-loading {
  display: none;
}

.video-modal-content.loaded .video-hidden {
  display: block;
}

/* Glowing Animation for Buttons - Active on Load */
.glow-button {
  position: relative;
  z-index: 0;
  overflow: visible;
  outline: none;
  border: 0;
  border-radius: 50px;
}

.glow-button::before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(1px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 1;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.2s var(--transition-timing-function);
  border-radius: inherit;
  pointer-events: none;
}

.glow-button::after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  left: 0;
  top: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glow-button:hover::before,
.glow-button:hover::after,
.glow-button:hover {
  opacity: 1;
  transform: translateY(0.0625em) scale(0.95);
}

/* Ensure glow works with link buttons */
.top-nav-bar-right-menu a.glow-button {
  position: relative;
  display: inline-block;
}

/* Ensure glow works with hamburger menu buttons */
.top-nav-bar-hamburger-menu button.glow-button {
  position: relative;
}

/* Ensure parent containers don't clip the glow */
.top-nav-bar-right,
.top-nav-bar-right-menu,
.top-nav-bar-hamburger-menu,
.hero-buttons,
.testimonials-cta-container,
.cta-left-button-container {
  overflow: visible;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* ===================================================================
 * CONTACT FORM MODAL STYLES
 * ===================================================================
 */
.contact-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.5em);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: var(--space-4);
}

.contact-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.contact-modal-container {
  position: relative;
  width: 100%;
  max-width: 32em;
  max-height: 90vh;
  background: rgb(255 255 255);
  border-radius: var(--radius-lg);
  box-shadow: 0 2em 4em rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 92, 255, 0.3) transparent;
}

.contact-modal-overlay.show .contact-modal-container {
  transform: scale(1);
}

.contact-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 2em;
  height: 2em;
  background: transparent;
  border: none;
  color: rgba(30, 12, 49, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.contact-modal-close:hover {
  color: rgba(30, 12, 49, 0.8);
  transform: scale(1.1);
}

.contact-modal-content {
  padding: var(--space-8) var(--space-6);
  position: relative;
}

.contact-modal-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  text-align: left;
  margin: 0 0 var(--space-3) 0;
}

.contact-modal-subtitle {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.8);
  text-align: left;
  margin: 0;
  line-height: 1.4;
}

.contact-modal-subtitle-secondary {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.8);
  text-align: left;
  margin: 0 0 var(--space-6) 0;
  line-height: 1.4;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-form-group-icon {
  position: relative;
}

.contact-form-group-icon .input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.contact-form-group-icon input {
  padding-left: calc(var(--space-3) + 1.75em + var(--space-2));
}

.contact-form-group input,
.contact-form-group textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(30, 12, 49, 0.15);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: rgba(30, 12, 49, 1);
  transition: all 0.2s ease;
  background: var(--color-white);

  &#contact-email {
    padding-inline-start: calc(var(--space-4) + 1.5em);
  }
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
  outline: none;
  border-color: rgba(30, 12, 49, 0.3);
  box-shadow: 0 0 0 0.125em rgba(30, 12, 49, 0.05);
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
  color: rgba(30, 12, 49, 0.4);
}

.contact-form-group textarea {
  resize: vertical;
  min-height: 6em;
}

.contact-submit-btn {
  align-self: flex-end;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: rgba(30, 12, 49, 1);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 50%;
}

.contact-submit-btn:hover:not(:disabled) {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.25em 1em rgba(30, 12, 49, 0.3);
}

.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-submit-btn .spinner {
  animation: spin 1s linear infinite;
}

/* Contact Success and Error States */
.contact-success,
.contact-error {
  text-align: center;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.contact-hidden {
  display: none !important;
}

.contact-success h3,
.contact-error h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: rgba(30, 12, 49, 1);
  margin: 0;
}

.contact-success p,
.contact-error p {
  font-size: var(--font-size-base);
  color: rgba(30, 12, 49, 0.7);
  margin: 0;
  max-width: 25em;
}

.contact-retry-btn {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: rgba(30, 12, 49, 1);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
}

.contact-retry-btn:hover {
  transform: var(--button-hover-transition);
  box-shadow: 0 0.25em 1em rgba(30, 12, 49, 0.3);
}

/* Mobile Responsive for Contact Modal */
@media (max-width: 768px) {
  .contact-modal-container {
    max-width: 95%;
  }

  .contact-modal-content {
    padding: var(--space-6) var(--space-4);
  }

  .contact-modal-title {
    font-size: var(--font-size-xl);
  }

  .contact-submit-btn {
    width: 100%;
    justify-content: center;
  }
}