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

:root{
  --font: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1256px;
  --hero-pad-bottom: 96px;
  --hero-pad-top: 72px;
  --pad-x: 24px;
  --pad-y: 16px;
  --space: 32px;
  --gap: 12px;
  --radius: 8px;

  --body-size: 18px;
  --body-line: 1.55;
  --h1-size: 40px;
  --h1-weight: 700;
  --moto-text-size: 20px;
  --h2-size: 28px;
  --h2-weight: 700;
  --h2-space-bottom: 22px;

  --text: #eef2ff;
  --accent: #f97316;
  --accent-card-bg: #1f140a;
  --muted: 0.72;

  --btn-text-size: 20px;
  --btn-text-color: #0b1220;
  --btn-py: 16px;
  --btn-px: 32px;

  --icon: 32px;
  --social-icon: 20px;

  --t: 0.45s;
  --scale-hover: 1.04;

  --card-border-width: 1px;
  --card-border-color: rgba(255,255,255,.14);
  --card-bg: rgba(255,255,255,.06);
  --card-pad: 16px;

  --bg-page: linear-gradient(180deg, #0b1220, #0f172a);

  --pattern-size: 44px;
  --pattern-opacity: 0.02;
  --pattern-color: 255 255 255;
  --pattern-icon-size: 48px;
  --pattern-mask: var(--pattern-lines);

  --pattern-lines: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  :root {
    --pattern-icon-size: 32px;
    --pattern-size: 34px;
  }
}