/* ─── Satoshi Font Setup ─────────────────────────────────────────── */
@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Regular.otf") format("opentype"),
       url("./fonts/Satoshi-Regular.ttf") format("truetype"),
       url("./fonts/Satoshi-Regular.woff") format("woff"),
       url("./fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Medium.otf") format("opentype"),
       url("./fonts/Satoshi-Medium.ttf") format("truetype"),
       url("./fonts/Satoshi-Medium.woff") format("woff"),
       url("./fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Bold.otf") format("opentype"),
       url("./fonts/Satoshi-Bold.ttf") format("truetype"),
       url("./fonts/Satoshi-Bold.woff") format("woff"),
       url("./fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Satoshi";
  src: url("./fonts/Satoshi-Black.otf") format("opentype"),
       url("./fonts/Satoshi-Black.ttf") format("truetype"),
       url("./fonts/Satoshi-Black.woff") format("woff"),
       url("./fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}














/* Reset basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Apply Satoshi font globally and prevent horizontal scroll */
body {
  font-family: "Satoshi", sans-serif;
  overflow-x: hidden;

}


/* ===================================== */
/* 📱 GLOBAL MOBILE FIXES */
/* ===================================== */

@media (max-width: 768px) {

  /* Prevent horizontal drag on iPhone */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-family: "Satoshi", sans-serif;
  }

}










/* ───── FOOTER STYLES ────────────────────────────────────────────── */
.minimal-footer {
  background: linear-gradient(
    135deg,
    rgba(83, 202, 252, 0.25),
    rgba(255, 255, 255, 0.1),
    rgba(83, 202, 252, 0.2)
  );

  backdrop-filter: blur(48px) saturate(250%);
  -webkit-backdrop-filter: blur(48px) saturate(250%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 18px 64px rgba(83, 202, 252, 0.25),
    inset 0 0 60px rgba(255, 255, 255, 0.08);

  padding: 0.4rem 0;
  width: 100%;
  min-height: 56px;

  position: fixed;      /* ✅ Locks it in place */
  top: 0;               /* ✅ Sticks to top instead */
  left: 0;
  z-index: 9998;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}




.footer-inner {
  display: flex;
  justify-content: space-between; /* 👈 Clean two-sided layout */
  align-items: center;
  padding: 0 4rem;
  height: 56px;
  position: relative;
}


.footer-logo {
  height: 48px;         /* ⬆️ Taller logo */
  width: auto;
  display: block;
  margin-left: 2rem;    /* ⬅️ Narrower spacing */
  margin-top: 16px;     /* ⬇️ Slightly reduced vertical offset */
}
.footer-right {
  position: absolute;
  right: 4rem; /* 👈 Shifted closer to center */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.footer-nav {
  display: flex;
  gap: 2rem;
}

.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;        /* ⬆️ Upgraded to Black */
  font-style: italic;      /* ⬅️ Now italic */
  transition: color 0.3s ease;
}


.footer-nav a:hover {
  color: #53CAFC;
}

.footer-buttons {
  display: flex;
  gap: 1rem;
}

.btn-join,
.btn-subscribe {
  box-sizing: border-box;
}

.btn-join {
  padding: 8px 16px;
  border: 2px solid #53CAFC;
  background: transparent;
  color: #B0B0B0;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-join:hover {
  background-color: #53CAFC;
  color: white;
  border-color: #53CAFC;
}

.btn-subscribe {
  padding: 8px 16px;
  background: linear-gradient(to right, #53CAFC, #FEE0FF);
  color: white;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-subscribe::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 2px solid white;
  border-radius: 8px;
  opacity: 0;
  animation: snake-outline 1s linear infinite;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-subscribe:hover::before {
  opacity: 1;
}

/* 👤 Logged-in user display */
.user-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(83, 202, 252, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

/* Invisible placeholder to reserve space */
.user-profile::after {
  content: "Username"; /* Match expected username length */
  visibility: hidden;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
}


.user-profile:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05); /* 👈 grow on hover */
}


.profile-avatar {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #53CAFC;
  transition: transform 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.07);
}

.profile-username {
  color: #ffffff;            /* ⬅️ Changed to white */
  font-weight: 900;          /* ⬆️ Satoshi Black */
  font-style: italic;        /* ⬅️ Italic style */
  font-size: 0.95rem;
  font-family: 'Satoshi', sans-serif;
  margin-right: 0.5rem;
  white-space: nowrap;
}


@keyframes snake-outline {
  0% { clip-path: inset(0 100% 100% 0); }
  25% { clip-path: inset(0 0 100% 0); }
  50% { clip-path: inset(0 0 0 0); }
  75% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 100% 100% 0); }
}

/* ✅ Hide main footer when sticky bar is active using body class */
body.hide-footer .minimal-footer {
  display: none !important;
}




.btn-signin-outline {
  padding: 8px 16px;
  border: 2px solid #53CAFC;
  background-color: transparent;
  color: #53CAFC;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  font-family: 'Satoshi', sans-serif;
}

.btn-signin-outline:hover {
  background-color: #53CAFC;
  color: #fff;
}
















/* ───── STICKY TOP BAR (Two‑Stage Drop Reveal) ───────────────────────────── */

.sticky-top-bar {
  position: fixed;
  top: -120px;
  left: 0;
  width: 100%;
  background-color: transparent;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  /* Hidden state */
  opacity: 0;
  transform: translateY(-40px) scale(0.95);
  pointer-events: none;
}

/* First notch reveal */
.sticky-top-bar.show-full {
  animation: notchDropIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}

/* Second notch reveal */
.sticky-top-bar.show-compact {
  animation: notchDropIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}

/* Drop animation */
@keyframes notchDropIn {
  0% {
    opacity: 0;
    transform: translateY(-60px) scale(0.92);
  }

  60% {
    opacity: 1;
    transform: translateY(6px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    top: 0;
  }
}

/* Layout */
.top-bar-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 🔵 Icon Circle */
.top-bar-dot {
  height: 44px;
  width: 44px;
  background-color: #53CAFC;
  border-radius: 50%;
  background-image: url("Moveiconwhite.svg");
  background-size: 29px 29px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Rounded nav island */
.top-bar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.35rem 0.85rem;
  background-color: #53CAFC;
  border-radius: 999px;
  transition: all 0.35s ease;
}

/* Hide both navs by default */
.nav-full,
.nav-compact {
  display: none;
}

/* Show only the correct nav */
.sticky-top-bar.show-full .nav-full {
  display: flex;
}

.sticky-top-bar.show-compact .nav-compact {
  display: flex;
}

/* Compact notch slightly smaller */
.sticky-top-bar.show-compact .top-bar-nav {
  padding: 0.25rem 0.6rem;
  transform: scale(0.92);
}

/* Nav links */
.top-bar-nav a {
  color: #ffffff;             /* ⬅️ White text */
  text-decoration: none;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;           /* ⬆️ Satoshi Black */
  font-style: italic;         /* ⬅️ Italic */
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease;
}


.top-bar-nav a:hover {
  color: #FEE0FF;
}

/* Divider */
.top-bar-nav .divider {
  width: 1px;
  height: 1rem;
  background-color: white;
  opacity: 0.6;
}



/* Hide mobile-only elements on desktop */
.mobile-menu-toggle,
.mobile-glass-menu {
  display: none;
}


/* ───────── iPhone Top Footer + Sticky Bar Fix ───────── */
@media (max-width: 768px) {

  /* ===== Minimal Glass Top Footer ===== */

  .minimal-footer {
    padding: 0.6rem 0.6rem 0.6rem 0.2rem; /* reduced LEFT padding */
    min-height: 60px;
  }

  .footer-inner {
    padding: 0;
    justify-content: space-between;
    align-items: center;
  }

  /* 🍔 Hamburger */
  .mobile-menu-toggle {
  display: flex;
  width: 26px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: 15px;   /* 🔥 pushes it right */
  margin-right: 4px;
}

  .mobile-menu-toggle span {
    height: 2px;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Keep container stable */
  .footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* 🔥 Shift ONLY the logo left */
  .footer-logo {
    height: 40px;
    margin: 0;
    margin-left: -120px; /* controls logo position only */
  }

  /* Remove absolute positioning */
  .footer-right {
    position: static;
    transform: none;
    gap: 1rem;
    margin-right: 6px;
  }

  /* Hide desktop nav */
  .footer-nav {
    display: none;
  }

  .footer-buttons {
    gap: 0.5rem;
  }

  .profile-avatar {
    height: 32px;
    width: 32px;
  }

  .profile-username {
    display: none;
  }


  /* ===== Glass Dropdown (Original Style Kept) ===== */

  .mobile-glass-menu {
    display: flex;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 30px 24px;

    background: linear-gradient(
      135deg,
      rgba(83, 202, 252, 0.25),
      rgba(255, 255, 255, 0.1),
      rgba(83, 202, 252, 0.2)
    );

    backdrop-filter: blur(48px) saturate(250%);
    -webkit-backdrop-filter: blur(48px) saturate(250%);

    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(83, 202, 252, 0.25);

    flex-direction: column;
    gap: 24px;

    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    z-index: 9997;
  }

  .mobile-glass-menu a {
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
  }

  .mobile-glass-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }


  /* ===== Sticky Blue Drop Bar (Unchanged) ===== */

  .sticky-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    top: 18px;
  }

  .top-bar-content {
    width: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .top-bar-dot {
    height: 30px;
    width: 30px;
    background-size: 18px 18px;
  }

  .top-bar-nav {
    width: auto;
    padding: 0.2rem 0.5rem;
    gap: 0.5rem;
  }

  .top-bar-nav a {
    font-size: 0.75rem;
    padding: 0.2rem 0.35rem;
  }

  .top-bar-nav .divider {
    height: 0.7rem;
  }

  .nav-full a:nth-of-type(1),
  .nav-full .divider:nth-of-type(1) {
    display: none;
  }

  .nav-full a:nth-of-type(3),
  .nav-full .divider:nth-of-type(3) {
    display: none;
  }

}






































/* ─── AI Intro Section (Blur on Sides + Bottom Only) ─── */
/* ─── AI Intro Section (Enhanced Glow Intensity) ─── */
.ai-intro {
  background: #000000;
  padding: 12rem 2rem 10rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}



/* Content container stays above blur */
.ai-intro-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.ai-intro-title {
  font-size: 4rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.ai-intro-title .moven-line {
  font-size: 5rem;
  font-weight: 900;
  color: #53CAFC;
}

.ai-intro-subheadline {
  font-size: 1.6rem;
  font-weight: 500;
  color: #888888;
  margin-bottom: 1rem;
}

.ai-intro-description {
  font-size: 1rem;
  color: #b0b0b0;
  line-height: 1.6;
  margin-bottom: 4rem;
}

.ai-intro-image {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  margin-top: 2.5rem;
}


/* 🔥 Fade-in effect */
.moven-message-heading {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.moven-message-heading.fade-in {
  opacity: 1;
  transform: translateY(0);
}




/* 🔥 Fade-in animation for feature section */
.moven-feature-fade {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInMove 1.2s ease-out 1.1s forwards; /* 1.1s delay */
}

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


/* 🔽 Centered content under image stack */
.feature-centered-content {
  margin-top: 8rem;
  max-width: 900px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.feature-centered-title {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.feature-centered-title span {
  color: #53CAFC; /* last word in blue */
}

.feature-centered-description {
  font-size: 1.1rem;
  color: #b0b0b0;
  line-height: 1.8;
}



/* ===================================== */
/* 📱 AI INTRO SECTION – iOS OPTIMISED */
/* ===================================== */

@media (max-width: 768px) {

  .ai-intro {
    padding: 8rem 1.5rem 6rem; /* reduced vertical spacing */
  }

  .ai-intro-inner {
    max-width: 100%;
  }

  /* Main Headline */
  .ai-intro-title {
    font-size: 2.2rem;      /* scaled down from 4rem */
    line-height: 1.25;
  }

  .ai-intro-title .moven-line {
    font-size: 2.6rem;      /* scaled from 5rem */
  }

  /* Subheadline */
  .ai-intro-subheadline {
    font-size: 1.1rem;
  }

  /* Description */
  .ai-intro-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    padding: 0 0.5rem;
  }

  /* Image */
  .ai-intro-image {
    max-width: 100%;
    margin-top: 2rem;
    border-radius: 12px;
  }

  /* Feature Centered Content */
  .feature-centered-content {
    margin-top: 4rem; /* reduced from 8rem */
    padding: 0 1rem;
  }

  .feature-centered-title {
    font-size: 1.9rem; /* scaled from 3rem */
  }

  .feature-centered-description {
    font-size: 0.95rem;
  }

}








































/* ─── Moven AI Feature Section ─── */
.ai-feature {
  background-color: #000; /* keep it sleek */
  padding: 8rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-feature-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 📸 Left Image */
.feature-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* 📄 Right Content */
.feature-content {
  flex: 1;
  min-width: 320px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 🌈 Gradient Text */
.feature-small-headline {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #53CAFC, #FEE0FF);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}



.fade-item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: fadeCycle 6s infinite ease-in-out;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: opacity 0.5s ease-in-out;
}

.fade-item:nth-child(1) {
  animation-delay: 0s;
  z-index: 1;
}

.fade-item:nth-child(2) {
  animation-delay: 3s;
  z-index: 2;
}

@keyframes fadeCycle {
  0% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

/* 🎨 Colors */
.color-blue {
  color: #53CAFC;
}

.color-pink {
  color: #FEE0FF;
}

/* 🧠 Main Headline */
.feature-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: white;
  text-align: left;
}

/* 📜 Paragraph */
.feature-description {
  font-size: 1rem;
  color: #b0b0b0;
  line-height: 1.7;
  text-align: left;
}





/* 🖼 Full-width image container with spacing */
.feature-image-stack {
  position: relative;
  width: 100%;
  margin-top: 6rem; /* large vertical space */
}

/* 🌆 Full-width image: wider, shorter */
.wide-image {
  width: 100%;
  max-width: 100%;
  height: 360px; /* ⬅️ Set specific shorter height */
  object-fit: cover; /* ⬅️ Crop edges to preserve aspect ratio */
  border-radius: 16px;
  display: block;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.4);
}

/* 📱 Floating mockup on bottom right */
.overlay-mockup {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 240px;
  max-width: 30%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  z-index: 3;
}


.fade-in-feature {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in-feature.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===================================== */
/* 📱 MOVEN AI FEATURE – iOS OPTIMISED */
/* ===================================== */

@media (max-width: 768px) {

  .ai-feature {
    padding: 4rem 1.5rem;
  }

  .ai-feature-inner {
    gap: 3rem;
  }

  /* Left Image */
  .feature-image img {
    max-width: 100%;
    border-radius: 16px;
  }

  /* Right Content */
  .feature-content {
    min-width: unset;
  }

  .feature-small-headline {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
  }

  .feature-main-title {
    font-size: 1.8rem;
    line-height: 1.25;
  }

  .feature-description {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Full Width Image Stack */
  .feature-image-stack {
    margin-top: 4rem;
  }

  .wide-image {
    height: 240px; /* scaled down from 360px */
    border-radius: 14px;
  }

  /* Floating Mockup (clean overhang – no background effects) */
  .overlay-mockup {
    width: 160px;
    bottom: -25px;
    right: -10px;
    max-width: 45%;

    /* Remove background effects */
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* 🔽 Centered content under image stack */
  .feature-centered-content {
    margin-top: 4rem; /* reduced from 8rem */
    padding: 0 1rem;
  }

  .feature-centered-title {
    font-size: 1.8rem; /* scaled down from 3rem */
    line-height: 1.25;
  }

  .feature-centered-description {
    font-size: 0.95rem;
    line-height: 1.6;
  }

}















.dive-in-section {
  background-color: #000;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dive-in-path {
  width: 100%;
  height: 200px;
}




.dive-in-text {
  position: absolute;
  top: 20%; /* ⬆️⬆️ Raised much higher */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
  max-width: 700px;
  pointer-events: none;
  z-index: 2;
}

.dive-in-text.show-headline {
  opacity: 1;
}

.dive-in-headline {
  font-size: 2.75rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.5rem;
}

.dive-in-headline span {
  color: #53CAFC;
}

.dive-in-paragraph {
  font-size: 1.1rem;
  color: #b0b0b0;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.dive-in-text.show-paragraph .dive-in-paragraph {
  opacity: 1;
  transform: translateY(0);
}










.playback-route-section {
  background-color: #000;
  color: white;
  padding: 10rem 2rem;
  text-align: center;
  overflow-x: hidden; /* 🔒 Prevent page-level side scroll */
}

.playback-route-inner {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: visible; /* ✅ Do NOT block child scroll areas */
}

.playback-route-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 2rem;
}

.playback-route-title span {
  color: #53CAFC;
}

.playback-images-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.playback-images-row img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
}

.playback-route-description {
  font-size: 1.2rem;
  color: #b0b0b0;
  line-height: 1.8;
  margin: 2rem 0 4rem;
}

.mockup-centered {
  display: block;
  margin: 0 auto 5rem;
  max-width: 500px;
  width: 100%;
}

/* ───────────────────────────────────────────── */
/* 📜 FULL‑WIDTH HORIZONTAL SCROLL (WORKING) */
/* ───────────────────────────────────────────── */

.scroll-card-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4rem 2rem;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-card-wrapper * {
  box-sizing: border-box;
}

.scroll-card-container {
  display: flex;
  gap: 2rem;
  width: max-content;
  justify-content: flex-start;
  padding-left: 200rem; /* 👈 Added padding to push cards right */
}


/* 📦 Bigger, cleaner cards (empty) */
.scroll-card {
  flex: 0 0 auto;
  width: 380px;
  height: 420px;
  background-color: #1a1a1a;
  border-radius: 20px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* 💡 Ensure rounded corners clip the image */
  position: relative;
}

.scroll-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 💯 Ensures image fills the card nicely */
  display: block;
}


/* 📝 Text under each card */
.scroll-card-text {
  flex: 0 0 auto;
  width: 380px;
  margin-top: 1rem;
  text-align: left;
}

.scroll-card-text h4 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.scroll-card-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #b0b0b0;
}

/* 📎 Footer headline/paragraph under cards */
.scroll-card-footer {
  max-width: 800px;
  margin: 4rem auto 0;
  text-align: center;
  padding: 0 1rem;
}

.scroll-card-footer h3 {
  font-size: 2.25rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
}

.scroll-card-footer p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #b0b0b0;
}

/* Wrapper allows full width even outside inner content limits */
.footer-wide-image-wrapper {
  width: 100%;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.footer-wide-image {
  width: 90%;
  max-width: 1400px;
  max-height: 500px;      /* ⬅️ Limit the height */
  object-fit: cover;      /* ⬅️ Ensures nice cropping if needed */
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: block;
}


/* ===================================== */
/* 📱 DIVE IN + PLAYBACK ROUTE – iOS OPTIMISED */
/* ===================================== */

/* ─── Hide Mobile Extra Paragraph on Desktop ─── */

.mobile-extra-paragraph {
  display: none; /* hidden everywhere by default */
}

@media (max-width: 768px) {

  /* ─── Hide Dive In Section Completely ─── */

  .dive-in-section {
    display: none !important;
  }

  /* ─── Playback Route Section ─── */

  .playback-route-section {
    padding: 6rem 1.5rem;
  }

  .playback-route-inner {
    max-width: 100%;
  }

  .playback-route-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .playback-images-row {
    gap: 0.75rem;
  }

  .playback-images-row img {
    max-width: 48%;
    border-radius: 10px;
  }

  .playback-route-description {
    font-size: 1rem;
    line-height: 1.6;
    margin: 1.5rem 0 3rem;
  }

  .mockup-centered {
    max-width: 320px;
    margin: 0 auto 3rem;
  }

  /* ─── REMOVE Horizontal Scroll Cards Only ─── */

  .scroll-card-wrapper,
  .scroll-card-container,
  .scroll-card,
  .scroll-card-text {
    display: none !important;
  }

  /* ─── KEEP Predictive Insights Visible ─── */

  .scroll-card-footer {
    display: block !important;
    max-width: 100%;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
  }

  .scroll-card-footer h3 {
    font-size: 1.6rem;
  }

  .scroll-card-footer p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* ─── Wide Footer Image ─── */

  .footer-wide-image-wrapper {
    padding: 3rem 0 2rem;
  }

  .footer-wide-image {
    width: 95%;
    max-height: 260px;
    border-radius: 14px;
  }

  /* ─── Mobile-Only Extra Paragraph ─── */

  .mobile-extra-paragraph {
    display: block;          /* only visible on phone */
    margin: 2rem auto 0;
    padding: 0 1.5rem;
    max-width: 100%;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: #b0b0b0;
  }

}




























/* 🌟 Free Moven AI Section */
.free-moven-ai-section {
  background-color: #1a1a1a;
  color: white;
  padding: 8rem 2rem;
}

.free-moven-ai-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.free-moven-ai-title {
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.static-gradient-text {
  background: linear-gradient(to right, #53CAFC, #53CAFC, #53CAFC, #53CAFC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 🔹 Subheadline + icon */
.free-moven-ai-subheadline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.free-moven-ai-subheadline p {
  font-size: 1.3rem;
  color: #b0b0b0;
  margin: 0;
}

.subheadline-icon {
  width: 28px;
  height: auto;
}

/* 🔳 Image + Text Block Row */
.free-moven-ai-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* 🖼️ Shared styling for both 623.jpg images */
.free-moven-wide {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  object-fit: cover;
}


.free-moven-text-block {
  flex: 1;
  min-width: 250px;
  color: #b0b0b0;
}

.free-moven-text-block h3 {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
}

.free-moven-text-block p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
}

/* 🖼 Full-width image under entire row */
.free-moven-ai-bottom-full {
  margin-top: 3rem;
}

.free-moven-bottom-full-image {
  width: 100%;
  max-width: 100%;
  height: 300px; /* ⬅️ Adjusted height */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}




/* 🔽 Lower Content Section Under 21.jpg */
.free-moven-lower-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  margin-top: 5rem;
  align-items: center;
  justify-content: space-between;
}

.lower-text-block {
  flex: 1;
  min-width: 300px;
  color: white;
}

.lower-text-block h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.lower-text-block p {
  font-size: 1.1rem;
  color: #b0b0b0;
  line-height: 1.8;
}

.lower-image-block {
  flex: 1;
  min-width: 300px;
}

.lower-image-block img {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  object-fit: cover;
}



/* ===================================== */
/* 📱 FREE MOVEN AI – iOS OPTIMISED */
/* ===================================== */

@media (max-width: 768px) {

  .free-moven-ai-section {
    padding: 4rem 1.5rem;
  }

  .free-moven-ai-inner {
    text-align: left; /* keep same layout feel */
  }

  .free-moven-ai-title {
    font-size: 1.9rem;   /* scaled from 2.75rem */
    line-height: 1.2;
  }

  /* Subheadline */
  .free-moven-ai-subheadline {
    margin-top: 1rem;
    margin-bottom: 2rem;
    gap: 0.5rem;
  }

  .free-moven-ai-subheadline p {
    font-size: 1rem;
  }

  .subheadline-icon {
    width: 22px;
  }

  /* Image + Text Row */
  .free-moven-ai-content {
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .free-moven-wide {
    max-width: 100%;
    border-radius: 14px;
  }

  .free-moven-text-block h3 {
    font-size: 1.5rem;
  }

  .free-moven-text-block p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Full-width image */
  .free-moven-bottom-full-image {
    height: 220px; /* scaled down from 300px */
    border-radius: 14px;
  }

  /* Lower row */
  .free-moven-lower-row {
    gap: 2rem;
    margin-top: 3rem;
  }

  .lower-text-block h3 {
    font-size: 1.5rem;
  }

  .lower-text-block p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .lower-image-block img {
    max-width: 100%;
    border-radius: 14px;
  }

}























/* ───────────────────────────────────────────── */
/* 🤖 AI Cards Section */
/* ───────────────────────────────────────────── */

.ai-cards-section {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #111; /* ✅ Ensure background remains */
  padding: 14rem 2rem 10rem;
  overflow: hidden;
  text-align: center;
  z-index: 2;
}



/* ───────────────────────────────────────────── */
/* 🟩 LANDO‑STYLE SINGLE BAR REVEAL HEADLINE */
/* ───────────────────────────────────────────── */

.ai-cards-intro-headline {
  position: relative;
  font-size: 4.5rem;
  font-weight: 900;
  color: white;
  line-height: 1.15;
  text-align: center;
  margin-bottom: 7rem;
  display: inline-block;
  overflow: hidden;

  padding: 0.2em 0; /* ✅ Prevent cutoff at top/bottom */
}

/* 👇 Hide text initially */
.ai-cards-intro-headline .reveal-text {
  opacity: 0;
  transition: opacity 0.3s ease 0.6s;
  position: relative;
  z-index: 2;
}

/* ✅ One solid reveal bar */
.ai-cards-intro-headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #00FFAE, #FFCBAB, #53F7FC, #FFC4FD);
  z-index: 1;
  transition: transform 0.6s ease;
  transform: translateX(0);
}

/* 👇 When triggered by JS */
.ai-cards-intro-headline.revealed::before {
  transform: translateX(100%);
  opacity: 0; /* 👈 hide bar once it reaches the end */
  transition: transform 0.6s ease, opacity 0.2s ease 0.6s;
}

.ai-cards-intro-headline.revealed .reveal-text {
  opacity: 1;
}

/* ───────────────────────────────────────────── */
/* 📦 Cards Container */
/* ───────────────────────────────────────────── */

.ai-cards-inner {
  position: relative;
  height: 550px;
  max-width: 1100px;
  margin: 0 auto;
}

/* 🃏 Card Base Style */
.ai-card {
  /* keeping all your original styles intact */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 300px;
  background: #1a1a1a;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ai-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
  filter: brightness(1); /* remove dark filter if you had one */
}


.ai-card.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 🎯 Fan layout (middle = 4th card) */
.ai-card:nth-child(1).visible { transform: translate(-50%, -50%) rotate(-24deg) translateX(-380px); z-index: 1; }
.ai-card:nth-child(2).visible { transform: translate(-50%, -50%) rotate(-16deg) translateX(-260px); z-index: 2; }
.ai-card:nth-child(3).visible { transform: translate(-50%, -50%) rotate(-8deg)  translateX(-140px); z-index: 3; }
.ai-card:nth-child(4).visible { transform: translate(-50%, -50%) rotate(0deg)   translateX(0);      z-index: 4; }
.ai-card:nth-child(5).visible { transform: translate(-50%, -50%) rotate(8deg)   translateX(140px); z-index: 3; }
.ai-card:nth-child(6).visible { transform: translate(-50%, -50%) rotate(16deg)  translateX(260px); z-index: 2; }
.ai-card:nth-child(7).visible { transform: translate(-50%, -50%) rotate(24deg)  translateX(380px); z-index: 1; }

/* ✨ Hover push‑out effect */
.ai-card:nth-child(1).visible:hover { transform: translate(-50%, -50%) rotate(-24deg) translateX(-440px) scale(1.05); z-index: 10; }
.ai-card:nth-child(2).visible:hover { transform: translate(-50%, -50%) rotate(-16deg) translateX(-320px) scale(1.05); z-index: 10; }
.ai-card:nth-child(3).visible:hover { transform: translate(-50%, -50%) rotate(-8deg)  translateX(-200px) scale(1.05); z-index: 10; }
.ai-card:nth-child(4).visible:hover { transform: translate(-50%, -50%) rotate(0deg)   translateX(0)      scale(1.05); z-index: 10; }
.ai-card:nth-child(5).visible:hover { transform: translate(-50%, -50%) rotate(8deg)   translateX(200px)  scale(1.05); z-index: 10; }
.ai-card:nth-child(6).visible:hover { transform: translate(-50%, -50%) rotate(16deg)  translateX(320px)  scale(1.05); z-index: 10; }
.ai-card:nth-child(7).visible:hover { transform: translate(-50%, -50%) rotate(24deg)  translateX(440px)  scale(1.05); z-index: 10; }





/* 🕶 Section fades to pure black when out of view */
.ai-cards-section.fade-to-black {
  background-color: #000 !important;
  transition: background-color 0.8s ease;
}

.ai-cards-section.fade-to-black .ai-card {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.6s ease;
}


/* ===================================== */
/* 📱 AI CARDS – iOS OPTIMISED (Same Layout) */
/* ===================================== */

@media (max-width: 768px) {

  /* 🔥 Remove sticky behavior on phone to prevent overlap */
  .ai-cards-section {
    position: relative;     /* was sticky on desktop */
    height: auto;           /* allow natural scroll flow */
    min-height: 100svh;     /* keep immersive feel */
    padding: 8rem 1.5rem 6rem;
    z-index: 1;             /* prevent stacking over next section */
  }

  /* Headline */
  .ai-cards-intro-headline {
    font-size: 2.2rem;      /* scaled from 4.5rem */
    margin-bottom: 4rem;
  }

  /* Cards container */
  .ai-cards-inner {
    height: 380px;          /* reduced from 550px */
    max-width: 100%;
  }

  /* Card size */
  .ai-card {
    width: 130px;           /* scaled from 200px */
    height: 200px;          /* scaled from 300px */
    border-radius: 16px;
  }

  /* 📱 Scaled fan layout (same structure, reduced offsets) */
  .ai-card:nth-child(1).visible { transform: translate(-50%, -50%) rotate(-24deg) translateX(-210px); z-index: 1; }
  .ai-card:nth-child(2).visible { transform: translate(-50%, -50%) rotate(-16deg) translateX(-150px); z-index: 2; }
  .ai-card:nth-child(3).visible { transform: translate(-50%, -50%) rotate(-8deg)  translateX(-80px);  z-index: 3; }
  .ai-card:nth-child(4).visible { transform: translate(-50%, -50%) rotate(0deg)   translateX(0);      z-index: 4; }
  .ai-card:nth-child(5).visible { transform: translate(-50%, -50%) rotate(8deg)   translateX(80px);   z-index: 3; }
  .ai-card:nth-child(6).visible { transform: translate(-50%, -50%) rotate(16deg)  translateX(150px);  z-index: 2; }
  .ai-card:nth-child(7).visible { transform: translate(-50%, -50%) rotate(24deg)  translateX(210px);  z-index: 1; }

  /* Disable hover expansion on mobile (no hover on touch) */
  .ai-card.visible:hover {
    transform: inherit;
  }

}










/* 🖼 Scroll-Over Image Section */
.slide-over-image-section {
  position: relative;
  height: 100vh;
  background-image: url('aislide.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 6;
}



/* ===================================== */
/* 📱 SLIDE OVER IMAGE – iOS OPTIMISED */
/* ===================================== */

@media (max-width: 768px) {

  .slide-over-image-section {
    height: 100svh;        /* better iOS dynamic viewport handling */
    min-height: 100vh;     /* fallback */
    background-position: center center;
    background-size: cover;
  }

}




















/*subscribe underline*/

.blue-link {
  text-decoration: none;
  color: #1e90ff; /* or your blue */
  display: inline-block;
  cursor: pointer;
}



/* 🌑 Dive In Section Container */
.dive-in-next-section {
  background-color: #000;
  color: white;
  padding: 10rem 2rem;
  z-index: 5;
  position: relative; /* ✅ Required for glow anchoring */
  overflow: hidden;

  /* ✅ Remove any chance of section separation */
  margin-bottom: 0;
  padding-bottom: 10rem;
}

/* 🔠 Header Layout */
.dive-in-content-expanded {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.dive-in-header-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.dive-in-big-headline {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 600px;
}

.moven-green {
  color: #00FFAE;
}

/* 🧱 Rectangle Layout (Larger & Refined) */
.rectangle-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 8rem;
  flex-wrap: wrap;
}

/* ⬛ Large Left Rectangle */
.large-rectangle {
  width: 640px;
  height: 400px;
  background-image: url('ai5.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

/* 📦 Right Side Group */
.right-rectangle-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ◼️ Smaller Right Rectangle */
.small-rectangle {
  width: 320px;
  height: 200px;
  background-image: url('ai6.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}


/* 📝 Paragraph + Link Text Block */
.rectangle-text-block {
  max-width: 320px;
}

/* 🟢 Green + White Paragraph (Larger) */
.green-white-paragraph {
  font-size: 1.3rem;
  line-height: 1.7;
  color: white;
}
.green-white-paragraph span {
  color: #00FFAE;
  font-weight: 600;
}

/* 🔵 Blue Link with Underline */
.blue-link {
  color: #53CAFC;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1rem;
  position: relative;
  display: inline-block;
}

.blue-underline {
  display: block;
  height: 2px;
  background-color: #53CAFC;
  width: 100%;
  margin-top: 0.3rem;
}

/* 🖼 Mockup Image */
.mockup-image {
  text-align: center;
  margin: 5rem 0 3rem;
}

.mockup-image img {
  max-width: 500px;
  width: 100%;
  height: auto;
}

/* 📝 Large White Paragraph */
.white-paragraph-text {
  color: white;
  font-size: 1.6rem;
  text-align: center;
  max-width: 800px;
  margin: 2rem auto 4rem;
  line-height: 1.7;
}

/* 🖼 Wide Image with Glow */
.wide-image-wrapper {
  position: relative;
  margin-bottom: 6rem;
  z-index: 1;
}

.wide-image-wrapper img {
  width: 100%;
  max-width: 1600px;
  max-height: 300px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  position: relative;
  z-index: 2;
}

/* 💚 Full-Width Green Glow at Bottom */
.fullscreen-green-glow {
  position: absolute;
  bottom: 0;
  left: -60vw;
  right: -60vw;
  height: 20vh;
  background: radial-gradient(
    ellipse at bottom center,
    rgba(0, 225, 255, 0.9),  /* ⬆️ Stronger green visibility */
    rgba(0, 229, 255, 0.3) 50% /* ⬇️ More focused fade */
  );
  filter: blur(120px);         /* ⬇️ Tighter blur for stronger center glow */
  z-index: 0;
  pointer-events: none;
}




/* ===================================== */
/* 📱 DIVE IN NEXT SECTION – iOS OPTIMISED */
/* ===================================== */

@media (max-width: 768px) {

  /* 🌑 Section Container */
  .dive-in-next-section {
    padding: 6rem 1.5rem;
    padding-bottom: 6rem;
  }

  /* 🔠 Headline */
  .dive-in-big-headline {
    font-size: 2rem;
    max-width: 100%;
  }

  /* 🧱 Rectangle Layout */
  .rectangle-layout {
    gap: 1.5rem;
    margin-top: 4rem;
    justify-content: center; /* keep balanced */
  }

  /* ⬛ Large Left Rectangle */
  .large-rectangle {
    width: 100%;
    max-width: 340px;
    height: 220px;
    border-radius: 14px;
  }

  /* ❌ Hide small paired image on phone */
  .small-rectangle {
    display: none !important;
  }

  /* 📦 Right Group */
  .right-rectangle-group {
    align-items: center; /* center content now that image is gone */
  }

  /* 📝 Text Block */
  .rectangle-text-block {
    max-width: 320px;
    text-align: center; /* ✅ center paragraph */
  }

  .green-white-paragraph {
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
  }

  /* 🔵 Subscribe Link */
  .blue-link {
    font-size: 1rem;
    text-align: center;
  }

  /* 🖼 Mockup Image */
  .mockup-image {
    margin: 3rem 0 2rem;
  }

  .mockup-image img {
    max-width: 320px;
  }

  /* 📝 Large White Paragraph */
  .white-paragraph-text {
    font-size: 1.1rem;
    max-width: 95%;
    margin: 1.5rem auto 3rem;
  }

  /* 🖼 Wide Image */
  .wide-image-wrapper img {
    max-height: 200px;
    border-radius: 14px;
  }

  /* 💚 Green Glow */
  .fullscreen-green-glow {
    height: 15vh;
    filter: blur(90px);
  }

}





























/* 🌑 Section Wrapper */
.ai-deep-dive-section {
  position: relative;
  background-color: #000;
  color: white;
  padding: 10rem 2rem;
  z-index: 5;
  overflow: hidden;
}

.ai-deep-dive-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

/* Headline + Subheadline */
.deep-dive-headline {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.deep-dive-subheadline {
  color: #b0b0b0;
  font-size: 1.3rem;
  max-width: 600px;
  margin-bottom: 4rem;
}

.moven-green {
  color: #53CAFC;
}

/* Main layout */
.deep-dive-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Left column */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 530px;
  flex: 1;
}

.small-boxes {
  display: flex;
  gap: 1rem;
}

/* Base rectangle style */
.deep-dive-rect {
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 🟦 Small rectangles (left column) */
.small-rect:nth-child(1) {
  width: 260px;
  height: 160px;
  background-image: url('ai51.jpg');
}

.small-rect:nth-child(2) {
  width: 260px;
  height: 160px;
  background-image: url('ai52.jpg');
}

/* Paragraph under small boxes */
.deep-dive-description {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
  color: white;
  max-width: 530px;
}


/* 🟪 Right large rectangle (top row) */
.deep-dive-layout .large-rect {
  width: 420px;
  height: 400px;
  flex-shrink: 0;
  margin-top: 0.5rem;
  background-image: url('ai53.jpg');
}

/* 🟪 Bottom large rectangle */
.deep-dive-bottom-row .large-rect {
  width: 420px;
  height: 400px;
  background-image: url('21.jpg');
}
/* Paragraph to the right of bottom box */
.bottom-right-paragraph {
  flex: 1;
  padding-top: 0.5rem;
}

.bottom-right-paragraph p {
  color: white;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 360px;
}

/* Wide image */
.deep-dive-wide-image {
  margin-top: 4rem;
  text-align: center;
}

.deep-dive-wide-image img {
  width: 100%;
  max-width: 1200px;
  height: 450px;
  border-radius: 16px;
}

/* 💖 Right-Side Pink Glow (Corrected Placement) */
.pink-glow-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -700px; /* Push outside content area */
  width: 600px;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(2, 205, 251, 0.6) 0%,
    rgba(255, 196, 253, 0.2) 40%,
    rgba(255, 196, 253, 0) 80%
  );
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}




/* ===================================== */
/* 📱 AI DEEP DIVE – iOS OPTIMISED */
/* (Centered Visual Layout) */
/* ===================================== */

@media (max-width: 768px) {

  /* 🌑 Section Wrapper */
  .ai-deep-dive-section {
    padding: 6rem 1.5rem;
  }

  .ai-deep-dive-inner {
    max-width: 100%;
  }

  /* 🔠 Headline */
  .deep-dive-headline {
    font-size: 2rem;
    line-height: 1.25;
    text-align: center;
  }

  .deep-dive-subheadline {
    font-size: 1rem;
    margin-bottom: 3rem;
    max-width: 100%;
    text-align: center;
  }

  /* 🧱 Main layout — CENTERED */
  .deep-dive-layout {
    justify-content: center;     /* 🔥 centers the whole layout */
    align-items: center;
    gap: 1.5rem;
  }

  /* 📦 Left column */
  .left-column {
    align-items: center;         /* center its content */
    text-align: center;
    max-width: 100%;
  }

  /* 🟦 Keep small boxes side-by-side but centered */
  .small-boxes {
    justify-content: center;     /* 🔥 center the row */
    gap: 0.75rem;
  }

  .small-rect:nth-child(1),
  .small-rect:nth-child(2) {
    width: 140px;
    height: 90px;
    border-radius: 12px;
  }

  /* 📝 Paragraph */
  .deep-dive-description {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
  }

  /* 🟪 Right large rectangle — centered */
  .deep-dive-layout .large-rect {
    width: 220px;
    height: 220px;
    border-radius: 14px;
  }

  /* 🖼 Wide image */
  .deep-dive-wide-image {
    text-align: center;
  }

  .deep-dive-wide-image img {
    height: 240px;
    border-radius: 14px;
  }

  /* 💖 Pink Glow */
  .pink-glow-overlay {
    right: -300px;
    width: 400px;
    filter: blur(80px);
  }

}






























/* 🌌 Pro AI Section */
.pro-ai-section {
  position: relative;
  background-color: #000;
  color: white;
  padding: 10rem 2rem 6rem;
  overflow: hidden;
  z-index: 5;
}

.pro-ai-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 💙 Blue Glow at Top */
.blue-glow-overlay {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 400px;
  background: radial-gradient(
    ellipse at top,
    rgba(83, 202, 252, 0.35),
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(100px);
  z-index: 1;
  pointer-events: none;
}

/* 🟢 Gradient Headline */
.pro-ai-headline {
  font-size: 2.8rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 5rem;
}

.moven-gradient-text {
  background: linear-gradient(to right, #53CAFC, #53CAFC, #53CAFC, #53CAFC);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 📱 Image */
.pro-ai-mockup {
  text-align: center;
  margin-bottom: 5rem;
}
.pro-ai-mockup img {
  max-width: 500px;
  width: 400%;
  height: auto;
}

/* 🧱 Text + Image Row */
.pro-ai-content-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4rem;
}

/* ✍️ Text Block */
.pro-ai-text-block {
  flex: 1;
  max-width: 550px;
}
.pro-ai-small-headline {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.pro-ai-subheadline {
  font-size: 1.4rem;
  font-weight: 500;
  color: #ccc;
  margin-bottom: 1.5rem;
}
.pro-ai-paragraph {
  font-size: 1.2rem;
  line-height: 1.7;
  color: white;
}

/* 🖼 Side Image */
.pro-ai-side-image {
  flex: 1;
  max-width: 500px;
}
.pro-ai-side-image img {
  width: 100%;
  border-radius: 12px;
  display: block;
}



/* 🔷 Extra Layout Below Pro AI Content */
.pro-ai-extra-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 5rem;
  flex-wrap: wrap;
}

/* 📦 Left Wide Rectangle (taller height) */
.extra-left-rectangle {
  flex: 1;
  min-width: 500px;
  height: 500px;
  border-radius: 16px;
  background-image: url('ai41.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 📦 Right Stack with Smaller Rectangle */
.extra-right-stack {
  flex: 1;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ◽️ Small Right Rectangle (half width, taller) */
.extra-small-rectangle {
  width: 60%;
  height: 250px;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  background-image: url('ai43.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 📝 White Paragraph (same width as .extra-small-rectangle) */
.extra-white-paragraph {
  color: white;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  width: 60%; /* ⬅️ Matches rectangle width */
}

/* 🔗 Blue Link (same width) */
.extra-blue-link {
  color: #53CAFC;
  font-size: 1rem;
  text-decoration: underline;
  font-weight: 600;
  width: 60%; /* ⬅️ Optional, keeps link aligned with paragraph and rectangle */
}



/* ===================================== */
/* 📱 PRO AI SECTION – iOS OPTIMISED */
/* (Same Layout, Scaled Cleanly) */
/* ===================================== */

@media (max-width: 768px) {

  /* 🌌 Section */
  .pro-ai-section {
    padding: 6rem 1.5rem 4rem;
  }

  /* 💙 Glow */
  .blue-glow-overlay {
    height: 250px;
    filter: blur(80px);
  }

  /* 🟢 Headline */
  .pro-ai-headline {
    font-size: 1.9rem;        /* scaled from 2.8rem */
    margin-bottom: 3rem;
    line-height: 1.25;
  }

  /* 📱 Main Mockup */
  .pro-ai-mockup {
    margin-bottom: 3rem;
  }

  .pro-ai-mockup img {
    max-width: 280px;         /* prevent overflow */
    width: 100%;
  }

  /* 🧱 Text + Image Row */
  .pro-ai-content-row {
    gap: 2rem;
    justify-content: center;  /* keep centered */
  }

  .pro-ai-text-block {
    max-width: 100%;
  }

  .pro-ai-small-headline {
    font-size: 0.9rem;
  }

  .pro-ai-subheadline {
    font-size: 1.1rem;
  }

  .pro-ai-paragraph {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pro-ai-side-image {
    max-width: 320px;
  }

  .pro-ai-side-image img {
    border-radius: 10px;
  }

  /* 🔷 Extra Layout Below */

  .pro-ai-extra-layout {
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
  }

  /* 📦 Left Large Rectangle */
  .extra-left-rectangle {
    min-width: unset;
    width: 100%;
    max-width: 320px;
    height: 260px;           /* scaled from 500px */
    border-radius: 14px;
  }

  /* 📦 Right Stack */
  .extra-right-stack {
    max-width: 320px;
  }

  /* ◽️ Small Rectangle */
  .extra-small-rectangle {
    width: 100%;             /* keep alignment clean */
    height: 140px;           /* scaled from 250px */
    border-radius: 12px;
  }

  /* 📝 Paragraph */
  .extra-white-paragraph {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* 🔗 Link */
  .extra-blue-link {
    width: 100%;
    font-size: 0.95rem;
  }

}




















/* 🎯 Goals with AI Section */



@media (min-width: 768px) {
  .goals-with-ai-section {
    border-bottom-left-radius: 100% 12rem;
    border-bottom-right-radius: 100% 12rem;
  }
}














/* 🎯 Goals With AI Section */
.goals-with-ai-section {
  background-color: #1e1e1e;
  color: white;
  padding: 10rem 2rem;
  position: relative;
  z-index: 5;
  overflow: hidden;

  /* ✅ Force-remove rounded corners */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


.goals-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* 🔠 Headline + Subheadline */
.goals-headline {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: left;
}
.blue-word {
  color: #53CAFC;
}
.goals-subheadline {
  font-size: 1.3rem;
  color: #b0b0b0;
  margin-bottom: 4rem;
  text-align: left;
}

/* 🟢 Poker Chips Row */
.goals-chip-row {
  position: relative;
  height: 100px;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.poker-chip-group {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 🎰 Chip Style */
.goal-chip {
  width: 100px;               /* ⬆️ Increased from 80px */
  height: 100px;              /* ⬆️ Increased from 80px */
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(-20px) scale(0.8);
  transition: transform 0.5s ease, opacity 0.5s ease;
  margin-left: -50px;         /* ⬆️ Adjusted to maintain overlap */
  border: 4px solid white;
  z-index: 1;
}


/* ✅ Reveal Animation */
.goal-chip.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ✨ Hover Effect */
.goal-chip:hover {
  transform: translateY(-10px) scale(1.05);
  z-index: 5;
}

/* 📘 Final Subheadline and Mockup */
.goals-final-subheadline {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 3rem;
  color: white;
}

.goals-mockup-image {
  text-align: center;
}
.goals-mockup-image img {
  max-width: 600px;
  width: 100%;
  height: auto;
}




/* ===================================== */
/* 📱 GOALS WITH AI – iOS OPTIMISED */
/* (Same Layout, Scaled Cleanly) */
/* ===================================== */

@media (max-width: 768px) {

  /* 🎯 Section */
  .goals-with-ai-section {
    padding: 6rem 1.5rem;
  }

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

  /* 🔠 Headline + Subheadline (still left aligned) */
  .goals-headline {
    font-size: 2rem;              /* scaled from 3.2rem */
    line-height: 1.25;
  }

  .goals-subheadline {
    font-size: 1rem;              /* scaled from 1.3rem */
    margin-bottom: 3rem;
  }

  /* 🟢 Poker Chips Row */
  .goals-chip-row {
    height: 80px;                 /* scaled from 100px */
    margin-bottom: 3rem;
  }

  .goal-chip {
    width: 70px;                  /* scaled from 100px */
    height: 70px;
    margin-left: -35px;           /* maintain overlap proportion */
    border: 3px solid white;
  }

  /* Disable hover effect on touch devices */
  .goal-chip:hover {
    transform: translateX(0) scale(1);
  }

  /* 📘 Final Subheadline */
  .goals-final-subheadline {
    font-size: 1.05rem;           /* scaled from 1.4rem */
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }

  /* 🖼 Mockup Images */
  .goals-mockup-image img {
    max-width: 320px;             /* prevent oversized rendering */
  }

}
















/* 🖤 Moven AI Outro Section */
.moven-ai-outro-section {
  background-color: #000;
  color: white;
  padding: 10rem 2rem;
  position: relative;
  z-index: 5;
  overflow: visible;
}

.moven-ai-outro-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* 🧠 Headline + Subheadline */
.moven-outro-headline {
  font-size: 3rem;
  font-weight: 800;
  text-align: left;
  margin-bottom: 1rem;
}

.moven-outro-subheadline {
  font-size: 1.3rem;
  color: #b0b0b0;
  text-align: left;
  margin-bottom: 4rem;
}

.blue-word {
  color: #53CAFC;
}

/* 🖼 2x2 Image Grid */
.moven-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.moven-image-grid img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* 📝 Paragraph Below Grid */
.moven-grid-paragraph {
  font-size: 1.4rem;
  color: white;
  margin: 3rem auto;
  max-width: 700px;
}

/* 🖼 Wide Image with Overlapping Smaller Image */
.moven-wide-image-wrapper {
  position: relative;
  margin-top: 6rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.wide-main-image {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.overlay-bottom-image {
  position: absolute;
  width: 800px;
  right: -300px;
  bottom: -80px;
  z-index: 10;
  border-radius: 16px;
}



/* ===================================== */
/* 📱 MOVEN AI OUTRO – iOS OPTIMISED */
/* (Same Layout, Scaled Cleanly) */
/* ===================================== */

@media (max-width: 768px) {

  /* 🖤 Section */
  .moven-ai-outro-section {
    padding: 6rem 1.5rem;
  }

  .moven-ai-outro-inner {
    max-width: 100%;
  }

  /* 🧠 Headline + Subheadline (still left aligned) */
  .moven-outro-headline {
    font-size: 1.9rem;          /* scaled from 3rem */
    line-height: 1.25;
  }

  .moven-outro-subheadline {
    font-size: 1rem;            /* scaled from 1.3rem */
    margin-bottom: 3rem;
  }

  /* 🖼 2x2 Grid (keep structure) */
  .moven-image-grid {
    gap: 1rem;                  /* tighter spacing */
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .moven-image-grid img {
    border-radius: 10px;
  }

  /* 📝 Paragraph Below Grid */
  .moven-grid-paragraph {
    font-size: 1.05rem;         /* scaled from 1.4rem */
    margin: 2rem auto;
    padding: 0 0.5rem;
  }

  /* 🖼 Wide Image + Overlay */
  .moven-wide-image-wrapper {
    margin-top: 4rem;
  }

  .wide-main-image {
    border-radius: 14px;
  }

  .overlay-bottom-image {
    width: 260px;               /* scaled from 800px */
    right: -60px;               /* proportional overhang */
    bottom: -30px;
    border-radius: 14px;
  }

}























/* 🌟 Glass Bottom Footer Container */
.glass-bottom-footer {
  background: linear-gradient(
    135deg,
    rgba(83, 202, 252, 0.25),
    rgba(255, 255, 255, 0.1),
    rgba(83, 202, 252, 0.2)
  );
  backdrop-filter: blur(48px) saturate(250%);
  -webkit-backdrop-filter: blur(48px) saturate(250%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 48px rgba(83, 202, 252, 0.35),
    inset 0 0 60px rgba(255, 255, 255, 0.08);
  padding: 100px 70px;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
  color: #B0B0B0;
  font-family: 'Satoshi', sans-serif;
  margin-top: 0;
  position: relative;
}

/* ✨ Shimmer Overlay */
.glass-bottom-footer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 70%
  );
  animation: shimmerMove 8s infinite ease-in-out;
  z-index: 1;
  pointer-events: none;
}

/* 🏷 Top Title */
.footer-title {
  font-size: 2rem;
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin-bottom: 50px;
  font-family: 'Satoshi', sans-serif;
  position: relative;
  z-index: 2;
}

/* 📦 Footer Layout */
.glass-footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 50px;
  position: relative;
  z-index: 2;
}

.footer-col {
  min-width: 180px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logobottom {
  width: 160px;
  margin: 40px auto 16px auto;
  display: block;
}

.footer-small-text {
  font-size: 0.9rem;
  color: #53CAFC;
  margin: 6px 0;
  line-height: 1.4;
  text-align: center;
  margin-top: 10px;
}

.footer-small-text a {
  color: #53CAFC;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-small-text a:hover {
  color: #00FFAE;
  text-decoration: underline;
}

/* 📰 Section Headlines */
.footer-headline {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(255, 255, 255);
  margin-bottom: 12px;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 6px;
  width: max-content;
}

/* 📋 Lists */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin: 6px 0;
  font-size: 0.95rem;
  cursor: pointer;
  color: #53CAFC;
  transition: color 0.3s ease;
}

.footer-list li a {
  color: #53CAFC;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-list li a:hover {
  color: #00FFAE;
  text-decoration: underline;
}

/* 📧 Email */
.footer-email {
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #53CAFC;
}

/* 🌐 Social Icons */
.footer-socials {
  display: flex;
  gap: 14px;
}

.footer-socials img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.footer-socials img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* 📱 QR Icon */
.qr-icon {
  width: 80px;
  height: auto;
  margin: 0 0 10px 0;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.download-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* 🛒 Store Icons */
.store-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.store-icons img {
  width: 105px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.store-icons img:hover {
  transform: scale(1.05);
}

.store-icons img[alt="WatchOS"] {
  border-radius: 12px;
  overflow: hidden;
}








/* ───────── iPhone Glass Bottom Footer (Left Aligned + Branding Bottom) ───────── */
@media (max-width: 768px) {

  .glass-bottom-footer {
    padding: 70px 24px;
  }

  .glass-footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    text-align: left;
  }

  .footer-col {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
  }

  /* 🔥 Move logo + copyright column to bottom */
  .glass-footer-content .footer-col:first-child {
    order: 99;
    margin-top: 40px;
  }

  .footer-logobottom {
    width: 140px;
    margin: 40px 0 12px 0;
  }

  .footer-small-text {
    font-size: 0.85rem;
    text-align: left;
    margin-top: 6px;
  }

  /* Section Headlines */
  .footer-headline {
    font-size: 1.1rem;
    border-bottom: none;
    padding-bottom: 0;
    color: #000 !important; /* ✅ Black headlines on phone */
  }

  /* Lists */
  .footer-list li {
    font-size: 0.9rem;
  }

  .footer-email {
    font-size: 0.9rem;
  }

  /* Social icons */
  .footer-socials {
    justify-content: flex-start;
  }

  /* Download Block */
  .download-block {
    align-items: flex-start;
    text-align: left;
  }

  .qr-icon {
    width: 70px;
  }

  .store-icons {
    justify-content: flex-start;
    gap: 12px;
  }

  .store-icons img {
    width: 95px;
  }

}