/* =====================================================================
   IAlfabeto — camada visual CYBERPUNK / HUD
   Painel de nave: neon ciano + magenta, scanlines, molduras com cantos,
   glitch nos títulos, grid em perspectiva e núcleo 3D na home.
   ===================================================================== */
:root{
  --bg:#03050a; --bg-2:#060a12; --panel:rgba(9,15,26,.78); --panel-2:rgba(16,26,42,.9); --fg:#e4f6ff; --muted:#8aa0b4;
  --line:rgba(0,229,255,.14); --line-2:rgba(0,229,255,.30); --cyan:#00e5ff; --cyan-ink:#3cefff; --cyan-soft:rgba(0,229,255,.10);
  --mag:#ff2bd6; --mag-soft:rgba(255,43,214,.12); --amber:#ffb000; --on-cyan:#001318; --ok:#3dffa8; --warn:#ffb000; --hot:#ff2b6a;
  --r:3px; --glow:0 0 18px rgba(0,229,255,.45); --glow-m:0 0 18px rgba(255,43,214,.45);
}

/* ---------- Fundo vivo: brilhos, grade e scanlines ---------- */
body{background:
  radial-gradient(60vw 50vh at 8% -10%,rgba(0,229,255,.13),transparent 60%),
  radial-gradient(55vw 55vh at 105% 30%,rgba(255,43,214,.09),transparent 60%),
  radial-gradient(50vw 40vh at 50% 120%,rgba(0,120,255,.12),transparent 60%),
  var(--bg);
  background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 75%)}
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(0,229,255,.07),transparent 60%);transform:translate(var(--cx,-999px),var(--cy,-999px));transition:transform .12s linear}
@media (hover:none){.cursor-glow{display:none}}
main{position:relative;z-index:1}
::selection{background:var(--mag);color:#fff}

/* ---------- Tipografia ---------- */
h1,h2,h3{letter-spacing:-.01em}
.page-head h1,.hero-hud h1,.article h1{text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 22px rgba(0,229,255,.25)}
.cmd{font:600 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.cmd::before{content:"▸ ";color:var(--mag)}
.kicker{color:var(--mag)}
.muted,.lede{color:var(--muted)}

/* Glitch: título com divisão RGB de tempos em tempos */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);white-space:pre-line;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;opacity:0}
.glitch::before{color:var(--mag);transform:translate(-2px,0);text-shadow:none}
.glitch::after{color:var(--cyan);transform:translate(2px,0);text-shadow:none}
.glitch.on::before{opacity:.85;animation:g1 .45s steps(2) 1}
.glitch.on::after{opacity:.85;animation:g2 .45s steps(2) 1}
@keyframes g1{0%{clip-path:inset(10% 0 70% 0)}25%{clip-path:inset(60% 0 10% 0);transform:translate(-4px,1px)}50%{clip-path:inset(30% 0 45% 0)}75%{clip-path:inset(80% 0 2% 0);transform:translate(3px,-1px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%{clip-path:inset(70% 0 5% 0)}25%{clip-path:inset(5% 0 75% 0);transform:translate(4px,-1px)}50%{clip-path:inset(45% 0 30% 0)}75%{clip-path:inset(15% 0 60% 0);transform:translate(-3px,1px)}100%{clip-path:inset(100% 0 0 0)}}

/* ---------- Topo / barra de status ---------- */
.top{background:linear-gradient(180deg,rgba(3,5,10,.92),rgba(3,5,10,.78));border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--cyan) 20%,var(--mag) 80%,transparent) 1}
.logo svg{filter:drop-shadow(0 0 6px rgba(0,229,255,.55))}
.logo .wm{text-shadow:0 0 12px rgba(0,229,255,.35)}
.nav a{text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;border-radius:2px}
.nav a:hover{background:var(--cyan-soft);color:var(--cyan)}
.nav a[aria-current="page"]{color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.6)}
.nav a[aria-current="page"]::after{box-shadow:var(--glow)}
.statusbar{border-bottom:1px solid var(--line);background:rgba(0,229,255,.03);font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.statusbar .wrap{display:flex;gap:1.4rem;align-items:center;height:26px;overflow:hidden;white-space:nowrap}
.statusbar b{color:var(--cyan);font-weight:600}
.statusbar .ok{color:var(--ok)}
.statusbar .dot{display:inline-block;width:6px;height:6px;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:.45em;animation:pulse 1.4s infinite}
@media (max-width:700px){.statusbar .hide-m{display:none}}

.ticker{background:linear-gradient(90deg,rgba(255,43,214,.08),rgba(0,229,255,.04));border-bottom:1px solid var(--line)}
.live{color:var(--mag);text-shadow:var(--glow-m)}
.live i{background:var(--mag);box-shadow:0 0 10px var(--mag)}
.tk-in a::before{color:var(--mag)}

/* ---------- Botões e chips: cantos cortados + brilho ---------- */
.btn{position:relative;overflow:hidden;border-radius:0;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  background:linear-gradient(90deg,var(--cyan),#38b6ff);box-shadow:0 0 22px rgba(0,229,255,.35)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{box-shadow:0 0 34px rgba(0,229,255,.6)}
.btn-ghost{background:rgba(0,229,255,.04);color:var(--cyan);border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:inset 0 0 16px rgba(0,229,255,.18)}
.chip{border-radius:2px;background:rgba(0,229,255,.03);border-color:var(--line);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
.chip:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:inset 0 0 10px rgba(0,229,255,.15)}
.chip[aria-pressed="true"],.chip.on{background:var(--cyan);color:var(--on-cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(0,229,255,.5)}
.chip.tg[aria-pressed="true"]{background:var(--mag);border-color:var(--mag);color:#fff;box-shadow:0 0 14px rgba(255,43,214,.55)}
.chip-tag{border-radius:1px;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;border:1px solid rgba(0,229,255,.35);background:rgba(0,229,255,.07)}
.chip-tag.hot{border-color:rgba(255,43,106,.5);background:rgba(255,43,106,.1)}
.chip-tag.ok{border-color:rgba(61,255,168,.45);background:rgba(61,255,168,.08)}
.search,.ask,.form input[type=email],.chat-form textarea,.side textarea{border-radius:2px;background:rgba(3,8,16,.8);border-color:var(--line-2)}
.search:focus,.ask:focus-within{box-shadow:0 0 0 1px var(--cyan),0 0 24px rgba(0,229,255,.25)}

/* ---------- Cartões HUD: vidro, cantos em colchete e brilho ---------- */
.card{border-radius:var(--r);border-color:var(--line);
  background:linear-gradient(160deg,rgba(14,24,40,.82),rgba(5,9,17,.88));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.75;transition:opacity .3s ease,filter .3s ease;
  background:
    linear-gradient(var(--cyan),var(--cyan)) top left/16px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) top left/2px 16px no-repeat,
    linear-gradient(var(--mag),var(--mag)) bottom right/16px 2px no-repeat,
    linear-gradient(var(--mag),var(--mag)) bottom right/2px 16px no-repeat}
.card::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,229,255,.14),transparent 45%)}
.card:hover{border-color:rgba(0,229,255,.45);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(0,229,255,.15),0 0 34px -8px rgba(0,229,255,.45),0 30px 60px -40px #000}
.card:hover::before{opacity:1;filter:drop-shadow(0 0 4px var(--cyan))}
.box{border-radius:var(--r);background:linear-gradient(160deg,rgba(14,24,40,.75),rgba(5,9,17,.85));border-color:var(--line);position:relative}
.box h3::before{color:var(--mag)}
.src-box{border-radius:var(--r);border-color:rgba(255,43,214,.35);background:linear-gradient(120deg,rgba(255,43,214,.08),rgba(0,229,255,.05))}
.tool-logo{border-radius:6px;box-shadow:0 0 0 1px rgba(0,229,255,.3),0 0 14px rgba(0,229,255,.18)}
.lermais{text-transform:uppercase;letter-spacing:.08em;font-size:.66rem}
.diff i.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}

/* imagens com scanline e tom ciano */
.thumb{background:#02040a}
.thumb::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(0,229,255,.06),rgba(255,43,214,.06))}
.card:hover .thumb img{filter:saturate(1.15) contrast(1.05) hue-rotate(-6deg)}
.cover{background:radial-gradient(120% 90% at var(--cx,80%) var(--cy,10%),color-mix(in srgb,var(--hue,#00e5ff) 35%,transparent),transparent 60%),linear-gradient(135deg,#071020,#02040a)}
.cover b{text-transform:uppercase;text-shadow:0 0 18px color-mix(in srgb,var(--hue,#00e5ff) 70%,transparent)}

/* ---------- Seções numeradas ---------- */
main{counter-reset:sec}
.sec-head h2{counter-increment:sec;position:relative;text-transform:uppercase;letter-spacing:.02em}

.sec + .sec{border-top:0}
.sec{position:relative}
.sec::before{content:"";position:absolute;left:50%;top:0;width:min(var(--maxw),92%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.35),rgba(255,43,214,.35),transparent)}
.page-head{border-bottom:0;background:linear-gradient(180deg,rgba(0,229,255,.05),transparent)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--mag),transparent);opacity:.6}
.page-head .glow{background:radial-gradient(circle,rgba(255,43,214,.16),transparent 65%)}
.letter{color:var(--mag);text-shadow:var(--glow-m)}
.prose h3{color:var(--cyan);text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem}
.prose > p:first-of-type::first-letter{color:var(--mag);text-shadow:var(--glow-m)}
.entenda{border-top-color:var(--mag)}
.byline{border-color:var(--line)}

/* ---------- HERO HUD (home) ---------- */
.hero-hud{position:relative;overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-hud #core{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-hud .floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.35) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(420px) rotateX(68deg);transform-origin:50% 0;animation:floor 4s linear infinite;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
@keyframes floor{to{background-position:0 60px}}
.hero-hud::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 70% at 70% 45%,transparent 30%,var(--bg) 92%)}
.hero-hud .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s6);align-items:center;padding-block:var(--s7)}
.hero-hud h1{font-size:clamp(2.2rem,6.2vw,4.8rem);line-height:.98;margin:.4rem 0 1.2rem}
.hero-hud h1 em{font-style:normal;color:var(--cyan);text-shadow:0 0 26px rgba(0,229,255,.6)}
.hero-hud .lede{font-size:1.12rem;max-width:44ch;margin:0 0 1.6rem}
.hero-hud .ask{max-width:36rem}
.hud-panel{min-width:0;position:relative;border:1px solid var(--line-2);background:rgba(3,8,16,.42);backdrop-filter:blur(2px);padding:1.1rem 1.2rem;font:500 .74rem/1.9 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hud-panel::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(var(--cyan),var(--cyan)) top left/22px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) top left/2px 22px no-repeat,
  linear-gradient(var(--cyan),var(--cyan)) top right/22px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) top right/2px 22px no-repeat,
  linear-gradient(var(--mag),var(--mag)) bottom left/22px 2px no-repeat,linear-gradient(var(--mag),var(--mag)) bottom left/2px 22px no-repeat,
  linear-gradient(var(--mag),var(--mag)) bottom right/22px 2px no-repeat,linear-gradient(var(--mag),var(--mag)) bottom right/2px 22px no-repeat}
.hud-panel .ttl{color:var(--cyan);font-weight:700;letter-spacing:.18em;display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-2);padding-bottom:.5rem;margin-bottom:.6rem}
.hud-panel .row{display:flex;justify-content:space-between;gap:1rem}
.hud-panel .row b{color:var(--fg);font-size:1.05rem;letter-spacing:.02em;text-shadow:0 0 10px rgba(0,229,255,.4)}
.hud-panel .bar{height:4px;background:rgba(0,229,255,.12);margin:.2rem 0 .6rem;position:relative;overflow:hidden}
.hud-panel .bar i{position:absolute;inset:0;width:var(--w,60%);background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:var(--glow);animation:barin 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes barin{from{width:0}}
.hud-panel .log{margin-top:.6rem;border-top:1px dashed var(--line-2);padding-top:.5rem;height:5.7em;overflow:hidden;text-transform:none;letter-spacing:.02em;color:var(--ok)}
.hud-panel .log p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rings{position:absolute;right:6%;top:50%;width:min(38vw,460px);aspect-ratio:1;transform:translateY(-50%);z-index:1;pointer-events:none;opacity:.55}
.rings circle{fill:none;stroke:var(--cyan);stroke-width:.6}
.rings .r1{stroke-dasharray:4 6;animation:spin 30s linear infinite;transform-origin:50% 50%}
.rings .r2{stroke:var(--mag);stroke-dasharray:60 20 4 20;animation:spin 18s linear infinite reverse;transform-origin:50% 50%}
.rings .r3{stroke-dasharray:1 3;animation:spin 50s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){ .hero-hud .wrap{grid-template-columns:minmax(0,1fr)} .rings{width:80vw;right:-20vw;opacity:.3} .hero-hud{min-height:auto} }

/* ---------- Boot rápido (1x por sessão) ---------- */
.boot{position:fixed;inset:0;z-index:300;background:#02040a;display:grid;place-items:center;font:500 .8rem/1.9 var(--f-mono);color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;transition:opacity .45s ease,visibility .45s}
.boot.done{opacity:0;visibility:hidden}
.boot .in{width:min(420px,84vw)}
.boot .bar{height:3px;background:rgba(0,229,255,.15);margin-top:.8rem;overflow:hidden}
.boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:var(--glow);animation:bootbar .9s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes bootbar{to{width:100%}}
.boot p{margin:0;opacity:0;animation:bootln .2s ease forwards}
.boot p:nth-child(2){animation-delay:.15s}.boot p:nth-child(3){animation-delay:.35s}.boot p:nth-child(4){animation-delay:.55s;color:var(--ok)}
@keyframes bootln{to{opacity:1}}

/* ---------- Transição entre páginas com "glitch" ---------- */
::view-transition-new(root){animation:vtGlitch .42s steps(6) both}
@keyframes vtGlitch{0%{opacity:0;clip-path:inset(0 0 100% 0);filter:hue-rotate(60deg) brightness(1.6)}40%{opacity:1;clip-path:inset(0 0 40% 0)}70%{clip-path:inset(0 0 8% 0);filter:none}100%{clip-path:inset(0);opacity:1}}
.prog{background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:0 0 14px var(--mag)}

/* ---------- Outros blocos ---------- */
.fbar{background:rgba(3,5,10,.9);border-bottom-color:var(--line-2)}
.fab{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:linear-gradient(90deg,var(--cyan),var(--mag));color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;text-shadow:0 0 6px rgba(0,0,0,.4)}
.foot{background:linear-gradient(180deg,transparent,rgba(0,229,255,.04));border-top:1px solid var(--line)}
.starter{border-radius:var(--r);border-color:var(--line-2);background:linear-gradient(120deg,rgba(255,43,214,.10),rgba(0,229,255,.06))}
.swap span{border-radius:1px}
.swap-row .paid s{color:var(--hot)}
.msg{border-radius:2px}
.msg.me{background:linear-gradient(90deg,var(--cyan),#38b6ff)}
.chat-win{border-radius:var(--r);box-shadow:0 0 40px -10px rgba(0,229,255,.3)}
.drawer{background:rgba(3,5,10,.97)}
.drawer a{text-transform:uppercase}
.drawer a:hover{color:var(--cyan);text-shadow:var(--glow)}
.term-day h3{color:var(--cyan);text-shadow:var(--glow)}
.tl-img{border-radius:var(--r)}
.tl time{color:var(--mag);letter-spacing:.12em}
.step::before{border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);box-shadow:var(--glow)}
@media (prefers-reduced-motion:reduce){ .hero-hud .floor,.rings *{animation:none} .glitch::before,.glitch::after{display:none} body::after{display:none} }

.fbar .row1 .search{min-width:0}
.fbar .count{flex:none}
@media (max-width:520px){.fbar .count{font-size:.7rem}}
.hero-hud .wrap > div{min-width:0}