/* =============================================================
   landing-refresh.css - modern UI for the restructured landing
   -------------------------------------------------------------
   Loaded AFTER landing.css from layouts/landing/app.blade.php.
   Additive override layer; wins on cascade order alone, so the whole
   redesign reverts by deleting that one <link>.

   The page was restructured before it was restyled (home.blade.php):
   11 equal-weight sections became a narrative —
     hero -> social proof -> conversion -> reasons -> coverage
          -> referral -> module detail -> app CTA -> testimonials
   Module detail (the tabbed services explorer) used to be section two
   and is now near the bottom, because it is reference material, not a
   reason to join. The seller/delivery/rider block is now the primary
   conversion moment rather than the middle of the page.

   Design rules, applied everywhere:
     - One accent (--primary). No gradients, no glow, no glass.
     - White and --gray-50 only. Separation is a 1px --gray-200 hairline.
     - No shadow at rest; --shadow-sm and a 2px lift on hover. The
       earlier 6px lift plus heavy shadow is what read as cheap.
     - One type scale for headings, one section rhythm, one container.

   Tokens live in landing.css's :root.
   ============================================================= */

/* =============================================================
   1. RHYTHM - one system for all eleven sections
   ============================================================= */
:root {
  --section-pad: 68px;
  --heading-max: 680px;
  --copy-max: 580px;
}

.marquee,
.services-section,
.features,
.zones,
.earn,
.special,
.stats,
.testimonials,
.referral,
.cta-manage {
  background: var(--surface);
  border-top: 0;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad)
}

/* One tint, used twice, at opposite ends of the page. Enough to stop the
   page reading as one undifferentiated white sheet. */
.zones,
.testimonials {
  background: var(--surface-muted)
}

/* Hairlines instead of colour changes. The marquee is a strip, not a
   section, so it opts out of the vertical rhythm entirely. */
.hero + .marquee,
.referral + .services-section,
.earn + .features,
.special + .zones {
  border-top: 1px solid var(--line)
}

/* ---- Heading block ---- */
.sec-header {
  max-width: var(--heading-max);
  margin: 0 auto 40px;
  text-align: center
}

.sec-header h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  margin-bottom: 14px
}

.sec-header p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--copy-max);
  margin: 0 auto
}

/* The two heading blocks that bypass .sec-header, pulled onto the same
   scale so nothing on the page is undersized. */
.earn-top {
  max-width: var(--heading-max);
  margin: 0 auto 40px;
  text-align: center
}

.earn-top h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.15rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  margin-bottom: 14px
}

.earn-top p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--copy-max);
  margin: 0 auto
}

/* =============================================================
   2. HERO - the one moment allowed to be large
   ============================================================= */
.hero {
  background: var(--surface);
  color: inherit;
  padding: 84px 0 48px;
  border-bottom: 0;
  isolation: auto
}

/* Reset the previous dark field, mesh grid and blooms outright. */
.hero::before,
.hero::after {
  content: none
}

.hero .container {
  max-width: 900px
}

.hero h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.35rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: var(--ink);
  text-shadow: none
}

/* Accent lands only on admin-highlighted words (Helpers::highlight()
   wraps $...$ markers). Unmarked headlines stay solid; the rule below
   carries the accent instead. */
.hero h1 .hl {
  color: var(--primary)
}

.hero h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 3px;
  /* Both logo greens, deep -> petal, so the accent rule carries the mark's
     two-tone rather than a single flat fill. */
  background: linear-gradient(90deg, var(--primary) 0%, var(--brand-green-light) 100%)
}

.hero-logo {
  margin: 26px 0 22px
}

.hero-logo img {
  height: 54px;
  filter: none
}

.hero p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--copy-max);
  margin: 0 auto 38px
}

.hero-btns {
  gap: 12px
}

.hero-btn {
  padding: 15px 34px;
  font-size: .94rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)
}

/* Solid accent, or hairline outline. Never both, never a gradient. */
.hero-btn--vendor {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), .2)
}

.hero-btn--vendor:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .22);
  transform: translateY(-2px)
}

.hero-btn--delivery {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink)
}

.hero-btn--delivery:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), .1);
  transform: translateY(-2px)
}

.hero-illustration {
  /* This is a very faint full-width watermark. At its natural ~390px height it
     left the hero looking broken - a large empty band under the buttons. It is
     now decorative-only: fixed short, clipped, and the hero no longer depends on
     it for its own height. */
  opacity: .05;
  color: var(--ink);
  margin-top: 20px;
  max-width: 820px;
  height: 84px;
  overflow: hidden
}

/* =============================================================
   3. TRUST STRIP - marquee demoted to a slim band
   ============================================================= */
.marquee {
  padding-top: 22px;
  padding-bottom: 22px;
  overflow: hidden;
  background: var(--surface)
}

/* Set by home.blade.php when there is exactly one promo banner: the track is
   only rendered once, so the 22s scroll would slide a lone chip across the page
   forever. Centre it and stop it instead. */
.marquee.is-single .marquee-track {
  animation: none;
  justify-content: center;
  width: 100%
}

.mq-item {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: none
}

/* .sp-track is rendered outside .container (see home.blade.php) and relies on
   landing.css's own `padding: 0 24px 8px` for its gutter, so no override is
   needed here. Cards clipping at the right edge is correct carousel overflow. */

/* =============================================================
   4. CARDS - the shared shell
   ============================================================= */
.feat-card,
.sp-card,
.test-card,
.earn-card,
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)
}

.feat-card:hover,
.sp-card:hover,
.test-card:hover,
.earn-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong)
}

.feat-card,
.sp-card {
  padding: 26px 24px
}

.test-card {
  padding: 28px 26px
}

.earn-card {
  /* The conversion block gets more presence than the supporting cards. */
  padding: 34px 30px
}

.stat-card {
  padding: 26px 20px
}

/* Icon chips: soft accent tint, squircle. */
.feat-ico,
.earn-card-icon,
.stat-icon {
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), .08);
  color: var(--primary);
  box-shadow: none
}

/* Card type. */
.feat-card h4,
.sp-card h4,
.earn-card h3,
.test-name {
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink)
}

.feat-card p,
.sp-card p,
.earn-card p,
.test-text {
  font-size: .93rem;
  line-height: 1.7;
  color: var(--ink-soft)
}

/* Media: barely-there zoom, no glow. */
.sp-card .sp-ico,
.sp-card img,
.test-av img {
  transition: transform .5s var(--ease-out)
}

.sp-card:hover img,
.sp-card:hover .sp-ico {
  transform: scale(1.03)
}

.test-card .qm {
  display: none
}

.test-stars {
  color: #F0A500;
  font-size: .82rem;
  margin-bottom: 12px
}

.test-av {
  width: 42px;
  height: 42px;
  border: 0;
  box-shadow: none;
  background: var(--surface-subtle)
}

/* =============================================================
   5. STATS - social proof, now high on the page
   ============================================================= */
.stat-num {
  background: none;
  -webkit-text-fill-color: var(--primary);
  color: var(--primary);
  font-weight: 800;
  letter-spacing: var(--tracking-tighter)
}

.stat-label {
  color: var(--ink-soft);
  font-weight: 600
}

.stats-note {
  color: var(--ink-soft);
  margin-top: 28px
}

/* =============================================================
   6. CONVERSION - earn block and referral ribbon
   ============================================================= */
.app-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)
}

.app-btn:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .04)
}

/* Slim ribbon: heading plus one destination. No full-height accent slab. */
.referral {
  padding-top: 0;
  padding-bottom: var(--section-pad)
}

.refer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 40px 44px;
  border-radius: var(--radius-lg);
  background: var(--brand-ink);
  border: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden
}

.refer-card::before {
  display: none
}

.refer-card h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter);
  color: #fff;
  margin: 0
}

.refer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-ink);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out)
}

.refer-link:hover {
  transform: translateY(-2px);
  color: var(--primary)
}

.refer-link svg {
  flex-shrink: 0
}

/* =============================================================
   7. COVERAGE + MODULE DETAIL
   ============================================================= */
.zone-banner {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)
}

.zone-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong)
}

.zone-img-side {
  background: var(--surface-muted);
  border-right: 1px solid var(--line)
}

.zone-banner:hover .zone-img-side img {
  transform: none
}

.zone-text-side {
  padding: 56px 56px
}

.zone-text-side>p {
  font-size: .97rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 28px
}

.zone-text-side h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  margin-bottom: 12px
}

.zone-tag {
  padding: 9px 20px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)
}

.zone-tag:hover {
  transform: none;
  border-color: var(--primary);
  color: var(--primary)
}

/* Module tabs read as reference material now that they sit near the
   bottom, so they get the quietest treatment on the page. */
.svc-icon-btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)
}

.svc-icon-btn.active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .06);
  box-shadow: none
}

.svc-panel .img-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: none
}

/* =============================================================
   8. APP CTA - the only filled dark surface left
   ============================================================= */
.cta-box {
  padding: 68px 60px;
  border-radius: var(--radius-lg);
  background: var(--brand-ink);
  border: 0;
  box-shadow: none
}

.cta-box::before {
  display: none
}

.cta-info h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 12px
}

.cta-info h2 .hl {
  color: var(--brand-green-light);
  -webkit-text-fill-color: var(--brand-green-light)
}

.cta-user-btn {
  padding: 12px 28px;
  background: #fff;
  color: var(--brand-ink);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease-out)
}

.cta-user-btn:hover {
  transform: translateY(-2px);
  box-shadow: none
}

.cta-app-link {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)
}

.cta-app-link:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .4)
}

/* =============================================================
   9. REVEAL - fade only
   ============================================================= */
[data-reveal] {
  opacity: 0
}

.reveal-ready [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-out)
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion: reduce) {

  [data-reveal],
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transition: none !important
  }
}

/* =============================================================
   10. RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .zone-text-side {
    padding: 44px 40px
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 48px
  }

  .sec-header,
  .earn-top {
    margin-bottom: 40px
  }

  .hero {
    padding: 60px 0 0
  }

  .hero h1::after {
    margin-top: 24px
  }

  .hero-illustration {
    margin-top: 28px
  }

  .zone-text-side {
    padding: 32px 24px
  }

  .refer-card {
    padding: 30px 24px;
    gap: 20px
  }

  .refer-link {
    padding: 11px 22px;
    width: 100%;
    justify-content: center
  }

  .cta-box {
    padding: 40px 28px
  }

  .feat-card,
  .sp-card,
  .test-card,
  .earn-card,
  .stat-card {
    padding: 28px 22px
  }
}
/* =============================================================
   THEME TOGGLE
   ============================================================= */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)
}

.theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary)
}

/* One icon per theme, driven purely by the attribute so no JS is needed to
   keep them in sync after a toggle or an OS-level change. */
.theme-toggle .icon-moon {
  display: none
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block
}

[data-theme="dark"] .theme-toggle:hover {
  color: var(--brand-green-light);
  border-color: var(--brand-green-light)
}

@media (max-width: 768px) {
  .theme-toggle {
    width: 38px;
    height: 38px
  }
}