:root{
--primary:#FFD31D;
--dark:#070B14;
--dark2:#111827;
--light:#F9FAFB;
--muted:#9CA3AF;

--glass:rgba(255,255,255,0.06);

--border:rgba(255,255,255,0.08);

--shadow:
0 10px 30px rgba(0,0,0,0.35);

--radius:24px;
}
body{
background:var(--dark);
color:white;
font-family:'Inter',sans-serif;
overflow-x:hidden;
}
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#05070C;
}

::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:20px;
}
section{
padding:120px 0;
position:relative;
}
.future-card{
background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

border-radius:28px;

backdrop-filter:blur(20px);

transition:.4s ease;

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

.future-card:hover{
transform:translateY(-10px);

border-color:var(--primary);
}
.primary-btn{
background:var(--primary);

color:black;

padding:16px 32px;

border-radius:18px;

font-weight:700;

text-decoration:none;

transition:.4s ease;

display:inline-block;
}

.primary-btn:hover{
transform:translateY(-4px);

box-shadow:
0 10px 30px rgba(255,211,29,0.35);
}
/* HERO SECTION */

.landing-page{

min-height:100vh;

background:
radial-gradient(circle at top left,#1a2333 0%,transparent 40%),
radial-gradient(circle at bottom right,#14324d 0%,transparent 35%),
linear-gradient(135deg,#070B14,#0B1220);

display:flex;

align-items:center;

position:relative;

overflow:hidden;

padding:100px 60px;
}
.landing-page::before{

content:'';

position:absolute;

width:600px;

height:600px;

background:#FFD31D;

filter:blur(220px);

opacity:0.08;

top:-250px;

right:-250px;
}
.landing-page .content{
position:relative;
z-index:2;
}
.hero-tag{

color:var(--primary);

text-transform:uppercase;

letter-spacing:3px;

font-size:14px;

margin-bottom:25px;

font-weight:700;
}
.landing-page .content h1{

font-size:72px;

line-height:1.1;

font-weight:800;

margin-bottom:30px;

color:white;
}
.hero-description{

font-size:18px;

line-height:1.8;

color:#D1D5DB;

max-width:650px;

margin-bottom:40px;
}
.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.secondary-btn{

border:1px solid rgba(255,255,255,0.15);

color:white;

padding:16px 32px;

border-radius:18px;

text-decoration:none;

transition:.4s ease;
}

.secondary-btn:hover{

background:rgba(255,255,255,0.08);

color:white;

transform:translateY(-4px);
}

.glass-btn{

background:rgba(255,255,255,0.05);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,0.1);

color:white;

padding:16px 32px;

border-radius:18px;

text-decoration:none;

transition:.4s ease;
}

.glass-btn:hover{

border-color:var(--primary);

color:white;

transform:translateY(-4px);
}
.futuristic-image{

width:100%;

max-width:700px;

position:relative;

z-index:2;

animation:floatImage 6s ease-in-out infinite;
}

@keyframes floatImage{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0px);
}
}
@media(max-width:768px){

.landing-page{
padding:120px 20px;
text-align:center;
}

.landing-page .content h1{
font-size:42px;
}

.hero-buttons{
justify-content:center;
}

.hero-description{
font-size:16px;
}

}
/* TRUST BAR */

.trust-bar{

display:flex;

justify-content:space-around;

align-items:center;

gap:20px;

padding:30px;

background:rgba(255,255,255,0.03);

border-top:1px solid rgba(255,255,255,0.08);

border-bottom:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

flex-wrap:wrap;
}

.trust-item{

color:#D1D5DB;

font-size:14px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

opacity:.9;
}
/* ===================================
   TECHNOLOGY ECOSYSTEM SECTION
=================================== */

.awesome-feature{

  padding:120px 60px;

  background:
  radial-gradient(circle at top left,#001b44 0%,transparent 30%),
  radial-gradient(circle at top right,#3d2c00 0%,transparent 20%),
  linear-gradient(135deg,#020617,#081120);

  position:relative;

  overflow:hidden;
}

/* HEADER */

.ecosystem-header{

  text-align:center;

  max-width:950px;

  margin:auto;

  margin-bottom:80px;
}

.mini-tag{

  display:inline-block;

  padding:10px 22px;

  border:1px solid rgba(255,211,29,0.5);

  border-radius:40px;

  color:#FFD31D;

  font-size:14px;

  letter-spacing:2px;

  margin-bottom:25px;
}

.ecosystem-header h1{

  font-size:76px;

  font-weight:800;

  color:white;

  margin-bottom:30px;
}

.ecosystem-header h1 span{

  color:#FFD31D;
}

.ecosystem-header p{

  color:#CBD5E1;

  font-size:21px;

  line-height:1.9;
}

/* GRID */

.ecosystem-grid{

  display:grid;

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

  gap:30px;

  margin-top:70px;
}

/* CARD */

.future-card{

  position:relative;

  padding:35px;

  border-radius:30px;

  min-height:520px;

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,0.06),
  rgba(255,255,255,0.02));

  backdrop-filter:blur(20px);

  overflow:hidden;

  transition:.4s ease;

  border:1px solid rgba(255,255,255,0.08);
}

.future-card:hover{

  transform:translateY(-10px);
}

/* NUMBER */

.card-number{

  width:55px;

  height:55px;

  border-radius:16px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:32px;

  font-weight:700;

  margin-bottom:40px;
}

/* ICON */

.icon-circle{

  width:120px;

  height:120px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:35px;

  border:1px solid;
}

.icon-circle i{

  font-size:52px;
}

/* TITLE */

.future-card h3{

  color:white;

  font-size:24px;

  font-weight:700;

  margin-bottom:25px;

  line-height:1.4;
}

/* DESCRIPTION */

.future-card p{

  color:#CBD5E1;

  line-height:1.9;

  font-size:17px;

  margin-bottom:35px;
}

/* LINK */

.future-card a{

  text-decoration:none;

  font-size:18px;

  font-weight:600;
}

/* YELLOW CARD */

.yellow-card{

  border-color:rgba(255,211,29,0.4);
}

.yellow-card .card-number,
.yellow-card .icon-circle{

  border-color:#FFD31D;

  color:#FFD31D;
}

.yellow-card a{

  color:#FFD31D;
}

/* BLUE */

.blue-card{

  border-color:rgba(0,153,255,0.4);
}

.blue-card .card-number,
.blue-card .icon-circle{

  border-color:#00A3FF;

  color:#00A3FF;
}

.blue-card a{

  color:#00A3FF;
}

/* GREEN */

.green-card{

  border-color:rgba(0,255,140,0.4);
}

.green-card .card-number,
.green-card .icon-circle{

  border-color:#37FF8B;

  color:#37FF8B;
}

.green-card a{

  color:#37FF8B;
}

/* PURPLE */

.purple-card{

  border-color:rgba(183,0,255,0.4);
}

.purple-card .card-number,
.purple-card .icon-circle{

  border-color:#BB4DFF;

  color:#BB4DFF;
}

.purple-card a{

  color:#BB4DFF;
}

/* TRUST BAR */

.bottom-trust-bar{

  margin-top:70px;

  padding:35px;

  border-radius:30px;

  background:
  rgba(255,255,255,0.03);

  border:
  1px solid rgba(255,255,255,0.08);

  display:grid;

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

  gap:20px;
}

.trust-box{

  display:flex;

  align-items:center;

  gap:18px;
}

.trust-box i{

  font-size:42px;

  color:#FFD31D;
}

.trust-box h4{

  color:white;

  margin:0;

  font-size:24px;
}

.trust-box p{

  margin:0;

  color:#CBD5E1;
}

/* MOBILE */

@media(max-width:1200px){

  .ecosystem-grid{

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

  .bottom-trust-bar{

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

}

@media(max-width:768px){

  .awesome-feature{

    padding:80px 20px;
  }

  .ecosystem-header h1{

    font-size:46px;
  }

  .ecosystem-grid{

    grid-template-columns:1fr;
  }

  .bottom-trust-bar{

    grid-template-columns:1fr;
  }

  .future-card{

    min-height:auto;
  }

}