:root {
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-bg: #fff;
  --color-bg-dark: #0A1B2E;
  --color-accent: #00CFFF;
  --color-accent-alt: #00BFFF;
  --color-hero-text: #FFFFFF;
  --color-telegram: #2AABEE;
  --color-check: #22C55E;
  --color-border: #e5e7eb;

  --benefits-bg: linear-gradient(180deg, rgba(65, 85, 114, 0.15) 0%, rgba(27, 27, 30, 0.1) 100%);
  --benefits-border: 1px solid #415572;
  --benefits-radius: 0.875rem;
  --benefits-width: 33.5rem;
  --benefits-offset-top: 2.5rem;
  --benefits-padding: 1.5rem 1.75rem;
  --benefits-gap: 1rem;
  --benefits-font-size: clamp(0.75rem, 1.2vw + 0.5rem, 0.9375rem);
  --page-grid-gap: 1rem;

  --font-oswald: "Oswald", sans-serif;
  --font-geologica: "Geologica", sans-serif;
  --font-sans: var(--font-geologica);
  --font-heading: var(--font-oswald);
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

  --font-size-base: 16px;
  --line-height-base: 1.5;
  --spacing-unit: 0.5rem;
  --container-max: 75rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --space-page-top: 8rem;
  --space-page-sides: 4rem;
  --title-size: clamp(1.5rem, 4vw + 2rem, 4.125rem);
  --title-line-height: 1.04;
  --title-max-width: 34.125rem;

  --subtitle-size: clamp(1.5rem, 2.5vw + 1.5rem, 2.5625rem);
  --subtitle-line-height: 1;
  --subtitle-spacing: 1.25rem;
  --lead-size: clamp(1rem, 1.5vw + 0.75rem, 1.5rem);
  --lead-line-height: 1;
  --lead-spacing: 1.25rem;

  --btn-radius: 1.75rem;
  --btn-font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
  --btn-line-height: 1.04;
  --btn-icon-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
  --btn-gap: 0.75rem;
  --btn-padding-y: 1rem;
  --btn-padding-x: 2rem;
  --btn-margin-top: 4rem;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  --anim-duration: 0.6s;
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(calc(var(--spacing-unit) * 2), 1rem);
  padding-right: max(calc(var(--spacing-unit) * 2), 1rem);
}

.mt-1 { margin-top: var(--spacing-unit); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
.mb-1 { margin-bottom: var(--spacing-unit); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }