/* AtestAi (slug credenciais). Página estática: tudo de 'self', sem estilo inline, sem terceiros. Coluna 80%, fonte clamp(17px,1.3vw,32px), largura total abaixo de 900px. */
@font-face{font-family:Plex;src:url('fonts/plex-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('fonts/plex-sans-semibold.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:Mono;src:url('fonts/plex-mono-regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f7f4ec;--surface:#fff;--ink:#14253a;--muted:#4b5a6b;--line:#cfd6d6;--soft:#e9efe9;--accent:#0b6b63;--on-accent:#fff;--gold:#b88a2a;--focus:#0b6b63}
:root[data-theme=dark]{color-scheme:dark;--paper:#10201f;--surface:#183030;--ink:#edf5ef;--muted:#bcd0c8;--line:#41605a;--soft:#1d3a37;--accent:#83ddc9;--on-accent:#0d2523;--gold:#e0b45a;--focus:#a7ebdc}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Plex,Arial,sans-serif;font-size:clamp(17px,1.3vw,32px);line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.25em}
button{font:inherit;cursor:pointer;color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.5em 1em;z-index:10}
.skip:focus{left:8px;top:8px}
.wrap{width:80%;margin-inline:auto}
.mono,.eyebrow,.tag,.num{font-family:Mono,monospace;font-size:.7em;letter-spacing:.1em;text-transform:uppercase}
.eyebrow{color:var(--accent);margin:0 0 .8em}
h1,h2,h3{line-height:1.12;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2em,3.4vw,4em);margin-bottom:.45em}
h2{font-size:clamp(1.6em,2.3vw,2.6em);margin-bottom:.6em}
h3{font-size:1.1em;margin-bottom:.35em}
p{margin:0 0 1em}

.header{display:flex;align-items:center;gap:1.2em;padding-block:1em}
.brand{display:block;width:clamp(150px,13vw,300px)}
.brand img{width:100%}
.dark-logo{display:none}
:root[data-theme=dark] .light-logo{display:none}
:root[data-theme=dark] .dark-logo{display:block}
.nav{display:flex;gap:1.6em;margin-left:auto;font-size:.82em}
.nav a{text-decoration:none;padding:.3em 0}
.nav a:hover{text-decoration:underline}
.theme-toggle,.menu-toggle{border:1px solid var(--line);background:var(--surface);border-radius:2em;padding:.35em 1.1em;font-size:.82em;min-height:44px}
.menu-toggle{display:none}

.button{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:var(--on-accent);text-decoration:none;border-radius:.4em;padding:.7em 1.3em;border:2px solid var(--accent);min-height:44px}
.button.secondary{background:transparent;color:var(--accent)}
.button:hover{filter:brightness(1.1)}
.actions{display:flex;flex-wrap:wrap;gap:.8em;margin:1.2em 0 0}
.caption{margin:1.1em 0 0;color:var(--muted);font-size:.82em;display:flex;flex-wrap:wrap;gap:.7em;align-items:center}
.tag,.status{border:1px solid var(--accent);color:var(--accent);border-radius:2em;padding:.15em .8em}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,100px);align-items:center;padding-block:clamp(24px,3vw,80px)}
.scene{width:100%;height:auto;color:var(--ink)}
.what{display:grid;grid-template-columns:1fr 1fr;gap:1.6em;margin:0;padding:1.1em 1.3em;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:.5em;font-size:.88em;line-height:1.45}
.what h3{font-family:Mono,monospace;font-weight:400;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.what p{margin:0;color:var(--muted)}
.what ul{margin:0;padding-left:1.1em;display:grid;gap:.55em;color:var(--muted)}

.section{padding-block:clamp(32px,4vw,100px);border-top:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,48px)}
.steps li{border-top:2px solid var(--accent);padding-top:.8em}
.steps p{color:var(--muted);font-size:.88em;margin:0}
.num{color:var(--gold);display:block;margin-bottom:.4em}
.note{max-width:62em;color:var(--muted);margin-top:1.4em}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,72px)}
.card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:.5em;padding:1.2em 1.4em}
.card p,.card li{color:var(--muted);font-size:.9em}
.card ul{margin:0;padding-left:1.1em;display:grid;gap:.45em}
.price{background:var(--soft)}
.demo{background:var(--soft);border-top:1px solid var(--line)}
.demo .wrap{padding-block:clamp(32px,4vw,100px)}
.footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em;padding-block:2em;border-top:1px solid var(--line);font-size:.82em;color:var(--muted)}
.footer p{margin:0 0 .4em}
.footer a{margin-right:1.2em}

/* cena: o movimento vive só aqui (transform/opacity); o estado final é o padrão, então sem movimento a cena aparece completa */
.c-paper{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.c-frame{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 5}
.ink{fill:var(--ink);transform-box:fill-box;transform-origin:left center}
.ink.soft{fill:var(--line)}
.q{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.qf{fill:none;stroke:var(--ink);stroke-width:4}
.qd{fill:var(--ink)}
.scan{fill:var(--accent)}
.seal-bg{fill:var(--gold)}
.seal-ring{fill:none;stroke:var(--surface);stroke-width:2}
.seal-ck{fill:none;stroke:var(--surface);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ok-bg{fill:var(--accent)}
.ok-dot{fill:var(--on-accent)}
.ok-ck{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ok-tx{fill:var(--on-accent);font-family:Plex,Arial,sans-serif;font-size:15px;font-weight:600}
.seal,.ok,.qr,.scan{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
.l1,.l2,.l3,.l4,.l5{animation:line 9s ease-out infinite}
.l2{animation-delay:.25s}.l3{animation-delay:.5s}.l4{animation-delay:.75s}.l5{animation-delay:1s}
.seal{animation:seal 9s ease-out infinite}
.qr{animation:qr 9s ease-out infinite}
.scan{animation:scan 9s linear infinite}
.ok{animation:ok 9s ease-out infinite}
}
@keyframes line{0%{transform:scaleX(0)}12%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes seal{0%,24%{opacity:0;transform:scale(1.9) rotate(-14deg)}31%{opacity:1;transform:scale(.93)}35%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes qr{0%,38%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}
@keyframes scan{0%,52%{opacity:0;transform:translateY(0)}54%{opacity:1}66%{opacity:1;transform:translateY(60px)}68%,100%{opacity:0;transform:translateY(60px)}}
@keyframes ok{0%,70%{opacity:0;transform:translateY(12px) scale(.9)}77%,92%{opacity:1;transform:none}100%{opacity:0}}

@media(max-width:899px){
.wrap{width:auto;margin-inline:16px}
.hero{grid-template-columns:minmax(0,1fr)}
.what{grid-template-columns:1fr}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.two,.footer{grid-template-columns:minmax(0,1fr)}
.menu-toggle{display:inline-block;margin-left:auto}
.nav{display:none;position:absolute;left:16px;right:16px;top:70px;z-index:5;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:.5em;padding:.4em 1em;font-size:1em}
.nav.open{display:flex}
.nav a{padding:.7em 0}
.header{position:relative}
}
@media(max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}