/* ==========================================================
   ZYTRIX COMPONENT LIBRARY
   wealth.hi-systems.africa
   Version 0.1
==========================================================*/


/* ==========================================================
   NAVIGATION
==========================================================*/

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(5,7,11,.78);

    border-bottom:1px solid var(--border);

}

.navbar-inner{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.nav-links{

    display:flex;

    gap:32px;

}

.nav-links a{

    color:var(--muted);

    transition:.25s;

}

.nav-links a:hover{

    color:white;

}



/* ==========================================================
   LOGO
==========================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    font-weight:700;

}

.logo-mark{

    width:42px;

    height:42px;

    border-radius:12px;

    background:linear-gradient(135deg,#00D084,#06B6D4);

}



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

.hero-title{

    font-size:4.5rem;

    line-height:1.05;

    letter-spacing:-3px;

}

.hero-subtitle{

    font-size:1.15rem;

    color:var(--muted);

    margin-top:28px;

}



/* ==========================================================
   BADGE
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 20px;

    border-radius:999px;

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

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

}



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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 30px;

    border-radius:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.btn-primary{

    background:var(--green);

    color:#04130A;

}

.btn-secondary{

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

    background:transparent;

    color:white;

}

.btn:hover{

    transform:translateY(-3px);

}



/* ==========================================================
   INFORMATION CARD
==========================================================*/

.info-card{

    padding:36px;

    border-radius:24px;

    background:var(--surface);

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

    transition:.3s;

}

.info-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,208,132,.35);

}



/* ==========================================================
   ICON BOX
==========================================================*/

.icon-box{

    width:68px;

    height:68px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111A25;

}



/* ==========================================================
   METRIC CARD
==========================================================*/

.metric{

    text-align:center;

    padding:40px;

}

.metric-value{

    font-size:2.8rem;

    font-weight:800;

}

.metric-label{

    color:var(--muted);

}



/* ==========================================================
   TIMELINE ITEM
==========================================================*/

.timeline-item{

    display:flex;

    gap:22px;

}

.timeline-node{

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--green);

    margin-top:8px;

}



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

.faq-item{

    padding:28px;

    border-bottom:1px solid var(--border);

}

.faq-question{

    font-weight:600;

    cursor:pointer;

}

.faq-answer{

    margin-top:18px;

    color:var(--muted);

}



/* ==========================================================
   COMMISSION TABLE
==========================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    text-align:left;

    padding:22px;

    background:#0F172A;

}

.table td{

    padding:22px;

    border-top:1px solid var(--border);

}



/* ==========================================================
   STATUS CHIP
==========================================================*/

.status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    font-size:.85rem;

}

.status-online{

    background:rgba(0,208,132,.12);

    color:#00D084;

}

.status-development{

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

    color:#4F8CFF;

}



/* ==========================================================
   CALLOUT
==========================================================*/

.callout{

    padding:36px;

    border-left:4px solid var(--green);

    background:#0C131C;

}



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

.footer{

    border-top:1px solid var(--border);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:var(--muted);

}

.footer-links a:hover{

    color:white;

}



/* ==========================================================
   DIVIDER
==========================================================*/

.hr{

    width:100%;

    height:1px;

    background:var(--border);

}