/* JA Digital secondary accent: neon pink. Electric blue stays primary; pink is used only for small accents, never body text on light backgrounds. */
:root { --accent: #FF4FD8; --accent-rgb: 255 79 216; --accent-mid: #A98BFF; }

/* 1. Headline highlight: blue flows smoothly into pink (dark hero only). A violet midpoint keeps the blend from going muddy. */
:root .hero__accent { background: linear-gradient(92deg, #a9c2ff 0%, #7fa3ff 28%, #6a8cff 48%, var(--accent-mid) 70%, #e06bf0 86%, var(--accent) 100%); background: linear-gradient(in oklab 92deg, #a9c2ff 0%, #6f98ff 40%, var(--accent-mid) 70%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 2. Hero glow: a soft pink haze in the top-right corner (original blue layers kept), plus the lower aurora */
:root .hero__bg { background:
  radial-gradient(42% 38% at 96% 4%, rgb(var(--accent-rgb) / 16%), transparent 72%),
  radial-gradient(60% 60% at 82% 38%, rgb(31 91 255 / 52%), transparent 70%),
  radial-gradient(45% 45% at 40% 0%, rgb(77 125 255 / 18%), transparent 70%),
  radial-gradient(45% 45% at 0% 100%, rgb(31 91 255 / 28%), transparent 70%),
  linear-gradient(180deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800)); }
:root .aurora--b { background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 26%), transparent); }
:root .stack__glow { background: radial-gradient(closest-side, rgb(31 91 255 / 70%), rgb(var(--accent-rgb) / 18%) 70%, transparent); }
/* 3. Small decorative elements: kicker rule (longer, smoother blend), service numbers, icon tile spark */
:root .kicker::before { width: 30px; background: linear-gradient(90deg, currentColor 0%, var(--accent-mid) 55%, var(--accent) 100%); background: linear-gradient(in oklab 90deg, currentColor 0%, var(--accent-mid) 50%, var(--accent) 100%); }
:root .service__icon { position: relative; }
:root .service__icon::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 0 12px rgb(var(--accent-rgb) / 70%); }
:root .service:hover .service__num { -webkit-text-stroke-color: var(--accent); }
/* 4. Portfolio details: accent glow in the device panel, smooth accent rule above case titles */
:root .case__visual { background: radial-gradient(80% 80% at 70% 20%, rgb(31 91 255 / 18%), transparent 70%), radial-gradient(45% 45% at 12% 92%, rgb(var(--accent-rgb) / 22%), transparent 70%), linear-gradient(160deg, #eef3ff, #dfe7fb); }
:root .case__body h3::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--accent-mid) 55%, var(--accent) 100%); background: linear-gradient(in oklab 90deg, var(--blue) 0%, var(--accent-mid) 50%, var(--accent) 100%); }
/* 5. Button hover: blue stays, accent appears as an edge glow */
:root .btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 16px 36px -12px rgb(31 91 255 / 85%), 0 0 0 1px rgb(var(--accent-rgb) / 70%), 0 0 22px -4px rgb(var(--accent-rgb) / 55%); }