:root{

  --bg:#050816;
  --bg2:#0b1020;

  --primary:#7c3aed;
  --secondary:#06b6d4;

  --white:#ffffff;
  --text:#d6d6d6;
  --muted:#8f96aa;

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

  --shadow:
    0 20px 50px rgba(0,0,0,0.4);

}

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;

  background:var(--bg);

  color:var(--white);

  overflow-x:hidden;

  position:relative;

}

/* =========================
BACKGROUND
========================= */

.bg-grid{

  position:fixed;

  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );

  background-size:60px 60px;

  z-index:-5;

}

.gradient{

  position:fixed;

  width:500px;
  height:500px;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;

  z-index:-4;

}

.gradient-1{

  top:-100px;
  left:-100px;

  background:var(--primary);

}

.gradient-2{

  right:-100px;
  bottom:-100px;

  background:var(--secondary);

}

/* =========================
GLOBAL
========================= */

.container{

  width:90%;
  max-width:1200px;

  margin:auto;

}

.section{

  padding:120px 0;

}

.center{
  text-align:center;
}

.section-title{

  margin-bottom:70px;

}

.section-title small{

  color:var(--secondary);

  letter-spacing:2px;

  font-size:13px;

  font-weight:700;

}

.section-title h2{

  margin-top:15px;

  font-size:48px;

  line-height:1.1;

  max-width:700px;

}

p{

  color:var(--text);

  line-height:1.8;

}

/* =========================
HEADER
========================= */

.header{

  position:fixed;

  width:100%;

  top:0;

  z-index:999;

  padding:20px 0;

  transition:0.4s ease;

}

.header.scrolled{

  background:rgba(5,8,22,0.85);

  backdrop-filter:blur(14px);

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

}

.nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.logo{

  font-size:22px;

  font-weight:700;

  display:flex;

  align-items:center;

  gap:10px;

}

.logo i{

  color:var(--secondary);

}

.desktop-nav{

  display:flex;

  gap:35px;

}

.desktop-nav a{

  color:var(--white);

  text-decoration:none;

  font-size:15px;

  transition:0.3s ease;

  position:relative;

}

.desktop-nav a:hover{

  color:var(--secondary);

}

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

.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  position:relative;

}

.hero-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;

}

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:10px;

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

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

  padding:12px 18px;

  border-radius:999px;

  margin-bottom:30px;

  font-size:14px;

}

.hero h1{

  font-size:72px;

  line-height:1.05;

  margin-bottom:25px;

  font-weight:800;

}

.hero-text{

  font-size:18px;

  max-width:650px;

}
/* =========================
BUTTONS
========================= */

.hero-buttons{

  display:flex;

  gap:20px;

  margin-top:40px;

  flex-wrap:wrap;

}

.btn{

  padding:16px 28px;

  border-radius:14px;

  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;

  position:relative;

  overflow:hidden;

}

.primary{

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  color:var(--white);

}

.primary:hover{

  transform:translateY(-4px);

  box-shadow:
    0 20px 40px rgba(124,58,237,0.35);

}

.ghost{

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

  color:var(--white);

}

.ghost:hover{

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

}

/* =========================
STATS
========================= */

.hero-stats{

  display:flex;

  gap:50px;

  margin-top:60px;

}

.stat strong{

  display:block;

  font-size:36px;

}

.stat span{

  color:var(--muted);

}

/* =========================
CODE CARD
========================= */

.code-card{

  background:#0b1020;

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

  border-radius:24px;

  padding:40px;

  box-shadow:var(--shadow);

  position:relative;

  overflow:hidden;

}

.code-card::before{

  content:'';

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
    );

}

.code-card pre{

  overflow:auto;

}

.code-card code{

  color:#7dd3fc;

  font-size:15px;

  line-height:1.9;

}

/* =========================
STACK
========================= */

.stack-grid{

  display:grid;

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

  gap:20px;

}

.stack-item{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:35px 20px;

  border-radius:20px;

  text-align:center;

  transition:0.4s ease;

  backdrop-filter:blur(10px);

}

.stack-item:hover{

  transform:translateY(-10px);

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

}

.stack-item i{

  font-size:42px;

  margin-bottom:15px;

  display:block;

  color:var(--secondary);

}

/* =========================
SERVICES
========================= */

.services-grid{

  display:grid;

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

  gap:30px;

}

.service-card{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:40px;

  border-radius:24px;

  transition:0.4s ease;

  position:relative;

  overflow:hidden;

  backdrop-filter:blur(14px);

}

.service-card:hover{

  transform:translateY(-10px);

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

}

.service-card .icon{

  width:70px;
  height:70px;

  border-radius:18px;

  display:flex;

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

  margin-bottom:25px;

  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,0.15),
      rgba(6,182,212,0.15)
    );

}

.service-card .icon i{

  font-size:32px;

  color:var(--secondary);

}

.service-card h3{

  margin-bottom:15px;

  font-size:24px;

}
/* =========================
RESULTS
========================= */

.dark-section{

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

}

.results-grid{

  display:grid;

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

  gap:30px;

}

.result-card{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:50px 30px;

  border-radius:24px;

  text-align:center;

  transition:0.4s ease;

}

.result-card:hover{

  transform:translateY(-10px);

}

.result-card h3{

  font-size:56px;

  margin-bottom:15px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;

}

/* =========================
TIMELINE
========================= */

.timeline{

  display:grid;

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

  gap:30px;

}

.timeline-item{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:40px;

  border-radius:24px;

}

.timeline-item span{

  font-size:50px;

  font-weight:800;

  opacity:0.2;

}

.timeline-item h3{

  margin:20px 0;

}

/* =========================
ABOUT
========================= */

.about-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;

}

.about-card{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:50px;

  border-radius:24px;

}

.about-card div{

  margin-bottom:35px;

}

.about-card strong{

  display:block;

  font-size:30px;

  margin-bottom:10px;

}

/* =========================
FAQ
========================= */

.faq-list{

  display:grid;

  gap:25px;

}

.faq-item{

  background:var(--card);

  border:
    1px solid var(--border);

  padding:35px;

  border-radius:20px;

}

.faq-item h3{

  margin-bottom:15px;

}

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

.contact-section{

  padding-bottom:140px;

}

.cta-box{

  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,0.18),
      rgba(6,182,212,0.12)
    );

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

  border-radius:32px;

  padding:80px;

  text-align:center;

  backdrop-filter:blur(14px);

}

.cta-box h2{

  font-size:54px;

  margin:20px 0;

}

/* =========================
WHATSAPP FLOAT
========================= */

.whatsapp-float{

  position:fixed;

  right:25px;
  bottom:25px;

  width:65px;
  height:65px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #25d366,
      #128c7e
    );

  display:flex;

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

  color:white;

  font-size:32px;

  text-decoration:none;

  z-index:999;

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

}

/* =========================
ANIMATIONS
========================= */

.fade-up{

  opacity:0;

  transform:translateY(50px);

  transition:1s ease;

}

.fade-up.show{

  opacity:1;

  transform:translateY(0);

}

.delay{

  transition-delay:0.2s;

}

.delay-2{

  transition-delay:0.4s;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:980px){

  .hero-grid,
  .about-grid,
  .services-grid,
  .results-grid,
  .timeline,
  .stack-grid{

    grid-template-columns:1fr;

  }

  .hero h1{

    font-size:52px;

  }

  .section-title h2{

    font-size:38px;

  }

  .desktop-nav{

    display:none;

  }

  .cta-box{

    padding:50px 30px;

  }

}
/* =========================================
FIX MOBILE
========================================= */

@media(max-width:768px){

  body{
    overflow-x:hidden;
  }

  .hero{
    padding-top:140px;
    min-height:auto;
  }

  .hero-grid{
    gap:40px;
  }

  .hero h1{
    font-size:48px;
    line-height:1.05;
  }

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

  .hero-stats{
    gap:25px;
    flex-wrap:wrap;
  }

  .stat strong{
    font-size:28px;
  }

  .code-card{
    padding:25px;
    overflow:auto;
  }

  .code-card code{
    font-size:13px;
    line-height:1.7;
  }

  .services-grid,
  .results-grid,
  .timeline,
  .stack-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .stack-item{
    padding:28px 20px;
  }

  .cta-box{
    padding:50px 25px;
  }

  .cta-box h2{
    font-size:52px;
    line-height:1;
  }

  .whatsapp-float{
    width:58px;
    height:58px;
    font-size:28px;
    right:18px;
    bottom:18px;
  }

}

/* =========================================
/* =========================================
MATRIX
========================================= */

.matrix{

  position:fixed;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  z-index:-2;

}

.matrix span{

  position:absolute;

  top:-100px;

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

  font-family:monospace;

  text-shadow:
    0 0 10px rgba(255,255,255,0.15);

  animation:matrixFall linear infinite;

}

@keyframes matrixFall{

  from{
    transform:translateY(-100px);
  }

  to{
    transform:translateY(120vh);
  }

}
/* =========================================
CURSOR GLOW
========================================= */

.cursor-glow{

  position:fixed;

  width:300px;
  height:300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(124,58,237,0.15),
      transparent 70%
    );

  pointer-events:none;

  transform:
    translate(-50%, -50%);

  z-index:-1;

}

/* =========================================
LOADER
========================================= */

.loader{

  position:fixed;

  inset:0;

  background:#050816;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:99999;

  transition:1s ease;

}

.loader.hide{

  opacity:0;

  visibility:hidden;

}

.loader-content{

  text-align:center;

}

.loader-logo{

  width:100px;
  height:100px;

  border-radius:30px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin:auto auto 30px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #06b6d4
    );

  font-size:42px;

  animation:pulse 2s infinite;

}

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}

/* =========================================
SCROLLBAR
========================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#050816;
}

::-webkit-scrollbar-thumb{

  background:
    linear-gradient(
      #7c3aed,
      #06b6d4
    );

  border-radius:20px;
}
/* =========================================
TERMINAL PREMIUM
========================================= */

.fake-terminal{

  width:100%;

  background:#020617;

  border-radius:24px;

  overflow:hidden;

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

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

}

.terminal-top{

  height:50px;

  background:#0f172a;

  display:flex;

  align-items:center;

  gap:10px;

  padding:0 20px;

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

}

.terminal-top span{

  width:12px;
  height:12px;

  border-radius:50%;

}

.terminal-top span:nth-child(1){
  background:#ff5f56;
}

.terminal-top span:nth-child(2){
  background:#ffbd2e;
}

.terminal-top span:nth-child(3){
  background:#27c93f;
}

.terminal-code{

  padding:40px;

  font-family:
    Consolas,
    monospace;

  font-size:15px;

  line-height:2.2;

  color:white;

}

.terminal-code .tab{

  padding-left:25px;

}

.purple{
  color:#c084fc;
}

.green{
  color:#4ade80;
}

.blue{
  color:#60a5fa;
}

.cyan{
  color:#22d3ee;
}

.white{
  color:#e2e8f0;
}

/* MOBILE */

@media(max-width:768px){

  .terminal-code{

    padding:24px;

    font-size:13px;

    line-height:2;

  }

}