/* ════════════════════════════════════════════════════════════════
   Seções abaixo do console. Mesmos tokens do console /v3.
   Animação só em transform/opacity, e só enquanto a seção está na tela
   (.sx.inview, ligado pelo sections.js).
   ════════════════════════════════════════════════════════════════ */
.sx { position: relative; z-index: 1; padding: 130px 0 0; }
.sx.small { padding-top: 90px; }
.sx:not(.inview) *, .sx:not(.inview) *::before, .sx:not(.inview) *::after { animation-play-state: paused !important; }
.sx h2 { font-family: var(--grotesk); font-weight: 700; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.03em; margin-top: 14px; max-width: 820px; }
.sx h2 em { font-style: normal; }
.sx .intro { margin-top: 16px; color: var(--text2); font-size: 16.5px; max-width: 660px; }
.sx-head { margin-bottom: 44px; }
.sx-head.center { text-align: center; } .sx-head.center h2, .sx-head.center .intro { margin-left: auto; margin-right: auto; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.on { opacity: 1; transform: none; }
.mut { color: var(--muted); }
.kh2 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--muted); }
button { font: inherit; color: inherit; }

/* 1 · reconhecimento */
.recon { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: stretch; }
.recon-log { border-radius: 14px; background: #05070B; border: 1px solid rgba(255,68,68,.22); overflow: hidden; display: flex; flex-direction: column; min-height: 380px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.rl-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,68,68,.06); border-bottom: 1px solid rgba(255,68,68,.16); font-size: 10.5px; color: #ff8a8a; letter-spacing: .06em; }
.rl-bar .dots { display: flex; gap: 6px; } .rl-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.rl-body { flex: 1; padding: 16px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: #c9d1dc; overflow: hidden; position: relative; }
.rl-l { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s, background .3s, border-color .3s; border-radius: 5px; padding: 1px 8px; border-left: 2px solid transparent; overflow-wrap: anywhere; }
.rl-l.on { opacity: 1; transform: none; }
.rl-cmd { color: #ff7a7a; }
.rl-out { color: #8b97ab; }
.rl-l.lit { background: color-mix(in srgb, var(--c) 12%, transparent); border-left-color: var(--c); }
.rl-l.lit .rl-out { color: var(--text2); }
.rl-end { margin-top: 10px; }
.rl-cur { display: inline-block; width: 7px; height: 14px; background: #ff7a7a; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.recon-list { display: flex; flex-direction: column; gap: 10px; }
.rc { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease); position: relative; overflow: hidden; }
.rc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); opacity: .5; transition: opacity .25s; }
.rc:hover, .rc.on { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 5%, var(--card)); transform: translateX(4px); }
.rc:hover::before, .rc.on::before { opacity: 1; }
.rc-ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.rc b { font-family: var(--grotesk); font-size: 15.5px; font-weight: 600; }
.rc p { font-size: 13px; color: var(--text2); margin-top: 2px; line-height: 1.5; }
@media (max-width: 900px) { .recon { grid-template-columns: 1fr; } .recon-log { min-height: 300px; } }

/* 2 · órbita: a Arkadia é o sol, as 4 frentes num anel fixo e as funcionalidades num anel que gira */
.orbit { display: grid; grid-template-columns: 520px 1fr; gap: 36px; align-items: center; }
.orb-map { position: relative; width: 520px; height: 520px; --rMain: 150px; --rMini: 222px; --spin: 160s; }
.orb-rings { position: absolute; left: 10px; top: 10px; width: 500px; height: 500px; }
.orb-rings circle { fill: none; stroke: rgba(24,171,227,.14); stroke-dasharray: 3 7; }
.orb-rings circle:last-child { stroke: rgba(255,145,77,.13); stroke-dasharray: 2 9; }
.orb-sun { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; display: flex; align-items: center; justify-content: center; }
.sun-glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,222,89,.16) 0%, rgba(255,145,77,.12) 30%, rgba(24,171,227,.05) 55%, transparent 70%); animation: sunPulse 5s ease-in-out infinite; }
@keyframes sunPulse { 50% { transform: scale(1.08); opacity: .85; } }
.orb-sun img { position: relative; width: 84px; height: 84px; object-fit: contain; animation: spin 26s linear infinite; filter: drop-shadow(0 0 18px rgba(255,145,77,.35)); }
.orb-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: none; background: none; transform: rotate(var(--a)) translate(var(--rMain)) rotate(calc(-1 * var(--a))); cursor: pointer; z-index: 2; }
.orb-node .pl { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 22%, var(--card)), var(--card) 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: border-color .25s, box-shadow .25s; }
.orb-node .pl > span { color: var(--c); display: flex; }
.orb-node b { font-size: 10.5px; font-weight: 600; color: var(--text2); white-space: nowrap; }
.orb-node:hover .pl, .orb-node.on .pl { border-color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 11%, transparent), 0 0 24px color-mix(in srgb, var(--c) 30%, transparent); }
.orb-node.on b { color: var(--text); }
.orb-rot { position: absolute; inset: 0; animation: spin var(--spin) linear infinite; }
.orb-rot .orb-node { transform: rotate(var(--a)) translate(var(--rMini)) rotate(calc(-1 * var(--a))); }
.orb-rot .orb-node .pl { left: -26px; top: -26px; width: 52px; height: 52px; gap: 1px; animation: spin var(--spin) linear infinite reverse; }
.orb-rot .orb-node b { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--dim); background: rgba(7,9,14,.8); padding: 1px 5px; border-radius: 4px; }
.orb-rot .orb-node.on b, .orb-rot .orb-node:hover b { color: var(--text); }
.orb-map:hover .orb-rot, .orb-map:hover .orb-rot .pl, .orb-map.hold .orb-rot, .orb-map.hold .orb-rot .pl { animation-play-state: paused; }
.orb-panel { min-height: 360px; }
.op { animation: newin .45s var(--ease) both; }
.op .op-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--c); }
.op h3 { font-family: var(--grotesk); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 8px; }
.op > p { color: var(--text2); font-size: 15px; max-width: 520px; }
.op ul { list-style: none; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; max-width: 560px; }
.op li { font-size: 13.5px; color: var(--text2); display: flex; gap: 8px; align-items: flex-start; }
.op li::before { content: '›'; color: var(--c); font-family: var(--mono); }
.op .op-how { margin-top: 20px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); max-width: 560px; font-size: 13px; color: var(--text2); }
.op .op-how b { color: var(--text); }
.op .op-how .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--c); display: block; margin-bottom: 2px; }
.orb-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .06em; }
@keyframes newin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1080px) { .orbit { grid-template-columns: 1fr; justify-items: center; } .orb-panel { min-height: 0; justify-self: stretch; } }
@media (max-width: 580px) {
  .orb-map { width: 340px; height: 340px; --rMain: 96px; --rMini: 146px; }
  .orb-rings { left: 5px; top: 5px; width: 330px; height: 330px; }
  .orb-sun { width: 100px; height: 100px; margin: -50px 0 0 -50px; } .orb-sun img { width: 56px; height: 56px; }
  .orb-node .pl { left: -30px; top: -30px; width: 60px; height: 60px; } .orb-node b { font-size: 9px; }
  .orb-rot .orb-node .pl { left: -19px; top: -19px; width: 38px; height: 38px; } .orb-rot .orb-node b { display: none; }
  .op ul { grid-template-columns: 1fr; }
}
/* 360px: o mapa de 340px fixos + margens transbordava 4px e cortava o painel; zoom reduz também a caixa */
@media (max-width: 380px) { .orb-map { zoom: .9; } }
/* 320–350px: a órbita (340px) e a roda do ciclo (300px + botões saindo 21px de cada lado) transbordavam 25px */
@media (max-width: 350px) { .orb-map { zoom: .82; } .cyc-wheel { zoom: .85; } }

/* 3 · simulador */
.sim { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.sim-list { display: flex; flex-direction: column; gap: 8px; }
.sr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s, opacity .3s; user-select: none; }
.sr:hover { border-color: rgba(34,211,118,.4); }
.sr .sw { width: 38px; height: 22px; border-radius: 11px; background: rgba(136,147,168,.2); position: relative; flex-shrink: 0; transition: background .25s; }
.sr .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text2); transition: transform .25s var(--ease), background .25s; }
.sr.on { background: linear-gradient(90deg, rgba(34,211,118,.07), var(--card) 50%); border-color: rgba(34,211,118,.35); }
.sr.on .sw { background: var(--green); } .sr.on .sw::after { transform: translateX(16px); background: var(--on-green); }
.sr .pr { font-family: var(--mono); font-weight: 700; font-size: 10px; padding: 2px 6px; border-radius: 5px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); flex-shrink: 0; }
.sr .nm { flex: 1; min-width: 0; }
.sr .nm b { display: block; font-size: 13.5px; font-weight: 600; }
.sr .nm span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.sr .v { font-family: var(--grotesk); font-weight: 700; font-size: 16px; color: var(--red); font-variant-numeric: tabular-nums; transition: color .25s; }
.sr.on .v { color: var(--green); text-decoration: line-through; }
.sim-total { border-radius: 16px; padding: 24px; background: linear-gradient(180deg, var(--bg4), var(--bg3)); border: 1px solid rgba(255,68,68,.25); display: flex; flex-direction: column; }
.sim-big { font-family: var(--grotesk); font-weight: 700; font-size: clamp(46px, 6vw, 72px); letter-spacing: -.03em; line-height: 1; color: var(--red); margin-top: 10px; font-variant-numeric: tabular-nums; transition: color .4s; }
.sim-bar { height: 10px; border-radius: 6px; background: rgba(136,147,168,.14); margin-top: 18px; overflow: hidden; }
.sim-bar i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--red), var(--orange)); transform-origin: left; transition: transform .6s var(--ease); }
.sim-saved { margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); min-height: 18px; }
.sim-saved.good { color: var(--green); }
.sim-note { margin-top: auto; padding-top: 20px; font-size: 12.5px; color: var(--text2); line-height: 1.6; border-top: 1px solid var(--line-soft); }
.sim-note b { color: var(--text); }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } }

/* 4 · ciclo */
.cycle { display: grid; grid-template-columns: 380px 1fr; gap: 50px; align-items: center; }
.cyc-wheel { position: relative; width: 360px; height: 360px; }
.cyc-wheel svg { position: absolute; inset: 20px; width: 320px; height: 320px; transform: rotate(-90deg); }
.cyc-track { fill: none; stroke: rgba(136,147,168,.14); stroke-width: 3; }
.cyc-run { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 82; animation: cyc 8s linear infinite; }
@keyframes cyc { to { stroke-dashoffset: -100; } }
.cyc-st { position: absolute; left: 50%; top: 50%; width: 104px; height: 60px; margin: -30px 0 0 -52px; transform: rotate(var(--a)) translate(var(--R, 160px)) rotate(calc(-1 * var(--a))); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--grotesk); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.cyc-st b { font-family: var(--mono); font-size: 10px; color: var(--c); letter-spacing: .1em; }
.cyc-st:hover, .cyc-st.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 10%, transparent); }
.cyc-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.cyc-mid span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.cyc-mid b { font-family: var(--grotesk); font-size: 34px; }
.cp { animation: newin .4s var(--ease) both; }
.cp .n { font-family: var(--mono); font-size: 11px; color: var(--c); letter-spacing: .14em; }
.cp h3 { font-family: var(--grotesk); font-size: 30px; letter-spacing: -.02em; margin: 6px 0 10px; }
.cp > p { font-size: 15px; color: var(--text2); max-width: 540px; }
.cp .ags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cp .ags span { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
.cp .ex { margin-top: 18px; padding: 12px 14px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--text2); max-width: 540px; }
@media (max-width: 980px) { .cycle { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 520px) { .cyc-wheel { width: 300px; height: 300px; } .cyc-wheel svg { inset: 18px; width: 264px; height: 264px; } .cyc-st { --R: 128px; width: 86px; height: 52px; margin: -26px 0 0 -43px; font-size: 12.5px; } .cyc-mid b { font-size: 26px; } }

/* 5 · time de agentes */
.squad { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.sage-hub { position: sticky; top: 100px; text-align: center; padding: 26px 16px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(24,171,227,.12), var(--card) 70%); border: 1px solid rgba(24,171,227,.25); }
.sage-hub img { width: 96px; height: 96px; margin: 0 auto 10px; }
.sage-hub b { display: block; font-family: var(--grotesk); font-size: 20px; }
.sage-hub span { font-size: 12.5px; color: var(--dim); }
.squad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sq-g { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 14px; }
.sq-g h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--c); text-transform: uppercase; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sq-g h3 i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.ag { padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; cursor: default; transition: border-color .2s, background .2s; }
.ag + .ag { margin-top: 4px; }
.ag:hover { border-color: color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }
.ag b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ag b .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ag span { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); margin: 1px 0 3px 14px; }
.ag p { font-size: 12px; color: var(--text2); line-height: 1.45; margin-left: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s var(--ease), opacity .3s; }
.ag:hover p { max-height: 80px; opacity: 1; }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 1100px) { .squad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .squad { grid-template-columns: 1fr; } .sage-hub { position: static; } .squad-grid { grid-template-columns: 1fr; } .ag p { max-height: none; opacity: 1; } }

/* 6 · honestidade */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rules { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.rules li { display: flex; gap: 12px; font-size: 14.5px; color: var(--text2); line-height: 1.55; }
.rules li > span { font-family: var(--grotesk); font-weight: 700; font-size: 28px; line-height: .7; color: var(--muted); }
.rules b { color: var(--text); }
.cmp { border-radius: 16px; background: var(--bg3); border: 1px solid var(--line); overflow: hidden; }
.cmp-tabs { display: flex; border-bottom: 1px solid var(--line-soft); }
.cmp-tabs button { flex: 1; padding: 14px; background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.cmp-tabs button.on { color: var(--text); border-bottom-color: var(--orange); }
.cmp-card { padding: 22px; min-height: 300px; }
.cc { animation: newin .4s var(--ease) both; }
.cc .dom { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.cc .verdict { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; padding: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.cc .verdict b { font-family: var(--grotesk); font-size: 22px; color: var(--c); }
.cc .verdict span { font-size: 12.5px; color: var(--text2); }
.cc .rowc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }
.cc .rowc .k { font-family: var(--mono); width: 70px; }
.cc .rowc .bd { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.cc .foot-n { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.cc.bad .foot-n { color: #ff8a8a; }
@media (max-width: 900px) { .honest { grid-template-columns: 1fr; gap: 30px; } }

/* 7 · segurança */
.trust { position: relative; }
.trust-knight { position: absolute; right: -10px; top: -130px; width: 120px; transform: scaleX(-1); filter: drop-shadow(0 0 20px rgba(24,171,227,.35)); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-6px); } }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tr { padding: 22px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; transition: border-color .25s, transform .25s var(--ease); }
.tr::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .6; }
.tr:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); transform: translateY(-3px); }
.tr-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); margin-bottom: 14px; }
.tr b { display: block; font-family: var(--grotesk); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.tr p { font-size: 13.5px; color: var(--text2); line-height: 1.6; }
@media (max-width: 980px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-knight { width: 90px; top: -110px; } }
@media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; } .trust-knight { display: none; } }

/* 8 · lentes */
.lens-sec { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
.lens-tabs { display: flex; flex-direction: column; gap: 8px; }
.lens-tabs button { text-align: left; padding: 16px 18px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s; position: relative; overflow: hidden; }
.lens-tabs button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: 0; transition: opacity .25s; }
.lens-tabs button b { display: block; font-family: var(--grotesk); font-size: 17px; }
.lens-tabs button span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.lens-tabs button:hover { border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.lens-tabs button.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 7%, var(--card)); }
.lens-tabs button.on::before { opacity: 1; } .lens-tabs button.on span { color: var(--c); }
.lens-view { border-radius: 16px; background: var(--bg3); border: 1px solid var(--line); padding: 24px; min-height: 380px; }
.lv { animation: newin .45s var(--ease) both; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.lv h3 { font-family: var(--grotesk); font-size: 24px; letter-spacing: -.02em; margin-bottom: 8px; }
.lv h3 em { font-style: normal; color: var(--c); }
.lv > div > p { font-size: 14.5px; color: var(--text2); }
.lv ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.lv li { font-size: 13.5px; color: var(--text2); display: flex; gap: 8px; } .lv li::before { content: '›'; color: var(--c); font-family: var(--mono); }
.mock { border-radius: 13px; background: var(--card); border: 1px solid var(--line); padding: 14px; font-size: 12px; }
.mock .mh { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; }
.mock .mr { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.mock .mr .pr { font-family: var(--mono); font-weight: 700; font-size: 9px; padding: 2px 5px; border-radius: 4px; color: var(--c2); background: color-mix(in srgb, var(--c2) 14%, transparent); }
.mock .mr .g { margin-left: auto; font-family: var(--mono); font-size: 10px; }
.paper { border-radius: 6px; background: #FBFAF7; color: #1B2333; padding: 20px 20px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); transform: rotate(-1.2deg); font-size: 11px; }
.paper .ph { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #1B2333; padding-bottom: 8px; }
.paper .ph img { width: 20px; height: 20px; object-fit: contain; }
.paper .ph b { font-family: var(--grotesk); font-size: 11px; letter-spacing: .08em; }
.paper .ph span { margin-left: auto; font-family: var(--mono); font-size: 8.5px; color: #5A6576; }
.paper h5 { font-family: var(--grotesk); font-size: 17px; margin: 12px 0 2px; }
.paper .big2 { font-family: var(--grotesk); font-weight: 700; font-size: 30px; color: #B42323; letter-spacing: -.02em; }
.paper .pbar { height: 7px; border-radius: 4px; background: #E6E2D8; margin: 8px 0; overflow: hidden; }
.paper .pbar i { display: block; height: 100%; width: 62%; background: #B42323; }
.paper .pl { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #E6E2D8; color: #3F4A5C; }
.paper .pf { margin-top: 10px; font-family: var(--mono); font-size: 8px; color: #6C7481; letter-spacing: .08em; }
.ring2 { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) { .lens-sec { grid-template-columns: 1fr; } .lens-tabs { flex-direction: row; overflow-x: auto; } .lens-tabs button { flex: 1 0 180px; } .lv { grid-template-columns: 1fr; } }

/* 9 · planos */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { border-radius: 18px; background: var(--card); border: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.plan::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.plan.hot { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--card)), var(--card) 40%); box-shadow: 0 30px 80px rgba(255,145,77,.08); }
.pl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.pl-top b { font-family: var(--grotesk); font-size: 22px; }
.pl-sub { font-family: var(--mono); font-size: 10.5px; color: var(--c); letter-spacing: .04em; }
.pl-tag { width: 100%; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--c); margin-top: 2px; }
.pl-price { font-family: var(--grotesk); font-weight: 700; font-size: 30px; margin: 18px 0 16px; letter-spacing: -.02em; }
.pl-price small { display: block; font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.pl-inc { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 8px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; flex: 1; }
.plan li { font-size: 13.5px; color: var(--text2); display: flex; gap: 9px; line-height: 1.45; }
.plan li::before { content: '✓'; color: var(--c); font-weight: 700; flex-shrink: 0; }
.plan .btn { width: 100%; }
.plan .btn.ghost { border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* 10 · consultoria */
.consult { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: 16px; background: linear-gradient(90deg, rgba(24,171,227,.06), var(--card) 45%); border: 1px solid rgba(24,171,227,.2); }
.consult img { width: 64px; height: 64px; flex-shrink: 0; }
.cs-txt { flex: 1; }
.cs-txt h3 { font-family: var(--grotesk); font-size: 21px; margin: 6px 0 4px; }
.cs-txt p { font-size: 13.5px; color: var(--text2); max-width: 680px; }
@media (max-width: 760px) { .consult { flex-direction: column; text-align: center; } }

/* 11 · faq */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-family: var(--grotesk); font-size: 17px; font-weight: 600; position: relative; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 20px; color: var(--orange); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--orange); }
.faq details p { font-size: 14.5px; color: var(--text2); line-height: 1.65; padding: 0 30px 20px 0; animation: newin .35s var(--ease) both; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 10px; } }

/* 12 · final */
.final { text-align: center; padding: 70px 26px 60px; border-radius: 22px; position: relative; overflow: hidden; background: radial-gradient(60% 80% at 50% 0%, rgba(255,145,77,.12), transparent 70%), linear-gradient(180deg, var(--bg4), var(--bg)); border: 1px solid rgba(255,145,77,.22); }
.final h2 { margin: 0 auto; max-width: 820px; }
.final .intro { margin: 16px auto 0; }
.final-ctas { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.chase { position: relative; height: 64px; margin: -20px 0 30px; overflow: hidden; }
.chase-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(255,68,68,.35); }
.chase-run { position: absolute; inset: 0; animation: chaseRun 11s linear infinite; will-change: transform; }
.chase img { position: absolute; bottom: 6px; height: 48px; }
.c-mal { left: 0; transform: scaleX(-1); animation: glitchM .8s steps(2,end) infinite; }
.c-kn { left: 130px; animation: bobK .45s ease-in-out infinite; }
@keyframes chaseRun { from { transform: translateX(100%); } to { transform: translateX(-200px); } }
@keyframes glitchM { 0%,100% { transform: scaleX(-1) translate(0,0); } 50% { transform: scaleX(-1) translate(1.5px,-1px); } }
@keyframes bobK { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* rodapé */
.foot { position: relative; z-index: 1; margin-top: 110px; border-top: 1px solid var(--line-soft); background: var(--bg2); padding: 56px 0 26px; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.ft-grid > div > b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; }
.ft-grid a:not(.logo) { display: block; font-size: 13.5px; color: var(--text2); padding: 4px 0; transition: color .15s; }
.ft-grid a:not(.logo):hover { color: var(--orange); }
.ft-brand p { font-size: 13.5px; color: var(--dim); margin: 14px 0; max-width: 300px; }
.ft-soc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--green); letter-spacing: .08em; }
.ft-soc i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.ft-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
@media (max-width: 800px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .ft-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .sx *, .sx *::before, .foot * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

.float.away { opacity: 0 !important; transform: translateY(20px) !important; pointer-events: none; }