/* ---------- App hero with phone mockup ---------- */
.app-hero{
  position:relative;min-height:100vh;display:grid;place-items:center;color:var(--ink);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(139, 92, 246, 0.08), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(59, 130, 246, 0.08), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.app-hero .hero-overlay{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.05), transparent 60%);z-index:-1}
.app-hero .hero-content{padding:8rem 1rem 4rem;position:relative;z-index:1;width:100%}
.app-hero h1 { color: #0f172a !important; text-shadow: 0 0 1px rgba(0,0,0,0.05); }
.app-hero .lead { color: #475569 !important; font-weight: 500; }
.text-primary-gradient { 
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 10px 20px rgba(124, 58, 237, 0.1);
}

/* Store badges */
.store-btn{
  display:inline-flex;align-items:center;gap:.7rem;padding:.7rem 1.2rem;
  border-radius:14px;background:#0f172a;color:#fff;text-decoration:none;
  border:1px solid rgba(0,0,0,.05);transition:transform .2s ease, box-shadow .2s ease;
  min-width:200px;
}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15, 23, 42, 0.15);color:#fff}
.store-btn i{font-size:1.8rem;line-height:1}
.store-btn span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store-btn small{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.store-btn strong{font-size:1.05rem;font-weight:600}
.store-btn-apk{background:var(--grad);border:0}
.store-btn-light{background:#fff;color:#0f172a;border:1px solid var(--line)}
.store-btn-light:hover{color:#0f172a;background:#f8fafc}

/* ---------- Phone mockup ---------- */
.phone-wrap{position:relative;display:inline-block;perspective:1200px}
.phone-glow{position:absolute;inset:-40px;background:radial-gradient(circle,rgba(139, 92, 246, 0.15),transparent 60%);filter:blur(40px);z-index:-1}
.phone{
  width:260px;height:540px;border-radius:42px;
  background:linear-gradient(180deg,#e2e8f0,#cbd5e1);
  padding:10px;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.1),inset 0 0 0 2px rgba(255,255,255,0.8);
}
.phone-screen{
  width:100%;height:100%;border-radius:32px;
  background:#f1f5f9 center/cover no-repeat;
  transition:background-image 1s ease;
  background-image: url('../img/hero_1.png'); /* Initial local fallback */
}
#phoneBg2 { background-image: url('../img/hero_2.png'); }
.phone-front{transform:rotateY(-8deg) rotateX(4deg);animation:floatY 6s ease-in-out infinite}
.phone-back{
  position:absolute;left:-90px;top:30px;transform:rotateY(14deg) scale(.85);opacity:.6;z-index:-1;
  animation:floatY 6s ease-in-out infinite reverse;
}
.phone-notch{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:110px;height:24px;background:#1e293b;border-radius:14px;z-index:2;
}
@keyframes floatY{0%,100%{transform:rotateY(-8deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-8deg) rotateX(4deg) translateY(-12px)}}
@media (max-width:991px){.phone-back{display:none}.phone{width:220px;height:460px}}

/* ---------- About tiles ---------- */
.about-tile{
  padding:2rem;border-radius:24px;background:#fff;border:1px solid var(--line);height:100%;
  opacity:0;transform:translateY(14px);transition:.5s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.about-tile.in{opacity:1;transform:none}
.about-tile i{font-size:1.8rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:.8rem}
.about-tile h6{font-weight:800;margin-bottom:.5rem;color:var(--ink)}

/* ---------- Screenshots ---------- */
.screens-row{
  display:flex;gap:20px;overflow-x:auto;padding:1rem .25rem 2rem;scroll-snap-type:x mandatory;
}
.screens-row::-webkit-scrollbar{height:6px}
.screens-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.screen-card{
  flex:0 0 240px;height:480px;border-radius:28px;overflow:hidden;
  background:#f1f5f9;box-shadow:0 15px 35px rgba(0,0,0,0.08);scroll-snap-align:center;
  opacity:0;transform:translateY(20px);transition:.6s ease;
}
.screen-card.in{opacity:1;transform:none}
.screen-card img{width:100%;height:100%;object-fit:cover;display:block}
.screen-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(0,0,0,0.12)}
.screen-0{transform:translateY(20px) rotate(-3deg)}
.screen-2{transform:translateY(20px) rotate(3deg)}
.screen-4{transform:translateY(20px) rotate(-2deg)}

@media (max-width:991px){
  .app-hero .hero-content{padding-top:6rem}
}

/* ---------- Missing classes for app.php ---------- */

.nav-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: all 0.3s ease;
}
.nav-glass.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.nav-glass .nav-link {
  color: var(--muted) !important;
  font-weight: 600;
  transition: color 0.2s;
}
.nav-glass .nav-link:hover, .nav-glass .nav-link.active {
  color: var(--violet) !important;
}
.nav-glass .navbar-brand { color: var(--ink) !important; }
.nav-glass .navbar-toggler { color: var(--ink) !important; filter: invert(0); }

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.2);
}
.logo-mark.sm { width: 32px; height: 32px; font-size: 1rem; border-radius: 8px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: var(--grad-soft);
  color: var(--violet);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.btn-glow {
  background: var(--grad);
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
  font-weight: 700;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.45);
  filter: brightness(1.05);
}

.hero-stats {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.hero-stats span { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.py-6 { padding: 6rem 0; }
.bg-soft { background: var(--soft); }

.section-head { text-align: center; margin-bottom: 4.5rem; opacity: 0; transform: translateY(20px); transition: 0.6s ease; }
.section-head.in { opacity: 1; transform: none; }
.section-head h6 { color: var(--violet); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; }
.section-head h2 { font-weight: 800; color: var(--ink); font-size: 2.5rem; }

.feat-card {
  padding: 3rem 2.5rem;
  background: #fff;
  border-radius: 28px;
  border: 1px solid var(--line);
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px);
}
.feat-card.in { opacity: 1; transform: none; }
.feat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
  border-color: var(--violet);
}
.feat-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--grad-soft);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 1.8rem;
}
.feat-card h5 { font-weight: 800; margin-bottom: 1rem; color: var(--ink); }
.feat-card p { color: var(--muted); line-height: 1.7; }

.cta-section { position: relative; padding: 4rem 0 8rem; }
.cta-card {
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f5f3ff 100%);
  border-radius: 40px;
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--line);
  text-align: center;
}
.cta-card h2 { color: var(--ink); font-weight: 800; font-size: 3rem; }
.cta-card p { color: var(--muted)!important; font-weight: 500; font-size: 1.2rem; }
.cta-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 15%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
}


.screens-row {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 1rem 0 4rem;
  margin-top: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.screens-row::-webkit-scrollbar { display: none; }

.screen-card {
  flex: 0 0 auto;
  width: 280px;
  aspect-ratio: 9/19.5;
  background: var(--ink);
  border-radius: 40px;
  border: 10px solid #000;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
  scroll-snap-align: center;
  transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}
.screen-card.in {
  opacity: 1;
  transform: none;
}
.screen-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.screen-card:hover img {
  transform: scale(1.05);
}

.screen-0 { transition-delay: 0.1s; }
.screen-1 { transition-delay: 0.2s; }
.screen-2 { transition-delay: 0.3s; }
.screen-3 { transition-delay: 0.4s; }
.screen-4 { transition-delay: 0.5s; }

.footer { background: #fff; padding: 5rem 0 2.5rem; border-top: 1px solid var(--line); }
.footer .text-white { color: var(--ink)!important; }
.footer .text-white-50 { color: var(--muted)!important; }
.footer .logo-mark { box-shadow: none; }