:root{
  --purple:#4b3bd4;
  --purple-2:#5b4ae2;
  --purple-dark:#3527ae;
  --purple-light:#f0eeff;
  --green:#0bc47a;
  --green-light:#e9fbf4;
  --yellow:#ffb000;
  --yellow-light:#fff7e3;
  --blue:#1b8fe8;
  --blue-light:#eaf5ff;
  --ink:#111827;
  --muted:#6d7485;
  --border:#e8e8f0;
  --surface:#ffffff;
  --page:#fbfbfe;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.5}
a{text-decoration:none;color:inherit}
.container{width:min(1190px,calc(100% - 56px));margin:0 auto}
.header{height:78px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,232,240,.8)}
.nav{height:78px;display:flex;align-items:center;gap:35px}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1}
.logo img{display:block;width:34px;height:34px;flex:0 0 34px}
.nav nav{display:flex}
nav{display:flex;align-items:center;gap:28px;margin-left:auto}
nav a{font-size:12px;font-weight:700;color:#303647;transition:.2s}
nav a:hover,nav a.active{color:var(--purple)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:13px;font-weight:800;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.primary{background:var(--purple);color:#fff;box-shadow:0 12px 25px rgba(75,59,212,.22)}
.secondary{background:#fff;color:var(--purple);border:1px solid #dfdeea}
.green{background:var(--green);color:#fff;box-shadow:0 10px 22px rgba(11,196,122,.2)}
.nav-download{padding:12px 18px;font-size:12px}
.download-arrow{font-size:17px;margin-right:7px}
.big{padding:15px 22px;font-size:13px;gap:7px}
.play{font-size:11px}
.menu-btn{display:none;border:0;background:transparent;font-size:26px}

.hero{background:radial-gradient(circle at 79% 47%,#eeeaff 0,rgba(238,234,255,.8) 16%,rgba(251,251,254,.85) 36%,#fff 72%);overflow:hidden}
.hero-grid{min-height:590px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:22px}
.hero-copy{padding:48px 0 38px}
.hero-copy>*{animation:hero-reveal .7s both}
.hero-copy>*:nth-child(1){animation-delay:.05s}.hero-copy>*:nth-child(2){animation-delay:.12s}.hero-copy>*:nth-child(3){animation-delay:.2s}.hero-copy>*:nth-child(4){animation-delay:.28s}.hero-copy>*:nth-child(5){animation-delay:.36s}.hero-copy>*:nth-child(6){animation-delay:.44s}
.eyebrow{display:inline-flex;padding:6px 13px;border-radius:999px;background:#efedff;color:var(--purple);font-size:11px;font-weight:800;margin-bottom:19px}
.hero h1{font-size:52px;line-height:1.09;letter-spacing:-2.3px;max-width:570px;margin:0 0 18px}
.hero h1 span{color:var(--purple)}
.hero-description{font-size:14px;line-height:1.6;color:var(--muted);max-width:510px;margin:0 0 23px}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:14px;margin-top:25px}
.avatar-stack{display:flex}
.avatar-stack span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8d9cd;border:2px solid white;margin-right:-9px;font-size:18px}
.avatar-stack .more{background:var(--purple);color:white;font-size:10px;font-weight:800}
.stars{color:#ffad00;letter-spacing:2px;font-size:14px}
.rating-copy strong,.rating-copy small{display:block}
.rating-copy strong{font-size:10px}.rating-copy small{font-size:9px;color:var(--muted)}
.trust-row{margin-top:25px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 12px 30px rgba(31,25,93,.05)}
.trust-row>div{display:flex;align-items:center;gap:7px;padding:11px 9px;border-right:1px solid var(--border)}
.trust-row>div:last-child{border-right:0}
.trust-row b,.trust-row small{display:block}
.trust-row b{font-size:9px}.trust-row small{font-size:8px;color:var(--muted);white-space:nowrap}
.trust-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.trust-icon.purple{background:#efedff;color:var(--purple)}.trust-icon.blue{background:#eaf5ff;color:var(--blue)}.trust-icon.yellow{background:#fff7e3;color:var(--yellow)}

.hero-visual{height:590px;display:flex;align-items:center;justify-content:center;position:relative}
.hero-orbit{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#eeeaff 0,#eeeaff 58%,rgba(238,234,255,0) 69%);animation:orbit-breathe 5s ease-in-out infinite}
.device{width:292px;height:573px;padding:8px;border-radius:44px;background:#121212;box-shadow:0 28px 55px rgba(24,21,50,.28);position:relative;z-index:3;animation:device-float 5s ease-in-out infinite .3s}
.device-screen{height:100%;width:100%;overflow:hidden;border-radius:36px;background:#fff;position:relative}
.device-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.floating-bubble{position:absolute;width:62px;height:62px;border-radius:50%;background:white;display:grid;place-items:center;font-size:28px;box-shadow:0 14px 32px rgba(50,45,110,.13);z-index:5;animation:bubble-float 4s ease-in-out infinite}
.bubble-yellow{right:3%;top:20%;color:#ffad00;animation-delay:-1.2s}.bubble-green{right:-1%;top:42%;color:#0bc47a;animation-delay:-2.1s}.bubble-purple{left:1%;top:50%;color:var(--purple);animation-delay:-.5s}.bubble-blue{right:7%;bottom:16%;color:#1b8fe8;animation-delay:-2.8s}

@keyframes hero-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes device-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bubble-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes orbit-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.04);opacity:1}}

@media(prefers-reduced-motion:reduce){.hero-copy>*,.device,.floating-bubble,.hero-orbit{animation:none}}

.bills-section{padding:58px 0 62px;background:#fff}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{font-size:29px;letter-spacing:-1.2px;margin:0 0 6px}
.section-title p{font-size:13px;color:var(--muted);margin:0}
.bill-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bill-card{min-height:177px;padding:24px 13px 18px;text-align:center;border:1px solid var(--border);border-radius:17px;background:#fff;box-shadow:0 10px 28px rgba(29,25,90,.035);transition:.2s}
.bill-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(29,25,90,.08)}
.bill-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:23px;font-weight:700}
.bill-icon.airtime,.bill-icon.tv,.bill-icon.more{background:#efedff;color:var(--purple)}
.bill-icon.electricity{background:var(--yellow-light);color:var(--yellow)}
.bill-icon.internet{background:var(--green-light);color:var(--green)}
.bill-icon.water{background:var(--blue-light);color:var(--blue)}
.bill-card h3{font-size:12px;margin:0 0 6px}.bill-card p{font-size:9px;color:var(--muted);margin:0;line-height:1.55}

.card-section{padding:0 0 60px}
.card-banner{min-height:320px;border-radius:14px;overflow:hidden;background:linear-gradient(125deg,#3b31b1,#5c49e1);color:white;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:42px 55px;position:relative}
.card-banner:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:80px;top:-80px;background:rgba(255,255,255,.04)}
.card-content{position:relative;z-index:2;max-width:530px}
.card-pill{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-size:9px;font-weight:800}
.card-content h2{font-size:38px;letter-spacing:-1.4px;margin:12px 0 8px}
.card-content>p{font-size:13px;color:#e4e1ff;margin:0 0 12px}
.card-content ul{list-style:none;padding:0;margin:0 0 20px;font-size:10px;line-height:1.9;color:#f5f4ff}
.card-content li span{color:#12df90;font-weight:900;margin-right:5px}
.card-content .btn{padding:12px 18px;font-size:11px}
.card-art{position:relative;height:280px;display:grid;place-items:center;z-index:2}
.map-text{position:absolute;font-size:68px;letter-spacing:8px;color:rgba(255,255,255,.06);font-weight:800}
.virtual-card{width:360px;height:220px;border-radius:22px;padding:23px;background:linear-gradient(145deg,#312a94,#655ae3);box-shadow:0 28px 50px rgba(21,15,93,.32);transform:rotate(-5deg);position:relative}
.vc-header{display:flex;justify-content:space-between;font-size:14px}.vc-chip{width:43px;height:31px;border-radius:6px;background:#ffc738;margin:47px 0 17px}.vc-number{font-size:18px;letter-spacing:1.5px}.vc-footer{position:absolute;left:23px;right:23px;bottom:20px;display:flex;justify-content:space-between;font-size:9px;color:#ddd}

.how-section{padding:60px 0;background:#fff}
.steps{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;align-items:center}
.step{text-align:center;position:relative}.step-number{position:absolute;top:-6px;right:19%;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;font-size:10px;font-weight:800}.green-number{background:var(--green)}.yellow-number{background:var(--yellow)}.purple-number{background:var(--purple)}
.step-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;font-size:23px}
.purple-bg{background:#efedff;color:var(--purple)}.green-bg{background:var(--green-light);color:var(--green)}.yellow-bg{background:var(--yellow-light);color:var(--yellow)}
.step h3{font-size:13px;margin:0 0 5px}.step p{font-size:10px;color:var(--muted);max-width:150px;margin:auto}.step-arrow{color:#aaa;font-size:25px;text-align:center}

.download-section{padding:0 0 52px;background:#fff}
.download-box{min-height:105px;border:1px solid #e9e7f8;border-radius:14px;background:#f7f6ff;padding:21px 25px;display:flex;align-items:center;gap:20px}
.download-brand{display:flex;align-items:center;gap:13px}.download-logo{width:55px;height:55px;border-radius:15px;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:35px;font-weight:900}.download-brand h2{font-size:17px;margin:0}.download-brand p{font-size:10px;color:var(--muted);margin:3px 0 0}
.stores{display:flex;gap:9px;margin-left:auto}.store-button{background:#111;color:white;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;min-width:127px}.store-icon{display:block;flex:0 0 auto;width:19px;height:19px}.apple-store-icon{width:17px;height:21px;color:#fff}.store-button small,.store-button b{display:block}.store-button small{font-size:6px}.store-button b{font-size:11px}
.qr-wrap{display:flex;align-items:center;gap:9px;margin-left:8px}.qr{width:62px;height:62px;background:#fff;border:1px solid #dedee6;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px}.qr i{background:#111;display:block}.qr i:nth-child(2n){background:transparent}.qr-wrap strong{font-size:9px}

footer{padding:47px 0 19px;border-top:1px solid var(--border);background:#fff}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:34px}.footer-brand p{font-size:10px;color:var(--muted);max-width:230px;margin:13px 0}.footer-grid h4{font-size:11px;margin:0 0 13px}.footer-grid>div>a:not(.logo){display:block;font-size:9px;color:var(--muted);margin:8px 0}.socials{display:flex;gap:7px}.socials span{width:27px;height:27px;border-radius:50%;background:#f2f2f7;color:#6d7485;display:grid;place-items:center;font-size:9px}
.copyright{border-top:1px solid var(--border);padding-top:16px;margin-top:33px;text-align:center;color:var(--muted);font-size:9px}

@media(max-width:1050px){
  .hero h1{font-size:48px}.bill-grid{grid-template-columns:repeat(3,1fr)}.card-banner{grid-template-columns:1fr;padding:45px}.card-art{margin-top:15px}.footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:780px){
  .container{width:min(100% - 34px,620px)}
  .header,.nav{height:68px}.menu-btn{display:block;margin-left:auto}.nav nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--border);padding:20px 24px;flex-direction:column;align-items:flex-start;gap:17px}.nav nav.open{display:flex}.nav-download{display:none}
  .hero-grid{grid-template-columns:1fr}.hero-copy{padding:42px 0 10px}.hero h1{font-size:42px;letter-spacing:-2px}.hero-visual{height:600px}.hero-orbit{width:470px;height:470px}.device{width:295px;height:580px}.floating-bubble{display:none}
  .trust-row{grid-template-columns:repeat(2,1fr)}.trust-row>div:nth-child(2){border-right:0}.trust-row>div{border-bottom:1px solid var(--border)}
  .bill-grid{grid-template-columns:repeat(2,1fr)}.card-banner{padding:34px 24px}.card-content h2{font-size:34px}.virtual-card{width:310px;height:190px}.vc-chip{margin:38px 0 14px}.vc-number{font-size:14px}
  .steps{grid-template-columns:1fr;gap:28px}.step-arrow{display:none}.download-box{flex-direction:column;align-items:flex-start}.stores{margin-left:0;flex-wrap:wrap}.qr-wrap{margin-left:0}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .hero h1{font-size:36px}.hero-description{font-size:14px}.hero-buttons .btn{width:100%}.rating{margin-top:25px}.trust-row{grid-template-columns:1fr}.trust-row>div{border-right:0}.bill-grid{gap:9px}.bill-card{min-height:165px;padding:20px 8px}.card-banner{border-radius:18px}.virtual-card{width:275px;height:168px;padding:18px}.vc-header{font-size:11px}.vc-chip{width:35px;height:25px;margin:31px 0 13px}.vc-number{font-size:11px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}