/* Shared R Digital brand system. Keep product screens aligned with the logo palette. */
:root {
  --brand-red: #e51b23;
  --brand-red-dark: #bd141b;
  --brand-blue: #28358f;
  --brand-blue-dark: #17245f;
  --brand-cyan: #079bd3;
  --brand-ink: #101a36;
  --brand-surface: #f5f8fc;
  --brand-line: #dce5f0;
}

.brand-page-surface {
  background:
    radial-gradient(circle at 92% 4%, rgb(7 155 211 / 0.10), transparent 27rem),
    radial-gradient(circle at 3% 88%, rgb(229 27 35 / 0.07), transparent 24rem),
    var(--brand-surface);
}

.brand-hero-panel {
  background:
    linear-gradient(105deg, rgb(255 255 255 / 0.98), rgb(239 248 255 / 0.96)),
    linear-gradient(90deg, var(--brand-red), var(--brand-cyan));
  box-shadow: 0 18px 45px -35px rgb(23 36 95 / 0.65);
}

.brand-top-rule {
  background: linear-gradient(90deg, var(--brand-red) 0 42%, var(--brand-cyan) 42% 72%, var(--brand-blue) 72% 100%);
}

.bg-brand-soft\/40 {
  background-color: rgb(254 242 242 / 0.4);
}

.social-icon-instagram {
  background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}