*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#050816;
  color:white;
  overflow-x:hidden;
}

:root{
  --primary-blue:#2563eb;
  --secondary-blue:#3b82f6;
  --gray:#cbd5e1;
}

/* HEADER */
.header{

  position:fixed;

  top:0;
  width:100%;

  z-index:1000;

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

  padding:15px 8%;

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

  backdrop-filter:blur(14px);

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

/* LOGO */
.logo{

  display:flex;
  align-items:center;
}

.logo-img{

  height:120px;

  width:auto;

  object-fit:contain;
}

/* NAVIGATION */
nav{

  display:flex;

  gap:35px;
}

nav a{

  color:white;

  text-decoration:none;

  font-weight:500;

  transition:0.3s ease;
}

nav a:hover{

  color:var(--secondary-blue);
}

/* HERO */
.hero{

  min-height:100vh;

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

  text-align:center;

  padding:180px 8% 120px;

  background:
  linear-gradient(
  rgba(0,0,0,0.75),
  rgba(0,0,0,0.75)),

  url("images/cpu.jpeg");

  background-size:cover;
  background-position:center;
}

.hero-content{

  max-width:900px;
}

.hero h1{

  font-size:4rem;

  margin-bottom:25px;

  line-height:1.1;
}

.hero h1 span{

  color:var(--secondary-blue);
}

.hero p{

  color:var(--gray);

  font-size:1.2rem;

  line-height:1.8;

  margin-bottom:40px;
}

/* BUTTONS */
.hero-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{

  padding:15px 32px;

  border-radius:12px;

  text-decoration:none;

  font-weight:600;
}

.btn-primary{

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

  color:white;
}

.btn-secondary{

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

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

  color:white;
}

/* SECTION */
.section{

  padding:120px 8%;

  text-align:center;
}

.section h2{

  font-size:3rem;

  margin-bottom:20px;
}

.section p{

  max-width:900px;

  margin:auto;

  color:var(--gray);

  line-height:1.8;

  margin-bottom:60px;
}

/* GRID */
.content-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:30px;
}

/* CARDS */
.grid-item{

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

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

  padding:35px;

  border-radius:18px;

  backdrop-filter:blur(12px);
}

.grid-item h3{

  margin-bottom:15px;

  color:var(--secondary-blue);
}

/* IMAGES */
.product-img{

  width:100%;

  height:260px;

  object-fit:cover;

  border-radius:14px;

  margin-bottom:20px;
}

/* CONTACT */
.contact-info{

  max-width:900px;

  margin:auto;

  margin-top:40px;

  text-align:left;

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

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

  padding:40px;

  border-radius:18px;
}

.contact-info p{

  margin-bottom:20px;
}

.contact-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;

  margin-top:40px;
}

/* WHATSAPP */
.whatsapp-btn{

  background:#25D366;

  color:white;

  padding:15px 30px;

  border-radius:12px;

  text-decoration:none;

  font-weight:600;
}

/* FOOTER */
.footer{

  background:#02040c;

  padding:50px 8%;

  text-align:center;

  color:#94a3b8;
}

/* REVEAL */
.reveal{

  opacity:0;

  transform:translateY(60px);

  transition:1s ease;
}

.reveal.active{

  opacity:1;

  transform:translateY(0);
}

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

  .hero h1{

    font-size:2.7rem;
  }

  nav{

    display:none;
  }

  .section h2{

    font-size:2rem;
  }

  .logo-img{

    height:85px;
  }
}