/* Suavização do scroll agora é feita pelo ScrollSmoother (js/scroll-smoother-init.js) — deixar
   scroll-behavior:smooth aqui também faria os dois "brigarem" pelo controle da rolagem. */
body {
    font-family: 'Switzer', 'Inter', sans-serif;
}
.hero-bg {
    background:
        radial-gradient(ellipse at 75% 15%, rgba(255, 77, 0, 0.10) 0%, transparent 45%),
        #0c0c0c;
}
.btn-group {
    background: rgba(216, 216, 212, 0.05);
    border: 1px solid rgba(216, 216, 212, 0.12);
    padding: 6px;
}

/* Diagrama de automação: grid de pontos de fundo */
.flow-dot-grid {
    background-image: radial-gradient(#1f1f1f 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Cards do hero: leve flutuação aleatória (cada card com amplitude/duração/atraso
   diferentes, pra não ficarem sincronizados e parecer "mecânico") */
#hero-card-1 { animation: heroFloat1 7.5s ease-in-out infinite; }
#hero-card-2 { animation: heroFloat2 9s ease-in-out infinite; animation-delay: -2.5s; }
#hero-card-3 { animation: heroFloat3 8.2s ease-in-out infinite; animation-delay: -5s; }
@keyframes heroFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, -7px) rotate(0.6deg); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-6px, 6px) rotate(-0.7deg); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(4px, 8px) rotate(0.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    #hero-card-1, #hero-card-2, #hero-card-3, .sobre-badge { animation: none; }
}

/* Sobre: selo circular que gira sem parar, puramente decorativo (não depende de scroll nem de
   GSAP), igual ao selo "OPEN FOR SELECT PROJECTS" do catalinvintila.design. */
.sobre-badge {
    animation: sobreBadgeSpin 12s linear infinite;
}
@keyframes sobreBadgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Título do hero: cada linha é animada via GSAP/ScrollTrigger (JS no fim do arquivo),
   deslizando levemente pro lado conforme a página rola. display:block preserva a quebra
   de linha que antes vinha do <br>, e overflow-hidden na section evita barra de rolagem
   horizontal enquanto as linhas se movem. letter-spacing aqui sobrescreve o tracking-tighter
   do <h1> (a letter-spacing declarada direto no elemento sempre vence a herdada do pai),
   abrindo o espaço entre as letras. margin-top cria um respiro extra entre cada frase, além
   do que o leading do <h1> já dá. */
.hero-line {
    display: block;
    will-change: transform;
}
.hero-line + .hero-line {
    margin-top: 0.1em;
}

/* Navbar: link reto, uppercase, sem pílula de fundo — sublinhado fino crescendo da
   esquerda pra direita no hover, no espírito editorial da referência */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 250ms ease-out;
}
.nav-link:hover::after {
    transform: scaleX(1);
}

/* Card de vendas: destaca a linha e a área do gráfico ao passar o mouse por cima */
.sales-line {
    transition: stroke-width 200ms ease, filter 200ms ease;
}
.sales-area {
    opacity: 0.8;
    transition: opacity 200ms ease;
}
#sales-chart-svg:hover .sales-line {
    stroke-width: 4;
    filter: drop-shadow(0 0 8px rgba(255, 138, 77, 0.55));
}
#sales-chart-svg:hover .sales-area {
    opacity: 1;
}

/* Módulos do sistema: nós da árvore e pontos de conexão */
.tree-node,
.tree-child,
#tree-root,
#tree-overview {
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
    cursor: default;
}
.tree-node {
    background: #161616;
    border: 1px solid rgba(216, 216, 212, 0.15);
    color: #d8d8d4;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 18px;
    white-space: nowrap;
}
.tree-child {
    background: rgba(22, 22, 22, 0.6);
    border: 1px solid rgba(216, 216, 212, 0.1);
    color: rgba(216, 216, 212, 0.65);
    font-size: 12px;
    padding: 8px 16px;
    white-space: nowrap;
}
/* Hover: cada nó ganha destaque e "levanta" um pouco, pra não ficar estático */
.tree-node:hover,
.tree-child:hover {
    border-color: rgba(255, 77, 0, 0.6);
    background: rgba(255, 77, 0, 0.12);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
#tree-root:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(255, 77, 0, 0.35);
}
#tree-overview:hover {
    border-color: rgba(255, 77, 0, 0.5);
    transform: translateY(-3px);
}
.tree-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    transform: translate(-50%, -50%);
}

/* Navbar: estado "encolhido" ao rolar a página — mais reto/editorial que uma pílula,
   só ganha um fundo opaco e uma borda inferior mais visível */
#site-nav {
    width: 100%;
    transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
#site-nav.nav-scrolled {
    background-color: rgba(12, 12, 12, 0.92);
    border-color: rgba(216, 216, 212, 0.1);
    backdrop-filter: blur(6px);
}
/* Nav sobre fundo claro: enquanto a seção "Sobre" estiver atrás da nav (ver js/navbar-scroll.js),
   o texto (pensado pro fundo escuro do hero) precisa virar escuro pra continuar legível. O
   seletor com #site-nav garante especificidade suficiente pra vencer as utilities text-paper/*
   do Tailwind sem precisar de !important. O link "Contato" (laranja) fica de fora — laranja já
   funciona em cima de claro ou escuro.
   Bug corrigido aqui: só trocar a cor do TEXTO pra escuro não bastava — o fundo da nav
   continuava vindo de #site-nav.nav-scrolled (preto a 92%), então virava texto escuro em cima
   de fundo escuro, quase invisível (e por isso "difícil de clicar": dava pra clicar, só não dava
   pra ver onde). O fundo também precisa virar claro aqui; mesma especificidade de
   #site-nav.nav-scrolled, então por vir depois no arquivo já venceria, mas o seletor combinado
   deixa isso explícito em vez de depender da ordem. */
#site-nav.nav-on-light {
    background-color: rgba(216, 216, 212, 0.94);
    border-color: rgba(12, 12, 12, 0.08);
}
#site-nav.nav-on-light,
#site-nav.nav-on-light .nav-link,
#site-nav.nav-on-light button {
    color: #0c0c0c;
}
#site-nav.nav-on-light .nav-link.text-signal-orange {
    color: #ff4d00;
}

/* Menu mobile: painel que desce logo abaixo da barra (ver #mobile-menu no HTML e
   js/mobile-menu.js, que alterna a classe .is-open). Antes não existia nenhum painel — o botão
   de hambúrguer não tinha função alguma, então em telas <lg não dava pra acessar os links da
   navbar de jeito nenhum. Fica sempre no tema escuro da nav "scrolled", independente da seção
   por trás, porque é um painel sólido (quase opaco) sobre o conteúdo, não uma barra translúcida
   como a nav no desktop. */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(12, 12, 12, 0.97);
    border-top: 1px solid rgba(216, 216, 212, 0);
    transition: max-height 260ms ease, border-color 260ms ease;
}
.mobile-menu.is-open {
    max-height: 24rem;
    border-top-color: rgba(216, 216, 212, 0.08);
}
.mobile-menu-link {
    display: block;
    padding: 0.9rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(216, 216, 212, 0.7);
    border-bottom: 1px solid rgba(216, 216, 212, 0.06);
}
.mobile-menu-link:last-child {
    border-bottom: none;
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
    color: #d8d8d4;
}
.mobile-menu-link--accent {
    color: #ff4d00;
}

/* Como a Nexus trabalha: nó apagado por padrão, acende em laranja quando o traço da linha do
   tempo (desenhada ao vivo via scroll, ver js/metodo-layout.js e js/metodo-reveal.js) alcança
   ele. Ponto que corre na ponta do traço começa escondido — só aparece enquanto o trecho do
   método está "em desenho" no scroll, sumindo de novo quando a linha termina. */
.metodo-node,
.metodo-label {
    transition: border-color 300ms ease, background-color 300ms ease, transform 300ms ease, color 300ms ease;
}
.metodo-node.is-active {
    border-color: #ff4d00;
    background: rgba(255, 77, 0, 0.18);
    transform: scale(1.3);
}
.metodo-label.is-active {
    color: #ff4d00;
}
.metodo-cursor {
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 200ms ease;
}

/* Prova social: card levanta e a borda acende em laranja no hover, mesma linguagem de
   interação já usada em .tree-node/.tree-child (módulos do sistema). */
.testimonial-card {
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 77, 0, 0.4);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* Por que escolher a Nexus: cada item recolhe a descrição por padrão. grid-template-rows:0fr é
   o truque que anima uma altura "auto" com transição suave (max-height precisaria de um valor
   chutado em px); o overflow-hidden no filho é obrigatório pro truque funcionar. Cada item abre
   sozinho enquanto passa pela faixa central da tela no scroll (ver js/porque-nexus-reveal.js),
   sem pin — e acende o número/ícone/título em laranja pra marcar qual está em foco. */
.porque-collapse {
    grid-template-rows: 0fr;
    transition: grid-template-rows 450ms ease;
}
.porque-item.is-open .porque-collapse {
    grid-template-rows: 1fr;
}
.porque-num,
.porque-icon,
.porque-title {
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.porque-item.is-open .porque-num {
    background: #ff4d00;
    color: #0c0c0c;
}
.porque-item.is-open .porque-icon {
    border-color: #ff4d00;
    color: #ff4d00;
    background: rgba(255, 77, 0, 0.1);
}
.porque-item.is-open .porque-title {
    color: #ff4d00;
}

/* Botão "líquido": só a borda em repouso, sem fundo. A onda (.liquid-btn-wave) é animada via
   GSAP em js/liquid-buttons.js — aqui só o estado de repouso e o corte que esconde a onda
   fora do botão. Sem GSAP, o botão continua um botão normal (borda + texto laranja, só sem
   a animação de preenchimento). */
.liquid-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
    border: 2px solid #ff4d00;
    color: #ff4d00;
    cursor: pointer;
}
.liquid-btn-fill {
    position: absolute;
    inset: -100% 0 0 0;
    height: 300%;
    color: #ff4d00;
    pointer-events: none;
}
.liquid-btn-wave {
    display: block;
    width: 100%;
    height: 100%;
}
.liquid-btn-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/* Relógio "tempo é dinheiro": pontos e ponteiro posicionados via JS (offsetLeft/trigonometria,
   nada de coordenada chutada — ver js/relogio-reveal.js) sobre esse palco de altura fixa. Dot
   acende em laranja conforme o progresso do scroll alcança ele, igual ao padrão já usado no
   timeline de "Como a Nexus trabalha". */
.relogio-stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 60vh;
    max-height: 560px;
    min-height: 380px;
}
.relogio-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: rgba(216, 216, 212, 0.2);
    transform: translate(-50%, -50%);
    transition: background-color 300ms ease, transform 300ms ease;
}
.relogio-dot--large {
    width: 11px;
    height: 11px;
}
.relogio-dot.is-active {
    background: #ff4d00;
    transform: translate(-50%, -50%) scale(1.2);
}
.relogio-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    background: linear-gradient(to top, rgba(216, 216, 212, 0.6), rgba(216, 216, 212, 0));
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(0deg);
}
/* Ponteiro das horas: mais curto, gira 1 volta ao longo do scroll travado (setHandRotation em
   relogio-reveal.js). O dos minutos é mais comprido e mais aceso (laranja), girando 2x mais
   rápido — mesma proporção 1:2 vista no site de referência, não a proporção real de um relógio,
   mas o suficiente pra ler os dois como "horas" e "minutos" à primeira vista. */
.relogio-hand--hour {
    height: 30%;
}
.relogio-hand--minute {
    height: 42%;
    background: linear-gradient(to top, rgba(255, 77, 0, 0.7), rgba(255, 77, 0, 0));
}
.relogio-center {
    pointer-events: none;
}

/* H2 de destaque: perspective pro rotationX de cada letra (ver js/split-heading-reveal.js)
   parecer um "flip" 3D sutil em vez de uma rotação achatada. */
.split-heading {
    perspective: 500px;
}
.split-char {
    transform-style: preserve-3d;
}