:root {
  --fm-dark:      #0a0915;
  --fm-blue:      #1D3E84;
  --fm-teal:      #1994A4;
  --fm-green:     #5EB565;
  --fm-lime:      #8DC04A;
  --fm-gradient:       linear-gradient(90deg, #1D3E84 11%, #1994A4 33%, #5EB565 62%, #8DC04A 86%);
  /* Exact gradient from the Flowmize logo SVG (same stops, same offsets) */
  --fm-logo-gradient:  linear-gradient(90deg, #0A398C 11.36%, #1794A3 33.14%, #58BA64 62.46%, #87D545 85.76%);
  /* Same palette without the dark blue stop — readable on dark backgrounds */
  --fm-gradient-text:  linear-gradient(90deg, #1994A4 0%, #5EB565 50%, #8DC04A 100%);

  --fm-text:      rgba(255, 255, 255, 0.95);
  --fm-text-soft: rgba(255, 255, 255, 0.65);
  --fm-text-mute: rgba(255, 255, 255, 0.45);
  --fm-line:      rgba(255, 255, 255, 0.08);

  --container-pad: 32px;
  --container-max: 1280px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--fm-dark);
  color: var(--fm-text);
  font-family: 'Poppins', -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}

/* grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  transform: translateZ(0);
}