/* ============================================================================ APEX LABS — estilos globais Fontes (Manrope + Space Grotesk) são carregadas via Google Fonts no . ============================================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #05080f; color: #e8eef6; font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Cor de destaque da marca — troque aqui para retematizar o site inteiro. */ --accent: #2ec5ff; --accent2: #5fd8ff; } a { color: #5fd8ff; text-decoration: none; transition: color .2s; } a:hover { color: #a6ecff; } ::selection { background: rgba(46, 197, 255, .3); color: #fff; } input, textarea, button { font-family: inherit; } input:focus, textarea:focus { outline: none; } /* ── Animações ───────────────────────────────────────────────────────────── */ @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-34px); } } @keyframes markGlow { 0%, 100% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 55%, transparent)); } 50% { filter: drop-shadow(0 0 44px color-mix(in srgb, var(--accent) 80%, transparent)); } } @keyframes marqueeX { to { transform: translateX(-50%); } } @keyframes revealIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* Reveal-on-scroll — usa scroll-driven animations onde suportado, senão fica visível. */ [data-reveal] { opacity: 1; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-reveal] { animation: revealIn .01s linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; } } } /* ── Responsividade ────────────────────────────────────────────────────────── No bundle original isto era controlado por JS (window.innerWidth >= 760). Aqui virou @media query — mais simples, sem reflow no resize e sem JS. */ .apx-navlinks { display: none; } .apx-navcta { display: none; } .apx-contactgrid { grid-template-columns: 1fr; } .apx-flagship { grid-template-columns: 1fr; } @media (min-width: 760px) { .apx-navlinks { display: flex; } .apx-navcta { display: inline-block; } .apx-contactgrid { grid-template-columns: 0.9fr 1.1fr; } .apx-flagship { grid-template-columns: 1.15fr 0.85fr; } } /* Galeria de telas do app — strip horizontal com scrollbar discreta. */ .apx-shots { scrollbar-width: thin; scrollbar-color: rgba(140,200,255,.28) transparent; } .apx-shots::-webkit-scrollbar { height: 8px; } .apx-shots::-webkit-scrollbar-track { background: transparent; } .apx-shots::-webkit-scrollbar-thumb { background: rgba(140,200,255,.22); border-radius: 999px; } .apx-shots::-webkit-scrollbar-thumb:hover { background: rgba(140,200,255,.4); }