/* =========================================================
   Landing do KaniCode — página única, sem dependências externas.
   Base escura neutra + verde-limão (o brilho do painel quando a IA age).
   Tipografia do ecossistema: Segoe UI Variable e Cascadia Mono.
   ========================================================= */

:root {
    --lima: #b6f24a;
    --lima-clara: #d7ff86;
    --lima-forte: #9ee02f;
    --lima-suave: rgba(182, 242, 74, .12);
    --laranja: #ff8c42;

    --bg-0: #070809;
    --bg-1: #0b0d0e;
    --bg-2: #111416;
    --bg-3: #171b1d;
    --linha: rgba(255, 255, 255, .08);
    --linha-2: rgba(255, 255, 255, .14);

    --texto: #f3f5ef;
    --texto-2: rgba(243, 245, 239, .66);
    --texto-3: rgba(243, 245, 239, .44);

    --raio-g: 20px;
    --raio-m: 14px;
    --raio-p: 9px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --fonte: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --fonte-titulo: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
    --limite: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    min-height: 100%;
    background: var(--bg-0);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* clip (e não hidden) para o cabeçalho grudento continuar funcionando */
    overflow-x: clip;
}

/* fundo: brilho verde no topo, grade discreta e vinheta */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(58% 44% at 78% -8%, rgba(158, 224, 47, .17), transparent 70%),
        radial-gradient(40% 34% at 0% 18%, rgba(255, 140, 66, .08), transparent 72%),
        var(--bg-0);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(80% 60% at 50% 0%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 35%, transparent 100%);
    pointer-events: none;
}

::selection { background: var(--lima); color: #0a0d07; }

a { color: inherit; text-decoration: none; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .88em; color: var(--lima-clara); }
img, svg { display: block; }

:focus-visible {
    outline: 2px solid var(--lima);
    outline-offset: 3px;
    border-radius: 4px;
}

.limite { width: min(100% - 44px, var(--limite)); margin-inline: auto; }

.pular {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--raio-p);
    background: var(--lima);
    color: #0a0d07;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform .2s var(--ease);
}
.pular:focus { transform: none; }

/* barra de progresso do scroll */
.progresso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: 2px;
    background: transparent;
}
.progresso i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lima-forte), var(--lima-clara));
    box-shadow: 0 0 12px rgba(182, 242, 74, .55);
}

/* ---------- topo ---------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.topo.rolou {
    background: rgba(7, 8, 9, .82);
    border-bottom-color: var(--linha);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.topo-linha {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 74px;
}

.marca { display: inline-flex; align-items: center; gap: 11px; }
.marca-simbolo { width: 38px; height: 38px; border-radius: 11px; }
.marca-nome {
    font: 700 21px/1 var(--fonte-titulo);
    letter-spacing: -.02em;
}
.marca-nome span { color: var(--lima); }

.menu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.menu a {
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--texto-2);
    font-size: 14.5px;
    transition: color .18s, background .18s;
}
.menu a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.menu a.bt { margin-left: 8px; }

.menu-botao {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
}
.menu-botao span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--texto);
    transition: transform .2s var(--ease), opacity .2s;
}
.menu[data-aberto="true"] { display: flex; }

/* ---------- botões ---------- */
.bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--lima);
    color: #0a0d07;
    font: 700 15px/1 var(--fonte);
    cursor: pointer;
    transition: transform .18s var(--ease), background .18s, box-shadow .18s, border-color .18s;
    box-shadow: 0 10px 30px -12px rgba(158, 224, 47, .7);
}
.bt svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bt:hover {
    transform: translateY(-2px);
    background: var(--lima-clara);
    box-shadow: 0 16px 38px -14px rgba(158, 224, 47, .85);
}
.bt:active { transform: translateY(0); }

.bt-fantasma {
    background: rgba(255, 255, 255, .04);
    border-color: var(--linha-2);
    color: var(--texto);
    box-shadow: none;
}
.bt-fantasma:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }

.bt-pequeno { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 9px; }

/* ---------- herói ---------- */
.heroi {
    position: relative;
    padding: clamp(52px, 8vw, 104px) 0 clamp(64px, 9vw, 118px);
    scroll-margin-top: 90px;
}
.heroi-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 11px;
    border: 1px solid rgba(182, 242, 74, .28);
    border-radius: 999px;
    background: rgba(182, 242, 74, .06);
    color: var(--lima-clara);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lima);
    box-shadow: 0 0 0 0 rgba(182, 242, 74, .6);
    animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(182, 242, 74, .55); }
    50% { box-shadow: 0 0 0 7px rgba(182, 242, 74, 0); }
}

.heroi h1 {
    margin-top: 22px;
    font: 750 clamp(44px, 6.4vw, 78px)/1.02 var(--fonte-titulo);
    letter-spacing: -.038em;
}
.realce {
    background: linear-gradient(100deg, var(--lima-clara), var(--lima-forte) 55%, #7fc21c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.chamada {
    max-width: 33rem;
    margin-top: 24px;
    color: var(--texto-2);
    font-size: clamp(16px, 1.35vw, 18px);
}
.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.nota { margin-top: 14px; color: var(--texto-3); font-size: 12.5px; }

.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--linha);
    list-style: none;
    color: var(--texto-3);
    font-size: 12.5px;
}
.selos li { display: flex; align-items: center; gap: 7px; }
.selos li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lima-forte);
}

/* terminal do herói */
.heroi-visual { position: relative; isolation: isolate; }
.heroi-visual::before {
    content: "";
    position: absolute;
    inset: -12% -8% -14%;
    z-index: -1;
    background: radial-gradient(60% 55% at 60% 40%, rgba(158, 224, 47, .18), transparent 70%);
    filter: blur(14px);
}

.terminal {
    position: relative;
    border: 1px solid var(--linha-2);
    border-radius: var(--raio-g);
    background: linear-gradient(180deg, #101416, #0a0c0d);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden;
}
.terminal-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--linha);
    background: rgba(255, 255, 255, .025);
}
.bolas { display: flex; gap: 6px; }
.bolas i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #33383a;
}
.bolas i:first-child { background: #ff6b5e; opacity: .8; }
.bolas i:nth-child(2) { background: #f5c451; opacity: .8; }
.bolas i:nth-child(3) { background: #63c76a; opacity: .8; }
.terminal-titulo {
    flex: 1;
    min-width: 0;
    color: var(--texto-3);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-vivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lima);
    font-size: 11px;
    font-weight: 600;
}
.ao-vivo i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lima);
    animation: pulsar 2s infinite;
}
.terminal-corpo {
    padding: 22px 20px 18px;
    font-family: var(--mono);
    font-size: 12.6px;
    line-height: 1.9;
}
.linha { color: var(--texto); }
.linha + .linha { margin-top: 1px; }
.dim { color: var(--texto-3); }
.ok { color: var(--lima); }
.prompt {
    display: inline-block;
    min-width: 52px;
    margin-right: 8px;
    color: var(--laranja);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.prompt.agente { color: var(--lima); }
.terminal-corpo b { color: var(--lima-clara); font-weight: 600; }
.cursor {
    display: inline-block;
    width: 7px;
    height: 15px;
    margin-left: 5px;
    vertical-align: -2px;
    background: var(--lima);
    animation: piscar 1.1s steps(2, start) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

.terminal-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--linha);
    background: rgba(255, 255, 255, .02);
    color: var(--texto-3);
    font-size: 11.5px;
}
.terminal-rodape > span { display: inline-flex; align-items: center; gap: 7px; }
.luz {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lima);
    box-shadow: 0 0 8px var(--lima);
}
.terminal-mono { font-family: var(--mono); }

.flutuante {
    position: absolute;
    right: -14px;
    bottom: -24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 11px;
    border: 1px solid rgba(182, 242, 74, .3);
    border-radius: 13px;
    background: rgba(14, 17, 18, .94);
    box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.flutuante-icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--lima-suave);
    color: var(--lima);
    font-size: 16px;
}
.flutuante b { display: block; font-size: 12.5px; }
.flutuante small { display: block; color: var(--texto-3); font-size: 10.5px; }

/* ---------- seções ---------- */
.secao {
    padding: clamp(64px, 9vw, 112px) 0;
    scroll-margin-top: 80px;
}
.olho {
    color: var(--lima);
    font: 700 11.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.secao-cab { max-width: 44rem; }
.secao-cab h2 {
    margin-top: 14px;
    font: 700 clamp(30px, 4vw, 46px)/1.1 var(--fonte-titulo);
    letter-spacing: -.028em;
}
.secao-sub { margin-top: 14px; color: var(--texto-2); }

/* sobre */
.sobre {
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent);
}
.sobre-grade {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.sobre-titulo h2 {
    margin-top: 14px;
    font: 700 clamp(30px, 3.6vw, 44px)/1.12 var(--fonte-titulo);
    letter-spacing: -.03em;
}
.sobre-texto p { color: var(--texto-2); }
.sobre-texto p + p { margin-top: 16px; }
.sobre-texto blockquote {
    margin-top: 26px;
    padding: 18px 22px;
    border-left: 2px solid var(--lima);
    border-radius: 0 var(--raio-m) var(--raio-m) 0;
    background: linear-gradient(90deg, var(--lima-suave), transparent 80%);
}
.sobre-texto blockquote p {
    color: var(--texto);
    font-size: 17px;
    line-height: 1.5;
}
.sobre-texto cite {
    display: block;
    margin-top: 7px;
    color: var(--texto-3);
    font-size: 12px;
    font-style: normal;
}

/* cartões */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.cartao {
    position: relative;
    padding: 24px 22px 22px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008));
    transition: border-color .22s, transform .22s var(--ease), background .22s;
}
.cartao:hover {
    transform: translateY(-3px);
    border-color: rgba(182, 242, 74, .32);
    background: linear-gradient(180deg, rgba(182, 242, 74, .05), rgba(255, 255, 255, .01));
}
.icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(182, 242, 74, .22);
    border-radius: 11px;
    background: var(--lima-suave);
    color: var(--lima);
}
.icone svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cartao h3 {
    margin-top: 16px;
    font: 650 17px/1.3 var(--fonte-titulo);
    letter-spacing: -.01em;
}
.cartao p { margin-top: 8px; color: var(--texto-2); font-size: 14px; line-height: 1.65; }

/* passos */
.passos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
    list-style: none;
    counter-reset: passo;
}
.passo {
    padding: 26px 24px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: rgba(255, 255, 255, .018);
}
.passo-num {
    display: block;
    color: var(--lima);
    font: 700 13px/1 var(--mono);
    letter-spacing: .1em;
}
.passo h3 {
    margin-top: 18px;
    font: 650 18px/1.3 var(--fonte-titulo);
}
.passo p { margin-top: 9px; color: var(--texto-2); font-size: 14px; }

/* plugins */
.plugins-painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid rgba(182, 242, 74, .18);
    border-radius: 26px;
    background:
        radial-gradient(70% 100% at 100% 0%, rgba(158, 224, 47, .1), transparent 65%),
        linear-gradient(180deg, #0f1213, #0a0c0d);
    box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .9);
}
.plugins-texto h2 {
    margin-top: 13px;
    font: 700 clamp(26px, 3.2vw, 38px)/1.14 var(--fonte-titulo);
    letter-spacing: -.028em;
}
.plugins-texto > p { margin-top: 16px; color: var(--texto-2); font-size: 15px; }
.lista-check {
    margin-top: 22px;
    list-style: none;
    display: grid;
    gap: 10px;
}
.lista-check li {
    position: relative;
    padding-left: 26px;
    color: var(--texto-2);
    font-size: 14px;
}
.lista-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--lima);
    font-weight: 700;
}

.codigo-caixa {
    border: 1px solid var(--linha-2);
    border-radius: var(--raio-m);
    background: #080a0b;
    overflow: hidden;
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
}
.codigo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--linha);
    color: var(--texto-3);
    font-size: 11.5px;
}
.copiar {
    padding: 6px 11px;
    border: 1px solid var(--linha-2);
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    color: var(--texto-2);
    font: 600 11.5px var(--fonte);
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}
.copiar:hover { color: var(--lima); border-color: rgba(182, 242, 74, .4); background: var(--lima-suave); }
.codigo-caixa pre {
    padding: 18px 16px;
    overflow-x: auto;
    font-size: 12.6px;
    line-height: 1.95;
    color: #dfe6d5;
    tab-size: 2;
}
.codigo-caixa code { color: inherit; font-size: inherit; }
.c-com { color: #5f6b57; }
.codigo-nota {
    padding: 0 16px 15px;
    color: var(--texto-3);
    font-size: 11.5px;
}

/* download */
.download-caixa {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid rgba(182, 242, 74, .26);
    border-radius: 26px;
    background: linear-gradient(115deg, #101408, #0b0d0e 55%);
    overflow: hidden;
}
.download-luz {
    position: absolute;
    right: -10%;
    top: -60%;
    width: 70%;
    height: 220%;
    background: radial-gradient(closest-side, rgba(158, 224, 47, .17), transparent 72%);
    pointer-events: none;
}
.download-texto { position: relative; }
.download-texto h2 {
    margin-top: 12px;
    font: 700 clamp(26px, 3.6vw, 40px)/1.12 var(--fonte-titulo);
    letter-spacing: -.03em;
    max-width: 22ch;
}
.download-texto > p {
    margin-top: 14px;
    max-width: 46ch;
    color: var(--texto-2);
    font-size: 15px;
}
.download-dados {
    position: relative;
    list-style: none;
    display: grid;
    gap: 2px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: rgba(0, 0, 0, .25);
    overflow: hidden;
}
.download-dados li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
}
.download-dados li + li { border-top: 1px solid var(--linha); }
.download-dados span { color: var(--texto-3); font-size: 12px; }
.download-dados b { font-size: 13px; font-weight: 600; text-align: right; }

/* dúvidas */
.acordeoes {
    margin-top: 36px;
    border-top: 1px solid var(--linha);
}
.acordeoes details { border-bottom: 1px solid var(--linha); }
.acordeoes summary {
    position: relative;
    padding: 20px 44px 20px 0;
    cursor: pointer;
    font: 600 16.5px/1.4 var(--fonte-titulo);
    list-style: none;
    transition: color .18s;
}
.acordeoes summary::-webkit-details-marker { display: none; }
.acordeoes summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lima);
    font: 400 24px/1 var(--fonte);
    transition: transform .2s var(--ease);
}
.acordeoes details[open] summary { color: var(--lima-clara); }
.acordeoes details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acordeoes summary:hover { color: var(--texto); }
.acordeoes details p {
    max-width: 68ch;
    padding: 0 20px 22px 0;
    color: var(--texto-2);
    font-size: 14.5px;
}

/* rodapé */
.rodape {
    border-top: 1px solid var(--linha);
    padding: 34px 0 44px;
    background: rgba(0, 0, 0, .2);
}
.rodape-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.rodape-marca { display: flex; align-items: center; gap: 12px; }
.rodape-marca .marca-simbolo { width: 34px; height: 34px; opacity: .92; }
.rodape-marca b { display: block; font-size: 14px; }
.rodape-marca small { display: block; color: var(--texto-3); font-size: 11.5px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px; }
.rodape-links a {
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--texto-3);
    font-size: 12.5px;
    transition: color .18s, background .18s;
}
.rodape-links a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }

/* ---------- revelar ao rolar ---------- */
.revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.revelar.visivel { opacity: 1; transform: none; }
/* o cartão já apareceu: volta ao hover rápido */
.cartao.visivel { transition: border-color .22s, transform .22s var(--ease), background .22s; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
    .heroi-grade,
    .sobre-grade,
    .plugins-painel,
    .download-caixa { grid-template-columns: 1fr; }

    .heroi-visual { margin-top: 10px; }
    .flutuante { right: 8px; bottom: -20px; }

    .plugins-painel { gap: 32px; }
    .download-dados { max-width: 420px; }
    .download-texto h2 { max-width: 30ch; }
}

@media (max-width: 760px) {
    .limite { width: calc(100% - 36px); }

    .menu-botao { display: flex; }
    .menu {
        position: absolute;
        top: 74px;
        left: 18px;
        right: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px;
        border: 1px solid var(--linha-2);
        border-radius: var(--raio-m);
        background: rgba(10, 12, 13, .98);
        box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .95);
    }
    .menu a { padding: 12px 14px; }
    .menu a.bt { margin: 6px 0 0; }

    .heroi h1 { font-size: clamp(38px, 12vw, 54px); }
    .acoes .bt { width: 100%; }
    .selos { gap: 8px 14px; }
    .terminal-corpo { font-size: 11.6px; padding: 18px 14px 14px; }
    .prompt { min-width: 46px; }
    .flutuante small { display: none; }
    .flutuante { padding: 9px 13px 9px 9px; }

    .passos { grid-template-columns: 1fr; }
    .rodape-linha { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    .heroi h1 { font-size: 36px; }
    .etiqueta { font-size: 11.5px; }
    .terminal-rodape { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .revelar { opacity: 1; transform: none; }
    .cursor { display: none; }
}

/* Refinamento visual: imagem editorial, contraste e ritmo entre assuntos. */
.menu a.bt:not(.bt-fantasma), .bt:not(.bt-fantasma),
.bt:not(.bt-fantasma):visited, .bt:not(.bt-fantasma):hover,
.bt:not(.bt-fantasma):focus-visible { color: #101609; }
.bt:focus-visible { outline: 3px solid #f3f5ef; outline-offset: 5px; }
.arte-agentes { position: relative; margin-top: 12px; margin-bottom: 64px; overflow: hidden; border: 1px solid var(--linha-2); border-radius: 24px; background: #070809; }
.arte-agentes img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.arte-agentes figcaption { position: absolute; bottom: 24px; left: 32px; font: 11px var(--mono); letter-spacing: .18em; color: #d7ff86; background: #070809c9; padding: 10px 14px; border-radius: 6px; }
#recursos, #plugins { background: linear-gradient(145deg, #111614d9, #0b0d0ee8); border-block: 1px solid var(--linha); }
#como { padding-block: 112px; }
#download { margin-block: 24px; background: radial-gradient(ellipse at 50% 50%, #24351b66, transparent 70%); }
.secao-cab { margin-bottom: 44px; }
@media (max-width: 640px) {
  .arte-agentes { margin-bottom: 32px; border-radius: 14px; }
  .arte-agentes img { min-height: 240px; object-fit: cover; }
  .arte-agentes figcaption { bottom: 12px; left: 12px; font-size: 9px; }
  #como { padding-block: 64px; }
}

.download { overflow: clip; }

.download-luz { right: 0; left: auto; max-width: 100%; transform: none; }

html { overflow-x: clip; }

/* Marca oficial e mascote livre na janela. */
.marca-simbolo { object-fit: contain; border-radius: 0; }
.kaniball { position: fixed; top: 0; left: 0; z-index: 35; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; will-change: transform; filter: drop-shadow(0 10px 14px #0008); }
.kaniball img { width: 100%; height: 100%; display: block; pointer-events: none; }
.kaniball:focus-visible { outline: 2px solid var(--lima); outline-offset: 6px; }
.kaniball-pausa { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #111609; color: #d7ff86; font: bold 11px/18px var(--mono); opacity: 0; }
.kaniball.pausada .kaniball-pausa, .kaniball:hover .kaniball-pausa { opacity: 1; }
@media (max-width: 640px) { .kaniball { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .kaniball { will-change: auto; } }