/* ==========================================================================
   Alphastar Media — Design Tokens
   Dark luxury digital-agency system: blue / cyan / orange on near-black.
   ========================================================================== */

:root {
  /* ---- Brand color ---- */
  --color-primary: #04ACEC;
  --color-primary-rgb: 4, 172, 236;
  --color-primary-2: #4FD8FF;
  --color-secondary: #F46424;
  --color-secondary-rgb: 244, 100, 36;
  --color-dark: #0B1220;
  --color-dark-rgb: 11, 18, 32;
  --color-bg: #05070B;
  --color-bg-rgb: 5, 7, 11;
  --color-text: #FFFFFF;
  --color-muted: #9AA6B2;
  --color-muted-2: #6B7684;

  /* ---- Surfaces / borders (glassmorphism) ---- */
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --glass-bg: rgba(11, 18, 32, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(120deg, #04ACEC 0%, #2FC6FF 45%, #F46424 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(4,172,236,0.9), rgba(47,198,255,0.85) 45%, rgba(244,100,36,0.9));
  --gradient-text: linear-gradient(95deg, #6FE1FF 0%, #04ACEC 35%, #F46424 100%);
  --gradient-hero: radial-gradient(1100px 640px at 12% -10%, rgba(4,172,236,0.28), transparent 60%),
                   radial-gradient(900px 560px at 92% 8%, rgba(244,100,36,0.24), transparent 55%),
                   radial-gradient(1200px 800px at 50% 120%, rgba(4,172,236,0.14), transparent 60%),
                   var(--color-bg);
  --gradient-card: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  --gradient-cta: linear-gradient(120deg, #04ACEC 0%, #0B84D6 50%, #F46424 100%);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-pad: clamp(72px, 11vw, 148px);

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---- Shadow / glow ---- */
  --glow-blue: 0 0 1px rgba(4,172,236,0.6), 0 20px 60px rgba(4,172,236,0.18);
  --glow-orange: 0 0 1px rgba(244,100,36,0.6), 0 20px 60px rgba(244,100,36,0.16);
  --shadow-card: 0 30px 80px rgba(0,0,0,0.45);
  --shadow-pop: 0 12px 30px rgba(0,0,0,0.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16, .84, .44, 1);
  --ease-out-back: cubic-bezier(.2, 1.1, .3, 1.2);
  --dur-fast: .22s;
  --dur-med: .45s;
  --dur-slow: .8s;
}