/* ===================================================================
   Ala Apps — mobile app landing design (zpa-)
   Distinct app-focused layout, AppsXpert clean/professional styling.
   Accent colour is set per page via --zpa-accent on .zpa-main.
   =================================================================== */
.zpa-main{--zpa-accent:#0B1F4A;--zpa-soft:#eef2f9;font-family:var(--font-primary,'Inter',sans-serif);color:#1d2433;}
.zpa-main h1,.zpa-main h2,.zpa-main h3{font-family:var(--font-primary,'Inter',sans-serif);}

/* ---- HERO ---- */
.zpa-hero{background:#f5f7fb;padding:72px 24px 84px;}
.zpa-hero-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:56px;flex-wrap:wrap;}
.zpa-hero-text{flex:1 1 380px;}
.zpa-hero-visual{flex:0 0 300px;display:flex;justify-content:center;}
.zpa-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--zpa-accent);background:var(--zpa-soft);padding:8px 16px;border-radius:30px;}
.zpa-hero-text h1{font-size:56px;line-height:1.04;letter-spacing:-2px;margin:20px 0 0;color:#0B1F4A;font-weight:800;}
.zpa-tag{font-size:23px;color:#3a4254;margin:14px 0 0;font-weight:600;}
.zpa-hero-text p{font-size:17px;line-height:1.7;color:#5b6473;margin:18px 0 30px;max-width:540px;}
.zpa-stores{display:flex;gap:14px;flex-wrap:wrap;}
.zpa-store{display:inline-flex;align-items:center;gap:11px;background:#0B1F4A;color:#fff;padding:13px 24px;border-radius:13px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .2s ease;}
.zpa-store i{font-size:22px;}
.zpa-store small{display:block;font-size:10px;font-weight:500;opacity:.8;line-height:1;}
.zpa-store b{font-size:15px;font-weight:700;line-height:1.1;}
.zpa-store:hover{transform:translateY(-2px);color:#fff;}
.zpa-store.alt{background:#fff;color:#0B1F4A;border:1px solid #dde3ec;}
.zpa-store.alt:hover{color:#0B1F4A;}
.zpa-hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;padding-top:30px;border-top:1px solid #e7ebf2;max-width:540px;}
.zpa-hero-point{font-size:13px;line-height:1.5;color:#5b6473;}
.zpa-hero-point i{width:42px;height:42px;border-radius:12px;background:var(--zpa-soft);color:var(--zpa-accent);display:inline-flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:13px;}
.zpa-hero-point b{display:block;color:#0B1F4A;font-weight:700;font-size:14px;margin-bottom:3px;}
.zpa-hero-point span{display:block;}

/* ---- click-to-zoom lightbox ---- */
.zpa-lightbox{position:fixed;inset:0;background:rgba(11,31,74,.92);display:none;align-items:center;justify-content:center;z-index:99999;cursor:zoom-out;padding:24px;}
.zpa-lightbox.open{display:flex;}
.zpa-lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;filter:drop-shadow(0 22px 60px rgba(0,0,0,.55));}
.zpa-lb-x{position:absolute;top:18px;right:26px;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;}
.zpa-shot{cursor:zoom-in;}

/* ---- phone mockup (self-contained) ---- */
.zpa-phone{width:264px;background:#0B1F4A;border-radius:36px;padding:11px;box-shadow:0 24px 60px rgba(11,31,74,.20);}
.zpa-screen{background:#fff;border-radius:27px;overflow:hidden;}
.zpa-ph-top{background:var(--zpa-accent);color:#fff;padding:18px 18px 20px;}
.zpa-ph-app{font-size:12px;opacity:.85;letter-spacing:.3px;}
.zpa-ph-title{font-size:18px;font-weight:700;margin-top:3px;}
.zpa-ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;}
.zpa-tile{background:#f4f6fa;border-radius:13px;padding:15px 8px;text-align:center;}
.zpa-tile i{font-size:21px;color:var(--zpa-accent);}
.zpa-tile span{display:block;font-size:11.5px;color:#4a5365;margin-top:7px;font-weight:600;}
.zpa-ph-bar{margin:0 16px 16px;background:#f4f6fa;border-radius:13px;padding:13px 15px;}
.zpa-ph-bar small{font-size:10.5px;color:#8a93a3;text-transform:uppercase;letter-spacing:.6px;}
.zpa-ph-bar strong{display:block;font-size:14px;color:#0B1F4A;margin-top:4px;font-weight:700;}
/* real uploaded screenshot — transparent PNG, no device frame (drop-shadow follows the image shape) */
.zpa-shot{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 32px rgba(11,31,74,.22));}

/* ---- benefit strip ---- */
.zpa-strip{background:#fed600;padding:30px 24px;}
.zpa-strip-inner{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.zpa-strip-item{display:flex;align-items:center;gap:13px;font-size:15px;color:#0B1F4A;font-weight:700;}
.zpa-strip-item i{font-size:24px;color:#0B1F4A;}

/* ---- alternating feature rows ---- */
.zpa-rows{max-width:1140px;margin:0 auto;padding:80px 24px;}
.zpa-row{display:flex;align-items:center;gap:68px;flex-wrap:wrap;margin-bottom:72px;}
.zpa-row:last-child{margin-bottom:0;}
.zpa-row:nth-child(even){flex-direction:row-reverse;}
.zpa-row-visual{flex:0 0 264px;display:flex;justify-content:center;}
.zpa-row-text{flex:1 1 380px;}
.zpa-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--zpa-accent);}
.zpa-row-text h2{font-size:34px;line-height:1.18;letter-spacing:-1px;margin:12px 0 16px;color:#0B1F4A;font-weight:800;}
.zpa-row-text>p{font-size:16px;line-height:1.7;color:#5b6473;margin:0 0 20px;}
.zpa-row-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.zpa-row-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#333b49;}
.zpa-row-list i{color:var(--zpa-accent);margin-top:3px;font-size:16px;}

/* ---- feature grid ---- */
.zpa-grid-sec{background:#f8f9fb;padding:80px 24px;}
.zpa-grid-head{max-width:760px;margin:0 auto 48px;text-align:center;}
.zpa-grid-head h2{font-size:36px;letter-spacing:-1.2px;color:#0B1F4A;font-weight:800;margin:0 0 14px;}
.zpa-grid-head p{font-size:16px;color:#5b6473;line-height:1.7;margin:0;}
.zpa-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.zpa-card{background:#fff;border:1px solid #eceff3;border-radius:18px;padding:28px 26px;transition:transform .25s ease,box-shadow .25s ease;}
.zpa-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(11,31,74,.08);}
.zpa-card-ic{width:48px;height:48px;border-radius:13px;background:var(--zpa-soft);color:var(--zpa-accent);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px;}
.zpa-card h3{font-size:18px;color:#0B1F4A;margin:0 0 9px;font-weight:700;}
.zpa-card p{font-size:14px;color:#5b6473;line-height:1.6;margin:0;}

/* ---- SEO overview lead + use cases ---- */
.zpa-lead{max-width:820px;margin:0 auto 64px;text-align:center;}
.zpa-lead h2{font-size:34px;line-height:1.25;letter-spacing:-1px;color:#0B1F4A;font-weight:800;margin:0 0 18px;}
.zpa-lead p{font-size:16px;line-height:1.8;color:#5b6473;margin:0 0 14px;}
.zpa-uses{background:#fff;padding:80px 24px;}

/* ---- screens gallery (real screenshots) ---- */
.zpa-gallery-sec{background:#f8f9fb;padding:80px 24px;}
.zpa-gallery-head{max-width:760px;margin:0 auto 40px;text-align:center;}
.zpa-gallery-head h2{font-size:34px;letter-spacing:-1px;color:#0B1F4A;font-weight:800;margin:0 0 12px;}
.zpa-gallery-head p{font-size:16px;color:#5b6473;line-height:1.7;margin:0;}
.zpa-gsub{max-width:1140px;margin:0 auto 18px;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--zpa-accent);text-align:center;}
.zpa-gallery{max-width:1140px;margin:0 auto 46px;display:flex;flex-wrap:wrap;justify-content:center;gap:26px;}
.zpa-gallery:last-child{margin-bottom:0;}
.zpa-shot-card{width:200px;}
.zpa-shot-card .zpa-shot{width:200px;}
.zpa-cap{text-align:center;font-size:13px;color:#5b6473;margin-top:12px;font-weight:600;}

/* ---- coverflow carousel (overlapping phones, centre highlighted) ---- */
.zpa-cf{max-width:1000px;margin:0 auto 50px;overflow:hidden;}
.zpa-cf-stage{position:relative;height:500px;display:flex;align-items:center;justify-content:center;perspective:1500px;}
.zpa-cf-item{position:absolute;width:230px;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;cursor:pointer;}
.zpa-cf-item.active{cursor:zoom-in;}
.zpa-cf-item img{display:block;width:100%;height:auto;pointer-events:none;}
.zpa-cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:200;width:48px;height:48px;border-radius:50%;border:1px solid #e2e7ef;background:#fff;color:#0B1F4A;font-size:15px;cursor:pointer;box-shadow:0 8px 22px rgba(11,31,74,.14);transition:background .2s,color .2s,border-color .2s;}
.zpa-cf-nav:hover{background:var(--zpa-accent);color:#fff;border-color:var(--zpa-accent);}
.zpa-cf-prev{left:6px;}
.zpa-cf-next{right:6px;}
.zpa-cf-cap{text-align:center;font-size:15px;font-weight:700;color:#0B1F4A;margin-top:16px;}
@media(max-width:560px){.zpa-cf-stage{height:430px;}.zpa-cf-item{width:185px;}.zpa-cf-nav{width:42px;height:42px;}}

/* ---- testimonials ---- */
.zpa-testi{max-width:1140px;margin:0 auto;padding:80px 24px;}
.zpa-testi-head{text-align:center;font-size:34px;letter-spacing:-1px;color:#0B1F4A;font-weight:800;margin:0 0 48px;}
.zpa-testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.zpa-tcard{background:#fff;border:1px solid #eceff3;border-radius:18px;padding:28px 26px;}
.zpa-tcard .zpa-stars{color:#f5a623;font-size:14px;margin-bottom:14px;}
.zpa-tcard p{font-size:15px;line-height:1.7;color:#3a4254;font-style:italic;margin:0 0 20px;}
.zpa-tmeta{display:flex;align-items:center;gap:12px;}
.zpa-tavatar{width:42px;height:42px;border-radius:50%;background:var(--zpa-soft);color:var(--zpa-accent);display:flex;align-items:center;justify-content:center;font-size:18px;}
.zpa-tname{font-size:15px;font-weight:700;color:#0B1F4A;display:block;}
.zpa-trole{font-size:13px;color:#7a8290;display:block;}

/* ---- faq ---- */
.zpa-faq{background:#f8f9fb;padding:80px 24px;}
.zpa-faq-inner{max-width:820px;margin:0 auto;}
.zpa-faq-inner h2{text-align:center;font-size:34px;letter-spacing:-1px;color:#0B1F4A;font-weight:800;margin:0 0 40px;}
.zpa-faq-item{background:#fff;border:1px solid #eceff3;border-radius:14px;padding:22px 26px;margin-bottom:14px;}
.zpa-faq-item h3{font-size:17px;color:#0B1F4A;margin:0 0 8px;font-weight:700;}
.zpa-faq-item p{font-size:15px;color:#5b6473;line-height:1.7;margin:0;}

/* ---- download CTA ---- */
.zpa-cta{background:var(--zpa-accent);padding:76px 24px;text-align:center;}
.zpa-cta h2{font-size:38px;letter-spacing:-1.2px;color:#fff;font-weight:800;margin:0 0 14px;}
.zpa-cta p{font-size:18px;color:rgba(255,255,255,.9);margin:0 0 30px;}
.zpa-cta .zpa-stores{justify-content:center;}
.zpa-cta .zpa-store{background:#fff;color:var(--zpa-accent);}
.zpa-cta .zpa-store.alt{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);}

/* ---- reveal (visible by default; JS adds .zpa-anim to hide, then .zpa-visible to show) ---- */
.zpa-anim{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.zpa-visible{opacity:1 !important;transform:none !important;}

/* ---- responsive ---- */
@media(max-width:880px){
  .zpa-hero-text h1{font-size:42px;}
  .zpa-tag{font-size:20px;}
  .zpa-row{gap:40px;}
  .zpa-row-text h2{font-size:28px;}
  .zpa-strip-inner{justify-content:flex-start;}
}
@media(max-width:560px){
  .zpa-hero{padding:48px 20px 56px;}
  .zpa-hero-text h1{font-size:34px;}
  .zpa-cta h2,.zpa-grid-head h2,.zpa-testi-head,.zpa-faq-inner h2{font-size:28px;}
}