/* ==========================================================
   WHY PRIMEVAULT
========================================================== */

.why {
  background: var(--background);
}

.section-heading {
  text-align: center;

  max-width: 700px;

  margin: 0 auto 70px;
}

.section-heading small {
  display: block;

  margin-bottom: 14px;

  font-weight: 600;

  letter-spacing: 2px;
}

.section-heading h2 {
  margin-bottom: 20px;
}

.why-grid {
  display: grid;

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

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

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

.why-item {
  padding: 50px 35px;
}

.why-item:not(:last-child) {
  border-right: 1px solid var(--border);
}

.why-icon {
  font-size: 38px;

  margin-bottom: 24px;
}

.why-item h3 {
  font-size: 24px;

  margin-bottom: 16px;
}

@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-item {
    border-right: none !important;

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

  .why-item:last-child {
    border-bottom: none;
  }
}


/* ==========================================================
   INVESTMENT PLANS
========================================================== */

.plans{

    background:var(--surface);

}

.plans-grid{

    display:grid;

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

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

}

.plan{

    position:relative;

    padding:50px 35px;

    background:var(--background);

}

.plan:not(:last-child){

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

}

.plan small{

    display:block;

    margin-bottom:20px;

    color:var(--text-secondary);

    letter-spacing:2px;

    font-weight:600;

}

.plan h3{

    font-size:52px;

    margin-bottom:10px;

}

.plan span{

    display:block;

    margin-bottom:30px;

    color:var(--text-secondary);

}

.plan hr{

    border:none;

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

    margin:30px 0;

}

.plan p{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

}

.plan .btn{

    margin-top:30px;

    width:100%;

}

.featured{

    background:var(--primary);

    color:var(--text-white);

}

.featured h3,

.featured p,

.featured span,

.featured small{

    color:var(--text-white);

}

.featured hr{

    border-color:rgba(255,255,255,.12);

}

.featured-tag{

    position:absolute;

    top:0;

    left:0;

    background:var(--accent);

    color:var(--primary);

    padding:8px 18px;

    font-size:12px;

    font-weight:700;

}

@media(max-width:1200px){

    .plans-grid{

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

    }

}

@media(max-width:768px){

    .plans-grid{

        grid-template-columns:1fr;

    }

    .plan{

        border-right:none !important;

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

    }

}

/* ==========================================================
   HOW IT WORKS
========================================================== */

.how-it-works{

    background:var(--background);

}

.steps{

    display:grid;

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

    gap:40px;

    margin-top:60px;

    position:relative;

}

.steps::before{

    content:"";

    position:absolute;

    top:35px;

    left:12%;

    right:12%;

    height:2px;

    background:var(--border);

    z-index:1;

}

.step{

    position:relative;

    text-align:center;

    z-index:2;

}

.step-number{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    background:var(--accent);

    color:var(--primary);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

}

.step h3{

    margin-bottom:15px;

}

.step p{

    max-width:240px;

    margin:auto;

}

@media(max-width:992px){

    .steps{

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

    }

    .steps::before{

        display:none;

    }

}

@media(max-width:768px){

    .steps{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   SECURITY
========================================================== */

.security{

    background:var(--background);

}

.security-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.security-list{

    margin-top:40px;

    display:grid;

    gap:25px;

}

.security-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.security-item span{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    font-size:26px;

}

.security-item h4{

    margin-bottom:8px;

}

.security-image img{

    width:100%;

    max-width:520px;

    margin:auto;

}

@media(max-width:992px){

    .security-wrapper{

        grid-template-columns:1fr;

    }

}


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

.cta{

    background:var(--primary);

    text-align:center;

    color:var(--text-white);

}

.cta h2{

    color:var(--text-white);

    margin:20px 0;

}

.cta p{

    color:#d5d5d5;

    max-width:650px;

    margin:0 auto 40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta .btn-outline{

    color:var(--text-white);

    border-color:#444;

}

.cta .btn-outline:hover{

    background:var(--text-white);

    color:var(--primary);

}


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

.faq{

    background:var(--surface);

}

.faq-container{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

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

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

    font-size:18px;

    font-weight:600;

    color:var(--text-primary);

    cursor:pointer;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.35s ease;

}

.faq-answer p{

    padding-bottom:25px;

}
/* ==========================================================
   GLOBAL PRESENCE
========================================================== */

.global{

    background:var(--surface);

}

.global .section-heading{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

}

.global-grid{

    display:grid;

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

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

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

}

.global-item{

    padding:50px 30px;

    text-align:center;

    transition:var(--transition);

}

.global-item:not(:last-child){

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

}

.global-item:hover{

    background:var(--background);

}

.global-item h3{

    font-size:54px;

    font-family:"Manrope", sans-serif;

    color:var(--accent);

    margin-bottom:12px;

    font-weight:800;

}

.global-item span{

    display:block;

    color:var(--text-secondary);

    font-size:16px;

    font-weight:500;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .global-grid{

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

    }

    .global-item:nth-child(2){

        border-right:none;

    }

    .global-item:nth-child(1),

    .global-item:nth-child(2){

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

    }

}

@media(max-width:768px){

    .global-grid{

        grid-template-columns:1fr;

    }

    .global-item{

        border-right:none !important;

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

    }

    .global-item:last-child{

        border-bottom:none;

    }

    .global-item h3{

        font-size:42px;

    }

}





/* ==========================================================
   WALLET SECURITY
========================================================== */

.wallet-security{

    background:var(--surface);

}

.wallet-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.wallet-card{

    background:#fff;

    padding:35px;

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

    border-radius:var(--radius-lg);

    transition:var(--transition);

}

.wallet-card:hover{

    transform:translateY(-6px);

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

}

.wallet-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(196,155,58,.12);

    font-size:32px;

    margin-bottom:25px;

}

.wallet-card h3{

    margin-bottom:15px;

}

.wallet-card p{

    color:var(--text-secondary);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .wallet-grid{

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

    }

}

@media(max-width:768px){

    .wallet-grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   PLATFORM STATISTICS
========================================================== */

.statistics{

    background:var(--surface);

}

.statistics .section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

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

.statistics-grid{

    display:grid;

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

    gap:25px;

}

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

.stat-card{

    background:#fff;

    padding:45px 30px;

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

    border-radius:var(--radius-lg);

    text-align:center;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.stat-card:hover{

    transform:translateY(-8px);

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

    border-color:var(--accent);

}

.stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--accent);

}

/* ==========================================================
   NUMBER
========================================================== */

.stat-card h3{

    font-size:52px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:15px;

    font-family:"Manrope",sans-serif;

    transition:var(--transition);

}

/* ==========================================================
   LABEL
========================================================== */

.stat-card span{

    display:block;

    color:var(--text-secondary);

    font-size:16px;

    font-weight:500;

    letter-spacing:.5px;

}

/* ==========================================================
   HOVER
========================================================== */

.stat-card:hover h3{

    color:var(--accent);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .statistics-grid{

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

    }

}

@media(max-width:768px){

    .statistics-grid{

        grid-template-columns:1fr;

    }

    .stat-card{

        padding:35px 25px;

    }

    .stat-card h3{

        font-size:42px;

    }

}



/* ==========================================================
   REFERRAL PROGRAM
========================================================== */

.referral{

    background:var(--background);

}

.referral .section-heading{

    max-width:720px;

    margin:0 auto 70px;

    text-align:center;

}

/* ==========================================================
   STEPS
========================================================== */

.referral-steps{

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr;

    align-items:center;

    gap:25px;

    margin-bottom:70px;

}

/* ==========================================================
   STEP
========================================================== */

.referral-step{

    text-align:center;

}

.step-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:rgba(196,155,58,.12);

    color:var(--accent);

    font-size:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.referral-step:hover .step-icon{

    background:var(--accent);

    color:#fff;

    transform:translateY(-8px);

}

.referral-step h3{

    margin-bottom:15px;

}

.referral-step p{

    max-width:250px;

    margin:auto;

}

/* ==========================================================
   ARROWS
========================================================== */

.step-arrow{

    font-size:34px;

    color:var(--accent);

    font-weight:bold;

}

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

.referral-features{

    display:grid;

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

    gap:20px;

    max-width:800px;

    margin:0 auto 50px;

}

.referral-features span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px 22px;

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

    border-radius:var(--radius-md);

    background:var(--surface);

    font-weight:500;

}

/* ==========================================================
   BUTTON
========================================================== */

.referral-button{

    text-align:center;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .referral-steps{

        grid-template-columns:1fr;

        gap:35px;

    }

    .step-arrow{

        transform:rotate(90deg);

        margin:auto;

    }

}

@media(max-width:768px){

    .referral-features{

        grid-template-columns:1fr;

    }

    .step-icon{

        width:75px;

        height:75px;

        font-size:30px;

    }

}


/* ==========================================================
   INVESTMENT JOURNEY
========================================================== */

.journey{

    background:var(--surface);

}

.journey .section-heading{

    max-width:700px;

    margin:0 auto 80px;

    text-align:center;

}

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

.journey-timeline{

    position:relative;

    display:grid;

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

    gap:25px;

}

.journey-timeline::before{

    content:"";

    position:absolute;

    top:42px;

    left:8%;

    right:8%;

    height:2px;

    background:var(--border);

    z-index:1;

}

/* ==========================================================
   STEP
========================================================== */

.journey-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.journey-number{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--background);

    border:3px solid var(--accent);

    color:var(--accent);

    font-size:30px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.journey-step:hover .journey-number{

    background:var(--accent);

    color:#fff;

    transform:scale(1.08);

}

.journey-step h3{

    font-size:20px;

    margin-bottom:12px;

}

.journey-step p{

    font-size:15px;

    line-height:1.7;

    color:var(--text-secondary);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

    .journey-timeline{

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

        row-gap:60px;

    }

    .journey-timeline::before{

        display:none;

    }

}

@media(max-width:768px){

    .journey{

        padding:80px 0;

    }

    .journey-timeline{

        grid-template-columns:1fr;

        gap:35px;

        position:relative;

    }

    .journey-step{

        display:flex;

        align-items:flex-start;

        gap:20px;

        text-align:left;

    }

    .journey-number{

        width:65px;

        height:65px;

        margin:0;

        font-size:22px;

        flex-shrink:0;

    }

    .journey-step h3{

        margin-bottom:8px;

        font-size:18px;

    }

    .journey-step p{

        margin:0;

        font-size:15px;

    }

}





/*======================================
ECOSYSTEM MARQUEE
======================================*/

.ecosystem{

    overflow:hidden;

    padding:30px 0;

    background:transparent;

}

.ecosystem-track{

    display:flex;

    align-items:center;

    width:max-content;

    animation:marquee 25s linear infinite;

}

.ecosystem-item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-right:70px;

    white-space:nowrap;

    font-size:20px;

    font-weight:600;

    color:var(--text-primary);

    letter-spacing:.3px;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.ecosystem:hover .ecosystem-track{

    animation-play-state:paused;

}

@media(max-width:768px){

    .ecosystem-item{

        font-size:16px;

        margin-right:50px;

        gap:10px;

    }

    .ecosystem-item i{

        font-size:18px;

    }

}


/* Prevent iPhone Safari from zooming on form fields */
input,
textarea,
select,
button {
    font-size: 16px;
}