@font-face {
  font-family: "Rethink Sans";
  src: url("./Rethink_Sans/static/RethinkSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rethink Sans";
  src: url("./Rethink_Sans/static/RethinkSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --roamy-blue: #006ffe;
  --box-padding: 32px;
  --rail-width: 380px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: white;
  font-family: "Rethink Sans", system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #333;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section-wrapper {
  background: linear-gradient(to bottom, #0B67FF 0%, #5393FF 65%, #FFFFFF 100%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px;
  color: #fff;
}

.hero-container {
  position: relative;
  width: min(1200px, 90vw);
  height: min(800px, 92vh);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  padding: var(--box-padding);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr var(--rail-width);
  grid-template-rows: auto 1fr;
  gap: 0;
  background: transparent;
}

/* Internal white separators matching the screenshot
   - col-divider: vertical line between main area and right rail
   - row-divider: horizontal line separating header and middle map area */
.col-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--rail-width) + var(--box-padding));
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  pointer-events: none;
}

.row-divider {
  position: absolute;
  left: var(--box-padding);
  right: var(--box-padding);
  top: calc(var(--box-padding) + 120px + 24px);
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
}

.hero-header {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: center;
  gap: 24px;
  min-height: 140px;
  padding-bottom: 16px;
  position: relative;
  z-index: 2;
}

/* Horizontal divider that spans from left border to vertical divider */
.row-divider {
  position: absolute;
  left: 0;
  right: calc(var(--rail-width) + var(--box-padding));
  top: calc(var(--box-padding) + 230px);
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  pointer-events: none;
}

.logo {
  height: 140px;
  width: auto;
  object-fit: contain;
}

.header-separator {
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
}

.title-wrap {
  display: flex;
  align-items: center;
  max-width: 720px;
}

.title {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  font-size: clamp(40px, 5vw, 60px);
}

.title em {
  font-style: normal;
  font-weight: 900;
}

.right-rail {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  position: relative;
  z-index: 3;
  padding-left: 12px; /* reduced spacing - move content left */
}

.emoji-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  font-size: 64px;
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 16px;
}

.emoji-row.step-1 {
  margin-top: 0px;
  padding-left: 30px;
}

.emoji-row.step-2 {
  justify-content: flex-start;
  padding-left: 180px;
  margin-top: -10px;
  font-size: 72px;
}

.emoji-row.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}

.emoji.arrow {
  opacity: 0;
}

.emoji.arrow.show {
  opacity: 1;
  transition: opacity 400ms ease;
}

.icon {
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.8) translateY(10px);
}

/* Positions adjusted to avoid polaroid overlap */
#icon-2 { top: 80px; left: 10px; }
#icon-1 { top: 180px; right: 230px; }
#icon-3 { bottom: 0px; right: 260px; }

.icon.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 400ms ease, transform 400ms ease;
}

.polaroid {
  position: absolute;
  width: 280px;
  height: auto;
  object-fit: contain;
  /* No shadow per request */
  opacity: 0;
  --rot: 0deg;
  transform: translateY(-80px) rotate(var(--rot)) scale(0.9);
  will-change: transform, opacity;
}

/* Stack target positions - moved further right to fit in right rail */
#polaroid-1 { left: 150px; top: 240px; --rot: -6deg; transform: translateY(-120px) rotate(var(--rot)) scale(0.8); }
#polaroid-2 { right: 100px; top: 340px; --rot: 3deg; transform: translateY(-120px) rotate(var(--rot)) scale(0.8); }
#polaroid-3 { left: 150px; top: 400px; --rot: -2deg; transform: translateY(-120px) rotate(var(--rot)) scale(0.8); }
#polaroid-4 { right: 80px; top: 480px; --rot: 6deg; transform: translateY(-120px) rotate(var(--rot)) scale(0.8); }
#polaroid-5 { left: 130px; top: 560px; --rot: -4deg; transform: translateY(-120px) rotate(var(--rot)) scale(0.8); }

.polaroid.visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot)) scale(1);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.main-image {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  align-self: center;
  justify-self: start; /* bottom-left placement */
  width: min(900px, 72%);
  height: auto;
  object-fit: contain;
  /* Remove drop shadow */
  filter: none;
  z-index: 1;
  padding: 24px 100px 80px 0px; /* extra bottom padding for email signup */
  margin-top: -40px; /* move image up */
}

/* Email signup section */
.email-signup {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: calc(var(--rail-width) + 120px);
  display: flex;
  gap: 0;
  z-index: 2;
}

.email-input {
  padding: 16px 20px;
  border: none;
  border-radius: 8px 0 0 8px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  color: #333;
  flex: 1;
  outline: none;
  transition: background 0.3s ease;
}

.email-input::placeholder {
  color: #8FA8C7;
  font-weight: 400;
  font-family: "Rethink Sans", sans-serif;
}

.email-input:focus {
  background: rgba(255, 255, 255, 0.65);
}

.waitlist-btn {
  padding: 16px 16px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: #0B67FF;
  color: white;
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.waitlist-btn:hover {
  background: #0052CC;
}

/* Interactive section - First screen */
.interactive-section-1 {
  width: 100%;
  min-height: 100vh;
  background: white;
  padding: 5% 5% 5% 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.interactive-container-1 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 80vh;
}

/* Meet Roamy - Top left */
.meet-roamy {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.meet-roamy h2 {
  font-family: "Rethink Sans", sans-serif;
  font-size: clamp(80px, 10vw, 128px);
  font-weight: 800;
  color: #CCCCCC;
  margin: 0;
  line-height: 0.9;
}

/* Import Icon - Top right */
.import-icon {
  position: absolute;
  top: 0;
  right: 15%;
  width: clamp(280px, 15vw, 250px);
  height: auto;
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.import-icon.fly-in {
  opacity: 1;
  transform: translateX(0);
}

/* Quote section - Right side */
.quote-section {
  position: absolute;
  top: 60%;
  right: 0%;
  transform: translateY(-50%);
  max-width: 600px;
  text-align: left;
}

.quote-mark {
  font-size: clamp(80px, 8vw, 120px);
  color: #0B67FF;
  font-weight: bold;
  margin-bottom: -80px;
  font-family: "Rethink Sans", sans-serif;
}

.quote-text {
  font-family: "Rethink Sans", sans-serif;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

/* Animation styles for progressive text color change */
.quote-text .word {
  color: #CCCCCC;
  transition: color 0.5s ease;
}

.quote-text .word.animate-black {
  color: #333;
}

/* Trip Icon - Bottom left */
.trip-icon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(400px, 35vw, 600px);
  height: auto;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.trip-icon.fly-in {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive section - Second screen */
.interactive-section-2 {
  width: 100%;
  min-height: 100vh;
  background: white;
  padding: 5% 5% 5% 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.interactive-container-2 {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 80vh;
}

/* Location Icons - Above spots text */
.location-icons {
  position: absolute;
  top: 0%;
  right: 0;
  width: clamp(120px, 10vw, 180px);
  height: auto;
}

/* You pick text - Top right */
.spots-text {
  position: absolute;
  top: 10%;
  right: 0;
  text-align: right;
}

.spots-text h3 {
  font-family: "Rethink Sans", sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: #333;
  margin: 0;
}

.blue-text {
  color: #002AEA;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: "Rethink Sans";
  font-size: 64px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  text-shadow: 
    /* White outline */
    -5px -5px 0 #FFF,
    5px -5px 0 #FFF,
    -5px 5px 0 #FFF,
    5px 5px 0 #FFF,
    -5px 0px 0 #FFF,
    5px 0px 0 #FFF,
    0px -5px 0 #FFF,
    0px 5px 0 #FFF,
    /* Diagonal corners for smoothness */
    -3px -3px 0 #FFF,
    3px -3px 0 #FFF,
    -3px 3px 0 #FFF,
    3px 3px 0 #FFF,
    /* Drop shadow - more prominent */
    6px 8px 12px rgba(0, 0, 0, 0.5);
}

/* We plan text - Bottom left */
.routes-text {
  position: absolute;
  bottom: 30%;
  left: 0;
  text-align: left;
}

.routes-text h3 {
  font-family: "Rethink Sans", sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.orange-text {
  color: #FF6B35;
  position: relative;
}

.cursor-icon {
  position: absolute;
  top: -5px;
  right: -35px;
  width: 45px;
  height: auto;
}

.import-places-icon {
  position: absolute;
  left: -100%;
  width: clamp(250px, 20vw, 350px);
  height: auto;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 150px #B67EFF);
}

/* 1 Click Plan - Bottom right */
.one-click-plan {
  position: absolute;
  bottom: 5%;
  right: 15%;
  width: clamp(250px, 20vw, 350px);
  height: auto;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 150px #FF721E);
}

/* Animation classes for second interactive section */
.location-icons, .spots-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.routes-text, .cursor-icon {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade in animations */
.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.spring-in {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: shake 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

.spring-in-places {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: shake 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

@keyframes shake {
  0% { transform: scale(1) translateX(0); }
  8% { transform: scale(1.08) translateX(-12px); }
  16% { transform: scale(1.06) translateX(10px); }
  24% { transform: scale(1.04) translateX(-8px); }
  32% { transform: scale(1.03) translateX(6px); }
  40% { transform: scale(1.02) translateX(-4px); }
  48% { transform: scale(1.015) translateX(3px); }
  56% { transform: scale(1.01) translateX(-2px); }
  64% { transform: scale(1.005) translateX(1.5px); }
  72% { transform: scale(1.003) translateX(-1px); }
  80% { transform: scale(1.001) translateX(0.5px); }
  88% { transform: scale(1) translateX(-0.2px); }
  96% { transform: scale(1) translateX(0.1px); }
  100% { transform: scale(1) translateX(0); }
}

/* App showcase section */
.showcase-section {
  width: 100%;
  background: white;
  padding: 0px 5% 0px 5%;
  display: flex;
  justify-content: center;
}

.showcase-image {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}

/* Hide mobile content on desktop */
.mobile-content {
  display: none;
}

/* Complete Mobile Design */
@media (max-width: 768px) {
  /* Overflow prevention */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero-section-wrapper {
    padding: 20px;
  }
  
  .hero-container {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    border: 2px solid white;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    grid-template-columns: none;
    grid-template-rows: none;
    position: relative;
    overflow: visible;
  }
  
  /* Hide desktop elements and separators */
  .col-divider,
  .row-divider,
  .main-image,
  .header-separator {
    display: none !important;
  }

  /* Force hero header to vertical stack on mobile */
  .hero-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0px !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding-bottom: 0 !important;
    min-height: unset !important;
    order: 1;
  }
  
  /* Title area */
  .title-wrap { display: block !important; align-items: center !important; }
  .title { display: block !important; grid-column: unset !important; grid-row: unset !important; position: static !important; text-align: center !important; font-size: 36px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 0 20px 0 !important; max-width: 100% !important; }

  /* Logo */
  .logo { 
    content: url('./assets/LogoFooter.png');
    width: clamp(180px, 45vw, 260px); 
    height: auto !important; 
    position: static !important; 
    align-self: center !important; 
    margin: 0 0 20px 0 !important; 
  }
  
  /* Email signup - positioned right after title */
  .email-signup { 
    position: static !important; 
    width: 290px !important; 
    height: 35px !important;
    max-width: none !important; 
    display: flex !important; 
    gap: 0 !important; 
    margin: 0 auto -10px auto !important; 
    order: 2 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    align-self: center !important;
  }
  
  /* Mobile email input and button sizing */
  .email-input {
    height: 35px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 6px 0 0 6px !important;
  }
  
  .waitlist-btn {
    height: 35px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 0 6px 6px 0 !important;
  }
  
  /* Mobile adjustments for emoji row - keep desktop animations */
  .emoji-row { 
    position: static !important; 
    justify-content: center !important;
    padding-left: 0 !important;
    font-size: 40px !important; 
    margin: 10px 0 !important; 
    order: 3; 
  }
  
  .emoji-row.step-1 {
    padding-left: 0 !important;
  }
  
  .emoji-row.step-2 {
    justify-content: center !important;
    padding-left: 250px !important;
    margin-top: 10px !important;
    font-size: 58px !important;
  }
  
  /* Mobile content container - scattered layout for polaroids and icons */
  .right-rail { 
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    order: 4 !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 20px auto !important;
    min-height: 400px !important;
  }

  /* Mobile polaroids - scattered positioning, keep desktop class names for animations */
  .polaroid {
    position: absolute !important;
    width: 150px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 8px !important;
    /* Keep desktop animation properties */
  }
  
  /* Mobile polaroid scattered positions to match second screenshot */
  #polaroid-1 { top: 90px; left: 40px; transform: rotate(-8deg); z-index: 1; } /* Rome */
  #polaroid-2 { top: 110px; right: 25px; transform: rotate(5deg); z-index: 2; } /* Florence */
  #polaroid-3 { top: 180px; left: 25px; transform: rotate(-3deg); z-index: 3; } /* Turin */
  #polaroid-4 { top: 220px; right: 20px; transform: rotate(7deg); z-index: 4; } /* Venice */
  #polaroid-5 { top: 250px; left: 40px; transform: rotate(-5deg); z-index: 5; } /* Bottom center */
  
  /* Mobile icons - positioned around the scattered polaroids, keep desktop class names for animations */
  .icon {
    position: absolute !important;
    width: 58px !important;
    height: 58px !important;
    z-index: 10 !important;
    /* Keep desktop animation properties */
  }
  
  /* Mobile icon positions around the scattered polaroids */
  #icon-2 { top: 80px !important; left: -10px !important; right: auto !important; bottom: auto !important; } /* Flight icon - left side */
  #icon-1 { top: auto !important; bottom: -20px !important; left: -5px !important; right: auto !important; } /* Icon 1 - bottom left */
  #icon-3 { top: auto !important; bottom: -40px !important; right: 0px !important; left: auto !important; } /* Icon 3 - bottom right */
  
  /* Hide mobile-specific elements since we're using desktop classes */
  .mobile-content { display: none !important; }
 
  /* Interactive sections - mobile positioning (keep desktop classes/animations) */
  .interactive-section-1 { 
    padding: 8% 5% 0% 5% !important; 
    min-height: 75vh !important; 
  }
  .interactive-container-1 { height: 70vh !important; max-width: 100% !important; }
  .meet-roamy { top: 4% !important; left: 0 !important; right: auto !important; transform: none !important; text-align: left !important; }
  .meet-roamy h2 { font-size: clamp(60px, 12vw, 80px) !important; }
  .import-icon { top: 6% !important; right: 5% !important; width: clamp(120px, 26vw, 180px) !important; }
  .quote-section { top: 40% !important; left: 5% !important; right: 5% !important; transform: translateY(-50%) !important; text-align: left !important; max-width: none !important; }
  .quote-mark { font-size: clamp(60px, 12vw, 80px) !important; margin-bottom: -40px !important; }
  .quote-text { font-size: clamp(24px, 6vw, 32px) !important; }
  .trip-icon { bottom: 15% !important; left: 35% !important; width: clamp(220px, 44vw, 320px) !important; }
 
  .interactive-section-2 { 
    padding: 0% 5% 0% 5% !important; 
    min-height: 65vh !important; 
  }
  .interactive-container-2 { height: 60vh !important; max-width: 100% !important; }
  .location-icons { top: 0% !important; right: 6% !important; width: clamp(80px, 16vw, 120px) !important; }
  .spots-text { top: 10% !important; right: 6% !important; text-align: right !important; transform: none !important; }
  .spots-text h3 { font-size: clamp(36px, 7.5vw, 48px) !important; }
  .blue-text { 
    font-size: clamp(36px, 7.5vw, 48px) !important; 
    text-shadow: 
      -3px -3px 0 #FFF,
      3px -3px 0 #FFF,
      -3px 3px 0 #FFF,
      3px 3px 0 #FFF,
      -3px 0px 0 #FFF,
      3px 0px 0 #FFF,
      0px -3px 0 #FFF,
      0px 3px 0 #FFF,
      -2px -2px 0 #FFF,
      2px -2px 0 #FFF,
      -2px 2px 0 #FFF,
      2px 2px 0 #FFF,
      4px 6px 8px rgba(0, 0, 0, 0.4) !important;
  }
  .import-places-icon { 
    position: absolute !important;
    top: 150% !important; 
    left: 6% !important; 
    width: clamp(170px, 28vw, 220px) !important;
    /* Remove from spots-text positioning context */
    margin: 0 !important;
    transform: none !important;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 60px rgba(182, 126, 255, 0.8)) !important;
    z-index: 5 !important;
  }
  .routes-text { bottom: 35% !important; left: 6% !important; text-align: left !important; transform: none !important; }
  .routes-text h3 { font-size: clamp(36px, 7.5vw, 48px) !important; }
  .cursor-icon { top: -2px !important; right: -24px !important; width: 28px !important; }
  .one-click-plan { 
    bottom: 6% !important; 
    right: 6% !important; 
    width: clamp(170px, 28vw, 220px) !important;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 60px rgba(255, 114, 30, 0.3)) !important;
    animation: none !important;
  }
  
  .import-places-icon.spring-in-places {
    animation: none !important;
  }
 
  /* Showcase image (mobile replacement) */
  .showcase-section { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; position: relative; left: 0; right: 0; box-sizing: border-box; }
  .showcase-image { content: url('./assets/MobileMainBodyImage.png'); width: 100% !important; max-width: 100% !important; height: auto; margin: 0 !important; padding: 0 !important; display: block; object-fit: cover; object-position: center; box-sizing: border-box; }
}

/* Small screens (tablets just under desktop layout) */
@media (max-width: 900px) and (min-width: 769px) {
  :root { --rail-width: 280px; }
  .hero-container { gap: 16px; }
  .logo { height: 60px; }
  .title { font-size: clamp(24px, 5vw, 34px); }
  .polaroid { width: 180px; }
  
  .showcase-section { padding: 60px 8% 30px 8%; }
  .showcase-image { max-width: 100%; }
}

/* Very small screens */
@media (max-width: 600px) {
  .showcase-section {
    padding: 40px 10% 20px 10%;
  }
}

/* Large screens */
@media (min-width: 1600px) {
  .showcase-section {
    padding: 100px 10% 60px 10%;
  }
}

/* Footer */
.footer {
  background: #000000;
  padding: 40px 5%;
  width: 100%;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  align-items: center;
}

.footer-left {
  display: flex;
  justify-content: flex-start;
}

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

.footer-center {
  display: flex;
  justify-content: center;
}

.footer-signup {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 500px;
}

.footer-email-input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px 0 0 8px;
  background: #808080;
  color: white;
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  outline: none;
}

.footer-email-input::placeholder {
  color: #CCCCCC;
  font-family: "Rethink Sans", sans-serif;
}

.footer-join-btn {
  padding: 12px 16px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: white;
  color: black;
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease;
}

.footer-join-btn:hover {
  background: #F0F0F0;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  color: #CCCCCC;
  text-decoration: none;
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: white;
}

.footer-copyright {
  color: #CCCCCC;
  font-family: "Rethink Sans", sans-serif;
  font-size: 14px;
  text-align: right;
}

/* Footer responsive */
@media (max-width: 768px) {
  .footer-content { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .footer-left, .footer-center, .footer-right { justify-content: center; align-items: center; }
  .footer-right { align-items: center; }
  .footer-copyright { text-align: center; }
}