/* =========================================================
   Gabriel Moreira — Portfolio
   Premium, editorial, tech-forward
   ========================================================= */

:root {
  --yellow: #fbbc04;
  --yellow-soft: #fde58a;
  --yellow-glow: rgba(251, 188, 4, 0.35);

  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --ink-3: #2a2a2a;

  --paper: #ffffff;
  --paper-2: #fafaf7;
  --paper-3: #f3f2ec;
  --line: #e8e7e1;
  --muted: #6b6b66;
  --muted-2: #9a9a93;

  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.06), 0 24px 60px -20px rgba(10, 10, 10, 0.18);
  --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.10), 0 60px 120px -40px rgba(10, 10, 10, 0.30);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

/* =========================================================
   Layout primitives
   ========================================================= */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink);
  display: inline-block;
}

.h-display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(48px, 9vw, 140px);
  margin: 0;
}
.h-section {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(36px, 5.4vw, 76px);
  margin: 0;
}
.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  --bg: var(--ink);
  --fg: var(--paper);
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }

.btn--yellow { --bg: var(--yellow); --fg: var(--ink); --bd: var(--yellow); }
.btn--yellow:hover { --bg: #ffc91f; }

.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }

.btn--light { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }

.btn .arrow {
  width: 16px; height: 16px;
  transition: transform 0.35s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

.btn--sm { padding: 10px 16px; font-size: 13px; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: backdrop-filter 0.3s, background 0.3s, box-shadow 0.3s;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.brand img {
  height: 40px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--yellow);
  transition: width 0.35s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--paper-3);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--line);
  position: relative;
}
.lang-toggle button {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-radius: 999px;
  z-index: 1;
  transition: color 0.25s;
}
.lang-toggle button.active { color: var(--ink); }
.lang-toggle .pill {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s var(--ease-out);
}
.lang-toggle[data-lang="en"] .pill { transform: translateX(100%); }

.menu-toggle { display: none; }

@media (max-width: 880px) {
  .nav { display: none; }
  .header-actions .btn--cta { display: none; }
  .brand img { height: 32px; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-headline .ola {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.hero-headline h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(56px, 8.4vw, 132px);
  margin: 0;
}
.hero-headline h1 .nome {
  position: relative;
}
.hero-headline h1 .dot {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: 0.55em;
  margin-left: 0.08em;
  box-shadow: 0 0 0 0 var(--yellow-glow);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--yellow-glow); }
  50% { box-shadow: 0 0 0 18px rgba(251, 188, 4, 0); }
}

.hero-sub {
  margin-top: 22px;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 36ch;
  font-weight: 500;
}
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  max-width: 50ch;
}
.hero-note .c {
  display: inline-block;
  min-width: 1.1ch;
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-feature-settings: "tnum";
  vertical-align: -0.06em;
}
.hero-note .c::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  background: var(--yellow);
}
.hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-aside {
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-avatar {
  position: relative;
  z-index: 2;
  width: 360px;
  max-width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.14));
  animation: float 6s var(--ease-in-out) infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}
.hero-blob {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--yellow) 0%, rgba(251, 188, 4, 0.45) 35%, transparent 70%);
  filter: blur(40px);
  opacity: 0.5;
  z-index: 1;
  animation: float 9s var(--ease-in-out) infinite reverse;
}

/* Expertise pill ribbon under hero */
.hero-pills {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}
.pill:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.pill .dot-y {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scroll-hint::before {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  display: inline-block;
}

@media (max-width: 880px) {
  .hero { padding: 140px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-aside { order: -1; height: 280px; }
  .hero-avatar { width: 240px; }
  .hero-blob { width: 320px; height: 320px; }
  .scroll-hint { display: none; }
}

/* =========================================================
   Companies marquee
   ========================================================= */
.companies {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0;
  overflow: hidden;
}
.companies-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
}
.companies-head .eyebrow { color: var(--muted-2); }
.companies-head .eyebrow::before { background: var(--paper); }
.companies-head h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 32ch;
}
.marquee {
  position: relative;
  overflow: hidden;
  --gap: 80px;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: scroll-x 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img {
  height: 36px;
  width: auto;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.marquee img:hover { opacity: 1; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* =========================================================
   Sections
   ========================================================= */
section {
  position: relative;
}
.section-pad {
  padding: clamp(80px, 10vw, 140px) 0;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 72px;
}
.section-head .right {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
  justify-self: end;
}
blockquote.right {
  margin: 0;
  padding: 14px 0 14px 22px;
  border-left: 3px solid var(--yellow);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  position: relative;
}
blockquote.right::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--ink);
  transition: height 0.7s var(--ease-out);
}
.section-head.in blockquote.right::before,
.reveal.in blockquote.right::before {
  height: 100%;
}
/* Results section: keep readable on yellow band */
.results blockquote.right {
  color: var(--ink);
  border-left-color: var(--ink);
}
.results blockquote.right::before { background: var(--paper); }
/* Testimonials section: keep readable on dark band */
.testimonials blockquote.right {
  color: rgba(255, 255, 255, 0.78);
  border-left-color: var(--yellow);
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .section-head .right { justify-self: start; }
}

/* =========================================================
   About
   ========================================================= */
.about {
  background: var(--paper-2);
}
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.about-photo {
  position: sticky;
  top: 100px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.about-photo:hover img { transform: scale(1.04); }
.about-photo .corner {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.about-body p {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.about-body p strong { color: var(--ink); }
.about-body h3 {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.about-body .about-block { margin-bottom: 30px; }
.about-body .about-block:last-child { margin-bottom: 0; }

blockquote.about-pull {
  margin: 0 0 32px;
  padding: 18px 0 18px 24px;
  border-left: 3px solid var(--yellow);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 50ch;
}

.facts-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fact {
  background: var(--paper);
  padding: 24px;
}
.fact .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.fact .value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-photo { position: relative; top: 0; max-width: 380px; }
  .facts-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Expertise cards
   ========================================================= */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .expertise-grid { grid-template-columns: 1fr; } }

.xcard {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.xcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(251, 188, 4, 0.18), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.xcard:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}
.xcard:hover::before { opacity: 1; }
.xcard .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.xcard .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--paper-3);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  transition: background 0.3s;
}
.xcard:hover .icon { background: var(--yellow); }
.xcard .icon svg { width: 20px; height: 20px; stroke: var(--ink); }
.xcard h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.xcard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* =========================================================
   Results / impact band
   ========================================================= */
.results {
  background: var(--yellow);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.results::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 80%; height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 60%);
  pointer-events: none;
}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px);position:relative}
.stat{padding:28px 0 0;border-top:1px solid rgba(10,10,10,.22);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,26px);min-width:0}
.stat .key{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.6)}
@property --v{syntax:"<number>";inherits:true;initial-value:0}
@property --o{syntax:"<number>";inherits:true;initial-value:0}
.dial{--v:0;--o:0;transition:--v 1.5s cubic-bezier(.22,1,.36,1),--o 1.5s cubic-bezier(.22,1,.36,1) .18s;position:relative;width:min(100%,clamp(160px,15vw,208px));aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.dial-track,.dial-arc,.dial-over{position:absolute;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent 70%,#000 70.5%);mask:radial-gradient(closest-side,transparent 70%,#000 70.5%)}
.dial-track{inset:0;background:rgba(10,10,10,.13)}
.dial-arc{inset:0;background:conic-gradient(var(--ink) calc(var(--v)*1%),transparent 0)}
.dial-over{inset:-16px;-webkit-mask:radial-gradient(closest-side,transparent 91%,#000 91.5%);mask:radial-gradient(closest-side,transparent 91%,#000 91.5%);background:conic-gradient(rgba(10,10,10,.34) calc(var(--o)*1%),transparent 0)}
.stat .big{position:relative;z-index:1;font-size:clamp(30px,3.2vw,44px);font-weight:800;letter-spacing:-0.04em;line-height:1;font-feature-settings:"tnum";white-space:nowrap}
.stat .label{font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:24ch;text-align:center;text-wrap:pretty;margin:0 0 auto}
.results-foot{margin-top:clamp(40px,4vw,64px);display:flex;justify-content:space-between;align-items:end;gap:24px;position:relative;flex-wrap:wrap}
.results-foot p{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);max-width:50ch}
@media (max-width:1100px){.results-grid{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px)}}
@media (max-width:560px){.results-grid{grid-template-columns:1fr}.dial{width:min(70%,190px)}}

/* =========================================================
   Portfolio cases
   ========================================================= */
.cases {
  background: var(--paper);
}
.case {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.case:nth-child(even) { direction: rtl; }
.case:nth-child(even) > * { direction: ltr; }

.case-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  transition: transform 0.5s var(--ease-out);
}
.case-art:hover { transform: translateY(-6px); }
.case-art > img.case-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
  z-index: 0;
}
.case-art:hover > img.case-cover { transform: scale(1.04); }
.case-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0) 35%, rgba(10,10,10,0) 60%, rgba(10,10,10,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.case-art .badge { z-index: 2; }

.case-art .badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(10px);
  color: var(--paper);
  font-weight: 600;
}
.case-body .case-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.case-body .case-meta span:first-child {
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: 999px;
}
.case-body h3 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.case-body p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.case-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--paper-3);
  color: var(--ink-2);
}
.case-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .case:nth-child(even) { direction: ltr; }
}

/* Case visuals (SVG placeholders that are intentionally illustrative) */
.case-otto {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: white;
}
.case-gaya {
  background: linear-gradient(135deg, #ff7a59 0%, #ff4d2e 100%);
}
.case-lumen {
  background: linear-gradient(135deg, var(--yellow) 0%, #ffd84d 100%);
}
.case-vero { background: linear-gradient(135deg, #0f1b33 0%, #24407a 100%); color: white; }
.case-kyc { background: linear-gradient(135deg, #10151f 0%, #1f2a3d 100%); color: white; }
.case-soon { background: linear-gradient(135deg, #232323 0%, #2e2e2e 100%); color: white; }
.case.case--soon, .case--soon.reveal.in { opacity: 0.45; pointer-events: none; }

.case-illu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* OTTO: dashboard-style readout */
.illu-otto {
  width: 88%;
  height: 76%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  backdrop-filter: blur(10px);
}
.illu-otto .ttop {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}
.illu-otto .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
  animation: blink 1.4s infinite;
}
@keyframes blink {
  50% { opacity: 0.3; }
}
.illu-otto .pane {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.illu-otto .pane .big {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: -0.02em;
}
.illu-otto .wave {
  height: 36px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(251,188,4,0.3) 6px 7px);
  position: relative;
}
.illu-otto .wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity: 0.5;
  animation: sweep 2.4s ease-in-out infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* GAYA: design system tiles */
.illu-gaya {
  width: 88%;
  height: 76%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}
.illu-gaya .tile {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}
.illu-gaya .tile.b { background: rgba(255, 255, 255, 0.92); }
.illu-gaya .tile.c { background: rgba(255, 255, 255, 0.35); }
.illu-gaya .tile.d { background: rgba(10, 10, 10, 0.12); }
.illu-gaya .tile.span2 { grid-column: span 2; }
.illu-gaya .tile.span2r { grid-row: span 2; }

/* LUMEN: code-grid mark */
.illu-lumen {
  width: 88%;
  height: 76%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
}
.illu-lumen .b {
  background: rgba(10, 10, 10, 0.85);
  border-radius: 4px;
}
.illu-lumen .b.w { background: rgba(255, 255, 255, 0.7); }
.illu-lumen .b.t { background: rgba(10, 10, 10, 0.15); }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials {
  background: var(--ink);
  color: var(--paper);
}
.testimonials .eyebrow { color: var(--muted-2); }
.testimonials .eyebrow::before { background: var(--paper); }
.testimonials h2 { color: var(--paper); }
.testimonials .right { color: var(--muted-2); }

.t-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,26vw,340px);gap:clamp(20px,2.4vw,34px);align-items:stretch}
.t-stage{position:relative;background:var(--ink-2);border:1px solid #2c2c2c;border-radius:var(--r-md);padding:clamp(28px,3.4vw,52px);overflow:hidden;display:grid;min-height:clamp(420px,46vw,520px)}
.t-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 92% 4%,rgba(251,188,4,.09),transparent 58%);pointer-events:none}
.t-stage::after{content:"\201C";position:absolute;right:clamp(18px,2.4vw,34px);top:-6px;font-size:clamp(120px,14vw,190px);line-height:1;color:rgba(251,188,4,.13);font-weight:800;pointer-events:none}
.tpanel{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility .45s}
.tpanel.is-active{opacity:1;visibility:visible;transform:none}
.tpanel-quote{position:relative;margin:0;flex:1;max-width:56ch;font-size:clamp(17px,1.55vw,22px);line-height:1.6;letter-spacing:-0.012em;color:rgba(255,255,255,.92);text-wrap:pretty}
.tpanel[data-len="long"] .tpanel-quote{font-size:clamp(15px,1.15vw,17px);line-height:1.68;max-width:64ch}
.tpanel-who{display:flex;align-items:center;gap:14px;padding-top:clamp(18px,2vw,24px);border-top:1px solid #2c2c2c}
.tpanel-who .avatar{width:52px;height:52px;flex-shrink:0}
.tpanel-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.tpanel-who .name{font-size:16px;font-weight:600;color:var(--paper);letter-spacing:-0.01em}
.tpanel-who .role{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted-2)}
.avatar{border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2a2a2a,#3a3a3a);display:block}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lang-flag{margin-left:auto;flex-shrink:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;padding:4px 8px;border-radius:999px;background:rgba(251,188,4,.08);color:var(--yellow);border:1px solid rgba(251,188,4,.2)}
.t-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.t-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}
.tperson{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s}
.tperson:hover{background:rgba(255,255,255,.035);border-color:#2c2c2c}
.tperson.is-active{background:rgba(251,188,4,.06);border-color:rgba(251,188,4,.28)}
.tperson .num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);flex-shrink:0}
.tperson.is-active .num{color:var(--yellow)}
.tperson .avatar{width:34px;height:34px;flex-shrink:0;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.tperson.is-active .avatar,.tperson:hover .avatar{filter:none;opacity:1}
.tperson-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.tperson .name{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tperson .role{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-nav{display:flex;align-items:center;gap:10px;padding-top:4px}
.t-nav button{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid #333;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.t-nav button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.t-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted-2)}
.t-count .t-cur{color:var(--paper)}
@media (max-width:900px){
.t-layout{grid-template-columns:1fr}
.t-stage{min-height:0;order:2}
.t-side{order:1}
.t-people{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:8px;padding-bottom:4px}
.t-people::-webkit-scrollbar{display:none}
.t-people li{flex:0 0 auto}
.tperson{border-color:#2c2c2c}
.tperson .num,.tperson .role{display:none}
.tperson .name{max-width:16ch}
}

/* =========================================================
   CV / Resume
   ========================================================= */
.cv {
  background: var(--paper-2);
}
.cv-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.cv-card h3 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.cv-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.55; font-size: 16px; max-width: 44ch; }

.cv-doc {
  position: relative;
  aspect-ratio: 8.5 / 11;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 22px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--ink-3);
  line-height: 1.4;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform 0.4s var(--ease-out);
}
.cv-doc:hover { transform: rotate(0deg) scale(1.02); }
.cv-doc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--yellow);
}
.cv-doc .row {
  height: 4px;
  background: var(--paper-3);
  border-radius: 2px;
  margin-bottom: 4px;
}
.cv-doc .row.w70 { width: 70%; }
.cv-doc .row.w50 { width: 50%; }
.cv-doc .row.w90 { width: 90%; }
.cv-doc .row.title { background: var(--ink); height: 8px; width: 60%; margin: 12px 0 8px; }

@media (max-width: 880px) {
  .cv-card { grid-template-columns: 1fr; gap: 32px; }
  .cv-doc { max-width: 240px; margin: 0 auto; }
}

/* =========================================================
   Contact — minimal CTA layout
   ========================================================= */
.contact {
  background: var(--paper);
}
.contact-cta {
  margin: 0 0 32px;
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 14ch;
}
.contact-cta .y {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  position: relative;
}
.contact-cta .y::after {
  content: "";
  position: absolute;
  left: 0; bottom: 8%;
  height: 22%;
  width: 100%;
  background: var(--yellow);
  z-index: -1;
}

.contact-actions {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Primary: WhatsApp */
.contact-primary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px 22px 24px;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(18px, 1.8vw, 22px);
  align-self: flex-start;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 8px 24px -8px var(--yellow-glow);
  position: relative;
  overflow: hidden;
}
.contact-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) 50%, rgba(255, 255, 255, 0.5), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}
.contact-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -10px var(--yellow-glow);
}
.contact-primary:hover::before { opacity: 1; }
.contact-primary .ico {
  width: 48px; height: 48px;
  background: var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  position: relative;
  z-index: 1;
}
.contact-primary .ico svg { width: 22px; height: 22px; }
.contact-primary .txt {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.contact-primary .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(10, 10, 10, 0.65);
  line-height: 1;
  margin-bottom: 4px;
}
.contact-primary .arrow {
  margin-left: 8px;
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ease-out);
}
.contact-primary:hover .arrow { transform: translate(4px, -4px); }

/* Secondary: email full row */
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
  transition: border-color 0.3s;
}
.contact-email:hover { border-bottom-color: var(--ink); }
.contact-email .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-email .val {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.contact-email .ico-sm {
  width: 18px; height: 18px;
  opacity: 0.5;
  transition: opacity 0.25s, transform 0.3s;
}
.contact-email:hover .ico-sm {
  opacity: 1;
  transform: translateX(4px);
}

/* Social: icon row */
.contact-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.contact-social .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 12px;
}
.icon-btn {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease-out);
  position: relative;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}
.icon-btn::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.icon-btn:hover::after { opacity: 1; }

@media (max-width: 640px) {
  .contact-primary {
    padding: 18px 22px 18px 18px;
    gap: 14px;
  }
  .contact-primary .ico { width: 40px; height: 40px; }
  .contact-primary .ico svg { width: 18px; height: 18px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 0 32px;
}
.foot-mark {
  font-size: clamp(56px, 14vw, 220px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  margin: 0 0 60px;
}
.foot-mark .dot {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: 0.18em;
  margin-left: 0.04em;
}
.foot-row {
  border-top: 1px solid #2a2a2a;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
}
.foot-row a:hover { color: var(--yellow); }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.42s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero-avatar, .hero-blob, .marquee-track, .illu-otto .wave::after, .hero-headline h1 .dot {
    animation: none !important;
  }
}

/* =========================================================
   Section motion — premium scroll choreography
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

/* headline mask-up */
.section-head h2,.site-footer .foot-mark{clip-path:inset(0 0 108% 0);transform:translateY(.14em);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1) .08s,transform 1.05s cubic-bezier(.16,1,.3,1) .08s}
.section-head.in h2,.site-footer.in .foot-mark{clip-path:inset(-25% -12% -25% -12%);transform:none}

/* eyebrow rule draws */
.eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1) .1s}
.reveal.in .eyebrow::before,.in>.eyebrow::before,.eyebrow.in::before{transform:none}

/* image settles in */
[data-anim="zoom"]{overflow:hidden}
[data-anim="zoom"] img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.6s ease}
[data-anim="zoom"].in img{transform:none}

/* case cards: art parallax + copy lift */
.case-cover,.case-art>img{will-change:transform}
.case-body>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.case.in .case-body>*{opacity:1;transform:none}
.case.in .case-body>*:nth-child(1){transition-delay:.06s}
.case.in .case-body>*:nth-child(2){transition-delay:.14s}
.case.in .case-body>*:nth-child(3){transition-delay:.22s}
.case.in .case-body>*:nth-child(4){transition-delay:.3s}
.case.in .case-body>*:nth-child(5){transition-delay:.38s}
.case-art .badge{opacity:0;transform:translateX(-12px);transition:opacity .7s var(--ease-out) .2s,transform .7s var(--ease-out) .2s}
.case.in .case-art .badge{opacity:1;transform:none}

/* expertise: icon pops after the card */
.xcard .icon{transform:scale(.72);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.reveal-stagger.in .xcard .icon{transform:none;opacity:1}
.reveal-stagger.in>*:nth-child(1) .icon{transition-delay:.16s}
.reveal-stagger.in>*:nth-child(2) .icon{transition-delay:.22s}
.reveal-stagger.in>*:nth-child(3) .icon{transition-delay:.28s}
.reveal-stagger.in>*:nth-child(4) .icon{transition-delay:.34s}
.reveal-stagger.in>*:nth-child(5) .icon{transition-delay:.4s}
.reveal-stagger.in>*:nth-child(6) .icon{transition-delay:.46s}
.reveal-stagger.in>*:nth-child(7) .icon{transition-delay:.52s}
.reveal-stagger.in>*:nth-child(8) .icon{transition-delay:.58s}
.reveal-stagger.in>*:nth-child(9) .icon{transition-delay:.64s}

/* impact: rule above each stat draws in */
.stat{position:relative}
.stat::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.in .stat::before{transform:scaleX(1)}
.reveal-stagger.in>*:nth-child(2) .stat::before,.reveal-stagger.in>*:nth-child(2)::before{transition-delay:.1s}
.reveal-stagger.in>*:nth-child(3)::before{transition-delay:.2s}
.reveal-stagger.in>*:nth-child(4)::before{transition-delay:.3s}

/* testimonials: people list steps in */
.t-people li{opacity:0;transform:translateX(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.t-layout.in .t-people li{opacity:1;transform:none}
.t-layout.in .t-people li:nth-child(1){transition-delay:.18s}
.t-layout.in .t-people li:nth-child(2){transition-delay:.26s}
.t-layout.in .t-people li:nth-child(3){transition-delay:.34s}
.t-layout.in .t-people li:nth-child(4){transition-delay:.42s}
.t-layout.in .t-people li:nth-child(5){transition-delay:.5s}
.t-layout.in .t-people li:nth-child(6){transition-delay:.58s}
.t-stage{transition:box-shadow 1.2s ease}
.t-layout.in .t-stage{box-shadow:0 40px 80px -60px rgba(0,0,0,.9)}

/* contact: yellow slab sweeps under the headline */
.contact-cta::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .25s}
.contact-cta.in::before{transform:scaleX(1)}

/* marquee eases to a stop on hover */
.marquee:hover .marquee-track{animation-play-state:paused}

/* scroll progress in the header */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--yellow);z-index:200;pointer-events:none}

@media (prefers-reduced-motion: reduce){
.reveal,.reveal-stagger>*,.case-body>*,.t-people li,.case-art .badge{opacity:1!important;transform:none!important;filter:none!important}
[data-anim="mask"]{clip-path:none!important;opacity:1!important;transform:none!important}
[data-anim="zoom"] img,.xcard .icon{transform:none!important;opacity:1!important}
.stat::before,.contact-cta::before,.eyebrow::before{transform:none!important}
.scroll-progress{display:none}
}

/* =========================================================
   LIQUID GLASS
   Camada visual: superfícies flutuantes, translúcidas,
   com brilho especular nas bordas (estilo Apple Liquid Glass).
   Só afeta aparência — nenhuma mudança de conteúdo/estrutura.
   ========================================================= */

:root {
  /* Vidro claro */
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 48%, rgba(255,255,255,0.58) 100%);
  --glass-bg-strong: linear-gradient(155deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 48%, rgba(255,255,255,0.74) 100%);
  --glass-blur: saturate(180%) blur(22px);
  --glass-blur-lg: saturate(190%) blur(34px);
  --glass-edge: linear-gradient(150deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.30) 26%, rgba(255,255,255,0.06) 52%, rgba(255,255,255,0.45) 78%, rgba(255,255,255,0.90) 100%);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.30);
  --glass-lift: 0 2px 6px rgba(10,10,10,0.04), 0 18px 40px -20px rgba(10,10,10,0.22);
  --glass-lift-lg: 0 4px 12px rgba(10,10,10,0.05), 0 40px 80px -36px rgba(10,10,10,0.30);

  /* Vidro escuro (seções ink) */
  --glass-bg-dark: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0.07) 100%);
  --glass-edge-dark: linear-gradient(150deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.16) 80%, rgba(255,255,255,0.34) 100%);
  --glass-inner-dark: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.05);
}

/* Aro especular reutilizável -------------------------------------------- */
.site-header .header-inner::after,
.hero-pills .pill::after,
.xcard::after,
.fact::after,
.cv-card::after,
.case-tag::after,
.icon-btn::before,
.scroll-hint::after,
.lang-toggle::after,
.case-art .badge::after,
.t-stage::after,
.t-nav button::after,
.marquee-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.t-stage::after,
.t-nav button::after,
.marquee-rail::after,
.case-art .badge::after { background: var(--glass-edge-dark); }

/* =========================================================
   Ambiente — campos de cor suaves para o vidro ter o que refratar
   ========================================================= */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(48vw 48vw at 82% 1%,   rgba(251,188,4,0.30),  rgba(251,188,4,0) 62%),
    radial-gradient(44vw 44vw at 0% 16%,   rgba(126,146,255,0.20), rgba(126,146,255,0) 64%),
    radial-gradient(56vw 46vw at 100% 46%, rgba(255,138,96,0.18),  rgba(255,138,96,0) 64%),
    radial-gradient(48vw 48vw at 6% 72%,   rgba(160,120,255,0.17), rgba(160,120,255,0) 64%),
    radial-gradient(52vw 42vw at 68% 98%,  rgba(251,188,4,0.24),   rgba(251,188,4,0) 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Seções claras ficam translúcidas para o ambiente aparecer */
.cases,
.contact { background: transparent; }
.cv { background: linear-gradient(180deg, rgba(250,250,247,0.60), rgba(250,250,247,0.25)); }
.about { background: transparent; }

/* =========================================================
   Header flutuante — cápsula de vidro
   ========================================================= */
.site-header {
  padding: clamp(10px, 1.4vw, 18px) var(--gutter);
  background: none;
  box-shadow: none;
  transition: padding 0.45s var(--ease-out);
}
.site-header.scrolled {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding-top: clamp(8px, 1vw, 12px);
  padding-bottom: clamp(8px, 1vw, 12px);
}

.site-header .header-inner {
  position: relative;
  max-width: calc(var(--max) - var(--gutter) * 2);
  margin: 0 auto;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
          backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-inner), var(--glass-lift);
  transition:
    background 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    max-width 0.5s var(--ease-out),
    padding 0.5s var(--ease-out);
}
/* Brilho líquido que atravessa a cápsula */
.site-header .header-inner::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,0.55) 42%, rgba(255,255,255,0.10) 56%, transparent 74%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.site-header .header-inner > * { position: relative; z-index: 2; }

.site-header.scrolled .header-inner {
  max-width: calc(var(--max) - var(--gutter) * 2 - 96px);
  background: var(--glass-bg-strong);
  box-shadow:
    var(--glass-inner),
    0 2px 8px rgba(10,10,10,0.05),
    0 24px 48px -22px rgba(10,10,10,0.28);
}

/* Navegação dentro do vidro */
.nav { gap: 4px; }
.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  isolation: isolate;
}
.nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px -6px rgba(10,10,10,0.30);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
  z-index: -1;
}
.nav a:hover::before { opacity: 1; transform: scale(1); }
.nav a::after {
  left: 50%;
  bottom: 3px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease-out);
}
.nav a:hover::after { width: 18px; transform: translateX(-50%) scaleX(1); }

/* Toggle de idioma em vidro */
.lang-toggle {
  position: relative;
  background: linear-gradient(155deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18));
  border-color: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 2px rgba(10,10,10,0.05);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.lang-toggle .pill {
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(255,255,255,0.78));
  box-shadow: 0 1px 2px rgba(10,10,10,0.14), inset 0 1px 0 rgba(255,255,255,1);
}
.lang-toggle button { position: relative; z-index: 2; }

/* CTA do header com profundidade de vidro */
.site-header .btn--cta {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 6px 18px -8px var(--yellow-glow);
}

@media (max-width: 880px) {
  .site-header .header-inner { padding: 8px 10px 8px 16px; }
  .site-header.scrolled .header-inner { max-width: calc(var(--max) - var(--gutter) * 2); }
}

/* Barra de progresso amarela do topo: removida */
.scroll-progress { display: none !important; }

/* =========================================================
   Hero — pills e dica de rolagem em vidro
   ========================================================= */
.hero-pills .pill {
  position: relative;
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), 0 8px 20px -14px rgba(10,10,10,0.35);
}
.hero-pills .pill:hover {
  border-color: rgba(255,255,255,0.9);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-inner), 0 14px 28px -16px rgba(10,10,10,0.40);
}

.scroll-hint {
  position: absolute;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), var(--glass-lift);
}
.scroll-hint::before { height: 26px; }

/* Blob do hero mais líquido */
.hero-blob {
  background: radial-gradient(circle at 46% 40%, rgba(255,236,160,0.95) 0%, var(--yellow) 30%, rgba(251,188,4,0.50) 55%, transparent 74%);
  filter: blur(44px);
  opacity: 0.62;
}

/* =========================================================
   Cards de conteúdo flutuando em vidro
   ========================================================= */
.xcard {
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), var(--glass-lift);
  border-radius: var(--r-lg);
}
.xcard:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.95);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-inner), var(--glass-lift-lg);
}
.xcard .icon {
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 14px -8px rgba(10,10,10,0.35);
  border-radius: 14px;
}
.xcard:hover .icon {
  background: linear-gradient(160deg, #ffd75c, var(--yellow));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 20px -10px var(--yellow-glow);
}

/* Fatos (sobre) */
.facts-grid {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  border-radius: var(--r-lg);
  gap: 10px;
  padding: 10px;
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  background-image: var(--glass-bg);
  box-shadow: var(--glass-inner), var(--glass-lift);
  overflow: visible;
}
.fact {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.70), rgba(255,255,255,0.30));
  border-radius: calc(var(--r-md) - 2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.fact:hover {
  transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55));
}

/* Foto do sobre com moldura de vidro */
.about-photo img { border-radius: var(--r-lg); }

/* =========================================================
   Cases — arte flutuante e tags de vidro
   ========================================================= */
.case { border-top-color: rgba(10,10,10,0.07); }
.case-art {
  box-shadow: var(--glass-lift-lg);
  border: 1px solid rgba(255,255,255,0.5);
}
.case-art:hover { transform: translateY(-8px); }
.case-art .badge {
  position: absolute;
  background: linear-gradient(155deg, rgba(20,20,20,0.62), rgba(20,20,20,0.42));
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--glass-inner-dark), 0 8px 20px -12px rgba(0,0,0,0.6);
}
.case-tag {
  position: relative;
  background: var(--glass-bg);
  border-radius: 999px;
  padding: 6px 12px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 10px -8px rgba(10,10,10,0.4);
}

/* =========================================================
   Faixa de empresas — trilho de vidro escuro
   ========================================================= */
.companies { position: relative; }
.marquee {
  position: relative;
  padding: 22px 0;
  margin-inline: var(--gutter);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  border-radius: 999px;
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
          backdrop-filter: saturate(150%) blur(16px);
  box-shadow: var(--glass-inner-dark), 0 20px 50px -30px rgba(0,0,0,0.9);
}
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge-dark);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* =========================================================
   Depoimentos — palco e controles em vidro escuro
   ========================================================= */
.t-stage {
  position: relative;
  background: var(--glass-bg-dark);
  border-color: rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
          backdrop-filter: saturate(150%) blur(20px);
  box-shadow: var(--glass-inner-dark), 0 40px 80px -50px rgba(0,0,0,0.9);
}
.tperson {
  position: relative;
  border-radius: 14px;
  transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
}
.tperson:hover {
  background: var(--glass-bg-dark);
  border-color: rgba(255,255,255,0.16);
  box-shadow: var(--glass-inner-dark);
  transform: translateX(2px);
}
.tperson.is-active,
.tperson.is-active:hover {
  background: linear-gradient(155deg, rgba(251,188,4,0.16) 0%, rgba(251,188,4,0.05) 55%, rgba(251,188,4,0.10) 100%);
  border-color: rgba(251,188,4,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 20px -14px rgba(251,188,4,0.6);
  transform: translateX(2px);
}
.t-nav button {
  position: relative;
  background: var(--glass-bg-dark);
  border-color: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: var(--glass-inner-dark);
}

/* =========================================================
   CV — cartão flutuante
   ========================================================= */
.cv-card {
  position: relative;
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: var(--glass-blur-lg);
          backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-inner), var(--glass-lift-lg);
  border-radius: var(--r-xl);
}
.cv-card > * { position: relative; z-index: 2; }
.cv-doc {
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(255,255,255,0.80));
  border-color: rgba(255,255,255,0.8);
  box-shadow: var(--glass-inner), var(--glass-lift-lg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* =========================================================
   Contato — botões de vidro
   ========================================================= */
.contact-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.25),
    0 14px 34px -14px var(--yellow-glow);
}
.contact-primary .ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.icon-btn {
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner), 0 10px 22px -14px rgba(10,10,10,0.45);
}
.icon-btn svg { position: relative; z-index: 4; }
.icon-btn:hover {
  background: linear-gradient(160deg, var(--ink-3), var(--ink));
  border-color: rgba(255,255,255,0.25);
  box-shadow: var(--glass-inner-dark), 0 16px 30px -14px rgba(10,10,10,0.6);
}
.icon-btn:hover::before { background: var(--glass-edge-dark); }
.icon-btn::after { z-index: 4; }

/* =========================================================
   Faixas de largura total viram lajes flutuantes
   ========================================================= */
.companies,
.results,
.testimonials {
  border-radius: clamp(24px, 3vw, 44px);
  margin-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 70px -46px rgba(10,10,10,0.55);
}
.results { box-shadow: 0 30px 70px -44px rgba(251,188,4,0.75); }
/* brilho líquido da faixa amarela, sem borda dura */
.results::before {
  top: -40%; right: -30%;
  width: 130%; height: 190%;
  background:
    radial-gradient(closest-side at 62% 42%, rgba(255,255,255,0.55), rgba(255,255,255,0) 72%),
    radial-gradient(closest-side at 88% 78%, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
  filter: blur(8px);
}

/* Rodapé encosta no fim da página, mas com topo arredondado */
.site-footer {
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0;
  margin-inline: var(--gutter);
}

/* =========================================================
   Fallback: sem suporte a backdrop-filter, volta ao sólido
   ========================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .header-inner,
  .hero-pills .pill,
  .xcard,
  .cv-card,
  .facts-grid,
  .icon-btn,
  .scroll-hint,
  .case-tag { background: rgba(255,255,255,0.94); }
  .marquee,
  .t-stage { background: rgba(26,26,26,0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .header-inner,
  .site-header.scrolled .header-inner { transition: none; }
}

/* =========================================================
   MOTION
   Tese: a luz chega através do vidro.
   Um momento focal na entrada; o resto é feedback e estado.
   ========================================================= */

:root {
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --t-feedback: 140ms;
  --t-state: 240ms;
  --t-view: 420ms;
}

/* ---------------------------------------------------------
   1. Momento focal — a entrada, uma vez só
   --------------------------------------------------------- */

/* A cápsula de vidro desce e assenta */
@keyframes gm-capsule-arrive {
  from { transform: translateY(-22px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.site-header .header-inner {
  animation: gm-capsule-arrive 620ms var(--ease-arrive) both;
}

/* O realce especular atravessa o vidro uma vez e para em repouso */
@keyframes gm-specular-sweep {
  0%   { transform: translateX(-62%); opacity: 0; }
  22%  { opacity: 0.9; }
  100% { transform: translateX(62%); opacity: 0.55; }
}
.site-header .header-inner::before {
  animation: gm-specular-sweep 1150ms var(--ease-arrive) 380ms both;
}

/* A luz do hero floresce */
@keyframes gm-light-bloom {
  from { transform: scale(0.72); opacity: 0; }
  to   { transform: none; opacity: 0.62; }
}
.hero-blob {
  animation:
    gm-light-bloom 1000ms var(--ease-arrive) 160ms both,
    float 9s var(--ease-in-out) 1160ms infinite reverse;
}

/* O avatar sobe para dentro da luz */
@keyframes gm-avatar-arrive {
  from { transform: translateY(26px) scale(0.965); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.hero-avatar {
  animation:
    gm-avatar-arrive 760ms var(--ease-arrive) 240ms both,
    float 6s var(--ease-in-out) 1000ms infinite;
}

/* ---------------------------------------------------------
   2. Chegada de conteúdo — quieta fora do momento focal
   Listas reais mantêm stagger; seções apenas assentam.
   --------------------------------------------------------- */
.reveal {
  transform: translateY(10px);
  transition:
    opacity 520ms var(--ease-arrive),
    transform 520ms var(--ease-arrive);
}
.section-head.reveal { transform: translateY(8px); }

/* Cases e depoimentos são listas: o stagger explica a sequência */
.reveal-stagger > * {
  transform: translateY(14px);
  transition:
    opacity 560ms var(--ease-arrive),
    transform 560ms var(--ease-arrive);
}

/* ---------------------------------------------------------
   3. Estado — o menu diz onde você está
   --------------------------------------------------------- */
.nav a::before { transition: opacity var(--t-state) var(--ease-arrive), transform var(--t-state) var(--ease-arrive); }
.nav a.is-current::before { opacity: 1; transform: scale(1); }
.nav a.is-current { color: var(--ink); }
.nav a.is-current::after { width: 18px; transform: translateX(-50%) scaleX(1); }

/* ---------------------------------------------------------
   4. Continuidade — troca de idioma como um movimento só
   --------------------------------------------------------- */
[data-i18n] { transition: opacity 170ms ease; }
.lang-swapping [data-i18n] { opacity: 0; }

/* ---------------------------------------------------------
   5. Continuidade — o depoimento entra pelo lado do botão
   --------------------------------------------------------- */
.tpanel {
  transform: translateX(calc(var(--dir, 1) * 26px));
  transition:
    opacity var(--t-view) var(--ease-arrive),
    transform var(--t-view) var(--ease-arrive),
    visibility var(--t-view);
}
.tpanel.is-active { transform: none; }

/* ---------------------------------------------------------
   6. Feedback — saída mais rápida que entrada
   --------------------------------------------------------- */
.btn, .icon-btn, .pill, .xcard, .case-art, .tperson, .t-nav button, .contact-primary {
  transition-timing-function: var(--ease-arrive);
}
.btn:active, .contact-primary:active, .icon-btn:active, .t-nav button:active {
  transform: translateY(0) scale(0.978);
  transition-duration: var(--t-feedback);
}

/* ---------------------------------------------------------
   7. Superfícies do navegador — pintadas pela paleta
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-header .header-inner :focus-visible,
.companies :focus-visible,
.testimonials :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}
.btn:focus-visible, .contact-primary:focus-visible, .icon-btn:focus-visible { outline-offset: 4px; }

html { caret-color: var(--yellow); scrollbar-color: rgba(10,10,10,0.28) transparent; }
::selection { background: var(--yellow); color: var(--ink); text-shadow: none; }
.companies ::selection, .testimonials ::selection, .site-footer ::selection {
  background: var(--yellow); color: var(--ink);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(10,10,10,0.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(10,10,10,0.38); background-clip: content-box; }

/* ---------------------------------------------------------
   8. Orçamento — o campo ambiente não repinta no mobile
   --------------------------------------------------------- */
@media (max-width: 880px) {
  body { background-attachment: scroll; }
}

/* ---------------------------------------------------------
   9. Reduced motion — menos deslocamento, feedback preservado
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-header .header-inner,
  .site-header .header-inner::before,
  .hero-blob,
  .hero-avatar {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .site-header .header-inner::before { opacity: 0.55; }
  .hero-blob { opacity: 0.62; }
  .tpanel { transform: none !important; }
  /* o que carrega significado continua: opacidade, cor e estado */
  [data-i18n] { transition: opacity 170ms ease; }
  .nav a::before,
  .lang-toggle .pill { transition: opacity var(--t-state) ease, background var(--t-state) ease; }
}

/* ---------------------------------------------------------
   10. Correção: o e-mail estourava a viewport no mobile e
   fazia a página inteira rolar na horizontal.
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .contact-email {
    flex-wrap: wrap;
    row-gap: 2px;
    max-width: 100%;
  }
  /* o rotulo ocupa a linha de cima, o endereco fica inteiro na de baixo */
  .contact-email .lbl { flex-basis: 100%; }
  .contact-email .val {
    font-size: clamp(16px, 4.4vw, 24px);
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   IMPACTO — reformulação
   As lajes flutuantes estavam encostadas (gap 0). Os quatro
   anéis viraram uma lista legível; o aparelho carrega o peso.
   ========================================================= */

/* As lajes respiram entre si */
.companies,
.results,
.testimonials { margin-block: clamp(14px, 2vw, 28px); }

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 30vw, 400px);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

/* ---- A lista: o conteúdo legível ---- */
.results-list { display: block; }

.stat {
  display: grid;
  grid-template-columns: clamp(112px, 12vw, 168px) minmax(0, 1fr);
  grid-template-areas: "value key" "value label";
  column-gap: clamp(18px, 2.4vw, 40px);
  row-gap: 6px;
  align-items: start;
  padding: clamp(20px, 2.3vw, 30px) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.2);
  text-align: left;
  min-width: 0;
}
.stat:first-child { border-top: 0; padding-top: 0; }
.stat:first-child::before { display: none; }

.stat .big {
  grid-area: value;
  align-self: center;
  font-size: clamp(32px, 3.9vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.stat .key {
  grid-area: key;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(10, 10, 10, 0.62);
}
.stat .label {
  grid-area: label;
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
  text-align: left;
  text-wrap: pretty;
}

/* ---- O aparelho: um artefato, não um gráfico para ler ---- */
.results-device { display: flex; justify-content: center; }
.device-stage { perspective: 1600px; perspective-origin: 62% 42%; }

.device-phone {
  position: relative;
  width: clamp(230px, 25vw, 320px);
  aspect-ratio: 272 / 552;
  transform-style: preserve-3d;
  transform: rotateY(-21deg) rotateX(7deg) rotateZ(1deg);
}

/* chassi: fica atrás e aparece pela lateral, criando a espessura */
.device-edge {
  position: absolute;
  inset: -3px;
  border-radius: 42px;
  background: linear-gradient(100deg, #4a4944 0%, #1b1b19 46%, #0a0a0a 100%);
  transform: translateZ(-15px);
}

.device-body {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(155deg, #35342f 0%, #0e0e0d 34%, #171715 72%, #08080a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 2px 3px rgba(255, 255, 255, 0.16);
}

.device-notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 19px;
  border-radius: 0 0 13px 13px;
  background: #08080a;
  z-index: 2;
}

.dv-screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
}

/* sombra de contato no campo amarelo */
.device-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 74%;
  height: 46px;
  transform: translateX(-54%) rotate(-1deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(60, 40, 0, 0.5), rgba(60, 40, 0, 0) 72%);
  filter: blur(10px);
  z-index: -1;
}
.device-stage { position: relative; }

.results-foot { margin-top: clamp(36px, 3.6vw, 56px); }

/* ---- Mobile: sem inclinação forte numa tela estreita ---- */
@media (max-width: 980px) {
  .results-layout { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  .results-device { order: 2; }
  .device-phone { transform: rotateY(-11deg) rotateX(4deg); }
}
@media (max-width: 560px) {
  .stat {
    grid-template-columns: 1fr;
    grid-template-areas: "key" "value" "label";
    row-gap: 8px;
  }
  .stat .big { align-self: start; }
  .stat .key { align-self: start; }
  .device-phone { transform: none; width: min(72vw, 260px); }
  .device-stage { perspective: none; }
}

/* Coluna esquerda: título, métricas e nota como uma composição só */
.results-main { min-width: 0; }
.results-main .section-head {
  display: block;
  margin-bottom: clamp(26px, 3.2vw, 44px);
}
.results-main .results-foot { justify-content: flex-start; }

/* O ponto do nome: um ponto final, sem piscar */
.hero-headline h1 .dot {
  vertical-align: baseline;
  margin-left: 0.04em;
  box-shadow: none;
  animation: none;
}

/* =========================================================
   HERO — Background Gradient Animation (branco + amarelo)
   Blobs num container desfocado que os funde num plasma.
   O desfoque cresce conforme a página rola.
   ========================================================= */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: block;
  background: linear-gradient(38deg, #ffffff 0%, #ffffff 48%, #fffdf4 74%, #fef9e9 100%);
  --hero-blur: 0px;
  --hero-fade: 1;
  opacity: var(--hero-fade);
}
.hero > .container { position: relative; z-index: 1; }

/* O desfoque vive aqui: funde os blobs e recebe o incremento do scroll */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  display: block;
  filter: blur(calc(66px + var(--hero-blur)));
}

.hero-bg-blob {
  position: absolute;
  display: block;
  width: 82%;
  height: 82%;
  top: calc(50% - 41%);
  left: calc(50% - 41%);
  border-radius: 50%;
  opacity: 1;
}

/* amarelos multiplicam: onde se cruzam, a cor aprofunda */
.hb1 {
  background: radial-gradient(circle at center, rgba(251,188,4,0.30) 0%, rgba(251,188,4,0.07) 40%, rgba(251,188,4,0) 62%);
  mix-blend-mode: multiply;
  transform-origin: center center;
  animation: hb-vertical 30s ease infinite;
}
.hb2 {
  background: radial-gradient(circle at center, rgba(253,229,138,0.34) 0%, rgba(253,229,138,0.08) 42%, rgba(253,229,138,0) 64%);
  mix-blend-mode: multiply;
  transform-origin: calc(50% - 380px) center;
  animation: hb-circle-rev 20s reverse infinite;
}
.hb3 {
  background: radial-gradient(circle at center, rgba(253,229,138,0.28) 0%, rgba(253,229,138,0.06) 44%, rgba(253,229,138,0) 66%);
  mix-blend-mode: multiply;
  transform-origin: calc(50% + 380px) calc(50% + 180px);
  animation: hb-circle 36s linear infinite;
}
/* claros entram por cima e abrem poços de luz */
.hb4 {
  background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.78) 38%, rgba(255,255,255,0) 70%);
  transform-origin: calc(50% - 220px) center;
  animation: hb-horizontal 38s ease infinite;
}
.hb5 {
  background: radial-gradient(circle at center, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 72%);
  width: 64%; height: 64%;
  top: calc(50% - 32%); left: calc(50% - 32%);
  transform-origin: calc(50% - 640px) calc(50% + 320px);
  animation: hb-circle 26s ease infinite;
}
/* segue o cursor: movimento que responde a uma ação */
.hb-pointer {
  background: radial-gradient(circle at center, rgba(251,188,4,0.20) 0%, rgba(251,188,4,0) 58%);
  mix-blend-mode: multiply;
  width: 62%; height: 62%;
  top: -31%; left: -31%;
  opacity: 0.75;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

@keyframes hb-vertical {
  0%, 100% { transform: translateY(-46%); }
  50%      { transform: translateY(46%); }
}
@keyframes hb-horizontal {
  0%, 100% { transform: translateX(-46%) translateY(-9%); }
  50%      { transform: translateX(46%) translateY(9%); }
}
@keyframes hb-circle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hb-circle-rev {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* o brilho do avatar não compete com o campo */
.hero-blob { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-blob { animation: none !important; }
  .hb-pointer { display: none; }
  .hero-bg-layer { filter: blur(66px); }
}

/* O campo não anima enquanto o hero está fora da tela */
.hero-bg.is-idle .hero-bg-blob { animation-play-state: paused; }

/* =========================================================
   HERO — Retrato recortado com revelação sob o cursor
   (no estilo do landonorris.com)
   A foto 1 é o estado normal. Um canvas WebGL desenha por cima a
   foto 1 + a foto 2, que só aparece onde o rastro do cursor ainda
   está vivo; o rastro se dissolve sozinho. Parado, um cursor
   virtual varre o rosto de tempos em tempos.
   Sem WebGL ou com reduced-motion, fica só a foto 1, estática.
   Trocar fotos: hero/portrait-*.webp|png.
   ========================================================= */

/* O texto fica sempre por cima do retrato */
.hero-headline { position: relative; z-index: 2; }

.hero-aside {
  /* altura do retrato: a coluna inteira, limitada pela largura
     para não invadir o texto em telas médias */
  --portrait-h: min(100cqh, 170cqw);
  container-type: size;
  z-index: 1;
  align-self: stretch;
  height: auto;
  /* desce até a borda do hero (mesmo valor do padding-bottom do .hero):
     os ombros saem pela base, como uma foto que continua fora do quadro */
  margin-bottom: -80px;
  align-items: flex-end;
}

/* O brilho amarelo fica atrás da cabeça, não do centro da coluna */
.hero-aside .hero-blob {
  --blob: calc(var(--portrait-h) * 0.6);
  width: var(--blob);
  height: var(--blob);
  left: calc(50% - var(--blob) / 2);
  top: calc(100% - var(--portrait-h) * 0.758 - var(--blob) / 2);
  pointer-events: none;
}

.hero-portrait {
  position: relative;
  z-index: 2;
  flex: none;
  height: var(--portrait-h);
  aspect-ratio: 1436 / 1600;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* a base do recorte some em transparência, sem corte reto */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.hero-portrait img,
.hero-portrait-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.hero-portrait img {
  object-fit: contain;
  object-position: center bottom;
  transform: translateZ(0);
}

/* O canvas só assume quando já desenhou o primeiro quadro; até lá
   (e se o WebGL falhar) quem aparece é a foto 1 em <img>. */
.hero-portrait-gl { opacity: 0; }
.hero-portrait.is-gl .hero-portrait-gl { opacity: 1; }
.hero-portrait.is-gl .hero-portrait-clean { opacity: 0; }

/* Mobile: texto primeiro, retrato depois, na mesma ordem em que um leitor
   de tela lê a página. O retrato entra entre o parágrafo e os contadores:
   saudação, nome, parágrafo, retrato, contadores, CTAs. */
@media (max-width: 880px) {
  .hero-grid { row-gap: 10px; }
  /* os filhos do bloco de texto passam a ser itens do grid do hero,
     para o retrato poder ficar no meio deles */
  .hero-headline { display: contents; }
  .hero-headline > * { order: 1; }
  .hero-headline > .hero-note,
  .hero-headline > .hero-ctas { order: 3; }
  .hero-aside {
    order: 2;
    height: clamp(320px, 88vw, 440px);
    margin: 18px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait-gl { display: none; }
  .hero-portrait.is-gl .hero-portrait-clean { opacity: 1; }
}

/* Content protection: images can't be dragged or long-pressed to save */
img, picture, video, svg {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
img, video {
  -webkit-user-select: none;
  user-select: none;
}