*{box-sizing:border-box}
:root{
    --navy:#071a3a;
    --navy-2:#0a2450;
    --navy-3:#0d2d60;
    --cyan:#08d7e7;
    --cyan-2:#56edf6;
    --text:#f7fbff;
    --muted:#9eb1ca;
    --line:rgba(255,255,255,.08);
    --card:rgba(9,31,70,.76);
    --success:#38e0a3;
    --warning:#ffc857;
}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    font-family:Poppins,sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at 85% 5%,rgba(0,220,240,.13),transparent 25%),
      radial-gradient(circle at 15% 55%,rgba(35,92,190,.13),transparent 25%),
      linear-gradient(145deg,#05142e,#071a3a 50%,#06132c);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;display:flex}
.sidebar{
    position:fixed;left:0;top:0;bottom:0;width:252px;
    padding:30px 18px;display:flex;flex-direction:column;
    background:rgba(4,17,39,.82);backdrop-filter:blur(22px);
    border-right:1px solid var(--line);z-index:20;
}
.brand,.mobile-brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:800;letter-spacing:-.5px}
.brand-mark,
.brand-mark.small {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    background: transparent;
    border: none;
}

.brand-mark.small img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    background: transparent;
}
.side-nav{margin-top:48px;display:grid;gap:7px}
.side-link{
    border:0;background:transparent;color:var(--muted);display:flex;align-items:center;gap:13px;
    padding:14px 15px;border-radius:14px;text-align:left;transition:.2s
}
.side-link i{font-size:18px;width:21px}
.side-link:hover,.side-link.active{background:rgba(8,215,231,.1);color:#fff}
.side-link.active{box-shadow:inset 3px 0 0 var(--cyan)}
.sidebar-note{
    margin-top:auto;border:1px solid var(--line);background:rgba(255,255,255,.035);
    padding:14px;border-radius:16px;display:flex;gap:11px;color:var(--muted);font-size:11px;line-height:1.5
}
.sidebar-note i{font-size:21px;color:var(--cyan)}
.sidebar-note strong,.sidebar-note span{display:block}
.sidebar-note strong{color:#fff;font-size:12px;margin-bottom:3px}
.main-content{width:100%;margin-left:252px}
.topbar{
    height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;
    position:sticky;top:0;z-index:15;background:rgba(5,18,41,.7);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
}
.mobile-brand{display:none}
.topbar-actions{display:flex;align-items:center;gap:13px;margin-left:auto}
.icon-btn,.profile-chip{
    border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff
}
.icon-btn{width:42px;height:42px;border-radius:13px;position:relative}
.icon-btn i{font-size:18px}
.notification-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);right:9px;top:8px;box-shadow:0 0 0 3px rgba(8,215,231,.13)}
.profile-chip{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border-radius:15px}
.avatar,.big-avatar{display:grid;place-items:center;background:linear-gradient(145deg,#1bd8e7,#1576a4);color:#fff;font-weight:800}
.avatar{width:30px;height:30px;border-radius:10px}
.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.big-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-chip .profile-name{font-size:12px;font-weight:600}
.profile-chip i{font-size:12px;color:var(--muted)}
.page-wrap{max-width:1180px;margin:0 auto;padding:42px 42px 80px}
.welcome-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{margin:0 0 6px;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:1.7px}
h1,h2,p{margin-top:0}
h1{font-size:32px;letter-spacing:-1px;margin-bottom:6px}
h2{font-size:19px;letter-spacing:-.3px;margin-bottom:4px}
.muted{color:var(--muted);font-size:12px}
.prototype-badge{
    display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:99px;
    color:#aaf8ff;background:rgba(8,215,231,.08);border:1px solid rgba(8,215,231,.2);
    font-size:10px;font-weight:700
}
.wallet-hero{
    position:relative;overflow:hidden;padding:28px;border-radius:26px;
    background:linear-gradient(135deg,#0d2d62,#071a3a 65%);
    border:1px solid rgba(103,220,255,.15);box-shadow:0 25px 70px rgba(0,0,0,.22)
}
.wallet-hero:after{
    content:"";position:absolute;width:330px;height:330px;border-radius:50%;
    background:rgba(8,215,231,.08);right:-100px;top:-170px
}
.wallet-glow{position:absolute;width:170px;height:170px;background:rgba(8,215,231,.12);filter:blur(60px);left:25%;top:30%}
.wallet-top{position:relative;display:flex;justify-content:space-between;align-items:center;color:#91a9c9;font-size:10px;font-weight:700;letter-spacing:1.5px}
.eye-btn{background:transparent;border:0;color:#8ca4c3}
.wallet-amount{position:relative;font-size:42px;font-weight:800;letter-spacing:-2px;margin:12px 0 18px}
.wallet-meta{position:relative;display:flex;gap:55px;margin-bottom:23px}
.wallet-meta span,.summary-card span{display:block;color:#91a9c9;font-size:10px;margin-bottom:5px}
.wallet-meta strong{font-size:15px}
.primary-btn,.secondary-btn,.text-btn{
    border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s
}
.primary-btn{
    color:#04152d;background:linear-gradient(135deg,#57eff7,#09cddf);font-weight:800;
    padding:12px 17px;border-radius:13px;box-shadow:0 12px 30px rgba(8,215,231,.16)
}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.secondary-btn{
    background:rgba(8,215,231,.09);color:#aef9ff;border:1px solid rgba(8,215,231,.2);
    padding:9px 13px;border-radius:12px;font-size:11px;font-weight:700
}
.wallet-withdraw{position:relative}
.streak-card{
    margin-top:14px;padding:17px;border-radius:20px;border:1px solid var(--line);
    background:rgba(255,255,255,.035);display:flex;align-items:center;gap:14px
}
.streak-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:rgba(255,200,87,.11);color:var(--warning);font-size:21px}
.streak-copy{flex:1;min-width:0}
.streak-title{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.streak-title span{color:var(--warning);font-weight:700}
.streak-copy p{font-size:10px;color:var(--muted);margin:4px 0 9px}
.streak-bar{height:5px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.streak-bar span{display:block;width:20%;height:100%;background:linear-gradient(90deg,#ffbb4a,#ffe08a);border-radius:99px;transition:.4s}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:34px 0 14px}
.section-heading h2{margin:0}
.text-btn{background:none;color:var(--cyan);font-size:11px;font-weight:700;padding:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feature-card{
    border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;
    border-radius:18px;padding:16px;display:flex;align-items:center;gap:11px;text-align:left;
    min-height:86px;transition:.2s
}
.feature-card:hover{transform:translateY(-2px);border-color:rgba(8,215,231,.25);background:rgba(8,215,231,.06)}
.feature-card.cyan-card{background:linear-gradient(135deg,rgba(8,215,231,.11),rgba(255,255,255,.03))}
.feature-icon{width:39px;height:39px;border-radius:12px;background:rgba(8,215,231,.1);color:var(--cyan);display:grid;place-items:center;font-size:18px;flex:none}
.feature-card span:nth-child(2){flex:1;min-width:0}
.feature-card strong,.feature-card small{display:block}
.feature-card strong{font-size:12px;margin-bottom:3px}
.feature-card small{font-size:9px;color:var(--muted)}
.feature-card .arrow{color:#6e87a9;font-size:12px}
.feature-card.locked .feature-icon{color:#8398b7;background:rgba(255,255,255,.05)}
.page-section{display:none}.active-section{display:block}
.page-heading{align-items:flex-start;margin-top:0}
.page-heading h1{margin-bottom:3px}
.task-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mini-stat{padding:16px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.035)}
.mini-stat span{font-size:9px;color:var(--muted);display:block;margin-bottom:5px}.mini-stat strong{font-size:19px}
.task-list{display:grid;gap:10px}
.task-card{
    width:100%;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;
    border-radius:18px;padding:15px;display:flex;align-items:center;gap:13px;text-align:left;transition:.2s
}
.task-card:hover{border-color:rgba(8,215,231,.25);transform:translateY(-1px)}
.task-icon{width:44px;height:44px;border-radius:14px;background:rgba(8,215,231,.1);display:grid;place-items:center;color:var(--cyan);font-size:18px}
.task-info{flex:1}.task-info strong,.task-info span{display:block}.task-info strong{font-size:12px}.task-info span{font-size:10px;color:var(--muted);margin-top:3px}
.task-reward{font-weight:800;color:#9af7ff;font-size:13px;text-align:right}.task-reward small{font-weight:500;color:var(--muted);font-size:8px}
.task-arrow{color:var(--muted)}
.wallet-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.summary-card{position:relative;overflow:hidden;padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}
.summary-card strong{font-size:19px}.summary-card>i{position:absolute;right:16px;bottom:15px;color:rgba(8,215,231,.25);font-size:30px}
.panel{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:20px;padding:18px}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title strong{font-size:13px}.panel-title span{font-size:9px;color:var(--muted)}
.transaction-list{display:grid;gap:8px}
.transaction{
    display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;background:rgba(255,255,255,.025)
}
.transaction-icon{width:36px;height:36px;border-radius:11px;background:rgba(56,224,163,.09);color:var(--success);display:grid;place-items:center}
.transaction-copy{flex:1}.transaction-copy strong,.transaction-copy span{display:block}.transaction-copy strong{font-size:11px}.transaction-copy span{font-size:8px;color:var(--muted);margin-top:3px}
.transaction-amount{font-size:11px;font-weight:800;color:#9af7ff}
.empty-state{padding:36px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}
.empty-state i{font-size:28px;color:#587291}.empty-state p{color:#dbe7f5;font-size:12px;margin:8px 0 3px}.empty-state span{font-size:9px}
.loan-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px;border-radius:22px;background:linear-gradient(135deg,#0d326c,#071a3a);border:1px solid rgba(8,215,231,.14);margin-bottom:15px}
.loan-copy{max-width:700px}.loan-tag{display:inline-flex;gap:6px;align-items:center;color:#9af7ff;font-size:9px;background:rgba(8,215,231,.08);padding:7px 10px;border-radius:99px;margin-bottom:10px}.loan-copy h2{font-size:22px;margin-bottom:8px}.loan-copy p{font-size:10px;color:var(--muted);line-height:1.7;margin:0}.loan-big-icon{font-size:80px;color:rgba(8,215,231,.15)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid label{font-size:10px;color:#afc0d5}.form-grid label.full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{
    width:100%;margin-top:6px;border:1px solid var(--line);outline:0;color:#fff;background:#071a3a;
    border-radius:12px;padding:12px;font-size:11px
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:rgba(8,215,231,.45);box-shadow:0 0 0 3px rgba(8,215,231,.05)}
.consent-row{display:flex!important;align-items:flex-start;gap:9px!important;line-height:1.6}.consent-row input{width:auto!important;margin:3px 0 0!important;accent-color:var(--cyan)}
.wide{width:100%}
.loan-status{margin-top:14px;padding:15px;border:1px solid rgba(255,200,87,.2);background:rgba(255,200,87,.06);border-radius:17px;display:flex;gap:12px;align-items:flex-start}.loan-status.hidden{display:none}.status-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:var(--warning);background:rgba(255,200,87,.1)}.loan-status strong{font-size:11px}.loan-status p{font-size:9px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.profile-panel{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035)}.profile-cover{height:120px;background:radial-gradient(circle at 70% 20%,rgba(8,215,231,.3),transparent 35%),linear-gradient(120deg,#0a2858,#071a3a)}
.profile-body{padding:0 24px 24px;position:relative}.big-avatar{width:72px;height:72px;border-radius:22px;border:5px solid #071a3a;margin-top:-36px;font-size:24px}.profile-body h2{margin:11px 0 2px;font-size:21px}.profile-body>p{font-size:10px;color:var(--muted);margin-bottom:18px}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.profile-grid div{padding:13px;border:1px solid var(--line);border-radius:14px}.profile-grid span,.profile-grid strong{display:block}.profile-grid span{font-size:8px;color:var(--muted);margin-bottom:4px}.profile-grid strong{font-size:11px}.locked-panel{margin-top:12px;padding:16px;border:1px dashed var(--line);border-radius:17px;display:flex;gap:12px;align-items:center;color:var(--muted)}.locked-panel i{font-size:20px;color:#7690b2}.locked-panel strong,.locked-panel span{display:block}.locked-panel strong{font-size:11px;color:#fff;margin-bottom:2px}.locked-panel span{font-size:9px}
.bottom-nav{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(1,8,22,.72);backdrop-filter:blur(10px);z-index:100;display:none;align-items:flex-end;justify-content:center;padding:16px}
.modal-backdrop.open{display:flex}
.modal-card{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#0b2856,#061630);border-radius:25px;padding:25px;box-shadow:0 30px 100px rgba(0,0,0,.5);animation:modalUp .2s ease}
@keyframes modalUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal-close{position:absolute;right:15px;top:15px;border:0;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.06);color:#b6c8dd}
.modal-title{font-size:20px;margin:0 38px 5px 0}.modal-subtitle{font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.modal-hero-icon{width:55px;height:55px;border-radius:17px;background:rgba(8,215,231,.1);display:grid;place-items:center;color:var(--cyan);font-size:25px;margin-bottom:14px}
.modal-actions{display:flex;gap:9px;margin-top:18px}.modal-actions>*{flex:1}
.upload-zone{border:1px dashed rgba(8,215,231,.35);background:rgba(8,215,231,.04);border-radius:18px;padding:28px;text-align:center}.upload-zone i{font-size:35px;color:var(--cyan)}.upload-zone p{font-size:11px;margin:8px 0 3px}.upload-zone span{font-size:9px;color:var(--muted)}
.preview-image{display:block;width:100%;max-height:210px;object-fit:cover;border-radius:15px;margin:14px 0}
.call-screen{background:#04132c;border-radius:19px;padding:25px;text-align:center}.call-avatar{width:75px;height:75px;border-radius:50%;margin:auto;display:grid;place-items:center;background:linear-gradient(145deg,#19d8e8,#155f9b);font-size:28px;font-weight:800}.call-name{font-size:16px;font-weight:700;margin-top:12px}.call-status{font-size:9px;color:var(--success);margin:4px 0 22px}.call-timer{font-size:28px;font-weight:700;margin-bottom:20px}.call-controls{display:flex;justify-content:center;gap:12px}.call-control{width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}.call-control.end{background:#d74b58}
.survey-question{font-size:13px;font-weight:600;line-height:1.5;margin-bottom:15px}.survey-options{display:grid;gap:8px}.survey-option{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#dce8f6;padding:12px;border-radius:13px;text-align:left;font-size:10px}.survey-option.selected{border-color:var(--cyan);background:rgba(8,215,231,.08);color:#fff}
.chat-box{height:280px;overflow:auto;padding:12px;background:#04142d;border-radius:16px;display:flex;flex-direction:column;gap:9px}.bubble{max-width:82%;padding:9px 11px;border-radius:13px;font-size:10px;line-height:1.5}.bubble.bot{align-self:flex-start;background:rgba(255,255,255,.07);color:#dce7f3}.bubble.user{align-self:flex-end;background:rgba(8,215,231,.13);color:#bdfbff}.chat-form{display:flex;gap:8px;margin-top:10px}.chat-form input{flex:1;border:1px solid var(--line);background:#071a3a;color:#fff;border-radius:12px;padding:11px;font-size:10px;outline:0}.chat-form button{width:43px;border:0;border-radius:12px;background:var(--cyan);color:#03152e}
.bank-form{display:grid;gap:10px}.bank-form label{font-size:9px;color:var(--muted)}.bank-form input,.bank-form select{width:100%;margin-top:5px;background:#071a3a;color:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;font-size:10px;outline:0}
.toast{position:fixed;right:18px;bottom:18px;z-index:200;max-width:330px;background:#0b2856;border:1px solid rgba(8,215,231,.25);border-radius:15px;padding:13px 15px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:toastIn .2s ease}.toast strong,.toast span{display:block}.toast strong{font-size:11px}.toast span{font-size:9px;color:var(--muted);margin-top:3px}.toast.success{border-color:rgba(56,224,163,.25)}.toast.success strong{color:#9bf3ce}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:900px){.sidebar{width:210px}.main-content{margin-left:210px}.topbar{padding:0 25px}.page-wrap{padding:30px 25px 60px}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
    .sidebar{display:none}.main-content{margin-left:0}.topbar{height:65px;padding:0 15px}.mobile-brand{display:flex}.profile-chip{padding-right:7px}.profile-chip .profile-name,.profile-chip i{display:none}
    .page-wrap{padding:23px 15px 92px}.welcome-row{margin-bottom:20px}.welcome-row h1{font-size:25px}.prototype-badge{font-size:8px;padding:7px 9px}
    .wallet-hero{padding:22px;border-radius:22px}.wallet-amount{font-size:36px}.wallet-meta{gap:35px}.wallet-withdraw{width:100%}
    .streak-card{align-items:flex-start}.streak-card .secondary-btn{margin-left:auto}.feature-grid{grid-template-columns:1fr 1fr;gap:9px}.feature-card{min-height:82px;padding:12px;gap:8px}.feature-icon{width:34px;height:34px;font-size:15px}.feature-card strong{font-size:10px}.feature-card small{font-size:8px}.feature-card .arrow{display:none}
    .section-heading{margin-top:28px}.section-heading h2{font-size:17px}.text-btn{font-size:9px}.task-stat-row{gap:7px}.mini-stat{padding:13px}.mini-stat strong{font-size:15px}.task-reward{font-size:11px}
    .wallet-summary-grid{grid-template-columns:1fr 1fr}.summary-card:last-child{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.form-grid label.full{grid-column:auto}.loan-hero{padding:20px}.loan-big-icon{display:none}.loan-copy h2{font-size:18px}.page-heading .primary-btn{font-size:10px}
    .bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;height:65px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(4,17,39,.94);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:20px;z-index:50;box-shadow:0 20px 50px rgba(0,0,0,.35)}
    .bottom-link{border:0;background:none;color:#6f88a8;font-size:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.bottom-link i{font-size:18px}.bottom-link.active{color:var(--cyan)}
    .modal-backdrop{padding:8px}.modal-card{padding:21px;border-radius:22px}.modal-title{font-size:18px}.toast{left:15px;right:15px;bottom:85px;max-width:none}
}
@media(max-width:390px){.feature-grid{grid-template-columns:1fr}.wallet-meta{gap:22px}.wallet-amount{font-size:32px}}

.success-amount{font-size:34px;font-weight:800;color:#8ff4ca;margin:4px 0 18px}
.withdrawal-history-panel{margin-top:14px}
.withdrawal-list{display:grid;gap:8px}
.withdrawal-item{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;background:rgba(255,255,255,.025)}
.withdrawal-icon{width:36px;height:36px;border-radius:11px;background:rgba(255,200,87,.09);color:var(--warning);display:grid;place-items:center}
.withdrawal-copy{flex:1}.withdrawal-copy strong,.withdrawal-copy span,.withdrawal-copy small{display:block}
.withdrawal-copy strong{font-size:11px}.withdrawal-copy span{font-size:8px;color:#b8c8da;margin-top:2px}.withdrawal-copy small{font-size:8px;color:var(--muted);margin-top:2px}
.status-pill{font-size:8px;font-weight:800;padding:6px 8px;border-radius:99px}
.status-pill.pending{color:#ffe09a;background:rgba(255,200,87,.1);border:1px solid rgba(255,200,87,.16)}
.withdrawal-detail-box{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.withdrawal-detail-box span,.withdrawal-detail-box strong{display:block}.withdrawal-detail-box span{font-size:8px;color:var(--muted);margin-bottom:3px}.withdrawal-detail-box strong{font-size:10px}.pending-text{color:var(--warning)}
.activation-box{margin-top:12px;padding:13px;border:1px solid rgba(8,215,231,.16);background:rgba(8,215,231,.05);border-radius:15px;display:flex;gap:10px;align-items:flex-start}
.activation-box>i{color:var(--cyan);font-size:19px}.activation-box strong,.activation-box span{display:block}.activation-box strong{font-size:10px;margin-bottom:3px}.activation-box span{font-size:8px;color:var(--muted);line-height:1.5}
@media(max-width:720px){.withdrawal-detail-box{grid-template-columns:1fr}.withdrawal-item{align-items:flex-start}.status-pill{margin-left:auto}}

.loan-status-content {
    flex: 1;
}

.loan-activate-btn {
    margin-top: 12px;
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #ff4d5e;
    border-radius: 10px;

    color: #ffffff;
    background: #d90429;

    font-size: 9px;
    font-weight: 900;

    cursor: pointer;

    transition: 
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.loan-activate-btn:hover {
    background: #b80322;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 4, 41, 0.25);
}

.loan-activate-btn i {
    font-size: 12px;
    font-weight: 900;
}

.section-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading-actions .primary-btn {
    white-space: nowrap;
}

@media (max-width: 640px) {

    .section-heading-actions {
        gap: 6px;
    }

    .section-heading-actions .primary-btn {
        padding: 9px 12px;
        font-size: 12px;
    }

    .section-heading-actions .primary-btn i {
        display: none;
    }

}

/* =========================================================
   VIREON ABOUT PAGE
   COMPLETE PAGE CSS
========================================================= */

:root {
    --vireon-bg: #050b14;
    --vireon-bg-2: #08111d;
    --vireon-card: rgba(10, 22, 36, 0.88);
    --vireon-card-2: rgba(13, 28, 45, 0.95);

    --vireon-info: #00d9ff;
    --vireon-info-light: #65eaff;
    --vireon-gold: #ffd700;

    --vireon-white: #ffffff;
    --vireon-muted: rgba(255, 255, 255, 0.65);
    --vireon-border: rgba(0, 217, 255, 0.18);

    --vireon-radius: 22px;
    --vireon-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);

    --transition: all 0.3s ease;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(0, 217, 255, 0.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(0, 217, 255, 0.04),
            transparent 30%
        ),
        var(--vireon-bg);

    color: var(--vireon-white);
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

.page-wrapper {
    width: 100%;
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.section-padding {
    padding: 100px 0;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
}

.section-subtitle {
    max-width: 780px;
    color: var(--vireon-muted);
    font-size: 1rem;
    line-height: 1.9;
}

.about-text {
    color: var(--vireon-muted);
    line-height: 1.9;
    font-size: 1rem;
}

.glow-text {
    text-shadow:
        0 0 8px rgba(0, 217, 255, 0.25),
        0 0 25px rgba(0, 217, 255, 0.08);
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    padding: 15px 0;
    background: rgba(5, 11, 20, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 9999;
}

.navbar-brand img {
    width: 155px;
    height: auto;
}

.navbar-nav {
    gap: 8px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 9px 13px !important;
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--vireon-info) !important;
}

.navbar-toggler {
    border: 1px solid rgba(0, 217, 255, 0.3);
    color: var(--vireon-info);
    padding: 9px 12px;
    border-radius: 10px;
    box-shadow: none !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 48px;
    padding: 13px 25px;

    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: 700;

    transition: var(--transition);
    cursor: pointer;
}

.btn-primary-custom {
    color: #001018;
    background: linear-gradient(
        135deg,
        var(--vireon-info),
        var(--vireon-info-light)
    );

    box-shadow:
        0 8px 25px rgba(0, 217, 255, 0.2);
}

.btn-primary-custom:hover {
    color: #001018;
    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(0, 217, 255, 0.35);
}

.btn-secondary-custom {
    color: var(--vireon-info);
    background: rgba(0, 217, 255, 0.05);
    border: 1px solid rgba(0, 217, 255, 0.35);
}

.btn-secondary-custom:hover {
    color: #001018;
    background: var(--vireon-info);
    transform: translateY(-3px);
}

.btn-nav-register {
    padding: 10px 19px;
    min-height: 42px;
}


/* =========================================================
   HERO
========================================================= */

#hero-section {
    position: relative;
    min-height: 850px;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5, 11, 20, 0.96) 0%,
            rgba(5, 11, 20, 0.82) 45%,
            rgba(5, 11, 20, 0.35) 100%
        );
}

.hero-image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 11, 20, 0.98) 0%,
            rgba(5, 11, 20, 0.82) 40%,
            rgba(5, 11, 20, 0.25) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 11, 20, 1) 0%,
            transparent 35%
        );
}

.hero-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-img {
    width: 100%;
    height: 100%;
    min-height: 850px;
    object-fit: cover;
    object-position: center;
}

.hero-content-layer {
    position: relative;
    z-index: 2;
    min-height: 850px;
    padding-top: 110px;
}

.hero-text-col {
    padding-top: 60px;
}

.hero-title {
    margin-top: 25px;
    max-width: 800px;

    font-size: clamp(
        2.1rem,
        5vw,
        4.5rem
    );

    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1px;
}

.hero-title strong {
    color: var(--vireon-info);
    font-weight: 800;
    text-shadow:
        0 0 20px rgba(0, 217, 255, 0.15);
}

.hero-subtitle {
    max-width: 700px;
    margin-top: 25px;

    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    line-height: 1.9;
}

.hero-content-image {
    max-width: 530px;
}

.hero-content-image img {
    border: 1px solid rgba(0, 217, 255, 0.2);
}

.hero-buttons-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 270px;
}


/* =========================================================
   PARTNERS
========================================================= */

#partners-section {
    background:
        linear-gradient(
            180deg,
            var(--vireon-bg),
            var(--vireon-bg-2)
        );

    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);

    overflow: hidden;
}

.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 55px;
    width: max-content;

    animation: logoScroll 35s linear infinite;
}

.logo-track img {
    width: 55px;
    height: 55px;
    object-fit: contain;

    opacity: 0.55;
    filter: grayscale(1) brightness(1.7);

    transition: var(--transition);
}

.logo-track img:hover {
    opacity: 1;
    filter: grayscale(0);
}

.logo-stat {
    display: flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 600;
}

.logo-stat i {
    color: var(--vireon-info);
    font-size: 1.3rem;
}

@keyframes logoScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   ABOUT SECTION
========================================================= */

#about-section {
    background: var(--vireon-bg);
}

.about-image-wrapper {
    position: relative;
    border-radius: 25px;
    overflow: hidden;

    border: 1px solid rgba(0, 217, 255, 0.2);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.4);
}

.about-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(0, 217, 255, 0.08),
            transparent 50%
        );

    pointer-events: none;
}

.about-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-image-wrapper:hover .about-img {
    transform: scale(1.03);
}

#about-section .row.mt-5 {
    row-gap: 30px;
}

#about-section h4,
#about-section h3 {
    color: var(--vireon-info);
    font-weight: 800;
}

#about-section small {
    color: var(--vireon-muted);
}


/* =========================================================
   BETWEEN SECTION IMAGE
========================================================= */

.between-section-image {
    padding-top: 40px;
    padding-bottom: 40px;
}

.between-image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;

    border: 1px solid rgba(0, 217, 255, 0.15);
}

.between-section-img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.between-image-wrapper:hover .between-section-img {
    transform: scale(1.02);
}


/* =========================================================
   FEATURES
========================================================= */

#features-section {
    background:
        linear-gradient(
            180deg,
            var(--vireon-bg-2),
            var(--vireon-bg)
        );
}

.feature-box-link {
    display: block;
    height: 100%;
}

.feature-box {
    height: 100%;
    padding: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 30, 48, 0.95),
            rgba(6, 16, 28, 0.95)
        );

    border: 1px solid var(--vireon-border);
    border-radius: var(--vireon-radius);

    box-shadow: var(--vireon-shadow);

    transition: var(--transition);
}

.feature-box:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 217, 255, 0.45);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.45),
        0 0 25px rgba(0,217,255,0.08);
}

.feature-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    color: var(--vireon-info);

    background: rgba(0,217,255,0.08);

    border: 1px solid rgba(0,217,255,0.2);
    border-radius: 16px;

    font-size: 1.5rem;
}

.feature-title {
    margin-bottom: 12px;

    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.feature-desc {
    margin: 0;

    color: var(--vireon-muted);

    font-size: 0.92rem;
    line-height: 1.8;
}


/* =========================================================
   LOAN SECTION
========================================================= */

#loan-section {
    position: relative;
    background: var(--vireon-bg);
}

.loan-image-wrapper {
    position: relative;
    overflow: hidden;

    border-radius: 25px;

    border: 1px solid rgba(0, 217, 255, 0.18);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.4);
}

.loan-section-img {
    width: 100%;
    height: 560px;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.loan-image-wrapper:hover .loan-section-img {
    transform: scale(1.03);
}

.loan-benefits {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.loan-benefit {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.loan-benefit-icon {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--vireon-info);

    background: rgba(0,217,255,0.07);

    border: 1px solid rgba(0,217,255,0.18);
    border-radius: 14px;

    font-size: 1.25rem;
}

.loan-benefit h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 1.05rem;
    font-weight: 700;
}

.loan-benefit p {
    margin: 0;

    color: var(--vireon-muted);

    font-size: 0.9rem;
    line-height: 1.7;
}


/* =========================================================
   PACKAGE / REGISTRATION
========================================================= */

#packages-section {
    background:
        radial-gradient(
            circle at center,
            rgba(0,217,255,0.05),
            transparent 45%
        ),
        var(--vireon-bg-2);
}

.package-card-link {
    display: block;
    color: inherit;
}

.package-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(13, 27, 43, 0.98),
            rgba(6, 14, 25, 0.98)
        );

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 25px;

    transition: var(--transition);
}

.package-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

.package-card.popular {
    border-color: var(--vireon-gold) !important;
}

.most-popular-badge {
    position: absolute;
    top: 0;
    right: 0;

    padding: 9px 18px;

    color: #111;
    background: var(--vireon-gold);

    font-size: 0.7rem;
    font-weight: 800;

    border-bottom-left-radius: 15px;
}

.package-content {
    padding: 45px 35px 35px;
}

.package-price {
    margin: 10px 0 20px;

    color: var(--vireon-gold);

    font-size: 3.4rem;
    line-height: 1;

    font-weight: 900;

    text-shadow:
        0 0 20px rgba(255,215,0,0.12);
}

.package-currency {
    font-size: 1.7rem;
    vertical-align: top;
    margin-right: 3px;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 15px;

    color: rgba(255,255,255,0.8);

    font-size: 0.9rem;
}

.benefits-list i {
    color: var(--vireon-info);
    margin-top: 3px;
}


/* =========================================================
   FAQ
========================================================= */

#faq-cta-wrapper {
    background: var(--vireon-bg);
}

#faq {
    background:
        linear-gradient(
            180deg,
            var(--vireon-bg),
            var(--vireon-bg-2)
        );
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    overflow: hidden;

    background:
        rgba(10, 23, 38, 0.9);

    border: 1px solid rgba(0,217,255,0.12) !important;
    border-radius: 15px !important;
}

.accordion-button {
    padding: 21px 23px;

    color: #fff !important;
    background: transparent !important;

    box-shadow: none !important;

    font-size: 0.95rem;
    font-weight: 600;
}

.accordion-button::after {
    filter: invert(1);
    opacity: 0.7;
}

.accordion-button:not(.collapsed) {
    color: var(--vireon-info) !important;
}

.accordion-body {
    padding: 0 23px 22px;

    color: var(--vireon-muted);

    font-size: 0.9rem;
    line-height: 1.85;
}


/* =========================================================
   WHY JOIN STRIP
========================================================= */

[aria-label="Why join Vireon"] {
    background: var(--vireon-bg-2);
}

[aria-label="Why join Vireon"] .col-6 {
    padding: 25px 15px;
}

[aria-label="Why join Vireon"] i {
    filter:
        drop-shadow(
            0 0 10px rgba(0,217,255,0.25)
        );
}

[aria-label="Why join Vireon"] h3 {
    margin-bottom: 8px;
}


/* =========================================================
   CTA
========================================================= */

.cta-box {
    position: relative;

    padding: 70px 40px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0,217,255,0.09),
            transparent 60%
        ),
        rgba(9, 22, 36, 0.95);

    border: 1px solid rgba(0,217,255,0.2);
    border-radius: 30px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);
}

.cta-box::before {
    content: "";

    position: absolute;

    top: -100px;
    left: 50%;

    width: 250px;
    height: 250px;

    transform: translateX(-50%);

    background: rgba(0,217,255,0.08);

    border-radius: 50%;

    filter: blur(50px);

    pointer-events: none;
}

.cta-box h2,
.cta-box p,
.cta-box a,
.cta-box span {
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.cta-box p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

    line-height: 1.8;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 80px 0 25px;

    background:
        #030811;

    border-top: 1px solid rgba(0,217,255,0.08);
}

.footer-brand {
    display: inline-block;
    margin-bottom: 20px;
}

.footer-brand img {
    width: 170px;
    height: auto;
}

.footer-desc {
    max-width: 470px;

    color: var(--vireon-muted);

    font-size: 0.9rem;
    line-height: 1.9;
}

.footer-heading {
    margin-bottom: 20px;

    color: #fff;

    font-size: 1.05rem;
    font-weight: 700;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 13px;
}

.footer-links a {
    color: rgba(255,255,255,0.62);

    font-size: 0.88rem;

    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--vireon-info);
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,0.7);

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;

    transition: var(--transition);
}

.social-links a:hover {
    color: #001018;
    background: var(--vireon-info);

    border-color: var(--vireon-info);

    transform: translateY(-3px);
}

footer .border-top {
    border-color: rgba(255,255,255,0.08) !important;
}

.copyright {
    padding-top: 20px;

    color: rgba(255,255,255,0.4);

    font-size: 0.78rem;
}


/* =========================================================
   MOBILE STICKY SIGNUP
========================================================= */

#mobile-sticky-signup {
    display: none;

    position: fixed;

    left: 15px;
    right: 15px;
    bottom: 15px;

    z-index: 99999;

    align-items: center;
    justify-content: center;

    min-height: 55px;

    color: #001018;

    background:
        linear-gradient(
            135deg,
            var(--vireon-info),
            var(--vireon-info-light)
        );

    border-radius: 15px;

    font-size: 0.95rem;
    font-weight: 800;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.45),
        0 0 25px rgba(0,217,255,0.2);
}


/* =========================================================
   BADGES
========================================================= */

.badge {
    font-size: 0.72rem !important;
    letter-spacing: 0.2px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991.98px) {

    .section-padding {
        padding: 80px 0;
    }

    .navbar-collapse {
        margin-top: 15px;

        padding: 15px;

        background: rgba(5, 11, 20, 0.97);

        border: 1px solid rgba(0,217,255,0.1);

        border-radius: 15px;
    }

    .navbar-nav {
        gap: 2px;
    }

    .nav-link {
        padding: 12px !important;
    }

    #hero-section,
    .hero-content-layer {
        min-height: auto;
    }

    .hero-img {
        min-height: 800px;
    }

    .hero-content-layer {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .hero-text-col {
        padding-top: 30px;
    }

    .hero-title {
        font-size: clamp(2.3rem, 7vw, 4rem);
    }

    .hero-buttons-col {
        justify-content: flex-start;
        margin-top: 40px;
    }

    .hero-buttons-container {
        flex-direction: row;
        max-width: 500px;
    }

    .about-img {
        height: 500px;
    }

    .loan-section-img {
        height: 500px;
    }

    #mobile-sticky-signup {
        display: flex;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767.98px) {

    body {
        padding-bottom: 75px;
    }

    .section-padding {
        padding: 65px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    .navbar {
        padding: 10px 0;
    }

    .navbar-brand img {
        width: 125px;
    }

    #hero-section {
        min-height: 100vh;
    }

    .hero-img {
        min-height: 900px;
        object-position: center;
    }

    .hero-image-wrapper::after {
        background:
            linear-gradient(
                180deg,
                rgba(5,11,20,0.92) 0%,
                rgba(5,11,20,0.72) 40%,
                rgba(5,11,20,0.96) 100%
            );
    }

    .hero-content-layer {
        min-height: 100vh;
        padding-top: 110px;
        padding-bottom: 70px;
    }

    .hero-text-col {
        padding-top: 15px;
    }

    .hero-title {
        margin-top: 20px;

        font-size: 2.05rem;
        line-height: 1.14;
        letter-spacing: -0.5px;
    }

    .hero-subtitle {
        margin-top: 18px;

        font-size: 0.9rem;
        line-height: 1.75;
    }

    .hero-content-image {
        max-width: 100%;
        margin-top: 25px !important;
    }

    .hero-buttons-col {
        margin-top: 30px;
        justify-content: center;
    }

    .hero-buttons-container {
        flex-direction: column;
        width: 100%;
        max-width: none;
    }

    .hero-buttons-container .btn-custom {
        width: 100%;
    }

    .logo-track {
        gap: 35px;
    }

    .logo-track img {
        width: 45px;
        height: 45px;
    }

    .logo-stat {
        font-size: 0.72rem;
    }

    .about-img {
        height: 380px;
    }

    .between-section-img {
        min-height: 250px;
        object-fit: cover;
    }

    .feature-box {
        padding: 26px;
    }

    .feature-title {
        font-size: 1.1rem;
    }

    .feature-desc {
        font-size: 0.86rem;
    }

    .loan-section-img {
        height: 350px;
    }

    .loan-benefit {
        gap: 13px;
    }

    .loan-benefit-icon {
        flex: 0 0 45px;

        width: 45px;
        height: 45px;
    }

    .loan-benefit h3 {
        font-size: 0.98rem;
    }

    .loan-benefit p {
        font-size: 0.84rem;
    }

    .package-content {
        padding: 40px 23px 25px;
    }

    .package-price {
        font-size: 2.8rem;
    }

    .package-card {
        transform: none !important;
    }

    .package-card:hover {
        transform: translateY(-5px) !important;
    }

    .benefits-list li {
        font-size: 0.84rem;
    }

    .accordion-button {
        padding: 18px;

        font-size: 0.88rem;
    }

    .accordion-body {
        padding: 0 18px 20px;

        font-size: 0.84rem;
        line-height: 1.75;
    }

    [aria-label="Why join Vireon"] .col-6 {
        padding: 18px 10px;
    }

    [aria-label="Why join Vireon"] small {
        display: block;
        font-size: 0.72rem;
        line-height: 1.6;
    }

    .cta-box {
        padding: 45px 20px;
        border-radius: 22px;
    }

    .cta-box h2 {
        font-size: 1.8rem;
    }

    .cta-box p {
        font-size: 0.88rem !important;
    }

    footer {
        padding: 60px 0 25px;
    }

    .footer-desc {
        font-size: 0.84rem;
    }

    .footer-heading {
        margin-top: 15px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 0.84rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .package-price {
        font-size: 2.5rem;
    }

    .most-popular-badge {
        font-size: 0.62rem;
        padding: 8px 13px;
    }

    .btn-custom {
        padding: 12px 18px;
        font-size: 0.82rem;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--vireon-info);
    outline-offset: 3px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   OPTIONAL SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #030811;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,217,255,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,217,255,0.55);
}


 /* =====================================================
   FAST TRACK ACTIVATION WIDGET
===================================================== */

.fast-track-widget {
    position: fixed;
    right: 22px;
    bottom: 95px;
    z-index: 9990;
    font-family: inherit;
}


/* =====================================================
   FLOATING TRIGGER
===================================================== */

.fast-track-trigger {
    border: 0;
    background: transparent;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;
}


/* Text above / beside icon */

.fast-track-label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0,0,0,.25);
    animation: fastTrackPulse 2s infinite;
}

.fast-track-label small {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
}

/* Floating icon */

.fast-track-icon {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #16804b;
    color: #fff;

    font-size: 23px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

    border: 4px solid rgba(255,255,255,.9);

    animation: fastTrackFloat 3s ease-in-out infinite;

    position: relative;
}


/* Online indicator */

.fast-track-icon::after {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    right: 1px;
    top: 1px;

    border-radius: 50%;

    background: #22c55e;

    border: 2px solid #fff;

}


/* =====================================================
   PANEL
===================================================== */

.fast-track-panel {

    position: absolute;

    right: 0;
    bottom: 72px;

    width: 390px;
    max-width: calc(100vw - 30px);

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);

    border: 1px solid #e5e7eb;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(.97);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


.fast-track-panel.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


/* =====================================================
   HEADER
===================================================== */

.fast-track-header {

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 17px;

    background: #16804b;

    color: #fff;
}


.fast-track-header-icon {

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(255,255,255,.15);

    font-size: 20px;
}


.fast-track-header > div:nth-child(2) {

    display: flex;
    flex-direction: column;

    min-width: 0;
}


.fast-track-header strong {

    font-size: 15px;
}


.fast-track-header span {

    margin-top: 2px;

    font-size: 11px;

    opacity: .85;
}


.fast-track-close {

    margin-left: auto;

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 9px;

    background:
        rgba(255,255,255,.12);

    color: #fff;

    cursor: pointer;
}


/* =====================================================
   BODY
===================================================== */

.fast-track-body {

    padding: 15px;

    max-height: 70vh;

    overflow-y: auto;
}


/* =====================================================
   PRICE
===================================================== */

.fast-track-price {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 14px;

    margin-bottom: 12px;

    border-radius: 13px;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
}


.fast-track-price span {

    font-size: 12px;

    color: #166534;
}


.fast-track-price strong {

    font-size: 20px;

    color: #15803d;
}


/* =====================================================
   PAYMENT CARDS
===================================================== */

.payment-method-card,
.foreign-payment-card {

    border: 1px solid #e5e7eb;

    border-radius: 15px;

    padding: 14px;

    margin-bottom: 12px;
}


.payment-method-title,
.foreign-title {

    display: flex;
    align-items: center;

    gap: 10px;
}


.method-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}


.method-icon.nigeria {

    background: #ecfdf5;
    color: #15803d;
}


.method-icon.foreign {

    background: #eff6ff;
    color: #2563eb;
}


.payment-method-title div,
.foreign-title div {

    display: flex;
    flex-direction: column;
}


.payment-method-title strong,
.foreign-title strong {

    font-size: 13px;

    color: #111827;
}


.payment-method-title small,
.foreign-title small {

    margin-top: 2px;

    font-size: 10px;

    color: #6b7280;
}


/* =====================================================
   INSTRUCTIONS
===================================================== */

.payment-instruction {

    margin-top: 13px;

    font-size: 11px;

    color: #4b5563;

    line-height: 1.55;
}


.payment-instruction strong {

    display: block;

    margin-bottom: 3px;

    color: #111827;

    font-size: 12px;
}


.payment-instruction p {

    margin: 0;
}


/* =====================================================
   ACCOUNT DETAILS
===================================================== */

.account-details {

    margin-top: 10px;

    border-radius: 11px;

    overflow: hidden;

    border: 1px solid #e5e7eb;
}


.account-row {

    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 9px 10px;

    background: #f9fafb;

    border-bottom: 1px solid #e5e7eb;
}


.account-row:last-child {

    border-bottom: 0;
}


.account-row span {

    font-size: 10px;

    color: #6b7280;
}


.account-row strong {

    font-size: 11px;

    color: #111827;

    text-align: right;
}


/* =====================================================
   ACCOUNT NUMBER COPY
===================================================== */

.account-number-row {

    align-items: center;

}


.account-number-copy-wrap {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    min-width: 0;

}


.account-number-copy-wrap strong {

    white-space: nowrap;

}


.copy-account-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    border: 1px solid #bbf7d0;

    border-radius: 7px;

    padding: 5px 7px;

    background: #ecfdf5;

    color: #15803d;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.copy-account-btn:hover {

    background: #dcfce7;

    transform: translateY(-1px);

}


.copy-account-btn i {

    font-size: 10px;

}


.copy-account-btn.copied {

    background: #15803d;

    color: #fff;

    border-color: #15803d;

}


/* =====================================================
   PAYMENT NOTE
===================================================== */

.payment-note {

    display: flex;

    gap: 8px;

    margin-top: 10px;

    padding: 9px;

    border-radius: 10px;

    background: #fffbeb;

    color: #92400e;

    font-size: 10px;

    line-height: 1.45;
}


.payment-note i {

    flex: 0 0 auto;

    margin-top: 1px;
}


/* =====================================================
   FOREIGN PAYMENT
===================================================== */

.foreign-payment-card {

    background: #f8fbff;

    border-color: #dbeafe;
}


.foreign-payment-card p {

    margin: 11px 0;

    color: #4b5563;

    font-size: 11px;

    line-height: 1.55;
}


.selar-payment-btn {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    padding: 11px 13px;

    border-radius: 10px;

    text-decoration: none;

    background: #2563eb;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.selar-payment-btn:hover {

    color: #fff;

    opacity: .92;

    transform: translateY(-1px);
}


.selar-payment-btn i:last-child {

    margin-left: auto;
}


.foreign-note {

    display: block;

    margin-top: 8px;

    color: #6b7280;

    font-size: 9px;

    line-height: 1.4;
}


/* =====================================================
   SUPPORT
===================================================== */

.activation-support {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px;

    border-radius: 11px;

    background: #f9fafb;

    border: 1px solid #e5e7eb;
}


.activation-support > i {

    width: 32px;
    height: 32px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ecfdf5;

    color: #15803d;
}


.activation-support div {

    display: flex;
    flex-direction: column;
}


.activation-support strong {

    font-size: 11px;

    color: #111827;
}


.activation-support span {

    margin-top: 2px;

    font-size: 9px;

    color: #6b7280;

    line-height: 1.4;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fastTrackFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes fastTrackPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .65;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

    .fast-track-widget {

        right: 12px;

        bottom: 80px;

    }


    .fast-track-icon {

        width: 53px;
        height: 53px;

        font-size: 21px;

    }


    .fast-track-label {

        font-size: 11px;

    }


    .fast-track-label small {

        font-size: 9px;

    }


    .fast-track-panel {

        width: calc(100vw - 24px);

        right: -1px;

        bottom: 66px;

        border-radius: 17px;

    }


    .fast-track-body {

        max-height: 72vh;

    }


    .account-number-copy-wrap {

        gap: 5px;

    }


    .copy-account-btn {

        padding: 5px 6px;

        font-size: 8px;

    }

}