/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ============================================================
   SCROLL REVEAL — elements start hidden via CSS (no flash)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* stagger siblings */
[data-reveal][data-delay="1"] { transition-delay: 0.07s; }
[data-reveal][data-delay="2"] { transition-delay: 0.14s; }
[data-reveal][data-delay="3"] { transition-delay: 0.21s; }
[data-reveal][data-delay="4"] { transition-delay: 0.28s; }
[data-reveal][data-delay="5"] { transition-delay: 0.35s; }
[data-reveal][data-delay="6"] { transition-delay: 0.42s; }

/* ============================================================
   HERO ANIMATIONS
   ============================================================ */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroImageIn {
  from { opacity: 0; transform: perspective(1200px) rotateX(8deg) translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0)    scale(1); }
}

.hero-text {
  animation: heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-text-delay { animation-delay: 0.15s; }
.hero-cta-delay  { animation-delay: 0.28s; }

.hero-image-wrap {
  animation: heroImageIn 1.1s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.marquee-outer {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 40px;
}

/* ============================================================
   TRACE LINE PULSE — wrapper hidden until reveal
   ============================================================ */
.trace-pulse-wrap { opacity: 0; transition: opacity 0.4s ease-out; }
.trace-pulse-wrap.is-visible { opacity: 1; }

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: white; border: 1px solid #e5e7eb;
  border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  min-width: 200px; z-index: 100; padding: 8px 0;
}
.nav-item:hover .nav-dropdown { display: block; }
.nav-dropdown a { display: block; padding: 8px 16px; font-size: 14px; color: #374151; transition: background 0.15s; }
.nav-dropdown a:hover { background: #f9fafb; }
.nav-item:hover .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.2s; }

/* ============================================================
   BENTO GRID (dark theme cards)
   ============================================================ */
.bento-card {
  background: linear-gradient(135deg,rgba(203,213,225,0.5) 0%,rgba(203,213,225,0.4) 50%,rgba(148,163,184,0.55) 100%);
  border: 1px solid rgba(148,163,184,0.4);
  border-radius: 12px; overflow: hidden;
}

/* ============================================================
   PRODUCT TAB SWITCHER
   ============================================================ */
.product-tab {
  cursor: pointer;
  flex: 1 1 0;
  text-align: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: background 0.2s, color 0.2s;
  border: 1px solid transparent;
}
.product-tab:hover { color: #111827; }
.product-tab.active {
  background: white;
  color: #111827;
  border-color: #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.product-panel { display: none; }
.product-panel.active { display: block; }

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-panel.active { animation: tabFadeIn 0.35s ease both; }

/* ============================================================
   FEATURE CARDS (dark)
   ============================================================ */
.feature-card {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.feature-card:hover { transform: translateY(-4px); }

/* ============================================================
   TESTIMONIAL CAROUSEL
   ============================================================ */
.testimonial-track-outer {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.testimonial-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: testimonialScroll 50s linear infinite;
}
.testimonial-track:hover { animation-play-state: paused; }
@keyframes testimonialScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.testimonial-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  flex-shrink: 0;
}
.testimonial-track-reverse {
  animation-direction: reverse;
  animation-duration: 45s;
}

/* ============================================================
   ENTERPRISE CARDS
   ============================================================ */
.enterprise-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}
.enterprise-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* ============================================================
   GITHUB STAR BUTTON
   ============================================================ */
.github-btn { display: inline-flex; align-items: center; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); background: white; font-size: 12px; font-weight: 600; overflow: hidden; }
.github-btn-left { background: #1f2937; color: white; padding: 6px 12px; display: flex; align-items: center; gap: 6px; border-right: 2px solid #111827; }
.github-btn-right { padding: 6px 12px; color: #374151; }

/* SSO logos */
.sso-logo { height: 24px; width: auto; opacity: 0.6; filter: grayscale(0.3); transition: opacity 0.2s; object-fit: contain; }
.sso-logo:hover { opacity: 1; filter: grayscale(0); }

/* Warehouse badge */
.warehouse-badge { background: linear-gradient(to right,#4b5563,#4b5563); border: 1px solid #374151; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* ============================================================
   SLIDE REVEAL — lateral (left / right)
   ============================================================ */
[data-reveal-left] {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal-right] {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.14s;
}
[data-reveal-left].is-visible,
[data-reveal-right].is-visible {
  opacity: 1;
  transform: translateX(0);
}

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

/* ============================================================
   FEATURE CARD — BACKGROUNDS (extraídos do inline)
   ============================================================ */
.fc-bg-table {
  background-image: url('../images/tabledark1.png');
  background-size: cover;
  background-position: center;
}
.fc-overlay-table {
  background: radial-gradient(circle at center, transparent 15%, rgba(3,7,18,0.1) 35%, rgba(3,7,18,0.4) 55%, rgba(3,7,18,0.8) 75%, rgba(3,7,18,1) 90%);
}
.fc-min-h {
  min-height: 250px;
}
.fc-bg-perf {
  background-image: url('../images/perf2.gif');
  background-size: 90%;
  background-position: top center;
  background-repeat: no-repeat;
}
.fc-bg-code {
  background-image: url('../images/code-snippet.png');
  background-size: 150%;
  background-position: 10% 30%;
}

/* ============================================================
   PANEL CONTAINER / DROP-SHADOW
   ============================================================ */
.panel-min-h { min-height: 480px; }
.drop-shadow-panel { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15)); }

/* ============================================================
   CODE PANEL ASPECT RATIO
   ============================================================ */
.aspect-codepanel { aspect-ratio: 1340 / 1481; }

/* ============================================================
   SVG CONNECTORS
   ============================================================ */
.svg-connector-400 { height: 400px; overflow: visible; }
.svg-connector-320 { height: 320px; overflow: visible; }

.trace-line { transition: stroke-dashoffset 3s ease-out; }

/* SVG gradient stops */
#traceGradient1 stop:first-child,
#traceGradient2 stop:first-child {
  stop-color: rgb(96 165 250);
  stop-opacity: 1;
}
#traceGradient1 stop:last-child,
#traceGradient2 stop:last-child {
  stop-color: rgba(191, 219, 254, 0.4);
  stop-opacity: 1;
}

/* ============================================================
   QUERY ENGINE BADGE
   ============================================================ */
.evlogo-drop-shadow {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)) drop-shadow(0 -1px 1px rgba(255,255,255,0.1));
}
.text-shadow-title {
  text-shadow: 0 1px 1px rgba(0,0,0,0.4), 0 -1px 1px rgba(255,255,255,0.1);
}
.text-shadow-sub {
  text-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 -1px 1px rgba(255,255,255,0.1);
}

/* ============================================================
   DATA SOURCE INDICATOR DOTS
   ============================================================ */
.dot-cyan   { background-color: #29B5E8; }
.dot-blue   { background-color: #4285F4; }
.dot-yellow { background-color: #FFCC02; }

/* ============================================================
   AVATAR PLACEHOLDER / ERROR FALLBACK
   ============================================================ */
.avatar-placeholder {
  background: #e5e7eb;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}
.avatar-img-error {
  background: #e5e7eb;
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  display: block;
}

/* ============================================================
   FOOTER LOGO
   ============================================================ */
.footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* ============================================================
   QUALIFY / BRIEFING FORM
   ============================================================ */
.qf-step {
  display: none;
  animation: qf-fade-in 0.28s ease;
}
.qf-step.active {
  display: block;
}
@keyframes qf-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.qf-input.qf-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}
.qf-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #dc2626;
}

.qf-chip {
  position: relative;
  display: flex;
  cursor: pointer;
  user-select: none;
}
.qf-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qf-chip span {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 0.7rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.qf-chip:hover span {
  border-color: #9ca3af;
}
.qf-chip input:checked + span,
.qf-chip:has(input:checked) span {
  border-color: #111827;
  background: #111827;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.qf-chip input:focus-visible + span {
  outline: 2px solid #111827;
  outline-offset: 2px;
}
.qf-chip.qf-invalid span {
  border-color: #ef4444;
}

.qf-nav button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.qf-form.is-complete .qf-progress,
.qf-form.is-complete .qf-nav,
.qf-form.is-complete .qf-step {
  display: none !important;
}
.qf-success:not(.hidden) {
  display: block;
  animation: qf-fade-in 0.35s ease;
}