/* marketing.css - marketing-focused UI & animations for landing page */

/* HERO enhancements */
.marketing-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 64px;
  background: linear-gradient(180deg, rgba(232,39,42,0.03), rgba(255,145,77,0.01));
}

/* subtle floating decorative shapes */
.hero-bg-decor { position:absolute; inset:0; pointer-events:none; z-index:0; }
.float-shape { position:absolute; border-radius:16px; opacity:0.08; filter:blur(18px); }
.float-shape.s1 { width:360px; height:260px; right:-60px; top:10%; background:linear-gradient(90deg,var(--brand-grad-start),var(--brand-grad-end)); animation:floaty 8s ease-in-out infinite; }
.float-shape.s2 { width:220px; height:160px; left:-40px; top:30%; background:#ffd7cf; animation:floaty 10s ease-in-out .6s infinite; }
.float-shape.s3 { width:160px; height:110px; left:20%; bottom:-30px; background:rgba(232,39,42,0.06); animation:floaty 12s ease-in-out .9s infinite; }

@keyframes floaty { 0% { transform:translateY(0) } 50% { transform:translateY(-18px) } 100% { transform:translateY(0) } }

/* hero copy layering */
.hero-grid { position: relative; z-index: 2; display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center; }
.hero-copy { max-width:780px; }

/* accent style for heading */
.hero-copy h1 { font-family:'Poppins',sans-serif; font-size:44px; line-height:1.02; margin-bottom:12px; }
.hero-copy .accent { color:var(--brand-red); }

/* CTA pulse */
.cta-pulse { animation:ctaPulse 2.8s infinite; box-shadow: 0 10px 34px rgba(232,39,42,0.12); }
@keyframes ctaPulse { 0%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } 100%{ transform:translateY(0) } }

/* trusted logos area */
.trusted-row { display:flex; align-items:center; gap:12px; margin-top:14px; }
.trusted-label { color:var(--muted); font-weight:600; margin-right:6px; }
.trusted-logos { display:flex; gap:10px; align-items:center; }
.trusted-logo { height:28px; opacity:0.95; filter:grayscale(0.02); transition:transform .18s ease; }
.trusted-logo:hover { transform:translateY(-3px); }

/* region chips */
.regions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.region-chip { background:#fff; border-radius:999px; padding:8px 12px; font-weight:600; color:#0b1220; display:inline-flex; gap:8px; align-items:center; box-shadow:var(--card-shadow); }
.region-chip .flag { width:18px; height:12px; object-fit:cover; border-radius:2px; }

/* stats */
.hero-stats { display:flex; gap:18px; margin-top:18px; align-items:center; }
.stat { background:rgba(255,255,255,0.96); padding:10px 14px; border-radius:10px; box-shadow:var(--card-shadow); min-width:120px; text-align:left; }
.stat-number { font-weight:800; font-size:1.05rem; color:#0b1220; }
.stat-label { color:var(--muted); font-size:0.88rem; margin-top:4px; }

/* reveal-on-scroll animation */
.reveal-on-scroll { opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.in { opacity:1; transform:translateY(0); }

/* stagger-in utility (for text blocks) */
.stagger-in { opacity:0; transform:translateY(6px); transition:opacity .5s ease var(--delay,0ms), transform .5s ease var(--delay,0ms); }
.stagger-in.in { opacity:1; transform:translateY(0); }

/* small helper to read data-delay -> css variable */
.stagger-in[data-delay] { --delay: attr(data-delay number ms); } /* fallback; attr() numeric not supported widely but JS reveal used */

/* cards animation */
.marketing-cards .card { transition: transform .20s ease, box-shadow .20s ease; will-change: transform; }
.marketing-cards .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(11,17,32,0.10); }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .float-shape, .cta-pulse, .stat-number { animation: none !important; transition: none !important; }
  .reveal-on-scroll, .stagger-in { transition: none !important; opacity:1 !important; transform:none !important; }
}

/* responsive tweaks */
@media (max-width:880px) {
  .hero-grid { grid-template-columns:1fr; padding:18px 0; }
  .hero-copy h1 { font-size:30px; }
  .hero-card { margin-top:18px; }
  .hero-stats { flex-direction:column; gap:10px; }
}