/* ================================================
   FLUXFRONT — Design Tokens, Reset & Layout
   ================================================ */

:root {
  --bg:        #0B0D11;
  --bg-alt:    #0E1117;
  --bg-card:   #12151C;
  --bg-hover:  #1A1E28;

  --teal:      #00D4AA;
  --blue:      #3B82F6;
  --teal-dim:  rgba(0, 212, 170, 0.12);
  --blue-dim:  rgba(59, 130, 246, 0.10);

  --text:      #F0F2F5;
  --text-2:    #7A8494;
  --text-3:    #4B5563;

  --border:    rgba(255, 255, 255, 0.06);
  --border-2:  rgba(255, 255, 255, 0.10);

  --ease:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:  cubic-bezier(0, 0, 0.25, 1);

  --ff-kb: 0px;
}


/* ================================================
   RESET
   ================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Sora', sans-serif; line-height: 1.12; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }


/* ================================================
   LAYOUT
   ================================================ */

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Old compat */
.container-small { max-width: 960px; margin: 0 auto; padding: 0 24px; }