/* =============================================
   VARIABLES.CSS — Agent Web Agency
   ============================================= */
:root {
  --clr-bg:           #07080F;
  --clr-bg-alt:       #0D0F1C;
  --clr-surface:      #111320;
  --clr-surface-2:    #171A2E;
  --clr-border:       rgba(255,255,255,0.07);
  --clr-primary:      #6C63FF;
  --clr-primary-glow: rgba(108,99,255,0.35);
  --clr-accent:       #00E5A0;
  --clr-accent-glow:  rgba(0,229,160,0.25);
  --clr-wa:           #25D366;
  --clr-wa-dark:      #1DA851;
  --clr-text:         #E8EAF6;
  --clr-text-muted:   #8B90B8;
  --font-heading:     'Poppins', sans-serif;
  --font-body:        'Inter', sans-serif;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.25rem;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-full: 9999px;
  --shadow-md:      0 4px 24px rgba(0,0,0,0.4);
  --shadow-primary: 0 0 40px var(--clr-primary-glow);
  --shadow-accent:  0 0 30px var(--clr-accent-glow);
  --transition-fast:   150ms ease;
  --transition-normal: 280ms ease;
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --nav-height:    70px;
}
@media (min-width: 768px)  { :root { --container-pad: 2rem; } }
@media (min-width: 1024px) { :root { --container-pad: 3rem; } }