/* ========================================
   FASTCOINS HOME PAGE
======================================== */

:root{
    --home-bg:#0f172a;
    --home-bg-light:#1e293b;

    --home-card:#162033;
    --home-card-hover:#1d2940;

    --home-text:#ffffff;
    --home-text-muted:#94a3b8;

    --home-primary:#fbbf24;
    --home-primary-dark:#f59e0b;

    --home-border:rgba(255,255,255,.08);

    --home-radius:18px;

    --home-shadow:
        0 10px 30px rgba(0,0,0,.25);

    --home-transition:.3s ease;
}

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

body{
    background:var(--home-bg);
    color:var(--home-text);
}

section{
    padding:90px 0;
}

.section-title{
    text-align:center;
    font-size:2.2rem;
    margin-bottom:60px;
    font-weight:700;
}

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

.home-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;
    transition:var(--home-transition);
}

.home-btn-primary{
    background:linear-gradient(
        135deg,
        var(--home-primary),
        var(--home-primary-dark)
    );
    color:#111827;
}

.home-btn-primary:hover{
    transform:translateY(-3px);
}

.home-btn-outline{
    border:1px solid var(--home-border);
    color:#fff;
    margin-left:12px;
}

.home-btn-outline:hover{
    background:rgba(255,255,255,.05);
}

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

.hero{
    padding-top:120px;
    padding-bottom:100px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.hero-badge{
    display:inline-block;
    background:rgba(251,191,36,.15);
    color:var(--home-primary);
    border:1px solid rgba(251,191,36,.3);
    padding:8px 16px;
    border-radius:999px;
    margin-bottom:25px;
}

.hero h1{
    font-size:4rem;
    line-height:1.1;
    margin-bottom:20px;
}

.hero h1 span{
    color:var(--home-primary);
}

.hero-text{
    color:var(--home-text-muted);
    font-size:1.1rem;
    line-height:1.8;
    max-width:550px;
    margin-bottom:35px;
}

.hero-buttons{
    margin-bottom:45px;
}

.hero-stats{
    display:flex;
    gap:40px;
}

.hero-stat strong{
    display:block;
    font-size:1.5rem;
}

.hero-stat span{
    color:var(--home-text-muted);
}

/* ========================================
   DASHBOARD MOCKUP
======================================== */

.dashboard-card{
    background:linear-gradient(
        180deg,
        #1e293b,
        #111827
    );
    border-radius:24px;
    padding:25px;
    box-shadow:var(--home-shadow);
    border:1px solid var(--home-border);
}

.dashboard-header{
    display:flex;
    gap:8px;
    margin-bottom:30px;
}

.dashboard-header span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#475569;
}

.balance-card{
    background:rgba(251,191,36,.08);
    border:1px solid rgba(251,191,36,.15);
    padding:25px;
    border-radius:18px;
}

.balance-card small{
    color:var(--home-text-muted);
}

.balance-card h2{
    margin-top:10px;
    color:var(--home-primary);
}

.mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:25px;
}

.mini-stats div{
    background:var(--home-card);
    padding:20px;
    border-radius:15px;
}

.mini-stats strong{
    display:block;
    margin-bottom:5px;
}

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

.partners-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.partner-card{
    background:var(--home-card);
    padding:25px;
    text-align:center;
    border-radius:var(--home-radius);
    border:1px solid var(--home-border);
    font-weight:600;
}

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

.steps-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.step-card{
    background:var(--home-card);
    padding:35px;
    border-radius:var(--home-radius);
    text-align:center;
    border:1px solid var(--home-border);
    transition:var(--home-transition);
}

.step-card:hover{
    transform:translateY(-8px);
}

.step-number{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--home-primary);
    color:#111827;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 20px;
    font-weight:700;
}

/* ========================================
   EARN METHODS
======================================== */

.earn-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.earn-card{
    background:var(--home-card);
    padding:30px;
    border-radius:var(--home-radius);
    border:1px solid var(--home-border);
    transition:var(--home-transition);
}

.earn-card:hover{
    background:var(--home-card-hover);
    transform:translateY(-5px);
}

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

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{
    background:var(--home-card);
    padding:35px;
    text-align:center;
    border-radius:var(--home-radius);
    border:1px solid var(--home-border);
}

.stat-card h3{
    color:var(--home-primary);
    font-size:2rem;
    margin-bottom:10px;
}

/* ========================================
   PAYOUT TABLE
======================================== */

.table-wrapper{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    background:var(--home-card);
    border-radius:var(--home-radius);
    overflow:hidden;
}

thead{
    background:rgba(251,191,36,.1);
}

th,
td{
    padding:18px;
    text-align:left;
}

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

tbody tr:hover{
    background:rgba(255,255,255,.03);
}

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

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.feature-card{
    background:var(--home-card);
    padding:25px;
    border-radius:var(--home-radius);
    border:1px solid var(--home-border);
    text-align:center;
    font-weight:600;
}

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

.cta-section{
    text-align:center;
}

.cta-section .container{
    background:linear-gradient(
        135deg,
        rgba(251,191,36,.15),
        rgba(245,158,11,.08)
    );

    border:1px solid rgba(251,191,36,.15);

    padding:70px 40px;

    border-radius:30px;
}

.cta-section h2{
    font-size:2.5rem;
    margin-bottom:15px;
}

.cta-section p{
    color:var(--home-text-muted);
    margin-bottom:30px;
}

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

.partner-card:hover,
.feature-card:hover,
.stat-card:hover{
    transform:translateY(-5px);
    transition:var(--home-transition);
}

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

@media (max-width:992px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .steps-grid,
    .stats-grid,
    .partners-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .earn-grid,
    .features-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hero h1{
        font-size:3rem;
    }
}

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .hero{
        text-align:center;
    }

    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    .steps-grid,
    .earn-grid,
    .stats-grid,
    .features-grid,
    .partners-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:2.4rem;
    }

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

    .home-btn-outline{
        margin-left:0;
        margin-top:10px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:10px;
    }
}