/* ========================================================
   GUARDBASE — TECHNICAL ENGINEERING BLUEPRINT DESIGN SYSTEM
   Specification extracted from 'designs/guardbase-branding/DESIGN.md'
   Developer & Applied AI Engineer: Rubens Cardoso
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* 1. CORES DE MARCA & DESTAQUE (BRAND ACCENTS) */
  --color-blue-electric: #3E7BFA;
  --color-blue-royal: #1D44B8;
  --color-navy-deep: #0B1F3A;

  /* 2. CORES SECUNDÁRIAS & HIGHLIGHTS */
  --color-periwinkle: #A6B5FF;
  --color-cyan-ice: #BFEFFF;
  --color-acid-yellow: #E9F45B;
  --color-success-green: #10B981;
  --color-success-bg: #ECFDF5;

  /* 3. NEUTROS & SUPERFÍCIES (LIGHT CLINICAL & DARK ENTERPRISE) */
  --bg-light-primary: #FFFFFF;
  --bg-light-secondary: #F7F8FA;
  --bg-light-muted: #EAECEF;

  --bg-dark-primary: #0E1013;
  --bg-dark-elevated: #16181D;
  --bg-dark-terminal: #121316;

  /* 4. TIPOGRAFIA & INK TOKENS */
  --text-primary-light: #0E1013;
  --text-secondary-light: #5A6065;
  --text-muted-light: #8C9298;
  --text-accent-fade: #7B9CFF;

  --text-primary-dark: #FFFFFF;
  --text-secondary-dark: #9BA1A8;
  --text-muted-dark: #636B74;

  /* 5. BORDAS & LINHAS DE GRADE (HAIRLINES) */
  --border-light: #E4E7EC;
  --border-light-subtle: #EEF0F3;
  --border-dark: #24272D;
  --crosshair-color: #0E1013;
}

/* Base Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  background-color: #FFFFFF;
}

body {
  background-color: #FFFFFF;
  color: var(--text-primary-light);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Selection */
::selection {
  background: var(--color-blue-electric);
  color: #FFFFFF;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F7F8FA;
}

::-webkit-scrollbar-thumb {
  background: #D0D5DD;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-electric);
}

/* 4.1. Textura de Hachura Diagonal (Margens e Células Vazias) */
.bg-diagonal-hatch {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(14, 16, 19, 0.04) 5px,
      rgba(14, 16, 19, 0.04) 6px);
}

.bg-diagonal-hatch-dark {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(255, 255, 255, 0.04) 5px,
      rgba(255, 255, 255, 0.04) 6px);
}

/* Grid Pontilhado Suave */
.bg-blueprint-dots {
  background-size: 24px 24px;
  background-image: radial-gradient(circle, rgba(14, 16, 19, 0.08) 1px, transparent 1px);
}

.bg-blueprint-dots-dark {
  background-size: 24px 24px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}

/* Blueprint Container — Full Width Modern Architectural Layout */
.blueprint-wrapper {
  width: 100%;
  background-color: var(--bg-light-primary);
  position: relative;
}

/* Marcadores de Interseção (+ Crosshairs) */
.crosshair {
  display: none !important;
}

/* Eyebrows & Section Markers */
.eyebrow-guardbase {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue-electric);
}

.eyebrow-guardbase::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-blue-electric);
  border-radius: 1px;
}

.eyebrow-guardbase-dark {
  color: var(--color-periwinkle);
}

.eyebrow-guardbase-dark::before {
  background-color: var(--color-acid-yellow);
}

/* Botões do Guardbase (Cantos Retos 2px & DM Mono) */
.btn-guardbase-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 20px;
  background-color: var(--color-blue-electric);
  color: #FFFFFF;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--color-blue-electric);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn-guardbase-primary:hover {
  background-color: var(--color-blue-royal);
  border-color: var(--color-blue-royal);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(62, 123, 250, 0.25);
}

.btn-guardbase-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 20px;
  background-color: #FFFFFF;
  color: var(--text-primary-light);
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid #D0D5DD;
  transition: all 0.2s ease;
}

.btn-guardbase-secondary:hover {
  background-color: #F9FAFB;
  border-color: #0E1013;
  color: #0E1013;
}

.btn-guardbase-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 20px;
  background-color: var(--color-acid-yellow);
  color: #0E1013;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--color-acid-yellow);
  transition: all 0.2s ease;
}

.btn-guardbase-dark:hover {
  background-color: #dce745;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(233, 244, 91, 0.3);
}

/* Link Textual de Card (LEARN MORE / VER DETALHES) */
.link-technical {
  font-family: 'DM Mono', monospace;
  font-size: 0.725rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.link-technical:hover {
  color: var(--color-blue-electric);
}

/* Collaborative Agent Cursors */
.agent-cursor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.agent-cursor-tag.tag-yellow {
  background-color: var(--color-acid-yellow);
  color: #0E1013;
}

.agent-cursor-tag.tag-blue {
  background-color: var(--color-blue-electric);
  color: #FFFFFF;
}

.agent-cursor-tag.tag-ice {
  background-color: var(--color-cyan-ice);
  color: #0B1F3A;
}

/* Pull Request Check Card */
.pr-check-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(14, 16, 19, 0.06);
  font-family: 'DM Mono', monospace;
}

/* Section Smooth Offset */
section[id] {
  scroll-margin-top: 5rem;
}

/* Stats Metric Strip Cell */
.stats-cell {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--border-light);
  background-color: var(--bg-light-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats-cell:last-child {
  border-right: none;
}

.stats-number {
  font-family: 'DM Mono', monospace;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--text-primary-light);
  line-height: 1;
}

.stats-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-secondary-light);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Bento Cards (Dark Enterprise Section) */
.bento-card-lavender {
  background-color: var(--color-periwinkle);
  color: #0E1013;
  border-radius: 4px;
  padding: 2rem;
  transition: transform 0.25s ease;
}

.bento-card-yellow {
  background-color: var(--color-acid-yellow);
  color: #0E1013;
  border-radius: 4px;
  padding: 2rem;
  transition: transform 0.25s ease;
}

.bento-card-white {
  background-color: #FFFFFF;
  color: #0E1013;
  border-radius: 4px;
  padding: 2rem;
  transition: transform 0.25s ease;
}

.bento-card-dark {
  background-color: var(--bg-dark-elevated);
  color: #FFFFFF;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 2rem;
  transition: transform 0.25s ease;
}

.bento-card-lavender:hover,
.bento-card-yellow:hover,
.bento-card-white:hover,
.bento-card-dark:hover {
  transform: translateY(-2px);
}

/* Tech Stack Infinite Moving Marquee & Normalized Frames */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.tech-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  padding: 0.75rem 0;
}

.tech-marquee-track {
  display: flex;
  gap: 3.25rem;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
  align-items: center;
}

/* A rolagem NUNCA para no hover; sutil foco (spotlight) com irmãos atenuados */
.tech-marquee-track:hover .tech-marquee-item {
  opacity: 0.55;
}

.tech-marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 52px;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s ease;
}

.tech-marquee-item img {
  height: 36px;
  width: auto;
  max-height: 44px;
  object-fit: contain;
  opacity: 0.95;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.35s ease,
    opacity 0.25s ease;
  will-change: transform;
}

/* Calibração de peso visual óptico para equilíbrio harmônico */
.tech-marquee-item[data-tech="postgresql"] img,
.tech-marquee-item[data-tech="redis"] img {
  height: 44px;
}

.tech-marquee-item[data-tech="flask"] img {
  height: 40px;
}

.tech-marquee-item[data-tech="selenium"] img,
.tech-marquee-item[data-tech="chatwoot"] img,
.tech-marquee-item[data-tech="coolify"] img {
  height: 38px;
}

.tech-marquee-item[data-tech="fastapi"] img {
  height: 32px;
}

.tech-marquee-item[data-tech="langchain"] img {
  height: 28px;
}

/* Animação no Hover: Elevação elástica, escala e aura de destaque técnico sem parar o carrossel */
.tech-marquee-track .tech-marquee-item:hover {
  opacity: 1 !important;
}

.tech-marquee-item:hover img {
  opacity: 1;
  transform: translateY(-5px) scale(1.18);
  filter: drop-shadow(0 8px 16px rgba(62, 123, 250, 0.32)) drop-shadow(0 2px 4px rgba(14, 16, 19, 0.12));
}

/* Tab Switcher (Negócio vs Técnico) */
.technical-tab-btn {
  padding: 0.4rem 0.9rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.technical-tab-btn.active {
  background-color: #0E1013;
  color: #FFFFFF;
  border-color: #0E1013;
}

.technical-tab-btn:not(.active) {
  background-color: #F7F8FA;
  color: var(--text-secondary-light);
  border-color: var(--border-light);
}

.technical-tab-btn:not(.active):hover {
  background-color: #FFFFFF;
  color: #0E1013;
}

/* Stepper Squares */
.step-number-box {
  width: 32px;
  height: 32px;
  background-color: var(--color-blue-electric);
  color: #FFFFFF;
  font-family: 'DM Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}


/* Modal */
.guardbase-modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(14, 16, 19, 0.75);
  animation: modalFadeIn 0.2s ease-out forwards;
}

.guardbase-modal-dialog {
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast */
.guardbase-toast {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.guardbase-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ==================== PROJECT CARD SLIDESHOW ==================== */
.project-slideshow-container {
  user-select: none;
}

.project-slide-img {
  will-change: opacity, transform;
}

.project-slide-dot {
  cursor: pointer;
}

/* Ocultar barra de rolagem mantendo funcionalidade de scroll para os dots */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==================== TECHNICAL ICON FRAME (CANTONEIRAS GUARDBASE) ==================== */
.icon-bracket-frame {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(62, 123, 250, 0.05);
  border: 1px solid rgba(62, 123, 250, 0.15);
  border-radius: 2px;
  color: var(--color-blue-electric);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.icon-bracket-frame:hover {
  background-color: rgba(62, 123, 250, 0.1);
  border-color: rgba(62, 123, 250, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(62, 123, 250, 0.15);
}

.icon-bracket-frame .bracket-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  pointer-events: none;
}

.bracket-corner-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-blue-electric);
  border-left: 2px solid var(--color-blue-electric);
}

.bracket-corner-tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid var(--color-blue-electric);
  border-right: 2px solid var(--color-blue-electric);
}

.bracket-corner-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid var(--color-blue-electric);
  border-left: 2px solid var(--color-blue-electric);
}

.bracket-corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-blue-electric);
  border-right: 2px solid var(--color-blue-electric);
}

/* ==================== DECODIFICAÇÃO DE TÍTULOS (BINÁRIO / ASCII) ==================== */
/* O glifo de código é desenhado num ::after absoluto sobre a letra real (transparente),
   então a largura de cada letra nunca muda: sem quebra de linha diferente e sem tremor. */
:root {
  --decode-accent: var(--color-blue-electric);
}

#about,
#contact {
  --decode-accent: var(--color-acid-yellow);
}

.decode-pending {
  visibility: hidden;
}

.decode-word {
  white-space: nowrap;
}

.decode-ch.is-hidden,
.decode-ch.is-glyph {
  color: transparent;
}

.decode-ch.is-glyph {
  position: relative;
}

.decode-ch.is-glyph::after {
  content: attr(data-g);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 0.78em;
  color: var(--decode-accent);
  pointer-events: none;
}

/* ==================== REVEAL UNIFORME (RESTANTE DO TEXTO) ==================== */
.reveal-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item.is-revealed {
  opacity: 1;
  transform: none;
}

/* ==================== SEÇÃO SOLUÇÕES: MONTANHA REALISTA & SETA DE CRESCIMENTO ==================== */
.solutions-grid-wrapper {
  position: relative;
  background-color: #FFFFFF;
}

.solutions-mountain-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Camada da Montanha Realista (Texturas de Rocha e Neve em Alta Resolução) */
.mountain-realistic-container {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .mountain-realistic-container {
    height: 98%;
    aspect-ratio: 1376 / 768;
    width: auto;
    max-width: 95%;
  }
}

@media (max-width: 767px) {
  .mountain-realistic-container {
    height: 320px;
    width: 573px;
    max-width: none;
    right: -80px;
    bottom: 0;
  }
}

.mountain-realistic-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.42;
  mix-blend-mode: multiply;
  filter: contrast(1.15) brightness(0.96);
}

/* Camada SVG: Seta de Crescimento e Marcações Técnicas */
.solutions-mountain-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Cards com acabamento translúcido nítido (sem blur pesado) para revelar a montanha com fidelidade */
.solution-feature-card {
  background: rgba(255, 255, 255, 0.52);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.solution-feature-card:hover {
  background: rgba(255, 255, 255, 0.88);
}

/* --- ANIMAÇÃO GRADUAL (DE BAIXO PARA CIMA) --- */
.growth-arrow-line {
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  transition: stroke-dashoffset 3.2s cubic-bezier(0.25, 1, 0.4, 1);
}

.growth-arrow-head {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.9s;
}

.arrow-milestones>* {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Ativação quando a seção entra no viewport */
.solutions-mountain-backdrop.is-animated .mountain-realistic-container {
  clip-path: inset(0 0 0 0);
}

.solutions-mountain-backdrop.is-animated .growth-arrow-line {
  stroke-dashoffset: 0;
}

.solutions-mountain-backdrop.is-animated .growth-arrow-head {
  opacity: 1;
}

/* Waypoints iluminando progressivamente na subida gradual da seta */
.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(1),
.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(2) {
  opacity: 1;
  transition-delay: 0.9s;
}

.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(3),
.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(4) {
  opacity: 1;
  transition-delay: 1.8s;
}

.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(5),
.solutions-mountain-backdrop.is-animated .arrow-milestones>*:nth-child(6) {
  opacity: 1;
  transition-delay: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
  .decode-pending {
    visibility: visible;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mountain-realistic-container {
    clip-path: none;
    transition: none;
  }

  .growth-arrow-line {
    stroke-dashoffset: 0;
    transition: none;
  }

  .growth-arrow-head {
    opacity: 1;
    transition: none;
  }

  .arrow-milestones>* {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================== HERO ORCHESTRATOR MOTION COMPONENT ==================== */
.font-mono-tech {
  font-family: var(--font-mono, 'DM Mono', monospace);
}

.orchestrator-wrapper {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

.orchestrator-stage {
  position: relative;
  width: 660px;
  height: 520px;
  flex-shrink: 0;
  background: transparent;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 36px, black calc(100% - 36px), transparent 100%),
                      linear-gradient(to bottom, black calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 36px, black calc(100% - 36px), transparent 100%),
              linear-gradient(to bottom, black calc(100% - 30px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

#asciiTopographyCanvas {
  mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
}

#contact-ascii-canvas {
  opacity: 0.22;
  mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
}

/* Header Telemétrico Dinâmico Integrado ao Fundo (Sem paredes ou bordas de card) */
.orchestrator-header-bar {
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  z-index: 35;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(228, 231, 236, 0.7);
  padding: 2px 4px 8px 4px;
  box-shadow: none;
  overflow: visible;
}

.header-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(228, 231, 236, 0.5);
}

.header-progress-fill {
  height: 100%;
  width: 33%;
  background: #3E7BFA;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.scenario-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #CBD5E1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.scenario-dot:hover {
  background: #94A3B8;
}

.scenario-dot.active {
  background: #3E7BFA;
  transform: scale(1.35);
  box-shadow: 0 0 0 2px rgba(62, 123, 250, 0.25);
}

/* Cenários (Transição entre as 3 Animações) */
.scenario-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.99);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}

.scenario-pane.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  z-index: 10;
}

/* Pinos de conexão (Sockets) para ancoragem milimétrica dos cabos ópticos */
.port-socket {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  z-index: 20;
  transition: all 0.3s ease;
}

.port-socket.active {
  border-color: #3E7BFA;
  background: #3E7BFA;
  box-shadow: 0 0 0 2.5px rgba(62, 123, 250, 0.25);
}

.port-socket.warning {
  border-color: #F59E0B;
  background: #E9F45B;
  box-shadow: 0 0 0 2.5px rgba(233, 244, 91, 0.5);
}

.port-socket.success {
  border-color: #10B981;
  background: #10B981;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.25);
}

.wire-base {
  fill: none;
  stroke: #CBD5E1;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.wire-glow {
  fill: none;
  stroke: #3E7BFA;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s, stroke 0.3s;
  opacity: 0;
}

.wire-glow.active {
  stroke-dashoffset: 0;
  opacity: 1;
}

.wire-glow.success {
  stroke: #10B981;
  stroke-dashoffset: 0;
  opacity: 1;
}

@keyframes laserSweep {
  0% {
    top: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    top: 92%;
    opacity: 0;
  }
}

.scanning .laser-line {
  animation: laserSweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes laserHorizontal {
  0% {
    left: -10%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: 95%;
    opacity: 0;
  }
}

.scraping .scraper-beam {
  animation: laserHorizontal 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes voiceWave {

  0%,
  100% {
    transform: scaleY(0.35);
  }

  50% {
    transform: scaleY(1);
  }
}

.voice-bar {
  width: 2.5px;
  background: #3E7BFA;
  border-radius: 99px;
  transform-origin: center;
  animation: voiceWave 0.9s ease-in-out infinite;
}

.voice-playing .voice-bar {
  background: #10B981;
  animation-duration: 0.45s;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.96);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(0.96);
    opacity: 0.6;
  }
}

@keyframes spinCore {
  to {
    transform: rotate(360deg);
  }
}

.hub-engine-pulse {
  animation: pulseRing 3s ease-in-out infinite;
}

.hub-ring-rotate {
  animation: spinCore 14s linear infinite;
}

.card-transition {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-cursor {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Dynamic Viewport Camera (Smooth Zoom & Pan Director) */
.orchestrator-camera {
  position: absolute;
  top: 56px;
  left: 0;
  width: 920px;
  height: 460px;
  transform-origin: 0px 0px;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 10;
}

.camera-vignette-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 60%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 30;
}