.showcase-page{
  background:#f7f8fb;
  color:#0d0f1a;
  padding-bottom:4rem;
}
.showcase-page .container{ width:min(1200px, 94vw); }

.showcase-hero{
  position:relative;
  overflow:hidden;
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: radial-gradient(1200px 520px at 12% -6%, rgba(255,90,90,.25), transparent 60%),
              radial-gradient(900px 420px at 90% -10%, rgba(255,174,174,.3), transparent 70%),
              linear-gradient(180deg, #fff6f6 0%, #ffffff 55%);
}
.showcase-hero::after{
  content:"";
  position:absolute; inset:6% 50% auto -10%;
  background: radial-gradient(420px 240px at 50% 50%, rgba(255,90,90,.18), transparent 60%);
  opacity:.9;
  transform: rotate(-6deg);
}
.hero-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:clamp(1.2rem, 2.4vw, 2.6rem); align-items:center; position:relative; z-index:2; }
.hero-copy h1{ font-size: clamp(2.4rem, 2.2rem + 1.2vw, 3.2rem); line-height:1.1; margin:.3rem 0 .6rem; }
.hero-copy .lede{ font-size:1.05rem; color:#30333c; margin:0 0 1rem; max-width:34rem; }
.eyebrow{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#ff5a5a; font-weight:800; margin:0 0 .45rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin:1.2rem 0 1.8rem; }
.hero-ctas .btn.primary{ background:#ff5a5a; border-color:#ff5a5a; color:#fff; box-shadow:0 12px 35px rgba(255,90,90,.35); }
.download-block{ background:#fff; border:1px solid #e8ecf2; border-radius:16px; padding:.8rem; box-shadow:0 12px 36px rgba(13,15,26,.08); }
.muted-label{ display:block; font-weight:700; color:#6b7280; font-size:.85rem; letter-spacing:.02em; margin-bottom:.35rem; }
.download-row{ display:flex; align-items:center; gap:.85rem; }
.download-row .qr{ width:96px; height:auto; border-radius:12px; border:1px solid #eef1f5; box-shadow:0 8px 18px rgba(0,0,0,.06); }
.store-badges{ display:grid; gap:.4rem; }
.store-badges img{ height:44px; width:auto; display:block; }

.publisher-logos{ margin-top:1.6rem; }
.publisher-logos .logo-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; align-items:center; }
.publisher-logos img{ width:100%; max-height:54px; object-fit:contain; filter:grayscale(1); opacity:.8; transition:opacity .2s ease, filter .2s ease; }
.publisher-logos img:hover{ filter:none; opacity:1; }

.hero-visual{ display:flex; justify-content:flex-end; }
.phone-stack{ position:relative; width:min(520px, 90vw); aspect-ratio:1/1; }
.phone-img{ position:absolute; width:50%; border-radius:28px; box-shadow:0 20px 70px rgba(14,20,35,.3); border:10px solid #fff; background:#fff; }
.phone-img.main{ left:12%; top:12%; width:56%; z-index:3; }
.phone-img.secondary{ right:4%; top:8%; width:52%; z-index:2; transform: rotate(6deg); }
.phone-img.overlay{ left:36%; bottom:6%; width:48%; z-index:4; transform: rotate(-4deg); }
.card-chip{ position:absolute; border-radius:20px; box-shadow:0 12px 30px rgba(0,0,0,.2); border:6px solid #fff; background:#fff; }
.chip-la{ top:28%; right:6%; width:32%; z-index:5; transform: rotate(-5deg); }
.chip-tech{ bottom:12%; left:-2%; width:34%; z-index:5; transform: rotate(-2deg); }
.chip-card{ bottom:4%; right:10%; width:30%; z-index:6; }
.stat-badge{ position:absolute; top:8%; left:-2%; background:#111827; color:#fff; padding:.65rem 1rem; border-radius:14px; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.25); z-index:6; }

.showcase-section{ padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.showcase-section .split{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:clamp(1rem, 2.4vw, 2.6rem); align-items:center; }
.showcase-section h2{ font-size: clamp(1.8rem, 1.6rem + 1vw, 2.5rem); margin:.25rem 0 .5rem; line-height:1.25; }
.showcase-section p{ margin:0 0 .9rem; color:#2a2d35; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{ display:inline-flex; align-items:center; gap:.25rem; padding:.5rem .8rem; border-radius:30px; background:#fff; border:1px solid #e6e9ee; font-weight:700; color:#1f2430; box-shadow:0 8px 18px rgba(0,0,0,.05); }
.pill.muted{ background:#111827; color:#e5e7ef; border-color:#111827; box-shadow:0 10px 30px rgba(17,24,39,.35); }

.visual.card-stack{ position:relative; min-height:360px; }
.visual.card-stack img{ border-radius:24px; box-shadow:0 18px 55px rgba(10,16,30,.28); border:8px solid #fff; background:#fff; }
.visual.card-stack .card-large{ width:78%; position:absolute; left:8%; top:6%; }
.visual.card-stack .card-small{ width:46%; position:absolute; right:4%; bottom:8%; transform: rotate(6deg); }

.voices{ background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.voices .framed{ background:#fff; border-radius:22px; padding:1rem; border:1px solid #e5e9ef; box-shadow:0 16px 36px rgba(0,0,0,.08); }
.voices img{ border-radius:16px; }

.map{ background: radial-gradient(800px 360px at 15% 10%, rgba(255,90,90,.08), transparent 60%), #fff; }
.map-visual{ position:relative; }
.map-img{ width:100%; border-radius:20px; box-shadow:0 18px 60px rgba(0,0,0,.08); }
.bubble{ position:absolute; background:#fff; border:1px solid #e5e9ef; box-shadow:0 10px 28px rgba(0,0,0,.12); padding:.65rem .9rem; border-radius:14px; font-weight:700; max-width:220px; color:#111827; }
.bubble-left{ top:14%; left:6%; }
.bubble-right{ top:22%; right:4%; }
.bubble-bottom{ bottom:8%; right:22%; }

.alerts{ background: linear-gradient(180deg, #0f141e 0%, #0b1019 100%); color:#e5e7ef; border-radius:24px; margin:2rem auto; }
.alerts .copy p{ color:#cbd3df; }
.alerts .pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#f2f4ff; box-shadow:none; }
.alerts .split{ align-items:center; }
.bell{ position:relative; display:flex; align-items:center; justify-content:center; min-height:220px; }
.bell img{ width:80px; z-index:2; }
.rings{ position:absolute; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
.ring{ position:absolute; border-radius:50%; border:2px solid rgba(255,90,90,.45); }
.ring.layer-1{ width:120px; height:120px; }
.ring.layer-2{ width:160px; height:160px; border-color:rgba(255,90,90,.25); }
.ring.layer-3{ width:210px; height:210px; border-color:rgba(255,90,90,.15); }

.tech{ background: linear-gradient(135deg, #fff1f1 0%, #ffe0e0 40%, #fff 80%); border-radius:24px; }
.badge-card{ background:#111827; color:#e8ecf6; border-radius:18px; padding:1.6rem; box-shadow:0 18px 38px rgba(0,0,0,.25); border:1px solid #1f2937; }
.badge-card h3{ margin:.2rem 0 .4rem; font-size:1.4rem; }
.badge-card p{ color:#cfd6e6; }

.final-cta{ padding-bottom:4rem; }
.cta-card{ background:linear-gradient(135deg, #0f141e 0%, #141b29 100%); color:#f6f8ff; border-radius:20px; padding:1.8rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; box-shadow:0 16px 40px rgba(0,0,0,.3); flex-wrap:wrap; }
.cta-card .btn.primary{ background:#ff5a5a; border-color:#ff5a5a; color:#fff; }
.cta-card .btn.ghost{ background:transparent; border-color:#2f3a4c; color:#e3e8f5; }
.cta-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

@media (max-width: 980px){
  .hero-grid,.showcase-section .split{ grid-template-columns:1fr; }
  .hero-visual{ justify-content:center; }
  .phone-stack{ margin:1.5rem auto 0; }
  .publisher-logos .logo-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .visual.card-stack{ min-height:320px; margin-top:1rem; }
  .bubble-left,.bubble-right,.bubble-bottom{ position:static; margin-top:.6rem; display:inline-block; }
  .map-visual{ text-align:center; }
  .alerts,.tech{ border-radius:18px; }
}

@media (max-width: 640px){
  .hero-copy h1{ font-size:2rem; }
  .hero-copy .lede{ font-size:.98rem; }
  .stat-badge{ top:4%; left:0; }
  .download-row{ flex-direction:column; align-items:flex-start; }
  .store-badges img{ height:40px; }
  .phone-img{ border-width:8px; }
  .cta-card{ padding:1.4rem; }
  .pill{ font-size:.95rem; }
}