.page{

    padding:40px;

}

.page-header{

    margin-bottom:40px;

}

.page-header h1{

    font-size:42px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:10px;

}

.page-header p{

    color:#64748b;

    font-size:18px;

}

.market-hero{

    display:grid;

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

    gap:24px;

    margin-bottom:50px;

}

.market-summary{

    background:#ffffff;

    border-radius:20px;

    padding:28px;

    border:1px solid #e5e7eb;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.market-summary h2{

    font-size:15px;

    color:#64748b;

    margin-bottom:18px;

}

.hero-value{

    font-size:38px;

    font-weight:800;

    color:#2563eb;

    margin-bottom:15px;

}

.hero-change{

    font-weight:700;

}

.hero-change.up{

    color:#16a34a;

}

.hero-change.down{

    color:#dc2626;

}

.hero-badge{

    display:inline-block;

    background:#22c55e;

    color:#fff;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.market-category{

    margin-top:60px;

}

.market-category h2{

    font-size:28px;

    margin-bottom:24px;

    color:#111827;

}

.market-grid{

    display:grid;

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

    gap:24px;

}

.market-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:20px;

    padding:24px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:.25s;

}

.market-card:hover{

    transform:translateY(-6px);

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

}

.market-card h3{

    font-size:20px;

    margin-bottom:18px;

    color:#111827;

}

.market-card strong{

    display:block;

    font-size:32px;

    margin-bottom:16px;

    color:#2563eb;

}

.market-card p{

    color:#64748b;

    line-height:1.7;

    margin:6px 0;

}

@media(max-width:1200px){

    .market-hero{

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

    }

}

@media(max-width:768px){

    .page{

        padding:20px;

    }

    .market-hero{

        grid-template-columns:1fr;

    }

    .market-grid{

        grid-template-columns:1fr;

    }

    .hero-value{

        font-size:30px;

    }

}