:root {
  --ug-brand: #09b850;
  --ug-brand-strong: #18df78;
  --ug-brand-deep: #067a3b;
  --ug-ink: #061412;
  --ug-ink-soft: #31433c;
  --ug-muted: #65766f;
  --ug-line: rgba(7, 34, 25, 0.08);
  --ug-line-strong: rgba(18, 191, 95, 0.24);
  --ug-surface: rgba(255, 255, 255, 0.92);
  --ug-surface-strong: rgba(255, 255, 255, 0.98);
  --ug-dark: #06131d;
  --ug-dark-2: #071b24;
  --ug-radius-sm: 14px;
  --ug-radius-md: 20px;
  --ug-radius-lg: 24px;
  --ug-radius-xl: 28px;
  --ug-shadow-card: 0 18px 46px rgba(6, 32, 21, 0.08);
  --ug-shadow-card-hover: 0 24px 60px rgba(6, 32, 21, 0.13);
  --ug-shadow-hero: 0 30px 90px rgba(2, 12, 20, 0.26);
  --ug-page-width: 1120px;
  --ug-section-gap: clamp(58px, 7vw, 88px);
  --ug-header-height: 76px;
  --ug-grid-bg:
    radial-gradient(circle at 16% 4%, rgba(18, 191, 95, 0.11), transparent 27rem),
    radial-gradient(circle at 86% 44%, rgba(18, 191, 95, 0.08), transparent 29rem),
    linear-gradient(rgba(13, 168, 85, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 168, 85, 0.035) 1px, transparent 1px),
    #fbfffd;
}

@media (max-width: 640px) {
  :root {
    --ug-section-gap: 54px;
  }
}