/* ============================================================
   skynotes.ca — AI Services Site Styles
   Bootstrap 5.3 is loaded via CDN. This file handles custom styles.
   ============================================================ */

/* --- Variables --- */
:root {
  --navy: #0b2a50;
  --navy-light: #0f3460;
  --accent: #30db00;
  --accent-hover: #00e5f7;
  --accent-glow: rgba(0, 201, 219, 0.25);
  --white: #ffffff;
  --off-white: #f4f7fa;
  --text-dark: #1a1a2e;
  --text-muted: #5a6577;
  --text-light: #c0cbdc;
  --border-light: #e2e8f0;
  --section-text: #ffd500c7;
  --gradient-hero: linear-gradient(135deg, #0b2a50 0%, #0f3460 50%, #162d50 100%);
  --gradient-stat-card: linear-gradient(135deg, #0c1f6b 0%, #112879 50%, #0f2260 100%);
  --gradient-card-service: linear-gradient(135deg, #071e3d 0%, #0b2a50 50%, #091f3a 100%);
  --gradient-feature-card: linear-gradient(135deg, #071e3d 0%, #0b2a50 50%, #091f3a 100%);
  --gradient-process-step: linear-gradient(135deg, #cdf2c6 0%, #dcf5d7 50%, #c8f0d0 100%);
  --gradient-bg-light: linear-gradient(135deg, #b8d4ee 0%, #cce0f4 50%, #bdd9f0 100%);
  --gradient-off-white: linear-gradient(135deg, #eaeef3 0%, #f4f7fa 50%, #ecf1f6 100%);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.12);
  --radius: 12px;
  --radius-sm: 8px;

  /* Card Service Styles */
  --card-service-bg: var(--gradient-card-service);
  --card-service-border: rgba(255, 255, 255, 0.08);
  --card-service-border-hover: #00c9db;
  --card-service-shadow-hover: 0 8px 32px rgba(0, 201, 219, 0.15);
  --card-service-heading-color: #e8f0fe;
  --card-service-subheading-color: #71f8f9;
  --card-service-text-color: rgba(255, 255, 255, 0.6);
  --card-service-list-color: rgba(255, 255, 255, 0.8);
  --card-service-link-color: #cd00ff;
  --card-service-icon-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 201, 219, 0.15));
  --card-service-icon-border: rgba(0, 201, 219, 0.2);

  /* Feature Card Styles */
  --feature-card-bg: var(--off-white);
  --feature-card-border: rgba(255, 255, 255, 0.08);
  --feature-card-border-hover: #00c9db;
  --feature-card-shadow-hover: 0 8px 32px rgba(0, 201, 219, 0.15);
  --feature-card-heading-color: #e8f0fe;
  --feature-card-subheading-color: #71f8f9;
  --feature-card-text-color: rgba(255, 255, 255, 0.6);
  --feature-card-list-color: rgba(255, 255, 255, 0.8);
  --feature-card-link-color: #cd00ff;
  --feature-card-icon-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 201, 219, 0.15));
  --feature-card-icon-border: rgba(0, 201, 219, 0.2);
}

/* --- ServiceNow --- */
.glass-on-dark {
  backdrop-filter: var(--arc-glass-backdrop-filter-on-dark);
  background-color: var(--arc-glass-background-color-on-dark);
  box-shadow: var(--arc-glass-box-shadow-on-dark);
}

:root {
  --gable-green: #293e40;
  --acapulco: #81b5a1;
  --cloud: #f7f7f7;
  --pure-white: #fff;
  --fountain-blue: #68a1af;
  --wild-blue-yonder: #8686bc;
  --orchid: #db8f8f;
  --tumbleweed: #e8a679;
  --flax: #e5d87c;
  --cruise: #b0e1ce;
  --cavern-pink: #e9bcbc;
  --apricot: #fbd0b3;
  --french-pass: #a7d4df;
  --perano: #b1b1e4;
  --buttermilk: #fbf2b4;
  --aquamarine: #64ddac;
  --bittersweet: #fc726d;
  --tan-hide: #ff924e;
  --ocean-spray: #72d0e2;
  --lavender: #9898e5;
  --wattle: #d6df38;
  --interstitial-green: #4b8169;
  --light-monochromacy: #5ea188;
  --powder-blue: #b8d9e2;
  --powder-pink: #f8d1d4;
  --powder-green: #b9d0cc;
  --powder-yellow: #f2e5be;
  --powder-dark-grey: #c8c8c8;
  --powder-light-grey: #e1e1e1;
  --accessible-grey: #5b6f70;
  --accessible-green: #497e6e;
  --error-red: #b33233;
  --yellow-darker: #ffde1d
}

:root {
  --nothern-light-background-color: #031c42;
  --nothern-light-aurora-color-1: var(--arc-color-brightindigo);
  --nothern-light-aurora-color-2: var(--arc-color-brightblue);
  --nothern-light-particle-color: rgba(98, 216, 78, 0.4);
  --nothern-light-blur-amount: 100px;
  --nothern-light-particle-size: 4px;
  --nothern-light-aurora-opacity: 0.7;
  --nothern-light-particle-opacity-low: 0.3;
  --nothern-light-particle-opacity-high: 1;
  --nothern-light-animation-duration-aurora-1: 190s;
  --nothern-light-animation-duration-aurora-2: 170s
}

:root {
    --arc-tab-compact-indicator-weight: 4px;
    --arc-tab-dropdown-indicator-weight: 4px;
    --arc-tab-capsule-indicator-weight: 2px;
    --arc-tab-logo-height-xxl: 80px;
    --arc-tab-logo-height-xs: 56px;
    --arc-tab-logo-indicator-weight: 2px;
    --arc-tab-tertiary-indicator-weight: 4px;
    --arc-tab-secondary-indicator-weight: 2px;
    --arc-tab-primary-indicator-weight: 4px;
    --arc-space-size-base: 16px;
    --arc-motion-easing-ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
    --arc-motion-easing-ease-out: cubic-bezier(0.2, 0, 0, 1);
    --arc-motion-easing-linear: linear;
    --arc-motion-duration-long-3: 1500ms;
    --arc-motion-duration-long-2: 1000ms;
    --arc-motion-duration-long-1: 660ms;
    --arc-motion-duration-medium-3: 500ms;
    --arc-motion-duration-medium-2: 380ms;
    --arc-motion-duration-medium-1: 320ms;
    --arc-motion-duration-short-3: 250ms;
    --arc-motion-duration-short-2: 200ms;
    --arc-motion-duration-short-1: 160ms;
    --arc-input-alert-line-height: 1.4;
    --arc-input-alert-font-size: 1.4rem;
    --arc-input-label-line-height: 1.5;
    --arc-input-label-font-size: 1.6rem;
    --arc-icon-size-xlarge: 48px;
    --arc-icon-size-large: 32px;
    --arc-icon-size-medium: 24px;
    --arc-icon-size-small: 16px;
    --arc-icon-size-xsmall: 12px;
    --arc-grid-max-width: 1680px;
    --arc-grid-gutter-height-at-xxl: 48px;
    --arc-grid-gutter-height-at-xl: 40px;
    --arc-grid-gutter-height-at-lg: 32px;
    --arc-grid-gutter-height-at-md: 32px;
    --arc-grid-gutter-height-at-sm: 32px;
    --arc-grid-gutter-height-at-xs: 32px;
    --arc-grid-gutter-width-at-xxl: 48px;
    --arc-grid-gutter-width-at-xl: 40px;
    --arc-grid-gutter-width-at-lg: 32px;
    --arc-grid-gutter-width-at-md: 32px;
    --arc-grid-gutter-width-at-sm: 24px;
    --arc-grid-gutter-width-at-xs: 16px;
    --arc-font-line-height-stat: 1;
    --arc-font-line-height-subscript: 0;
    --arc-font-line-height-superscript: 0;
    --arc-font-line-height-breadcrumb: 1.5;
    --arc-font-line-height-footnote: 1.5;
    --arc-font-line-height-caption: 1.5;
    --arc-font-line-height-eyebrow-small: 1.3;
    --arc-font-line-height-eyebrow-large: 1.3;
    --arc-font-line-height-body: 1.5;
    --arc-font-line-height-heading-anthemic: 1;
    --arc-font-line-height-heading-jumbo: 1.1;
    --arc-font-line-height-heading: 1.1;
    --arc-font-letter-spacing-stat: -0.01em;
    --arc-font-letter-spacing-footnote: -0.01em;
    --arc-font-letter-spacing-eyebrow-small: 0;
    --arc-font-letter-spacing-eyebrow-large: 0;
    --arc-font-letter-spacing-heading-anthemic: -0.01em;
    --arc-font-letter-spacing-heading-jumbo: -0.01em;
    --arc-font-letter-spacing-heading: -0.01em;
    --arc-font-size-stat-small-at-xxl: 4.8rem;
    --arc-font-size-stat-small-at-xl: 4.0rem;
    --arc-font-size-stat-small-at-lg: 2.8rem;
    --arc-font-size-stat-small-at-md: 2.8rem;
    --arc-font-size-stat-small-at-sm: 2.8rem;
    --arc-font-size-stat-small-at-xs: 2.8rem;
    --arc-font-size-stat-medium-at-xxl: 8.8rem;
    --arc-font-size-stat-medium-at-xl: 7.2rem;
    --arc-font-size-stat-medium-at-lg: 4.8rem;
    --arc-font-size-stat-medium-at-md: 4.8rem;
    --arc-font-size-stat-medium-at-sm: 4.8rem;
    --arc-font-size-stat-medium-at-xs: 4.8rem;
    --arc-font-size-stat-large-at-xxl: 14rem;
    --arc-font-size-stat-large-at-xl: 12rem;
    --arc-font-size-stat-large-at-lg: 8.8rem;
    --arc-font-size-stat-large-at-md: 8.0rem;
    --arc-font-size-stat-large-at-sm: 8.0rem;
    --arc-font-size-stat-large-at-xs: 7.2rem;
    --arc-font-size-subscript: 60%;
    --arc-font-size-superscript: 60%;
    --arc-font-size-breadcrumb: 1.6rem;
    --arc-font-size-footnote: 1.4rem;
    --arc-font-size-caption: 1.4rem;
    --arc-font-size-eyebrow-small-at-xxl: 1.2rem;
    --arc-font-size-eyebrow-small-at-xl: 1.2rem;
    --arc-font-size-eyebrow-small-at-lg: 1.2rem;
    --arc-font-size-eyebrow-small-at-md: 1.2rem;
    --arc-font-size-eyebrow-small-at-sm: 1.2rem;
    --arc-font-size-eyebrow-small-at-xs: 1.2rem;
    --arc-font-size-eyebrow-large-at-xxl: 2.0rem;
    --arc-font-size-eyebrow-large-at-xl: 1.8rem;
    --arc-font-size-eyebrow-large-at-lg: 1.8rem;
    --arc-font-size-eyebrow-large-at-md: 1.6rem;
    --arc-font-size-eyebrow-large-at-sm: 1.6rem;
    --arc-font-size-eyebrow-large-at-xs: 1.6rem;
    --arc-font-size-body-xsmall-at-xxl: 1.6rem;
    --arc-font-size-body-xsmall-at-xl: 1.6rem;
    --arc-font-size-body-xsmall-at-lg: 1.6rem;
    --arc-font-size-body-xsmall-at-md: 1.4rem;
    --arc-font-size-body-xsmall-at-sm: 1.4rem;
    --arc-font-size-body-xsmall-at-xs: 1.4rem;
    --arc-font-size-body-small-at-xxl: 1.8rem;
    --arc-font-size-body-small-at-xl: 1.6rem;
    --arc-font-size-body-small-at-lg: 1.6rem;
    --arc-font-size-body-small-at-md: 1.6rem;
    --arc-font-size-body-small-at-sm: 1.6rem;
    --arc-font-size-body-small-at-xs: 1.6rem;
    --arc-font-size-body-medium-at-xxl: 2.0rem;
    --arc-font-size-body-medium-at-xl: 1.8rem;
    --arc-font-size-body-medium-at-lg: 1.8rem;
    --arc-font-size-body-medium-at-md: 1.6rem;
    --arc-font-size-body-medium-at-sm: 1.6rem;
    --arc-font-size-body-medium-at-xs: 1.6rem;
    --arc-font-size-body-large-at-xxl: 2.2rem;
    --arc-font-size-body-large-at-xl: 2.0rem;
    --arc-font-size-body-large-at-lg: 2.0rem;
    --arc-font-size-body-large-at-md: 1.8rem;
    --arc-font-size-body-large-at-sm: 1.8rem;
    --arc-font-size-body-large-at-xs: 1.8rem;
    --arc-font-size-body-xlarge-at-xxl: 2.8rem;
    --arc-font-size-body-xlarge-at-xl: 2.4rem;
    --arc-font-size-body-xlarge-at-lg: 2.4rem;
    --arc-font-size-body-xlarge-at-md: 2.0rem;
    --arc-font-size-body-xlarge-at-sm: 1.8rem;
    --arc-font-size-body-xlarge-at-xs: 1.8rem;
    --arc-font-size-heading-level-6-at-xxl: 1.8rem;
    --arc-font-size-heading-level-6-at-xl: 1.8rem;
    --arc-font-size-heading-level-6-at-lg: 1.8rem;
    --arc-font-size-heading-level-6-at-md: 1.6rem;
    --arc-font-size-heading-level-6-at-sm: 1.6rem;
    --arc-font-size-heading-level-6-at-xs: 1.6rem;
    --arc-font-size-heading-level-5-at-xxl: 2.4rem;
    --arc-font-size-heading-level-5-at-xl: 2.2rem;
    --arc-font-size-heading-level-5-at-lg: 2.2rem;
    --arc-font-size-heading-level-5-at-md: 2.0rem;
    --arc-font-size-heading-level-5-at-sm: 1.8rem;
    --arc-font-size-heading-level-5-at-xs: 1.8rem;
    --arc-font-size-heading-level-4-at-xxl: 2.8rem;
    --arc-font-size-heading-level-4-at-xl: 2.4rem;
    --arc-font-size-heading-level-4-at-lg: 2.4rem;
    --arc-font-size-heading-level-4-at-md: 2.2rem;
    --arc-font-size-heading-level-4-at-sm: 2.0rem;
    --arc-font-size-heading-level-4-at-xs: 2.0rem;
    --arc-font-size-heading-level-3-at-xxl: 3.6rem;
    --arc-font-size-heading-level-3-at-xl: 2.8rem;
    --arc-font-size-heading-level-3-at-lg: 2.8rem;
    --arc-font-size-heading-level-3-at-md: 2.4rem;
    --arc-font-size-heading-level-3-at-sm: 2.2rem;
    --arc-font-size-heading-level-3-at-xs: 2.2rem;
    --arc-font-size-heading-level-2-at-xxl: 4.8rem;
    --arc-font-size-heading-level-2-at-xl: 3.6rem;
    --arc-font-size-heading-level-2-at-lg: 3.6rem;
    --arc-font-size-heading-level-2-at-md: 2.8rem;
    --arc-font-size-heading-level-2-at-sm: 2.4rem;
    --arc-font-size-heading-level-2-at-xs: 2.4rem;
    --arc-font-size-heading-level-1-at-xxl: 6.4rem;
    --arc-font-size-heading-level-1-at-xl: 4.8rem;
    --arc-font-size-heading-level-1-at-lg: 4.8rem;
    --arc-font-size-heading-level-1-at-md: 3.6rem;
    --arc-font-size-heading-level-1-at-sm: 2.8rem;
    --arc-font-size-heading-level-1-at-xs: 2.8rem;
    --arc-font-size-heading-level-1-jumbo-at-xxl: 8.0rem;
    --arc-font-size-heading-level-1-jumbo-at-xl: 6.4rem;
    --arc-font-size-heading-level-1-jumbo-at-lg: 6.4rem;
    --arc-font-size-heading-level-1-jumbo-at-md: 4.8rem;
    --arc-font-size-heading-level-1-jumbo-at-sm: 3.6rem;
    --arc-font-size-heading-level-1-jumbo-at-xs: 3.2rem;
    --arc-font-size-heading-level-1-anthemic-at-xxl: 11rem;
    --arc-font-size-heading-level-1-anthemic-at-xl: 9.0rem;
    --arc-font-size-heading-level-1-anthemic-at-lg: 6.4rem;
    --arc-font-size-heading-level-1-anthemic-at-md: 6.4rem;
    --arc-font-size-heading-level-1-anthemic-at-sm: 6.4rem;
    --arc-font-size-heading-level-1-anthemic-at-xs: 3.4rem;
    --arc-font-family-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --arc-font-family-monospace: ServiceNowSansMonoRegular;
    --arc-font-family-black: ServiceNowSansBold;
    --arc-font-family-bold: ServiceNowSansMedium;
    --arc-font-family-semibold: ServiceNowSansBook;
    --arc-font-family-medium: ServiceNowSansRegular;
    --arc-font-family-regular: ServiceNowSansLight;
    --arc-font-family-light: ServiceNowSansThin;
    --arc-z-index-deep: -1000;
    --arc-z-index-default: 0;
    --arc-z-index-docked: 100;
    --arc-z-index-dropdown: 200;
    --arc-z-index-header-nav: 300;
    --arc-z-index-sticky-nav: 400;
    --arc-z-index-scrim: 500;
    --arc-z-index-overlay: 600;
    --arc-z-index-modal: 700;
    --arc-z-index-spinner: 800;
    --arc-z-index-notice: 900;
    --arc-z-index-top: 1000;
    --arc-glass-border-background-on-light: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0) 20px) border-box, linear-gradient(135deg, rgba(255, 255, 255, 0) calc(100% - 20px), rgba(255, 255, 255, 0.3) 100%) border-box, linear-gradient(to bottom right, rgba(255, 255, 255, 0.4) 42%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 58%) border-box;
    --arc-glass-border-background-on-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 20px) border-box, linear-gradient(135deg, rgba(255, 255, 255, 0) calc(100% - 20px), rgba(255, 255, 255, 0.1) 100%) border-box, linear-gradient(to bottom right, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 58%) border-box;
    --arc-glass-border-width-on-light: 1px;
    --arc-glass-border-width-on-dark: 1px;
    --arc-glass-box-shadow-on-light: 10px 10px 10px 0 rgba(0, 0, 0, 0.01) inset, -10px -10px 10px 0 rgba(255, 255, 255, 0.05) inset;
    --arc-glass-box-shadow-on-dark: 10px 10px 10px 0 rgba(0, 0, 0, 0.03) inset, -10px -10px 10px 0 rgba(255, 255, 255, 0.01) inset;
    --arc-glass-backdrop-filter-on-light: blur(25px);
    --arc-glass-backdrop-filter-on-dark: blur(25px);
    --arc-glass-background-color-on-light: rgba(255, 255, 255, 0.6);
    --arc-glass-background-color-on-dark: rgba(255, 255, 255, 0.05);
    --arc-divider-weight-bold: 2px;
    --arc-divider-weight-regular: 1px;
    --arc-divider-opacity-level-2-on-dark: 0.12;
    --arc-divider-opacity-level-2-on-light: 0.08;
    --arc-divider-opacity-level-1-on-dark: 0.24;
    --arc-divider-opacity-level-1-on-light: 0.16;
    --arc-color-ui-focus: #3eaa2b;
    --arc-color-ui-attention-background: #fbf7bc;
    --arc-color-ui-attention-text: #ad5918;
    --arc-color-ui-warning-background: #ffccd2;
    --arc-color-ui-warning-on-dark: #fc9ca7;
    --arc-color-ui-warning: #b33233;
    --arc-color-snu-lightwasabigreen: #deffd9;
    --arc-color-snu-lightblue: #c2e6ff;
    --arc-color-snu-lightpurple: #e6dbff;
    --arc-color-snu-lightmagenta: #ffe5e8;
    --arc-color-snu-lightorange: #ffedd9;
    --arc-color-snu-lightyellow: #ffffcc;
    --arc-color-snu-blue: #52b8ff;
    --arc-color-snu-purple: #bf71f2;
    --arc-color-snu-magenta: #ff53e4;
    --arc-color-snu-orange: #ffbc39;
    --arc-color-snu-yellow: #e8ff59;
    --arc-color-brandgreen-900: #1a610e;
    --arc-color-brandgreen-800: #298319;
    --arc-color-brandgreen-700: #3eaa2b;
    --arc-color-brandgreen-600: #4dbf39;
    --arc-color-brandgreen-500: #63df4e;
    --arc-color-brandgreen-400: #81df71;
    --arc-color-brandgreen-300: #9fe793;
    --arc-color-brandgreen-200: #beeeb5;
    --arc-color-brandgreen-100: #e0f7dc;
    --arc-color-brandgreen-50: #f4fcf2;
    --arc-color-brandblue-900: #032d42;
    --arc-color-brandblue-800: #1b4459;
    --arc-color-brandblue-700: #365b6f;
    --arc-color-brandblue-600: #517285;
    --arc-color-brandblue-500: #6c889a;
    --arc-color-brandblue-400: #879fae;
    --arc-color-brandblue-300: #a2b5c1;
    --arc-color-brandblue-200: #bccad4;
    --arc-color-brandblue-100: #d7e0e6;
    --arc-color-brandblue-50: #f2f5f7;
    --arc-color-neutral-900: #1d1d1d;
    --arc-color-neutral-800: #333333;
    --arc-color-neutral-700: #4f4f4f;
    --arc-color-neutral-600: #666666;
    --arc-color-neutral-500: #848484;
    --arc-color-neutral-400: #adadad;
    --arc-color-neutral-300: #c3c3c3;
    --arc-color-neutral-200: #dbdbdb;
    --arc-color-neutral-100: #ebebeb;
    --arc-color-neutral-50: #f7f7f7;
    --arc-color-transparent: transparent;
    --arc-color-gray: #c3c3c3;
    --arc-color-purple: #5274ff;
    --arc-color-blue: #24c2ce;
    --arc-color-green: #009156;
    --arc-color-pink: #fc7786;
    --arc-color-orange: #fca822;
    --arc-color-yellow: #ffde1d;
    --arc-color-lightyellow: #dbef89;
    --arc-color-darkwasabigreen: #003310;
    --arc-color-darkpurple: #1e012e;
    --arc-color-darkindigo: #14103b;
    --arc-color-midwasabigreen: #005f1e;
    --arc-color-midpurple: #412c58;
    --arc-color-midindigo: #3c288d;
    --arc-color-midblue: #035d99;
    --arc-color-lightwasabigreen: #deffd9;
    --arc-color-lightpurple: #e6dbff;
    --arc-color-lightindigo: #bdbafd;
    --arc-color-lightblue: #c2e6ff;
    --arc-color-brightpurple: #bf71f2;
    --arc-color-brightindigo: #7661ff;
    --arc-color-brightblue: #52b8ff;
    --arc-color-black: #000000;
    --arc-color-white: #ffffff;
    --arc-color-infiniteblue-dark: #021c29;
    --arc-color-infiniteblue-light: #124d6b;
    --arc-color-infiniteblue: #032d42;
    --arc-color-wasabigreen: #63df4e;
    --arc-color-link-visited-on-dark: #bfadff;
    --arc-color-link-visited-on-light: #7057c7;
    --arc-color-link-active-on-dark: #99f3ff;
    --arc-color-link-active-on-light: #032d42;
    --arc-color-link-hover-on-dark: #42e9ff;
    --arc-color-link-hover-on-light: #024f69;
    --arc-color-link-default-on-dark: #00cbe6;
    --arc-color-link-default-on-light: #00718f;
    --arc-color-gradient-brand-mid-purple-at-xxl: radial-gradient(43% 64% at 53.9% 116.9%, rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%), radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(191, 113, 242, 1) 10%, rgba(191, 113, 242, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(118, 97, 255, 1) 10%, rgba(118, 97, 255, 0) 100%), #351E4A;
    --arc-color-gradient-brand-mid-purple-at-xl: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%,rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#351E4A;
    --arc-color-gradient-brand-mid-purple-at-lg: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),radial-gradient(ellipse 80% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#351E4A;
    --arc-color-gradient-brand-mid-purple-at-md: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#351E4A;
    --arc-color-gradient-brand-mid-purple-at-sm: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#351E4A;
    --arc-color-gradient-brand-mid-purple-at-xs: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#351E4A;
    --arc-color-gradient-brand-mid-indigo-at-xxl: radial-gradient(43% 64% at 53.9% 116.9%, rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%), radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(118, 97, 255, 1) 10%, rgba(118, 97, 255, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(191, 113, 242, 1) 10%, rgba(191, 113, 242, 0) 100%), #2F2172;
    --arc-color-gradient-brand-mid-indigo-at-xl: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%,rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),#2F2172;
    --arc-color-gradient-brand-mid-indigo-at-lg: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),radial-gradient(ellipse 80% 60% at top right,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),#2F2172;
    --arc-color-gradient-brand-mid-indigo-at-md: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),#2F2172;
    --arc-color-gradient-brand-mid-indigo-at-sm: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),#2F2172;
    --arc-color-gradient-brand-mid-indigo-at-xs: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(191, 113, 242, 1) 10%,rgba(191, 113, 242, 0) 100%),#2F2172;
    --arc-color-gradient-brand-mid-blue-at-xxl: radial-gradient(43% 64% at 53.9% 116.9%, rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%), radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(82, 184, 255, 1) 10%, rgba(82, 184, 255, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(118, 97, 255, 1) 10%, rgba(118, 97, 255, 0) 100%), #044E7D;
    --arc-color-gradient-brand-mid-blue-at-xl: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%,rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(82, 184, 255, 1) 10%,rgba(82, 184, 255, 0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#044E7D;
    --arc-color-gradient-brand-mid-blue-at-lg: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(82, 184, 255, 1) 10%,rgba(82, 184, 255, 0) 100%),radial-gradient(ellipse 80% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#044E7D;
    --arc-color-gradient-brand-mid-blue-at-md: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(82, 184, 255, 1) 10%,rgba(82, 184, 255, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#044E7D;
    --arc-color-gradient-brand-mid-blue-at-sm: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(82, 184, 255, 1) 10%,rgba(82, 184, 255, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#044E7D;
    --arc-color-gradient-brand-mid-blue-at-xs: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(82, 184, 255, 1) 10%,rgba(82, 184, 255, 0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(118, 97, 255, 1) 10%,rgba(118, 97, 255, 0) 100%),#044E7D;
    --arc-color-gradient-brand-mid-green-at-xxl: radial-gradient(43% 64% at 53.9% 116.9%, rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%), radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(99, 223, 78, 1) 10%, rgba(99, 223, 78, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(82, 184, 255, 1) 10%, rgba(82, 184, 255, 0) 100%), #005019;
    --arc-color-gradient-brand-mid-green-at-xl: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%,rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(99,223,78,1) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(82,184,255,1) 10%,rgba(82, 184, 255, 0) 100%),#005019;
    --arc-color-gradient-brand-mid-green-at-lg: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 50% 70% at bottom left,rgba(99,223,78,1) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 80% 60% at top right,rgba(82,184,255,1) 10%,rgba(82, 184, 255, 0) 100%),#005019;
    --arc-color-gradient-brand-mid-green-at-md: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(99,223,78,1) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(82,184,255,1) 10%,rgba(82, 184, 255, 0) 100%),#005019;
    --arc-color-gradient-brand-mid-green-at-sm: radial-gradient(ellipse 95% 55% at bottom right,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(99,223,78,1) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 100% 60% at top right,rgba(82,184,255,1) 10%,rgba(82, 184, 255, 0) 100%),#005019;
    --arc-color-gradient-brand-mid-green-at-xs: radial-gradient(ellipse 95% 55% at 60% 90%,rgba(3, 45, 66, 1) 10%, rgba(3, 45, 66, 0) 100%),radial-gradient(ellipse 70% 90% at bottom left,rgba(99,223,78,1) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(82,184,255,1) 10%,rgba(82, 184, 255, 0) 100%),#005019;
    --arc-button-tag-border-color-default-on-dark: rgba(255, 255, 255, 0.20);
    --arc-button-tag-border-color-default-on-light: rgba(3, 45, 66, 0.20);
    --arc-button-tag-background-color-disabled-on-dark: transparent;
    --arc-button-tag-background-color-active-on-dark: rgba(99, 223, 78, 0.10);
    --arc-button-tag-background-color-active-on-light: rgba(99, 223, 78, 0.10);
    --arc-button-tag-background-color-hover-on-dark: rgba(99, 223, 78, 0.10);
    --arc-button-tag-background-color-hover-on-light: rgba(99, 223, 78, 0.10);
    --arc-button-tag-background-color-default-on-dark: transparent;
    --arc-button-tag-height-at-xl: 80px;
    --arc-button-tag-height-at-xs: 40px;
    --arc-button-tag-font-size-at-xl: 2.2rem;
    --arc-button-tag-font-size-at-xs: 1.4rem;
    --arc-button-mono-outline-background-color-disabled-on-dark: transparent;
    --arc-button-mono-outline-background-color-disabled-on-light: transparent;
    --arc-button-mono-outline-background-color-default-on-dark: transparent;
    --arc-button-mono-outline-background-color-default-on-light: transparent;
    --arc-button-link-border-color-disabled-on-dark: transparent;
    --arc-button-link-border-color-disabled-on-light: transparent;
    --arc-button-link-border-color-active-on-dark: transparent;
    --arc-button-link-border-color-active-on-light: transparent;
    --arc-button-link-border-color-hover-on-dark: transparent;
    --arc-button-link-border-color-hover-on-light: transparent;
    --arc-button-link-border-color-default-on-dark: transparent;
    --arc-button-link-border-color-default-on-light: transparent;
    --arc-button-link-background-color-disabled-on-dark: transparent;
    --arc-button-link-background-color-disabled-on-light: transparent;
    --arc-button-link-background-color-active-on-dark: transparent;
    --arc-button-link-background-color-active-on-light: transparent;
    --arc-button-link-background-color-hover-on-dark: transparent;
    --arc-button-link-background-color-hover-on-light: transparent;
    --arc-button-link-background-color-default-on-dark: transparent;
    --arc-button-link-background-color-default-on-light: transparent;
    --arc-button-inline-border-color-disabled-on-dark: transparent;
    --arc-button-inline-border-color-disabled-on-light: transparent;
    --arc-button-inline-border-color-active-on-dark: transparent;
    --arc-button-inline-border-color-active-on-light: transparent;
    --arc-button-inline-border-color-hover-on-dark: transparent;
    --arc-button-inline-border-color-hover-on-light: transparent;
    --arc-button-inline-border-color-default-on-dark: transparent;
    --arc-button-inline-border-color-default-on-light: transparent;
    --arc-button-inline-background-color-disabled-on-dark: transparent;
    --arc-button-inline-background-color-disabled-on-light: transparent;
    --arc-button-inline-background-color-active-on-dark: transparent;
    --arc-button-inline-background-color-active-on-light: transparent;
    --arc-button-inline-background-color-hover-on-dark: transparent;
    --arc-button-inline-background-color-hover-on-light: transparent;
    --arc-button-inline-background-color-default-on-dark: transparent;
    --arc-button-inline-background-color-default-on-light: transparent;
    --arc-button-flat-border-color-disabled-on-dark: transparent;
    --arc-button-flat-border-color-disabled-on-light: transparent;
    --arc-button-flat-border-color-default-on-dark: transparent;
    --arc-button-flat-border-color-default-on-light: transparent;
    --arc-button-flat-background-color-disabled-on-dark: transparent;
    --arc-button-flat-background-color-disabled-on-light: transparent;
    --arc-button-flat-background-color-default-on-dark: transparent;
    --arc-button-flat-background-color-default-on-light: transparent;
    --arc-button-outline-background-color-disabled-on-dark: transparent;
    --arc-button-outline-background-color-disabled-on-light: transparent;
    --arc-button-outline-background-color-active-on-dark: rgba(99, 223, 78, 0.10);
    --arc-button-outline-background-color-active-on-light: rgba(99, 223, 78, 0.10);
    --arc-button-outline-background-color-hover-on-dark: rgba(99, 223, 78, 0.10);
    --arc-button-outline-background-color-hover-on-light: rgba(99, 223, 78, 0.10);
    --arc-button-outline-background-color-default-on-dark: transparent;
    --arc-button-outline-background-color-default-on-light: transparent;
    --arc-button-small-height: 36px;
    --arc-button-small-border-width: 2px;
    --arc-button-small-font-size: 1.4rem;
    --arc-button-regular-height-at-xxl: 56px;
    --arc-button-regular-height-at-xs: 48px;
    --arc-button-regular-border-width: 2px;
    --arc-button-regular-font-size-at-xxl: 1.8rem;
    --arc-button-regular-font-size-at-xl: 1.6rem;
    --arc-button-regular-font-size-at-lg: 1.6rem;
    --arc-button-regular-font-size-at-md: 1.6rem;
    --arc-button-regular-font-size-at-sm: 1.6rem;
    --arc-button-regular-font-size-at-xs: 1.6rem;
    --arc-button-transition-hover-icon: 0.2s ease-out;
    --arc-button-transition-hover-color: 0.2s linear;
    --arc-button-font-weight: normal;
    --arc-breakpoint-xxl: 1680px;
    --arc-breakpoint-xl: 1366px;
    --arc-breakpoint-lg: 1024px;
    --arc-breakpoint-md: 768px;
    --arc-breakpoint-sm: 576px;
    --arc-breakpoint-xs: 0;
    --arc-drop-shadow-xxlarge-on-dark: 0px 24px 32px rgba(0, 0, 0, 0.6);
    --arc-drop-shadow-xxlarge-on-light: 0px 16px 24px rgba(3, 45, 66, 0.15);
    --arc-drop-shadow-xlarge-on-dark: 0px 16px 24px rgba(0, 0, 0, 0.6);
    --arc-drop-shadow-xlarge-on-light: 0px 12px 16px rgba(3, 45, 66, 0.15);
    --arc-drop-shadow-large-on-dark: 0px 12px 16px rgba(0, 0, 0, 0.6);
    --arc-drop-shadow-large-on-light: 0px 8px 12px rgba(3, 45, 66, 0.15);
    --arc-drop-shadow-medium-on-dark: 0px 8px 12px rgba(0, 0, 0, 0.6);
    --arc-drop-shadow-medium-on-light: 0px 4px 8px rgba(3, 45, 66, 0.15);
    --arc-drop-shadow-small-on-dark: 0px 4px 8px rgba(0, 0, 0, 0.6);
    --arc-drop-shadow-small-on-light: 0px 2px 4px rgba(3, 45, 66, 0.15);
    --arc-border-radius-capsule: 500px;
    --arc-border-radius-xxlarge: 32px;
    --arc-border-radius-xlarge: 32px;
    --arc-border-radius-large: 24px;
    --arc-border-radius-medium: 16px;
    --arc-border-radius-small: 8px;
    --arc-border-radius-xsmall: 4px;
    --arc-badge-horizontal-padding: 8px;
    --arc-badge-vertical-padding: 8px;
    --arc-badge-line-height: 1;
    --arc-badge-font-size: 1.4rem;
    --arc-tab-compact-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-compact-indicator-color-selected-on-light: var(--arc-color-wasabigreen);
    --arc-tab-compact-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-compact-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-dropdown-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-dropdown-indicator-color-selected-on-light: var(--arc-color-wasabigreen);
    --arc-tab-dropdown-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-dropdown-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-capsule-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-capsule-indicator-color-selected-on-light: var(--arc-color-white);
    --arc-tab-capsule-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-capsule-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-logo-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-logo-indicator-color-selected-on-light: var(--arc-color-neutral-900);
    --arc-tab-logo-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-logo-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-tertiary-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-tertiary-indicator-color-selected-on-light: var(--arc-color-wasabigreen);
    --arc-tab-tertiary-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-tertiary-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-secondary-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-secondary-indicator-color-selected-on-light: var(--arc-color-neutral-900);
    --arc-tab-secondary-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-secondary-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-tab-primary-indicator-color-selected-on-dark: var(--arc-color-wasabigreen);
    --arc-tab-primary-indicator-color-selected-on-light: var(--arc-color-wasabigreen);
    --arc-tab-primary-indicator-color-hover-on-dark: var(--arc-color-neutral-300);
    --arc-tab-primary-indicator-color-hover-on-light: var(--arc-color-neutral-300);
    --arc-space-size-1000: calc(var(--arc-space-size-base) * 10);
    --arc-space-size-750: calc(var(--arc-space-size-base) * 7.5);
    --arc-space-size-600: calc(var(--arc-space-size-base) * 6);
    --arc-space-size-500: calc(var(--arc-space-size-base) * 5);
    --arc-space-size-450: calc(var(--arc-space-size-base) * 4.5);
    --arc-space-size-400: calc(var(--arc-space-size-base) * 4);
    --arc-space-size-350: calc(var(--arc-space-size-base) * 3.5);
    --arc-space-size-300: calc(var(--arc-space-size-base) * 3);
    --arc-space-size-250: calc(var(--arc-space-size-base) * 2.5);
    --arc-space-size-200: calc(var(--arc-space-size-base) * 2);
    --arc-space-size-150: calc(var(--arc-space-size-base) * 1.5);
    --arc-space-size-125: calc(var(--arc-space-size-base) * 1.25);
    --arc-space-size-100: calc(var(--arc-space-size-base) * 1);
    --arc-space-size-75: calc(var(--arc-space-size-base) * .75);
    --arc-space-size-50: calc(var(--arc-space-size-base) * .5);
    --arc-space-size-25: calc(var(--arc-space-size-base) * .25);
    --arc-space-size-10: calc(var(--arc-space-size-base) * .125);
    --arc-divider-color-on-dark: var(--arc-color-white);
    --arc-divider-color-on-light: var(--arc-color-neutral-900);
    --arc-color-ui-positive: var(--arc-color-wasabigreen);
    --arc-color-ui-negative: var(--arc-color-pink);
    --arc-color-ui-success: var(--arc-color-brandgreen-800);
    --arc-color-ui-featured: var(--arc-color-yellow);
    --arc-color-ui-attention: var(--arc-color-orange);
    --arc-color-text-secondary-on-dark: var(--arc-color-wasabigreen);
    --arc-color-text-secondary-on-light: var(--arc-color-infiniteblue);
    --arc-color-text-primary-on-dark: var(--arc-color-white);
    --arc-color-text-primary-on-light: var(--arc-color-neutral-900);
    --arc-color-link-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-color-link-disabled-on-light: var(--arc-color-neutral-300);
    --arc-color-gradient-brand-dark-purple-at-xxl: radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(191, 113, 242, 0.5) 10%, rgba(191, 113, 242, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(118, 97, 255, 0.5) 10%, rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-purple-at-xl: radial-gradient(ellipse 60% 80% at bottom left,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242,0) 100%),radial-gradient(ellipse 60% 80% at top right,rgba(118, 97, 255,0.5) 10%, rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-purple-at-lg: radial-gradient(ellipse 60% 60% at bottom left,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242,0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-purple-at-md: radial-gradient(ellipse 70% 50% at bottom left,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242,0) 100%),radial-gradient(ellipse 70% 50% at top right,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-purple-at-sm: radial-gradient(ellipse 80% 40% at bottom left,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242,0) 100%),radial-gradient(ellipse 80% 40% at top right,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-purple-at-xs: radial-gradient(ellipse 100% 30% at bottom left,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242,0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-xxl: radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(118, 97, 255, 0.5) 10%, rgba(118, 97, 255, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(191, 113, 242, 0.5) 10%, rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-xl: radial-gradient(ellipse 60% 80% at bottom left,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255,0) 100%),radial-gradient(ellipse 60% 80% at top right,rgba(191, 113, 242,0.5) 10%, rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-lg: radial-gradient(ellipse 60% 60% at bottom left,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255,0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-md: radial-gradient(ellipse 70% 50% at bottom left,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255,0) 100%),radial-gradient(ellipse 70% 50% at top right,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-sm: radial-gradient(ellipse 80% 40% at bottom left,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255,0) 100%),radial-gradient(ellipse 80% 40% at top right,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-indigo-at-xs: radial-gradient(ellipse 100% 30% at bottom left,rgba(118, 97, 255,0.5) 10%,rgba(118, 97, 255,0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(191, 113, 242,0.5) 10%,rgba(191, 113, 242, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-xxl: radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(82, 184, 255, 0.5) 10%, rgba(82, 184, 255, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(118, 97, 255, 0.5) 10%, rgba(118, 97, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-xl: radial-gradient(ellipse 60% 80% at bottom left,rgba(82,184,255,0.5) 10%, rgba(82,184,255,0) 100%), radial-gradient(ellipse 60% 80% at top right,rgba(118,97,255,0.5) 10%, rgba(118,97,255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-lg: radial-gradient(ellipse 60% 60% at bottom left,rgba(82,184,255,0.5) 10%, rgba(82,184,255,0) 100%), radial-gradient(ellipse 60% 60% at top right,rgba(118,97,255,0.5) 10%, rgba(118,97,255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-md: radial-gradient(ellipse 70% 50% at bottom left,rgba(82,184,255,0.5) 10%, rgba(82,184,255,0) 100%), radial-gradient(ellipse 70% 50% at top right,rgba(118,97,255,0.5) 10%, rgba(118,97,255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-sm: radial-gradient(ellipse 80% 40% at bottom left,rgba(82,184,255,0.5) 10%, rgba(82,184,255,0) 100%), radial-gradient(ellipse 80% 40% at top right,rgba(118,97,255,0.5) 10%, rgba(118,97,255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-blue-at-xs: radial-gradient(ellipse 100% 30% at bottom left,rgba(82,184,255,0.5) 10%, rgba(82,184,255,0) 100%), radial-gradient(ellipse 100% 30% at top right,rgba(118,97,255,0.5) 10%, rgba(118,97,255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-xxl: radial-gradient(44.8% 63.1% at 4.4% 107.4%, rgba(99, 223, 78, 0.5) 10%, rgba(99, 223, 78, 0) 100%), radial-gradient(38% 65.7% at 97.7% 3.5%, rgba(82, 184, 255, 0.5) 10%, rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-xl: radial-gradient(ellipse 60% 80% at bottom left,rgba(99,223,78,0.5) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 60% 80% at top right,rgba(82,184,255,0.5) 10%, rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-lg: radial-gradient(ellipse 60% 60% at bottom left,rgba(99,223,78,0.5) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 60% 60% at top right,rgba(82,184,255,0.5) 10%,rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-md: radial-gradient(ellipse 70% 50% at bottom left,rgba(99,223,78,0.5) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 70% 50% at top right,rgba(82,184,255,0.5) 10%,rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-sm: radial-gradient(ellipse 80% 40% at bottom left,rgba(99,223,78,0.5) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 80% 40% at top right,rgba(82,184,255,0.5) 10%,rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-brand-dark-green-at-xs: radial-gradient(ellipse 100% 30% at bottom left,rgba(99,223,78,0.5) 10%,rgba(99, 223, 78, 0) 100%),radial-gradient(ellipse 100% 30% at top right,rgba(82,184,255,0.5) 10%,rgba(82, 184, 255, 0) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-radial-top-purple-blue-tint: radial-gradient(circle at top, rgba(82, 116, 255, 0.18) 10%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-radial-top-wasabigreen-blue-tint: radial-gradient(circle at top, rgba(98, 216, 78, 0.18) 10%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-radial-top-infiniteblue: radial-gradient(circle at top, rgba(36, 194, 206, 0.4) 10%, rgba(36, 194, 206, 0) 80%), var(--arc-color-infiniteblue);
    --arc-color-gradient-radial-bottom-purple-blue-tint: radial-gradient(circle at bottom, rgba(82, 116, 255, 0.18) 10%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-radial-bottom-wasabigreen-blue-tint: radial-gradient(circle at bottom, rgba(98, 216, 78, 0.18) 10%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-radial-bottom-infiniteblue: radial-gradient(circle at bottom, rgba(36, 194, 206, 0.4) 10%, rgba(36, 194, 206, 0) 80%), var(--arc-color-infiniteblue);
    --arc-color-gradient-diagonal-purple-blue-tint: linear-gradient(to bottom right, rgba(82, 116, 255, 0.18) 0.2%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-diagonal-purple-blue: linear-gradient(to bottom right, #5A7AFF 20%, var(--arc-color-blue) 100%);
    --arc-color-gradient-diagonal-wasabigreen-blue-tint: linear-gradient(to bottom right, rgba(98, 216, 78, 0.18) 0%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-diagonal-wasabigreen-blue: linear-gradient(to bottom right, var(--arc-color-wasabigreen) 0%, var(--arc-color-blue) 80%);
    --arc-color-gradient-diagonal-infiniteblue: linear-gradient(to bottom right, rgba(36, 194, 206, 0) 20%, rgba(36, 194, 206, 0.4) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-vertical-purple-blue-tint: linear-gradient(180deg, rgba(82, 116, 255, 0.18) 0%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-vertical-purple-blue: linear-gradient(180deg, #5A7AFF 20%, var(--arc-color-blue) 100%);
    --arc-color-gradient-vertical-wasabigreen-blue-tint: linear-gradient(180deg, rgba(98, 216, 78, 0.18) 0%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-vertical-wasabigreen-blue: linear-gradient(180deg, var(--arc-color-wasabigreen) 0%, var(--arc-color-blue) 80%);
    --arc-color-gradient-vertical-infiniteblue: linear-gradient(180deg, rgba(36, 194, 206, 0) 20%, rgba(36, 194, 206, 0.4) 100%), var(--arc-color-infiniteblue);
    --arc-color-gradient-horizontal-purple-blue-tint: linear-gradient(90deg, rgba(82, 116, 255, 0.18) 0%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-horizontal-purple-blue: linear-gradient(90deg, #5A7AFF 20%, var(--arc-color-blue) 100%);
    --arc-color-gradient-horizontal-wasabigreen-blue-tint: linear-gradient(90deg, rgba(98, 216, 78, 0.18) 0%, rgba(36, 194, 206, 0.18) 80%), var(--arc-color-white);
    --arc-color-gradient-horizontal-wasabigreen-blue: linear-gradient(90deg, var(--arc-color-wasabigreen) 0%, var(--arc-color-blue) 80%);
    --arc-color-gradient-horizontal-infiniteblue: linear-gradient(90deg, rgba(36, 194, 206, 0) 20%, rgba(36, 194, 206, 0.4) 100%), var(--arc-color-infiniteblue);
    --arc-button-tag-border-color-disabled-on-dark: var(--arc-color-neutral-300);
    --arc-button-tag-border-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-tag-border-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-tag-border-color-active-on-light: var(--arc-color-brandgreen-400);
    --arc-button-tag-border-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-tag-border-color-hover-on-light: var(--arc-color-brandgreen-300);
    --arc-button-tag-background-color-disabled-on-light: var(--arc-color-white);
    --arc-button-tag-background-color-default-on-light: var(--arc-color-white);
    --arc-button-tag-color-disabled-on-dark: var(--arc-color-neutral-300);
    --arc-button-tag-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-tag-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-tag-color-active-on-light: var(--arc-color-infiniteblue);
    --arc-button-tag-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-tag-color-hover-on-light: var(--arc-color-infiniteblue);
    --arc-button-tag-color-default-on-dark: var(--arc-color-white);
    --arc-button-tag-color-default-on-light: var(--arc-color-infiniteblue);
    --arc-button-tag-font-family: var(--arc-font-family-regular);
    --arc-button-mono-outline-border-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-mono-outline-border-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-mono-outline-border-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-mono-outline-border-color-active-on-light: var(--arc-color-neutral-800);
    --arc-button-mono-outline-border-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-mono-outline-border-color-hover-on-light: var(--arc-color-neutral-700);
    --arc-button-mono-outline-border-color-default-on-dark: var(--arc-color-white);
    --arc-button-mono-outline-border-color-default-on-light: var(--arc-color-neutral-900);
    --arc-button-mono-outline-background-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-mono-outline-background-color-active-on-light: var(--arc-color-neutral-800);
    --arc-button-mono-outline-background-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-mono-outline-background-color-hover-on-light: var(--arc-color-neutral-700);
    --arc-button-mono-outline-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-mono-outline-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-mono-outline-font-color-active-on-dark: var(--arc-color-neutral-900);
    --arc-button-mono-outline-font-color-active-on-light: var(--arc-color-white);
    --arc-button-mono-outline-font-color-hover-on-dark: var(--arc-color-neutral-900);
    --arc-button-mono-outline-font-color-hover-on-light: var(--arc-color-white);
    --arc-button-mono-outline-font-color-default-on-dark: var(--arc-color-white);
    --arc-button-mono-outline-font-color-default-on-light: var(--arc-color-neutral-900);
    --arc-button-mono-solid-border-color-disabled-on-dark: var(--arc-color-neutral-400);
    --arc-button-mono-solid-border-color-disabled-on-light: var(--arc-color-neutral-100);
    --arc-button-mono-solid-border-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-mono-solid-border-color-active-on-light: var(--arc-color-neutral-800);
    --arc-button-mono-solid-border-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-mono-solid-border-color-hover-on-light: var(--arc-color-neutral-700);
    --arc-button-mono-solid-border-color-default-on-dark: var(--arc-color-white);
    --arc-button-mono-solid-border-color-default-on-light: var(--arc-color-neutral-900);
    --arc-button-mono-solid-background-color-disabled-on-dark: var(--arc-color-neutral-400);
    --arc-button-mono-solid-background-color-disabled-on-light: var(--arc-color-neutral-100);
    --arc-button-mono-solid-background-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-mono-solid-background-color-active-on-light: var(--arc-color-neutral-800);
    --arc-button-mono-solid-background-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-mono-solid-background-color-hover-on-light: var(--arc-color-neutral-700);
    --arc-button-mono-solid-background-color-default-on-dark: var(--arc-color-white);
    --arc-button-mono-solid-background-color-default-on-light: var(--arc-color-neutral-900);
    --arc-button-mono-solid-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-mono-solid-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-mono-solid-font-color-active-on-dark: var(--arc-color-neutral-900);
    --arc-button-mono-solid-font-color-active-on-light: var(--arc-color-white);
    --arc-button-mono-solid-font-color-hover-on-dark: var(--arc-color-neutral-900);
    --arc-button-mono-solid-font-color-hover-on-light: var(--arc-color-white);
    --arc-button-mono-solid-font-color-default-on-dark: var(--arc-color-neutral-900);
    --arc-button-mono-solid-font-color-default-on-light: var(--arc-color-white);
    --arc-button-link-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-link-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-link-font-color-active-on-dark: var(--arc-color-link-active-on-dark);
    --arc-button-link-font-color-active-on-light: var(--arc-color-link-active-on-light);
    --arc-button-link-font-color-hover-on-dark: var(--arc-color-link-hover-on-dark);
    --arc-button-link-font-color-hover-on-light: var(--arc-color-link-hover-on-light);
    --arc-button-link-font-color-default-on-dark: var(--arc-color-link-default-on-dark);
    --arc-button-link-font-color-default-on-light: var(--arc-color-link-default-on-light);
    --arc-button-inline-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-inline-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-inline-font-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-inline-font-color-active-on-light: var(--arc-color-brandblue-700);
    --arc-button-inline-font-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-inline-font-color-hover-on-light: var(--arc-color-brandblue-600);
    --arc-button-inline-font-color-default-on-dark: var(--arc-color-white);
    --arc-button-inline-font-color-default-on-light: var(--arc-color-infiniteblue);
    --arc-button-flat-border-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-flat-border-color-active-on-light: var(--arc-color-neutral-200);
    --arc-button-flat-border-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-flat-border-color-hover-on-light: var(--arc-color-neutral-100);
    --arc-button-flat-background-color-active-on-dark: var(--arc-color-neutral-300);
    --arc-button-flat-background-color-active-on-light: var(--arc-color-neutral-200);
    --arc-button-flat-background-color-hover-on-dark: var(--arc-color-neutral-200);
    --arc-button-flat-background-color-hover-on-light: var(--arc-color-neutral-100);
    --arc-button-flat-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-flat-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-flat-font-color-active-on-dark: var(--arc-color-infiniteblue);
    --arc-button-flat-font-color-active-on-light: var(--arc-color-infiniteblue);
    --arc-button-flat-font-color-hover-on-dark: var(--arc-color-infiniteblue);
    --arc-button-flat-font-color-hover-on-light: var(--arc-color-infiniteblue);
    --arc-button-flat-font-color-default-on-dark: var(--arc-color-white);
    --arc-button-flat-font-color-default-on-light: var(--arc-color-infiniteblue);
    --arc-button-outline-border-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-outline-border-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-outline-border-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-outline-border-color-active-on-light: var(--arc-color-brandgreen-400);
    --arc-button-outline-border-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-outline-border-color-hover-on-light: var(--arc-color-brandgreen-300);
    --arc-button-outline-border-color-default-on-dark: var(--arc-color-brandgreen-500);
    --arc-button-outline-border-color-default-on-light: var(--arc-color-brandgreen-500);
    --arc-button-outline-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-outline-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-outline-font-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-outline-font-color-active-on-light: var(--arc-color-infiniteblue);
    --arc-button-outline-font-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-outline-font-color-hover-on-light: var(--arc-color-infiniteblue);
    --arc-button-outline-font-color-default-on-dark: var(--arc-color-white);
    --arc-button-outline-font-color-default-on-light: var(--arc-color-infiniteblue);
    --arc-button-solid-border-color-disabled-on-dark: var(--arc-color-neutral-400);
    --arc-button-solid-border-color-disabled-on-light: var(--arc-color-neutral-100);
    --arc-button-solid-border-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-solid-border-color-active-on-light: var(--arc-color-brandgreen-400);
    --arc-button-solid-border-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-solid-border-color-hover-on-light: var(--arc-color-brandgreen-300);
    --arc-button-solid-border-color-default-on-dark: var(--arc-color-brandgreen-500);
    --arc-button-solid-border-color-default-on-light: var(--arc-color-brandgreen-500);
    --arc-button-solid-background-color-disabled-on-dark: var(--arc-color-neutral-400);
    --arc-button-solid-background-color-disabled-on-light: var(--arc-color-neutral-100);
    --arc-button-solid-background-color-active-on-dark: var(--arc-color-brandgreen-400);
    --arc-button-solid-background-color-active-on-light: var(--arc-color-brandgreen-400);
    --arc-button-solid-background-color-hover-on-dark: var(--arc-color-brandgreen-300);
    --arc-button-solid-background-color-hover-on-light: var(--arc-color-brandgreen-300);
    --arc-button-solid-background-color-default-on-dark: var(--arc-color-brandgreen-500);
    --arc-button-solid-background-color-default-on-light: var(--arc-color-brandgreen-500);
    --arc-button-solid-font-color-disabled-on-dark: var(--arc-color-neutral-500);
    --arc-button-solid-font-color-disabled-on-light: var(--arc-color-neutral-300);
    --arc-button-solid-font-color-active-on-dark: var(--arc-color-infiniteblue);
    --arc-button-solid-font-color-active-on-light: var(--arc-color-infiniteblue);
    --arc-button-solid-font-color-hover-on-dark: var(--arc-color-infiniteblue);
    --arc-button-solid-font-color-hover-on-light: var(--arc-color-infiniteblue);
    --arc-button-solid-font-color-default-on-dark: var(--arc-color-infiniteblue);
    --arc-button-solid-font-color-default-on-light: var(--arc-color-infiniteblue);
    --arc-button-small-border-radius: var(--arc-border-radius-capsule);
    --arc-button-regular-border-radius: var(--arc-border-radius-capsule);
    --arc-button-font-family: var(--arc-font-family-semibold);
    --arc-badge-font-color-on-dark: var(--arc-color-white);
    --arc-badge-font-color-on-light: var(--arc-color-neutral-900);
    --arc-badge-border-radius: var(--arc-border-radius-xsmall);
    --arc-row-padding-xlarge-at-xxl: var(--arc-space-size-500);
    --arc-row-padding-xlarge-at-xl: var(--arc-space-size-500);
    --arc-row-padding-xlarge-at-lg: var(--arc-space-size-500);
    --arc-row-padding-xlarge-at-md: var(--arc-space-size-350);
    --arc-row-padding-xlarge-at-sm: var(--arc-space-size-300);
    --arc-row-padding-xlarge-at-xs: var(--arc-space-size-300);
    --arc-row-padding-large-at-xxl: var(--arc-space-size-500);
    --arc-row-padding-large-at-xl: var(--arc-space-size-350);
    --arc-row-padding-large-at-lg: var(--arc-space-size-350);
    --arc-row-padding-large-at-md: var(--arc-space-size-250);
    --arc-row-padding-large-at-sm: var(--arc-space-size-250);
    --arc-row-padding-large-at-xs: var(--arc-space-size-250);
    --arc-row-padding-medium-at-xxl: var(--arc-space-size-350);
    --arc-row-padding-medium-at-xl: var(--arc-space-size-250);
    --arc-row-padding-medium-at-lg: var(--arc-space-size-250);
    --arc-row-padding-medium-at-md: var(--arc-space-size-200);
    --arc-row-padding-medium-at-sm: var(--arc-space-size-200);
    --arc-row-padding-medium-at-xs: var(--arc-space-size-200);
    --arc-row-padding-small-at-xxl: var(--arc-space-size-250);
    --arc-row-padding-small-at-xl: var(--arc-space-size-200);
    --arc-row-padding-small-at-lg: var(--arc-space-size-200);
    --arc-row-padding-small-at-md: var(--arc-space-size-150);
    --arc-row-padding-small-at-sm: var(--arc-space-size-150);
    --arc-row-padding-small-at-xs: var(--arc-space-size-150);
    --arc-row-padding-xsmall-at-xxl: var(--arc-space-size-200);
    --arc-row-padding-xsmall-at-xl: var(--arc-space-size-150);
    --arc-row-padding-xsmall-at-lg: var(--arc-space-size-150);
    --arc-row-padding-xsmall-at-md: var(--arc-space-size-100);
    --arc-row-padding-xsmall-at-sm: var(--arc-space-size-100);
    --arc-row-padding-xsmall-at-xs: var(--arc-space-size-100);
    --arc-button-tag-padding-at-xl: var(--arc-space-size-200);
    --arc-button-tag-padding-at-xs: var(--arc-space-size-100);
    --arc-button-tag-font-icon-spacing: var(--arc-space-size-125);
    --arc-button-small-icon-spacing: var(--arc-space-size-50);
    --arc-button-small-padding: var(--arc-space-size-125);
    --arc-button-regular-icon-spacing: var(--arc-space-size-75);
    --arc-button-regular-padding-at-xxl: var(--arc-space-size-200);
    --arc-button-regular-padding-at-xs: var(--arc-space-size-150)
}

.northern-lights-container {
  background-color: var(--nothern-light-background-color);
  height: 100%;
  left: 0;
  contain: paint;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: var(--arc-z-index-deep)
}

.northern-lights-1,
.northern-lights-2 {
  background-repeat: no-repeat;
  background-size: 175% 175%;
  filter: blur(var(--nothern-light-blur-amount));
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%
}

.northern-lights-1 {
  animation: randomMovement1 var(--nothern-light-animation-duration-aurora-1) ease-in-out infinite, rotate1 60s linear infinite;
  background: radial-gradient(circle at 20% 30%, var(--nothern-light-aurora-color-1), transparent 15%);
  z-index: 1
}

.northern-lights-2 {
  animation: randomMovement2 var(--nothern-light-animation-duration-aurora-2) ease-in-out infinite, rotate2 75s linear infinite;
  background: radial-gradient(circle at 20% 30%, var(--nothern-light-aurora-color-2), transparent 20%);
  z-index: 1
}

@keyframes randomMovement1 {

  0%,
  100% {
    opacity: 0;
    transform: translate(-50vw, -50vh) scale(1)
  }

  10% {
    opacity: .4;
    transform: translate(-45vw, -45vh) scale(1.2)
  }

  20% {
    opacity: .5;
    transform: translate(45vw, -50vh) scale(1)
  }

  30% {
    opacity: .4;
    transform: translate(50vw, -45vh) scale(1.5)
  }

  40% {
    opacity: .3;
    transform: translate(50vw, 45vh) scale(1)
  }

  50% {
    opacity: .2;
    transform: translate(45vw, 50vh) scale(1.3)
  }

  60% {
    opacity: .4;
    transform: translate(-45vw, 50vh) scale(1)
  }

  70% {
    opacity: .5;
    transform: translate(-50vw, 45vh) scale(1.4)
  }

  80% {
    opacity: .2;
    transform: translate(-50vw, -45vh) scale(1)
  }

  90% {
    opacity: .5;
    transform: translate(-45vw, -50vh) scale(1.5)
  }
}

@keyframes randomMovement2 {

  0%,
  100% {
    opacity: 0;
    transform: translate(50vw, -50vh) scale(1)
  }

  10% {
    opacity: .5;
    transform: translate(45vw, -45vh) scale(1.1)
  }

  20% {
    opacity: .5;
    transform: translate(50vw, 45vh) scale(1)
  }

  30% {
    opacity: .5;
    transform: translate(45vw, 50vh) scale(1.3)
  }

  40% {
    opacity: .3;
    transform: translate(-45vw, 50vh) scale(1)
  }

  50% {
    opacity: .2;
    transform: translate(-50vw, 45vh) scale(1.4)
  }

  60% {
    opacity: .4;
    transform: translate(-50vw, -45vh) scale(1)
  }

  70% {
    opacity: .5;
    transform: translate(-45vw, -50vh) scale(1.2)
  }

  80% {
    opacity: .2;
    transform: translate(45vw, -50vh) scale(1)
  }

  90% {
    opacity: .5;
    transform: translate(50vw, -45vh) scale(1.5)
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(-360deg)
  }
}

@keyframes particleAnimation {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(5px, -5px)
  }
}

.northern-lights-particles {
  animation: 5s ease-in-out infinite particleAnimation;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0
}

.northern-lights-particle {
  background-color: var(--nothern-light-particle-color);
  border-radius: 50%;
  height: var(--nothern-light-particle-size);
  opacity: var(--nothern-light-particle-opacity-high);
  position: absolute;
  transition: opacity .3s, transform 5s ease-in-out;
  width: var(--nothern-light-particle-size)
}

@media only screen and (max-width:768px) {

  .northern-lights-1,
  .northern-lights-2,
  .northern-lights-particles {
    display: none
  }
}

/* --- Base --- */
body {
  font-family: 'Inter', 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-dark);
  background-color: var(--white);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Navigation --- */
.navbar {
  padding: 0;
  transition: background-color 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
}

.navbar .container {
  display: flex;
  align-items: center;
  width: 100%;
}

.navbar.scrolled {
  background-color: rgba(11, 42, 80, 0.97) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  position: relative;
  top: 3px;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.navbar-brand .brand-e {
  color: var(--accent);
}

.navbar-brand .brand-rest {
  color: var(--white);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--accent);
}

/* --- Industries mega-dropdown --- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown .nav-link .dropdown-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 4px;
  transition: transform 0.25s;
}

.nav-dropdown.open .nav-link .dropdown-chevron {
  transform: rotate(-135deg) translateY(-2px);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  padding: 1.5rem;
  min-width: 640px;
  z-index: 9999;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu .dropdown-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* Featured cards (left column) */
.dropdown-featured {
  flex: 0 0 240px;
  padding-right: 1.25rem;
  border-right: 1px dashed var(--border-light);
}

.dropdown-featured-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.dropdown-featured-card:hover {
  background: var(--feature-card-bg);
}

.dropdown-featured-card .featured-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--accent);
  border-radius: 6px;
  font-size: 0.9rem;
}

.dropdown-featured-card .featured-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.dropdown-featured-card .featured-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.35;
}

/* Link columns (right side) */
.dropdown-links {
  flex: 1;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
}

.dropdown-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 2rem;
}

.dropdown-links-grid a {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.dropdown-links-grid a:hover {
  background: var(--off-white);
  color: var(--navy);
}

.dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.dropdown-footer span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dropdown-footer .btn-view-all {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: var(--accent);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.dropdown-footer .btn-view-all:hover {
  background: var(--accent-hover);
}

/* Mobile: stack vertically */
@media (max-width: 991px) {
  .nav-dropdown-menu {
    position: static;
    min-width: unset;
    box-shadow: none;
    background: rgba(11, 42, 80, 0.95);
    border-radius: 0;
    padding: 0.75rem 0;
    flex-direction: column;
  }

  .dropdown-featured {
    flex: none;
    border-right: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    padding: 0 0 0.75rem;
    margin-bottom: 0.75rem;
  }

  .dropdown-featured-card .featured-title,
  .dropdown-featured-card .featured-desc {
    color: rgba(255, 255, 255, 0.85);
  }

  .dropdown-featured-card .featured-desc {
    color: rgba(255, 255, 255, 0.6);
  }

  .dropdown-featured-card:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .dropdown-links {
    padding-left: 0;
  }

  .dropdown-links-grid a {
    color: rgba(255, 255, 255, 0.8);
  }

  .dropdown-links-grid a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
  }

  .nav-dropdown-menu .dropdown-label {
    color: rgba(255, 255, 255, 0.5);
  }

  .dropdown-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
  }

  .dropdown-footer span {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* --- Services / Solutions chevron dropdown --- */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open>.nav-dropdown-toggle {
  color: var(--accent);
}

.nav-dropdown-toggle .dropdown-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s;
}

.nav-dropdown.open .nav-dropdown-toggle .dropdown-chevron {
  transform: rotate(-135deg) translateY(1px);
}

.nav-dropdown>.nav-dropdown-menu {
  min-width: 340px;
  padding: 0.75rem;
  display: none;
  flex-direction: column;
  right: 0;
  left: auto;
}

.nav-dropdown.open>.nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu>a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.15s;
}

.nav-dropdown-menu>a:hover {
  background: var(--off-white);
}

.nav-dropdown-menu>a>i {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--accent);
  border-radius: 6px;
  font-size: 0.9rem;
}

.nav-dropdown-menu>a>span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown-menu>a>span>strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.nav-dropdown-menu>a>span>small {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.nav-dropdown-footer {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-light);
  text-align: right;
}

.nav-dropdown-footer a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.nav-dropdown-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .nav-dropdown>.nav-dropdown-menu {
    right: auto;
    left: 0;
    min-width: unset;
  }
}

/* --- Burger icon --- */
.navbar .burger {
  position: relative;
  z-index: 9998;
  cursor: pointer;
  padding: 5px 4px;
  background-color: transparent;
}

.navbar .burger:active,
.navbar .burger:focus {
  outline: none;
}

.navbar .burger i {
  display: block;
  width: 36px;
  height: 3px;
  margin: 8px;
  background-color: #b9bff1;
}

.navbar .burger i:nth-child(n) {
  transition: transform .45s cubic-bezier(.43, .77, .15, 1.5), background .3s ease;
}

.navbar .burger.hover i:nth-child(1) {
  transform: translate3d(0, -4px, 0);
}

.navbar .burger.hover i:nth-child(3) {
  transform: translate3d(0, 4px, 0);
}

.navbar .burger.st-1 {
  animation: rotate-back-in .8s cubic-bezier(.2, .86, .35, 1) forwards;
}

.navbar .burger.st-1 i:nth-child(1) {
  transform: translate3d(0, 9px, 0);
}

.navbar .burger.st-1 i:nth-child(3) {
  transform: translate3d(0, -9px, 0);
}

.navbar .burger.st-2 {
  animation: rotate-back-out .85s cubic-bezier(.2, .86, .35, 1) forwards;
}

.navbar .burger.st-2 i:nth-child(1) {
  transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.5);
}

.navbar .burger.st-2 i:nth-child(2) {
  opacity: 0;
}

.navbar .burger.st-2 i:nth-child(3) {
  transform: translate3d(0, -10px, 0) rotate(-45deg) scale(1.5);
}

.navbar .burger.st-2.hover i:nth-child(1) {
  transform: translate3d(0, 10px, 0) rotate(50deg) scale(1.5);
}

.navbar .burger.st-2.hover i:nth-child(3) {
  transform: translate3d(0, -10px, 0) rotate(-50deg) scale(1.5);
}

@keyframes rotate-back-out {
  0% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(185deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes rotate-back-in {
  0% {
    transform: rotate(180deg);
  }

  45% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}

/* --- Nav panel (burger-controlled) --- */
#mainNav {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: block !important;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

#mainNav.open {
  max-height: 300px;
  opacity: 1;
}

/* Show nav items horizontally on large screens */
@media (min-width: 992px) {
  #mainNav {
    max-height: none !important;
    opacity: 1 !important;
    display: flex !important;
    overflow: visible !important;
    flex-direction: row;
    position: static;
    flex: 1;
    justify-content: flex-end;
  }

  .navbar-nav {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
  }
}

/* letters */
.letters,
.letter {
  margin-left: 1em;
  height: 50px;
  line-height: 40px;
  position: relative;
  font-family: "Raleway", "Sans serif";
  font-size: 44px;
  /* font-weight: 800; */
  text-shadow: 2px 2px 5px #bdb487;
}

.letter {
  margin-left: 0px;
  line-height: 24px;
  font-size: 58px;
}

.letters>span {
  float: left;
}

.letters>span.a,
.letter>span.a,
.letters>span.d {
  top: 5px;
  float: left;
  -webkit-transform: rotate(-40deg) translate3d(-2.8px, -.8px, 0);
  -moz-transform: rotate(-40deg) translate3d(-2.8px, -.8px, 0);
  transform: rotate(-40deg) translate3d(-2.8px, -.8px, 0);
  text-shadow: .5px 2.5px 5px #70abbd;

  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  transition: color 1s;
}

.letters>span.a,
.letter>span.a,
.letters>span.b,
.letters>span.f {
  color: #bbbbf1;
  font-weight: 800;
}

.letters>span.b {
  text-shadow: .5px 2.5px 5px #70abbd;
}

.letters>span.a:hover,
.letter>span.a:hover,
.letters>span.d:hover {
  color: #67aefb;
}

.letters>span.f {
  color: #000000;
  font-size: .6em;
  line-height: 2em;
}

.letters>span.c,
.letters>span.d,
.letters>span.e {
  /*   color:#00008a; */
  color: #8793fb;
  font-weight: 300;
}

.letters:after {
  clear: both;
}

/* --- Hero --- */
.hero.parallax-container {
  background: transparent;
}

.hero {
  background: var(--gradient-hero);
  position: relative;
  overflow: visible;
  padding: 8rem 0 12rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
  z-index: 20;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -10px;
  background: rgb(0 0 0 / 15%);
  z-index: 15;
  pointer-events: none;
}

.hero::after {
  display: none;
}

.hero .container {
  position: relative;
  z-index: 30;
}

.hero .container-fluid {
  position: relative;
  z-index: 30;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 540px;
}

@media (min-width: 576px) {
  .hero .container-fluid {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .hero .container-fluid {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .hero .container-fluid {
    max-width: 960px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 1200px) {
  .hero .container-fluid {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .hero .container-fluid {
    max-width: 1320px;
  }
}

.hero-text-col {
  width: 50%;
  padding: 0 2rem;
  position: relative;
  z-index: 30;
}

.hero-image-col {
  width: 50%;
  padding: 0 2rem;
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  max-width: 100%;
  height: auto;
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  text-shadow: 6px 2.5px 5px #000000;
}

.hero h1 .text-accent {
  color: var(--accent);
}

.hero .lead {
  font-size: 1.5rem;
  text-shadow: 2px 1.5px 1px #000000;
  color: #ffffff;
  max-width: 600px;
  margin-bottom: 2rem;
  font-weight: 400;
}

.hero .section-label {
  text-shadow: 6px 2.5px 5px #000000;
  color: #aef5f1;
}

/* --- Buttons --- */
.btn-accent {
  background-color: var(--accent);
  color: var(--navy);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.25s;
}

.btn-accent:hover {
  background-color: var(--accent-hover);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  transition: all 0.25s;
  background: rgb(80 197 1 / 67%)
}

.btn-outline-light:hover {
  border-color: var(--accent);
  color: var(--accent);
  /*background: transparent; */
}

/* --- Sections --- */
section {
  padding: 5rem 0;
}

section.bg-light {
  background: var(--gradient-bg-light) !important;
}

section.bg-navy {
  background-color: var(--navy);
  color: var(--white);
  position: relative;
  z-index: 20;
}

.section-label {
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #2d78b4;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
}

/* --- Cards --- */
.card-service {
  background: var(--card-service-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
}

.card-service:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(-4px);
}

/* Scroll-reveal: hidden until IntersectionObserver tags .is-revealed.
   Gated on html.js so no-JS users still see the cards. */
html.js .card-service {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.7s ease-out,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s,
    box-shadow 0.3s;
}

html.js .card-service.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .card-service {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
}

/* Hero text uses the same slide-in + bounce treatment. */
html.js .hero-content {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s ease-out,
    transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.js .hero-content.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.card-service .icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--card-service-icon-bg);
  border: 1px solid var(--card-service-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.75rem;
  color: var(--card-service-link-color);
}

.card-service h3,
.card-service h4 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  color: var(--card-service-heading-color);
}

.card-service p {
  color: #f8e72f;
}

.card-service ul {
  color: var(--card-service-list-color) !important;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.card-service li {
  color: var(--card-service-list-color) !important;
}

.card-service .card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--card-service-link-color);
}

/* --- Problem / Stats Section --- */
.stat-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--gradient-stat-card);
  border: 1px solid var(--card-service-border);
  border-radius: var(--radius);
}

.stat-card .stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card .stat-text {
  font-size: 1rem;
  color: var(--text-light);
}

/* --- Missed Call Calculator --- */
.money-leak-section {
  background: linear-gradient(135deg, #f6fbff 0%, #edf5fb 45%, #f8fbfe 100%);
}

.money-leak-copy {
  padding-right: 1.5rem;
}

.money-leak-copy p {
  color: #f8e72f;
  font-size: 1.05rem;
}

.money-leak-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: rgba(11, 42, 80, 0.08);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
}

.money-leak-trust i {
  color: var(--accent);
}

.money-leak-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.money-leak-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.8rem;
  color: bisque;
  font-weight: 500;
}

.money-leak-list li::before {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--accent);
}

.money-leak-card {
  background: var(--gradient-card-service);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 45px rgba(11, 42, 80, 0.14);
  overflow: hidden;
}

.money-leak-form {
  padding: 2rem;
}

.money-leak-form-header {
  margin-bottom: 1.4rem;
}

.money-leak-form-kicker {
  margin-bottom: 0.35rem;
  color: rgba(48, 219, 0, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.money-leak-form-header h3 {
  margin-bottom: 0.45rem;
  color: var(--white);
  font-size: 1.45rem;
}

.money-leak-form-header p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
}

.money-leak-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.money-leak-field label {
  display: block;
  margin-bottom: 0.45rem;
  color: #cd00ff;
  font-size: 0.9rem;
  font-weight: 600;
}

.money-leak-field input {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.money-leak-field input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.money-leak-field input:focus {
  border-color: rgba(48, 219, 0, 0.75);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(48, 219, 0, 0.18);
}

.money-leak-note {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
}

.money-leak-results {
  padding: 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(240, 247, 252, 0.98) 100%);
}

.money-leak-results-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  font-weight: 800;
  color: #2d78b4;
  margin-bottom: 0.6rem;
}

.money-leak-monthly {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.money-leak-period {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
}

.money-leak-annual {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
}

.money-leak-opportunities {
  margin-bottom: 0.65rem;
  color: var(--text-dark);
  font-size: 0.98rem;
}

.money-leak-urgency {
  margin-bottom: 1.4rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.money-leak-results .btn-accent {
  width: 100%;
  text-align: center;
}

* --- Industry strip --- */
.industry-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.industry-item {
  text-align: center;
  color: var(--text-muted);
  transition: color 0.2s;
  color: #f8e72f;
  min-width: 120px;
}

.industry-item:hover {
  color: var(--accent);
}

.industry-item i {
  font-size: 2.25rem;
  display: block;
  margin-bottom: 0.5rem;
}

.industry-item span {
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--gradient-hero);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(0, 201, 219, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  color: var(--white);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.cta-banner p {
  color: var(--text-light);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* --- Process / How it Works --- */
.process-step {
  text-align: center;
  padding: 1.5rem;
  background: var(--gradient-process-step);
  border: 1px solid var(--card-service-border);
  border-radius: var(--radius);
}

.process-step .step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.process-step h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.process-step p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- Industry Cards (industries page) --- */
.card-industry {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2.5rem;
  margin-bottom: 2rem;
  transition: box-shadow 0.3s;
}

.card-industry:hover {
  box-shadow: var(--shadow-card-hover);
}

.card-industry .industry-icon {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.card-industry h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.card-industry .pain-point {
  background: #fff5f5;
  border-left: 4px solid #e53e3e;
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: #c53030;
}

.card-industry .solution {
  background: #f0fff4;
  border-left: 4px solid #38a169;
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: #276749;
}

.card-industry .target-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card-industry .target-list li {
  background: var(--gradient-off-white);
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* --- Feature list (services page) --- */
.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 0.5rem 0;
  padding-left: 1.75rem;
  position: relative;
  font-size: 0.95rem;
  color: bisque;
}

.feature-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 0.55rem;
  font-size: 0.85rem;
}

/* --- About page --- */
.about-header {
  background: var(--gradient-hero);
  padding: 6rem 0 4rem;
  text-align: center;
}

.about-header h1 {
  color: var(--white);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.about-header p {
  color: var(--text-light);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto;
}

.tech-badge {
  display: inline-block;
  background: var(--gradient-off-white);
  border: 1px solid var(--border-light);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0.25rem;
}

/* --- Footer --- */
.site-footer {
  background: var(--navy);
  color: var(--text-light);
  padding: 3rem 0 1.5rem;
}

.site-footer h4 {
  color: #8793fb;
  font-weight: 300;
}

.site-footer h5 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.site-footer a {
  color: var(--text-light);
  font-size: 0.9rem;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer ul {
  list-style: none;
  padding: 0;
}

.site-footer ul li {
  margin-bottom: 0.5rem;
}

.brand-accent {
  color: #bbbbf1;
  font-weight: 800;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-light);
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .hero {
    padding: 6rem 0 4rem;
    min-height: auto;
  }

  .hero-text-col,
  .hero-image-col {
    width: 100%;
  }

  .hero-image-col {
    margin-top: 2rem;
    justify-content: flex-start;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .money-leak-copy {
    padding-right: 0;
  }

  .money-leak-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .hero {
    padding: 5rem 0 3rem;
  }

  .hero h1 {
    font-size: 1.85rem;
  }

  .hero .lead {
    font-size: 1.05rem;
  }

  section {
    padding: 3.5rem 0;
  }

  .card-service {
    padding: 2rem 1.5rem;
  }

  .stat-card .stat-number {
    font-size: 2.25rem;
  }

  .industry-strip {
    gap: 1.25rem;
  }

  .money-leak-form,
  .money-leak-results {
    padding: 1.5rem;
  }

  .money-leak-monthly {
    font-size: 2.3rem;
  }
}

/* ============================================================
   Northern Lights aurora — page-scoped overrides
   Activated on <body class="has-aurora">. The aurora is fixed
   to the viewport and replaces the background of unstyled
   sections. .bg-light, .cta-banner, .site-footer, .hero, and
   the navbar keep their own opaque backgrounds.
   ============================================================ */
body.has-aurora {
  background-color: var(--arc-color-infiniteblue);
}

body.has-aurora .northern-lights-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  contain: layout paint;
}

body.has-aurora .background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Lift content sections above the fixed aurora layer.
   Navbar is already fixed-top via Bootstrap (z-index 1030), don't touch it.
   Hero is excluded — it has its own opaque parallax image and creating a
   stacking context here would put the parallax mirror (data-z-index="10")
   above the hero text. */
body.has-aurora > section:not(.hero),
body.has-aurora > footer {
  position: relative;
  z-index: 1;
}

/* Make unstyled sections transparent so the aurora shows through.
   Sections that should keep their own background are excluded. */
body.has-aurora > section:not(.bg-light):not(.bg-navy):not(.cta-banner):not(.hero) {
  background: transparent;
}

/* Text contrast inside the now-dark sections */
body.has-aurora > section:not(.bg-light):not(.bg-navy):not(.cta-banner):not(.hero) .section-title {
  color: var(--white);
}

body.has-aurora > section:not(.bg-light):not(.bg-navy):not(.cta-banner):not(.hero) .section-subtitle {
  color: rgba(255, 255, 255, 0.75);
}

body.has-aurora > section:not(.bg-light):not(.bg-navy):not(.cta-banner):not(.hero) .section-label {
  color: var(--accent-hover);
}

/* Hero parallax wrapper — preserve original transparency tweak */
body.has-aurora .hero.parallax-container {
  background: transparent;
}

.parallax-container {
  min-height: 300px;
}

/* Tighten the nav-link when a dropdown chevron button sits beside it —
   avoids a visible gap between the word and the chevron. Selector must
   beat `.navbar-dark .navbar-nav .nav-link` (0-3-0), so include those
   same ancestor classes. */
.navbar-dark .navbar-nav .nav-dropdown > .nav-link {
  padding-right: 0;
}