/* ============================================================
   Design system — "Do Prompt aos Agentes" (Tiago Basei / Advanced AI)
   Extraído do deck: dark navy, gradiente azul→violeta, âmbar→rosa,
   badges verdes, tipografia grotesca pesada.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Sora:wght@600;700;800&display=swap");

:root {
  --bg: #08080e;
  --bg-2: #0b0c16;
  --ink: #f5f5f8;
  --muted: #9a9ab4;
  --muted-2: #6f6f8a;

  --cool-1: #5b6ef5;
  --cool-2: #8b5cf6;
  --cool-3: #a855f7;
  --warm-1: #fbbf24;
  --warm-2: #fb7185;
  --warm-3: #ec4899;
  --green: #34d399;

  --grad-cool: linear-gradient(120deg, var(--cool-1) 0%, var(--cool-3) 100%);
  --grad-warm: linear-gradient(120deg, var(--warm-1) 0%, var(--warm-3) 100%);
  --grad-top: linear-gradient(90deg, #5b6ef5, #8b5cf6 45%, #c084fc 100%);

  --card: rgba(255, 255, 255, 0.035);
  --card-brd: rgba(255, 255, 255, 0.09);
  --card-hi: rgba(139, 92, 246, 0.5);

  --radius: 18px;
  --font-head: "Sora", "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Fundo com o glow roxo do canto superior direito + linha de topo */
body {
  position: relative;
  background:
    radial-gradient(120% 90% at 90% -10%, rgba(120, 90, 240, 0.28) 0%, rgba(120, 90, 240, 0) 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(90, 70, 200, 0.16) 0%, rgba(0, 0, 0, 0) 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-top);
  z-index: 100;
}

/* Utilidades tipográficas */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--cool-2);
  box-shadow: 0 0 12px var(--cool-2);
}

.grad-cool {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--green);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.footer-tag {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--muted-2);
}

/* Marca TIAGO BASEI */
.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.92;
  font-size: 0.95rem;
  text-transform: uppercase;
}
.wordmark .hl {
  color: var(--warm-1);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fade-up {
  animation: fadeUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}