:root{
  --color-bg:#000000;
  --color-overlay:rgba(0, 0, 0, 0.689);
  --color-text:#fff;
  --color-text-2:rgba(255,255,255,.78);
  --color-text-3:rgba(255,255,255,.6);

  --color-accent:#1de9ff;
  --accent-rgb:29,233,255;

  --surface-1:rgba(0, 0, 0, 0.838);
  --surface-2:rgba(12, 1, 1, 0.733);
  --border-1:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.14);

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;

  --radius-md:12px;
  --radius-lg:16px;

  --container:1120px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:140ms;
  --dur-2:220ms;
  --dur-3:320ms;

  --glow-soft:0 10px 40px rgba(var(--accent-rgb),.14);
  --glow-ring:0 0 0 3px rgba(var(--accent-rgb),.22);

  /* Footer */
  --footer-bg:rgba(0, 0, 0, 0);
  --footer-bg-2:rgb(0, 0, 0);
  --footer-bottom-bg:rgba(0,0,0,.24);
  --footer-border:rgba(255,255,255,.10);
  --footer-text:var(--color-text-2);
  --footer-title-size:16px;
  --footer-title-line:24px;

  --grad-accent:radial-gradient(900px 500px at 20% 0%,
    rgba(var(--accent-rgb),.18), transparent 60%);
  --grad-accent-2:radial-gradient(700px 400px at 100% 20%,
    rgba(var(--accent-rgb),.10), transparent 55%);
}