/* Momentum Group — design tokens
 * Drawn from the Momentum Brand Guidelines 2025.
 * "Sophisticatedly simple. Go further." */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* ─── Hero canvas ─── */
  --m-ink:        #1a1b25;   /* Not just black */
  --m-paper:      #e8e8e8;   /* Not just white */

  /* ─── Hero accent ─── */
  --m-electric:   #0a03cd;   /* Electrify */
  --m-pink:       #f4b4d5;   /* Pink shift */

  /* ─── Full palette ─── */
  --m-fire:       #f9592c;   /* Physics fire */
  --m-burgundy:   #671d46;   /* Burgundy contrast */
  --m-mindaro:    #cfdc27;   /* Mindaro green */
  --m-mellow:     #a18d31;   /* Mellow yellow */
  --m-relevance:  #b1c4f6;   /* Blue relevance */
  --m-ash:        #373b47;   /* Sophisticated ash */

  /* Tints */
  --m-ink-80:     rgba(26,27,37,0.80);
  --m-ink-60:     rgba(26,27,37,0.60);
  --m-ink-40:     rgba(26,27,37,0.40);
  --m-ink-20:     rgba(26,27,37,0.20);
  --m-ink-10:     rgba(26,27,37,0.10);

  --m-paper-80:   rgba(232,232,232,0.80);
  --m-paper-60:   rgba(232,232,232,0.60);
  --m-paper-40:   rgba(232,232,232,0.40);
  --m-paper-20:   rgba(232,232,232,0.20);
  --m-paper-10:   rgba(232,232,232,0.10);

  /* Semantic */
  --m-fg:         var(--m-ink);
  --m-bg:         var(--m-paper);
  --m-accent:     var(--m-electric);
  --m-hairline:   rgba(26,27,37,0.12);

  /* Type */
  --font-display: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* Scale — fluid via clamp() */
  --t-mega:   clamp(5rem,   14vw,   16rem);   /* hero "Go further." */
  --t-giant:  clamp(3.5rem, 8vw,    8.5rem);  /* section headings */
  --t-display:clamp(2.4rem, 5vw,    5rem);    /* large statements */
  --t-h1:     clamp(2rem,   3.5vw,  3.25rem);
  --t-h2:     clamp(1.5rem, 2.4vw,  2.25rem);
  --t-h3:     clamp(1.15rem,1.5vw,  1.45rem);
  --t-body:   clamp(1rem,   1.05vw, 1.125rem);
  --t-small:  0.875rem;
  --t-eyebrow:0.75rem;

  /* Rhythm */
  --gutter:    clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --r-pill:    999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 640ms;
}

/* Dark canvas swap */
[data-canvas="ink"] {
  --m-fg: var(--m-paper);
  --m-bg: var(--m-ink);
  --m-hairline: rgba(232,232,232,0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

::selection { background: var(--m-electric); color: var(--m-paper); }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease);
}
a:hover { opacity: 0.65; }

img, svg { display: block; max-width: 100%; }

/* ──────── Type primitives ──────── */
.mg-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-size: var(--t-mega);
  text-transform: lowercase;
}

.mg-giant {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: var(--t-giant);
  text-transform: lowercase;
}

.mg-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: var(--t-display);
  text-transform: lowercase;
}

.mg-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: var(--t-h1);
  text-transform: lowercase;
}

.mg-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: var(--t-h3);
}

.mg-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.mg-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.mg-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mg-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
}

/* ──────── Layout primitives ──────── */
.mg-shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mg-section {
  padding: var(--section-y) 0;
}

.mg-divider {
  border: 0;
  height: 1px;
  background: var(--m-hairline);
  margin: 0;
}

/* ──────── Buttons ──────── */
.mg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.4em;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.mg-btn:hover {
  background: var(--m-fg);
  color: var(--m-bg);
  opacity: 1;
}

.mg-btn--primary {
  background: var(--m-electric);
  border-color: var(--m-electric);
  color: var(--m-paper);
}
.mg-btn--primary:hover {
  background: var(--m-fg);
  border-color: var(--m-fg);
  color: var(--m-bg);
}

.mg-btn .mg-arrow {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--t-base) var(--ease);
}
.mg-btn:hover .mg-arrow {
  transform: translateX(0.25em);
}

/* ──────── Tags / chips ──────── */
.mg-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.8em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ──────── Arrow SVG sizing helper ──────── */
.mg-arrow { display: inline-block; }