/* ============================================
   BEMULTIFLOW — Variables & Reset
   ============================================ */

:root {
  /* Brand Colors */
  --navy:      #08193A;
  --navy-2:    #0F2548;
  --blue:      #1756A9;
  --blue-2:    #2368C4;
  --blue-3:    #3B82F6;
  --cyan:      #3B9EFF;
  --cyan-l:    #7EC8FF;

  /* Neutrals */
  --white:     #FFFFFF;
  --sky:       #EDF4FF;
  --sky-2:     #F5F9FF;
  --warm:      #F8F7F4;
  --warm-2:    #F2F0EB;

  /* Ink */
  --ink:       #08193A;
  --ink-2:     rgba(8,25,58,.62);
  --ink-3:     rgba(8,25,58,.38);
  --ink-4:     rgba(8,25,58,.20);

  /* Lines */
  --line:      rgba(8,25,58,.08);
  --line-2:    rgba(8,25,58,.15);

  /* Semantic */
  --ok:        #0B9E6A;
  --ok-l:      #D1FAE5;
  --warn:      #C47B0A;
  --warn-l:    #FEF3C7;
  --danger:    #DC2626;
  --purple:    #7C3AED;
  --purple-l:  #EDE9FE;

  /* Typography */
  --serif:     'Plus Jakarta Sans', 'Sora', system-ui, sans-serif;
  --sans:      'Plus Jakarta Sans', 'Sora', system-ui, sans-serif;
  --mono:      'JetBrains Mono', 'DM Mono', monospace;

  /* Spacing */
  --sp-xs:     4px;
  --sp-sm:     8px;
  --sp-md:     16px;
  --sp-lg:     24px;
  --sp-xl:     40px;
  --sp-2xl:    64px;
  --sp-3xl:    96px;

  /* Radius */
  --r-sm:      8px;
  --r-md:      12px;
  --r-lg:      18px;
  --r-xl:      24px;
  --r-full:    999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(8,25,58,.08), 0 1px 2px rgba(8,25,58,.05);
  --shadow-md: 0 4px 16px rgba(8,25,58,.08), 0 2px 6px rgba(8,25,58,.04);
  --shadow-lg: 0 12px 40px rgba(8,25,58,.12), 0 4px 12px rgba(8,25,58,.06);
  --shadow-xl: 0 24px 64px rgba(8,25,58,.14), 0 8px 24px rgba(8,25,58,.08);

  /* Transitions */
  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --ease-out:  cubic-bezier(0,0,.2,1);
  --t-fast:    .15s;
  --t-base:    .22s;
  --t-slow:    .4s;

  /* Layout */
  --max-w:     1240px;
  --nav-h:     64px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* ── Typography scale ── */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--navy);
}

h1 { font-size: clamp(38px, 5.2vw, 72px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.8vw, 50px); font-weight: 700; }
h3 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; }
h4 { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; }

/* em = color accent, not italic */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--blue-2);
}

p { color: var(--ink-2); line-height: 1.68; }

/* ── Layout ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-md); }
}

section { padding: var(--sp-3xl) 0; }

/* ── Reveal animation ── */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.on { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .09s; }
.rv.d2 { transition-delay: .17s; }
.rv.d3 { transition-delay: .25s; }
.rv.d4 { transition-delay: .33s; }