/* BeardRocket · site
   Tema claro é o padrão; o escuro entra com data-theme="dark" no <html>.
   Cada seção escolhe o próprio tom com uma classe: tone-light (padrão), tone-dark ou tone-orange.
   Os componentes usam só os tokens abaixo, então funcionam em qualquer tom. */

:root {
  /* cores da marca, fixas */
  --sooty: #141414;
  --solitude: #F1F2F6;
  --orange: #FF6400;
  --blue: #758BFC;

  /* tokens do tom claro (padrão) */
  --bg: #F1F2F6;
  --surface: #FFFFFF;
  --fg: #141414;
  --muted: #5E5F67;
  --line: #D9DAE0;
  --dot: rgba(20, 20, 20, .16);
  --hatch: rgba(20, 20, 20, .05);

  --font: "BT Beau Sans", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gl: max(20px, env(safe-area-inset-left, 0px), 4vw);
  --gr: max(20px, env(safe-area-inset-right, 0px), 4vw);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --cut: 7vw; /* corte diagonal, no ângulo do foguete */
  color-scheme: light;
}

/* tom escuro: vale para a página inteira (data-theme) ou para uma seção (tone-dark) */
:root[data-theme="dark"], .tone-dark {
  --bg: #141414;
  --surface: #1B1B1F;
  --fg: #F1F2F6;
  --muted: #8A8B93;
  --line: #2C2D33;
  --dot: rgba(241, 242, 246, .18);
  --hatch: rgba(241, 242, 246, .06);
}
:root[data-theme="dark"] { color-scheme: dark; }
.tone-orange {
  --bg: #FF6400;
  --surface: #FF7A26;
  --fg: #141414;
  --muted: rgba(20, 20, 20, .72);
  --line: rgba(20, 20, 20, .9);
}
.tone-dark, .tone-orange, .tone-light { background-color: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font);
  font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: background-color .4s, color .4s;
}
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 800; }
/* o parágrafo não termina com uma palavra sozinha na última linha (a palavra curta no fim da linha fica com o tipografia.js) */
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
::selection { background: var(--orange); color: var(--sooty); }
.pad { padding-left: var(--gl); padding-right: var(--gr); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--orange); color: var(--sooty); padding: 12px 16px; font-weight: 800; }
.skip:focus { left: 16px; top: 16px; }

/* entrada (o script do <head> marca a 1ª visita da sessão) */
.js-intro .nav, .js-intro .hero-title, .js-intro .hero-lead, .js-intro .hero-cta, .js-intro .hero-logo, .js-quick .hero-title, .js-quick .hero-logo { opacity: 0; }

/* ---------- tramas ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.t-dots, .t-hatch { position: relative; }
.t-dots::before, .t-hatch::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.t-dots::before {
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
}
.t-hatch::before {
  background-image: repeating-linear-gradient(-52deg, var(--hatch) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.t-dots > *, .t-hatch > * { position: relative; z-index: 1; }
/* papel amassado vetorial (SVG com ruído e luz): nítido em qualquer tela, sem emenda, nos dois temas.
   Fica numa camada fixa atrás do conteúdo, para o 3D do topo aparecer por cima dele. */
body { position: relative; z-index: 0; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='5' seed='7' stitchTiles='stitch' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='3' stitchTiles='stitch' result='f'/%3E%3CfeComposite in='c' in2='f' operator='arithmetic' k1='0' k2='1' k3='.18' k4='0' result='m'/%3E%3CfeDiffuseLighting in='m' surfaceScale='2.4' diffuseConstant='1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 900px 900px; mix-blend-mode: multiply; opacity: .3;
}
/* no escuro o papel entra só como luz sobre o vinco, sem clarear a página */
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .12; }

/* ---------- palco 3D do topo ---------- */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
.iso-fallback { position: absolute; right: -6vw; top: 8vh; height: 84vh; width: auto; z-index: 0; display: none; }
.no-gl .iso-fallback { display: block; }

/* ---------- navegação ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: max(18px, env(safe-area-inset-top, 0px)); padding-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav .logo { height: 22px; width: auto; display: block; color: var(--fg); }
.nav-links { display: none; gap: 36px; font-size: 15px; }
.nav-links a { color: var(--muted); transition: color .2s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--fg); transition: border-color .2s, background-color .2s;
}
.icon-btn:hover { border-color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: inline-grid; }
@media (min-width: 960px) { .nav-links { display: flex; } .menu-btn { display: none; } }
.mobile-menu {
  position: fixed; inset: 0; z-index: 49; background: var(--bg); display: grid; align-content: center; gap: 6px;
  padding-top: 90px; padding-bottom: 40px;
}
.mobile-menu a { font-size: clamp(36px, 10vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mobile-menu[hidden] { display: none; }

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font: 800 15px/1 var(--font); border-radius: 999px; padding: 17px 26px; cursor: pointer; border: 1px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn-primary { background: var(--orange); color: var(--sooty); }
.btn-primary:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.btn-ghost:hover { border-color: var(--fg); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- títulos e textos de seção ---------- */
.sec { position: relative; z-index: 2; padding-block: clamp(100px, 15vh, 180px); }
/* no celular, a tela é alta e estreita: 15vh em cima e embaixo deixava um terço da tela vazio entre uma seção e outra */
@media (max-width: 699px) { .sec { padding-block: clamp(72px, 10vh, 96px); } }
.sec-title { font-size: clamp(44px, 6.4vw, 104px); line-height: .94; letter-spacing: -.05em; max-width: 14ch; }
.sec-intro { margin-top: 28px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; max-width: 42ch; }
.eyebrow-bar { display: block; width: 56px; height: 3px; background: var(--orange); margin-bottom: 28px; }

/* ---------- 1. topo ---------- */
.hero { position: relative; z-index: 1; min-height: 100svh; display: grid; align-content: end; padding-bottom: calc(var(--cut) + clamp(48px, 9vh, 110px)); padding-top: 140px; overflow: hidden; }
.hero-title { font-size: clamp(76px, 13.5vw, 210px); line-height: .86; letter-spacing: -.055em; max-width: 7ch; margin-left: -.04em; }
/* o logo grande acima do título; no celular estreito o foguete em 3D já ocupa esse lugar */
.hero-logo { display: none; height: clamp(34px, 4.2vw, 64px); width: auto; color: var(--fg); margin-bottom: clamp(26px, 4.4vh, 48px); }
@media (min-width: 600px) { .hero-logo { display: block; } }
.hero-row { display: grid; gap: 32px; margin-top: clamp(28px, 4vh, 48px); justify-items: start; }
.hero-lead { font-size: clamp(20px, 1.75vw, 27px); line-height: 1.35; font-weight: 300; letter-spacing: -.015em; max-width: 34ch; }
.hero-lead strong { font-weight: 700; }

/* ---------- 2. crença: bloco laranja com corte diagonal ---------- */
/* a foto em 4K é o próprio fundo: parede laranja com o foguete preto à direita. Sem recorte e sem esfumaçado.
   No celular a foto vai para baixo do texto; a cor da seção é a mesma da parede, então a junção não aparece. */
.belief {
  position: relative; z-index: 3; --bg: #FE6803;
  margin-top: calc(var(--cut) * -1); padding-top: calc(var(--cut) + clamp(80px, 13vh, 150px)); padding-bottom: clamp(90px, 14vh, 160px);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); overflow: hidden;
}
.belief-photo { display: block; margin: 40px calc(var(--gr) * -1) calc(clamp(90px, 14vh, 160px) * -1) calc(var(--gl) * -1); }
/* no celular, a borda de cima da foto some numa transição curta e reta; a cor da seção é a da parede no recorte */
.belief-photo img, .lead-photo img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%);
          mask-image: linear-gradient(180deg, transparent, #000 14%);
}
@media (max-width: 899px) { .belief { --bg: #F36201; } }
.belief-content { position: relative; z-index: 1; }
.belief-big { font-size: clamp(60px, 8.4vw, 136px); line-height: .88; letter-spacing: -.055em; font-weight: 200; max-width: 9ch; }
.belief-big .word { display: inline-block; }
.belief-text { display: grid; gap: 28px; margin-top: clamp(40px, 7vh, 72px); padding-top: 32px; border-top: 2px solid var(--line); }
.belief-text p { font-size: clamp(18px, 1.5vw, 21px); max-width: 40ch; }
@media (min-width: 900px) {
  .belief { min-height: min(46vw, 900px); display: grid; align-content: center; }
  .belief-photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
  .belief-photo img { height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask-image: none; mask-image: none; }
  .belief-content { max-width: 52%; }
  .belief-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw; }
}

/* ---------- 3. liderança: retrato real sobre o isotipo ---------- */
/* foto em 4K com o foguete ao fundo; no desktop ela fica à direita, no celular vem abaixo do texto.
   A cor da seção é a da parede da foto, então as bordas da foto somem no fundo e quem corta embaixo é a diagonal. */
.lead { position: relative; z-index: 2; overflow: hidden; --bg: #121212; padding-top: clamp(90px, 13vh, 150px); display: flex; flex-direction: column; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.lead-photo { order: 2; }
.lead-text { position: relative; z-index: 1; padding-bottom: 40px; }
.lead-photo { display: block; margin: 0 calc(var(--gr) * -1) calc(var(--cut) * .6) calc(var(--gl) * -1); }
.lead-photo img {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 95%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 6%, #000 95%, transparent);
}
@media (min-width: 900px) {
  .lead { min-height: min(56.25vw, 1000px); display: grid; align-content: center; padding-block: clamp(90px, 12vh, 140px); }
  .lead { padding-bottom: calc(clamp(90px, 12vh, 140px) + var(--cut)); }
  /* a foto mantém o 16:9 inteiro (cabeça e braços sem corte), com respiro em cima e os braços acima da diagonal */
  .lead-photo { position: absolute; top: clamp(48px, 6vw, 120px); bottom: calc(var(--cut) * .75); right: 0; aspect-ratio: 16 / 9; margin: 0; z-index: 0; }
  .lead-photo img {
    width: 100%; height: 100%; max-width: none; object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 4%, #000 95%, transparent), linear-gradient(90deg, transparent, #000 14%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, transparent, #000 4%, #000 95%, transparent), linear-gradient(90deg, transparent, #000 14%);
            mask-composite: intersect;
  }
  .lead-text { max-width: 44%; padding-bottom: 0; }
}
.quote { font-size: clamp(38px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; max-width: 15ch; }
.quote .q { color: var(--orange); }
.who { margin-top: 40px; display: flex; align-items: center; gap: 18px; }
.who .bar { width: 48px; height: 2px; background: var(--orange); }
.who b { display: block; font-size: 20px; }
.who span { color: var(--muted); font-size: 16px; }

/* ---------- divisor: papel com o isotipo em relevo ---------- */

/* ---------- 4. tecnologia ---------- */
.pillars { margin-top: clamp(56px, 9vh, 104px); display: grid; grid-template-columns: 1fr; position: relative; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { position: relative; padding: 36px 0 40px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .pillar { padding: 44px 3vw 52px; } .pillar:first-child { padding-left: 0; } .pillar:last-child { padding-right: 0; } }
.pillar .rule-h { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
@media (min-width: 900px) { .pillar + .pillar .rule-h::after { left: 3vw; } }
.pillar .rule-h::after { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--orange); }
@media (min-width: 900px) { .pillar + .pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); } }
.pillar h3 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.pillar p { color: var(--muted); max-width: 40ch; }
.pillar .iso-mark { width: 14px; height: auto; margin-bottom: 4px; }

/* ---------- 5. produtos ---------- */
.prod-grid { margin-top: clamp(48px, 8vh, 88px); display: grid; gap: 16px; }
@media (min-width: 760px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
.prod {
  position: relative; display: grid; grid-template-rows: 210px auto; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--surface); transition: border-color .3s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.prod:hover { border-color: color-mix(in srgb, var(--orange) 60%, var(--line)); transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(20, 20, 20, .35); }
.prod-top {
  position: relative; overflow: hidden; background-color: var(--sooty); color: var(--solitude);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='%23FF6400'><path transform='translate(8 6) scale(.085)' d='M190.66,243.68s-8.99-61.98-73.36-93.96c-64.37-31.98-117.3,1.46-117.3,1.46L191.12,0l-.46,243.56M154.74,252.89s-25.08-40.86-59.42-56.45c-37.2-16.9-78.08-10.26-78.08-10.26l10.23,67.07,20.52-19.69-7.96,81.27,58.91-56.55-2.72,27.79,58.52-33.19'/><path transform='translate(44 42) scale(.085)' d='M190.66,243.68s-8.99-61.98-73.36-93.96c-64.37-31.98-117.3,1.46-117.3,1.46L191.12,0l-.46,243.56M154.74,252.89s-25.08-40.86-59.42-56.45c-37.2-16.9-78.08-10.26-78.08-10.26l10.23,67.07,20.52-19.69-7.96,81.27,58.91-56.55-2.72,27.79,58.52-33.19'/></g></svg>");
  background-size: 56px 56px; transition: background-position 1.2s var(--ease);
}
.prod-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, .25), rgba(20, 20, 20, .92)); }
.prod:hover .prod-top { background-position: 28px -28px; }
.prod-top .name { position: absolute; z-index: 1; left: 28px; bottom: 18px; font-size: clamp(44px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: .9; }
.prod-body { padding: 24px 28px 28px; display: grid; gap: 14px; }
.prod-body .cat { color: var(--orange); font-size: 15px; font-weight: 800; }
.prod-body p { color: var(--muted); font-size: 16px; }
/* a assinatura de cada um, grande, com o ponto na cor da IA (o laranja; no AI Blueprint, o ciano); a crença vai em
   negrito, como gancho, e o conceito segue em cinza */
.prod-body .sig, .servico .sig { font-size: clamp(30px, 2.7vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--fg); margin-top: 2px; }
.prod-body .sig span { color: var(--orange); }
.servico .sig span { color: #00B4FB; }
.prod-body p b, .servico p b { color: var(--fg); font-weight: 700; }
.prod-body .go { margin-top: 8px; font-weight: 800; font-size: 15px; justify-self: start; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }

/* o cartão do Atlor: o produto já tem identidade, então o topo é a tinta dele, com o laço e o logotipo */
.prod-atlor .prod-top { background-color: #1F36AD; background-image: none; color: #F0EEE6; }
.prod-atlor .prod-top::after { background: linear-gradient(180deg, rgba(31, 54, 173, 0), rgba(15, 26, 79, .35)); }
.prod-atlor .prod-laco { position: absolute; z-index: 1; right: 6%; top: 12%; width: 56%; height: auto; color: #F0EEE6; opacity: .95; transition: transform 1.2s var(--ease); }
.prod-atlor:hover .prod-laco { transform: translateX(-4%); }
.prod-atlor .prod-logo { height: clamp(44px, 4vw, 58px); width: auto; bottom: 22px; }
.prod-atlor:hover { border-color: color-mix(in srgb, #1F36AD 60%, var(--line)); }

/* o cartão do Talemis: a tinta bordô, o nível (a bolha laranja assenta no meio quando o cartão é tocado) e o logotipo */
.prod-talemis .prod-top { background-color: #7A1F3D; background-image: none; color: #F0EEE6; }
.prod-talemis .prod-top::after { background: linear-gradient(180deg, rgba(122, 31, 61, 0), rgba(42, 10, 20, .35)); }
.prod-talemis .prod-nivel { position: absolute; z-index: 1; right: 7%; top: 26%; width: 58%; height: auto; color: #F0EEE6; opacity: .95; transition: transform 1.2s var(--ease); }
.prod-talemis:hover .prod-nivel { transform: translateX(-4%); }
.prod-talemis .prod-logo { height: clamp(40px, 3.6vw, 52px); width: auto; bottom: 24px; }
.prod-talemis:hover { border-color: color-mix(in srgb, #7A1F3D 60%, var(--line)); }

/* o cartão do Metior: a tinta roxa de cartório, a rubrica e o logotipo. Ainda sem página: não é link, não sobe no
   toque e leva "Em breve" no lugar do botão (.prod-breve, que vale também para o Febis). Com quatro produtos, a grade
   fica em duas colunas: o Atlor e o Talemis em cima, o Metior e o Febis embaixo. A rubrica é mais alta que o nível e
   o laço: 40% da largura, para não encostar no logotipo */
.prod-metior .prod-top { background-color: #4A2C6B; background-image: none; color: #F0EEE6; }
.prod-metior .prod-top::after { background: linear-gradient(180deg, rgba(74, 44, 107, 0), rgba(28, 16, 41, .35)); }
.prod-metior .prod-rubrica { position: absolute; z-index: 1; right: 7%; top: 14%; width: 40%; height: auto; color: #F0EEE6; opacity: .95; }
/* o "metior" não tem ascendente: 93,8% da altura do "talemis" dá a mesma x-altura */
.prod-metior .prod-logo { height: clamp(37.5px, 3.38vw, 48.8px); width: auto; bottom: 24px; }
/* o cartão do Febis: a tinta verde de caixa, a ponte e o logotipo; também "Em breve" */
.prod-febis .prod-top { background-color: #174F37; background-image: none; color: #F0EEE6; }
.prod-febis .prod-top::after { background: linear-gradient(180deg, rgba(23, 79, 55, 0), rgba(9, 30, 21, .35)); }
.prod-febis .prod-ponte { position: absolute; z-index: 1; right: 7%; top: 20%; width: 46%; height: auto; color: #F0EEE6; opacity: .95; }
.prod-febis .prod-logo { height: clamp(40px, 3.6vw, 52px); width: auto; bottom: 24px; }
.prod-breve:hover { border-color: var(--line); transform: none; box-shadow: none; }
.prod-breve:hover .prod-top { background-position: 0 0; }
.prod-body .breve { margin-top: 8px; font-weight: 800; font-size: 15px; justify-self: start; color: var(--muted); }

/* o AI Blueprint é serviço, e vem embaixo dos produtos num cartão largo: claro (a superfície do tema), com as quatro
   placas em vetor e o caminho ciano do topo da página dele, que passa embaixo das placas, sobe e volta até a placa
   ciano. O ciano faz aqui o papel do laranja: o rótulo, o sublinhado do botão, o caminho */
.servico { position: relative; margin-top: 16px; display: grid; gap: 28px; align-items: center; padding: 28px 28px 30px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden;
  transition: border-color .3s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.servico:hover { border-color: color-mix(in srgb, #00B4FB 60%, var(--line)); transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(20, 20, 20, .35); }
.servico-tx { display: grid; gap: 14px; align-content: start; }
.servico-logo { height: clamp(40px, 3.6vw, 54px); width: auto; color: var(--fg); margin-bottom: 10px; }
.servico .cat { color: #0874B0; font-size: 15px; font-weight: 800; }
:root[data-theme="dark"] .servico .cat { color: #00B4FB; }
.servico p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.servico .go { margin-top: 8px; font-weight: 800; font-size: 15px; justify-self: start; border-bottom: 2px solid #00B4FB; padding-bottom: 2px; }
.servico-placas { order: -1; width: min(100%, 300px); height: auto; justify-self: center; color: var(--fg); overflow: visible; transition: transform 1.2s var(--ease); }
.servico-caminho { fill: none; stroke: #00B4FB; stroke-width: 5; stroke-linecap: round; stroke-linejoin: miter; }
.servico-ponto { fill: #00B4FB; }
.servico-ponto { transition: r .5s var(--ease); }
.servico:hover .servico-ponto { r: 13px; }
@media (min-width: 760px) {
  .servico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; padding: 40px 44px; }
  .servico-placas { order: 0; width: min(100%, 400px); justify-self: end; }
  .servico p { font-size: 18px; }
}
/* no desktop, como no topo da página do serviço: a linha sai de baixo do texto (o ::after), corre até passar das placas,
   sobe e volta até a placa ciano. As placas têm altura fixa (260 px) para o ::after encontrar o começo do caminho delas:
   largura 260 × 600 / 404 = 386,1; o caminho começa em x 4 e corre em y 392 (7,7 px acima da base); traço 5 → 3,2 px */
@media (min-width: 960px) {
  .servico { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 330px; padding: 44px 480px 84px 44px; }
  .servico-placas { position: absolute; right: 56px; bottom: 30px; width: auto; height: 260px; }
  .servico::after { content: ""; position: absolute; left: 44px; right: 439.6px; bottom: 36.1px; height: 3.2px; border-radius: 2px 0 0 2px; background: #00B4FB; }
}

/* o AI Proven, o segundo serviço: claro como o AI Blueprint, com o logotipo e as divisas na tinta marinho (no tema
   escuro, a tinta clara) e o laranja na IA, como nos produtos. Ainda "Em breve": não é link e não sobe no toque */
.servico-proven { --t: #1B2A4E; }
:root[data-theme="dark"] .servico-proven { --t: #AFC0EA; }
.servico-proven .servico-logo { color: var(--t); }
.servico-proven .cat { color: var(--orange); }
:root[data-theme="dark"] .servico-proven .cat { color: var(--orange); }
.servico-proven .sig span { color: var(--orange); }
.servico-divisas { order: -1; width: auto; height: 120px; justify-self: center; color: var(--t); }
.servico .breve { margin-top: 8px; font-weight: 800; font-size: 15px; justify-self: start; color: var(--muted); }
.servico-breve:hover { border-color: var(--line); transform: none; box-shadow: none; }
@media (min-width: 760px) {
  .servico-proven { grid-template-columns: minmax(0, 1fr) auto; }
  .servico-divisas { order: 0; height: 150px; margin-right: 5vw; }
}
/* sem a linha ciano e sem o espaço das placas do AI Blueprint (o .servico de 960 px em diante) */
@media (min-width: 960px) {
  .servico-proven { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 0; padding: 44px; }
  .servico-proven::after { display: none; }
}

/* ---------- 5. um dia de trabalho: cinco cenas em traço; setas, horas e arraste trocam a cena (ver dia.js) ---------- */
.day { position: relative; z-index: 2; padding-block: clamp(90px, 13vh, 150px); border-top: 1px solid var(--line); }
.day .sec-intro { color: var(--muted); }
/* título, apoio e palco ficam presos juntos na rolagem: o cabeçalho é compacto para o bloco caber abaixo da navegação */
.day .sec-title { font-size: clamp(40px, 5.4vw, 88px); }
.day .sec-intro { margin-top: 16px; font-size: clamp(16px, 1.35vw, 20px); max-width: 46ch; }
/* no celular, o bloco preso precisa caber abaixo da navegação: espaços e números mais justos */
@media (max-width: 899px) {
  .day .sec-intro { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .day .stage { margin-top: 14px; }
  .day .stage-copy { padding: 14px 18px 16px; gap: 10px; }
  .day .story { gap: 10px; }
  .day .m-hour span { font-size: 38px; }
  .day .relato { font-size: 17px; }
}
@media (min-width: 900px) {
  .day-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 4vw; }
  .day-head .sec-title { max-width: none; white-space: nowrap; }
  .day-head .sec-intro { margin: 0 0 .35em; justify-self: end; }
}

/* o palco é um cartão de papel; as cores são fixas nos dois temas */
.stage {
  --fg: #141414; --muted: #6A6B73; --line: #DEDACF; --papel: #F0EEE6;
  margin-top: clamp(20px, 3.4vh, 36px); display: grid; overflow: hidden; outline: none;
  background: var(--papel); color: var(--fg); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 30px 60px -40px rgba(20, 20, 20, .5);
}
@media (min-width: 960px) { .stage { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); } }
.stage-art { position: relative; border-bottom: 1px solid var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (min-width: 960px) { .stage-art { border-bottom: 0; border-right: 1px solid var(--line); } }
/* as cenas ficam empilhadas; a de agora aparece por cima da anterior */
.quadro { position: relative; margin: 0; aspect-ratio: 1400 / 930; overflow: hidden; }
.quadro .cena { position: absolute; inset: 0; }
.quadro .cena svg { display: block; width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* antes / agora */
.antes-agora { justify-self: start; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(20, 20, 20, .06); }
.antes-agora button { font: 700 13px var(--font); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: background-color .3s, color .3s; }
.antes-agora button[aria-pressed="true"] { background: #FFFFFF; color: #141414; box-shadow: 0 1px 2px rgba(20, 20, 20, .12); }
.seta:disabled { opacity: .35; cursor: default; }
.seta:disabled:hover { border-color: #D9DAE0; }

.stage-copy { display: grid; grid-template-rows: 1fr auto auto; gap: clamp(14px, 2vh, 24px); padding: clamp(18px, 3vw, 40px); }
.stage-texts { display: grid; align-content: center; }
/* a troca de hora: o relato que sai some primeiro, o que entra aparece depois (nunca os dois juntos) */
.story { grid-area: 1 / 1; display: grid; gap: 16px; align-content: center; transition: opacity .3s ease .16s, visibility 0s 0s; }
.story[hidden] { display: grid !important; visibility: hidden; opacity: 0; transition: opacity .14s ease, visibility 0s .14s; }
.m-hour { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; display: flex; gap: 14px; align-items: baseline; }
.m-hour span { color: var(--orange); font-size: clamp(48px, 4.6vw, 72px); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.m-ia { margin: 0; font-size: 14px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.end-text { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; max-width: 18ch; }

/* relato: o jeito antigo riscado reto, linha por linha (o fundo cresce com --risco, de 0 a 1), o de agora embaixo */
.relato { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; letter-spacing: -.015em; }
.relato s {
  display: inline; color: color-mix(in srgb, var(--fg) 58%, transparent); font-weight: 300; text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 58% / calc(var(--risco, 1) * 100%) 2px;
}
.relato span { display: block; margin-top: 8px; font-weight: 700; }

/* controles: setas e as horas do dia, cada uma com a barrinha do tempo da cena */
.stage-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D9DAE0; background: transparent; color: #141414; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.seta:hover { border-color: #141414; }
.seta:active { background: #141414; color: #FFFFFF; }
.seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.horas button { width: 100%; padding: 6px 0 0; border: 0; background: none; cursor: pointer; display: grid; gap: 8px; font: 700 13px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; text-align: left; }
.horas button:hover, .horas button[aria-current="step"] { color: #141414; }
.horas i { display: block; height: 2px; background: #E6E7EC; position: relative; overflow: hidden; }
.horas i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(var(--p, 0)); }
.horas button.feito i::after { --p: 1; }

/* ---------- 7. como começar ---------- */
.steps { list-style: none; padding: 0; margin: clamp(48px, 8vh, 88px) 0 0; display: grid; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 3vw; } }
.steps .rule-h { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; }
.steps .rule-h::after { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--orange); }
.steps li { position: relative; padding: 32px 0 40px; display: grid; gap: 12px; align-content: start; }
.steps .n { font-size: clamp(48px, 4.4vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--orange); }
.steps h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.06; letter-spacing: -.035em; max-width: 14ch; }
.steps p { color: var(--muted); max-width: 34ch; }
/* canal: metade escura com a Buysoft, metade laranja com o convite; a divisa é a diagonal do isotipo */
.canal { margin-top: clamp(48px, 8vh, 88px); display: grid; border-radius: 20px; overflow: hidden; position: relative; isolation: isolate; }
.canal > div { position: relative; display: grid; gap: 22px; align-content: start; justify-items: start; padding: clamp(32px, 4vw, 64px); }
.canal p { font-size: clamp(18px, 1.5vw, 22px); max-width: 30ch; }
.canal-buysoft { --bg: var(--sooty); background-image: radial-gradient(120% 90% at 0% 0%, #2A2B31 0%, rgba(20, 20, 20, 0) 62%); }
.canal-buysoft p { color: var(--muted); }
/* selo Platinum: tipografia em tom de platina, que brilha devagar com a rolagem */
.canal .tier { margin: 0; display: grid; gap: 6px; width: 100%; padding-bottom: 22px; border-bottom: 1px solid rgba(241, 242, 246, .14); }
.tier small { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #A7A9B1; }
.tier strong {
  font-size: clamp(40px, 4vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: #D9DAE0;
  background: linear-gradient(105deg, #7E8089 0%, #C9CBD2 22%, #FFFFFF 38%, #A4A6AE 55%, #E9EAEE 74%, #8A8C95 100%);
  background-size: 250% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.canal-logo { height: clamp(40px, 3.8vw, 58px); width: auto; color: var(--fg); margin-top: 6px; }
.canal-revenda { overflow: hidden; }
.canal-revenda h3 { font-size: clamp(40px, 4.6vw, 76px); line-height: .94; letter-spacing: -.05em; position: relative; }
.canal-revenda p, .canal-revenda .btn { position: relative; }
.canal-iso { --mark: var(--sooty); position: absolute; right: -6%; bottom: -22%; width: min(44%, 260px); height: auto; opacity: .1; pointer-events: none; }
:root[data-theme="dark"] .canal { box-shadow: 0 0 0 1px #2C2D33; }
.btn-dark { background: var(--sooty); color: var(--solitude); }
.btn-dark:hover { background: var(--solitude); color: var(--sooty); }
@media (max-width: 899px) {
  .canal > .canal-revenda { margin-top: -28px; padding-top: calc(28px + clamp(32px, 4vw, 64px)); clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
}
@media (min-width: 900px) {
  .canal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; }
  .canal > div { grid-template-rows: auto auto auto 1fr; }
  .canal .btn { align-self: end; }
  .canal > .canal-revenda { grid-template-rows: auto auto 1fr; margin-left: -7vw; padding-left: calc(7vw + clamp(32px, 4vw, 64px)); clip-path: polygon(7vw 0, 100% 0, 100% 100%, 0 100%); }
}

/* ---------- 8. rodapé ---------- */
.foot { position: relative; z-index: 2; overflow: hidden; }
.foot-top { display: grid; gap: 40px; padding-block: 80px 40px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 96px; } }
.foot .logo { height: 22px; width: auto; color: var(--fg); }
.foot-id { display: grid; gap: 22px; align-content: start; }
.foot-contact { font-size: 15px; color: var(--muted); max-width: 44ch; }
.foot-contact a { color: var(--fg); border-bottom: 1px solid var(--orange); }
.foot nav { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot nav b { font-size: 15px; margin-bottom: 4px; }
.foot nav .foot-sub { margin-top: 14px; } /* "Serviço", embaixo dos produtos, na mesma lista */
.foot nav a { color: var(--muted); transition: color .2s; }
@media (hover: hover) { .foot nav a:hover { color: var(--fg); } } /* no toque, o hover ficaria preso no último link tocado */
/* a barra do rodapé corta a frase logo abaixo da linha de base: o ponto aparece inteiro, a perna do g não */
.foot-word { font-size: clamp(48px, 11.4vw, 220px); line-height: .8; letter-spacing: -.06em; font-weight: 800; white-space: nowrap; margin-bottom: .03em; }
.foot-word span { color: var(--orange); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); position: relative; z-index: 1; background: var(--bg); }
/* celular: contato em duas linhas, as duas listas lado a lado, a assinatura de ponta a ponta e o legal compacto */
@media (max-width: 899px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 20px; padding-block: 56px 36px; }
  .foot-id { grid-column: 1 / -1; gap: 18px; }
  .foot-contact { font-size: 14px; }
  .foot-contact a { display: block; width: fit-content; margin-top: 6px; font-size: 17px; }
  .foot nav { gap: 9px; font-size: 15px; }
  .foot nav b { font-size: 13px; letter-spacing: .02em; color: var(--fg); margin-bottom: 2px; }
  /* a frase ocupa a largura do conteúdo: a razão largura/fonte dela é 6,3 */
  .foot-word { font-size: calc((100vw - var(--gl) - var(--gr)) / 6.36); }
  .foot-legal { flex-direction: column; gap: 4px; padding-block: 16px 22px; font-size: 12px; line-height: 1.45; }
  #comecar { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}