:root {
      --dark-1: #0F172A;
      --dark-2: #1E293B;
      --blue-1: #4338CA;
      --blue-2: #60A5FA;
      --azul-escuro: #06233F;
    --azul: #0B4F8A;
    --azul-claro: #DCEEFF;
    --grafite: #1B1F23;
    --prata: #D9DEE3;
    --branco: #FFFFFF;
    --laranja: #F58220;
    --cinza-fundo: #F4F6F8;
    } 
    .aplicacoes {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem;}
    .aplicacoes.destaque h2{

    color:white;

}
.card {background:var(--azul-escuro); padding:2rem; border-radius:12px; transition:0.3s; text-align:center;}
    .card:hover {box-shadow:0 0 20px var(--blue-2); transform:translateY(-6px);}

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

body {
  font-family: "Inter", sans-serif;
  background: #0b1426;
  color: #fff;
}


/* =========================
   SECTION
========================= */

.fleet-section {
  width: 100%;
  padding: 24px 24px 80px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(38, 76, 150, 0.08),
      transparent 40%
    ),
    #0b1426;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


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

.section-header {
  text-align: center;
  margin-bottom: 66px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 13px;

  border: 1px solid rgba(66, 92, 190, 0.55);
  border-radius: 999px;

  color: #66adff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;

  margin-bottom: 14px;
}

.section-header h2 {
  color: #ffffff;

  font-size: clamp(38px, 4.5vw, 48px);
  line-height: 1.08;

  font-weight: 900;
  letter-spacing: -1.8px;

  margin-bottom: 14px;
}

.section-header h2 span {
  background: linear-gradient(
    90deg,
    #4d4de9 0%,
    #4f83ff 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-header p {
  color: #d2d9e8;

  font-size: 18px;
  line-height: 1.55;

  font-weight: 400;
}


/* =========================
   GRID
========================= */

.fleet-grid {
  display: grid;

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

  gap: 20px;
}


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

.fleet-card {
  position: relative;

  height: 224px;

  overflow: hidden;

  border-radius: 15px;

  background: #172238;

  cursor: pointer;

  isolation: isolate;
}

.fleet-card img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}


/* Overlay escuro */

.card-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      to bottom,
      rgba(4, 15, 29, 0.05) 15%,
      rgba(5, 15, 30, 0.25) 45%,
      rgba(5, 15, 30, 0.94) 100%
    );

  transition: background 0.3s ease;
}


/* Conteúdo */

.card-content {
  position: absolute;

  z-index: 2;

  left: 20px;
  right: 20px;
  bottom: 20px;

  display: flex;
  align-items: center;

  gap: 9px;
}

.card-content > span {
  width: 4px;
  height: 20px;

  flex-shrink: 0;

  border-radius: 5px;

  background: #5445ff;
}

.card-content h3 {
  color: #ffffff;

  font-size: 14px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.2px;
}


/* =========================
   HOVER
========================= */

.fleet-card:hover img {
  transform: scale(1.06);
}

.fleet-card:hover .card-overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(4, 15, 29, 0.05) 10%,
      rgba(5, 15, 30, 0.30) 40%,
      rgba(5, 15, 30, 0.92) 100%
    );
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  .fleet-section {
    padding-left: 20px;
    padding-right: 20px;
  }

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

  .section-header {
    margin-bottom: 45px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .fleet-section {
    padding: 24px 16px 60px;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .section-header h2 {
    font-size: 34px;
    letter-spacing: -1.2px;
  }

  .section-header p {
    font-size: 16px;
  }

  .desktop {
    display: none;
  }

  .fleet-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .fleet-card {
    height: 210px;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 380px) {

  .section-header h2 {
    font-size: 30px;
  }

  .section-header p {
    font-size: 15px;
  }

  .fleet-card {
    height: 190px;
  }

}