/* ============ Karrabina brand styles ============
   Evolved from the new logo (adopted from the /karrabina3
   exploration): cyan→blue→dark-navy gradient headline, aurora
   glow accents, navy→violet panels, gradient CTAs.
   Activated by body.brand-deep. */

body.brand-deep {
  /* Palette remap (Webflow variables) */
  --base--black: #161f4a;        /* deep navy type */
  --base--blue: #5b53d6;         /* violet-leaning primary */
  --base--blue-dark: #3f7df5;
  --base--grey-light: #eef1fd;   /* subtle bg → pale periwinkle */
  --grey--grey-400: #161f4a;     /* solutions section → navy */
  --base--blue-slate: #2b2a72;   /* support section base */
  --base--green-dark: #232d66;   /* realtime section base */
  --base--blue-muted: #b9b3f2;
  --base--mint-light: #e6e2fc;
  /* Derived tokens resolve at :root, so they must be remapped directly */
  --text-color--text-primary: #161f4a;
  --text-color--text-secondary: #4a4f86;
  --bg-color--bg-primary: #5b53d6;
  --bg-color--bg-subtle: #eef1fd;
  --bg-color--bg-dark: #161f4a;
  --bg-color--bg-secondary: #161f4a;
  --bg-color--bg-blue: #2b2a72;
  --bg-color--bg-blue-muted: #b9b3f2;
  --bg-color--bg-mint: #e6e2fc;
  background-color: #fbfcff;
}

/* Hero: aurora glows in the logo's three hues */
body.brand-deep .section_hero {
  background-image:
    radial-gradient(55% 60% at 12% 15%, rgba(78, 200, 242, 0.30), transparent 60%),
    radial-gradient(50% 55% at 88% 20%, rgba(139, 92, 246, 0.24), transparent 60%),
    radial-gradient(70% 60% at 50% 105%, rgba(63, 125, 245, 0.22), transparent 65%),
    linear-gradient(180deg, #fbfcff 0%, #eef3fd 100%);
}

/* Hero headline: darker carabiner gradient — ends in wordmark navy, not purple */
body.brand-deep .hero_heading .big-text {
  background-image: linear-gradient(100deg, #4ec8f2 0%, #2b64e8 45%, #1b2757 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Dark storytelling panels → navy→violet aurora gradients */
body.brand-deep .section_realtime {
  background-image: linear-gradient(150deg, #232d66 0%, #3f7df5 90%, #4ec8f2 125%);
}
body.brand-deep .section_solutions {
  background-image:
    radial-gradient(60% 70% at 85% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
    linear-gradient(180deg, #161f4a 0%, #2b2a72 100%);
}
body.brand-deep .section_support {
  background-image: linear-gradient(150deg, #2b2a72 0%, #5b53d6 70%, #8b5cf6 110%);
}

/* Light sections: pale periwinkle wash */
body.brand-deep .section_about,
body.brand-deep .section_pricing {
  background-image: linear-gradient(180deg, #f6f8ff 0%, #e8ecfc 100%);
  background-color: transparent;
}
body.brand-deep .section_testimonials {
  background-color: #fbfcff;
}
body.brand-deep .footer {
  background-image:
    radial-gradient(70% 80% at 50% 120%, rgba(78, 200, 242, 0.18), transparent 65%),
    linear-gradient(180deg, #eef1fd 0%, #dfe3fb 100%);
  background-color: transparent;
}

/* Buttons: violet-led gradient with a soft glow */
body.brand-deep .button,
body.brand-deep .button.is-small,
body.brand-deep .button.is-big {
  background-image: linear-gradient(135deg, #3f7df5 0%, #5b53d6 55%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 0.5rem 1.75rem rgba(91, 83, 214, 0.35);
}
body.brand-deep .button.is-secondary,
body.brand-deep .button.is-big:where(.w-variant-2ce66ca3-9b46-14af-e5f8-006c80e1eeee) {
  background-image: none;
  background-color: #fff;
  color: #5b53d6;
  box-shadow: none;
}

/* Nav: glass over the aurora */
body.brand-deep .rh-navbar {
  background: rgba(251, 252, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e6fa;
}
body.brand-deep .rh-navbar__cta {
  background: linear-gradient(135deg, #3f7df5 0%, #5b53d6 55%, #8b5cf6 100%);
}
@media (max-width: 767px) {
  body.brand-deep .rh-navbar__links {
    background: rgba(251, 252, 255, 0.97);
    border-bottom: 1px solid #e2e6fa;
  }
}

/* Testimonial cards: much softer corners */
body.brand-deep .testimonial_card {
  border-radius: 30px;
}

/* Pricing cards float on the periwinkle wash */
body.brand-deep .pricing_card {
  background-color: #fff;
  box-shadow: 0 1rem 2.5rem rgba(91, 83, 214, 0.10);
}