@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --w-navy:        #3D4A8C;
  --w-navy-deep:   #2F3A6E;
  --w-navy-soft:   #5969AE;
  --w-ink:         #473F40;
  --w-ink-soft:    #6B6063;
  --w-mist:        #F4F2EE;
  --w-mist-2:      #ECE8E1;
  --w-paper:       #FFFFFF;
  --w-line:        #E2DDD4;
  --w-line-strong: #C8C0B3;
  --w-accent:      #E84E1B;
  --w-accent-soft: #F2B5A0;
  --w-yellow:      #F2C94C;
  --w-green:       #4FB286;
  --w-violet:      #8E7CC3;
  --w-rose:        #D86F8A;

  --w-font-display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --w-font-ui:      "Raleway", "Helvetica Neue", system-ui, sans-serif;

  --w-radius-sm: 4px;
  --w-radius:    8px;
  --w-radius-lg: 14px;
}

.w-eyebrow {
  font-family: var(--w-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--w-ink-soft);
}

.w-display {
  font-family: var(--w-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--w-ink);
}

.w-cta {
  font-family: var(--w-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

@keyframes w-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes w-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes w-spin {
  to { transform: rotate(360deg); }
}

@keyframes w-grow {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

@keyframes w-slide-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}