/* ==========================================
   DESIGN SYSTEM & CUSTOM PROPERTIES
   ========================================== */
:root {
  /* Colors */
  --bg-color: #EBF2FF;
  --text-title: #5674B5; /* EXACT User Specified Hero Text Font Color */
  --text-nav: #4a5568;
  --color-white: #ffffff;
  --color-blue: #547cd6;
  --color-blue-hover: #4162b3;
  --color-badge-bg: rgba(60, 64, 72, 0.82); /* Semi-transparent charcoal for transparentish badge */
  
  /* Fonts */
  --font-main: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
  
  /* Shadows */
  --shadow-header: 0 12px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.1);
  --shadow-badge: 0 10px 24px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease;
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-nav);
  overflow-x: hidden;
  overflow-y: auto; /* Active scrolling for multi-section viewport */
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* ==========================================
   HERO CONTAINER (WAVY BACKGROUND - EXACTLY 100VH)
   ========================================== */
.hero-container {
  position: relative;
  height: 100vh; /* Fixed height to fit desktop screens */
  max-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Even vertical distribution */
  background-image: url('images/hero/waves-background.png');
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 100% auto;
  padding-bottom: 2.5vh;
  overflow: hidden; /* No scrollbars allowed in hero itself */
}

/* ==========================================
   STICKY FLOATING HEADER (Calibrated Width & Fatter Height)
   ========================================== */
.site-header {
  width: 90%;
  max-width: 800px; /* Reduced width to make the navbar shorter horizontally */
  height: min(82px, 9vh); /* Fatter height to give it a more prominent profile */
  position: fixed; /* Sticky position relative to viewport */
  top: 5.5vh; /* Floating distance from top */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border-radius: 9999px;
  box-shadow: var(--shadow-header);
  /* padding-left: 0 so the logo starts exactly at the left edge */
  /* padding-right: 0.55rem so the button sits tight to the right edge */
  padding: 0 0.55rem 0 0; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  flex-shrink: 0;
  overflow: hidden; /* Clips the logo image inside the header's rounded corners */
}

.header-logo {
  display: flex;
  align-items: center;
  height: 100%; /* Span full height of the header */
}

.header-logo img {
  height: 100%; /* Touches the top and bottom of the navbar exactly */
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  gap: 1.85rem;
  align-items: center;
}

.nav-link {
  font-size: min(0.95rem, 1.4vh); /* Increased nav link font size slightly */
  font-weight: 500;
  color: var(--text-nav);
  text-decoration: none;
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-blue);
}

.btn-download {
  background: var(--color-blue);
  color: var(--color-white);
  font-size: min(0.92rem, 1.35vh); /* Calibrated button font size */
  font-weight: 600;
  /* Increased vertical padding: taller button filling the header height with tighter borders */
  padding: min(1.05rem, 1.5vh) min(2rem, 2.6vw); 
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(84, 124, 214, 0.2);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-download:hover {
  background: var(--color-blue-hover);
  transform: translateY(-1px);
}

/* ==========================================
   TITLE (873px x 160px - Premium Reveal & Metallic Finish)
   ========================================== */
.section-title {
  font-size: min(68px, 6.5vh); /* Scale font size by height, capped at 68px */
  font-weight: 500; /* EXACT Figma Medium Weight */
  text-align: center;
  margin-top: 21vh; /* Original margin-top to clear sticky header */
  margin-bottom: 2.5vh;
  line-height: min(80px, 7.8vh); /* Scale line-height by height, capped at 80px */
  letter-spacing: -0.01em; 
  max-width: 873px; /* EXACT Figma Width */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;

  /* Premium Metallic Blue Color Gradient */
  background: linear-gradient(135deg, #435b83 0%, #5674B5 45%, #768fb7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Load Animations: Smooth Slide up Reveal */
  opacity: 0;
  transform: translateY(16px);
  animation: heroReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   INFINITE MARQUEE CARDS ROW (Original Sizing)
   ========================================== */
.marquee-container {
  width: 100vw;
  overflow: hidden;
  margin-bottom: 2.5vh; /* Responsive margin */
  position: relative;
  padding-block: 1.5vh; 
  flex-shrink: 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  /* Seamless loop animation */
  animation: scrollMarquee 40s linear infinite;
  will-change: transform; /* Hardware Acceleration: prevents sub-pixel layout rounding jumps */
  transform: translate3d(0, 0, 0); /* Forces GPU compositing layer */
}

/* Pause marquee scroll on hover */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* 
   SEAMLESS LOOP MATHEMATICAL CALIBRATION:
   By assigning a standard margin-right: 16px directly to each station card instead of using a flexbox gap,
   the total track width is exactly 10 * (card_width + 16px).
   This ensures that translating by exactly -50% shifts the track by precisely 5 cards and their 5 margins.
   This aligns Set 2's starting card position perfectly with Set 1's starting position, removing
   the sub-pixel snap calculations and eliminating loop jumps entirely.
*/
@keyframes scrollMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); 
  }
}

.station-card {
  flex-shrink: 0;
  width: auto;
  height: 38vh; /* Reverted to ORIGINAL card size */
  max-height: 439px; /* Reverted to ORIGINAL max height */
  aspect-ratio: 352 / 439; /* Maintain EXACT Figma Card Aspect Ratio */
  border-radius: 20px; /* EXACT Figma Card Corner Radius */
  margin-right: 16px; /* EXACT Figma Card spacing margin to allow clean -50% loop translation */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
  cursor: pointer;
  
  /* 
     Ultra-smooth, fluid sine-wave vertical bobbing animation.
     Uses custom cubic-bezier (sine curve) to ensure the vertical float
     is completely fluid and organic without any abrupt speed transitions.
  */
  animation: waveBob 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

.station-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pause wave bobbing on hover and zoom */
.station-card:hover {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.03) !important;
  box-shadow: var(--shadow-card-hover);
  z-index: 10;
}

/* Staggered animation delays for card wave motion */
.card-1 { animation-delay: 0s; }
.card-2 { animation-delay: 0.6s; }
.card-3 { animation-delay: 1.2s; }
.card-4 { animation-delay: 1.8s; }
.card-5 { animation-delay: 2.4s; }
.card-6 { animation-delay: 3.0s; }
.card-7 { animation-delay: 3.6s; }
.card-8 { animation-delay: 4.2s; }

@keyframes waveBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* Smooth vertical rise */
  }
}

.badge-wrapper-link {
  text-decoration: none;
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.badge-wrapper {
  display: flex;
  justify-content: center;
  margin-top: auto; 
  margin-bottom: 2.5vh; /* Bottom padding relative to height */
  flex-shrink: 0;
}

.download-badge {
  background-color: var(--color-badge-bg); /* Transparentish charcoal background */
  backdrop-filter: blur(12px); /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px; /* Tighter corner radius for smaller size */
  box-shadow: var(--shadow-badge);
  width: 370px; /* Reduced from 400px for a tighter, sexier silhouette */
  height: 90px; /* Reduced height from 100px */
  padding: 8px; /* Tighter outer padding */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Left-aligned content blocks */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Glass border */
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, box-shadow 0.4s ease;
  
  /* CTA breathing pulse animation to make it draw attention as call to action */
  animation: ctaPulse 3.5s infinite ease-in-out;
}

/* Subtle hover pop-out effects */
.download-badge:hover {
  transform: scale(1.05) translateY(-2px);
  background-color: rgba(60, 64, 72, 0.92);
  box-shadow: 0 16px 36px rgba(84, 124, 214, 0.25);
}

@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  }
  50% {
    transform: scale(1.025); /* Subtle scale pulse */
    box-shadow: 0 12px 30px rgba(84, 124, 214, 0.25); /* Rich blueish ambient glow */
  }
}

/* Left blue block logo container with active sweep reflection shine */
.badge-logo-block {
  /* Sweeping linear gradient highlight */
  background: linear-gradient(110deg, #3385c3 35%, #62b1ec 50%, #3385c3 65%);
  background-size: 200% 100%;
  animation: brandShine 4.5s infinite ease-in-out;
  
  border-radius: 16px; /* Tighter rounded corners for compact scale */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px; /* Reduced from 150px for compact width fit */
  height: 100%;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
}

@keyframes brandShine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.badge-logo-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px 6px;
}

/* Center down arrow icon squircle */
.badge-download-icon {
  width: 38px; /* Reduced from 44px */
  height: 38px; /* Reduced from 44px */
  border-radius: 10px; /* Tighter squircle */
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(60, 64, 72, 0.95);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
  margin-left: 16px; /* Reduced gap from 18px */
}

.badge-download-icon svg {
  width: 18px; /* Reduced from 20px */
  height: 18px; /* Reduced from 20px */
  
  /* Looping downward arrow animation to draw eye to CTA */
  animation: arrowBounce 1.6s infinite ease-in-out;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px); /* Move down slightly to prompt action */
  }
}

/* Right content details */
.badge-text-stars {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  padding-left: 12px; /* Reduced gap from 14px */
  justify-content: center;
}

.badge-label {
  font-size: 0.85rem; /* Sized down text from 0.88rem */
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: var(--font-main);
  white-space: nowrap;
}

.badge-stars {
  display: flex;
  gap: 0.16rem;
  color: #ffb800; /* Rich gold stars color */
  margin-top: 0.25rem;
}

.badge-stars svg {
  width: 12px; /* Sized down stars from 14px */
  height: 12px;
  fill: currentColor;
}

/* ==========================================
   CHANNELS SECTION (No 1 in Kenya)
   ========================================== */
.channels-section {
  background-color: var(--color-white); /* Pure white contrast background */
  padding-top: 8rem;
  padding-bottom: 6rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

.channels-title {
  /* EXACT Figma Heading Styles */
  font-size: min(80px, 8vw); 
  line-height: min(105px, 10.5vw);
  font-weight: 600; /* SemiBold */
  color: #282828; /* EXACT Figma text color */
  text-align: center;
  font-family: var(--font-main);
  letter-spacing: -0.02em;
  max-width: 560px; /* EXACT Figma Width */
  width: 90%;
}

.channels-title .highlight-blue {
  color: #219cbf; /* Brand cyan/blue color from logo */
}

.channels-description {
  /* EXACT Figma Paragraph Styles */
  font-size: min(24px, 2.4vw);
  line-height: min(36px, 3.6vw);
  font-weight: 400; /* Regular */
  color: #282828; /* EXACT Figma text color */
  text-align: center;
  max-width: 1045px; /* EXACT Figma Width */
  width: 90%;
  margin: 2rem auto 3.5rem auto;
}

/* Capsule Search input */
.search-bar-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.search-bar-wrapper {
  width: 90%;
  max-width: 600px;
  height: 60px;
  background: #f0f3f6; /* Soft light gray capsule block */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  position: relative;
  transition: var(--transition-smooth);
}

.search-bar-wrapper:focus-within {
  background: #e8ecf1;
  box-shadow: 0 0 0 3px rgba(84, 124, 214, 0.1);
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 88%;
  height: 100%;
  font-size: 1rem;
  font-family: var(--font-main);
  color: #2d3748;
}

.search-input::placeholder {
  color: #718096;
}

.search-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a5568;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.search-icon-box svg {
  width: 22px;
  height: 22px;
}

/* Filter Tag Buttons (Figma Rectangular styled, border-radius 4px) */
.filter-tags-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 5.5rem;
  flex-wrap: wrap;
}

.filter-tag-btn {
  background: var(--color-white);
  border: 1px solid #cbd5e1;
  border-radius: 4px; /* EXACT Figma Rectangle shape (not pills) */
  padding: 0.6rem 1.6rem;
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: #475569;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transition: var(--transition-smooth);
}

.filter-tag-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.arrow-indicator {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

.filter-tag-btn:hover .arrow-indicator {
  color: #475569;
}

/* Logo Strip Bar (Gradient Background + Non-Fat Calibrated Height) */
.logo-strip-bar {
  width: 100%;
  height: min(200px, 22vh); /* Tighter height so the gradient strip is not fat */
  /* Re-calibrated gradient: Solid white on either side (up to 18%/82%) and more pronounced #219CBF (42% opacity) in center */
  background: linear-gradient(to right, 
    #ffffff 0%, 
    #ffffff 18%, 
    rgba(33, 156, 191, 0.42) 50%, 
    #ffffff 82%, 
    #ffffff 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent native scrollbars from showing */
  position: relative;
}

/* Infinite Auto-Scrolling Marquee Track for logos (Uses 3 sets: translates exactly -33.3333%) */
.logo-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scrollLogos 35s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Pause logo auto-scroll on hover */
.logo-strip-bar:hover .logo-strip-track {
  animation-play-state: paused;
}

@keyframes scrollLogos {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / 3), 0, 0); /* Perfectly seamless 3-set loop offset preventing width gaps */
  }
}

/* 
   EXACT FIGMA DIMENSIONS FOR LOGO BOXES: 315px x 167px
   Every item uses a clean border-right to align divider lines, making it scroll perfectly at -33.3333%.
*/
.logo-item {
  width: min(315px, 24vw); /* EXACT Figma Width */
  height: min(167px, 13vw); /* EXACT Figma Height */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 1rem;
  /* Light blue brand lines separating the logos */
  border-right: 1px solid rgba(84, 124, 214, 0.18);
}

.logo-item img {
  max-height: min(90px, 7vw); /* Logos are kept nice and big */
  max-width: 90%;
  width: auto;
  object-fit: contain;
  filter: grayscale(15%) opacity(90%);
  transition: var(--transition-smooth);
}

/* Interactive hover on brand logos */
.logo-item img:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.05);
}

/* ==========================================
   LISTEN ANYWHERE SECTION (Exact Figma Dimensioning)
   ========================================== */
.listen-section {
  background-color: var(--bg-color); /* Soft light blue/gray background matching hero */
  padding-top: 6rem;
  padding-bottom: 0; /* Align directly with split row */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* Alignment layout wrapper: centers the container block, and aligns elements inside it left */
.listen-card-container {
  width: 90%;
  max-width: 940px; /* Reduced width of box to match Figma layout scale */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left-aligns Title + Card to matching start edge */
  margin-bottom: 100px; /* Spacing increased to 100px to separate card further from bottom row */
}

.listen-main-title {
  /* EXACT Figma Header Styles */
  font-size: min(70px, 7.5vh); /* EXACT Figma font-size: 70px */
  line-height: min(105px, 10.5vh); /* EXACT Figma line-height: 105px */
  font-weight: 400; /* EXACT Figma weight: 400 (Regular) */
  color: #000000; 
  text-align: left; /* EXACT Figma Alignment: Left-aligned starting where card starts */
  font-family: var(--font-main);
  letter-spacing: -0.02em;
  margin-bottom: 3.5rem;
  width: 100%;
}

/* Overlapping Feature Card (How to Listen) - Reduced Width and Height */
.how-to-listen-card {
  background: var(--color-white);
  border-radius: min(88px, 8vw); /* EXACT Figma border radius: 88px */
  width: 100%; /* Spans full width of 940px outer container */
  height: min(480px, 50vh); /* Reduced height from 556px to 480px per user request */
  /* EXACT Figma Drop Shadow (0px 4px 95.5px 19px rgba(0, 0, 0, 0.13)) */
  box-shadow: 0 4px 95.5px 19px rgba(0, 0, 0, 0.13);
  padding: 60px; /* Adjusted padding from 80px to 60px to match smaller card bounds */
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: visible; /* CRITICAL: Enables the image to extend outside boundary edges */
  z-index: 3; /* Render above the background but behind/interacting with Boda card masking */
}

.how-to-listen-content {
  width: 100%;
  max-width: 660px; /* Sized to fit text box at 660px width, causing figma-perfect sentence wrapping */
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.how-to-listen-title {
  /* EXACT Figma Sub-title Styles */
  font-size: min(36px, 3.8vh); /* EXACT Figma font-size: 36px */
  line-height: 1.2; 
  font-weight: 600; /* EXACT Figma style: SemiBold */
  color: #5674B5; /* Brand Blue */
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.how-to-listen-description {
  /* EXACT Figma Body Styles */
  font-size: min(24px, 2.3vh); /* EXACT Figma font-size: 24px */
  line-height: min(36px, 3.5vh); /* EXACT Figma line-height: 36px */
  font-weight: 400; /* EXACT Figma style: Regular */
  color: #282828; /* EXACT Figma text color */
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 660px; /* Matches figma text block wrap boundaries perfectly at 940px scale */
}

.app-store-badges-row {
  display: flex;
  gap: 0.75rem; /* Squeezed gap to pull store badges closer together */
  justify-content: flex-start;
}

.app-store-badge-link {
  display: inline-block;
  transition: var(--transition-smooth);
}

.app-store-badge-link img {
  height: min(60px, 6vh); /* Fixed height so width is auto, preventing transparent clipping white gaps */
  width: auto;
  display: block;
}

.app-store-badge-link:hover {
  transform: translateY(-2px);
}

/* Absolute Overlapping Image positioning - Restored Wrapper Width for large lady display */
.how-to-listen-image-wrapper {
  width: 58%; /* Restored to original large size wrapper space */
  position: absolute;
  bottom: 0;
  right: 0px; /* Aligned tight to right edge of card */
  height: 100%;
  pointer-events: none; /* Let clicks pass through to standard bounds */
  z-index: 3;
}

.woman-overlapping-img {
  position: absolute;
  bottom: -100px; /* Extends exactly 100px below the card container to match the 100px margin bottom offset */
  right: -240px; /* Shifted to right with negative margin, leaving clear space from screen edge but clearing text completely */
  height: 120%; /* SCALING: Scales dynamically in proportion to the card's height, preserving her large shape */
  width: auto;
  object-fit: contain;
  object-position: bottom right;
}

/* Bottom Split Feature Grid Row (60/40 block) - Expanded to Full Viewport Width (100vw) */
.split-feature-row {
  width: 100vw; /* Full width viewport */
  max-width: none;
  height: 37.5vw; /* Calibrated aspect ratio: 648px height / 1728px canvas width = 37.5vw */
  max-height: 648px; /* EXACT Figma Height limit */
  min-height: 440px; /* Minimum height limit to maintain content breathing room */
  display: flex;
  overflow: hidden; /* Clips outer margins */
  position: relative;
  z-index: 4; /* Higher z-index: overlays the Boda block exactly over the woman's flat bottom line, masking the crop */
}

.feature-text-col {
  width: 60%; /* Expanded to 60% to match Figma proportions */
  height: 100%;
  /* Vibrant sky blue to dark navy gradient covering the full bleed column */
  background: linear-gradient(135deg, #3eaad3 0%, #163065 100%);
  /* Shifted leftward: 5vw padding left to keep margin on the left tight and elegant */
  padding: 4.5rem 0 4.5rem 5vw; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--color-white);
  position: relative;
}

/* Geometric pattern positioned exactly per Figma inspect specs (Left: 1.5vw, Opacity 18% for visibility, Width: 341px, Height: 512px) */
.feature-text-col::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1.5vw; /* Positioned close to left edge, sitting beautifully behind the left-shifted text */
  width: min(341px, 22vw); /* EXACT Figma Width */
  height: min(512px, 33vw); /* EXACT Figma Height */
  background-image: url('images/listen/background.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.18; /* Increased opacity from 0.05 to 0.18 so it is clearly visible on the gradient */
  pointer-events: none;
  z-index: 1;
}

.feature-content-wrapper {
  max-width: min(755px, 43.7vw); /* EXACT Figma text block width */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.feature-title {
  /* EXACT Figma Header Styles: Poppins Medium 500, Size 60px, Line-height 105px (60/1728 = 3.47vw, 105/1728 = 6.08vw) */
  font-size: min(60px, 3.47vw); 
  font-weight: 500;
  line-height: min(105px, 6.08vw);
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
  font-family: var(--font-main);
}

.feature-description {
  /* EXACT Figma Body Styles (20px size / 1728px canvas = 1.15vw) */
  font-size: min(20px, 1.15vw); 
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
  max-width: 100%; /* Fills full text block container */
}

.btn-feature-cta {
  background-color: var(--color-white);
  color: #1a3c75;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 0.85rem 2.5rem;
  border-radius: 6px; /* Rectangular rounded corners matching Figma */
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: var(--transition-smooth);
}

.btn-feature-cta:hover {
  background-color: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-image-col {
  width: 40%; /* Reduced to 40% to match Figma proportions */
  height: 100%;
}

.feature-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Shift crop upward to focus Boda riders faces */
}

/* ==========================================
   RESPONSIVE DESIGN BREAKPOINTS (PREMIUM SCALING)
   ========================================== */
@media (max-width: 1024px) {
  .site-header {
    width: 90%;
    top: 4vh; /* Adjusted top for tablets */
  }
  .section-title {
    font-size: min(54px, 5.5vh); /* Sized down title for medium viewports */
    line-height: min(64px, 6.5vh);
    margin-top: 18vh;
  }
  .channels-section {
    padding-block: 5.5rem;
  }
  .logo-strip-bar {
    height: 140px;
  }
  .logo-item {
    width: 240px;
    height: 120px;
  }
  .logo-item img {
    max-height: 70px;
  }
  
  /* Tablet layout for Listen section */
  .listen-card-container {
    margin-bottom: 40px;
  }
  .how-to-listen-card {
    padding: 3rem;
    height: auto;
  }
  .how-to-listen-image-wrapper {
    right: 2rem;
  }
  .woman-overlapping-img {
    height: 420px;
    right: -80px; /* Bring her closer on tablet screen width to prevent screen edge collision */
  }
  .feature-text-col {
    padding: 3rem 3rem 3rem max(3rem, calc(50vw - 384px));
  }
  .feature-text-col::before {
    left: 40px; /* Secure placement on tablets */
  }
}

@media (max-width: 768px) {
  body {
    overflow: auto; /* Reverted back to scrollable mode for mobile screen widths */
  }
  .hero-container {
    height: auto;
    min-height: 100vh;
    max-height: none;
    overflow: auto;
    padding-bottom: 2rem;
    background-size: auto 55%;
  }
  .site-header {
    height: 70px;
    margin-top: 1.5rem;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .header-nav {
    display: none; /* Hide header link row on mobile screen width */
  }
  .section-title {
    font-size: 38px;
    line-height: 48px;
    margin-top: 3rem;
    margin-bottom: 2.5rem;
  }
  .station-card {
    height: 274px; /* Sized down cards for mobile screen size */
    margin-right: 12px; /* Adaptive margin gap on mobile screen */
    animation-name: waveBobMobile; /* Ultra-smooth tighter bobbing motion */
  }
  .download-badge {
    width: 360px;
    height: 96px;
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    animation: none; /* Turn off pulsing on mobile layout */
  }
  .badge-logo-block {
    width: 100px;
    height: 50px;
  }
  .badge-info {
    gap: 1rem;
  }
  .badge-label {
    font-size: 0.8rem;
  }
  
  /* Mobile responsiveness for Channels Section */
  .channels-section {
    padding-block: 4.5rem 3.5rem;
  }
  .channels-title {
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
  .channels-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
  }
  .search-bar-wrapper {
    height: 52px;
    padding: 0 1.25rem;
  }
  .filter-tags-row {
    margin-bottom: 3.5rem;
  }
  .filter-tag-btn {
    padding: 0.45rem 1.25rem;
    font-size: 0.8rem;
  }
  .logo-strip-bar {
    height: 110px;
  }
  .logo-item {
    width: 180px;
    height: 96px;
    padding: 0.5rem;
  }
  .logo-item img {
    max-height: 50px;
  }
  
  /* Mobile responsiveness for Listen Section */
  .listen-section {
    padding-block: 4rem;
  }
  .listen-card-container {
    align-items: center; /* Center align on mobile */
    margin-bottom: 3rem;
  }
  .listen-main-title {
    text-align: center;
    margin-bottom: 2rem;
  }
  .how-to-listen-card {
    height: auto;
    flex-direction: column;
    padding: 2.5rem 1.75rem 0 1.75rem; /* bottom padding is zero for image placement */
    margin-bottom: 0;
    border-radius: 24px;
  }
  .how-to-listen-content {
    width: 100%;
    max-width: none;
    align-items: center;
    text-align: center;
  }
  .how-to-listen-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  .how-to-listen-description {
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
    text-align: center;
    max-width: none;
  }
  .app-store-badges-row {
    justify-content: center;
    margin-bottom: 2.5rem;
    width: 100%;
  }
  .app-store-badge-link img {
    height: 42px; /* Smaller badges on mobile screen */
    width: auto;
  }
  .how-to-listen-image-wrapper {
    position: relative;
    width: 100%;
    height: 260px;
    right: auto;
    bottom: auto;
  }
  .woman-overlapping-img {
    position: relative;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    object-fit: contain;
    object-position: bottom center;
  }
  .split-feature-row {
    width: 100%;
    flex-direction: column;
    height: auto;
    border-radius: 20px;
  }
  .feature-text-col {
    width: 100%;
    height: auto;
    padding: 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .feature-text-col::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(341px, 90%);
    height: min(512px, 90%);
  }
  .feature-content-wrapper {
    background-image: none; /* Hide double pattern on mobile content wrapper */
    padding: 2rem 1.25rem;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .feature-title {
    font-size: 1.85rem;
    line-height: 1.35;
    margin-bottom: 1rem;
  }
  .feature-description {
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
  }
  .btn-feature-cta {
    padding: 0.75rem 2.25rem;
    font-size: 0.92rem;
  }
  .feature-image-col {
    width: 100%;
    height: 280px;
  }
}

@keyframes waveBobMobile {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px); /* Subtle elegant vertical float on mobile */
  }
}

/* ==========================================
   PODCASTS SECTION (It's free to stream)
   ========================================== */
.podcasts-section {
  background-color: var(--color-white);
  padding: 6rem 0 4rem 0;
  width: 100%;
  overflow: hidden;
}

.podcasts-container {
  width: 100%;
  max-width: none; /* Let container stretch to viewport for custom left padding alignment */
  margin: 0;
  padding: 0;
}

.podcasts-title {
  /* EXACT Figma Inspect Styles: Poppins Regular 400, Size 50px, Line-height 105px */
  font-size: min(50px, 3.47vw); 
  font-weight: 400; /* Regular */
  line-height: min(105px, 6.08vw);
  color: #000000;
  text-align: left;
  margin-bottom: 2rem;
  font-family: var(--font-main);
  letter-spacing: -0.01em;
  /* EXACT Figma Positioning: Left 197px (197/1728 = 11.4vw) */
  padding-left: 11.4vw;
}

.podcast-covers-row {
  display: flex;
  overflow-x: hidden; /* Hide scrollbars for clean infinite marquee scroll */
  padding: 1rem 0 2rem 0;
  width: 100vw;
  /* Aligns first card starting edge exactly with the podcasts title's left margin (11.4vw) */
  padding-left: 11.4vw;
}

.podcast-covers-track {
  display: flex;
  width: max-content;
  /* Smooth infinite auto scroll scrolling track */
  animation: scrollPodcasts 40s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Pause automatic marquee scrolling on card hover */
.podcast-covers-row:hover .podcast-covers-track {
  animation-play-state: paused;
}

@keyframes scrollPodcasts {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* Perfectly seamless 2-set loop offset translation */
  }
}

.podcast-cover-card {
  width: min(340px, 20vw); /* EXACT Figma Proportional Card Width: 340px */
  height: min(340px, 20vw); /* EXACT Figma Proportional Card Height: 340px */
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  margin-right: 24px; /* Margin-right instead of gap prevents loops snap rounding anomalies */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
  cursor: pointer;
}

.podcast-cover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-cover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   RADIO EVERY CORNER SECTION
   ========================================== */
.every-corner-section {
  background-color: var(--color-white);
  padding: 4rem 1.5rem 8rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.corner-title {
  /* EXACT Figma Inspect Styles: Poppins Medium 500, Size 50px, Line-height 72px */
  font-size: min(50px, 2.9vw);
  font-weight: 500; /* Medium */
  color: #000000;
  margin-bottom: 1.5rem;
  font-family: var(--font-main);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.corner-description {
  font-size: min(18px, 1.8vw);
  line-height: 1.7;
  color: #666666;
  max-width: 780px; /* Constrains text width to wrap beautifully in 3 lines */
  font-family: var(--font-main);
}

/* ==========================================
   RESPONSIVE OVERRIDES FOR PODCASTS & CORNER
   ========================================== */
@media (max-width: 768px) {
  .podcasts-section {
    padding: 4rem 0 2rem 0;
  }
  .podcasts-title {
    font-size: 1.8rem;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .podcast-covers-row {
    padding-left: 1.5rem;
  }
  .podcast-covers-track {
    animation-duration: 25s; /* Speed up loop slightly for smaller mobile viewport */
  }
  .podcast-cover-card {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    margin-right: 16px; /* Tighter margins on mobile screen width */
  }
  .every-corner-section {
    padding: 2rem 1rem 5rem 1rem;
  }
  .corner-title {
    font-size: 1.85rem;
    line-height: 1.35;
  }
  .corner-description {
    font-size: 0.98rem;
    line-height: 1.6;
  }
}

/* ==========================================
   START LISTENING CONTAINER (Kenya Map block inside every-corner-section)
   ========================================== */
.start-listening-container {
  max-width: 1089px; /* Expanded max-width for alignment */
  width: 100%;
  margin: 4.5rem auto 0 auto; /* Spaced beautifully under the description text */
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center; /* Center-aligned as a cohesive unit instead of spaced apart */
  gap: min(40px, 3vw); /* Reduced gap to bring left CTA block and right Kenya Map closer */
}

.cta-left-block {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* Snugger gap between App Icon and text/button */
}

.cta-app-icon {
  width: 150px; /* Increased from 130px to make it bigger */
  height: 150px;
  border-radius: 30px; /* Matches larger proportions */
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(84, 124, 214, 0.14); /* Soft shadow */
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Synchronized breathing pulsation */
  animation: pulseLogo 4s ease-in-out infinite;
}

.cta-app-icon:hover {
  transform: scale(1.06) rotate(1deg);
  animation-play-state: paused; /* Pause pulsation on manual hover */
}

.cta-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-text-button-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Clean vertical spacing */
  align-items: flex-start;
  text-align: left; /* Keep left alignment for text/button next to app icon */
}

.cta-listening-title {
  font-size: 24px; /* Increased from 20px for high readability */
  font-weight: 500;
  color: #000000;
  font-family: var(--font-main);
  letter-spacing: -0.01em;
  margin: 0;
}

.btn-cta-download {
  background: #3c9ebf; /* Light blue/cyan color matching the Boda gradient styling */
  color: var(--color-white);
  font-size: 15px; /* Increased from 14px */
  font-weight: 600;
  padding: 0.75rem 2.25rem; /* Enlarged padding */
  border-radius: 9999px; /* Capsule pill */
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(60, 158, 191, 0.18);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Synchronized button pulsation */
  animation: pulseButton 4s ease-in-out infinite;
}

.btn-cta-download:hover {
  background: #2b8ba8;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(60, 158, 191, 0.35);
  animation-play-state: paused; /* Pause pulsation on manual hover */
}

@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(84, 124, 214, 0.12);
  }
  50% {
    transform: scale(1.03); /* Soft breathing scale */
    box-shadow: 0 14px 32px rgba(84, 124, 214, 0.22);
  }
}

@keyframes pulseButton {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(60, 158, 191, 0.18);
  }
  50% {
    transform: scale(1.025); /* Gentle glow and expand scale */
    box-shadow: 0 8px 20px rgba(60, 158, 191, 0.35);
  }
}

.cta-right-block {
  width: auto;
  display: flex;
  align-items: center;
}

.kenya-map-img {
  width: 420px; /* Increased from 360px to make the map graphic bigger and more prominent */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.05));
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Elegant slow pulsating infinite animation */
  animation: pulseMap 4s ease-in-out infinite;
}

.cta-right-block:hover .kenya-map-img {
  transform: scale(1.05) translateY(-4px); /* Highlight scaling on active hover */
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.08));
  animation-play-state: paused; /* Pause heartbeat pulsation on manual hover */
}

@keyframes pulseMap {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.05));
  }
  50% {
    transform: scale(1.025); /* Subtle smooth breathing pulse scale */
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.07));
  }
}

/* ==========================================
   RESPONSIVE OVERRIDES FOR START LISTENING
   ========================================== */
@media (max-width: 768px) {
  .start-listening-container {
    flex-direction: column;
    gap: 3rem;
    text-align: center;
    margin-top: 3rem;
  }
  .cta-left-block {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .cta-app-icon {
    width: 120px;
    height: 120px;
    border-radius: 24px;
  }
  .cta-text-button-group {
    align-items: center;
    text-align: center;
  }
  .cta-listening-title {
    font-size: 1.25rem;
  }
  .btn-cta-download {
    font-size: 13px;
    padding: 0.6rem 1.75rem;
  }
  .cta-right-block {
    width: 85%;
    justify-content: center;
  }
  .kenya-map-img {
    width: 280px;
  }
}

/* ==========================================
   FOOTER / DOWNLOAD SECTION (Centred Mockup Design)
   ========================================== */
/* ==========================================
   FOOTER / DOWNLOAD SECTION (Centred Mockup Design)
   ========================================== */
.footer-section {
  position: relative;
  background-color: #eaf1ff; /* Beautiful soft light blue background */
  padding: 0 1.5rem 6rem 1.5rem; /* Margins handles the top tab vertical clearance */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible; /* Prevents clipping the top half of the centered logo tab */
}

/* Hanging top white logo tab (Calibrated for visual balance: 320px x 135px, Radius 44px) */
.footer-logo-tab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* Centered vertically on the top border line */
  background-color: var(--color-white);
  width: 320px; /* Increased from 280px */
  height: 135px; /* Increased from 115px */
  border-radius: 44px; /* Increased from 36px */
  box-shadow: 0 8px 32px rgba(84, 124, 214, 0.05); /* Soft elegant shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.footer-logo-tab img {
  height: 80px; /* Increased from 65px to fit scaled wrapper */
  width: auto;
  object-fit: contain;
}

.footer-content {
  max-width: 940px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-headline {
  /* EXACT Figma Inspect Styles: Poppins Medium 500, Size 34px */
  font-size: min(34px, 2.5vw); 
  font-weight: 500; /* Medium */
  color: #000000;
  /* Top margin places text exactly 56px below the logo tab: 67.5px (tab bottom half) + 56px = 123.5px */
  margin-top: 125px; 
  margin-bottom: 2rem;
  font-family: var(--font-main);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.footer-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px; /* EXACT Figma gap: 28px */
  margin-bottom: 28px; /* EXACT Figma gap: 28px */
}

.footer-qr-img {
  /* EXACT Figma Inspect Styles: 285px x 285px */
  width: 285px; 
  height: 285px;
  object-fit: contain;
}

.footer-qr-label {
  /* EXACT Figma Inspect Styles: Poppins Regular 400, Size 24px */
  font-size: min(24px, 1.6vw);
  font-weight: 400; /* Regular */
  color: #555555;
  font-family: var(--font-main);
}

.footer-badges-row {
  display: flex;
  justify-content: center;
  gap: 20px; /* Centered with clean layout gap */
  align-items: center;
}

.store-badge-btn {
  /* EXACT Figma Inspect Styles: 274px x 85px */
  width: 274px; 
  height: 85px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.store-badge-btn:hover {
  transform: scale(1.03); /* Soft responsive zoom on hover */
}

.store-badge-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px; /* Matches rounded badge shape */
}

/* ==========================================
   RESPONSIVE OVERRIDES FOR CENTRED FOOTER
   ========================================== */
@media (max-width: 768px) {
  .footer-section {
    padding: 0 1rem 4rem 1rem;
  }
  .footer-logo-tab {
    width: min(320px, 80vw);
    height: 135px;
    border-radius: 40px;
  }
  .footer-logo-tab img {
    height: 70px;
  }
  .footer-headline {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 110px;
    margin-bottom: 1.5rem;
  }
  .footer-qr-img {
    width: 200px;
    height: 200px;
  }
  .footer-qr-label {
    font-size: 1.1rem;
  }
  .footer-badges-row {
    flex-direction: column;
    gap: 1rem;
  }
  .store-badge-btn {
    width: 220px;
    height: 68px;
  }
}

/* ==========================================
   ACTUAL FOOTER SECTION
   ========================================== */
.actual-footer-section {
  position: relative;
  background-color: #eaf1ff; /* Matches light blue of download section */
  border-top: 1.5px solid #000000; /* Explicit black line on top */
  padding: 4.5rem 1.5rem 4rem 1.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.footer-grid-container {
  max-width: 1089px; 
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 57px; /* EXACT Figma gap: 57px */
}

.footer-talk-col {
  width: 690px;
  flex-shrink: 0;
}

.footer-legal-col {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column-title {
  /* EXACT Figma Inspect Styles: Poppins Regular 400, Size 40px */
  font-size: min(40px, 3.2vw);
  font-weight: 400; /* Regular */
  color: #000000;
  margin-bottom: 1.5rem;
  font-family: var(--font-main);
  letter-spacing: -0.01em;
}

.talk-info-row {
  display: flex;
  gap: 80px; /* Snug spacing to bring sub-columns closer together */
}

.talk-info-subcol {
  width: 310px;
}

.talk-info-subcol p {
  /* EXACT Figma Inspect Styles: Poppins Regular 400, Size 16px, Solid black color */
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 0.5rem;
  font-family: var(--font-main);
}

.footer-underline-link {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-underline-link:hover {
  color: #5674B5;
}

.legal-bullet-list {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.legal-bullet-list li {
  /* EXACT Figma Inspect Styles: Poppins Regular 400, Size 16px, Solid black color */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: #000000;
  font-family: var(--font-main);
}

.legal-bullet-list li::marker {
  color: #555555;
}

.footer-copyright-pill {
  /* EXACT Figma Inspect Styles: Hex #5674B5, 916px x 59px, Radius 100px */
  background-color: #5674b5; 
  color: var(--color-white);
  font-size: 15px;
  font-weight: 400;
  width: 916px;
  max-width: 100%;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px; /* EXACT Figma Radius */
  box-shadow: 0 4px 16px rgba(86, 116, 181, 0.15);
  font-family: var(--font-main);
}

/* ==========================================
   RESPONSIVE OVERRIDES FOR ACTUAL FOOTER
   ========================================== */
@media (max-width: 768px) {
  .actual-footer-section {
    padding: 3rem 1rem 2.5rem 1rem;
  }
  .footer-grid-container {
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .footer-talk-col,
  .footer-legal-col,
  .talk-info-subcol {
    width: 100% !important;
  }
  .talk-info-row {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .footer-column-title {
    font-size: 1.85rem;
  }
  .talk-info-subcol p,
  .legal-bullet-list li {
    font-size: 15px;
  }
  .footer-legal-col {
    width: 100%;
    align-items: center;
  }
  .legal-bullet-list {
    list-style-position: inside;
    padding-left: 0;
  }
  .footer-copyright-pill {
    max-width: 95%;
    height: 52px;
    font-size: 13px;
  }
}

/* ==========================================
   PREMIUM SCROLL REVEAL EFFECTS
   ========================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling elements */
.delay-1 {
  transition-delay: 0.12s;
}
.delay-2 {
  transition-delay: 0.24s;
}
.delay-3 {
  transition-delay: 0.36s;
}
.delay-4 {
  transition-delay: 0.48s;
}