/* FP1 HEADER-BLUE ACCENTS + HERO MOTION V15
   Uses the exact header “One” blue (#83eeff) for the site accent system and app pricing.
   Preserves the working hero motion, title sizing, descender fix, and every layout. */

:root {
  --violet: #83eeff;
  --purple: #83eeff;
  --gold: #83eeff;
  --gradient: linear-gradient(135deg, #83eeff, #68d9ff 55%, #58eee8);
  --gradient-soft: linear-gradient(135deg, rgba(131, 238, 255, 0.18), rgba(104, 217, 255, 0.13) 55%, rgba(88, 238, 232, 0.11));
}

body {
  --accent-soft: #83eeff;
  --accent-pale: #aaf4ff;
  background-image:
    radial-gradient(circle at 12% 4%, rgba(131, 238, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(78, 232, 234, 0.13), transparent 27rem),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(var(--bg), var(--bg)) !important;
}

/* Header and navigation use the same saturated ice-blue/aqua as “One”. */
.site-header {
  background:
    radial-gradient(circle at 18% -80%, rgba(131, 238, 255, 0.22), transparent 24rem),
    radial-gradient(circle at 84% -100%, rgba(78, 232, 234, 0.20), transparent 24rem),
    linear-gradient(180deg, rgba(8, 12, 35, 0.96), rgba(6, 10, 29, 0.91)) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"],
.nav-apps-toggle:hover,
.nav-apps-toggle:focus-visible,
.nav-apps-toggle.is-active,
.nav-apps.is-open .nav-apps-toggle {
  background: linear-gradient(135deg, rgba(131, 238, 255, 0.20), rgba(89, 183, 255, 0.16) 55%, rgba(78, 232, 234, 0.12)) !important;
}

.nav-apps-menu {
  background:
    radial-gradient(circle at 8% 0%, rgba(131, 238, 255, 0.23), transparent 18rem),
    radial-gradient(circle at 96% 8%, rgba(78, 232, 234, 0.19), transparent 18rem),
    linear-gradient(150deg, rgba(18, 25, 63, 0.995), rgba(5, 10, 30, 0.995)) !important;
}

.nav-apps-heading {
  background: linear-gradient(90deg, rgba(131, 238, 255, 0.13), rgba(78, 232, 234, 0.06)) !important;
}

.nav-apps-menu > a:not(.nav-apps-all):hover,
.nav-apps-menu > a:not(.nav-apps-all):focus-visible,
.nav-apps-menu > a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(131, 238, 255, 0.21), rgba(89, 183, 255, 0.19) 54%, rgba(78, 232, 234, 0.12)) !important;
}

/* Primary accents exactly match the header “One”. */
.eyebrow,
.nav-apps-heading span,
.support-card-kicker,
.support-step-label,
.support-app-identity small {
  color: #83eeff !important;
}

.eyebrow::before {
  background: linear-gradient(90deg, #83eeff, #68d9ff, #58eee8) !important;
  box-shadow: 0 0 18px rgba(131, 238, 255, 0.38) !important;
}

.site-header .brand-copy strong {
  color: #ffffff !important;
}

.site-header .brand-one-accent {
  color: #83eeff !important;
  text-shadow: 0 0 13px rgba(78, 232, 234, 0.34) !important;
}

.site-header .brand-copy > span {
  color: #b8c8e3 !important;
}

/* App-page pricing uses the same turquoise blue as “One”. */
html body.product-page .product-price strong {
  color: #83eeff !important;
  text-shadow: 0 0 14px rgba(131, 238, 255, 0.16) !important;
}

/* Preserve the working app and Support hero animation exactly. */
html body.product-page .product-hero h1,
html body.support-page .support-hero-copy h1 {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #aebeff 0%,
    #6bc7ff 24%,
    #4eeee8 50%,
    #6bc7ff 76%,
    #aebeff 100%
  ) !important;
  background-size: 240% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: fp1-hero-sweep-v15 3.6s linear infinite !important;
  will-change: background-position, filter;
}

html body.product-page .product-hero h1 {
  font-size: clamp(3.15rem, 5.7vw, 5.55rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
  padding-bottom: 0.18em !important;
  overflow: visible !important;
}

@keyframes fp1-hero-sweep-v15 {
  0% { background-position: 0% 50%; filter: hue-rotate(-8deg) saturate(1.04); }
  50% { background-position: 110% 50%; filter: hue-rotate(10deg) saturate(1.16); }
  100% { background-position: 0% 50%; filter: hue-rotate(-8deg) saturate(1.04); }
}

@media (max-width: 760px) {
  html body.product-page .product-hero h1 {
    font-size: clamp(2.75rem, 12vw, 4.3rem) !important;
    line-height: 1.08 !important;
    padding-bottom: 0.2em !important;
  }

  .nav-links {
    background:
      radial-gradient(circle at 8% 0%, rgba(131, 238, 255, 0.21), transparent 17rem),
      radial-gradient(circle at 96% 8%, rgba(78, 232, 234, 0.16), transparent 17rem),
      linear-gradient(150deg, rgba(18, 25, 63, 0.995), rgba(5, 10, 30, 0.995)) !important;
  }
}