html { scroll-behavior: smooth; }
        body { overflow-x: hidden; background: #08090b; }

        /* Grão de filme. É o que impede o fundo escuro de parecer um
           retângulo morto de CSS — dá textura sem pedir imagem. */
        .grao::after {
            content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* Revelação no scroll. Sem biblioteca: IntersectionObserver troca
           uma classe. Quem pediu menos movimento no sistema já nasce
           revelado — a animação nunca esconde conteúdo dessa pessoa. */
        .rev { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
        .rev.vis { opacity: 1; transform: none; }
        .rev-d1 { transition-delay: .09s } .rev-d2 { transition-delay: .18s }
        .rev-d3 { transition-delay: .27s } .rev-d4 { transition-delay: .36s }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .rev { opacity: 1; transform: none; transition: none; }
        }

        .risco { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
        .num { font-variant-numeric: tabular-nums; }
        .display { line-height: .92; letter-spacing: -.035em; }
        .rail-on { color: #faf9f7; }
        .rail-on .rail-bar { width: 34px; background: #e79f1f; }

.mascote-shadow {
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.5))
          drop-shadow(0 0 60px rgba(231,159,31,.28));
}