*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: #02010a;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: #02010a;
    color: #eeeaff;
    /* `clip` e não `hidden`: com `hidden` o body vira caixa de rolagem de verdade
       (o eixo Y passa a `auto`) e engole a cadeia de rolagem do toque. Mesmo
       raciocínio do site.css — aqui só repetido porque esta regra vem depois e
       venceria a de lá. `hidden` fica de fallback para navegador sem `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* ── Gradiente de texto ── */
.text-gradient {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-teal {
    background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 60%, #0d9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Seções decorativas não podem virar caixa de rolagem ──
   Várias seções usam `overflow-hidden` (Tailwind) só para conter os "orbs":
   divs absolutas de 400–700px posicionadas com deslocamento negativo. Só que
   `hidden` cria CAIXA DE ROLAGEM, e essas seções de fato têm overflow (o orb
   que sobra por baixo). No celular o dedo que começa na primeira dobra tentava
   rolar a SEÇÃO — que não rola, porque o overflow está escondido — e a cadeia
   morria no `overscroll-behavior-y: none` que o body ganha no mobile: a landing
   simplesmente não descia. `clip` recorta igual e não cria caixa de rolagem.
   O `!important` é obrigatório: quem aplica o `overflow-hidden` aqui não é o
   Tailwind, e sim o utilitário de mesmo nome do bootstrap.min.css (que o
   _Layout carrega em toda página), e lá ele já vem com `!important`. */
section.overflow-hidden {
    /* Recorta SÓ o eixo X. No eixo Y o brilho precisa vazar para a seção vizinha:
       o `.orb` é um círculo com `filter: blur(80px)` posicionado para fora da seção
       (`bottom-[-80px]`), e recortá-lo no vertical corta o desfoque numa RETA — é o
       que fazia aparecer uma linha nítida na emenda entre Hero e Features. Vazando,
       o brilho atravessa a borda e a transição fica contínua.
       `clip` e não `hidden` porque só ele existe por eixo: `overflow-x: hidden` com
       `overflow-y: visible` faz o `visible` virar `auto` (regra do próprio CSS), a
       seção vira caixa de rolagem e volta o bug de scroll no celular que o comentário
       acima descreve. Por isso aqui não há fallback para `hidden` — ele seria pior
       que o problema. `clip` tem suporte universal desde 2022. */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Exceção: a ÚLTIMA seção volta a recortar no vertical. Vazar entre seções é o
   objetivo; vazar para fora do conteúdo, não. O orb do CTA final tem 700px e o
   desfoque dele se espalha ~150px além da caixa, cobrindo a faixa inteira do
   footer (97px) — a região acendia e o footer parecia enorme. Ali a divisa é
   proposital: o footer já tem `border-t` marcando a linha, então cortar nela lê
   como intenção, não como falha. Mesma especificidade da regra acima, então esta
   precisa vir DEPOIS para vencer. */
section:last-of-type {
    overflow-y: clip !important;
}

/* ── Canvas de fundo ── */
#hero-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #02010a;
}

::-webkit-scrollbar-thumb {
    background: #3b1d8a;
    border-radius: 4px;
}

/* ── Código SQL animado ── */
.sql-block {
    background: rgba(6,3,24,0.9);
    border: 0.5px solid rgba(124,58,237,0.3);
    border-radius: 12px;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.9;
    position: relative;
    overflow: hidden;
}

    .sql-block::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #7c3aed, #2dd4bf, transparent);
    }

    .sql-block .scan-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(transparent, rgba(124,58,237,0.06), transparent);
        animation: scan 3s linear infinite;
        pointer-events: none;
    }

/* Tokens SQL */
.kw {
    color: #c084fc;
}

.fn {
    color: #60a5fa;
}

.str {
    color: #86efac;
}

.num {
    color: #fcd34d;
}

.op {
    color: #f0abfc;
}

.cm {
    color: #4a4068;
    font-style: italic;
}

.tbl {
    color: #2dd4bf;
}

.col {
    color: #eeeaff;
}

/* ── Tech badge ── */
.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(124,58,237,0.1);
    border: 0.5px solid rgba(124,58,237,0.3);
    border-radius: 100px;
    padding: 6px 14px;
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #c4b5fd;
    transition: all 0.2s;
}

    .tech-badge:hover {
        background: rgba(124,58,237,0.22);
        border-color: rgba(167,139,250,0.55);
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(124,58,237,0.25);
    }

/* ── Feature card ── */
.feat-card {
    background: linear-gradient(135deg, rgba(14,11,30,0.9), rgba(6,3,24,0.95));
    border: 0.5px solid rgba(100,70,200,0.22);
    border-radius: 16px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

    .feat-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,0.08), transparent 60%);
        opacity: 0;
        transition: opacity 0.3s;
        /* Brilho decorativo: cobre o card inteiro e, por ser posicionado, e pintado
           ACIMA do conteudo. Sem esta linha ele engolia o clique de qualquer link
           dentro do card - foi o que deixou o botao "Baixar o SiriusBridge" morto
           (e so ele: e o unico elemento interativo dentro de um .feat-card).
           O brilho continua seguindo o mouse: quem escuta o mousemove e o card. */
        pointer-events: none;
    }

    .feat-card:hover::after {
        opacity: 1;
    }

    .feat-card:hover {
        border-color: rgba(167,139,250,0.45);
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(124,58,237,0.12);
    }

/* ── Shortcut key ── */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,11,30,0.9);
    border: 1px solid rgba(100,70,200,0.35);
    border-bottom: 2px solid rgba(100,70,200,0.55);
    border-radius: 6px;
    padding: 4px 10px;
    min-width: 36px;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: #c4b5fd;
    box-shadow: 0 2px 0 rgba(100,70,200,0.3);
}

/* ── Planet orbit ── */
.orbit-ring {
    border: 0.5px solid rgba(167,139,250,0.15);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* ── Nav ── */
.hm-nav {
    left: 0;
    right: 0;
    background: rgba(2,1,10,0.85);
    backdrop-filter: blur(20px);
    border-bottom: 0.5px solid rgba(100,70,200,0.18);
}

/* Logo + botão de toggle da sidebar na navbar da Home.
   Quando a sidebar existe e está expandida, esse grupo é "empurrado" pra
   direita (translateX), saindo de baixo da sidebar (que tem z-index maior) —
   sem empurrar o resto do conteúdo da navbar nem da página. Usa as classes
   de estado do body (já alternadas pelo site.js) em vez de custom property,
   pra garantir que o deslocamento sempre aconteça de forma determinística. */
.hm-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transform: translateX(0);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-sidebar:not(.sidebar-ghost) .hm-brand {
    transform: translateX(260px);
}

/* ── Section divider ── */
.section-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, #2dd4bf);
    border-radius: 2px;
}

/* ── Timeline ── */
.timeline-line {
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(124,58,237,0.4) 20%, rgba(124,58,237,0.4) 80%, transparent);
}

/* ── Glow orb ── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

/* ── Reveal animations ── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

    .reveal-right.visible {
        opacity: 1;
        transform: translateX(0);
    }