/* ============================================================
   Paperless Receipt Book — Marketing Landing Page
   Visual language inspired by pesapal.com: teal/green brand,
   white background, split hero, tabbed solution cards,
   alternating icon+image feature rows, dark navy footer.
   Loaded ONLY on index.php — the app screens keep their own
   mobile-first chrome in style.css.
   ============================================================ */

:root{
  --pesa-teal:#FF7000;
  --pesa-teal-dark:#087A68;
  --pesa-teal-light:#E6F7F4;
  --pesa-navy:#0F2033;
  --pesa-navy-2:#16304A;
  --pesa-ink:#122031;
  --pesa-muted:#5C6B7A;
  --pesa-border:#E7ECEF;
  --pesa-radius:2px;
}

.pesa{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:var(--pesa-ink); background:#fff;}
.pesa a{text-decoration:none; color:inherit;}
.pesa img{max-width:100%; display:block;}
.pesa .wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
.pesa .eyebrow{color:var(--pesa-teal-dark); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px;}

/* ---------------- Top nav ---------------- */
.pesa-nav{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--pesa-border);
}
.pesa-nav-inner{max-width:1180px; margin:0 auto; padding:0 20px; height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.pesa-logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--pesa-ink); flex-shrink:0;}
.pesa-logo svg{width:34px; height:34px;}
.pesa-menu{display:none; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.pesa-menu > li{position:relative;}
.pesa-menu > li > a{font-weight:600; font-size:.93rem; color:var(--pesa-ink); display:flex; align-items:center; gap:5px; padding:10px 0;}
.pesa-menu > li > a svg{width:13px; height:13px; transition:transform .15s ease;}
.pesa-menu > li:hover > a svg{transform:rotate(180deg);}
.pesa-menu > li:hover > a{color:var(--pesa-teal-dark);}

.pesa-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--pesa-border); border-radius:var(--pesa-radius);
  box-shadow:0 16px 40px rgba(15,32,51,.14);
  min-width:250px; padding:10px; opacity:0; visibility:hidden; translate:0 8px;
  transition:opacity .15s ease, translate .15s ease; z-index:70;
}
.pesa-menu > li:hover .pesa-dropdown{opacity:1; visibility:visible; translate:0 0;}
.pesa-dropdown a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:.88rem; font-weight:600; color:var(--pesa-ink);}
.pesa-dropdown a:hover{background:var(--pesa-teal-light); color:var(--pesa-teal-dark);}
.pesa-dropdown .dd-desc{display:block; font-weight:400; color:var(--pesa-muted); font-size:.76rem; margin-top:1px;}

.pesa-nav-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.pesa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:2px; font-weight:700; font-size:.88rem;
  border:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.pesa-btn-teal{background:var(--pesa-teal); color:#fff;}
.pesa-btn-teal:hover{background:var(--pesa-teal-dark);}
.pesa-btn-outline{border-color:var(--pesa-border); color:var(--pesa-ink); background:#fff;}
.pesa-btn-outline:hover{border-color:var(--pesa-teal);}
.pesa-btn-ghost{color:var(--pesa-ink); font-weight:700; font-size:.88rem; padding:11px 6px;}

.pesa-burger{display:flex; width:40px; height:40px; border-radius:2px; border:1px solid var(--pesa-border); align-items:center; justify-content:center; background:#fff;}

@media(min-width:1020px){
  .pesa-menu{display:flex;}
  .pesa-burger{display:none;}
  .pesa-nav-actions .pesa-btn-ghost{display:inline-flex;}
}
@media(max-width:1019px){
  .pesa-nav-actions .pesa-btn-teal{padding:9px 16px; font-size:.8rem;}
  .pesa-nav-actions .pesa-btn-ghost{display:none;}
}

/* ---------------- Hero (split layout) ---------------- */
.pesa-hero{padding:56px 0 40px;}
.pesa-hero-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
@media(min-width:960px){.pesa-hero-grid{grid-template-columns:1.05fr .95fr; gap:50px;}}
.pesa-hero h1{font-size:2rem; line-height:1.18; font-weight:800; margin:0 0 16px; letter-spacing:-.01em;}
@media(min-width:640px){.pesa-hero h1{font-size:2.6rem;}}
.pesa-hero p.lead{font-size:1.02rem; color:var(--pesa-muted); max-width:520px; margin:0 0 22px;}
.pesa-hero ul{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px;}
.pesa-hero ul li{display:flex; align-items:flex-start; gap:10px; font-size:.94rem; font-weight:500;}
.pesa-hero ul li svg{width:19px; height:19px; flex-shrink:0; color:var(--pesa-teal); margin-top:1px;}
.pesa-hero-actions{display:flex; gap:12px; flex-wrap:wrap;border-radius:var(--pesa-radius);}
.pesa-hero-art{position:relative;}
.pesa-hero-art .art-card{
  background:linear-gradient(160deg,var(--pesa-teal-light),#fff); border-radius:2px; padding:26px;
  box-shadow:0 24px 60px rgba(15,32,51,.10);
}

/* ---------------- Trust strip ---------------- */
.pesa-trust{padding:22px 0; border-top:1px solid var(--pesa-border); border-bottom:1px solid var(--pesa-border);}
.pesa-trust-row{display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;}
.pesa-trust-item{display:flex; align-items:center; gap:10px; color:var(--pesa-muted); font-weight:600; font-size:.85rem;}
.pesa-trust-item svg{width:20px; height:20px; color:var(--pesa-teal);}

/* ---------------- Solution tab cards ---------------- */
.pesa-section{padding:64px 0;border-radius:var(--pesa-radius);}
.pesa-section-head{max-width:640px; margin:0 auto 36px; text-align:center;}
.pesa-section-head h2{font-size:1.7rem; font-weight:800; margin:0 0 10px; letter-spacing:-.01em;}
.pesa-section-head p{color:var(--pesa-muted); font-size:.98rem; margin:0;}

.pesa-tabs{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:760px){.pesa-tabs{grid-template-columns:repeat(3,1fr);}}
.pesa-tab-card{
  border:1.5px solid var(--pesa-border); border-radius:var(--pesa-radius); padding:26px 22px;
  text-align:center; transition:border-color .15s ease, box-shadow .15s ease; background:#fff;
}
.pesa-tab-card:hover{border-color:var(--pesa-teal); box-shadow:0 12px 28px rgba(11,168,143,.12);}
.pesa-tab-card .tab-ic{
  width:52px; height:52px; border-radius:2px; background:var(--pesa-teal-light); color:var(--pesa-teal-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.pesa-tab-card h3{font-size:1.02rem; margin:0 0 6px;}
.pesa-tab-card p{font-size:.85rem; color:var(--pesa-muted); margin:0;}

/* ---------------- Alternating feature rows ---------------- */
.pesa-feature-row{padding:54px 0; border-top:1px solid var(--pesa-border);}
.pesa-feature-grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center;}
@media(min-width:900px){.pesa-feature-grid{grid-template-columns:1fr 1fr; gap:56px;}}
.pesa-feature-row.reverse .pesa-feature-grid{direction:rtl;}
.pesa-feature-row.reverse .pesa-feature-grid > *{direction:ltr;}
.pesa-feature-text h3{font-size:1.5rem; font-weight:800; margin:0 0 12px; letter-spacing:-.01em;}
.pesa-feature-text p.desc{color:var(--pesa-muted); font-size:.97rem; margin:0 0 18px;}
.pesa-feature-text .benefits{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px;}
.pesa-feature-text .benefits li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; font-weight:500;}
.pesa-feature-text .benefits li svg{width:18px; height:18px; color:var(--pesa-teal); flex-shrink:0; margin-top:2px;}
.pesa-feature-visual{
  background:var(--pesa-teal-light); border-radius:2px; padding:28px;
  display:flex; align-items:center; justify-content:center;
}
.pesa-feature-visual img, .pesa-feature-visual svg.big{width:100%; max-width:340px;}

/* ---------------- Stats band ---------------- */
.pesa-stats{background:var(--pesa-navy); color:#fff; padding:48px 0;}
.pesa-stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; text-align:center;}
@media(min-width:760px){.pesa-stats-grid{grid-template-columns:repeat(4,1fr);}}
.pesa-stats-grid .num{font-size:1.9rem; font-weight:800; color:var(--pesa-teal);}
.pesa-stats-grid .label{font-size:.82rem; color:#B9C4CF; margin-top:4px;}

/* ---------------- CTA band ---------------- */
.pesa-cta{
  background:linear-gradient(120deg,var(--pesa-teal),var(--pesa-teal-dark)); color:#fff;
  border-radius:2px; padding:46px 30px; text-align:center; margin:0 auto;
}
.pesa-cta h2{font-size:1.6rem; margin:0 0 10px; font-weight:800;}
.pesa-cta p{opacity:.95; max-width:480px; margin:0 auto 22px; font-size:.95rem;}

/* ---------------- Footer ---------------- */
.pesa-footer{background:var(--pesa-navy); color:#B9C4CF; padding:56px 0 26px;}
.pesa-footer-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
@media(max-width:820px){.pesa-footer-top{grid-template-columns:1fr 1fr;}}
.pesa-footer-brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:#fff; margin-bottom:12px;}
.pesa-footer-brand svg{width:30px; height:30px;}
.pesa-footer p.blurb{font-size:.85rem; line-height:1.6; max-width:280px;}
.pesa-footer h4{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px;}
.pesa-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.pesa-footer a{font-size:.87rem; color:#B9C4CF;}
.pesa-footer a:hover{color:#fff;}
.pesa-footer-bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:22px; font-size:.8rem; color:#8494A3;}
.pesa-socials{display:flex; gap:10px;}
.pesa-socials a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;}
.pesa-socials a:hover{background:var(--pesa-teal);}
.pesa-socials svg{width:15px; height:15px; color:#fff;}

@media(max-width:640px){
  .pesa-section{padding:44px 0;}
  .pesa-feature-row{padding:38px 0;}
  .pesa-footer-top{grid-template-columns:1fr;}
}