/* Signature surfaces. These four carry the brand more than any component:
   aurora ground, faint grid, glass plate, violet text gradient. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(18px) saturate(140%); /* @kind other */
  --glass-dark-bg: rgba(6, 16, 39, 0.55);
  --glass-dark-border: rgba(188, 173, 243, 0.25);
  --glass-dark-blur: blur(18px); /* @kind other */
}

.innorve-aurora {
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(188, 173, 243, 0.55) 0%, transparent 60%),
    radial-gradient(45% 40% at 85% 15%, rgba(127, 184, 245, 0.45) 0%, transparent 60%),
    radial-gradient(50% 45% at 60% 90%, rgba(112, 80, 216, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8F6FF 60%, #EFEBFC 100%);
}

.innorve-grid-faint {
  background-image:
    linear-gradient(to right, rgba(6, 16, 39, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 16, 39, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 100%);
}

.innorve-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.innorve-glass-dark {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  backdrop-filter: var(--glass-dark-blur);
  border: 1px solid var(--glass-dark-border);
}

/* Violet→sky text gradient. At most a short highlighted phrase, never a
   whole paragraph. */
.innorve-text-gradient {
  background: linear-gradient(92deg, #7050D8 0%, #9B7BFF 55%, #6FA8F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.innorve-cta-band {
  background: linear-gradient(to bottom right, var(--cta-from), var(--cta-mid) 55%, var(--cta-to));
}