/* =========================
   Mobile Apps Page Styling
========================= */

.app-hero{
  position:relative;
  padding:96px 0 60px;
  overflow:hidden;
}
.app-bg{ position:absolute; inset:0; pointer-events:none }
.app-grid{
  position:absolute; inset:0;
  opacity:.06;
  background:
    linear-gradient(to right, rgba(108,99,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,102,194,.35) 1px, transparent 1px);
  background-size: 48px 48px;
}
.app-orb{
  position:absolute;
  width:500px; height:500px;
  filter:blur(90px);
  opacity:.35;
  border-radius:999px;
}
.app-orb.orb-1{
  right:-160px; top:-140px;
  background:radial-gradient(closest-side,var(--brand),transparent 70%);
}
.app-orb.orb-2{
  left:-180px; bottom:-180px;
  background:radial-gradient(closest-side,var(--brand-2),transparent 70%);
}

.app-hero__wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
}
@media (max-width:991px){
  .app-hero__wrap{ grid-template-columns:1fr }
}

.svc-back{
  display:inline-flex;
  gap:6px;
  font-weight:800;
  text-decoration:none;
  margin-bottom:14px;
}

.app-pill{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  background:rgba(108,99,255,.12);
  margin-bottom:14px;
}

.app-title{
  font-size:clamp(2.1rem,3.8vw,3.3rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
}
.app-sub{
  color:var(--muted);
  max-width:54ch;
  margin-top:12px;
}

.app-cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }

.app-proof{
  margin-top:20px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.app-proof__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);
  font-weight:800;
}
[data-theme="dark"] .app-proof__item{
  background:rgba(255,255,255,.04);
  border:var(--border);
}

/* SIDE PANEL */
.app-panel{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .app-panel{
  background:rgba(255,255,255,.04);
  border:var(--border);
}

.app-panel__bar{
  margin-top:16px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* STACK */
.app-stack{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* DELIVERABLE CARDS */
.app-card{
  padding:22px;
  border-radius:20px;
  text-align:center;
}
.app-card i{
  font-size:2rem;
  color:var(--brand);
  margin-bottom:10px;
}