:root{

  --bg:#070816;

  --bg2:#0d1024;

  --card:rgba(255,255,255,.075);

  --border:rgba(255,255,255,.13);

  --text:#fff;

  --muted:#aab0c4;

  --purple:#8b35ff;

  --purple2:#c084fc;

  --blue:#18b6ff;

}



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

html{scroll-behavior:smooth}



body{

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

  background:var(--bg);

  color:var(--text);

  line-height:1.65;

}



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

img{max-width:100%;display:block}

.container{width:min(1180px,92%);margin:auto}



header{

  position:fixed;

  top:0;

  width:100%;

  z-index:999;

  background:rgba(7,8,22,.85);

  backdrop-filter:blur(18px);

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

}



.nav{

  height:78px;

  display:flex;

  align-items:center;

  justify-content:space-between;

}



.logo{

  font-size:1.5rem;

  font-weight:900;

  letter-spacing:-1px;

}



.logo span{color:var(--purple2)}



.menu{

  display:flex;

  gap:26px;

  color:var(--muted);

  font-weight:700;

}



.menu a:hover,

.menu a.active{

  color:#fff;

}



.btn{

  display:inline-flex;

  padding:13px 22px;

  border-radius:999px;

  font-weight:800;

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

  transition:.25s;

}



.btn:hover{transform:translateY(-2px)}



.btn-primary{

  background:linear-gradient(135deg,var(--purple),var(--blue));

  border:none;

  color:#fff;

}



.hamburger{

  display:none;

  background:none;

  border:0;

  color:#fff;

  font-size:2rem;

}



.hero,

.page-hero{

  background:

  radial-gradient(circle at 20% 20%,rgba(139,53,255,.38),transparent 32%),

  radial-gradient(circle at 80% 25%,rgba(24,182,255,.22),transparent 33%),

  linear-gradient(180deg,#070816,#0d1024);

}



.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  padding:140px 0 80px;

}



.page-hero{

  padding:150px 0 90px;

}



.hero-grid{

  display:grid;

  grid-template-columns:1.1fr .9fr;

  gap:60px;

  align-items:center;

}



.badge{

  display:inline-block;

  padding:8px 14px;

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

  border-radius:999px;

  background:rgba(255,255,255,.06);

  color:var(--purple2);

  font-weight:800;

  margin-bottom:22px;

}



h1{

  font-size:clamp(2.7rem,6vw,5.4rem);

  line-height:.95;

  letter-spacing:-.07em;

  margin-bottom:25px;

}



h2{

  font-size:clamp(2rem,4vw,3.5rem);

  line-height:1.05;

  letter-spacing:-.05em;

  margin-bottom:16px;

}



.gradient-text{

  background:linear-gradient(135deg,#fff,var(--purple2),var(--blue));

  -webkit-background-clip:text;

  color:transparent;

}



.lead{

  color:var(--muted);

  font-size:1.08rem;

  max-width:760px;

  margin-bottom:32px;

}



.hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:38px;

}



.stats{

  display:grid;

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

  gap:18px;

}



.stat,

.card,

.contact-card{

  background:var(--card);

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

  border-radius:26px;

  padding:24px;

}



.stat strong{

  display:block;

  font-size:1.9rem;

}



.stat span,

.muted,

.card p{

  color:var(--muted);

}



.visual-card{

  min-height:460px;

  border-radius:34px;

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

  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));

  padding:24px;

}



.dashboard{

  height:100%;

  border-radius:24px;

  padding:22px;

  background:rgba(5,7,20,.8);

}



.dash-grid{

  display:grid;

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

  gap:16px;

  margin-top:24px;

}



.mini-card{

  background:rgba(255,255,255,.08);

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

  border-radius:20px;

  padding:18px;

}



.mini-card small{color:var(--muted)}

.mini-card h3{font-size:1.7rem;margin-top:10px}



.bar{

  height:9px;

  background:rgba(255,255,255,.12);

  border-radius:999px;

  margin-top:18px;

  overflow:hidden;

}



.bar div{

  height:100%;

  background:linear-gradient(90deg,var(--purple),var(--blue));

}



section{

  padding:95px 0;

  background:var(--bg2);

}



section:nth-of-type(even){

  background:#080a1a;

}



.section-head{

  max-width:820px;

  margin-bottom:46px;

}



.cards{

  display:grid;

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

  gap:22px;

}



.card{

  overflow:hidden;

  transition:.25s;

}



.card:hover{

  transform:translateY(-7px);

  border-color:rgba(192,132,252,.55);

}



.card img{

  width:100%;

  height:210px;

  object-fit:cover;

}



.card-content{

  padding:24px;

}



.card.image-card{

  padding:0;

}



.tag{

  display:inline-block;

  font-size:.72rem;

  color:var(--purple2);

  background:rgba(139,53,255,.15);

  padding:6px 10px;

  border-radius:999px;

  margin-bottom:14px;

  font-weight:800;

}



.tech-stack{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

}



.pill{

  padding:12px 18px;

  border-radius:999px;

  background:rgba(255,255,255,.07);

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

  color:var(--muted);

  font-weight:700;

}



.contact-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:24px;

}



.contact-card strong{

  display:block;

  margin-top:16px;

}



footer{

  background:#050611;

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

  padding:34px 0;

  color:var(--muted);

}



.footer-flex{

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:20px;

}



.whatsapp{

  position:fixed;

  right:22px;

  bottom:22px;

  width:58px;

  height:58px;

  border-radius:50%;

  background:#25d366;

  color:white;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:1.6rem;

  z-index:999;

}



@media(max-width:980px){

  .hamburger{display:block}



  .menu{

    display:none;

    position:absolute;

    top:78px;

    left:0;

    right:0;

    flex-direction:column;

    padding:22px 4%;

    background:rgba(7,8,22,.97);

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

  }



  .menu.show{display:flex}

  .nav>.btn{display:none}



  .hero-grid,

  .cards,

  .contact-grid{

    grid-template-columns:1fr;

  }



  .stats{

    grid-template-columns:1fr;

  }

}