/* ===== RESET / BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== DESIGN SYSTEM =====
   Tokens de superfície, tipografia, espaçamento, raio e movimento. */
:root {
  /* -- cores -- */
  --bg: #f5f5f5; /* superfície base (off-white, não branco puro) */
  --surface-raised: #ffffff; /* cartões / elementos elevados */
  --ink: #0a0a0a;
  --muted: #707070;
  --accent: #7ec8bf; /* verde-água da marca */
  --purple: #7c3aed; /* progresso de scroll */
  --purple-light: #a78bfa; /* variação para fundos escuros (loader) */
  --line: rgba(10, 10, 10, 0.1);

  /* -- tipografia -- */
  --font-display: "Poppins", sans-serif; /* fonte principal */
  --font-body: "Inter", sans-serif; /* fonte de leitura */

  --text-sm: 14px; /* apoio / nav */
  --text-base: 16px; /* corpo */
  --lh-body: 1.5; /* 16/24 e 14/21 */
  --lh-tight: 1; /* títulos grandes */
  --weight-nav: 700; /* links de navegação */

  /* -- espaçamento (base 8) -- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 20px;
  --space-4: 40px;
  --space-5: 80px;
  --space-6: 120px;

  /* -- raio -- */
  --radius-sm: 4px; /* botões */
  --radius-md: 8px; /* cartões */
  --radius-pill: 999px;

  /* -- movimento -- */
  --ease-o1: cubic-bezier(0.2, 0, 0, 1);
  --ease-o2: cubic-bezier(0.285, 0.23, 0, 1);
  --ease-o4: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-sexy: cubic-bezier(0.16, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.27, 1.61, 0.35, 0.89);
  --ease-expo: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-io1: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-io4: cubic-bezier(0.86, 0, 0.07, 1);
}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ===== SCROLLBAR ESCONDIDA (o progresso vira a barra do topo) ===== */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge/IE antigo */
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome, Edge, Safari */
}

/* ===== BARRA DE PROGRESSO DE SCROLL (topo) ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  z-index: 99990; /* acima do conteúdo, abaixo do loader (100000) */
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.6);
}

/* ===== PRELOADER ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  cursor: progress;
}

/* metades pretas que se abrem como cortina na saída */
.loader__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.2%;
  background: #050505;
  z-index: 1;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader__panel--top {
  top: 0;
}
.loader__panel--bottom {
  bottom: 0;
}

.loader__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  animation: loaderIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* logo com anel girando atrás */
.loader__logo {
  position: relative;
  width: clamp(88px, 12vw, 128px);
  animation: loaderFloat 3.6s ease-in-out infinite;
}
.loader__logo::before {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 70%,
    var(--purple-light) 88%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: loaderSpin 1.5s linear infinite;
}
.loader__logo-img {
  display: block;
  width: 100%;
  filter: invert(1); /* logo preta -> branca no fundo escuro */
}
.loader__logo-img--ghost {
  opacity: 0.16;
}
/* a logo "enche" de baixo pra cima conforme carrega (clip via JS) */
.loader__logo-img--fill {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
}

.loader__count {
  font-family: var(--font-display); /* Poppins */
  font-weight: 600;
  font-size: clamp(26px, 4.5vw, 52px);
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.loader__pct {
  font-size: 0.42em;
  color: var(--purple-light);
}

/* barra fininha na base */
.loader__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 3;
}
.loader__bar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--purple-light);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.65);
  transform-origin: left;
  transform: scaleX(0);
}

/* ---- saída "doida" ---- */
.loader.is-done .loader__content {
  animation: loaderOut 0.45s ease forwards;
}
.loader.is-done .loader__bar {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.loader.is-done .loader__panel--top {
  transform: translateY(-100%);
}
.loader.is-done .loader__panel--bottom {
  transform: translateY(100%);
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loaderFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
@keyframes loaderIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes loaderOut {
  to {
    opacity: 0;
    transform: scale(1.18);
    filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader__logo,
  .loader__logo::before,
  .loader__content {
    animation: none;
  }
}

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

/* Conteúdo lido por buscadores e leitores de tela, invisível na tela */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== LAYOUT HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 40px clamp(24px, 5vw, 64px) 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== HEADER ===== */
.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 5;
}

.brand__logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  margin-left: auto;
  margin-right: clamp(16px, 2vw, 40px);
  padding-top: 14px;
  position: relative;
  z-index: 3; /* nav fica na frente do selo giratório */
}

.nav__link {
  font-family: var(--font-body);
  font-weight: var(--weight-nav);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: opacity 0.2s var(--ease-o1);
}

.nav__link:hover {
  opacity: 0.55;
}

.btn-indagar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--ink);
  color: var(--surface-raised);
  font-weight: var(--weight-nav);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 12px var(--space-3);
  border-radius: var(--radius-pill);
  transition: transform 0.3s var(--ease-sexy), background 0.3s var(--ease-o1);
}

.btn-indagar:hover {
  transform: translateY(-2px);
  background: #222;
}

.btn-indagar__arrow {
  font-size: var(--text-sm);
  transition: transform 0.2s ease;
}

.btn-indagar:hover .btn-indagar__arrow {
  transform: translateX(3px);
}

/* ===== SELO CIRCULAR ===== */
.badge-circular {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(190px, 19vw, 280px);
  aspect-ratio: 1;
  height: auto;
  /* empurra para o canto superior direito — mostra só ~metade, como um sol saindo */
  transform: translate(48%, -48%);
  z-index: 1; /* atrás do nav */
}

.badge-circular__svg {
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}

.badge-circular__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--ink);
  text-transform: uppercase;
}

.badge-circular__star {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== TÍTULO PRINCIPAL ===== */
.hero__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  z-index: 2;
}

.pressure {
  position: relative;
  width: 100%;
}

.display {
  font-family: "Roboto Flex", var(--font-display);
  font-weight: 100;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  width: 100%;
  margin: 0;
  text-transform: uppercase;
  user-select: none;
  /* estado inicial dos eixos variáveis (JS assume o controle) */
  font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
  /* fallback caso o JS não carregue */
  font-size: clamp(90px, 22vw, 380px);
}

.display.flex {
  display: flex;
  justify-content: space-between;
}

/* ===== StrokeText (somente mobile) ===== */
/* quando o h1 vira SVG, as regras do TextPressure deixam de valer */
.display.has-stroke-text {
  display: block;
  white-space: normal;
  font-size: 0;
  line-height: 0;
  width: 100%;
}

.stroke-text {
  display: block;
  width: 100%;
  line-height: 0;
}

.stroke-text__svg {
  display: block;
  width: 100%;
  height: auto;
}

.stroke-text__stroke,
.stroke-text__fill {
  user-select: none;
}

/* As cores ficam nas CAMADAS (g / use) e são herdadas pelo <text>.
   Assim o mesmo texto serve de contorno e de preenchimento sem duplicar. */
.stroke-text__stroke {
  fill: none;
  stroke: var(--stroke-color, #7c3aed);
  stroke-width: var(--stroke-w, 1.6);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.stroke-text__fill {
  fill: var(--fill-color, #0a0a0a);
  stroke: none;
}

/* contorno: cada letra "desenha" com atraso escalonado */
.stroke-text__stroke tspan {
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--dash);
}
.stroke-text.is-drawing .stroke-text__stroke tspan {
  animation: strokeDraw var(--draw-duration) var(--ease-o1, ease-out) forwards;
  animation-delay: calc(var(--i) * var(--stagger));
}

/* preenchimento: wipe da esquerda para a direita */
.stroke-text__fill {
  opacity: 1;
}
.stroke-text clipPath rect {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}
.stroke-text.is-drawing clipPath rect {
  animation: strokeWipe 0.8s var(--ease-sexy, ease-in-out) forwards;
  animation-delay: var(--fill-delay);
}

/* estado final imediato (prefers-reduced-motion) */
.stroke-text.is-instant .stroke-text__stroke tspan {
  stroke-dashoffset: 0;
}
.stroke-text.is-instant clipPath rect {
  transform: scaleX(1);
}

@keyframes strokeDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes strokeWipe {
  to {
    transform: scaleX(1);
  }
}

/* ===== TEXTO DE INTRODUÇÃO ===== */
.intro {
  max-width: 560px;
  margin-top: 40px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
}

/* ===== BlurText (porte vanilla do React Bits) ===== */
.blur-text__word {
  display: inline-block;
  /* estado inicial: desfocado, invisível e deslocado de cima */
  filter: blur(10px);
  opacity: 0;
  transform: translateY(-50px);
  will-change: transform, filter, opacity;
}

/* quando entra na viewport, cada palavra anima (delay por palavra = inline) */
.blur-text.is-visible .blur-text__word {
  animation-name: blurTextIn;
  animation-duration: 0.7s; /* stepDuration 0.35s * 2 passos */
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes blurTextIn {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(-50px);
  }
  50% {
    filter: blur(5px);
    opacity: 0.5;
    transform: translateY(5px);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  .blur-text__word {
    filter: none;
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ===== CURSOR PERSONALIZADO ===== */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff; /* branco puro: exigido pelo mix-blend-mode */
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-bounce);
  will-change: left, top;
  /* efeito monocromático: preto no fundo branco, branco sobre o preto */
  mix-blend-mode: difference;
}

/* Vira uma bola preta grande sobre links/botões (texto fica branco via blend) */
.cursor-dot--hover {
  transform: translate(-50%, -50%) scale(8);
  background: #ffffff;
}

/* Sem cursor customizado em telas de toque */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 860px) {
  .nav__link {
    display: none;
  }
  .nav {
    margin-right: 16px;
  }
  .badge-circular {
    width: 220px;
    top: 0;
    right: 0;
  }
  .badge-circular__star {
    font-size: 40px;
  }
  .display {
    font-size: clamp(72px, 30vw, 220px);
  }
}

@media (max-width: 520px) {
  .intro {
    margin-top: 28px;
  }
}

/* ===== SEÇÃO 2: SHOWCASE 3D ===== */
.showcase {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px clamp(24px, 5vw, 64px);
  perspective: 1200px; /* dá profundidade ao rotacionar o telefone */
}

/* Frase gigante em blackletter, esmaecida, ATRÁS do telefone */
.showcase__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "UnifrakturCook", serif;
  font-weight: 700;
  line-height: 0.92;
  font-size: clamp(56px, 12vw, 190px);
  color: #ececec; /* cinza bem claro */
  z-index: 1;
  padding: 0 4vw;
  pointer-events: none;
  user-select: none;
}

/* bloco de texto que sofre a rotação do ScrollReveal */
.showcase__bg-text {
  display: block; /* necessário: transform não se aplica a elemento inline */
  margin: 0;
  transform-origin: 0% 50%;
  will-change: transform;
}

/* cada palavra revela opacidade + blur no scroll */
.showcase__bg .word {
  display: inline-block;
  will-change: opacity, filter;
}

/* Container do telefone (recebe as transformações do scroll) */
.showcase__phone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- iPhone 3D em CSS puro (caixa com frente, verso e espessura) ---- */
.iphone {
  --w: clamp(240px, 28vw, 320px);
  --h: calc(var(--w) * 19.5 / 9);
  --d: 20px; /* espessura do aparelho */
  --radius: 50px;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  /* flutuação idle — mantém o telefone "vivo" (compõe com o giro do scroll) */
  animation: phoneFloat 6s ease-in-out infinite;
  /* NB: nada de filter/opacity aqui — achataria o 3D (quebra o preserve-3d) */
}

/* Faces e laterais: todas centralizadas no meio da caixa 3D */
.iphone__face,
.iphone__edge {
  position: absolute;
  top: 50%;
  left: 50%;
}

.iphone__face {
  width: var(--w);
  height: var(--h);
  border-radius: var(--radius);
  backface-visibility: hidden;
  overflow: hidden;
}

/* FRENTE */
.iphone__face--front {
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2));
  background: linear-gradient(150deg, #3a3a3f, #17171a 45%, #2b2b30);
  padding: 12px;
  box-shadow: 0 40px 70px -18px rgba(0, 0, 0, 0.55);
}

.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  overflow: hidden;
  background: #000;
}

.iphone__img {
  width: 100%;
  height: 112%; /* um pouco maior p/ permitir parallax vertical */
  object-fit: cover;
  display: block;
  will-change: transform;
}

.iphone__island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 26px;
  background: #000;
  border-radius: 18px;
  z-index: 3;
}

.iphone__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.4) 48%,
    rgba(255, 255, 255, 0) 64%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  will-change: transform;
}

/* VERSO */
.iphone__face--back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(150deg, #4a4a50, #202024 50%, #35353b);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    0 40px 70px -18px rgba(0, 0, 0, 0.55);
}

.iphone__camera {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 28px;
  background: linear-gradient(150deg, #34343a, #1a1a1e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  padding: 12px;
  gap: 6px;
}
.iphone__lens {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5a62, #0b0b0d 70%);
  box-shadow: 0 0 0 3px #101013;
}
.iphone__lens:nth-child(3) {
  grid-column: 1 / 3;
  justify-self: center;
}
.iphone__backlogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  opacity: 0.12;
  filter: invert(1);
}

/* ESPESSURA (laterais) */
.iphone__edge {
  background: linear-gradient(180deg, #3a3a3f, #101013);
}
/* laterais encurtadas (não alcançam os cantos arredondados = sem "quadradão") */
.iphone__edge--left,
.iphone__edge--right {
  width: var(--d);
  height: calc(var(--h) - 2 * var(--radius));
  border-radius: 3px;
}
.iphone__edge--top,
.iphone__edge--bottom {
  width: calc(var(--w) - 2 * var(--radius));
  height: var(--d);
  border-radius: 3px;
}
.iphone__edge--right {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--w) / 2));
}
.iphone__edge--left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.iphone__edge--top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) / 2));
}
.iphone__edge--bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

/* Botões nas laterais */
.iphone__btn {
  position: absolute;
  background: #0c0c0e;
  border-radius: 2px;
}
.iphone__btn--power {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 62px;
}
.iphone__btn--vol-up,
.iphone__btn--vol-down {
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 42px;
}
.iphone__btn--vol-up {
  top: 22%;
}
.iphone__btn--vol-down {
  top: 32%;
}

@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .iphone {
    animation: none;
  }
}

@media (max-width: 520px) {
  .showcase__bg {
    font-size: clamp(44px, 15vw, 90px);
  }
}

/* ===== SEÇÃO 3: O QUE VOCÊ VAI ENCONTRAR ===== */
.find {
  position: relative;
  /* 100vh ficam presos (sticky) + 300vh de curso para percorrer o vídeo inteiro */
  height: 400vh;
  background: var(--bg);
  margin-top: clamp(var(--space-5), 16vh, 220px); /* respiro entre seções */
}

/* fica fixo (pinned) enquanto o texto desce */
.find__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 5vw, 80px);
  padding: 0 clamp(24px, 5vw, 64px);
  overflow: hidden;
}

.find__media {
  flex: 0 0 46%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.find__img,
.find__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a; /* evita flash branco antes do 1º frame */
}

/* coluna de texto que desce no scroll */
.find__text {
  flex: 1;
  align-self: flex-start;
  padding-top: clamp(40px, 8vh, 96px);
  will-change: transform;
}

.find__title {
  font-family: var(--font-display); /* Poppins — principal */
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.find__desc {
  font-family: var(--font-body);
  color: var(--muted);
  max-width: 46ch;
  margin-top: 28px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
}
.find__desc + .find__desc {
  margin-top: 20px;
}

/* ===== SEÇÃO 4: MARQUEE CURVO (CurvedLoop) ===== */
.curved-loop-jacket {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  visibility: hidden; /* aparece quando o JS termina de medir */
}
.curved-loop-jacket:active {
  cursor: grabbing;
}

.curved-loop-svg {
  width: 100%;
  aspect-ratio: 100 / 12;
  overflow: visible;
  display: block;
  font-family: var(--font-display); /* Poppins — principal */
  font-size: 6rem;
  fill: var(--ink); /* texto preto no fundo branco */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* Mobile: empilha e desliga o efeito de "descer" */
/* ---- Mobile: vídeo em tela cheia, preso, com o texto sobreposto ---- */
@media (max-width: 860px) {
  .find {
    height: 400vh; /* mantém o curso de scroll para percorrer o vídeo */
  }
  .find__sticky {
    position: sticky;
    top: 0;
    display: block; /* mídia ocupa tudo; texto fica por cima */
    height: 100vh;
    height: 100svh; /* ignora a barra do navegador no celular */
    padding: 0;
    gap: 0;
  }
  .find__media {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  /* escurecimento na base para o texto ficar legível sobre o vídeo */
  .find__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.45) 38%,
      rgba(0, 0, 0, 0) 68%
    );
  }
  .find__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 clamp(24px, 6vw, 40px) clamp(40px, 8vh, 72px);
    transform: none !important; /* no mobile o texto não desce */
  }
  .find__title {
    color: #fff;
    font-size: clamp(30px, 8.5vw, 46px);
  }
  .find__desc {
    color: rgba(255, 255, 255, 0.82);
    margin-top: 16px;
    font-size: clamp(14px, 3.6vw, 16px);
  }
  .find__desc + .find__desc {
    margin-top: 12px;
  }
}

/* ===== SEÇÃO 5: PROJETOS (InfiniteMenu / WebGL) ===== */
.projects {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.infinite-menu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#infinite-grid-menu-canvas {
  cursor: grab;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  outline: none;
  display: block;
}
#infinite-grid-menu-canvas:active {
  cursor: grabbing;
}

/* título ACIMA do card, centralizado */
.face-title {
  user-select: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: clamp(56px, 11vh, 120px);
  width: min(90%, 900px);
  text-align: center;
  font-family: var(--font-display); /* Poppins */
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.05;
  color: #fff;
  transform: translateX(-50%);
}
.face-title.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: 0.5s var(--ease-sexy);
}
.face-title.inactive {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-14px);
  transition: 0.1s ease;
}

/* descrição ABAIXO do card, centralizada (acima do botão) */
.face-description {
  user-select: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 14%; /* logo abaixo do card, acima do botão */
  width: min(90%, 46ch);
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.45;
  color: #cfcfcf;
  transform: translateX(-50%);
}
.face-description.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: 0.5s var(--ease-sexy);
}
.face-description.inactive {
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
  opacity: 0;
  transition: 0.1s ease;
}

.action-button {
  position: absolute;
  left: 50%;
  z-index: 10;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--accent); /* verde-água da marca */
  border-radius: 50%;
  cursor: pointer;
  border: 5px solid #000;
}
.action-button.active {
  bottom: 3%;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: 0.5s var(--ease-sexy);
}
.action-button.inactive {
  bottom: -80px;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition: 0.1s ease;
}
.action-button-icon {
  user-select: none;
  position: relative;
  color: #0a0a0a;
  top: 1px;
  font-size: 26px;
  font-weight: 700;
}

/* dica "Arraste para ver os projetos" */
.menu-hint {
  position: absolute;
  top: clamp(26px, 6vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: opacity 0.5s var(--ease-o1), transform 0.5s var(--ease-sexy);
}
.menu-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
}
.menu-hint__arrow {
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.menu-hint__arrow--l {
  animation: hintArrowL 1.4s ease-in-out infinite;
}
.menu-hint__arrow--r {
  animation: hintArrowR 1.4s ease-in-out infinite;
}
@keyframes hintArrowL {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(-5px); opacity: 1; }
}
@keyframes hintArrowR {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-hint__arrow--l,
  .menu-hint__arrow--r {
    animation: none;
  }
}

/* centralizados acima/abaixo, só somem em telas bem pequenas */
@media (max-width: 640px) {
  .face-description {
    display: none;
  }
}

/* ===== SEÇÃO 6: COMO FUNCIONA ===== */
.process {
  background: var(--bg);
  padding: clamp(var(--space-5), 12vh, var(--space-6)) clamp(24px, 5vw, 64px) 0;
}

.process__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.process__eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-nav);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.process__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  max-width: 18ch;
}

.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.process__step {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
}

.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
}

.process__step-title {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 10px;
}

.process__step-desc {
  color: var(--muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

/* ===== SEÇÃO 7: DEPOIMENTOS (DriftWall) ===== */
.depo {
  position: relative;
  background: var(--bg);
  padding: clamp(var(--space-5), 12vh, var(--space-6)) 0 0;
  overflow: hidden;
}

.depo__head {
  max-width: 900px;
  margin: 0 auto clamp(var(--space-3), 4vh, var(--space-4));
  padding: 0 clamp(24px, 5vw, 64px);
  text-align: center;
}

.depo__eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-nav);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.depo__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ---- parede 3D ---- */
.drift-wall {
  --dw-tile-w: 300px;
  --dw-tile-h: 210px;
  --dw-gap: 20px;
  --dw-radius: 14px;
  --dw-lift: 56px;
  --dw-dim: 0.72;
  --dw-edge: 28%;
  position: relative;
  width: 100%;
  height: clamp(460px, 72vh, 660px);
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(
      ellipse 80% 84% at 50% 46%,
      #000 var(--dw-edge),
      transparent 100%
    ),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(
      ellipse 80% 84% at 50% 46%,
      #000 var(--dw-edge),
      transparent 100%
    ),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
}

.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
}

.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  transform-style: preserve-3d;
}

/* ---- cartão de depoimento ---- */
.dw-card {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 22px;
  border-radius: var(--dw-radius);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  opacity: var(--dw-dim);
  pointer-events: none; /* o hover é resolvido no tile */
  transform: translateZ(0);
  transition: transform 0.42s var(--ease-o4), opacity 0.42s var(--ease-o4),
    box-shadow 0.42s var(--ease-o4);
}

.dw-card__quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.dw-card__quote::before {
  content: "“";
}
.dw-card__quote::after {
  content: "”";
}

.dw-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dw-card__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.dw-card__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dw-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.dw-card__company {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
}

/* estado ativo: o cartão salta em direção ao leitor e fica nítido */
.drift-wall__tile.is-active .dw-card {
  opacity: 1;
  transform: translateZ(var(--dw-lift));
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.45);
  border-color: rgba(124, 58, 237, 0.45);
}

/* No mobile as medidas dos cartões são calculadas pelo JS (layout()),
   para caberem na tela. Aqui ficam só os ajustes visuais. */
@media (max-width: 860px) {
  .drift-wall {
    height: clamp(420px, 62vh, 540px);
    --dw-edge: 20%; /* borda menos apagada: em tela estreita comia o cartão */
    --dw-dim: 0.8;
    --dw-lift: 40px;
  }
  .dw-card {
    padding: 18px;
  }
  .dw-card__quote {
    font-size: 14px;
    line-height: 1.45;
  }
  .dw-card__avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane,
  .drift-wall__track {
    will-change: auto;
  }
}

/* ===== SEÇÃO 8: DÚVIDAS FREQUENTES ===== */
.faq {
  background: var(--bg);
  padding: clamp(var(--space-5), 12vh, var(--space-6)) clamp(24px, 5vw, 64px);
}

.faq__inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq__eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-nav);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.faq__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.faq__item {
  border-top: 1px solid var(--line);
}
.faq__item:last-of-type {
  border-bottom: 1px solid var(--line);
}

/* summary com h3 dentro: mantém a hierarquia sem quebrar o layout */
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q h3 {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
}
/* sinal de + que vira × ao abrir */
.faq__q::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.35s var(--ease-sexy), color 0.2s var(--ease-o1);
}
.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
  color: var(--ink);
}
.faq__q:hover h3 {
  opacity: 0.6;
}

.faq__a {
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  padding: 0 var(--space-4) var(--space-3) 0;
  max-width: 68ch;
}

.faq__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-5);
  background: var(--ink);
  color: var(--surface-raised);
  font-weight: var(--weight-nav);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  transition: transform 0.3s var(--ease-sexy), background 0.3s var(--ease-o1);
}
.faq__cta:hover {
  transform: translateY(-2px);
  background: #222;
}

/* ===== RODAPÉ ===== */
.footer {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(70px, 11vh, 130px) clamp(24px, 5vw, 64px) 40px;
  overflow: hidden;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.footer__headline {
  font-family: "UnifrakturCook", serif;
  font-weight: 700;
  font-size: clamp(64px, 13vw, 210px);
  line-height: 0.86;
  letter-spacing: 0.01em;
}

/* spinner giratório (mesmo estilo do header) */
.footer__badge {
  position: relative;
  flex: none;
  width: clamp(150px, 16vw, 230px);
  aspect-ratio: 1;
}
.footer__badge-svg {
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}
.footer__badge-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--ink);
  text-transform: uppercase;
}
.footer__badge-star {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1;
  color: var(--ink);
}

/* colunas de links */
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 8vw, 120px);
  margin-top: clamp(60px, 12vh, 170px);
}
.footer__col-title {
  font-family: var(--font-display); /* Poppins */
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 20px;
}
.footer__link {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
  width: fit-content;
  transition: opacity 0.2s var(--ease-o1);
}
.footer__link:hover {
  opacity: 0.5;
}
.footer__link--more {
  opacity: 0.55;
}

/* base */
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(60px, 10vh, 120px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

@media (max-width: 640px) {
  .footer__badge {
    display: none;
  }
  .footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}