/* ==========================================================================
   Home ousada: preto chumbo, cinza e laranja neon. Só vale em body.home.
   Tipografia gigante, hero escuro, faixas cinéticas e blocos de cor inteiros.
   Tudo o que se move está dentro de `prefers-reduced-motion: no-preference`.
   ========================================================================== */

body.home {
  --chumbo: #17191C;
  --chumbo-2: #1E2124;
  --chumbo-3: #2A2E32;
  --orange: #FF5B00;
  --neon: #FF7A1F;
  --display: var(--font-display);
  --glow: 0 0 28px rgb(255 122 31 / 0.55);
  --orange-text: #B83A00; /* 5,2:1 sobre cinza claro e 5,8:1 sobre branco */
}

/* ---------- Cabeçalho: vidro chumbo, sempre legível ---------- */
.home .site-header {
  color: #F1F2F3;
}
.home .site-header.is-scrolled {
  background: rgb(23 25 28 / 0.78);
  box-shadow: 0 1px 0 rgb(241 242 243 / 0.1);
}
.home .site-header .wordmark { color: #F1F2F3; }
.home .nav a { color: #C9CED2; }
.home .nav a:hover { color: var(--neon); }
.home .nav a::after { display: none; } /* sem sublinhado animado no menu */

/* ---------- Hero ---------- */
.home .hero {
  --ink: #F1F2F3;
  --slate-text: #B4BABF;
  --slate: #8E959B;
  --line: rgb(241 242 243 / 0.14);
  --line-strong: rgb(241 242 243 / 0.38);
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(100svh, 1000px);
  padding-top: calc(72px + clamp(28px, 5vw, 72px));
  padding-bottom: clamp(96px, 11vw, 168px);
  background:
    radial-gradient(52% 58% at 88% 88%, rgb(255 91 0 / 0.38), transparent 68%),
    radial-gradient(40% 40% at 0% 0%, rgb(255 122 31 / 0.1), transparent 70%),
    var(--chumbo);
  color: var(--ink);
}
.home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.home .hero__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title title"
    "sub visual"
    "actions visual";
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: 0;
  align-items: start;
}
.home .hero__copy { display: contents; }
.home .hero__eyebrow { grid-area: eyebrow; color: var(--neon); margin-bottom: clamp(20px, 3vw, 36px); max-width: none; }
.home .hero__title {
  grid-area: title;
  position: relative;
  z-index: 5;
  font-size: clamp(2.5rem, 0.6rem + 6vw, 6rem);
  line-height: 0.97;
  letter-spacing: -0.052em;
  font-weight: 600;
  max-width: 21ch;
  color: #fff;
}
.home .hero__title em {
  color: var(--neon);
  font-weight: 500;
  text-shadow: var(--glow);
}
.home .hero__sub { grid-area: sub; margin-top: clamp(24px, 3vw, 40px); max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--slate-text); }
.home .hero__sub strong { color: var(--neon); font-weight: 600; }
.home .hero__actions { grid-area: actions; margin-top: 32px; align-self: start; }
.home .hero__visual { grid-area: visual; position: relative; margin-top: clamp(64px, 7vw, 104px); align-self: start; }

/* Sol laranja atrás da foto */
.home .hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  right: -12%;
  top: -14%;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 120px 10px rgb(255 91 0 / 0.45);
}
.home .hero__panel--photo { transform: rotate(2.4deg); transform-origin: 70% 90%; }
.home .photo-card img {
  aspect-ratio: 4 / 5;
  object-position: 64% 30%;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgb(255 122 31 / 0.55), 0 40px 90px -28px rgb(0 0 0 / 0.75);
}
.home .photo-card__skills li { color: #B4BABF; }
.home .hero__caption { color: #8E959B; }

/* Selo girando: "desde 2006" */
.home .since {
  position: absolute;
  z-index: 3;
  left: -44px;
  bottom: 22%;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 0;
  border-radius: 50%;
  background: var(--chumbo);
  box-shadow: 0 0 0 1px rgb(255 122 31 / 0.6), 0 18px 40px -12px rgb(0 0 0 / 0.7);
  color: #F1F2F3;
  order: 0;
  transform: rotate(-2.4deg);
}
.home .since::before { display: none; }
.home .since__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.home .since__ring text { font: 500 12.4px var(--font-mono); letter-spacing: 0.08em; fill: #F1F2F3; text-transform: uppercase; }
.home .since__year { font: 600 1.25rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--neon); text-shadow: var(--glow); }

/* Botões do hero */
.home .btn--primary { color: var(--chumbo); }
.home .hero .btn--ghost { color: #F1F2F3; box-shadow: inset 0 0 0 1.5px rgb(241 242 243 / 0.4); background: transparent; }
.home .hero .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--neon); color: var(--neon); }

/* ---------- Faixas cinéticas (texto gigante correndo) ---------- */
.kinetic {
  position: relative;
  z-index: 4;
  overflow: hidden;
  margin-block: clamp(-34px, -2.6vw, -18px);
  padding-block: 0.12em;
  background: var(--orange);
  color: var(--chumbo);
  transform: rotate(-1.4deg) scale(1.04);
  box-shadow: 0 24px 70px -24px rgb(255 91 0 / 0.55);
  font: 600 clamp(2.25rem, 0.9rem + 6vw, 6.25rem)/1.02 var(--font-display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kinetic__track { display: flex; width: max-content; }
.kinetic__group { display: flex; align-items: center; gap: 0.55em; padding-right: 0.55em; }
.kinetic i { flex: none; width: 0.26em; height: 0.26em; border-radius: 50%; background: currentColor; }
.kinetic--contorno {
  background: var(--chumbo);
  color: transparent;
  -webkit-text-stroke: 1.6px rgb(241 242 243 / 0.85);
  transform: rotate(1.1deg) scale(1.04);
  box-shadow: none;
}
.kinetic--contorno i { background: var(--neon); box-shadow: var(--glow); }
@media (prefers-reduced-motion: no-preference) {
  .kinetic__track { animation: kinetic 42s linear infinite; }
  .kinetic--contorno .kinetic__track { animation-duration: 70s; animation-direction: reverse; }
}
@keyframes kinetic { to { transform: translateX(-50%); } }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .home .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "sub" "actions" "visual";
  }
  .home .hero { min-height: 0; padding-bottom: clamp(72px, 14vw, 120px); }
  .home .hero__visual { margin-top: 88px; max-width: 460px; width: 100%; margin-inline: auto; }
  .home .hero__visual::before { top: -9%; right: -16%; width: 72%; }
  .home .since { left: -10px; width: 108px; height: 108px; bottom: 26%; }
  .home .since__ring text { font-size: 12.6px; }
}

/* ==========================================================================
   Parte B: seções
   ========================================================================== */
.home .site-header.is-scrolled { background: rgb(23 25 28 / 0.92); }

/* Títulos gigantes */
.home main { counter-reset: sec; overflow-x: clip; }
.home .section .display.h2 {
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 600;
  max-width: 17ch;
}
.home .section .display.h2 em { font-weight: 500; }
.home .beliefs__thesis.display.h2 { font-size: clamp(2.125rem, 1rem + 3.6vw, 4.5rem); max-width: 22ch; letter-spacing: -0.045em; }
.home .closing .display.h2 { font-size: clamp(2.5rem, 1rem + 5.6vw, 6.5rem); max-width: 16ch; }
.home .section-head { margin-bottom: clamp(36px, 5vw, 72px); }

/* Contador de seção: (01) */
.home .section .eyebrow:not(.eyebrow--on-dark)::before,
.home .section .eyebrow--on-dark::before {
  counter-increment: sec;
  content: "(" counter(sec, decimal-leading-zero) ")" / "";
  display: inline-block;
  margin-right: 0.9em;
  color: var(--orange-text);
}
.home .section .eyebrow--on-dark::before { color: var(--neon); }
.home .clients-band .eyebrow::before { content: none; }

/* Trabalhos: cartões que reagem */
@media (prefers-reduced-motion: no-preference) {
  .home .work { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
  .home .work:hover { transform: translateY(-10px) rotate(-0.8deg); }
  .home .works .work:nth-child(even):hover { transform: translateY(-10px) rotate(0.8deg); }
}

/* Sobre: foto com sombra dura laranja */
.home .about__photo img { border-radius: 6px; box-shadow: 16px 16px 0 var(--orange); }
.home .about__facts dt { color: var(--orange-text); }

/* Trajetória: anos em contorno */
.home .year { grid-template-columns: minmax(150px, 0.55fr) minmax(0, 2fr); align-items: baseline; padding: clamp(24px, 3vw, 40px) 0; }
.home .year__when {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 1.4rem + 5vw, 6.5rem);
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  transition: color .4s ease, -webkit-text-stroke-color .4s ease;
}
.home .year:hover .year__when { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
.home .year--now .year__when {
  background: none;
  font-style: normal;
  color: var(--orange);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.home .year__what h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); letter-spacing: -0.03em; }

/* Produtos: bloco laranja de ponta a ponta */
.home .products { background: var(--orange); color: var(--chumbo); --ink: #17191C; --slate-text: #17191C; --slate: #17191C; --line: rgb(23 25 28 / 0.25); --line-strong: rgb(23 25 28 / 0.55); }
.home .products .eyebrow, .home .products .eyebrow::before { color: var(--chumbo); }
.home .products .display.h2 { color: var(--chumbo); }
.home .products .display.h2 em { color: #fff; text-shadow: none; }
.home .products .product-feature.gradient-panel {
  background: var(--chumbo);
  color: #F1F2F3;
  box-shadow: 18px 18px 0 rgb(23 25 28 / 0.28);
  --ink: #F1F2F3; --slate-text: #B4BABF; --slate: #8E959B; --line: rgb(241 242 243 / 0.16); --line-strong: rgb(241 242 243 / 0.4);
}
.home .products .product-feature__title em { color: var(--neon); text-shadow: var(--glow); }
.home .products .btn--primary { background: var(--orange); color: var(--chumbo); }

/* Rodapé monumental */
.home .site-footer { background: var(--chumbo); color: #B4BABF; position: relative; overflow: hidden; padding-top: clamp(56px, 8vw, 120px); }
.home .site-footer__inner { position: relative; display: grid; gap: clamp(16px, 3vw, 32px); }
.home .wordmark--footer { display: block; color: #F1F2F3; }
.home .wordmark--footer .wordmark__name {
  display: block;
  font: 600 clamp(4.5rem, 1rem + 19vw, 19rem)/0.84 var(--font-display);
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(241 242 243 / 0.55);
  margin-left: -0.04em;
  transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}
.home .wordmark--footer:hover .wordmark__name { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
.home .wordmark--footer .wordmark__by { display: block; margin-top: 18px; font: 500 0.8125rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8E959B; }
.home .site-footer__legal { color: #8E959B; }
.home .site-footer__legal a { color: #D5D9DC; }

/* Efeitos com movimento */
@media (prefers-reduced-motion: no-preference) {
  /* holofote que segue o cursor no hero */
  .home .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgb(255 122 31 / 0.16), transparent 60%);
    pointer-events: none;
  }
  /* palavras que sobem de dentro de uma máscara */
  .js .fx-split { opacity: 1 !important; transform: none !important; }
  .js .fx-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .fx-split .w > span { display: inline-block; transform: translateY(112%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
  .js .fx-split.is-in .w > span { transform: none; }
  /* parallax guiado por rolagem (onde houver suporte) */
  @supports (animation-timeline: view()) {
    .home .hero__visual::before { animation: sol linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .home .about__photo { animation: flutua linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes sol { to { transform: translateY(18vh) scale(1.12); } }
@keyframes flutua { from { transform: translateY(26px); } to { transform: translateY(-26px); } }

/* Etapas dentro do cartão escuro do produto */
.home .products .pf-step { background: rgb(241 242 243 / 0.07); color: #F1F2F3; box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.14); }
.home .products .pf-step::before { border-color: rgb(241 242 243 / 0.35); color: #B4BABF; }
.home .products .pf-step--ninja { background: var(--orange); color: var(--chumbo); box-shadow: 0 0 36px rgb(255 91 0 / 0.45); }
.home .products .pf-step--ninja::before { border-color: rgb(23 25 28 / 0.5); color: var(--chumbo); }
.home .products .pf-step--price { background: transparent; color: var(--neon); box-shadow: inset 0 0 0 1px rgb(255 122 31 / 0.6); }
/* contador legível sobre o laranja */
.home .products .section-head .eyebrow::before { color: var(--chumbo) !important; }
.home .products .soon__card { background: rgb(255 255 255 / 0.2); box-shadow: inset 0 0 0 1px rgb(23 25 28 / 0.35); color: var(--chumbo); }
.home .products .soon__card .badge { color: var(--chumbo); box-shadow: inset 0 0 0 1px rgb(23 25 28 / 0.55); background: transparent; }

/* ==========================================================================
   Clientes em destaque / faixa de especialidades discreta
   ========================================================================== */
.home .clients-band { padding-block: clamp(64px, 8vw, 120px); border-block: 0; }
.home .clients-band .logos { gap: clamp(32px, 4vw, 56px); }
.home .clients__label {
  font: 600 clamp(1.5rem, 0.9rem + 2vw, 2.75rem)/1.1 var(--font-display);
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--ink);
  max-width: 34ch;
}
.home .clients-band .marquee { --gap: clamp(56px, 7vw, 112px); }
.home .clients-band .marquee__track li { height: clamp(56px, 6vw, 84px); }
.home .clients-band .marquee__track img { height: calc(var(--h, 28px) * 1.6); opacity: 1; }
.home .clients-band .marquee__track { animation-duration: 95s; }
.home .logos__more { font-size: var(--fs-base, 1rem); color: var(--slate-text); }
@media (max-width: 600px) {
  .home .clients-band .marquee__track img { height: calc(var(--h, 28px) * 1.3); }
}

/* faixa de especialidades: baixa, reta, cinza */
.home .kinetic--discreta {
  margin-block: 0;
  transform: none;
  background: var(--white);
  color: var(--slate-text);
  box-shadow: none;
  border-block: 1px solid var(--line);
  padding-block: clamp(14px, 1.6vw, 22px);
  font: 500 clamp(1.125rem, 0.8rem + 1.2vw, 1.875rem)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: none;
}
.home .kinetic--discreta i { width: 0.2em; height: 0.2em; background: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .home .kinetic--discreta .kinetic__track { animation-duration: 80s; }
}