/* ==========================================================
   ZYTRIX LAYOUT SYSTEM
   wealth.hi-systems.africa
   Version 0.1
========================================================== */


/* ==========================================================
   APPLICATION
========================================================== */

#application{

    width:100%;

    min-height:100vh;

    overflow-x:hidden;

}



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

.section{

    position:relative;

    width:100%;

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:180px 0;

}



/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(1320px,92%);

    margin:0 auto;

}



/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}



/* ==========================================================
   FLEX
========================================================== */

.flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.column{

    flex-direction:column;

}

.wrap{

    flex-wrap:wrap;

}

.gap-sm{

    gap:16px;

}

.gap-md{

    gap:32px;

}

.gap-lg{

    gap:48px;

}



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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

.hero-content{

    width:min(900px,100%);

}

.hero-actions{

    display:flex;

    gap:20px;

    margin-top:42px;

}



/* ==========================================================
   SPLIT LAYOUT
========================================================== */

.split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



/* ==========================================================
   STACK
========================================================== */

.stack>*+*{

    margin-top:24px;

}



/* ==========================================================
   CARD GRID
========================================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:28px;

}



/* ==========================================================
   FEATURE GRID
========================================================== */

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}



/* ==========================================================
   METRICS
========================================================== */

.metrics{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}



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

.timeline{

    display:flex;

    flex-direction:column;

    gap:28px;

}



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

.faq{

    width:min(900px,100%);

    margin:auto;

}



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

.cta{

    text-align:center;

    padding:100px 60px;

}



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

.footer{

    padding:80px 0 40px;

}

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr

    1fr

    1fr

    1fr;

    gap:48px;

}



/* ==========================================================
   SPACING HELPERS
========================================================== */

.mt-sm{margin-top:16px;}
.mt-md{margin-top:32px;}
.mt-lg{margin-top:48px;}
.mt-xl{margin-top:80px;}

.mb-sm{margin-bottom:16px;}
.mb-md{margin-bottom:32px;}
.mb-lg{margin-bottom:48px;}
.mb-xl{margin-bottom:80px;}