:root {
    --navy: #071633;
    --navy2: #0d2348;
    --gold: #d8ad57;
    --gold2: #f0d38b;
    --cream: #f7f4ed;
    --white: #ffffff;
    --text: #172033;
    --muted: #687083;
    --line: #e9e4d9;
    --wa: #25d366;
  
    --shadow: 0 20px 55px rgba(7, 22, 51, .12);
    --radius: 24px;
  }
  
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  
  html {
    scroll-behavior: smooth;
  }
  
  
  body {
    font-family: Inter, system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", sans-serif;
  
    color: var(--text);
    background: #fff;
    line-height: 1.55;
  }
  
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  
  .container {
    width: min(1140px, 92%);
    margin: auto;
  }
  
  
  /* HEADER */
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  
    z-index: 20;
  
    background: rgba(7, 22, 51, .92);
  
    backdrop-filter: blur(14px);
  
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  
  
  nav {
    height: 78px;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  
  .brand {
    display: flex;
    align-items: center;
  
    gap: 12px;
  
    color: #fff;
  
    font-weight: 800;
  }
  
  
  .brand-mark {
    width: 44px;
    height: 44px;
  
    border: 1px solid rgba(216,173,87,.7);
  
    display: grid;
    place-items: center;
  
    border-radius: 12px;
  
    color: var(--gold2);
  
    font-weight: 900;
  }
  
  
  .brand small {
    display: block;
  
    color: #b9c2d4;
  
    font-size: 10px;
  
    letter-spacing: 2px;
  
    text-transform: uppercase;
  }
  
  
  .navlinks {
    display: flex;
  
    gap: 28px;
  
    color: #e8edf7;
  
    font-size: 14px;
  
    font-weight: 600;
  }
  
  
  .navlinks a:hover {
    color: var(--gold2);
  }
  
  
  .nav-cta {
    background: var(--gold);
  
    color: var(--navy);
  
    padding: 11px 17px;
  
    border-radius: 999px;
  
    font-weight: 800;
  
    font-size: 14px;
  }
  
  
  /* HERO */
  
  .hero {
    padding: 150px 0 90px;
  
    background:
      radial-gradient(
        circle at 80% 20%,
        rgba(216,173,87,.18),
        transparent 30%
      ),
      linear-gradient(
        135deg,
        var(--navy),
        #0a1d3c 58%,
        #102b56
      );
  
    color: #fff;
  
    overflow: hidden;
  }
  
  
  .hero-grid {
    display: grid;
  
    grid-template-columns: 1.05fr .95fr;
  
    gap: 60px;
  
    align-items: center;
  }
  
  
  .eyebrow {
    color: var(--gold2);
  
    font-weight: 800;
  
    text-transform: uppercase;
  
    letter-spacing: 2.2px;
  
    font-size: 12px;
  
    margin-bottom: 18px;
  }
  
  
  h1 {
    font-size: clamp(42px, 6vw, 70px);
  
    line-height: 1.02;
  
    letter-spacing: -2.5px;
  
    margin-bottom: 22px;
  }
  
  
  .hero p {
    color: #c9d2e1;
  
    max-width: 570px;
  
    font-size: 18px;
  
    margin-bottom: 32px;
  }
  
  
  .buttons {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 13px;
  }
  
  
  .btn {
    display: inline-flex;
  
    align-items: center;
  
    justify-content: center;
  
    padding: 14px 21px;
  
    border-radius: 999px;
  
    font-weight: 800;
  
    transition: .2s transform;
  }
  
  
  .btn:hover {
    transform: translateY(-2px);
  }
  
  
  .btn-gold {
    background: var(--gold);
  
    color: var(--navy);
  }
  
  
  .btn-outline {
    border: 1px solid rgba(255,255,255,.25);
  
    color: #fff;
  }
  
  
  .hero-card {
    position: relative;
  
    border-radius: 30px;
  
    overflow: hidden;
  
    box-shadow: 0 30px 80px rgba(0,0,0,.32);
  
    min-height: 470px;
  
    background: #12274b;
  }
  
  
  .hero-card img {
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    display: block;
  }
  
  
  .hero-card:after {
    content: "";
  
    position: absolute;
  
    inset: 0;
  
    background:
      linear-gradient(
        180deg,
        transparent 45%,
        rgba(0,0,0,.55)
      );
  }
  
  
  .hero-label {
    position: absolute;
  
    z-index: 2;
  
    left: 24px;
    bottom: 22px;
  
    color: #fff;
  }
  
  
  .hero-label strong {
    display: block;
  
    font-size: 21px;
  }
  
  
  .hero-label span {
    color: #d9dfeb;
  
    font-size: 13px;
  }
  
  
  /* SECTIONS */
  
  section {
    padding: 92px 0;
  }
  
  
  .section-head {
    max-width: 650px;
  
    margin-bottom: 42px;
  }
  
  
  .section-head .eyebrow {
    color: #a17a29;
  }
  
  
  h2 {
    font-size: clamp(32px, 4vw, 48px);
  
    line-height: 1.08;
  
    letter-spacing: -1.4px;
  
    margin-bottom: 14px;
  }
  
  
  .section-head p {
    color: var(--muted);
  
    font-size: 16px;
  }
  
  
  /* SERVIÇOS */
  
  .services {
    background: var(--cream);
  }
  
  
  .cards {
    display: grid;
  
    grid-template-columns: repeat(3, 1fr);
  
    gap: 18px;
  }
  
  
  .card {
    background: #fff;
  
    padding: 28px;
  
    border-radius: var(--radius);
  
    box-shadow:
      0 8px 30px rgba(30,35,45,.06);
  
    border: 1px solid var(--line);
  }
  
  
  .icon {
    width: 48px;
    height: 48px;
  
    border-radius: 14px;
  
    background: #f3ead5;
  
    color: #9c7426;
  
    display: grid;
  
    place-items: center;
  
    font-size: 22px;
  
    margin-bottom: 18px;
  }
  
  
  .card h3 {
    font-size: 20px;
  
    margin-bottom: 9px;
  }
  
  
  .card p {
    color: var(--muted);
  
    font-size: 14px;
  }
  
  
  /* GALERIA */
  
  .gallery {
    display: grid;
  
    grid-template-columns: repeat(3, 1fr);
  
    gap: 14px;
  }
  
  
  .gallery-item {
    height: 260px;
  
    border-radius: 20px;
  
    overflow: hidden;
  
    background: #ddd;
  
    position: relative;
  }
  
  
  .gallery-item img {
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    transition: .35s;
  }
  
  
  .gallery-item:hover img {
    transform: scale(1.045);
  }
  
  
  /* SOBRE */
  
  .about {
    background: var(--navy);
  
    color: #fff;
  }
  
  
  .about-grid {
    display: grid;
  
    grid-template-columns: .85fr 1.15fr;
  
    gap: 70px;
  
    align-items: center;
  }
  
  
  .about p {
    color: #c8d1df;
  
    margin-bottom: 22px;
  }
  
  
  .checks {
    display: grid;
  
    grid-template-columns: 1fr 1fr;
  
    gap: 12px;
  
    margin-top: 25px;
  }
  
  
  .check {
    display: flex;
  
    gap: 10px;
  
    align-items: flex-start;
  
    color: #e7edf6;
  
    font-size: 14px;
  }
  
  
  .check b {
    color: var(--gold2);
  }
  
  
  .quote {
    background:
      linear-gradient(
        135deg,
        #f8f3e7,
        #fff
      );
  
    border: 1px solid var(--line);
  
    padding: 34px;
  
    border-radius: 28px;
  
    color: var(--navy);
  
    box-shadow: var(--shadow);
  }
  
  
  .quote strong {
    font-size: 22px;
  
    display: block;
  
    margin-bottom: 9px;
  }
  
  
  .quote span {
    color: var(--muted);
  
    font-size: 14px;
  }
  
  
  /* CONTATO */
  
  .contact {
    background: #fff;
  }
  
  
  .contact-box {
    background:
      linear-gradient(
        135deg,
        var(--navy),
        var(--navy2)
      );
  
    color: #fff;
  
    border-radius: 30px;
  
    padding: 48px;
  
    display: flex;
  
    justify-content: space-between;
  
    gap: 30px;
  
    align-items: center;
  }
  
  
  .contact-box p {
    color: #cbd4e2;
  
    margin-top: 8px;
  }
  
  
  /* FOOTER */
  
  footer {
    background: #050f24;
  
    color: #aeb8c9;
  
    padding: 28px 0;
  
    font-size: 13px;
  }
  
  
  footer .container {
    display: flex;
  
    justify-content: space-between;
  
    gap: 20px;
  }
  
  
  /* WHATSAPP */
  
  .float-wa {
    position: fixed;
  
    right: 20px;
  
    bottom: 20px;
  
    z-index: 30;
  
    width: 58px;
  
    height: 58px;
  
    border-radius: 50%;
  
    background: var(--wa);
  
    display: grid;
  
    place-items: center;
  
    color: #fff;
  
    font-size: 28px;
  
    box-shadow:
      0 10px 28px rgba(37,211,102,.32);
  }
  
  
  /* RESPONSIVO */
  
  @media(max-width:820px) {
  
    .navlinks {
      display: none;
    }
  
  
    .nav-cta {
      padding: 10px 14px;
    }
  
  
    .hero {
      padding-top: 125px;
    }
  
  
    .hero-grid,
    .about-grid {
      grid-template-columns: 1fr;
  
      gap: 38px;
    }
  
  
    .hero-card {
      min-height: 360px;
    }
  
  
    .cards {
      grid-template-columns: 1fr;
    }
  
  
    .gallery {
      grid-template-columns: 1fr 1fr;
    }
  
  
    .gallery-item {
      height: 210px;
    }
  
  
    .contact-box {
      padding: 32px;
  
      display: block;
    }
  
  
    .contact-box .buttons {
      margin-top: 22px;
    }
  
  }
  
  
  @media(max-width:520px) {
  
    h1 {
      letter-spacing: -1.8px;
    }
  
  
    .gallery {
      grid-template-columns: 1fr;
    }
  
  
    .gallery-item {
      height: 245px;
    }
  
  
    .checks {
      grid-template-columns: 1fr;
    }
  
  
    footer .container {
      display: block;
    }
  
  }