/* ═══════════════════════════════════════════════════════
   YallaPOS — Homepage-only overrides
   Loaded exclusively in index.html.
   Turns body to warm beige, hero to a dark card,
   and reskins the three sections below for light theme.
═══════════════════════════════════════════════════════ */

/* ── Page background ──────────────────────────────── */
body.home {
  background: #F0E9DE;
}

#hero {
  margin: 0;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.08),
    0 20px 60px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
  background: #0A0F1E;
}

/* ── Solutions carousel — spacing below hero ── */
#solutions-carousel-mount {
  padding-top: 8px;
}

#business-platform-mount {
  padding-top: 8px;
}

/* ── Smart POS — top breathing room, no side padding (wide card goes edge-to-edge) ── */
#feature-preview {
  padding: 56px 0 0;
}

/* ── Remove positioning section ── */
#positioning-mount {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   POSITIONING — light theme
═══════════════════════════════════════════════════════ */
.positioning-title {
  color: #0D1117;
}

.positioning-desc {
  color: #5A6A80;
}

/* stat numbers keep the indigo accent — looks great on beige */

.positioning-stat-label {
  color: #6B7280;
}

/* ═══════════════════════════════════════════════════════
   CONTACT — light theme
═══════════════════════════════════════════════════════ */
#contact {
  border-top-color: rgba(0,0,0,0.07);
}

#contact::before {
  display: none;
}

.contact-title {
  color: #0D1117;
}

.contact-sub {
  color: #5A6A80;
}

.contact-option {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.contact-option:hover {
  background: #FFFFFF;
  border-color: rgba(91,115,240,0.25);
  box-shadow: 0 8px 28px rgba(91,115,240,0.1);
  transform: translateY(-3px);
}

.contact-icon {
  opacity: 1;
}

.contact-label {
  color: #374151;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — mobile hero card edge
═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #hero {
    border-radius: 0 0 16px 16px;
  }
}