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

html{

  scroll-behavior:smooth;
}

:root{
  --primary:#00ffb3;
  --secondary:#0f172a;
  --dark:#020617;
  --light:#f8fafc;
  --gray:#94a3b8;
  --card:#0b1120;
  --border:rgba(255,255,255,0.08);
}

body{
  font-family:'Inter',sans-serif;
  background:#050505;
  color:white;
  overflow-x:hidden;
  line-height:1.7;
}

.background-glow{
  position:fixed;
  inset:0;
  z-index:-1;

  background:
  radial-gradient(circle at top left,
  rgba(124,58,237,0.16), transparent 28%),

  radial-gradient(circle at bottom right,
  rgba(0,255,179,0.08), transparent 28%),

  radial-gradient(circle at center,
  rgba(255,255,255,0.03), transparent 40%),

  #050505;
}

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

  padding:20px 7%;

  position:fixed;
  top:0;
  left:0;

  width:100%;

  z-index:1000;

  backdrop-filter:blur(18px);

  background:rgba(5,5,5,0.55);

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

.logo{
  font-size:2rem;
  font-weight:800;
  letter-spacing:1px;
}

.logo span{
  color:var(--primary);
}

.logo img{
  width:150px;
  height:auto;
  display:block;
  border-radius: 15px;
}

nav a{
  color:rgba(255,255,255,0.82);

  text-decoration:none;

  margin-left:34px;

  font-weight:500;

  font-size:0.98rem;

  transition:0.3s ease;
}

nav a:hover{
  color:white;
}

.nav-cta{
  background:linear-gradient(
  135deg,
  #7c3aed,
  #9333ea
  );

  padding:14px 24px;

  border-radius:14px;

  color:white !important;

  font-weight:600;

  margin-left:40px;

  box-shadow:
  0 10px 30px rgba(124,58,237,0.35);
}

.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:6px;
}

.hamburger span{
  width:28px;
  height:3px;
  background:white;
  border-radius:10px;
  transition:0.3s ease;
}

.hero{
  min-height:100vh;

  display:grid;

  grid-template-columns:
  1.1fr 0.9fr;

  align-items:center;

  gap:80px;

  padding:140px 7% 100px;
}

.hero h1{
  font-size:5.4rem;

  line-height:0.98;

  margin-bottom:30px;

  font-weight:800;

  letter-spacing:-3px;
}

.hero h1 span{
  background:linear-gradient(
  135deg,
  #00ffb3,
  #7c3aed
  );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}

.hero p{
  color:#a1a1aa;

  font-size:1.12rem;

  max-width:680px;

  margin-bottom:40px;

  line-height:1.9;
}

.badge{
  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:12px 18px;

  border-radius:999px;

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

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

  color:#d4d4d8;

  margin-bottom:30px;

  font-size:0.88rem;

  backdrop-filter:blur(14px);
}

.hero p{
  color:var(--gray);
  font-size:1.1rem;
  max-width:700px;
  margin-bottom:35px;
}

.buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.btn{
  padding:18px 30px;

  border-radius:16px;

  text-decoration:none;

  font-weight:700;

  transition:0.35s ease;

  display:inline-flex;

  align-items:center;

  justify-content:center;
}

.btn-primary{
  background:linear-gradient(
  135deg,
  #00ffb3,
  #00d9ff
  );

  color:#00130d;

  box-shadow:
  0 15px 40px rgba(0,255,179,0.22);
}

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

.btn-secondary{
  background:rgba(255,255,255,0.03);

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

  color:white;
}

.hero-card{
  position:relative;

  background:
  linear-gradient(
  145deg,
  rgba(255,255,255,0.04),
  rgba(255,255,255,0.02)
  );

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

  border-radius:34px;

  padding:34px;

  overflow:hidden;

  backdrop-filter:blur(18px);

  box-shadow:
  0 20px 70px rgba(0,0,0,0.45);
}

.hero-card::before{
  content:'';

  position:absolute;

  width:260px;
  height:260px;

  background:
  rgba(124,58,237,0.18);

  border-radius:50%;

  top:-120px;
  right:-120px;

  filter:blur(70px);
}

.code-box{
  background:#080808;

  border-radius:24px;

  padding:28px;

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

  font-family:monospace;

  color:#00ffb3;

  font-size:0.95rem;

  line-height:2;

  overflow:auto;
}

section{
      padding:100px 8%;
}

.section-title{
      text-align:center;
      margin-bottom:60px;
}

.section-title h2{
  font-size:3.6rem;

  margin-bottom:18px;

  line-height:1.1;

  letter-spacing:-2px;
}

.section-title p{
  color:#a1a1aa;

  max-width:760px;

  margin:auto;

  font-size:1.08rem;
}

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

.service-card{
  background:
  rgba(255,255,255,0.03);

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

  padding:38px;

  border-radius:28px;

  transition:0.35s ease;

  backdrop-filter:blur(14px);
}

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

  border-color:
  rgba(124,58,237,0.28);

  box-shadow:
  0 20px 50px rgba(124,58,237,0.14);
}

.service-card h3{
  margin-bottom:20px;

  font-size:1.4rem;

  color:white;
}

.service-card p{
  color:#a1a1aa;
}

.stats{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:30px;
      text-align:center;
}

.stat-box{
  background:
  rgba(255,255,255,0.03);

  padding:45px;

  border-radius:28px;

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

  backdrop-filter:blur(10px);
}

.stat-box h3{
  font-size:3rem;

  background:linear-gradient(
  135deg,
  #00ffb3,
  #7c3aed
  );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

  margin-bottom:12px;
}

.cta{
  background:
  linear-gradient(
  145deg,
  rgba(124,58,237,0.95),
  rgba(0,191,255,0.92)
  );

  border-radius:40px;

  text-align:center;

  padding:90px 50px;

  position:relative;

  overflow:hidden;
}

.cta::before{
  content:'';

  position:absolute;

  width:350px;
  height:350px;

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

  border-radius:50%;

  top:-150px;
  right:-120px;

  filter:blur(60px);
}

/* FOOTER */
.footer{

  padding:120px 7% 40px;

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

  background:
  linear-gradient(
  to bottom,
  rgba(255,255,255,0.01),
  rgba(255,255,255,0.02)
  );
}

/* TOP */
.footer-top{

  display:grid;

  grid-template-columns:
  1.1fr 1fr;

  gap:80px;

  margin-bottom:70px;
}

/* BRAND */
.footer-brand img{

  width:160px;

  margin-bottom:28px;

  border-radius:18px;
}

.footer-brand p{

  color:#a1a1aa;

  max-width:420px;

  line-height:1.9;

  margin-bottom:30px;
}

/* SOCIALS */
.socials{

  display:flex;

  gap:16px;
}

.socials a{

  width:48px;

  height:48px;

  border-radius:14px;

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

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

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

  text-decoration:none;

  transition:0.3s ease;
}

.socials a:hover{

  transform:
  translateY(-4px);

  background:
  rgba(124,58,237,0.18);

  border-color:
  rgba(124,58,237,0.25);
}

/* LINKS */
.footer-links{

  display:grid;

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

  gap:40px;
}

.footer-column h4{

  margin-bottom:22px;

  font-size:1.05rem;

  color:white;
}

.footer-column a{

  display:block;

  margin-bottom:16px;

  color:#a1a1aa;

  text-decoration:none;

  transition:0.3s ease;
}

.footer-column a:hover{

  color:white;
}

.footer-column p{

  color:#a1a1aa;

  line-height:1.9;

  margin-bottom:16px;
}

/* BOTTOM */
.footer-bottom{

  padding-top:35px;

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

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;
}

.footer-bottom p{

  color:#71717a;
}

.footer-bottom-links{

  display:flex;

  gap:24px;
}

.footer-bottom-links a{

  color:#71717a;

  text-decoration:none;

  transition:0.3s ease;
}

.footer-bottom-links a:hover{

  color:white;
}

/* MOBILE */
@media(max-width:900px){

  .footer-top{

    grid-template-columns:1fr;

    gap:50px;
  }

  .footer-links{

    grid-template-columns:1fr;
  }

  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;
  }

}

@media(max-width:650px){

  .footer{

    padding:90px 7% 35px;
  }

  .footer-brand img{

    width:130px;
  }

  .footer-bottom-links{

    flex-wrap:wrap;
  }

}

@media(max-width:1000px){
  .hero h1{
    font-size:3.4rem;
  }

  .section-title h2{
    font-size:2.6rem;
  }

  .hamburger{
    display:flex;
  }

  nav{
    position:fixed;

    top:90px;
    left:-100%;

    width:100%;

    height:calc(100vh - 90px);

    background:#050505;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:40px 8%;

    gap:30px;

    transition:0.4s ease;

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

  nav.active{
    left:0;
  }

  nav a{
    margin-left:0;
    font-size:1.15rem;
  }

  .nav-cta{
    margin-left:0;
    width:100%;
    text-align:center;
  }
}

@media(max-width:650px){

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

  .section-title h2,
  .cta h2{
    font-size:2.2rem;
  }

  .buttons{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .hero-card{
    padding:24px;
  }
}