/* Premium motion layer: subtle, accessible, and independent from page layout. */
:root {
  --arx-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --arx-glow-blue: rgba(10, 79, 204, 0.22);
  --arx-glow-accent: rgba(10, 79, 204, 0.20);
}

.arx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.18);
  transform: translateZ(0);
}

.arx-scroll-progress__bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #0a4fcc, #7fb5ff);
  box-shadow: 0 0 16px rgba(10, 79, 204, 0.28);
  transition: width 120ms linear;
}

.arx-reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--arx-motion-ease),
    transform 620ms var(--arx-motion-ease);
  will-change: opacity, transform;
}

html.arx-motion-ready .arx-reveal {
  opacity: 0;
  transform: translateY(18px);
}

html.arx-motion-ready .arx-reveal.arx-visible {
  opacity: 1;
  transform: translateY(0);
}

.arx-premium-card {
  position: relative;
  transition:
    transform 240ms var(--arx-motion-ease),
    box-shadow 240ms var(--arx-motion-ease),
    border-color 240ms var(--arx-motion-ease),
    background-color 240ms var(--arx-motion-ease);
  will-change: transform;
}

.arx-premium-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(10, 79, 204, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 45%);
  transition: opacity 240ms var(--arx-motion-ease);
}

.arx-premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 46px rgba(7, 19, 43, 0.12);
}

.arx-premium-card:hover::after {
  opacity: 1;
}

.arx-premium-card svg,
.arx-premium-card img {
  transition:
    transform 240ms var(--arx-motion-ease),
    filter 240ms var(--arx-motion-ease);
}

.arx-premium-card:hover svg,
.arx-premium-card:hover img {
  transform: translateY(-1px) scale(1.025);
}

.arx-cta-glow,
.pill-primary,
.btn-blue,
.btn-dark,
.btn-submit,
.nl-btn-link,
.cookie-btn-primary {
  position: relative;
  isolation: isolate;
  transition:
    transform 220ms var(--arx-motion-ease),
    box-shadow 220ms var(--arx-motion-ease),
    filter 220ms var(--arx-motion-ease);
}

.arx-cta-glow::after,
.pill-primary::after,
.btn-blue::after,
.btn-dark::after,
.btn-submit::after,
.nl-btn-link::after,
.cookie-btn-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--arx-glow-blue), var(--arx-glow-accent));
  opacity: 0;
  filter: blur(12px);
  transition: opacity 220ms var(--arx-motion-ease);
}

.arx-cta-glow:hover,
.pill-primary:hover,
.btn-blue:hover,
.btn-dark:hover,
.btn-submit:hover,
.nl-btn-link:hover,
.cookie-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(7, 19, 43, 0.16);
}

.arx-cta-glow:hover::after,
.pill-primary:hover::after,
.btn-blue:hover::after,
.btn-dark:hover::after,
.btn-submit:hover::after,
.nl-btn-link:hover::after,
.cookie-btn-primary:hover::after {
  opacity: 1;
}

.legal-accordion-item.arx-premium-card:hover .legal-accordion-icon,
.service-card.arx-premium-card:hover .service-card-icon,
.privacy-card.arx-premium-card:hover .privacy-card-icon,
.cookie-card.arx-premium-card:hover .cookie-card-icon {
  box-shadow: 0 8px 22px rgba(10, 79, 204, 0.13);
}

@media (prefers-reduced-motion: reduce) {
  .arx-scroll-progress__bar,
  .arx-reveal,
  .arx-premium-card,
  .arx-premium-card::after,
  .arx-premium-card svg,
  .arx-premium-card img,
  .arx-cta-glow,
  .arx-cta-glow::after,
  .pill-primary,
  .pill-primary::after,
  .btn-blue,
  .btn-blue::after,
  .btn-dark,
  .btn-dark::after,
  .btn-submit,
  .btn-submit::after,
  .nl-btn-link,
  .nl-btn-link::after,
  .cookie-btn-primary,
  .cookie-btn-primary::after {
    transition: none;
  }

  .arx-reveal {
    opacity: 1;
    transform: none;
  }

  .arx-premium-card:hover,
  .arx-cta-glow:hover,
  .pill-primary:hover,
  .btn-blue:hover,
  .btn-dark:hover,
  .btn-submit:hover,
  .nl-btn-link:hover,
  .cookie-btn-primary:hover {
    transform: none;
  }
}

/* Scroll progress width classes generated for strict CSP. */
.arx-progress-0 { width: 0%; }
.arx-progress-1 { width: 1%; }
.arx-progress-2 { width: 2%; }
.arx-progress-3 { width: 3%; }
.arx-progress-4 { width: 4%; }
.arx-progress-5 { width: 5%; }
.arx-progress-6 { width: 6%; }
.arx-progress-7 { width: 7%; }
.arx-progress-8 { width: 8%; }
.arx-progress-9 { width: 9%; }
.arx-progress-10 { width: 10%; }
.arx-progress-11 { width: 11%; }
.arx-progress-12 { width: 12%; }
.arx-progress-13 { width: 13%; }
.arx-progress-14 { width: 14%; }
.arx-progress-15 { width: 15%; }
.arx-progress-16 { width: 16%; }
.arx-progress-17 { width: 17%; }
.arx-progress-18 { width: 18%; }
.arx-progress-19 { width: 19%; }
.arx-progress-20 { width: 20%; }
.arx-progress-21 { width: 21%; }
.arx-progress-22 { width: 22%; }
.arx-progress-23 { width: 23%; }
.arx-progress-24 { width: 24%; }
.arx-progress-25 { width: 25%; }
.arx-progress-26 { width: 26%; }
.arx-progress-27 { width: 27%; }
.arx-progress-28 { width: 28%; }
.arx-progress-29 { width: 29%; }
.arx-progress-30 { width: 30%; }
.arx-progress-31 { width: 31%; }
.arx-progress-32 { width: 32%; }
.arx-progress-33 { width: 33%; }
.arx-progress-34 { width: 34%; }
.arx-progress-35 { width: 35%; }
.arx-progress-36 { width: 36%; }
.arx-progress-37 { width: 37%; }
.arx-progress-38 { width: 38%; }
.arx-progress-39 { width: 39%; }
.arx-progress-40 { width: 40%; }
.arx-progress-41 { width: 41%; }
.arx-progress-42 { width: 42%; }
.arx-progress-43 { width: 43%; }
.arx-progress-44 { width: 44%; }
.arx-progress-45 { width: 45%; }
.arx-progress-46 { width: 46%; }
.arx-progress-47 { width: 47%; }
.arx-progress-48 { width: 48%; }
.arx-progress-49 { width: 49%; }
.arx-progress-50 { width: 50%; }
.arx-progress-51 { width: 51%; }
.arx-progress-52 { width: 52%; }
.arx-progress-53 { width: 53%; }
.arx-progress-54 { width: 54%; }
.arx-progress-55 { width: 55%; }
.arx-progress-56 { width: 56%; }
.arx-progress-57 { width: 57%; }
.arx-progress-58 { width: 58%; }
.arx-progress-59 { width: 59%; }
.arx-progress-60 { width: 60%; }
.arx-progress-61 { width: 61%; }
.arx-progress-62 { width: 62%; }
.arx-progress-63 { width: 63%; }
.arx-progress-64 { width: 64%; }
.arx-progress-65 { width: 65%; }
.arx-progress-66 { width: 66%; }
.arx-progress-67 { width: 67%; }
.arx-progress-68 { width: 68%; }
.arx-progress-69 { width: 69%; }
.arx-progress-70 { width: 70%; }
.arx-progress-71 { width: 71%; }
.arx-progress-72 { width: 72%; }
.arx-progress-73 { width: 73%; }
.arx-progress-74 { width: 74%; }
.arx-progress-75 { width: 75%; }
.arx-progress-76 { width: 76%; }
.arx-progress-77 { width: 77%; }
.arx-progress-78 { width: 78%; }
.arx-progress-79 { width: 79%; }
.arx-progress-80 { width: 80%; }
.arx-progress-81 { width: 81%; }
.arx-progress-82 { width: 82%; }
.arx-progress-83 { width: 83%; }
.arx-progress-84 { width: 84%; }
.arx-progress-85 { width: 85%; }
.arx-progress-86 { width: 86%; }
.arx-progress-87 { width: 87%; }
.arx-progress-88 { width: 88%; }
.arx-progress-89 { width: 89%; }
.arx-progress-90 { width: 90%; }
.arx-progress-91 { width: 91%; }
.arx-progress-92 { width: 92%; }
.arx-progress-93 { width: 93%; }
.arx-progress-94 { width: 94%; }
.arx-progress-95 { width: 95%; }
.arx-progress-96 { width: 96%; }
.arx-progress-97 { width: 97%; }
.arx-progress-98 { width: 98%; }
.arx-progress-99 { width: 99%; }
.arx-progress-100 { width: 100%; }

/* Newsletter Banner Icon Dynamic Hover */
.newsletter-banner:hover .nl-icon {
    background: #2563eb !important;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2) !important;
    transform: translateY(-2px);
}
.newsletter-banner:hover .nl-svg {
    stroke: #ffffff !important;
}

/* Mobile Responsive Fixes for Premium Features and Newsletter Banner */
@media (max-width: 768px) {
    .premium-features-split {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin: 40px auto !important;
        padding: 0 15px !important;
    }
    
    .pf-card {
        padding: 20px !important;
    }

    .newsletter-banner {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
        gap: 24px !important;
    }
    
    .newsletter-banner .nl-left {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }
    
    .newsletter-banner .nl-icon {
        margin: 0 auto;
    }
}