body{
background:#0b0f1a;
color:white;
font-family:system-ui;
}

/* NAVBAR */

.navbar{
background:#0b0f1a;
border-bottom:1px solid #1f2937;
}

.nav-link{
color:#cbd5f5;
}

.nav-link:hover{
color:white;
}

/* HERO */

.hero{
padding:120px 0;
background:
radial-gradient(circle at top right,#1e3a8a33,transparent),
radial-gradient(circle at bottom left,#0ea5e933,transparent);
}

.hero h1{
font-size:56px;
font-weight:700;
}

.hero p{
color:#cbd5f5;
font-size:18px;
}

.hero-card{
background:#111827;
padding:25px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

/* METRICS */

.metric{
background:#111827;
padding:25px;
border-radius:14px;
text-align:center;
}

/* FEATURES */

.feature-card{
background:#111827;
padding:25px;
border-radius:14px;
height:100%;
}

/* MARKETPLACE */

.vendor-card{
background:#111827;
border-radius:14px;
padding:20px;
}
/* FEATURE BOX */
.feature-box{
  background:#121829;
  padding:25px;
  border-radius:10px;
  height:100%;
  border:1px solid rgba(255,255,255,0.08);
  transition:0.3s;
}
.feature-box:hover{
  transform:translateY(-5px);
  border-color:#4ea1ff;
}
/* CTA */

.cta{
background:linear-gradient(120deg,#1e3a8a,#0ea5e9);
padding:80px 0;
border-radius:16px;
}

/* FOOTER */
footer{
    background:#050812;
    padding:30px;
    text-align:center;
    color:#777;
    margin-top:30px;
}
footer a{
    color:#22c55e;
    text-decoration:none;
}
footer a:hover{
    text-decoration:underline;
}

/* MATRIX */
.matrix-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px;
}
.matrix-node{
  width:70px;
  height:70px;
  background:#4ea1ff;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  font-weight:bold;
  position:relative;
}
.matrix-node::after{
  content:"";
  position:absolute;
  width:4px;
  height:50px;
  background:#4ea1ff;
  top:70px;
  left:50%;
  transform:translateX(-50%);
}
.matrix-row{
  display:flex;
  justify-content:center;
  gap:50px;
  margin-top:50px;
}