/* ============================================================
   Vitor Barcel — landing page
   Implementation of design/Landing Hero.dc.html
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg:        #0a0a0b;
  --surface:   #111113;
  --fg:        #f5f4f2;
  --gold:      oklch(0.78 0.09 80);
  --gold-rgb:  214, 178, 122;

  --fg-70: rgba(245, 244, 242, 0.7);
  --fg-62: rgba(245, 244, 242, 0.62);
  --fg-60: rgba(245, 244, 242, 0.6);
  --fg-58: rgba(245, 244, 242, 0.58);
  --fg-55: rgba(245, 244, 242, 0.55);
  --fg-40: rgba(245, 244, 242, 0.4);
  --fg-34: rgba(245, 244, 242, 0.34);
  --fg-32: rgba(245, 244, 242, 0.32);

  --hairline: rgba(255, 255, 255, 0.09);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1400px;
  --gutter: 56px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", -apple-system, system-ui, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: oklch(0.78 0.09 80 / 0.3); color: var(--fg); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- keyframes ---------- */
@keyframes fadeUp        { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes driftA        { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-1.5%, 1%) rotate(0.6deg); } }
@keyframes driftB        { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(1.8%, -1.2%) rotate(-0.8deg); } }
@keyframes driftC        { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-1%, -0.8%) scale(1.015); } }
@keyframes nodePulse     { 0%, 100% { opacity: 0.3; r: 2.4; } 50% { opacity: 0.85; r: 3.4; } }
@keyframes breathe       { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes drawFlow      { 0% { stroke-dashoffset: 1; opacity: 0; } 22% { opacity: 0.55; } 52% { stroke-dashoffset: 0; opacity: 0.55; } 80% { opacity: 0.12; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes gridDrift     { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, 4px); } }
@keyframes glowBreathe   { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes nodeActivate  { 0%, 100% { opacity: 0.25; r: 2.4; } 15% { opacity: 1; r: 5; } 30% { opacity: 0.4; r: 2.8; } }
@keyframes beamTravel    { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: -1; } }
@keyframes ringPulse     { 0% { r: 6; opacity: 0.8; stroke-width: 2; } 100% { r: 22; opacity: 0; stroke-width: 0.5; } }
@keyframes sheen         { 0%, 100% { transform: translateX(-120%) skewX(-12deg); opacity: 0; } 8% { opacity: 0.5; } 16% { opacity: 0; } 100% { transform: translateX(220%) skewX(-12deg); opacity: 0; } }
@keyframes marqueeLeft   { 0% { transform: translateX(0); }     100% { transform: translateX(-50%); } }
@keyframes marqueeRight  { 0% { transform: translateX(-50%); }  100% { transform: translateX(0); } }
@keyframes auroraA {
  0%   { transform: translate(-10%, -6%) rotate(-6deg)  scale(1, 1); }
  33%  { transform: translate(8%, 10%)   rotate(4deg)   scale(1.2, 1.15); }
  66%  { transform: translate(-8%, -10%) rotate(-14deg) scale(0.88, 0.9); }
  100% { transform: translate(-10%, -6%) rotate(-6deg)  scale(1, 1); }
}
@keyframes auroraB {
  0%   { transform: translate(9%, 6%)   rotate(4deg)  scale(1, 1); }
  40%  { transform: translate(-8%, -8%) rotate(13deg) scale(1.18, 0.85); }
  70%  { transform: translate(6%, 10%)  rotate(-3deg) scale(0.85, 1.15); }
  100% { transform: translate(9%, 6%)   rotate(4deg)  scale(1, 1); }
}
@keyframes auroraC {
  0%   { transform: translate(-2%, -2%) rotate(-3deg) scale(1, 1);       opacity: 0.6; }
  50%  { transform: translate(-10%, 8%) rotate(6deg)  scale(1.25, 1.1);  opacity: 1; }
  100% { transform: translate(-2%, -2%) rotate(-3deg) scale(1, 1);       opacity: 0.6; }
}

/* shared animation hooks used by the decorative SVGs */
.anim-breathe { animation: breathe ease-in-out infinite; }
.anim-driftA  { animation: driftA ease-in-out infinite; transform-origin: 50% 50%; }
.anim-driftB  { animation: driftB ease-in-out infinite; transform-origin: 50% 50%; }
.anim-driftC  { animation: driftC ease-in-out infinite; transform-origin: 50% 50%; }
.anim-draw    { animation: drawFlow ease-in-out infinite; }
.anim-node    { animation: nodeActivate 4.5s ease-in-out infinite; }
.anim-ring    { animation: ringPulse 4.5s ease-out infinite; }
.anim-beam    { animation: beamTravel linear infinite; }
.anim-pulse   { animation: nodePulse ease-in-out infinite; }

/* ---------- global chrome ---------- */
.cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), oklch(0.78 0.09 80 / 0.1), transparent 40%);
  transition: background 0.15s ease-out;
  animation: glowBreathe 12s ease-in-out infinite;
}
/* Sem mouse não há brilho a seguir: era uma camada fixa do tamanho da tela,
   repintada em loop pela animação, sem nada em troca. */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* O brilho de fundo já foi sete <span> de ~950px com filter:blur(110px) e
   mix-blend-mode:screen. Num elemento que cobre o documento inteiro (~18.000px)
   essa combinação impede o navegador de reaproveitar os tiles rasterizados: numa
   rolagem rápida ele descarta e repinta tudo, e o usuário vê blocos em branco.
   Os mesmos halos como gradientes de fundo custam quase nada — sobre um fundo
   quase preto, "screen" é praticamente aditivo, então o resultado é equivalente.
   Os raios abaixo já embutem o alcance que o blur dava (metade do box + blur). */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(circle 440px at 18% 14%, oklch(0.78 0.09 80 / 0.16), transparent),
    radial-gradient(circle 490px at 82% 27%, oklch(0.7 0.1 210 / 0.14),  transparent),
    radial-gradient(circle 490px at 12% 42%, oklch(0.78 0.09 80 / 0.13), transparent),
    radial-gradient(circle 465px at 78% 57%, oklch(0.78 0.09 80 / 0.12), transparent),
    radial-gradient(circle 490px at 20% 70%, oklch(0.7 0.1 210 / 0.13),  transparent),
    radial-gradient(circle 465px at 65% 84%, oklch(0.78 0.09 80 / 0.14), transparent),
    radial-gradient(circle 415px at 35% 96%, oklch(0.78 0.09 80 / 0.13), transparent);
}
.ambient__blob { display: none; }

.page { position: relative; z-index: 1; }

/* ---------- primitives ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

.gold { color: var(--gold); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fg-40);
  margin: 0 0 18px;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--dim  { color: var(--fg-32); }
.eyebrow--sm   { font-size: 11px; letter-spacing: 0.1em; margin: 8px 0 0; }

.btn {
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 100px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(245, 244, 242, 0.25); }
.btn--lg { padding: 18px 36px; display: inline-flex; align-items: center; gap: 10px; }
.btn--lg:hover { box-shadow: 0 14px 36px -10px rgba(245, 244, 242, 0.28); }
.btn__label { position: relative; z-index: 1; }
.btn__sheen {
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(10, 10, 11, 0.12), transparent);
  animation: sheen 7s ease-in-out infinite 2s;
  pointer-events: none;
}

.link-quiet {
  color: var(--fg-70);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.link-quiet:hover { color: var(--fg); }

/* section dividers */
.rule {
  position: relative;
  height: 180px;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.rule__line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 12%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.05) 88%, transparent);
}
.rule__label {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-34);
}

.section-head { max-width: 680px; margin: 0 auto 96px; text-align: center; position: relative; }
.section-head--narrow { max-width: 640px; margin-bottom: 48px; }
.section-head--tight  { max-width: 680px; margin: 0 auto 56px; padding: 0 var(--gutter); }

.section-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg);
}
.section-title--lg { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.14; }
.section-lede { font-size: 17px; line-height: 1.7; color: var(--fg-58); }

.prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-62);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.prose--tight { max-width: 500px; gap: 20px; color: var(--fg-60); margin-bottom: 48px; }

/* image slots ------------------------------------------------ */
.slot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.slot--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot--framed { border: 1px solid var(--hairline); border-radius: 20px; }
.slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Which part of a tall source survives a wide crop. The revenue-panel shots
     are portrait and these cells are landscape, so each one aims at the figure
     circled in red rather than the middle of the photo. */
  object-position: var(--slot-pos, 50% 50%);
  /* Pan/zoom committed in the design canvas, if any. `cover` already supplies
     the baseline fit, so the stored view is just a shift + scale about centre.
     tools/install-assets.py writes --slot-view when a slot was reframed. */
  transform: var(--slot-view, none);
}

/* shown when the source file is missing */
.slot.is-empty img { display: none; }
.slot.is-empty {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px), var(--surface);
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
.slot.is-empty::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 242, 0.35);
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }

.hero__aurora {
  position: absolute;
  inset: -15% -10%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.32;
  filter: blur(70px);
  overflow: hidden;
}
.hero__aurora-band { position: absolute; display: block; transform-origin: 50% 50%; }
.hero__aurora-band--a {
  width: 170%; height: 280px; left: -35%; top: 6%;
  background: linear-gradient(100deg, transparent 5%, oklch(0.78 0.14 80 / 0.6) 32%, oklch(0.7 0.12 210 / 0.5) 62%, transparent 92%);
  animation: auroraA 20s ease-in-out infinite;
}
.hero__aurora-band--b {
  width: 180%; height: 320px; left: -40%; top: 24%;
  background: linear-gradient(96deg, transparent 8%, oklch(0.74 0.1 160 / 0.45) 38%, oklch(0.68 0.13 250 / 0.48) 68%, transparent 94%);
  animation: auroraB 25s ease-in-out infinite;
}
.hero__aurora-band--c {
  width: 160%; height: 250px; left: -28%; top: -4%;
  background: linear-gradient(105deg, transparent 10%, oklch(0.84 0.1 90 / 0.42) 50%, transparent 90%);
  animation: auroraC 16s ease-in-out infinite;
}

.hero__grid {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent);
  animation: gridDrift 46s ease-in-out infinite;
}

.hero__signals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: var(--parallax, translate(0, 0));
  transition: transform 0.4s ease-out;
}
.hero__signals svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__inner { position: relative; padding-top: 120px; }

.hero__side-label {
  position: absolute;
  left: 18px;
  top: 640px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-32);
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
  white-space: nowrap;
}

.hero__eyebrow { margin-bottom: 24px; animation: fadeUp 0.8s var(--ease-out-expo) both; }

.hero__title {
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 920px;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.08s both;
}

.hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-60);
  max-width: 560px;
  margin: 0 0 44px;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.16s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 80px;
  flex-wrap: wrap;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.24s both;
}

.hero__portrait {
  position: relative;
  width: 100%;
  max-width: 1288px;
  height: 640px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  margin: 0 auto;
  box-shadow: 0 50px 90px -35px rgba(0, 0, 0, 0.65);
  animation: fadeUp 1s var(--ease-out-expo) 0.3s both;
  transform: var(--parallax-near, translate(0, 0));
  transition: transform 0.5s ease-out;
}
.hero__portrait .slot img { filter: contrast(1.14) saturate(1.08) brightness(0.93) sepia(0.05); }
.hero__portrait-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 45%, rgba(10, 10, 11, 0.35) 100%);
}
.hero__portrait-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.25) 0%, transparent 20%, transparent 55%, rgba(10, 10, 11, 0.75) 100%);
}
.hero__caption { position: absolute; left: 40px; bottom: 36px; max-width: 400px; }
.hero__caption-rule { display: block; width: 28px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.hero__caption-name {
  display: block;
  font-size: 18px; font-weight: 600; color: #fff;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.hero__caption-role {
  display: block;
  font-family: var(--mono); font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px; letter-spacing: 0.14em; text-transform: uppercase;
}

.hero__tail { height: 60px; }

/* ============================================================
   02 — NÚMEROS
   ============================================================ */
.stats { position: relative; padding: 0 0 160px; }
.stats__signals { position: absolute; top: -40px; left: 0; width: 100%; height: 340px; pointer-events: none; }
.stats__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 40px 32px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }
.stat__index { font-family: var(--mono); font-size: 12px; color: var(--fg-40); letter-spacing: 0.08em; margin: 0 0 18px; }
.stat__value { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 15px; color: var(--fg-55); margin-top: 10px; line-height: 1.4; }

/* ============================================================
   03 — GALERIA
   ============================================================ */
.gallery { position: relative; padding-bottom: 160px; }
.gallery__signals {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 900px; max-width: 140%; height: 200px;
  pointer-events: none;
}
/* Matches the photo's own ratio, so the row of plaques is never cropped —
   at any viewport width the frame shrinks with it instead of clipping. */
.gallery__hero { width: 100%; aspect-ratio: 1150 / 470; margin-bottom: 16px; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.gallery__cell { grid-column: span 2; min-width: 0; transition: transform 0.3s ease; }
.gallery__cell:hover { transform: translateY(-4px); }
.gallery__hero img, .gallery__cell img { filter: grayscale(0.75) contrast(1.08) brightness(0.94); }

/* ============================================================
   04 — RESULTADOS
   ============================================================ */
.results { padding-bottom: 40px; position: relative; }
.results .section-title--lg { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; margin-bottom: 22px; }

[data-case] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
[data-case].is-revealed { opacity: 1; transform: translateY(0); }

.case--split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--hairline);
}
.case--center { padding: 88px 0; border-top: 1px solid var(--hairline); text-align: center; }
.case--pair   { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 72px 0; border-top: 1px solid var(--hairline); }
.case--stack  { padding: 88px 0; border-top: 1px solid var(--hairline); }

.case__text--4 { grid-column: span 4; }
.case__text--7 { grid-column: span 7; }
.case__viz--5  { grid-column: span 5; min-width: 0; }
.case__viz--8  { grid-column: span 8; min-width: 0; }

.case__title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 16px;
  max-width: 340px;
}
.case__title--wide  { max-width: 440px; }
.case__title--wider { max-width: 520px; }
.case__title--sm    { font-size: 22px; margin-bottom: 14px; max-width: none; }
.case__title--center {
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: 640px;
  margin: 0 auto 40px;
}

.case__body { font-size: 15px; line-height: 1.65; color: var(--fg-55); max-width: 340px; margin-bottom: 26px; }
.case__body--wide  { max-width: 440px; }
.case__body--wider { max-width: 480px; margin-bottom: 0; }
.case__body--sm    { font-size: 14px; margin-bottom: 22px; max-width: none; }
.case__body--center { font-size: 16px; line-height: 1.7; max-width: 520px; margin: 28px auto 44px; }

.case__text--right { text-align: right; }
.case__text--right .case__title { margin-left: auto; }
.case__text--right .case__body  { margin-left: auto; margin-right: 0; }

.case__figure {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.case__hero-figure {
  font-size: clamp(70px, 11vw, 168px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.case__pair { display: flex; justify-content: center; flex-wrap: wrap; }
.case__pair-item { padding: 0 40px; }
.case__pair-item:first-child { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.case__pair-value { font-size: 28px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

.case__stack-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.case__stack-copy { grid-column: span 8; }
.case__stack-figure { grid-column: span 4; text-align: right; }
.case__count {
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.case__stack-figure .eyebrow { margin-top: 6px; }

.bullets { display: flex; flex-direction: column; gap: 11px; }
.bullets li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--fg-62); }
.bullets li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  flex: none;
  transform: translateY(-2px);
}
.bullets--right { align-items: flex-end; }
.bullets--right li { flex-direction: row-reverse; }
.bullets--sm { gap: 10px; }
.bullets--sm li { font-size: 13.5px; color: var(--fg-60); }
.bullets--wide { margin-top: 32px; max-width: 640px; }

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: 100%; }
.chart--120 { height: 120px; }
.chart--170 { height: 170px; margin-bottom: 28px; }
.chart--200 { height: 200px; }
.chart--240 { height: 240px; }
.chart[data-chart="3"] { aspect-ratio: 300 / 240; }
.chart[data-chart="4"] { aspect-ratio: 600 / 220; }

/* ============================================================
   05 — CONFIANÇA (marquee)
   ============================================================ */
.proof { position: relative; padding: 20px 0 60px; }

.marquee {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee + .marquee { margin-top: 24px; }
.marquee.is-dragging { cursor: grabbing; }

.marquee__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marqueeLeft var(--duration, 46s) linear infinite;
}
[data-direction="right"] .marquee__track { animation-name: marqueeRight; }
.marquee:hover .marquee__track,
.marquee.is-dragging .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: none;
  width: 460px;
  aspect-ratio: 2.78 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
  background: var(--surface);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease, border-color 0.5s ease;
}
.marquee__item:hover {
  transform: scale(1.03);
  border-color: oklch(0.78 0.09 80 / 0.5);
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.6), 0 0 40px -8px oklch(0.78 0.09 80 / 0.25);
}
.marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.marquee__item.is-missing { display: none; }

/* ============================================================
   06 — MOTIVO
   ============================================================ */
.why {
  position: relative;
  padding-bottom: 200px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}
.why__title { margin: 0 0 32px; max-width: 560px; }
.why__kicker {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--fg);
  max-width: 560px;
  margin: 36px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.why__network { position: relative; height: 620px; overflow: visible; }
#network-canvas {
  position: absolute;
  width: 280%;
  height: 280%;
  left: -90%;
  top: -90%;
  display: block;
  pointer-events: none;
  /* Lidos pelo main.js. --sphere-fill multiplica o menor lado do canvas para
     dar o raio da esfera; no desktop ela sangra de propósito para fora da
     coluna, por isso o valor é baixo. --label-size é o corpo dos nomes. */
  --sphere-fill: 0.42;
  --label-size: 12px;
}

/* ============================================================
   07 — SERVIÇOS
   ============================================================ */
.services { position: relative; padding-bottom: 200px; }
.services .section-head { margin-bottom: 64px; }

.service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--hairline);
}
.service:first-of-type { border-top: none; }

.service__copy {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out-expo) calc(var(--i) * 0.14s),
    transform 0.7s var(--ease-out-expo) calc(var(--i) * 0.14s);
}
.service__viz {
  height: 200px;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.6s ease calc(var(--i) * 0.14s + 0.1s);
}
.service__viz--wide { grid-column: span 2; height: 220px; }
.service__viz svg { width: 100%; height: 100%; display: block; }

.services.is-visible .service__copy { opacity: 1; transform: translateY(0); }
.services.is-visible .service__viz  { opacity: 1; }

/* Seção já ultrapassada: aparece pronta, sem escalonar nem animar */
.services.no-stagger .service__copy,
.services.no-stagger .service__viz { transition: none; }

.service__title { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); margin: 0 0 16px; max-width: 320px; }
.service__desc  { font-size: 16px; line-height: 1.65; color: var(--fg-55); max-width: 340px; }
.service__copy--right  { text-align: right; }
.service__copy--right .service__title { max-width: none; }
.service__copy--right .service__desc  { margin-left: auto; max-width: 320px; }
.service__copy--center { text-align: center; }
.service__copy--center .service__title { max-width: none; }
.service__copy--center .service__desc  { margin: 0 auto; max-width: 300px; }

/* ============================================================
   08 — PROCESSO
   ============================================================ */
.process { position: relative; padding-bottom: 200px; }
.process .section-head { margin-bottom: 72px; }
.process__timeline { position: relative; }
.process__line { position: absolute; top: 22px; left: 0; width: 100%; height: 2px; overflow: visible; }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.step {
  text-align: center;
  opacity: 0.35;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.step.is-active { opacity: 1; transform: translateY(0); }

.step__badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: rgba(245, 244, 242, 0.3);
  transform: scale(0.9);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.step.is-active .step__badge {
  border-color: rgba(var(--gold-rgb), 0.9);
  color: var(--gold);
  box-shadow: 0 0 18px 2px rgba(var(--gold-rgb), 0.3);
  transform: scale(1);
}
.step__badge:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0.08);
  border-color: rgba(var(--gold-rgb), 0.7);
}
.step .eyebrow { color: rgba(245, 244, 242, 0.35); margin-bottom: 10px; }
.step__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 12px; }
.step__desc  { font-size: 15px; line-height: 1.6; color: var(--fg-55); max-width: 240px; margin: 0 auto; }

/* ============================================================
   09 — CONTATO
   ============================================================ */
.contact {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px var(--gutter) 220px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.contact .eyebrow--gold { margin-bottom: 28px; }
.contact__title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; margin: 0 0 32px; max-width: 560px; }
.contact__note { font-size: 13px; color: var(--fg-40); margin-top: 14px; }

.contact__portrait { position: relative; }
.contact__portrait-glow {
  position: absolute;
  inset: -14%;
  background: radial-gradient(circle at 55% 40%, oklch(0.78 0.09 80 / 0.14), transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.contact__portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.contact__portrait-frame .slot img { filter: contrast(1.06) saturate(1.16) brightness(0.97) sepia(0.08); }
.contact__portrait-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.15) 0%, transparent 30%, transparent 60%, rgba(10, 10, 11, 0.55) 100%);
}
.contact__caption { position: absolute; left: 32px; bottom: 28px; }
.contact__caption-rule { display: block; width: 24px; height: 1px; background: var(--gold); margin-bottom: 12px; }
.contact__caption-name { display: block; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.contact__caption-role {
  display: block;
  font-family: var(--mono); font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 5px; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   The source design is desktop-only; these breakpoints keep the
   same composition readable down to phone widths.
   ============================================================ */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }

  .why { grid-template-columns: 1fr; gap: 40px; padding-bottom: 140px; }
  .why__network { height: 460px; }
  .why__title, .why__kicker, .prose { max-width: none; }

  .contact { grid-template-columns: 1fr; gap: 48px; padding-bottom: 160px; }
  .contact__title { max-width: none; }
  .contact__portrait-frame { max-width: 460px; }

  .case--split { grid-template-columns: 1fr; gap: 32px; }
  .case__text--4, .case__text--7, .case__viz--5, .case__viz--8 { grid-column: auto; }
  .case__title, .case__body { max-width: none; }
  .chart[data-chart="3"] { aspect-ratio: 600 / 280; }

  .case__stack-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .case__stack-copy, .case__stack-figure { grid-column: auto; }
  .case__stack-figure { text-align: left; }

  .service { grid-template-columns: 1fr; gap: 32px; }
  .service__viz, .service__viz--wide { grid-column: auto; height: 180px; }
  .service--visual-last .service__copy { order: -1; }
  .service__copy--right, .service__copy--center { text-align: left; }
  .service__copy--right .service__desc, .service__copy--center .service__desc { margin: 0; max-width: none; }
  .service--sandwich .service__viz:last-child { display: none; }

  .hero__portrait { height: 480px; }
  .hero__side-label { display: none; }
  /* .gallery__hero keeps its own aspect-ratio at every width — see above. */
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  /* Custo de pintura em telas pequenas ------------------------------------
     A aurora eram três faixas grandes sob blur(70px) + mix-blend-mode:screen,
     animadas em loop, bem no topo — exatamente onde a rolagem começa. A grade
     e as linhas decorativas repintavam SVG continuamente. Aqui a aurora vira
     um gradiente pintado (o primeiro halo do fundo só começa a ~2.500px da
     dobra, então apagá-la deixaria o topo chapado) e as animações param. */
  .hero__aurora {
    inset: 0;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    background:
      radial-gradient(125% 62% at 14% 10%, oklch(0.78 0.14 80 / 0.14), transparent 70%),
      radial-gradient(105% 55% at 88% 32%, oklch(0.7 0.12 210 / 0.10), transparent 72%);
  }
  .hero__aurora-band { display: none; }
  .hero__grid { animation: none; }
  .hero__signals svg *,
  .stats__signals *,
  .gallery__signals * { animation: none !important; }

  .rule { height: 120px; }
  .hero__inner { padding-top: 88px; }
  .hero__portrait { height: 380px; }
  .hero__caption { left: 24px; bottom: 24px; }
  .hero__actions { gap: 18px; margin-bottom: 56px; }

  .stats { padding-bottom: 110px; }
  .stats__grid { grid-template-columns: 1fr; }

  .gallery { padding-bottom: 110px; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__cell { grid-column: auto; }

  .section-head { margin-bottom: 56px; }
  .case--split, .case--pair { padding: 48px 0; }
  .case--center, .case--stack { padding: 56px 0; }
  .case--pair { grid-template-columns: 1fr; gap: 48px; }
  .case__pair-item { padding: 0 24px; }
  .case__text--right { text-align: left; }
  .case__text--right .case__title, .case__text--right .case__body { margin-left: 0; }
  .bullets--right { align-items: flex-start; }
  .bullets--right li { flex-direction: row; }

  .marquee__item { width: 300px; }

  .services, .process { padding-bottom: 120px; }
  .service { padding: 48px 0; }

  /* O canvas é 280% da coluna, deslocado para a esquerda, para a esfera
     sangrar para fora no desktop. Aqui a coluna é a tela inteira, então esse
     excesso vira corte: medido em 430px de largura, a esfera ia de -234px a
     664px. Ajustado ao palco, ela cabe. */
  .why__network { height: 380px; }
  #network-canvas {
    /* sangra até as bordas da tela, ignorando a calha da seção, para a esfera
       usar toda a largura disponível */
    width: calc(100% + var(--gutter) * 2);
    height: 100%;
    left: calc(var(--gutter) * -1);
    top: 0;
    --sphere-fill: 0.58;
    --label-size: 14px;
  }

  .process__line { display: none; }
  .process__steps { grid-template-columns: 1fr; gap: 48px; }

  .contact { padding-bottom: 120px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cursor-glow { display: none; }
  .hero__signals, .hero__portrait { transform: none !important; }
  .marquee__track { animation: none !important; }
  [data-case] { opacity: 1; transform: none; }
  .service__copy, .service__viz { opacity: 1; transform: none; }
  .step { opacity: 1; transform: none; }
}