/* ============================================================
   ZEZÉ DA REGULAGEM — DESIGN SYSTEM (PORTAL DEFINITIVO + PATCH FOTOGRÁFICO)
   ============================================================ */

:root {
  --bg-deep: #030712;
  --bg-subtle: #060B18;
  --bg-card: rgba(8, 17, 39, 0.75);
  --bg-card-border: rgba(255, 255, 255, 0.08);

  --primary-orange: #FF6B00;
  --primary-orange-hover: #E05300;
  --neon-cyan: #00E5FF;
  --neon-purple: #8B5CF6;
  --neon-green: #10B981;

  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-dim: #64748B;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

body {
  background-color: var(--bg-deep);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Accessible Focus Visible */
:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 4px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--primary-orange);
  color: #FFF;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 10001;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

.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;
}

/* Scroll Progress Bar */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--primary-orange));
  z-index: 10000;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* Subtle PCB Overlay (0.05 opacity) */
.pcb-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%2300E5FF' stroke-width='1.2' fill='none' stroke-opacity='0.4'%3E%3Cpath d='M10 20 h40 l20 20 v50 h30'/%3E%3Ccircle cx='10' cy='20' r='3' fill='%2300E5FF'/%3E%3Ccircle cx='100' cy='90' r='3' fill='%2300E5FF'/%3E%3Cpath d='M150 140 h-40 l-20-20 v-40' stroke='%23FF6B00'/%3E%3Ccircle cx='150' cy='140' r='3' fill='%23FF6B00'/%3E%3Ccircle cx='90' cy='80' r='3' fill='%23FF6B00'/%3E%3Cpath d='M80 10 v30 l-30 30' stroke='%2300E5FF'/%3E%3Ccircle cx='80' cy='10' r='2' fill='%2300E5FF'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Ambient Glows */
.ambient-glow {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}
.glow-cyan { top: -100px; left: -100px; background: rgba(0, 229, 255, 0.08); }
.glow-orange { top: 25%; right: -100px; background: rgba(255, 107, 0, 0.06); }

/* Layout & Containers */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.section-container {
  padding: 96px 0;
  position: relative;
}

.bg-dark-deep { background-color: var(--bg-subtle); }
.text-center { text-align: center; }

/* Responsive Typography with clamp() */
.section-heading {
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: #FFF;
}

.section-subtitle {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.highlight-gradient {
  background: linear-gradient(135deg, var(--primary-orange), #FF9E59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tech-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.tech-tag.orange-tag { background: rgba(255, 107, 0, 0.12); color: var(--primary-orange); border: 1px solid rgba(255, 107, 0, 0.25); }
.tech-tag.cyan-tag { background: rgba(0, 229, 255, 0.1); color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.2); }

/* Glassmorphism Panel */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  transition: var(--transition-smooth);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: var(--transition-smooth);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary-orange), #E05300);
  color: #FFF;
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 107, 0, 0.38);
}
.btn-glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bg-card-border);
  color: #FFF;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.btn-block { width: 100%; display: block; text-align: center; }

/* ===== 01. HEADER ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 999;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bg-card-border);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.brand-text { font-size: 1.15rem; font-weight: 900; color: #FFF; letter-spacing: -0.02em; }
.brand-text span { color: var(--primary-orange); }

.nav-menu { display: flex; align-items: center; gap: 24px; }
.nav-menu a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: var(--transition-smooth); }
.nav-menu a:hover, .nav-menu a.active { color: #FFF; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn-nav { padding: 8px 18px; font-size: 0.82rem; }
.dot-status { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }

.nav-hamburger { display: none; background: none; border: none; color: #FFF; cursor: pointer; }
.mobile-nav { display: none; flex-direction: column; gap: 16px; padding: 24px; background: rgba(8, 17, 39, 0.95); border-bottom: 1px solid var(--bg-card-border); }
.mobile-nav.active { display: flex; }
.mobile-nav a { color: #FFF; text-decoration: none; font-size: 1rem; }

/* ===== 02. HERO SECTION & SMARTPHONE ===== */
.hero-section { padding-top: 150px; padding-bottom: 96px; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.08);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 229, 255, 0.2);
  font-size: 0.73rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.dot-badge { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); }

.hero-heading {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: #FFF;
}
.hero-subheadline { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: #FFF; font-weight: 600; margin-bottom: 12px; }
.hero-caption { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
.hero-cta-row { display: flex; gap: 16px; margin-bottom: 32px; }

.hero-store-prelaunch { display: flex; gap: 14px; }
.store-badge-prelaunch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bg-card-border);
  padding: 8px 16px;
  border-radius: 12px;
}
.store-icon { font-size: 1.2rem; }
.store-text small { display: block; font-size: 0.65rem; color: var(--text-dim); }
.store-text strong { font-size: 0.78rem; color: var(--neon-cyan); letter-spacing: 0.05em; }

/* Smartphone Mockup & Float Animation */
.hero-mockup-wrapper { position: relative; display: flex; justify-content: center; align-items: center; }

.phone-ambient-radar {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.12) 0%, rgba(255,107,0,0.04) 50%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

.phone-mockup-device {
  position: relative;
  z-index: 1;
  width: 290px;
  height: 520px;
  background: #080D1A;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 30px rgba(0, 229, 255, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: phoneFloat 6s ease-in-out infinite;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

@media (min-width: 1025px) {
  .phone-mockup-device:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(0, 229, 255, 0.35);
  }
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.device-notch { width: 100px; height: 18px; background: #000; border-radius: 10px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.notch-camera { width: 6px; height: 6px; border-radius: 50%; background: #222; }
.notch-speaker { width: 36px; height: 3px; border-radius: 2px; background: #222; }
.app-header-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-brand-sm { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; color: #FFF; }
.app-logo-sm { width: 18px; height: 18px; border-radius: 4px; }
.live-pill { font-size: 0.6rem; font-weight: 900; color: var(--primary-orange); background: rgba(255, 107, 0, 0.15); padding: 2px 8px; border-radius: 6px; }

.app-preview-body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.concept-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px; }
.concept-header { display: flex; align-items: center; gap: 10px; }
.concept-header strong { display: block; font-size: 0.8rem; color: #FFF; }
.concept-header small { display: block; font-size: 0.68rem; color: var(--text-muted); }
.concept-status-bar { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin: 8px 0 4px; }
.status-fill { width: 100%; height: 100%; background: var(--neon-green); border-radius: 2px; }

/* ===== CARTÕES FOTOGRÁFICOS PREMIUM ===== */
.image-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--bg-card-border);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1), border-color 500ms ease, box-shadow 500ms ease;
}

.image-card .card-img-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--bg-subtle);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(0.92) contrast(1.04);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1), filter 500ms ease;
}

.image-card .card-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(3,7,18,0.05) 0%, rgba(3,7,18,0.40) 60%, rgba(8,17,39,0.95) 100%);
  pointer-events: none;
}

.image-card .card-content {
  position: relative;
  z-index: 2;
  padding: 16px 20px 20px;
  text-align: left;
}

@media (min-width: 1025px) {
  .image-card:hover {
    transform: scale(1.015);
    border-color: rgba(0, 229, 255, 0.30);
    box-shadow: 0 12px 30px rgba(0, 229, 255, 0.08);
  }
  .image-card:hover img {
    filter: brightness(1.0) saturate(1.0) contrast(1.0);
  }
}

/* Fallback de Imagem */
.image-card.image-fallback .card-img-wrapper {
  background: linear-gradient(135deg, #060B18 0%, #0F172A 100%);
}
.image-card.image-fallback img {
  display: none;
}

/* ===== 08. FLUXO VISUAL COM FOTOS ===== */
.ecosystem-flow-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 40px;
  align-items: stretch;
}
.ecosystem-flow-grid .flow-arrow { display: none; }
.ecosystem-flow-grid .flow-step {
  height: 100%;
  padding: 0;
  border-radius: var(--radius-md);
}
.ecosystem-flow-grid .flow-step .card-img-wrapper { height: 140px; }
.ecosystem-flow-grid .flow-step h4 { font-size: 0.95rem; font-weight: 800; color: #FFF; margin-bottom: 4px; }
.ecosystem-flow-grid .flow-step p { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }

/* ===== 09. HISTÓRIA TIMELINE ===== */
.timeline-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; text-align: left; }
.timeline-card { padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.timeline-card-full { grid-column: span 2; border-color: var(--neon-cyan); }
.timeline-year { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; }
.timeline-year.orange { color: var(--primary-orange); }
.timeline-year.cyan { color: var(--neon-cyan); }
.timeline-year.purple { color: var(--neon-purple); }
.timeline-card h3 { font-size: 1.1rem; font-weight: 800; color: #FFF; margin-bottom: 6px; }
.timeline-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.timeline-tag { font-size: 0.68rem; font-weight: 800; padding: 4px 12px; border-radius: 8px; width: fit-content; }
.timeline-tag.orange { background: rgba(255, 107, 0, 0.15); color: var(--primary-orange); }
.timeline-tag.cyan { background: rgba(0, 229, 255, 0.15); color: var(--neon-cyan); }
.timeline-tag.purple { background: rgba(139, 92, 246, 0.15); color: var(--neon-purple); }

/* ===== 10. ECOSSISTEMA GRID FOTOGRÁFICO ===== */
.ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.ecosystem-card { padding: 0; text-align: left; border-radius: var(--radius-lg); }
.ecosystem-card .card-img-wrapper { height: 160px; }
.ecosystem-card h3 { font-size: 1.05rem; font-weight: 800; color: #FFF; margin-bottom: 8px; }
.ecosystem-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }

/* ===== 11. FUNCIONALIDADES CARROSSEL ===== */
.feature-bar-wrapper { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.feature-bar-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 28px; flex: 1; }
.feature-bar-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  padding: 0;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), box-shadow 350ms ease, border-color 350ms ease;
}
.feature-bar-card .card-img-wrapper {
  height: 160px;
  position: relative;
  overflow: hidden;
}
.feature-bar-card .card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}
.feature-bar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 229, 255, 0.10);
}
.feature-bar-card:hover .card-img-wrapper img {
  transform: scale(1.035);
}
.feature-bar-card:hover .card-arrow {
  transform: translateX(4px);
}

.feature-bar-card .card-content {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.func-number { font-size: 1.4rem; font-weight: 900; color: var(--primary-orange); line-height: 1; }
.feature-bar-card h4 { font-size: 1.05rem; font-weight: 800; color: #FFF; margin-bottom: 8px; }
.feature-bar-card p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; flex-grow: 1; }
.dev-badge { font-size: 0.65rem; font-weight: 800; color: var(--neon-cyan); background: rgba(0, 229, 255, 0.1); padding: 3px 8px; border-radius: 6px; width: fit-content; }
.card-action { font-size: 0.78rem; font-weight: 800; color: var(--primary-orange); display: flex; align-items: center; gap: 4px; margin-top: auto; }
.card-arrow { display: inline-block; transition: transform 300ms ease; }
.feat-nav-btn { width: 44px; height: 44px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--bg-card-border); border-radius: 50%; color: #FFF; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; }
.feat-nav-btn:hover { background: rgba(0, 229, 255, 0.15); border-color: var(--neon-cyan); }

/* ===== 12. RADAR SOS TECNOLÓGICO ===== */
.sos-card-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 32px; }
.radar-wrapper-side { position: relative; height: 340px; background: rgba(3, 7, 18, 0.8); border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--bg-card-border); }

.radar-widget-container {
  position: relative;
  width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
}

.radar-glow-ambient {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.15) 0%, rgba(255,107,0,0.05) 60%, transparent 80%);
  filter: blur(10px);
}

.radar-svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.radar-circle { fill: none; stroke: rgba(0, 229, 255, 0.20); stroke-width: 1.5; }
.radar-axis { stroke: rgba(0, 229, 255, 0.15); stroke-width: 1; stroke-dasharray: 4 4; }

.radar-sweeper-group {
  transform-origin: 150px 150px;
  animation: radarSweep 6s linear infinite;
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-sweep-cone { fill: url(#radarSweepGrad); opacity: 0.4; }
.radar-sweep-line { stroke: #00E5FF; stroke-width: 2; filter: drop-shadow(0 0 4px #00E5FF); }

.radar-blip { fill: var(--neon-cyan); filter: drop-shadow(0 0 6px var(--neon-cyan)); animation: blipPulse 2s ease-in-out infinite alternate; }
.cyan-blip { fill: var(--neon-cyan); }
.radar-center-sos { fill: var(--primary-orange); filter: drop-shadow(0 0 10px var(--primary-orange)); }

@keyframes blipPulse {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

.radar-center-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.radar-center-badge strong {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--primary-orange);
  background: rgba(3, 7, 18, 0.85);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--primary-orange);
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.4);
}

.radar-status-bar {
  position: absolute;
  bottom: 12px;
  background: rgba(3, 7, 18, 0.9);
  border: 1px solid var(--neon-cyan);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.orange-beacon { width: 8px; height: 8px; background: var(--primary-orange); border-radius: 50%; box-shadow: 0 0 8px var(--primary-orange); animation: beaconPulse 1.5s infinite; }
@keyframes beaconPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.sos-concept-flow { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.flow-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #FFF; }
.step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-orange); color: #FFF; font-size: 0.75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* ===== 13. BARGANHA CONCEITO ===== */
.barganha-box { padding: 44px 36px; }
.barganha-demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; text-align: left; }
.barganha-card { padding: 0; border-radius: var(--radius-lg); }
.barganha-card .card-img-wrapper { height: 150px; }
.barganha-badge { font-size: 0.65rem; font-weight: 900; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; width: fit-content; }
.barganha-badge.orange { background: rgba(255,107,0,0.15); color: var(--primary-orange); }
.barganha-badge.cyan { background: rgba(0,229,255,0.15); color: var(--neon-cyan); }
.barganha-badge.purple { background: rgba(139,92,246,0.15); color: var(--neon-purple); }

/* ===== 14. PARA EMPRESAS ===== */
.companies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: left; }
.company-card { padding: 0; border-radius: var(--radius-lg); }
.company-card .card-img-wrapper { height: 150px; }
.comp-full { grid-column: span 3; }
.company-card h4 { font-size: 0.95rem; font-weight: 800; color: #FFF; margin-bottom: 6px; }
.company-card p { font-size: 0.82rem; color: var(--text-muted); }

/* ===== 15. TRANSFORMAÇÃO (ANTES vs DEPOIS) ===== */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; text-align: left; }
.comp-box { padding: 36px 28px; }
.comp-box.image-card { padding: 0; overflow: hidden; }
.comp-box.image-card .card-content { padding: 24px 28px 32px; }
.comp-before { border-color: rgba(239,68,68,0.3); }
.comp-after { border-color: rgba(16,185,129,0.3); }
.comp-badge { font-size: 0.72rem; font-weight: 900; padding: 4px 12px; border-radius: 10px; margin-bottom: 16px; width: fit-content; }
.before-badge { background: rgba(239,68,68,0.2); color: #EF4444; }
.after-badge { background: rgba(16,185,129,0.2); color: #10B981; }
.comp-box h3 { font-size: 1.15rem; font-weight: 800; color: #FFF; margin-bottom: 16px; }
.comp-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.comp-list li { display: flex; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.comp-before .comp-list li span { color: #EF4444; font-weight: 900; }
.comp-after .comp-list li span { color: #10B981; font-weight: 900; }

/* Captura VIP Form */
.launch-box { padding: 44px 36px; }
.input-group { display: flex; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--bg-card-border); padding: 6px; border-radius: var(--radius-pill); }
.input-group input { flex: 1; background: transparent; border: none; outline: none; padding: 0 16px; color: #FFF; font-size: 0.9rem; }
.form-feedback { font-size: 0.82rem; margin-top: 10px; }
.form-feedback.success { color: var(--neon-green); }
.form-feedback.error { color: #EF4444; }

/* ===== 17. FAQ ACCORDION ===== */
.faq-accordion { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.faq-item { border-radius: var(--radius-md); overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 700; color: #FFF; cursor: pointer; text-align: left; }
.faq-icon { font-size: 1.4rem; color: var(--primary-orange); transition: transform 0.3s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 24px 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.faq-item.active .faq-answer { display: block; }

/* ===== 18. FOOTER ===== */
.footer { background: #02050E; border-top: 1px solid var(--bg-card-border); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 48px; text-align: left; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links h4 { font-size: 0.95rem; font-weight: 800; color: #FFF; margin-bottom: 6px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: var(--transition-smooth); }
.footer-links a:hover { color: #FFF; }

.store-badges-footer { display: flex; gap: 12px; margin-top: 16px; }
.store-badge-card { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--bg-card-border); padding: 8px 16px; border-radius: 12px; }
.store-badge-card small { display: block; font-size: 0.65rem; color: var(--text-dim); }
.store-badge-card strong { font-size: 0.78rem; color: var(--neon-cyan); letter-spacing: 0.05em; }

.footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.8rem; color: var(--text-dim); }

/* ============================================================
   ZEZÉ OS CONCEPT — COMPONENTE ENCAPSULADO (APP MODULE VIVO)
   ============================================================ */

.zeze-os-concept {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 30%, #081127 0%, #030712 100%);
  padding: 14px;
  box-sizing: border-box;
}

/* Header */
.zeze-os-concept__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  margin-bottom: 6px;
}
.zeze-os-concept__brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zeze-os-concept__logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.zeze-os-concept__title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.01em;
}
.zeze-os-concept__badge {
  font-size: 0.58rem;
  font-weight: 900;
  color: #FF6B00;
  background: rgba(255, 107, 0, 0.14);
  border: 1px solid rgba(255, 107, 0, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}

/* Interactive Stage */
.zeze-os-concept__stage {
  position: relative;
  width: 100%;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(3, 7, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Radar SVG */
.zeze-os-concept__radar {
  position: absolute;
  width: 180px;
  height: 180px;
  z-index: 1;
  pointer-events: none;
}
.zeze-os-concept__radar-ring {
  fill: none;
  stroke: rgba(0, 229, 255, 0.15);
  stroke-width: 1;
}
.zeze-os-concept__radar-axis {
  stroke: rgba(0, 229, 255, 0.1);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.zeze-os-concept__radar-sweeper {
  transform-origin: 100px 100px;
  animation: zezeOsRadarSweep 9s linear infinite;
  will-change: transform;
}
@keyframes zezeOsRadarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Nodes in Radar */
.zeze-os-concept__node { animation: zezeOsNodePulse 2s ease-in-out infinite alternate; }
.zeze-os-concept__node.cyan { fill: #00E5FF; filter: drop-shadow(0 0 4px #00E5FF); }
.zeze-os-concept__node.orange { fill: #FF6B00; filter: drop-shadow(0 0 4px #FF6B00); }
@keyframes zezeOsNodePulse { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* Scanner Bar */
.zeze-os-concept__scan {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00E5FF, transparent);
  box-shadow: 0 0 10px #00E5FF;
  z-index: 2;
  opacity: 0.7;
  animation: zezeOsScanMotion 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes zezeOsScanMotion {
  0% { transform: translateY(-70px); }
  50% { transform: translateY(70px); }
  100% { transform: translateY(-70px); }
}

/* Halo Central */
.zeze-os-concept__halo {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.25) 0%, rgba(255,107,0,0.08) 60%, transparent 80%);
  filter: blur(12px);
  z-index: 2;
  animation: zezeOsHaloPulse 3s ease-in-out infinite alternate;
}
@keyframes zezeOsHaloPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.9; }
}

/* Connections SVG */
.zeze-os-concept__connections {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.zeze-os-concept__line {
  fill: none;
  stroke: rgba(0, 229, 255, 0.25);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  animation: zezeOsDashFlow 12s linear infinite;
}
@keyframes zezeOsDashFlow {
  to { stroke-dashoffset: -100; }
}

.zeze-os-concept__pulse {
  animation: zezeOsPulseDot 1.5s ease-in-out infinite alternate;
}
.zeze-os-concept__pulse.cyan { fill: #00E5FF; filter: drop-shadow(0 0 5px #00E5FF); }
.zeze-os-concept__pulse.orange { fill: #FF6B00; filter: drop-shadow(0 0 5px #FF6B00); }
@keyframes zezeOsPulseDot { 0% { transform: scale(0.7); } 100% { transform: scale(1.3); } }

/* Vehicle Protagonist */
.zeze-os-concept__vehicle {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.zeze-os-concept__vehicle-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.6));
  animation: zezeOsVehicleFloat 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes zezeOsVehicleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.zeze-os-concept__vehicle-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(3, 7, 18, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #FFF;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Floating App Cards */
.zeze-os-concept__cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  margin-top: 2px;
}

.zeze-os-concept__card {
  background: rgba(8, 17, 39, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 7px 9px;
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, border-color 0.3s ease;
}

.zeze-os-concept.is-visible .zeze-os-concept__card {
  opacity: 1;
  transform: translateY(0);
}

.zeze-os-concept.is-visible .zeze-os-concept__card[data-step="1"] { transition-delay: 450ms; }
.zeze-os-concept.is-visible .zeze-os-concept__card[data-step="2"] { transition-delay: 650ms; }
.zeze-os-concept.is-visible .zeze-os-concept__card[data-step="3"] { transition-delay: 850ms; }

.zeze-os-concept__card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.3);
}

.zeze-os-concept__card--highlight {
  border-color: rgba(0, 229, 255, 0.25);
  background: linear-gradient(135deg, rgba(8, 17, 39, 0.8) 0%, rgba(0, 229, 255, 0.05) 100%);
}

.zeze-os-concept__card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.zeze-os-concept__card-dot { font-size: 0.65rem; }
.zeze-os-concept__card-dot.cyan { color: #00E5FF; }
.zeze-os-concept__card-dot.orange { color: #FF6B00; }

.zeze-os-concept__card-title {
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFF;
  letter-spacing: 0.02em;
}

.zeze-os-concept__card-tag {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  margin-left: auto;
}

.zeze-os-concept__card-main {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #F8FAFC;
}

.zeze-os-concept__card-sub {
  display: block;
  font-size: 0.62rem;
  color: #94A3B8;
  margin-top: 1px;
}

.zeze-os-concept__progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin: 3px 0 1px;
  overflow: hidden;
}

.zeze-os-concept__progress-fill {
  width: 82%;
  height: 100%;
  background: linear-gradient(90deg, #00E5FF, #FF6B00);
  border-radius: 2px;
}

/* Status Switcher Bar */
.zeze-os-concept__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px;
  background: rgba(3, 7, 18, 0.7);
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #00E5FF;
  z-index: 5;
  margin-top: 4px;
}
.zeze-os-concept__dot { font-size: 0.6rem; }
.zeze-os-concept__dot.green { color: #10B981; }
.zeze-os-concept__dot.orange { color: #FF6B00; }

.zeze-os-concept__status-text {
  transition: opacity 300ms ease;
  letter-spacing: 0.04em;
}

/* Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .radar-sweeper-group,
  .zeze-os-concept__radar-sweeper,
  .zeze-os-concept__scan,
  .zeze-os-concept__vehicle-icon,
  .zeze-os-concept__line,
  .zeze-os-concept__pulse,
  .zeze-os-concept__halo { animation: none !important; }
  .phone-mockup-device { animation: none !important; }
  .image-card:hover { transform: none !important; }
  .zeze-os-concept__card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Responsividade */
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: 1fr; text-align: center; }
  .hero-cta-row, .hero-store-prelaunch { justify-content: center; }
  .ecosystem-flow-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-grid, .ecosystem-grid, .barganha-demo-grid, .companies-grid, .comparison-grid { grid-template-columns: 1fr; }
  .timeline-card-full, .comp-full { grid-column: span 1; }
  .sos-card-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .nav-hamburger { display: block; }
}
@media (max-width: 600px) {
  .ecosystem-flow-grid { grid-template-columns: 1fr; }
}