/* Hiperajans — Critical above-the-fold CSS
   Loaded synchronously to render header + hero instantly.
   Full design system lives in the inline <style> in index.html.
*/

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #09090b;
  color: #fafafa;
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
}

/* Layout container */
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* Navigation — always visible on first paint */
nav, .nav, header, [class*="nav"] {
  position: relative;
  z-index: 100;
}
nav.scrolled {
  background: rgba(9, 9, 11, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #27272a;
}

/* Hero — full-viewport first paint */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: #09090b;
}

/* Reserve image space to avoid CLS */
img { max-width: 100%; height: auto; display: block; }
video { display: block; max-width: 100%; }

/* Video poster background to avoid white flash on slow connections */
video[preload] { background: #09090b; }

/* Prevent text from rendering before fonts load (FOUT/FOIT mitigation) */
:root { --font-display: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; }

/* Default body has dark bg — prevents white flash on slow connections */
html, body { background-color: #09090b; }