:root {
  --black: #04060a;
  --black-soft: #182437;
  --black-card: rgba(15, 27, 45, 0.58);

  --paper: #F7F6F2;
  --paper-soft: rgba(247, 246, 242, 0.72);
  --paper-muted: rgba(247, 246, 242, 0.68);

  --gold: #C8A45C;
  --gold-light: #D8BB82;
  --gold-dark: #9E7B3E;

  --gold-10: rgba(200, 164, 92, 0.10);
  --gold-15: rgba(200, 164, 92, 0.15);
  --gold-25: rgba(200, 164, 92, 0.25);
  --gold-40: rgba(200, 164, 92, 0.40);
  --gold-70: rgba(200, 164, 92, 0.70);

  --gray: #6B7280;
  --gray-light: #D1D5DB;

  --glass: rgba(17, 27, 40, 0.56);
  --glass-border: rgba(247, 246, 242, 0.13);

  --border: rgba(247, 246, 242, 0.12);
  --border-strong: rgba(247, 246, 242, 0.20);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --wrap: min(1240px, calc(100% - clamp(20px, 3vw, 64px)));
  --safe-x: max(12px, env(safe-area-inset-left));
  --safe-y: max(12px, env(safe-area-inset-top));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--black);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
}

@supports not (scroll-behavior: smooth) {
  html {
    scroll-behavior: auto;
  }
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  min-width: 320px;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(200, 164, 92, 0.08),
      transparent 35%
    ),
    var(--black);

  color: var(--paper);

  font-family:
    "Space Grotesk",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight: 400;
  line-height: 1.5;

  overflow-x: hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main h1,
main h2,
main h3,
main p,
main li,
main summary,
footer p,
footer a,
footer small {
  text-wrap: pretty;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  background: var(--gold);
  color: var(--black);
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

main,
section,
footer,
header {
  position: relative;
}

section {
  isolation: isolate;
}

.wrap {
  width: var(--wrap);
  max-width: 100%;
  margin-inline: auto;
}

em {
  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-style: italic;
  color: var(--gold);
}

.section-kicker {
  margin: 0;

  color: var(--gold-70);

  font-family:
    "JetBrains Mono",
    monospace;

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

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";

  display: inline-block;

  width: 18px;
  height: 1px;

  margin-right: 10px;

  vertical-align: middle;

  background: var(--gold);
}

.skip-link {
  position: fixed;

  top: 12px;
  left: 12px;

  z-index: 9999;

  padding: 10px 16px;

  border: 1px solid var(--gold-40);
  border-radius: var(--radius-pill);

  background: rgba(5, 5, 5, 0.92);

  transform: translateY(-150%);

  transition:
    transform 0.3s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle,
      rgba(200, 164, 92, 0.09),
      transparent 30%
    ),
    var(--black);

  pointer-events: none;

  transition:
    opacity 0.8s var(--ease),
    visibility 0.8s var(--ease);
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.site-loader > .loader-center > span {
  color: var(--paper);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 11px;
  letter-spacing: 0.4em;

  animation:
    loaderPulse 1.5s ease-in-out infinite;
}

.loader-progress {
  width: 120px;
  height: 1px;

  overflow: hidden;

  background:
    rgba(245, 241, 233, 0.1);
}

.loader-progress > span {
  display: block;

  width: 42%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      transparent
    );

  animation:
    loaderBar 1.25s var(--ease) infinite;
}

.loader-particles {
  position: absolute;
  inset: 0;
}

.loader-particles i {
  position: absolute;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: var(--gold);

  opacity: 0.25;

  animation:
    particleFloat 2.5s ease-in-out infinite;
}

.loader-particles i:nth-child(1) {
  top: 35%;
  left: 42%;
}

.loader-particles i:nth-child(2) {
  top: 48%;
  left: 57%;
  animation-delay: 0.2s;
}

.loader-particles i:nth-child(3) {
  top: 58%;
  left: 38%;
  animation-delay: 0.4s;
}

.loader-particles i:nth-child(4) {
  top: 30%;
  left: 62%;
  animation-delay: 0.6s;
}

.loader-particles i:nth-child(5) {
  top: 65%;
  left: 54%;
  animation-delay: 0.8s;
}

.loader-particles i:nth-child(6) {
  top: 42%;
  left: 33%;
  animation-delay: 1s;
}

.loader-particles i:nth-child(7) {
  top: 70%;
  left: 63%;
  animation-delay: 1.2s;
}

@keyframes loaderPulse {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

@keyframes loaderBar {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(320%);
  }
}

@keyframes particleFloat {
  0%,
  100% {
    transform: translate3d(0, 8px, 0);
    opacity: 0.15;
  }

  50% {
    transform: translate3d(0, -8px, 0);
    opacity: 0.5;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .nav,
  #menu-principal,
  .nav-cta {
    background: rgba(8, 8, 8, 0.84);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
  }
}

.nav {
  position: fixed;

  top: 18px;
  left: 50%;

  z-index: 1000;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 34px;

  width:
    min(
      1180px,
      calc(100vw - 40px)
    );

  min-height: 66px;

  padding:
    9px 10px 9px 20px;

  border:
    1px solid
    rgba(245, 241, 233, 0.12);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    ),
    rgba(8, 8, 8, 0.62);

  backdrop-filter:
    blur(28px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(135%);

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.35),
    inset 0 1px 0
    rgba(255, 255, 255, 0.07);

  transform:
    translateX(-50%);

  transition:
    top 0.45s var(--ease),
    width 0.45s var(--ease),
    border-color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
}

.nav::before {
  content: "";

  position: absolute;
  inset: 1px;

  border-radius: inherit;

  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.08),
      transparent 20%,
      transparent 70%,
      rgba(200, 164, 92, 0.08)
    );

  pointer-events: none;
}

.nav::after {
  content: "";

  position: absolute;

  top: 1px;
  left: 18%;

  width: 25%;
  height: 1px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 164, 92, 0.38),
      transparent
    );

  pointer-events: none;
}

.nav.scrolled {
  top: 12px;

  width:
    min(
      1100px,
      calc(100vw - 32px)
    );

  border-color:
    rgba(214, 176, 122, 0.16);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    ),
    rgba(5, 5, 5, 0.76);

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.48),
    0 0 40px rgba(200, 164, 92, 0.08),
    inset 0 1px 0
    rgba(255, 255, 255, 0.07);
}

.brand {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: 100px;
  min-width: 0;
}

.brand-logo {
  width: 100%;
  height: auto;
}

#menu-principal {
  position: relative;
  z-index: 2;

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

  gap: 28px;

  min-width: 0;
}

#menu-principal a {
  position: relative;

  color:
    rgba(245, 241, 233, 0.62);

  font-size: 12px;

  white-space: nowrap;

  transition:
    color 0.3s ease,
    transform 0.3s var(--ease);
}

#menu-principal a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--gold);

  transform: translateX(-50%);

  transition:
    width 0.35s var(--ease);
}

#menu-principal a:hover,
#menu-principal a[aria-current] {
  color: var(--paper);
}

#menu-principal a:hover {
  transform:
    translateY(-1px);
}

#menu-principal a:hover::after,
#menu-principal a[aria-current]::after {
  width: 18px;
}

.nav-cta {
  position: relative;
  z-index: 2;

  display: inline-flex;

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

  gap: 12px;

  min-height: 46px;

  padding: 0 19px;

  border:
    1px solid
    rgba(214, 176, 122, 0.38);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(200, 164, 92, 0.18),
      rgba(200, 164, 92, 0.05)
    );

  font-size: 11px;

  white-space: nowrap;

  transition:
    transform 0.35s var(--ease),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.nav-cta img {
  display: block;

  width: 64px;
  height: 64px;

  object-fit: contain;
  filter:
    brightness(0)
    saturate(100%)
    invert(69%)
    sepia(34%)
    saturate(636%)
    hue-rotate(358deg)
    brightness(88%)
    contrast(87%);

  transition:
    transform 0.35s var(--ease);
}

.nav-cta:hover {
  border-color:
    var(--gold-70);

  background:
    linear-gradient(
      135deg,
      rgba(214, 176, 122, 0.22),
      rgba(214, 176, 122, 0.07)
    );

  box-shadow:
    0 10px 35px
    rgba(200, 164, 92, 0.12);

  transform:
    translateY(-2px);
}

.nav-cta:hover span {
  transform:
    translate(2px, -2px);
}

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  flex: 0 0 auto;

  border:
    1px solid var(--border);

  border-radius: 50%;

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

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 17px;
  height: 1px;

  margin: 4px auto;

  background: var(--paper);

  transition:
    transform 0.35s var(--ease),
    opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"]
  span:nth-child(1) {
  transform:
    translateY(5px)
    rotate(45deg);
}

.menu-toggle[aria-expanded="true"]
  span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"]
  span:nth-child(3) {
  transform:
    translateY(-5px)
    rotate(-45deg);
}

.hero {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display: flex;
  align-items: center;

  overflow: visible;

  background: #030303;
}

@supports not (height: 100dvh) {
  .hero {
    min-height: 100vh;
  }
}

.hero-photo {
  position: absolute;
  inset: 0;

  z-index: -5;

  background:
    linear-gradient(
      90deg,
      rgba(3, 3, 3, 0.93) 0%,
      rgba(3, 3, 3, 0.74) 28%,
      rgba(3, 3, 3, 0.38) 52%,
      rgba(3, 3, 3, 0.15) 72%,
      rgba(3, 3, 3, 0.58) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.34),
      transparent 42%,
      rgba(3, 3, 3, 0.78)
    ),
    url("imagens/Farol.png")
      right center / contain no-repeat;

  transform: none;

  filter:
    saturate(0.8)
    contrast(1.12)
    brightness(0.78);

  will-change: filter;

  backface-visibility:
    hidden;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -3;

  background:
    radial-gradient(
      circle at 72% 50%,
      rgba(214, 176, 122, 0.075),
      transparent 25%
    ),
    radial-gradient(
      circle at 82% 52%,
      rgba(214, 176, 122, 0.045),
      transparent 36%
    );

  pointer-events: none;
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.7),
      transparent 55%
    );

  pointer-events: none;
}

.hero-light {
  position: absolute;

  width: 50vw;
  height: 50vw;

  right: -14%;
  top: 50%;

  max-width: 700px;
  max-height: 700px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(214, 176, 122, 0.12),
      rgba(214, 176, 122, 0.025) 42%,
      transparent 72%
    );

  transform:
    translateY(-50%);

  filter:
    blur(16px);

  pointer-events: none;

  will-change:
    transform,
    opacity;

  backface-visibility:
    hidden;
}

.hero-edge-light {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 18%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(3, 3, 3, 0.82)
    );

  pointer-events: none;
}

.hero-content {
  position: relative;

  width: var(--wrap);

  padding:
    100px 0 80px;

  isolation: isolate;
}

.hero-stars {
  position: absolute;

  inset:
    -8%
    -4%
    -8%
    -4%;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;
}

.hero-stars span {
  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    rgba(
      236,
      208,
      157,
      0.82
    );

  box-shadow:
    0 0 6px
    rgba(
      214,
      176,
      122,
      0.65
    ),
    0 0 14px
    rgba(
      214,
      176,
      122,
      0.18
    );

  opacity: 0.15;

  animation:
    heroStarPulse
    var(--star-duration, 3.8s)
    ease-in-out
    var(--star-delay, 0s)
    infinite;
}

.hero-stars span:nth-child(1) {
  top: 8%;
  left: 18%;
  width: 2px;
  height: 2px;
  --star-duration: 3.2s;
  --star-delay: -1.1s;
}

.hero-stars span:nth-child(2) {
  top: 17%;
  left: 43%;
  --star-duration: 4.8s;
  --star-delay: -2.7s;
}

.hero-stars span:nth-child(3) {
  top: 11%;
  right: 18%;
  width: 2px;
  height: 2px;
  --star-duration: 3.7s;
  --star-delay: -0.8s;
}

.hero-stars span:nth-child(4) {
  top: 32%;
  left: 7%;
  width: 2px;
  height: 2px;
  --star-duration: 5.1s;
  --star-delay: -3.4s;
}

.hero-stars span:nth-child(5) {
  top: 38%;
  left: 32%;
  --star-duration: 4s;
  --star-delay: -1.9s;
}

.hero-stars span:nth-child(6) {
  top: 27%;
  right: 34%;
  width: 2px;
  height: 2px;
  --star-duration: 3.5s;
  --star-delay: -2.1s;
}

.hero-stars span:nth-child(7) {
  top: 48%;
  right: 8%;
  --star-duration: 4.4s;
  --star-delay: -3s;
}

.hero-stars span:nth-child(8) {
  top: 59%;
  left: 14%;
  width: 2px;
  height: 2px;
  --star-duration: 5.4s;
  --star-delay: -4.2s;
}

.hero-stars span:nth-child(9) {
  top: 66%;
  left: 45%;
  --star-duration: 3.9s;
  --star-delay: -1.4s;
}

.hero-stars span:nth-child(10) {
  top: 72%;
  right: 23%;
  width: 2px;
  height: 2px;
  --star-duration: 4.7s;
  --star-delay: -2.9s;
}

.hero-stars span:nth-child(11) {
  top: 82%;
  left: 27%;
  width: 2px;
  height: 2px;
  --star-duration: 3.6s;
  --star-delay: -0.5s;
}

.hero-stars span:nth-child(12) {
  top: 88%;
  right: 12%;
  --star-duration: 5.2s;
  --star-delay: -3.6s;
}

@keyframes heroStarPulse {
  0%,
  100% {
    opacity: 0.08;
    transform:
      scale(0.7);
  }

  35% {
    opacity: 0.28;
    transform:
      scale(1);
  }

  50% {
    opacity: 0.9;
    transform:
      scale(1.35);
  }

  68% {
    opacity: 0.24;
    transform:
      scale(0.95);
  }
}

.hero-content-motion {
  transform:
    translate3d(
      0,
      0,
      0
    );

  will-change:
    transform;

  backface-visibility:
    hidden;

  transform-style:
    preserve-3d;
}

.hero-content-visual {
  opacity: 1;

  filter:
    blur(0);

  will-change:
    opacity,
    filter;

  backface-visibility:
    hidden;
}

.eyebrow {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0 0 28px;

  color:
    rgba(
      245,
      241,
      233,
      0.68
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size: 10px;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.eyebrow span {
  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: var(--gold);

  box-shadow:
    0 0 12px
    rgba(
      214,
      176,
      122,
      0.55
    );
}

.hero-title {
  max-width: 950px;

  margin: 0;

  color: var(--paper);

  font-size:
    clamp(
      58px,
      8.2vw,
      118px
    );

  font-weight: 500;

  line-height: 0.91;

  letter-spacing:
    -0.055em;

  text-wrap: balance;

  backface-visibility:
    hidden;
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line > em {
  display: inline-block;
}

.hero-bottom {
  display: grid;

  grid-template-columns:
    minmax(250px, 1fr)
    auto;

  align-items: end;

  gap: 40px;

  margin-top: 54px;
}

.hero-copy {
  max-width: 410px;

  margin: 0;

  color:
    rgba(
      245,
      241,
      233,
      0.65
    );

  font-size: 14px;

  line-height: 1.65;
}

.hero-actions {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 25px;

  margin-left: -55px;
  margin-bottom: 28px;
}

.button {
  position: relative;

  display: inline-flex;

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

  gap: 22px;

  min-height: 54px;

  max-width: 100%;

  padding: 0 21px;

  border-radius: 999px;

  font-size: 12px;

  white-space: nowrap;

  overflow: hidden;

  transform:
    translateZ(0);

  backface-visibility:
    hidden;

  transition:
    transform 0.4s var(--ease),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    color 0.35s ease;
}

.button-light {
  overflow: hidden;
}

.button-light::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 245, 214, 0.20),
      transparent 68%
    );

  opacity: 0;

  transition:
    opacity 0.45s ease;
}

.button-light:hover::before {
  opacity: 1;
}

.button > * {
  position: relative;
  z-index: 1;
}

.button-icon {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  object-fit: contain;

  transition:
    transform 0.4s var(--ease),
    filter 0.35s ease;
}

.button-fill {
  border:
    1px solid
    rgba(
      214,
      176,
      122,
      0.65
    );

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color:
    #11100e;

  box-shadow:
    0 10px 35px
    rgba(
      214,
      176,
      122,
      0.11
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.55
    );
}

.button-fill .button-icon {
  filter:
    brightness(0);
}

.button-fill:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 50px
    rgba(
      214,
      176,
      122,
      0.20
    ),
    0 0 30px
    rgba(
      214,
      176,
      122,
      0.08
    );
}

.button-outline {
  border:
    1px solid
    rgba(
      245,
      241,
      233,
      0.25
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        255,
        255,
        0.06
      ),
      rgba(
        255,
        255,
        255,
        0.015
      )
    );

  color:
    var(--paper);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.button-outline .button-icon {
  filter:
    brightness(0)
    invert(1);
}

.button-outline:hover {
  border-color:
    var(--gold);

  color:
    var(--gold);

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 40px
    rgba(
      214,
      176,
      122,
      0.08
    ),
    inset 0 0 20px
    rgba(
      214,
      176,
      122,
      0.035
    );
}

.button-outline:hover .button-icon {
  filter:
    brightness(0)
    saturate(100%)
    invert(76%)
    sepia(24%)
    saturate(670%)
    hue-rotate(356deg)
    brightness(89%)
    contrast(86%);
}

.button:hover .button-icon {
  transform:
    translate3d(
      3px,
      -2px,
      0
    );
}

.text-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color:
    rgba(
      245,
      241,
      233,
      0.67
    );

  font-size: 12px;

  white-space: nowrap;

  transition:
    color 0.3s ease,
    gap 0.35s var(--ease);
}

.text-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 100%;
  height: 1px;

  background:
    var(--gold);

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform 0.4s var(--ease);
}

.text-link b {
  color:
    var(--gold);

  font-size:
    15px;

  font-weight:
    400;
}

.text-link:hover {
  color:
    var(--paper);

  gap:
    16px;
}

.text-link:hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left;
}

[data-animation="text-sheen"] {
  display: inline-block;

  background:
    linear-gradient(
      112deg,
      var(--gold) 0%,
      var(--gold) 42%,
      #fff5dd 50%,
      var(--gold) 58%,
      var(--gold) 100%
    );

  background-size:
    220% 100%;

  background-position:
    130% 0;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  transition:
    background-position 1.5s var(--ease);
}

[data-animation="text-sheen"].is-sheen-active {
  background-position:
    -35% 0;
}

.fog {
  position: absolute;

  z-index: -1;

  width: 65%;
  height: 35%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(
        245,
        241,
        233,
        0.075
      ),
      transparent 68%
    );

  filter:
    blur(30px);

  pointer-events: none;

  will-change:
    transform;
}

.fog-one {
  right:
    -15%;

  top:
    45%;
}

.fog-two {
  left:
    -20%;

  top:
    60%;

  opacity:
    0.5;
}

.grain {
  position:
    absolute;

  inset:
    0;

  z-index:
    10;

  pointer-events:
    none;

  opacity:
    0.035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");

  mix-blend-mode:
    soft-light;
}

.statement,
.process,
.clients,
.faq-section {
  padding:
    160px
    0
    180px;
}

.statement-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.15fr
    )
    minmax(
      260px,
      0.55fr
    );

  gap:
    100px;

  margin-top:
    70px;
}

.statement-grid h2,
.problem-grid h2,
.process-title h2,
.work-heading h2,
.clients-intro h2,
.offer-heading h2,
.benefits-heading h2,
.faq-heading h2,
.closing-content h2 {
  margin:
    0;

  color:
    var(--paper);

  font-size:
    clamp(
      45px,
      6vw,
      78px
    );

  font-weight:
    400;

  line-height:
    0.96;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;
}

.statement-grid > div {
  align-self:
    end;

  max-width:
    410px;
}

.statement-grid p {
  margin:
    0 0 24px;

  color:
    var(--paper-muted);

  font-size:
    14px;

  line-height:
    1.8;
}

.statement-points {
  display:
    grid;

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

  margin-top:
    100px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.statement-points > div {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  grid-template-rows:
    auto
    1fr;

  align-items:
    start;

  min-width:
    0;

  min-height:
    280px;

  padding:
    30px 24px 34px;

  border-right:
    1px solid var(--border);

  overflow:
    hidden;
}

.statement-points > div:first-child {
  border-left:
    1px solid var(--border);
}

.statement-points span {
  display:
    inline-block;

  margin:
    0 10px 0 0;

  color:
    var(--paper);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;
}

.statement-points strong {
  display:
    inline-block;

  margin:
    0;

  color:
    var(--paper);

  font-size:
    10px;

  font-weight:
    400;

  letter-spacing:
    0.12em;

  line-height:
    1;

  text-transform:
    uppercase;
}

.statement-points strong::after {
  content:
    "→";

  margin-left:
    8px;

  color:
    var(--gold);

  font-size:
    11px;
}

.statement-points small {
  grid-column:
    1 / -1;

  align-self:
    end;

  display:
    block;

  min-width:
    0;

  color:
    var(--gold);

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-size:
    clamp(
      56px,
      7vw,
      88px
    );

  font-style:
    italic;

  line-height:
    0.82;

  white-space:
    nowrap;
}

.problem {
  padding:
    150px
    0
    170px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.015
      ),
      transparent 18%,
      transparent 82%,
      rgba(
        214,
        176,
        122,
        0.018
      )
    );

  border-top:
    1px solid
    rgba(
      245,
      241,
      233,
      0.07
    );

  border-bottom:
    1px solid
    rgba(
      245,
      241,
      233,
      0.07
    );
}

.problem-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      280px,
      0.55fr
    );

  gap:
    90px;

  margin-top:
    70px;
}

.problem-grid p {
  align-self:
    end;

  max-width:
    430px;

  margin:
    0;

  color:
    var(--paper-muted);

  font-size:
    15px;

  line-height:
    1.8;
}

.principles {
  display:
    grid;

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

  margin:
    100px 0 0;

  padding:
    0;

  list-style:
    none;

  border-top:
    1px solid var(--border);

  border-left:
    1px solid var(--border);
}

.principles li {
  position:
    relative;

  min-width:
    0;

  min-height:
    230px;

  padding:
    28px 24px;

  border-right:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  overflow:
    hidden;

  transition:
    background 0.45s ease,
    transform 0.45s var(--ease);
}

.principles li:hover {
  background:
    rgba(
      214,
      176,
      122,
      0.025
    );

  transform:
    translateY(-3px);
}

.principles span {
  display:
    block;

  margin-bottom:
    44px;

  color:
    rgba(
      214,
      176,
      122,
      0.78
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    10px;
}

.principles b {
  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--paper);

  font-size:
    17px;

  font-weight:
    500;
}

.principles p {
  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.43
    );

  font-size:
    15px;

  line-height:
    1.6;
}

.process-title {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      260px,
      0.48fr
    );

  gap:
    90px;

  margin-top:
    70px;
}

.process-title p {
  align-self:
    end;

  max-width:
    420px;

  margin:
    0;

  color:
    var(--paper-muted);

  font-size:
    15px;

  line-height:
    1.8;
}

.case-illustration {
  margin-top:
    90px;

  padding:
    28px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        255,
        255,
        0.035
      ),
      rgba(
        255,
        255,
        255,
        0.008
      )
    );

  overflow:
    hidden;

  contain:
    layout paint;
}

.case-illustration-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    25px;

  border-bottom:
    1px solid var(--border);
}

.case-illustration-head span {
  color:
    var(--gold);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    0.1em;
}

.case-illustration-head small {
  max-width:
    360px;

  color:
    rgba(
      245,
      241,
      233,
      0.45
    );

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-size:
    22px;

  font-style:
    italic;

  text-align:
    right;
}

.case-metrics {
  display:
    grid;

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

  gap:
    0;

  margin-top:
    10px;
}

.case-metrics article {
  min-width:
    0;

  min-height:
    220px;

  padding:
    30px;

  border-right:
    1px solid var(--border);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  backface-visibility:
    hidden;
}

.case-metrics article:last-child {
  border-right:
    0;
}

.case-metrics strong {
  display:
    block;

  color:
    var(--paper);

  font-size:
    clamp(
      42px,
      6vw,
      72px
    );

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  font-weight:
    400;
}

.case-metrics span {
  margin-top:
    20px;

  color:
    rgba(
      245,
      241,
      233,
      0.38
    );

  font-size:
    11px;
}

.steps {
  display:
    grid;

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

  margin-top:
    100px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.steps article {
  min-width:
    0;

  min-height:
    300px;

  padding:
    30px 25px;

  border-right:
    1px solid var(--border);

  overflow:
    hidden;

  transition:
    background 0.45s ease,
    transform 0.45s var(--ease);
}

.steps article:first-child {
  border-left:
    1px solid var(--border);
}

.steps article:hover {
  background:
    rgba(
      214,
      176,
      122,
      0.025
    );

  transform:
    translateY(-4px);
}

.steps article > span {
  display:
    block;

  margin-bottom:
    48px;

  color:
    rgba(
      214,
      176,
      122,
      0.78
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    10px;
}

.steps article h3 {
  margin:
    0 0 15px;

  color:
    var(--paper);

  font-size:
    21px;

  font-weight:
    400;
}

.steps article p {
  max-width:
    250px;

  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.45
    );

  font-size:
    15px;

  line-height:
    1.7;
}

.process-metrics {
  display:
    grid;

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

  margin-top:
    70px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.metric-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    190px;

  padding:
    28px 24px;

  border-right:
    1px solid var(--border);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden;

  contain:
    layout paint;
}

.metric-card:first-child {
  border-left:
    1px solid var(--border);
}

.metric-card strong {
  color:
    var(--gold);

  font-size:
    clamp(
      42px,
      5vw,
      66px
    );

  font-weight:
    400;

  line-height:
    0.9;
}

.metric-card span {
  color:
    rgba(
      245,
      241,
      233,
      0.40
    );

  font-size:
    13px;
}

.count-value {
  font-variant-numeric:
    tabular-nums;
}

.benefits-section {
  padding-top:
    150px;
}

.benefits-heading {
  display:
    grid;

  grid-template-columns:
    0.62fr
    1fr;

  gap:
    80px;
}

.benefits-counter {
  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    8px;

  margin-top:
    35px;

  color:
    rgba(
      245,
      241,
      233,
      0.38
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    11px;

  text-transform:
    uppercase;
}

.benefits-counter strong {
  color:
    var(--gold);

  font-size:
    22px;
}

.benefits-grid {
  display:
    grid;

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

  margin-top:
    100px;

  border-top:
    1px solid var(--border);

  border-left:
    1px solid var(--border);
}

.benefits-grid article {
  position:
    relative;

  min-width:
    0;

  min-height:
    280px;

  padding:
    26px 24px;

  border-right:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  overflow:
    hidden;

  transition:
    background 0.45s ease,
    transform 0.45s var(--ease);
}

.benefits-grid article:hover {
  background:
    rgba(
      214,
      176,
      122,
      0.025
    );

  transform:
    translateY(-4px);
}

.benefits-grid article > span {
  display:
    block;

  margin-bottom:
    54px;

  color:
    rgba(
      214,
      176,
      122,
      0.72
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    10px;
}

.benefits-grid h3 {
  margin:
    0 0 14px;

  color:
    var(--paper);

  font-size:
    20px;

  font-weight:
    400;
}

.benefits-grid p {
  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.44
    );

  font-size:
    15px;

  line-height:
    1.7;
}

.benefits-result {
  display:
    flex;

  align-items:
    center;

  gap:
    35px;

  margin-top:
    40px;

  padding:
    34px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(
        214,
        176,
        122,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.01
      )
    );

  overflow:
    hidden;

  contain:
    layout paint;
}

.benefits-result > span {
  color:
    var(--gold);

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-size:
    80px;

  line-height:
    0.75;
}

.benefits-result small {
  color:
    rgba(
      214,
      176,
      122,
      0.72
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    12px;

  text-transform:
    uppercase;
}

.benefits-result h3 {
  max-width:
    650px;

  margin:
    8px 0 0;

  color:
    var(--paper);

  font-size:
    28px;

  font-weight:
    400;
}

.work {
  padding:
    150px
    0
    80px;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(
        214,
        176,
        122,
        0.035
      ),
      transparent 45%
    );
}

.work-heading {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      260px,
      0.45fr
    );

  gap:
    90px;

  align-items:
    end;
}

.work-heading > p {
  max-width:
    390px;

  margin:
    0 0 4px;

  color:
    var(--paper-muted);

  font-size:
    15px;

  line-height:
    1.8;
}

.project-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    24px;

  margin-top:
    90px;
}

.project {
  min-width:
    0;

  contain:
    layout;
}

.project-large {
  grid-column:
    1 / -1;
}

.project-art {
  position:
    relative;

  min-height:
    430px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      245,
      241,
      233,
      0.10
    );

  border-radius:
    var(--radius-lg);

  background:
    #0c0d10;

  box-shadow:
    0 16px 45px
    rgba(
      0,
      0,
      0,
      0.35
    );

  isolation:
    isolate;

  transform:
    translate3d(0, 0, 0);

  will-change:
    transform,
    box-shadow,
    border-color;

  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-large .project-art {
  min-height:
    560px;
}

/* Video Micro-Showcase */
.project-video-wrapper {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  z-index:
    0;

  pointer-events:
    none;

  border-radius:
    inherit;
}

.project-video {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  filter:
    grayscale(100%)
    contrast(0.92)
    brightness(0.72);

  transform:
    scale(1.002);

  transition:
    filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  will-change:
    filter,
    transform;
}

.project-video-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      180deg,
      rgba(10, 11, 14, 0.42) 0%,
      rgba(10, 11, 14, 0.08) 35%,
      rgba(10, 11, 14, 0.72) 100%
    ),
    radial-gradient(
      circle at center,
      transparent 35%,
      rgba(10, 11, 14, 0.45) 100%
    );

  opacity:
    0.85;

  pointer-events:
    none;

  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle background illumination */
.project-art::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  background:
    radial-gradient(
      circle at
      var(--light-x, 50%)
      var(--light-y, 50%),
      rgba(
        214,
        176,
        122,
        0.08
      ),
      transparent 40%
    );

  opacity:
    0.5;

  pointer-events:
    none;

  transition:
    opacity 0.5s ease;
}

/* Hover States */
.project:hover .project-art {
  border-color:
    rgba(
      214,
      176,
      122,
      0.28
    );

  transform:
    translate3d(0, -6px, 0)
    scale(1.008);

  box-shadow:
    0 30px 70px -15px
    rgba(
      0,
      0,
      0,
      0.65
    ),
    0 0 35px
    rgba(
      214,
      176,
      122,
      0.07
    );
}

.project:hover .project-video {
  filter:
    grayscale(0%)
    contrast(1.04)
    brightness(1.0);

  transform:
    scale(1.038);
}

.project.is-selected .project-art {
  border-color:
    rgba(
      214,
      176,
      122,
      0.28
    );

  transform:
    translate3d(0, -6px, 0)
    scale(1.008);

  box-shadow:
    0 30px 70px -15px
    rgba(
      0,
      0,
      0,
      0.65
    ),
    0 0 35px
    rgba(
      214,
      176,
      122,
      0.07
    );
}

.project.is-selected .project-video {
  filter:
    grayscale(0%)
    contrast(1.04)
    brightness(1.0);

  transform:
    scale(1.038);
}

.project:hover .project-video-overlay {
  opacity:
    0.38;
}

.project:hover .project-art::before {
  opacity:
    0.85;
}

.project-glow {
  position:
    absolute;

  width:
    60%;

  aspect-ratio:
    1;

  right:
    -10%;

  top:
    -10%;

  z-index:
    1;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        214,
        176,
        122,
        0.12
      ),
      transparent 70%
    );

  filter:
    blur(24px);

  opacity:
    0.35;

  transition:
    opacity 0.65s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events:
    none;
}

.project:hover .project-glow {
  opacity:
    0.75;

  transform:
    scale(1.1);
}

.project.is-selected .project-video-overlay {
  opacity:
    0.38;
}

.project.is-selected .project-glow {
  opacity:
    0.75;

  transform:
    scale(1.1);
}

.project-light {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  background:
    radial-gradient(
      circle at
      var(--light-x, 50%)
      var(--light-y, 50%),
      rgba(
        255,
        255,
        255,
        0.04
      ),
      transparent 35%
    );

  opacity:
    0.4;

  transition:
    opacity 0.45s ease;

  pointer-events:
    none;
}

.project:hover .project-light {
  opacity:
    0.75;
}

.project.is-selected .project-light {
  opacity:
    0.75;
}

.project-art > span,
.project-art > i {
  position:
    relative;

  z-index:
    3;
}

.project-caption {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    22px
    5px
    10px;
}

.project-caption small {
  display:
    block;

  margin-bottom:
    8px;

  color:
    rgba(
      214,
      176,
      122,
      0.70
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    12px;

  text-transform:
    uppercase;
}

.project-caption h3 {
  margin:
    0;

  color:
    var(--paper);

  font-size:
    17px;

  font-weight:
    400;
}

.project-caption > a {
  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  flex:
    0 0 auto;

  color:
    var(--gold);

  transition:
    transform 0.4s var(--ease);
}

.project-caption > a img,
.nav-cta img {
  display:
    block;

  width:
    14px;

  height:
    14px;

  object-fit:
    contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(69%)
    sepia(34%)
    saturate(636%)
    hue-rotate(358deg)
    brightness(88%)
    contrast(87%)
    drop-shadow(0 0 5px rgba(216, 187, 130, 0.72));
}

.project-caption > a:hover {
  transform:
    translate(
      3px,
      -3px
    );
}

.project-result {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    0 5px 24px;
}

.project-result span {
  color:
    rgba(
      214,
      176,
      122,
      0.62
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    12px;

  text-transform:
    uppercase;
}

.project-result strong {
  color:
    rgba(
      245,
      241,
      233,
      0.65
    );

  font-size:
    11px;

  font-weight:
    400;
}

.art-syngenta {
  background:
    radial-gradient(
      circle at 70% 40%,
      rgba(
        214,
        176,
        122,
        0.13
      ),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #172015,
      #0a0d09 55%,
      #11140d
    );
}

.art-sephora,
.art-inpasa {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(
        245,
        241,
        233,
        0.12
      ),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #181512,
      #090908
    );
}

.art-ipiranga,
.art-multinacional {
  background:
    radial-gradient(
      circle at 60% 40%,
      rgba(
        214,
        176,
        122,
        0.12
      ),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #171410,
      #090807
    );
}

.project-art > span {
  position:
    absolute;

  left:
    35px;

  bottom:
    32px;

  z-index:
    3;

  color:
    var(--paper);

  font-size:
    clamp(
      26px,
      5vw,
      62px
    );

  font-weight:
    500;

  letter-spacing:
    -0.045em;
}

.project-art > i {
  position:
    absolute;

  top:
    30px;

  right:
    30px;

  z-index:
    3;

  color:
    var(--gold);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  font-style:
    normal;

  text-transform:
    uppercase;

  letter-spacing:
    0.13em;
}

.clients {
  width:
    100%;

  padding:
    150px
    0
    160px;

  overflow:
    hidden;
}

.clients-intro {
  width:
    var(--wrap);

  max-width:
    100%;

  margin-inline:
    auto;

  display:
    grid;

  grid-template-columns:
    0.8fr
    1fr;

  gap:
    80px;
}

.clients-years {
  display:
    block;

  margin-top:
    38px;

  color:
    var(--gold);

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-size:
    64px;

  font-style:
    italic;

  letter-spacing:
    -0.04em;
}

.client-marquee {
  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  margin-top:
    clamp(48px, 6vw, 90px);

  margin-inline:
    0;

  overflow:
    hidden;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black clamp(20px, 5vw, 80px),
      black calc(100% - clamp(20px, 5vw, 80px)),
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black clamp(20px, 5vw, 80px),
      black calc(100% - clamp(20px, 5vw, 80px)),
      transparent 100%
    );

  contain:
    paint;
}

.client-track {
  display:
    flex;

  width:
    max-content;

  will-change:
    transform;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  animation:
    sponsors-marquee
    28s
    linear
    infinite;
}

.client-track:hover,
.client-track:focus-within {
  animation-play-state:
    paused;
}

.client-group {
  display:
    flex;

  align-items:
    center;

  gap:
    clamp(70px, 6vw, 130px);

  flex-shrink:
    0;

  width:
    max-content;

  padding:
    0 clamp(35px, 3.5vw, 70px);
}

.client-group img {
  display:
    block;

  width:
    auto;

  max-width:
    clamp(170px, 15vw, 290px);

  height:
    clamp(48px, 4.5vw, 78px);

  flex:
    0 0 auto;

  object-fit:
    contain;

  filter:
    grayscale(1)
    brightness(1.5)
    contrast(0.72);

  opacity:
    0.5;

  transition:
    opacity 0.35s ease,
    filter 0.35s ease,
    transform 0.35s var(--ease);
}

.client-group img:hover {
  opacity:
    0.95;

  filter:
    grayscale(0)
    brightness(1)
    contrast(1);

  transform:
    translateY(-3px)
    scale(1.04);
}

@keyframes sponsors-marquee {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        var(--client-loop-distance, -50%),
        0,
        0
      );
  }
}

@media (min-width: 1600px) {
  .client-group {
    gap:
      clamp(110px, 7vw, 150px);

    padding:
      0 clamp(50px, 4vw, 80px);
  }

  .client-group img {
    height:
      clamp(74px, 4.5vw, 88px);

    max-width:
      clamp(240px, 16vw, 320px);
  }

  .client-track {
    animation-duration:
      32s;
  }
}

.trust-metrics {
  width:
    var(--wrap);

  max-width:
    100%;

  margin-inline:
    auto;
  display:
    grid;

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

  margin-top:
    90px;

  border-top:
    1px solid var(--border);

  border-left:
    1px solid var(--border);
}

.trust-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    220px;

  padding:
    30px 24px;

  border-right:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden;

  contain:
    layout paint;
}

.trust-card strong {
  color:
    var(--gold);

  font-size:
    clamp(
      46px,
      5vw,
      72px
    );

  font-weight:
    400;

  line-height:
    0.85;

  letter-spacing:
    -0.06em;
}

.trust-card span {
  max-width:
    160px;

  color:
    rgba(
      245,
      241,
      233,
      0.42
    );

  font-size:
    13px;

  line-height:
    1.6;
}

.testimonials {
  width:
    var(--wrap);

  max-width:
    100%;

  margin-inline:
    auto;

  display:
    grid;

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

  gap:
    24px;

  margin-top:
    45px;
}

.testimonial-card {
  position:
    relative;

  min-width:
    0;

  padding:
    32px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-md);

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

  overflow:
    hidden;

  contain:
    layout paint;
}

.testimonial-card > span {
  color:
    rgba(
      214,
      176,
      122,
      0.70
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.08em;
}

.testimonial-card blockquote {
  margin:
    40px 0 30px;

  color:
    var(--paper);

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-size:
    clamp(
      26px,
      3vw,
      40px
    );

  font-style:
    italic;

  line-height:
    1.05;
}

.testimonial-card small {
  color:
    rgba(
      245,
      241,
      233,
      0.38
    );

  font-size:
    13px;
}

.offer-heading {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    50px;

  align-items:
    end;
}

.offer-counter {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  color:
    rgba(
      245,
      241,
      233,
      0.42
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  text-transform:
    uppercase;

  text-align:
    right;
}

.offer-counter strong {
  color:
    var(--gold);

  font-size:
    18px;
}

.offer-list {
  display:
    grid;

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

  margin-top:
    90px;

  border-top:
    1px solid var(--border);

  border-left:
    1px solid var(--border);
}

.offer-list article {
  position:
    relative;

  min-width:
    0;

  min-height:
    160px;

  padding:
    24px;

  border-right:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  overflow:
    hidden;

  transition:
    transform 0.4s var(--ease),
    background 0.4s ease;
}

.offer-list article:hover {
  transform:
    translateY(-3px);

  background:
    rgba(
      214,
      176,
      122,
      0.025
    );
}

.offer-list span {
  display:
    block;

  margin-bottom:
    30px;

  color:
    rgba(
      214,
      176,
      122,
      0.72
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;
}

.offer-list p {
  margin:
    0;

  max-width:
    260px;

  color:
    rgba(
      245,
      241,
      233,
      0.48
    );

  font-size:
    15px;

  line-height:
    1.7;
}

.guarantee-block {
  margin-top:
    60px;

  padding:
    45px;

  border:
    1px solid
    rgba(
      214,
      176,
      122,
      0.18
    );

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      rgba(
        214,
        176,
        122,
        0.045
      ),
      rgba(
        255,
        255,
        255,
        0.01
      )
    );

  overflow:
    hidden;

  contain:
    layout paint;
}

.guarantee-block h3 {
  margin:
    45px 0 25px;

  color:
    var(--paper);

  font-size:
    clamp(
      34px,
      5vw,
      62px
    );

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.04em;
}

.guarantee-block p {
  max-width:
    610px;

  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.46
    );

  font-size:
    15px;

  line-height:
    1.8;
}

.capacity-block {
  display:
    grid;

  grid-template-columns:
    0.8fr
    1fr;

  gap:
    80px;

  margin-top:
    90px;

  padding-top:
    45px;

  border-top:
    1px solid var(--border);
}

.capacity-block h3 {
  margin-top:
    35px;

  color:
    var(--paper);

  font-size:
    clamp(
      34px,
      4vw,
      58px
    );

  line-height:
    0.95;

  font-weight:
    400;
}

.capacity-block p {
  max-width:
    470px;

  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.44
    );

  font-size:
    15px;

  line-height:
    1.8;
}

.capacity-line {
  grid-column:
    2;

  position:
    relative;

  height:
    2px;

  margin-top:
    25px;

  background:
    rgba(
      245,
      241,
      233,
      0.08
    );

  overflow:
    hidden;
}

.capacity-line span {
  display:
    block;

  width:
    78%;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      var(--gold-dark),
      var(--gold-light)
    );

  transform:
    scaleX(0);

  transform-origin:
    left;

  will-change:
    transform;

  transition:
    transform 1.4s var(--ease);
}

.capacity-block.is-visible
  .capacity-line span {
  transform:
    scaleX(1);
}

.objections-section {
  padding:
    150px
    0
    170px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.008
      ),
      transparent
    );
}

.objections-grid {
  display:
    grid;

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

  gap:
    1px;

  margin-top:
    90px;

  border-top:
    1px solid var(--border);

  border-left:
    1px solid var(--border);
}

.objections-grid article {
  position:
    relative;

  min-width:
    0;

  min-height:
    320px;

  padding:
    28px;

  border-right:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  overflow:
    hidden;
}

.objections-grid article:last-child {
  grid-column:
    1 / -1;
}

.objections-grid article > span {
  color:
    rgba(
      214,
      176,
      122,
      0.72
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;
}

.objections-grid h3 {
  margin:
    42px 0 15px;

  color:
    rgba(
      214,
      176,
      122,
      0.65
    );

  font-size:
    10px;

  font-family:
    "JetBrains Mono",
    monospace;

  text-transform:
    uppercase;
}

.objections-grid strong {
  display:
    block;

  max-width:
    460px;

  color:
    var(--paper);

  font-size:
    23px;

  font-weight:
    400;
}

.objections-grid p {
  max-width:
    470px;

  margin:
    22px 0 0;

  color:
    rgba(
      245,
      241,
      233,
      0.44
    );

  font-size:
    15px;

  line-height:
    1.8;
}

.faq-heading {
  display:
    grid;

  grid-template-columns:
    0.75fr
    1fr;

  gap:
    80px;
}

.faq-total {
  display:
    inline-block;

  margin-top:
    32px;

  color:
    rgba(
      245,
      241,
      233,
      0.38
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    12px;

  text-transform:
    uppercase;
}

.faq-list {
  margin-top:
    90px;

  border-top:
    1px solid var(--border);
}

.faq-list details {
  border-bottom:
    1px solid var(--border);

  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.faq-list details:hover {
  border-color:
    rgba(214, 176, 122, 0.5);
}

.faq-list summary {
  display:
    grid;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  align-items:
    center;

  gap:
    18px 22px;

  padding:
    24px 0;

  list-style:
    none;

  cursor:
    pointer;

  color:
    var(--paper);

  font-size:
    16px;

  user-select:
    none;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.faq-list summary::-webkit-details-marker {
  display:
    none;
}

.faq-list summary:hover {
  color:
    rgba(245, 241, 233, 0.96);
}

.faq-index {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    48px;

  padding:
    8px 10px;

  border:
    1px solid rgba(214, 176, 122, 0.35);

  border-radius:
    999px;

  color:
    var(--gold);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    10px;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

  transition:
    transform 0.35s var(--ease),
    border-color 0.35s ease,
    background-color 0.35s ease,
    color 0.35s ease;
}

.faq-question {
  min-width:
    0;

  color:
    inherit;

  line-height:
    1.5;
}

.faq-toggle {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  color:
    var(--gold);

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1;

  border:
    1px solid rgba(214, 176, 122, 0.2);

  border-radius:
    50%;

  background:
    rgba(214, 176, 122, 0.04);

  transition:
    transform 0.35s var(--ease),
    border-color 0.35s ease,
    background-color 0.35s ease,
    color 0.35s ease;
}

.faq-list details[open] .faq-index {
  background:
    rgba(214, 176, 122, 0.08);

  border-color:
    rgba(214, 176, 122, 0.62);
}

.faq-list details[open] .faq-toggle {
  transform:
    rotate(45deg);

  background:
    rgba(214, 176, 122, 0.1);

  border-color:
    rgba(214, 176, 122, 0.48);
}

.faq-answer {
  max-height:
    0;

  overflow:
    hidden;

  opacity:
    0;

  transform:
    translateY(-6px);

  transition:
    max-height 0.5s var(--ease),
    opacity 0.3s ease,
    transform 0.35s ease,
    padding 0.35s ease;
}

.faq-list details[open] .faq-answer {
  max-height:
    220px;

  opacity:
    1;

  transform:
    translateY(0);
}

.faq-list details p {
  max-width:
    760px;

  margin:
    0 0 26px 0;

  padding-left:
    70px;

  color:
    rgba(
      245,
      241,
      233,
      0.45
    );

  font-size:
    15px;

  line-height:
    1.8;
}

@media (max-width: 720px) {
  .faq-list summary {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .faq-list .faq-toggle {
    grid-column:
      2;

    justify-self:
      end;
  }

  .faq-list details p {
    padding-left:
      0;
  }
}

.closing {
  position:
    relative;

  min-height:
    100vh;

  min-height:
    100svh;

  min-height:
    100dvh;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:
    radial-gradient(
      ellipse at 72% 48%,
      rgba(
        214,
        176,
        122,
        0.075
      ),
      transparent 28%
    ),
    #030303;
}

.closing-scene {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 82% 48%,
      rgba(
        214,
        176,
        122,
        0.07
      ),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        0.12
      ),
      rgba(
        0,
        0,
        0,
        0.58
      )
    );

  contain:
    paint;
}

.closing-atmosphere {
  position:
    absolute;

  width:
    min(
      70vw,
      950px
    );

  height:
    min(
      70vw,
      950px
    );

  right:
    -8%;

  top:
    4%;

  max-width:
    950px;

  max-height:
    950px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        214,
        176,
        122,
        0.09
      ),
      transparent 68%
    );

  filter:
    blur(30px);

  animation:
    closingAtmosphere
    10s
    ease-in-out
    infinite;

  will-change:
    transform;
}

@keyframes closingAtmosphere {
  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }

  50% {
    transform:
      translate3d(
        -2%,
        2%,
        0
      )
      scale(1.04);
  }
}

.closing-vignette {
  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      ellipse at 75% 48%,
      transparent 0%,
      rgba(
        0,
        0,
        0,
        0.28
      ) 45%,
      rgba(
        0,
        0,
        0,
        0.90
      ) 100%
    );
}

.closing-beam-layer {
  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  filter:
    drop-shadow(
      0 0 30px
      rgba(
        214,
        176,
        122,
        0.08
      )
    );
}

.closing-beam-svg {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;
}

.closing-content {
  position:
    relative;

  z-index:
    3;

  padding:
    90px 0;
}

.closing-content h2 {
  max-width:
    950px;

  margin-top:
    55px;

  font-size:
    clamp(
      52px,
      7vw,
      105px
    );

  line-height:
    0.90;

  text-wrap:
    balance;
}

@supports not (text-wrap: balance) {
  .closing-content h2 {
    text-wrap: normal;
  }
}

.closing-description {
  max-width:
    480px;

  margin-top:
    55px;
}

.closing-description > p {
  max-width:
    390px;

  text-wrap:
    wrap;

  margin:
    0 0 30px;

  color:
    rgba(
      245,
      241,
      233,
      0.58
    );

  font-size:
    15px;

  line-height:
    1.75;
}

.closing-actions {
  display:
    flex;

  gap:
    12px;

  flex-wrap:
    wrap;
}

.closing-response {
  display:
    block;

  margin-top:
    22px;

  color:
    rgba(
      245,
      241,
      233,
      0.30
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.04em;
}

.footer {
  display:
    grid;

  grid-template-columns:
    1fr
    1.2fr
    1fr;

  align-items:
    end;

  gap:
    40px;

  padding:
    65px 0 45px;

  border-top:
    1px solid var(--border);
}

.footer-brand {
  width:
    105px;
}

.footer-logo {
  width:
    100%;
}

.footer p {
  max-width:
    250px;

  margin:
    0;

  color:
    rgba(
      245,
      241,
      233,
      0.40
    );

  font-size:
    11px;

  line-height:
    1.7;
}

.footer > div {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    8px;
}

.footer > div a {
  color:
    rgba(
      245,
      241,
      233,
      0.50
    );

  font-size:
    10px;

  transition:
    color 0.3s ease;
}

.footer > div a:hover {
  color:
    var(--gold);
}

.footer-socials {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    8px;
}

.footer .footer-icon-btn,
.footer .footer-instagram {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  padding:
    0;

  border-radius:
    50%;

  border:
    1px solid var(--gold-25);

  background:
    linear-gradient(
      135deg,
      rgba(200, 164, 92, 0.08),
      rgba(200, 164, 92, 0.02)
    );

  color:
    var(--gold);

  text-decoration:
    none;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transform:
    translateZ(0);

  transition:
    transform 0.35s var(--ease),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s var(--ease),
    color 0.3s ease;
}

.footer .footer-icon-btn:hover,
.footer .footer-instagram:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--gold);

  background:
    linear-gradient(
      135deg,
      rgba(200, 164, 92, 0.22),
      rgba(200, 164, 92, 0.08)
    );

  color:
    #ffffff;

  box-shadow:
    0 10px 24px -6px rgba(200, 164, 92, 0.28),
    0 0 16px rgba(200, 164, 92, 0.12);
}

.footer-btn-icon,
.footer-instagram-icon {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  color:
    var(--gold);

  transition:
    transform 0.35s var(--ease),
    color 0.3s ease;
}

.footer .footer-icon-btn:hover .footer-btn-icon,
.footer .footer-instagram:hover .footer-instagram-icon {
  transform:
    scale(1.14);

  color:
    var(--gold-light);
}

.footer small {
  grid-column:
    1 / -1;

  margin-top:
    35px;

  color:
    rgba(
      245,
      241,
      233,
      0.25
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    8px;
}

[data-hover~="spotlight"] {
  position:
    relative;

  isolation:
    isolate;
}

[data-hover~="spotlight"]::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      260px circle at
      var(--px, 50%)
      var(--py, 50%),
      rgba(
        214,
        176,
        122,
        0.16
      ),
      transparent 62%
    );

  transition:
    opacity 0.42s var(--ease);
}

[data-hover~="spotlight"] > * {
  position:
    relative;

  z-index:
    1;
}

[data-hover~="spotlight"].is-hover::after {
  opacity:
    1;
}

.lighthouse-cursor {
  position:
    fixed;

  inset:
    0;

  z-index:
    9990;

  pointer-events:
    none;

  opacity:
    0;

  contain:
    layout paint;

  transition:
    opacity 0.3s ease;
}

.has-lighthouse-cursor,
.has-lighthouse-cursor * {
  cursor:
    none !important;
}

.lighthouse-cursor.is-visible {
  opacity:
    1;
}

.lighthouse-cursor__core {
  position:
    absolute;

  left:
    var(--cursor-x);

  top:
    var(--cursor-y);

  width:
    7px;

  height:
    7px;

  border:
    1px solid
    rgba(
      245,
      241,
      233,
      0.75
    );

  border-radius:
    50%;

  background:
    var(--gold);

  box-shadow:
    0 0 12px
    rgba(
      214,
      176,
      122,
      0.55
    ),
    0 0 30px
    rgba(
      214,
      176,
      122,
      0.18
    );

  transform:
    translate(
      -50%,
      -50%
    );
}

.lighthouse-cursor__atmosphere {
  position:
    absolute;

  left:
    var(--light-x);

  top:
    var(--light-y);

  width:
    180px;

  height:
    180px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        214,
        176,
        122,
        0.09
      ),
      transparent 68%
    );

  transform:
    translate(
      -50%,
      -50%
    );

  filter:
    blur(7px);
}

.lighthouse-cursor__trail {
  position:
    absolute;

  left:
    var(--cursor-x);

  top:
    var(--cursor-y);

  width:
    var(--trail-length);

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        214,
        176,
        122,
        0.4
      )
    );

  transform:
    translate(
      -100%,
      -50%
    )
    rotate(
      var(--trail-angle)
    );

  transform-origin:
    right center;
}

.lighthouse-cursor__beam {
  position:
    absolute;

  left:
    var(--light-x);

  top:
    var(--light-y);

  width:
    300px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(
        214,
        176,
        122,
        0.55
      ),
      transparent
    );

  opacity:
    var(--beam-opacity);

  transform:
    translateY(-50%)
    rotate(
      var(--beam-angle)
    );

  transform-origin:
    left center;

  filter:
    blur(2px);
}

.lighthouse-cursor.is-interactive
  .lighthouse-cursor__core {
  width:
    12px;

  height:
    12px;

  background:
    var(--paper);

  border-color:
    var(--gold);
}

.lighthouse-cursor.is-media
  .lighthouse-cursor__atmosphere {
  width:
    230px;

  height:
    230px;
}

.lighthouse-cursor.is-proposal
  .lighthouse-cursor__core {
  background:
    var(--gold-light);
}

.reveal {
  opacity:
    1;
}


/* Canvas 3D do Farol Hero */
.hero-lighthouse-canvas {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.hero-lighthouse-canvas.is-hidden {
  opacity: 0;
}

/* Garantir que hero-photo seja fallback */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(
      90deg,
      rgba(3, 3, 3, 0.94) 0%,
      rgba(3, 3, 3, 0.78) 24%,
      rgba(3, 3, 3, 0.40) 52%,
      rgba(3, 3, 3, 0.18) 68%,
      rgba(3, 3, 3, 0.62) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 3, 3, 0.34),
      transparent 42%,
      rgba(3, 3, 3, 0.78)
    ),
    url("imagens/Farol.png")
      right center / contain no-repeat;
  transform: none;
  filter:
    saturate(0.8)
    contrast(1.12)
    brightness(0.78);
  will-change: filter;
  backface-visibility: hidden;
}


/* Melhoria de contraste e transição suave nos cards */
:where(
  .statement-points > div,
  .principles li,
  .steps article,
  .case-metrics article,
  .metric-card,
  .benefits-grid article,
  .offer-list article,
  .guarantee-block,
  .capacity-block,
  .objections-grid article,
  .trust-card,
  .testimonial-card,
  .project-art,
  .faq-list details
) {
  transition:
    background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease,
    opacity 0.35s ease;
  will-change: transform, background-color, color, border-color;
}

.statement-points > div.is-hover,
.statement-points > div:focus-within,
.principles li.is-hover,
.principles li:focus-within,
.steps article.is-hover,
.steps article:focus-within,
.case-metrics article.is-hover,
.case-metrics article:focus-within,
.metric-card.is-hover,
.metric-card:focus-within,
.benefits-grid article.is-hover,
.benefits-grid article:focus-within,
.offer-list article.is-hover,
.offer-list article:focus-within,
.guarantee-block.is-hover,
.guarantee-block:focus-within,
.capacity-block.is-hover,
.capacity-block:focus-within,
.objections-grid article.is-hover,
.objections-grid article:focus-within,
.trust-card.is-hover,
.trust-card:focus-within,
.testimonial-card.is-hover,
.testimonial-card:focus-within,
.project-art.is-hover,
.project-art:focus-within,
.faq-list details[open] {
  background: rgba(214, 176, 122, 0.03);
  border-color: rgba(214, 176, 122, 0.26);
  box-shadow: inset 0 0 0 1px rgba(214, 176, 122, 0.04), 0 18px 38px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px);
}

.statement-points > div.is-hover small,
.principles li.is-hover p,
.steps article.is-hover p,
.case-metrics article.is-hover span,
.metric-card.is-hover span,
.benefits-grid article.is-hover p,
.offer-list article.is-hover p,
.offer-list article.is-hover strong,
.guarantee-block.is-hover p,
.capacity-block.is-hover p,
.objections-grid article.is-hover p,
.objections-grid article.is-hover strong,
.trust-card.is-hover span,
.testimonial-card.is-hover small,
.testimonial-card.is-hover blockquote {
  color: rgba(245, 241, 233, 0.82) !important;
  transition: color 0.35s ease;
}

.statement-points > div.is-hover strong,
.principles li.is-hover b,
.steps article.is-hover h3,
.case-metrics article.is-hover strong,
.metric-card.is-hover strong,
.benefits-grid article.is-hover h3,
.guarantee-block.is-hover h3,
.capacity-block.is-hover h3,
.trust-card.is-hover strong,
.testimonial-card.is-hover span,
.project-caption.is-hover h3 {
  color: rgba(245, 241, 233, 0.96) !important;
}

.statement-points > div.is-hover span,
.principles li.is-hover span,
.steps article.is-hover > span,
.case-metrics article.is-hover > span,
.metric-card.is-hover > span,
.benefits-grid article.is-hover > span,
.offer-list article.is-hover > span,
.guarantee-block.is-hover > .section-kicker,
.capacity-block.is-hover > div > .section-kicker,
.objections-grid article.is-hover > span,
.trust-card.is-hover strong,
.testimonial-card.is-hover > span {
  color: rgba(214, 176, 122, 0.96) !important;
}

.statement-points > div.is-hover small {
  color: var(--gold-light) !important;
  text-shadow: 0 0 18px rgba(216, 187, 130, 0.62);
}

.statement-points > div.is-hover span {
  color: var(--paper) !important;
  text-shadow: 0 0 12px rgba(247, 246, 242, 0.5);
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .hero {
    overflow: visible;
  }

  .hero-photo {
    inset: 0;
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: none;
  }

  .hero-lighthouse-canvas {
    inset: 0;
  }

  .hero-light {
    width: 100vw;
    height: 100vw;
    right: -46%;
    top: 58%;
    max-width: none;
    max-height: none;
  }
}

@media (max-width: 420px) {
  .hero-photo {
    inset: 0;
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: none;
  }

  .hero-lighthouse-canvas {
    inset: 0;
  }
}

@media (max-width: 1180px) {
  :root {
    --wrap:
      min(
        1120px,
        calc(100% - 48px)
      );
  }

  .nav {
    gap:
      22px;
  }

  #menu-principal {
    gap:
      20px;
  }

  .nav-cta {
    padding-inline:
      16px;
  }

  .hero-actions {
    margin-left:
      -25px;

    margin-bottom:
      18px;
  }
}

@media (max-width: 1024px) {
  :root {
    --wrap:
      min(
        960px,
        calc(100% - 44px)
      );
  }

  .nav {
    width:
      calc(
        100vw - 32px
      );

    gap:
      18px;
  }

  #menu-principal {
    gap:
      16px;
  }

  #menu-principal a {
    font-size:
      11px;
  }

  .nav-cta {
    font-size:
      10px;
  }

  .statement,
  .process,
  .clients,
  .faq-section {
    padding:
      120px 0 135px;
  }

  .problem,
  .work,
  .objections-section {
    padding:
      120px 0 140px;
  }

  .statement-grid,
  .problem-grid,
  .process-title,
  .work-heading,
  .benefits-heading,
  .faq-heading {
    gap:
      55px;
  }

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

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

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

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

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

  .testimonials {
    grid-template-columns:
      1fr;
  }

  .client-group {
    gap:
      100px;
  }

  .client-group img {
    max-width:
      250px;

    height:
      66px;
  }
}

@media (max-width: 820px) {
  :root {
    --wrap:
      calc(
        100% - 40px
      );
  }

  .nav {
    grid-template-columns:
      auto 1fr auto;

    width:
      calc(
        100vw - 28px
      );
  }

  .brand {
    width:
      90px;
  }

  .nav-cta {
    display:
      none;
  }

  .hero-content {
    padding:
      110px 0 70px;
  }

  .hero-bottom {
    grid-template-columns:
      1fr;

    gap:
      32px;
  }

  .hero-actions {
    margin-left:
      -10px;

    margin-bottom:
      8px;
  }

  .statement-grid,
  .problem-grid,
  .process-title,
  .work-heading,
  .benefits-heading,
  .faq-heading,
  .capacity-block {
    grid-template-columns:
      1fr;
  }

  .statement-grid,
  .problem-grid,
  .process-title,
  .work-heading,
  .benefits-heading,
  .faq-heading {
    margin-top:
      50px;
  }

  .case-illustration-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .case-illustration-head small {
    max-width:
      420px;

    text-align:
      left;
  }

  .capacity-line {
    grid-column:
      1;
  }

  .project-grid {
    grid-template-columns:
      1fr;
  }

  .project-large {
    grid-column:
      auto;
  }

  .project-large .project-art {
    min-height:
      520px;
  }

  .clients-intro {
    grid-template-columns:
      1fr;
  }

  .offer-heading {
    grid-template-columns:
      1fr;
  }

  .offer-counter {
    align-items:
      flex-start;

    text-align:
      left;
  }

  .objections-grid {
    grid-template-columns:
      1fr;
  }

  .objections-grid article:last-child {
    grid-column:
      auto;
  }

  .faq-heading {
    grid-template-columns:
      1fr;
  }

  .footer {
    grid-template-columns:
      1fr 1fr;
  }

  .footer > div {
    align-items:
      flex-end;
  }

  .footer small {
    grid-column:
      1 / -1;
  }

  .client-marquee {
    width:
      100%;

    margin-top:
      clamp(40px, 5vw, 60px);

    margin-left:
      0;
  }

  .client-group {
    gap:
      68px;

    padding:
      0 30px;
  }

  .client-group img {
    max-width:
      180px;

    height:
      50px;
  }

  .client-track {
    animation-duration:
      25s;
  }
}

@media (max-width: 760px) {
  :root {
    --wrap:
      calc(
        100% - 32px
      );
  }

  html {
    scroll-padding-top:
      85px;
  }

  .nav {
    top:
      10px;

    width:
      min(
        100%,
        calc(
          100vw - 20px
        )
      );

    min-height:
      58px;

    padding:
      7px 7px 7px 14px;

    grid-template-columns:
      1fr auto;

    border-radius:
      22px;
  }

  .nav.scrolled {
    top:
      7px;

    width:
      min(
        100%,
        calc(
          100vw - 16px
        )
      );
  }

  .brand {
    width:
      84px;
  }

  #menu-principal {
    position:
      absolute;

    top:
      calc(
        100% + 9px
      );

    left:
      0;

    right:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      2px;

    padding:
      8px;

    border:
      1px solid
      var(--glass-border);

    border-radius:
      22px;

    background:
      linear-gradient(
        135deg,
        rgba(
          255,
          255,
          255,
          0.07
        ),
        rgba(
          255,
          255,
          255,
          0.025
        )
      ),
      rgba(
        5,
        5,
        5,
        0.88
      );

    backdrop-filter:
      blur(28px);

    -webkit-backdrop-filter:
      blur(28px);

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(-10px)
      scale(0.98);

    transform-origin:
      top;

    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.4s var(--ease);
  }

  #menu-principal.open {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0)
      scale(1);
  }

  #menu-principal a {
    display:
      flex;

    align-items:
      center;

    min-height:
      48px;

    padding:
      12px 14px;

    border-radius:
      14px;

    font-size:
      13px;
  }

  #menu-principal a::after {
    display:
      none;
  }

  #menu-principal a:hover,
  #menu-principal a[aria-current] {
    background:
      rgba(
        214,
        176,
        122,
        0.06
      );
  }

  .menu-toggle {
    display:
      block;
  }

  .hero {
    min-height:
      100svh;

    min-height:
      100dvh;
    overflow: visible;
  }

  .hero-photo {
    inset: 0;

    background:
      linear-gradient(
        90deg,
        rgba(
          3,
          3,
          3,
          0.82
        ) 0%,
        rgba(
          3,
          3,
          3,
          0.58
        ) 18%,
        rgba(
          3,
          3,
          3,
          0.32
        ) 42%,
        rgba(
          3,
          3,
          3,
          0.18
        ) 60%,
        rgba(
          3,
          3,
          3,
          0.72
        ) 100%
      ),
      url("imagens/Farol.png")
        right center / contain
        no-repeat;

    transform: none;

    filter:
      saturate(0.7)
      brightness(0.65)
      contrast(1.05);
  }

  .hero-light {
    width:
      min(
        92vw,
        620px
      );

    height:
      min(
        92vw,
        620px
      );

    right:
      -18%;

    top:
      58%;

    max-width:
      none;

    max-height:
      none;
  }

  .hero-content {
    padding:
      110px 0 78px;
  }

  .hero-stars {
    inset:
      -5%
      -10%;
  }

  .hero-stars span {
    width:
      2px;

    height:
      2px;

    box-shadow:
      0 0 5px
      rgba(
        214,
        176,
        122,
        0.55
      ),
      0 0 10px
      rgba(
        214,
        176,
        122,
        0.16
      );
  }

  .hero-stars span:nth-child(2),
  .hero-stars span:nth-child(5),
  .hero-stars span:nth-child(7),
  .hero-stars span:nth-child(9) {
    width:
      3px;

    height:
      3px;
  }

  .hero-title {
    max-width:
      100%;

    font-size:
      clamp(
        45px,
        14.4vw,
        74px
      );

    line-height:
      0.93;
  }

  .hero-bottom {
    display:
      block;

    margin-top:
      38px;
  }

  .hero-copy {
    max-width:
      360px;

    font-size:
      13px;

    line-height:
      1.7;
  }

  .hero-actions {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      18px;

    margin-top:
      26px;

    margin-left:
      0;

    margin-bottom:
      0;
  }

  .button {
    width:
      auto;

    min-height:
      52px;

    padding-inline:
      18px;

    font-size:
      12px;
  }

  .hero-actions .button {
    max-width:
      100%;
  }

  .statement,
  .process,
  .clients,
  .faq-section {
    padding:
      95px 0 100px;
  }

  .problem,
  .work,
  .objections-section {
    padding:
      95px 0 105px;
  }

  .benefits-section {
    padding-top:
      95px;
  }

  .statement-grid,
  .problem-grid,
  .process-title,
  .work-heading,
  .benefits-heading,
  .faq-heading {
    display:
      block;

    margin-top:
      42px;
  }

  .statement-grid h2,
  .problem-grid h2,
  .process-title h2,
  .work-heading h2,
  .clients-intro h2,
  .offer-heading h2,
  .benefits-heading h2,
  .faq-heading h2,
  .closing-content h2 {
    font-size:
      clamp(
        40px,
        12.4vw,
        62px
      );

    line-height:
      0.97;
  }

  .statement-grid > div,
  .problem-grid p,
  .process-title p,
  .work-heading > p {
    margin-top:
      30px;
  }

  .statement-points {
    grid-template-columns:
      1fr;

    margin-top:
      65px;
  }

  .statement-points > div {
    min-height:
      190px;

    padding:
      24px 20px;
  }

  .statement-points span {
    margin-right:
      8px;
  }

  .statement-points strong {
    font-size:
      9px;
  }

  .statement-points small {
    font-size:
      clamp(
        48px,
        15vw,
        70px
      );
  }

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

    margin-top:
      60px;
  }

  .principles li {
    min-height:
      auto;

    padding:
      24px 20px;
  }

  .principles span {
    margin-bottom:
      30px;
  }

  .case-illustration {
    margin-top:
      60px;

    padding:
      18px;

    border-radius:
      22px;
  }

  .case-illustration-head {
    gap:
      12px;

    padding-bottom:
      18px;
  }

  .case-illustration-head small {
    font-size:
      18px;

    line-height:
      1.05;
  }

  .case-metrics {
    grid-template-columns:
      1fr;
  }

  .case-metrics article {
    min-height:
      150px;

    padding:
      24px 4px;

    border-right:
      0;

    border-bottom:
      1px solid var(--border);
  }

  .case-metrics article:last-child {
    border-bottom:
      0;
  }

  .case-metrics strong {
    font-size:
      clamp(
        46px,
        16vw,
        72px
      );
  }

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

    margin-top:
      60px;
  }

  .steps article {
    min-height:
      220px;

    padding:
      25px 20px;

    border-left:
      1px solid
      var(--border);
  }

  .steps article > span {
    margin-bottom:
      34px;
  }

  .process-metrics {
    grid-template-columns:
      1fr;

    margin-top:
      50px;
  }

  .metric-card {
    min-height:
      150px;

    padding:
      24px 20px;

    border-left:
      1px solid var(--border);

    border-bottom:
      1px solid var(--border);
  }

  .metric-card:last-child {
    border-bottom:
      0;
  }

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

    margin-top:
      60px;
  }

  .benefits-grid article {
    min-height:
      240px;

    padding:
      24px 20px;
  }

  .benefits-result {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      18px;

    margin-top:
      28px;

    padding:
      26px 22px;

    border-radius:
      22px;
  }

  .benefits-result > span {
    font-size:
      62px;
  }

  .benefits-result h3 {
    font-size:
      23px;

    line-height:
      1.1;
  }

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

    margin-top:
      60px;

    gap:
      34px;
  }

  .project-large {
    grid-column:
      auto;
  }

  .project-art,
  .project-large .project-art {
    min-height:
      330px;

    border-radius:
      20px;

    transform:
      none !important;

    perspective:
      none;
  }

  .project-large .project-art {
    min-height:
      390px;
  }

  .project:hover .project-art {
    transform:
      none !important;
  }

  .project-art > span {
    left:
      22px;

    bottom:
      22px;

    font-size:
      clamp(
        30px,
        10vw,
        42px
      );
  }

  .project-art > i {
    top:
      20px;

    right:
      20px;

    font-size:
      8px;
  }

  .project-caption {
    align-items:
      flex-start;
  }

  .project-caption h3 {
    font-size:
      15px;

    line-height:
      1.35;
  }

  .project-caption > a {
    width:
      40px;

    height:
      40px;
  }

  .project-result {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;
  }

  .clients-intro {
    display:
      block;
  }

  .clients-years {
    margin-top:
      26px;

    font-size:
      52px;
  }

  .client-marquee {
    width:
      100%;

    margin-top:
      48px;

    margin-left:
      0;
  }

  .client-track {
    animation-duration:
      22s;
  }

  .client-group {
    gap:
      52px;

    padding:
      0 24px;
  }

  .client-group img {
    max-width:
      150px;

    height:
      42px;
  }

  .trust-metrics {
    grid-template-columns:
      1fr;

    margin-top:
      65px;
  }

  .trust-card {
    min-height:
      175px;

    padding:
      24px 20px;

    border-left:
      1px solid
      var(--border);
  }

  .trust-card strong {
    font-size:
      clamp(
        48px,
        15vw,
        68px
      );
  }

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

    gap:
      14px;

    margin-top:
      28px;
  }

  .testimonial-card {
    padding:
      24px 20px;
  }

  .testimonial-card blockquote {
    margin:
      28px 0 22px;

    font-size:
      28px;
  }

  .offer-heading {
    display:
      block;

    margin-top:
      42px;
  }

  .offer-counter {
    margin-top:
      28px;

    align-items:
      flex-start;

    text-align:
      left;
  }

  .offer-list {
    grid-template-columns:
      1fr;

    margin-top:
      60px;
  }

  .offer-list article {
    min-height:
      145px;

    padding:
      22px 20px;
  }

  .guarantee-block {
    margin-top:
      38px;

    padding:
      28px 22px;

    border-radius:
      22px;
  }

  .guarantee-block h3 {
    margin:
      34px 0 20px;

    font-size:
      36px;
  }

  .capacity-block {
    display:
      block;

    margin-top:
      62px;

    padding-top:
      34px;
  }

  .capacity-block h3 {
    margin-top:
      28px;

    font-size:
      36px;
  }

  .capacity-block p {
    margin-top:
      28px;

    font-size:
      12px;
  }

  .capacity-line {
    margin-top:
      32px;
  }

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

    margin-top:
      60px;
  }

  .objections-grid article,
  .objections-grid article:last-child {
    grid-column:
      auto;

    min-height:
      auto;

    padding:
      26px 20px;
  }

  .objections-grid h3 {
    margin:
      34px 0 14px;
  }

  .objections-grid strong {
    font-size:
      20px;
  }

  .faq-heading {
    display:
      block;

    margin-top:
      42px;
  }

  .faq-list {
    margin-top:
      55px;
  }

  .faq-list summary {
    align-items:
      flex-start;

    gap:
      16px;

    padding:
      20px 0;

    font-size:
      14px;

    line-height:
      1.45;
  }

  .faq-list summary span {
    gap:
      12px;

    align-items:
      flex-start;
  }

  .faq-list details p {
    margin:
      0 0 24px 28px;

    font-size:
      12px;
  }

  .closing {
    min-height:
      760px;
  }

  .closing-atmosphere {
    width:
      min(
        110vw,
        760px
      );

    height:
      min(
        110vw,
        760px
      );

    right:
      -20%;

    top:
      8%;
  }

  .closing-content {
    padding:
      95px 0;
  }

  .closing-content h2 {
    margin-top:
      38px;

    font-size:
      clamp(
        42px,
        13vw,
        62px
      );
  }

  .closing-description {
    margin-top:
      38px;
  }

  .closing-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .closing-actions .button {
    width:
      100%;

    min-height:
      52px;

    justify-content:
      space-between;
  }

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

    gap:
      26px;

    padding:
      42px 0 32px;
  }

  .footer > div {
    align-items:
      flex-start;
  }

  .footer small {
    grid-column:
      auto;
  }

  .lighthouse-cursor {
    display:
      none;
  }

  .has-lighthouse-cursor,
  .has-lighthouse-cursor * {
    cursor:
      auto !important;
  }
}

@media (max-width: 420px) {
  :root {
    --wrap:
      calc(
        100% - 24px
      );
  }

  .brand {
    width:
      78px;
  }

  .hero-content {
    padding:
      100px 0 68px;
  }

  .hero-title {
    font-size:
      clamp(
        40px,
        13.5vw,
        52px
      );
  }

  .hero-copy {
    font-size:
      12px;
  }

  .hero-actions {
    gap:
      16px;
  }

  .button {
    min-height:
      50px;

    padding-inline:
      16px;

    font-size:
      11px;

    gap:
      16px;
  }

  .statement-grid h2,
  .problem-grid h2,
  .process-title h2,
  .work-heading h2,
  .clients-intro h2,
  .offer-heading h2,
  .benefits-heading h2,
  .faq-heading h2,
  .closing-content h2 {
    font-size:
      39px;
  }

  .project-art,
  .project-large .project-art {
    min-height:
      280px;
  }

  .project-large .project-art {
    min-height:
      320px;
  }

  .clients-years {
    font-size:
      46px;
  }

  .client-marquee {
    margin-top:
      38px;
  }

  .client-group {
    gap:
      36px;

    padding:
      0 16px;
  }

  .client-group img {
    max-width:
      120px;

    height:
      34px;
  }

  .client-track {
    animation-duration:
      18s;
  }

  .testimonial-card blockquote {
    font-size:
      25px;
  }

  .benefits-result h3 {
    font-size:
      21px;
  }

  .guarantee-block h3,
  .capacity-block h3 {
    font-size:
      32px;
  }

  .closing {
    min-height:
      700px;
  }

  .closing-content {
    padding:
      82px 0;
  }
}

@media (
  max-height: 700px
) and (
  min-width: 761px
) {
  .hero-content {
    padding-top:
      120px;

    padding-bottom:
      60px;
  }

  .hero-title {
    font-size:
      clamp(
        54px,
        7vw,
        94px
      );
  }

  .hero-bottom {
    margin-top:
      40px;
  }
}

@media (
  orientation: landscape
) and (
  max-width: 900px
) {
  .hero {
    min-height:
      680px;
  }

  .hero-content {
    padding:
      110px 0 70px;
  }

  .hero-title {
    font-size:
      clamp(
        44px,
        8vw,
        66px
      );
  }

  .hero-bottom {
    display:
      grid;

    grid-template-columns:
      minmax(
        220px,
        0.85fr
      )
      auto;

    align-items:
      end;
  }

  .hero-actions {
    flex-direction:
      row;

    margin-left:
      0;

    margin-bottom:
      0;
  }

  .closing {
    min-height:
      650px;
  }

  .closing-content h2 {
    font-size:
      clamp(
        45px,
        7vw,
        70px
      );
  }
}

@media (max-width: 360px) {
  .client-marquee {
    margin-top:
      30px;
  }

  .client-group {
    gap:
      26px;

    padding:
      0 10px;
  }

  .client-group img {
    max-width:
      105px;

    height:
      30px;
  }

  .client-track {
    animation-duration:
      16s;
  }
}

@media (hover: none) {
  .project:hover .project-art {
    transform:
      none;
  }

  .project:hover .project-video {
    transform:
      none;
  }

  .project:hover .project-glow {
    transform:
      scale(1);
  }

  .project:hover .project-light {
    opacity:
      0.5;
  }

  .button:hover {
    transform:
      none;
  }

  .text-link:hover {
    gap:
      12px;
  }

  .nav-cta:hover {
    transform:
      none;
  }

  .footer .footer-icon-btn:hover,
  .footer .footer-instagram:hover {
    transform:
      none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

  .lighthouse-cursor {
    display:
      none;
  }

  .closing-atmosphere {
    animation:
      none;
  }

  .client-marquee {
    overflow-x:
      auto;

    scrollbar-width:
      none;
  }

  .client-track {
    animation:
      none;
  }

  .hero-stars span {
    animation:
      none;

    opacity:
      0.28;
  }

  .hero-photo,
  .hero-content-motion,
  .hero-content-visual,
  .hero-light,
  .fog,
  .project-art,
  .client-track {
    will-change:
      auto;
  }
}

/* Project video selection */
.project-grid {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.project-grid > .project,
.project-grid > .project.project-large {
  min-width: 0;
  flex: 1 1 0;
  grid-column: auto;
  transition: flex-basis 0.7s var(--ease-soft), flex-grow 0.7s var(--ease-soft);
}

.project-grid > .project.is-selected {
  flex: 0 0 calc((100% - 48px) * 0.75);
}

.project-art,
.project-large .project-art {
  min-height: 0;
  aspect-ratio: 16 / 9;
  height: auto;
  border-color: rgba(216, 187, 130, 0.42);
  box-shadow: 0 0 0 1px rgba(216, 187, 130, 0.08), 0 16px 45px rgba(0, 0, 0, 0.35);
}

.project-video {
  object-fit: cover;
  background: #08090b;
}

.project:not(.is-selected) .project-art > i,
.project:not(.is-selected) .project-caption,
.project:not(.is-selected) .project-result {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-caption,
.project-result,
.project-art > i {
  transition: opacity 0.45s var(--ease-soft), visibility 0.45s var(--ease-soft);
}

.project.is-selected .project-art > i,
.project.is-selected .project-caption,
.project.is-selected .project-result {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .project-grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }

  .project-grid > .project,
  .project-grid > .project.project-large,
  .project-grid > .project.is-selected {
    width: 100%;
    flex: 0 0 auto;
  }

  .project-art,
  .project-large .project-art {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .project:not(.is-selected) .project-art > i,
  .project:not(.is-selected) .project-caption,
  .project:not(.is-selected) .project-result {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .project.is-selected .project-art {
    transform:
      translate3d(0, -6px, 0)
      scale(1.008) !important;
  }

  .project.is-selected .project-video {
    transform:
      scale(1.038);
  }
}

/* ==========================================================
   Consistencia de cores em navegadores com modo escuro
   automatico (Samsung Internet, etc.)
   O site ja e escuro: informamos o esquema e impedimos
   que o navegador recalcule cores de botoes e textos.
   ========================================================== */

:root {
  color-scheme: dark only;
}

html {
  color-scheme: dark only;
}

html,
body {
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

*,
*::before,
*::after {
  forced-color-adjust: none;
}

.button,
.button-fill,
.button-outline,
.nav-cta,
.text-link,
.menu-toggle,
button,
input,
select,
textarea {
  color-scheme: dark only;
  forced-color-adjust: none;
  -webkit-tap-highlight-color: transparent;
}

/* Trava as cores da frase animada (gradiente em texto) */
[data-animation="text-sheen"],
[data-animation="text-sheen"].is-sheen-active {
  -webkit-text-fill-color: transparent !important;
  color: var(--gold);
  forced-color-adjust: none;
  mix-blend-mode: normal;
  isolation: isolate;
}

@media (prefers-color-scheme: light) {
  [data-animation="text-sheen"],
  [data-animation="text-sheen"].is-sheen-active {
    -webkit-text-fill-color: transparent !important;
    background:
      linear-gradient(
        112deg,
        var(--gold) 0%,
        var(--gold) 42%,
        #fff5dd 50%,
        var(--gold) 58%,
        var(--gold) 100%
      );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@media (inverted-colors: inverted) {
  html {
    filter: none;
  }
}

/* ==========================================================
   Videos no desktop: quando houver um video grande,
   os menores mantem a largura atual e igualam a altura.
   ========================================================== */

@media (min-width: 761px) {
  .project-grid.has-selection > .project:not(.is-selected) .project-art {
    aspect-ratio: auto;
    height: var(--selected-art-height, auto);
    min-height: var(--selected-art-height, 0);
  }

  .project-grid.has-selection > .project:not(.is-selected) .project-video-wrapper,
  .project-grid.has-selection > .project:not(.is-selected) .project-video {
    height: 100%;
  }
}

/* ============================================================
   REFINAMENTO PREMIUM — camada final
   Ajustes de acabamento, easing e microinterações.
   Não altera identidade visual nem conteúdo.
   ============================================================ */

:root {
  /* Curvas unificadas de movimento */
  --ease-premium: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.28s;
  --dur-base: 0.45s;
  --dur-slow: 0.75s;
}

/* --- Reflexo de iluminação nos CTAs principais --- */
.button,
.nav-cta {
  transition:
    transform var(--dur-base) var(--ease-premium),
    border-color var(--dur-fast) var(--ease-exit),
    background var(--dur-fast) var(--ease-exit),
    box-shadow var(--dur-base) var(--ease-premium),
    color var(--dur-fast) var(--ease-exit);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .button-icon,
  .nav-cta:hover .nav-arrow {
    transform: translateX(4px);
  }
}

.button:active,
.nav-cta:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

.nav-arrow {
  transition: transform var(--dur-base) var(--ease-premium);
}

/* --- Sublinhado editorial nos links da navegação --- */
#menu-principal a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-exit);
}

#menu-principal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-70), var(--gold-25));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  #menu-principal a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

#menu-principal a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0.75;
}

/* --- Acabamento de foco (acessibilidade premium) --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(4, 6, 10, 0.9),
    0 0 0 3px var(--gold-40);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--dur-fast) var(--ease-exit);
}

/* --- Profundidade sutil e resposta tátil dos cards --- */
.statement-points > div,
.principles li,
.steps article,
.metric-card,
.benefits-grid article,
.trust-card,
.testimonial-card,
.offer-list article,
.objections-grid article {
  transition:
    transform var(--dur-slow) var(--ease-premium),
    border-color var(--dur-base) var(--ease-exit),
    background var(--dur-base) var(--ease-exit),
    box-shadow var(--dur-slow) var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .statement-points > div:hover,
  .principles li:hover,
  .steps article:hover,
  .metric-card:hover,
  .benefits-grid article:hover,
  .trust-card:hover,
  .testimonial-card:hover,
  .offer-list article:hover,
  .objections-grid article:hover {
    transform: translate3d(0, -4px, 0);
  }
}

/* --- Transição suave dos detalhes do FAQ --- */
.faq-list details {
  transition:
    border-color var(--dur-base) var(--ease-exit),
    background var(--dur-base) var(--ease-exit);
}

.faq-list summary {
  transition: color var(--dur-fast) var(--ease-exit);
}

/* --- Seleção de texto alinhada à identidade --- */
::selection {
  background: var(--gold-40);
  color: #0b0d12;
}

/* --- Respeito total a prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

}

  .hero-title,
  .statement-grid h2,
  .problem-grid h2,
  .process-title h2,
  .work-heading h2,
  .clients-intro h2,
  .offer-heading h2,
  .benefits-heading h2,
  .faq-heading h2,
  .closing-content h2 {
    max-width: 14ch;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .hero-title {
    max-width: 11ch;
  }

  .section-kicker,
  .eyebrow,
  .project-caption small,
  .project-result,
  .closing-response,
  .footer small {
    letter-spacing: 0.12em;
  }

  .hero-copy,
  .statement-grid p,
  .problem-grid p,
  .process-title p,
  .work-heading > p,
  .closing-description > p {
    max-width: 42ch;
    line-height: 1.72;
  }

  .statement-grid h2 em,
  .problem-grid h2 em,
  .process-title h2 em,
  .work-heading h2 em,
  .clients-intro h2 em,
  .offer-heading h2 em,
  .benefits-heading h2 em,
  .faq-heading h2 em,
  .closing-content h2 em {
    letter-spacing: 0;
  }

  .project-caption h3,
  .benefits-grid h3,
  .offer-list p,
  .faq-question {
    letter-spacing: 0;
    line-height: 1.25;
  }

  @media (max-width: 760px) {
    .hero-title,
    .statement-grid h2,
    .problem-grid h2,
    .process-title h2,
    .work-heading h2,
    .clients-intro h2,
    .offer-heading h2,
    .benefits-heading h2,
    .faq-heading h2,
    .closing-content h2 {
      max-width: 100%;
      letter-spacing: 0;
    }

    .hero-copy,
    .statement-grid p,
    .problem-grid p,
    .process-title p,
    .work-heading > p,
    .closing-description > p {
      max-width: 36ch;
      line-height: 1.65;
    }
  }