/* ===== Reset ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background: var(--text);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { border: none; background: none; font: inherit; }

/* Fork cursor on every clickable element */
button,
a[href],
summary,
[role="button"] {
  cursor: url('assets/fork-cursor.png') 7 0, pointer;
}

/* ===== Brand Variables ===== */
:root {
  --primary: #FAAF32;
  --primary-dark: #E89B1C;
  --primary-light: #FFD182;
  --primary-surface: #FFF7E0;
  --secondary: #00B8A9;
  --secondary-light: #E0F7F5;
  --accent: #FF6B6B;
  --accent-light: #FFE8E8;
  --text: #2D3436;
  --muted: #636E72;
  --white: #FFFFFF;
  --bg-light: #FAFAFA;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --max-width: 1120px;
  --header-height: 72px;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== Utility ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section--white {
  background: var(--white);
}

/* Background image sections with low opacity */
.section--bg-terrace,
.section--bg-table {
  position: relative;
  overflow: hidden;
}

.section--bg-terrace::before,
.section--bg-table::before,
.section--bg-kitchen::before,
.section--bg-market::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  z-index: 0;
}

/* Terraza de restaurante — sección clientes */
.section--bg-terrace::before {
  background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1920&q=80');
}

/* Mesa con platos — sección FAQ */
.section--bg-table::before {
  background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1920&q=80');
}

/* Cocina de restaurante — sección comercios */
.section--bg-kitchen::before {
  background-image: url('https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=1920&q=80');
}

/* Mercado/barra con tapas — sección beneficios */
.section--bg-market::before {
  background-image: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920&q=80');
}

.section--bg-terrace > *,
.section--bg-table > *,
.section--bg-kitchen > *,
.section--bg-market > * {
  position: relative;
  z-index: 1;
}

.section--bg-kitchen,
.section--bg-market,
.section--bg-hero {
  position: relative;
  overflow: hidden;
}

/* Calle con bares — hero */
.section--bg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1528699633788-424d2aa66de2?w=1920&q=80');
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  z-index: 0;
}

.section--bg-hero > * {
  position: relative;
  z-index: 1;
}

.section--cream {
  background: var(--primary-surface);
}

.section--teal-light {
  background: var(--secondary-light);
}

.section__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
}

.section__title--left {
  text-align: left;
}

.section__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  text-align: center;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

.section__subtitle--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ===== Wave Dividers ===== (defined fully in the theme block below) */

/* ===== Scroll Animations ===== */
.fade-up,
.fade-left,
.fade-right,
.fade-zoom {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.fade-up    { transform: translate3d(0, 36px, 0); }
.fade-left  { transform: translate3d(-40px, 0, 0); }
.fade-right { transform: translate3d(40px, 0, 0); }
.fade-zoom  { transform: scale(0.92); }

.fade-up.visible,
.fade-left.visible,
.fade-right.visible,
.fade-zoom.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger: children of a [data-stagger] container cascade in */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: opacity, transform;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

[data-stagger].visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-left,
  .fade-right,
  .fade-zoom,
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(45, 52, 54, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: var(--header-height);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.header__logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__nav a {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
  position: relative;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.header__nav a:hover {
  color: var(--primary);
}

.header__nav a:hover::after {
  width: 100%;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language selector */
.lang-selector {
  position: relative;
}

.lang-selector__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.lang-selector__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}

.lang-selector__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.lang-selector.open .lang-selector__btn svg {
  transform: rotate(180deg);
}

.lang-selector__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.lang-selector.open .lang-selector__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-selector__dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s;
}

.lang-selector__dropdown button:hover {
  background: var(--primary-surface);
}

.lang-selector__dropdown button.active {
  color: var(--primary-dark);
  font-weight: 700;
  background: var(--primary-surface);
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--white);
  border-radius: 4px;
  transition: transform 0.3s, opacity 0.3s;
}

.burger.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 767px) {
  .header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 24px;
    gap: 24px;
    background: #2D3436;
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
  }

  .header__nav.open {
    transform: translateX(0);
  }

  .header__nav a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
  }

  .header__nav a::after {
    display: none;
  }

  .burger {
    display: flex;
  }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #FFF7E0 0%, #FFFFFF 50%, #E0F7F5 100%);
}

.hero__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  z-index: 0;
}

.blob--1 {
  width: 500px;
  height: 500px;
  background: var(--primary);
  top: -100px;
  right: -100px;
  opacity: 0.2;
}

.blob--2 {
  width: 400px;
  height: 400px;
  background: var(--secondary);
  bottom: -80px;
  left: -80px;
  opacity: 0.15;
}

.blob--3 {
  width: 300px;
  height: 300px;
  background: var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.08;
}

.hero__mascot {
  position: absolute;
  left: -10%;
  bottom: -4%;
  height: 90%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: left bottom;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 24px;
}

.hero__text {
  max-width: 540px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 24px;
}

.hero__title span {
  color: var(--primary-dark);
  position: relative;
  display: inline;
}

.hero__title span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 8px;
  background: var(--primary);
  opacity: 0.4;
  border-radius: 4px;
  z-index: -1;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 36px;
}

/* Hero Gallery — stacked deck style */
.hero__gallery {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__gallery-grid {
  position: relative;
  width: 420px;
  height: 420px;
}

.gallery-item {
  position: absolute;
  width: 200px;
  height: 250px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border: 4px solid var(--white);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
  /* stack them centered */
  top: 50%;
  left: 50%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stacked positions — tight pile */
.gallery-item:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 1;
}
.gallery-item:nth-child(2) {
  transform: translate(-50%, -50%) rotate(2deg) translate(5px, -5px);
  z-index: 2;
}
.gallery-item:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-1deg) translate(-3px, 3px);
  z-index: 3;
}
.gallery-item:nth-child(4) {
  transform: translate(-50%, -50%) rotate(3deg) translate(8px, 2px);
  z-index: 4;
}
.gallery-item:nth-child(5) {
  transform: translate(-50%, -50%) rotate(-2deg) translate(-5px, -3px);
  z-index: 5;
}
.gallery-item:nth-child(6) {
  transform: translate(-50%, -50%) rotate(1deg) translate(3px, 5px);
  z-index: 6;
}

/* On hover over the GRID: fan out all cards */
.hero__gallery-grid:hover .gallery-item:nth-child(1) {
  transform: translate(calc(-50% - 170px), calc(-50% - 60px)) rotate(-15deg);
  z-index: 1;
}
.hero__gallery-grid:hover .gallery-item:nth-child(2) {
  transform: translate(calc(-50% - 90px), calc(-50% - 80px)) rotate(-8deg);
  z-index: 2;
}
.hero__gallery-grid:hover .gallery-item:nth-child(3) {
  transform: translate(calc(-50% + 10px), calc(-50% - 85px)) rotate(0deg);
  z-index: 3;
}
.hero__gallery-grid:hover .gallery-item:nth-child(4) {
  transform: translate(calc(-50% + 100px), calc(-50% - 65px)) rotate(8deg);
  z-index: 4;
}
.hero__gallery-grid:hover .gallery-item:nth-child(5) {
  transform: translate(calc(-50% - 130px), calc(-50% + 70px)) rotate(-10deg);
  z-index: 5;
}
.hero__gallery-grid:hover .gallery-item:nth-child(6) {
  transform: translate(calc(-50% + 60px), calc(-50% + 75px)) rotate(12deg);
  z-index: 6;
}

.hero__gallery-grid:hover .gallery-item {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Store wrap with "Coming soon" construction sign */
.store-wrap {
  position: relative;
  display: inline-block;
}


.coming-soon-sign {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: repeating-linear-gradient(
    45deg,
    #1a1a1a 0 18px,
    #FAAF32 18px 36px
  );
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.coming-soon-sign__text {
  display: block;
  background: var(--white);
  color: #1a1a1a;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 24px;
  border-radius: 4px;
  text-transform: uppercase;
}

.coming-soon-sign--small .coming-soon-sign__text {
  font-size: 1rem;
  padding: 8px 18px;
}

@media (max-width: 767px) {
  .coming-soon-sign__text {
    font-size: 1.05rem;
    padding: 8px 16px;
  }
  .coming-soon-sign--small .coming-soon-sign__text {
    font-size: 0.85rem;
    padding: 6px 14px;
  }
}

/* Store buttons — pill style */
.store-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--white);
  color: var(--text);
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s;
  box-shadow: 0 4px 20px rgba(250, 175, 50, 0.2);
  border: 2px solid rgba(250, 175, 50, 0.15);
}

.store-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(250, 175, 50, 0.35);
  background: var(--primary-surface);
}

.store-btn:active {
  transform: translateY(-1px) scale(1.0);
}

.store-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.store-btn__text {
  text-align: left;
  line-height: 1.2;
}

.store-btn__text small {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.6;
  display: block;
}

.store-btn__text strong {
  font-size: 1rem;
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: 40px 0;
  }

  .hero__content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
    padding: 40px 20px;
  }

  .hero__text {
    max-width: 100%;
  }

  .hero__mascot {
    left: -25%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    max-width: 80%;
    opacity: 0.10;
  }

  .store-buttons {
    justify-content: center;
  }

  .hero__gallery {
    order: -1;
  }

  .hero__gallery-grid {
    width: 280px;
    height: 320px;
  }

  .gallery-item {
    width: 140px;
    height: 180px;
    border-radius: 16px;
  }

  .hero__gallery-grid:hover .gallery-item:nth-child(1) {
    transform: translate(calc(-50% - 100px), calc(-50% - 40px)) rotate(-12deg);
  }
  .hero__gallery-grid:hover .gallery-item:nth-child(2) {
    transform: translate(calc(-50% - 40px), calc(-50% - 55px)) rotate(-5deg);
  }
  .hero__gallery-grid:hover .gallery-item:nth-child(3) {
    transform: translate(calc(-50% + 30px), calc(-50% - 55px)) rotate(3deg);
  }
  .hero__gallery-grid:hover .gallery-item:nth-child(4) {
    transform: translate(calc(-50% + 80px), calc(-50% - 35px)) rotate(10deg);
  }
  .hero__gallery-grid:hover .gallery-item:nth-child(5) {
    transform: translate(calc(-50% - 70px), calc(-50% + 50px)) rotate(-8deg);
  }
  .hero__gallery-grid:hover .gallery-item:nth-child(6) {
    transform: translate(calc(-50% + 50px), calc(-50% + 55px)) rotate(8deg);
  }

  .blob--1 {
    width: 300px;
    height: 300px;
  }

  .blob--2 {
    width: 250px;
    height: 250px;
  }

  .hero-newsletter__pill {
    flex-direction: column;
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
  }

  .hero-newsletter input {
    width: 100%;
    padding: 0 10px;
  }

  .hero-newsletter button {
    width: 100%;
    border-radius: 12px;
  }
}

/* ===== Split Layout (Customers / Merchants) ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

.split__image {
  border-radius: var(--radius-xl);
  overflow: visible;
  position: relative;
}

.split__image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
  position: relative;
  z-index: 1;
}

.phone-mockup {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}

.split__image--photo {
  overflow: hidden;
  border-radius: var(--radius-xl);
  align-self: stretch;
}

.split__image--photo::before {
  display: none;
}

.split__image--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Colored shadow behind images */
.split__image--teal::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: var(--radius-xl);
  background: var(--secondary);
  z-index: 0;
  transform: rotate(3deg);
  opacity: 0.35;
}

.split__image--coral::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: var(--radius-xl);
  background: var(--accent);
  z-index: 0;
  transform: rotate(-3deg);
  opacity: 0.35;
}

/* Decorative dots */
.decorative-dots {
  position: absolute;
  z-index: 0;
}

.decorative-dots span {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}

.decorative-dots--teal {
  inset: 0;
}

.decorative-dots--teal span:nth-child(1) {
  width: 16px; height: 16px; background: var(--secondary); top: -12px; right: 30px;
}
.decorative-dots--teal span:nth-child(2) {
  width: 10px; height: 10px; background: var(--primary); top: 20px; right: -8px;
}
.decorative-dots--teal span:nth-child(3) {
  width: 20px; height: 20px; background: var(--secondary); bottom: 30px; right: -14px; opacity: 0.3;
}
.decorative-dots--teal span:nth-child(4) {
  width: 8px; height: 8px; background: var(--primary); bottom: -6px; left: 40px;
}
.decorative-dots--teal span:nth-child(5) {
  width: 14px; height: 14px; background: var(--secondary); top: 50%; left: -10px; opacity: 0.35;
}

.decorative-dots--coral {
  inset: 0;
}

.decorative-dots--coral span:nth-child(1) {
  width: 16px; height: 16px; background: var(--accent); top: -12px; left: 30px;
}
.decorative-dots--coral span:nth-child(2) {
  width: 10px; height: 10px; background: var(--primary); top: 20px; left: -8px;
}
.decorative-dots--coral span:nth-child(3) {
  width: 20px; height: 20px; background: var(--accent); bottom: 30px; left: -14px; opacity: 0.3;
}
.decorative-dots--coral span:nth-child(4) {
  width: 8px; height: 8px; background: var(--primary); bottom: -6px; right: 40px;
}
.decorative-dots--coral span:nth-child(5) {
  width: 14px; height: 14px; background: var(--accent); top: 50%; right: -10px; opacity: 0.35;
}

.split__text {
  padding: 8px 0;
}

/* Numbered steps */
.numbered-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.numbered-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.numbered-steps__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.numbered-steps__number--teal {
  background: var(--secondary);
  box-shadow: 0 4px 15px rgba(0, 184, 169, 0.3);
}

.numbered-steps__number--coral {
  background: var(--accent);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.numbered-steps__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.numbered-steps__desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .split--reverse {
    direction: ltr;
  }

  .split__image img {
    height: 280px;
  }

  .split__image--photo {
    aspect-ratio: 4 / 3;
  }

  .section__title--left {
    text-align: center;
  }

  .section__subtitle--left {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ===== Benefits Section ===== */
.section--teal-light {
  position: relative;
  overflow: hidden;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.benefit-col {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.benefit-col--clients {
  border-top: 4px solid var(--secondary);
}

.benefit-col--merchants {
  border-top: 4px solid var(--accent);
}

.benefit-col__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text);
}

.benefit-col__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.975rem;
  color: var(--text);
  line-height: 1.5;
}

.benefit-col__list li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.benefit-col__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 2px;
}

.benefit-col__check--teal {
  background: rgba(0, 184, 169, 0.15);
  color: var(--secondary);
}

.benefit-col__check--coral {
  background: rgba(255, 107, 107, 0.15);
  color: var(--accent);
}

@media (max-width: 767px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-col {
    padding: 32px 24px;
  }
}

/* ===== FAQ ===== */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-light);
  overflow: hidden;
  transition: background 0.2s;
}

.faq-item:hover {
  background: var(--primary-surface);
}

.faq-item[open] {
  background: var(--primary-surface);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  list-style: none;
  user-select: none;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--primary-dark);
}

.faq-item summary .faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary-dark);
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform 0.3s, background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
  background: var(--primary);
  color: var(--white);
}

.faq-item__answer {
  padding: 0 24px 20px;
  font-size: 0.975rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 640px;
}

.faq-item__answer a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ===== Download Page ===== */
.download-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--white);
}

.download-page__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  text-decoration: none;
  color: var(--text);
}

.download-page__logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: brightness(0);
}

.download-page__logo span {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
}

.download-page__tagline {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 380px;
  margin-bottom: 40px;
  line-height: 1.5;
}

.download-page__store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.download-page__store .store-buttons {
  flex-direction: column;
  align-items: center;
}

@media (min-width: 480px) {
  .download-page__store .store-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

.download-page__copy {
  margin-top: 48px;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.7;
}

/* ===== Download page — hero centered variant ===== */
.hero__content--centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.hero__text--centered {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
}

.btn-home:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Active nav link highlight */
.header__nav-active {
  color: var(--primary-dark) !important;
  font-weight: 700;
}

/* ===== Footer ===== */
.footer {
  background: var(--text);
  color: var(--white);
  padding: 64px 0 32px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
}

.footer__logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  margin-top: -12px;
}

.footer .store-buttons {
  gap: 12px;
}

.footer .store-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  padding: 12px 24px;
  font-size: 0.85rem;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
}

.footer .store-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(250, 175, 50, 0.15);
  transform: translateY(-2px);
  border-color: rgba(250, 175, 50, 0.3);
}

.footer .store-btn__text strong {
  font-size: 0.9rem;
}

.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__links a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
  font-weight: 600;
}

.footer__links a:hover {
  color: var(--primary);
}

.footer__copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  text-align: center;
}

/* ===== Instagram Button ===== */
.instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 50px;
  transition: background 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.instagram-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(250, 175, 50, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(250, 175, 50, 0.15);
}

.instagram-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.85;
}

.instagram-btn__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.instagram-btn__handle {
  font-weight: 700;
  font-size: 0.9rem;
}

.instagram-btn__cta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}

/* ===== Hero Newsletter Inline Form ===== */
.hero-newsletter {
  margin-top: 32px;
}

.hero-newsletter__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.hero-newsletter__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(250, 175, 50, 0.13);
  border: 1px solid rgba(250, 175, 50, 0.38);
  color: #b87b00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-newsletter__tagline {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}

.hero-newsletter__form {
  display: flex;
  flex-direction: column;
}

.hero-newsletter__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(45, 52, 54, 0.13);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 2px 12px rgba(45, 52, 54, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-newsletter__pill:focus-within {
  border-color: rgba(250, 175, 50, 0.55);
  box-shadow:
    0 4px 20px rgba(45, 52, 54, 0.08),
    0 0 0 4px rgba(250, 175, 50, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-newsletter input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  outline: none;
  padding: 0 12px;
}

.hero-newsletter input::placeholder {
  color: rgba(45, 52, 54, 0.35);
  font-weight: 400;
}

.hero-newsletter button {
  flex-shrink: 0;
  min-height: 44px;
  border-radius: 15px;
  background: var(--primary);
  color: var(--text);
  font-weight: 900;
  font-size: 0.88rem;
  padding: 0 18px;
  white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.hero-newsletter button:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(250, 175, 50, 0.4);
  transform: translateY(-1px);
}

.hero-newsletter button:active {
  transform: translateY(0);
  box-shadow: none;
}

.hero-newsletter__status {
  min-height: 1.2em;
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--secondary);
}

/* ===== Newsletter ===== */
.newsletter-section {
  overflow: hidden;
}

.newsletter-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 36px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 36px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 209, 130, 0.32), transparent 17rem),
    linear-gradient(135deg, rgba(45, 52, 54, 0.98), rgba(33, 39, 41, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 28px 70px rgba(45, 52, 54, 0.24);
  color: var(--white);
  overflow: hidden;
}

.newsletter-card::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  bottom: -110px;
  border: 34px solid rgba(250, 175, 50, 0.18);
  border-radius: 999px;
}

.newsletter-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  left: -42px;
  top: -46px;
  border-radius: 34px;
  background: rgba(0, 184, 169, 0.2);
  transform: rotate(14deg);
}

.newsletter-card > * {
  position: relative;
  z-index: 1;
}

.newsletter-card__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(250, 175, 50, 0.16);
  color: var(--primary-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsletter-card__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.newsletter-card__text {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.7;
}

.newsletter-card__bullets {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.newsletter-card__bullets li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}

.newsletter-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(250, 175, 50, 0.16);
}

.newsletter-form {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.newsletter-form label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  font-weight: 800;
}

.newsletter-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.newsletter-form input {
  width: 100%;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
  padding: 0 18px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.newsletter-form input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(250, 175, 50, 0.2);
  transform: translateY(-1px);
}

.newsletter-form button {
  min-height: 56px;
  border-radius: 18px;
  background: var(--primary);
  color: var(--text);
  font-weight: 900;
  padding: 0 18px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.newsletter-form button:hover {
  background: var(--primary-light);
  box-shadow: 0 12px 28px rgba(250, 175, 50, 0.22);
  transform: translateY(-2px);
}

.newsletter-form__note,
.newsletter-form__status {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  line-height: 1.5;
}

.newsletter-form__status {
  min-height: 1.4em;
  color: var(--primary-light);
  font-weight: 800;
}

/* ===== Legal Pages (Privacy & Terms) ===== */
.legal {
  padding-top: 120px;
  padding-bottom: 80px;
  min-height: 60vh;
}

.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.legal__updated {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 40px;
}

.legal__body h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal__body p {
  font-size: 0.975rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal__body ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal__body ul li {
  font-size: 0.975rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 6px;
}

.legal__body a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  /* Extra top/bottom padding so content stays clear of the wavy
     clip-path edges (which clip up to ~9% of section height). */
  .section {
    padding: 100px 0 96px;
  }

  .store-btn {
    padding: 14px 22px;
  }

  .footer__links {
    gap: 16px;
  }

  .legal {
    padding-top: 100px;
  }

  .legal__title {
    font-size: 1.6rem;
  }

  .newsletter-card {
    grid-template-columns: 1fr;
    gap: 24px;
    border-radius: 28px;
  }
}

/* ============================================================
   ZAMPA — Corporate Orange Theme
   Body sits on the dark brand color (matching header & footer);
   sections float as warm orange panels separated by subtle dark
   gaps. White cards inside provide content focus.
   ============================================================ */

/* Section panels share the corporate orange with a soft top
   highlight gradient that gives depth instead of a flat slab. */
.section--white,
.section--cream,
.section--teal-light {
  background:
    linear-gradient(180deg,
      rgba(255, 209, 130, 0.18) 0%,
      rgba(255, 209, 130, 0.00) 220px),
    #FAAF31;
}

/* The Hero gets a richer warmth — a radial highlight in the upper
   left adds focus to the headline without harming legibility. */
.hero {
  background:
    radial-gradient(1200px 600px at 12% 8%,
      rgba(255, 230, 180, 0.32) 0%,
      rgba(255, 230, 180, 0.00) 60%),
    linear-gradient(180deg,
      rgba(255, 209, 130, 0.20) 0%,
      rgba(255, 209, 130, 0.00) 280px),
    #FAAF31;
}

/* Lift decorative photo backgrounds slightly so they read as
   texture under the orange instead of disappearing. */
.section--bg-terrace::before,
.section--bg-table::before,
.section--bg-kitchen::before,
.section--bg-market::before {
  opacity: 0.10;
  mix-blend-mode: multiply;
}
.section--bg-hero::before {
  opacity: 0.08;
  mix-blend-mode: multiply;
}

/* Default text on orange panels is white. Body stays dark
   (matches header/footer) and shows in the gaps between sections. */
.hero,
.section--white,
.section--cream,
.section--teal-light {
  color: var(--white);
}

/* Titles — full white for impact */
.hero .section__title,
.hero .hero__title,
.section--white .section__title,
.section--cream .section__title,
.section--teal-light .section__title,
.hero .numbered-steps__title,
.section--white .numbered-steps__title,
.section--cream .numbered-steps__title,
.section--teal-light .numbered-steps__title {
  color: var(--white);
}

/* Hero accent (the underlined word) — keep dark for contrast. */
.hero .hero__title span {
  color: var(--text);
}
.hero .hero__title span::after {
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

/* Subtitles & body copy on orange — soft white for hierarchy */
.hero .hero__subtitle,
.hero .section__subtitle,
.section--white .section__subtitle,
.section--cream .section__subtitle,
.section--teal-light .section__subtitle,
.hero .numbered-steps__desc,
.section--white .numbered-steps__desc,
.section--cream .numbered-steps__desc,
.section--teal-light .numbered-steps__desc {
  color: rgba(255, 255, 255, 0.88);
}

/* Restore dark text inside white-background cards. */
.benefit-col,
.benefit-col__title,
.benefit-col__list li,
.faq-item,
.faq-item summary,
.faq-item__answer,
.faq-item__answer p,
.faq-item__answer li {
  color: var(--text);
}

/* Premium elevation for white cards on orange */
.benefit-col {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 36px rgba(45, 52, 54, 0.20),
    0 2px 6px rgba(45, 52, 54, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.faq-item {
  box-shadow:
    0 8px 22px rgba(45, 52, 54, 0.14),
    0 1px 3px rgba(45, 52, 54, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.faq-item:hover {
  box-shadow:
    0 12px 28px rgba(45, 52, 54, 0.18),
    0 2px 4px rgba(45, 52, 54, 0.08);
}

/* ============================================================
   Section shape — wavy top + wavy bottom via SVG clip-path.
   Each orange section is clipped to an organic island shape, so
   its background image extends naturally to the curved borders.
   The dark body shows in the gaps between sections (above each
   wavy top and below each wavy bottom).
   ============================================================ */
.section--white,
.section--cream,
.section--teal-light {
  clip-path: url(#section-wave-a);
}
/* Alternate the wave shape on every other section for visual rhythm */
#merchants {
  clip-path: url(#section-wave-b);
}
#faq {
  clip-path: url(#faq-wave);
}
.hero {
  clip-path: url(#hero-wave);
}

/* Pull adjacent sections closer so the dark gap between them is
   formed by their CLIPPED edges (not by extra empty whitespace). */
.hero,
.section--white,
.section--cream,
.section--teal-light {
  margin-bottom: -40px;
}
.footer {
  margin-top: -40px;
  padding-top: 100px; /* compensate for the negative margin */
}

@media (max-width: 767px) {
  .hero,
  .section--white,
  .section--cream,
  .section--teal-light {
    margin-bottom: -24px;
  }
}