/* =========================
   1. ROBOTO (Variable Font)
   ========================= */

/* Main Roboto (Handles all weights 100-900) */
@font-face {
  font-family: 'Roboto';
  /* Note: "truetype-variations" tells the browser it allows weight changes */
  src: url('../public/assets/fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* Italic Roboto */
@font-face {
  font-family: 'Roboto';
  src: url('../public/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* =========================
   2. COOLVETICA
   ========================= */

/* Coolvetica Regular */
@font-face {
  font-family: 'Coolvetica';
  src: url('../public/assets/fonts/Coolvetica Rg.otf') format('opentype');
  font-weight: 400;
  /* Standard weight */
  font-style: normal;
}

/* Coolvetica Italic */
@font-face {
  font-family: 'Coolvetica';
  src: url('../public/assets/fonts/Coolvetica Rg It.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

/* Coolvetica Condensed (Optional, if you want to use it) */
@font-face {
  font-family: 'Coolvetica Condensed';
  src: url('../public/assets/fonts/Coolvetica Rg Cond.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Coolvetica Heavy/Compressed (Optional) */
@font-face {
  font-family: 'Coolvetica Heavy';
  src: url('../public/assets/fonts/Coolvetica Hv Comp.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}


:root {
  --primary-orange: #FF6B00;
  --primary-yellow: #FFD600;
  --dark-bg: #1A1A1A;
  --light-bg: #F5F5F5;
  --text-dark: #000000;
  --text-light: #FFFFFF;
  --font-heading: 'Coolvetica Condensed', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--light-bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ========================================
   PAGE LOADER
   ======================================== */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-yellow) 0%, #FFE066 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
}

.loader-logo-wrapper {
  position: relative;
  width: 200px;
  margin: 0 auto 15px;
  text-align: center;
}

.loader-logo {
  width: 180px;
  display: block;
  margin: 0 auto;
}

/* Bouncing popcorn on top of logo */
.bouncing-snack {
  display: block;
  font-size: 2rem;
  margin-bottom: -5px;
  animation: bouncingPopcorn 0.6s ease-in-out infinite;
}

@keyframes bouncingPopcorn {

  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }

  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

.loader-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}

.loader-bar {
  width: 250px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

.loader-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-orange), #FF8C42);
  border-radius: 3px;
  position: relative;
  transition: width 0.3s ease-out;
}

/* Running cup at progress front */
.progress-runner {
  position: absolute;
  right: -12px;
  top: -18px;
  font-size: 1.4rem;
  animation: runnerBounce 0.3s ease-in-out infinite alternate;
}

@keyframes runnerBounce {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(-4px) rotate(5deg);
  }
}

@keyframes loadProgressLinear {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* ========================================
   FLOATING ACTION BUTTONS & CHAT WIDGET
   ======================================== */
.floating-buttons {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.fab-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
  background: var(--primary-orange);
  color: white;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.fab-btn.whatsapp {
  background: #25D366;
}

.fab-btn.whatsapp:hover {
  background: #128C7E;
}

#back-to-top-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

/* Chat Widget */
.chat-widget {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 350px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  overflow: hidden;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, visibility 0.3s ease;
  will-change: transform, opacity;
}

.chat-widget.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.chat-widget.hidden {
  display: block;
  /* Override default hidden */
}

.chat-header {
  background: #25D366;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.chat-header-info i {
  font-size: 1.5rem;
}

.chat-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
}

.chat-close:hover {
  transform: rotate(90deg);
}

.chat-body {
  padding: 20px;
  min-height: 100px;
  background: #f0f0f0;
}

.chat-welcome p {
  background: white;
  padding: 12px 16px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-hint {
  font-size: 0.8rem !important;
  color: #666 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 0 !important;
}

.chat-input-area {
  display: flex;
  padding: 15px;
  gap: 10px;
  background: white;
  border-top: 1px solid #eee;
}

.chat-input-area input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.chat-input-area input:focus {
  border-color: #25D366;
}

.chat-send-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-send-btn:hover {
  background: #128C7E;
  transform: scale(1.1);
}

h1,
h2,
h3,
h4 {
  font-family: 'Coolvetica Condensed', sans-serif;
  text-transform: uppercase;
}

/* Header */
header {
  padding: 30px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
  /* Improve performance for fixed header */
  transform: translateZ(0);
}

/* Right side container for CTA + Hamburger */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

header.scrolled {
  padding: 15px 60px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

img.snaxx-logo {
  width: 200px;
  cursor: pointer;
  will-change: width, transform, opacity;
  grid-area: stack;

  /* FIX 1: Combine all transitions into ONE line. 
     If you separate them, the second one deletes the first one.
  */
  /* transition: opacity 0.5s ease !important; */
}

.snaxx-logo-container {
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
  z-index: 10001;
}

/* --- Default State (Menu Closed) --- */
.snaxx-logo-menu-closed {
  opacity: 1;
  /* Optional: No delay when closing, so it reverts instantly */
  transition-delay: 0;
}

.snaxx-logo-menu-open {
  opacity: 0;
  pointer-events: none;
  /* Good practice: prevents clicking the hidden logo */
}

/* --- Active State (Menu Open) --- */

/* 1. Hide the "Closed" logo */
body.menu-open .snaxx-logo-menu-closed {
  opacity: 0;
  pointer-events: none;

}

/* 2. Show the "Open" logo with DELAY */
body.menu-open .snaxx-logo-menu-open {
  opacity: 1;
  pointer-events: auto;

  /* FIX 2: This makes the logo wait 1s before appearing */
  transition-delay: 0.4s !important;
}


header.scrolled img.snaxx-logo {
  width: 160px;
}

.get-snack-btn {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 0;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Underline effect */
.get-snack-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text-dark);
  transition: background 0.3s ease;
}

.get-snack-btn .arrow-icon {
  font-size: 1.2rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.get-snack-btn:hover {
  color: var(--primary-orange);
}

.get-snack-btn:hover::after {
  background: var(--primary-orange);
}

.get-snack-btn:hover .arrow-icon {
  transform: rotate(-45deg);
}

header.scrolled .get-snack-btn {
  color: var(--text-dark);
  padding-bottom: 2px;

}

header.scrolled .get-snack-btn:hover {
  color: var(--primary-orange) !important;
}

/* Mobile Header Styles */
@media (max-width: 768px) {
  header {
    padding: 15px 20px;
  }

  header.scrolled {
    padding: 20px;
  }

  body.menu-open header.scrolled {
    padding: 30px 20px;
  }

  img.snaxx-logo {
    width: 140px;
  }

  header.scrolled img.snaxx-logo {
    width: 120px;
  }

  .get-snack-btn.desktop-only {
    display: none;
  }
}

/* Desktop Navigation */
.nav-links {
  display: flex;
  gap: 35px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-orange);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--primary-orange);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Hide center nav links on ALL screens (hamburger menu everywhere) */
.nav-links {
  display: none;
}

/* Hamburger Menu Button */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 10px;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger animation when active */
.menu-btn.active {
  background: var(--primary-orange);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  z-index: 10001;
  /* Above menu overlay */
}

.menu-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translateY(13px);
  background: white;
}

.menu-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.menu-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translateY(-13px);
  background: white;
}

/* Show hamburger on ALL screens */
.menu-btn {
  display: flex;
}

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--primary-orange);
  z-index: 10000;
  /* Above everything including WhatsApp button */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Dynamic Watermark Number */
.menu-watermark-number {
  position: absolute;
  bottom: 0px;
  /* Aligned with bottom elements */
  left: 20px;
  font-family: var(--font-heading);
  font-size: clamp(80px, 25vw, 150px);
  font-weight: 900;
  color: rgba(0, 0, 0, 0.1);
  /* Subtle dark watermark */
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.5s;
}

.mobile-menu.active .menu-watermark-number {
  opacity: 1;
  transform: translateY(0);
}

/* SNAXX Logo Watermark (Background Image) */
.menu-bg-logo {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-10deg);
  width: 150%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  filter: grayscale(100%) brightness(0);
}

.mobile-menu.active .menu-bg-logo {
  opacity: 0.05;
  /* Same subtle opacity as before */
}

/* Menu Header */
.menu-header {
  position: relative;
  z-index: 10;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease 0.1s;
}

.mobile-menu.active .menu-header {
  opacity: 1;
  transform: translateY(0);
  /* Alignment fix */
  display: flex;
  align-items: center;
  height: 48px;
  /* Match close button height */
}

.menu-logo {
  width: 120px;
  height: auto;
}

/* Main Navigation */
.mobile-nav {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Spacing between items */
  flex: 1;
  justify-content: center;
  padding-left: 100px;
  /* Remove padding */
  border-left: none;
  /* Remove container border */
}

.menu-link {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #000;
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 4rem);
  /* Larger font */
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: 10px 0 10px 20px;
  /* Indent slightly */
  opacity: 0;
  transform: translateX(-50px);
  /* Fast transition for instant hover feel */
  overflow: visible;
  /* Allow arrow to be seen */
  line-height: 1;
  /* Hidden left line */
}

/* Staggered slide-in animation */
.mobile-menu.active .menu-link:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.mobile-menu.active .menu-link:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

.mobile-menu.active .menu-link:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

.mobile-menu.active .menu-link:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s;
}

.mobile-menu.active .menu-link:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

/* Menu link hover effects */
.menu-link:hover .menu-link-text {
  border-left-color: #D4FF00;
  /* Bright yellow/green accent */
  padding-left: 50px;
  /* Slide right */
}

/* Remove old background overlay */
.menu-link::before {
  display: none;
}

.menu-link-text {
  position: relative;
  transition: all 0.2s ease;
  border-left: 5px solid transparent;
  z-index: 1;
}

.menu-link-arrow {
  font-size: 1.5rem;
  opacity: 0;
  transform: translateX(-20px) rotate(-45deg);
  /* Arrow points up-right like reference */
  transition: all 0.2s ease;
  /* Same timing as menu-link */
  margin-left: 15px;
  color: rgba(0, 0, 0, 0.4);
}

.menu-link:hover .menu-link-arrow {
  opacity: 1;
  transform: translateX(0) rotate(-45deg);
}

/* Desktop: Larger menu links */
@media (min-width: 1025px) {
  .menu-link {
    font-size: clamp(3.5rem, 6vw, 5rem);
    /* Bigger on desktop */
    padding: 15px 0 15px 30px;
  }

  .menu-link-arrow {
    font-size: 2rem;
    margin-left: 20px;
  }

  .menu-bg-logo {
    font-size: clamp(250px, 40vw, 600px);
  }

  .menu-watermark-number {
    font-size: clamp(120px, 20vw, 200px);
  }
}

/* Bottom Section Layout */
.menu-bottom {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: flex-end;
  /* Align bottom */
  justify-content: space-between;
  padding-bottom: 20px;
  margin-top: auto;
  /* Push to bottom */
}

/* Connect Section (Left) */
.menu-connect {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 20px;
  position: relative;
  z-index: 2;
  /* Above watermark */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.7s;
}

.mobile-menu.active .menu-connect {
  opacity: 1;
  transform: translateY(0);
}

.connect-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: -5px;
}

.connect-links {
  display: flex;
  gap: 15px;
}

.connect-links a {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  border-bottom: 3px solid #000;
  /* Underline as per design */
  line-height: 1.2;
}

/* CTA Button inside Menu (matching header style) */
.menu-cta {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  background: transparent;
  color: #000;
  text-decoration: none;
  /* padding: 10px 0; */
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-right: 50px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.8s;
  border-bottom: 3px solid #000;
}

.mobile-menu.active .menu-cta {
  opacity: 1;
  transform: translateY(0);
}

.menu-cta:hover {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
}

/* Clear old social/cta styles */
.menu-social {
  display: none;
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Hide floating buttons when menu is open */
body.menu-open #whatsapp-btn,
body.menu-open #back-to-top-btn,
body.menu-open .whatsapp-widget,
body.menu-open footer {
  display: none !important;
}

/* Hero */
#hero {
  min-height: 100vh;
  padding: 120px 60px 20px 60px;
  /* Top padding accounts for fixed header */
  display: flex;
  flex-direction: column;
  background: white;
}

@media (max-width: 768px) {
  #hero {
    padding: 100px 20px 20px 20px;
  }
}

.hero-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* margin-bottom: -20px; */
  /* Overlap slightly */
  z-index: 1;
}

.hero-top .bracket {
  font-size: 8rem;
  color: var(--primary-yellow);
  font-weight: 300;
  line-height: 1;
}

.hero-top h1.outline-text {
  font-size: 18rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin: 0;
}

.hero-middle {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.hero-left,
.hero-right {
  flex: 1;
}

.hero-left {
  text-align: right;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.hero-right {
  text-align: left;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  justify-content: space-between;
  align-items: center;
}

.hero-center {
  flex: 0 0 auto;
  z-index: 10;
}

.solid-text {
  font-size: 18rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 0.9;
  margin: 0;
}

.machine-container {
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
}

.hero-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.hero-description {
  max-width: 350px;
  margin-bottom: 100px;
}

.hero-description p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.btn-orange {
  background: #F25F29;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease;
  position: relative;
}

.btn-orange:hover {
  box-shadow: 0 10px 30px rgba(242, 95, 41, 0.4);
}

.btn-icon {
  background: #F25F29;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease;
}

.btn-icon:hover {
  box-shadow: 0 10px 25px rgba(242, 95, 41, 0.4);
}

/* Magnetic Button Effect */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease !important;
  will-change: transform;
}

.hero-bottom {
  margin-bottom: 100px;
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-weight: 500;
}

.scroll-circle {
  width: 40px;
  height: 40px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* Responsive adjustments for hero */
@media (max-width: 1350px) {

  header {
    padding: 15px 60px;
  }

  .hero-top h1.outline-text,
  .solid-text {
    font-size: 7rem;
  }

  .hero-top .bracket {
    font-size: 6rem;
  }

  .machine-container {
    width: 300px;
  }
}

@media (max-width: 1350px) {

  /* Flatten the flex hierarchy to reorder elements */
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    /* gap: 10px; */
  }

  .hero-middle,
  .hero-left,
  .hero-right {
    display: contents;
    /* Allows children to participate in the grid flex layout */
  }

  /* 1. TITLE STACKING */
  .hero-top {
    order: 1;
    width: 100%;
    /* margin-bottom: -20px; */
    /* Tight stacking */
    z-index: 2;
  }

  .hero-left .solid-text {
    order: 2;
    margin: 0;
    line-height: 1;
    z-index: 2;
  }

  .hero-right .solid-text {
    order: 3;
    margin: 0;
    line-height: 0.8;
    z-index: 2;
    /* margin-bottom: 40px; */
  }

  /* Typography Styling */
  .hero-top h1.outline-text,
  .solid-text {
    /* font-size: 15vw;  */
    font-family: 'Coolvetica Condensed', sans-serif;
    /* Fallback to a condensed font if needed */
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .hero-top h1.outline-text {
    /* Ensure only Upgrade has outline if desired, or all solid for mobile? 
       Reference shows filled text for Upgrade too? Or outline? 
       Let's keep outline for top, solid for others as per class, 
       but tighten them up. */
  }

  .hero-top .bracket {
    color: #FFD600;
    /* Snaxx Yellow */
    font-size: 5rem;
    font-weight: 900;
  }

  /* Hide the desktop "Upgrade your corner today" small CTA */
  .hero-bottom {
    display: none;
  }

  /* 2. IMAGE CARD */
  .hero-center {
    order: 4;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .machine-container {
    width: 100%;
    max-width: 100%;
    /* Allow full width */
    position: relative;
    /* Card Styling */
    border-radius: 20px;
    /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); */
  }

  .hero-image-container {
    background: transparent;
    border-radius: 0;
    padding: 0;
    position: relative;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 40px; */
    /* Space for the button if it hangs out */
  }

  .hero-img {
    max-height: 500px;
    /* Allow it to be taller */
    width: 100%;
    /* Fill the container */
    max-width: 400px;
    /* But don't get absurd */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    /* Stronger shadow for floating effect */
  }

  .machine-shadow {
    display: none;
    /* Hide default shadow */
  }

  /* NEW BUTTON OVERLAY */
  .eat-em-all-btn {
    position: absolute;
    bottom: 20px;
    left: 45%;
    /* Off-center slightly or centered? Reference looks centered on machine */
    transform: translateX(-50%) rotate(-2deg);
    /* Slight rotation for sticker vibe */
    width: 180px;
    background: #FFD600;
    color: black;
    font-weight: 900;
    border: none;
    padding: 10px 5px;
    font-size: 1.5rem;
    /* Handwritten size */
    border-radius: 2px;
    /* Rectangular strip */
    text-transform: lowercase;
    /* Matches 'eat 'em all!!!' in reference */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-family: 'Brush Script MT', cursive;
    /* Handwritten font fallback */
    z-index: 10;
  }

  /* 3. DESCRIPTION & ACTIONS */
  .hero-description {
    order: 5;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
  }

  .hero-description p {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* Main Orange CTA */
  .hero-actions button:first-child {
    background: #FF5722;
    color: white;
    width: 100%;
    max-width: 280px;
    padding: 16px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
  }

  /* Secondary Icon Button -> Link */
  .hero-actions button:last-child {
    background: transparent;
    box-shadow: none;
    color: #333;
    width: auto;
    height: auto;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0;
  }

  /* Replace icon with text content logic or assume user wants link style 
     Actually, current HTML has icon. Let's adjust opacity styling. */
  .hero-actions button:last-child i {
    display: inline-block;
    padding: 10px;
    transform: rotate(-45deg);
  }

  .hero-actions button:last-child::before {
    content: "Get a Snack!";
    text-decoration: underline;
  }
}

/* Partners */
#partners {
  padding: 30px;
  text-align: center;
  background: white;
}

.partner-logos {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 2rem;
  color: #ccc;
  margin-top: 10px;
}

/* Features */
#features {
  background: var(--dark-bg);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Paint stroke effect */
#features::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: white;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  /* Simplified jagged edge */
  /* Better jagged edge would need SVG or complex clip-path */
  clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
  transform: scaleY(-1);
}

.feature-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
}

.feature-row.reverse {
  flex-direction: row-reverse;
}

.feature-image img {
  width: 400px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.feature-text.dark-card {
  background: #2a2a2a;
  padding: 40px;
  border-radius: 20px;
  color: white;
  max-width: 400px;
  position: relative;
}

.card-icon {
  color: var(--primary-orange);
  font-size: 2rem;
  margin-bottom: 20px;
}

.feature-text h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.feature-text p {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.6;
}

/* Proof Section */
#proof {
  background: #F9F9F9;
  padding: 100px 60px;
  position: relative;
}

.proof-container {
  display: flex;
  gap: 50px;
  max-width: 1400px;
  margin: 0 auto;
  scale: 1.1;
}

.proof-left {
  flex: 0 0 300px;
  position: relative;
}

.proof-title {
  font-size: 8rem;
  line-height: 0.9;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 20px;
}

img.rocket-red {
  width: 100%;
}

.rocket-badge {
  display: inline-block;
  width: 7rem;
  border-radius: 10px;
  transform: rotate(-10deg);
  margin-left: 20px;
}

.proof-right {
  flex: 1;
}

.proof-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.proof-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.image-card {
  padding: 0;
}

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

.card-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-overlay h3 {
  font-size: 3rem;
  margin-bottom: 5px;
}

.card-overlay p {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.yellow-card {
  background: var(--primary-yellow);
  color: #333;
}

.orange-card {
  background: #F25F29;
  color: #333;
}

.proof-card h3 {
  font-size: 4rem;
  margin-bottom: 10px;
  line-height: 1;
}

.card-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: auto;
}

/* Chart Styles */
.chart-lines {
  margin-top: 20px;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.line-bg {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.line-fill {
  height: 100%;
  background: #333;
  border-radius: 2px;
  width: 0;
  transition: width 1.2s ease-out;
}

.line-fill.dark {
  background: black;
}

/* Animate line charts when visible */
.animate-on-scroll.visible .line-fill,
.proof-card.visible .line-fill {
  width: var(--fill-width, 20%);
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  margin-top: 20px;
}

.bar {
  width: 12%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 26px;
  position: relative;
  height: 0;
  transition: height 0.8s ease-out;
}

/* Staggered bar animation delays */
.bar:nth-child(1) {
  transition-delay: 0.1s;
}

.bar:nth-child(2) {
  transition-delay: 0.2s;
}

.bar:nth-child(3) {
  transition-delay: 0.3s;
}

.bar:nth-child(4) {
  transition-delay: 0.4s;
}

.bar:nth-child(5) {
  transition-delay: 0.5s;
}

.bar:nth-child(6) {
  transition-delay: 0.6s;
}

/* Animate bars when visible */
.animate-on-scroll.visible .bar,
.proof-card.visible .bar {
  height: var(--bar-height, 75%);
}

.bar span {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease 0.8s;
}

.animate-on-scroll.visible .bar span,
.proof-card.visible .bar span {
  opacity: 1;
}

.bar span.mycircle {
  width: 80%;
  aspect-ratio: 1;
  background-color: rgba(255, 255, 255, 0.459);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -2px;
}

.proof-descriptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.desc-item h4 {
  font-size: 2.5rem;
  color: #444;
  line-height: 1.4;
}

.proof-footer {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #ddd;
  padding-top: 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.installed-badge {
  font-size: 2rem;
  color: #333;
}

.installed-text strong {
  display: block;
  font-size: 1.1rem;
}

.installed-text p {
  color: #666;
}

.institution-logos {
  display: flex;
  gap: 40px;
  margin-left: auto;
}

.inst-logo {
  font-size: 2rem;
  color: #333;
  opacity: 0.8;
  width: 95px;
  background-size: cover;
  aspect-ratio: 1;
  background-position: center;
  filter: grayscale(1);
}

/* Statistics Bar - Proof Section */
.proof-stats-bar {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: #FF5722;
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: 0.95rem;
  color: #666;
  margin-top: 5px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .proof-stats-bar {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
  }

  .stat-value {
    font-size: 2.5rem;
  }
}

@media (max-width: 1350px) {
  .proof-container {
    flex-direction: column;
  }

  .proof-left {
    text-align: center;
    flex: auto;
  }

  .rocket-badge {
    position: static;
    margin-bottom: 10px;
  }

  .proof-cards {
    grid-template-columns: 1fr;
  }

  .proof-descriptions {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .proof-footer {
    flex-direction: column;
    text-align: center;
  }

  .institution-logos {
    margin-left: 0;
    justify-content: center;
  }
}

/* Product Partners */
#product-partners {
  padding: 50px 0;
  background: white;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

.partners-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
  padding: 0 60px;
}

.partners-icon {
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.partners-header h3 {
  font-size: 1.2rem;
  color: #333;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
}

/* Infinite Marquee Animation */
.marquee-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  /* Ensure it fits within viewport */
  overflow: hidden;
}

/* Fade edges for premium look */
.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, white 0%, transparent 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, white 0%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee 30s linear infinite;
  padding: 20px 0;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.partner-logo {
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.15);
}

.logo-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.partner-logo:hover .logo-circle {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.logo-circle span {
  font-size: 0.9rem;
  text-align: center;
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}

.delay-600 {
  transition-delay: 0.6s;
}

.slider-btn:hover {
  background: #f5f5f5;
  color: #333;
}

/* About Product Section */
#about-product {
  background: #1a1a1a;
  /* Dark background from image */
  background: linear-gradient(to bottom, #222, #111);
  padding: 80px 60px;
  color: white;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* 2. THE BACKGROUND LAYER (Bottom of sandwich) */
.bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Sits at the bottom */

  /* Example styling for the shapes - or put SVGs inside this div */
  background: transparent;
  pointer-events: none;
  /* Lets clicks pass through to the content */
}

/* 3. THE CONTENT LAYER (Top of sandwich) */
.about-content-wrapper {
  position: relative;
  /* Required for z-index */
  z-index: 2;
  /* Sits ON TOP of the shapes */

  /* Use this to control width of content if needed, e.g.: */
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 60px;
  text-transform: uppercase;
}

.product-feature-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin-bottom: 100px;
  max-width: 1200px;
  width: 100%;
  /* Ensure it spans full width */
  margin-left: auto;
  margin-right: auto;
}

.product-feature-row.reverse {
  flex-direction: row-reverse;
}

.pf-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pf-image img {
  max-width: 100%;
  height: auto;
  /* max-height: 500px; */
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.pf-content {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pf-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 50px;
  border-radius: 20px;
  max-width: 500px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pf-icon {
  font-size: 3rem;
  color: #F25F29;
  /* Orange from image */
  margin-bottom: 30px;
}

.pf-icon i {
  stroke-width: 1px;
}

.pf-card h3 {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.pf-card p {
  font-size: 1.2rem;
  color: #aaa;
  line-height: 1.6;
}

@media (max-width: 1350px) {
  .product-feature-row {
    flex-direction: column;
    gap: 40px;
    width: 100%;
    /* Ensure full width on mobile */
    padding: 0 20px;
    /* Add padding to prevent edge touching */
  }

  .product-feature-row.reverse {
    flex-direction: column;
  }

  .pf-card {
    padding: 30px;
    width: 100%;
    /* Full width cards */
    max-width: none;
    /* Reset max-width if needed */
  }

  .pf-image img {
    width: 100%;
    /* Make images responsive */
    height: auto;
  }
}

/* Key Highlights Section */
#key-highlights {
  padding: 80px 60px;
  background: #f9f9f9;
  color: #333;
}

.highlights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.hl-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.hl-tagline {
  font-size: 1.1rem;
  color: #555;
}

/* EXPANDABLE HIGHLIGHT WITH EYELID EFFECT */
.expandable-highlight {
  position: relative;
  overflow: hidden;
  /* Remove max-height, use overlays instead */
}

/* TOP EYELID */
.expandable-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to bottom, #f9f9f9 70%, rgba(249, 249, 249, 0.3));
  box-shadow: inset 0 -15px 25px rgba(0, 0, 0, 0.08);
  z-index: 10;
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* BOTTOM EYELID */
.expandable-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top, #f9f9f9 70%, rgba(249, 249, 249, 0.3));
  box-shadow: inset 0 15px 25px rgba(0, 0, 0, 0.08);
  z-index: 10;
  transform-origin: bottom center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  pointer-events: none;
}

/* EYELIDS OPEN ON HOVER */
.expandable-highlight:hover::before {
  transform: translateY(-100%);
}

.expandable-highlight:hover::after {
  transform: translateY(100%);
}

.highlight-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  border-bottom: 1px solid #eee;
  position: relative;
}

.hl-bracket {
  font-family: var(--font-heading);
  font-size: 12rem;
  color: var(--primary-orange);
  line-height: 0.8;
  font-weight: 300;
  transition: opacity 0.3s;
}

/* Reduce bracket size initially to fit the collapsed state if needed, or keep as is */

.hl-content {
  text-align: center;
  padding: 0 40px;
  position: relative;
  z-index: 5;
  /* Content sits below eyelids */
}

.hl-title {
  font-family: var(--font-heading);
  font-size: 10rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  line-height: 0;
  margin-bottom: 30px;
  white-space: nowrap;
}

.rocket-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 7.5rem;
  background: #e9a039;
  border-radius: 15px;
  overflow: hidden;
}

.rocket-img-small {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.hl-desc {
  font-size: 1rem;
  color: #666;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease 0.1s;
}

.expandable-highlight:hover .hl-desc {
  opacity: 1;
  transform: translateY(0);
}

.btn-catch-up {
  background: var(--primary-orange);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease 0.2s;
}

.expandable-highlight:hover .btn-catch-up {
  opacity: 1;
  transform: translateY(0);
}

.btn-catch-up:hover {
  transform: scale(1.05) translateY(0);
}

.highlight-rows {
  margin-top: 0;
}

.hl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid #eee;
  /* background transition handled by expandable-highlight */
}

/* Adjust font sizes/transform for the closed state */
.hl-row h3 {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: scale(1);
  /* Start slightly smaller to fit? No, user wants full size but cut off */
  display: inline-block;
}

.hl-row:hover h3 {
  transform: scale(1.05);
}

.highlight-main h2 {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: scale(1);
  backface-visibility: hidden;
}

.highlight-main:hover h2 {
  transform: scale(1.05);
  /* Slightly less aggressive zoom */
}

.hl-num {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  width: 100px;
  position: relative;
  z-index: 5;
}

.hl-row h3 {
  font-family: var(--font-heading);
  font-size: 10rem;
  font-weight: 700;
  flex: 1;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 5;
}

.hl-action {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  width: 100px;
  text-align: right;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 5;
}

.expandable-highlight:hover .hl-action {
  opacity: 1;
}

@media (max-width: 1350px) {
  .hl-title {
    font-size: 6rem;
    flex-wrap: wrap;
  }

  .hl-bracket {
    font-size: 8rem;
  }

  .hl-row h3 {
    font-size: 6rem;
  }

  /* Adjust expandable height for tablets */
  .expandable-highlight {
    max-height: 220px;
  }

  .expandable-highlight:hover {
    max-height: 900px;
  }
}

@media (max-width: 768px) {

  /* Key Highlights Header */
  .highlights-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Main Highlight */
  .highlight-main {
    flex-direction: column;
    padding: 20px 0;
  }

  .expandable-highlight {
    max-height: none;
  }

  .hl-bracket {
    display: none;
    /* Hide brackets on mobile for space */
  }

  /* Auto-open eyelids on mobile (touch devices) */
  .expandable-highlight::before {
    transform: translateY(-100%);
  }

  .expandable-highlight::after {
    transform: translateY(100%);
  }

  /* Show all hidden elements on mobile */
  .hl-desc,
  .btn-catch-up,
  .hl-action {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Mobile typography */
  .hl-title {
    font-size: 3.5rem;
    gap: 10px;
  }

  .rocket-icon-container {
    width: 6rem;
    height: 4.5rem;
  }

  /* Rows */
  .hl-row {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 30px 0;
  }

  .hl-row h3 {
    font-size: 3rem;
  }

  .hl-num,
  .hl-action {
    width: auto;
    text-align: center;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  #key-highlights {
    padding: 60px 20px;

  }

  .hero-description p {
    width: 100% !important;
  }

  .showcase-carousel {
    justify-content: start !important;
  }

  .hero-top h1.outline-text,
  .solid-text,
  .hero-top .bracket {
    font-size: 15vw;
  }

  .proof-title {
    font-size: 15vw !important;
    line-height: 0.85;
    text-align: center;
    font-family: 'Coolvetica Condensed', sans-serif;
    color: #111;
  }

  .rocket-badge {
    width: 4rem;
  }

  .proof-cards {
    flex-direction: column;
  }

  .hl-title {
    font-size: 2.5rem;
  }

  .hl-row h3 {
    font-size: 2rem;
  }

  .rocket-icon-container {
    width: 5rem;
    height: 3.75rem;
  }
}

/* Product Showcase */
#product-showcase {
  background: white;
}

.showcase-container {
  display: flex;
  gap: 60px;
  padding-left: 50px;
  margin: 0 auto;
  position: relative;
  /* For absolute arrow positioning */
}

.showcase-sidebar {
  padding: 100px 60px;
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.showcase-title {
  font-family: var(--font-heading);
  font-size: 7rem;
  line-height: 0.9;
  margin-bottom: 40px;
  color: black;
}

.showcase-nav {
  list-style: none;
  margin-bottom: 40px;
}

.showcase-nav li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.showcase-nav li.active {
  opacity: 1;
}

.showcase-nav li span {
  font-weight: 700;
  font-size: 1.1rem;
  color: #333;
}

.nav-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.nav-icon.yellow {
  background: var(--primary-yellow);
}

.nav-icon.blue {
  background: #4A90E2;
}

.nav-icon.brown {
  background: #5D4037;
  color: white;
}

.showcase-arrows {
  /* position: absolute; */
  top: 40px;
  right: 40px;
  display: flex;
  gap: 15px;
  z-index: 10;
}

.arrow-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.arrow-btn:hover {
  background: #e0e0e0;
}

.showcase-carousel {
  flex: 1;
  display: flex;
  gap: 100px;
  overflow-x: auto;
  padding-bottom: 20px;
  scrollbar-width: none;
  margin: 30px;
}

.showcase-carousel::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 500px;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover .card-image-container {
  transform: translateY(-10px);
  scale: 0.95;
}

.card-header {
  font-weight: 600;
  color: #666;
}

.card-image-container {
  scale: 1;
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, scale 0.4s ease;
}

/* Feature Overlay - Classic Popup on Hover */
.feature-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%);
  padding: 30px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  border-radius: 20px 20px 0 0;
}

.card-image-container:hover .feature-overlay {
  transform: translateY(0);
}

.feature-overlay h4 {
  color: var(--primary-orange);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  color: white;
  font-size: 0.95rem;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s ease;
}

.card-image-container:hover .feature-list li {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered animation delays */
.feature-list li:nth-child(1) {
  transition-delay: 0.1s;
}

.feature-list li:nth-child(2) {
  transition-delay: 0.15s;
}

.feature-list li:nth-child(3) {
  transition-delay: 0.2s;
}

.feature-list li:nth-child(4) {
  transition-delay: 0.25s;
}

.feature-list li:nth-child(5) {
  transition-delay: 0.3s;
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list li i {
  color: var(--primary-orange);
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.wavy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.wavy-bg.orange {
  background: #FFC107;
  background-image: radial-gradient(circle at 10% 20%, #FFD54F 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, #FF6F00 0%, transparent 30%);
}

.wavy-bg.blue {
  background: #4FC3F7;
  background-image: radial-gradient(circle at 10% 20%, #81D4FA 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, #0288D1 0%, transparent 30%);
}

.product-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: none;
}

.buy-now-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 2;
  background: #222;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 0;
}

.c1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
}

.c2 {
  width: 60px;
  height: 60px;
  bottom: 30%;
  right: 20%;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.color-dots {
  display: flex;
  gap: 5px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.orange {
  background: orange;
}

.dot.yellow {
  background: yellow;
}

.dot.red {
  background: red;
}

.dot.blue {
  background: blue;
}

.dot.cyan {
  background: cyan;
}

.dot.navy {
  background: navy;
}

@media (max-width: 1350px) {
  .showcase-container {
    flex-direction: column;
  }

  .showcase-sidebar {
    flex: auto;
    text-align: center;
  }

  .showcase-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .showcase-arrows {
    justify-content: center;
  }

  .product-card {
    flex: 0 0 300px;
  }

  .card-image-container {
    /* height: 400px; */
  }
}

/* Testimonials - New Design */
#testimonials {
  padding: 80px 60px;
  background: #f9f9f9;
  color: #333;
  position: relative;
}

.section-label-left {
  position: absolute;
  top: 40px;
  left: 60px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
}

.testimonial-header-new {
  text-align: center;
  margin-bottom: 60px;
  padding-top: 40px;
}

.testimonial-header-new h2 {
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 0.95;
  font-weight: 900;
  text-transform: uppercase;
}

.testimonial-list-new {
  max-width: 1200px;
  margin: 0 auto;
}

/* Desktop: 3-column grid layout */
@media (min-width: 901px) {
  .testimonial-row-new {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    border-top: 1px solid #e0e0e0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
  }

  .testimonial-row-new:last-child {
    border-bottom: 1px solid #e0e0e0;
  }

  .testimonial-row-new:hover {
    background: rgba(255, 107, 0, 0.03);
  }

  .tm-left {
    display: flex;
    align-items: flex-start;
    gap: 25px;
  }

  .tm-num {
    font-size: 0.9rem;
    color: #999;
    font-weight: 600;
    flex-shrink: 0;
    transition: color 0.3s ease;
  }

  .testimonial-row-new:hover .tm-num {
    color: var(--primary-orange);
  }

  .tm-info h4 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    color: #222;
  }

  .tm-info p {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
  }

  .tm-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo-card-new {
    width: 140px;
    aspect-ratio: 1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .logo-card-new img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .logo-card-new.yellow {
    background: var(--primary-yellow);
  }

  .logo-card-new.orange {
    background: #4CAF50;
    /* Green as per GEMS design */
  }

  .logo-card-new.blue {
    background: #4FC3F7;
  }

  .testimonial-row-new:hover .logo-card-new {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  }

  .tm-right {
    text-align: left;
    padding-left: 20px;
  }

  .tm-right p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    margin: 0;
    transition: color 0.3s ease;
  }

  .testimonial-row-new:hover .tm-right p {
    color: #333;
  }
}

/* Testimonial Footer */
.testimonial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 30px;
}

.testimonial-footer p {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.view-more-btn {
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.view-more-btn:hover {
  background: var(--primary-orange);
  color: #fff;
  border-color: var(--primary-orange);
}

.view-more-btn i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.view-more-btn:hover i {
  transform: translateY(2px);
}

/* Keep old testimonial header styles for reference */
.testimonial-header {
  text-align: center;
  margin-bottom: 80px;
}

.testimonial-header h2 {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 0.9;
  margin-top: 20px;
}

.testimonial-list {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-row {
  display: flex;
  align-items: center;
  padding: 40px 20px;
  border-top: 1px solid #eee;
  margin: 0 -20px;
  border-radius: 15px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
}

.testimonial-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-orange);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  border-radius: 2px;
}

.testimonial-row:hover {
  background: rgba(255, 107, 0, 0.03);
  transform: translateX(10px);
  border-color: transparent;
}

.testimonial-row:hover::before {
  transform: scaleY(1);
}

.testimonial-row:last-child {
  border-bottom: 1px solid #eee;
}

.testimonial-row:last-child:hover {
  border-bottom-color: transparent;
}

.tm-col-num {
  width: 50px;
  font-size: 0.9rem;
  color: #999;
  font-weight: 600;
}

.tm-col-info {
  width: 250px;
  padding-right: 20px;
}

.tm-col-info h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.tm-col-info p {
  font-size: 0.8rem;
  color: #666;
}

.tm-col-logo {
  flex: 1;
  display: flex;
  justify-content: center;
}

.logo-card {
  width: 120px;
  height: 120px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 2rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s ease;
}

.testimonial-row:hover .logo-card {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.tm-col-text p {
  transition: color 0.3s ease;
}

.testimonial-row:hover .tm-col-text p {
  color: #222;
}

.tm-col-num {
  transition: color 0.3s ease;
}

.testimonial-row:hover .tm-col-num {
  color: var(--primary-orange);
}

.logo-card.yellow {
  background: var(--primary-yellow);
}

.logo-card.orange {
  background: var(--primary-orange);
  color: white;
}

.logo-card.blue {
  background: #4FC3F7;
  color: white;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
}

.logo-sub {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 5px;
}

.tm-col-text {
  width: 400px;
  padding-left: 40px;
}

.tm-col-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.testimonial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 40px auto 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.view-more-btn {
  background: white;
  border: 1px solid #eee;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 1350px) {
  .testimonial-row {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .tm-col-num {
    width: auto;
  }

  .tm-col-info {
    width: auto;
    padding: 0;
  }

  .tm-col-text {
    width: auto;
    padding: 0;
  }

  .testimonial-footer {
    flex-direction: column;
    gap: 20px;
  }
}

/* ========================================
   FRANCHISE CTA SECTION
   ======================================== */
#franchise-cta {
  position: relative;
  background: var(--primary-yellow);
  padding: 80px 60px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 900px;
  align-items: flex-end;
}

.franchise-cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Background SNAXX image styling */
.franchise-cta-bg .Snaxx-footer {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card with border frame effect */
.franchise-cta-card {
  position: relative;
  background: white;
  padding: 50px 60px;
  text-align: center;
  z-index: 2;
}

/* White border frame extending outside card */
.franchise-cta-card::before {
  content: '';
  position: absolute;
  top: -400px;
  left: 0;
  right: 0;
  bottom: 0;
  border: 40px solid white;
  pointer-events: none;
}

.franchise-cta-card h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.franchise-cta-card h2 .highlight {
  background: var(--primary-yellow);
  padding: 8px 18px;
  display: inline-block;
  line-height: 1.4;
}

.franchise-cta-card p {
  color: #555;
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 25px;
}

.btn-join {
  display: inline-block;
  background: #F25F29;
  color: white;
  text-decoration: none;
  padding: 14px 45px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-join:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(242, 95, 41, 0.4);
}

@media (max-width: 768px) {
  #franchise-cta {
    padding: 60px 20px;
    min-height: 380px;
  }

  .franchise-cta-card {
    padding: 35px 25px;
    max-width: 300px;
  }

  .franchise-cta-card::before {
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-width: 2px;
  }

  .franchise-cta-card h2 {
    font-size: 1.2rem;
  }

  .franchise-cta-card p {
    font-size: 0.85rem;
  }

  .franchise-cta-card p br {
    display: none;
  }
}

/* Contact Franchise */
#contact-franchise {
  padding: 50px 60px;
  background: #f9f9f9;
}

.contact-container {
  display: flex;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  /* Or maybe transparent? The reference has white bg for the page but the form is orange */
  background: transparent;
}

.contact-image {
  flex: 1;
  background: black;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

.contact-image img {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 0;
}

.contact-form-container {
  flex: 1;
  background: #F25F29;
  border-radius: 20px;
  padding: 60px;
  color: white;
}

.contact-form-container h2 {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  margin-bottom: 10px;
  line-height: 1;
}

.contact-form-container p {
  margin-bottom: 40px;
  font-size: 1rem;
  opacity: 0.9;
}

.franchise-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.form-group input,
.form-group select {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 14px 18px;
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  outline: none;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Focus Glow States */
.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary-orange);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.2),
    0 10px 30px rgba(255, 107, 0, 0.15);
  transform: translateY(-2px);
}

.form-group:focus-within label {
  color: var(--primary-orange);
  transform: translateX(5px);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: opacity 0.3s ease;
}

.form-group input:focus::placeholder {
  opacity: 0.3;
}

.phone-input {
  display: flex;
  gap: 10px;
}

.phone-input select {
  width: 80px;
  border-radius: 12px;
}

.phone-input input {
  flex: 1;
}

.submit-btn {
  background: white;
  color: #F25F29;
  border: none;
  padding: 16px 45px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 20px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--primary-orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 0;
}

.submit-btn:hover {
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(242, 95, 41, 0.3);
  background: #F25F29;
  border: 1px solid white;
}

/* .submit-btn:hover::before {
  width: 300px;
  height: 300px;
} */

.submit-btn span {
  position: relative;
  z-index: 1;
}

/* Connect Insights */
#connect-insights {
  padding: 100px 60px;
  background: #f9f9f9;
}

.connect-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.yellow-bracket {
  width: 40px;
  border: 10px solid var(--primary-yellow);
  height: 200px;
}

.yellow-bracket.left {
  border-right: none;
  margin-right: 100px;
}

.yellow-bracket.right {
  border-left: none;
  margin-left: 100px;
}

.connect-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.connect-left h2 {
  font-family: var(--font-heading);
  font-size: 8rem;
  line-height: 0.85;
  color: black;
}

.connect-right {
  flex: 1;
  max-width: 600px;
}

.connect-right h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
  color: #333;
}

.connect-right p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 30px;
}

.email-signup {
  display: flex;
  background: white;
  border-radius: 30px;
  padding: 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.email-signup input {
  flex: 1;
  border: none;
  padding: 15px 20px;
  border-radius: 30px;
  outline: none;
  font-size: 1rem;
}

.email-signup button {
  background: #222;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
}

@media (max-width: 1350px) {
  .contact-container {
    flex-direction: column;
  }

  .connect-inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .connect-left h2 {
    font-size: 3.5rem;
  }

  .yellow-bracket {
    display: none;
  }
}

/* Footer */
footer {
  background: #f16819;
  color: white;
  padding: 80px 60px 40px;
  overflow: hidden;
}

.footer-logo-large {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.footer-logo-large .footer-logo {
  width: 90%;
  max-width: 1200px;
  height: auto;
}

.schedule-call-card-mobile {
  display: none !important;
}

.footer-top-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* Optional separator if needed, reference doesn't show one clearly but helps structure */
  padding-bottom: 20px;
  border-bottom: none;
  /* Removed based on image */
}

.footer-top-links a {
  color: white;
  text-decoration: none;
  margin-right: 30px;
}

.ft-center {
  display: flex;
  gap: 30px;
}

.footer-main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.footer-nav {
  display: flex;
  gap: 100px;
}

.nav-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-col a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-call-card {
  background: rgba(255, 255, 255, 0.4);
  /* Semi-transparent white/orange mix */
  padding: 40px;
  border-radius: 20px;
  width: 400px;
  /* height: 250px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.schedule-call-card h3 {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 0.9;
}

.arrow-circle {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F25F29;
  align-self: flex-end;
  font-size: 1.2rem;
  cursor: pointer;
}

.footer-bottom {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ========================================
   ENHANCED SCROLL REVEAL ANIMATIONS
   ======================================== */

/* Base state - elements visible by default */
.animate-on-scroll {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
}

/* Only hide and apply transforms when JS is loaded */
body.js-loaded .animate-on-scroll:not(.visible) {
  opacity: 0;
}

/* Blur Fade Up - Premium depth effect */
body.js-loaded .blur-fade-up:not(.visible) {
  transform: translateY(50px);
  filter: blur(6px);
}

/* Standard Fade Up */
body.js-loaded .fade-up:not(.visible) {
  transform: translateY(40px);
  filter: blur(3px);
}

/* Slide Left with subtle blur */
body.js-loaded .slide-left:not(.visible) {
  transform: translateX(-60px);
  filter: blur(4px);
}

/* Slide Right with subtle blur */
body.js-loaded .slide-right:not(.visible) {
  transform: translateX(60px);
  filter: blur(4px);
}

/* Scale Up with blur */
body.js-loaded .scale-up:not(.visible) {
  transform: scale(0.85);
  filter: blur(6px);
}

/* Full Blur In */
body.js-loaded .blur-in:not(.visible) {
  filter: blur(10px);
  transform: scale(0.95);
}

/* Rotate In */
body.js-loaded .rotate-in:not(.visible) {
  transform: rotate(-3deg) translateY(20px);
  filter: blur(3px);
}

/* Visible state - reset everything */
.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Staggered Delays for Sequential Effects */
.delay-100 {
  transition-delay: 0.1s !important;
}

.delay-200 {
  transition-delay: 0.2s !important;
}

.delay-300 {
  transition-delay: 0.3s !important;
}

.delay-400 {
  transition-delay: 0.4s !important;
}

.delay-500 {
  transition-delay: 0.5s !important;
}

.delay-600 {
  transition-delay: 0.6s !important;
}

.delay-700 {
  transition-delay: 0.7s !important;
}

.delay-800 {
  transition-delay: 0.8s !important;
}

/* Parallax-like Slow Reveal */
.slow-reveal {
  transition-duration: 1.2s !important;
}

.slow-reveal.delay-100 {
  transition-delay: 0.15s !important;
}

.slow-reveal.delay-200 {
  transition-delay: 0.3s !important;
}

.slow-reveal.delay-300 {
  transition-delay: 0.45s !important;
}

/* Custom Easing for Premium Feel */
.smooth-entrance {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ========================================
   END SCROLL ANIMATIONS
   ======================================== */

/* Comprehensive Mobile Responsiveness & Premium UX */

@media (max-width: 1350px) {

  /* Global Adjustments */
  body {
    font-size: 16px;
    /* Better readability */
  }

  section {
    padding: 60px 20px !important;
    /* Consistent mobile padding */
  }

  /* Hero Section */
  .hero-grid {
    grid-template-rows: auto auto auto;
    height: auto;
    padding: 60px 20px 60px;
    /* Extra top padding for header */
    /* gap: 15px; */
  }

  .hero-middle {
    flex-direction: column;
    height: auto;
    gap: 30px;
  }

  .hero-left,
  .hero-right {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .hero-center {
    width: 100%;
    height: 350px;
    /* Adjusted for mobile proportion */
    margin: 20px 0;
  }

  .machine-container {
    width: 100%;
    height: 100%;
  }

  .hero-img {
    max-height: 100%;
    width: auto;
  }

  .solid-text {
    /* font-size: 15vw; */
    /* Slightly smaller to prevent overflow */
    line-height: 1;
  }

  .outline-text {
    font-size: 12vw;
  }

  .hero-description {
    display: flex;
    max-width: 100%;
    text-align: center;
    padding: 0 10px;
    flex-direction: column;
  }

  .hero-description p {
    font-size: 1rem;
    margin-bottom: 30px;
    width: 50%;
    align-self: center;
  }

  .hero-actions {
    justify-content: center;
    gap: 15px;
  }

  .hero-cta {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    margin-top: 20px;
  }

  /* Proof Section */
  .proof-container {
    flex-direction: column;
    gap: 50px;
  }

  .proof-left {
    flex: auto;
    text-align: center;
  }

  .proof-title {
    font-size: 3rem;
    line-height: 1.1;
  }

  .rocket-badge {
    position: static;
    /* margin-top: 20px; */
    transform: none;
    display: inline-block;
  }

  .proof-cards {
    grid-template-columns: 1fr;
    /* Stack cards */
    gap: 30px;
  }

  .proof-card {
    height: auto;
    min-height: 300px;
    /* Ensure content fits */
  }

  .proof-descriptions {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
    margin-top: 40px;
  }

  .proof-footer {
    flex-direction: column;
    text-align: center;
    gap: 40px;
    margin-top: 60px;
  }

  .institution-logos {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }

  /* Contact & Connect */
  .contact-container {
    flex-direction: column;
    background: white;
    /* Ensure contrast */
    border-radius: 20px;
    overflow: hidden;
  }

  .contact-image {
    min-height: 250px;
    display: none;
    /* Hide image on mobile to focus on form */
  }

  .connect-inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .connect-left h2 {
    font-size: 3rem;
  }

  .yellow-bracket {
    display: none;
  }

  /* Footer */
  .footer-top-links {
    flex-direction: column;
    gap: 25px;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
  }

  .ft-center {
    flex-direction: column;
    gap: 15px;
  }

  .footer-main-content {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    width: 100%;
  }

  .nav-col {
    gap: 25px;
  }

  .nav-col a {
    justify-content: center;
    font-size: 1.2rem;
    /* Larger touch targets */
    padding: 5px 0;
  }

  .schedule-call-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
  }

  .tm-large {
    font-size: 2rem;
    right: 0;
    top: 0;
  }
}

@media (max-width: 768px) {

  /* Header */
  header {
    padding: 20px;
  }



  .mobile-nav {
    padding-left: 0;
  }

  /* Sync padding with header for alignment */
  .mobile-menu {
    padding: 20px;
  }

  .menu-cta {
    font-size: 1.2rem;
    margin-right: 20px;
  }

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

  .menu-btn {
    display: flex;
    /* Show mobile menu btn */
  }

  .menu-bg-logo {
    width: 300%;
  }


  .header-right .get-snack-btn {
    display: none;
  }

  /* Product Partners */
  .partners-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 0 20px;
  }

  .marquee-container {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
    /* Hide scrollbar */
    mask-image: none;
    -webkit-mask-image: none;
  }

  .marquee-track {
    display: flex;
    gap: 30px;
    padding: 10px 0;
    /* No horizontal padding */
    width: max-content;
    animation: none;
    /* Disable animation on mobile if needed, or keep it */
  }

  .partners-track {
    gap: 30px;
    padding: 10px 20px;
    /* Add padding for scroll snap feel */
  }

  .logo-circle {
    width: 90px;
    height: 90px;
  }

  /* About Product */
  .product-feature-row,
  .product-feature-row.reverse {
    flex-direction: column;
    gap: 0px;
    text-align: center;
    margin-bottom: 80px;
  }

  .pf-content {
    justify-content: center;
  }

  .pf-card {
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05);
    /* Softer background */
  }

  .pf-card h3 {
    font-size: 1.5rem;
  }

  /* Key Highlights */
  .highlights-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .highlight-main {
    flex-direction: column;
    padding: 40px 0;
    gap: 30px;
  }

  .hl-bracket {
    display: none;
  }

  .hl-title {
    font-size: 2.8rem;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.1;
  }

  .hl-row {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    padding: 30px 0;
  }

  .hl-num,
  .hl-action {
    width: auto;
    text-align: center;
    opacity: 0.7;
  }

  .hl-row h3 {
    font-size: 1.8rem;
  }

  /* Product Showcase */
  .showcase-container {
    flex-direction: column;
    gap: 40px;
    padding: 0;
  }

  .showcase-sidebar {
    flex: auto;
    text-align: center;
  }

  .showcase-title {
    font-size: 3rem;
  }

  .showcase-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .showcase-arrows {
    justify-content: center;
    margin-top: 20px;
  }

  .product-card {
    flex: 0 0 100%;
    /* Full width card */
    max-width: 350px;
    margin: 0 auto;
    /* Center it */
  }

  .card-image-container {
    /* height: 350px; */
  }


  /* Testimonials */
  .testimonial-row {
    flex-direction: column;
    text-align: center;
    gap: 25px;
    padding: 40px 0;
  }

  .tm-col-num,
  .tm-col-info,
  .tm-col-text {
    width: auto;
    padding: 0;
  }

  .tm-col-logo {
    margin: 10px 0;
  }

  .tm-col-text p {
    font-size: 1.1rem;
    /* Larger text for readability */
    line-height: 1.6;
  }

  .testimonial-footer {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

  /* Contact Form */
  .contact-form-container {
    padding: 40px 20px;
    border-radius: 20px;
  }

  .contact-form-container h2 {
    font-size: 2.2rem;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
  }

  .form-group input,
  .form-group select {
    padding: 15px;
    /* Larger touch target */
  }

  /* Footer */
  footer {
    padding: 60px 20px 30px;
  }

  .footer-logo {
    width: 100%;
  }
}

/* Background Shapes */
.shape-top-left {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  /* border: 2px solid rgba(255, 255, 255, 0.1); */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  z-index: 1;
}

.shape-center-right {
  position: absolute;
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 95, 41, 0.1) 0%, transparent 70%);
  /* Orange tint */
  z-index: 1;
}

.shape-bottom {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  z-index: 1;
}

/* Ensure content is above shapes */
.about-content-wrapper {
  position: relative;
  z-index: 2;
}



/* ---------------------------------------------------- */
/* MOBILE PROOF SECTION REDESIGN */
/* ---------------------------------------------------- */

/* 1. Mobile Footer Text for Cards - Hidden by default */
.mobile-card-footer {
  display: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 20px;
  letter-spacing: 0.5px;
}

@media (max-width: 1350px) {

  section#hero {
    border-radius: 50px;
  }

  .pf-image img {
    max-height: 500px;
  }

  /* 2. Layout & Title */
  #proof {
    padding: 60px 20px;
    border-radius: 20px;
  }

  .proof-container {
    flex-direction: column;
    gap: 30px;
  }

  .proof-left {
    flex: auto;
    text-align: left;
    /* Keep left aligned as per reference image title */
    margin-bottom: 20px;
  }

  .proof-title {
    font-size: 10vw;
    /* Scaled down for mobile but still huge */
    line-height: 0.85;
    text-align: center;
    font-family: 'Coolvetica Condensed', sans-serif;
    color: #111;
  }

  .rocket-badge {
    margin: 0 10px;
    /* width: 3.5rem; */
    vertical-align: middle;
    transform: rotate(-10deg) translateY(-5px);
  }

  /* 3. Cards Layout */
  .proof-right {
    width: 100%;
  }

  .proof-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
    /* max-width: 500px; */
    margin: 0 auto;
  }

  .proof-card {
    height: auto;
    min-height: 250px;
    padding: 25px;
    border-radius: 25px;
    /* Softer corners */
  }

  /* 4. Card Specific Styling */

  /* Image Card */
  .image-card {
    position: relative;
    /* Ensure image covers fully */
  }

  .image-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .image-card .card-overlay {
    position: relative;
    z-index: 1;
    bottom: 0;
    left: 0;
    margin-top: 150px;
    /* Push content down */
  }

  .image-card .counter-value {
    color: #FFD600;
    /* Yellow number */
    font-size: 4rem;
    line-height: 1;
  }

  .image-card p {
    font-size: 1rem;
    color: white;
    opacity: 0.9;
  }

  /* Yellow Card */
  .yellow-card {
    background: #FFD600;
    color: black;
  }

  .yellow-card .counter-value {
    font-size: 4rem;
    font-weight: 800;
    color: black;
  }

  .yellow-card .card-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .yellow-card .mobile-card-footer {
    display: block;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding-top: 15px;
    margin-top: 20px;
    font-size: 0.8rem;
    opacity: 0.8;
  }

  /* Simplify chart for mobile visual */
  .yellow-card .chart-lines {
    margin-top: 10px;
    opacity: 0.6;
  }

  /* Orange Card */
  .orange-card {
    background: #F25F29;
    color: white;
  }

  .orange-card .counter-value {
    color: white;
    font-size: 4rem;
  }

  .orange-card .mobile-card-footer {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-top: auto;
    font-size: 0.8rem;
  }

  .bar-chart {
    height: 80px;
    /* Compact chart */
    margin: 20px 0;
  }

  .bar {
    background: rgba(255, 255, 255, 0.3);
  }

  /* 5. Hide Desktop Descriptions */
  .proof-descriptions {
    display: none;
  }

  /* 6. Footer (Installed at...) */
  .proof-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    padding: 0;
    margin-top: 30px;
  }

  .installed-badge {
    background: black;
    color: white;
    border: none;
    margin-bottom: 10px;
  }

  .installed-text {
    /* font-size: 0.9rem; */
    text-transform: uppercase;
    color: #666;
  }

  .institution-logos {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    opacity: 0.3;
    /* Subtle logos */
    filter: grayscale(100%);
  }

  .inst-logo {
    /* width: 40px;
    height: 40px; */
    background-color: #ddd;
    border-radius: 5px;
  }
}

/* ---------------------------------------------------- */
/* MOBILE FOOTER & PARTNERS REDESIGN */
/* ---------------------------------------------------- */

/* Mobile Partners Title - Hidden on Desktop */
.mobile-partners-title {
  display: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  opacity: 0.5;
  text-transform: lowercase;
  font-style: italic;
  margin-top: 10px;
}

@media (max-width: 1350px) {

  /* 1. INSTALLED AT FOOTER */
  .proof-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    gap: 0;
    padding: 0;
    margin-top: 40px;
    background: transparent;
  }

  .installed-badge {
    background: black;
    color: white;
    border: none;
    margin-bottom: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }

  .installed-text {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 5px;
  }

  .installed-text strong,
  .installed-text p {
    /* font-size: 0.75rem; */
    font-weight: 800;
    text-transform: uppercase;
    color: #444;
    letter-spacing: 0.5px;
    margin: 0;
  }

  .institution-logos {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: flex-start;
  }

  /* Removed .inst-logo overrides to show original images */

  /* 2. PRODUCT PARTNERS */
  #product-partners {
    padding: 20px 0 !important;
    /* background: transparent; */
    margin-bottom: 60px;
  }

  .partners-header {
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 20px;
  }

  .mobile-partners-title {
    display: none;
    /* Hide '/product partners' */
  }

  /* Restore Marquee Animation */
  .marquee-container {
    width: 100%;
    overflow: hidden;
    /* Hide scrollbar for marquee effect */
    padding-bottom: 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
    padding: 0 20px;
    animation: marqueeScroll 30s linear infinite;
  }

  @keyframes marqueeScroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .partner-logo {
    flex: 0 0 auto;
    /* Don't shrink */
  }

  .logo-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
  }

  /* Logo Specific Colors based on nth-child or re-using existing functionality */
  /* We have specific colors in HTML style tags, ensure they pop */

  /* Adjust text inside circles */
  .logo-circle span {
    font-size: 0.8rem !important;
  }

  .logo-circle img {
    width: 70% !important;
  }
}

/* ---------------------------------------------------- */
/* MOBILE ABOUT/FEATURES SECTION REDESIGN */
/* ---------------------------------------------------- */

@media (max-width: 1350px) {

  /* 1. Section Container */
  #about-product {
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
    /* Contain shapes */
  }

  .section-label {
    margin-bottom: 40px;
    /* text-align: center;
    font-size: 1rem; */
    opacity: 0.6;
  }

  /* 2. Card Style (Row becomes Card) */
  .product-feature-row {
    display: flex;
    flex-direction: column !important;
    /* Force vertical stack */
    background: #111;
    /* Dark Card Background */
    border-radius: 30px;
    /* Rounded corners like ref */
    padding: 30px;
    margin-bottom: 60px;
    /* Space for connector line */
    border: 1px solid #222;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  /* Connector Line (Vertical line between cards) */
  .product-feature-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -62px;
    /* Extend into margin */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, #333 0%, #D25F29 50%, #333 100%);
    opacity: 0.5;
  }

  /* 3. Content Order & Style */
  .pf-content {
    width: 100%;
    padding: 0;
    order: 1;
    /* Content Top */
    text-align: left;
  }

  .pf-card {
    background: transparent;
    /* Remove inner card bg if any */
    padding: 0;
    border: none;
    box-shadow: none;
  }

  /* Icon */
  .pf-icon {
    width: 50px;
    height: 50px;
    background: rgba(210, 95, 41, 0.2);
    /* Orange tint bg */
    color: #D25F29;
    /* Orange icon */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
    border: 1px solid rgba(210, 95, 41, 0.3);
  }

  /* Typography */
  .pf-card h3 {
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    margin-bottom: 15px;
    font-family: 'Oswald', sans-serif;
    /* Assuming font availability */
  }

  .pf-card p {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  /* 4. Image Style */
  .pf-image {
    width: 100%;
    order: 2;
    /* Image Bottom */
    margin-top: 10px;
    border-radius: 20px;
    overflow: hidden;
    height: 250px;
    /* Fixed height for consistency */
    /* background: #000; */
    position: relative;
  }

  .pf-image img {
    width: 80%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    /* Slight dim for mood */
  }

  /* Add gradient overlay to image to match 'on-machine' teal look if needed? 
     Let's keep natural image for now but ensure it fills well. */

  /* Remove alternating row logic overrides */
  .product-feature-row.reverse {
    flex-direction: column !important;
  }
}

/* ---------------------------------------------------- */
/* MOBILE PRODUCT SHOWCASE REDESIGN */
/* ---------------------------------------------------- */
/* MOBILE SHOWCASE - DESKTOP CARD ADAPTED FOR MOBILE */
/* ---------------------------------------------------- */

@media (max-width: 1350px) {

  #product-showcase {
    padding: 60px 20px;
    padding-bottom: 0 !important;
  }

  .showcase-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0;
  }

  /* Sidebar - Stack vertically */
  .showcase-sidebar {
    width: 100%;
    padding: 0;
    flex: auto;
  }

  .showcase-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 30px;
  }

  /* Navigation - Horizontal scroll pills */
  .showcase-nav {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 0;
    scrollbar-width: none;
    margin-bottom: 0;
  }

  .showcase-nav::-webkit-scrollbar {
    display: none;
  }

  .showcase-nav li {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #f0f0f0;
    border-radius: 20px;
    white-space: nowrap;
  }

  .showcase-nav li.active {
    background: #000;
    color: #fff;
  }

  .showcase-nav li span {
    font-size: 0.8rem;
  }

  .showcase-nav li.active span {
    color: #fff;
  }

  /* Nav Icons - Keep desktop style but smaller */
  .nav-icon {
    width: 30px;
    height: 30px;
  }

  /* Disable Coming Soon */
  .showcase-nav li:last-child {
    pointer-events: none;
    opacity: 0.4;
  }

  /* Arrows - Top right corner on mobile */
  .showcase-arrows {
    /* position: relative; */
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .arrow-btn {
    width: 40px;
    height: 40px;
  }

  /* Carousel - Horizontal scroll like desktop */
  .showcase-carousel {
    display: flex;
    flex-direction: row;
    gap: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    margin: 0;
    padding: 20px 0;
    justify-content: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .showcase-carousel::-webkit-scrollbar {
    display: none;
  }

  /* Desktop card adapted for mobile - keep all desktop styling */
  .product-card {
    flex: 0 0 85%;
    width: 85%;
    max-width: 400px;
    height: auto;
    /* min-height: 500px; */
    scroll-snap-align: center;
  }

  .card-image-container {
    /* height: 350px;  */
  }


  /* Keep desktop wavy backgrounds, buy button, footer, etc. */
  /* No overrides - let desktop styles apply */

}

/* ---------------------------------------------------- */
/* MOBILE TESTIMONIALS - WITH IMAGES */
/* ---------------------------------------------------- */

@media (max-width: 1350px) {

  #testimonials {
    padding: 60px 20px !important;
    background: #fff !important;
  }

  /* Hide section label */


  /* Header */
  .testimonial-header-new {
    text-align: center;
    margin-bottom: 40px;
  }

  .testimonial-header-new {
    padding-top: 0;
  }

  .testimonial-header-new h2 {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.1;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -1px;
  }

  .testimonial-list-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Card using flexbox column */
  .testimonial-row-new {
    display: flex;
    flex-direction: column;
    padding: 25px 20px !important;
    background: #fff !important;
    border-top: none;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0;
    gap: 15px;
    margin: 0;
  }

  /* First row: Number + Logo + Name/Location */
  .tm-left {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    order: 1;
  }

  .tm-num {
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
    flex-shrink: 0;
  }

  /* Logo comes from tm-center but we need it in the header row */
  .tm-center {
    /* order: -1; */
    /* Place before tm-left content */
    flex-shrink: 0;
  }

  .logo-card-new {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 8px; */
    overflow: hidden;
  }

  .logo-card-new img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
    /* Show actual colored images */
    opacity: 1 !important;
  }

  /* Remove text badges */
  .logo-card-new::before {
    display: none !important;
  }

  .tm-info {
    flex: 1;
    text-align: left;
  }

  .tm-info h4 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #000;
    margin: 0 0 3px 0;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 1px;
  }

  .tm-info p {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    font-weight: 500;
  }

  /* Quote - separate row */
  .tm-right {
    width: 100%;
    order: 2;
  }

  .tm-right p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    font-style: italic;
    margin: 0;
  }

  /* Footer */
  .testimonial-footer {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    margin-top: 20px;
  }

  .view-more-btn {
    font-size: 0.85rem;
    /* padding: 12px 30px; */
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 25px;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .section-label-left {
    position: relative;
    top: 0;
    left: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    padding-bottom: 10px;
    text-align: center;
  }

}

/* Fix horizontal overflow on mobile */
@media (max-width: 1350px) {

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

  /* Ensure all sections don't overflow */
  section {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Fix showcase carousel overflow */
  .showcase-carousel {
    max-width: 100vw;
  }

  /* Fix proof section if needed */
  #proof-section {
    /* overflow-x caused vertical scrollbar side effect */
  }

  .proof-container {
    max-width: 100%;
    scale: 1;
  }

  /* Fix institution logos row */
  .institution-logos {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Fix partners section */
  .marquee-container {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure showcase container doesn't overflow */
  .showcase-container {
    max-width: 100%;
    overflow-x: hidden;
  }

}

/* Hide back-to-top button on mobile */
@media (max-width: 1350px) {
  #back-to-top-btn {
    display: none !important;
  }
}

/* ---------------------------------------------------- */
/* MOBILE FOOTER REDESIGN */
/* ---------------------------------------------------- */

@media (max-width: 1350px) {}

/* ---------------------------------------------------- */
/* DESKTOP FOOTER - ORANGE DESIGN */
/* ---------------------------------------------------- */

footer {
  /* background: linear-gradient(135deg, #FF6B35, #F7931E) !important; */
  /* padding: 30px 60px 30px !important; */
  color: #fff;
}

.footer-container {
  /* max-width: 1600px; */
  margin: 0 auto;
}

/* Massive logo at top - 100% width */
.footer-logo-large {
  text-align: center;
  margin-bottom: 30px;
  /* padding: 0 20px; */
}

.footer-logo-large .footer-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Top links row */
.footer-top-links {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 0;
  border-bottom: none;
}

.ft-left,
.ft-center {
  display: flex;
  gap: 30px;
}

.footer-top-links a {
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer-top-links a:hover {
  opacity: 0.7;
}

.ft-right a {
  color: #fff !important;
  font-weight: 600;
}

/* Main content area */
.footer-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 60px;
  margin-bottom: 40px;
}

/* Footer navigation */
.footer-nav {
  display: flex;
  gap: 60px;
  grid-column: 1 / 2;
  justify-content: space-between;
}

.nav-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-nav a {
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  opacity: 0.7;
}

/* Schedule call card - Desktop glassmorphism */
.schedule-call-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 40px 35px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  grid-column: 3;
}

.schedule-call-card h3 {
  color: #fff;
  font-size: 4rem;
  font-weight: 900;
  line-height: 0.9;
  margin: 0;
}

.arrow-circle {
  width: 55px;
  height: 55px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B35;
  font-size: 1.4rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s;
}

.arrow-circle:hover {
  transform: scale(1.1) rotate(45deg);
}

/* Footer bottom */
.footer-bottom {
  text-align: center;
  padding-top: 25px;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin: 0;
}

/* Force Mobile Footer Overrides - FINAL ROBUST VERIFIED */
@media (max-width: 1350px) {
  footer {
    background: #f1641b;
    padding: 40px 25px 30px;
    overflow-x: hidden;
  }

  .footer-main-content {
    display: none !important;
  }

  .schedule-call-card-mobile {
    display: flex !important;
  }

  .schedule-call-card-desktop {
    display: none !important;
  }

  .footer-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: center;
  }

  /* Watermark Logo - Visible */
  .footer-logo-large {
    display: block !important;
    opacity: 0.8 !important;
    /* Increased visibility per verification */
    margin-bottom: 30px !important;
    text-align: center !important;
  }

  .footer-logo-large .footer-logo {
    width: 80% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    filter: none !important;
    /* Removed inversion to show actual logo */
    brightness: 1 !important;
  }

  /* Links Columns - Top Aligned */
  .footer-top-links {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 15px !important;
    margin-bottom: 30px !important;
    border: none !important;
    align-items: start !important;
  }

  .ft-left,
  .ft-center {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .ft-left::before,
  .ft-center::before {
    display: none !important;
  }

  .ft-right {
    display: none !important;
  }

  .footer-top-links a {
    color: #fff !important;
    display: flex !important;
    gap: 8px !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .footer-top-links a::before {
    content: '→' !important;
    font-weight: 400 !important;
  }

  /* Schedule Call - 100% Screen Width via VW */
  .schedule-call-card {
    background: #FF7F50;
    width: 100%;
    /* Verified fix */
    margin-left: -25px;
    margin-right: -25px;
    padding: 40px 30px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: none;
    margin-bottom: 20px;
    margin-top: 10px;
    box-sizing: border-box;
    max-width: none;
  }

  .schedule-call-card h3 {
    font-size: 2rem !important;
    line-height: 1 !important;
    text-align: left !important;
    width: 70% !important;
  }

  .arrow-circle {
    background: #fff !important;
    color: #F15A24 !important;
    bottom: 40px !important;
    right: 30px !important;
    position: absolute !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 1.1rem !important;
  }

  /* Footer Bottom - Clean, Centered */
  .footer-bottom {
    border-top: none !important;
    padding-top: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 0 !important;
  }

  /* CRITICAL: HIDE Extra Pseudo Elements */
  /* CRITICAL: HIDE Extra Pseudo Elements */
  .footer-bottom::before,
  .footer-bottom::after {
    content: none !important;
    display: none !important;
  }

  .footer-bottom p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* ================================================
   INTERMEDIATE BREAKPOINT STYLES (601px - 899px)
   Refined to work with existing max-width: 900px layout
   ================================================ */

/* Target the intermediate range */
@media (min-width: 601px) and (max-width: 899px) {

  /* HERO SECTION - Adjusted for single column but wider screen */
  .hero-top h1.outline-text {
    /* font-size: 4rem; */
  }

  .rocket-badge {
    width: 4rem;
  }

  .proof-title {
    /* font-size: 15vw; */
    line-height: 0.85;
    text-align: center;
    font-family: 'Coolvetica Condensed', sans-serif;
    color: #111;
  }

  .hero-top .bracket {
    /* font-size: 3.5rem; */
  }

  .solid-text {
    /* font-size: 4rem; */
  }

  .machine-container {
    width: clamp(220px, 40vw, 300px);
  }

  .hero-description {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 15px;
  }

  .hero-description p {
    font-size: 0.95rem;
  }

  /* PROOF SECTION - Fix oversized text */
  #proof {
    padding: 60px 30px;
  }

  .proof-container {
    scale: 1;
    gap: 20px;
  }

  /* Drastically reduced form 7rem max to Avoid huge text */
  .proof-title {
    /* font-size: clamp(2.5rem, 8vw, 4rem); */
    /* line-height: 1.1; */
  }

  .proof-cards {
    grid-template-columns: 1fr;
    gap: 20px;
    /* max-width: 500px; */
    /* Limit width of cards in single column */
    margin: 0 auto;
  }

  .proof-card {
    height: auto;
    min-height: 240px;
  }

  .proof-card h3 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .card-subtitle {
    font-size: 1.1rem;
  }

  /* KEY HIGHLIGHTS - Better scaling */
  .hl-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    gap: 10px;
  }

  .hl-bracket {
    font-size: clamp(4rem, 10vw, 7rem);
  }

  .hl-row h3 {
    font-size: clamp(2.2rem, 8vw, 4rem);
  }

  .rocket-icon-container {
    width: clamp(4rem, 8vw, 6rem);
    height: clamp(3rem, 6vw, 4.5rem);
  }

  /* PRODUCT SHOWCASE */
  .showcase-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }

  /* TESTIMONIALS */
  .testimonial-header-new h2 {
    font-size: clamp(2.2rem, 7vw, 3.5rem);
  }

  /* CONNECT INSIGHTS */
  .connect-left h2 {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  /* ABOUT PRODUCT */
  .pf-card {
    padding: 25px;
  }

  .pf-card h3 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  /* FRANCHISE CTA */
  .franchise-cta-card h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  /* FOOTER */
  .schedule-call-card h3 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }
}

/* Extra intermediate for very narrow tablets/large phones in landscape */
@media (min-width: 481px) and (max-width: 600px) {

  /* HERO - More aggressive scaling for smaller widths */
  .hero-top h1.outline-text,
  .solid-text {
    /* font-size: clamp(2.2rem, 10vw, 3.5rem); */
    letter-spacing: -1px;
  }

  .hero-top .bracket {
    /* font-size: clamp(2.2rem, 8vw, 3.5rem); */
  }

  .machine-container {
    width: clamp(180px, 50vw, 250px);
  }

  .hero-description {
    max-width: 95%;
  }

  /* PROOF - Compact for smaller screens */
  #proof {
    padding: 40px 20px;
  }

  .proof-title {
    /* font-size: clamp(2.5rem, 12vw, 4rem); */
  }

  .proof-card h3 {
    /* font-size: clamp(1.8rem, 8vw, 2.5rem); */
  }

  /* KEY HIGHLIGHTS */
  .hl-title {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  .hl-row h3 {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .rocket-icon-container {
    width: 4rem;
    height: 3rem;
  }

  /* SHOWCASE */
  .showcase-title {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }

  .product-card {
    flex: 0 0 clamp(220px, 75vw, 300px);
  }

  .card-image-container {
    height: clamp(240px, 60vw, 320px);
  }

  /* TESTIMONIALS */
  .testimonial-header-new h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* CONNECT */
  .connect-left h2 {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  /* ABOUT PRODUCT */
  .pf-card h3 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  /* FOOTER */
  .schedule-call-card h3 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}

/* ================================================
   FOOTER CREDITS STYLING
   ================================================ */
.credits-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

.credits-text a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.credits-text a:hover {
  color: var(--primary-yellow);
}

/* ================================================
   MOBILE PROOF SECTION - Full Stack (Max 900px)
   ================================================ */
@media (max-width: 900px) {
  .proof-cards {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .proof-card {
    width: 100%;
    min-height: auto;
  }
}

/* ========================================
   FIXES & ENHANCEMENTS
   ======================================== */

/* Toast Notifications */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: white;
  padding: 15px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  font-weight: 600;
  min-width: 280px;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  border-left: 5px solid #28a745;
}

.toast-success i {
  color: #28a745;
  font-size: 1.2rem;
}

.toast-error {
  border-left: 5px solid #dc3545;
}

.toast-error i {
  color: #dc3545;
  font-size: 1.2rem;
}

/* Button Hover Fix - Ensure Contrast */
.magnetic-btn:hover,
.submit-btn:hover,
.btn-join:hover {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hidden Testimonials */
.hidden-testimonial {
  display: none !important;
}