/* ROOT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {
   --font-main: 'DM Sans', sans-serif;
   --font-heading: 'Manrope', sans-serif;

   --clr-primary-light: #EDF7FC;
   --clr-primary-dark: rgb(var(--clr-primary-rgb));
   --clr-primary-accent: rgb(var(--clr-accent-rgb));

   --clr-secondary-light: #F3F8E9;
   --clr-secondary-dark: rgb(var(--clr-secondary-rgb));

   --clr-red-light: #FDECEC;
   --clr-red-dark: rgb(var(--clr-red-rgb));

   --clr-text: #526575;
   --clr-muted: #728391;
   --clr-border: #DFE8EE;
   --clr-white: rgb(var(--clr-white-rgb));

   --space-xs: .25rem;
   --space-sm: .5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-xxl: 3rem;
   --space-3xl: 4rem;
   --space-4xl: 6rem;

   --section-space: var(--space-4xl);

   --radius-sm: .5rem;
   --radius-md: 1rem;
   --radius-lg: 1.5rem;

   --card-padding: var(--space-xl);
   --shadow-card: 0 1rem 2.5rem rgba(var(--clr-primary-rgb), .08);
   --control-height: 3rem;
   --header-wave-height: 8rem;
   --site-image-shape: 44% 56% 62% 38% / 46% 44% 56% 54%;

   --title-display-size: clamp(1.75rem, 3vw, 2.5rem);
   --title-display-line-height: 1.25;
   --title-display-spacing: -.03em;

   --clr-primary-rgb: 23, 69, 104;
   --clr-accent-rgb: 32, 152, 209;
   --clr-secondary-rgb: 40, 122, 98;
   --clr-red-rgb: 198, 40, 40;
   --clr-white-rgb: 255, 255, 255;
   --clr-hero-green-rgb: 138, 188, 67;
   --clr-device: #202A33;
   --clr-device-border: #46515C;

   --transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

@media (max-width: 575.98px) {
   :root { --card-padding: var(--space-lg); }
}

/* COMPANY PAGE THEME */

.site-theme-companies .page-intro .section-highlight {
   color: var(--clr-secondary-dark);
}

.site-theme-companies .site-section-dark {
   background-color: var(--clr-secondary-dark);
}

.site-theme-companies .section-heading .section-label {
   color: var(--clr-secondary-dark);
   background: var(--clr-secondary-light);
}

.site-theme-companies .section-heading .section-highlight {
   color: var(--clr-secondary-dark);
}

/* Keep labels and highlights readable on dark sections. */

.site-theme-companies .site-section-dark .section-heading .section-label {
   color: var(--clr-secondary-light);
   background: rgba(var(--clr-white-rgb), .1);
}

.site-theme-companies .site-section-dark .section-heading .section-highlight {
   color: var(--clr-secondary-light);
}

/* Cards hover to green rather than blue. */

@media (hover: hover) and (pointer: fine) {
   .site-theme-companies .site-card-hover:hover,
   .site-theme-companies .site-card-hover-trigger:hover .site-card-hover {
      background: var(--clr-secondary-dark);
      border-color: var(--clr-secondary-dark);
   }

   .site-theme-companies .site-card-hover:hover .site-icon,
   .site-theme-companies .site-card-hover-trigger:hover .site-card-hover .site-icon {
      color: var(--clr-secondary-dark);
   }
}


/* BASE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
   margin: 0;
   color: var(--clr-text);
   background: var(--clr-white);
   font-family: var(--font-main);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }
::selection { color: var(--clr-white); background: var(--clr-primary-dark); }
:focus-visible { outline: 2px solid var(--clr-primary-dark); outline-offset: 3px; }


/* TYPOGRAPHY
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

h1, h2, h3, h4, h5, h6 {
   margin: 0 0 var(--space-md);
   color: var(--clr-primary-dark);
   font-family: var(--font-heading);
   font-weight: 700;
   line-height: 1.25;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (max-width: 767.98px) {
   h1 { font-size: 2.5rem; }
   h2 { font-size: 2rem; }
   h3 { font-size: 1.5rem; }
   h4 { font-size: 1.25rem; }
   h5 { font-size: 1.125rem; }
}

p { margin: 0 0 var(--space-md); }

a {
   color: var(--clr-primary-dark);
   text-decoration: none;
   transition: var(--transition);
}
a:hover { color: var(--clr-secondary-dark); }

ul, ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
li + li { margin-top: var(--space-sm); }


/* FORMS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.form-label {
   margin-bottom: var(--space-sm);
   color: var(--clr-primary-dark);
   font-size: .875rem;
   font-weight: 600;
}

.form-control, .form-select {
   min-height: var(--control-height);
   padding: .75rem var(--space-md);
   color: var(--clr-text);
   background-color: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-sm);
   font-size: 1rem;
   line-height: 1.5;
   transition: border-color .25s ease, box-shadow .25s ease;
}

.form-select { padding-right: var(--space-xxl); }
.form-control::placeholder { color: var(--clr-muted); opacity: 1; }

.form-control:focus, .form-select:focus {
   color: var(--clr-text);
   background-color: var(--clr-white);
   border-color: var(--clr-primary-dark);
   box-shadow: 0 0 0 .25rem rgba(var(--clr-primary-rgb), .12);
}

textarea.form-control { min-height: 9rem; resize: vertical; }
.form-text { margin-top: var(--space-sm); color: var(--clr-muted); }

.form-check-input:checked {
   background-color: var(--clr-primary-dark);
   border-color: var(--clr-primary-dark);
}

.form-check-input:focus {
   border-color: var(--clr-primary-dark);
   box-shadow: 0 0 0 .25rem rgba(var(--clr-primary-rgb), .12);
}


/* BUTTONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   min-height: var(--control-height);
   padding: .75rem var(--space-lg);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   font-family: var(--font-heading);
   font-size: .875rem;
   font-weight: 600;
   line-height: 1.5;
   text-align: center;
   cursor: pointer;
   transition: var(--transition);
   --bs-btn-active-color: var(--bs-btn-color);
   --bs-btn-active-bg: var(--bs-btn-bg);
   --bs-btn-active-border-color: var(--bs-btn-border-color);
   --bs-btn-disabled-color: var(--bs-btn-color);
   --bs-btn-disabled-bg: var(--bs-btn-bg);
   --bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

.site-btn-primary {
   color: var(--clr-white);
   background: var(--clr-primary-dark);
   border-color: var(--clr-primary-dark);
   --bs-btn-color: var(--clr-white);
   --bs-btn-bg: var(--clr-primary-dark);
   --bs-btn-border-color: var(--clr-primary-dark);
}

.site-btn-primary:hover, .site-btn-primary:focus-visible {
   color: var(--clr-primary-dark);
   background: var(--clr-primary-light);
   border-color: var(--clr-primary-dark);
}

.site-btn-secondary {
   color: var(--clr-white);
   background: var(--clr-secondary-dark);
   border-color: var(--clr-secondary-dark);
   --bs-btn-color: var(--clr-white);
   --bs-btn-bg: var(--clr-secondary-dark);
   --bs-btn-border-color: var(--clr-secondary-dark);
}

.site-btn-secondary:hover, .site-btn-secondary:focus-visible {
   color: var(--clr-secondary-dark);
   background: var(--clr-secondary-light);
   border-color: var(--clr-secondary-dark);
}

.site-btn-light {
   color: var(--clr-primary-dark);
   background: var(--clr-white);
   border-color: var(--clr-white);
   --bs-btn-color: var(--clr-primary-dark);
   --bs-btn-bg: var(--clr-white);
   --bs-btn-border-color: var(--clr-white);
}

.site-btn-light:hover, .site-btn-light:focus-visible {
   color: var(--clr-primary-dark);
   background: var(--clr-primary-light);
   border-color: var(--clr-primary-light);
}


/* INTRO BUTTON
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-intro-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-md);
   padding: 0;
   color: var(--clr-primary-dark);
   background: transparent;
   border: 0;
   font-family: var(--font-heading);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
}

.site-intro-play {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: var(--control-height);
   height: var(--control-height);
   color: var(--clr-white);
   background: var(--clr-red-dark);
   border-radius: 50%;
   animation: site-intro-beat 2s ease-in-out infinite;
   transition: var(--transition);
}

.site-intro-play i { transform: translateX(2px); }
.site-intro-btn:hover { color: var(--clr-red-dark); }
.site-intro-btn:hover .site-intro-play { color: var(--clr-red-dark); background: var(--clr-red-light); }

@keyframes site-intro-beat {
   0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--clr-red-rgb), .2); }
   50% { transform: scale(1.06); box-shadow: 0 0 0 var(--space-sm) rgba(var(--clr-red-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
   .site-intro-btn, .site-intro-play { transition: none; }
   .site-intro-play { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
   .site-btn:not(:disabled):hover { transform: scale(1.03); }
}

.site-btn:not(:disabled):active { transform: scale(.98); }
.site-btn:disabled { opacity: .6; cursor: not-allowed; }


/* HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-header {
   position: relative;
   z-index: 20;
   background: var(--clr-primary-dark);
}

.header-ecosystem {
   margin: 0;
   padding: var(--space-md);
   color: var(--clr-white);
   font-size: .625rem;
   font-weight: 600;
   letter-spacing: .15em;
}

.header-floating-nav {
   position: relative;
   margin-bottom: calc(-1 * var(--space-xl));
   background: var(--clr-white);
   border-block: 1px solid var(--clr-border);
   box-shadow: var(--shadow-card);
}

.site-header .navbar { padding-block: var(--space-md); }
.site-header .navbar-nav { gap: var(--space-xl); }
.site-header .nav-item + .nav-item { margin-top: 0; }
.site-header .navbar-brand { margin-right: var(--space-xl); padding: 0; }
.site-header .navbar-brand img { display: block; width: 95px; }

.site-header .navbar-nav .nav-link {
   position: relative;
   padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
   color: var(--clr-primary-dark);
   font-family: var(--font-heading);
   font-size: .8125rem;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   white-space: nowrap;
}

.site-header .nav-link::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   width: 6px;
   height: 6px;
   background: var(--clr-primary-accent);
   border-radius: 50%;
   opacity: 0;
   transform: translateY(-50%);
}

.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--clr-primary-accent); }
.site-header .nav-link.active::before { opacity: 1; }
.site-header .navbar-demo { margin-left: var(--space-xxl); white-space: nowrap; }

.site-header .navbar-toggler {
   padding: var(--space-sm) var(--space-md);
   color: var(--clr-primary-dark);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-sm);
}

.site-header .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 1199.98px) {
   .site-header .navbar-collapse { padding-top: var(--space-lg); }
   .site-header .navbar-nav { gap: var(--space-xs); }
   .site-header .navbar-nav .nav-link { padding-block: var(--space-md); }
   .site-header .navbar-demo { margin: var(--space-md) 0 0; }
}

@media (max-width: 767.98px) {
   .site-header .navbar-brand img { width: 85px; }
}

@media (max-width: 575.98px) {
   .header-ecosystem { letter-spacing: .07em; }
}


/* SHARED HEADER LABEL & WAVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hero-label {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-md);
   color: var(--clr-primary-dark);
   background: var(--clr-primary-light);
   border: 2px solid rgba(var(--clr-primary-rgb), .35);
   border-radius: 999px;
   font-size: .875rem;
   font-weight: 600;
   letter-spacing: .04em;
}

@media (max-width: 575.98px) {
   .hero-label { font-size: .75rem; }
}

.hero-wave {
   position: absolute;
   bottom: -1px;
   left: 0;
   display: block;
   width: 100%;
   height: var(--header-wave-height);
   pointer-events: none;
}

.hero-wave-back { fill: var(--clr-primary-dark); opacity: .1; }
.hero-wave-front { fill: var(--clr-white); }

@media (max-width: 767.98px) {
   :root { --header-wave-height: 4rem; }
}


/* PAGE INTRODUCTION (Sub-page header)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-section.page-intro {
   position: relative;
   padding-top: var(--space-xxl);
   padding-bottom: calc(var(--space-xxl) + var(--header-wave-height));
   background:
      radial-gradient(circle at 90% 10%, rgba(var(--clr-accent-rgb), .4), transparent 65%),
      radial-gradient(circle at 0 100%, rgba(var(--clr-hero-green-rgb), .25), transparent 55%),
      linear-gradient(110deg, var(--clr-primary-light), var(--clr-white) 85%);
}

.page-intro h1 {
   font-size: var(--title-display-size);
   line-height: var(--title-display-line-height);
   letter-spacing: var(--title-display-spacing);
}

.page-intro-visual {
   position: relative;
   width: 100%;
   max-width: 28rem;
   margin-inline: auto;
   margin-top: var(--space-lg);
}

.page-intro-accent {
   position: absolute;
   z-index: 2;
   top: var(--space-xl);
   right: 0;
   display: block;
   width: 7rem;
   height: auto;
   pointer-events: none;
}

@media (max-width: 575.98px) {
   .page-intro-accent { width: 5rem; }
}

.page-intro-image {
   aspect-ratio: 1 / 1;
   border: var(--space-sm) solid var(--clr-white);
   border-radius: var(--site-image-shape);
   box-shadow: var(--shadow-card);
}

@media (max-width: 991.98px) {
   .page-intro-visual { max-width: 24rem; }
}

@media (max-width: 575.98px) {
   .page-intro-visual { max-width: 20rem; }
}


/* CARDS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-card {
   padding: var(--card-padding);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
}

.site-card-light {
   color: var(--clr-text);
   background: var(--clr-white);
}

.site-card-dark, .site-card-secondary {
   color: rgba(var(--clr-white-rgb), .8);
   border-color: rgba(var(--clr-white-rgb), .15);
}

.site-card-dark { background: var(--clr-primary-dark); }
.site-card-secondary { background: var(--clr-secondary-dark); }
:is(.site-card-dark, .site-card-secondary) :where(h1, h2, h3, h4, h5, h6) { color: var(--clr-white); }
:is(.site-card-dark, .site-card-secondary) :where(a:not(.site-btn)) { color: var(--clr-white); }
:is(.site-card-dark, .site-card-secondary) :where(a:not(.site-btn)):hover { color: var(--clr-secondary-light); }
:is(.site-card-dark, .site-card-secondary) :focus-visible { outline-color: var(--clr-white); }
.site-card > :last-child { margin-bottom: 0; }

/* CARD HOVER */

.site-card-hover, .site-card-hover :where(h1, h2, h3, h4, h5, h6, p, span, .site-icon) { transition: var(--transition); }

@media (hover: hover) and (pointer: fine) {
   .site-card-hover:hover, .site-card-hover-trigger:hover .site-card-hover {
      color: var(--clr-white);
      background: var(--clr-primary-dark);
      border-color: var(--clr-primary-dark);
      transform: translateY(calc(-1 * var(--space-sm)));
   }

   .site-card-hover:hover :where(h1, h2, h3, h4, h5, h6, p, span),
   .site-card-hover-trigger:hover .site-card-hover :where(h1, h2, h3, h4, h5, h6, p, span) {
      color: var(--clr-white);
   }

   .site-card-hover:hover .site-icon, .site-card-hover-trigger:hover .site-card-hover .site-icon {
      color: var(--clr-primary-dark);
      background: var(--clr-white);
   }
}

@media (prefers-reduced-motion: reduce) {
   .site-card-hover, .site-card-hover :where(h1, h2, h3, h4, h5, h6, p, span, .site-icon) { transition: none; }
   .site-card-hover:hover, .site-card-hover-trigger:hover .site-card-hover { transform: none; }
}


/* IMAGE CARDS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-card-image {
   position: relative;
   isolation: isolate;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   min-height: 36rem;
   overflow: hidden;
}

.site-card-image > img {
   position: absolute;
   z-index: -2;
   inset: 0;
   object-position: center top;
}

.site-card-image::before {
   content: '';
   position: absolute;
   z-index: -1;
   inset: 0;
   background: linear-gradient(180deg, transparent 25%, rgba(var(--clr-primary-rgb), .35) 50%, rgba(var(--clr-primary-rgb), .96) 100%);
   pointer-events: none;
}

.site-tags {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
   margin-top: var(--space-lg);
}

.site-tag {
   display: inline-flex;
   align-items: center;
   padding: var(--space-sm) var(--space-md);
   color: inherit;
   background: rgba(var(--clr-white-rgb), .12);
   border: 1px solid rgba(var(--clr-white-rgb), .2);
   border-radius: 999px;
   font-size: .875rem;
   font-weight: 600;
}


/* REDUCED MOTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   a, .site-btn, .form-control, .form-select { transition: none; }
   .site-btn:not(:disabled):hover, .site-btn:not(:disabled):active { transform: none; }
}


/* SHARED COMPONENTS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-title-display {
   font-size: var(--title-display-size);
   font-weight: 800;
   line-height: var(--title-display-line-height);
   letter-spacing: var(--title-display-spacing);
   text-wrap: balance;
}

.site-card-compact { padding: var(--space-md); }

.site-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 3rem;
   height: 3rem;
   color: var(--clr-primary-dark);
   background: var(--clr-primary-light);
   border-radius: 50%;
   font-size: 1.25rem;
}

.site-icon-secondary {
   color: var(--clr-secondary-dark);
   background: var(--clr-secondary-light);
}

.site-icon-md { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.site-icon-sm { width: 2rem; height: 2rem; font-size: .875rem; }
.site-float { animation: site-float 5s ease-in-out infinite; }
.site-float-delay { animation-delay: -2.5s; }

@keyframes site-float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-.75rem); }
}

@media (prefers-reduced-motion: reduce) {
   .site-float { animation: none; }
}

.site-pulse {
   --pulse-color: rgba(var(--clr-primary-rgb), .25);
   animation: site-pulse 2s ease-in-out infinite;
}

.site-pulse-secondary { --pulse-color: rgba(var(--clr-secondary-rgb), .25); }

@keyframes site-pulse {
   0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 var(--pulse-color);
   }
   50% {
      transform: scale(1.1);
      box-shadow: 0 0 0 var(--space-sm) transparent;
   }
}

@media (prefers-reduced-motion: reduce) {
   .site-pulse { animation: none; }
}

/* Image */

.site-image-landscape {
   aspect-ratio: 4 / 3;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
}

/* IMAGE HOVER */

.site-image-frame { overflow: hidden; }

.site-image-frame > img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.site-image-hover { transition: transform .5s ease; }

@media (hover: hover) and (pointer: fine) {
   .site-image-effect:hover .site-image-hover { transform: scale(1.12) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
   .site-image-hover { transition: none; }
   .site-image-effect:hover .site-image-hover { transform: none; }
}


/* SECTIONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-section { padding-block: var(--section-space); }
.site-section.site-section-continued { padding-top: 0; }

@media (max-width: 991.98px) {
   :root { --section-space: var(--space-3xl); }
}

@media (max-width: 575.98px) {
   :root { --section-space: var(--space-xxl); }
}


/* DARK SECTIONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-section-dark {
   color: rgba(var(--clr-white-rgb), .8);
   background-color: var(--clr-primary-dark);
}

.site-section-dark .section-heading h2 { color: var(--clr-white); }

.site-section-dark .section-label {
   color: var(--clr-white);
   background: rgba(var(--clr-white-rgb), .1);
}

.site-section-dark :focus-visible { outline-color: var(--clr-white); }


/* SECTION HEADINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.section-heading {
   position: relative;
   isolation: isolate;
   max-width: 48rem;
   margin-bottom: var(--space-xxl);
}

.section-label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-md);
   padding: var(--space-xs) var(--space-lg);
   color: var(--clr-primary-dark);
   background: var(--clr-primary-light);
   border-radius: 999px;
   font-size: .75rem;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
}

.section-heading h2 {
   margin-bottom: var(--space-lg);
   text-wrap: balance;
}

.section-heading p { margin-bottom: 0; }
.section-highlight { color: var(--clr-primary-accent); }

@media (max-width: 575.98px) {
   .section-heading { margin-bottom: var(--space-xl); }
}


/* TABS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-tabs { gap: var(--space-sm); margin-bottom: var(--space-xxl); }

.site-tab {
   min-height: var(--control-height);
   padding: var(--space-sm) var(--space-lg);
   color: var(--clr-primary-dark);
   background: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-md);
   font-family: var(--font-heading);
   font-weight: 600;
   transition: var(--transition);
}

.site-tab:hover { border-color: var(--clr-primary-accent); }

.site-tab.active {
   color: var(--clr-white);
   background: var(--clr-primary-dark);
   border-color: var(--clr-primary-dark);
   box-shadow: var(--shadow-card);
}

@media (max-width: 575.98px) {
   .site-tabs { margin-bottom: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
   .site-tab, .tab-pane.fade { transition: none; }
}


/* BACKGROUND DECORATIONS - moving parts
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-section.site-section-decorated {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-white) 55%, var(--clr-secondary-light));
}

.site-section-decorated > .solution-decoration {
   position: absolute;
   z-index: 0;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
}

.site-section-decorated > .container {
   position: relative;
   z-index: 1;
}

.solution-decoration > span {
   position: absolute;
   border-radius: 50%;
   animation: solution-drift 5s ease-in-out infinite alternate;
}

.solution-orbit {
   top: 28%;
   left: -240px;
   width: 760px;
   height: 760px;
   background: repeating-conic-gradient(rgba(var(--clr-accent-rgb), .28) 0deg 3deg, transparent 3deg 10deg);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
   mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

.solution-decoration .solution-orbit { animation: solution-orbit-spin 100s linear infinite; }

.solution-orbit-inner {
   top: 35%;
   left: -160px;
   width: 600px;
   height: 600px;
   background: repeating-conic-gradient(rgba(var(--clr-secondary-rgb), .3) 0deg 3deg, transparent 3deg 10deg);
}

.solution-decoration .solution-orbit-inner { animation: solution-orbit-spin 80s linear infinite reverse; }
.solution-dot { width: 24px; height: 24px; }
.solution-dot-blue { top: 35%; left: 7%; background: rgba(var(--clr-accent-rgb), .35); }

.solution-decoration .solution-dot-green {
   right: 6%;
   bottom: 20%;
   background: rgba(var(--clr-secondary-rgb), .45);
   animation-delay: -3s;
}

.solution-decoration .solution-dot-small {
   top: 18%;
   right: 18%;
   width: 14px;
   height: 14px;
   background: rgba(var(--clr-accent-rgb), .3);
   animation-duration: 4s;
   animation-delay: -2s;
}

.solution-decoration .solution-dot-light {
   bottom: 12%;
   left: 22%;
   width: 18px;
   height: 18px;
   background: rgba(var(--clr-secondary-rgb), .3);
   animation-duration: 4.5s;
   animation-delay: -5s;
}

.solution-decoration .solution-ring {
   bottom: 8%;
   left: 43%;
   width: 95px;
   height: 95px;
   border: 2px solid rgba(var(--clr-accent-rgb), .2);
   animation-direction: alternate-reverse;
}

.solution-decoration .solution-ring-small {
   top: 30%;
   right: 4%;
   bottom: auto;
   left: auto;
   width: 55px;
   height: 55px;
   animation-duration: 4s;
   animation-delay: -3s;
}

.solution-decoration .solution-ring-green {
   top: 12%;
   bottom: auto;
   left: 14%;
   width: 75px;
   height: 75px;
   border-color: rgba(var(--clr-secondary-rgb), .25);
   animation-duration: 5.5s;
   animation-delay: -6s;
}

@keyframes solution-orbit-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

@keyframes solution-drift {
   0% { transform: translate(0, 0); }
   50% { transform: translate(12px, -18px); }
   100% { transform: translate(-10px, -30px); }
}

@media (max-width: 575.98px) {
   .solution-decoration .solution-ring { width: 65px; height: 65px; }
   .solution-decoration .solution-ring-small { width: 45px; height: 45px; }
}

@media (prefers-reduced-motion: reduce) {
   .solution-decoration > span { animation: none; }
}


/* SCROLLING DASHBOARD PREVIEW
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-dashboard-preview {
   max-width: 44rem;
   margin-inline: auto;
   padding: var(--space-md);
}

.site-dashboard-device {
   padding: var(--space-md);
   background: var(--clr-device);
   border: 2px solid var(--clr-device-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
   transform: rotate(-3deg);
}

.site-dashboard-screen {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background: var(--clr-primary-light);
   border-radius: var(--radius-sm);
}

.site-dashboard-screen img {
   display: block;
   width: 100%;
   height: auto;
   animation: site-dashboard-scroll 20s ease-in-out infinite;
   animation-play-state: paused;
}

.site-dashboard-screen.is-visible img { animation-play-state: running; }
.site-dashboard-screen:hover img,
.site-dashboard-screen:focus-within img { animation-play-state: paused; }

@keyframes site-dashboard-scroll {
   0%, 12%, 100% { transform: translateY(0); }
   65%, 80% { transform: translateY(var(--dashboard-travel, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
   .site-dashboard-screen img { animation: none; }
}

/* SOLID ICONS */

.site-icon-solid-primary, .site-icon-solid-secondary, .site-icon-solid-accent {
   color: var(--clr-white);
   box-shadow: var(--shadow-card);
}

.site-icon-solid-primary { background: var(--clr-primary-dark); }
.site-icon-solid-secondary { background: var(--clr-secondary-dark); }
.site-icon-solid-accent { background: var(--clr-primary-accent); }

/* FEATURE LIST */

.site-feature-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
   margin: 0;
   padding: 0;
   list-style: none;
}

.site-feature-list > li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-lg);
   margin: 0;
}

.site-feature-list > li + li {
   padding-top: var(--space-lg);
   border-top: 1px solid var(--clr-border);
}

.site-feature-list > li > div { min-width: 0; }


/* VERTICAL TIMELINE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-timeline {
   --timeline-marker: var(--clr-primary-accent);
   --timeline-line: rgba(var(--clr-primary-rgb), .2);
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
   margin: 0;
   padding: 0;
   list-style: none;
}

.site-timeline > li {
   position: relative;
   margin: 0;
   padding-left: var(--space-xxl);
}

.site-timeline > li::after {
   content: '';
   position: absolute;
   top: .25rem;
   left: 0;
   width: 1rem;
   height: 1rem;
   border: 3px solid var(--timeline-marker);
   border-radius: 50%;
}

.site-timeline > li:not(:last-child)::before {
   content: '';
   position: absolute;
   top: .75rem;
   bottom: calc(-1 * (var(--space-xl) + .75rem));
   left: .5rem;
   border-left: 1px dashed var(--timeline-line);
   transform: translateX(-50%);
}

.site-section-dark .site-timeline {
   --timeline-marker: var(--clr-white);
   --timeline-line: rgba(var(--clr-white-rgb), .35);
}

.site-section-dark .site-timeline h3 {
   color: var(--clr-white);
}

@media (max-width: 575.98px) {
   .site-timeline > li { padding-left: var(--space-xl); }
}


/* OPEN TOOL DETAILS */

.site-tool-detail {
   padding-top: var(--space-xl);
   border-top: 1px solid var(--clr-border);
}

@media (max-width: 991.98px) {
   .site-tool-detail .site-feature-list > li {
      justify-content: center;
      text-align: center;
   }
}

/* COMPANY THEME — TABS */

.site-theme-companies .site-tab:hover {
   border-color: var(--clr-secondary-dark);
}

.site-theme-companies .site-tab.active {
   color: var(--clr-white);
   background: var(--clr-secondary-dark);
   border-color: var(--clr-secondary-dark);
}

.site-tool-image {
   display: grid;
   place-items: center;
   width: 100%;
   max-width: 22rem;
   aspect-ratio: 1;
   margin-inline: auto;
   padding: var(--space-md);
   overflow: hidden;
   background: var(--clr-secondary-light);
   border: var(--space-sm) solid var(--clr-white);
   border-radius: var(--site-image-shape);
   box-shadow: var(--shadow-card);
}

.site-tool-image > img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

@media (max-width: 575.98px) {
   .site-tool-image { max-width: 17rem; }
}


/* FEATURED IMAGE WITH OVERLAPPING CAPTION */

.site-featured-visual {
   position: relative;
}

.site-featured-visual > .site-image-frame {
   width: 90%;
   aspect-ratio: 4 / 3;
   border-radius: var(--radius-lg);
}

.site-featured-visual > .site-image-frame > img {
   object-position: center 35%;
}

.site-featured-caption {
   position: absolute;
   top: 60%;
   right: 0;
   width: 75%;
   transform: translateY(-50%);
   background: rgba(var(--clr-white-rgb), .80);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

@media (max-width: 575.98px) {
   .site-featured-visual > .site-image-frame { width: 100%; }

   .site-featured-caption {
      position: relative;
      top: auto;
      width: 92%;
      margin-top: calc(-1 * var(--space-xl));
      margin-inline: auto;
      transform: none;
   }
}


/* FOOTER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.footer-wave {
   display: block;
   width: 100%;
   height: 7.5rem;
}

.footer-wave-back { fill: var(--clr-primary-accent); opacity: .2; }
.footer-wave-front { fill: var(--clr-primary-dark); }

.footer-body {
   margin-top: -1px;
   padding: var(--space-xxl) 0 var(--space-lg);
}

.site-footer h2 { margin-bottom: var(--space-lg); }
.site-footer a { color: var(--clr-white); }
.site-footer a:hover { color: var(--clr-secondary-light); }

@media (max-width: 991.98px) {
   .footer-body { padding-top: var(--space-xl); }
}

@media (max-width: 575.98px) {
   .footer-wave { height: 4rem; }
}

/* BRANDING */

.footer-brand {
   display: block;
   width: 14rem;
   max-width: 100%;
   padding: var(--space-md) var(--space-lg);
   border: 1px solid rgba(var(--clr-white-rgb), .55);
   border-radius: var(--radius-md);
}

.footer-brand img { display: block; width: 100%; }

.footer-marks img {
   display: block;
   width: 8rem;
   height: 2.5rem;
   object-fit: contain;
}

.footer-marks img:first-child { width: 4.5rem; }

@media (max-width: 575.98px) {
   .footer-brand { width: 12.5rem; }
   .footer-marks img { width: 7rem; height: 2rem; }
   .footer-marks img:first-child { width: 4rem; }
}

/* LINKS */

.footer-links a { display: inline-block; padding-block: var(--space-xs); }

.site-footer .footer-demo {
   padding-bottom: var(--space-sm);
   color: var(--clr-secondary-light);
   border-bottom: 1px solid rgba(var(--clr-white-rgb), .35);
   font-family: var(--font-heading);
}

.footer-demo i { transition: transform .25s ease; }
.footer-demo:hover i { transform: translateX(var(--space-xs)); }

/* BOTTOM */

.footer-bottom {
   margin-top: var(--space-xxl);
   padding-top: var(--space-lg);
   border-top: 1px solid rgba(var(--clr-white-rgb), .15);
}

@media (max-width: 575.98px) {
   .footer-bottom { margin-top: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
   .footer-demo i { transition: none; }
   .footer-demo:hover i { transform: none; }
}