/* ==========================================================================
   GeckoScan — marketing landing ("showcase") styles.
   Loads AFTER style.css + jive.css and only ADDS classes (mhero, receipts,
   flow, fan, feat-strip, cta-dark, reveal…) — nothing here restyles the
   builder, modal, header or footer, which stay on the Jive skin.
   The builder itself lives on its own page: /build.
   ========================================================================== */

/* ---- reveal-on-scroll (staggered via --d) -------------------------------- */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .7s ease var(--d,0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* ---- marketing hero: copy left, street illustration right ---------------- */
.mhero{ padding:64px 0 40px; overflow:hidden; }
.mhero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.m-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:6px 14px; margin-bottom:22px; }
.m-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--j-green); animation:gs-blink 2.6s ease-in-out infinite; }
@keyframes gs-blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.mhero h1{ font-size:clamp(2.5rem,5.2vw,3.9rem); line-height:1.05; letter-spacing:-.03em; }
.mhero h1 .hl{ position:relative; white-space:nowrap; z-index:0; }
.mhero h1 .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:.28em; z-index:-1;
  background:var(--j-teal); border-radius:4px; transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) .5s; }
.reveal.in h1 .hl::after{ transform:scaleX(1); }
.mhero-sub{ margin-top:22px; max-width:46ch; color:var(--ink-soft); font-size:1.13rem; }
.mhero-sub b{ color:var(--ink); }
.mhero-cta{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.mhero-trust{ margin-top:18px; color:var(--ink-faint); font-size:.93rem; font-weight:500; }

.mhero-visual{ position:relative; }
.mhero-card{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid var(--line-soft); background:#fff; }
.mhero-card img{ width:100%; height:auto; display:block; }

/* floating map pins around the illustration */
.float-pin{ position:absolute; width:44px; height:auto; filter:drop-shadow(0 6px 12px rgba(24,24,24,.18));
  animation:gs-floaty 5s ease-in-out infinite; }
.float-pin.p1{ top:-18px; left:12%; animation-delay:.2s; }
.float-pin.p2{ top:26%; right:-16px; width:36px; animation-delay:1.4s; animation-duration:6s; }
.float-pin.p3{ bottom:14%; left:-18px; width:32px; animation-delay:2.2s; animation-duration:5.5s; }
@keyframes gs-floaty{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-10px) rotate(3deg);} }

/* cycling "new scan" toast over the hero illustration */
.scan-toast{ position:absolute; left:16px; bottom:18px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 16px 10px 12px;
  box-shadow:var(--shadow-lg); font-size:.9rem; font-weight:600;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.scan-toast.show{ opacity:1; transform:none; }
.scan-toast .tic{ width:30px; height:30px; border-radius:50%; background:var(--j-green); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:.95rem; }
.scan-toast small{ display:block; font-weight:400; color:var(--ink-soft); }

/* ---- "why it exists": copy + per-poster receipts -------------------------- */
.band-tint{ background:linear-gradient(180deg,#fff,#f4fbfd 30%,#f4fbfd 70%,#fff); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.why-grid h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.12; }
.why-grid .prob{ margin-top:20px; color:var(--ink-soft); font-size:1.07rem; }
.why-grid .fix{ margin-top:16px; font-size:1.07rem; }
.why-grid .fix b{ background:linear-gradient(transparent 62%, var(--j-yellow) 62%, var(--j-yellow) 92%, transparent 92%); }

.receipts{ display:flex; flex-direction:column; gap:14px; }
.receipt{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); }
.receipt .num{ flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:1.05rem; color:var(--ink); }
.receipt.r1 .num{ background:var(--j-yellow); }
.receipt.r2 .num{ background:var(--j-teal); }
.receipt.r3 .num{ background:var(--j-pink); }
.receipt .meta{ line-height:1.3; }
.receipt .meta b{ font-size:1.02rem; }
.receipt .meta span{ display:block; color:var(--ink-soft); font-size:.9rem; margin-top:2px; }
.receipt .count{ margin-left:auto; text-align:right; font-weight:700; font-size:1.15rem; }
.receipt .count small{ display:block; font-weight:400; color:var(--ink-faint); font-size:.75rem; letter-spacing:.02em; }
.receipt.r3 .count{ color:var(--j-red); }

/* ---- how it works: three visual cards (distinct from jive's plain .steps) - */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px; }
.flow-step{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 28px 34px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:left; }
.flow-no{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.flow-step h3{ font-size:1.3rem; margin:0; }
.flow-step p{ margin-top:12px; color:var(--ink-soft); font-size:.98rem; }
.flow-step p b{ color:var(--ink); }
.flow-visual{ margin-top:26px; display:flex; align-items:flex-end; justify-content:center; min-height:240px; }
.flow-visual > picture, .flow-visual > picture img{ width:min(100%,230px); height:auto; display:block; }
.flow-visual .drift{ animation:gs-floaty 6s ease-in-out infinite; }
.flow-visual .drift.slow{ animation-duration:7s; animation-delay:1s; }

/* the poster fan — three mini posters, each with its own QR + number badge */
.fan{ position:relative; width:230px; height:250px; }
.mini-poster{ position:absolute; left:50%; top:12px; width:132px; padding:12px 12px 10px; background:#fff;
  border:2.5px solid var(--ink); border-radius:10px; box-shadow:0 10px 24px rgba(24,24,24,.12);
  transform:translateX(-50%) rotate(0deg); transform-origin:50% 115%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.mini-poster .squig{ height:16px; border-radius:8px; margin-bottom:10px; }
.mini-poster.m1 .squig{ background:var(--j-yellow); }
.mini-poster.m2 .squig{ background:var(--j-green); }
.mini-poster.m3 .squig{ background:var(--j-pink); }
.mini-poster svg{ width:100%; height:auto; display:block; }
.mini-poster .lines{ margin-top:9px; }
.mini-poster .lines i{ display:block; height:5px; border-radius:3px; background:var(--line); }
.mini-poster .lines i + i{ margin-top:5px; width:62%; }
.mini-badge{ position:absolute; top:-12px; right:-12px; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.8rem; font-weight:700; font-style:normal;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.reveal.in .mini-poster.m1{ transform:translateX(-50%) rotate(-14deg) translateX(-38px); }
.reveal.in .mini-poster.m3{ transform:translateX(-50%) rotate(14deg) translateX(38px); }
.reveal.in .mini-poster.m2{ transform:translateX(-50%) translateY(-10px); }
.fan-note{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:.8rem; font-weight:600; color:var(--ink-soft);
  background:var(--paper-deep); padding:4px 12px; border-radius:999px; }

/* ---- feature strip -------------------------------------------------------- */
.feat-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.feat{ display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--ink); border-radius:999px;
  padding:10px 18px; font-weight:600; font-size:.95rem; background:#fff; color:var(--ink); }
.feat .ic{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; color:var(--ink); font-size:.8rem; flex:none; }
.feat.f1 .ic{ background:var(--j-yellow); }
.feat.f2 .ic{ background:var(--j-teal); }
.feat.f3 .ic{ background:var(--j-green); color:#fff; }
.feat.f4 .ic{ background:var(--j-pink); }
.feat.f5 .ic{ background:var(--j-purple); color:#fff; }

/* ---- closing CTA: dark card with drifting blobs --------------------------- */
.cta-dark{ background:var(--ink); color:#fff; border-radius:28px; padding:64px 40px; text-align:center;
  position:relative; overflow:hidden; }
.cta-dark h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); color:#fff; }
.cta-dark p{ margin:16px auto 0; max-width:52ch; color:rgba(255,255,255,.72); font-size:1.06rem; }
.cta-dark .btn{ margin-top:30px; background:#fff; color:var(--ink); border-color:#fff; }
.cta-dark .btn:hover{ background:var(--j-teal); border-color:var(--j-teal); color:var(--ink); }
.cta-blob{ position:absolute; border-radius:50%; opacity:.16; pointer-events:none; }
.cta-blob.b1{ width:340px; height:340px; background:var(--j-teal); top:-160px; left:-120px;
  animation:gs-floaty 9s ease-in-out infinite; }
.cta-blob.b2{ width:280px; height:280px; background:var(--j-red); bottom:-140px; right:-90px;
  animation:gs-floaty 11s ease-in-out infinite reverse; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .mhero{ padding-top:40px; }
  .mhero .wrap{ grid-template-columns:1fr; gap:44px; }
  .mhero-visual{ max-width:440px; margin:0 auto; }
  .why-grid{ grid-template-columns:1fr; gap:40px; }
  .flow{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
}

/* ---- reduced motion: reveal instantly, everything stays put ---------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .mini-poster{ transition:none; }
  .mhero h1 .hl::after{ transition:none; transform:scaleX(1); }
  .scan-toast{ transition:none; }
}