/* =============================================================
   BELKO DEV — wendersonbelko.com
   Synthwave / Outrun 1984 Design System
   ============================================================= */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* Paleta */
  --bg:            #03030D;
  --bg-2:          #07061A;
  --magenta:       #FF007F;
  --violet:        #6A0D91;
  --violet-lite:   #C084FC;   /* clareado: #A855F7 não passava em texto pequeno */
  --cyan:          #00F3FF;
  --sunset:        #FF9E00;
  --white:         #FFFFFF;
  --grey:          #E8EEF7;   /* corpo de texto */
  --grey-dim:      #AFBED2;   /* legendas — clareado para leitura confortável */

  /* Superfícies — mais opacas que a v1: o texto precisa de base sólida */
  --glass:         rgba(12,10,28,.62);
  --glass-2:       rgba(16,13,36,.75);
  --line:          rgba(255,255,255,.13);
  --line-neon:     rgba(0,243,255,.30);

  /* Glow */
  --glow-magenta:  0 0 6px rgba(255,0,127,.85), 0 0 22px rgba(255,0,127,.45);
  --glow-cyan:     0 0 6px rgba(0,243,255,.85), 0 0 22px rgba(0,243,255,.40);
  --glow-sunset:   0 0 6px rgba(255,158,0,.85), 0 0 22px rgba(255,158,0,.40);

  /* Sombra escura que "descola" texto claro de fundo neon */
  --lift:          0 1px 3px rgba(3,3,13,.95), 0 2px 18px rgba(3,3,13,.8);

  /* Tipografia */
  --f-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Layout */
  --shell:   1200px;
  --pad:     clamp(20px, 5vw, 48px);
  --nav-h:   72px;
  --r:       4px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET -------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--grey);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.68;
  font-weight:500;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-booting{ overflow:hidden; }
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:900; line-height:1.05; color:var(--white); letter-spacing:.02em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--cyan); text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong,b{ color:var(--white); font-weight:700; }
code{ font-family:var(--f-mono); color:var(--cyan); background:rgba(0,243,255,.10); padding:.05em .35em; border-radius:3px; font-size:.92em; }

::selection{ background:var(--magenta); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#05040F; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--magenta),var(--violet));
  border-radius:8px; border:2px solid #05040F;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--cyan),var(--magenta)); }

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

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--magenta); color:#fff; padding:10px 18px;
  font-family:var(--f-mono); border-radius:var(--r); transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* ---------- 3. LAYOUT ------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

.section{ position:relative; z-index:2; padding-block:clamp(76px,10vw,140px); }
.section--contact{ padding-bottom:clamp(56px,7vw,100px); }

/* Cabeçalho de seção em régua horizontal: índice e título à esquerda,
   subtítulo à direita, hairline atravessando. Sete títulos gigantes
   empilhados brigavam entre si e com o H1 — aqui eles marcam o começo
   da seção sem disputar atenção. */
.sec-head{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:8px 28px;
  margin-bottom:clamp(30px,3.6vw,48px);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.sec-head__idx{
  grid-column:1; grid-row:1;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.32em;
  color:var(--magenta);
}
.sec-head__idx::before{ content:'// '; color:var(--violet-lite); }
.sec-head__title{
  grid-column:1; grid-row:2;
  font-size:clamp(1.55rem,3.6vw,2.5rem);
  letter-spacing:.01em;
  background:linear-gradient(96deg,var(--white) 12%,var(--magenta) 92%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  margin:2px 0 0;
}
.sec-head__sub{
  grid-column:2; grid-row:2; align-self:end;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em;
  color:var(--grey-dim); text-transform:uppercase; margin:0 0 4px;
  text-align:right; max-width:38ch;
}

/* ---------- 4. BOOT PRELOADER ----------------------------- */
.boot{
  position:fixed; inset:0; z-index:10000;
  background:radial-gradient(120% 90% at 50% 110%, rgba(106,13,145,.35), transparent 60%), var(--bg);
  display:grid; place-items:center; padding:24px;
  font-family:var(--f-mono);
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,243,255,.045) 0 1px,transparent 1px 3px);
  animation:crt 12s linear infinite;
}
@keyframes crt{ to{ background-position:0 300px; } }

.boot__frame{ width:min(680px,100%); }
.boot__logo{
  margin:0 0 22px;
  font-size:clamp(.4rem,1.65vw,.78rem); line-height:1.1;
  color:var(--magenta); text-shadow:var(--glow-magenta);
  white-space:pre; overflow:hidden;
}
.boot__log{ min-height:190px; font-size:clamp(.78rem,2.4vw,.95rem); }
.boot__line{ color:var(--cyan); opacity:0; animation:bootIn .2s forwards; }
.boot__line b{ color:var(--white); font-weight:400; }
.boot__line .ok{ color:#4BFF9A; text-shadow:0 0 8px rgba(75,255,154,.7); }
@keyframes bootIn{ from{ opacity:0; transform:translateX(-6px);} to{ opacity:1; transform:none; } }

.boot__bar{
  height:12px; margin-top:18px;
  border:1px solid var(--line-neon); background:rgba(0,243,255,.05);
  position:relative; overflow:hidden;
}
.boot__bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--violet),var(--magenta),var(--sunset));
  box-shadow:0 0 14px rgba(255,0,127,.8);
  transition:width .25s linear;
}
.boot__meta{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:10px; font-size:.72rem; letter-spacing:.12em; color:var(--grey-dim);
}
.boot__skip{
  display:block; margin:26px auto 0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--grey-dim); border:1px solid var(--line);
  padding:8px 16px; transition:.25s;
}
.boot__skip:hover{ color:var(--cyan); border-color:var(--line-neon); box-shadow:var(--glow-cyan); }

/* ---------- 5. CAMADAS DE CENÁRIO ------------------------- */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.fx__layer{ position:absolute; inset:0; width:100%; height:100%; }
#fx-sky{ z-index:1; }  #fx-stars{ z-index:2; }  #fx-sun{ z-index:3; }
#fx-scene{ z-index:4; } #fx-grid{ z-index:5; }

.fx__scanlines{
  position:absolute; inset:0; z-index:6;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.45;
}
.fx__vignette{
  position:absolute; inset:0; z-index:7;
  background:radial-gradient(120% 80% at 50% 42%,transparent 40%,rgba(3,3,13,.82) 100%);
}
/* Escurece o cenário fora do hero. A opacidade é escrita pelo main.js
   conforme o scroll — é a peça que torna as seções legíveis. */
.fx__scrim{
  position:absolute; inset:0; z-index:8;
  background:var(--bg); opacity:0; will-change:opacity;
}

/* ---------- 6. NAV ---------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-inline:var(--pad);
  transition:background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(3,3,13,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,0,127,.28);
}
.nav__brand{ display:flex; align-items:center; gap:10px; color:var(--white); }
.nav__brand-mark{
  display:grid; place-items:center; width:34px; height:34px;
  font-family:var(--f-display); font-weight:900; font-size:1rem;
  color:var(--bg); background:linear-gradient(135deg,var(--cyan),var(--magenta));
  box-shadow:0 0 16px rgba(255,0,127,.55);
  clip-path:polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%);
}
.nav__brand-text{ font-family:var(--f-display); font-weight:700; font-size:.84rem; letter-spacing:.16em; }
.nav__brand-text b{ color:var(--magenta); text-shadow:var(--glow-magenta); }

.nav__links{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); }
.nav__links a{
  position:relative;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em;
  color:var(--grey); transition:color .25s, text-shadow .25s;
  text-shadow:var(--lift);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:var(--cyan); box-shadow:var(--glow-cyan);
  transition:right .3s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--cyan); text-shadow:var(--glow-cyan); }
.nav__links a:hover::after,.nav__links a.is-active::after{ right:0; }

.nav__links .nav__cta{
  padding:8px 16px; color:var(--white);
  border:1px solid var(--magenta);
  background:rgba(255,0,127,.14);
  clip-path:polygon(10% 0,100% 0,100% 70%,90% 100%,0 100%,0 30%);
}
.nav__links .nav__cta::after{ display:none; }
.nav__links .nav__cta:hover{
  background:var(--magenta); color:#fff; text-shadow:none;
  box-shadow:0 0 28px rgba(255,0,127,.7);
}

.nav__toggle{ display:none; width:40px; height:40px; position:relative; }
.nav__toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--cyan);
  box-shadow:var(--glow-cyan); transition:.3s var(--ease);
}
.nav__toggle span:nth-child(1){ top:13px; }
.nav__toggle span:nth-child(2){ top:19px; }
.nav__toggle span:nth-child(3){ top:25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ top:19px; transform:rotate(-45deg); }

/* ---------- 7. BOTÕES ------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 26px;
  font-family:var(--f-display); font-weight:700; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--white);
  border:1px solid currentColor;
  background:rgba(3,3,13,.55);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:color .3s, background .3s, box-shadow .3s, transform .25s var(--ease);
  overflow:hidden; isolation:isolate;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:currentColor; opacity:.12; transition:opacity .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::before{ opacity:.24; }
.btn:active{ transform:translateY(0); }
.btn span{ position:relative; z-index:1; }
.btn svg{ position:relative; z-index:1; flex:none; }

.btn--cyan{ color:var(--cyan); }
.btn--cyan:hover{ color:#fff; box-shadow:0 0 30px rgba(0,243,255,.6); }
.btn--ghost{ color:var(--grey-dim); }
.btn--ghost:hover{ color:var(--white); box-shadow:0 0 20px rgba(226,232,240,.25); }

.btn--whats{ color:#2BE372; }
.btn--whats:hover{ color:#fff; box-shadow:0 0 32px rgba(43,227,114,.6); }

.btn--outline-cyan{ color:var(--cyan); }
.btn--outline-cyan:hover{ color:#fff; box-shadow:0 0 28px rgba(0,243,255,.55); }

.ccard__actions .btn{ width:100%; }

/* ---------- 8. HERO --------------------------------------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--nav-h) + 40px) 110px;
}
/* Base escura sob o conteúdo: no hero o scrim está em 0, então é aqui que
   o texto ganha contraste. Gradiente lateral — sólido na coluna da esquerda
   (onde fica o texto), transparente na direita (onde o sol foi deslocado). */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,3,13,.96) 0%,
    rgba(3,3,13,.94) 52%,
    rgba(3,3,13,.72) 68%,
    rgba(3,3,13,.22) 86%,
    transparent 100%);
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:clamp(.6rem,1.8vw,.74rem);
  letter-spacing:.18em; color:var(--cyan);
  border:1px solid var(--line-neon); padding:7px 14px;
  background:rgba(0,20,26,.7);
  margin:0 0 clamp(16px,2.6vw,26px);
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:#4BFF9A;
  box-shadow:0 0 10px #4BFF9A; animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.3; transform:scale(.72); } }

/* O font-size pequeno mora no H1 e o grande é o override do -big.
   Nessa ordem, se a regra do -tag falhar por qualquer motivo ele herda
   o tamanho pequeno do pai. Ao contrário, herdaria o display gigante e
   estouraria a viewport — foi exatamente o que aconteceu antes. */
.hero__name{
  margin-bottom:clamp(14px,2vw,22px);
  font-size:clamp(.8rem,1.6vw,1.05rem);
  font-weight:500;
}
.hero__name-big{
  display:block;
  font-size:clamp(3.6rem,13vw,10.5rem);
  font-weight:900;
  line-height:.86; letter-spacing:-.015em;
  background:linear-gradient(96deg,var(--sunset) 0%,var(--magenta) 42%,var(--violet-lite) 72%,var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  /* Halo escuro colado no glifo: o nome é o único texto que cruza o sol,
     e sem isso as letras somem no gradiente quente do disco. */
  filter:drop-shadow(0 0 18px rgba(3,3,13,.98))
         drop-shadow(0 3px 8px rgba(3,3,13,.95))
         drop-shadow(0 0 40px rgba(255,0,127,.4));
}
/* Linha visível dentro do H1: "BELKO" sozinho não diz ao buscador o que
   a empresa faz. Texto real, não truque de SEO escondido. */
.hero__name-tag{
  display:block; margin-top:clamp(10px,1.4vw,16px);
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(.82rem,1.65vw,1.12rem);
  line-height:1.35;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--white); text-shadow:var(--lift);
  max-width:22ch;                 /* quebra onde eu escolho, não onde sobra */
  overflow-wrap:break-word;
}

.hero__role{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(.82rem,2.4vw,1.35rem);
  letter-spacing:.08em; color:var(--white);
  text-shadow:var(--lift);
  margin-bottom:clamp(12px,1.8vw,20px);
}
.hero__role span{ color:var(--magenta); margin-inline:6px; }

.hero__typing{
  font-family:var(--f-mono);
  font-size:clamp(.85rem,2.5vw,1.2rem);
  color:var(--cyan); text-shadow:0 0 14px rgba(0,243,255,.55), var(--lift);
  min-height:1.7em; margin-bottom:clamp(26px,3.6vw,40px);
}
.hero__typing-prefix{ color:var(--magenta); margin-right:8px; }
.caret{
  display:inline-block; width:.55em; height:1.05em;
  background:var(--magenta); box-shadow:var(--glow-magenta);
  vertical-align:text-bottom; margin-left:4px;
  animation:blink 1.4s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(30px,4.4vw,50px); }

.hero__ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:12px; overflow:hidden;
  background:rgba(3,3,13,.5);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero__ticker-track{
  display:flex; gap:26px; align-items:center; width:max-content;
  padding-right:26px; /* compensa o gap faltante na emenda do loop */
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.26em;
  color:var(--grey-dim); white-space:nowrap;
  animation:slide 52s linear infinite;
}
/* A lista é duplicada no HTML: deslocar 50% recomeça no ponto exato. */
@keyframes slide{ to{ transform:translateX(-50%); } }
.hero__ticker:hover .hero__ticker-track{ animation-play-state:paused; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:24px; height:40px; border:1px solid var(--line-neon); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
  background:rgba(3,3,13,.5);
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--cyan);
  box-shadow:var(--glow-cyan); animation:wheel 2.4s var(--ease) infinite;
}
@keyframes wheel{ 60%,100%{ transform:translateY(15px); opacity:0; } }

/* ---------- 9. SOBRE / HUD -------------------------------- */
.about{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(26px,3.6vw,52px); align-items:start; }
.about__body .lead{
  font-size:clamp(1.05rem,2.1vw,1.28rem); color:var(--white);
  border-left:2px solid var(--magenta); padding-left:18px;
}
.about__body p{ color:var(--grey); text-shadow:var(--lift); }
.about__pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.about__pills li{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  padding:6px 13px; color:var(--violet-lite);
  border:1px solid rgba(192,132,252,.4); background:rgba(60,10,90,.42);
}

.hud{
  position:relative;
  border:1px solid var(--line-neon);
  background:linear-gradient(160deg,rgba(3,26,34,.86),rgba(4,4,16,.9));
  box-shadow:inset 0 0 40px rgba(0,243,255,.05);
  padding:20px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.hud__head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--cyan); border-bottom:1px solid var(--line-neon);
  padding-bottom:10px; margin-bottom:18px;
}
.hud__blink{ color:var(--magenta); animation:blink 2.4s steps(1) infinite; }

.hud__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.hud__cell{ border:1px solid var(--line); background:rgba(255,255,255,.05); padding:14px 10px; text-align:center; }
.hud__val{
  display:block; font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.4rem,3.2vw,2rem);
  background:linear-gradient(180deg,#FFD27A,var(--magenta));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  line-height:1.1;
}
.hud__label{
  display:block; font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.08em; color:var(--grey-dim); text-transform:uppercase; margin-top:6px;
}

.hud__bars{ display:grid; gap:12px; }
.hud__bar span{
  display:block; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; color:var(--grey); margin-bottom:5px;
}
.hud__bar i{ display:block; height:6px; width:100%; background:rgba(255,255,255,.09); position:relative; overflow:hidden; }
.hud__bar i::after{
  content:''; position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--violet),var(--magenta),var(--cyan));
  transition:width 1.8s var(--ease);
}
.hud.is-in .hud__bar i::after{ width:var(--v); }

.hud__foot{
  margin:20px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--grey-dim);
}
.hud__foot b{ color:#4BFF9A; }

/* ---------- 9b. IA NO DIA A DIA --------------------------- */
.ai{ display:grid; gap:clamp(20px,2.6vw,30px); }

.ai__intro{ max-width:74ch; }
.ai__intro .lead{
  font-size:clamp(1.05rem,2.1vw,1.28rem); color:var(--white);
  border-left:2px solid var(--violet-lite); padding-left:18px;
}
.ai__intro p{ color:var(--grey); text-shadow:var(--lift); }

.ai__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.ai__chips li{
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.06em;
  padding:7px 14px; color:var(--cyan);
  border:1px solid rgba(0,243,255,.38); background:rgba(0,30,38,.6);
}
.ai__chips li:last-child{
  color:var(--grey-dim); border-color:var(--line);
  border-style:dashed; background:rgba(255,255,255,.04);
}

.ai__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,24px); }

/* Régua superior no lugar da caixa fechada. */
.ai__panel{
  position:relative; padding:20px 0 0;
  border-top:2px solid var(--acc);
}
.ai__panel[data-accent="cyan"]   { --acc:var(--cyan);    --acc-rgb:0,243,255; }
.ai__panel[data-accent="magenta"]{ --acc:var(--magenta); --acc-rgb:255,0,127; }

.ai__panel-head{ display:flex; align-items:center; gap:12px; }
.ai__panel-idx{
  flex:none; display:grid; place-items:center; width:30px; height:30px;
  font-family:var(--f-display); font-weight:900; font-size:.85rem;
  color:var(--bg); background:var(--acc);
  clip-path:polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%);
}
.ai__panel h3{ font-size:clamp(1.02rem,2.1vw,1.2rem); }
.ai__panel-sub{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  color:var(--acc); margin:10px 0 16px; padding-bottom:14px;
  border-bottom:1px solid rgba(var(--acc-rgb),.3);
}

.ai__list{ display:grid; gap:11px; }
.ai__list li{
  position:relative; padding-left:20px;
  font-size:.95rem; color:var(--grey); line-height:1.55;
}
.ai__list li::before{
  content:'▸'; position:absolute; left:0; top:0; color:var(--acc);
}
.ai__list b{ font-family:var(--f-display); font-size:.84em; letter-spacing:.03em; }

.ai__note{
  position:relative; margin:0;
  padding:4px 0 4px 22px;
  border-left:2px solid rgba(192,132,252,.55);
  color:var(--grey); font-size:.97rem; line-height:1.75;
  max-width:82ch;
}
.ai__note-tag{
  display:inline-block; margin-right:10px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em;
  color:var(--violet-lite); border:1px solid currentColor;
  padding:3px 10px; vertical-align:1px;
}

/* ---------- 10. TERMINAL ---------------------------------- */
.term{
  border:1px solid rgba(0,243,255,.32);
  background:linear-gradient(180deg,rgba(0,17,22,.94),rgba(3,3,13,.96));
  box-shadow:0 0 46px rgba(0,243,255,.10);
  overflow:hidden;
}
.term__bar{
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; border-bottom:1px solid rgba(0,243,255,.22);
  background:rgba(0,243,255,.06);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--grey-dim);
}
.term__dots{ display:flex; gap:6px; flex:none; }
.term__dots i{ width:10px; height:10px; border-radius:50%; }
.term__dots i:nth-child(1){ background:var(--magenta); }
.term__dots i:nth-child(2){ background:var(--sunset); }
.term__dots i:nth-child(3){ background:#4BFF9A; }
.term__title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.term__badge{ flex:none; color:var(--cyan); border:1px solid var(--line-neon); padding:2px 8px; }

.term__screen{
  height:clamp(300px,48vh,430px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:18px;
  font-family:var(--f-mono);
  font-size:clamp(.79rem,1.9vw,.93rem);
  line-height:1.75;
  color:#A6FFD8;
  scrollbar-width:thin;
}
.term__screen::-webkit-scrollbar-thumb{ background:rgba(0,243,255,.35); border-color:transparent; }

.term__line{ white-space:pre-wrap; word-break:break-word; }
.term__line--cmd{ color:var(--white); }
.term__line--cmd .p{ color:var(--magenta); }
.term__line--err{ color:#FF7A92; }
.term__line--head{ color:var(--cyan); text-shadow:0 0 10px rgba(0,243,255,.5); }
.term__line--dim{ color:var(--grey-dim); }
.term__line b{ color:#FFB84D; font-weight:400; }
.term__line a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.term__line--art{ color:var(--magenta); line-height:1.15; }

.term__input{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-top:1px solid rgba(0,243,255,.22);
  background:rgba(0,243,255,.04);
}
.term__prompt{
  font-family:var(--f-mono); font-size:clamp(.72rem,1.9vw,.88rem);
  color:var(--magenta); flex:none;
}
.term__input input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font-family:var(--f-mono); font-size:clamp(.79rem,1.9vw,.93rem);
  color:var(--white); caret-color:var(--cyan);
}
.term__input input::placeholder{ color:rgba(175,190,210,.6); }
.term__send{ flex:none; width:34px; height:30px; color:var(--cyan); border:1px solid var(--line-neon); transition:.25s; }
.term__send:hover{ background:rgba(0,243,255,.14); }

.term__shortcuts{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 14px; border-top:1px solid var(--line);
  background:rgba(3,3,13,.7);
}
.term__shortcuts button{
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.06em;
  color:var(--grey); padding:5px 12px; border:1px solid var(--line); transition:.25s;
}
.term__shortcuts button:hover{ color:var(--bg); background:var(--cyan); border-color:var(--cyan); }

/* ---------- 11. TIMELINE ---------------------------------- */
.tl{ position:relative; display:grid; padding-left:38px; }
.tl::before{
  content:''; position:absolute; left:9px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg,var(--magenta),var(--violet) 45%,var(--cyan));
  opacity:.5;
}
.tl__item{ position:relative; }
.tl__item + .tl__item{ border-top:1px solid var(--line); padding-top:22px; }
.tl__item[data-accent="magenta"]{ --acc:var(--magenta); --acc-rgb:255,0,127; }
.tl__item[data-accent="cyan"]   { --acc:var(--cyan);    --acc-rgb:0,243,255; }
.tl__item[data-accent="violet"] { --acc:var(--violet-lite); --acc-rgb:192,132,252; }
.tl__item[data-accent="sunset"] { --acc:var(--sunset);  --acc-rgb:255,158,0; }

.tl__dot{
  position:absolute; left:-38px; top:8px;
  width:19px; height:19px; border-radius:50%;
  border:2px solid var(--acc); background:var(--bg);
  box-shadow:0 0 14px rgba(var(--acc-rgb),.7);
}
.tl__item + .tl__item .tl__dot{ top:30px; }
.tl__dot::after{
  content:''; position:absolute; inset:4px; border-radius:50%; background:var(--acc);
}

/* Sem borda e sem fundo: o trilho vertical com o marcador já delimita
   cada item. Um card fechado em volta era a terceira moldura seguida
   na mesma tela. O hover ganha um leve wash lateral no lugar disso. */
.tl__card{
  position:relative; overflow:hidden;
  padding:4px 20px 26px 0;
  transition:background .4s;
}
.tl__glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),.09),transparent 55%);
  opacity:0; transition:opacity .4s;
}
.tl__card:hover .tl__glow{ opacity:1; }
.tl__card>*:not(.tl__glow){ position:relative; z-index:1; }

.tl__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.tl__badge{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em;
  color:var(--bg); background:var(--acc); padding:3px 10px; font-weight:700;
}
.tl__badge--alt,.tl__badge--start{ color:var(--acc); background:none; border:1px solid currentColor; }
.tl__when{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--grey-dim); }
.tl__co{ font-size:clamp(1.1rem,2.4vw,1.4rem); margin-bottom:4px; }
.tl__co span{ font-size:.66em; font-weight:500; color:var(--grey-dim); letter-spacing:.02em; }
.tl__role{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em;
  color:var(--acc); margin-bottom:10px;
}
.tl__desc{ color:var(--grey); font-size:.97rem; margin-bottom:14px; }
.tl__stack{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tl__stack li{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.04em;
  color:var(--grey-dim); background:rgba(255,255,255,.06);
  border:1px solid var(--line); padding:3px 9px;
}
.tl__open{
  font-family:var(--f-display); font-weight:700; font-size:.71rem; letter-spacing:.14em;
  color:var(--acc); border-bottom:1px solid transparent; padding-bottom:2px; transition:.3s;
}
.tl__open:hover{ border-bottom-color:currentColor; letter-spacing:.17em; }
.tl__detail{ display:none; }

/* ---------- 12. STACK ------------------------------------
   Cinco cards de pílulas viraram uma lista de hairlines: rótulo à
   esquerda, tecnologias fluindo à direita. Mesma informação, uma
   fração do peso visual — e lê como especificação técnica, não
   como mais uma fileira de caixinhas.                            */
.techlist{ margin:0; }
.techlist__row{
  display:grid; grid-template-columns:minmax(150px,210px) 1fr;
  gap:10px 34px; align-items:start;
  padding:clamp(16px,2.2vw,24px) clamp(10px,1.4vw,18px);
  border-top:1px solid var(--line);
  transition:background .35s;
}
.techlist__row:last-child{ border-bottom:1px solid var(--line); }
.techlist__row:hover{ background:linear-gradient(90deg,rgba(var(--acc-rgb),.07),transparent 65%); }

.techlist__row[data-accent="magenta"]{ --acc:var(--magenta); --acc-rgb:255,0,127; }
.techlist__row[data-accent="cyan"]   { --acc:var(--cyan);    --acc-rgb:0,243,255; }
.techlist__row[data-accent="violet"] { --acc:var(--violet-lite); --acc-rgb:192,132,252; }
.techlist__row[data-accent="sunset"] { --acc:var(--sunset);  --acc-rgb:255,158,0; }

.techlist__row dt{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--f-display); font-weight:700; font-size:.95rem;
  letter-spacing:.03em; color:var(--white);
}
.techlist__n{ font-family:var(--f-mono); font-weight:400; font-size:.68rem; letter-spacing:.2em; color:var(--acc); }
.techlist__row dd{ margin:0; display:flex; flex-wrap:wrap; gap:7px; }
.techlist__row dd span{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--grey); padding:4px 11px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  transition:color .3s, border-color .3s;
}
.techlist__row:hover dd span{ color:var(--white); border-color:rgba(var(--acc-rgb),.45); }

/* ---------- 13. SOLUÇÕES ---------------------------------
   Antes: 12 cards idênticos em grade, um debaixo do outro. Agora os
   dois públicos ficam LADO A LADO como duas listas numeradas — a
   comparação entre eles vira imediata, e some a fileira de caixas.  */
.solutions{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,68px);
}
.solcol[data-accent="cyan"]   { --acc:var(--cyan);    --acc-rgb:0,243,255; }
.solcol[data-accent="magenta"]{ --acc:var(--magenta); --acc-rgb:255,0,127; }

.solcol__head{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  align-items:center;
  padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid rgba(var(--acc-rgb),.4);
}
.solcol__badge{
  grid-row:1 / span 2; align-self:start;
  display:grid; place-items:center; width:34px; height:34px;
  font-family:var(--f-display); font-weight:900; font-size:.9rem;
  color:var(--bg); background:var(--acc);
  clip-path:polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%);
}
.solcol__head h3{ font-size:clamp(1rem,2vw,1.18rem); line-height:1.25; }
.solcol__head p{
  margin:0; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grey-dim);
}

.sollist{ counter-reset:sol; }
.sollist > li{
  counter-increment:sol;
  position:relative;
  padding:clamp(18px,2.2vw,24px) 0 clamp(18px,2.2vw,24px) 44px;
  border-bottom:1px solid var(--line);
}
.sollist > li::before{
  content:counter(sol,decimal-leading-zero);
  position:absolute; left:0; top:clamp(19px,2.3vw,25px);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--acc);
}
/* Trilho fino que aparece no hover — substitui a borda permanente do card */
.sollist > li::after{
  content:''; position:absolute; left:26px; top:clamp(18px,2.2vw,24px); bottom:clamp(18px,2.2vw,24px);
  width:1px; background:var(--acc); opacity:0; transition:opacity .35s;
}
.sollist > li:hover::after{ opacity:.65; }

.sollist h4{
  font-family:var(--f-display); font-weight:700; line-height:1.3;
  font-size:clamp(.95rem,1.9vw,1.06rem);
  color:var(--white); margin-bottom:8px;
  transition:color .3s;
}
.sollist > li:hover h4{ color:var(--acc); }
.sollist p{ color:var(--grey); font-size:.93rem; line-height:1.6; margin-bottom:10px; }
.sollist__tags{ display:flex; flex-wrap:wrap; gap:5px 7px; }
.sollist__tags li{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em;
  color:var(--grey-dim); background:rgba(255,255,255,.05);
  padding:2px 8px;
}

/* ---------- 13b. BRIEFING (captação de leads) -------------
   Um passo por vez, pergunta grande, opções como alvo de clique.
   O container é praticamente invisível: quem estrutura é a barra
   de progresso no topo e a régua de navegação embaixo.          */
.bf{ max-width:880px; margin-inline:auto; }

/* ===== MONITOR CRT ========================================
   Carcaça, tubo e vidro. Tudo em CSS: nenhuma imagem, nenhum
   filter caro. As camadas de vidro são compostas pela GPU, então
   o efeito não disputa frame com o canvas do fundo.            */
.crt{ perspective:1400px; }

.crt__frame{
  position:relative;
  padding:clamp(16px,2.2vw,26px) clamp(16px,2.2vw,26px) 0;
  border-radius:22px 22px 10px 10px;
  background:
    linear-gradient(180deg,#22203A 0%,#15142A 42%,#0C0B1C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 26px 70px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.05);
}

.crt__screen{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(120% 130% at 50% 0%, #071A1B 0%, #040A14 55%, #03030D 100%);
  /* Sombra interna funda = sensação de vidro embutido na carcaça */
  box-shadow:
    inset 0 0 0 1px rgba(0,243,255,.16),
    inset 0 0 42px rgba(0,0,0,.95),
    inset 0 0 120px rgba(0,243,255,.05);
}

/* --- Camadas do vidro --- */
.crt__fx{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.crt__fx span{ position:absolute; inset:0; display:block; }

.crt__scan{
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  opacity:.55;
  animation:crtRoll 9s linear infinite;   /* varredura descendo devagar */
}
@keyframes crtRoll{ to{ background-position:0 300px; } }

.crt__glare{
  /* Reflexo diagonal do vidro curvo, canto superior esquerdo */
  background:linear-gradient(128deg,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.02) 22%,
    transparent 46%);
}

.crt__vig{
  /* Escurecimento das bordas: o tubo nunca é uniforme */
  background:radial-gradient(115% 115% at 50% 46%,
    transparent 52%, rgba(0,0,0,.55) 100%);
}

.crt__inner{
  position:relative; z-index:2;
  padding:clamp(22px,3.4vw,40px);
  /* Brilho de fósforo: tudo dentro da tela ganha um halo suave */
  text-shadow:0 0 12px rgba(0,243,255,.16);
}

/* --- Carcaça inferior --- */
.crt__base{
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(6px,1.2vw,12px) 14px;
}
.crt__led{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:#39FF88; box-shadow:0 0 10px #39FF88, 0 0 22px rgba(57,255,136,.55);
  animation:crtLed 3.4s ease-in-out infinite;
}
@keyframes crtLed{ 50%{ opacity:.45; box-shadow:0 0 6px #39FF88; } }
.crt__led.is-enviando{ background:var(--sunset); box-shadow:0 0 12px var(--sunset); animation-duration:.7s; }

.crt__model{
  flex:1; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.24em; color:rgba(175,190,210,.5); text-transform:uppercase;
}
.crt__model b{ color:rgba(255,0,127,.75); font-weight:400; }

.crt__dials{ display:flex; gap:8px; flex:none; }
.crt__dials i{
  width:13px; height:13px; border-radius:50%;
  background:linear-gradient(160deg,#2A2842,#141327);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.6);
}

/* Pé do monitor */
.crt__stand{
  width:34%; max-width:220px; height:16px; margin:0 auto;
  background:linear-gradient(180deg,#15142A,#0A0918);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.9);
}
.crt__stand::after{
  content:''; display:block; position:relative; top:16px;
  width:190%; max-width:340px; height:9px; margin:0 auto;
  background:linear-gradient(180deg,#191833,#0B0A19);
  border-radius:6px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9);
}

/* ===== LOG DO BRIEFING =====================================
   Cada resposta confirmada é impressa aqui, como saída de
   terminal. É o que faz a ficha "preencher na tela".          */
.bf__log{
  font-family:var(--f-mono); font-size:.79rem; line-height:1.85;
  color:#8DFFC9;
  margin-bottom:clamp(18px,2.4vw,26px);
  padding-bottom:clamp(14px,2vw,20px);
  border-bottom:1px dashed rgba(0,243,255,.22);
  min-height:2.4em;
}
.bf__log:empty{ display:none; }
.bf__log-linha{ display:flex; gap:10px; animation:bfLinha .3s var(--ease) both; }
@keyframes bfLinha{ from{ opacity:0; transform:translateX(-8px); } }
.bf__log-k{ color:var(--grey-dim); white-space:nowrap; }
.bf__log-v{ color:var(--white); }
.bf__log-sys{ color:rgba(0,243,255,.75); }
.bf__log-cursor{
  display:inline-block; width:.55em; height:1em; vertical-align:-.12em;
  background:#8DFFC9; margin-left:2px;
  animation:blink 1.1s steps(1) infinite;
}

.bf__head{ margin-bottom:clamp(20px,2.6vw,28px); }
.bf__meta{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em;
  color:var(--grey-dim); text-transform:uppercase; margin-bottom:10px;
}
.bf__counter b{ color:var(--cyan); font-weight:400; }
.bf__label{ color:var(--white); }

.bf__bar{ height:3px; background:rgba(255,255,255,.09); overflow:hidden; }
.bf__bar i{
  display:block; height:100%; width:16.6%;
  background:linear-gradient(90deg,var(--violet),var(--magenta),var(--cyan));
  transition:width .5s var(--ease);
}

.bf__noscript{
  padding:16px 18px; border-left:2px solid var(--sunset);
  background:rgba(255,158,0,.08); color:var(--grey); font-size:.95rem;
}

.bf__form{ position:relative; }

/* Honeypot: fora da tela, invisível para leitor de tela e para gente. */
.bf__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bf__step{ border:0; padding:0; margin:0; min-inline-size:0; }
.bf__step[hidden]{ display:none; }
.bf__step.is-active{ animation:bfIn .45s var(--ease) both; }
@keyframes bfIn{ from{ opacity:0; transform:translateY(14px); } }

.bf__q{
  display:block; padding:0;
  font-family:var(--f-display); font-weight:900; line-height:1.2;
  font-size:clamp(1.3rem,3.2vw,2rem);
  color:var(--white); margin-bottom:10px;
}
.bf__hint{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--grey-dim); margin-bottom:clamp(20px,2.6vw,28px);
}

/* --- Opções --- */
.bf__opts{ display:flex; flex-wrap:wrap; gap:10px; }
.bf__opt{ position:relative; cursor:pointer; }
.bf__opt input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0;
  cursor:pointer; inset:0;
}
.bf__opt span{
  display:block; padding:13px 20px;
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  color:var(--grey);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  transition:border-color .25s, background .25s, color .25s, transform .2s var(--ease);
}
.bf__opt:hover span{ color:var(--white); border-color:rgba(0,243,255,.5); transform:translateY(-2px); }
.bf__opt input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }
.bf__opt input:checked + span{
  color:var(--white); border-color:var(--cyan);
  background:rgba(0,243,255,.14);
  box-shadow:inset 0 0 22px rgba(0,243,255,.10);
}
/* Marca de seleção só na múltipla escolha, onde acumular importa */
.bf__opts--multi .bf__opt input:checked + span::before{
  content:'✓ '; color:var(--cyan); font-weight:700;
}

/* --- Campos de texto --- */
.bf__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bf__field--wide{ grid-column:1 / -1; }

.bf__field label{
  display:block; font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey-dim);
  margin-bottom:7px;
}
.bf__field label i{ color:var(--magenta); font-style:normal; }
.bf__field label small{ text-transform:none; letter-spacing:.02em; opacity:.75; }

.bf__field input,
.bf__field textarea{
  width:100%; padding:13px 15px;
  font-family:var(--f-body); font-size:1rem; color:var(--white);
  background:rgba(4,4,15,.7); border:1px solid var(--line);
  transition:border-color .25s, background .25s;
  resize:vertical;
}
.bf__field textarea{ font-size:.98rem; line-height:1.6; min-height:150px; }
.bf__field input::placeholder,
.bf__field textarea::placeholder{ color:rgba(175,190,210,.5); }
.bf__field input:focus,
.bf__field textarea:focus{
  outline:none; border-color:var(--cyan);
  background:rgba(0,243,255,.05);
  box-shadow:0 0 0 3px rgba(0,243,255,.12);
}
.bf__field input.is-erro,
.bf__field textarea.is-erro{ border-color:var(--magenta); box-shadow:0 0 0 3px rgba(255,0,127,.14); }

.bf__count{
  font-family:var(--f-mono); font-size:.7rem; color:var(--grey-dim);
  text-align:right; margin-top:6px;
}
.bf__erro{
  font-family:var(--f-mono); font-size:.74rem; color:#FF7A92;
  margin:6px 0 0; min-height:1em;
}
.bf__privacidade{
  font-family:var(--f-mono); font-size:.72rem; color:var(--grey-dim);
  margin-top:16px; padding-left:12px; border-left:2px solid rgba(255,255,255,.14);
}

/* --- Roteiro do briefing --- */
.bf__roteiro{
  margin-bottom:20px; padding:16px 18px;
  border:1px dashed rgba(0,243,255,.32);
  background:rgba(0,243,255,.045);
}
.bf__roteiro-head{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em;
  color:var(--cyan); margin-bottom:12px;
}
.bf__roteiro-list{ counter-reset:rot; display:grid; gap:7px; margin-bottom:14px; }
.bf__roteiro-list li{
  counter-increment:rot; position:relative; padding-left:30px;
  font-size:.9rem; color:var(--grey); line-height:1.5;
}
.bf__roteiro-list li::before{
  content:counter(rot,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--f-mono); font-size:.7rem; color:var(--cyan); opacity:.8;
}
.bf__roteiro-list b{ color:var(--white); }
.bf__roteiro-btn{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  color:var(--cyan); padding:8px 14px;
  border:1px solid rgba(0,243,255,.4); background:rgba(0,243,255,.07);
  transition:.25s;
}
.bf__roteiro-btn:hover{ background:var(--cyan); color:var(--bg); border-color:var(--cyan); }
.bf__roteiro-btn[disabled]{ opacity:.45; cursor:default; }
.bf__roteiro-btn[disabled]:hover{ background:rgba(0,243,255,.07); color:var(--cyan); }

/* --- Navegação --- */
.bf__nav{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,38px); padding-top:22px;
  border-top:1px solid var(--line);
}
.bf__back{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em;
  color:var(--grey-dim); padding:10px 0; transition:color .25s;
}
.bf__back:hover{ color:var(--cyan); }
.bf__alerta{
  flex:1; margin:0; min-width:180px;
  font-family:var(--f-mono); font-size:.78rem; color:#FF7A92;
  opacity:0; transition:opacity .3s;
}
.bf__alerta.is-on{ opacity:1; }
.bf__nav .btn{ margin-left:auto; }
.bf__nav .btn[disabled]{ opacity:.55; cursor:progress; }

@media (max-width:620px){
  .bf__grid{ grid-template-columns:1fr; }
  .bf__opt span{ padding:12px 16px; font-size:.9rem; }
  .bf__nav .btn{ margin-left:0; flex:1 1 100%; order:3; }
  .bf__alerta{ order:2; flex:1 1 100%; }
  .bf__back{ order:1; }
}

/* ---------- 14. MODAL ------------------------------------- */
.modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0; background:rgba(3,3,13,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fade .35s var(--ease);
}
@keyframes fade{ from{ opacity:0; } }

.modal__box{
  position:relative; width:min(720px,100%); max-height:86svh; overflow-y:auto;
  padding:clamp(26px,4vw,42px);
  border:1px solid var(--magenta);
  background:linear-gradient(165deg,rgba(22,5,30,.99),rgba(3,3,13,1));
  box-shadow:0 0 70px rgba(255,0,127,.28);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  animation:pop .42s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.98); } }

.modal__close{
  position:absolute; top:14px; right:18px; width:36px; height:36px;
  color:var(--magenta); border:1px solid currentColor; font-size:.9rem; transition:.25s;
}
.modal__close:hover{ background:var(--magenta); color:#fff; }

.modal__kicker{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.26em; color:var(--cyan); }
.modal__title{
  font-size:clamp(1.3rem,3.4vw,1.9rem); margin:10px 0 22px; padding-bottom:18px;
  border-bottom:1px solid rgba(255,0,127,.32);
  color:var(--white);
}
.modal__body h4{
  font-family:var(--f-mono); font-weight:400; font-size:.76rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sunset);
  margin:26px 0 12px;
}
.modal__body h4:first-child{ margin-top:0; }
.modal__body p{ color:var(--grey); }
.modal__body ul{ display:grid; gap:10px; margin:0; }
.modal__body li{ position:relative; padding-left:22px; color:var(--grey); font-size:.96rem; }
.modal__body li::before{ content:'▸'; position:absolute; left:0; top:0; color:var(--cyan); }

/* ---------- 15. CONTATO ----------------------------------- */
.contact{ display:block; }

.ccard{
  --acc:var(--cyan); --acc-rgb:0,243,255;
  position:relative;
  padding:clamp(26px,3.4vw,42px);
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(18,15,40,.85),rgba(4,4,15,.9));
  transition:border-color .45s, box-shadow .45s;
}
.ccard:hover{ border-color:var(--acc); box-shadow:0 24px 70px -34px var(--acc); }

/* Canal único: a mensagem e os CTAs ficam à esquerda, a lista de contatos
   à direita. Um card só, sem separar pessoal de corporativo. */
.ccard__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,3.4vw,44px); align-items:start;
}
.ccard__lead{ display:flex; flex-direction:column; }
.ccard__side{ display:flex; flex-direction:column; }

.ccard__corner{ position:absolute; width:20px; height:20px; border:2px solid var(--acc); opacity:.85; }
.ccard__corner--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ccard__corner--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.ccard__corner--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.ccard__corner--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.ccard>*:not(.ccard__corner){ position:relative; z-index:1; }

.ccard__kicker{ font-family:var(--f-mono); font-size:.67rem; letter-spacing:.24em; color:var(--acc); }
.ccard__title{ font-size:clamp(1.35rem,3.2vw,1.95rem); margin:12px 0 6px; }
.ccard__who{ font-family:var(--f-mono); font-size:.82rem; color:var(--acc); margin-bottom:16px; }
.ccard__text{ color:var(--grey); font-size:1.02rem; margin-bottom:16px; }
.ccard__area{
  font-family:var(--f-mono); font-size:.8rem; line-height:1.6;
  color:var(--grey-dim); margin-bottom:26px;
  padding-left:14px; border-left:2px solid rgba(var(--acc-rgb),.5);
}

.ccard__actions{ display:grid; gap:12px; margin-top:auto; padding-top:6px; }

.ccard__links{ display:grid; gap:10px; }
.ccard__links a{
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--grey);
  transition:.3s var(--ease);
}
.ccard__links a:hover{
  border-color:var(--acc); background:rgba(var(--acc-rgb),.10);
  transform:translateX(5px);
}
.ccard__links-ico{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  font-family:var(--f-mono); font-size:.78rem; color:var(--acc);
  border:1px solid rgba(var(--acc-rgb),.45); background:rgba(var(--acc-rgb),.09);
}
.ccard__links a>span:nth-child(2){ flex:1; min-width:0; }
.ccard__links b{ display:block; font-family:var(--f-display); font-size:.8rem; letter-spacing:.04em; word-break:break-word; }
.ccard__links i{ display:block; font-style:normal; font-size:.84rem; color:var(--grey-dim); line-height:1.4; }
.ccard__links-arrow{ flex:none; color:var(--acc); font-size:1.05rem; }

.ccard__cnpj{
  margin:clamp(24px,3vw,34px) 0 0; padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.06em;
  color:var(--grey-dim); line-height:1.6; text-align:center;
}

/* ---------- 16. FOOTER ------------------------------------ */
.foot{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,0,127,.24);
  background:linear-gradient(180deg,rgba(3,3,13,.6),rgba(45,8,66,.55));
  padding-block:36px; text-align:center;
}
.foot__sig{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(1.1rem,3.2vw,1.6rem); letter-spacing:.2em;
  color:var(--white); margin-bottom:10px;
}
.foot__sig b{ color:var(--magenta); text-shadow:var(--glow-magenta); }
.foot__copy{ font-family:var(--f-mono); font-size:.77rem; letter-spacing:.08em; color:var(--grey-dim); margin:0; }

/* ---------- 17. REVEAL ------------------------------------
   Com GSAP: o ScrollTrigger controla opacity/transform.
   Sem GSAP: IntersectionObserver aplica .is-in e a transição
   abaixo faz o trabalho. Sem JS: o <noscript> libera tudo.  */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }

/* ---------- 18. RESPONSIVO -------------------------------- */
@media (max-width:1024px){
  .about{ grid-template-columns:1fr; }
  .ccard__grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-head__sub{ grid-column:1; grid-row:3; text-align:left; margin-top:6px; max-width:none; }
}

@media (max-width:820px){
  .ai__cols{ grid-template-columns:1fr; }
  .solutions{ grid-template-columns:1fr; }
  .techlist__row{ grid-template-columns:1fr; gap:10px; padding-inline:0; }
}

@media (max-width:900px){
  :root{ --nav-h:64px; }

  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(3,3,13,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,0,127,.3);
    padding:8px var(--pad) 22px;
    transform:translateY(-120%); opacity:0; visibility:hidden;
    transition:transform .45s var(--ease), opacity .35s, visibility .35s;
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
  .nav__links a::after{ display:none; }
  .nav__links .nav__cta{ margin-top:16px; text-align:center; padding:14px; border-bottom:1px solid var(--magenta); }

  .hero{ min-height:auto; padding-block:calc(var(--nav-h) + 64px) 80px; }
  /* Empilhado e centralizado: o sol volta ao centro, então a base escura
     precisa ser radial e cobrir o bloco inteiro de texto. */
  .hero::before{
    background:radial-gradient(96% 64% at 50% 50%, rgba(3,3,13,.93), rgba(3,3,13,.78) 58%, rgba(3,3,13,.25) 88%, transparent 100%);
  }
  .hero__scroll{ display:none; }
  .hero__actions .btn{ flex:1 1 100%; }

  .term__screen{ height:min(56vh,370px); }
}

@media (max-width:560px){
  .boot__log{ min-height:220px; }
  .tl{ padding-left:28px; }
  .tl__dot{ left:-28px; width:15px; height:15px; top:6px; }
  .tl__item + .tl__item .tl__dot{ top:28px; }
  .tl::before{ left:7px; }
  .tl__card{ padding-right:0; }
  .sollist > li{ padding-left:36px; }
  .sollist > li::after{ left:22px; }
  .term__shortcuts button{ font-size:.67rem; padding:5px 9px; }
  .ccard__links a{ padding:12px; gap:11px; }
  .ccard__links-ico{ width:34px; height:34px; }
}

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

@media print{
  .fx,.nav,.boot,.modal,.term,.hero__scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
}