/* Design Tokens */
: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: linear-gradient(
        var(--color-button),
        var(--color-button)
      )
      padding-box,
    linear-gradient(77.12deg, #7e53ff 14.21%, #d3a3ff 112.16%) border-box;
  --gradient-button-border: 0.3125em solid transparent;

  /* 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: "Inter", "DM Sans", system-ui, sans-serif;
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Arial", 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);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  line-height: 1.5;
  color: var(--color-fg);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

a:focus-visible{
  outline: none;
}

/* ===================================================================
 * iOS VIEWPORT IMPLEMENTATION - TECHNICAL SPECIFICATION
 * ===================================================================
 * 
 * SPECIFICATION: Viewport Units and Safe Area Insets for iOS Safari
 * 
 * IMPLEMENTATION DETAILS:
 * 
 * 1. VIEWPORT UNITS (100svh)
 *    - Specification: CSS Values and Units Module Level 4
 *    - svh (Small Viewport Height): Represents the smallest possible 
 *      viewport height when browser chrome (address bar, toolbar) is visible
 *    - Calculation: min(100vh, actual viewport height with chrome visible)
 *    - Behavior: Static value that doesn't change during scroll
 *    - Use case: Full-height sections, fixed overlays, scroll containers
 * 
 * 2. SAFE AREA INSETS
 *    - Specification: CSS Environment Variables Module Level 1
 *    - Function: env(safe-area-inset-{top|right|bottom|left})
 *    - Values: Pixel values representing unsafe display areas
 *    - Activation: Requires viewport-fit=cover in viewport meta tag
 *    - Fallback: Second parameter provides default (0px for non-iOS devices)
 *    - Typical values:
 *      * iPhone X/11: ~44px top, ~34px bottom
 *      * iPhone 12+: ~47px top, ~34px bottom
 *      * iPad Pro: ~20px top/bottom (landscape)
 * 
 * 3. VIEWPORT-FIT=COVER
 *    - Specification: CSS Round Display Level 1
 *    - Behavior: Extends layout to screen edges, enabling safe area insets
 *    - Implementation: <meta name="viewport" content="viewport-fit=cover">
 *    - Effect: Activates env() safe area variables in CSS
 * 
 * TECHNICAL RATIONALE:
 * - iOS Safari implements dynamic viewport: height changes when browser 
 *   chrome shows/hides during scroll events
 * - Modern iOS devices have physical constraints (notches, rounded corners)
 *   requiring content inset calculations
 * - Fixed positioning requires explicit viewport unit handling
 * 
 * BROWSER SUPPORT:
 * - iOS Safari 11.0+: Full support for safe area insets
 * - iOS Safari 15.4+: Full support for svh viewport units
 * - Desktop browsers: svh behaves identically to vh (no chrome dynamics)
 * - Legacy browsers: Falls back gracefully to vh (polyfill available)
 * 
 * IMPLEMENTATION FILES:
 * - HTML: viewport meta tag with viewport-fit=cover attribute
 * - CSS: env() function usage with safe area calculations
 * - CSS: 100svh unit for all viewport-height declarations
 * 
 * REFERENCE:
 * - https://www.w3.org/TR/css-values-4/#viewport-relative-units
 * - https://drafts.csswg.org/css-env-1/
 * - https://webkit.org/blog/7929/designing-websites-for-iphone-x/
 * =================================================================== */

/* Container */
/*
 * VIEWPORT HEIGHT: 100svh Implementation
 * 
 * SPECIFICATION:
 * Uses the Small Viewport Height (svh) unit for container minimum height.
 * 
 * TECHNICAL DETAILS:
 * - Unit: 100svh = 100% of the smallest possible viewport height
 * - Calculation: Measured when browser chrome (address bar, toolbar) is visible
 * - Stability: Value remains constant regardless of scroll position or chrome state
 * - Behavior: Ensures container fills viewport even when Safari UI is maximized
 * 
 * IMPLEMENTATION RATIONALE:
 * iOS Safari implements dynamic viewport sizing where the actual viewport height
 * changes based on browser chrome visibility. The svh unit provides a static
 * reference to the smallest viewport dimension, ensuring consistent layout
 * regardless of UI state transitions during scroll events.
 * 
 * COMPATIBILITY:
 * - Modern browsers: svh renders as specified
 * - Legacy browsers: Falls back to vh (standard viewport height)
 * - iOS Safari 15.4+: Native support
 * 
 * USE CASE:
 * Full-height container that maintains consistent dimensions across all
 * browser chrome states, preventing layout shifts and content overflow.
 */
.container {
  min-height: 100svh;
  background: linear-gradient(135deg, var(--color-bg) 0%, #e6dfff 100%);
}

/* Navigation */
/*
 * FIXED NAVIGATION BAR: Safe Area Inset Implementation
 * 
 * SPECIFICATION:
 * Fixed positioning with height and padding calculations using CSS Environment
 * Variables for safe area insets on iOS devices.
 * 
 * TECHNICAL DETAILS:
 * 
 * Height Calculation:
 * - Formula: calc(var(--nav-height) + env(safe-area-inset-top, 0px))
 * - Components:
 *   * var(--nav-height): Base navigation bar height (5em)
 *   * env(safe-area-inset-top, 0px): Top inset for notch/sensor housing
 * - Result: Total height accommodates both base navigation and unsafe display area
 * 
 * Padding Specification:
 * - Top: env(safe-area-inset-top, 0px) - Insets content below notch region
 * - Right: calc(var(--container-padding) + env(safe-area-inset-right, 0px))
 * - Left: calc(var(--container-padding) + env(safe-area-inset-left, 0px))
 * - Bottom: 0px (no inset required for top navigation)
 * 
 * SAFE AREA INSETS:
 * - env(safe-area-inset-top): Pixel value for top unsafe area (notch/sensors)
 *   * iPhone X/11: ~44px
 *   * iPhone 12+: ~47px
 *   * Non-notched devices: 0px (fallback)
 * - env(safe-area-inset-left/right): Horizontal insets for rounded corners
 *   * Critical in landscape orientation
 *   * Prevents content cutoff at screen edges
 * 
 * POSITIONING:
 * - position: fixed - Removed from document flow, fixed to viewport
 * - top: 0 - Anchored to viewport top edge
 * - z-index: 100 - Ensures visibility above page content
 * 
 * REQUIREMENTS:
 * - HTML viewport meta tag must include viewport-fit=cover
 * - Without viewport-fit=cover, env() returns 0 (safe area disabled)
 * - Fallback values ensure graceful degradation on non-iOS devices
 * 
 * BROWSER SUPPORT:
 * - iOS Safari 11.0+: Full env() support with viewport-fit=cover
 * - Other browsers: env() returns fallback value (0px), standard behavior
 */
.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);
  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.9); /* 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.25em) scale(0.9); /* 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: 6em;
    }
  }
}

/* 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-3) var(--space-6);
    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.9);
  }

  .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;
  }
}

/* Hero Section */
/*
 * CONTENT CONTAINER: Viewport Height and Offset Calculation
 * 
 * SPECIFICATION:
 * Full-height scrollable container with top padding offset for fixed navigation.
 * 
 * TECHNICAL IMPLEMENTATION:
 * 
 * Padding-Top Calculation:
 * - Formula: calc(var(--nav-height) + env(safe-area-inset-top, 0px))
 * - Purpose: Offsets content to prevent overlap with fixed navigation bar
 * - Components:
 *   * var(--nav-height): Base navigation height (5em)
 *   * env(safe-area-inset-top, 0px): Top safe area for notch accommodation
 * - Result: Content positioned below both navigation bar and unsafe display area
 * 
 * Height Specification:
 * - Unit: 100svh (Small Viewport Height)
 * - Behavior: Static height equal to smallest possible viewport dimension
 * - Stability: Maintains consistent height regardless of browser chrome state
 * - Purpose: Full viewport coverage without dynamic height fluctuations
 * 
 * SCROLL BEHAVIOR:
 * - overflow-y: scroll - Enables vertical scrolling
 * - scroll-snap-type: y mandatory - Snap points for section scrolling
 * - scrollbar-width: none - Hides scrollbar while maintaining scrollability
 * 
 * SPACING COORDINATION:
 * - Padding-top matches total navigation bar height (base + safe area)
 * - Ensures seamless visual transition from navigation to content
 * - Prevents content from being obscured by fixed navigation
 * 
 * VIEWPORT UNIT RATIONALE:
 * Using 100svh instead of 100vh provides stable dimensions on iOS Safari, where
 * the viewport height changes dynamically as browser chrome appears/disappears.
 * The svh unit references the smallest viewport size, ensuring content remains
 * fully accessible in all UI states.
 */
.content {
  /* Top offset: navigation base height + top safe area inset */
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  /* Height: 100% of small viewport height (stable on iOS Safari) */
  height: 100svh;
  /* display: flex;
  align-items: center;
  flex-direction: column; */
  /* padding-inline: var(--space-16); */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

.hero-content {
  width: 90%;
  /* max-width: 75em; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5.5fr 7fr;
  align-items: center;
  padding-inline: var(--space-16);
  position: relative;

  .hero-bg-shape {
    width: 3.5%;
    height: 3.5%;
    position: absolute;
    z-index: 1;
    pointer-events: none;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    &.bg-shape-1 {
      opacity: 0.5;
      top: 15%;
      left: 7%;
    }

    &.bg-shape-2 {
      bottom: 15%;
      right: 5%;
    }
  }
}

.hero-left {
  z-index: 2;
}

.hero-title {
  font-size: var(--hero-title-font-size);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--color-fg);
}

.highlight-primary {
  color: var(--color-primary);
}

.highlight-secondary {
  color: var(--color-secondary);
}

.hero-description {
  font-size: var(--hero-section-font-size);
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
  max-width: 31.25em;
  margin-left: 0;
  margin-right: 0;

  @media screen and (min-width: 1440px) {
    font-size: var(--font-size-xl);
  }
}

.hero-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  flex-wrap: wrap;

  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    border-radius: var(--radius-circle);
    padding: var(--space-2) var(--space-4);
    font-weight: 800;
    border: var(--gradient-button-border);
    font-size: var(--hero-section-font-size);
    transition: transform 0.2s var(--transition-timing-function),
      box-shadow 0.2s var(--transition-timing-function);

    &:hover {
      transform: translateY(-0.25em) scale(1.05);
      box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
    }
  }

  .btn-primary {
    background: var(--gradient-button-bg);
    color: var(--color-white);
  }

  .btn-secondary {
    background: transparent;
    border: 0.125em solid #1e0c31;
    color: #1e0c31;
  }

  .btn-primary-icon,
  .btn-secondary-icon {
    width: 1.3em;
    height: 1.3em;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

/* Hero Right - Responsive Visual Section */
/*
 * HERO VISUAL SECTION: Padding Offset with Safe Area
 * 
 * SPECIFICATION:
 * Visual content container with calculated top padding for navigation and safe area.
 * 
 * TECHNICAL DETAILS:
 * 
 * Padding-Top Calculation:
 * - Formula: calc(var(--nav-height) + var(--space-8) + env(safe-area-inset-top, 0px))
 * - Components:
 *   * var(--nav-height): Fixed navigation bar height (5em)
 *   * var(--space-8): Additional vertical spacing (2em)
 *   * env(safe-area-inset-top, 0px): Top safe area inset for notch clearance
 * - Purpose: Positions visual content below navigation and unsafe display regions
 * 
 * IMPLEMENTATION:
 * - Base padding: var(--space-8) 0 - Standard vertical spacing
 * - Override: padding-top uses calculated value for precise positioning
 * - Result: Visual elements (images, graphics) remain fully visible on all devices
 * 
 * COORDINATION:
 * Works in coordination with .content padding-top to ensure consistent
 * vertical spacing throughout the hero section layout.
 */
.hero-right {
  padding: var(--space-8) 0;
  /* Top padding: nav height + spacing + top safe area */
  padding-top: calc(
    var(--nav-height) + var(--space-8) + env(safe-area-inset-top, 0px)
  );
  width: 100%;
  height: 100%;
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("./assets/hero-section-right-img.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Problem Statement Section */
.problem-statement-section {
  background: var(--color-white);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) 0 var(--space-4);
  overflow: hidden;
}

.problem-statement-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("./assets/problem-statement-section/section-background-img.svg");
  background-size: 100% 80%;
  background-position: left 5%;
  background-repeat: no-repeat;
  z-index: 1;
}

.problem-statement-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.problem-statement-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0;
  max-width: 25em;
}

.problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  width: 75%;
}

.problem-card {
  background: var(--color-problem-card-bg);
  border-radius: var(--radius-base);
  padding: var(--space-6);
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.08);
  transition: transform 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  text-align: left;
  border: 0.0625em solid rgba(59, 130, 246, 0.1);
}

.problem-card:hover {
  transform: translateY(-0.25em) scale(1.05);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

.problem-card-icon {
  margin: 0 0 var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.problem-card-icon img {
  width: 2.5em;
  height: 2.5em;
  object-fit: contain;
  opacity: 0.8;
}

.problem-card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-fg);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.3;
}

.problem-card-description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.5;
}

.problem-solution {
  font-size: var(--font-size-xl);
  color: var(--color-fg);
  margin: 0;
  max-width: 40em;
  font-weight: 600;
}

.problem-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);

  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
}

.problem-cta-btn img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

/* AI Mock Interview Section */
.ai-mock-interview-section {
  background: var(--color-ai-mock-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4) 0 var(--space-4);
  overflow: hidden;
}

.ai-mock-interview-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0 0 var(--space-8) 0;
  text-align: center;
  max-width: 25em;
}

.ai-mock-interview-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 80%;
}

.ai-mock-interview-text {
  justify-self: flex-end;
  align-self: center;
  text-align: left;
  max-width: 25em;
}

.ai-mock-interview-subtitle {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--space-3) 0;
  position: relative;
  display: inline-block;
}

.ai-mock-interview-subtitle {
  .highlight {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -0.15em;
      left: 0;
      right: 0;
      height: 0.1em;
      background: var(--color-ai-mock-accent);
      border-radius: 0.09375em;
    }
  }
}

.ai-mock-interview-description {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.6;
}

.ai-mock-interview-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);
  text-decoration: none;

  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
}

.ai-mock-interview-cta img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.ai-mock-interview-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.ai-mock-interview-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cover Letter Section */
.cover-letter-section {
  background: var(--color-cover-letter-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4) 0 var(--space-4);
  overflow: hidden;
}

.cover-letter-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0 0 var(--space-8) 0;
  text-align: center;
  max-width: 25em;
}

.cover-letter-content {
  display: grid;
  grid-template-columns: 1fr 2fr;

  width: 80%;
}

.cover-letter-text {
  text-align: left;
  max-width: 25em;
  justify-self: flex-end;
  align-self: center;
}

.cover-letter-subtitle {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--space-3) 0;
  position: relative;
  display: inline-block;
}

.cover-letter-subtitle {
  .highlight {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -0.15em;
      left: 0;
      right: 0;
      height: 0.1em;
      background: var(--color-cover-letter-accent);
      border-radius: 0.09375em;
    }
  }
}

.cover-letter-description {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-4) 0;
}

.cover-letter-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);
  text-decoration: none;
  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
}

.cover-letter-cta img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.cover-letter-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cover-letter-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-base);
}

/* Resume Section */
.resume-section {
  background: var(--color-resume-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4) 0 var(--space-4);
  overflow: hidden;
}

.resume-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0 0 var(--space-8) 0;
  text-align: center;
}

.resume-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 80%;
}

.resume-text {
  text-align: left;
  justify-self: flex-end;
  align-self: center;
  max-width: 25em;
}

.resume-subtitle {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--space-3) 0;
  display: inline-block;
}

.resume-subtitle {
  .highlight {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -0.15em;
      left: 0;
      right: 0;
      height: 0.1em;
      background: var(--color-resume-accent);
      border-radius: 0.09375em;
    }
  }
}

.resume-description {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.6;
}

.resume-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);
  text-decoration: none;
  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
}

.resume-cta img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.resume-illustration {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.resume-illustration img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-base);
}

/* Testimonials Section */
.testimonials-section {
  background: var(--color-testimonials-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4) 0 var(--space-4);
  overflow: hidden;
}

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

.bg-shape-top-left {
  top: 13%;
  left: 5%;
  width: 3.5%;
  height: 3.5%;
  background-image: url("./assets/testimonial-section/background-top-left-rectangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-middle-left {
  top: 30%;
  left: 10%;
  width: 20%;
  height: 20%;
  background-image: url("./assets/testimonial-section/background-middle-left-rectangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-middle-right {
  top: 27%;
  right: 28%;
  width: 2%;
  height: 2%;
  background-image: url("./assets/testimonial-section/background-middle-right-rectangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-bottom-left {
  bottom: 35%;
  left: 12%;
  width: 3%;
  height: 3%;
  background-image: url("./assets/testimonial-section/back-ground-bottom-left-circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-bottom-right {
  bottom: 25%;
  right: 5%;
  width: 5%;
  height: 5%;
  background-image: url("./assets/testimonial-section/background-bottom-right-rectangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-bottom-right-union {
  bottom: 10%;
  right: 6%;
  width: 25%;
  height: 25%;
  background-image: url("./assets/testimonial-section/background-bottom-right-union.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-shape-twisted-rope {
  bottom: 56%;
  left: -05%;

  width: 20%;
  height: 20%;
  background-image: url("./assets/testimonial-section/background-twisted-rope.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.testimonials-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0 0 var(--space-8) 0;
  text-align: center;
  max-width: 25em;
  position: relative;
  z-index: 2;
}

.testimonials-container {
  gap: var(--space-6);
  width: 80%;
  position: relative;
  z-index: 2;
  overflow-x: auto;
  padding: 0 var(--space-4);

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials-swiper .swiper-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  transition-timing-function: ease-in-out;
}

.testimonials-swiper .swiper-slide {
  width: auto;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

/* Smooth scrolling enhancements */
.testimonials-swiper {
  overflow: hidden;
}

/* .testimonials-swiper .swiper-slide-active {
  transform: scale(1.02);
} */

.swiper-pagination-container {
  padding: var(--space-4);
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-block: var(--space-3);
}

/* Swiper Pagination Styles */
.swiper-pagination-container .swiper-pagination {
  text-align: center;
  position: static;
  height: 1.5em;
  font-size: inherit;
  .swiper-pagination-bullet {
    width: 0.75em;
    height: 0.75em;
    background: var(--color-gray-400);
    opacity: 0.5;
    margin: 0 var(--space-1);
    transition: all 0.3s ease;
  }
  .swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
    /* transform: scale(1.1); */
  }
  &.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    transform: none;
  }
}

/* Swiper Navigation Styles */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
  color: white;
  background: transparent;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  transition: all 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

.testimonials-swiper .swiper-button-next:hover,
.testimonials-swiper .swiper-button-prev:hover {
  transform: translateY(-50%) scale(1.1);
}

.testimonials-swiper .swiper-button-next {
  right: -1.25em;
}

.testimonials-swiper .swiper-button-prev {
  left: -1.25em;
}

.testimonials-swiper .swiper-button-next:after,
.testimonials-swiper .swiper-button-prev:after {
  font-size: 1em;
  font-weight: bold;
}

.testimonials-container .testimonial-card,
.testimonials-container .feature-card {
  /* width: 40%; */
  border-radius: var(--radius-base);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  /* min-width: 30%; */
  /* flex-shrink: 1; */
}

.testimonial-card-purple {
  background: var(--color-testimonial-purple);
  color: var(--color-white);
}

.testimonial-card-teal {
  background: var(--color-testimonial-teal);
  color: var(--color-white);
}

.feature-card-teal {
  background: #a7f3d0;
}

.feature-card-purple {
  background: #e9d5ff;
}

.feature-card-orange {
  background: #fed7aa;
}

.testimonial-avatar,
.feature-card-icon {
  margin: 0 var(--space-4) auto;
  width: 6em;
  height: 6em;
  overflow: hidden;
}

.testimonial-avatar {
  border-radius: 50%;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.testimonial-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: var(--space-4) var(--space-4);
  color: inherit;
  width: fit-content;
}

.testimonial-quote,
.feature-card-text {
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 0 var(--space-4);
  color: inherit;
  text-align: left;
}

.partners-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  display: none;
}

.partner-logo {
  height: 2em;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity 0.2s ease;
}

.partner-logo:hover {
  opacity: 0.8;
}

.testimonials-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.testimonials-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);
  text-decoration: none;
}

.testimonials-cta:hover {
  transform: translateY(-0.25em) scale(1.05);
  box-shadow: var(--shadow-lg);
}

.testimonials-cta img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

/* Pricing Section */
.pricing-section {
  background: var(--color-pricing-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4) var(--space-8) var(--space-2);
  overflow: hidden;
}

.pricing-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0 0 var(--space-4) 0;
  text-align: center;
  max-width: 25em;
  position: relative;
  z-index: 2;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);

  max-width: 75em;
  list-style: none;
  position: relative;
  z-index: 2;
}

.pricing-card {
  background: var(--color-pricing-card-bg);
  border-radius: var(--radius-base);
  padding: var(--space-6);
  box-shadow: var(--shadow-base);
  border: 0.0625em solid var(--color-pricing-card-border);
  transition: transform 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-0.25em) scale(1.05);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  border: 0.125em solid var(--color-pricing-card-border-featured);
  box-shadow: 0 0 0.5em rgba(123, 92, 255, 0.15);
  background: var(--color-pricing-card-bg-featured);
}

.pricing-card-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 var(--space-1) 0;
}

.pricing-card-price {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-pricing-price-accent);
  margin: 0 0 var(--space-1) 0;
}

.pricing-card-price-gradient {
  background: linear-gradient(261.73deg, #ff51dc -3.73%, #602bff 95.41%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card-description {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.5;
}

.pricing-features {
  list-style: none;
  margin: 0 0 var(--space-4) 0;
  text-align: left;
  flex-grow: 1;
}

.pricing-features li {
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  margin: 0 0 var(--space-1) 0;
  position: relative;
}

.pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.32, 2, 0.55, 0.27);
  margin-top: auto;
  width: fit-content;
  margin-inline: auto;
}

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

.pricing-section .bg-forward-icon {
  top: var(--shape-forward-y);
  left: var(--shape-forward-x);
  width: var(--shape-forward-size);
  height: var(--shape-forward-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pricing-section .bg-human-icon {
  top: var(--shape-human-y);
  right: var(--shape-human-x);
  width: var(--shape-human-size);
  height: var(--shape-human-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Resources Section */
.resources-section {
  background: var(--color-resources-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8) 0 var(--space-8);
  overflow: hidden;
}

.resources-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-strong);
  margin: 0 0 var(--space-3) 0;
  text-align: center;
  max-width: var(--content-max-width);
  position: relative;
  z-index: 2;
}

.resources-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  width: 80%;
  list-style: none;
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-4);
}

.resources-card {
  background: var(--color-resources-card-bg);
  padding: var(--space-8);
  transition: transform 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;

  a {
    text-decoration: none;
  }

  &:hover {
    transform: translateY(-0.25em) scale(1.05);
  }
}

.resources-card-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.resources-card-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-base);
  margin-bottom: var(--space-6);
}

.resources-card-caption {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-strong);
  margin: 0;
  line-height: 1.4;
}

.resources-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.resources-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-button-bg);
  color: var(--color-white);
  border: var(--gradient-button-border);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.2s var(--transition-timing-function);
  box-shadow: var(--shadow-base);
  gap: var(--space-2);

  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
  .arrow-icon {
    width: 1em;
    height: 1em;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

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

.resources-section .bg-grid {
  top: var(--bg-grid-y);
  left: var(--bg-grid-x);
  width: var(--bg-grid-size);
  height: var(--bg-grid-size);
}

.resources-section .bg-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resources-section .bg-rect {
  top: var(--bg-rect-y);
  left: var(--bg-rect-x);
  width: var(--bg-rect-size);
  height: var(--bg-rect-size);
}

.resources-section .bg-rect img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resources-section .bg-curve {
  top: var(--bg-curve-y);
  left: var(--bg-curve-x);
  width: var(--bg-curve-width);
  height: var(--bg-curve-height);
}

.resources-section .bg-curve img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Webinar Section */
.webinar-section {
  background: var(--color-webinar-bg);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-4) var(--space-5) var(--space-4);
  overflow: hidden;
}

.webinar-title {
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-strong);
  text-align: center;
  max-width: var(--container-max);
  position: relative;
  margin-bottom: var(--space-2);
  z-index: 2;
}

.webinar-subtitle {
  font-size: var(--fs-sub);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 70%;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-4);
}

.webinar-collage {
  position: relative;
  width: 70%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 30em;
}

/* Main Video Card */
.webinar-main-video {
  width: 50%;
  height: 70%;
  margin: 0 auto;
  border-radius: var(--radius-video);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 3;
  /* max-height: 30em; */
  /* max-width: 30em; */
  position: relative;
}

.webinar-main-video-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.webinar-main-image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  justify-self: center;
  align-self: center;
}

.webinar-video-overlay {
  grid-column: 1;
  grid-row: 1;
  background: var(--color-webinar-overlay);
  z-index: 1;
  justify-self: center;
  align-self: center;
}

.webinar-play-icon {
  grid-column: 1;
  grid-row: 1;
  width: var(--play-size);
  height: auto;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.2s var(--transition-timing-function),
    box-shadow 0.2s ease;
  justify-self: center;
  align-self: center;
}

.webinar-play-icon:hover {
  transform: translateY(-0.25em) scale(1.05);
  box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
}

.webinar-logo-overlay {
  justify-self: center;
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  transform: translateX(-10%) translateY(-5%);
  object-fit: contain;
  max-width: 100%;
}

/* Thumbnail Cards */
.webinar-thumbnail {
  position: absolute;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  max-width: 50%;
  max-height: 50%;
  .webinar-thumb-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
}

.webinar-thumbnail-1 {
  width: var(--thumb-size-xs);
  height: var(--thumb-size-sm);
  bottom: 74%;
  right: 13%;

  .webinar-thumb-image {
    object-fit: cover;
    object-position: 20% 20%;
  }
}

.webinar-thumbnail-2 {
  width: var(--thumb-size-xs);
  top: 4%;
  left: 10%;
}

.webinar-thumbnail-3 {
  width: var(--thumb-size-xs);
  top: 81%;
  left: 78%;
}

.webinar-thumbnail-4 {
  width: var(--thumb-size-xs);
  top: 78%;
  right: 80%;
}

.webinar-thumbnail-5 {
  width: var(--thumb-size-xs);
  top: 40%;
  left: 90%;
}

/* Decorative Dots */
.webinar-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.webinar-dot-1 {
  width: 0.75em;
  height: 0.75em;
  background-image: url("./assets/webinar-section/bg-rect-1.svg");
  left: 18%;
  top: 60%;
}

.webinar-dot-2 {
  width: 1em;
  height: 1em;
  background-image: url("./assets/webinar-section/bg-rect-2.svg");
  right: 74%;
  top: 115%;
}

.webinar-dot-3 {
  width: 0.8em;
  height: 0.8em;
  background-image: url("./assets/webinar-section/bg-rect-3.svg");
  left: 100%;
  bottom: 106%;
}

/* Quote and CTA */
.webinar-quote {
  font-size: var(--fs-body);
  color: var(--color-text-strong);
  margin: 0 0 var(--space-2) 0;
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: 6 00;
}

.webinar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-button-bg);
  color: var(--color-webinar-bg);
  border: var(--gradient-button-border);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.32, 2, 0.55, 0.27);
  box-shadow: var(--shadow-soft);
  max-width: var(--cta-max);
  position: relative;
  z-index: 2;
}

.webinar-cta:hover {
  transform: translateY(-0.25em) scale(1.05);
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.15);
}

/* 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;
  }
}

.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-3) var(--space-6);
  border-radius: var(--radius-circle);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  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.25em) scale(1.05);
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.15);
}

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

.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;
}

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

.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; */
}

/* Universities & Career Centers Section */
.universities-career-section {
  position: relative;
  width: 100%;
  background-image: url("./assets/universities-career-section/bg-image.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  overflow: hidden;
}

.universities-career-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-universities-overlay);
  z-index: 1;
}

.universities-title {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-universities-text);
  margin: 0 0 var(--space-6) 0;
  position: relative;
  z-index: 2;
  max-width: 25em;
}

.universities-description {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-universities-text);
  margin: 0 0 var(--space-8) 0;
  position: relative;
  z-index: 2;
  max-width: 40em;
  opacity: 0.95;
}

.universities-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gradient-button-bg);
  color: var(--color-universities-text);
  border: var(--gradient-button-border);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-circle);
  font-weight: 700;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.32, 2, 0.55, 0.27);
  position: relative;
  z-index: 2;
  overflow: visible;
  text-decoration: none;

  &:hover {
    transform: translateY(-0.25em) scale(1.05);
    box-shadow: 0 0.5em 2em rgba(123, 92, 255, 0.18);
  }
}

.universities-cta::before {
  content: "";
  position: absolute;
  top: -0.25em;
  left: -0.25em;
  right: -0.25em;
  bottom: -0.25em;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-circle);
  z-index: -3;
  animation: glow-wave 2s ease-in-out infinite;
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.3);
}

.universities-cta::after {
  content: "";
  position: absolute;
  top: -0.75em;
  left: -0.75em;
  right: -0.75em;
  bottom: -0.75em;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-circle);
  z-index: -2;
  animation: glow-wave 2s ease-in-out infinite 0.3s;
  box-shadow: 0 0 1em rgba(255, 255, 255, 0.2);
}

/* Glow Wave Animation */
@keyframes glow-wave {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.02);
  }
  50% {
    transform: scale(1.08);
  }
  75% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* 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;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (width < 200px) {
  .container {
    font-size: 0.3em;
  }
}

/*
@media (min-width: 1023px) and (max-width: 1440px){
  .container {
    font-size: 0.8em;
  }
  .webinar-collage{
    max-height: 25em;
  }
}

@media (min-width: 770px) and (max-height: 800px) {
  .container {
    font-size: 0.8em;
  }
}
  */

@media screen and (max-width: 768px) {
  .top-nav-bar {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    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;
      }
    }
  }

  .safe-area-top-offset-mobile {
    display: block;
    /* top safe area is height of top navigation bar */
    height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    background: transparent;
  }

  .hero-content {
    font-size: 0.9em;
    padding-inline: 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);

    .hero-right {
      padding: 0;
    }
    .hero-left {
      text-align: left;
      justify-content: center;
    }
    .hero-visual img {
      max-height: 100%;
      aspect-ratio: 440/414;
    }
    .hero-buttons {
      flex-direction: column;
      align-items: center;
      .btn-primary,
      .btn-secondary {
        width: 75%;
        justify-content: center;
      }
    }
  }

  .problem-statement-section {
    padding-block: var(--space-12);
    .problem-statement-title {
      width: 90%;
    }
  }
  .problem-cards {
    grid-template-columns: 1fr;
    .problem-card {
      min-height: 14em;
    }
  }
  .ai-mock-interview-section {
    padding-block: var(--space-12);
    .ai-mock-interview-title {
      width: 90%;
    }
    .ai-mock-interview-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      width: 90%;
      gap: var(--space-8);
      max-width: initial;
    }
    .ai-mock-interview-cta-container {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .ai-mock-interview-text {
      justify-self: center;
    }
  }

  .resume-section {
    padding-block: var(--space-12);
    .resume-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      width: 90%;
      gap: var(--space-10);
    }
    .resume-title {
      width: 90%;
      margin-inline: auto;
    }
    .resume-text {
      justify-self: center;
      width: 90%;
      grid-row: 1 /2;
      max-width: initial;
    }
    .resume-cta-container {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .resume-cta {
      font-size: var(--font-size-base);
      padding: var(--space-3) var(--space-5);
      display: flex;
      width: fit-content;
    }
  }

  .cover-letter-section {
    padding-block: var(--space-12);
    .cover-letter-content {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      width: 90%;
      gap: var(--space-10);
    }
    .cover-letter-text {
      justify-self: start;
      max-width: initial;
    }
    .cover-letter-subtitle {
      font-size: var(--font-size-2xl);
    }
    .cover-letter-cta-container {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .cover-letter-cta {
      font-size: var(--font-size-base);
    }
  }

  .testimonials-section {
    font-size: 0.9em;
    .testimonials-container {
      width: 100%;
    }
  }

  /*
   * UNIVERSITIES CAREER SECTION: Viewport Height Specification
   * 
   * TECHNICAL DETAILS:
   * - Unit: min-height: 100svh (Small Viewport Height)
   * - Purpose: Full-height section with stable dimensions on iOS Safari
   * - Behavior: Ensures consistent minimum height regardless of browser chrome state
   * 
   * IMPLEMENTATION:
   * Uses 100svh for consistent viewport height calculation, maintaining
   * section visibility across all iOS Safari UI states (chrome visible/hidden).
   */
  .universities-career-section {
    font-size: 0.9em;
    min-height: 100svh;
  }
  .pricing-section {
    padding-block: var(--space-16);
  }
  .pricing-cards {
    width: 90%;
    max-width: 25em;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: var(--space-10);

    .pricing-card {
      min-height: initial;
    }
  }
  .testimonials-section {
    font-size: 0.9em;
    padding-block: var(--space-16);
    .testimonials-container {
      width: 90%;
    }
  }
  .resources-section {
    padding-block: var(--space-12);
    .resources-cards {
      width: 100%;
      gap: 0;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 1fr);
    }
    .resources-cta {
      padding: var(--space-5) var(--space-8);
    }
  }
  /*
   * WEBINAR SECTION: Minimum Height Specification
   * 
   * TECHNICAL DETAILS:
   * - Unit: min-height: 100svh (Small Viewport Height)
   * - Purpose: Full-height section that accommodates dynamic browser chrome
   * - Behavior: Maintains minimum viewport height even when Safari UI is maximized
   * 
   * IMPLEMENTATION:
   * Using 100svh ensures the webinar section remains fully visible and properly
   * sized on iOS Safari, where viewport dimensions change based on browser chrome
   * visibility. Prevents content cutoff during scroll state transitions.
   */
  .webinar-section {
    font-size: 0.9em;
    min-height: 100svh;
    padding-block: var(--space-12);
    .webinar-title {
      width: 90%;
    }
    .webinar-subtitle {
      max-width: 90%;
    }
    .webinar-collage {
      height: 15em;
      width: 80%;
      margin-bottom: 5em;
      .webinar-main-video {
        height: 100%;
        width: 90%;
      }
      .webinar-play-icon {
        width: 20%;
      }
      .webinar-thumbnail-1 {
        width: 40%;
        height: 30%;
        bottom: 74%;
        right: 13%;
        left: 85%;
      }
      .webinar-thumbnail-2 {
        width: 30%;
        top: 4%;
        left: -18%;
        right: 94%;
      }
      .webinar-thumbnail-3 {
        width: 35%;
        top: 88%;
        left: 87%;
      }
      .webinar-thumbnail-4 {
        width: 35%;
        top: 78%;
        right: 91%;
      }
      .webinar-thumbnail-5 {
        width: 35%;
        width: 29%;
        top: 40%;
        left: 90%;
      }
    }
  }
  .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-bottom {
      flex-direction: column;
      align-items: start;
      margin-inline: auto;
      width: 90%;
    }
  }
}

@media (min-width: 540px) and (max-width: 768px) {
  .hero-content {
    grid-template-rows: repeat(2, 480px);

    .hero-buttons {
      .btn-primary,
      .btn-secondary {
        width: 55%;
        justify-content: center;
      }
    }
  }
  .testimonials-section .testimonials-container {
    width: 80%;
  }
  .resources-section .resources-cards {
    width: 80%;
  }
  .webinar-section {
    .webinar-collage {
      height: 25em;
    }
  }
  .cover-letter-section {
    .cover-letter-title {
      margin-bottom: 0;
      max-width: 80%;
    }
    .cover-letter-content {
      width: 80%;
    }
  }
  .resume-section {
    .resume-title {
      width: 80%;
      margin-inline: auto;
      margin-bottom: 0;
    }
    .resume-content {
      width: 80%;
    }
  }
  .ai-mock-interview-section {
    .ai-mock-interview-title {
      width: 80%;
      margin-inline: auto;
      margin-bottom: 0;
    }
    .ai-mock-interview-content {
      max-width: 80%;
    }
    .ai-mock-interview-text {
      max-width: 100%;
    }
  }
}

@media (min-width: 769px) {
  /*
   * RESPONSIVE SECTIONS: Viewport Height Specification
   * 
   * SPECIFICATION:
   * Full-height section implementation for desktop and tablet viewports.
   * 
   * TECHNICAL DETAILS:
   * - Media query: min-width: 769px (tablet and desktop breakpoint)
   * - Height unit: 100svh (Small Viewport Height)
   * - Scroll behavior: scroll-snap-align: start for snap point alignment
   * 
   * IMPLEMENTATION:
   * All major content sections use 100svh for consistent viewport-height
   * calculation. This ensures sections fill the entire viewport height while
   * maintaining stability across browser chrome state changes.
   * 
   * SECTIONS AFFECTED:
   * - Hero content, problem statement, AI mock interview
   * - Cover letter, resume builder, testimonials
   * - Pricing, resources, universities, webinar
   * - CTA sections and career center sections
   * 
   * VIEWPORT UNIT BEHAVIOR:
   * - Desktop browsers: 100svh equals 100vh (no dynamic chrome)
   * - iOS Safari: 100svh provides stable height regardless of chrome visibility
   * - Result: Consistent full-height sections across all platforms
   * 
   * SCROLL SNAP COORDINATION:
   * Each section snaps to viewport start, creating full-screen section scrolling
   * experience. Height stability ensures snap points remain accurate during
   * browser chrome state transitions.
   */
  /* all sections */
  .hero-content,
  .problem-statement-section,
  .ai-mock-interview-section,
  .cover-letter-section,
  .resume-section,
  .testimonials-section,
  .pricing-section,
  .resources-section,
  .universities-section,
  .webinar-section,
  .cta-section,
  .universities-career-section {
    height: 100svh;
    scroll-snap-align: start;
    min-height: 42em;
  }
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .hero-content {
    grid-template-columns: 4fr 5fr;
    font-size: 0.9em;
  }
  .problem-cards {
    width: 90%;
  }
  .ai-mock-interview-section {
    font-size: 0.8em;
  }
  .resume-section {
    font-size: 0.8em;
  }
  .testimonials-section {
    font-size: 0.9em;
  }
  .pricing-section {
    font-size: 0.9em;
  }
  .pricing-cards {
    width: 90%;
  }
  .testimonials-container {
    width: 90%;
  }
  .resources-section {
    font-size: 0.9em;
    .resources-cards {
      width: 90%;
      gap: 0;
    }
    .resources-cta {
      padding: var(--space-5) var(--space-8);
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-content {
    font-size: 0.8em;
    grid-template-columns: 1fr 1.5fr;
  }
  .problem-statement-section {
    font-size: 0.8em;
  }
  .ai-mock-interview-section {
    font-size: 0.8em;
  }
  .ai-mock-interview-content {
    grid-template-columns: 1fr 1fr;
  }
  .resume-section {
    font-size: 0.8em;
  }
  .resume-content {
    grid-template-columns: 1fr 1fr;
  }
  .cover-letter-section {
    font-size: 0.8em;
  }
  .cover-letter-content {
    grid-template-columns: 1fr 1fr;
  }
  .testimonials-section {
    font-size: 0.9em;
  }
  .pricing-section {
    font-size: 0.8em;
  }
  .pricing-cards {
    width: 90%;
  }
  .resources-section {
    font-size: 0.8em;
    .resources-cards {
      width: 100%;
      gap: 0;
    }
    .resources-cta {
      padding: var(--space-4) var(--space-6);
    }
  }
  .webinar-section {
    font-size: 0.9em;
    .webinar-collage {
      height: 40%;
      margin-bottom: var(--space-6);
      .webinar-main-video {
        height: 80%;
      }
    }
  }
  .cta-section {
    .cta-title {
      font-size: var(--font-size-4xl);
    }
    .btn-pill {
      font-size: var(--font-size-base);
    }
    .footer-vector {
      object-position: left center;
    }
  }
  .testimonials-section {
    .testimonials-container {
      font-size: 0.7em;
    }
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .hero-content {
    .hero-description {
      font-size: var(--font-size-xl);
    }
    .hero-title {
      font-size: var(--font-size-6xl);
    }
    .hero-buttons {
      .btn-primary,
      .btn-secondary {
        font-size: var(--font-size-lg);
      }
    }
  }
  .webinar-section {
    .webinar-collage {
      height: 40%;
      .webinar-main-video {
        height: 80%;
      }
    }
  }
  .cover-letter-cta {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .webinar-section {
    .webinar-collage {
      height: 50%;
      .webinar-main-video {
        height: 90%;
      }
    }
  }
}

/* @media (orientation: landscape) and (max-width: 1023px) {
  .container {
    font-size: 0.6em;
  }
   .hero-visual {
    img {
      width: 32em;
      height: auto;
    }
  }
  .hero-content,
  .problem-statement-section,
  .ai-mock-interview-section,
  .cover-letter-section,
  .resume-section,
  .testimonials-section,
  .pricing-section,
  .resources-section,
  .universities-section,
  .webinar-section,
  .universities-career-section {
    font-size: 0.8em;
    scroll-snap-align: start;
    padding: var(--nav-height);
    min-height: 100svh;
  }

  .hero-content {
    .hero-left {
      font-size: 0.9em;
      align-self: center;
    }
  }

  .webinar-collage {
    max-height: 25em;
    .webinar-main-video {
      max-height: 17em;
      margin-bottom: 3em;
    }
    .webinar-logo-overlay {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  .cta-section {
    min-height: 100svh;
    scroll-snap-align: start;
    padding-bottom: 0;
    padding-top: 10em;
    .cta-links {
      align-self: start;
    }
    .cta-container {
      margin-bottom: 3em;
    }
    .cta-bottom {
      margin-bottom: 3em;
    }
  }
} */

@media (min-width: 1280px) {
  .hero-title {
    font-size: 72px;
  }
  .cta-title {
    font-size: 54px;
  }
}

@media (min-width: 1440px) {
  .cta-title {
    font-size: 72px;
  }
}

@media (min-width: 1280px) and (max-width: 1388px) {
  .cover-letter-cta {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 1024px) and (max-width: 1120px) {
  .cover-letter-cta {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 1440px) and (max-height: 800px) {
  .webinar-collage {
    height: 50%;
  }
  .cta-title {
    font-size: var(--font-size-6xl);
  }
}

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