/* ================================================================
   design-premium.css — Visual polish layer
   Loaded last, overrides selectively for max impact
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   SCROLLBAR
   ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #020817; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,0.55), rgba(34,211,238,0.35));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99,102,241,0.75), rgba(34,211,238,0.55));
}

::selection { background: rgba(139,92,246,0.28); color: #fff; }

/* ────────────────────────────────────────────────────────────────
   GLOBAL TOKEN OVERRIDES
   ──────────────────────────────────────────────────────────────── */
:root {
  --accent-glow: 0 0 40px rgba(99,102,241,0.35);
  --card-hover-shadow: 0 32px 72px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.15);
  --btn-primary-bg: linear-gradient(135deg, #4f46e5 0%, #2563eb 45%, #0891b2 100%);
}

/* ────────────────────────────────────────────────────────────────
   GRADIENT TEXT — more electric
   ──────────────────────────────────────────────────────────────── */
.grad,
.hero-h1 .grad,
.cta-inner h2 .grad,
.page-hero h1 .grad,
.section-title .grad {
  background: linear-gradient(135deg, #e0f2fe 0%, #93c5fd 22%, #818cf8 48%, #a78bfa 65%, #f472b6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 300% 300% !important;
  animation: gradShift 10s ease infinite !important;
}

/* ────────────────────────────────────────────────────────────────
   SECTION LABELS — pill with glow dot
   ──────────────────────────────────────────────────────────────── */
.section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.3rem 0.9rem !important;
  border: 1px solid rgba(139,92,246,0.28) !important;
  border-radius: 99px !important;
  background: rgba(99,102,241,0.07) !important;
  backdrop-filter: blur(8px) !important;
  color: #c4b5fd !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 1.1rem !important;
}

.section-label::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #a78bfa, #60a5fa) !important;
  box-shadow: 0 0 8px rgba(167,139,250,0.7) !important;
  flex-shrink: 0 !important;
  animation: blink 2.5s ease infinite !important;
}

/* ────────────────────────────────────────────────────────────────
   HERO SECTION
   ──────────────────────────────────────────────────────────────── */
.hero-eyebrow {
  color: #93c5fd !important;
  border-color: rgba(147,197,253,0.22) !important;
  background: rgba(6,14,36,0.75) !important;
}

.hero-h1 {
  font-size: clamp(3.1rem, 5.5vw, 5.8rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
}

/* Sub-headline */
.hero-sub {
  color: rgba(226,232,240,0.7) !important;
  font-size: clamp(1rem, 1.3vw, 1.16rem) !important;
  line-height: 1.8 !important;
}

/* Hero proof chips */
.hero-proof span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(226,232,240,0.68) !important;
  border-radius: 999px !important;
}

.hero-proof span::before {
  background: linear-gradient(135deg, #34d399, #06b6d4) !important;
  box-shadow: 0 0 10px rgba(52,211,153,0.5) !important;
}

/* Trust industry chips */
.hero-trust-item {
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(226,232,240,0.6) !important;
}

/* Hero stat cards */
.hero-stat {
  background: linear-gradient(160deg, rgba(99,102,241,0.08), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(139,92,246,0.18) !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
}

.hero-stat::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(34,211,238,0.3), transparent) !important;
}

.hero-stat:hover {
  border-color: rgba(139,92,246,0.3) !important;
  background: linear-gradient(160deg, rgba(99,102,241,0.13), rgba(255,255,255,0.04)) !important;
  transform: translateY(-2px) !important;
}

.hero-stat .num {
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #93c5fd 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ────────────────────────────────────────────────────────────────
   ANNOUNCE PILL
   ──────────────────────────────────────────────────────────────── */
.announce-pill {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
}

.announce-new {
  background: linear-gradient(135deg, #4f46e5, #0891b2) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.announce-text { color: rgba(226,232,240,0.7) !important; }

/* ────────────────────────────────────────────────────────────────
   BUTTONS — premium glow
   ──────────────────────────────────────────────────────────────── */
.btn-glow.primary {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 50%, #0891b2 100%) !important;
  background-size: 200% 200% !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 8px 36px rgba(37,99,235,0.45),
    0 0 80px rgba(79,70,229,0.18) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.25s ease !important;
}

.btn-glow.primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 12px 52px rgba(37,99,235,0.6),
    0 0 130px rgba(79,70,229,0.32) !important;
  transform: translateY(-3px) scale(1.015) !important;
}

.btn-glow.secondary {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

.btn-glow.secondary:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(139,92,246,0.4) !important;
  box-shadow: 0 0 32px rgba(139,92,246,0.14), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transform: translateY(-2px) !important;
}

/* Nav buttons */
.nav-btn.primary {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(79,70,229,0.3) !important;
}
.nav-btn.primary:hover {
  box-shadow: 0 0 35px rgba(79,70,229,0.5) !important;
}

/* ────────────────────────────────────────────────────────────────
   SERVICES BENTO
   ──────────────────────────────────────────────────────────────── */
.bento {
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* Featured cell top accent */
.bento-cell.bc-1::after {
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.7), rgba(34,211,238,0.4), transparent) !important;
  opacity: 1 !important;
}

.bento-cell.bc-1 {
  background: linear-gradient(180deg, rgba(99,102,241,0.06), var(--bg2)) !important;
}

.bento-num {
  color: rgba(139,92,246,0.55) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}

.bento-cell:hover .bento-title {
  background: linear-gradient(135deg, #e0e7ff, #c4b5fd) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.btag {
  border-color: rgba(139,92,246,0.18) !important;
  color: rgba(196,181,253,0.65) !important;
  background: rgba(99,102,241,0.05) !important;
}

.bento-cell:hover .btag {
  border-color: rgba(139,92,246,0.38) !important;
  color: #c4b5fd !important;
  background: rgba(99,102,241,0.1) !important;
}

.bento-arrow { color: #a78bfa !important; }
.bento-cell:hover .bento-arrow { color: #67e8f9 !important; }

/* ────────────────────────────────────────────────────────────────
   AI CHECKLIST
   ──────────────────────────────────────────────────────────────── */
.check-icon {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(34,211,238,0.1)) !important;
  border-color: rgba(99,102,241,0.3) !important;
  color: #c4b5fd !important;
}

.ai-checklist li:hover .check-icon {
  background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(34,211,238,0.18)) !important;
  border-color: rgba(139,92,246,0.5) !important;
  box-shadow: 0 0 14px rgba(139,92,246,0.25) !important;
}

/* ────────────────────────────────────────────────────────────────
   TECH GRID
   ──────────────────────────────────────────────────────────────── */
.tech-grid { border-radius: 24px !important; }

.tech-item:hover { background: rgba(8,12,28,1) !important; }

.tech-item:hover .tech-name { color: #c4b5fd !important; }

.tech-item::before {
  background: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.14), transparent 70%) !important;
}

/* ────────────────────────────────────────────────────────────────
   TESTIMONIALS
   ──────────────────────────────────────────────────────────────── */
.testi-grid { gap: 1.25rem !important; }

.testi-card {
  border-radius: 24px !important;
  background: rgba(6,9,22,0.88) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 2.5rem 2.25rem !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer top line */
.testi-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(34,211,238,0.3), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.4s !important;
}

/* Large decorative quote */
.testi-card::after {
  content: '"' !important;
  position: absolute !important;
  top: 1rem !important;
  right: 1.5rem !important;
  font-size: 7rem !important;
  line-height: 1 !important;
  font-family: Georgia, serif !important;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(34,211,238,0.08)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  pointer-events: none !important;
  transition: opacity 0.4s !important;
}

.testi-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(139,92,246,0.25) !important;
  background: rgba(8,12,28,0.96) !important;
  box-shadow: 0 32px 70px rgba(0,0,0,0.5), 0 0 48px rgba(139,92,246,0.1) !important;
}

.testi-card:hover::before { opacity: 1 !important; }

.testi-stars {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
}

.testi-quote {
  color: rgba(226,232,240,0.84) !important;
  font-style: normal !important;
  font-size: 0.92rem !important;
  line-height: 1.78 !important;
  position: relative !important;
  z-index: 1 !important;
}

.tav-name { color: #f1f5f9 !important; font-weight: 700 !important; }
.tav-role { color: rgba(196,181,253,0.65) !important; }

/* Avatar colours */
.tav1 { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; }
.tav2 { background: linear-gradient(135deg, #0891b2, #4f46e5) !important; }
.tav3 { background: linear-gradient(135deg, #7c3aed, #db2777) !important; }
.tav4 { background: linear-gradient(135deg, #db2777, #ea580c) !important; }

/* ────────────────────────────────────────────────────────────────
   BLOG CARDS
   ──────────────────────────────────────────────────────────────── */
.blog-grid { gap: 1.25rem !important; }

.blog-card {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

.blog-card:hover {
  transform: translateY(-9px) !important;
  border-color: rgba(139,92,246,0.28) !important;
  box-shadow: 0 36px 80px rgba(0,0,0,0.5), 0 0 48px rgba(139,92,246,0.1) !important;
}

.blog-cat {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.22rem 0.7rem !important;
  background: rgba(99,102,241,0.09) !important;
  border: 1px solid rgba(139,92,246,0.22) !important;
  border-radius: 99px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
  color: #c4b5fd !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.blog-card:hover .blog-title { color: #c4b5fd !important; }
.blog-read { color: #a78bfa !important; }
.blog-card:hover .blog-read { color: #67e8f9 !important; }

/* ────────────────────────────────────────────────────────────────
   ONGOING WORK / PROJECT CARDS
   ──────────────────────────────────────────────────────────────── */
.ongoing-grid { gap: 1.25rem !important; }

.ow-card {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.ow-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(139,92,246,0.25) !important;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 50px rgba(139,92,246,0.12) !important;
}

.ow-card::before {
  background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(34,211,238,0.3), rgba(167,139,250,0.2)) !important;
}

.ow-status {
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.08) !important;
  border-color: rgba(52,211,153,0.22) !important;
  font-weight: 600 !important;
}

.ow-title { color: #f1f5f9 !important; }

/* Progress bar colour */
.ow-progress-fill {
  background: linear-gradient(90deg, #4f46e5, #06b6d4) !important;
}

/* ────────────────────────────────────────────────────────────────
   MARQUEE
   ──────────────────────────────────────────────────────────────── */
.marquee-item { color: rgba(226,232,240,0.35) !important; }
.marquee-item:hover { color: #c4b5fd !important; }
.marquee-item::before {
  background: linear-gradient(135deg, #a78bfa, #67e8f9) !important;
  box-shadow: 0 0 6px rgba(167,139,250,0.5) !important;
}

/* ────────────────────────────────────────────────────────────────
   CTA SECTION — spotlight drama
   ──────────────────────────────────────────────────────────────── */
.cta-section {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(8,12,28,0.95) 0%, #070b1d 50%, rgba(8,12,28,0.95) 100%) !important;
}

.cta-section::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 800px !important;
  height: 800px !important;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(34,211,238,0.07) 40%, transparent 72%) !important;
  pointer-events: none !important;
  animation: ctaGlow 7s ease-in-out infinite !important;
}

/* Horizontal light bar at top of CTA */
.cta-section::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.5), rgba(34,211,238,0.3), transparent) !important;
  pointer-events: none !important;
}

@keyframes ctaGlow {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.cta-inner h2 {
  font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.036em !important;
  font-weight: 800 !important;
}

.cta-inner p {
  color: rgba(226,232,240,0.68) !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
}

/* ────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, rgba(6,10,20,0.98), #020817) !important;
}

.footer-cta {
  border-color: rgba(99,102,241,0.2) !important;
  background: radial-gradient(circle at 80% 20%, rgba(139,92,246,0.12), transparent 55%),
              rgba(255,255,255,0.03) !important;
}

.footer-cta-label { color: #f1f5f9 !important; }

/* Social icons hover */
.footer-social-link:hover {
  color: #c4b5fd !important;
  border-color: rgba(139,92,246,0.4) !important;
  background: rgba(99,102,241,0.1) !important;
  box-shadow: 0 0 20px rgba(139,92,246,0.2) !important;
}

/* ────────────────────────────────────────────────────────────────
   NAV — polished
   ──────────────────────────────────────────────────────────────── */
.nav-links a:hover,
.nav-links a.active {
  color: #c4b5fd !important;
}

.nav-links a::after {
  background: linear-gradient(90deg, #a78bfa, #67e8f9) !important;
}

/* ────────────────────────────────────────────────────────────────
   REVEAL ANIMATIONS — snappier
   ──────────────────────────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition-duration: 0.7s !important;
  transition-timing-function: cubic-bezier(0.16,1,0.3,1) !important;
}

/* ────────────────────────────────────────────────────────────────
   HERO DASHBOARD CARD — more premium
   ──────────────────────────────────────────────────────────────── */
.hv-card {
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 80px rgba(99,102,241,0.12) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

.hvc-fill {
  background: linear-gradient(90deg, #4f46e5, #06b6d4) !important;
}

.hvc-fill-cyan {
  background: linear-gradient(90deg, #06b6d4, #34d399) !important;
}

.hvc-fill-amber {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

.hvc-badge.hvc-green {
  background: rgba(52,211,153,0.12) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52,211,153,0.2) !important;
}

.hvc-badge.hvc-amber {
  background: rgba(245,158,11,0.1) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245,158,11,0.2) !important;
}

/* Sparkline bars */
.hvc-spark span {
  background: linear-gradient(0deg, rgba(99,102,241,0.4), #818cf8) !important;
}

/* Float badges */
.float-badge {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(6,9,22,0.9) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ────────────────────────────────────────────────────────────────
   AI SECTION TERMINAL
   ──────────────────────────────────────────────────────────────── */
.ai-terminal {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5) !important;
}

.ai-float-card {
  border-radius: 18px !important;
  border: 1px solid rgba(52,211,153,0.18) !important;
  background: rgba(8,16,36,0.94) !important;
}

/* ────────────────────────────────────────────────────────────────
   BENTO ICON MARKS — coloured icons for service cells
   ──────────────────────────────────────────────────────────────── */
.icon-mark, .bento-icon, .ow-icon {
  filter: drop-shadow(0 0 12px rgba(139,92,246,0.4)) !important;
}

.bento-cell:hover .icon-mark,
.bento-cell:hover .bento-icon {
  filter: drop-shadow(0 0 20px rgba(139,92,246,0.65)) !important;
}

/* ────────────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR
   ──────────────────────────────────────────────────────────────── */
.scroll-progress {
  background: linear-gradient(90deg, #4f46e5, #818cf8, #06b6d4) !important;
  box-shadow: 0 0 12px rgba(99,102,241,0.6) !important;
}

/* ────────────────────────────────────────────────────────────────
   LIGHT MODE OVERRIDES
   ──────────────────────────────────────────────────────────────── */
html.light-mode .grad {
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 40%, #0891b2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light-mode .section-label {
  border-color: rgba(99,102,241,0.25) !important;
  background: rgba(99,102,241,0.06) !important;
  color: #4f46e5 !important;
}

html.light-mode .section-label::before {
  background: linear-gradient(135deg, #4f46e5, #0891b2) !important;
}

html.light-mode .btn-glow.primary {
  box-shadow: 0 4px 24px rgba(79,70,229,0.28) !important;
}

html.light-mode .testi-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,30,0.1) !important;
  box-shadow: 0 4px 24px rgba(0,0,40,0.08) !important;
}

html.light-mode .testi-quote {
  color: rgba(15,23,42,0.8) !important;
}

html.light-mode .testi-stars {
  -webkit-text-fill-color: initial !important;
  color: #f59e0b !important;
  background: none !important;
}

html.light-mode .blog-cat {
  background: rgba(99,102,241,0.08) !important;
  border-color: rgba(99,102,241,0.2) !important;
  color: #4f46e5 !important;
}

html.light-mode .bento-num { color: rgba(79,70,229,0.55) !important; }

html.light-mode .hero-stat {
  background: linear-gradient(160deg, rgba(99,102,241,0.05), rgba(255,255,255,0.5)) !important;
  border-color: rgba(99,102,241,0.2) !important;
}

html.light-mode .marquee-item { color: rgba(15,23,42,0.4) !important; }
html.light-mode .marquee-item:hover { color: #4f46e5 !important; }

html.light-mode .ow-card {
  border-color: rgba(0,0,30,0.1) !important;
}

html.light-mode .blog-card:hover .blog-title { color: #4f46e5 !important; }
html.light-mode .bento-cell:hover .bento-title {
  background: linear-gradient(135deg, #4f46e5, #0891b2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ────────────────────────────────────────────────────────────────
   REDUCED MOTION — respect user preference
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  @keyframes ctaGlow { from, to { opacity: 0.9; } }
  @keyframes gradShift { from, to { background-position: 0% 50%; } }
}