/* ===== Tema Black + Roxo (sem linha animada; sem “barras” estranhas) ===== */
:root{
  --bg:#0b0b0b; --bg2:#111111; --surface:#121212;
  --text:#e7e7e7; --text-2:#a3a3a3; --border:#262626;
  --vio-1:#8b5cf6; --vio-2:#a78bfa;
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ===== Overlay + Side menu ===== */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .2s; z-index:80 }
.overlay.show{ opacity:1; visibility:visible }

.side-menu{
  position:fixed; right:-360px; top:0; height:100dvh; width:340px; z-index:90;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:0 16px 40px rgba(0,0,0,.6); padding:18px;
  transition:right .28s cubic-bezier(.2,.9,.2,1);
}
.side-menu.open{ right:0 }
.close-btn{ position:absolute; top:10px; right:10px; border:none; background:transparent; color:var(--text-2); font-size:20px; cursor:pointer }
.sidelink{
  display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--text);
  border:1px solid var(--border); background:var(--bg2); font-weight:700;
}
.sidelink:hover{ border-color:#2f2f2f }
.link-bold{ color:var(--vio-2); font-weight:800; text-decoration:none }
.link-bold:hover{ text-decoration:underline }

/* ===== Header / Botões compactos ===== */
header{ background:var(--bg); border-bottom:1px solid var(--border) }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px; border-radius:999px; font-weight:800; border:1px solid transparent;
  text-decoration:none; transition:transform .12s, filter .2s, border-color .2s, box-shadow .2s;
}
header .btn{ padding:9px 14px; font-size:.92rem; box-shadow:0 8px 22px rgba(139,92,246,.18) }
.btn:active{ transform:translateY(1px) }
.btn.bg-purple{ background: linear-gradient(90deg,var(--vio-1),var(--vio-2)); color:#fff }
.btn.bg-purple:hover{ filter:brightness(1.07) }
.btn.border{ background:transparent; color:#fff; border-color:var(--border) }
.btn.border:hover{ border-color:var(--vio-1) }

/* ===== Títulos com barra roxa discreta (só roxo) ===== */
.k-title{ position:relative; display:inline-block; }
.k-title::after{
  content:""; position:absolute; left:0; bottom:-8px; width:72px; height:3px;
  background:linear-gradient(90deg,var(--vio-1),var(--vio-2));
  border-radius:3px; box-shadow:0 0 16px rgba(139,92,246,.35);
}

/* ===== Chips / Badges ===== */
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px;
  background:var(--bg2); border:1px solid var(--border); color:#cfd0ff; font-weight:800;
}

/* ===== Cartões / blocos ===== */
.border{ border-color:var(--border) !important; }
.bg-bk2{ background:var(--bg2) !important; }
.shadow-glow{ box-shadow:0 0 60px rgba(167,139,250,.15) }

/* ===== Inputs (hero e formulário) ===== */
.k-input{
  width:100%; padding:14px 14px; border-radius:14px;
  border:1px solid var(--border); background:var(--bg2); color:var(--text);
  outline:none; box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.k-input::placeholder{ color: #8f8f8f; }
.k-input:focus{
  border-color:var(--vio-1);
  box-shadow:0 0 0 4px rgba(139,92,246,.18), 0 8px 24px rgba(0,0,0,.4);
}

/* ===== Rail de projetos — sem barras, clean ===== */
.case{
  background:var(--bg2); border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .2s, box-shadow .2s;
}
.case:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.5) }

.case-rail{
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.case-rail::-webkit-scrollbar{ display:none }

/* ===== FAQ ===== */
.k-faq{
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--surface);
}
.k-faq summary{ cursor:pointer; font-weight:800; color:#fff }
.k-faq[open]{ box-shadow:0 16px 40px rgba(0,0,0,.45) }

/* ===== Toast / Bottom-sheet ===== */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#1a1a1a; color:#fff; border:1px solid var(--border);
  padding:10px 14px; border-radius:10px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:95;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px) }

.bottom-sheet{
  position:fixed; left:0; right:0; bottom:-120px; background:rgba(18,18,18,.98);
  border-top:1px solid var(--border); padding:12px 0; z-index:85;
  transition: transform .24s ease, bottom .24s ease;
}
.bottom-sheet.show{ bottom:0 }

/* ===== Reveal simples ===== */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease }
.reveal.show{ opacity:1; transform:translateY(0) }

/* ===== Acessibilidade ===== */
:focus-visible{ outline:none; box-shadow:0 0 0 6px rgba(139,92,246,.22) }

/* ===== Responsivo — header botões menores em telas pequenas ===== */
@media (max-width:640px){
  header .btn{ padding:8px 12px; font-size:.9rem; box-shadow:0 6px 18px rgba(139,92,246,.16) }
}
@media (max-width:420px){
  header .btn{ padding:7px 10px; font-size:.86rem }
}