/* Cripto.ico · seções novas da página inicial (gerado por demonstracoes/montar_demo.py a partir de propostas.html). */
.ps{position:relative;z-index:1;font-size:17px;line-height:1.6;color:var(--text)}
.ps .wrap{width:auto;height:auto;display:block}
.ps .lab{display:none}
.ps .stg{padding-top:calc(78px*var(--k,1))}
.ps{--green:#39FF14;--purple:#B026FF;--white:#fff;--text:#D6D6D6;--muted:#9A9A9A;--line:rgba(255,255,255,.13);--font:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:dark}
.ps *{box-sizing:border-box}
.ps .wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.ps .g,.ps .g3{position:relative;border-radius:20px;isolation:auto}
.ps .g:before,.ps .g3:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s}
.ps .g.hot:before,.ps .g3.hot:before{opacity:1}
.ps [data-o="1"] .g{border:1px solid;border-color:rgba(57,255,20,.45) rgba(255,255,255,.12) rgba(176,38,255,.55) rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.012) 40%),rgba(6,6,7,.55);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.6),inset 0 0 26px rgba(255,255,255,.025),0 24px 50px -28px #000}
.ps [data-o="1"] .g3{border:1px solid;border-color:rgba(57,255,20,.45) rgba(255,255,255,.14) rgba(176,38,255,.55) rgba(255,255,255,.14);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.015) 36%,rgba(255,255,255,.05)),#0b0b0d;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -30px #000}
.ps [data-o="1"] .g:before,.ps [data-o="1"] .g3:before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(57,255,20,.16),rgba(176,38,255,.08) 45%,transparent 70%)}
.ps [data-o="2"] .g{border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 34%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.12)),rgba(8,8,10,.36);
  -webkit-backdrop-filter:blur(9px) saturate(190%) brightness(1.18);backdrop-filter:blur(9px) saturate(190%) brightness(1.18);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -14px 26px -18px rgba(255,255,255,.22),inset 0 18px 30px -22px rgba(255,255,255,.3),0 24px 50px -26px #000}
.ps [data-o="2"] .g3{border:1px solid rgba(255,255,255,.36);
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 34%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.14)),rgba(20,20,24,.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -14px 26px -18px rgba(255,255,255,.22),0 30px 60px -30px #000}
.ps [data-o="2"] .g:before,.ps [data-o="2"] .g3:before{opacity:1;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);background-size:260% 100%;background-position:calc(120% - var(--p,0)*240%) 0}
.ps [data-o="3"] .g{border:1px solid transparent;background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.5);
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000}
.ps [data-o="3"] .g3{border:1px solid transparent;background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.16),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.18),transparent 50%),#101014;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 60px -30px #000}
.ps [data-o="3"] .g:after,.ps [data-o="3"] .g3:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from calc(var(--p,0)*360deg + var(--a,0deg)),var(--green),rgba(255,255,255,.5),var(--purple),rgba(255,255,255,.2),var(--green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ps [data-o="3"] .g:before,.ps [data-o="3"] .g3:before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 65%)}
.ps .lab{font-size:14px;color:var(--green);margin:0 0 10px}
.ps .track{position:relative}
.ps .stg{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.ps .stg .wrap{width:100%}
.ps .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.ps .sh h2{margin:0;font-size:clamp(24px,2.7vw,38px);line-height:1.06;letter-spacing:-.035em;font-weight:600;color:#fff;max-width:720px}
.ps .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.ps .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--purple));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ps .x-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.ps .swap{transition:opacity .25s,transform .25s}
.ps .swap.sw-out{opacity:0;transform:translateY(8px)}
.ps .x-tabs{display:flex;gap:6px;margin-top:24px}
.ps .x-tabs i{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.ps .x-tabs i.on{background:var(--green)}
.ps .x-eco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.ps .eco-l .n{font-size:14px;color:var(--muted)}
.ps .eco-l h3{margin:10px 0 12px;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.04em;font-weight:600;color:#fff}
.ps .eco-l p{margin:0;max-width:440px;min-height:5em}
.ps .deck{position:relative;height:min(calc(56vh / var(--k,1)),500px);perspective:1400px}
.ps .slab{position:absolute;inset:0;padding:26px 28px;transform-origin:50% 100%;will-change:transform,opacity}
.ps .slab h4{margin:0 0 18px;font-size:22px;font-weight:500;letter-spacing:-.02em;color:#fff}
.ps .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ps .items.one{grid-template-columns:1fr}
.ps .item{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 16px 18px;background:rgba(255,255,255,.04);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .3s}
.ps .item:hover{transform:translateY(-4px);border-color:rgba(57,255,20,.55);background:rgba(57,255,20,.05)}
.ps .item b{display:block;font-size:16px;font-weight:500;color:#fff;margin-bottom:4px}
.ps .item span{font-size:14px;line-height:1.45;color:#c2c2c2}
.ps .gen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:center}
.ps .x-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ps .x-steps li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);opacity:.38;transition:opacity .35s}
.ps .x-steps li.on{opacity:1}
.ps .x-steps .k{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:14px;color:#fff;transition:border-color .35s,color .35s}
.ps .x-steps li.on .k{border-color:var(--green);color:var(--green)}
.ps .x-steps b{display:block;font-size:18px;font-weight:500;color:#fff}
.ps .x-steps span{font-size:16px;color:#c0c0c0}
.ps .dev{height:min(calc(62vh / var(--k,1)),560px);overflow:hidden}
.ps .dev-h{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);position:relative}
.ps .dev-h b{color:#fff;font-weight:600;font-size:16px}
.ps .dev-h .st{display:flex;align-items:center;gap:8px}
.ps .dev-h .st i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ps .scr{position:absolute;left:0;right:0;top:57px;bottom:0;padding:18px 22px;will-change:opacity}
.ps .up{height:100%;border:1px dashed rgba(57,255,20,.55);border-radius:16px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:16px}
.ps .up svg{display:block;margin:0 auto 12px;color:var(--green)}
.ps .up strong{color:#fff;font-weight:600}
.ps .x-row{display:flex;justify-content:space-between;gap:16px;padding:12px 15px;border:1px solid rgba(255,255,255,.14);border-radius:12px;margin-bottom:8px;font-size:16px;background:rgba(255,255,255,.035);will-change:transform,opacity}
.ps .x-row em{font-style:normal;color:var(--muted)}
.ps .x-row span{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.ps .dirw{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.ps .dirw small{font-size:13px;color:var(--muted)}
.ps .dirw strong{display:flex;align-items:center;gap:14px;font-size:clamp(54px,6.4vw,88px);line-height:1;letter-spacing:-.05em;font-weight:600;color:var(--green);margin-top:4px}
.ps .dirw strong svg{width:.5em;height:.5em;flex:none}
.ps .arc{position:relative;width:150px;height:92px}
.ps .arc svg{width:150px;height:92px;overflow:visible}
.ps .arc path{fill:none;stroke-width:9;stroke-linecap:round}
.ps .arc .tr{stroke:rgba(255,255,255,.12)}
.ps .arc .fl{stroke:var(--green);stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--m,0))}
.ps .arc b{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:34px;font-weight:600;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ps .x-meter{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:18px}
.ps .x-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#b6ff9f);transform-origin:0 50%;transform:scaleX(var(--m,0))}
.ps .ml{display:flex;justify-content:space-between;margin:9px 0 16px;font-size:14px;font-variant-numeric:tabular-nums}
.ps .x-forces{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ps .x-forces div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 14px;font-size:14px;color:#fff;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.035);will-change:transform,opacity}
.ps .x-forces b{color:var(--muted);font-weight:400}
.ps .x-forces i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px}
.ps .x-forces .neu i{background:#fff}
.ps .plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ps .plan{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px;background:rgba(255,255,255,.04);will-change:transform,opacity;transition:border-color .3s,box-shadow .3s}
.ps .plan:hover{border-color:rgba(57,255,20,.7);box-shadow:0 18px 34px -20px rgba(57,255,20,.5)}
.ps .plan.b:hover{border-color:rgba(176,38,255,.8);box-shadow:0 18px 34px -20px rgba(176,38,255,.55)}
.ps .plan h5{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--green)}
.ps .plan.b h5{color:var(--purple)}
.ps .plan .x-row{padding:8px 11px;margin-bottom:6px;font-size:14px;border-radius:10px}
.ps .plan .x-row:last-child{margin-bottom:0}
.ps .rtag{display:inline-block;font-size:13px;font-weight:600;color:var(--purple);border:1px solid rgba(176,38,255,.6);border-radius:999px;padding:5px 12px;margin-left:12px;vertical-align:middle;letter-spacing:0;line-height:1.4}
.ps .rnav{display:flex;gap:18px;margin:0 0 14px;font-size:14px;color:var(--muted)}
.ps .rnav span.on{color:#fff}
.ps .rnav button.on{color:#fff}
.ps .rnav span.on:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
.ps .rnav button.on:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
.ps .rst{position:relative;height:min(calc(52vh / var(--k,1)),490px);perspective:1600px}
.ps #p3[data-o="2"] .rst,.ps #p3[data-o="3"] .rst{overflow:hidden;border-radius:20px}
.ps .rp{position:absolute;inset:0;will-change:transform,opacity}
.ps .rA{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;gap:12px}
.ps .big{padding:22px 26px;display:flex;flex-direction:column;justify-content:space-between}
.ps .big small{font-size:14px;color:var(--muted)}
.ps .big strong{display:block;font-size:clamp(46px,5.9vw,92px);line-height:.95;letter-spacing:-.055em;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;margin:6px 0 10px;white-space:nowrap}
.ps .big p{margin:0;font-size:14.5px;line-height:1.5}
.ps .big p b,.ps .rB p b{color:#fff;font-weight:600}
.ps .chart{padding:18px 22px 12px;display:flex;flex-direction:column}
.ps .chart .hd{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:6px}
.ps .chart .hd b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.ps .chart svg{flex:1;width:100%;min-height:90px;overflow:visible}
.ps .chart .grid line{stroke:rgba(255,255,255,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.ps .chart .ln{fill:none;stroke:var(--green);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:calc(1 - var(--d,0))}
.ps .chart .area{fill:url(#ga);clip-path:inset(0 calc(100% - var(--d,0)*100%) 0 0)}
.ps .chart .mo{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:4px}
.ps .chart .src{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.ps .minis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ps .mini{padding:15px 18px;will-change:transform,opacity}
.ps .mini b{display:block;font-size:clamp(24px,2.4vw,34px);line-height:1;letter-spacing:-.04em;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps .mini span{display:block;margin-top:8px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.ps .mini.hl b{color:var(--green)}
.ps .rB{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:12px}
.ps .rB .big strong{font-size:clamp(50px,6.6vw,104px)}
.ps .rB .side{display:grid;grid-template-rows:1fr 1fr 1fr;gap:12px}
.ps .kv{padding:16px 20px;display:flex;flex-direction:column;justify-content:center;will-change:transform,opacity}
.ps .kv span{font-size:13.5px;color:var(--muted)}
.ps .kv b{font-size:clamp(24px,2.6vw,38px);line-height:1.1;font-weight:600;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ps .kv.hl b{color:var(--green)}
.ps .rC{display:grid;grid-template-rows:auto 1fr;gap:12px}
.ps .simh{padding:18px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.ps .simh label{font-size:14px;color:var(--muted)}
.ps .simh output{display:block;font-size:26px;font-weight:600;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ps .simh input{width:100%;accent-color:var(--green)}
.ps .pre{display:flex;gap:6px}
.ps .pre button{font:500 13px var(--font);color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.ps .pre button:hover{border-color:var(--green)}
.ps .outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ps .out{padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;will-change:transform,opacity}
.ps .out span{font-size:13.5px;color:var(--muted)}
.ps .out b{font-size:clamp(24px,2.6vw,36px);line-height:1.1;font-weight:600;color:var(--green);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:8px 0}
.ps .out small{font-size:13.5px;color:#ddd;font-variant-numeric:tabular-nums}
.ps .pilha{position:relative;height:min(calc(60vh / var(--k,1)),540px);perspective:1400px}
.ps .q{position:absolute;left:50%;top:50%;width:min(420px,84vw);margin:0;padding:26px 26px 22px;display:flex;flex-direction:column;min-height:250px;will-change:transform,opacity}
.ps .q .m{font-size:34px;line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--green);margin-bottom:14px}
.ps .q blockquote{margin:0 0 20px;font-size:16px;line-height:1.55;color:#f0f0f0}
.ps .q figcaption{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:var(--muted)}
.ps .q figcaption b{display:block;color:#fff;font-weight:600}
.ps .rep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.ps .rep-l .n{font-size:14px;color:var(--green)}
.ps .rep-l h3{margin:10px 0 12px;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:#fff}
.ps .rep-l p{margin:0;max-width:460px;min-height:5em}
.ps .pgs{position:relative;height:560px;perspective:1800px}
.ps .pgs-in{position:absolute;inset:0;transform-style:preserve-3d}
.ps .pg{position:absolute;left:50%;top:50%;width:300px;height:424px;margin:-212px 0 0 -150px;background:#060606;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px #000c;transform-origin:50% 50%;backface-visibility:hidden}
.ps .pg .ph{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.ps .pg .ph .plogo{width:46px;height:13px;background:url(/assets/img/cripto-ico-logo.png) left center/contain no-repeat}
.ps .pg h4,.ps .pg .h4{margin:4px 0 0;color:var(--white);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ps .pg .ln{height:6px;border-radius:4px;background:#ffffff1a}
.ps .pg .ln.s{width:62%}
.ps .pg .ln.m{width:84%}
.ps .pg .chip{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:11px;color:var(--text)}
.ps .pg .chip i{display:block;width:44px;height:5px;border-radius:3px}
.ps .pg svg.chart{width:100%;height:110px}
.ps .pg .foot-note{margin-top:auto;font-size:9px;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);padding-top:8px;line-height:1.5}
.ps .pg.cover{background:#000;border-color:#39ff1459;justify-content:space-between}
.ps .pg.cover .big{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--white)}
.ps .pg.cover .big span{color:var(--green)}
.ps .pg.cover .sym{width:70px;opacity:.9}
.ps .pg .days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ps .pg .days div{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.ps .pg .days b{font-size:11px;color:var(--white);font-weight:600}
.ps .pg i{display:block;height:5px;border-radius:3px;background:#ffffff24}
.ps .pg i.g{background:var(--green)}
.ps .pg i.p{background:var(--purple)}
.ps .pg .box{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ps .pg .box b{font-size:11px;color:var(--white);font-weight:600}
.ps .pg .gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ps .pg .gauges>div{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9.5px;color:var(--muted);text-align:center}
.ps .pg .arc{width:84px;height:42px;border-radius:84px 84px 0 0;background:conic-gradient(from 270deg at 50% 100%,var(--purple) 0 60deg,#fff 60deg 110deg,var(--green) 110deg 180deg,transparent 180deg);-webkit-mask:radial-gradient(circle at 50% 100%,transparent 26px,#000 27px);mask:radial-gradient(circle at 50% 100%,transparent 26px,#000 27px)}
.ps .pg .ring{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--green) 0 58%,var(--purple) 58% 100%);-webkit-mask:radial-gradient(circle,transparent 16px,#000 17px);mask:radial-gradient(circle,transparent 16px,#000 17px)}
.ps .pg .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps .pg .g2 div{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 10px;font-size:10.5px;color:var(--text)}
.ps .pg .pill{align-self:flex-start;font-size:10px;font-weight:600;color:#000;background:var(--green);border-radius:99px;padding:4px 10px}
.ps .pg .levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ps .pg .levels div{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;gap:6px}
.ps .pg .levels b{font-size:8.5px;color:var(--muted);font-weight:500}
.ps .pg .score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ps .pg .score div{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 6px;text-align:center;font-size:10px;color:var(--text)}
.ps .pg .score .g{border-color:#39ff1480}
.ps .pg .score .p{border-color:#b026ff80}
.ps .pg svg.arc-svg,.ps .pg svg.ring-svg{display:block}
.ps .pgs-in{transform-style:flat}
.ps .pg{background:linear-gradient(150deg,#ffffff1c,#ffffff06 34%,#fff0 58%),#0c0d108f;-webkit-backdrop-filter:blur(22px) saturate(150%) brightness(.78);backdrop-filter:blur(22px) saturate(150%) brightness(.78);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px #ffffff3d,inset 1px 0 #ffffff0f,inset 0 -1px #00000073,0 30px 80px #0000008c;overflow:hidden;backface-visibility:visible}
.ps .pg:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ps .pg:after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.06) 48%,rgba(255,255,255,.014) 54%,transparent 60%)}
.ps .pg.cover{background:linear-gradient(150deg,#39ff1414,#ffffff05 36%,#fff0 58%),#080c0894;border-color:#39ff1459}
.ps .pg .chip,.ps .pg .box,.ps .pg .days div,.ps .pg .gauges>div,.ps .pg .g2 div,.ps .pg .levels div,.ps .pg .score div{background:linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:inset 0 1px #ffffff17}
.ps .pg>*{position:relative;z-index:1}
.ps .pg{--sx:30%;--sy:0%;border:1px solid transparent;background:radial-gradient(120% 70% at var(--sx) var(--sy),rgba(255,255,255,.12),rgba(255,255,255,0) 55%) padding-box,radial-gradient(80% 60% at 0% 0%,#39ff140d,#39ff1400 60%) padding-box,radial-gradient(80% 60% at 100% 100%,#b026ff0f,#b026ff00 60%) padding-box,linear-gradient(180deg,#0e0f1280,#08090b9e) padding-box,linear-gradient(160deg,#ffffff8c,#ffffff14 28%,#ffffff08 62%,#ffffff38) border-box;-webkit-backdrop-filter:blur(20px) saturate(160%) brightness(.8);backdrop-filter:blur(20px) saturate(160%) brightness(.8);backdrop-filter:url(#glassRefract) blur(20px) saturate(160%) brightness(.8);box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0000008c,inset 1px 0 #ffffff1a,inset -1px 0 #00000059,inset 0 22px 30px -22px #ffffff1a,0 30px 80px #0000008c}
.ps .pg.cover{background:radial-gradient(120% 70% at var(--sx) var(--sy),rgba(255,255,255,.1),rgba(255,255,255,0) 55%) padding-box,radial-gradient(90% 70% at 0% 0%,#39ff1417,#39ff1400 60%) padding-box,linear-gradient(180deg,#080d0885,#040704a3) padding-box,linear-gradient(160deg,#39ff14b3,#39ff141f 30%,#39ff140d 62%,#39ff144d) border-box}
.ps .pg:after{inset:0;border-radius:inherit;background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.015) 52%,transparent 62%);background-size:220% 100%;background-position:calc(100% - var(--sx)) 0;transition:background-position .6s cubic-bezier(.2,.7,.1,1)}
.ps .report:not(.near) .pgs{visibility:hidden}
.ps .report:not(.near) .pg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ps .pg{-webkit-font-smoothing:antialiased;backface-visibility:hidden}
.ps .report .pg,.ps .report .pg.lite,.ps .report .pg:not(.lite){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #0000008c,0 10px 24px #00000073!important}
.ps .report .pg:not(.cover),.ps .report .pg:not(.lite):not(.cover),.ps .report .pg.lite:not(.cover){background:radial-gradient(120% 70% at 30% 0%,#ffffff1f,#fff0 55%) padding-box,radial-gradient(80% 60% at 0% 0%,#39ff140d,#39ff1400 60%) padding-box,radial-gradient(80% 60% at 100% 100%,#b026ff0f,#b026ff00 60%) padding-box,linear-gradient(180deg,#16171bfb,#0a0b0dfc) padding-box,linear-gradient(160deg,#ffffff8c,#ffffff14 28%,#ffffff08 62%,#ffffff38) border-box!important}
.ps .pgs{height:min(calc(64vh / var(--k,1)),580px)}
.ps .pgs .pg{will-change:transform,opacity;backface-visibility:visible;overflow:hidden}
.ps .pgs .pg img.sym{width:120px;height:120px;object-fit:contain;display:block;margin:0 auto;opacity:.9;mix-blend-mode:screen}
.ps .pgs .pg:after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;background:linear-gradient(112deg,transparent 44%,rgba(255,255,255,.18) 50%,transparent 56%);transform:translateX(calc(var(--sh,0)*60% - 30%))}
.ps #p5[data-o="1"] .pg{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015) 36%,rgba(255,255,255,.045)),#09090b;border-color:rgba(57,255,20,.45) rgba(255,255,255,.14) rgba(176,38,255,.55) rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 80px #000c}
.ps #p5[data-o="2"] .pg{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 34%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.13)),rgba(22,22,26,.97);border-color:rgba(255,255,255,.36);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -14px 26px -18px rgba(255,255,255,.22),0 30px 80px #000c}
.ps #p5[data-o="3"] .pg{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.16),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.2),transparent 50%),#101014;border-color:rgba(57,255,20,.5) rgba(255,255,255,.3) rgba(176,38,255,.6) rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 80px #000c}
@media (max-width:900px){.ps .wrap{padding:0 20px}
.ps .x-eco,.ps .gen,.ps .rep,.ps .rA,.ps .rB{grid-template-columns:1fr;gap:16px}
.ps .minis{grid-template-columns:repeat(2,1fr)}
.ps .outs{grid-template-columns:1fr}
.ps .sh{flex-direction:column;align-items:flex-start}
.ps .x-steps span{display:none}
.ps .items{grid-template-columns:1fr}}
.ps #p1 .deck{height:min(calc(70vh / var(--k,1)),640px)}
.ps .eco-l .tag{display:inline-block;margin:0 0 12px;font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:4px 10px}
.ps .eco-l a.more{display:inline-block;margin-top:16px;color:#fff;font-size:16px;text-underline-offset:5px}
.ps .eco-l .hint{margin:14px 0 0;font-size:14px;color:var(--muted);min-height:0}
.ps .eco-l p{min-height:3.4em}
.ps .slab{padding:22px 24px;display:flex;flex-direction:column}
.ps .slab h4{margin:0 0 14px}
.ps .sl2{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px}
.ps .nodes{display:flex;flex-direction:column;gap:8px}
.ps .node{all:unset;box-sizing:border-box;display:block;cursor:pointer;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.035);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .3s,box-shadow .3s}
.ps .node b{display:block;font-size:16px;font-weight:500;color:#fff}
.ps .node>span{display:block;font-size:14px;line-height:1.4;color:#bdbdbd}
.ps .node.on{border-color:rgba(57,255,20,.75);background:rgba(57,255,20,.07);transform:translateX(6px);box-shadow:0 0 0 1px rgba(57,255,20,.18),0 10px 26px -16px rgba(57,255,20,.6)}
.ps .node:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ps .mk{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;font-size:12px;color:#ddd}
.ps .mk span,.ps .mk i{font-style:normal;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:2px 9px}
.ps .mk em{font-style:normal;color:var(--green)}
.ps .mk.week{color:var(--muted);font-size:12px}
.ps .det{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;background:rgba(0,0,0,.28);overflow:auto}
.ps .det .nm{margin:0 0 12px;font-size:14px;color:var(--green)}
.ps .det p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#d2d2d2}
.ps .det p b{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}
.ps .f23w{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.ps .f23w div{flex:1;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:9px 12px;font-size:14px;color:#cfcfcf}
.ps .f23w div b{display:block;font-size:18px;color:#fff}
.ps .f23w i{flex:none;width:22px;height:1px;background:var(--green);position:relative}
.ps .f23w i:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--green);border-right:1px solid var(--green);transform:rotate(45deg)}
.ps .solo{flex:1;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;background:rgba(255,255,255,.035)}
.ps .solo b{display:block;font-size:22px;font-weight:500;color:#fff;margin-bottom:8px}
.ps .solo p{margin:0 0 16px;font-size:16px;line-height:1.55;color:#d2d2d2}
.ps .chips{display:flex;flex-wrap:wrap;gap:8px}
.ps .chips span{font-size:14px;color:#eee;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.04)}
.ps .chips.big{margin-top:12px}
.ps .flow{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid rgba(57,255,20,.5);display:flex;flex-direction:column;justify-content:space-between}
.ps .flow li{position:relative;font-size:14px;line-height:1.4;color:#e4e4e4;padding:6px 0}
.ps .flow li:before{content:"";position:absolute;left:-23px;top:13px;width:9px;height:9px;border-radius:50%;background:#000;border:1px solid var(--green)}
.ps .rdw{min-width:0;display:flex;flex-direction:column;gap:8px}
.ps .rdsw{display:flex;gap:6px}
.ps .rdsw button{font:500 12px var(--font);color:#ddd;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.ps .rdsw button[aria-pressed=true]{color:#000;background:var(--green);border-color:var(--green)}
@keyframes cardPulse{0%{border-color:#ffffff1f}35%{border-color:#ffffff8c;box-shadow:0 0 0 6px #ffffff0a}to{border-color:#ffffff1f;box-shadow:0 0 0 0 transparent}}
.ps .rd-route{color:var(--green);font-size:12px;white-space:nowrap}
.ps .rd-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12px}
.ps .rd-send{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--muted)}
.ps .rd-plane{color:var(--muted);animation:rdFly 1s ease-in-out infinite}
.ps .rd-send.ok .rd-plane{animation:none;color:var(--green)}
.ps .rd-send.ok span{color:var(--text)}
.ps .rd-check{font-style:normal;color:var(--green);letter-spacing:-2px;margin-left:2px}
@keyframes rdFly{0%{transform:translate(0);opacity:1}60%{transform:translate(5px,-3px);opacity:.4}to{transform:translate(0);opacity:1}}
.ps .radar-demo{margin-top:28px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(180deg,#121216c7,#060608d6);box-shadow:inset 0 1px #ffffff14,0 20px 60px #0006;overflow:hidden}
.ps .rd-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}
.ps .rd-top b{color:var(--white);font-weight:600}
.ps .rd-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px #39ff148c;animation:dvPulse 1.6s ease-in-out infinite}
.ps .rd-status{flex:1;color:var(--muted)}
.ps .rd-top em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ps .rd-feed{height:clamp(150px,calc(24vh / var(--k,1)),236px);padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 24%);mask-image:linear-gradient(transparent,#000 24%)}
.ps .rd-item{flex:none;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.1,1),height .45s ease,margin .45s ease,padding .45s ease}
.ps .rd-item.in{opacity:1;transform:none}
.ps .rd-item.out{opacity:0;height:0!important;padding-top:0!important;padding-bottom:0!important;margin:-4px 0;overflow:hidden}
.ps .rd-msg{align-self:flex-start;max-width:94%;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08);border-left:2px solid rgba(255,255,255,.4)}
.ps .rd-msg.hi{border-left-color:var(--green)}
.ps .rd-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:4px}
.ps .rd-tag{color:var(--white);font-weight:600;padding:1px 8px;border:1px solid rgba(255,255,255,.18);border-radius:99px}
.ps .rd-msg.hi .rd-lvl{color:var(--green)}
.ps .rd-meta time{margin-left:auto;font-variant-numeric:tabular-nums}
.ps .rd-msg p{margin:0!important;font-size:13px!important;line-height:1.5!important;color:var(--text)}
.ps .rd-discard{display:flex;align-items:center;gap:6px;padding:2px 6px;font-size:11.5px;color:var(--muted);text-decoration:line-through;text-decoration-color:#ffffff40}
.ps .rd-typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:#ffffff0b;border:1px solid rgba(255,255,255,.06)}
.ps .rd-typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:rdDot 1s ease-in-out infinite}
.ps .rd-typing i:nth-child(2){animation-delay:.15s}
.ps .rd-typing i:nth-child(3){animation-delay:.3s}
@keyframes rdDot{0%,80%,to{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.ps .eco-flow .radar-demo+.eco-chips.big{margin-top:18px}
.ps .legal .radar-demo{margin:28px 0 34px;max-width:560px}
.ps .cue i,.ps .cue i:after,.ps .dv-dot,.ps .eco-link,.ps .eco-steps i.on,.ps .emap .enode.sel,.ps .emap .enode.sel:before,.ps .enode.sel .mtime span:before,.ps .foot-bottom .soc a:hover,.ps .gx-step .n,.ps .jump-line,.ps .loader-track i,.ps .x-meter i,.ps .mflow em,.ps .rail button.on i,.ps .rd-dot,.ps .res-range::-webkit-slider-thumb,.ps .stage-bars i.on,.ps .x-steps li.on .n,.ps .tw-filter button.on:before,.ps .tw-tag i,.ps .tw-view .tw-card:hover,.ps .tw-view.paused .tw-card.on,.ps .eco-line i,.ps .dir{box-shadow:none!important}
.ps .emap .enode .eco-sum,.ps .mtime,.ps .mweek,.ps .mstack i,.ps .f23 span,.ps .rd-meta,.ps .rd-discard,.ps .tw-filter button,.ps .eco-hint,.ps .chapter{font-size:13px!important}
.ps .eco-card,.ps .tw-card,.ps .eco-detail,.ps .emap .enode,.ps .radar-demo,.ps .wl-box,.ps .cc,.ps .how-card,.ps .sub-card,.ps .stat,.ps .gx-panel .device,.ps .glass{border-radius:14px}
.ps .f23,.ps .mflow span,.ps .mstack i,.ps .tw-tag,.ps .rd-tag,.ps .eco-tag,.ps .wl input[type=text],.ps .wl input[type=email],.ps .wl input[type=tel]{border-radius:8px}
.ps .eco-card.pulse,.ps .rd-dot,.ps .dv-dot{animation:none}
.ps .rd-globe{position:relative;height:clamp(150px,calc(20vh / var(--k,1)),210px);border-bottom:1px solid rgba(255,255,255,.07)}
.ps .rd-globe canvas{display:block;width:100%;height:100%}
.ps .rd-leg{position:absolute;left:14px;bottom:10px;display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.ps .rd-leg span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid}
.ps .rd-leg .hi:before{border-color:#39ff14e6;background:#39ff14e6}
.ps .rd-leg .md:before{border-color:#b026ffe6;background:#b026ffe6}
.ps .rd-reg{color:var(--text)}
.ps .rd-msg.md{border-left-color:#b026ffbf}
.ps .rd-msg.md .rd-lvl{color:#c46efff2}
.ps .rd-globe{height:clamp(220px,calc(34vh / var(--k,1)),320px);overflow:hidden}
.ps .rd-leg{left:14px;bottom:12px}
.ps .rd-ex{font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--muted);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:0 6px;line-height:16px}
.ps .rd-meta{flex-wrap:wrap;row-gap:4px}
.ps .rd-leg{padding:4px 10px;border-radius:8px;background:#000000b8}
.ps .rd-ex{border:0;padding:0;font-size:11px;color:#ffffff73;letter-spacing:.04em;text-transform:lowercase}
@keyframes dvPulse{0%,to{opacity:1}50%{opacity:.35}}
.ps .rdw .radar-demo{margin:0;flex:1;min-height:0}
.ps .rdw .radar-demo[hidden]{display:none}
.ps .rd-altc{position:absolute;inset:0}
.ps .rd-altc canvas{display:block;width:100%;height:100%}
.ps .arc b small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.ps .plan{border-color:rgba(57,255,20,.42);background:linear-gradient(180deg,rgba(57,255,20,.09),rgba(57,255,20,.02))}
.ps .plan.b{border-color:rgba(176,38,255,.6);background:linear-gradient(180deg,rgba(176,38,255,.16),rgba(176,38,255,.04))}
.ps .plan.b h5{color:#cf7bff}
.ps .plan.b .x-row{border-color:rgba(176,38,255,.3)}
.ps .plan .x-row{border-color:rgba(57,255,20,.22)}
.ps .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ps .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;font:600 14px var(--font);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.ps .btn:hover{border-color:var(--green)}
.ps [data-o="3"] .g:before,.ps [data-o="3"] .g3:before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.055),transparent 65%)}
.ps .filt{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 10px;font-size:14px}
.ps .filt button{all:unset;cursor:pointer;color:var(--muted)}
.ps .filt button[aria-pressed=true]{color:#fff}
.ps .filt button[aria-pressed=true]:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
.ps .filt button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ps .q{transition:border-color .3s}
.ps .q:hover{border-color:rgba(57,255,20,.7)}
.ps .fxt{transition:border-color .3s,box-shadow .3s}
.ps .fxt.tl{border-color:rgba(57,255,20,.6)!important;box-shadow:0 22px 40px -24px rgba(57,255,20,.45),inset 0 1px 0 rgba(255,255,255,.3)}
@media (max-width:900px){.ps .sl2{grid-template-columns:1fr}}
.ps .sl5{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.ps .sl5 .flow{flex-direction:row;gap:12px;padding:12px 0 0;border-left:0;border-top:1px solid rgba(57,255,20,.5)}
.ps .sl5 .flow li{flex:1;padding:0;font-size:12px;line-height:1.35}
.ps .sl5 .flow li:before{left:0;top:-17px}
.ps .sl5 .rdw{flex:1;min-height:0}
.ps .rdw .radar-demo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);max-width:none}
.ps .rdw .radar-demo[hidden]{display:none}
.ps .rdw .rd-top{grid-column:1/-1;flex-wrap:wrap;row-gap:2px;padding:9px 14px}
.ps .rdw .rd-globe{height:auto;min-height:0;border-bottom:0;border-right:1px solid rgba(255,255,255,.07)}
.ps .rdw .rd-feed{height:auto;min-height:0}
.ps .chips.big span{font-size:12px;padding:5px 10px}
@media (max-width:900px){.ps .rdw .radar-demo{grid-template-columns:1fr;grid-template-rows:auto 180px minmax(0,1fr)}
.ps .sl5 .flow{display:none}}
.ps .slab .chips.big{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;border:0}
.ps .slab .chips.big span{flex:none;width:auto;display:inline-block;border-radius:999px}
.ps [data-o="1"] .g:before,.ps [data-o="1"] .g3:before{background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(57,255,20,.06),rgba(176,38,255,.03) 45%,transparent 70%)}
.ps [data-o="3"] .g:before,.ps [data-o="3"] .g3:before{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.028),transparent 65%)}
.ps .plan:hover{box-shadow:0 14px 26px -22px rgba(57,255,20,.3)}
.ps .plan.b:hover{box-shadow:0 14px 26px -22px rgba(176,38,255,.35)}
.ps .fxt.tl{border-color:rgba(57,255,20,.4)!important;box-shadow:0 18px 30px -26px rgba(57,255,20,.3),inset 0 1px 0 rgba(255,255,255,.16)}
.ps .cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:100;border-radius:50%;transform:translate3d(-200px,-200px,0)}
.ps .cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(255,255,255,.4);transition:width .35s,height .35s,margin .35s,border-color .35s,background .35s}
.ps .cur-ring.hover{width:76px;height:76px;margin:-38px 0 0 -38px;border-color:var(--green);background:#39ff1412}
@media (pointer:coarse){.ps .cur-ring{display:none}}
.ps #p5 .pgs-in{zoom:1.3}
.ps #p5 .pgs{height:min(calc(66vh / var(--k,1)),590px)}
.ps #p5 .pg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto;backface-visibility:visible}
.ps #p5 .pg:before,.ps #p5 .pg:after{display:none!important}
.ps #p5 .pg .ph,.ps #p5 .pg .foot-note,.ps #p5 .pg .gauges>div,.ps #p5 .pg .levels b{color:#c9c9c9}
.ps #p5 .pg .chip,.ps #p5 .pg .box,.ps #p5 .pg .days div,.ps #p5 .pg .gauges>div,.ps #p5 .pg .g2 div,.ps #p5 .pg .levels div,.ps #p5 .pg .score div{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045);box-shadow:none}
.ps #p5 .pg .ln{background:rgba(255,255,255,.2)}
.ps #p5 .pg img.sym{width:190px;height:190px;margin:-30px auto;opacity:1;mix-blend-mode:normal}
.ps #p5[data-o="1"] .pg{background:linear-gradient(180deg,#131316,#09090b)}
.ps #p5[data-o="2"] .pg{background:linear-gradient(180deg,#1b1b20,#101013)}
.ps #p5[data-o="3"] .pg{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.12),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),#0d0d10}
.ps .rst{height:min(calc(54vh / var(--k,1)),500px)}
.ps .rA{grid-template-rows:minmax(0,1fr) auto}
.ps .rA>*,.ps .rB>*,.ps .rC>*{min-height:0}
.ps #p3 .x-note{margin-top:14px}
.ps #p3 .big strong{font-size:clamp(44px,5.4vw,84px)}
.ps #p5[data-o] .pg{background:linear-gradient(180deg,rgba(14,14,17,.9),rgba(6,6,8,.93))}
.ps #p5[data-o] .pg.front{background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%),rgba(5,5,7,.6);-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 80px rgba(0,0,0,.7)}
.ps #p5[data-o="3"] .pg.front{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.1),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.14),transparent 50%),rgba(5,5,7,.6)}
.ps .rnav button{all:unset;cursor:pointer}
.ps .rnav button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ps .rC{grid-template-rows:auto auto minmax(0,1fr)}
.ps .qs{margin:2px 0 0;font-size:15px;color:#fff;font-weight:500}
.ps #p4 .x-note{margin-top:8px}
.ps #p1[data-o="1"] .slab{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.012) 40%),rgba(6,6,7,.55);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.6),inset 0 0 26px rgba(255,255,255,.025),0 24px 50px -28px #000;border-color:rgba(57,255,20,.45) rgba(255,255,255,.12) rgba(176,38,255,.55) rgba(255,255,255,.12)}
.ps #p1[data-o="1"] .det{background:rgba(0,0,0,.2)}
.ps #p3[data-o="1"] .g{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.012) 40%),rgba(6,6,7,.8)}
.ps #p3[data-o="3"] .g{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.12),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.14),transparent 50%),rgba(14,14,17,.8)}
.ps .rtag{font-size:14px;font-weight:500;color:#fff;letter-spacing:-.005em;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);padding:6px 14px 6px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);-webkit-font-smoothing:antialiased}
.ps .rtag:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--purple);margin-right:8px;vertical-align:middle}
.ps #p3 .rB .big strong{font-size:clamp(64px,8.4vw,132px);margin:10px 0 14px}
.ps #p3 .rB .big p{font-size:13px;line-height:1.5;color:#b9b9b9}
.ps #p3 .rB .big small{font-size:13px}
.ps .kv.hl b{font-size:clamp(40px,4.6vw,68px)}
.ps #p4[data-o="1"] .q{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015) 36%,rgba(255,255,255,.04)),rgba(8,8,10,.74)}
.ps #p4[data-o="1"] .q.front{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015) 36%,rgba(255,255,255,.04)),rgba(8,8,10,.5);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.ps .qsh{position:absolute;left:50%;top:50%;width:min(420px,84vw);height:46px;pointer-events:none;opacity:0;z-index:4;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.5) 45%,transparent)}
.ps #p4[data-o="1"] .q.fly{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.015) 36%,rgba(255,255,255,.05)),#0b0b0d}
.ps #p5 .pg.cover .big{font-size:30px}
.ps #p5 .modes{flex-wrap:wrap;justify-content:flex-start;position:relative;z-index:200}
.ps #p5[data-o="4"] .pg,.ps #p5[data-o="5"] .pg{border-color:rgba(57,255,20,.45) rgba(255,255,255,.14) rgba(176,38,255,.55) rgba(255,255,255,.14)}
.ps #p1[data-o="1"] .slab{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.5);
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border-color:rgba(57,255,20,.5) rgba(255,255,255,.22) rgba(176,38,255,.6) rgba(255,255,255,.22)}
.ps #p1[data-o="1"] .det{background:rgba(0,0,0,.16)}
.ps #p1[data-o="1"] .node{background:rgba(255,255,255,.045)}
.ps #p4:not([data-o="3"]) .q{cursor:pointer}
.ps #p3[data-o="1"] .g{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.012) 40%),rgba(6,6,7,.55);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.6),inset 0 0 26px rgba(255,255,255,.025),0 24px 50px -28px #000;border-color:rgba(57,255,20,.45) rgba(255,255,255,.12) rgba(176,38,255,.55) rgba(255,255,255,.12)}
.ps #p4[data-o="1"] .q.front{border-color:rgba(57,255,20,.75) rgba(255,255,255,.22) rgba(176,38,255,.6) rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(57,255,20,.16),0 26px 50px -30px rgba(57,255,20,.35)}
.ps #p4[data-o="1"] .q.front figcaption{border-top-color:rgba(57,255,20,.45)}
.ps #qfx{position:absolute;left:0;top:0;pointer-events:none;z-index:250}
.ps #p5[data-o="4"] .pg.front{background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%),rgba(7,7,9,.97)}
.ps #p1[data-o="1"] .slab,.ps #p3[data-o="1"] .g{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.12),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.14),transparent 50%),rgba(11,11,14,.56);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 24px 50px -26px #000;
  border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2)}
.ps #p3[data-o="1"] .g{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.12),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.14),transparent 50%),rgba(11,11,14,.78);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.ps #p3[data-o="1"] .g{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.09),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.11),transparent 50%),rgba(9,9,11,.88)}
.ps #p3[data-o="1"] .rst{filter:brightness(.9) saturate(.85)}
.ps #scrB{--acc:#39FF14}
.ps #scrB strong{color:var(--acc);will-change:transform,opacity}
.ps #scrB strong svg{transition:transform .25s}
.ps #scrB .arc .fl{stroke:var(--acc)}
.ps #scrB .x-meter i{background:var(--acc)}
.ps .plan{position:relative}
.ps .plan>*{position:relative;z-index:2}
.ps .plan .x-row{background:rgba(0,0,0,.42);color:#d6d6d6}
.ps .plan .x-row b{color:#fff;font-weight:600;opacity:1}
.ps .plan.b{background:linear-gradient(180deg,rgba(176,38,255,.13),rgba(176,38,255,.03))}
.ps .plan.b .x-row{border-color:rgba(176,38,255,.42)}
.ps .out{align-items:center;text-align:center;justify-content:center;gap:6px;overflow:hidden}
.ps .out b{font-size:clamp(26px,3.1vw,46px);margin:6px 0;white-space:nowrap;max-width:100%}
.ps .out small{font-size:14px}
.ps .f23w{gap:0}
.ps .f23w i{flex:none;width:76px;height:2px;margin:0;background:linear-gradient(90deg,rgba(57,255,20,.25),rgba(57,255,20,.7));position:relative;overflow:visible}
.ps .f23w i:before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#050505;border:1px solid var(--green);box-shadow:72px 0 0 -1px #050505,72px 0 0 0 var(--green)}
.ps .f23w i:after{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;border:0;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(57,255,20,.7);transform:none;animation:f23dot 2.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes f23dot{0%{left:-4px;opacity:0}12%{opacity:1}80%{left:68px;opacity:1}100%{left:68px;opacity:0}}
.ps .f23w div{position:relative;isolation:isolate;overflow:hidden}
.ps .f23w div:first-child{border-color:rgba(57,255,20,.45)}
.ps .f23w div:last-child{border-color:rgba(57,255,20,.6)}
.ps .f23w div:last-child:before{content:"";position:absolute;z-index:-1;left:-60%;width:220%;aspect-ratio:1;border-radius:41%;background:linear-gradient(180deg,rgba(57,255,20,.34),rgba(57,255,20,.14) 30%,rgba(57,255,20,.1));top:100%;animation:f23fill 7.8s ease-in-out infinite,f23wave 6s linear infinite}
@keyframes f23fill{0%{top:100%}55%,82%{top:24%}100%{top:100%}}
@keyframes f23wave{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ps .f23w i:after{animation:none;left:32px}
.ps .f23w div:last-child:before{animation:none;top:30%}}
.ps .f23w i{background:linear-gradient(90deg,rgba(57,255,20,.7) 0 50%,rgba(57,255,20,.18) 50% 100%);background-size:16px 2px;animation:f23flow .7s linear infinite}
@keyframes f23flow{to{background-position:16px 0}}
.ps .f23w i:after{animation:f23dot 2s cubic-bezier(.45,0,.3,1) infinite}
.ps .f23w div:first-child:before{content:"";position:absolute;z-index:-1;left:-60%;width:220%;aspect-ratio:1;border-radius:41%;background:linear-gradient(180deg,rgba(57,255,20,.34),rgba(57,255,20,.14) 30%,rgba(57,255,20,.1));top:22%;animation:f23drain 8s ease-in-out infinite,f23wave 6s linear infinite}
.ps .f23w div:last-child:before{animation:f23fill 8s ease-in-out infinite,f23wave 6s linear infinite}
@keyframes f23drain{0%,12%{top:22%}62%,86%{top:64%}100%{top:22%}}
@keyframes f23fill{0%,20%{top:100%}68%,86%{top:24%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.ps .f23w i,.ps .f23w div:first-child:before{animation:none}}
.ps .plan .x-row{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:9px 4px;margin:0;color:#fff}
.ps .plan .x-row:last-child{border-bottom:0}
.ps .plan .x-row em{color:#eaeaea}
.ps .plan .x-row span,.ps .plan .x-row b{color:#fff;font-weight:600}
.ps .plan.b .x-row,.ps .plan .x-row{border-color:rgba(255,255,255,.1)}
.ps .plan,.ps .plan:hover{transform:none}
.ps{--gl-tint:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%);--gl-sh:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;--gl-bd:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);--muted:#A8A8A8}
.ps #p1[data-o] .slab,.ps #p3[data-o="1"] .g,.ps #p4[data-o="1"] .q.front,.ps #p5[data-o] .pg.front{background:var(--gl-tint),rgba(18,18,22,.5);-webkit-backdrop-filter:blur(30px) saturate(140%)!important;backdrop-filter:blur(30px) saturate(140%)!important;box-shadow:var(--gl-sh);border:1px solid;border-color:var(--gl-bd);border-radius:20px}
.ps #p4[data-o="1"] .q,.ps #p5[data-o] .pg{background:var(--gl-tint),rgba(18,18,22,.88);box-shadow:var(--gl-sh);border:1px solid;border-color:var(--gl-bd);border-radius:20px}
.ps #p4[data-o="1"] .q.fly{background:var(--gl-tint),rgba(18,18,22,.94)}
.ps #p3[data-o="1"] .rst{filter:none}
.ps #p5 .pg{border-radius:16px}
.ps .node,.ps .det,.ps .solo,.ps .x-row,.ps .x-forces div,.ps .rdw .radar-demo{border-radius:14px}
.ps .plan{border-radius:16px}
.ps .sh h2{font-size:clamp(28px,3.05vw,44px);line-height:1.08;max-width:820px;text-wrap:balance}
.ps .eco-l h3,.ps .rep-l h3{font-size:clamp(32px,3.9vw,56px);line-height:1.02;text-wrap:balance}
.ps .eco-l p,.ps .rep-l p,.ps .x-steps p,.ps .q blockquote,.ps .det p{text-wrap:pretty}
.ps .swap{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.ps #p4[data-o="1"] .q,.ps #p4[data-o="1"] .q.fly,.ps #p5[data-o] .pg,.ps #p2 .dev{background:var(--gl-tint),rgba(18,18,22,.5);-webkit-backdrop-filter:blur(30px) saturate(140%)!important;backdrop-filter:blur(30px) saturate(140%)!important;box-shadow:var(--gl-sh);border:1px solid;border-color:var(--gl-bd)}
.ps #p2 .dev:after{display:none}
.ps #p4note{text-align:center}
.ps .det,.ps .solo,.ps .rdw .radar-demo{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14)}
.ps .rdw .radar-demo{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.ps .rp{will-change:auto}
.ps .sh{transform:translate3d(calc(var(--plx,0)*-8px),calc(var(--ply,0)*-5px + (var(--p,0) - .5)*-22px),0)}
.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav{transform:translate3d(calc(var(--plx,0)*-14px),calc(var(--ply,0)*-8px),0)}
.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:translate3d(calc(var(--plx,0)*12px),calc(var(--ply,0)*8px + (var(--p,0) - .5)*14px),0)}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps .sh,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav,.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:none}}
.ps #p1[data-o] .slab,.ps #p3[data-o="1"] .g,.ps #p4[data-o="1"] .q,.ps #p4[data-o="1"] .q.front,.ps #p4[data-o="1"] .q.fly,.ps #p2 .dev{background:var(--gl-tint),rgba(18,18,22,.7)}
.ps .sh{transform:translate3d(calc(var(--plx,0)*-16px),calc(var(--ply,0)*-10px + (var(--p,0) - .5)*-44px),0)}
.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav{transform:translate3d(calc(var(--plx,0)*-28px),calc(var(--ply,0)*-16px),0)}
.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:translate3d(calc(var(--plx,0)*30px),calc(var(--ply,0)*18px + (var(--p,0) - .5)*30px),0)}
.ps .eco-l,.ps .rep-l,.ps .x-steps{background:rgba(6,6,8,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:20px;padding:24px 26px;margin-left:-26px}
.ps .x-steps{padding:6px 26px}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps .sh,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav,.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:none}}
.ps .sh,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav,.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:none}
.ps .eco-l,.ps .rep-l,.ps .x-steps{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:0;margin-left:0}
.ps #p1 .stg:before,.ps #p2 .stg:before,.ps #p5 .stg:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.52) 28%,rgba(0,0,0,.22) 46%,rgba(0,0,0,0) 60%)}
.ps .stg>.wrap{position:relative;z-index:1}
.ps #p1 .stg:before,.ps #p2 .stg:before,.ps #p5 .stg:before{display:none}
.ps .sh{transform:translate3d(0,calc(max(var(--tr,0),0)*70px + min(var(--tr,0),0)*320px),0)}
.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav{transform:translate3d(0,calc(max(var(--tr,0),0)*150px + min(var(--tr,0),0)*260px),0)}
.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs{transform:translate3d(0,calc(max(var(--tr,0),0)*260px + min(var(--tr,0),0)*150px),0)}
.ps .x-note,.ps .cta{transform:translate3d(0,calc(max(var(--tr,0),0)*320px + min(var(--tr,0),0)*70px),0)}
.ps #dev .x-note{transform:none}
@media (prefers-reduced-motion:reduce){.ps .sh,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .filt,.ps .rnav,.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pgs,.ps .x-note,.ps .cta{transform:none}}
.ps #p3 .rB{grid-template-columns:minmax(0,600px) minmax(0,360px);grid-template-rows:auto;justify-content:center;align-content:center}
.ps #p3 .rB .side{grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}
.ps #p3 .rB .kv{padding:12px 20px}
.ps #p3 .rB .big{padding:24px 28px;gap:14px}
.ps #p3 .rB .big strong{margin:4px 0}
.ps #p4note b{color:#fff;font-weight:700}
.ps #p5 .sh h2{max-width:590px}
.ps .sh h2,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .x-note,.ps .filt,.ps .rnav{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75),0 0 40px rgba(0,0,0,.6)}
.ps #p1[data-o] .slab,.ps #p3[data-o="1"] .g,.ps #p2 .dev,.ps #p4[data-o="1"] .q,.ps #p4[data-o="1"] .q.fly{background:var(--gl-tint),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important}
.ps #p4[data-o="1"] .q.front{background:var(--gl-tint),rgba(18,18,22,.7);-webkit-backdrop-filter:blur(30px) saturate(140%)!important;backdrop-filter:blur(30px) saturate(140%)!important}
.ps #p5 .sh{margin-top:30px;margin-bottom:6px}
.ps #p5 .sh h2{font-size:clamp(32px,3.6vw,52px);max-width:700px}
.ps .sh h2,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .x-note,.ps .filt,.ps .rnav{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.4)}
.ps .chart .csvg{position:relative;flex:1;min-height:90px}
.ps .chart .csvg svg{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.ps .chart .ln{stroke-dasharray:none;stroke-dashoffset:0;clip-path:inset(-12px calc(100% - var(--d,0)*100%) -12px -4px)}
.ps .cdot{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--green);animation:cdot 1.1s ease-in-out infinite}
.ps .cdot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(57,255,20,.7);animation:cring 1.1s ease-out infinite}
@keyframes cdot{50%{opacity:.35}}
@keyframes cring{from{transform:scale(.5);opacity:.9}to{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.ps .cdot,.ps .cdot:after{animation:none}}
.ps #p3 .mini{text-align:center}
.ps #p5 .sh{height:0;margin:0;overflow:visible;align-items:flex-start;position:relative;z-index:3}
.ps #p5 .sh h2{margin-top:22px}
.ps #p5 .rep{align-items:end}
.ps #p5 .rep-l{padding-bottom:22px}
.ps #p5 .rep-l p{min-height:0}
.ps #p5 .rep{align-items:stretch}
.ps #p5 .rep-col{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-width:0;padding:22px 0}
.ps #p5 .sh{height:auto;margin:0;display:block;position:static}
.ps #p5 .sh h2{margin:0;font-size:clamp(26px,3.3vw,48px);max-width:12.8em}
.ps #p5 .rep{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.ps #p5 .rep-l{padding-bottom:0}
.ps #p5 .pgs{align-self:center}
@media (max-width:900px){.ps #p5 .rep-col{gap:18px;padding:0}
.ps #p5 .sh h2{max-width:none}}
.ps .dirw{grid-template-columns:minmax(0,1fr) 150px}
.ps .dirw>div:first-child{min-width:0}
.ps .dirw strong{min-height:clamp(54px,6.4vw,88px);white-space:nowrap}
.ps #scrB strong.sm{font-size:clamp(40px,4.6vw,64px)}
@media (min-width:700px) and (max-width:1000px){.ps #p5 .rep{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px}
.ps #p5 .pgs-in{zoom:1.02}
.ps #p5 .rep-col{gap:24px;padding:22px 0}
.ps #p5 .sh h2{max-width:12.8em}}
.ps #p3 .mini{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}
.ps #p1 .sh{margin-bottom:40px}
.ps .eco-l{align-self:center}
.ps .eco-l p{min-height:0}
.ps .eco-l .hint:empty{display:none}
.ps #ecoN{visibility:hidden}
.ps #deck .pl-tec .solo{opacity:0}
.ps #deck .pl-tec.tecIn .solo{animation:tecTxt .7s cubic-bezier(.16,1,.3,1) both}
@keyframes tecTxt{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.ps .slab .solo{flex:none}
.ps .holo{position:relative;flex:1;min-height:240px;margin-top:10px}
.ps .slab .solo p{margin-bottom:0}
.ps .holo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps #p1 .eco-col{display:flex;flex-direction:column;justify-content:center;gap:56px;min-width:0;align-self:center}
.ps #p1 .eco-col .sh{margin:0;display:block}
.ps #p1 .sh.shm{margin:0 0 12px;justify-content:flex-end;min-height:0}
.ps #p1 .sh.shm:empty{display:none}
.ps #p1 .eco-l{align-self:auto}
.ps .swap{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.ps .swap.sw-out{opacity:0;transform:translateY(6px);transition:opacity .42s ease,transform .42s ease}
/* seções do site no mesmo padrão */
#como-entrar .eco-card,#comunidade .stat:hover,.wl-box.wl-box.wl-box,.lg-box.lg-box.lg-box{background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);border-radius:20px}
/* perguntas frequentes: leves, só o texto e o sinal de mais, com um fio fino entre elas */
/* barra do topo sem fundo: a logo, o menu e o botão ficam direto sobre a página */
#nav,#nav.solid{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important}
#nav:after{display:none}
/* rodapé: um pouco de transparência e um desfoque bem leve, no espírito dos cards */
.foot{background:rgba(0,0,0,.24);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-top:1px solid rgba(255,255,255,.1)}
/* véu do lado esquerdo: mais leve e sem degrau, para o corredor aparecer igual dos dois lados */
@media (min-width:861px){.hero:before{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.36) 34%,rgba(0,0,0,.12) 58%,rgba(0,0,0,0) 72%)}main .sec.left:before{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.36) 40%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 74%)}}
/* sem a faixa que corria com Educação, Acompanhamento, Carteiras... logo abaixo do topo */
.marquee{display:none}
/* texto sobre o corredor: sombra macia em volta das letras, sem bloco atrás */
.hero h1,.hero .wrap>p,.sec h2,.sec .intro,.sec .wrap>p{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.4)}
/* botões principais: minimalistas. Fio fino, fundo quase transparente, sem seta nem brilho; o primeiro com o fio verde */
.hero .ctas .btn,.ps .cta .btn{min-height:48px;padding:0 24px;font-size:15px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);box-shadow:none;transition:border-color .3s,background-color .3s}
.hero .ctas .btn:hover,.ps .cta .btn:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);transform:none;box-shadow:none!important}
.hero .ctas .btn:not(.line),.ps .cta .btn:first-child{border-color:rgba(57,255,20,.75)}
.hero .ctas .btn:not(.line):hover,.ps .cta .btn:first-child:hover{border-color:#39FF14;background:rgba(57,255,20,.1)}
/* botão Área de membros: minimalista, com um ponto verde que pulsa de leve para chamar a atenção dos membros */
#nav .btn{min-height:40px;padding:0 18px 0 16px;gap:10px;font-size:14px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.26);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;transition:border-color .3s,background-color .3s}
#nav .btn:before{content:"";position:static;inset:auto;z-index:auto;flex:none;width:7px;height:7px;border-radius:50%;background:#39FF14;opacity:1;animation:membroPonto 2.6s ease-in-out infinite}
#nav .btn:hover{border-color:rgba(57,255,20,.8);background:rgba(57,255,20,.08);box-shadow:none!important}
/* o mesmo botão sem endereço (desativado em 03/10/2026): tudo igual, só não leva a lugar nenhum */
.nav a.btn.line[aria-disabled="true"]{position:relative;isolation:isolate}
@keyframes membroPonto{0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,.55)}55%{box-shadow:0 0 0 7px rgba(57,255,20,0)}}
@media (prefers-reduced-motion:reduce){#nav .btn:before{animation:none}}
.hero h1 .l-sub,.hero h1 .l-sub span{color:#39FF14}
.hero .wrap>p b,.hero .wrap>p strong{font-weight:700;color:#fff}
/* capa só com o touro; sem touro (celular, tablet) a capa não existe */
.capa{height:100vh;height:100svh}
.sem-touro .capa{display:none}
.hero .cue{display:none}
.hero .wrap{zoom:calc(var(--k,1)*.78)}
/* cursor: a seta do sistema dá lugar a uma seta fina em verde neon; o círculo continua acompanhando */
body.has-cursor,body.has-cursor *{cursor:none!important}
.cur{width:24px;height:24px;margin:-3px 0 0 -3px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 3 L19.5 10.2 L12.2 12.2 L10.2 19.5 Z%27 fill=%27%2339FF14%27 fill-opacity=%27.14%27 stroke=%27%2339FF14%27 stroke-width=%271.5%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat 0 0/24px 24px;box-shadow:none!important;filter:drop-shadow(0 0 3px rgba(57,255,20,.8)) drop-shadow(0 0 9px rgba(57,255,20,.35))}
/* ecossistema: seletor de versões (só no demo), peça do encaixe, fios de luz, card que toma a tela e trilha */
.vsel{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;gap:6px;align-items:center;font-size:12px;color:#a8a8a8;background:rgba(10,10,12,.72);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 6px 6px 14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vsel button{font:inherit;color:#d8d8d8;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;transition:border-color .25s,background-color .25s,color .25s}
.vsel button:hover{border-color:rgba(255,255,255,.5)}
.vsel button[aria-pressed="true"]{color:#fff;border-color:rgba(57,255,20,.8);background:rgba(57,255,20,.1)}
.enx{position:fixed;left:0;top:0;z-index:6;width:calc(50px*var(--k,1));height:calc(50px*var(--k,1));margin:calc(-25px*var(--k,1)) 0 0 calc(-25px*var(--k,1));display:grid;place-items:center;border-radius:28%;border:1px solid rgba(57,255,20,.7);background:color-mix(in srgb,#0a0f0a calc(var(--cor,1)*100%),#39FF14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);pointer-events:none;opacity:0;will-change:transform,opacity}
.enx img{filter:brightness(var(--cor,1));width:84%;height:auto;display:block}
.enx:after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(57,255,20,.9);opacity:0;pointer-events:none}
.enx.enc{animation:enxEnc .75s cubic-bezier(.3,1.5,.5,1)}
.enx.enc:after{animation:enxAnel .9s ease-out}
.enx.pulso:after{animation:enxAnel .8s ease-out}
@keyframes enxEnc{0%{scale:1.55}55%{scale:.92}100%{scale:1}}
@keyframes enxAnel{0%{opacity:.9;scale:1}100%{opacity:0;scale:2.1}}
.enx-fio{position:fixed;left:0;top:0;z-index:5;height:1px;width:0;transform-origin:0 50%;background:linear-gradient(90deg,rgba(57,255,20,0),rgba(57,255,20,.6));pointer-events:none;opacity:0}
.ps .fios{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.tomada{position:fixed;z-index:40;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10px*var(--k,1));border-radius:22px;border:1px solid;border-color:rgba(57,255,20,.6) rgba(255,255,255,.2) rgba(176,38,255,.65) rgba(255,255,255,.2);background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.16),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.2),transparent 50%),rgba(12,12,16,.9);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.tomada span{font-size:calc(22px*var(--k,1));color:#39FF14;font-variant-numeric:tabular-nums}
.tomada strong{font-size:calc(clamp(56px,9vw,150px));font-weight:500;letter-spacing:-.04em;line-height:1;color:#fff}
.ps .trilha{position:absolute;left:0;top:0;z-index:2;width:calc(18px*var(--k,1));display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:none;opacity:0}
.ps .trilha b{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(180deg,rgba(57,255,20,.5),rgba(176,38,255,.5))}
.ps .trilha i{position:relative;width:calc(16px*var(--k,1));height:calc(16px*var(--k,1));border-radius:50%;border:1px solid rgba(255,255,255,.4);background:#0b0b0d;transition:border-color .4s,background-color .4s}
.ps .trilha i.ja{border-color:#39FF14;background:#1f8f0c}
.ps .trilha i.on{border-color:#39FF14}
:root[data-ev="3"] #ecoTabs i{height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 7px)}
:root[data-ev="3"] #ecoTabs i.on{background:repeating-linear-gradient(90deg,#39FF14 0 4px,transparent 4px 7px)}
/* trilha: o texto do pilar desce junto com o marcador e troca só por transparência, sem sair do lugar nem piscar */
:root[data-ev="3"] .ps .eco-l{transform:translateY(var(--ty,0px));transition:transform 1.4s cubic-bezier(.4,0,.2,1) .24s}
:root[data-ev="3"] .ps #ecoTxt.swap,:root[data-ev="3"] .ps #ecoTxt.swap.sw-out{opacity:1;transform:none;transition:none}
/* a coluna do texto fica sempre na sua própria camada: assim ela não é redesenhada (e não pisca) quando a troca começa e termina; o título fica menor e mais leve */
.ps #p1 .eco-col,:root[data-ev="3"] .ps .eco-l{will-change:transform}
.ps #ecoTxt,.ps .eco-fant{will-change:clip-path}
.ps #ecoTxt,.ps .eco-fant{min-height:var(--ecoMh,300px)!important}
:root:not(.sem-touro) .hero .ctas{padding-left:60px}
.hero .ctas .btn{padding:0 38px}
.ps #p1 .eco-col h2{font-size:clamp(24px,2.5vw,36px)!important;font-weight:400!important;letter-spacing:-.02em;line-height:1.12!important;max-width:none!important}
.ps #p1 h2.t3 em,.ps #p1 h2.t3 i,.ps #p1 h2.t3 span{display:block}
.ps #p1 h2.t3 em,.ps #p1 h2.t3 i{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;font-size:1.75em;line-height:1.02;letter-spacing:-.02em;margin:.02em 0 .06em}
:root[data-ev="3"] .ps .eco-l{text-align:right}
:root[data-ev="3"] .ps .eco-l p{margin-left:auto}
:root[data-ev="3"] .ps #ecoTabs{justify-content:flex-end}
:root[data-ev="3"] .ps .eco-l{position:relative}
.ps .eco-fant{position:absolute;left:0;top:0;width:100%;pointer-events:none;transform:none!important;transition:none!important}
/* card do ecossistema, modelos 2 a 4: profundidade 3D de verdade, com o mesmo vidro. A placa do card vai para o fundo e as peças ficam à frente dela */
:root:not([data-cv="1"]) .ps .x-eco{perspective:1300px}
:root:not([data-cv="1"]) .ps #deck{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
:root:not([data-cv="1"]) .ps #deck .slab{transform-style:preserve-3d;will-change:transform!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}
:root:not([data-cv="1"]) .ps #deck .slab:after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:-1;transform:translateZ(-2px);background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);border-radius:20px}
:root:not([data-cv="1"]) .ps #deck .slab h4{transform:translateZ(22px)}
:root:not([data-cv="1"]) .ps #deck .sl2,:root:not([data-cv="1"]) .ps #deck .nodes{transform-style:preserve-3d}
:root:not([data-cv="1"]) .ps #deck .node{transform:translateZ(44px);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 26px 34px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .45s}
:root:not([data-cv="1"]) .ps #deck .node.on{transform:translateX(6px) translateZ(84px);box-shadow:0 40px 44px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.2)}
:root:not([data-cv="1"]) .ps #deck .node:hover{transform:translateZ(70px)}
:root:not([data-cv="1"]) .ps #deck .det,:root:not([data-cv="1"]) .ps #deck .solo{transform:translateZ(26px);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 30px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
:root:not([data-cv="1"]) .ps #deck .holo{transform:translateZ(58px)}
/* 3 · duas placas: a moldura some; a lista e o detalhe viram placas próprias, em distâncias e ângulos diferentes */
:root[data-cv="3"] .ps #deck .slab:after{opacity:0}
:root[data-cv="3"] .ps #deck .nodes{transform:translateZ(70px) rotateY(7deg);padding:16px;margin:-16px 10px -16px -30px;border-radius:20px;background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);border-radius:20px}
:root[data-cv="3"] .ps #deck .node{transform:translateZ(24px)}
:root[data-cv="3"] .ps #deck .node.on{transform:translateX(6px) translateZ(52px)}
:root[data-cv="3"] .ps #deck .det,:root[data-cv="3"] .ps #deck .solo{transform:translateZ(0) rotateY(-3deg);border-radius:20px;background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);border-radius:20px}
/* 4 · aberto: sem moldura nenhuma; cada peça flutua sozinha sobre o corredor, em alturas diferentes */
:root[data-cv="4"] .ps #deck .slab:after{display:none}
:root[data-cv="4"] .ps #deck .node{background:rgba(18,18,22,.5);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
:root[data-cv="4"] .ps #deck .node:nth-child(1){transform:translateX(-18px) translateZ(36px)}
:root[data-cv="4"] .ps #deck .node:nth-child(2){transform:translateX(10px) translateZ(92px)}
:root[data-cv="4"] .ps #deck .node:nth-child(3){transform:translateX(-8px) translateZ(58px)}
:root[data-cv="4"] .ps #deck .node:nth-child(4){transform:translateX(16px) translateZ(110px)}
:root[data-cv="4"] .ps #deck .node.on{transform:translateX(6px) translateZ(130px)}
:root[data-cv="4"] .ps #deck .det,:root[data-cv="4"] .ps #deck .solo{transform:translateZ(18px);border-radius:20px;background:radial-gradient(120% 90% at 0% 0%,rgba(57,255,20,.14),transparent 46%),radial-gradient(120% 90% at 100% 100%,rgba(176,38,255,.16),transparent 50%),rgba(18,18,22,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -26px #000;border:1px solid;border-color:rgba(57,255,20,.5) rgba(255,255,255,.2) rgba(176,38,255,.6) rgba(255,255,255,.2);border-radius:20px}
/* aberto: o card um pouco mais para a direita, para as peças mais altas não passarem por cima da trilha */
:root[data-cv="4"] .ps #deck{translate:46px 0}
/* aberto (teste): o texto do Gênesis Labs solto, branco, sem fundo nem moldura */
.ps #deck .solo{background:none!important;border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
.ps #deck .solo:before,.ps #deck .solo:after{display:none!important}
.ps #deck .solo b{color:#fff}
.ps #deck .solo p{color:#fff}
/* as peças elevadas não recebem a inclinação antiga com o mouse (as duas brigavam e a peça tremia) */
:root[data-cv="4"] .ps #deck .solo,:root[data-cv="4"] .ps #deck .det{transform:translateZ(18px)!important}
:root[data-cv="2"] .ps #deck .solo,:root[data-cv="2"] .ps #deck .det{transform:translateZ(26px)!important}
/* aberto: uma película escura e fina atrás dos blocos de informação, com as bordas se desfazendo, para os dados aparecerem melhor */
:root[data-cv="4"] .ps #deck .det,:root[data-cv="4"] .ps #deck .rdw,:root[data-cv="4"] .ps #deck .flow{box-shadow:0 0 70px 26px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-cv="4"] .ps #deck .rdw,:root[data-cv="4"] .ps #deck .flow{background:rgba(0,0,0,.28);border-radius:18px}
/* aberto: sem a luz que acompanha o mouse dentro do card */
:root[data-cv="4"] .ps #deck .slab:before,:root[data-cv="4"] .ps #deck .solo:before,:root[data-cv="4"] .ps #deck .det:before{display:none!important}
/* número do pilar (01 a 05) em verde, com um neon bem leve */
:root[data-ev="3"] .ps .eco-l .n{color:#39FF14;text-shadow:0 0 7px rgba(57,255,20,.5),0 0 16px rgba(57,255,20,.18)}
/* pilar 3 no modelo aberto: os blocos ficam alinhados e não passam por cima do painel de detalhe */
:root[data-cv="4"] .ps #deck .slab.pl-den .node{transform:translateX(-26px) translateZ(46px)!important;width:100%}
:root[data-cv="4"] .ps #deck .slab.pl-den .node.on{transform:translateX(-26px) translateZ(76px)!important}
:root[data-cv="4"] .ps #deck .slab.pl-den .mk span,:root[data-cv="4"] .ps #deck .slab.pl-den .mk i{font-style:normal}
/* 1 · vidro: etiquetas em vidro leve */
:root[data-b3="1"] .ps #deck .slab.pl-den .mk span,:root[data-b3="1"] .ps #deck .slab.pl-den .mk i{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#f2f2f2}
/* 2 · bloco verde: o bloco selecionado fica em verde sólido, com as letras pretas */
:root[data-b3="2"] .ps #deck .slab.pl-den .node.on{background:#39FF14!important;border-color:#39FF14!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:root[data-b3="2"] .ps #deck .slab.pl-den .node.on b,:root[data-b3="2"] .ps #deck .slab.pl-den .node.on>span,:root[data-b3="2"] .ps #deck .slab.pl-den .node.on .mk.week{color:#000!important}
:root[data-b3="2"] .ps #deck .slab.pl-den .node.on .mk span,:root[data-b3="2"] .ps #deck .slab.pl-den .node.on .mk i{color:#000;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.45)}
/* 3 · etiquetas verdes: os blocos seguem em vidro e as etiquetas de dentro ficam em verde sólido */
:root[data-b3="3"] .ps #deck .slab.pl-den .mk span,:root[data-b3="3"] .ps #deck .slab.pl-den .mk i{background:#39FF14;border:1px solid #39FF14;color:#000;font-weight:600}
:root[data-b3="3"] .ps #deck .slab.pl-den .mk.week{color:#39FF14}
/* pilar 3, arranjos. As peças entram com um movimento curto e suave cada vez que o pilar chega à frente */
@keyframes a3esq{from{opacity:0;translate:-34px 0}to{opacity:1;translate:0 0}}
@keyframes a3sobe{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes a3surge{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes a3boia{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* 1 · escada: os blocos em degraus, cada um mais à frente e mais para a direita; o detalhe mais estreito */
:root[data-a3="1"] .ps #deck .slab.pl-den .sl2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
:root[data-a3="1"] .ps #deck .slab.pl-den .node:nth-child(1){transform:translateX(-30px) translateZ(48px)!important}
:root[data-a3="1"] .ps #deck .slab.pl-den .node:nth-child(2){transform:translateX(26px) translateZ(92px)!important;margin-top:-6px}
:root[data-a3="1"] .ps #deck .slab.pl-den.ent .node{animation:a3esq .9s cubic-bezier(.16,1,.3,1) both}
:root[data-a3="1"] .ps #deck .slab.pl-den.ent .node:nth-child(2){animation-delay:.14s}
:root[data-a3="1"] .ps #deck .slab.pl-den.ent .det{animation:a3esq .9s cubic-bezier(.16,1,.3,1) .26s both}
/* 2 · lado a lado: os dois blocos na mesma linha, do mesmo tamanho; o detalhe embaixo, em faixa larga */
:root[data-a3="2"] .ps #deck .slab.pl-den .sl2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
:root[data-a3="2"] .ps #deck .slab.pl-den .nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
:root[data-a3="2"] .ps #deck .slab.pl-den .node{transform:translateZ(72px)!important;width:auto}
:root[data-a3="2"] .ps #deck .slab.pl-den .det{transform:translateZ(16px)!important;columns:2;column-gap:28px}
:root[data-a3="2"] .ps #deck .slab.pl-den .det p{break-inside:avoid}
:root[data-a3="2"] .ps #deck .slab.pl-den.ent .node{animation:a3sobe .9s cubic-bezier(.16,1,.3,1) both}
:root[data-a3="2"] .ps #deck .slab.pl-den.ent .node:nth-child(2){animation-delay:.12s}
:root[data-a3="2"] .ps #deck .slab.pl-den.ent .det{animation:a3sobe .9s cubic-bezier(.16,1,.3,1) .24s both}
/* 3 · sobreposto: o bloco escolhido fica na frente, maior; o outro fica atrás, deslocado, e os dois trocam de lugar ao escolher */
:root[data-a3="3"] .ps #deck .slab.pl-den .nodes{display:grid}
:root[data-a3="3"] .ps #deck .slab.pl-den .node{grid-area:1/1;align-self:start;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s,border-color .3s}
:root[data-a3="3"] .ps #deck .slab.pl-den .node.on{transform:translateX(-30px) translateY(46px) translateZ(110px)!important;opacity:1;z-index:2}
:root[data-a3="3"] .ps #deck .slab.pl-den .node:not(.on){transform:translateX(26px) translateY(-8px) translateZ(24px) scale(.93)!important;opacity:.55}
:root[data-a3="3"] .ps #deck .slab.pl-den.ent .node{animation:a3surge .9s cubic-bezier(.16,1,.3,1) both}
:root[data-a3="3"] .ps #deck .slab.pl-den.ent .det{animation:a3surge .9s cubic-bezier(.16,1,.3,1) .18s both}
/* 4 · compacto: blocos menores numa coluna estreita, só com título e etiquetas, flutuando devagar; o detalhe ganha espaço */
:root[data-a3="4"] .ps #deck .slab.pl-den .sl2{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
:root[data-a3="4"] .ps #deck .slab.pl-den .node{transform:translateX(-22px) translateZ(64px)!important;padding:14px 16px;animation:a3boia 7s ease-in-out infinite}
:root[data-a3="4"] .ps #deck .slab.pl-den .node:nth-child(2){animation-delay:-3.5s}
:root[data-a3="4"] .ps #deck .slab.pl-den .node>span{display:none}
:root[data-a3="4"] .ps #deck .slab.pl-den .node b{font-size:17px}
.vsel+.vsel+.vsel+.vsel{bottom:154px}
@media (prefers-reduced-motion:reduce){.ps #deck .slab .node,.ps #deck .slab .det{animation:none!important}}
.vsel+.vsel+.vsel{bottom:108px}
/* a coluna do texto e a trilha um pouco mais para a esquerda, para a trilha não ficar sobre o card */
:root[data-ev="3"]:not([data-cv="4"]) .ps #p1 .eco-col{translate:-40px 0}
/* Radar News: fica o globo de pontos; some a escolha entre as três versões */
.ps .rdsw{display:none}
/* cards grandes sem o título (já está ao lado, no texto da esquerda); conteúdo centralizado, com a mesma folga nos quatro lados */
.ps #deck .slab h4{display:none!important}
.ps #deck .slab{padding:26px!important;justify-content:center}
.ps #deck .slab.pl-edu .nodes,.ps #deck .slab.pl-den .nodes{align-self:center}
.ps #deck .slab .solo{padding:0 0 16px!important}
/* pilar 1: o bloco escolhido fica em verde sólido com letras pretas; os outros seguem em vidro */
.ps #deck .slab.pl-edu .node.on{background:#39FF14!important;border-color:#39FF14!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ps #deck .slab.pl-edu .node.on b,.ps #deck .slab.pl-edu .node.on span{color:#000!important}
/* pilar 3: etiquetas verdes sólidas, mas leves (sem negrito); os blocos compactos centralizados na coluna deles */
:root[data-b3="3"] .ps #deck .slab.pl-den .mk span,:root[data-b3="3"] .ps #deck .slab.pl-den .mk i{font-weight:400!important;font-size:13px;padding:3px 10px}
:root[data-a3="4"] .ps #deck .slab.pl-den .sl2{column-gap:30px}
:root[data-a3="4"] .ps #deck .slab.pl-den .nodes{justify-self:center;width:88%}
:root[data-a3="4"] .ps #deck .slab.pl-den .node{transform:translateZ(64px)!important}
/* pilar 2: os dois blocos lado a lado no alto; embaixo, à esquerda, a teia de informação que alimenta o cérebro do membro; à direita, o detalhe */
.ps #deck .slab.pl-com .sl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr);gap:16px 18px}
.ps #deck .slab.pl-com .nodes{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.ps #deck .slab.pl-com .node{transform:none!important;width:auto;padding:14px 16px}
.ps #deck .slab.pl-com .node b{font-size:17px}
.ps #deck .slab.pl-com .node>span{font-size:14px}
.vsel+.vsel{bottom:62px}
/* telas grandes: o conteúdo cresce junto com a tela (a medida --k vem do tamanho da janela) */
.wrap{zoom:var(--k,1)}
main .sec h2,main .sec h2.reveal{font-size:clamp(28px,3.05vw,44px)!important;line-height:1.08!important;max-width:18ch;text-wrap:balance}
#comunidade .stat{border:1px solid transparent;transition:background-color .35s,border-color .35s,box-shadow .35s}
#comunidade h2,#comunidade h2.reveal{font-size:clamp(34px,3.9vw,56px)!important;max-width:16ch}

/* pilar 2 (Comunidades): janela de conversa da comunidade, no vidro do site */
.ps #deck .slab.pl-com .tg{grid-column:1;grid-row:2;min-height:260px;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
.ps #deck .slab.pl-com .det{grid-column:2;grid-row:2}
.ps .tg-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.ps .tg-top i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(57,255,20,.6);background:#0a0f0a}
.ps .tg-top i img{width:78%;display:block}
.ps .tg-top b{display:block;font-size:14px;font-weight:600;color:#fff;line-height:1.2}
.ps .tg-top span{font-size:12px;color:#a8a8a8}
.ps .tg-top em{margin-left:auto;font-style:normal;font-size:11px;color:#8d8d8d}
.ps .tg-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 12px 12px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.ps .tg-m{flex:none;align-self:flex-start;max-width:92%;padding:6px 10px 5px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);animation:tgSobe .6s cubic-bezier(.16,1,.3,1) both}
@keyframes tgSobe{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.ps .tg-n{display:block;font-size:12px;font-weight:600;margin-bottom:1px}
.ps .tg-n.nv{color:#7be36a}
.ps .tg-n.nr{color:#c79bff}
.ps .tg-n.nb{color:#e6e6e6}
.ps .tg-m p{margin:0;min-height:0;max-width:none;font-size:13.5px;line-height:1.4;color:#ededed}
.ps .tg-m time{display:block;text-align:right;font-size:10.5px;color:#8a8a8a;margin-top:1px;font-variant-numeric:tabular-nums}
.ps .tg-mc{width:92%}
.ps .tg-card{margin:4px 0 2px;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.34)}
.ps .tg-c1 b{display:block;font-size:13px;font-weight:600;color:#fff}
.ps .tg-c1 span{font-size:11px;color:#9a9a9a;font-variant-numeric:tabular-nums}
.ps .tg-c2{margin-top:9px;font-size:14px;font-weight:600;color:#fff}
.ps .tg-c2 span{display:block;font-size:12px;font-weight:400;color:#9a9a9a}
.ps .tg-c2 u{text-decoration:none;color:#e26868}
.ps .tg-c3{margin-top:8px;font-size:26px;line-height:1;font-weight:600;letter-spacing:-.02em;color:#39FF14;font-variant-numeric:tabular-nums}
.ps .tg-c3 small{font-size:13px;font-weight:500;color:#fff;letter-spacing:0}
.ps .tg-c4{margin-top:3px;font-size:14px;font-weight:600;color:#39FF14;font-variant-numeric:tabular-nums}
.ps .tg-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.ps .tg-card dt{font-size:11px;color:#9a9a9a}
.ps .tg-card dd{margin:0;font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ps .tg-m{animation:none}}
/* o painel de texto ao lado da conversa não mostra barra de rolagem quando sobra um fio de altura */
.ps #deck .slab.pl-com .det{scrollbar-width:none}
.ps #deck .slab.pl-com .det::-webkit-scrollbar{display:none}


/* Página 4 (Gênesis Labs) · botões de chamada */
/* os botões de chamada das seções seguem os do topo da página (mesmo desenho, mesma proporção) */
.ps .cta .btn{zoom:.78;padding:0 38px}

/* Página 4 · passos no modelo Índice (escolhido); os cards ao lado têm opções de teste, só dentro de #p2 e só com data-gc no <html> */
.ps #p2 .g4tri,.ps #p2 .g4thumb{display:none}
.ps #p2 .x-steps li,.ps #p2 .g4tri i{cursor:pointer}

/* 5 · Índice: os quatro números em letra grande, lado a lado; o da vez em branco cheio, os outros só no contorno; o título e a explicação do passo da vez aparecem embaixo. As linhas dos dados viram cápsulas */
:root[data-g4="5"] .ps #p2 .x-steps{display:flex;gap:30px;border:0;position:relative;margin-bottom:162px}
:root[data-g4="5"] .ps #p2 .x-steps li{display:block;border:0;padding:0;opacity:1}
:root[data-g4="5"] .ps #p2 .x-steps .k{display:block;width:auto;height:auto;border:0;font-size:clamp(56px,5.2vw,80px);font-weight:600;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.38);text-shadow:none;transition:color .45s,-webkit-text-stroke-color .45s}
:root[data-g4="5"] .ps #p2 .x-steps .k:before{content:"0"}
:root[data-g4="5"] .ps #p2 .x-steps li.on .k{-webkit-text-stroke-color:rgba(57,255,20,.7)}
:root[data-g4="5"] .ps #p2 .x-steps li.at .k{color:#fff;-webkit-text-stroke-color:#fff}
:root[data-g4="5"] .ps #p2 .x-steps li>div{display:none}
:root[data-g4="5"] .ps #p2 .x-steps li.at>div{display:block;position:absolute;left:0;right:0;top:calc(100% + 26px);animation:g4sobe .7s cubic-bezier(.16,1,.3,1) both}
:root[data-g4="5"] .ps #p2 .x-steps b{font-size:clamp(24px,2vw,30px);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
:root[data-g4="5"] .ps #p2 .x-steps div>span{display:block;font-size:17px;line-height:1.6;color:#d4d4d4;max-width:30em}
:root[data-g4="5"] .ps #p2 #scrA .x-row,:root[data-g4="5"] .ps #p2 .x-forces div{border-radius:999px;padding:15px 24px}
:root[data-g4="5"] .ps #p2 #scrA .x-row{margin-bottom:10px}
:root[data-g4="5"] .ps #p2 #scrA .x-row span{font-size:18px}
@keyframes g4sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* coluna da esquerda: números, explicação do passo, e logo abaixo o aviso pequeno e o botão */
.ps #p2 .g4esq{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ps #p2 .g4esq .x-note{margin:0 0 20px;font-size:11.5px;line-height:1.5;font-weight:400;color:var(--muted);white-space:nowrap;max-width:none}
.ps #p2 .g4esq .x-note b{color:#fff;font-weight:600}
.ps #p2 .g4esq .cta{margin-top:0}

/* CARD · 2 · Linhas finas: sem caixinhas, só fios entre as linhas e o valor maior; a direção provável vira um bloco sólido na cor do sinal */
:root[data-gc="2"] .ps #p2 #scrA .x-row,:root[data-gc="2"] .ps #p2 .x-forces div{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;padding:18px 4px;margin:0}
:root[data-gc="2"] .ps #p2 #scrA .x-row:last-child{border-bottom:0}
:root[data-gc="2"] .ps #p2 #scrA .x-row span{font-size:20px;letter-spacing:-.01em}
:root[data-gc="2"] .ps #p2 .x-forces{column-gap:28px;row-gap:0}
:root[data-gc="2"] .ps #p2 .x-forces div{padding:14px 2px}
:root[data-gc="2"] .ps #p2 #scrB .dirw{background:var(--acc);border-radius:18px;padding:18px 24px}
:root[data-gc="2"] .ps #p2 #scrB .dirw small{color:rgba(0,0,0,.62)}
:root[data-gc="2"] .ps #p2 #scrB .dirw strong{color:#000!important;text-shadow:none!important}
:root[data-gc="2"] .ps #p2 #scrB .arc .tr{stroke:rgba(0,0,0,.16)}
:root[data-gc="2"] .ps #p2 #scrB .arc .fl{stroke:#000}
:root[data-gc="2"] .ps #p2 #scrB .arc b,:root[data-gc="2"] .ps #p2 #scrB .arc b small{color:#000;text-shadow:none}

/* CARD · 3 · Mosaico: os dados viram peças de tamanhos diferentes, com o rótulo no alto e o valor grande embaixo; as forças viram quatro peças; nos planos a faixa do título é sólida */
:root[data-gc="3"] .ps #p2 #scrA{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px}
:root[data-gc="3"] .ps #p2 #scrA .x-row{flex-direction:column;justify-content:space-between;margin:0;padding:16px 18px;border-radius:16px;grid-column:span 2}
:root[data-gc="3"] .ps #p2 #scrA .x-row:nth-child(-n+2){grid-column:span 3}
:root[data-gc="3"] .ps #p2 #scrA .x-row em{font-size:14px}
:root[data-gc="3"] .ps #p2 #scrA .x-row span{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;line-height:1.15}
:root[data-gc="3"] .ps #p2 .x-forces{grid-template-columns:repeat(4,minmax(0,1fr))}
:root[data-gc="3"] .ps #p2 .x-forces div{flex-direction:column;align-items:flex-start;gap:8px;border-radius:16px;padding:14px 16px}
:root[data-gc="3"] .ps #p2 .plan{overflow:hidden}
:root[data-gc="3"] .ps #p2 .plan h5{margin:-14px -14px 12px;padding:11px 16px;background:#39FF14;color:#000}
:root[data-gc="3"] .ps #p2 .plan.b h5{background:#B026FF;color:#fff}

/* CARD · 4 · Fio de cor: cada peça tem um fio de cor à esquerda (verde; nos planos, verde e roxo no alto); o estado no cabeçalho vira uma etiqueta */
:root[data-gc="4"] .ps #p2 #scrA .x-row,:root[data-gc="4"] .ps #p2 .x-forces div{border:0;border-left:2px solid #39FF14;border-radius:4px 12px 12px 4px;background:rgba(255,255,255,.045);padding:16px 20px}
:root[data-gc="4"] .ps #p2 #scrA .x-row{margin-bottom:10px}
:root[data-gc="4"] .ps #p2 #scrA .x-row span{font-size:18px}
:root[data-gc="4"] .ps #p2 .x-forces .neu{border-left-color:rgba(255,255,255,.6)}
:root[data-gc="4"] .ps #p2 #scrB .dirw{border-left:2px solid var(--acc);padding-left:20px}
:root[data-gc="4"] .ps #p2 .plan{border:0;border-top:2px solid #39FF14;border-radius:4px 4px 14px 14px;background:rgba(255,255,255,.04)}
:root[data-gc="4"] .ps #p2 .plan.b{border-top-color:#B026FF}
:root[data-gc="4"] .ps #p2 .dev-h .st{padding:5px 12px;border-radius:999px;border:1px solid rgba(57,255,20,.45);background:rgba(57,255,20,.08);color:#fff}

/* CARD · 5 · Um destaque sólido por tela: o estado no cabeçalho, o preço e a direção provável ganham o verde sólido com letra preta; o resto fica em vidro */
:root[data-gc="5"] .ps #p2 .dev-h .st{padding:5px 12px;border-radius:999px;background:#39FF14;color:#000;font-weight:500}
:root[data-gc="5"] .ps #p2 .dev-h .st i{background:#000}
:root[data-gc="5"] .ps #p2 #scrA .x-row{border-radius:14px;padding:16px 20px}
:root[data-gc="5"] .ps #p2 #scrA .x-row:first-child{background:#39FF14;border-color:#39FF14;padding:22px 22px}
:root[data-gc="5"] .ps #p2 #scrA .x-row:first-child em{color:rgba(0,0,0,.65)}
:root[data-gc="5"] .ps #p2 #scrA .x-row:first-child span{color:#000;font-size:28px;font-weight:600;letter-spacing:-.02em}
:root[data-gc="5"] .ps #p2 #scrA .x-row span{font-size:18px}
:root[data-gc="5"] .ps #p2 .x-forces div{border-radius:14px}
:root[data-gc="5"] .ps #p2 #scrB .dirw{background:var(--acc);border-radius:18px;padding:18px 24px}
:root[data-gc="5"] .ps #p2 #scrB .dirw small{color:rgba(0,0,0,.62)}
:root[data-gc="5"] .ps #p2 #scrB .dirw strong{color:#000!important;text-shadow:none!important}
:root[data-gc="5"] .ps #p2 #scrB .arc .tr{stroke:rgba(0,0,0,.16)}
:root[data-gc="5"] .ps #p2 #scrB .arc .fl{stroke:#000}
:root[data-gc="5"] .ps #p2 #scrB .arc b,:root[data-gc="5"] .ps #p2 #scrB .arc b small{color:#000;text-shadow:none}
:root[data-gc="5"] .ps #p2 .plan{overflow:hidden}
:root[data-gc="5"] .ps #p2 .plan h5{margin:-14px -14px 12px;padding:11px 16px;background:#39FF14;color:#000}
:root[data-gc="5"] .ps #p2 .plan.b h5{background:rgba(176,38,255,.18);color:#fff}

/* CARD · 6 · Camadas: o card perde a moldura e as peças de vidro flutuam em alturas diferentes, com sombra embaixo, alternando um pouco para cada lado */
:root[data-gc="6"] .ps #p2 .dev{background:rgba(18,18,22,.28)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important}
:root[data-gc="6"] .ps #p2 .dev-h{border-bottom-color:transparent}
:root[data-gc="6"] .ps #p2 #scrA .x-row,:root[data-gc="6"] .ps #p2 .x-forces div,:root[data-gc="6"] .ps #p2 .plan{background:rgba(26,26,32,.72);border:1px solid rgba(255,255,255,.14);border-radius:16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 34px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-gc="6"] .ps #p2 #scrA .x-row{margin-bottom:12px;padding:17px 22px;width:90%}
:root[data-gc="6"] .ps #p2 #scrA .x-row:nth-child(even){margin-left:10%}
:root[data-gc="6"] .ps #p2 #scrA .x-row span{font-size:19px}
:root[data-gc="6"] .ps #p2 .x-forces div{padding:14px 18px}

/* ---- mais cinco opções do card ---- */
.ps #p2 .g4graf,.ps #p2 .g4can,.ps #p2 .g4scan,.ps #p2 .g4borda{display:none}
.ps #p2 .scr{z-index:1}
/* CARD · 6 · Gráfico ao fundo: uma linha de preço bem leve atravessa o fundo do card e se desenha de novo a cada passo */
:root[data-gc="7"] .ps #p2 .g4graf{display:block;position:absolute;left:0;right:0;top:57px;bottom:0;z-index:0;pointer-events:none}
:root[data-gc="7"] .ps #p2 .g4graf svg{width:100%;height:100%;display:block}
:root[data-gc="7"] .ps #p2 .g4graf .ln{fill:none;stroke:#39FF14;stroke-width:1.4;stroke-opacity:.42;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
:root[data-gc="7"] .ps #p2 .g4graf.vai .ln{animation:g4risca 2.4s cubic-bezier(.16,1,.3,1) forwards}
:root[data-gc="7"] .ps #p2 .g4graf .ar{fill:url(#g4grad);opacity:0;transition:opacity 1.2s .6s}
:root[data-gc="7"] .ps #p2 .g4graf.vai .ar{opacity:1}
:root[data-gc="7"] .ps #p2 #scrA .x-row,:root[data-gc="7"] .ps #p2 .x-forces div{background:rgba(14,14,18,.55);border-radius:14px}
@keyframes g4risca{to{stroke-dashoffset:0}}
/* CARD · 7 · Grade técnica: fundo com uma grade de pontos bem fina e quatro cantoneiras verdes, como uma tela de leitura; linhas só com fios */
:root[data-gc="8"] .ps #p2 .dev{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px)!important;background-size:22px 22px!important;background-color:rgba(14,14,18,.78)!important}
:root[data-gc="8"] .ps #p2 .g4can{display:block;position:absolute;width:18px;height:18px;border:0 solid #39FF14;z-index:2;pointer-events:none}
:root[data-gc="8"] .ps #p2 .g4can.a{left:10px;top:10px;border-left-width:2px;border-top-width:2px;border-top-left-radius:6px}
:root[data-gc="8"] .ps #p2 .g4can.b{right:10px;top:10px;border-right-width:2px;border-top-width:2px;border-top-right-radius:6px}
:root[data-gc="8"] .ps #p2 .g4can.c{left:10px;bottom:10px;border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:6px}
:root[data-gc="8"] .ps #p2 .g4can.d{right:10px;bottom:10px;border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:6px}
:root[data-gc="8"] .ps #p2 #scrA .x-row,:root[data-gc="8"] .ps #p2 .x-forces div{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:17px 4px;margin:0}
:root[data-gc="8"] .ps #p2 #scrA .x-row span{font-size:20px}
/* CARD · 8 · Varredura: um fio verde fino desce pelo card sem parar, como quem está lendo o mercado; as peças ficam em vidro */
:root[data-gc="9"] .ps #p2 .g4scan{display:block;position:absolute;left:0;right:0;top:57px;bottom:0;z-index:2;pointer-events:none;overflow:hidden}
:root[data-gc="9"] .ps #p2 .g4scan i{position:absolute;left:4%;right:4%;top:0;height:1px;background:linear-gradient(90deg,transparent,#39FF14 18%,#39FF14 82%,transparent);opacity:.75;animation:g4varre 4.2s cubic-bezier(.45,0,.55,1) infinite}
:root[data-gc="9"] .ps #p2 #scrA .x-row,:root[data-gc="9"] .ps #p2 .x-forces div{border-radius:14px}
@keyframes g4varre{0%{top:0;opacity:0}8%{opacity:.75}92%{opacity:.75}100%{top:calc(100% - 2px);opacity:0}}
/* CARD · 9 · Borda viva: o contorno do card tem um trecho verde e roxo que corre devagar em volta dele */
@property --g4a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root[data-gc="10"] .ps #p2 .dev{border-color:rgba(255,255,255,.08)!important}
:root[data-gc="10"] .ps #p2 .g4borda{display:block;position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:3;pointer-events:none;background:conic-gradient(from var(--g4a),transparent 0 62%,rgba(57,255,20,.95) 78%,rgba(176,38,255,.95) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:g4gira 7s linear infinite}
@keyframes g4gira{to{--g4a:360deg}}
:root[data-gc="10"] .ps #p2 #scrA .x-row,:root[data-gc="10"] .ps #p2 .x-forces div{border-radius:14px}
/* CARD · 10 · Pontilhado: cada linha liga o rótulo ao valor por um pontilhado fino, como num extrato; letra maior, sem caixinhas */
:root[data-gc="11"] .ps #p2 #scrA .x-row,:root[data-gc="11"] .ps #p2 .plan .x-row{background:none;border:0;border-radius:0;padding:15px 2px;margin:0;align-items:baseline}
:root[data-gc="11"] .ps #p2 #scrA .x-row em,:root[data-gc="11"] .ps #p2 .plan .x-row em{flex:1;display:flex;align-items:baseline;gap:14px;white-space:nowrap}
:root[data-gc="11"] .ps #p2 #scrA .x-row em:after,:root[data-gc="11"] .ps #p2 .plan .x-row em:after{content:"";flex:1;border-bottom:1px dotted rgba(255,255,255,.28);transform:translateY(-4px)}
:root[data-gc="11"] .ps #p2 #scrA .x-row span{font-size:21px;letter-spacing:-.01em;padding-left:14px}
:root[data-gc="11"] .ps #p2 .plan .x-row span{padding-left:12px}

/* ---- 3D do card (escolha à parte, combina com qualquer opção acima) ---- */
.ps #p2 .g4cena{position:relative;min-width:0;transform-style:preserve-3d;transform:perspective(1800px) rotateX(var(--g3x,0deg)) rotateY(var(--g3y,0deg));transform-origin:50% 50%}
/* 2 · Camadas: as peças de dentro saem da placa em alturas diferentes (3D de verdade); a placa perde o desfoque para isso funcionar */
:root[data-g3d="2"] .ps #p2 .dev{transform-style:preserve-3d;overflow:visible;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(16,16,20,.86)!important}
:root[data-g3d="2"] .ps #p2 .scr,:root[data-g3d="2"] .ps #p2 #scrA,:root[data-g3d="2"] .ps #p2 #scrB,:root[data-g3d="2"] .ps #p2 .x-forces,:root[data-g3d="2"] .ps #p2 .plans{transform-style:preserve-3d}
:root[data-g3d="2"] .ps #p2 .dev-h{translate:0 0 26px}
:root[data-g3d="2"] .ps #p2 #scrA .x-row{translate:0 0 46px;box-shadow:0 26px 30px -24px rgba(0,0,0,.95)}
:root[data-g3d="2"] .ps #p2 #scrA .x-row:nth-child(even){translate:0 0 70px}
:root[data-g3d="2"] .ps #p2 .dirw{translate:0 0 80px}
:root[data-g3d="2"] .ps #p2 .x-forces div{translate:0 0 44px;box-shadow:0 26px 30px -24px rgba(0,0,0,.95)}
:root[data-g3d="2"] .ps #p2 .plan{translate:0 0 54px;box-shadow:0 30px 34px -26px rgba(0,0,0,.95)}
:root[data-g3d="2"] .ps #p2 .plan.b{translate:0 0 34px}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps #p2 .g4cena{transform:none}}

/* título (03/10): "A leitura de um trader," / "a partir do seu gráfico." e, embaixo, o nome do produto em verde, na letra de destaque do site (a mesma do "33 páginas") */
.ps #p2 .sh h2 em{display:block;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;font-size:1.22em;line-height:1.06;letter-spacing:-.01em;color:#39FF14;margin-top:.16em}
/* computador (e tablet deitado): o título vai para a coluna da esquerda, em cima dos números dos passos, e deixa de passar por cima do card; o card fica ao lado, centrado com a coluna inteira */
@media (min-width:900px) and (min-height:560px){
  .ps #p2 .stg>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:52px;align-items:center}
  .ps #p2 .gen{display:contents}
  .ps #p2 .sh{grid-column:1;grid-row:1;align-self:end;display:block;margin:0 0 34px}
  .ps #p2 .sh h2{max-width:none!important;white-space:nowrap;text-wrap:initial}
  .ps #p2 .g4esq{grid-column:1;grid-row:2;align-self:start}
  .ps #p2 .g4cena{grid-column:2;grid-row:1/span 2}
}
/* celular: sem a quebra forçada (a frase quebra sozinha na largura da tela); o nome continua embaixo */
@media (max-width:599px){ .ps #p2 .sh h2 br{display:none} }


/* Página 5 (Resultados 2026) · escolhas fixadas: número principal em destaque sólido e o conjunto inclinado */
.ps #p3 .g{position:relative}
:root[data-r5="3"] .ps #p3 .big,:root[data-r5="3"] .ps #p3 .out:first-child{background:#39FF14!important;border-color:#39FF14!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* só os blocos sólidos projetam sombra: suave, descolada para baixo, como se estivessem soltos acima do fundo (os transparentes não levam) */
:root[data-r5="3"] .ps #p3 .big,:root[data-r5="3"] .ps #p3 .out:first-child{box-shadow:0 34px 44px -26px rgba(0,0,0,.85),0 60px 80px -40px rgba(0,0,0,.55)!important}
:root[data-r5="3"] .ps #p3 .big *,:root[data-r5="3"] .ps #p3 .out:first-child *{color:#000!important;text-shadow:none!important}
:root[data-r5="3"] .ps #p3 .big small,:root[data-r5="3"] .ps #p3 .big p,:root[data-r5="3"] .ps #p3 .out:first-child span,:root[data-r5="3"] .ps #p3 .out:first-child small{color:rgba(0,0,0,.7)!important}
.ps #p3 .r5cena{position:relative;transform-style:preserve-3d;transform:perspective(1700px) rotateX(var(--r3x,0deg)) rotateY(var(--r3y,0deg)) scale(.9);transform-origin:50% 50%}

/* Página 5 · cinco opções para os blocos ao lado do destaque sólido (o gráfico, os números menores e os outros resultados) */
/* 2 · Grade: a mesma da página Gênesis Labs, com fundo de pontos finos e cantoneiras verdes */
:root[data-r5b="2"] .ps #p3 .g:not(.big,.out:first-child){background:linear-gradient(#39FF14,#39FF14) 10px 10px/16px 2px no-repeat,linear-gradient(#39FF14,#39FF14) 10px 10px/2px 16px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px top 10px/16px 2px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px top 10px/2px 16px no-repeat,linear-gradient(#39FF14,#39FF14) left 10px bottom 10px/16px 2px no-repeat,linear-gradient(#39FF14,#39FF14) left 10px bottom 10px/2px 16px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/16px 2px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/2px 16px no-repeat,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/22px 22px,rgba(14,14,18,.8)!important}
/* 3 · Vidro claro: mais claro e fosco, com contorno branco fino, contrastando com o verde */
:root[data-r5b="3"] .ps #p3 .g:not(.big,.out:first-child){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 40px -28px rgba(0,0,0,.9)!important}
/* 4 · Linhas finas: sem caixa, só um fio fino no alto; o verde fica sozinho como bloco */
:root[data-r5b="4"] .ps #p3 .g:not(.big,.out:first-child){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.18)!important;border-radius:0!important}
:root[data-r5b="4"] .ps #p3 .g:not(.big,.out:first-child):before{display:none}
/* 5 · Fio verde: vidro escuro com um fio verde no alto, ligando visualmente ao bloco sólido */
:root[data-r5b="5"] .ps #p3 .g:not(.big,.out:first-child){border:0!important;border-top:2px solid #39FF14!important;border-radius:4px 4px 18px 18px!important}
/* 6 · Preto sólido: fundo preto chapado com contorno verde fino, o oposto exato do bloco verde */
:root[data-r5b="6"] .ps #p3 .g:not(.big,.out:first-child){background:#070709!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(57,255,20,.4)!important;box-shadow:none!important}

@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps #p3 .r5cena{transform:none}}

/* na tela "Seu lucro", o bloco do valor investido (o deslizante) não leva o fio de cima */
:root[data-r5b="4"] .ps #p3 .rp .g.simh:not(.big,.out:first-child){border-top:0!important}


/* Página 6 (Depoimentos) · aviso: o mesmo texto, menor e um pouco mais para cima */
.ps #p4 #p4note{font-size:13px!important;margin-top:-46px!important}

/* Página 6 · modelos de página para escolher. Cada modelo é uma composição inteira no lugar do leque (o leque segue rodando escondido e diz qual depoimento é o da vez). Só vale dentro de #p4. */
.ps #p4 .d6v{position:absolute;display:none;z-index:3;transform-style:preserve-3d;transform:perspective(1600px) rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) translateY(var(--vf,0px));color:#fff}
:root[data-d6v]:not([data-d6v="0"]) .ps #p4 #pilha{visibility:hidden}
.ps #p4 .d6v .nm{font-weight:600}
.ps #p4 .d6v .ct{color:rgba(255,255,255,.5)}

@keyframes d6sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 3 · Destaque e lista: o depoimento da vez num bloco verde sólido grande; ao lado, os próximos em linhas finas */
.ps #p4 .m3{display:none}
:root[data-d6v="3"] .ps #p4 .d6v.m3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:36px;align-items:center}
.ps #p4 .d6v .bloco{background:#39FF14;color:#000;border-radius:24px;padding:40px 42px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 34px 44px -26px rgba(0,0,0,.85),0 60px 80px -40px rgba(0,0,0,.55)}
.ps #p4 .d6v .bloco .mt{font-size:15px;font-weight:600;opacity:.7}
.ps #p4 .d6v .bloco p{margin:14px 0 24px;font-size:clamp(20px,1.8vw,27px);line-height:1.36;font-weight:500}
.ps #p4 .d6v .bloco .ct{color:rgba(0,0,0,.6);margin-left:10px}
.ps #p4 .d6v .bloco.troca{animation:d6sobe .6s cubic-bezier(.16,1,.3,1) both}
.ps #p4 .m3 .prox{display:flex;flex-direction:column}
.ps #p4 .m3 .prox div{padding:18px 4px;border-top:1px solid rgba(255,255,255,.16)}
.ps #p4 .m3 .prox p{margin:0 0 8px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.75);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ps #p4 .m3 .prox .nm{font-size:13px;color:#39FF14}

@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps #p4 .d6v{transform:none!important}}

/* ---- cinco modelos novos ---- */
/* 6 · Fila: o depoimento da vez no bloco verde; ao lado, os próximos esperam numa fila de cartões de vidro, um atrás do outro */
:root[data-d6v="6"] .ps #p4 .d6v.m6{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:44px;align-items:center}
.ps #p4 .m6 .fila{position:relative;height:300px}
.ps #p4 .m6 .fc{position:absolute;left:0;right:0;top:40px;padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(20,20,24,.86);transform-origin:50% 0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s}
.ps #p4 .m6 .fc p{margin:0 0 10px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ps #p4 .m6 .fc .nm{font-size:13px;color:#39FF14}
.ps #p4 .m6 .fc:nth-child(1){z-index:4}
.ps #p4 .m6 .fc:nth-child(2){z-index:3;transform:translateY(-22px) scale(.93);opacity:.6}
.ps #p4 .m6 .fc:nth-child(3){z-index:2;transform:translateY(-42px) scale(.86);opacity:.35}
.ps #p4 .m6 .fc:nth-child(4){z-index:1;transform:translateY(-60px) scale(.79);opacity:.18}
.ps #p4 .m6 .fila.troca .fc:nth-child(1){animation:d6sobe .6s cubic-bezier(.16,1,.3,1) both}
/* 7 · Satélites: o depoimento da vez no centro, em verde; o anterior e o próximo aparecem pequenos e apagados dos lados */
:root[data-d6v="7"] .ps #p4 .d6v.m7{display:flex;align-items:center;justify-content:center;gap:28px}
.ps #p4 .m7 .lado{width:270px;flex:none;padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(18,18,22,.7);opacity:.45;transform:scale(.9)}
.ps #p4 .m7 .lado p{margin:0 0 10px;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ps #p4 .m7 .lado .nm{font-size:12px;color:#39FF14}
.ps #p4 .m7 .lado:empty{visibility:hidden}
.ps #p4 .m7 .bloco{width:min(560px,52%);flex:none;min-height:300px}
/* 8 · Linha do tempo: o depoimento em letra grande, sem caixa; embaixo, uma linha com um ponto por depoimento, e o da vez vira uma cápsula verde com o número */
:root[data-d6v="8"] .ps #p4 .d6v.m8{display:flex;flex-direction:column;justify-content:center;gap:42px}
.ps #p4 .m8 .cit{max-width:900px}
.ps #p4 .m8 .cit p{margin:0 0 20px;font-size:clamp(22px,2.1vw,32px);line-height:1.34;font-weight:500}
.ps #p4 .m8 .cit .ct{margin-left:10px}
.ps #p4 .m8 .cit.troca{animation:d6sobe .6s cubic-bezier(.16,1,.3,1) both}
.ps #p4 .m8 .lt{position:relative;display:flex;align-items:center;justify-content:space-between;height:30px}
.ps #p4 .m8 .lt:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18)}
.ps #p4 .m8 .lt i{position:relative;width:8px;height:8px;border-radius:50%;background:#26262c;border:1px solid rgba(255,255,255,.3);transition:all .45s cubic-bezier(.16,1,.3,1);font-style:normal;font-size:0;color:#000;display:grid;place-items:center}
.ps #p4 .m8 .lt i.ok{background:#39FF14;border-color:#39FF14}
.ps #p4 .m8 .lt i.at{width:44px;height:26px;border-radius:999px;font-size:12px;font-weight:600}
/* 9 · Revista: uma aspa grande em verde abre o depoimento, em letra itálica; ao lado, uma coluna com o resultado, o nome e quem vem a seguir */
:root[data-d6v="9"] .ps #p4 .d6v.m9{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr);gap:56px;align-items:center}
.ps #p4 .m9 .asp{font:700 120px/.7 Georgia,serif;color:#39FF14;display:block;height:60px}
.ps #p4 .m9 .cit p{margin:0;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-size:clamp(24px,2.3vw,34px);line-height:1.3}
.ps #p4 .m9 .cit.troca{animation:d6sobe .6s cubic-bezier(.16,1,.3,1) both}
.ps #p4 .m9 .col{border-left:1px solid rgba(255,255,255,.16);padding-left:28px}
.ps #p4 .m9 .col .big{display:block;font-size:56px;font-weight:600;letter-spacing:-.04em;color:#39FF14;line-height:1;margin-bottom:18px}
.ps #p4 .m9 .col .nm{display:block;font-size:17px}
.ps #p4 .m9 .col .ct{display:block;font-size:14px;margin-top:4px}
.ps #p4 .m9 .col .seg{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.45)}
.ps #p4 .m9 .col .seg b{display:block;color:#fff;font-weight:500;font-size:14px;margin-top:4px}
/* 10 · Mosaico: um quadro de peças; a grande, em verde, com o depoimento da vez; duas menores com os próximos; e uma faixa com o contador e a barra de progresso */
:root[data-d6v="10"] .ps #p4 .d6v.m10{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,.55fr);gap:14px;padding:6px 0}
.ps #p4 .m10 .bloco{grid-column:1/3;grid-row:1/3;min-height:0;padding:34px 36px}
.ps #p4 .m10 .pc{padding:18px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.13);background:rgba(18,18,22,.78);display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.ps #p4 .m10 .pc p{margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ps #p4 .m10 .pc .nm{font-size:13px;color:#39FF14}
.ps #p4 .m10 .cnt{grid-column:3/5;flex-direction:row;align-items:center;gap:24px}
.ps #p4 .m10 .cnt b{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.ps #p4 .m10 .cnt b small{font-size:18px;color:rgba(255,255,255,.4);margin-left:6px;letter-spacing:0}
.ps #p4 .m10 .cnt .br{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.ps #p4 .m10 .cnt .br i{display:block;height:100%;background:#39FF14;transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}

/* ---- 3D: cinco efeitos novos (além da Vitrine) ---- */
/* 5 · Balanço: a cada depoimento novo, o conjunto dá um balanço curto de lado e assenta */
:root[data-d6t="5"] .ps #p4 .d6v.mud{animation:d6bal .9s cubic-bezier(.3,.7,.3,1)}
@keyframes d6bal{0%{transform:perspective(1600px) rotateY(0)}30%{transform:perspective(1600px) rotateY(9deg)}62%{transform:perspective(1600px) rotateY(-3deg)}100%{transform:perspective(1600px) rotateY(0)}}
/* 6 · Virada: o bloco do depoimento da vez entra virando de baixo para cima, como uma carta sendo levantada */
:root[data-d6t="6"] .ps #p4 .d6v .troca{animation:d6vira .8s cubic-bezier(.16,1,.3,1) both!important;transform-origin:50% 100%}
@keyframes d6vira{from{opacity:0;transform:perspective(1200px) rotateX(-70deg)}to{opacity:1;transform:perspective(1200px) rotateX(0)}}
/* 7 · Livro aberto: as duas colunas viram uma para a outra, como as páginas de um livro aberto */
:root[data-d6t="7"] .ps #p4 .d6v>*:first-child{transform:perspective(1500px) rotateY(10deg);transform-origin:100% 50%}
:root[data-d6t="7"] .ps #p4 .d6v>*:last-child{transform:perspective(1500px) rotateY(-12deg);transform-origin:0 50%}
:root[data-d6t="7"] .ps #p4 .d6v.m10>*{transform:none}
/* 9 · Mergulho: a cada depoimento novo, o bloco chega de longe, de dentro do corredor, até a frente */
:root[data-d6t="9"] .ps #p4 .d6v .troca{animation:d6merg .9s cubic-bezier(.16,1,.3,1) both!important}
@keyframes d6merg{from{opacity:0;transform:perspective(1200px) translateZ(-420px)}to{opacity:1;transform:perspective(1200px) translateZ(0)}}
.ps #p4 .m6 .fc:not(:first-child)>*{opacity:0}
.ps #p4 .m6 .fc{background:rgba(20,20,24,.96)}

/* Depoimentos · botão "Pular depoimentos": contorno verde fino, um brilho que respira devagar e a seta descendo */
.ps #p4 #p4note{position:relative;z-index:6}      /* acima da camada dos depoimentos, para o botão receber o clique */
.ps #p4 .d6pula{display:flex;align-items:center;gap:12px;position:absolute;left:50%;bottom:calc(100% + 46px);translate:-50% 0;z-index:3;white-space:nowrap;padding:0 8px 0 22px;height:42px;border-radius:999px;border:1px solid rgba(57,255,20,.45);background:rgba(10,10,12,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:500 13.5px Geist,system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;box-shadow:0 0 0 0 rgba(57,255,20,0),0 0 14px rgba(57,255,20,.12);animation:d6resp 3.2s ease-in-out infinite;transition:border-color .35s,background-color .35s}
.ps #p4 .d6pula i{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid rgba(57,255,20,.5);overflow:hidden;flex:none}
.ps #p4 .d6pula i svg{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;animation:d6seta 1.8s cubic-bezier(.6,0,.3,1) infinite}
.ps #p4 .d6pula:hover{border-color:#39FF14;background:rgba(57,255,20,.08)}
.ps #p4 .d6pula:hover i{border-color:#39FF14}
.ps #p4 .d6pula:focus-visible{outline:2px solid #39FF14;outline-offset:3px}
@keyframes d6resp{0%,100%{box-shadow:0 0 10px rgba(57,255,20,.08)}50%{box-shadow:0 0 18px rgba(57,255,20,.28)}}
@keyframes d6seta{0%{transform:translateY(-18px);opacity:0}30%,70%{transform:none;opacity:1}100%{transform:translateY(18px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ps #p4 .d6pula,.ps #p4 .d6pula i svg{animation:none}}

/* ao pular: o conteúdo dos depoimentos desbota antes da descida */
.ps #p4 .stg>.wrap{transition:opacity .35s ease}
.ps #p4.d6sai .stg>.wrap{opacity:0;pointer-events:none}


/* Página 7 (Relatório semanal) · modelos de teste. Cada modelo mostra as folhas do relatório de outro jeito, no lugar da roleta (a roleta segue rodando escondida e diz qual folha é a da vez). Só vale dentro de #p5. */
.ps #p5 .r7v{position:absolute;display:none;z-index:3;transform-style:preserve-3d;transform:perspective(1700px) rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg)) rotateZ(var(--vz,0deg))}
:root[data-r7v]:not([data-r7v="0"]) .ps #p5 #book{visibility:hidden}
.ps #p5 .r7v .pg{position:relative;left:auto;top:auto;margin:0;transform:none;opacity:1;filter:none;flex:none}
/* 1 · Livro aberto: duas folhas lado a lado, como o relatório aberto na mesa; à esquerda a anterior, à direita a da vez */
:root[data-r7v="1"] .ps #p5 .r7v.v1{display:flex;align-items:center;justify-content:center;gap:2px;perspective:1600px}
.ps #p5 .v1 .pg:first-child{border-radius:12px 2px 2px 12px;opacity:.7}
.ps #p5 .v1 .pg:last-child{border-radius:2px 12px 12px 2px;transform-origin:0 50%}
/* 2 · Pilha de folhas: a folha da vez em cima de uma pilha de folhas soltas, levemente tortas */
:root[data-r7v="2"] .ps #p5 .r7v.v2{display:grid;place-items:center}
.ps #p5 .v2 .pg{grid-area:1/1;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s}
.ps #p5 .v2 .pg.d1{transform:translate(14px,10px) rotate(3deg);opacity:.75}
.ps #p5 .v2 .pg.d2{transform:translate(-12px,16px) rotate(-3.5deg);opacity:.5}
.ps #p5 .v2 .pg.d3{transform:translate(20px,24px) rotate(6deg);opacity:.3}
.ps #p5 .v2 .pg.dx{opacity:0;transform:translate(-160px,30px) rotate(-14deg)}
.ps #p5 .v2 .pg.d0{z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.8)}
/* 3 · Sumário: ao lado da folha, o índice do relatório; o assunto da vez fica numa cápsula verde sólida */
:root[data-r7v="3"] .ps #p5 .r7v.v3{display:grid;grid-template-columns:200px 300px;gap:34px;align-items:center;justify-content:center}
.ps #p5 .v3 ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ps #p5 .v3 li{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-radius:999px;font-size:13px;color:rgba(255,255,255,.55);transition:background-color .4s,color .4s}
.ps #p5 .v3 li span{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.35)}
.ps #p5 .v3 li.at{background:#39FF14;color:#000;font-weight:600}
.ps #p5 .v3 li.at span{color:rgba(0,0,0,.6)}
/* 4 · Folha e miniaturas: a folha da vez maior, no centro, e embaixo todas as folhas em miniatura; a da vez ganha um contorno verde */
:root[data-r7v="4"] .ps #p5 .r7v.v4{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.ps #p5 .v4 .grande .pg{transform:scale(1.04)}
.ps #p5 .v4 .minis{display:flex;gap:10px}
.ps #p5 .v4 .mini{width:54px;height:76px;overflow:hidden;border-radius:6px;border:1px solid rgba(255,255,255,.14);opacity:.5;transition:opacity .4s,border-color .4s,transform .4s}
.ps #p5 .v4 .mini .pg{transform:scale(.18);transform-origin:0 0;pointer-events:none}
.ps #p5 .v4 .mini.at{opacity:1;border-color:#39FF14;transform:translateY(-4px)}
/* 5 · Tablet: a folha aparece dentro de uma tela de tablet, como quem lê o relatório no aparelho */
:root[data-r7v="5"] .ps #p5 .r7v.v5{display:grid;place-items:center}
.ps #p5 .v5 .tab{padding:16px;border-radius:30px;background:#0b0b0e;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 40px 70px -30px rgba(0,0,0,.9);position:relative}
.ps #p5 .v5 .tab:before{content:"";position:absolute;left:50%;top:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#222}
.ps #p5 .v5 .tab .pg{border-radius:10px;box-shadow:none}
/* entrada da folha nova (vale para todos) */
.ps #p5 .r7v .entra{animation:r7sobe .55s cubic-bezier(.16,1,.3,1) both}
@keyframes r7sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- 3D ---- */
/* 1 · Virada de página: a folha nova entra virando como página de livro, presa pela lateral */
:root[data-r7t="1"] .ps #p5 .r7v .entra{animation:r7vira .85s cubic-bezier(.2,.7,.2,1) both;transform-origin:0 50%}
@keyframes r7vira{from{opacity:.2;transform:perspective(1400px) rotateY(-110deg)}to{opacity:1;transform:perspective(1400px) rotateY(0)}}
/* 3 · Folheando: a cada troca, as folhas dão uma folheada rápida antes de assentar */
:root[data-r7t="3"] .ps #p5 .r7v .entra{animation:r7folheia .7s cubic-bezier(.3,.7,.3,1) both}
@keyframes r7folheia{0%{transform:perspective(1200px) rotateX(55deg) translateY(-30px);opacity:0}40%{transform:perspective(1200px) rotateX(-12deg);opacity:1}70%{transform:perspective(1200px) rotateX(5deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.ps #p5 .r7v{transform:none!important}.ps #p5 .r7v .entra{animation:none!important}}

/* título menor, com "33 páginas" na letra itálica do "completo", para não brigar com o texto de baixo */
.ps #p5 .sh h2{font-size:clamp(22px,2.3vw,34px)!important;line-height:1.12!important;max-width:15em!important}
.ps #p5 .sh h2 em,.ps #p5 .sh h2 i{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;font-size:1.22em;letter-spacing:-.01em;color:#39FF14}
/* sumário e folha um pouco mais para a esquerda, longe da lateral */
:root[data-r7v="3"] .ps #p5 .r7v.v3{translate:-110px 0}
/* capa: o símbolo fica no centro da folha, junto com o título, tudo centralizado */
.ps .pg.cover{justify-content:center!important;align-items:center;text-align:center;gap:20px}
.ps .pg.cover .ph{position:absolute;left:22px;right:22px;top:22px}
.ps .pg.cover .sym{display:block;margin:0 auto}
.ps .pg.cover>div:last-child{display:flex;flex-direction:column;align-items:center}
/* sumário: letra normal (sem negrito) e o número sempre na mesma linha horizontal do assunto, mesmo quando o assunto quebra em duas linhas */
.ps #p5 .v3 li{align-items:center;font-weight:400}
.ps #p5 .v3 li.at{font-weight:400}
.ps #p5 .v3 li span{flex:none}


/* Página Comunidade · "todos os dias" na letra itálica do "completo", em verde (as palavras são separadas pelo efeito de entrada do título) */
#comunidade h2 .w:nth-child(n+4)>span{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;color:#39FF14;letter-spacing:-.01em}
#comunidade h2 .w:nth-child(n+4){font-size:1.08em}

/* Página Comunidade · modelo Anéis (escolhido): texto à esquerda; à direita, os números dentro de anéis finos.
   O primeiro (2.000+) é um anel verde sólido com letra preta; os outros saem de dentro dele, contando, e vão para os seus lugares.
   Arranjo: 2.000+ e 144 mil em cima, 150+ e 7 dias no meio, 120 mil embaixo, no centro; o conjunto começa na altura do título. */
:root[data-cm] #comunidade .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start}
:root[data-cm] #comunidade .wrap>*:not(.stats){grid-column:1}
:root[data-cm="4"] #comunidade .stats{grid-column:2;grid-row:2/5;align-self:start;margin-top:0;display:grid;grid-template-columns:repeat(2,190px);gap:22px 26px;justify-content:center;max-width:none;perspective:none!important;transform:translateX(var(--cmdx,0px))}
:root[data-cm="4"] #comunidade .stat{margin:0;width:190px;height:190px;border-radius:50%!important;border:1px solid rgba(255,255,255,.28)!important;background:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;opacity:1!important;translate:none!important}
:root[data-cm="4"] #comunidade .stat:nth-child(3){order:5;grid-column:1/-1;justify-self:center}
:root[data-cm="4"] #comunidade .stat:nth-child(4){order:3}
:root[data-cm="4"] #comunidade .stat:nth-child(5){order:4}
:root[data-cm="4"] #comunidade .stat:first-child{background:#39FF14!important;border-color:#39FF14!important;box-shadow:0 30px 40px -24px rgba(0,0,0,.85)}
:root[data-cm="4"] #comunidade .stat:first-child b,:root[data-cm="4"] #comunidade .stat:first-child span{color:#000!important}
:root[data-cm="4"] #comunidade .stat .ac-dots{display:none}
:root[data-cm="4"] #comunidade .stat b{font-size:34px}
:root[data-cm="4"] #comunidade .stat span{border:0;padding:0;margin-top:8px;font-size:12.5px;line-height:1.35;max-width:82%}
:root[data-cm="4"] #comunidade .stat:hover{background:none!important}
:root[data-cm="4"] #comunidade .stat:first-child:hover{background:#39FF14!important}
/* a soltura: antes de a página chegar, os anéis ficam escondidos dentro do primeiro; ao chegar, saem um a um até o seu lugar */
:root[data-cm="4"] #comunidade.cmpreso .stat:not(:first-child){transform:translate(var(--fx,0px),var(--fy,0px)) scale(.3)!important;opacity:0!important;transition:none!important}
:root[data-cm="4"] #comunidade.cmsolto .stat:not(:first-child){transform:none!important;opacity:1!important;transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .5s ease!important}
:root[data-cm="4"] #comunidade.cmsolto .stat:nth-child(2){transition-delay:.05s!important}
:root[data-cm="4"] #comunidade.cmsolto .stat:nth-child(4){transition-delay:.2s!important}
:root[data-cm="4"] #comunidade.cmsolto .stat:nth-child(5){transition-delay:.35s!important}
:root[data-cm="4"] #comunidade.cmsolto .stat:nth-child(3){transition-delay:.5s!important}
:root[data-cm="4"] #comunidade.cmpreso .stat:first-child,:root[data-cm="4"] #comunidade.cmsolto .stat:first-child{position:relative;z-index:2}
@media (max-width:900px){:root[data-cm="4"] #comunidade .wrap{display:block}:root[data-cm="4"] #comunidade .stats{margin-top:48px;grid-template-columns:repeat(2,150px)}:root[data-cm="4"] #comunidade .stat{width:150px;height:150px}:root[data-cm="4"] #comunidade .stat b{font-size:26px}}
@media (prefers-reduced-motion:reduce){:root[data-cm="4"] #comunidade .stat{transform:none!important;opacity:1!important;transition:none!important}}

/* depois da soltura, os anéis ficam livres para o "bate-bate" com o mouse */
:root[data-cm="4"] #comunidade.cmpronto .stat{transform:translate(var(--bx,0px),var(--by,0px))!important}

/* ---- modelos com bolas 3D que caem e se empilham (o mesmo tamanho e a mesma contagem) ---- */
:root[data-cm="6"] #comunidade .stats,:root[data-cm="7"] #comunidade .stats,:root[data-cm="8"] #comunidade .stats{grid-column:2;grid-row:2/5;align-self:start;display:block;position:relative;margin:0 auto;width:var(--cmw,570px);height:var(--cmh,560px);max-width:none;perspective:none!important;transform:translateX(var(--cmdx,0px))}
:root[data-cm="6"] #comunidade .stat,:root[data-cm="7"] #comunidade .stat,:root[data-cm="8"] #comunidade .stat{position:absolute;left:0;top:0;margin:0;width:190px;height:190px;border-radius:50%!important;border:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;opacity:1!important;translate:none!important;transform:translate(var(--bx,0px),var(--by,-9999px))!important;background:radial-gradient(circle at 34% 28%,#3b3b46 0,#1a1a20 38%,#0b0b0e 72%,#050507 100%)!important;box-shadow:inset -16px -20px 34px rgba(0,0,0,.65),inset 10px 12px 22px rgba(255,255,255,.07),0 28px 32px -22px rgba(0,0,0,.95)!important}
:root[data-cm="6"] #comunidade .stat:first-child,:root[data-cm="7"] #comunidade .stat:first-child,:root[data-cm="8"] #comunidade .stat:first-child{background:radial-gradient(circle at 34% 28%,#c9ffb8 0,#5dff3c 26%,#39FF14 48%,#22b80b 82%,#167a06 100%)!important}
:root[data-cm="6"] #comunidade .stat:first-child *,:root[data-cm="7"] #comunidade .stat:first-child *,:root[data-cm="8"] #comunidade .stat:first-child *{color:#000!important}
:root[data-cm="6"] #comunidade .stat .ac-dots,:root[data-cm="7"] #comunidade .stat .ac-dots,:root[data-cm="8"] #comunidade .stat .ac-dots{display:none}
:root[data-cm="6"] #comunidade .stat b,:root[data-cm="7"] #comunidade .stat b,:root[data-cm="8"] #comunidade .stat b{font-size:34px;position:relative;z-index:1}
:root[data-cm="6"] #comunidade .stat span,:root[data-cm="7"] #comunidade .stat span,:root[data-cm="8"] #comunidade .stat span{border:0;padding:0;margin-top:8px;font-size:12.5px;line-height:1.35;max-width:80%;position:relative;z-index:1}

/* bolas no ambiente: o reflexo do corredor por cima do número (luz do teto em faixa, brilho no alto, o fio verde da esquerda e o roxo da direita refletidos na borda),
   o número "impresso" na bola (fica por baixo da luz e escurece junto nas bordas) e a sombra de contato no chão, só para as bolas apoiadas no piso */
:root[data-cm="6"] #comunidade .stat:before,:root[data-cm="7"] #comunidade .stat:before,:root[data-cm="8"] #comunidade .stat:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;opacity:1!important;display:block!important;transform:none!important;filter:none!important;mix-blend-mode:normal!important;-webkit-mask:none!important;mask:none!important;padding:0!important;
  background:radial-gradient(ellipse 15% 9% at 32% 19%,rgba(255,255,255,.9),rgba(255,255,255,.25) 55%,transparent 78%),radial-gradient(ellipse 6% 10% at 50% 25%,rgba(255,255,255,.7),rgba(255,255,255,.28) 50%,transparent 76%),radial-gradient(ellipse 36% 2.2% at 50% 9%,rgba(255,255,255,.6),transparent 82%),radial-gradient(ellipse 30% 1.8% at 50% 14%,rgba(255,255,255,.3),transparent 82%),radial-gradient(ellipse 3.5% 24% at 6% 60%,rgba(57,255,20,.34),transparent 78%),radial-gradient(ellipse 3.5% 24% at 94% 63%,rgba(176,38,255,.38),transparent 78%),linear-gradient(180deg,transparent 56%,rgba(255,255,255,.07) 63%,transparent 78%),radial-gradient(circle at 50% 50%,transparent 60%,rgba(255,255,255,.09) 69%,transparent 73%),radial-gradient(circle at 50% 44%,transparent 54%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.72) 100%)}
:root[data-cm="6"] #comunidade .stat:after,:root[data-cm="7"] #comunidade .stat:after,:root[data-cm="8"] #comunidade .stat:after{content:"";position:absolute;left:10%;right:10%;bottom:-16px;height:30px;border-radius:50%;pointer-events:none;z-index:-1;opacity:var(--chao,0)!important;display:block!important;transform:none!important;-webkit-mask:none!important;mask:none!important;padding:0!important;background:radial-gradient(ellipse at center,rgba(0,0,0,.85),rgba(0,0,0,.35) 45%,transparent 72%);transition:opacity .2s}
:root[data-cm="6"] #comunidade .stat b,:root[data-cm="7"] #comunidade .stat b,:root[data-cm="8"] #comunidade .stat b{color:rgba(255,255,255,.9)!important;text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 1px rgba(255,255,255,.05);transform:scaleX(.96)}
:root[data-cm="6"] #comunidade .stat span,:root[data-cm="7"] #comunidade .stat span,:root[data-cm="8"] #comunidade .stat span{color:rgba(255,255,255,.66)!important;text-shadow:0 -1px 0 rgba(0,0,0,.5)}
:root[data-cm="6"] #comunidade .stat:first-child b,:root[data-cm="7"] #comunidade .stat:first-child b,:root[data-cm="8"] #comunidade .stat:first-child b{color:rgba(0,0,0,.86)!important;text-shadow:0 1px 0 rgba(255,255,255,.28)}
:root[data-cm="6"] #comunidade .stat:first-child span,:root[data-cm="7"] #comunidade .stat:first-child span,:root[data-cm="8"] #comunidade .stat:first-child span{color:rgba(0,0,0,.68)!important;text-shadow:0 1px 0 rgba(255,255,255,.22)}
:root[data-cm="6"] #comunidade .stat:first-child:before,:root[data-cm="7"] #comunidade .stat:first-child:before,:root[data-cm="8"] #comunidade .stat:first-child:before{background:radial-gradient(ellipse 15% 9% at 32% 19%,rgba(255,255,255,.95),rgba(255,255,255,.3) 55%,transparent 78%),radial-gradient(ellipse 6% 10% at 50% 25%,rgba(255,255,255,.75),rgba(255,255,255,.3) 50%,transparent 76%),radial-gradient(ellipse 36% 2.2% at 50% 9%,rgba(255,255,255,.65),transparent 82%),radial-gradient(ellipse 30% 1.8% at 50% 14%,rgba(255,255,255,.35),transparent 82%),radial-gradient(ellipse 3.5% 24% at 94% 63%,rgba(176,38,255,.3),transparent 78%),linear-gradient(180deg,transparent 56%,rgba(255,255,255,.1) 63%,transparent 78%),radial-gradient(circle at 50% 44%,transparent 52%,rgba(0,40,0,.32) 80%,rgba(0,30,0,.62) 100%)}

/* bloco de texto da esquerda um pouco mais baixo e um pouco mais para o centro; os números descem junto, para continuarem alinhados */
:root[data-cm] #comunidade .wrap>.chapter,:root[data-cm] #comunidade .wrap>h2,:root[data-cm] #comunidade .wrap>.intro{position:relative;left:110px;top:var(--cmty,64px)}
/* parágrafo mais estreito (umas seis linhas), formando um bloco mais alto */
:root[data-cm] #comunidade .wrap>.intro{max-width:23.5em}
:root[data-cm] #comunidade .stats{top:64px}
:root[data-cm="4"] #comunidade .stats{position:relative}
/* bolas em 3D de verdade: o desenho fica num quadro por cima da seção; os números originais continuam contando, escondidos, e alimentam as bolas */
#comunidade .cm3d{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
#comunidade.c3d .stat{visibility:hidden}

/* antes de cair, as bolas ficam invisíveis: elas esperam guardadas acima do lugar e não podem aparecer sobre outra seção */
#comunidade.cmespera .stat{visibility:hidden!important}


/* Página Como entrar · modelos para escolher: design dos passos (data-ce), efeito (data-cx) e botões (data-cb). Só vale dentro de #como-entrar. */
#como-entrar .how-grid{position:relative}
#como-entrar .eco-card{position:relative}
#como-entrar .cxl{display:none}

/* ===== DESIGN ===== */
/* 1 · Destaque sólido: o primeiro passo (entrar na lista) em verde sólido com letra preta; os outros em vidro */
:root[data-ce="1"] #como-entrar .eco-card:first-child{background:#39FF14!important;border-color:#39FF14!important;box-shadow:0 34px 44px -26px rgba(0,0,0,.85)!important}
:root[data-ce="1"] #como-entrar .eco-card:first-child *{color:#000!important}
:root[data-ce="1"] #como-entrar .eco-card:first-child:before,:root[data-ce="1"] #como-entrar .eco-card:first-child:after{display:none!important}
/* 2 · Linhas finas: sem caixas, só um fio no alto de cada passo e o número maior */
:root[data-ce="2"] #como-entrar .eco-card{background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:0!important}
:root[data-ce="2"] #como-entrar .eco-card:before,:root[data-ce="2"] #como-entrar .eco-card:after{display:none!important}
:root[data-ce="2"] #como-entrar .how-n{font-size:34px!important;font-weight:600;letter-spacing:-.03em}
/* 3 · Números gigantes: cada passo começa com um número enorme, só no contorno verde */
:root[data-ce="3"] #como-entrar .how-n{display:block;font-size:96px!important;line-height:.9;font-weight:600;letter-spacing:-.05em;color:transparent!important;-webkit-text-stroke:1.2px #39FF14;margin-bottom:14px}
/* 4 · Linha do tempo: uma linha liga os três passos, com um marco verde em cada um; os textos ficam abaixo, sem caixa */
:root[data-ce="4"] #como-entrar .how-grid{padding-top:46px}
:root[data-ce="4"] #como-entrar .how-grid:before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:linear-gradient(90deg,#39FF14,rgba(176,38,255,.8))}
:root[data-ce="4"] #como-entrar .eco-card{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0 24px 0 0!important}
:root[data-ce="4"] #como-entrar .eco-card:before{display:none!important}
:root[data-ce="4"] #como-entrar .eco-card:after{content:""!important;display:block!important;position:absolute!important;inset:auto!important;left:0!important;top:-41px!important;width:14px!important;height:14px!important;border-radius:50%!important;background:#39FF14!important;opacity:1!important;transform:none!important;padding:0!important;-webkit-mask:none!important;mask:none!important}
/* 5 · Escada: os passos descem em degraus, como uma escada para dentro do ecossistema */
:root[data-ce="5"] #como-entrar .eco-card:nth-child(2){transform:translateY(46px)}
:root[data-ce="5"] #como-entrar .eco-card:nth-child(3){transform:translateY(92px)}
:root[data-ce="5"] #como-entrar .how-cta{margin-top:120px}
/* 6 · Coluna: texto à esquerda; à direita, os passos um embaixo do outro, número grande ao lado de cada um */
:root[data-ce="6"] #como-entrar .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:70px;align-items:center}
:root[data-ce="6"] #como-entrar .wrap>*:not(.how-grid){grid-column:1}
:root[data-ce="6"] #como-entrar .how-grid{grid-column:2;grid-row:1/5;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin:0!important}
:root[data-ce="6"] #como-entrar .eco-card{display:grid!important;grid-template-columns:80px minmax(0,1fr);column-gap:18px;align-items:start}
:root[data-ce="6"] #como-entrar .how-n{grid-row:1/3;font-size:44px!important;font-weight:600;letter-spacing:-.04em;line-height:1}
/* 7 · Grade técnica: fundo de pontos e cantoneiras verdes, como o card da página Gênesis Labs */
:root[data-ce="7"] #como-entrar .eco-card{background:linear-gradient(#39FF14,#39FF14) 10px 10px/14px 2px no-repeat,linear-gradient(#39FF14,#39FF14) 10px 10px/2px 14px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/14px 2px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/2px 14px no-repeat,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/20px 20px,rgba(14,14,18,.84)!important;border-color:rgba(255,255,255,.1)!important}
/* 8 · Número em círculo: o número de cada passo dentro de um círculo verde sólido */
:root[data-ce="8"] #como-entrar .how-n{display:inline-grid!important;place-items:center;width:46px;height:46px;border-radius:50%;background:#39FF14;color:#000!important;font-weight:600;font-size:16px!important;margin-bottom:16px}
/* 9 · Setas: os passos ligados por setas verdes entre eles */
:root[data-ce="9"] #como-entrar .eco-card:nth-child(-n+2):after{content:"\2192"!important;display:grid!important;place-items:center;position:absolute!important;inset:auto!important;right:-31px!important;top:50%!important;width:40px!important;height:40px!important;margin-top:-20px;border-radius:50%!important;background:#0b0b0e!important;border:1px solid #39FF14;color:#39FF14;font-size:17px;z-index:5;opacity:1!important;transform:none!important;padding:0!important;-webkit-mask:none!important;mask:none!important}
:root[data-ce="9"] #como-entrar .eco-card{overflow:visible!important}:root[data-ce="9"] #como-entrar .eco-card:nth-child(1){z-index:3}:root[data-ce="9"] #como-entrar .eco-card:nth-child(2){z-index:2}
/* 10 · Vidro claro: vidro mais claro e fosco, com contorno branco fino */
:root[data-ce="10"] #como-entrar .eco-card{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(20,20,24,.5)!important;border:1px solid rgba(255,255,255,.26)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 40px -28px rgba(0,0,0,.9)!important}

/* ===== EFEITO ===== */
/* 1 · Cascata: os passos sobem um depois do outro quando a página chega */
:root[data-cx="1"] #como-entrar.cevivo .eco-card{animation:cesobe .9s cubic-bezier(.16,1,.3,1) both}
:root[data-cx="1"] #como-entrar.cevivo .eco-card:nth-child(2){animation-delay:.15s}:root[data-cx="1"] #como-entrar.cevivo .eco-card:nth-child(3){animation-delay:.3s}
@keyframes cesobe{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
/* 2 · Virada 3D: os passos entram virando de lado, como cartas */
:root[data-cx="2"] #como-entrar.cevivo .eco-card{animation:cevira 1s cubic-bezier(.16,1,.3,1) both;transform-origin:0 50%}
:root[data-cx="2"] #como-entrar.cevivo .eco-card:nth-child(2){animation-delay:.18s}:root[data-cx="2"] #como-entrar.cevivo .eco-card:nth-child(3){animation-delay:.36s}
@keyframes cevira{from{opacity:0;transform:perspective(1000px) rotateY(-75deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}
/* 3 · Linha que desenha: uma linha verde corre por cima dos passos e acende o número de cada um quando passa */
:root[data-cx="3"] #como-entrar .cxl{display:block;position:absolute;left:0;top:-14px;height:2px;width:100%;background:linear-gradient(90deg,#39FF14,#B026FF);transform-origin:0 50%;transform:scaleX(0)}
:root[data-cx="3"] #como-entrar.cevivo .cxl{transition:transform 2.2s cubic-bezier(.5,0,.3,1);transform:scaleX(1)}
:root[data-cx="3"] #como-entrar .how-n{transition:color .4s}
:root[data-cx="3"] #como-entrar.cevivo .eco-card:nth-child(1) .how-n{color:#fff!important;transition-delay:.3s}
:root[data-cx="3"] #como-entrar.cevivo .eco-card:nth-child(2) .how-n{color:#fff!important;transition-delay:1.1s}
:root[data-cx="3"] #como-entrar.cevivo .eco-card:nth-child(3) .how-n{color:#fff!important;transition-delay:1.9s}
/* 4 · Vitrine: o conjunto gira de um lado para o outro conforme a página desce */
/* 5 · Inclinação: cada passo inclina na direção do mouse quando ele passa por cima */
/* 6 · Ímã: os passos se deslocam de leve na direção do mouse */
/* 9 · Profundidade: os passos ficam a distâncias diferentes e se movem com o mouse */
:root[data-cx="4"] #como-entrar .how-grid,:root[data-cx="9"] #como-entrar .how-grid{transform:perspective(1500px) rotateX(var(--gx,0deg)) rotateY(var(--gy,0deg));transform-style:preserve-3d}
:root[data-cx="9"] #como-entrar .eco-card:nth-child(1){translate:0 0 60px}:root[data-cx="9"] #como-entrar .eco-card:nth-child(3){translate:0 0 -40px}
:root[data-cx="5"] #como-entrar .eco-card{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1)}
:root[data-cx="6"] #como-entrar .eco-card{transform:translate(var(--mx2,0px),var(--my2,0px));transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* 7 · Brilho passando: de tempos em tempos uma faixa de luz bem leve atravessa cada passo */
:root[data-cx="7"] #como-entrar .eco-card{overflow:hidden}
:root[data-cx="7"] #como-entrar .eco-card .cxb{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.1) 50%,transparent 62%) 0 0/260% 100% no-repeat;animation:cebrilho 5s ease-in-out infinite}
:root[data-cx="7"] #como-entrar .eco-card:nth-child(2) .cxb{animation-delay:.4s}:root[data-cx="7"] #como-entrar .eco-card:nth-child(3) .cxb{animation-delay:.8s}
#como-entrar .cxb{display:none}:root[data-cx="7"] #como-entrar .cxb{display:block}
@keyframes cebrilho{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
/* 8 · Pulso: o número de cada passo dá um pulso, um depois do outro, sem parar */
:root[data-cx="8"] #como-entrar .how-n{display:inline-block;animation:cepulso 3.6s ease-in-out infinite}
:root[data-cx="8"] #como-entrar .eco-card:nth-child(2) .how-n{animation-delay:1.2s}:root[data-cx="8"] #como-entrar .eco-card:nth-child(3) .how-n{animation-delay:2.4s}
@keyframes cepulso{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.25)}}
/* 10 · Digitação: o título de cada passo é escrito letra por letra quando a página chega */

/* ===== BOTÕES ===== */
#como-entrar .how-cta .btn{transition:background-color .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
/* 1 · Verde sólido: o principal em verde sólido com letra preta; o outro só com contorno */
:root[data-cb="1"] #como-entrar .how-cta .btn:first-child{background:#39FF14!important;border-color:#39FF14!important;color:#000!important}
:root[data-cb="1"] #como-entrar .how-cta .btn:first-child:hover{background:#5bff3c!important}
/* 2 · Contorno com seta: contorno verde fino e uma seta que anda para a direita ao passar o mouse */
:root[data-cb="2"] #como-entrar .how-cta .btn{background:none!important;border:1px solid rgba(57,255,20,.8)!important}
:root[data-cb="2"] #como-entrar .how-cta .btn:after{content:"\2192";display:inline-block;margin-left:12px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
:root[data-cb="2"] #como-entrar .how-cta .btn:hover:after{transform:translateX(6px)}
:root[data-cb="2"] #como-entrar .how-cta .btn.line{border-color:rgba(255,255,255,.3)!important}
/* 3 · Com ícone: o principal ganha o ícone do Telegram num círculo verde */
:root[data-cb="3"] #como-entrar .how-cta .btn:first-child{padding-left:8px!important;gap:12px;background:#0d0d10!important;border:1px solid rgba(57,255,20,.6)!important}
:root[data-cb="3"] #como-entrar .how-cta .btn:first-child:before{content:""!important;display:inline-block!important;position:static!important;inset:auto!important;opacity:1!important;padding:0!important;-webkit-mask:none!important;mask:none!important;width:34px;height:34px;border-radius:50%;flex:none;background:#39FF14 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21.4 4.2 2.9 11.3c-1.3.5-1.3 1.2-.2 1.5l4.7 1.5 1.8 5.6c.2.6.4.8.9.8.4 0 .6-.2.9-.5l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.8-1.4-1.4ZM9.9 15l-.4 3.9-1.5-4.8 10.6-6.7L9.9 15Z'/></svg>") center/18px no-repeat}
/* 4 · Vidro claro: botões de vidro fosco claro, com contorno branco fino */
:root[data-cb="4"] #como-entrar .how-cta .btn{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;border:1px solid rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important}
/* 5 · Sublinhado: o principal vira texto com um fio verde embaixo que se estende ao passar o mouse; o outro, texto simples */
:root[data-cb="5"] #como-entrar .how-cta .btn{background:none!important;border:0!important;border-radius:0!important;padding:6px 0!important;margin-right:26px;position:relative}
:root[data-cb="5"] #como-entrar .how-cta .btn:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:40%;background:#39FF14;transition:width .45s cubic-bezier(.16,1,.3,1)}
:root[data-cb="5"] #como-entrar .how-cta .btn:hover:after{width:100%}
:root[data-cb="5"] #como-entrar .how-cta .btn.line:after{background:rgba(255,255,255,.5)}
/* 6 · Borda viva: um trecho verde e roxo corre devagar em volta do botão principal */
@property --ceb{syntax:'<angle>';inherits:false;initial-value:0deg}
:root[data-cb="6"] #como-entrar .how-cta .btn:first-child{position:relative;border-color:transparent!important}
:root[data-cb="6"] #como-entrar .how-cta .btn:first-child:after{content:""!important;display:block!important;opacity:1!important;position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ceb),transparent 0 55%,#39FF14 75%,#B026FF 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cegira 4s linear infinite}
@keyframes cegira{to{--ceb:360deg}}
/* 7 · Bloco com seta: botão retangular, com uma peça verde sólida com seta na ponta direita */
:root[data-cb="7"] #como-entrar .how-cta .btn{border-radius:12px!important;padding-right:6px!important;gap:16px}
:root[data-cb="7"] #como-entrar .how-cta .btn:after{content:"\2197";display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#39FF14;color:#000;font-size:16px}
:root[data-cb="7"] #como-entrar .how-cta .btn.line:after{background:rgba(255,255,255,.12);color:#fff}
/* 8 · Preenchimento: ao passar o mouse, o verde enche o botão da esquerda para a direita */
:root[data-cb="8"] #como-entrar .how-cta .btn{background:linear-gradient(#39FF14,#39FF14) 0 0/0 100% no-repeat,rgba(255,255,255,.04)!important;transition:background-size .5s cubic-bezier(.16,1,.3,1),color .35s!important}
:root[data-cb="8"] #como-entrar .how-cta .btn:hover{background-size:100% 100%,auto!important;color:#000!important}
/* 9 · Magnético: o botão vem de leve na direção do mouse quando ele chega perto */
:root[data-cb="9"] #como-entrar .how-cta .btn{transform:translate(var(--bmx,0px),var(--bmy,0px))}
/* 10 · Brilho: uma faixa de luz atravessa o botão principal de tempos em tempos */
:root[data-cb="10"] #como-entrar .how-cta .btn:first-child{position:relative;overflow:hidden;background:#39FF14!important;color:#000!important;border-color:#39FF14!important}
:root[data-cb="10"] #como-entrar .how-cta .btn:first-child:after{content:""!important;display:block!important;opacity:1!important;position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) 0 0/260% 100% no-repeat;animation:cebrilho 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#como-entrar *{animation:none!important;transition:none!important}}

/* título: "ecossistema" na letra itálica do "completo", em verde (as palavras são separadas pelo efeito de entrada do título) */
#como-entrar h2 .w:nth-child(4)>span{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;color:#39FF14;letter-spacing:-.01em}
#como-entrar h2 .w:nth-child(4){font-size:1.08em}
/* botões: letra branca de verdade, nítida, sem a sombra que deixava o texto ofuscado */
#como-entrar .how-cta .btn{color:#fff!important;opacity:1!important;text-shadow:none!important;-webkit-font-smoothing:antialiased}
#como-entrar .how-cta{opacity:1!important}


/* Página Perguntas frequentes · modelos para escolher: design (data-fq) e efeito (data-fx). Só vale dentro de #faq. */
#faq .fqbusca,#faq .fqpainel{display:none}
#faq details{position:relative}

/* ===== DESIGN ===== */
/* 1 · Destaque sólido: a pergunta aberta vira um bloco verde sólido com letra preta */
:root[data-fq="1"] #faq details[open]{background:#39FF14;border-radius:18px;padding:0 24px;border-color:transparent!important}
:root[data-fq="1"] #faq details[open] *{color:#000!important}
:root[data-fq="1"] #faq details[open] .eco-plus{border-color:#000!important}
:root[data-fq="1"] #faq details[open] .eco-plus:before,:root[data-fq="1"] #faq details[open] .eco-plus:after{background:#000!important}
/* 2 · Cards de vidro: cada pergunta num card de vidro separado */
:root[data-fq="2"] #faq .faq-list{display:flex;flex-direction:column;gap:12px;border:0!important}
:root[data-fq="2"] #faq details{border:1px solid rgba(255,255,255,.14)!important;border-radius:18px;padding:0 26px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(14,14,18,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-fq="2"] #faq details[open]{border-color:rgba(57,255,20,.6)!important}
/* 3 · Duas colunas: as perguntas divididas em duas colunas, para caber tudo de uma vez */
:root[data-fq="3"] #faq .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;max-width:none!important;align-items:start}
:root[data-fq="3"] #faq summary{font-size:19px!important}
/* 4 · Índice e resposta: à esquerda a lista de perguntas; à direita, a resposta da pergunta escolhida num painel de vidro */
:root[data-fq="4"] #faq .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;align-items:start}
:root[data-fq="4"] #faq .wrap>*:not(.fqpainel):not(.faq-list){grid-column:1/-1}
:root[data-fq="4"] #faq .faq-list{grid-column:1;max-width:none!important}
:root[data-fq="4"] #faq .faq-list .faq-a{display:none!important}
:root[data-fq="4"] #faq summary{font-size:17px!important;padding:16px 0!important}
:root[data-fq="4"] #faq details[open] summary{color:#39FF14!important}
:root[data-fq="4"] #faq .fqpainel{display:block;grid-column:2;position:sticky;top:120px;padding:34px 36px;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(14,14,18,.66);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#faq .fqpainel h3{margin:0 0 16px;font-size:26px;font-weight:500;letter-spacing:-.02em;color:#fff}
#faq .fqpainel p{margin:0;font-size:17px;line-height:1.65;color:#d6d6d6}
#faq .fqpainel.troca{animation:fqsobe .5s cubic-bezier(.16,1,.3,1) both}
@keyframes fqsobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 5 · Números: cada pergunta começa com o seu número em verde */
:root[data-fq="5"] #faq .faq-list{counter-reset:fq}
:root[data-fq="5"] #faq summary>span:first-child:before{counter-increment:fq;content:counter(fq,decimal-leading-zero);display:inline-block;width:56px;color:#39FF14;font-size:.8em;font-variant-numeric:tabular-nums}
:root[data-fq="5"] #faq .faq-a{padding-left:56px}
/* 6 · Conversa: a pergunta vira a mensagem de um membro e a resposta vem como mensagem da equipe, em verde */
:root[data-fq="6"] #faq .faq-list{border:0!important;display:flex;flex-direction:column;gap:10px}
:root[data-fq="6"] #faq details{border:0!important}
:root[data-fq="6"] #faq summary{display:inline-flex!important;gap:16px;max-width:80%;padding:12px 18px!important;border-radius:18px 18px 18px 5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:18px!important}
:root[data-fq="6"] #faq .faq-a{margin:10px 0 6px auto;max-width:72%;padding:14px 18px;border-radius:18px 18px 5px 18px;background:#39FF14;color:#000!important}
:root[data-fq="6"] #faq .faq-a:before{content:"Equipe Cripto.ico";display:block;font-size:12px;font-weight:600;color:rgba(0,0,0,.6);margin-bottom:4px}
/* 7 · Letra grande: perguntas em letra grande, fios finos e uma seta no lugar do "+" que gira ao abrir */
:root[data-fq="7"] #faq summary{font-size:clamp(24px,2.3vw,34px)!important;letter-spacing:-.02em;padding:28px 0!important}
:root[data-fq="7"] #faq .eco-plus{border:0!important;transition:transform .45s cubic-bezier(.16,1,.3,1)}
:root[data-fq="7"] #faq .eco-plus:before,:root[data-fq="7"] #faq .eco-plus:after{display:none!important}
:root[data-fq="7"] #faq .eco-plus{display:grid!important;place-items:center}
:root[data-fq="7"] #faq .eco-plus:not(:empty){font-size:0}
:root[data-fq="7"] #faq summary .eco-plus{background:none!important}
:root[data-fq="7"] #faq summary .eco-plus{width:30px;height:30px;position:relative}
:root[data-fq="7"] #faq summary .eco-plus{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/24px no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 17 7M9 7h8v8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/24px no-repeat;background:#39FF14!important}
:root[data-fq="7"] #faq details[open] .eco-plus{transform:rotate(90deg)}
/* 8 · Grade técnica: cada pergunta num quadro com fundo de pontos e cantoneiras verdes */
:root[data-fq="8"] #faq .faq-list{display:flex;flex-direction:column;gap:10px;border:0!important}
:root[data-fq="8"] #faq details{border:1px solid rgba(255,255,255,.1)!important;border-radius:16px;padding:0 26px;background:linear-gradient(#39FF14,#39FF14) 10px 10px/14px 2px no-repeat,linear-gradient(#39FF14,#39FF14) 10px 10px/2px 14px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/14px 2px no-repeat,linear-gradient(#39FF14,#39FF14) right 10px bottom 10px/2px 14px no-repeat,radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/20px 20px,rgba(14,14,18,.82)}
/* 9 · Marcador: a pergunta aberta ganha uma barra verde à esquerda e fica um pouco recuada */
:root[data-fq="9"] #faq details{transition:padding-left .45s cubic-bezier(.16,1,.3,1)}
:root[data-fq="9"] #faq details:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:2px;background:#39FF14;transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.16,1,.3,1)}
:root[data-fq="9"] #faq details[open]{padding-left:24px}
:root[data-fq="9"] #faq details[open]:before{transform:scaleY(1)}
/* 10 · Busca: um campo de busca no alto filtra as perguntas enquanto você digita */
:root[data-fq="10"] #faq .fqbusca{display:flex;align-items:center;gap:12px;max-width:956px;margin:0 0 20px;padding:14px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(14,14,18,.6)}
#faq .fqbusca input{all:unset;flex:1;font-size:17px;color:#fff}
#faq .fqbusca input::placeholder{color:rgba(255,255,255,.45)}
#faq .fqbusca i{width:16px;height:16px;border:1.5px solid #39FF14;border-radius:50%;position:relative;flex:none}
#faq .fqbusca i:after{content:"";position:absolute;right:-5px;bottom:-4px;width:7px;height:1.5px;background:#39FF14;transform:rotate(45deg)}
#faq details.fqesc{display:none}

/* ===== EFEITO ===== */
:root[data-fx="1"] #faq.fqvivo details{animation:fqent .8s cubic-bezier(.16,1,.3,1) both}
@keyframes fqent{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
:root[data-fx="3"] #faq.fqvivo details{animation:fqvira .9s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 0}
@keyframes fqvira{from{opacity:0;transform:perspective(900px) rotateX(-70deg)}to{opacity:1;transform:none}}
/* 4 · Destaque no mouse: a pergunta sob o mouse anda um pouco para a direita e as outras ficam mais apagadas */
:root[data-fx="4"] #faq .faq-list:hover details:not(:hover){opacity:.4}
:root[data-fx="4"] #faq details{transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
:root[data-fx="4"] #faq details:hover{transform:translateX(12px)}
/* 5 · Ímã e 9 · Profundidade: dirigidos pelo mouse */
:root[data-fx="5"] #faq details{transform:translate(var(--fmx,0px),var(--fmy,0px));transition:transform .5s cubic-bezier(.16,1,.3,1)}
:root[data-fx="9"] #faq .faq-list{transform:perspective(1400px) rotateX(var(--fgx,0deg)) rotateY(var(--fgy,0deg));transform-style:preserve-3d}
/* 7 · Brilho: uma faixa de luz atravessa a pergunta aberta de tempos em tempos */
:root[data-fx="7"] #faq details[open]{overflow:hidden}
:root[data-fx="7"] #faq details[open]:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.1) 50%,transparent 62%) 0 0/260% 100% no-repeat;animation:fqbrilho 4.5s ease-in-out infinite}
@keyframes fqbrilho{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
/* 10 · Fio vivo: um trecho de luz verde corre pelos fios entre as perguntas */
:root[data-fx="10"] #faq details{background-image:linear-gradient(90deg,transparent,#39FF14,transparent);background-repeat:no-repeat;background-size:30% 1px;background-position:-40% 100%;animation:fqfio 4s ease-in-out infinite}
:root[data-fx="10"] #faq details:nth-child(2n){animation-delay:.6s}:root[data-fx="10"] #faq details:nth-child(3n){animation-delay:1.2s}
@keyframes fqfio{to{background-position:140% 100%}}
@media (prefers-reduced-motion:reduce){#faq *{animation:none!important;transition:none!important}}


/* Lista de espera · "vagas" na letra itálica do "completo", em verde */
#lista h2 .w:nth-child(2)>span{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;color:#39FF14;letter-spacing:-.01em}
#lista h2 .w:nth-child(2){font-size:1.08em}

/* Botões "Entrar na lista de espera" · dois botões com modelos separados (só no demo).
   Botão 1 (.lb1, embaixo do texto da lista): transparente, vidro (data-l1).
   Botão 2 (.lb2, no rodapé): discreto (data-l2).
   Dentro de cada botão: .lt = texto, .la = seta, .lf = camada de efeito. */
.lbtn .la,.lbtn .lf{display:none}
.lbtn .lt{position:relative;z-index:1}
.lbtn .la{position:relative;z-index:1;flex:none;width:16px;height:16px}
.lbtn .la:before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.lbtn .lf{position:absolute;pointer-events:none;border-radius:inherit}
:root:not([data-l1="0"]) .lb1,:root:not([data-l2="0"]) .lb2{position:relative;isolation:isolate;color:#fff!important;box-shadow:none!important;transform:none!important;transition:color .4s,border-color .4s,background-color .4s,padding .4s cubic-bezier(.16,1,.3,1)!important}
@property --lba{syntax:'<angle>';inherits:true;initial-value:0deg}

/* sem o brilho verde do site que segue o mouse (camada :before) e sem a sombra interna: o botão fica limpo */
:root:not([data-l1="0"]) .lb1:before,:root:not([data-l1="0"]) .lb1:after,.lb2:before,.lb2:after{content:none!important;display:none!important}

/* ── Botão 1 (embaixo do texto da lista, transparente) ── */
/* 1 · Vidro amplo: mais largo e mais alto, vidro quase invisível, só um fio de luz no topo */
:root[data-l1="1"] .lb1{min-height:60px!important;padding:0 52px!important;letter-spacing:.01em;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.1)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
:root[data-l1="1"] .lb1 .lf{display:block;top:-1px;left:22%;right:22%;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transition:left .6s cubic-bezier(.16,1,.3,1),right .6s cubic-bezier(.16,1,.3,1)}
:root[data-l1="1"] .lb1:hover .lf{left:8%;right:8%}
/* 2 · Ícone em contorno: o avião do Telegram desenhado em linha fina, à esquerda do texto */
:root[data-l1="2"] .lb1{gap:12px;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.18)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-l1="2"] .lb1 .la{display:block;order:-1;width:18px;height:18px;color:#39FF14}
:root[data-l1="2"] .lb1 .la:before{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M21.5 3.5 2.8 10.9c-.9.4-.9 1.1 0 1.4l4.6 1.5 1.8 5.6c.2.6.9.8 1.4.3l2.5-2.4 4.7 3.5c.6.4 1.3.1 1.5-.6l3.2-15.4c.2-1-.6-1.6-1.5-1.3Z'/><path d='m7.5 13.8 10-6.3-7.6 7.4-.5 4.6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M21.5 3.5 2.8 10.9c-.9.4-.9 1.1 0 1.4l4.6 1.5 1.8 5.6c.2.6.9.8 1.4.3l2.5-2.4 4.7 3.5c.6.4 1.3.1 1.5-.6l3.2-15.4c.2-1-.6-1.6-1.5-1.3Z'/><path d='m7.5 13.8 10-6.3-7.6 7.4-.5 4.6'/></svg>") center/contain no-repeat}
:root[data-l1="2"] .lb1:hover .la:before{transform:translate(2px,-2px)}
:root[data-l1="2"] .lb1:hover{border-color:rgba(255,255,255,.4)!important}
/* 3 · Dividido: o vidro é partido por um fio; à direita, "Telegram" em cinza */
:root[data-l1="3"] .lb1{gap:0;padding:0 22px 0 28px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-l1="3"] .lb1 .lt:after{content:"Telegram";display:inline-block;margin-left:20px;padding-left:20px;border-left:1px solid rgba(255,255,255,.18);font-weight:400;color:rgba(255,255,255,.5);transition:color .4s}
:root[data-l1="3"] .lb1:hover .lt:after{color:#39FF14}
/* 4 · Encaixe: uma cápsula de vidro dentro de outra, com um respiro entre as duas */
:root[data-l1="4"] .lb1{padding:0 30px!important;min-height:48px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.2)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);margin:5px}
:root[data-l1="4"] .lb1 .lf{display:block;inset:-6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.015);z-index:-1;transition:border-color .4s}
:root[data-l1="4"] .lb1:hover .lf{border-color:rgba(57,255,20,.45)}
/* 5 · Borda que se apaga: a borda é clara em cima e some em direção à base */
:root[data-l1="5"] .lb1{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))!important;border-color:transparent!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-l1="5"] .lb1 .lf{display:block;inset:-1px;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 55%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:background .4s}
:root[data-l1="5"] .lb1:hover .lf{background:linear-gradient(180deg,rgba(57,255,20,.85),rgba(57,255,20,.15) 55%,transparent)}
/* 6 · Estrelado: pontinhos verdes que piscam devagar dentro do vidro */
:root[data-l1="6"] .lb1{overflow:hidden;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.15)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-l1="6"] .lb1 .lf{display:block;inset:0;border-radius:0;background:radial-gradient(1px 1px at 12% 30%,#39FF14,transparent),radial-gradient(1px 1px at 27% 75%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 22%,#39FF14,transparent),radial-gradient(1px 1px at 63% 70%,#39FF14,transparent),radial-gradient(1px 1px at 78% 35%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 68%,#39FF14,transparent),radial-gradient(1px 1px at 36% 50%,#B026FF,transparent);animation:lbestrela 3.2s ease-in-out infinite alternate}
@keyframes lbestrela{from{opacity:.25}to{opacity:.9}}
:root[data-l1="6"] .lb1:hover{border-color:rgba(57,255,20,.6)!important}
/* 7 · Texto em degradê: vidro transparente; a letra passa do branco ao verde */
:root[data-l1="7"] .lb1{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-l1="7"] .lb1 .lt{background:linear-gradient(90deg,#fff 35%,#39FF14 70%,#fff) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s cubic-bezier(.16,1,.3,1)}
:root[data-l1="7"] .lb1:hover .lt{background-position:100% 0}
/* 8 · Grade: uma grade finíssima dentro do vidro, como tela de gráfico, que corre devagar */
:root[data-l1="8"] .lb1{overflow:hidden;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:root[data-l1="8"] .lb1 .lf{display:block;inset:0;border-radius:0;background:linear-gradient(rgba(57,255,20,.12) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(57,255,20,.12) 1px,transparent 1px) 0 0/14px 14px;-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);animation:lbgrade 6s linear infinite}
@keyframes lbgrade{to{background-position:14px 0,14px 0}}
/* 9 · Halo no chão: vidro transparente com um brilho verde e roxo bem difuso por baixo */
:root[data-l1="9"] .lb1{overflow:visible;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.18)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-l1="9"] .lb1 .lf{display:block;left:4%;right:4%;bottom:-22px;height:30px;border-radius:50%;background:linear-gradient(90deg,rgba(57,255,20,.85),rgba(176,38,255,.8));filter:blur(14px);opacity:.75;z-index:-1;transition:opacity .5s,bottom .5s}
:root[data-l1="9"] .lb1:hover .lf{opacity:1;bottom:-16px}
/* 10 · Duas camadas: um contorno fino deslocado atrás do vidro, que se encaixa ao passar o mouse */
:root[data-l1="10"] .lb1{overflow:visible;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.2)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-l1="10"] .lb1 .lf{display:block;inset:-1px;border:1px solid rgba(57,255,20,.55);transform:translate(6px,6px);z-index:-1;transition:transform .5s cubic-bezier(.16,1,.3,1)}
:root[data-l1="10"] .lb1:hover .lf{transform:none}

/* ── Botão 2 (rodapé) · fixo: Traço lateral — só o texto, com um traço verde à esquerda que cresce ao passar o mouse ── */
.lb2{position:relative;background:none!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0 0 0 16px!important;min-height:34px!important;font-weight:500!important;color:#fff!important;transform:none!important}
.lb2 .lf{display:block;left:0;top:32%;bottom:32%;width:2px;border-radius:2px;background:#39FF14;transition:top .45s cubic-bezier(.16,1,.3,1),bottom .45s cubic-bezier(.16,1,.3,1)}
.lb2:hover .lf{top:0;bottom:0}
/* nenhuma outra linha ao passar o mouse: sem borda, sem sombra, sem brilho (vencem as regras de hover do site) */
html body footer a.lb2.lb2,html body footer a.lb2.lb2:hover,html body footer a.lb2.lb2:focus{border:0!important;box-shadow:none!important;background:none!important;outline:0!important;text-decoration:none!important}
html body footer a.lb2.lb2:focus-visible .lf{top:0;bottom:0}

/* Lista de espera · texto e botão centralizados */
#lista .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
#lista .wrap>p{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.lbtn .lf,.lbtn .la,.lbtn .la:before{transition:none!important;animation:none!important}}

/* Tela de carregamento · modelo Mineração. A página só abre quando tudo carregou. */
.loader .loader-track,.loader #loadPct{display:none!important}
.loader .ldcv{display:block;width:440px;height:180px;max-width:90vw}
.loader .ldpct{font:500 13px Geist,system-ui,sans-serif;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-top:-6px}
/* telas de toque: com a tela de carregamento na frente, o dedo não rola a página que está por baixo; assim que ela começa a sumir, o toque já vale para a página */
.loader{touch-action:none}
.loader.done{pointer-events:none}

/* Celular, tablet em pé e celular deitado (largura menor que 900 px ou altura menor que 560 px): arranjo próprio das seções novas.
   As seções deixam de ficar presas na tela e correm na rolagem normal; todo texto fica dentro do seu card, nada passa da borda. */
@media (max-width:899px),(max-height:559px){
  /* seções: altura natural, sem palco preso */
  .ps .track{height:auto!important}
  .ps .stg{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;display:block!important;padding:88px 0 36px!important}
  .ps .stg>.bar{display:none}
  .ps .wrap{width:min(1280px,100% - 56px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}      /* as mesmas margens do resto do site (28 px de cada lado): tudo alinhado na mesma linha */
  /* títulos das seções: o mesmo tamanho em todas (o do Relatório um pouco menor, como no computador; o do Ecossistema mantém as três linhas) */
  .ps .sh h2:not(.t3){font-size:30px!important;line-height:1.1!important;max-width:none!important}
  .ps #p5 .sh h2{font-size:26px!important;line-height:1.14!important}
  #comunidade h2,#como-entrar h2,#faq h2,#lista h2{font-size:30px!important;line-height:1.1!important}
  /* botões das seções novas no tamanho normal (a redução só vale no computador) */
  .ps .cta .btn{zoom:1!important}

  /* objeto 3D do fundo: suave depois do topo, sem disputar com o texto */

  /* entradas suaves ao chegar na tela (usam "translate" e "filter", que o motor não mexe) */
  :root.mob .ps #deck .slab,:root.mob .ps #p3 .rp .g,:root.mob .ps #p2 .dev{translate:0 26px;filter:opacity(0);transition:translate .9s cubic-bezier(.16,1,.3,1),filter .9s ease}
  :root.mob .ps .mvis{translate:0 0!important;filter:opacity(1)!important}

  /* ---------- 1. Ecossistema: os cinco pilares, um card depois do outro ---------- */
  .ps #p1 .x-eco{display:block!important}
  .ps #p1 .eco-col{display:block!important;min-height:0!important}
  .ps #p1 .eco-l{display:none!important}            /* o texto de cada pilar passa a morar dentro do próprio card */
  .ps #deck{position:relative!important;height:auto!important;min-height:0!important;display:grid!important;gap:22px!important;margin:30px 0 0!important;transform:none!important;translate:none!important;perspective:none!important}
  .ps #deck .slab{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;transform:none!important;opacity:1!important;pointer-events:auto!important;clip-path:none!important;padding:24px 20px!important;display:block!important}
  .ps #deck .slab:after{transform:none!important}
  .ps #deck .slm{display:block;margin:0 0 20px}
  .ps #deck .slm .n{display:none}      /* sem a numeração dos pilares, como no computador */
  .ps #deck .slm h3{margin:0;font:600 clamp(26px,7.4vw,34px)/1.08 Geist,system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
  .ps #deck .slm .tag{display:inline-block;margin-top:12px;padding:5px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:13px;color:#fff}
  .ps #deck .slm p{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72)}
  .ps #deck .slm .more{display:inline-block;margin-top:12px;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.4)}
  .ps #deck .sl2,.ps #deck .nodes,.ps #deck .det,.ps #deck .solo,.ps #deck .node{transform:none!important}
  /* Tecnologia: o cérebro com altura própria, inteiro dentro do card */
  .ps #deck .slab.pl-tec .holo{position:relative!important;flex:none!important;height:clamp(470px,140vw,560px)!important;min-height:0!important;margin-top:8px!important;transform:none!important}
  /* Comunidades: os dois blocos lado a lado; embaixo, a conversa e depois o detalhe, cada um na largura toda */
  .ps #deck .slab.pl-com .sl2{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;gap:14px!important}
  .ps #deck .slab.pl-com .nodes{grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .ps #deck .slab.pl-com .tg{grid-column:1!important;grid-row:auto!important;height:420px!important;min-height:0!important}      /* a conversa tem altura fixa, como no computador: as mensagens entram por baixo e as antigas saem por cima */
  .ps #deck .slab.pl-com .det{grid-column:1!important;grid-row:auto!important}
  /* Dentro das comunidades: os dois blocos lado a lado, com as etiquetas em linha; o detalhe embaixo */
  :root[data-a3] .ps #deck .slab.pl-den .sl2{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;column-gap:0!important}
  :root[data-a3] .ps #deck .slab.pl-den .nodes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:auto!important;justify-self:stretch!important}
  :root[data-a3] .ps #deck .slab.pl-den .node{transform:none!important;width:auto!important;padding:14px 14px!important;animation:none!important}
  :root[data-a3] .ps #deck .slab.pl-den .node>span{display:block!important}
  /* nós (cursos, comunidades) com toque confortável e texto que quebra dentro do bloco */
  .ps #deck .node{min-height:48px;text-align:left;overflow-wrap:anywhere}
  /* Em breve: as marcações de baixo em sequência, alinhadas à esquerda */
  .ps #deck .slab.pl-rad .chips.big{justify-content:flex-start!important;gap:8px!important}

  /* cabeçalho do Radar News: quebra em duas linhas em vez de cortar a frase */
  .ps #deck .rd-top{flex-wrap:wrap!important;row-gap:6px!important}
  .ps #deck .rd-status{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important}

  /* ---------- 2. Gênesis Labs: passos, aviso e botão em cima; o painel de exemplo embaixo, inteiro ---------- */
  .ps #p2 .gen{display:block!important}
  .ps #p2 .g4esq{position:relative!important;inset:auto!important;transform:none!important;width:auto!important;margin:0 0 26px!important}
  .ps #p2 #genSteps{gap:0!important;justify-content:space-between!important;width:auto!important;max-width:100%!important}      /* os números 01 a 04 se espalham pela largura, sem passar da borda */
  .ps #p2 .x-note{white-space:normal!important;font-size:12px!important;line-height:1.5!important;max-width:none!important;margin-top:0!important}      /* aviso menor; o espaço acima dele é o da explicação mais longa dos passos (celular.js), para nunca ficar por baixo dela */
  .ps #p2 .cta{margin-top:18px!important}
  .ps #p2 .g4cena{transform:none!important;width:auto!important}
  /* direção provável (passo 3): a palavra e o medidor dividem a largura sem se encostar (antes LONG, SHORT e NEUTRO passavam por cima do arco);
     os quatro fatores ficam um embaixo do outro, com o nome à esquerda e a avaliação à direita (em duas colunas o nome quebrava) */
  .ps #p2 #scrB .dirw{grid-template-columns:minmax(0,1fr) 110px!important;gap:12px!important}
  .ps #p2 #scrB .dirw strong{font-size:39px!important}
  .ps #p2 #scrB .dirw strong.sm{font-size:33px!important}
  .ps #p2 #scrB .arc{width:110px!important}
  .ps #p2 #scrB .arc svg{width:100%!important;height:auto!important}
  .ps #p2 #scrB .x-forces{grid-template-columns:1fr!important}
  .ps #p2 #scrB .x-forces>div{justify-content:space-between!important}
  .ps #p2 .dev{width:auto!important;max-width:none!important}
  /* o painel de exemplo cresce até a altura da maior das suas telas (elas continuam uma sobre a outra, trocando) */
  .ps #p2 .dev{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;height:auto!important;min-height:0!important}
  .ps #p2 .dev>.dev-h{grid-row:1;grid-column:1}
  .ps #p2 .dev>.scr{position:relative!important;inset:auto!important;grid-row:2;grid-column:1;height:auto!important;min-height:0!important;align-self:start}
  .ps #p2 .dev{overflow:hidden!important}
  :root.mob .ps #p2 .dev{transition:height .7s cubic-bezier(.16,1,.3,1),translate .9s cubic-bezier(.16,1,.3,1),filter .9s ease!important}      /* a altura acompanha a tela que está aparecendo (celular.js) */
  /* os quatro fatores em lista, um por linha: nome à esquerda, leitura à direita */
  .ps #p2 .forces{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  .ps #p2 .forces>div{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px!important}
  .ps #p2 .forces>div>span{display:flex!important;align-items:center;gap:10px;white-space:nowrap}
  .ps #p2 .dev-h{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:6px 14px!important}
  .ps #p2 .dev-h>*{white-space:nowrap}
  .ps #p2 .dev-h>span:last-child{margin-left:auto}
  /* os dois planos, um embaixo do outro, cada um na largura toda */
  .ps #p2 .plans{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .ps #p2 .plan{min-width:0!important}
  .ps #p2 .plan .row{gap:10px!important}
  .ps #p2 .plan .row em,.ps #p2 .plan .row span{min-width:0!important;white-space:nowrap}

  /* nada das seções novas se desloca com o mouse ou com a rolagem no celular */
  .ps .sh,.ps .eco-l,.ps .rep-l,.ps .x-steps,.ps .steps,.ps .filt,.ps .rnav,.ps .deck,.ps #dev,.ps .rst,.ps .pilha,.ps .pages,.ps .x-note,.ps .note,.ps .cta{transform:none!important;translate:none!important}

  /* ---------- 3. Resultados: as três telas, uma abaixo da outra, cada bloco com a altura do seu conteúdo ---------- */
  .ps #p3 .rtag{display:inline-flex!important;margin-top:14px!important;white-space:normal!important}
  .ps #p3 .rnav{display:flex!important;flex-wrap:wrap!important;gap:8px 18px!important;margin:20px 0 0!important}
  .ps #p3 .r5cena{transform:none!important}
  .ps #p3 #rst,.ps #p3 .rst{position:relative!important;height:auto!important;min-height:0!important;perspective:none!important;overflow:visible!important;margin-top:22px!important;display:grid!important;gap:34px!important}
  .ps #p3 .rp{position:relative!important;inset:auto!important;transform:none!important;opacity:1!important;filter:none!important;pointer-events:auto!important;z-index:auto!important;height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:12px!important}
  .ps #p3 .rp>*{min-height:0!important;height:auto!important}
  .ps #p3 .rp .it{opacity:1!important;transform:none!important}
  .ps #p3 .g.big{padding:22px 20px!important;justify-content:flex-start!important}
  .ps #p3 .g.big small{font-size:14px!important;line-height:1.4!important}
  .ps #p3 .rA .big strong{font-size:clamp(46px,14vw,64px)!important;line-height:1!important;margin:10px 0 12px!important}
  .ps #p3 .g.big p{font-size:14.5px!important;line-height:1.5!important;margin:0!important}
  .ps #p3 #chart{padding:18px 16px!important}
  .ps #p3 #chart .csvg{height:150px!important}
  .ps #p3 #chart .src{font-size:12.5px!important;line-height:1.5!important}
  .ps #p3 .minis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .ps #p3 .mini{padding:16px 14px!important;justify-content:flex-start!important}
  .ps #p3 .mini b{font-size:24px!important}
  .ps #p3 .mini span{font-size:13px!important;line-height:1.4!important}
  .ps #p3 .rB .big strong{font-size:clamp(54px,17vw,76px)!important;line-height:1!important;margin:10px 0 12px!important}
  .ps #p3 .rB .big p{font-size:14px!important;line-height:1.55!important}
  /* entrada, melhor ponto e multiplicação: em lista, nome à esquerda e valor à direita */
  .ps #p3 .rB .side{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;gap:0!important}
  .ps #p3 .kv{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:14px;padding:14px 4px!important}
  .ps #p3 .kv span{font-size:14px!important;line-height:1.35!important}
  .ps #p3 .kv b{font-size:22px!important;white-space:nowrap}
  .ps #p3 .kv.hl b{font-size:28px!important}
  .ps #p3 .g.simh{display:block!important;padding:18px 0 4px!important}
  .ps #p3 .simh>div:first-child{display:flex!important;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .ps #p3 .simh label{font-size:14px!important;display:inline!important}
  .ps #p3 .simh output{font-size:28px!important;display:inline-block!important}
  .ps #p3 .simh input{display:block!important;width:100%!important;margin:10px 0 8px!important;height:44px}      /* área de toque da barra: 44 px */
  .ps #p3 .simh .pre{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .ps #p3 .simh .pre button{width:auto!important;min-height:44px!important;padding:8px 6px!important;font-size:14px!important;white-space:nowrap!important;text-align:center}
  .ps #p3 .qs{font-size:16px!important;margin:8px 0 0!important}
  .ps #p3 .outs{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .ps #p3 .out{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:2px!important;text-align:left!important;padding:16px 18px!important;justify-content:stretch!important}
  .ps #p3 .out span{font-size:13.5px!important;line-height:1.4!important;display:block!important}
  .ps #p3 .out b{font-size:28px!important;margin:4px 0 2px!important;display:block!important}
  .ps #p3 .out small{font-size:12.5px!important;display:block!important}
  .ps #p3 .x-note,.ps #p3 .note{margin-top:22px!important}
  .ps #p3 .cta{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:16px!important}

  /* ---------- 4. Depoimentos: carrossel de deslizar com o dedo, com os filtros em cima ---------- */
  .ps #p4 #p4head,.ps #p4 #filt,.ps #p4 #p4note{opacity:1!important}
  .ps #p4 #filt{display:flex!important;flex-wrap:wrap!important;gap:10px 18px!important;margin:18px 0 0!important;font-size:14.5px!important}
  .ps #p4 #filt button{padding:6px 0;line-height:1.3}
  .ps #p4 .d6v,.ps #p4 #qfx,.ps #p4 .qsh{display:none!important}
  .ps #p4 #pilha{visibility:visible!important;position:relative!important;display:flex!important;align-items:stretch;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;height:auto!important;min-height:0!important;perspective:none!important;padding:8px 28px 24px!important;margin:26px -28px 0!important;scrollbar-width:none;scroll-padding:0 28px}
  .ps #p4 #pilha::-webkit-scrollbar{display:none}
  .ps #p4 #pilha .q{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;filter:none!important;z-index:auto!important;flex:0 0 min(84%,420px);width:auto!important;min-height:0!important;height:auto!important;margin:0!important;scroll-snap-align:center;padding:24px 22px 20px!important}
  .ps #p4 #pilha .q .m{font-size:30px!important}
  .ps #p4 #pilha .q blockquote{font-size:16.5px!important;line-height:1.5!important;margin-bottom:18px!important}
  .ps #p4 #p4note{margin:6px 0 0!important;font-size:13.5px!important;line-height:1.55!important;display:block!important}
  .ps #p4 .d6pula{position:static!important;left:auto!important;bottom:auto!important;translate:none!important;margin:22px auto 0!important;display:flex!important}
  .ps #p4 .mdots{display:flex;justify-content:center;gap:6px;margin:2px 0 0}
  .ps #p4 .mdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
  .ps #p4 .mdots i.on{width:18px;border-radius:3px;background:#39FF14}

  /* ---------- 5. Relatório: título e texto da página em cima; sumário tocável; a página inteira embaixo ---------- */
  .ps #p5 .rep{display:block!important}
  .ps #p5 .rep-col{display:block!important;padding:0!important}
  .ps #p5 .rep-l{margin-top:18px!important}
  .ps #p5 #book{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none!important}      /* o livro original continua por trás (o sumário lê dele qual página está de frente), sem ocupar espaço */
  .ps #p5 .r7v.v3{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;translate:none!important;transform:none!important;display:block!important;margin-top:26px}
  .ps #p5 .v3 ol{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;margin:0 0 22px!important}
  .ps #p5 .v3 li{padding:11px 14px!important;font-size:13.5px!important;line-height:1.3;border:1px solid rgba(255,255,255,.12);cursor:pointer;min-height:44px;box-sizing:border-box}
  .ps #p5 .v3 li.at{border-color:#39FF14}
  .ps #p5 .v3 .f{display:flex;justify-content:center;zoom:1.12}
  .ps #p5 .v3 .f .pg{position:relative!important;left:auto!important;top:auto!important;margin:0!important}

  /* ---------- Perguntas frequentes: no celular, as perguntas em uma coluna só (as duas colunas ficam para telas largas) ---------- */
  :root[data-fq="3"] #faq .faq-list{grid-template-columns:minmax(0,1fr)!important;column-gap:0!important}
  :root[data-fq="3"] #faq summary{font-size:17px!important;line-height:1.4!important}

  /* ---------- Comunidade: texto em cima, inteiro; as bolas embaixo, numa caixa própria (2-1-2, ou a pirâmide 3+2 quando cabe) ---------- */
  :root[data-cm] #comunidade .wrap{display:block!important}
  :root[data-cm] #comunidade .wrap>.chapter,:root[data-cm] #comunidade .wrap>h2,:root[data-cm] #comunidade .wrap>.intro{left:0!important;top:0!important}
  :root[data-cm] #comunidade .wrap>.intro{max-width:none!important}
  :root[data-cm="6"] #comunidade .stats{position:relative!important;top:0!important;left:auto!important;transform:none!important;translate:none!important;margin:44px auto 0!important;width:380px!important;height:556px!important;max-width:none!important;zoom:calc(var(--zs,1)*var(--cmb,1))}
  :root[data-cm="6"] #comunidade.cm3c .stats{width:570px!important;height:396px!important}
  :root[data-cm="6"] #comunidade .stat span{font-size:13.5px!important;max-width:84%!important}

  /* cards pequenos do ecossistema (Acompanhamento, Comunidades 2.0 e 3.0...): o nome inteiro, sem quebrar no meio da palavra; se não couber, o celular.js diminui a letra só o necessário */
  .ps #deck .node b{display:block;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
  .ps #deck .slab .nodes .node,:root[data-a3] .ps #deck .slab.pl-den .nodes .node{padding-left:11px!important;padding-right:11px!important}      /* um pouco mais de lugar para o nome dentro dos cards pequenos */

  /* só no celular (no tablet nada muda): bolas da Comunidade 20% menores (a caixa inteira, com o texto e a física juntos) e a película escura do topo 10% mais clara */
  @media (pointer:coarse) and (max-width:599px),(pointer:coarse) and (max-height:599px){
    :root{--cmb:.8}
    .hero:before{opacity:.9}
  }

  @media (max-width:370px){ .ps #p5 .v3 .f{zoom:1} .ps #p5 .v3 ol{grid-template-columns:1fr} }
  /* áreas de toque confortáveis (pelo menos 44 px de altura) para links e abas soltos */
  .ps #deck .slm .more{display:inline-flex!important;align-items:center;min-height:44px;margin-top:4px!important}
  .ps #p3 .rnav button{min-height:44px;padding:0 2px!important}
  .ps #p4 #filt button{min-height:40px;display:inline-flex!important;align-items:center}
  /* horários das mensagens da conversa: um pouco maiores no celular */
  .ps .tg-m time{font-size:11.5px!important}

  /* topo: os dois botões, um embaixo do outro, com a mesma largura */
  @media (max-width:560px){ .hero .ctas{display:grid!important;grid-template-columns:max-content!important;gap:12px!important} .hero .ctas .btn{justify-content:center!important;margin:0!important} }

  /* barra do topo em celulares estreitos (até 380 px): margens e botão um pouco menores, para logo, botão e menu caberem juntos */
  @media (max-width:380px){
    #nav .wrap{gap:10px!important}
    #nav .wrap>nav{display:none!important}
    #nav .btn{padding:0 12px 0 11px!important;font-size:13px!important;gap:8px!important;min-height:40px!important}
    #nav .m-burger{flex:none}
  }
  /* celulares bem estreitos (menos de 360 px, como os de 320): logo, botão e menu um pouco mais juntos e menores, para o botão do menu não passar da borda da tela (em 320 px ele saía 10 px) */
  @media (max-width:359px){
    #nav .wrap{gap:6px!important}
    #nav .brand img{width:80px!important;height:auto!important}
    #nav .btn{padding:0 8px!important;font-size:12px!important;gap:6px!important}
  }

}
/* fora do celular, o cabeçalho próprio dos cards não aparece */
:root:not(.mob) .ps #deck .slm{display:none}
/* nome dos cards pequenos do ecossistema, em qualquer tela: inteiro, sem quebrar no meio da palavra; se não couber, o celular.js diminui a letra só o necessário */
.ps #deck .node b{overflow-wrap:normal;word-break:normal;hyphens:none}

/* telas de toque (celular deitado e tablet deitado mostram o menu de computador): área de toque maior nos links do menu, sem mudar o desenho */
@media (pointer:coarse){
  #nav ul a,#nav .dd-btn{display:inline-flex;align-items:center;min-height:44px}
}

/* objeto 3D do fundo: suave depois do topo no celular e nas telas quase quadradas (iPad deitado), para nunca disputar com o texto.
   Escurece aos poucos, acompanhando a rolagem (o valor vem do celular.js: 20% no celular, 30% no tablet e nas telas quase quadradas) */
:root.mfo #acTopo{filter:opacity(var(--mfo,1))}
/* película escura do topo, no celular e no tablet: em vez de terminar num risco reto, ela vai clareando aos poucos no fim do topo e se junta ao escuro de baixo */
@media (max-width:899px),(max-height:559px),(pointer:coarse){
  .hero:before{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
}
/* título do topo em todas as telas (computador incluído, a pedido de 03/10): "A melhor", embaixo "comunidade" na letra de destaque do site (na mesma cor do título) e embaixo "cripto do Brasil."
   O título fica mais estreito e deixa mais espaço para os elementos 3D ao lado */
#inicio h1 .m-com{display:block;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
/* celular, partes que param encaixadas (deslize por etapas, em celular.js): enquanto a etapa está na tela, a página não rola desde o primeiro toque; cada deslize do dedo troca a etapa.
   Tablet com o touro: no topo e durante as descidas automáticas, o dedo também não arrasta a página (propostas.html) */
/* chegada sem passar do ponto (celular.js, função limite): o corpo da página corta o que passa da altura dele, e o celular.js limita essa altura para a página terminar exatamente
   no ponto de parada da próxima parte. O html fica com a rolagem que já tinha (só vertical; antes ela vinha do body); cortar com "clip" não cria uma área de rolagem dentro do body.
   Menu aberto (mbloq): a trava de rolagem que o site põe no body passa para o html. Só onde existe overflow:clip (Safari 16, Chrome 90). Estas regras têm de vir antes de html.mtrava */
@supports (overflow:clip){
  html.metapas{overflow-x:hidden}
  html.metapas body{overflow:clip}
  html.metapas.mbloq{overflow:hidden}
}
html.mlim{overscroll-behavior-y:none}
html.mtrava{overflow:hidden;touch-action:none;overscroll-behavior:none}
html.toque-topo,html.toque-segura{touch-action:none}
/* no instante em que uma parte que ficou para cima da tela volta para a primeira etapa (repoe, em celular.js): o painel do Gênesis troca de altura sem animação e o navegador não ajusta a rolagem por conta própria; a página é reposicionada pelo código */
html.mrepoe{overflow-anchor:none}
:root.mob.mrepoe .ps #p2 .dev{transition:none!important}

/* composição de computador em telas de toque (tablet deitado): mesmo desenho, mas com área de toque de pelo menos 44 px e o aviso do Gênesis nunca abaixo de 11 px */
@media (pointer:coarse) and (min-width:900px) and (min-height:560px){
  .ps .btn,.ps .cta .btn,.hero .btn,#lista .btn,.ps .rnav button,.ps .pre button,.ps #filt button,.ps .v3 li{min-height:calc(44px / var(--k,1) / var(--bz,1))!important}
  .ps .cta .btn,.hero .btn{--bz:.78}
  footer .wrap a{min-height:calc(40px / var(--k,1));display:inline-flex;align-items:center}
  footer .foot-brand .btn{min-height:calc(44px / var(--k,1))!important;display:inline-flex;align-items:center}      /* botão da lista de espera no rodapé: área de toque de 44 px */
  /* barra do simulador: o dedo alcança 44 px de altura; a barra desenhada continua igual e no mesmo lugar */
  .ps #p3 #simR{height:calc(44px / var(--k,1));margin-top:calc((16px - 44px / var(--k,1)) / 2)!important;margin-bottom:calc((16px - 44px / var(--k,1)) / 2)!important}
}
.ps #p2 .g4esq .x-note{font-size:max(11.5px,calc(11.5px * .95 / var(--k,1)))}
/* composição bem reduzida: o aviso do Gênesis pode quebrar linha (no computador ele cabe numa linha só) */
:root.kp .ps #p2 .g4esq .x-note{white-space:normal!important}

/* Página Planos (18/10/2026) · os dois planos anuais, Standard e Pro, entre a Comunidade e o Como entrar.
   Gramática do movimento da skill fabricio-skill-app-design, com as cores, a letra e os cartões de vidro do site.
   Só vale dentro de #planos. O estado final é o padrão: sem o código, tudo aparece pronto. */
#planos{
  --pl-cub:cubic-bezier(.33,1,.68,1);
  --pl-expo:cubic-bezier(.16,1,.3,1);
  --pl-vv:cubic-bezier(.65,0,.35,1);
  --pl-mola:linear(0,.0527,.1801,.3433,.5136,.6718,.8066,.913,.9904,1.0416,1.0706,1.0825,1.0821,1.0737,1.0611,1.0468,1.033,1.0208,1.0109,1.0034,.9982,.995,.9934,.993,1);
  --pl-mola-forte:linear(0,.0921,.305,.5573,.7912,.9735,1.0924,1.1511,1.1622,1.1413,1.1041,1.063,1.0265,.999,.982,.9744,.974,.9782,.9845,.9912,.9968,1.0009,1.0033,1.0043,1);
  --pl-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@supports not (transition-timing-function:linear(0,1)){
  #planos{--pl-mola:cubic-bezier(.34,1.56,.64,1);--pl-mola-forte:cubic-bezier(.34,1.8,.64,1)}
}
/* título: "plano" na letra itálica de destaque, em verde (as palavras são separadas pelo efeito de entrada do título) */
#planos h2 .w:nth-child(4)>span{font-family:var(--pl-serif);font-style:italic;font-weight:400;color:#39FF14;letter-spacing:-.01em}
#planos .intro{max-width:56ch}

/* contagem até a abertura das vagas: selo com o ponto verde que pulsa três vezes quando aparece (o número muda de verdade, um por dia) */
#planos .pl-vagas{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;padding:9px 16px 9px 14px;border-radius:999px;
  border:1px solid rgba(57,255,20,.32);background:rgba(57,255,20,.06);color:var(--white);font:500 15px/1.2 var(--font)}
#planos .pl-vagas[hidden]{display:none}
#planos .pl-vagas b{color:#39FF14;font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#planos .pl-qd{color:var(--muted)}
#planos .pl-ponto{flex:none;width:8px;height:8px;border-radius:50%;background:#39FF14;box-shadow:0 0 0 0 rgba(57,255,20,.5)}
#planos .pl-vagas.pl-pulsa .pl-ponto{animation:plPulso 1.8s var(--pl-cub) 3}
@keyframes plPulso{70%{box-shadow:0 0 0 9px rgba(57,255,20,0)}100%{box-shadow:0 0 0 0 rgba(57,255,20,0)}}
#planos .pl-vagas.pl-anima{opacity:0;transform:translateY(-10px) scale(.9)}
#planos .pl-vagas.pl-anima.pl-vivo{opacity:1;transform:none;transition:transform .6s var(--pl-mola),opacity .3s var(--pl-cub)}
#planos .pl-vagas+.pl-grade{margin-top:36px}

#planos .pl-grade{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:56px;max-width:1040px;perspective:1600px;align-items:stretch}
#planos .pl-entra{position:relative;isolation:isolate;display:flex;--pl-y:0px;--d:0ms;transform:translate3d(0,var(--pl-y),0)}
#planos .pl-entra.pl-e-pro{--pl-y:-10px;--d:140ms}
/* o único brilho da seção: atrás do Pro */
#planos .pl-entra.pl-e-pro:before{content:"";position:absolute;inset:6% 8% -2%;z-index:-1;border-radius:40px;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%,rgba(57,255,20,.16),transparent 72%);filter:blur(28px)}

#planos .pl-card{position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box;padding:34px 34px 30px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(17,17,20,.88),rgba(7,7,9,.9));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);transition:opacity .5s var(--pl-vv)}
#planos .pl-pro{border-color:rgba(57,255,20,.36);box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
/* com o mouse num plano, o outro recua um pouco */
@media (hover:hover) and (pointer:fine){
  #planos .pl-grade:hover .pl-card{opacity:.58}
  #planos .pl-grade .pl-card:hover,#planos .pl-grade .pl-card:focus-within{opacity:1}
}

#planos .pl-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
#planos .pl-rot{font:500 12px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#planos .pl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(57,255,20,.5);background:rgba(57,255,20,.08);color:#39FF14;font:500 12px/1 var(--font);letter-spacing:.02em}
#planos .pl-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:#39FF14}

#planos .pl-nome{margin:18px 0 0;font:600 34px/1 var(--font);letter-spacing:-.035em;color:var(--white);max-width:none}
#planos .pl-pro .pl-nome{font-family:var(--pl-serif);font-style:italic;font-weight:400;font-size:42px;letter-spacing:-.01em;color:#39FF14}
#planos .pl-desc{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--muted)}

#planos .pl-preco{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
#planos .pl-de{margin:0;font-size:15px;line-height:1.3;color:var(--muted)}
#planos .pl-de s{position:relative;text-decoration:none;white-space:nowrap}
/* o risco do preço antigo: um traço roxo que se desenha da esquerda para a direita */
#planos .pl-de s:after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:1.5px;border-radius:2px;background:#B026FF;transform-origin:0 50%}
#planos .pl-por{margin:6px 0 0;display:flex;align-items:flex-start;gap:8px;color:var(--white);line-height:1}
#planos .pl-moeda{font:500 22px/1 var(--font);margin-top:.62em;opacity:.82}
#planos .pl-num{font:600 72px/1.1 var(--font);letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
#planos .pl-odo{display:inline-flex}
#planos .pl-dig{display:inline-block;height:1.1em;overflow:hidden}
#planos .pl-fita{display:block;will-change:transform}
#planos .pl-fita>span,#planos .pl-sep{display:block;height:1.1em;line-height:1.1em;text-align:center}
#planos .pl-sep{display:inline-block}
#planos .pl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#planos .pl-extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;font-size:14px;line-height:1.3}
#planos .pl-eco{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--white);font:600 13px/1.1 var(--font)}
#planos .pl-pro .pl-eco{background:rgba(57,255,20,.1);color:#39FF14}
#planos .pl-mes{color:var(--muted)}
#planos .pl-eco:empty,#planos .pl-mes:empty{display:none}

#planos .pl-lista{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:13px}
#planos .pl-lista li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.4;color:var(--text)}
#planos .pl-lista svg{flex:none;width:20px;height:20px;margin-top:1px}
#planos .pl-lista svg circle{fill:rgba(255,255,255,.07)}
#planos .pl-lista svg path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
#planos .pl-pro .pl-lista svg circle{fill:rgba(57,255,20,.12)}
#planos .pl-pro .pl-lista svg path{stroke:#39FF14}
#planos .pl-lista li.pl-tudo{color:var(--white);font-weight:600}

#planos .pl-btn{margin-top:auto;width:100%;min-height:52px;font-size:15px}
/* o clique que vale dinheiro: o Pro em verde sólido com letra preta (o mesmo destaque sólido já usado no site) */
#planos .btn.pl-btn-pro{background:#39FF14!important;border-color:#39FF14!important;color:#000!important;font-weight:600;
  box-shadow:0 14px 34px -16px rgba(57,255,20,.55),inset 0 1px 0 rgba(255,255,255,.35)!important}
#planos .btn.pl-btn-pro:before{background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.45),transparent 60%)!important}
#planos .btn.pl-btn-pro:hover{box-shadow:0 0 0 1px rgba(57,255,20,.6),0 18px 40px -16px rgba(57,255,20,.7),inset 0 1px 0 rgba(255,255,255,.35)!important}
#planos .btn.pl-btn-pro:focus-visible{outline:2px solid var(--white);outline-offset:3px}
/* brilho que atravessa o botão do Pro uma vez, depois que ele aparece */
#planos .pl-btn-pro:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
#planos .pl-btn-pro.pl-brilha:after{animation:plBrilho 1.1s var(--pl-vv) 1}
@keyframes plBrilho{to{transform:translateX(120%)}}

#planos .pl-nota{margin:30px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:72ch}

/* ===== entrada (só com o código ligado e sem "reduzir movimento"; cada cartão ganha .pl-anima e perde quando tudo assenta) ===== */
#planos .pl-entra.pl-anima{opacity:0;transform:translate3d(0,calc(var(--pl-y) + 64px),0) rotateX(16deg) scale(.97);transform-origin:50% 100%}
#planos .pl-entra.pl-anima.pl-vivo{opacity:1;transform:translate3d(0,var(--pl-y),0);
  transition:transform .95s var(--pl-mola-forte) var(--d),opacity .6s var(--pl-cub) var(--d)}
#planos .pl-anima .pl-chip{opacity:0;transform:scale(.6)}
#planos .pl-anima.pl-vivo .pl-chip{opacity:1;transform:none;transition:transform .6s var(--pl-mola) calc(var(--d) + 650ms),opacity .3s var(--pl-cub) calc(var(--d) + 650ms)}
#planos .pl-anima .pl-de s:after{transform:scaleX(0)}
#planos .pl-anima.pl-vivo .pl-de s:after{transform:scaleX(1);transition:transform .5s var(--pl-cub) calc(var(--d) + 750ms)}
#planos .pl-anima .pl-extra>*{opacity:0;transform:translateY(8px) scale(.9)}
#planos .pl-anima.pl-vivo .pl-extra>*{opacity:1;transform:none;transition:transform .6s var(--pl-mola) calc(var(--d) + 2250ms),opacity .3s var(--pl-cub) calc(var(--d) + 2250ms)}
#planos .pl-anima.pl-vivo .pl-extra>.pl-mes{transition-delay:calc(var(--d) + 2400ms)}
#planos .pl-anima .pl-lista li{opacity:0;transform:translateY(14px);filter:blur(8px)}
#planos .pl-anima.pl-vivo .pl-lista li{opacity:1;transform:none;filter:blur(0);
  transition:opacity .6s var(--pl-cub),transform .6s var(--pl-cub),filter .6s var(--pl-cub);transition-delay:calc(var(--d) + 520ms + var(--i,0) * 90ms)}
#planos .pl-anima .pl-lista svg path{stroke-dashoffset:14}
#planos .pl-anima.pl-vivo .pl-lista svg path{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--pl-cub) calc(var(--d) + 700ms + var(--i,0) * 90ms)}
#planos .pl-anima .pl-btn{opacity:0;scale:.6}
#planos .pl-anima.pl-vivo .pl-btn{opacity:1;scale:1;transition:scale .6s var(--pl-mola) calc(var(--d) + 1250ms),opacity .3s var(--pl-cub) calc(var(--d) + 1250ms)}

/* ===== celular e tablet em pé: os dois planos um embaixo do outro, o mesmo desenho ===== */
@media (max-width:899px){
  #planos .pl-grade{grid-template-columns:minmax(0,1fr);max-width:560px;gap:16px;margin-top:40px}
  #planos .pl-vagas{margin-top:22px;font-size:14px}
  #planos .pl-vagas+.pl-grade{margin-top:28px}
  #planos .pl-entra.pl-e-pro{--pl-y:0px;--d:0ms}
  #planos .pl-card{padding:28px 24px 24px}
  #planos .pl-num{font-size:60px}
  #planos .pl-nome{font-size:30px}
  #planos .pl-pro .pl-nome{font-size:38px}
}
@media (max-width:380px){
  #planos .pl-card{padding:24px 18px 20px}
  #planos .pl-num{font-size:50px}
  #planos .pl-moeda{font-size:19px}
  #planos .pl-lista li{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  #planos .pl-card{transition:none}
  #planos .pl-btn-pro.pl-brilha:after{animation:none}
}