:root{
    --navy:#101B34;
    --navy-soft:#1D2E52;
    --paper:#EEF2F6;
    --card:#FFFFFF;
    --line:#E1E6EC;
    --text:#101B34;
    --text-sub:#5B667A;
    --teal:#0E7C66;
    --teal-light:#3ED9B0;
    --teal-dark:#0A5C4C;
    --mtn:#FFCC08;
    --telecel:#E30613;
    --airteltigo:#0057A6;
    --radius:14px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--paper);
    color:var(--text);
  }
  h1,h2,h3,.display{
    font-family:'Sora',sans-serif;
  }
  .app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    min-height:100dvh;
    background:var(--card);
    box-shadow:0 0 60px rgba(16,27,52,0.08);
    position:relative;
    overflow-x:hidden;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* ---------- Header / logo ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 20px 16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo-mark{
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--navy);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    padding:7px 6px;
  }
  .logo-mark span{
    display:block;
    width:4px;
    border-radius:2px;
    background:var(--teal-light);
  }
  .logo-mark span:nth-child(1){height:6px;}
  .logo-mark span:nth-child(2){height:10px;}
  .logo-mark span:nth-child(3){height:14px; background:var(--teal);}
  .logo-mark span:nth-child(4){height:18px; background:var(--teal);}
  .brand-name{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:-0.01em;
  }
  .wallet-pill{
    font-size:12px;
    color:var(--text-sub);
    background:var(--paper);
    padding:6px 12px;
    border-radius:999px;
  }
  .topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .account-icon-btn{
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    cursor:pointer;
    transition:background .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .account-icon-btn:hover{
    background:#E2E7ED;
  }
  .account-icon-btn.signed-in{
    background:var(--teal);
    color:#fff;
  }
  .account-wrap{
    position:relative;
  }
  .account-menu{
    display:none;
    position:absolute;
    top:28px;
    right:0;
    width:210px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(16,27,52,0.14);
    z-index:20;
    overflow:hidden;
  }
  .account-menu.open{
    display:block;
  }
  .account-menu-header{
    font-size:11.5px;
    color:var(--text-sub);
    padding:12px 14px 10px;
    border-bottom:1px solid var(--line);
  }
  .account-menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    font-size:13.5px;
    font-weight:500;
    cursor:pointer;
    color:var(--text);
  }
  .account-menu-item:hover{
    background:var(--paper);
  }
  .account-menu-item.logout{
    border-top:1px solid var(--line);
    color:#B3261E;
  }
  .menu-icon{
    font-size:14px;
    width:16px;
    text-align:center;
  }

  /* ---------- Screens ---------- */
  .screen{
    display:none;
    padding:4px 20px 32px;
    animation:fadeIn .25s ease;
  }
  .screen.active{display:block;}
  @keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ---------- Homepage hero ---------- */
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#EAF6F2;
    color:var(--teal-dark);
    font-size:12px;
    font-weight:600;
    padding:6px 12px;
    border-radius:999px;
    margin-bottom:16px;
  }
  .hero-badge .dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--teal);
  }
  .hero-title{
    font-size:28px;
    font-weight:700;
    line-height:1.22;
    margin:0 0 6px;
    letter-spacing:-0.01em;
  }
  .hero-sub{
    font-size:14.5px;
    color:var(--text-sub);
    margin:0 0 26px;
    line-height:1.5;
  }
  .hero-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .hero-text{
    flex:1;
    min-width:0;
  }
  .hero-illustration{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Full-width banner hero */
  .hero-banner{
    position:relative;
    width:100%;
    height:280px;
    overflow:hidden;
    background:linear-gradient(135deg, #16264A 0%, #101B34 60%, #0B1526 100%);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-banner-bg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    gap:14px;
    padding:0 30px 0 0;
    opacity:0.22;
  }
  .hb-bar{
    width:34px;
    border-radius:17px 17px 0 0;
    background:#3ED9B0;
  }
  .hb1{height:60%;}
  .hb2{height:80%; background:#0E7C66;}
  .hb3{height:100%;}
  .hb4{height:70%; background:#0E7C66;}

  .hero-banner-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:0 30px;
  }
  .hero-banner-title{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:34px;
    line-height:1.15;
    color:#fff;
    letter-spacing:-0.01em;
  }
  .hero-banner-sub{
    font-size:15px;
    color:#C6CEDC;
    margin-top:14px;
  }

  .screen-body{
    padding:24px 20px 0;
  }

  /* Feature strip on homepage */
  .feature-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:26px;
  }
  .feature-chip{
    background:var(--paper);
    border-radius:12px;
    padding:12px 10px;
    text-align:center;
  }
  .feature-chip .icon{
    font-size:18px;
    margin-bottom:6px;
    display:block;
  }
  .feature-chip .label{
    font-size:11px;
    font-weight:600;
    color:var(--text-sub);
    line-height:1.3;
  }

  .section-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-sub);
    margin:0 0 12px;
  }

  /* Network cards */
  .network-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .network-card{
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid var(--line);
    border-left:5px solid var(--brand-color, var(--teal));
    border-radius:var(--radius);
    padding:16px;
    background:var(--card);
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .network-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(16,27,52,0.08);
  }
  .network-dot{
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--brand-color, var(--teal));
    flex-shrink:0;
  }
  .network-info{flex:1;}
  .network-info .name{font-weight:600; font-size:15px;}
  .network-info .desc{font-size:12.5px; color:var(--text-sub); margin-top:2px;}
  .chev{color:var(--text-sub); font-size:18px;}

  /* Support note on homepage */
  .support-note{
    margin-top:26px;
    font-size:12.5px;
    color:var(--text-sub);
    text-align:center;
    line-height:1.5;
  }
  .support-note a{
    color:var(--teal-dark);
    font-weight:600;
    text-decoration:none;
  }

  /* Back row */
  .back-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    cursor:pointer;
  }
  .back-arrow{
    font-size:16px;
    color:var(--text-sub);
  }
  .back-label{
    font-size:13px;
    color:var(--text-sub);
  }

  /* Bundle grid */
  .bundle-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  @media (max-width: 360px){
    .bundle-grid{
      grid-template-columns:1fr;
    }
  }
  .bundle-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    cursor:pointer;
    background:var(--card);
    transition:border-color .12s ease, transform .12s ease;
  }
  .bundle-card:hover{
    transform:translateY(-2px);
    border-color:var(--teal);
  }
  .bundle-size{font-size:19px; font-weight:700; margin-bottom:10px;}
  .bundle-price{
    font-size:14px;
    font-weight:600;
    color:var(--teal-dark);
  }

  /* Checkout */
  .order-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:10px;
}
.order-item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.order-item-size{font-weight:700; font-size:15px;}
.order-item-status{
  font-size:11px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  text-transform:capitalize;
}
.order-item-status.delivered{ background:#EAF6F2; color:var(--teal-dark); }
.order-item-status.pending, .order-item-status.processing{ background:#FFF6E5; color:#8A6D00; }
.order-item-status.failed{ background:#FBE9E7; color:#B3261E; }
.order-item-meta{ font-size:12px; color:var(--text-sub); }
.order-empty{
  text-align:center;
  color:var(--text-sub);
  font-size:13.5px;
  padding:40px 20px;
}
.coming-soon-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:60px 20px;
}
.coming-soon-icon{
  font-size:32px;
  margin-bottom:16px;
}
.coming-soon-title{
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:17px;
  margin-bottom:8px;
}
.coming-soon-sub{
  font-size:13.5px;
  color:var(--text-sub);
  line-height:1.5;
  max-width:280px;
}

.summary-card{
    background:var(--paper);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:18px;
  }
  .summary-row{
    display:flex;
    justify-content:space-between;
    font-size:13.5px;
    padding:6px 0;
  }
  .summary-row.total{
    border-top:1px solid var(--line);
    margin-top:6px;
    padding-top:12px;
    font-weight:700;
    font-size:15px;
  }
  .field-label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-sub);
    margin:0 0 6px;
    display:block;
  }
  input[type="text"], input[type="password"]{
    width:100%;
    padding:13px 14px;
    border-radius:10px;
    border:1px solid var(--line);
    font-size:16px;
    font-family:'Inter',sans-serif;
    margin-bottom:18px;
    outline:none;
    transition:border-color .12s ease;
    box-sizing:border-box;
  }
  input[type="text"]:focus, input[type="password"]:focus{border-color:var(--teal);}
  input[type="text"]:disabled{background:var(--paper); color:var(--text-sub);}

.new-number-notice{
  font-size:11.5px;
  color:var(--text-sub);
  background:var(--paper);
  border-radius:8px;
  padding:8px 10px;
  margin:-10px 0 18px;
  line-height:1.4;
}

  .pay-methods{
    display:flex;
    gap:8px;
    margin-bottom:22px;
  }
  .pay-method{
    flex:1;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 8px;
    text-align:center;
    font-size:11.5px;
    font-weight:600;
    color:var(--text-sub);
    cursor:pointer;
  }
  .pay-method.selected{
    border-color:var(--teal);
    color:var(--teal-dark);
    background:#EAF6F2;
  }

  .btn-primary{
    width:100%;
    padding:15px;
    background:var(--teal);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    transition:background .12s ease;
  }
  .btn-primary:hover{background:var(--teal-dark);}
  .btn-primary:disabled{background:#B7BFCB; cursor:not-allowed;}

  /* Processing */
  .processing-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:70px 20px;
    text-align:center;
  }
  .signal-big{
    display:flex;
    align-items:flex-end;
    gap:5px;
    height:44px;
    margin-bottom:24px;
  }
  .signal-big span{
    display:block;
    width:9px;
    background:var(--teal);
    border-radius:4px;
    animation:pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:.35;}
    50%{opacity:1;}
  }
  .signal-big span:nth-child(1){height:14px;animation-delay:0s;}
  .signal-big span:nth-child(2){height:24px;animation-delay:.15s;}
  .signal-big span:nth-child(3){height:34px;animation-delay:.3s;}
  .signal-big span:nth-child(4){height:44px;animation-delay:.45s;}
  .processing-title{font-size:16px; font-weight:600; margin-bottom:6px;}
  .processing-sub{font-size:13px; color:var(--text-sub);}

  /* Success */
  .success-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:50px 20px 20px;
  }
  .check-circle{
    width:64px;
    height:64px;
    border-radius:50%;
    background:#EAF6F2;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }
  .check-circle svg{width:28px; height:28px;}
  .success-title{font-size:19px; font-weight:700; margin-bottom:6px;}
  .success-sub{font-size:13.5px; color:var(--text-sub); margin-bottom:24px; line-height:1.5;}
  .receipt{
    width:100%;
    background:var(--paper);
    border-radius:var(--radius);
    padding:16px;
    text-align:left;
    margin-bottom:20px;
  }
  .btn-secondary{
    width:100%;
    padding:14px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }

  .save-number-prompt{
    width:100%;
    background:var(--paper);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:14px;
    text-align:center;
  }
  .save-number-text{
    font-size:13px;
    color:var(--text-sub);
    margin-bottom:12px;
  }

  /* ---------- Floating support chat ---------- */
  /* ---------- Sign in / Create account modal ---------- */
  .auth-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(16,27,52,0.55);
    z-index:40;
    align-items:flex-end;
    justify-content:center;
  }
  .auth-overlay.open{
    display:flex;
  }
  .auth-modal{
    width:100%;
    max-width:480px;
    background:var(--card);
    border-radius:20px 20px 0 0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    animation:slideUp .25s ease;
  }
  @media (min-width: 500px){
    .auth-overlay{ align-items:center; }
    .auth-modal{ border-radius:20px; }
  }
  @keyframes slideUp{
    from{ transform:translateY(30px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  .auth-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
  }
  .auth-modal-title{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:19px;
  }
  .auth-close{
    cursor:pointer;
    font-size:16px;
    color:var(--text-sub);
    padding:4px;
  }
  .auth-tabs{
    display:flex;
    background:var(--paper);
    border-radius:10px;
    padding:4px;
    margin-bottom:20px;
  }
  .auth-tab{
    flex:1;
    text-align:center;
    padding:10px;
    font-size:13.5px;
    font-weight:600;
    color:var(--text-sub);
    cursor:pointer;
    border-radius:8px;
  }
  .auth-tab.active{
    background:var(--card);
    color:var(--text);
    box-shadow:0 2px 6px rgba(16,27,52,0.08);
  }
  .auth-note{
    font-size:11.5px;
    color:var(--text-sub);
    text-align:center;
    margin-top:12px;
    line-height:1.4;
  }

  .chat-fab{
    position:fixed;
    bottom:calc(20px + env(safe-area-inset-bottom));
    right:20px;
    background:var(--teal);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    padding:13px 18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(14,124,102,0.35);
    z-index:30;
    transition:transform .12s ease;
  }
  .chat-fab:hover{transform:translateY(-2px);}
  .chat-fab-icon{font-size:16px;}

  .chat-panel{
    display:none;
    position:fixed;
    bottom:calc(20px + env(safe-area-inset-bottom));
    right:20px;
    width:320px;
    max-width:calc(100vw - 40px);
    height:min(420px, 70vh);
    background:var(--card);
    border-radius:16px;
    box-shadow:0 20px 50px rgba(16,27,52,0.25);
    z-index:31;
    flex-direction:column;
    overflow:hidden;
  }
  .chat-panel.open{display:flex;}
  .chat-panel-header{
    background:var(--navy);
    color:#fff;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .chat-panel-title{font-weight:700; font-size:14.5px;}
  .chat-panel-sub{font-size:11.5px; color:#9FADC7; margin-top:2px;}
  .chat-close{cursor:pointer; font-size:16px; color:#C6CEDC;}

  .chat-body{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .chat-msg{
    max-width:80%;
    padding:10px 13px;
    border-radius:12px;
    font-size:13px;
    line-height:1.4;
  }
  .chat-msg.bot{
    background:var(--paper);
    color:var(--text);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }
  .chat-msg.user{
    background:var(--teal);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .chat-input-row{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid var(--line);
  }
  .chat-input-row input{
    flex:1;
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 14px;
    font-size:13px;
    font-family:'Inter',sans-serif;
    outline:none;
  }
  .chat-input-row input:focus{border-color:var(--teal);}
  .chat-send{
    background:var(--teal);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:10px 16px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }