/* ==========================================================================
   home-cta.css — App Showcase + Final CTA (premium, vibrant, animated)
   Loaded only on the home page.
   ========================================================================== */

/* ---------- Shared motion helpers --------------------------------------- */
@keyframes lpFloatY  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lpFloatX  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes lpSpin    { to { transform: rotate(360deg); } }
@keyframes lpBlobMove{
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px,-30px) scale(1.08); }
  66%     { transform: translate(-25px,15px) scale(.95); }
}
@keyframes lpShine   { from { left: -120%; } to { left: 120%; } }

/* ============================================================
   1. APP SHOWCASE
   ============================================================ */
.app-showcase {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 0;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(201,168,76,.10), transparent 65%),
    radial-gradient(700px 400px at 5% 90%, rgba(30,58,107,.18), transparent 65%),
    linear-gradient(180deg, #f8f9fc 0%, #eef2f9 100%);
  border-radius: 32px;
  margin-inline: clamp(0px, 2vw, 16px);
}

/* Decorative animated blobs */
.app-showcase .blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55;
  pointer-events: none; z-index: 0;
  animation: lpBlobMove 16s ease-in-out infinite;
}
.app-showcase .blob-1 { width: 360px; height: 360px; top: -120px; right: -80px;
  background: radial-gradient(circle, #C9A84C 0%, transparent 70%); }
.app-showcase .blob-2 { width: 320px; height: 320px; bottom: -100px; left: -60px;
  background: radial-gradient(circle, #1E3A6B 0%, transparent 70%);
  animation-delay: -6s; }

/* Subtle dot grid */
.app-showcase::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,29,69,.08) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .35; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.app-showcase > .container { position: relative; z-index: 2; }

/* Eyebrow */
.app-showcase .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
  color: #8a6d20; font-weight: 700; font-size: 12.5px; letter-spacing: .04em;
  border: 1px solid rgba(201,168,76,.30);
}
.app-showcase h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  line-height: 1.15; color: var(--lp-primary); margin: 14px 0 12px;
}
.app-showcase h2 .gradient-word {
  background: linear-gradient(135deg, #C9A84C 0%, #E2C26A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-showcase .lead { color: #4a5568; font-size: 16px; max-width: 560px; }

/* Feature cards grid */
.app-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin: 28px 0;
}
.app-feature {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,27,61,.07);
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.app-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(15,27,61,.25);
  border-color: rgba(201,168,76,.4);
}
.app-feature .ic {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px; color: #fff;
}
.app-feature.f1 .ic { background: linear-gradient(135deg,#3b6fa0,#1e3a6b); }
.app-feature.f2 .ic { background: linear-gradient(135deg,#C9A84C,#E2C26A); color:#2A1F00; }
.app-feature.f3 .ic { background: linear-gradient(135deg,#2dd4a8,#0d9a78); }
.app-feature.f4 .ic { background: linear-gradient(135deg,#e85d3a,#c44569); }
.app-feature h6 { margin: 0 0 2px; font-weight: 700; font-size: 14.5px; color: var(--lp-primary); }
.app-feature p  { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.45; }

/* Stats strip */
.app-stats {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(0,29,69,.92), rgba(30,58,107,.92));
  border-radius: 16px;
  color: #fff; margin-bottom: 22px;
  box-shadow: 0 18px 40px -18px rgba(0,29,69,.5);
}
.app-stat { display: flex; align-items: center; gap: 10px; }
.app-stat .ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(201,168,76,.22); color: #E2C26A;
  display: grid; place-items: center; font-size: 18px;
}
.app-stat strong { display: block; font-size: 15px; font-weight: 800; line-height: 1; }
.app-stat span   { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 3px; }
.app-stat-stars i { color: #FFD24C; font-size: 12px; }

/* Store buttons + QR row */
.app-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.app-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.app-stores .store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 14px;
  background: linear-gradient(135deg, #001D45 0%, #1E3A6B 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px -12px rgba(0,29,69,.55);
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease;
}
.app-stores .store-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0,29,69,.7); color:#fff; }
.app-stores .store-btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.app-stores .store-btn:hover::after { left: 120%; }
.app-stores .store-btn i { font-size: 24px; }
.app-stores .store-btn .store-text small { display: block; font-size: 10px; opacity: .75; line-height: 1; }
.app-stores .store-btn .store-text strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.app-stores .store-btn-ios { background: linear-gradient(135deg, #111 0%, #2a2a2a 100%); }

.app-qr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff; border: 1px solid rgba(15,27,61,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px -14px rgba(15,27,61,.2);
}
.app-qr img { width: 64px; height: 64px; border-radius: 8px; }
.app-qr div { font-size: 12px; color: #475569; line-height: 1.3; }
.app-qr strong { display: block; color: var(--lp-primary); font-size: 13.5px; }

/* ---------- Phone mockups ---------- */
.app-phone-wrap {
  position: relative;
  display: grid; place-items: center;
  padding: 30px 0;
  min-height: 540px;
}
.app-phone-wrap .ring {
  position: absolute; border-radius: 50%; border: 2px dashed rgba(201,168,76,.35);
  animation: lpSpin 40s linear infinite; pointer-events: none;
}
.app-phone-wrap .ring-1 { width: 380px; height: 380px; }
.app-phone-wrap .ring-2 { width: 480px; height: 480px; border-color: rgba(0,29,69,.10); animation-direction: reverse; }

/* iPhone-style mockup */
.phone {
  position: relative;
  width: 260px; height: 530px;
  background: linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 40px 80px -20px rgba(0,29,69,.45), 0 0 0 2px rgba(255,255,255,.06) inset;
  z-index: 2;
}
.phone::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; background: #0a0a0a; border-radius: 999px; z-index: 3;
}
.phone .screen {
  position: relative; height: 100%; border-radius: 32px;
  background: linear-gradient(160deg, #001D45 0%, #1E3A6B 60%, #0A2A5C 100%);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 46px 18px 20px;
}
.phone .s-logo { height: 28px; opacity: .95; margin-bottom: 12px; }
.phone .s-card {
  width: 100%; aspect-ratio: 1.6/1; border-radius: 14px;
  background: linear-gradient(135deg, #C9A84C 0%, #E2C26A 60%, #8a6d20 100%);
  position: relative; padding: 14px;
  box-shadow: 0 14px 30px -10px rgba(201,168,76,.5);
  color: #2A1F00; font-size: 11px; font-weight: 700;
}
.phone .s-card::after {
  content: ""; position: absolute; top: 38px; left: 16px;
  width: 32px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, #efe3b8, #c9a84c);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
.phone .s-card .no { position: absolute; bottom: 28px; left: 16px; letter-spacing: .12em; font-size: 11.5px; }
.phone .s-card .nm { position: absolute; bottom: 12px; left: 16px; font-size: 10px; opacity: .8; }
.phone .s-card .tier { position: absolute; top: 12px; right: 14px; font-size: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.18); color: #fff; }

.phone .s-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; width: 100%; margin-top: 14px; }
.phone .s-tile { aspect-ratio: 1/1; border-radius: 12px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
  display: grid; place-items: center; color: #E2C26A; font-size: 18px; }
.phone .s-list { width: 100%; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.phone .s-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.06); border-radius: 10px;
  font-size: 10.5px; color: rgba(255,255,255,.88);
}
.phone .s-row .dot { width: 8px; height: 8px; border-radius: 50%; background: #2dd4a8; }
.phone .s-bottom { margin-top: auto; width: 100%; display: flex; justify-content: space-around;
  padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.6); }
.phone .s-bottom i { font-size: 18px; }
.phone .s-bottom i.is-active { color: #E2C26A; }

/* Second (back) phone */
.phone.phone-back {
  position: absolute;
  width: 210px; height: 430px;
  right: 12%; bottom: 8%;
  transform: rotate(8deg);
  opacity: .92; z-index: 1;
  animation: lpFloatY 6s ease-in-out infinite;
}
.phone.phone-back .screen {
  background: linear-gradient(160deg, #C9A84C 0%, #8a6d20 100%);
  padding: 38px 14px 14px;
}
.phone.phone-back .screen h6 { color: #2A1F00; font-weight: 800; font-size: 14px; margin: 4px 0; }
.phone.phone-back .offer {
  width: 100%; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.15);
  color: #fff; font-size: 10.5px; display: flex; justify-content: space-between; margin-top: 6px;
}
.phone.phone-back .offer strong { color: #fff; }

.phone-main { animation: lpFloatY 7s ease-in-out infinite; }

/* Floating chips around mockups */
.float-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 36px -14px rgba(15,27,61,.3);
  border: 1px solid rgba(15,27,61,.06);
  font-size: 13px; font-weight: 700; color: var(--lp-primary);
  white-space: nowrap;
}
.float-chip i { font-size: 18px; }
.float-chip.fc-1 { top: 12%; left: -8%; animation: lpFloatY 5s ease-in-out infinite; }
.float-chip.fc-1 i { color: #2dd4a8; }
.float-chip.fc-2 { top: 38%; right: -6%; animation: lpFloatX 6s ease-in-out infinite; }
.float-chip.fc-2 i { color: #C9A84C; }
.float-chip.fc-3 { bottom: 14%; left: -2%; animation: lpFloatY 7s ease-in-out infinite; animation-delay: -2s; }
.float-chip.fc-3 i { color: #e85d3a; }

/* Responsive */
@media (max-width: 991.98px) {
  .app-features { grid-template-columns: 1fr; }
  .app-phone-wrap { min-height: 460px; margin-top: 10px; }
  .phone { width: 230px; height: 470px; }
  .phone.phone-back { display: none; }
  .app-phone-wrap .ring-1 { width: 320px; height: 320px; }
  .app-phone-wrap .ring-2 { width: 420px; height: 420px; }
  .float-chip.fc-1 { left: 2%; }
  .float-chip.fc-2 { right: 2%; }
}
@media (max-width: 575.98px) {
  .app-showcase { border-radius: 22px; }
  .app-stats { gap: 14px; padding: 14px; }
  .app-stat strong { font-size: 14px; }
  .app-qr { width: 100%; }
  .phone { width: 210px; height: 430px; }
  .app-phone-wrap { min-height: 420px; }
  .float-chip { font-size: 11.5px; padding: 8px 10px; }
}

/* ============================================================
   2. FINAL CTA SECTION
   ============================================================ */
.cta-pro {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 120px) 0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(201,168,76,.30), transparent 60%),
    radial-gradient(900px 600px at 90% 100%, rgba(59,111,160,.40), transparent 60%),
    linear-gradient(135deg, #001533 0%, #001D45 50%, #0A2A5C 100%);
  color: #fff;
  border-radius: 32px;
  margin-inline: clamp(0px, 2vw, 16px);
  margin-top: 60px;
}

/* Animated background grid */
.cta-pro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.cta-pro .cta-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
  animation: lpBlobMove 18s ease-in-out infinite;
}
.cta-pro .cta-orb-1 { width: 380px; height: 380px; top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(201,168,76,.55) 0%, transparent 70%); }
.cta-pro .cta-orb-2 { width: 360px; height: 360px; bottom: -120px; left: -60px;
  background: radial-gradient(circle, rgba(45,212,168,.35) 0%, transparent 70%);
  animation-delay: -7s; }

.cta-pro > .container { position: relative; z-index: 2; text-align: center; }

.cta-pro .cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(201,168,76,.4);
  color: #E2C26A; font-weight: 700; font-size: 12.5px; letter-spacing: .05em;
  margin-bottom: 18px;
}
.cta-pro .cta-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #E2C26A;
  box-shadow: 0 0 0 0 rgba(226,194,106,.6); animation: lpPulse 1.8s ease-out infinite;
}
@keyframes lpPulse {
  0% { box-shadow: 0 0 0 0 rgba(226,194,106,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(226,194,106,0); }
  100%{ box-shadow: 0 0 0 0 rgba(226,194,106,0); }
}

.cta-pro h2 {
  font-size: clamp(30px, 5vw, 56px); font-weight: 900;
  line-height: 1.1; margin: 0 auto 16px; max-width: 820px;
  letter-spacing: -.01em;
}
.cta-pro h2 .grad {
  background: linear-gradient(135deg, #F5D27A 0%, #E2C26A 45%, #C9A84C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 2px 18px rgba(201,168,76,.35);
  padding: 0 .15em;
  font-family: var(--lp-font-display);
}
.cta-pro h2 { color: #fff; }
.cta-pro .cta-sub {
  font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,.78);
  max-width: 640px; margin: 0 auto 32px; line-height: 1.6;
}

/* Buttons */
.cta-actions {
  display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-bottom: 36px;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease, filter .25s ease;
}
.cta-btn-primary {
  background: linear-gradient(135deg, #C9A84C 0%, #E2C26A 100%);
  color: #2A1F00;
  box-shadow: 0 16px 36px -14px rgba(201,168,76,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.cta-btn-primary:hover { transform: translateY(-3px); filter: brightness(1.06);
  box-shadow: 0 22px 46px -16px rgba(201,168,76,.85); color:#2A1F00; }
.cta-btn-ghost {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  backdrop-filter: blur(8px);
}
.cta-btn-ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-3px); color:#fff; }
.cta-btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.cta-btn:hover::after { left: 120%; }

/* Trust badges */
.cta-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: 900px; margin: 0 auto;
}
.cta-trust-item {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500;
}
.cta-trust-item .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(201,168,76,.16); color: #E2C26A;
  display: grid; place-items: center; font-size: 18px;
}
.cta-trust-item strong { display: block; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; }
.cta-trust-item span   { display: block; font-size: 11.5px; opacity: .7; margin-top: 3px; }

/* Responsive */
@media (max-width: 575.98px) {
  .cta-pro { border-radius: 22px; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .cta-btn { width: 100%; justify-content: center; }
  .cta-trust { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-showcase .blob, .phone-main, .phone.phone-back,
  .float-chip, .app-phone-wrap .ring, .cta-pro .cta-orb,
  .cta-pro .cta-eyebrow .dot { animation: none !important; }
}