:root {
    --ayasend-blue: #007BFF;      /* Brand blue - matches "Best Overall" card */
    --brand-cyan-start: #00E5FF;  /* Gradient start */
    --brand-cyan-accent: #22D3EE; /* Fee color */
  }
  
  /* Fee values - unified AyaSend cyan across ALL providers */
  .fee-value,
  .rate-card .fee .value,
  .quote-card .fee-value,
  .fee .amount,
  .fee strong,
  .provider-fee,
  .fee-amount {
    color: #00B8FF !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: -0.2px !important;
  }
  
  /* FREE badge styling - premium look */
  .fee-free,
  .badge-free,
  span:contains("FREE") {
    background-color: rgba(0, 184, 255, 0.1) !important;
    color: #00B8FF !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    display: inline-block !important;
    animation: freeShimmer 3s ease-in-out infinite alternate !important;
  }
  
  /* Subtle shimmer on FREE badges */
  @keyframes freeShimmer {
    0%   { background-color: rgba(0, 184, 255, 0.1); box-shadow: 0 0 0 rgba(0, 184, 255, 0); }
    50%  { background-color: rgba(0, 184, 255, 0.15); box-shadow: 0 0 8px rgba(0, 184, 255, 0.25); }
    100% { background-color: rgba(0, 184, 255, 0.1); box-shadow: 0 0 0 rgba(0, 184, 255, 0); }
  }
  
  /* Dark mode fee colors */
  html.dark .fee-value,
  html.dark .rate-card .fee .value,
  html.dark .quote-card .fee-value,
  html.dark .fee .amount,
  html.dark .provider-fee {
    color: #00E5FF !important;
  }
  
  html.dark .fee-free,
  html.dark .badge-free {
    background-color: rgba(0, 229, 255, 0.15) !important;
    color: #00E5FF !important;
  }
  
  /* Accessibility: reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .fee-free,
    .badge-free {
      animation: none !important;
    }
  }
  
  /* Send Now buttons - PREMIUM gradient with GLOW effect */
  .btn-primary,
  .send-now-btn,
  button.btn-send,
  .btn-remitly,
  .button-send,
  .cta-remitly {
    background: linear-gradient(90deg, #0096FF 0%, #0050E0 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    box-shadow: 0 10px 28px rgba(0, 150, 255, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Soft glow hover effect - blue aura */
  .btn-primary:hover,
  .send-now-btn:hover,
  .btn-remitly:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
      0 0 25px 6px rgba(0, 150, 255, 0.35),
      0 14px 32px rgba(0, 150, 255, 0.45) !important;
  }
  
  /* Pressed effect */
  .btn-primary:active,
  .send-now-btn:active,
  .btn-remitly:active {
    transform: translateY(0) !important;
    box-shadow: 0 6px 18px rgba(0, 150, 255, 0.25) !important;
    opacity: 0.95 !important;
  }
  
  /* Optional animated blue pulse - add .glow class to enable */
  @keyframes glowPulse {
    0%   { box-shadow: 0 0 18px rgba(0, 150, 255, 0.25), 0 10px 28px rgba(0, 150, 255, 0.35); }
    50%  { box-shadow: 0 0 30px rgba(0, 150, 255, 0.55), 0 10px 28px rgba(0, 150, 255, 0.35); }
    100% { box-shadow: 0 0 18px rgba(0, 150, 255, 0.25), 0 10px 28px rgba(0, 150, 255, 0.35); }
  }
  .btn-primary.glow,
  .send-now-btn.glow,
  .btn-remitly.glow {
    animation: glowPulse 2.5s infinite ease-in-out !important;
  }
  
  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .btn-primary.glow,
    .send-now-btn.glow,
    .btn-remitly.glow {
      animation: none !important;
    }
  }
  
  /* Language toggle - Blue gradient background with animated glow */
  .lang-btn-active,
  .lang-btn-inactive {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #007BFF, #005DFF) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 6px rgba(0, 102, 255, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Hover effect for language buttons */
  .lang-btn-active:hover,
  .lang-btn-inactive:hover {
    background: linear-gradient(135deg, #0066FF, #004CFF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 102, 255, 0.3) !important;
  }
  
  /* Active button (selected language) with animated glow */
  .lang-btn-active {
    background: linear-gradient(135deg, #0050E0, #0038B0) !important;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.45) !important;
    animation: blueGlow 2.5s ease-in-out infinite alternate !important;
  }
  
  /* Animated glow around active button */
  @keyframes blueGlow {
    from {
      box-shadow: 0 0 10px rgba(0, 102, 255, 0.4),
                  0 0 20px rgba(0, 102, 255, 0.3);
    }
    to {
      box-shadow: 0 0 15px rgba(0, 140, 255, 0.6),
                  0 0 25px rgba(0, 140, 255, 0.4);
    }
  }
  
  /* Dark mode glow */
  html.dark .lang-btn-active {
    animation: blueGlowDark 2.5s ease-in-out infinite alternate !important;
  }
  
  @keyframes blueGlowDark {
    from {
      box-shadow: 0 0 8px rgba(0, 160, 255, 0.5),
                  0 0 18px rgba(0, 160, 255, 0.35);
    }
    to {
      box-shadow: 0 0 12px rgba(0, 190, 255, 0.65),
                  0 0 22px rgba(0, 190, 255, 0.4);
    }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .lang-btn-active,
    .theme-btn.active {
      animation: none !important;
    }
  }
  
  /* Shared toggle group styles (Language + Theme) */
  .toggle-group {
    display: inline-flex;
    gap: 8px;
    background-color: #F1F5F9;
    border-radius: 12px;
    padding: 6px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  html.dark .toggle-group {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.3);
  }
  
  /* Theme toggle buttons - matching language toggle style */
  .theme-btn {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #007BFF, #005DFF) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 6px rgba(0, 102, 255, 0.25) !important;
    position: relative !important;
    outline: none !important;
  }
  
  /* Hover + focus */
  .theme-btn:hover,
  .theme-btn:focus-visible {
    background: linear-gradient(135deg, #0066FF, #004CFF) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 102, 255, 0.3), 0 0 0 3px rgba(0, 102, 255, 0.25) !important;
  }
  
  /* Active theme button with animated glow */
  .theme-btn.active {
    background: linear-gradient(135deg, #0050E0, #0038B0) !important;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.45) !important;
    animation: blueGlow 2.5s ease-in-out infinite alternate !important;
  }
  
  /* Mobile adjustments */
  @media (max-width: 480px) {
    .toggle-group {
      padding: 4px;
      gap: 6px;
    }
    .theme-btn,
    .lang-btn-active,
    .lang-btn-inactive {
      font-size: 14px !important;
      padding: 6px 14px !important;
    }
  }
  
  /* "Africa" text in hero - same AyaSend blue with subtle animation */
  .hero h1 .accent,
  .hero h1 em,
  .highlight-africa {
    color: var(--ayasend-blue) !important;
    font-weight: 800 !important;
    position: relative;
  }
  
  /* Animated gradient shimmer on "Africa" text */
  .highlight-africa--animated {
    background: linear-gradient(90deg, var(--ayasend-blue), #00B8FF, var(--ayasend-blue)) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: africaShimmer 6s linear infinite !important;
  }
  
  /* Sliding underline effect */
  .highlight-africa--animated::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15em;
    height: 2px;
    width: 36%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ayasend-blue), #00B8FF);
    opacity: 0.9;
    animation: africaUnderline 3.8s ease-in-out infinite alternate;
  }
  
  /* Animation keyframes */
  @keyframes africaShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  
  @keyframes africaUnderline {
    0%   { transform: translateX(0%);   width: 28%; }
    100% { transform: translateX(180%); width: 36%; }
  }
  
  /* Accessibility: respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .highlight-africa--animated,
    .highlight-africa--animated::after {
      animation: none !important;
      background-position: 50% 50%;
    }
    .highlight-africa--animated {
      color: var(--ayasend-blue) !important;
      background: none !important;
    }
  }
  
  /* Dark mode enhancement */
  html.dark .highlight-africa,
  html.dark .highlight-africa--animated {
    filter: saturate(110%);
  }
  
  /* Country picker - white background */
  .country-trigger,
  .country-select {
    background: #fff !important;
  }
  html.dark .country-trigger,
  html.dark .country-select {
    background: #0E1526 !important;
  }
  
  /* Amount Input Container - Fixed $ with Centered Number */
  .amount-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--row-h);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }
  
  /* Fixed $ symbol on left - Non-editable */
  .currency-symbol {
    position: absolute;
    left: var(--row-pad-x);
    color: #94A3B8;
    font-size: 16px;
    font-weight: 500;
    pointer-events: none;
    z-index: 2;
  }
  html.dark .currency-symbol {
    color: #CBD5E1;
  }
  
  /* Input field - Perfectly centered */
  .amount-input,
  input#amount-input,
  input[name="amount"] {
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #0F172A !important;
    height: 100% !important;
    padding: 0 var(--row-pad-x) !important;
    padding-left: 40px !important;
    box-sizing: border-box !important;
    outline: none !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0.3px !important;
  }
  html.dark .amount-input,
  html.dark input#amount-input {
    color: #F9FAFB !important;
  }
  
  /* Remove browser spinners on number inputs */
  .amount-input::-webkit-outer-spin-button,
  .amount-input::-webkit-inner-spin-button,
  input#amount-input::-webkit-outer-spin-button,
  input#amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .amount-input[type="number"],
  input#amount-input[type="number"] {
    -moz-appearance: textfield;
  }
  
  /* Focus effect - blue accent */
  .amount-input:focus {
    outline: none;
    border: none;
  }
  
  .amount-input-container:focus-within {
    border-color: #1677ff;
    box-shadow: 0 0 0 4px rgba(22,119,255,0.12);
  }
  
  /* Dark mode container */
  html.dark .amount-input-container {
    background-color: #1a2332;
    border-color: #334155;
  }
  
  /* Placeholder styling */
  .amount-input::placeholder,
  input#amount-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
  }
  
  /* Mobile responsive typography - keep consistent on small phones */
  @media (max-width: 390px) {
    .amount-input,
    input#amount-input {
      font-size: 16px !important;
    }
    .amount-input-container {
      height: 52px;
    }
  }
  
  /* Enhanced dark mode contrast */
  html.dark .amount-input-container {
    background-color: #0b1220;
    border-color: #233049;
  }
  html.dark .amount-input,
  html.dark input#amount-input {
    color: #E6EDF7 !important;
  }
  html.dark .currency-symbol {
    color: #7D8AA6;
  }
  
  /* ========== REUSABLE PREMIUM GLOW SYSTEM ========== */
  .glow-focus {
    transition: all 0.25s ease;
    box-sizing: border-box;
  }
  
  .glow-focus:hover {
    border-color: #93C5FD !important;
    box-shadow: 0 0 0 2px rgba(147,197,253,0.30) !important;
  }
  
  .glow-focus:focus,
  .glow-focus:focus-visible,
  .glow-focus:focus-within {
    border-color: #3B82F6 !important;
    box-shadow:
      0 0 0 4px rgba(59,130,246,0.25) !important,
      0 0 18px rgba(59,130,246,0.18) !important;
    outline: none !important;
    transform: translateZ(0) scale(1.01);
  }
  
  .glow-focus:not(:focus):not(:focus-within) {
    transform: scale(1);
  }
  
  /* Dark mode glow adjustments */
  html.dark .glow-focus:hover {
    border-color: #60A5FA !important;
  }
  html.dark .glow-focus:focus,
  html.dark .glow-focus:focus-visible,
  html.dark .glow-focus:focus-within {
    box-shadow:
      0 0 0 4px rgba(59,130,246,0.30) !important,
      0 0 22px rgba(59,130,246,0.20) !important;
  }
  
  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .glow-focus,
    .glow-focus:hover,
    .glow-focus:focus,
    .glow-focus:focus-within {
      transition: border-color .15s ease, box-shadow .15s ease;
      transform: none !important;
    }
  }
  
  /* Primary CTA button glow (Send with Remitly) */
  .btn-provider {
    transition: box-shadow .25s ease, transform .25s ease !important;
    will-change: transform, box-shadow;
  }
  
  .btn-provider:hover {
    box-shadow:
      0 8px 24px rgba(59,130,246,0.28),
      0 2px 6px rgba(0,0,0,0.08) !important;
    transform: translateY(-1px) !important;
  }
  
  .btn-provider:focus,
  .btn-provider:focus-visible {
    outline: none !important;
    box-shadow:
      0 0 0 4px rgba(59,130,246,0.25),
      0 10px 28px rgba(59,130,246,0.32) !important;
    transform: translateY(-1px) scale(1.01) !important;
  }
  
  /* ========== TAP / ACTIVE INNER GLOW (Mobile + Desktop) ========== */
  .glow-focus:active,
  .btn-provider:active,
  .btn-primary:active,
  .primary-cta:active {
    transform: translateY(0) scale(0.995) !important;
    box-shadow:
      inset 0 0 0 2px rgba(59,130,246,0.35),
      0 0 0 4px rgba(59,130,246,0.22),
      0 8px 22px rgba(59,130,246,0.18) !important;
  }
  
  /* Class used by JS for better iOS/Android tap feedback */
  .tap-active {
    transform: translateY(0) scale(0.995) !important;
    box-shadow:
      inset 0 0 0 2px rgba(59,130,246,0.40),
      0 0 0 4px rgba(59,130,246,0.26),
      0 10px 26px rgba(59,130,246,0.20) !important;
  }
  
  /* ========== KEYBOARD-ONLY FOCUS RING (WCAG-friendly) ========== */
  .glow-focus:focus-visible,
  .btn-provider:focus-visible,
  .btn-primary:focus-visible,
  .primary-cta:focus-visible {
    outline: none !important;
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 6px rgba(59,130,246,0.70),
      0 10px 28px rgba(59,130,246,0.28) !important;
  }
  
  /* Dark mode focus contrast */
  html.dark .glow-focus:focus-visible,
  html.dark .btn-provider:focus-visible,
  html.dark .btn-primary:focus-visible,
  html.dark .primary-cta:focus-visible {
    box-shadow:
      0 0 0 3px #0B1220,
      0 0 0 6px rgba(59,130,246,0.80),
      0 10px 30px rgba(59,130,246,0.30) !important;
  }
  
  /* Bigger tap target on mobile */
  @media (max-width: 768px) {
    .btn-provider,
    .btn-primary,
    .primary-cta {
      min-height: 48px;
    }
  }
  
  /* Uniform form labels - consistent sizing with interactive accents */
  .field-label,
  .form-label,
  label.field-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 6px !important;
    display: block !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
  }
  html.dark .field-label,
  html.dark .form-label,
  html.dark label.field-label {
    color: #e5e7eb !important;
  }
  
  /* Label accent on hover/focus - AyaSend blue glow */
  .form-field:hover > .field-label,
  .input-group:hover > label,
  .field-wrapper:hover > label,
  .form-field:focus-within > .field-label,
  .input-group:focus-within > label,
  .field-wrapper:focus-within > label {
    color: #0066FF !important;
    transform: translateY(-1px) !important;
    text-shadow: 0 0 8px rgba(0, 102, 255, 0.25) !important;
  }
  html.dark .form-field:hover > .field-label,
  html.dark .form-field:focus-within > .field-label {
    color: #0096FF !important;
  }
  
  /* Consistent vertical spacing between form fields */
  .form-field,
  .input-group,
  .field-wrapper {
    margin-bottom: 18px;
  }
  
  /* Uniform placeholder styling */
  input::placeholder,
  select::placeholder {
    font-size: 16px;
    color: #94A3B8;
    font-weight: 500;
  }
  
  /* Input hover effects - subtle blue accent */
  input:hover:not(:focus),
  select:hover:not(:focus) {
    border-color: #0096FF !important;
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.15) !important;
  }
  
  /* Fade-in on load - smooth, app-like entrance */
  @keyframes ayaFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* Apply to labels and controls */
  .form-label,
  label.field-label,
  .field-label,
  .field-title,
  input,
  select,
  .country-trigger {
    animation: ayaFadeIn 0.3s ease-out both;
  }
  
  /* Stagger the start for a nicer cascade */
  .form-field:nth-child(1) .field-label { animation-delay: 0.02s; }
  .form-field:nth-child(1) input,
  .form-field:nth-child(1) select,
  .form-field:nth-child(1) .country-trigger { animation-delay: 0.06s; }
  
  .form-field:nth-child(2) .field-label { animation-delay: 0.04s; }
  .form-field:nth-child(2) input,
  .form-field:nth-child(2) select,
  .form-field:nth-child(2) .country-trigger { animation-delay: 0.08s; }
  
  .form-field:nth-child(3) .field-label { animation-delay: 0.06s; }
  .form-field:nth-child(3) input,
  .form-field:nth-child(3) select,
  .form-field:nth-child(3) .amount-input { animation-delay: 0.10s; }
  
  /* Respect reduced-motion users */
  @media (prefers-reduced-motion: reduce) {
    .form-label,
    label,
    .field-label,
    .field-title,
    input,
    select,
    .country-trigger {
      animation: none !important;
    }
  }
  
  /* Get the AyaSend App Section - Professional Laptop Sizing */
  #pwa-download-banner {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Logo - Perfect laptop size */
  #pwa-download-banner img {
    max-width: 220px !important;
    width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    transition: transform 0.3s ease !important;
  }
  
  #pwa-download-banner img:hover {
    transform: scale(1.03) !important;
  }
  
  /* Title - FORCE dark text in light mode (override gradient) */
  .app-heading {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0f172a !important; /* Dark text for light mode */
    margin-bottom: 8px !important;
    text-align: center !important;
    /* CRITICAL: Disable gradient in light mode */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    text-shadow: none !important;
    animation: none !important;
  }
  html.dark .app-heading {
    color: #f3f4f6 !important; /* Light text for dark mode */
    /* Re-enable gradient for dark mode */
    background: linear-gradient(90deg, #FFFFFF 0%, #B9E6FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Subtitle - FIXED: Dark text for light mode, light text for dark mode */
  .app-subtext,
  .app-subtitle,
  .download-subtext,
  .app-description {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #1f2937 !important; /* DARK TEXT for light mode visibility! */
    opacity: 0.95 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  html.dark .app-subtext,
  html.dark .app-subtitle,
  html.dark .download-subtext,
  html.dark .app-description {
    color: #E2E8F0 !important; /* Light text for dark mode */
    opacity: 1 !important;
  }
  
  /* Download App Button - Premium Gradient with Pulse Glow */
  .download-btn,
  .download-button,
  button.download-app {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(90deg, #1D4ED8, #3B82F6) !important;
    color: #F8FAFC !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 26px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.25) !important;
    text-decoration: none !important;
    animation: pulseGlow 3s ease-in-out infinite !important;
  }
  
  /* Pulse Glow Animation */
  @keyframes pulseGlow {
    0% {
      box-shadow: 0 4px 12px rgba(59,130,246,0.25);
    }
    50% {
      box-shadow: 0 0 12px 4px rgba(59,130,246,0.35);
    }
    100% {
      box-shadow: 0 4px 12px rgba(59,130,246,0.25);
    }
  }
  
  /* Hover / Focus effect */
  .download-btn:hover,
  .download-button:hover,
  button.download-app:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(59,130,246,0.35) !important;
  }
  
  /* Pressed state */
  .download-btn:active,
  .download-button:active,
  button.download-app:active {
    transform: scale(0.98) !important;
    box-shadow: 0 3px 8px rgba(59,130,246,0.25) !important;
  }
  
  /* Dark Mode Consistency */
  html.dark .download-btn,
  html.dark .download-button,
  html.dark button.download-app {
    background: linear-gradient(90deg, #2563EB, #60A5FA) !important;
    color: #F9FAFB !important;
    animation: pulseGlowDark 3s ease-in-out infinite !important;
  }
  
  /* Dark mode pulse animation */
  @keyframes pulseGlowDark {
    0% {
      box-shadow: 0 4px 12px rgba(96,165,250,0.25);
    }
    50% {
      box-shadow: 0 0 14px 6px rgba(96,165,250,0.45);
    }
    100% {
      box-shadow: 0 4px 12px rgba(96,165,250,0.25);
    }
  }
  
  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .download-btn,
    .download-button,
    button.download-app {
      animation: none !important;
    }
  }
  
  /* ========== Download App Arrow Icon Animation ========== */
  .download-button .icon-arrow,
  .download-btn .icon-arrow,
  button.download-app .icon-arrow {
    display: inline-block;
    margin-left: 10px;
    font-size: 16px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0.9;
    animation: arrowIdle 2.4s ease-in-out infinite;
  }
  
  /* On hover: nudge arrow to the right */
  .download-button:hover .icon-arrow,
  .download-btn:hover .icon-arrow,
  button.download-app:hover .icon-arrow {
    transform: translateX(4px);
    opacity: 1;
  }
  
  /* Idle breathing for the arrow */
  @keyframes arrowIdle {
    0%   { transform: translateX(0);   opacity: 0.9; }
    50%  { transform: translateX(2px); opacity: 1;   }
    100% { transform: translateX(0);   opacity: 0.9; }
  }
  
  /* Dark mode: brighter arrow */
  html.dark .download-button .icon-arrow,
  html.dark .download-btn .icon-arrow,
  html.dark button.download-app .icon-arrow {
    opacity: 1;
  }
  
  /* Respect reduced motion for arrow too */
  @media (prefers-reduced-motion: reduce) {
    .download-button .icon-arrow,
    .download-btn .icon-arrow,
    button.download-app .icon-arrow {
      animation: none !important;
    }
  }
  
  /* Mobile responsive */
  @media (max-width: 768px) {
    #pwa-download-banner {
      max-width: 90%;
    }
    
    #pwa-download-banner img {
      max-width: 180px !important;
      width: 180px !important;
    }
    
    .app-heading {
      font-size: 20px !important;
    }
    
    .download-btn {
      font-size: 14px !important;
      padding: 9px 20px !important;
    }
  }
  
  /* Subscribe button */
  .subscribe-btn,
  button[type="submit"].subscribe-btn {
    background: linear-gradient(90deg, var(--brand-cyan-400) 0%, var(--brand-blue-700) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    box-shadow: 0 6px 16px rgba(20,102,255,.25) !important;
  }