:root {
      --hvac-primary: #0f3f78;
      --hvac-primary-dark: #082443;
      --hvac-accent: #ff7b2f;
      --hvac-bg-light: #f5f6fa;
      --hvac-muted: #6c757d;
  }

  body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: #ffffff;
      color: #1f2933;
  }

  /* NAVBAR */
  .navbar {
      background: rgba(8, 36, 67, 0.95);
  }

  .navbar-brand span {
      font-weight: 700;
      letter-spacing: 0.03em;
  }

  .navbar-brand small {
      font-size: 0.75rem;
      color: #cbd5f5;
  }

  .navbar-brand .brand-title {
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #f9fafb;
      font-size: 1rem;
  }

  .navbar-brand .brand-subtitle {
      font-size: 0.75rem;
      color: #cbd5f5;
  }

  .logo-smarthvac {
      height: 60px;
      /* tamanho padrão desktop */
      width: auto;
  }

  .nav-link {
      color: #e5e7eb !important;
      font-weight: 500;
  }

  .nav-link:hover {
      color: #ffffff !important;
  }

  .btn-nav-cta {
      font-weight: 600;
      border-radius: 999px;
      padding-inline: 1.5rem;
  }

  /* HERO */
  .hero-section {
      background: radial-gradient(circle at top left,
              #1a4f9b 0,
              #082443 45%,
              #050b14 100%);
      color: #f9fafb;
      padding-top: 6rem;
      padding-bottom: 4rem;
      position: relative;
      overflow: hidden;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
      background: rgba(15, 63, 120, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 0.85rem;
  }

  .hero-badge i {
      color: var(--hvac-accent);
  }

  .hero-title {
      font-size: clamp(2.2rem, 4vw, 3rem);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 1rem;
  }

  .hero-highlight {
      color: #fbbf24;
  }

  .hero-subtitle {
      font-size: 1.05rem;
      max-width: 34rem;
  }

  .hero-cta-main .btn {
      border-radius: 999px;
      padding-inline: 1.8rem;
      padding-block: 0.75rem;
      font-weight: 600;
  }

  .btn-primary-hvac {
      background: linear-gradient(135deg, var(--hvac-accent), #ff9a4b);
      border: none;
      color: #111827;
  }

  .btn-primary-hvac:hover {
      background: linear-gradient(135deg, #ff6a14, #ff9743);
      color: #111827;
  }

  .btn-outline-light-hvac {
      border-radius: 999px;
      border: 1px solid rgba(209, 213, 219, 0.7);
      color: #e5e7eb;
  }

  .btn-outline-light-hvac:hover {
      background-color: rgba(249, 250, 251, 0.08);
      color: #ffffff;
  }

  .hero-small-text {
      font-size: 0.85rem;
      color: #9ca3af;
  }

  .hero-card {
      background: radial-gradient(circle at top,
              rgba(15, 63, 120, 0.7),
              rgba(15, 63, 120, 0.15));
      border-radius: 1.5rem;
      border: 1px solid rgba(148, 163, 184, 0.35);
      padding: 1.5rem;
      backdrop-filter: blur(8px);
  }

  .hero-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .hero-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
      font-size: 0.95rem;
  }

  .hero-list i {
      margin-top: 0.2rem;
      color: #22c55e;
  }

  .hero-floating-pill {
      position: absolute;
      inset-inline-end: 2rem;
      bottom: 2rem;
      background: rgba(15, 63, 120, 0.8);
      border: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: 999px;
      padding: 0.35rem 0.9rem;
      font-size: 0.8rem;
      color: #e5e7eb;
      display: flex;
      align-items: center;
      gap: 0.45rem;
  }

  .hero-floating-pill i {
      color: var(--hvac-accent);
  }

  /* SEÇÕES GENÉRICAS */
  section {
      padding: 4rem 0;
  }

  .section-title {
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2rem);
      margin-bottom: 0.75rem;
  }

  .section-subtitle {
      color: var(--hvac-muted);
      max-width: 40rem;
      margin-inline: auto;
  }

  .bg-light-hvac {
      background-color: var(--hvac-bg-light);
  }

  /* PARA QUEM É */
  .tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.9rem;
      border-radius: 999px;
      background-color: #e5efff;
      color: #1d4ed8;
      font-size: 0.8rem;
      font-weight: 600;
  }

  .card-audience {
      border-radius: 1.25rem;
      border: 1px solid #e5e7eb;
      transition: all 0.2s ease;
      height: 100%;
  }

  .card-audience:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      border-color: rgba(15, 63, 120, 0.6);
  }

  .card-audience-icon {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #e0ecff;
      color: var(--hvac-primary);
      margin-bottom: 0.75rem;
      font-size: 1.4rem;
  }

  /* COMO FUNCIONA */
  .step-item {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
  }

  .step-number {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background-color: #e0ecff;
      color: var(--hvac-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.95rem;
  }

  .step-item h5 {
      margin-bottom: 0.25rem;
      font-weight: 600;
  }

  /* VÍDEOS / CASES */
  .video-card {
      border-radius: 1.25rem;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      position: relative;
      background-color: #020617;
      color: #f9fafb;
  }

  .video-card-body {
      padding: 1rem 1.1rem 1rem;
  }

  .video-thumb {
      position: relative;
      background: linear-gradient(135deg, #0f3f78, #020617);
  }

  .video-thumb::before {
      content: "";
      display: block;
      padding-top: 56.25%;
  }

  .video-thumb-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .video-play-btn {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      background-color: rgba(15, 23, 42, 0.9);
      border: 2px solid rgba(249, 250, 251, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      color: #fbbf24;
  }

  .video-pill {
      position: absolute;
      top: 0.8rem;
      left: 0.9rem;
      font-size: 0.75rem;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      background-color: rgba(15, 23, 42, 0.85);
  }

  /* PRICING */
  .pricing-card {
      border-radius: 1.5rem;
      border: 1px solid #e5e7eb;
      padding: 1.75rem 1.5rem;
      height: 100%;
      position: relative;
      background-color: #ffffff;
      transition: all 0.2s ease;
  }

  .pricing-card.popular {
      border: 2px solid var(--hvac-accent);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
      transform: translateY(-4px);
  }

  .badge-popular {
      position: absolute;
      top: 1rem;
      right: 1.2rem;
      font-size: 0.75rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      background-color: #ffedd5;
      color: #9a3412;
      font-weight: 600;
  }

  .pricing-price {
      font-size: 1.9rem;
      font-weight: 700;
  }

  .pricing-period {
      font-size: 0.9rem;
      color: var(--hvac-muted);
  }

  .pricing-list {
      list-style: none;
      padding: 0;
      margin-top: 1rem;
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
  }

  .pricing-list li {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
  }

  .pricing-list i {
      color: #22c55e;
      margin-top: 0.2rem;
  }

  .small-note {
      font-size: 0.8rem;
      color: var(--hvac-muted);
  }

  /* FAQ */
  .faq-item {
      border-bottom: 1px dashed #e5e7eb;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
  }

  .faq-item h6 {
      font-weight: 600;
  }

  /* SOBRE */
  .about-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.8rem;
      border-radius: 999px;
      background-color: #e0f2fe;
      color: #0369a1;
      font-size: 0.8rem;
      font-weight: 600;
  }

  /* FOOTER */
  footer {
      background-color: #020617;
      color: #9ca3af;
      padding-block: 2.5rem;
      font-size: 0.9rem;
  }

  footer a {
      color: #e5e7eb;
      text-decoration: none;
  }

  footer a:hover {
      text-decoration: underline;
  }

  /* RESPONSIVO */
/* Ajustes para telas menores */
@media (max-width: 575.98px) {
    .logo-smarthvac {
        height: 32px;      /* logo menor no mobile */
    }

    .hero-section {
        padding-top: 5.5rem;  /* navbar mais baixa, hero sobe um pouco */
    }
}