/* ============================================================
   Prospecta — design system
   Tema e tokens exatamente como especificado no brief do hero.
   ============================================================ */
:root{
  --background: 260 87% 3%;
  --foreground: 40 6% 95%;
  --hero-sub: 40 6% 82%;

  --bg: hsl(var(--background));
  --fg: hsl(var(--foreground));
  --sub: hsl(var(--hero-sub));

  --indigo:#6366f1;
  --purple:#a855f7;
  --amber:#fcd34d;

  --line: hsl(var(--foreground) / .12);
  --line-soft: hsl(var(--foreground) / .07);
  --muted: hsl(var(--foreground) / .56);
  --muted-2: hsl(var(--foreground) / .38);

  --font-body:'Geist','Geist Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;
  --font-display:'General Sans','Geist',var(--font-body);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --maxw:1216px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:hsl(258 90% 66% / .38)}

/* ---------------------------------------------- liquid glass (spec) ---- */
.liquid-glass{
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

/* ------------------------------------------------------------ botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;letter-spacing:-.01em;
  border:0;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;
  transition:transform .22s cubic-bezier(.22,1,.36,1),filter .22s ease,opacity .22s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* variante heroSecondary do brief: vidro líquido sobre o vídeo */
.btn-hero-secondary{
  color:hsl(var(--foreground) / .95);
  padding:8px 16px;                       /* rounded-full px-4 py-2 */
  border-radius:var(--r-full);
}
.btn-hero-secondary:hover{filter:brightness(1.35)}

.btn-primary{
  color:#0a0517;
  background:linear-gradient(100deg,var(--amber),var(--purple) 58%,var(--indigo));
  padding:13px 24px;font-weight:700;
  box-shadow:0 10px 34px hsl(258 90% 66% / .28);
}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 14px 42px hsl(258 90% 66% / .38)}
.btn-ghost{
  background:transparent;border:1px solid var(--line);padding:12px 22px;
  color:hsl(var(--foreground) / .88);
}
.btn-ghost:hover{background:hsl(var(--foreground) / .05);border-color:hsl(var(--foreground) / .24)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%}

/* ------------------------------------------------------- utilitários ---- */
.wrap{width:min(var(--maxw),92vw);margin-inline:auto}
.wrap-narrow{width:min(880px,92vw);margin-inline:auto}
.wrap-5xl{width:min(64rem,92vw);margin-inline:auto}   /* max-w-5xl */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:hsl(var(--foreground) / .42);
}
.gradient-text{
  background-clip:text;-webkit-background-clip:text;color:transparent;
  background-image:linear-gradient(to left,var(--indigo),var(--purple),var(--amber));
}
.divider-line{
  height:1px;width:100%;
  background:linear-gradient(to right,transparent,hsl(var(--foreground) / .2),transparent);
}
.card{
  background:hsl(var(--foreground) / .022);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:26px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:var(--r-full);border:1px solid var(--line);
  color:hsl(var(--foreground) / .74);
}
.chip-hot{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);color:#fca5a5}
.chip-warm{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.3);color:#fcd34d}
.chip-cold{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.3);color:#a5b4fc}
.chip-ok{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.28);color:#86efac}

.spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid hsl(var(--foreground) / .2);border-top-color:var(--purple);
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}