/* ==========================================================================
   FunkCoin ($FUNK) — landing page
   "Do cinza para a cor": a página começa em P&B e ganha cor no scroll.
   Tokens e componentes: funkcoin-design-system.txt
   ========================================================================== */

/* Fontes (hospedadas no site; licença em assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/open-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  /* laranja $FUNK: destaques, CTAs, palavras-chave */
  --funk-orange: #F7A21B;
  --funk-orange-hover: #FFB33D;
  --funk-orange-dark: #C97F0A;
  --funk-orange-glow: rgba(247, 162, 27, 0.35);
  --funk-orange-soft: rgba(247, 162, 27, 0.12);

  /* neutras (base P&B) */
  --funk-black: #0D0D0D;
  --funk-ink: #161412;
  --funk-card: #221C17;
  --funk-gray-700: #3A3A3A;
  --funk-gray-500: #7A7A7A;
  --funk-gray-300: #BDBDBD;
  --funk-white: #FFFFFF;

  /* cores de "vida": só nas seções coloridas, com moderação */
  --life-green: #2DBE6C;
  --life-sky: #3FA9F5;
  --life-red: #E5484D;

  --overlay-dark: linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.85) 100%);

  --font-display: "Montserrat", "Arial Black", Arial, sans-serif;
  --font-body: "Open Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* escala tipográfica fluida: mobile (390px) → desktop (1280px) */
  --fs-display: clamp(2.5rem, 1.624rem + 3.596vw, 4.5rem);   /* 40 → 72 */
  --fs-h2: clamp(2rem, 1.562rem + 1.798vw, 3rem);             /* 32 → 48 */
  --fs-h3: clamp(1.375rem, 1.211rem + 0.674vw, 1.75rem);      /* 22 → 28 */
  --fs-lead: clamp(1.125rem, 1.016rem + 0.449vw, 1.375rem);   /* 18 → 22 */
  --fs-body: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);       /* 16 → 18 */
  --fs-small: clamp(0.8125rem, 0.785rem + 0.112vw, 0.875rem); /* 13 → 14 */
  --fs-counter: clamp(3.25rem, 2.264rem + 4.045vw, 5.5rem);   /* 52 → 88 */

  /* espaçamento, base 8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --line-soft: rgba(255, 255, 255, 0.08);
  --border-funk: 2px solid var(--funk-orange);
  --border-soft: 1px solid var(--line-soft);

  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px var(--funk-orange), 0 10px 40px var(--funk-orange-glow);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 300ms;
  --dur-enter: 700ms;

  --header-h: 72px;
  --gutter: 24px;
  --section-pad: clamp(72px, 2.969rem + 6.29vw, 128px);      /* 72 → 128 */

  --gray: 1; /* controlado pelo scroll: 1 = P&B, 0 = colorido */

  color-scheme: dark;
}

/* Nível de cinza de cada seção (o main.js refina com o scroll em --gray) */
[data-gray="100"] { --gray: 1; }
[data-gray="85"] { --gray: 0.85; }
[data-gray="65"] { --gray: 0.65; }
[data-gray="45"] { --gray: 0.45; }
[data-gray="25"] { --gray: 0.25; }
[data-gray="0"] { --gray: 0; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--funk-black);
  color: var(--funk-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Estilo de texto: palavras-chave em negrito branco, a principal em laranja */
strong { font-weight: 700; color: var(--funk-white); }
.text-accent,
strong.text-accent { color: var(--funk-orange); }
.ticker { font-weight: 700; white-space: nowrap; }
/* números de progresso: itálico laranja, ex.: (500 já entregues) */
.progress { font-style: italic; font-weight: 600; color: var(--funk-orange); white-space: nowrap; }

:focus-visible {
  outline: 2px solid var(--funk-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.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;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--funk-orange);
  color: var(--funk-black);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease);
}
.skip-link:focus { transform: none; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.container {
  width: 100%;
  max-width: calc(1200px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text { max-width: calc(880px + var(--gutter) * 2); }

/* Grão de filme sutil sobre a página toda */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 150;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(6) infinite;
}

@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4%, 3%, 0); }
  40% { transform: translate3d(3%, -5%, 0); }
  60% { transform: translate3d(-6%, -2%, 0); }
  80% { transform: translate3d(5%, 4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Tipografia --------------------------------------------------------------- */
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--funk-gray-300);
  text-wrap: pretty;
}

.small { font-size: var(--fs-small); }

.section-head { max-width: 800px; margin-bottom: var(--space-7); }
.section-head .h2 { margin-top: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); }

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}

/* Marcador de conteúdo a preencher pela equipe */
.tbd {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  opacity: 0.75;
}

/* Botões ------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease),
    border-color var(--dur-ui) var(--ease),
    color var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }

/* primário: laranja com texto preto (nunca branco) */
.btn--primary {
  border-color: var(--funk-orange);
  background: var(--funk-orange);
  color: var(--funk-black);
}
.btn--primary:hover {
  border-color: var(--funk-orange-hover);
  background: var(--funk-orange-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.btn--primary:active {
  border-color: var(--funk-orange-dark);
  background: var(--funk-orange-dark);
  box-shadow: none;
  transform: none;
}

/* secundário: contorno branco; no hover, borda e texto laranja */
.btn--secondary {
  border-color: var(--funk-white);
  background: transparent;
  color: var(--funk-white);
}
.btn--secondary:hover {
  border-color: var(--funk-orange);
  color: var(--funk-orange);
}

.btn--sm { padding: 10px 20px; font-size: 0.9375rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.actions--center { justify-content: center; }

/* Pílula / badge --------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--funk-orange);
  border-radius: var(--radius-full);
  background: var(--funk-orange-soft);
  color: var(--funk-orange);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.pill .icon { width: 16px; height: 16px; }
a.pill { transition: background-color var(--dur-ui) var(--ease); }
a.pill:hover { background: rgba(247, 162, 27, 0.22); }

.pill--green { border-color: var(--life-green); background: rgba(45, 190, 108, 0.12); color: var(--life-green); }
.pill--muted { border-color: var(--funk-gray-700); background: rgba(255, 255, 255, 0.04); color: var(--funk-gray-300); }

/* palavras-selo dentro do texto do manifesto */
.word-pill {
  display: inline-block;
  padding: 0 0.45em 0.06em;
  border: 1px solid var(--funk-orange);
  border-radius: var(--radius-full);
  background: var(--funk-orange-soft);
  color: var(--funk-orange);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.nowrap { white-space: nowrap; }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-ui) var(--ease),
    border-color var(--dur-ui) var(--ease),
    backdrop-filter var(--dur-ui) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(13, 13, 13, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
}
/* backdrop-filter faria do header o bloco de referência do menu fixo (altura zero) */
.site-header.is-menu-open {
  background: var(--funk-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line-soft);
}
/* barra de progresso: vai do cinza ao laranja conforme a página ganha cor */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
  background: color-mix(in oklab, var(--funk-orange) calc((1 - var(--page-gray, 1)) * 100%), var(--funk-gray-500));
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

.site-header__logo {
  display: inline-flex;
  color: var(--funk-white);
  margin-right: auto;
}
.logo { width: auto; height: 26px; aspect-ratio: 1183 / 379; }

.site-nav ul { display: flex; gap: 28px; }
.site-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--funk-gray-300);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--funk-white); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--funk-orange);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur-ui) var(--ease);
}
.site-nav a.is-active::after { transform: translateX(-50%) scale(1); }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--funk-white);
  transition: transform var(--dur-ui) var(--ease);
}
.menu-toggle__bars { top: 17px; }
.menu-toggle__bars::before { content: ""; left: 0; top: 8px; }
.is-menu-open .menu-toggle__bars { transform: translateY(4px) rotate(45deg); }
.is-menu-open .menu-toggle__bars::before { transform: translateY(-8px) rotate(-90deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--funk-black);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s var(--dur-ui);
}
.is-menu-open .mobile-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.mobile-menu li + li { border-top: var(--border-soft); }
.mobile-menu a:not(.btn) {
  display: block;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mobile-menu .btn { width: 100%; }

/* 01. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--funk-black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(var(--gray, 1)) contrast(1.1);
  background-color: var(--funk-black);
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.6) 50%, rgba(13, 13, 13, 0.35) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, 0) 60%, #0D0D0D 100%);
  pointer-events: none;
  z-index: 1;
}
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: 0.06;
  pointer-events: none;
}

.hero__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__3d.is-ready { opacity: 1; }
.hero__3d canvas,
.about__3d canvas { width: 100% !important; height: 100% !important; }

.hero__inner {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: var(--space-6);
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-5);
}

.hero__title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--funk-gray-300);
}

.hero__visual { display: grid; place-items: center; }

.hero__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

/* Contador: Montserrat 800, laranja, legenda abaixo em cinza claro */
.counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-soft);
}
.counter { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.counter dd {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 0.9rem + 2.9vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--funk-orange);
  white-space: nowrap;
}
.counter dt {
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--funk-gray-300);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.scroll-cue:hover { color: var(--funk-white); }
.scroll-cue .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: var(--border-soft);
  border-radius: 50%;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Foto real da cesta em 2.5D: inclina com o mouse, flutua, sombra no chão */
.cesta {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 314 / 400;
  container-type: inline-size;
  perspective: 900px;
}
.cesta__shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  animation: cesta-shadow 6s ease-in-out infinite;
}
.cesta__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translate3d(0, var(--cesta-lift, 0px), 0)
    rotateX(var(--cesta-rx, 0deg))
    rotateY(var(--cesta-ry, 0deg))
    rotateZ(calc(-3deg + var(--cesta-rz, 0deg)));
  transition: transform 0.6s var(--ease);
}
.cesta__bob {
  position: absolute;
  inset: 0;
  animation: cesta-bob 6s ease-in-out infinite;
}
.cesta__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(var(--gray)) contrast(1.08) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45));
}
/* reflexo correndo pelo plástico da sacola (recortado pelo contorno da foto) */
.cesta__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 47%, rgba(255, 255, 255, 0.06) 53%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  mix-blend-mode: screen;
  -webkit-mask: url("../img/cesta-basica.webp") center / contain no-repeat;
  mask: url("../img/cesta-basica.webp") center / contain no-repeat;
  animation: cesta-sheen 7s ease-in-out infinite;
}

@keyframes cesta-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}
@keyframes cesta-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: 0.7; }
}
@keyframes cesta-sheen {
  0%, 15% { background-position: 110% 0; }
  70%, 100% { background-position: -10% 0; }
}

/* Etiqueta de doação $FUNK colada na sacola (a primeira cor da página) */
.sticker {
  position: absolute;
  left: 8%;
  top: 46%;
  display: grid;
  justify-items: center;
  width: 44%;
  padding: 4.2cqw 2.2cqw 3.6cqw;
  border-radius: 3cqw;
  background: linear-gradient(135deg, #FFB33D, var(--funk-orange) 55%, #EE980F);
  color: var(--funk-black);
  text-align: center;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.4);
  transform: rotate(-8deg);
}
.sticker::before {
  content: "";
  position: absolute;
  inset: 2.2cqw;
  border: 1px dashed rgba(13, 13, 13, 0.5);
  border-radius: 1.6cqw;
}
/* canto descolando */
.sticker::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 8cqw;
  height: 8cqw;
  border-radius: 0 0 3cqw 0;
  background: linear-gradient(135deg, #F2E6D2 0 50%, transparent 50%);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 100%, 100% 0, 0 0);
  transform: rotate(180deg);
}
.sticker__top {
  font-family: var(--font-body);
  font-size: 4.2cqw;
  font-weight: 800;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
}
.sticker__main {
  margin-top: 1.2cqw;
  font-family: var(--font-display);
  font-size: 11cqw;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.sticker__bottom {
  margin-top: 1.6cqw;
  font-family: var(--font-body);
  font-size: 2.15cqw;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Seções ------------------------------------------------------------------- */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
  background: var(--funk-black);
}
.section--alt { background: var(--funk-ink); }

/* brilho laranja que cresce conforme a seção ganha cor */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 32% at 82% 22%, color-mix(in srgb, var(--funk-orange) calc((1 - var(--gray)) * 11%), transparent), transparent),
    radial-gradient(38% 28% at 8% 80%, color-mix(in srgb, var(--funk-orange) calc((1 - var(--gray)) * 7%), transparent), transparent);
}

/* 02. Manifesto ------------------------------------------------------------ */
.manifesto { text-align: center; }
.manifesto::before { display: none; }

.manifesto__title {
  margin: var(--space-3) auto var(--space-8);
  max-width: 16ch;
}

.manifesto__block {
  display: grid;
  gap: 0.35em;
  margin: 0 auto var(--space-7);
  max-width: 32ch;
  font-size: clamp(1.375rem, 1.04rem + 1.37vw, 2.125rem);
  line-height: 1.35;
  color: var(--funk-gray-300);
  text-wrap: balance;
}
.manifesto__block > span { display: block; }

.manifesto__claims {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) auto;
  max-width: 34ch;
  font-size: clamp(1.375rem, 0.98rem + 1.62vw, 2.25rem);
  line-height: 1.25;
  text-wrap: balance;
}
.claim__false {
  color: var(--funk-gray-500);
  text-decoration: line-through;
  text-decoration-color: var(--life-red);
  text-decoration-thickness: 0.07em;
}
.claim__truth { color: var(--funk-orange); font-weight: 700; }

/* frase negativa: linha vermelha risca da esquerda para a direita */
.js .claim__false {
  text-decoration: none;
  background: linear-gradient(var(--life-red), var(--life-red)) no-repeat 0 58% / 0% 0.07em;
  transition: background-size 0.8s var(--ease) 0.35s;
}
.js .claim.is-visible .claim__false { background-size: 100% 0.07em; }
.js .claim__truth { opacity: 0.15; color: var(--funk-white); transition: opacity 0.7s var(--ease) 1s, color 0.7s var(--ease) 1s; }
.js .claim.is-visible .claim__truth { opacity: 1; color: var(--funk-orange); }

.manifesto__closing {
  margin: var(--space-8) auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.05rem + 2.88vw, 3.375rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.manifesto__question {
  margin: var(--space-6) auto 0;
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.12rem + 5.65vw, 5.625rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--funk-orange);
  text-wrap: balance;
}

/* 03. O que é --------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-8);
}
.about__text .h2 { margin-top: var(--space-3); }
.about__text .lead { margin-top: var(--space-4); max-width: 36rem; }

.feature-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.feature {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 18px 22px 18px 18px;
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--funk-card);
  transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.feature:hover { border-color: rgba(247, 162, 27, 0.5); transform: translateY(-2px); }
.feature__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--funk-orange-soft);
  color: var(--funk-orange);
}
.feature__icon .icon { width: 24px; height: 24px; }
.feature__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}
.feature p { color: var(--funk-gray-300); font-size: var(--fs-small); line-height: 1.5; }

.about__visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
.about__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 162, 27, 0.5), transparent);
  opacity: calc(0.2 + (1 - var(--gray)) * 0.9);
  filter: blur(30px);
}
.about__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(var(--gray));
  transition: opacity 0.8s var(--ease);
}
.about__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.about__3d.is-ready { opacity: 1; }
.about__3d.is-ready ~ .about__still,
.about__visual:has(.about__3d.is-ready) .about__still { opacity: 0; }

/* 04. Como funciona ------------------------------------------------------------ */
.flow {
  --node: 64px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.flow::before,
.flow::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: calc(var(--node) / 2);
  right: calc((100% - 3 * var(--space-4)) / 4 - var(--node) / 2);
  height: 2px;
  border-radius: 2px;
  background: var(--funk-gray-700);
}
.flow::after {
  background: var(--funk-orange);
  transform: scaleX(var(--flow, 1));
  transform-origin: left;
}

.flow-step { position: relative; }
.flow-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  margin-bottom: var(--space-4);
  border: var(--border-funk);
  border-radius: 50%;
  background: var(--funk-black);
  color: var(--funk-orange);
  box-shadow: 0 0 0 8px var(--funk-black);
}
.flow-step__node .icon { width: 26px; height: 26px; }
.flow-step__num {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--funk-orange);
}
.flow-step__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.flow-step p { color: var(--funk-gray-300); }

/* 05. Metas — visual do post: card marrom-escuro, borda laranja deslocada ------- */
.goal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.goal {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-right: var(--border-funk);
  border-bottom: var(--border-funk);
  border-radius: var(--radius-xl);
  background: var(--funk-card);
  box-shadow: var(--shadow-card);
}
.goal__title {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-h3);
  line-height: 1.35;
  text-wrap: pretty;
  margin-bottom: var(--space-6);
}
.goal__title strong { color: var(--funk-orange); font-weight: 700; }
/* marcador: círculo vazado laranja (anel de 3px, 18px) */
.goal__dot {
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 18px;
  height: 18px;
  border: 3px solid var(--funk-orange);
  border-radius: 50%;
}
.goal__bar {
  position: relative;
  height: 10px;
  margin-top: auto;
  border-radius: var(--radius-full);
  background: var(--funk-gray-700);
  overflow: hidden;
}
.goal__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(10px, var(--progress, 0%));
  border-radius: inherit;
  background: var(--funk-orange);
  transform-origin: left;
}
.js .goal__fill { transform: scaleX(0); transition: transform 1.2s var(--ease) 0.3s; }
.js .goal.is-visible .goal__fill { transform: none; }

.goal__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}
.goal__meta strong { color: var(--funk-orange); font-variant-numeric: tabular-nums; }

.goals .note::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--life-green);
  animation: live 1.6s ease-in-out infinite;
}
@keyframes live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 190, 108, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(45, 190, 108, 0); }
}

/* 06. Provas reais: Player + Playlist ----------------------------------------- */
.video-featured {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
}

.video-featured__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fundo desfocado do poster para vídeos verticais nas laterais no desktop */
.video-featured__ambient {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.4);
  opacity: 0.85;
  transform: scale(1.15);
  pointer-events: none;
  z-index: 0;
  transition: background-image 0.4s ease;
}

.video-featured__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  z-index: 1;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: var(--funk-orange);
  color: var(--funk-black);
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 0 0 10px rgba(247, 162, 27, 0.25);
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.video-card__play .icon { width: 28px; height: 28px; margin-left: 4px; }
.video-card__play:hover {
  background: var(--funk-orange-hover);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 16px rgba(247, 162, 27, 0.18);
}

.video-featured .video-card__play {
  width: 88px;
  height: 88px;
  z-index: 2;
}
.video-featured .video-card__play .icon {
  width: 34px;
  height: 34px;
}
.video-featured.is-playing .video-card__play {
  opacity: 0;
  pointer-events: none;
}

.video-card__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(13, 13, 13, 0.82);
}

.video-featured__caption {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.proof-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proof-info__title {
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.proof-info__place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--funk-gray-300);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
}
.proof-info__place .icon {
  width: 14px;
  height: 14px;
  color: var(--funk-orange);
  flex-shrink: 0;
}

/* 3 cards de playlist */
.video-playlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.video-playlist__item {
  min-width: 0;
}

.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--funk-card);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.proof-card:hover {
  border-color: rgba(247, 162, 27, 0.45);
  transform: translateY(-2px);
}

.proof-card:focus-visible {
  border-color: var(--funk-orange);
}

.proof-card.is-active {
  border-color: var(--funk-orange);
  box-shadow: 0 0 24px rgba(247, 162, 27, 0.22);
}

.proof-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-lg) - 4px);
  overflow: hidden;
  background: #000;
}

.proof-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.02);
  transition: filter 0.35s var(--ease), transform 0.35s var(--ease);
}

.proof-card:hover .proof-card__thumb,
.proof-card:focus-visible .proof-card__thumb,
.proof-card.is-active .proof-card__thumb {
  filter: grayscale(0);
  transform: scale(1.06);
}

.proof-card__play {
  pointer-events: none;
  width: 56px;
  height: 56px;
}
.proof-card__play .icon {
  width: 22px;
  height: 22px;
}

.proof-card__badge {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--funk-orange);
  color: #0D0D0D;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.proof-card.is-active .proof-card__badge {
  display: inline-flex;
  align-items: center;
}

.proof-card__caption {
  margin-top: 10px;
  padding: 4px 6px 6px;
}

/* 07. Linha do tempo ------------------------------------------------------------ */
.milestones {
  --dot: 20px;
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
}
.milestones::before,
.milestones::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--funk-gray-700);
}
.milestones::after {
  background: var(--funk-orange);
  transform: scaleY(var(--line, 1));
  transform-origin: top;
}

.milestone {
  position: relative;
  width: 50%;
  padding-right: 56px;
}
.milestone + .milestone { margin-top: -40px; }
.milestone:nth-child(even) {
  margin-left: 50%;
  padding-right: 0;
  padding-left: 56px;
}
/* ponto com anel laranja; preenche quando a linha chega nele */
.milestone__dot {
  position: absolute;
  top: 28px;
  right: calc(var(--dot) / -2);
  z-index: 1;
  width: var(--dot);
  height: var(--dot);
  border: 3px solid var(--funk-orange);
  border-radius: 50%;
  background: var(--funk-ink);
  transition: background-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.milestone:nth-child(even) .milestone__dot { right: auto; left: calc(var(--dot) / -2); }
.milestone.is-reached .milestone__dot {
  background: var(--funk-orange);
  box-shadow: 0 0 0 6px var(--funk-orange-soft);
}

.milestone__card {
  padding: var(--space-4);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--funk-card);
  box-shadow: var(--shadow-card);
}
.milestone__date { margin-bottom: var(--space-3); }

.milestone__title {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  margin-top: 0;
}
.milestone__text {
  margin-top: var(--space-2);
  color: var(--funk-gray-300);
  font-size: 15px;
  line-height: 1.6;
}

.milestone__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-3);
  border-radius: 16px;
  overflow: hidden;
  background: var(--funk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.milestone__media picture,
.milestone__media img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fotos (marcos 02 e 04): object-fit: cover, proporção 16:9, radius 16px. Em P&B por padrão -> coloridas em 800ms */
.milestone__media--photo img {
  object-fit: cover;
  border-radius: 16px;
  filter: grayscale(1);
  transition: filter 800ms var(--ease);
}
.milestone.is-reached .milestone__media--photo img,
.milestone.is-visible .milestone__media--photo img {
  filter: grayscale(0);
}
@media (hover: hover) {
  .milestone:hover .milestone__media--photo img {
    filter: grayscale(0);
  }
}

/* Logo (marco 01): object-fit: contain, fundo #0D0D0D, sem filtro */
.milestone__media--logo {
  background: #0D0D0D;
  border-radius: 16px;
}
.milestone__media--logo img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  filter: none;
}

/* Prints (marcos 03 e 05): object-fit: contain, centralizados num fundo --funk-card com padding 16px. Não cortar */
.milestone__media--print {
  background: var(--funk-card);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.milestone__media--print img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  filter: none;
}

/* Ponto vazado e card para "O próximo capítulo..." */
.milestone--next .milestone__dot,
.milestone__dot--outline {
  border: 3px dashed var(--funk-orange);
  background: var(--funk-ink) !important;
  box-shadow: none !important;
}
.milestone__card--next {
  border: 1px dashed rgba(247, 162, 27, 0.4);
  background: rgba(34, 28, 23, 0.75);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.milestone__next-text {
  color: var(--funk-white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.milestone__next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--funk-orange);
  border-color: rgba(247, 162, 27, 0.4);
  padding: 8px 18px;
  font-size: 14px;
}
.milestone__next-link:hover {
  border-color: var(--funk-orange);
  background: var(--funk-orange-soft);
  color: var(--funk-orange-hover);
}

/* 08. HypersKids ------------------------------------------------------------------ */
.hk__photos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 820px;
  margin: 0 auto var(--space-7);
}
.hk__photo {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hk__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(var(--gray));
  transition: transform var(--dur-enter) var(--ease);
}
.hk__photo:hover img { transform: scale(1.04); }
.hk__photo:first-child { transform: rotate(-2.5deg); }
.hk__photo:last-child { transform: rotate(2.5deg); }
.hk__photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(13, 13, 13, 0.82);
}
.hk__bond {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-inline: -32px;
  border: 3px solid var(--funk-orange);
  border-radius: 50%;
  background: var(--funk-black);
  color: var(--funk-orange);
  box-shadow: 0 0 0 8px var(--funk-black), var(--shadow-glow);
}
.hk__bond .icon { width: 36px; height: 36px; }

.hk__text {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.hk__text .lead { margin-top: var(--space-4); }
.hk__text .lead .text-accent { display: block; margin-top: var(--space-2); }

/* 09. Parceiros ----------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.partner {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--funk-card);
  transition: transform var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.partner:hover {
  transform: translateY(-4px);
  border-color: var(--funk-orange);
  box-shadow: var(--shadow-glow);
}
.partner__logo-wrap {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 162, 27, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  transition: border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.partner:hover .partner__logo-wrap {
  border-color: rgba(247, 162, 27, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
.partner__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.partner__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--funk-orange);
  background: rgba(247, 162, 27, 0.12);
  border: 1px solid rgba(247, 162, 27, 0.3);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  margin-bottom: var(--space-3);
}
.partner__title {
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24px */
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 4px;
}
.partner__subtitle {
  font-family: var(--font-display);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  color: var(--funk-orange);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.partner__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--funk-gray-300);
  margin: 0 0 var(--space-4);
}
.partner__location .icon {
  width: 15px;
  height: 15px;
  color: var(--funk-orange);
  flex-shrink: 0;
}
.partner__desc {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--funk-gray-300);
  margin: 0 0 var(--space-4);
}
.partner__highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: #FFFFFF;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(247, 162, 27, 0.06);
  border-left: 3px solid var(--funk-orange);
  margin: 0 0 var(--space-5);
}
.partner__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 162, 27, 0.2);
  color: var(--funk-orange);
  margin-top: 2px;
}
.partner__check .icon {
  width: 12px;
  height: 12px;
}
.partner__btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.partners__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5) 40px;
  border: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--funk-card);
}
.partners__cta p {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}
.partners__cta strong { color: var(--funk-orange); font-weight: 800; }

/* 10. Roadmap ----------------------------------------------------------------- */
.phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: flex-start;
  gap: var(--space-3);
}
.phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 270px;
  padding: var(--space-4);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--funk-card);
  cursor: pointer;
  outline: none;
  transition:
    transform var(--dur-ui) var(--ease),
    border-color var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease);
}
.phase:hover,
.phase:focus-visible,
.phase.is-expanded {
  transform: translateY(-4px);
}
.phase:focus-visible {
  outline: 2px solid var(--funk-orange);
  outline-offset: 2px;
}
.phase__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.phase__num {
  margin-top: var(--space-4);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--funk-gray-300);
}
.phase__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}
.phase__phrase {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--funk-gray-300);
}
.phase__toggle-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--funk-orange);
}
.phase__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.phase:hover .phase__chevron,
.phase.is-expanded .phase__chevron {
  transform: rotate(180deg);
}

/* Expansão das entregas (hover no desktop ou clique) */
.phase__deliveries-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s var(--ease), opacity 0.3s var(--ease), margin-top 0.3s var(--ease);
  width: 100%;
}
.phase__deliveries-inner {
  overflow: hidden;
}
.phase:hover .phase__deliveries-wrap,
.phase.is-expanded .phase__deliveries-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-4);
}
.phase__deliveries {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--space-3);
  border-top: var(--border-soft);
  font-size: 0.875rem;
  line-height: 1.4;
}
.phase__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--funk-gray-300);
}
.phase__item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.phase__item--done .phase__item-icon {
  background: rgba(247, 162, 27, 0.2);
  color: var(--funk-orange);
}
.phase__item--done .phase__item-icon .icon {
  width: 12px;
  height: 12px;
}
.phase__item--pending .phase__item-icon {
  position: relative;
}
.phase__item--pending .phase__item-icon::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--funk-gray-500);
}

/* FASE 1: Card laranja preenchido */
.phase--done {
  background: var(--funk-orange);
  color: var(--funk-black);
  border-color: var(--funk-orange);
}
.phase--done .phase__num { color: rgba(13, 13, 13, 0.7); }
.phase--done .phase__title { color: var(--funk-black); }
.phase--done .phase__phrase { color: rgba(13, 13, 13, 0.88); font-weight: 600; }
.phase--done .pill--done {
  background: var(--funk-black);
  color: var(--funk-orange);
  border-color: var(--funk-black);
}
.phase--done .phase__toggle-cue { color: var(--funk-black); font-weight: 800; }
.phase--done .phase__deliveries { border-top-color: rgba(13, 13, 13, 0.18); }
.phase--done .phase__item { color: rgba(13, 13, 13, 0.95); font-weight: 600; }
.phase--done .phase__item-icon {
  background: var(--funk-black);
  color: var(--funk-orange);
}

/* FASE 2: Card com borda laranja */
.phase--now {
  border: 2px solid var(--funk-orange);
  box-shadow: 0 10px 40px rgba(247, 162, 27, 0.2);
}
.phase--now .pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--funk-orange);
  animation: live-orange 1.6s ease-in-out infinite;
}
@keyframes live-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 162, 27, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(247, 162, 27, 0); }
}

/* Linha de marcos de Market Cap ------------------------------------------- */
.mcap-timeline {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(24px, 4vw, 36px);
  border: var(--border-soft);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(247, 162, 27, 0.08), transparent 70%),
    var(--funk-card);
}
.mcap-timeline__header {
  text-align: center;
  margin-bottom: var(--space-5);
}
.mcap-timeline__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}
.mcap-timeline__track-wrap {
  position: relative;
  overflow-x: auto;
  padding: 16px 8px 8px;
  scrollbar-width: none;
}
.mcap-timeline__track-wrap::-webkit-scrollbar { display: none; }
.mcap-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-end;
  gap: 16px;
  min-width: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mcap-timeline__track::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}
.mcap-milestone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mcap-milestone__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--funk-orange);
  color: var(--funk-black);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mcap-milestone__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: 10px;
  transition: transform var(--dur-ui) var(--ease);
}
.mcap-milestone--current .mcap-milestone__circle {
  background: var(--funk-orange);
  color: var(--funk-black);
  box-shadow: 0 0 0 6px rgba(247, 162, 27, 0.22), 0 8px 24px rgba(247, 162, 27, 0.4);
}
.mcap-milestone:not(.mcap-milestone--current) .mcap-milestone__circle {
  background: var(--funk-black);
  border: 2px solid rgba(255, 255, 255, 0.14);
  color: var(--funk-gray-300);
}
.mcap-milestone:hover .mcap-milestone__circle {
  transform: scale(1.08);
}
.mcap-milestone__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--funk-gray-500);
}
.mcap-milestone--current .mcap-milestone__label {
  color: var(--funk-orange);
}

/* 11. Como comprar $FUNK — Redesign ----------------------------------------- */
.buy-v2 {
  position: relative;
  padding: 128px 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(247, 162, 27, 0.08) 0%, transparent 60%),
    var(--funk-black);
  border-top: var(--border-soft);
}

.buy-v2__head {
  text-align: left;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.buy-v2__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--funk-orange);
  margin-bottom: 16px;
}

.buy-v2__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 3.8vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}

.buy-v2__title .text-accent {
  color: var(--funk-orange);
}

/* 2. Linha de passos */
.buy-v2__flow {
  position: relative;
  margin-bottom: clamp(48px, 6vw, 64px);
}

.buy-v2__line {
  position: absolute;
  top: 24px;
  left: 24px;
  right: calc(25% - 48px);
  height: 1px;
  background: rgba(247, 162, 27, 0.3);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.buy-v2__flow.is-visible .buy-v2__line {
  transform: scaleX(1);
}

.buy-v2__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-v2__step {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--step-i, 0) * 120ms + 100ms);
}
.buy-v2__flow.is-visible .buy-v2__step {
  opacity: 1;
  transform: translateY(0);
}

.buy-v2__circle-wrap {
  margin-bottom: 24px;
}

.buy-v2__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--funk-orange);
  background: var(--funk-black);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--funk-orange);
  box-shadow: 0 0 16px rgba(247, 162, 27, 0.15);
}

.buy-v2__content {
  display: flex;
  flex-direction: column;
}

.buy-v2__step-title {
  font-family: var(--font-display);
  font-size: 1.375rem; /* ~22px */
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.buy-v2__step-desc {
  font-family: var(--font-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--funk-gray-300);
  margin: 0;
}

.buy-v2__link {
  color: var(--funk-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.buy-v2__link:hover {
  color: var(--funk-orange-hover);
}

/* 3. Caixa do contrato */
.buy-v2__contract-box {
  background: var(--funk-card);
  border: 1px solid rgba(247, 162, 27, 0.25);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.buy-v2__contract-box:hover {
  border-color: rgba(247, 162, 27, 0.45);
  box-shadow: 0 14px 42px rgba(247, 162, 27, 0.12);
}

.buy-v2__contract-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.buy-v2__contract-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--funk-gray-500);
}

.buy-v2__address {
  font-family: var(--font-mono);
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.buy-v2__address .addr-short { display: none; }
.buy-v2__address .addr-full { display: inline; }

.buy-v2__contract-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.buy-v2__btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--funk-orange);
  border-radius: 12px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--funk-orange);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.buy-v2__btn-copy:hover {
  background: rgba(247, 162, 27, 0.12);
}
.buy-v2__btn-copy .icon {
  width: 16px;
  height: 16px;
}
.buy-v2__btn-copy.is-copied {
  border-color: var(--life-green) !important;
  color: var(--life-green) !important;
  background: rgba(45, 190, 108, 0.12) !important;
}

.buy-v2__btn-jup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--funk-orange);
  border: 1px solid var(--funk-orange);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0D0D0D;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.buy-v2__btn-jup:hover {
  background: var(--funk-orange-hover);
  border-color: var(--funk-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 162, 27, 0.35);
}
.buy-v2__btn-jup .icon {
  width: 16px;
  height: 16px;
}

/* 4. Aviso de segurança */
.buy-v2__security {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--funk-gray-500);
}
.buy-v2__security-icon {
  width: 16px;
  height: 16px;
  color: var(--funk-orange);
  flex-shrink: 0;
}

/* Responsivo para Como Comprar */
@media (max-width: 960px) {
  .buy-v2__steps {
    gap: 20px;
  }
  .buy-v2__contract-box {
    flex-direction: column;
    align-items: stretch;
  }
  .buy-v2__contract-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .buy-v2 {
    padding: 72px 0;
  }
  .buy-v2__head {
    margin-bottom: 40px;
  }
  .buy-v2__flow {
    margin-bottom: 40px;
  }
  .buy-v2__line {
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  .buy-v2__flow.is-visible .buy-v2__line {
    transform: scaleY(1);
  }
  .buy-v2__steps {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .buy-v2__step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 20px;
    align-items: flex-start;
  }
  .buy-v2__circle-wrap {
    grid-row: span 2;
    margin-bottom: 0;
  }
  .buy-v2__content {
    padding-top: 2px;
  }
  .buy-v2__contract-box {
    padding: 20px 18px;
  }
  .buy-v2__address .addr-full { display: none; }
  .buy-v2__address .addr-short { display: inline; }
  .buy-v2__contract-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }
  .buy-v2__btn-copy,
  .buy-v2__btn-jup {
    width: 100%;
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {
  .buy-v2__contract-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .buy-v2__btn-copy,
  .buy-v2__btn-jup {
    padding: 12px 6px;
    font-size: 0.8125rem;
    gap: 6px;
  }
}

/* Componente Reutilizável: ContractBox ---------------------------------------- */
.contract-wrapper {
  margin-top: var(--space-5);
}
.contract-box {
  position: relative;
  padding: 24px;
  border: 1px solid var(--funk-orange);
  border-radius: 16px;
  background: var(--funk-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.contract-box:hover {
  border-color: var(--funk-orange-hover);
  box-shadow: 0 12px 36px rgba(247, 162, 27, 0.18);
}
.contract-box__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.contract-box__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--funk-orange);
}
.contract-box__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--funk-gray-300);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.contract-box__link .icon {
  width: 14px;
  height: 14px;
}
.contract-box__link:hover {
  color: var(--funk-orange);
  text-decoration: underline;
}
.contract-box__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: var(--funk-black);
}
.contract-box__address {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  color: var(--funk-white);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.contract-box__address .addr-short { display: none; }
.contract-box__address .addr-full { display: inline; }
.contract-box__copy {
  flex-shrink: 0;
}
.contract-box__copy.is-copied {
  border-color: var(--life-green) !important;
  background: var(--life-green) !important;
  color: #FFFFFF !important;
}
.contract-box__warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}
.contract-box__warn .icon {
  color: var(--funk-orange);
  margin-top: 1px;
}

/* Variação compacta do ContractBox (Hero e Rodapé) */
.contract-box--compact {
  padding: 14px 18px;
}
.contract-box--compact .contract-box__top {
  margin-bottom: 8px;
}
.contract-box--compact .contract-box__label {
  font-size: 11px;
}
.contract-box--compact .contract-box__body {
  padding: 6px 6px 6px 12px;
}
.contract-box--compact .contract-box__address {
  font-size: 0.8125rem;
}

/* Elementos auxiliares para Hero, Footer e FAQ */
.hero__contract {
  margin-top: var(--space-4);
  max-width: 520px;
}
.site-footer__contract {
  margin-top: var(--space-5);
  max-width: 540px;
}
.mono-inline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--funk-orange);
  word-break: break-all;
}

/* 12. FAQ — acordeão ---------------------------------------------------------------- */
.faq__list { border-top: var(--border-soft); }
.faq__item { border-bottom: var(--border-soft); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--funk-orange); }
/* ícone "+" laranja que gira 45° ao abrir */
.faq__item summary .icon {
  width: 28px;
  height: 28px;
  color: var(--funk-orange);
  transition: transform var(--dur-ui) var(--ease);
}
.faq__item[open]:not(.is-closing) summary .icon { transform: rotate(45deg); }
.faq__answer { overflow: hidden; }
.faq__answer p {
  max-width: 62ch;
  padding-bottom: var(--space-5);
  color: var(--funk-gray-300);
}
.faq__answer a { color: var(--funk-orange); font-weight: 600; }

/* 13. CTA final — fundo em vídeo imersivo com overlay e grão ------------ */
.final {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 140px;
  overflow: hidden;
  text-align: center;
}
.final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.final__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.25;
  filter: grayscale(0) contrast(1.05);
  pointer-events: none;
}
.final__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.85) 70%),
    linear-gradient(180deg, #0D0D0D 0%, rgba(13, 13, 13, 0) 15%, rgba(13, 13, 13, 0) 85%, #0D0D0D 100%);
}
.final__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n-final'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n-final)'/></svg>");
}

.final__content {
  position: relative;
  z-index: 2;
}
.final__title {
  max-width: 12ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.9rem + 6.6vw, 6.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.final__text {
  max-width: 32ch;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-lead);
  color: var(--funk-gray-300);
  text-wrap: balance;
}
.final__side {
  position: absolute;
  bottom: var(--space-5);
  z-index: 2;
  max-width: 40%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final__side--left { left: var(--gutter); color: var(--funk-gray-500); }
.final__side--right { right: var(--gutter); color: var(--funk-orange); }

@media (max-width: 767px) {
  .final__video {
    object-position: center;
    opacity: 0.2;
  }
}

/* 14. Rodapé ------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-8) 0 var(--space-6);
  border-top: var(--border-soft);
  background: var(--funk-black);
}
.site-footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo nav social"
    "logo nav contact";
  align-items: start;
  gap: var(--space-3) var(--space-6);
}
.site-footer__logo { grid-area: logo; color: var(--funk-white); }
.site-footer__logo .logo { height: 40px; }
.site-footer__nav { grid-area: nav; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.site-footer__nav a {
  font-weight: 600;
  color: var(--funk-gray-300);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.site-footer__nav a:hover { color: var(--funk-white); }
.site-footer__social {
  grid-area: social;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}
.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--funk-white);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
.social:hover { color: var(--funk-orange); }
.site-footer__contact {
  grid-area: contact;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--funk-gray-300);
}
.site-footer__risk {
  max-width: 80ch;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--funk-gray-300);
}
.site-footer__copy {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--funk-gray-500);
}

/* CTA fixo no rodapé da tela (só no celular) -------------------------------------- */
.buy-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(13, 13, 13, 0), rgba(13, 13, 13, 0.92) 35%);
  transform: translateY(110%);
  transition: transform var(--dur-ui) var(--ease);
}
.buy-bar.is-visible { transform: none; }
.buy-bar .btn { width: 100%; }

/* Revelar no scroll -------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-enter) var(--ease) calc(var(--i, 0) * 90ms),
    transform var(--dur-enter) var(--ease) calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Responsivo: 480 / 768 / 1024 / 1280 ----------------------------------------------- */
@media (max-width: 1279px) {
  .site-nav ul { gap: 22px; }
}

@media (max-width: 1023px) {
  .site-nav,
  .site-header__cta { display: none; }
  .menu-toggle { display: block; }

  /* hero: a foto da cesta ganha uma faixa própria acima do texto */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: calc(var(--header-h) + var(--space-3));
  }
  .hero__visual { order: -1; }
  .cesta { width: auto; height: min(25svh, 280px); }
  .hero__shade {
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0.35) 22%, rgba(13, 13, 13, 0.88) 48%, rgba(13, 13, 13, 0.95) 100%);
  }

  .about__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about__visual { order: -1; max-width: 520px; width: 100%; margin-inline: auto; aspect-ratio: 1 / 0.9; }

  .phases,
  .buy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .milestones::before,
  .milestones::after { left: 9px; }
  .milestone,
  .milestone:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 0 44px; }
  .milestone + .milestone { margin-top: var(--space-4); }
  .milestone__dot,
  .milestone:nth-child(even) .milestone__dot { left: 0; right: auto; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }

  .hero__video { opacity: 0.2; object-position: center; }
  .hero__footer { flex-direction: column; align-items: stretch; }
  .scroll-cue { align-self: center; }
  /* contadores em 2 colunas */
  .counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

  .flow { grid-template-columns: 1fr; gap: var(--space-5); }
  .flow-step { display: grid; grid-template-columns: var(--node) 1fr; column-gap: var(--space-4); }
  .flow-step__node { grid-row: span 3; margin-bottom: 0; }
  .flow::before,
  .flow::after {
    top: calc(var(--node) / 2);
    bottom: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .flow::after { transform: scaleY(var(--flow, 1)); transform-origin: top; }

  .goal-list { grid-template-columns: 1fr; }
  .goal { padding: 28px; }

  .video-featured {
    width: 100%;
    margin-inline: 0;
  }
  .video-featured__media {
    border-radius: 12px;
    aspect-ratio: 16 / 10;
  }
  .video-playlist {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%; /* ~1,3 card visível por vez */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 12px;
    gap: 12px;
    scrollbar-width: none;
  }
  .video-playlist::-webkit-scrollbar { display: none; }
  .video-playlist__item {
    scroll-snap-align: center;
  }

  .hk__bond { width: 64px; height: 64px; margin-inline: -24px; }
  .hk__bond .icon { width: 26px; height: 26px; }

  .partner-grid { grid-template-columns: 1fr; gap: 20px; }
  .partner { padding: 28px; }
  .partners__cta { padding: var(--space-4); }

  .phases,
  .buy-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
  }
  .phases::-webkit-scrollbar,
  .buy-steps::-webkit-scrollbar { display: none; }
  .phase,
  .buy-step { scroll-snap-align: center; }

  .contract-box { padding: 18px 16px; }
  .contract-box__address .addr-full { display: none; }
  .contract-box__address .addr-short { display: inline; }

  .final__side { display: none; }

  .site-footer__top {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "nav" "social" "contact";
    gap: var(--space-4);
  }
  .site-footer__social,
  .site-footer__contact { justify-content: flex-start; }
  /* espaço para o CTA fixo não cobrir o fim da página */
  .site-footer { padding-bottom: calc(var(--space-6) + 88px + env(safe-area-inset-bottom)); }

  .buy-bar { display: block; }
}

@media (max-width: 479px) {
  .actions .btn { width: 100%; }
  .hero .actions { flex-wrap: nowrap; }
  .hero .actions .btn { width: auto; flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .partners__cta .btn { width: 100%; }
  .contract-box__top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .contract-box__body { flex-direction: column; align-items: stretch; gap: 10px; }
  .contract-box__copy { width: 100%; justify-content: center; }
}

/* Movimento reduzido: sem scrub, sem 3D animado, sem flutuação */
@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;
    transition-delay: 0s !important;
  }
  .grain { animation: none; }
}