@charset "UTF-8";
/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
  --color-primary: #FF6B35;
  --color-primary-dark: #e55a24;
  --color-primary-light: #ff8c5a;
  --color-primary-alpha: rgba(255, 107, 53, 0.1);
  --color-bg: #e8e8e8;
  --color-bg-2: #f1ede8;
  --color-white: #ffffff;
  --color-dark: #1e293b;
  --color-dark-2: #0f172a;
  --color-text: #64748b;
  --color-text-light: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.18);
  --transition-fast: all 0.15s ease;
  --transition: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --container-max: 1400px;
  --container-padding: clamp(16px, 4vw, 48px);
  --header-height: 72px;
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 150;
  --z-modal: 200;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: #e8e8e8;
  color: #1e293b;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
}

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

ul {
  list-style: none;
}

/* --------------------------------------------------------------------------
   SKIP LINK — WCAG 2.4.1
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -999px;
  left: 8px;
  z-index: 9999;
  background: #FF6B35;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus {
  top: 8px;
}

/* --------------------------------------------------------------------------
   FOCO GLOBAL — WCAG 2.4.7
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 3px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   CONTAINER
   -------------------------------------------------------------------------- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   SECÇÃO — cabeçalho e tipografia reutilizáveis em todo o tema
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FF6B35;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #0f172a;
  line-height: 1.15;
  margin-top: 15px;
}

.section-title--left {
  text-align: left;
}

.section-title__accent {
  color: #FF6B35;
  position: relative;
  display: inline-block;
}
.section-title__accent::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  border-radius: 2px;
  opacity: 0.35;
}

.section-desc {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.75;
}

.section-desc--left {
  text-align: left;
  max-width: 420px;
}

/* --------------------------------------------------------------------------
   BOTÕES — componentes reutilizáveis em todo o tema
   -------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FF6B35;
  color: #ffffff;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #e55a24;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.38);
}
.btn-primary:focus-visible {
  background-color: #e55a24;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  color: #ffffff;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 2px solid #1e293b;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn-ghost:hover {
  background: transparent;
  border-color: #1e293b;
  color: #1e293b;
}
.btn-ghost:focus-visible {
  border-color: #FF6B35;
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   ACESSIBILIDADE — utilitários
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background-color: transparent;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-icon:hover {
  background-color: #f1ede8;
  border-color: #1e293b;
}
.btn-icon:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}

.no-background {
  background-color: transparent !important;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.site-header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 3px;
  border-radius: 8px;
}

.logo__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo__text {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #0f172a;
  white-space: nowrap;
}
.logo__text strong {
  font-weight: 800;
  color: #FF6B35;
}

/* --------------------------------------------------------------------------
   Navegação principal
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    flex-direction: column;
    align-items: stretch;
    padding: 16px clamp(16px, 4vw, 48px) 24px;
    gap: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    border-top: 1px solid #e2e8f0;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.nav__link {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav__link:hover {
  color: #FF6B35;
  background-color: rgba(255, 107, 53, 0.1);
}
.nav__link.active {
  color: #FF6B35;
  font-weight: 600;
}
.nav__link:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .nav__link {
    padding: 12px 16px;
    border-radius: 8px;
  }
}

/* --------------------------------------------------------------------------
   Ações à direita
   -------------------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .header__actions .btn-primary {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Botão menu mobile (hambúrguer)
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #1e293b;
  border-radius: 2px;
  transition: all 0.15s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded=true] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav-toggle:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.site-footer {
  background: #0b1120;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  overflow: visible;
}
.site-footer .logo__text {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.footer__newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
}
.footer__newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.footer__newsletter-text strong {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}
.footer__newsletter-text span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
}
.footer__newsletter-form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.footer__newsletter-input {
  padding: 10px 16px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  outline: none;
  min-width: 220px;
  transition: all 0.15s ease;
}
.footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.footer__newsletter-input:focus {
  border-color: #FF6B35;
}
.footer__newsletter-btn {
  padding: 10px 22px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  background: #FF6B35;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.footer__newsletter-btn:hover {
  background: #e55a24;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding: 56px 0 48px;
  width: 100%;
  min-width: 0;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.footer__tagline {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.75;
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
}
.footer__badge svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.15s ease;
}
.social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}
.social-link:hover {
  background: #FF6B35;
  border-color: #FF6B35;
  color: #ffffff;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__links li {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
}
.footer__links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}
.footer__links a:hover {
  color: #ff8c5a;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__contact li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
  color: #FF6B35;
}

.footer__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(10, 102, 194, 0.18);
  border: 1px solid rgba(10, 102, 194, 0.35);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s ease;
  width: fit-content;
  margin-bottom: 4px;
}
.footer__linkedin svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.footer__linkedin:hover {
  background: rgba(10, 102, 194, 0.35);
  border-color: rgba(10, 102, 194, 0.6);
}

.footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__copy {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
}

.footer__legal {
  display: flex;
  gap: 20px;
}
.footer__legal .footer__legal-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal .footer__legal-links li {
  margin: 0;
}
.footer__legal a {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: all 0.15s ease;
}
.footer__legal a:hover {
  color: #ff8c5a;
}

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 768px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer__brand {
    grid-column: 1/3;
  }
}
@media (max-width: 600px) {
  .footer__newsletter {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__newsletter-form {
    width: 100%;
    flex-direction: column;
  }
  .footer__newsletter-input {
    min-width: 0;
    width: 100%;
  }
  .footer__newsletter-btn {
    width: 100%;
    text-align: center;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .footer__brand {
    grid-column: 1;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.breadcrumb {
  padding: 32px 0 0;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-light, #94a3b8);
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--color-border, #e2e8f0);
}
.breadcrumb a {
  color: var(--color-text, #64748b);
  transition: var(--transition-fast, all 0.15s ease);
}
.breadcrumb a:hover {
  color: var(--color-primary, #FF6B35);
}
.breadcrumb li[aria-current=page] {
  color: var(--color-dark, #1e293b);
  font-weight: 500;
}

.project-hero {
  padding: 48px 0 64px;
  background: var(--color-bg, #faf8f5);
}
.project-hero__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .project-hero__header {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}
.project-hero__title-wrap {
  max-width: 700px;
}
.project-hero__title {
  font-family: var(--font-family-title, "Red Hat Display", sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-dark-2, #0f172a);
  margin-bottom: 20px;
}
.project-hero__subtitle {
  font-size: var(--font-size-xl, 1.25rem);
  line-height: 1.6;
  color: var(--color-text, #64748b);
  max-width: 700px;
}
.project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-meta-label {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light, #94a3b8);
}

.project-meta-value {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--color-dark, #1e293b);
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.project-tag {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-white, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-dark, #1e293b);
  transition: var(--transition-fast, all 0.15s ease);
}
.project-tag:hover {
  border-color: var(--color-primary, #FF6B35);
  color: var(--color-primary, #FF6B35);
}

.single-project-related-wrapper .more-projects {
  padding: 96px 0;
  background: #faf8f5;
}
.single-project-related-wrapper .section-header {
  text-align: center;
  margin-bottom: 48px;
}
.single-project-related-wrapper .eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF6B35;
  margin-bottom: 16px;
}
.single-project-related-wrapper .section-title {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
@media (min-width: 768px) {
  .single-project-related-wrapper .section-title {
    font-size: 1.875rem;
  }
}
.single-project-related-wrapper .projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .single-project-related-wrapper .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.single-project-related-wrapper .project-card {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
}
.single-project-related-wrapper .project-card:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}
.single-project-related-wrapper .project-card:hover .project-card__image img {
  transform: scale(1.08);
}
.single-project-related-wrapper .project-card:hover .project-card__link {
  gap: 12px;
}
.single-project-related-wrapper .project-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f1f5f9;
}
.single-project-related-wrapper .project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.single-project-related-wrapper .project-card__content {
  padding: 32px;
}
.single-project-related-wrapper .project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.single-project-related-wrapper .project-card__tags .tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 107, 53, 0.1);
  color: #FF6B35;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.single-project-related-wrapper .project-card__title {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px 0;
  text-shadow: none;
}
.single-project-related-wrapper .project-card__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 20px 0;
}
.single-project-related-wrapper .project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #FF6B35;
  transition: all 0.15s ease;
}
.single-project-related-wrapper .project-card__link svg {
  transition: transform 0.3s ease;
}
.single-project-related-wrapper .more-projects__cta {
  text-align: center;
}
.single-project-related-wrapper .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: #FF6B35;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.single-project-related-wrapper .btn-primary:hover {
  background: #e55a2b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.single-project-related-wrapper .btn-primary:hover svg {
  transform: translateX(4px);
}
.single-project-related-wrapper .btn-primary svg {
  transition: transform 0.3s ease;
}
.single-project-related-wrapper .btn-lg {
  padding: 18px 40px;
  font-size: 1.125rem;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.banner {
  background-color: #e8e8e8;
  padding-top: 72px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -160px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.07) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.banner::after {
  content: "";
  position: absolute;
  bottom: 80px;
  left: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.banner__container {
  flex: 1;
  display: grid;
  grid-template-columns: 536px 1.1fr;
  gap: 56px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 48px;
}
@media (max-width: 1024px) {
  .banner__container {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 48px;
  }
}

/* --------------------------------------------------------------------------
   COLUNA ESQUERDA
   -------------------------------------------------------------------------- */
.banner__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
}

.banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 107, 53, 0.1);
  color: #e55a24;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 107, 53, 0.18);
  width: fit-content;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #FF6B35;
  border-radius: 50%;
  animation: badge-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}
.banner__title {
  font-size: clamp(2.4rem, 4.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2px;
  color: #0f172a;
  margin: 0;
}

.banner__title--accent {
  color: #FF6B35;
  position: relative;
  display: inline-block;
}
.banner__title--accent::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  border-radius: 2px;
  opacity: 0.35;
}

.banner__description {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.75;
  max-width: 460px;
  margin: 0;
}

.banner__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .banner__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

.banner__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 8px 16px 8px 10px;
}
.banner__trust p {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}
.banner__trust strong {
  color: #1e293b;
}

.trust-since {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FF6B35;
  color: #ffffff;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   COLUNA DIREITA: visual
   -------------------------------------------------------------------------- */
.banner__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 16px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 1024px) {
  .banner__visual {
    grid-template-columns: minmax(0, 1fr) 160px;
  }
}
@media (max-width: 768px) {
  .banner__visual {
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 12px;
  }
}

/* Imagem principal */
.banner__main-image {
  min-width: 0;
  width: 100%;
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  height: 572px;
}
@media (max-width: 1024px) {
  .banner__main-image {
    height: 444px;
  }
}
@media (max-width: 768px) {
  .banner__main-image {
    height: 340px;
  }
}

.banner-main-slider {
  width: 100%;
  height: 100%;
}
.banner-main-slider .slick-slider,
.banner-main-slider .slick-list,
.banner-main-slider .slick-track {
  height: 100% !important;
}

.banner-main-slide {
  position: relative;
  display: block !important;
  height: 100%;
  text-decoration: none;
}
.banner-main-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.banner-main-slide:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 3px;
}

.banner-main-slide__fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF6B35 0%, #e55a24 100%);
}

.banner-main-slide__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 52px 18px 16px;
  background: linear-gradient(0deg, rgba(10, 18, 36, 0.95) 0%, rgba(10, 18, 36, 0.68) 55%, transparent 100%);
  z-index: 3;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .banner-main-slide__info {
    padding: 42px 16px 14px;
  }
}
@media (max-width: 768px) {
  .banner-main-slide__info {
    padding: 34px 12px 12px;
  }
}

.banner-main-slide__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  background: rgba(255, 255, 255, 0.93);
  color: #e55a24;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-bottom: 8px;
  line-height: 1.6;
}

.banner-main-slide__title {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  display: block;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
  margin-top: 0px;
}
@media (max-width: 768px) {
  .banner-main-slide__title {
    font-size: 0.95rem;
  }
}

.banner__main-image-overlay {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}

/* Slider thumbs lateral */
.banner__slider-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) {
  .banner__slider-outer {
    width: 160px;
  }
}
@media (max-width: 768px) {
  .banner__slider-outer {
    width: 130px;
  }
}

.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 9999px;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.slider-arrow:hover {
  background: #FF6B35;
  border-color: #FF6B35;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}
.slider-arrow:active {
  transform: scale(0.96);
}
.slider-arrow:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}
.slider-arrow svg {
  pointer-events: none;
}
@media (max-width: 1024px) {
  .slider-arrow {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 768px) {
  .slider-arrow {
    width: 32px;
    height: 32px;
  }
}

.banner__slider-wrap {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  height: 472px;
}
@media (max-width: 1024px) {
  .banner__slider-wrap {
    height: 352px;
  }
}
@media (max-width: 768px) {
  .banner__slider-wrap {
    height: 256px;
  }
}

.banner-slider {
  height: 100%;
}
.banner-slider:not(.slick-initialized) {
  visibility: hidden;
}
.banner-slider .slick-list {
  height: 100% !important;
  overflow: hidden;
}
.banner-slider .slick-slide {
  margin-bottom: 16px;
}
.banner-slider .slick-slide:last-of-type {
  padding-bottom: 0;
}

.slide-card {
  height: 228px !important;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .slide-card {
    height: 168px !important;
  }
}
@media (max-width: 768px) {
  .slide-card {
    height: 120px !important;
  }
}

.slide-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.5s ease;
}
.slide-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.slide-card:hover .slide-card__image {
  transform: scale(1.06);
}

.slide-card__image--fallback {
  background: linear-gradient(135deg, #FF6B35 0%, #e55a24 100%);
}

.slide-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 52px 12px 14px;
  background: linear-gradient(0deg, rgba(10, 18, 36, 0.96) 0%, rgba(10, 18, 36, 0.7) 55%, transparent 100%);
  color: #ffffff;
}

.slide-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  background: rgba(255, 255, 255, 0.93);
  color: #e55a24;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-bottom: 7px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 768px) {
  .slide-card__tag {
    font-size: 8px;
  }
}

.slide-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
@media (max-width: 768px) {
  .slide-card__title {
    font-size: 0.75rem;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCO: Banner V2 - Hero do Serviço
   ================================================================== */
.service-hero {
  padding: 48px 0 96px;
  background: var(--color-bg);
}
@media (max-width: 768px) {
  .service-hero {
    padding: 32px 0 64px;
  }
}
.service-hero .breadcrumb {
  padding: 32px 0 0;
}
.service-hero .breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}
.service-hero .breadcrumb li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.service-hero .breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--color-border);
}
.service-hero .breadcrumb li[aria-current=page] {
  color: var(--color-dark);
  font-weight: 500;
}
.service-hero .breadcrumb a {
  color: var(--color-text);
  transition: var(--transition-fast);
}
.service-hero .breadcrumb a:hover {
  color: var(--color-primary);
}
.service-hero__content {
  max-width: 900px;
  margin: 48px auto 0;
  text-align: center;
}
@media (max-width: 768px) {
  .service-hero__content {
    margin-top: 32px;
  }
}
.service-hero .service-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--color-primary-alpha);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 24px;
}
.service-hero .service-badge svg {
  color: var(--color-primary);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .service-hero .service-badge {
    padding: 8px 20px;
    font-size: 0.875rem;
    gap: 8px;
  }
  .service-hero .service-badge svg {
    width: 16px;
    height: 16px;
  }
}
.service-hero__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.5rem, 6vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-dark-2);
  margin-bottom: 24px;
}
.service-hero__title .highlight {
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .service-hero__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
    margin-bottom: 20px;
  }
}
.service-hero__description {
  font-size: var(--font-size-xl);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 40px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .service-hero__description {
    font-size: var(--font-size-base);
    margin-bottom: 32px;
  }
}
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 64px;
}
@media (max-width: 768px) {
  .service-hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 48px;
  }
}
.service-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
  .service-hero__stats {
    gap: 32px;
    padding-top: 32px;
  }
}
.service-hero .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.service-hero .stat-value {
  font-family: var(--font-family-title);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
@media (max-width: 768px) {
  .service-hero .stat-value {
    font-size: var(--font-size-2xl);
  }
}
.service-hero .stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: center;
}
@media (max-width: 768px) {
  .service-hero .stat-label {
    font-size: 0.8125rem;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.who-hero {
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  background-color: #e8e8e8;
}
.who-hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.who-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.who-hero__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: #0f172a;
  line-height: 1.1;
  margin: 0;
}
.who-hero__title--accent {
  color: #FF6B35;
}
.who-hero__description {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.75;
  max-width: 480px;
  margin: 0;
}
.who-hero__image {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  aspect-ratio: 4/4;
}
.who-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  filter: grayscale(100%);
}
.who-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
@media (max-width: 1024px) {
  .who-hero__container {
    grid-template-columns: 1fr;
  }
  .who-hero__image {
    order: -1;
    max-height: 400px;
  }
  .who-hero__description {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .who-hero__image {
    max-height: 280px;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.services-hero .breadcrumb {
  margin-bottom: 32px;
}
.services-hero .breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: #94a3b8;
  padding: 0;
  margin: 0;
}
.services-hero .breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.services-hero .breadcrumb li:not(:last-child)::after {
  content: "/";
  color: #e2e8f0;
}
.services-hero .breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: all 0.15s ease;
}
.services-hero .breadcrumb a:hover {
  color: #FF6B35;
}
.services-hero .breadcrumb a:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 8px;
}
.services-hero .breadcrumb li[aria-current=page] {
  color: #1e293b;
  font-weight: 500;
}

.services-hero {
  padding-top: calc(72px + 80px);
  padding-bottom: 96px;
  background: #e8e8e8;
  position: relative;
  overflow: hidden;
}
.services-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.services-hero::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.services-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.services-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}
.services-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 107, 53, 0.1);
  color: #e55a24;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 107, 53, 0.18);
  width: fit-content;
  margin-bottom: 24px;
}
.services-hero__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  color: #0f172a;
  margin: 0 0 24px;
}
.services-hero__title span {
  color: #FF6B35;
  position: relative;
  display: inline;
}
.services-hero__title span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  border-radius: 2px;
  opacity: 0.3;
}
.services-hero__desc {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 520px;
}
.services-hero__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.services-hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-avatars {
  display: flex;
}
.trust-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -10px;
  object-fit: cover;
}
.trust-avatars img:first-child {
  margin-left: 0;
}

.trust-text {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}
.trust-text strong {
  color: #1e293b;
}

.services-hero__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.hero-svc-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1.5px solid #f1f5f9;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.hero-svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #FF6B35;
  opacity: 0;
  transition: opacity all 0.15s ease;
}
.hero-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: #FF6B35;
}
.hero-svc-card:hover::before {
  opacity: 1;
}
.hero-svc-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-color: transparent;
}
.hero-svc-card--featured::before {
  background: #FF6B35;
}
.hero-svc-card--featured .hero-svc-card__icon {
  background: rgba(255, 107, 53, 0.2);
}
.hero-svc-card--featured .hero-svc-card__title {
  color: #ffffff;
}
.hero-svc-card--featured .hero-svc-card__desc {
  color: rgba(255, 255, 255, 0.65);
}
.hero-svc-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgba(255, 107, 53, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.hero-svc-card__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.hero-svc-card__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.3;
}
.hero-svc-card__desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .services-hero {
    padding-top: calc(72px + 48px);
    padding-bottom: 64px;
  }
  .services-hero__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .services-hero__visual {
    order: -1;
  }
}
@media (max-width: 768px) {
  .services-hero__desc {
    max-width: 100%;
  }
  .services-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .services-hero__visual {
    grid-template-columns: 1fr 1fr;
  }
  .hero-svc-card--featured {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .services-hero__visual {
    grid-template-columns: 1fr;
  }
  .hero-svc-card--featured {
    grid-column: span 1;
  }
}
/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.page-hero {
  padding-block: 100px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .page-hero {
    padding-block: 60px;
  }
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero .breadcrumb {
  margin-bottom: 28px;
}
.page-hero .breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: #94a3b8;
  padding: 0;
  margin: 0;
}
.page-hero .breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-hero .breadcrumb li:not(:last-child)::after {
  content: "/";
  color: #e2e8f0;
}
.page-hero .breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: all 0.15s ease;
}
.page-hero .breadcrumb a:hover {
  color: #FF6B35;
}
.page-hero .breadcrumb a:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 8px;
}
.page-hero .breadcrumb li[aria-current=page] {
  color: #1e293b;
  font-weight: 500;
}
.page-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .page-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
.page-hero__text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.page-hero__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  color: #0f172a;
  margin-bottom: 20px;
}
.page-hero__title em {
  font-style: normal;
  color: #FF6B35;
  position: relative;
}
.page-hero__title em::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  border-radius: 2px;
  opacity: 0.3;
}
.page-hero__desc {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 560px;
}
.page-hero__stats {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f5f9;
  overflow: hidden;
}
@media (max-width: 768px) {
  .page-hero__stats {
    width: 100%;
  }
}
.page-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 36px;
}
@media (max-width: 768px) {
  .page-hero__stat {
    padding: 20px 24px;
  }
}
.page-hero__stat-value {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}
.page-hero__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  max-width: 130px;
  width: 100%;
}

.page-hero .stat-divider {
  width: 1px;
  background: #e2e8f0;
  align-self: stretch;
}
@media (max-width: 768px) {
  .page-hero .stat-divider {
    display: none;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ============================================================
   BLOCO: Slider de Imagens V1 (Showcase Visual)
   ============================================================
   Slider de imagens com legendas overlay, utilizando Slick Slider.
   Design moderno com efeitos de fade e hover.
   ============================================================ */
.service-showcase {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  overflow: hidden;
  /* Responsivo: reduzir padding em mobile */
}
@media (max-width: 768px) {
  .service-showcase {
    padding: 4rem 0;
  }
}

/* ============================================================
   Container do Slider
   ============================================================ */
.showcase-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  /* Prevenir flash de conteúdo não estilizado */
}
.showcase-slider:not(.slick-initialized) .showcase-slide:not(:first-child) {
  display: none;
}
.showcase-slider {
  /* Responsivo: ajustar border-radius em mobile */
}
@media (max-width: 768px) {
  .showcase-slider {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}

/* ============================================================
   Slide Individual
   ============================================================ */
.showcase-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f0f0f0;
  overflow: hidden;
  /* Imagem do slide */
}
.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-slide {
  /* Gradiente sutil na parte inferior para melhorar legibilidade do texto */
}
.showcase-slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.showcase-slide {
  /* Efeito de zoom suave no hover */
}
.showcase-slide:hover img {
  transform: scale(1.05);
}
.showcase-slide {
  /* Responsivo: ajustar aspect-ratio em mobile */
}
@media (max-width: 768px) {
  .showcase-slide {
    aspect-ratio: 4/3;
  }
}

/* ============================================================
   Legenda Overlay
   ============================================================ */
.showcase-caption {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
  /* Tag (categoria) */
}
.showcase-caption .caption-tag {
  display: inline-block;
  padding: 0.375rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary, #ff6b35);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  width: fit-content;
  backdrop-filter: blur(4px);
}
.showcase-caption {
  /* Texto descritivo */
}
.showcase-caption .caption-text {
  color: #ffffff;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  max-width: 500px;
}
.showcase-caption {
  /* Responsivo: ajustar tamanhos em mobile */
}
@media (max-width: 768px) {
  .showcase-caption {
    bottom: 1.5rem;
    left: 1.5rem;
    gap: 0.4rem;
  }
  .showcase-caption .caption-tag {
    font-size: 0.7rem;
    padding: 0.3rem 0.85rem;
  }
  .showcase-caption .caption-text {
    font-size: 1.25rem;
    max-width: calc(100vw - 3rem);
  }
}

/* ============================================================
   Navegação do Slick Slider (Setas)
   ============================================================ */
.showcase-slider {
  /* Setas de navegação */
}
.showcase-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Ícone SVG */
}
.showcase-slider .slick-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-primary, #ff6b35);
  border-right: 2px solid var(--color-primary, #ff6b35);
}
.showcase-slider .slick-arrow {
  /* Hover */
}
.showcase-slider .slick-arrow:hover {
  background: var(--color-primary, #ff6b35);
  transform: translateY(-50%) scale(1.1);
}
.showcase-slider .slick-arrow:hover::before {
  border-color: #ffffff;
}
.showcase-slider .slick-arrow {
  /* Focus (acessibilidade) */
}
.showcase-slider .slick-arrow:focus {
  outline: 2px solid var(--color-primary, #ff6b35);
  outline-offset: 2px;
}
.showcase-slider .slick-arrow {
  /* Ocultar texto padrão do Slick */
  font-size: 0;
  line-height: 0;
}
.showcase-slider {
  /* Seta anterior (esquerda) */
}
.showcase-slider .slick-prev {
  left: 2rem;
}
.showcase-slider .slick-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}
.showcase-slider {
  /* Seta seguinte (direita) */
}
.showcase-slider .slick-next {
  right: 2rem;
}
.showcase-slider .slick-next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}
.showcase-slider {
  /* Responsivo: ajustar posição das setas em mobile */
}
@media (max-width: 768px) {
  .showcase-slider .slick-arrow {
    width: 40px;
    height: 40px;
  }
  .showcase-slider .slick-arrow::before {
    width: 10px;
    height: 10px;
  }
  .showcase-slider .slick-prev {
    left: 1rem;
  }
  .showcase-slider .slick-next {
    right: 1rem;
  }
}

/* ============================================================
   Dots de Navegação (Paginação)
   ============================================================ */
.showcase-slider .slick-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.showcase-slider .slick-dots li {
  margin: 0;
  padding: 0;
}
.showcase-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0;
  line-height: 0;
}
.showcase-slider .slick-dots li button:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}
.showcase-slider .slick-dots li button:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.showcase-slider .slick-dots li {
  /* Dot ativo */
}
.showcase-slider .slick-dots li.slick-active button {
  width: 28px;
  border-radius: 5px;
  background: var(--color-primary, #ff6b35);
  border-color: var(--color-primary, #ff6b35);
}
.showcase-slider .slick-dots {
  /* Responsivo: ajustar tamanho dos dots em mobile */
}
@media (max-width: 768px) {
  .showcase-slider .slick-dots {
    bottom: 1rem;
    gap: 0.4rem;
  }
  .showcase-slider .slick-dots li button {
    width: 8px;
    height: 8px;
  }
  .showcase-slider .slick-dots li.slick-active button {
    width: 24px;
  }
}

/* ============================================================
   Estados de Loading
   ============================================================ */
.showcase-slider {
  /* Skeleton loader antes do Slick inicializar */
}
.showcase-slider:not(.slick-initialized) .showcase-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ============================================================
   Acessibilidade
   ============================================================ */
/* Garantir que as setas são visíveis para navegação por teclado */
.showcase-slider .slick-arrow:focus-visible {
  outline: 3px solid var(--color-primary, #ff6b35);
  outline-offset: 3px;
}

/* Garantir que os dots são acessíveis */
.showcase-slider .slick-dots li button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCK: Slider de Imagens V2
   ================================================================== */
.project-gallery {
  padding: 64px 0;
  background: var(--color-white);
}
@media (max-width: 768px) {
  .project-gallery {
    padding: 48px 0;
  }
}

.project-slider-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.project-slider-main--empty {
  box-shadow: none;
  border: 2px dashed var(--color-border);
}

.project-slide {
  position: relative;
  aspect-ratio: 14/9;
  background: var(--color-bg-2);
}
.project-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-slide--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-slide__placeholder {
  text-align: center;
  color: var(--color-text-light);
  padding: 64px 24px;
}
.project-slide__placeholder svg {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.project-slide__placeholder p {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
}
@media (max-width: 768px) {
  .project-slide__placeholder {
    padding: 48px 16px;
  }
  .project-slide__placeholder svg {
    width: 48px;
    height: 48px;
  }
}

/* Slick Arrows - Setas laterais centradas */
.project-slider-main .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-md);
}
.project-slider-main .slick-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}
.project-slider-main .slick-arrow:hover svg {
  stroke: var(--color-primary);
}
.project-slider-main .slick-arrow:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.project-slider-main .slick-arrow svg {
  stroke: var(--color-dark);
  transition: var(--transition-fast);
}
@media (max-width: 768px) {
  .project-slider-main .slick-arrow {
    width: 40px;
    height: 40px;
  }
  .project-slider-main .slick-arrow svg {
    width: 20px;
    height: 20px;
  }
}
.project-slider-main .slick-prev {
  left: 24px;
}
@media (max-width: 768px) {
  .project-slider-main .slick-prev {
    left: 16px;
  }
}
.project-slider-main .slick-next {
  right: 24px;
}
@media (max-width: 768px) {
  .project-slider-main .slick-next {
    right: 16px;
  }
}
.project-slider-main .slick-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.project-slider-main .slick-disabled:hover {
  transform: translateY(-50%);
}
.project-slider-main .slick-disabled:hover svg {
  stroke: var(--color-dark);
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.services {
  padding: 96px 0;
  position: relative;
}

.services--4col {
  background: #ffffff;
}

.services-grid {
  display: grid;
  gap: 24px;
}

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

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

.services-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.services-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.services-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.services-grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1024px) {
  .services-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
.services__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.service-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  border-radius: 24px 24px 0 0;
}
.service-card:hover {
  border-color: rgba(255, 107, 53, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  transform: translateY(-5px);
}
.service-card:hover::before {
  transform: scaleX(1);
}
.service-card:hover .service-card__icon {
  background: #FF6B35;
  color: #ffffff;
  transform: scale(1.08);
}
.service-card:hover .svc-icon-svg {
  color: #ffffff;
}
.service-card:hover .service-card__icon-img {
  filter: brightness(0) invert(1);
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 16px;
  color: #FF6B35;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  overflow: hidden;
}

.svc-icon-svg {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  color: #FF6B35;
  stroke: currentColor;
  fill: none;
  transition: color all 0.3s ease;
}
.svc-icon-svg * {
  stroke: inherit;
}

.service-card__icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: filter all 0.3s ease;
}

.service-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.25;
}

.service-card__desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.75;
  margin-bottom: 20px;
  flex: 1;
}
.service-card__desc p:first-child {
  margin-top: 0;
}
.service-card__desc p:last-child {
  margin-bottom: 0;
}

.service-card__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-card__features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
}
.service-card__features li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(255, 107, 53, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23e55a24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border: 1.5px solid rgba(229, 90, 36, 0.2);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #e55a24;
  text-decoration: none;
  transition: all 0.15s ease;
}
.service-card__link::after {
  content: "→";
  font-size: 1em;
  transition: transform 0.2s ease;
}
.service-card__link:hover {
  color: #FF6B35;
}
.service-card__link:hover::after {
  transform: translateX(4px);
}

.services-cards__empty {
  padding: 48px;
  text-align: center;
  border: 2px dashed #e2e8f0;
  border-radius: 24px;
  color: #64748b;
  font-size: 0.875rem;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.projects-section {
  padding: 96px 0;
  position: relative;
  background: #e8e8e8;
}

.projects-section__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1.5px solid #e2e8f0;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .projects-section__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.projects-cta__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.projects-cta__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.projects-cta__subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
}

.projects-cta__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-rows: auto;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.projects-grid__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 24px;
  overflow: hidden;
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #1a1a2e 100%);
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.project-card:hover, .project-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  outline: 3px solid #FF6B35;
  outline-offset: 3px;
}
.project-card:hover .project-card__link, .project-card:focus-visible .project-card__link {
  gap: 10px;
  color: #ff8c5a;
}
.project-card:focus-visible {
  outline-offset: 2px;
}

.project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.project-card--large {
  min-height: 520px;
}
@media (max-width: 1024px) {
  .project-card--large {
    min-height: 400px;
  }
}
@media (max-width: 768px) {
  .project-card--large {
    min-height: 320px;
  }
}

.project-card--small {
  flex: 1;
  min-height: 220px;
}
@media (max-width: 1024px) {
  .project-card--small {
    min-height: 280px;
  }
}

.project-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.project-card__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(10, 15, 30, 0.97) 0%, rgba(10, 15, 30, 0.75) 40%, rgba(10, 15, 30, 0.35) 70%, rgba(10, 15, 30, 0.15) 100%);
}
.project-card__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(10, 15, 30, 0.3) 0%, rgba(10, 15, 30, 0.3) 50%, rgba(10, 15, 30, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.project-card:hover .project-card__overlay::after, .project-card:focus-visible .project-card__overlay::after {
  opacity: 1;
}

.project-card__body {
  position: relative;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-card--small .project-card__body {
  padding: 20px 24px;
}

.project-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.project-card__cat {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: #FF6B35;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  border-radius: 9999px;
  line-height: 1.6;
  text-shadow: none;
}

.project-card__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.project-card--small .project-card__title {
  font-size: 1.25rem;
}

.project-card__desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card--large .project-card__desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.15s ease;
}
.project-card__link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.project-card__link:hover svg, .project-card:hover .project-card__link svg {
  transform: translateX(4px);
}

.projects-cards__empty {
  padding: 48px;
  text-align: center;
  border: 2px dashed #e2e8f0;
  border-radius: 24px;
  color: #64748b;
  font-size: 0.875rem;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCO: Cards Icon Title Description
   Secção com cards em grid, cada um com ícone, título e descrição
   ================================================================== */
.service-includes {
  padding: 96px 0;
  background: var(--color-bg);
}
.service-includes .section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 64px;
}
.service-includes .eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.service-includes .section-title {
  font-family: var(--font-family-title);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark-2);
  margin-bottom: 16px;
}
.service-includes .section-desc {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.service-includes .includes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .service-includes .includes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .service-includes .includes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.service-includes .include-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.service-includes .include-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.service-includes .include-card__icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary-alpha);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.service-includes .include-card__icon svg {
  color: var(--color-primary);
  width: 32px;
  height: 32px;
}
.service-includes .include-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.service-includes .include-card__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}
.service-includes .include-card__desc {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
}
.service-includes .include-card__desc p {
  margin: 0;
}
.service-includes .include-card__desc p + p {
  margin-top: 0.5em;
}
.service-includes {
  /* Empty state (editor) */
}
.service-includes .includes-grid__empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border);
}
.service-includes .includes-grid__empty p {
  color: var(--color-text-light);
  font-size: var(--font-size-base);
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCK: Image Left List Right
   ================================================================== */
.image-left-list-right {
  padding: 96px 0;
  background: var(--color-white);
}
.image-left-list-right .illr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 992px) {
  .image-left-list-right .illr-layout {
    grid-template-columns: 1fr 1fr;
  }
}
.image-left-list-right .illr-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.image-left-list-right .illr-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-left-list-right .illr-visual-badge {
  position: absolute;
  bottom: 32px;
  right: 32px;
  background: var(--color-primary);
  color: white;
  padding: 24px 32px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.image-left-list-right .illr-visual-badge .badge-number {
  display: block;
  font-family: var(--font-family-title);
  font-size: var(--font-size-4xl);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}
.image-left-list-right .illr-visual-badge .badge-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
}
.image-left-list-right .illr-content {
  max-width: 600px;
}
.image-left-list-right .illr-content .eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.image-left-list-right .illr-content .section-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .image-left-list-right .illr-content .section-title {
    font-size: var(--font-size-4xl);
  }
}
.image-left-list-right .illr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 48px 0;
}
.image-left-list-right .illr-item {
  display: flex;
  gap: 20px;
}
.image-left-list-right .illr-item-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-primary-alpha);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-left-list-right .illr-item-icon svg {
  color: var(--color-primary);
}
.image-left-list-right .illr-item-text h3 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-block: 0px 8px;
}
.image-left-list-right .illr-item-text p {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
}
.image-left-list-right .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
}
.image-left-list-right .btn-primary svg {
  transition: transform var(--transition-fast);
}
.image-left-list-right .btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.image-left-list-right .btn-primary:hover svg {
  transform: translateX(4px);
}
.image-left-list-right .btn-primary:focus-visible {
  outline: 3px solid var(--color-primary-alpha);
  outline-offset: 3px;
}
@media (min-width: 992px) {
  .image-left-list-right--reversed .illr-layout {
    grid-template-columns: 1fr 1fr;
  }
  .image-left-list-right--reversed .illr-layout .illr-visual {
    order: 2;
  }
  .image-left-list-right--reversed .illr-layout .illr-content {
    order: 1;
  }
}
.image-left-list-right--reversed .illr-visual-badge {
  right: auto;
  left: 32px;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.service-process {
  padding: 96px 0;
  background: var(--color-bg);
}
.service-process .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.service-process .section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 64px;
}
.service-process .section-header .eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.service-process .section-header .section-title {
  font-family: var(--font-family-title);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark-2);
  margin-bottom: 16px;
}
.service-process .section-header .section-desc {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.service-process .process-timeline {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.service-process .process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  position: relative;
}
.service-process .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 80px;
  bottom: -48px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border) 100%);
}
.service-process .process-step .step-number {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-title);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
}
.service-process .process-step .step-content {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.service-process .process-step .step-content .step-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}
.service-process .process-step .step-content .step-desc {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 20px;
}
.service-process .process-step .step-content .step-deliverables {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.service-process .process-step .step-content .step-deliverables li {
  padding: 6px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-dark);
}
@media (max-width: 767px) {
  .service-process {
    padding: 64px 0;
  }
  .service-process .section-header {
    margin-bottom: 48px;
  }
  .service-process .process-timeline {
    gap: 32px;
  }
  .service-process .process-step {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-process .process-step:not(:last-child)::after {
    display: none;
  }
  .service-process .process-step .step-number {
    width: 56px;
    height: 56px;
    font-size: var(--font-size-xl);
  }
  .service-process .process-step .step-content {
    padding: 24px;
  }
  .service-process .process-step .step-content .step-title {
    font-size: var(--font-size-xl);
  }
}

/* ==================================================================
   BLOCK: Tech Used - Tecnologias Utilizadas
   ================================================================== */
.service-tech {
  padding: 96px 0;
  background: var(--color-white);
}
.service-tech .tech-grid {
  display: grid;
  gap: 32px;
  justify-items: center;
}
.service-tech .tech-grid.tech-grid-1 {
  grid-template-columns: repeat(1, 1fr);
  max-width: 200px;
  margin: 0 auto;
}
.service-tech .tech-grid.tech-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 450px;
  margin: 0 auto;
}
.service-tech .tech-grid.tech-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 700px;
  margin: 0 auto;
}
.service-tech .tech-grid.tech-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.service-tech .tech-grid.tech-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.service-tech .tech-grid.tech-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.service-tech .tech-grid.tech-grid-7, .service-tech .tech-grid.tech-grid-8, .service-tech .tech-grid.tech-grid-9, .service-tech .tech-grid.tech-grid-10, .service-tech .tech-grid.tech-grid-11, .service-tech .tech-grid.tech-grid-12 {
  grid-template-columns: repeat(6, 1fr);
}
.service-tech .tech-item {
  width: 100%;
  max-width: 200px;
  text-align: center;
  padding: 32px 24px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.service-tech .tech-item:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.service-tech .tech-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-tech .tech-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary);
  transition: var(--transition-fast);
}
.service-tech .tech-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.service-tech .tech-item:hover .tech-icon svg {
  fill: var(--color-primary-dark);
  transform: scale(1.1);
}
.service-tech .tech-item h3 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}
.service-tech .tech-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
@media (max-width: 767px) {
  .service-tech .tech-grid.tech-grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .service-tech .tech-grid.tech-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  .service-tech .tech-grid.tech-grid-3, .service-tech .tech-grid.tech-grid-4, .service-tech .tech-grid.tech-grid-5, .service-tech .tech-grid.tech-grid-6, .service-tech .tech-grid.tech-grid-7, .service-tech .tech-grid.tech-grid-8, .service-tech .tech-grid.tech-grid-9, .service-tech .tech-grid.tech-grid-10, .service-tech .tech-grid.tech-grid-11, .service-tech .tech-grid.tech-grid-12 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  .service-tech .tech-item {
    max-width: 180px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .service-tech .tech-grid.tech-grid-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .service-tech .tech-grid.tech-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-tech .tech-grid.tech-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }
  .service-tech .tech-grid.tech-grid-4, .service-tech .tech-grid.tech-grid-5, .service-tech .tech-grid.tech-grid-6, .service-tech .tech-grid.tech-grid-7, .service-tech .tech-grid.tech-grid-8, .service-tech .tech-grid.tech-grid-9, .service-tech .tech-grid.tech-grid-10, .service-tech .tech-grid.tech-grid-11, .service-tech .tech-grid.tech-grid-12 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCO: FAQs (Perguntas Frequentes)
   ================================================================== */
.service-faq {
  padding: 96px 0;
  background: var(--color-bg);
}
@media (max-width: 768px) {
  .service-faq {
    padding: 64px 0;
  }
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.faq-item.active {
  box-shadow: var(--shadow-md);
}

.faq-question-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.faq-question:hover {
  color: var(--color-primary);
}
.faq-question:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.faq-question:focus:not(:focus-visible) {
  outline: none;
}
.faq-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.faq-question span {
  flex: 1;
}
@media (max-width: 768px) {
  .faq-question {
    padding: 20px 24px;
    font-size: var(--font-size-base);
    gap: 16px;
  }
}

.faq-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: var(--transition-fast);
}
@media (max-width: 768px) {
  .faq-icon {
    width: 18px;
    height: 18px;
  }
}

.faq-question[aria-expanded=true] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer[hidden] {
  display: block;
  max-height: 0;
  overflow: hidden;
}
.faq-answer p {
  padding: 0 32px 32px;
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}
.faq-answer p:first-child {
  padding-top: 8px;
}
.faq-answer ul, .faq-answer ol {
  padding: 0 32px 32px 64px;
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}
.faq-answer li {
  margin-bottom: 8px;
}
.faq-answer strong {
  color: var(--color-dark);
  font-weight: 600;
}
.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
}
.faq-answer a:hover {
  color: var(--color-primary-dark);
}
@media (max-width: 768px) {
  .faq-answer p, .faq-answer ul, .faq-answer ol {
    padding-left: 24px;
    padding-right: 24px;
    font-size: var(--font-size-sm);
  }
  .faq-answer ul, .faq-answer ol {
    padding-left: 48px;
  }
}

.faq-item.active .faq-answer {
  max-height: 1000px;
}

.faq-answer:not([hidden]) {
  max-height: 1000px;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCK: Last CTA V1 — Gravity Forms Styling
   ================================================================== */
.service-cta {
  padding: 96px 0;
  background: var(--color-white);
}

.cta-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  background: linear-gradient(135deg, var(--color-dark-2) 0%, #334155 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
@media (min-width: 990px) {
  .cta-card {
    grid-template-columns: 1.2fr 1fr;
  }
}

.cta-content {
  padding: 64px;
  color: white;
}

.cta-title {
  font-family: var(--font-family-title);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: white;
  margin-bottom: 20px;
}

.cta-desc {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
  max-width: 500px;
}

.cta-visual {
  display: none;
}
@media (min-width: 990px) {
  .cta-visual {
    display: block;
  }
}

.cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================================
   GRAVITY FORMS CUSTOM STYLING
   ================================================================== */
.cta-form-wrapper {
  margin-top: 40px;
  /* Container do formulário */
}
.cta-form-wrapper .gform_wrapper {
  max-width: 100% !important;
}
.cta-form-wrapper {
  /* Esconder campo Nome do Serviço (primeiro campo) */
}
.cta-form-wrapper #field_1_1 {
  display: none !important;
}
.cta-form-wrapper {
  /* Form fields container */
}
.cta-form-wrapper .gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 990px) {
  .cta-form-wrapper .gform_fields {
    flex-direction: column !important;
  }
}
.cta-form-wrapper {
  /* Individual field */
}
.cta-form-wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}
.cta-form-wrapper {
  /* Field label */
}
.cta-form-wrapper .gfield_label,
.cta-form-wrapper .gform-field-label {
  display: block !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 8px !important;
}
.cta-form-wrapper {
  /* Required indicator */
}
.cta-form-wrapper .gfield_required,
.cta-form-wrapper .gfield_required_text {
  color: var(--color-primary) !important;
  margin-left: 4px !important;
}
.cta-form-wrapper {
  /* Input containers */
}
.cta-form-wrapper .ginput_container,
.cta-form-wrapper .ginput_container_text,
.cta-form-wrapper .ginput_container_email,
.cta-form-wrapper .ginput_container_textarea {
  margin: 0 !important;
}
.cta-form-wrapper input {
  min-height: 50px !important;
}
.cta-form-wrapper {
  /* Input fields - seletores mais específicos */
}
.cta-form-wrapper input[type=text].large,
.cta-form-wrapper input[type=email].large,
.cta-form-wrapper input[type=tel].large,
.cta-form-wrapper input.large,
.cta-form-wrapper textarea.large,
.cta-form-wrapper textarea.textarea {
  width: 100% !important;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family) !important;
  color: white !important;
  transition: var(--transition-fast) !important;
  box-shadow: none !important;
}
.cta-form-wrapper input[type=text].large::placeholder,
.cta-form-wrapper input[type=email].large::placeholder,
.cta-form-wrapper input[type=tel].large::placeholder,
.cta-form-wrapper input.large::placeholder,
.cta-form-wrapper textarea.large::placeholder,
.cta-form-wrapper textarea.textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.cta-form-wrapper input[type=text].large:focus,
.cta-form-wrapper input[type=email].large:focus,
.cta-form-wrapper input[type=tel].large:focus,
.cta-form-wrapper input.large:focus,
.cta-form-wrapper textarea.large:focus,
.cta-form-wrapper textarea.textarea:focus {
  outline: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}
.cta-form-wrapper {
  /* Textarea specific */
}
.cta-form-wrapper textarea.large,
.cta-form-wrapper textarea.textarea {
  resize: vertical !important;
  min-height: 120px !important;
}
.cta-form-wrapper {
  /* Layout em 2 colunas usando as classes width do Gravity Forms */
}
.cta-form-wrapper .gfield--width-half {
  flex: 1 1 100% !important;
}
@media (min-width: 768px) {
  .cta-form-wrapper .gfield--width-half {
    flex: 1 1 calc(50% - 12px) !important;
  }
}
.cta-form-wrapper {
  /* Campo full width */
}
.cta-form-wrapper .gfield--width-full {
  flex: 1 1 100% !important;
}
.cta-form-wrapper {
  /* HTML Content Block (features list) */
}
.cta-form-wrapper .gfield--type-html ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.cta-form-wrapper .gfield--type-html ul li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--font-size-sm) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.cta-form-wrapper .gfield--type-html ul li::before {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  background: var(--color-primary) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
}
.cta-form-wrapper {
  /* Submit field container */
}
.cta-form-wrapper .gfield--type-submit {
  margin: 0 !important;
}
.cta-form-wrapper {
  /* Footer - esconder porque o botão está inline */
}
.cta-form-wrapper .gform_footer {
  display: none !important;
}
.cta-form-wrapper {
  /* Submit button */
}
.cta-form-wrapper .gform-button,
.cta-form-wrapper .gform_button,
.cta-form-wrapper input[type=submit].gform-button,
.cta-form-wrapper #gform_submit_button_1 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 15px !important;
  background: var(--color-primary) !important;
  color: white !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--transition-fast) !important;
  box-shadow: var(--shadow-sm) !important;
  width: auto !important;
}
.cta-form-wrapper .gform-button:hover,
.cta-form-wrapper .gform_button:hover,
.cta-form-wrapper input[type=submit].gform-button:hover,
.cta-form-wrapper #gform_submit_button_1:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
.cta-form-wrapper .gform-button:focus,
.cta-form-wrapper .gform_button:focus,
.cta-form-wrapper input[type=submit].gform-button:focus,
.cta-form-wrapper #gform_submit_button_1:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3) !important;
}
.cta-form-wrapper {
  /* Validation errors */
}
.cta-form-wrapper .gfield_error .gfield_label,
.cta-form-wrapper .gfield_error .gform-field-label {
  color: #fca5a5 !important;
}
.cta-form-wrapper .gfield_error input,
.cta-form-wrapper .gfield_error textarea {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}
.cta-form-wrapper .validation_error,
.cta-form-wrapper .gfield_description.validation_message {
  color: #fca5a5 !important;
  font-size: var(--font-size-sm) !important;
  margin-top: 8px !important;
  display: block !important;
}
.cta-form-wrapper {
  /* Success message */
}
.cta-form-wrapper .gform_confirmation_message {
  padding: 24px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: var(--radius-sm) !important;
  color: #86efac !important;
  font-size: var(--font-size-lg) !important;
  text-align: center !important;
}
.cta-form-wrapper {
  /* Loading spinner */
}
.cta-form-wrapper .gform_ajax_spinner {
  margin-left: 12px !important;
}
.cta-form-wrapper {
  /* Hidden fields */
}
.cta-form-wrapper .gform_hidden,
.cta-form-wrapper .gform_validation_container,
.cta-form-wrapper .gfield_visibility_hidden {
  display: none !important;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ==================================================================
   BLOCO: PROJECT OVERVIEW
   ================================================================== */
.project-overview {
  padding: 96px 0;
  background: var(--color-bg);
}
@media (max-width: 768px) {
  .project-overview {
    padding: 64px 0;
  }
}

.project-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}
@media (min-width: 992px) {
  .project-overview__grid {
    grid-template-columns: 1fr 400px;
    gap: 80px;
  }
}
@media (min-width: 1200px) {
  .project-overview__grid {
    grid-template-columns: 1fr 440px;
  }
}
@media (max-width: 768px) {
  .project-overview__grid {
    gap: 48px;
  }
}

/* ------------------------------------------------------------------
   COLUNA ESQUERDA: CONTEÚDO
   ------------------------------------------------------------------ */
.project-overview__content .section-title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark-2);
  margin-bottom: 32px;
}

.project-description p {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 24px;
}
.project-description p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .project-description p {
    font-size: var(--font-size-base);
  }
}

.project-objectives {
  margin-top: 48px;
}
.project-objectives h3 {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.objectives-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 0px;
}
.objectives-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-dark);
}
.objectives-list li svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .objectives-list li {
    font-size: var(--font-size-base);
  }
}

/* ------------------------------------------------------------------
   COLUNA DIREITA: SIDEBAR
   ------------------------------------------------------------------ */
.project-overview__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-info-card,
.project-results-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.project-info-card:hover,
.project-results-card:hover {
  box-shadow: var(--shadow-md);
}
.project-info-card h3,
.project-results-card h3 {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .project-info-card,
  .project-results-card {
    padding: 24px;
  }
}

/* Card de Informações */
.project-info-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 100px;
}
.project-info-card h3 {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.info-item:first-of-type {
  padding-top: 24px;
}
.info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .info-item {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

.info-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.info-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-dark);
  text-align: right;
}
@media (max-width: 768px) {
  .info-value {
    text-align: left;
  }
}

.info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  transition: var(--transition-fast);
}
.info-link svg {
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.info-link:hover {
  text-decoration: underline;
}
.info-link:hover svg {
  transform: translateX(2px) translateY(-2px);
}
@media (max-width: 768px) {
  .info-link {
    text-align: left;
  }
}

/* Card de Resultados */
.project-results-card h3 {
  margin-bottom: 24px;
}

.result-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.result-metric:first-of-type {
  padding-top: 0;
}
.result-metric:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.metric-value {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
@media (max-width: 768px) {
  .metric-value {
    font-size: var(--font-size-3xl);
  }
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.4;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.project-features {
  padding: 96px 0;
  background: var(--color-white);
}
@media (max-width: 768px) {
  .project-features {
    padding: 64px 0;
  }
}

.project-features .section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 64px;
}
@media (max-width: 768px) {
  .project-features .section-header {
    margin-bottom: 48px;
  }
}

.project-features .eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.project-features .section-title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .project-features .section-title {
    font-size: var(--font-size-3xl);
  }
}

.project-features .section-desc {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-top: 16px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .project-features .section-desc {
    font-size: var(--font-size-base);
  }
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (max-width: 768px) {
  .features-grid {
    gap: 40px;
  }
}

.feature-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 769px) {
  .feature-card {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
@media (max-width: 768px) {
  .feature-card {
    gap: 24px;
  }
}
@media (min-width: 769px) {
  .feature-card.feature-card--reversed .feature-card__image {
    order: 2;
  }
  .feature-card.feature-card--reversed .feature-card__content {
    order: 1;
  }
}
@media (min-width: 769px) {
  .feature-card:nth-child(even):not(.feature-card--reversed) .feature-card__image {
    order: 2;
  }
}

.feature-card__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
  display: block;
}

.feature-card:hover .feature-card__image img {
  transform: scale(1.05);
}

.feature-card__content h3 {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .feature-card__content h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 12px;
  }
}
.feature-card__content h4 {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 12px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .feature-card__content h4 {
    font-size: var(--font-size-lg);
  }
}
.feature-card__content p {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .feature-card__content p {
    font-size: var(--font-size-base);
    line-height: 1.6;
  }
}
.feature-card__content p:last-child {
  margin-bottom: 0;
}
.feature-card__content ul,
.feature-card__content ol {
  margin: 20px 0;
  padding-left: 0;
  list-style: none;
}
.feature-card__content ul li,
.feature-card__content ol li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .feature-card__content ul li,
  .feature-card__content ol li {
    padding-left: 28px;
    margin-bottom: 10px;
  }
}
.feature-card__content ul li:before,
.feature-card__content ol li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .feature-card__content ul li:before,
  .feature-card__content ol li:before {
    width: 18px;
    height: 18px;
    top: 6px;
  }
}
.feature-card__content ul li:last-child,
.feature-card__content ol li:last-child {
  margin-bottom: 0;
}
.feature-card__content ol {
  counter-reset: item;
}
.feature-card__content ol li:before {
  content: counter(item);
  counter-increment: item;
  background-image: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 700;
  top: 4px;
}
@media (max-width: 768px) {
  .feature-card__content ol li:before {
    width: 22px;
    height: 22px;
    top: 3px;
  }
}
.feature-card__content strong,
.feature-card__content b {
  font-weight: 700;
  color: var(--color-dark);
}
.feature-card__content a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: var(--transition);
}
.feature-card__content a:hover {
  color: var(--color-primary-dark);
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.text-left-stats-right {
  padding: 100px 0;
  background: #ffffff;
}
.text-left-stats-right .tlsr-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}
.text-left-stats-right .tlsr-content .eyebrow {
  margin-bottom: 12px;
}
.text-left-stats-right .tlsr-content .section-title {
  margin-bottom: 24px;
}
.text-left-stats-right .tlsr-text p {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 20px;
}
.text-left-stats-right .tlsr-text p:last-child {
  margin-bottom: 0;
}
.text-left-stats-right .tlsr-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.text-left-stats-right .tlsr-stat-box {
  background: #e8e8e8;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.text-left-stats-right .tlsr-stat-box:hover {
  border-color: #FF6B35;
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.text-left-stats-right .tlsr-stat-box__number {
  display: block;
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #FF6B35;
  margin-bottom: 8px;
  margin-left: 0px;
}
.text-left-stats-right .tlsr-stat-box__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.text-left-stats-right--reversed .tlsr-content {
  order: 2;
}
.text-left-stats-right--reversed .tlsr-stats {
  order: 1;
}
@media (max-width: 1024px) {
  .text-left-stats-right .tlsr-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .text-left-stats-right .tlsr-stats {
    flex-direction: row;
  }
  .text-left-stats-right--reversed .tlsr-content {
    order: unset;
  }
  .text-left-stats-right--reversed .tlsr-stats {
    order: unset;
  }
}
@media (max-width: 768px) {
  .text-left-stats-right {
    padding: 60px 0;
  }
  .text-left-stats-right .tlsr-stats {
    flex-direction: column;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.values {
  padding: 100px 0;
  background: #e8e8e8;
}
.values .vals-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.values .vals-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.values .vals-content .eyebrow {
  margin-bottom: 12px;
}
.values .vals-content .section-title {
  margin-bottom: 20px;
}
.values .vals-content .section-desc {
  margin-bottom: 32px;
  max-width: 420px;
}
.values .vals-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.values .vals-card {
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
}
.values .vals-card:hover {
  border-color: #FF6B35;
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.values .vals-card__image {
  width: 52px;
  height: 52px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}
.values .vals-card__image img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.values .vals-card__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  margin-top: 0;
}
.values .vals-card__desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}
.values--reversed .vals-content {
  order: 2;
}
.values--reversed .vals-cards {
  order: 1;
}
@media (max-width: 1024px) {
  .values .vals-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .values--reversed .vals-content {
    order: unset;
  }
  .values--reversed .vals-cards {
    order: unset;
  }
}
@media (max-width: 768px) {
  .values {
    padding: 60px 0;
  }
  .values .vals-cards {
    grid-template-columns: 1fr;
  }
  .values .vals-content .section-desc {
    max-width: 100%;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.team {
  padding: 100px 0;
  background: #ffffff;
}
@media (max-width: 768px) {
  .team {
    padding: 60px 0;
  }
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .team__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .team__grid {
    gap: 32px;
  }
}

.team-card {
  background: #e8e8e8;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid #f1f5f9;
  transition: all 0.3s ease;
}
.team-card:hover {
  border-color: #FF6B35;
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

.team-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  background: #f1ede8;
}
.team-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.team-card__image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #f1ede8 0%, #e2e8f0 100%);
}

.team-card__info {
  padding: 32px;
}

.team-card__name {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.team-card__role {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.team-card__bio {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 24px;
}

.team-card__social {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1e293b;
  transition: all 0.15s ease;
  border: 2px solid #e2e8f0;
}
.social-link:hover {
  background: #FF6B35;
  color: #ffffff;
  border-color: #FF6B35;
  transform: translateY(-2px);
}
.social-link:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: none;
  }
  .team-card:hover {
    transform: none;
  }
  .team-card__image img {
    transition: none;
  }
  .social-link {
    transition: none;
  }
  .social-link:hover {
    transform: none;
  }
}
/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.services-listing {
  padding: 96px 0;
  background: #ffffff;
}
@media (max-width: 1024px) {
  .services-listing {
    padding: 72px 0;
  }
}
@media (max-width: 768px) {
  .services-listing {
    padding: 56px 0;
  }
}

.services-grid-full {
  display: grid;
  gap: 24px;
}

.services-grid-full--1 {
  grid-template-columns: 1fr;
}

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

.services-grid-full--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .services-grid-full--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-grid-full {
    grid-template-columns: 1fr;
  }
}
.svc-card {
  background: #faf8f5;
  border-radius: 24px;
  border: 1.5px solid #f1f5f9;
  padding: 40px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  opacity: 0;
  transition: opacity all 0.15s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  border-color: rgba(255, 107, 53, 0.2);
}
.svc-card:hover::before {
  opacity: 1;
}
.svc-card--accent {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-color: transparent;
}
.svc-card--accent::before {
  opacity: 1;
}
.svc-card--accent .svc-card__icon {
  background: rgba(255, 107, 53, 0.2);
}
.svc-card--accent .svc-card__num {
  color: rgba(255, 255, 255, 0.08);
}
.svc-card--accent .svc-card__title {
  color: #ffffff;
}
.svc-card--accent .svc-card__desc {
  color: rgba(255, 255, 255, 0.65);
}
.svc-card--accent .svc-card__features li {
  color: rgba(255, 255, 255, 0.7);
}
.svc-card--accent .svc-card__features li::before {
  background: #FF6B35;
}
.svc-card--accent .svc-card__price-from {
  color: rgba(255, 255, 255, 0.45);
}
.svc-card--accent .svc-card__price-value {
  color: #ffffff;
}
.svc-card--accent .svc-card__link {
  color: #ff8c5a;
}
.svc-card--accent .svc-card__link:hover {
  color: #FF6B35;
}
.svc-card--accent .svc-card__footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.svc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.svc-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 107, 53, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-card__icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.svc-card__num {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(30, 41, 59, 0.07);
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
}
.svc-card__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  line-height: 1.2;
}
.svc-card__desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.75;
  margin: 0 0 24px;
  flex-grow: 1;
}
.svc-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: #1e293b;
}
.svc-card__features li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF6B35;
}
.svc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1.5px solid #f1f5f9;
  margin-top: auto;
}
.svc-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-card__price-from {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.svc-card__price-value {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #FF6B35;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.svc-card__link svg {
  transition: transform all 0.15s ease;
  flex-shrink: 0;
}
.svc-card__link:hover {
  color: #e55a24;
  gap: 10px;
}
.svc-card__link:hover svg {
  transform: translateX(4px);
}
.svc-card__link:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .svc-card {
    padding: 28px 24px;
  }
  .svc-card__num {
    font-size: 2.5rem;
  }
  .svc-card__title {
    font-size: 1.25rem;
  }
  .svc-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.process {
  padding: 96px 0;
  background: #e8e8e8;
}
@media (max-width: 768px) {
  .process {
    padding: 64px 0;
  }
}
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 1024px) {
  .process__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
.process__left {
  position: sticky;
  top: calc(72px + 40px);
}
@media (max-width: 1024px) {
  .process__left {
    position: static;
  }
}
.process__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 107, 53, 0.1);
  color: #FF6B35;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 107, 53, 0.18);
  margin-bottom: 28px;
}
.process__label svg {
  flex-shrink: 0;
}
.process__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0 0 24px;
}
.process__desc {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.75;
  margin: 0 0 40px;
}
.process__img {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  aspect-ratio: 4/3;
}
.process__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.process__steps {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.process__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}
.process__step:first-child {
  padding-top: 0;
}
.process__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.process__step:hover .process__step-num {
  background: #FF6B35;
  border-color: #FF6B35;
  color: #ffffff;
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .process__step {
    gap: 16px;
  }
}
.process__step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
  .process__step-num {
    width: 40px;
    height: 40px;
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .process__step-num {
    transition: none;
  }
}
.process__step-title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.3;
}
.process__step-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .process__step:hover .process__step-num {
    transform: none;
  }
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.why-us {
  padding: clamp(64px, 8vw, 96px) 0;
  background-color: #ffffff;
}
.why-us .section-header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1200px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .why-us__grid {
    grid-template-columns: 1fr;
  }
}
.why-us__empty {
  text-align: center;
  padding: 48px;
  color: #64748b;
  border: 2px dashed #e2e8f0;
  border-radius: 24px;
}

.why-card {
  background: #e8e8e8;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: #FF6B35;
}
.why-card__icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  flex-shrink: 0;
}
.why-card__icon svg,
.why-card__icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.why-card__icon-svg {
  width: 32px;
  height: 32px;
}
.why-card__icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.why-card__value {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin: 0 0 4px;
}
.why-card__label {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  line-height: 1.3;
}
.why-card__desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.small-banner-v1 {
  padding-block: 100px;
}
.small-banner-v1__box {
  background: linear-gradient(135deg, #0f172a 0%, #1e2d4a 100%);
  border-radius: 32px;
  padding: 72px 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.small-banner-v1__box::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .small-banner-v1__box {
    padding: 64px 48px;
  }
}
@media (max-width: 768px) {
  .small-banner-v1__box {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 32px;
    text-align: center;
  }
}
.small-banner-v1__eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FF6B35;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}
.small-banner-v1__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.small-banner-v1__desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 560px;
}
@media (max-width: 768px) {
  .small-banner-v1__desc {
    max-width: 100%;
  }
}
.small-banner-v1__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .small-banner-v1__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  justify-content: center;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.btn-ghost-light:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
}
.btn-ghost-light.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.pf-block {
  position: relative;
}

.pf-block__admin-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 107, 53, 0.1);
  border: 1.5px solid rgba(255, 107, 53, 0.25);
  border-radius: 16px;
  font-size: 0.875rem;
  color: #1e293b;
  margin-bottom: 20px;
}
.pf-block__admin-notice svg {
  flex-shrink: 0;
  color: #FF6B35;
}

.pf-block__empty {
  padding: 64px 32px;
  text-align: center;
  border: 2px dashed #e2e8f0;
  border-radius: 24px;
  color: #64748b;
  font-size: 0.875rem;
}

.pf-block__filter-bar {
  background: #e8e8e8;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 72px;
  z-index: 10;
}
.pf-block__filter-bar--static {
  position: static;
}

.pf-filter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.pf-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pf-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}
.pf-filter-pill:hover {
  border-color: #FF6B35;
  color: #FF6B35;
}
.pf-filter-pill:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 9999px;
}
.pf-filter-pill.is-active {
  background: #FF6B35;
  border-color: #FF6B35;
  color: #ffffff;
  font-weight: 600;
}
.pf-filter-pill.is-active .pf-filter-pill__count {
  background: rgba(255, 255, 255, 0.25);
}

.pf-filter-pill__count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.5;
}

.pf-projects-count {
  font-size: 0.875rem;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.pf-projects-count strong {
  color: #1e293b;
}

.pf-block__archive {
  padding: 64px 0 80px;
}
.pf-block__archive .pf-archive-title {
  margin-top: 0;
}

.pf-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pf-card {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  background: #0f172a;
  text-decoration: none;
  cursor: pointer;
  aspect-ratio: 4/3;
  color: inherit;
}
.pf-card--hidden {
  display: none !important;
}

.pf-card__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pf-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.pf-card:hover .pf-card__img-wrap img {
  transform: scale(1.07);
}

.pf-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.pf-card:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 3px;
}

.pf-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1;
  pointer-events: none;
}

.pf-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 17, 32, 0.95) 0%, rgba(10, 17, 32, 0.45) 50%, rgba(10, 17, 32, 0.1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 32px;
  transition: background all 0.3s ease;
}

.pf-card:hover .pf-card__overlay {
  background: linear-gradient(to top, rgba(10, 17, 32, 0.98) 0%, rgba(10, 17, 32, 0.65) 55%, rgba(10, 17, 32, 0.2) 100%);
}

.pf-card__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 8px;
}

.pf-card__desc {
  font-size: 0.875rem;
  color: rgb(255, 255, 255);
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 500px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pf-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 4px;
}
.pf-card__cta svg {
  transition: transform 0.25s ease;
}

.pf-card:hover .pf-card__cta svg,
.pf-card:focus-visible .pf-card__cta svg {
  transform: translateX(5px);
}

.pf-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 56px;
}

.pf-load-more__progress {
  width: 240px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}

.pf-load-more__bar {
  height: 100%;
  background: #FF6B35;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.pf-load-more__text {
  font-size: 0.875rem;
  color: #94a3b8;
}
.pf-load-more__text strong {
  color: #1e293b;
}

.pf-load-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  color: #ffffff;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 2px solid #1e293b;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
}
.pf-load-more__btn:hover {
  background: transparent;
  color: #1e293b;
}
.pf-load-more__btn:focus-visible {
  outline: 3px solid #FF6B35;
  outline-offset: 2px;
  border-radius: 9999px;
}

@media (max-width: 1024px) {
  .pf-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pf-block__archive {
    padding: 48px 0 64px;
  }
}
@media (max-width: 768px) {
  .pf-filter__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pf-filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pf-filter-pills::-webkit-scrollbar {
    display: none;
  }
  .pf-projects-count {
    white-space: normal;
  }
  .pf-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .pf-card__overlay {
    padding: 20px 22px;
  }
  .pf-block__archive {
    padding: 40px 0 56px;
  }
}
@media (max-width: 480px) {
  .pf-projects-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf-card,
  .pf-card__img-wrap img,
  .pf-card__overlay,
  .pf-card__cta,
  .pf-load-more__bar {
    transition: none !important;
  }
}
/*!
Theme Name: websitespro
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: websitespro
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

websitespro is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.page-banner {
  padding: clamp(80px, 10vw, 120px) 0 0;
  background-color: #e8e8e8;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.page-banner__container {
  position: relative;
  z-index: 1;
}
.page-banner__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FF6B35;
  margin-bottom: 16px;
}
.page-banner__title {
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: #0f172a;
  line-height: 1.1;
  margin: 0 0 24px;
  max-width: 760px;
}
.page-banner__separator {
  display: block;
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, #FF6B35, #ff8c5a);
  border-radius: 2px;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}