/* =========================
   STAKEON GLOBAL STYLES
========================= */

:root {
    --primary: #f0b90b;
    --bg: #0b0e11;
    --card: #161a1e;
    --text: #ffffff;
    --muted: #a7b1bc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: verdana;
    background: var(--bg);
    color: var(--text);
}

a {
    text-decoration: none;
    color: inherit;
}

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

.container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

/* =========================
   NAVBAR
========================= */

.navbar {
    background: #0b0e11;
    border-bottom: 1px solid #222;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: var(--text);
    font-size: 15px;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-buttons {
    display: flex;
    gap: 15px;
}

.btn {
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: bold;
}

.btn-outline {
    border: 0px solid var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
}
/*navbar mobile*/

/* NAVBAR */

.navbar {

background:#0b0e11;
padding:15px 0;
border-bottom:1px solid #222;
position:sticky;
top:0;
z-index:1000;

}

.nav-wrapper {

display:flex;
align-items:center;
justify-content:space-between;

}

.nav-right {

display:flex;
align-items:center;
gap:15px;

}

.logo {

font-size:22px;
font-weight:bold;
color:#f0b90b;

}

.nav-links {

display:flex;
gap:25px;

}

.nav-links a {

color:#fff;

}

.nav-buttons {

display:flex;
gap:15px;

}


/* MENU TOGGLE */

.menu-toggle {

display:none;
font-size:26px;
cursor:pointer;
color:white;

}


/* SIDEBAR */

.sidebar {

position:fixed;
top:0;
left:-280px;
width:280px;
height:100%;
background:#0b0e11;
z-index:2000;
transition:0.3s;
padding:20px;

}

.sidebar.active {

left:0;

}

.sidebar-header {

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;

}

.close-btn {

font-size:22px;
cursor:pointer;

}

.sidebar-links {

display:flex;
flex-direction:column;
gap:20px;

}

.sidebar-links a {

color:#fff;
font-size:16px;

}

.signup-link {

color:#f0b90b;

}


/* OVERLAY */

.overlay {

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
z-index:1500;

}

.overlay.active {

display:block;

}


/* MOBILE */

@media(max-width:900px){

.menu-toggle {

display:block;

}

.nav-links {

display:none;

}

.nav-buttons {

display:none;

}

}

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

.hero {
    padding: 80px 0;
}

.hero-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-text p {
    color: var(--muted);
    margin-bottom: 30px;
    font-size: 18px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
}

.hero-image img {
    width: 100%;
}

/* =========================
   MARKETS
========================= */

.markets {
    padding: 60px 0;
}

.section-title {
    font-size: 32px;
    margin-bottom: 30px;
}

.market-table {
    width: 100%;
}

.market-row {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #222;
}

.market-row:hover {
    background: #111;
}

/* =========================
   CARDS
========================= */

.cards {
    padding: 60px 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 20px;
}

.card {
    background: var(--card);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #222;
}

.card:hover {
    border-color: var(--primary);
}

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

.features {
    padding: 60px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
}

.feature {
    text-align: center;
}

.feature h3 {
    margin-top: 10px;
}

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

.cta {
    padding: 80px 0;
    text-align: center;
}

.cta h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px) {

.hero-wrapper {
    flex-direction: column;
}

.hero-text h1 {
    font-size: 32px;
}

.nav-links {
    display: none;
}

}


/* MARKETS EXACT STYLE */

.markets-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.see-all {
color:var(--primary);
}

.market-table {
width:100%;
}

.market-head,
.market-row {
display:grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
padding:15px;
align-items:center;
}

.market-head {
color:var(--muted);
border-bottom:1px solid #222;
}

.market-row {
border-bottom:1px solid #111;
transition:0.2s;
}

.market-row:hover {
background:#11161c;
}

.contract {
display:flex;
align-items:center;
gap:10px;
}

.contract img {
width:28px;
height:28px;
}

.positive {
color:#0ecb81;
}

.negative {
color:#f6465d;
}

/* MOBILE */

@media(max-width:768px){

.market-head,
.market-row {
grid-template-columns: 1.5fr 1fr 1fr;
}

.market-head div:last-child,
.market-row div:last-child {
display:none;
}

}

.price {
transition:0.3s;
}

.change.positive {
color:#0ecb81;
}

.change.negative {
color:#f6465d;
}

/* WHY SECTION */

.why-section {

padding:80px 0;
background:#0b0e11;

}

.why-title {

text-align:center;
font-size:36px;
margin-bottom:50px;

}

.why-grid {

display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;

}

.why-card {

background:#0f1419;
border:1px solid #2a2f36;
border-radius:4px;
padding:30px;

display:flex;
justify-content:space-between;
align-items:center;

transition:0.3s;

}

.why-card:hover {

border-color:#f0b90b;
transform:translateY(-5px);

}

.why-text h3 {

font-size:20px;
margin-bottom:10px;

}

.why-text p {

color:#a7b1bc;
font-size:15px;

}

.why-icon img {

width:70px;

}


/* MOBILE */

@media(max-width:900px){

.why-grid {

grid-template-columns:1fr;

}

}

/* FEATURES SECTION */

.features-section {

background:#0b0e11;
padding:100px 0;

}

.features-title {

text-align:center;
font-size:36px;
margin-bottom:50px;
margin-top: -120px;

}

.features-grid {

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

}

.feature-box {

text-align:center;
padding:20px;

}

.feature-icon {

width:70px;
height:70px;
margin:auto;
margin-bottom:20px;

border:1px solid #1f2a37;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

}

.feature-icon img {

width:32px;

}

.feature-box h3 {

font-size:18px;
margin-bottom:10px;

}

.feature-box p {

color:#a7b1bc;
font-size:14px;
line-height:1.6;

}


/* TABLET */

@media(max-width:1000px){

.features-grid {

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

}

}


/* MOBILE */

@media(max-width:600px){

.features-grid {

grid-template-columns:1fr;

}

}