*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(30 112 200 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(30 112 200 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*,
::before,
::after {
  box-sizing: border-box;
  
  border-width: 0;
  
  border-style: solid;
  
  border-color: #e5e7eb;
  
}

::before,
::after {
  --tw-content: '';
}



html,
:host {
  line-height: 1.5;
  
  -webkit-text-size-adjust: 100%;
  
  -moz-tab-size: 4;
  
  -o-tab-size: 4;
     tab-size: 4;
  
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  font-feature-settings: normal;
  
  font-variation-settings: normal;
  
  -webkit-tap-highlight-color: transparent;
  
}



body {
  margin: 0;
  
  line-height: inherit;
  
}



hr {
  height: 0;
  
  color: inherit;
  
  border-top-width: 1px;
  
}



abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}



a {
  color: inherit;
  text-decoration: inherit;
}



b,
strong {
  font-weight: bolder;
}



code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  font-feature-settings: normal;
  
  font-variation-settings: normal;
  
  font-size: 1em;
  
}



small {
  font-size: 80%;
}



sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}



table {
  text-indent: 0;
  
  border-color: inherit;
  
  border-collapse: collapse;
  
}



button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  
  font-feature-settings: inherit;
  
  font-variation-settings: inherit;
  
  font-size: 100%;
  
  font-weight: inherit;
  
  line-height: inherit;
  
  letter-spacing: inherit;
  
  color: inherit;
  
  margin: 0;
  
  padding: 0;
  
}



button,
select {
  text-transform: none;
}



button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  appearance: button;
  
  background-color: transparent;
  
  background-image: none;
  
}



:-moz-focusring {
  outline: auto;
}



:-moz-ui-invalid {
  box-shadow: none;
}



progress {
  vertical-align: baseline;
}



::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}



[type='search'] {
  -webkit-appearance: textfield;
  appearance: textfield;
  
  outline-offset: -2px;
  
}



::-webkit-search-decoration {
  -webkit-appearance: none;
}



::-webkit-file-upload-button {
  -webkit-appearance: button;
  
  font: inherit;
  
}



summary {
  display: list-item;
}



blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}



dialog {
  padding: 0;
}



textarea {
  resize: vertical;
}



input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  
  color: #9ca3af;
  
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  
  color: #9ca3af;
  
}



button,
[role="button"] {
  cursor: pointer;
}



:disabled {
  cursor: default;
}



img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  
}



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



[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-\[10px\] {
  bottom: 10px;
}

.bottom-\[11px\] {
  bottom: 11px;
}

.bottom-\[21\%\] {
  bottom: 21%;
}

.bottom-\[3\%\] {
  bottom: 3%;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-6 {
  left: 1.5rem;
}

.left-\[114px\] {
  left: 114px;
}

.left-\[12\.5\%\] {
  left: 12.5%;
}

.left-\[2\%\] {
  left: 2%;
}

.left-\[28px\] {
  left: 28px;
}

.left-\[5\%\] {
  left: 5%;
}

.left-\[9\%\] {
  left: 9%;
}

.right-0 {
  right: 0px;
}

.right-16 {
  right: 4rem;
}

.right-2 {
  right: 0.5rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.right-\[12\.5\%\] {
  right: 12.5%;
}

.right-\[2\%\] {
  right: 2%;
}

.right-\[85px\] {
  right: 85px;
}

.right-\[9\%\] {
  right: 9%;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-6 {
  top: 1.5rem;
}

.top-\[16px\] {
  top: 16px;
}

.top-\[21\%\] {
  top: 21%;
}

.top-\[22px\] {
  top: 22px;
}

.top-\[28px\] {
  top: 28px;
}

.top-\[3\%\] {
  top: 3%;
}

.top-\[38px\] {
  top: 38px;
}

.top-\[42px\] {
  top: 42px;
}

.top-\[68px\] {
  top: 68px;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[10\/6\] {
  aspect-ratio: 10/6;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[150px\] {
  height: 150px;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[2\.5px\] {
  height: 2.5px;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[250px\] {
  height: 250px;
}

.h-\[30\%\] {
  height: 30%;
}

.h-\[4px\] {
  height: 4px;
}

.h-\[50\%\] {
  height: 50%;
}

.h-\[500px\] {
  height: 500px;
}

.h-\[5px\] {
  height: 5px;
}

.h-\[65px\] {
  height: 65px;
}

.h-\[70\%\] {
  height: 70%;
}

.h-\[78px\] {
  height: 78px;
}

.h-\[95px\] {
  height: 95px;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[210px\] {
  min-height: 210px;
}

.min-h-\[380px\] {
  min-height: 380px;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[500px\] {
  min-height: 500px;
}

.min-h-\[600px\] {
  min-height: 600px;
}

.min-h-\[650px\] {
  min-height: 650px;
}

.min-h-\[85px\] {
  min-height: 85px;
}

.min-h-\[90px\] {
  min-height: 90px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/4 {
  width: 25%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[1000px\] {
  width: 1000px;
}

.w-\[110px\] {
  width: 110px;
}

.w-\[14px\] {
  width: 14px;
}

.w-\[150px\] {
  width: 150px;
}

.w-\[250px\] {
  width: 250px;
}

.w-\[2px\] {
  width: 2px;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[50\%\] {
  width: 50%;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[6px\] {
  width: 6px;
}

.w-\[90\%\] {
  width: 90%;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[20px\] {
  min-width: 20px;
}

.min-w-\[2ch\] {
  min-width: 2ch;
}

.min-w-\[3ch\] {
  min-width: 3ch;
}

.min-w-\[4ch\] {
  min-width: 4ch;
}

.min-w-\[5ch\] {
  min-width: 5ch;
}

.min-w-\[680px\] {
  min-width: 680px;
}

.min-w-\[6ch\] {
  min-width: 6ch;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-\[1000px\] {
  max-width: 1000px;
}

.max-w-\[1440px\] {
  max-width: 1440px;
}

.max-w-\[150px\] {
  max-width: 150px;
}

.max-w-\[1536px\] {
  max-width: 1536px;
}

.max-w-\[1800px\] {
  max-width: 1800px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[320px\] {
  max-width: 320px;
}

.max-w-md {
  max-width: 28rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-\[1\.2\] {
  flex: 1.2;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.72\] {
  --tw-scale-x: 0.72;
  --tw-scale-y: 0.72;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.15\] {
  --tw-scale-x: 1.15;
  --tw-scale-y: 1.15;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.content-center {
  align-content: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-items-center {
  justify-items: center;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[1\.5rem\] {
  border-radius: 1.5rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[32px\] {
  border-radius: 32px;
}

.rounded-\[40px\] {
  border-radius: 40px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-md {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-\[3px\] {
  border-width: 3px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-\[3px\] {
  border-left-width: 3px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-\[\#1E70C8\] {
  --tw-border-opacity: 1;
  border-color: rgb(0 82 255 / var(--tw-border-opacity, 1));
}

.border-\[\#1E70C8\] {
  --tw-border-opacity: 1;
  border-color: rgb(30 112 200 / var(--tw-border-opacity, 1));
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(225 237 249 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(196 219 242 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(166 200 236 / var(--tw-border-opacity, 1));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(136 182 229 / var(--tw-border-opacity, 1));
}

.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-border-opacity, 1));
}

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-100\/40 {
  border-color: rgb(220 252 231 / 0.4);
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
}

.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.border-purple-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 245 255 / var(--tw-border-opacity, 1));
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-100\/60 {
  border-color: rgb(241 245 249 / 0.6);
}

.border-slate-100\/80 {
  border-color: rgb(241 245 249 / 0.8);
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#1E70C8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 82 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1E70C8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(30 112 200 / var(--tw-bg-opacity, 1));
}

.bg-\[\#EF4444\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F0F4FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 244 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F3FAF5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 250 245 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F9FAFB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FEF5F5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 245 245 / var(--tw-bg-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 249 / var(--tw-bg-opacity, 1));
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(166 200 236 / var(--tw-bg-opacity, 1));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(136 182 229 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 246 252 / var(--tw-bg-opacity, 1));
}

.bg-blue-50\/50 {
  background-color: rgb(240 246 252 / 0.5);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 112 200 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 112 200 / var(--tw-bg-opacity, 1));
}

.bg-blue-600\/30 {
  background-color: rgb(30 112 200 / 0.3);
}

.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/10 {
  background-color: rgb(240 253 244 / 0.1);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(216 180 254 / var(--tw-bg-opacity, 1));
}

.bg-purple-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(192 132 252 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-50\/50 {
  background-color: rgb(248 250 252 / 0.5);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-\[radial-gradient\(ellipse_at_top\2c _var\(--tw-gradient-stops\)\)\] {
  background-image: radial-gradient(ellipse at top, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-\[\#F5F3FF\] {
  --tw-gradient-from: #F5F3FF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/5 {
  --tw-gradient-from: rgb(0 0 0 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50\/50 {
  --tw-gradient-from: rgb(240 246 252 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 246 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-slate-200 {
  --tw-gradient-to: rgb(226 232 240 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #e2e8f0 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#FAF5FF\] {
  --tw-gradient-to: #FAF5FF var(--tw-gradient-to-position);
}

.to-blue-50\/80 {
  --tw-gradient-to: rgb(240 246 252 / 0.8) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.fill-current {
  fill: currentColor;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[4px\] {
  font-size: 4px;
}

.text-\[7px\] {
  font-size: 7px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-\[0\.35em\] {
  letter-spacing: 0.35em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-\[\#1E70C8\] {
  --tw-text-opacity: 1;
  color: rgb(0 82 255 / var(--tw-text-opacity, 1));
}

.text-\[\#0B132B\] {
  --tw-text-opacity: 1;
  color: rgb(11 19 43 / var(--tw-text-opacity, 1));
}

.text-\[\#111827\] {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-\[\#1A1D23\] {
  --tw-text-opacity: 1;
  color: rgb(26 29 35 / var(--tw-text-opacity, 1));
}

.text-\[\#1E70C8\] {
  --tw-text-opacity: 1;
  color: rgb(30 112 200 / var(--tw-text-opacity, 1));
}

.text-\[\#336791\] {
  --tw-text-opacity: 1;
  color: rgb(51 103 145 / var(--tw-text-opacity, 1));
}

.text-\[\#339933\] {
  --tw-text-opacity: 1;
  color: rgb(51 153 51 / var(--tw-text-opacity, 1));
}

.text-\[\#3776AB\] {
  --tw-text-opacity: 1;
  color: rgb(55 118 171 / var(--tw-text-opacity, 1));
}

.text-\[\#61DAFB\] {
  --tw-text-opacity: 1;
  color: rgb(97 218 251 / var(--tw-text-opacity, 1));
}

.text-\[\#FF9900\] {
  --tw-text-opacity: 1;
  color: rgb(255 153 0 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(30 112 200 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(30 112 200 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(22 88 159 / var(--tw-text-opacity, 1));
}

.text-cyan-500 {
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_8px_rgba\(30\2c 112\2c 200\2c 0\.6\)\] {
  --tw-shadow: 0 0 8px rgba(30,112,200,0.6);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_60px_-15px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0 20px 60px -15px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 20px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_10px_rgba\(0\2c 0\2c 0\2c 0\.02\)\] {
  --tw-shadow: 0 2px 10px rgba(0,0,0,0.02);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_20px_-2px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 4px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0 4px 24px -8px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 4px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_30px_-12px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 8px 30px -12px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 8px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_30px_-12px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0 8px 30px -12px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 8px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_30px_-4px_rgba\(30\2c 112\2c 200\2c 0\.25\)\] {
  --tw-shadow: 0 8px 30px -4px rgba(30,112,200,0.25);
  --tw-shadow-colored: 0 8px 30px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-blue-500\/20 {
  --tw-shadow-color: rgb(30 112 200 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-500\/20 {
  --tw-shadow-color: rgb(34 197 94 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-orange-500\/20 {
  --tw-shadow-color: rgb(249 115 22 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-purple-500\/20 {
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-blue-50\/50 {
  --tw-ring-color: rgb(240 246 252 / 0.5);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[140px\] {
  --tw-blur: blur(140px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[perspective\:1000px\] {
  perspective: 1000px;
}

.hover\:-translate-y-2:hover {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-amber-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.hover\:border-blue-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(196 219 242 / var(--tw-border-opacity, 1));
}

.hover\:border-green-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.hover\:border-purple-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 112 200 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(30 112 200 / var(--tw-text-opacity, 1));
}

.hover\:text-green-600:hover {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-600:hover {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-600:hover {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-\[0_12px_32px_-8px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]:hover {
  --tw-shadow: 0 12px 32px -8px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 12px 32px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_12px_40px_-15px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]:hover {
  --tw-shadow: 0 12px 40px -15px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 12px 40px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_16px_40px_-8px_rgba\(30\2c 112\2c 200\2c 0\.35\)\]:hover {
  --tw-shadow: 0 16px 40px -8px rgba(30,112,200,0.35);
  --tw-shadow-colored: 0 16px 40px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_20px_40px_-15px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]:hover {
  --tw-shadow: 0 20px 40px -15px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-\[1\.25\] {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(30 112 200 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 112 200 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(30 112 200 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(22 88 159 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
}

@media (min-width: 768px) {
  .md\:top-\[28px\] {
    top: 28px;
  }

  .md\:top-\[39\.5px\] {
    top: 39.5px;
  }

  .md\:top-\[54\.5px\] {
    top: 54.5px;
  }

  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-2 {
    margin-top: 0.5rem;
  }

  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
    line-clamp: none;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-\[350px\] {
    height: 350px;
  }

  .md\:h-\[90px\] {
    height: 90px;
  }

  .md\:min-h-\[280px\] {
    min-height: 280px;
  }

  .md\:w-12 {
    width: 3rem;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-\[350px\] {
    width: 350px;
  }

  .md\:w-\[420px\] {
    width: 420px;
  }

  .md\:w-\[55\%\] {
    width: 55%;
  }

  .md\:scale-\[0\.95\] {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-col {
    flex-direction: column;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .md\:border-b-0 {
    border-bottom-width: 0px;
  }

  .md\:border-r {
    border-right-width: 1px;
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:text-\[10px\] {
    font-size: 10px;
  }

  .md\:text-\[11px\] {
    font-size: 11px;
  }

  .md\:text-\[12px\] {
    font-size: 12px;
  }

  .md\:text-\[14px\] {
    font-size: 14px;
  }

  .md\:text-\[15px\] {
    font-size: 15px;
  }

  .md\:text-\[16px\] {
    font-size: 16px;
  }

  .md\:text-\[18px\] {
    font-size: 18px;
  }

  .md\:text-\[20px\] {
    font-size: 20px;
  }

  .md\:text-\[32px\] {
    font-size: 32px;
  }

  .md\:text-\[38px\] {
    font-size: 38px;
  }

  .md\:text-\[58px\] {
    font-size: 58px;
  }

  .md\:text-\[8px\] {
    font-size: 8px;
  }

  .md\:text-\[9px\] {
    font-size: 9px;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:leading-\[1\.1\] {
    line-height: 1.1;
  }
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }

  .lg\:h-10 {
    height: 2.5rem;
  }

  .lg\:h-7 {
    height: 1.75rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-\[210px\] {
    height: 210px;
  }

  .lg\:h-\[calc\(100vh-140px\)\] {
    height: calc(100vh - 140px);
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-\[560px\] {
    min-height: 560px;
  }

  .lg\:w-10 {
    width: 2.5rem;
  }

  .lg\:w-7 {
    width: 1.75rem;
  }

  .lg\:w-\[42\%\] {
    width: 42%;
  }

  .lg\:w-\[52\%\] {
    width: 52%;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:text-\[10px\] {
    font-size: 10px;
  }

  .lg\:text-\[11px\] {
    font-size: 11px;
  }

  .lg\:text-\[34px\] {
    font-size: 34px;
  }
}

@media (min-width: 1280px) {
  .xl\:w-\[264px\] {
    width: 264px;
  }

  .xl\:w-\[28\%\] {
    width: 28%;
  }

  .xl\:w-auto {
    width: auto;
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:gap-8 {
    gap: 2rem;
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1536px) {
  .\32xl\:h-auto {
    height: auto;
  }

  .\32xl\:w-\[25\%\] {
    width: 25%;
  }

  .\32xl\:w-\[360px\] {
    width: 360px;
  }

  .\32xl\:flex-row {
    flex-direction: row;
  }

  .\32xl\:gap-8 {
    gap: 2rem;
  }

  .\32xl\:p-4 {
    padding: 1rem;
  }

  .\32xl\:p-8 {
    padding: 2rem;
  }
}


.bg-background {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.text-on-surface {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.font-inter {
  font-family: Inter, sans-serif
}

.bb-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 52px 40px 52px;
}

.bb-inner {
  max-width: 1120px;
  margin: 0 auto;
}


.bb-head {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.pitem {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 17, 30, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(40, 60, 90, 0.5);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: #E2E8F0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
}

.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--b400);
  margin-bottom: 20px;
}

.bb-eyebrow-line {
  width: 22px;
  height: 1.5px;
  background: var(--b400);
  border-radius: 1px;
  flex-shrink: 0
}

.bb-h {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--g700);
}

.bb-h em {
  font-style: normal;
  color: var(--b400)
}

.bb-industry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  font-size: 19px;
  font-weight: 600;
}

.bb-industry .lead {
  color: var(--g400);
}

.bb-roll {
  height: 28px;
  overflow: hidden;
  display: inline-block;
}

.bb-roll-inner {
  display: flex;
  flex-direction: column;
  animation: bbRoll 14s cubic-bezier(.76, 0, .24, 1) infinite;
}

.bb-roll-inner span {
  height: 28px;
  line-height: 28px;
  color: var(--b400);
  white-space: nowrap;
}

@keyframes bbRoll {

  0%,
  21% {
    transform: translateY(0)
  }

  25%,
  46% {
    transform: translateY(-28px)
  }

  50%,
  71% {
    transform: translateY(-56px)
  }

  75%,
  96% {
    transform: translateY(-84px)
  }

  100% {
    transform: translateY(-112px)
  }
}

.bb-rule {
  width: 32px;
  height: 1px;
  background: var(--g200);
  margin: 30px auto 0;
}


.bb-group {
  margin-top: 52px;
}

.bb-cap {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g300);
}

.bb-subtitle {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--g600);
  line-height: 1.55;
  margin-top: 6px;
  max-width: 560px;
}

.bb-group-head {
  margin-bottom: 18px;
}

.bb-group-head.row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.bb-group-note {
  font-size: 13px;
  color: var(--g400);
  font-weight: 500;
}

.bb-grid {
  display: grid;
  gap: 14px;
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}


.bb-card {
  background: var(--white);
  border: 1px solid rgba(30, 112, 200, .12);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(30, 112, 200, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}

.bb-card:hover {
  border-color: rgba(30, 112, 200, .30);
  box-shadow: 0 8px 26px rgba(30, 112, 200, .10);
  transform: translateY(-2px);
}

.bb-mono {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--b50);
  border: 1px solid var(--b100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--b600);
  letter-spacing: .02em;
}

.bb-sector {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--b400);
}


.bb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  flex-shrink: 0;
  white-space: nowrap;
}

.bb-status .s-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bb-status.live {
  background: var(--b50);
  border: 1px solid var(--b100);
  color: var(--b600);
}

.bb-status.live .s-dot {
  background: var(--b400);
  animation: bbpulse 2.4s ease-in-out infinite;
}

.bb-status.build {
  background: var(--g100);
  border: 1px solid var(--g200);
  color: var(--g500);
}

.bb-status.build .s-dot {
  background: var(--g300);
}

@keyframes bbpulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .35;
    transform: scale(.7)
  }
}


.bb-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
}

.bb-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--g200);
  background: var(--white);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--g500);
  white-space: nowrap;
  transition: border-color .4s ease, background .4s ease, color .4s ease;
}

.bb-flow-step .n-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g300);
  flex-shrink: 0;
  transition: background .4s ease;
}

.bb-flow-step.active {
  border-color: var(--b400);
  background: var(--b50);
  color: var(--b600);
}

.bb-flow-step.active .n-dot {
  background: var(--b400);
}

.bb-flow-line {
  display: inline-flex;
  align-items: center;
  color: var(--g300);
  padding: 0 5px;
  flex-shrink: 0;
  transition: color .4s ease;
}

.bb-flow-line.lit {
  color: var(--b400);
}

.bb-flow-line svg {
  width: 15px;
  height: 15px;
  display: block;
}

.flow.sm .bb-flow-step {
  padding: 6px 9px;
  font-size: 11px;
}

.flow.sm .bb-flow-line {
  padding: 0 3px;
}

.flow.sm .bb-flow-line svg {
  width: 13px;
  height: 13px;
}


.bb-live-card {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 26px 26px 26px 28px;
  border-color: rgba(30, 112, 200, .20);
  box-shadow: 0 6px 24px rgba(30, 112, 200, .08);
}

.bb-live-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--b400);
  border-radius: 12px 12px 0 0;
}

.bb-live-id {
  flex: 0 0 34%;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bb-live-idtop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-live-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--g700);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.bb-live-desc {
  font-size: 13px;
  color: var(--g500);
  line-height: 1.6;
}

.bb-live-flow {
  flex: 1;
  min-width: 0;
}


.bb-cl {
  padding: 16px 17px;
  gap: 8px;
}

.bb-cl-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--g700);
  line-height: 1.2;
}

.bb-cl-built {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--g600);
  line-height: 1.5;
}

.bb-cl-outcome {
  font-size: 12.5px;
  color: var(--g500);
  line-height: 1.55;
}

.bb-cl-divider {
  height: 1px;
  background: var(--g100);
  margin: 2px 0;
}


.bb-intro {
  font-size: 14px;
  color: var(--g600);
  line-height: 1.7;
  max-width: 600px;
  margin-top: 8px;
}

.bb-partner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--b50);
  border: 1px solid var(--b100);
  padding: 22px 24px;
}

.bb-partner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bb-partner-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--g700);
  letter-spacing: -.01em;
}

.bb-partner-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--b400);
  margin-top: 4px;
}

.bb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--b100);
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--b600);
  line-height: 1;
  letter-spacing: .01em;
}

.bb-pill .p-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--b400);
  flex-shrink: 0;
}


.bb-prod {
  padding: 18px 18px 16px;
  gap: 13px;
}

.bb-prod-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bb-prod-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--g700);
  line-height: 1.2;
  min-width: 0;
  flex: 1 1 auto;
}

.bb-prod-desc {
  font-size: 12.5px;
  color: var(--g500);
  line-height: 1.55;
}


.bb-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}

.bb-reveal.visible {
  opacity: 1;
  transform: none;
}


@media(max-width:860px) {
  .bb-section {
    padding: 56px 24px 28px 24px;
  }

  .cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-live-card {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .bb-live-id {
    flex-basis: auto;
  }

  .bb-partner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media(max-width:560px) {

  .cols-3,
  .cols-2 {
    grid-template-columns: 1fr;
  }
}

@media(prefers-reduced-motion:reduce) {
  .bb-roll-inner {
    animation: none !important;
  }

  .bb-reveal {
    transition: none !important;
  }

  .bb-status.live .s-dot {
    animation: none;
  }
}







.icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}


.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(30, 112, 200, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 112, 200, 0.022) 1px, transparent 1px);
}


.glass-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(221, 225, 235, 0.9);
  border-top-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}


.primary-glow {
  box-shadow: 0 4px 14px rgba(30, 112, 200, 0.25), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}


.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}


.delay-400 {
  transition-delay: 0.4s;
}

.delay-600 {
  transition-delay: 0.6s;
}


.glass-card {
  background: #ffffff;
  border: 1px solid #DDE1EB;
  border-top-color: #F0F2F6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  background: #F8FAFF;
  border-color: rgba(30, 112, 200, 0.18);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(30, 112, 200, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
}


.service-card {
  background: #ffffff;
  border: 1px solid #DDE1EB;
  border-top-color: #F0F2F6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
  background: #F0F7FF;
  border-color: rgba(30, 112, 200, 0.22);
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(30, 112, 200, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.service-card:hover .service-icon {
  color: #1E70C8;
  transform: scale(1.15);
}

.service-icon {
  transition: color 0.3s ease, transform 0.3s ease;
}


.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
}



.stat-number {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #1E70C8;
}

@media (max-width: 768px) {
  .stat-number {
    font-size: 38px;
  }
}


.gradient-text {
  color: #1E70C8;
}


.cta-glow {
  box-shadow: 0 0 80px rgba(30, 112, 200, 0.10), 0 8px 32px rgba(0, 0, 0, 0.06);
}


.tag-pill {
  background: rgba(30, 112, 200, 0.05);
  border: 1px solid rgba(30, 112, 200, 0.12);
  transition: background 0.2s, border-color 0.2s;
}

.tag-pill:hover {
  background: rgba(30, 112, 200, 0.10);
  border-color: rgba(30, 112, 200, 0.25);
}


.footer-link {
  color: #5C6680;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #1E70C8;
}


.why-icon-wrap {
  background: linear-gradient(135deg, rgba(30, 112, 200, 0.08), rgba(30, 112, 200, 0.04));
  border: 1px solid rgba(30, 112, 200, 0.14);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.glass-card:hover .why-icon-wrap {
  background: linear-gradient(135deg, rgba(30, 112, 200, 0.14), rgba(30, 112, 200, 0.07));
  border-color: rgba(30, 112, 200, 0.25);
  transform: scale(1.1);
}


.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 112, 200, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 112, 200, 0.12);
  border-top-color: rgba(255, 255, 255, 0.8);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.section-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1E70C8;
}


.services-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1E70C8;
  margin-bottom: 10px;
}

.services-headline {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0B1220;
  margin: 0;
}

@media (max-width: 640px) {
  .services-headline {
    font-size: 28px;
  }
}


.parallax-section {
  position: relative;
  overflow: hidden;
}


.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1E70C8;
  margin-bottom: 22px;
}

.about-eyebrow-line {
  width: 22px;
  height: 1.5px;
  background: #1E70C8;
  border-radius: 1px;
  flex-shrink: 0;
}

.about-heading {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1E2433;
  max-width: 720px;
  margin: 0 auto 18px;
}

.about-heading em {
  font-style: normal;
  color: #1E70C8;
}

.about-tagline {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #3D4660;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 32px;
}

.about-philosophy {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #1E2433;
  line-height: 1.5;
  max-width: none;
  white-space: nowrap;
  margin: 0 auto 40px;
}

.about-philosophy em {
  font-style: normal;
  color: #1E70C8;
}

.about-logos-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B8BFD0;
  margin-bottom: 16px;
}

.about-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.about-logo-chip {
  display: inline-flex;
  align-items: center;
  background-color: #EEF5FD;
  border: 1px solid #CCDFF7;
  color: #1E70C8;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: 5px;
  white-space: nowrap;
}

.about-rule {
  width: 32px;
  height: 1px;
  background: #DDE1EB;
  margin: 0 auto 35px;
}

.about-story-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B8BFD0;
  margin-bottom: 28px;
}

.about-story {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: left;
}

.about-story-p {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #3D4660;
  margin-bottom: 22px;
}

.about-story-p:last-child {
  margin-bottom: 0;
}

.about-story-p strong {
  font-weight: 600;
  color: #1E2433;
}

.about-quote-block {
  max-width: 580px;
  margin: 28px auto;
  padding: 24px 32px;
  background: #EEF5FD;
  border-left: 3px solid #1E70C8;
  border-radius: 0 10px 10px 0;
  text-align: left;
}

.about-quote-block p {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.7;
  color: #1E2433;
}

.about-final-quote {
  max-width: 580px;
  margin: 0 auto;
  padding: 28px 32px;
  background: #EEF5FD;
  border-left: 3px solid #1E70C8;
  border-radius: 0 12px 12px 0;
  text-align: left;
}

.about-final-quote p {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #1E2433;
}

.about-final-quote em {
  font-style: normal;
  color: #1E70C8;
}

.about-final-quote-attr {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #B8BFD0;
  margin-top: 14px;
}



.story-services {
  overflow: hidden;
}

.story-service {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 0;
  min-height: 500px;
  max-width: 1152px;
  margin: 0 auto;
  padding: 48px 50px;
  align-items: center;
}

.story-left {
  padding-right: 40px;
}

.story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #1E70C8;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.story-eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: #1E70C8;
  border-radius: 1px;
}

.story-heading {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1E2433;
  margin-bottom: 6px;
}

.story-heading em {
  font-style: normal;
  color: #1E70C8;
  background: none;
  -webkit-text-fill-color: initial;
  background-clip: initial;
}

.story-sub {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: #3D4660;
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 380px;
}

.story-desc {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #8892A8;
  line-height: 1.78;
  margin-bottom: 32px;
  max-width: 380px;
}

.story-caps-label {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B8BFD0;
  margin-bottom: 12px;
  position: relative;
  padding-top: 25px;
}

.story-caps-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background-color: #DDE1EB;
  border-radius: 1px;
}

.story-caps-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.story-cap {
  display: inline-flex;
  align-items: center;
  background-color: #EEF5FD;
  border: 1px solid #CCDFF7;
  color: #1E70C8;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 5px 12px;
  border-radius: 5px;
  box-sizing: border-box;
  white-space: nowrap;
}

.story-cap-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #1E70C8;
  margin-right: 5px;
  flex-shrink: 0;
  display: inline-block;
}

.story-anim-frame {
  background: linear-gradient(145deg, #F4F8FD, #EEF4FB);
  border: 1px solid #CCDFF7;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.story-anim-frame canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
}

.story-stage-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #B8BFD0;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 10;
  background: #FFFFFF;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(30, 112, 200, 0.12);
}

.story-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.story-connector-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(30, 112, 200, 0.06), rgba(30, 112, 200, 0.2), rgba(30, 112, 200, 0.06));
  position: relative;
}

.story-connector-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E70C8;
  animation: storyConnPulse 2.5s ease-in-out infinite;
}

@keyframes storyConnPulse {

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

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
}


.svc2-right {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  aspect-ratio: auto;
}

.svc2-anim-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #F4F8FD, #EEF4FB);
  border: 1px solid #CCDFF7;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.svc2-stage {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 40px;
  box-sizing: border-box;
}

.svc2-stage.svc2-active {
  display: flex;
  animation: svc2StageFade 0.5s ease;
}

@keyframes svc2StageFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svc2-stage-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C6680;
  margin-bottom: 14px;
  align-self: flex-start;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-task-card {
  background: #FFFFFF;
  border: 1px solid rgba(30, 112, 200, 0.15);
  border-radius: 10px;
  padding: 11px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: #1E2433;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-task-card.svc2-warning {
  border-color: #F59E0B;
  background: #FEF3C7;
}

.svc2-task-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  background: rgba(30, 112, 200, 0.08);
  color: #1E70C8;
}

.svc2-task-badge.svc2-warn-badge {
  background: #FDE68A;
  color: #92400E;
}

.svc2-warn-icon {
  font-size: 12px;
  color: #F59E0B;
  margin-right: 4px;
}

.svc2-pending-counter {
  text-align: center;
  margin-top: 18px;
}

.svc2-counter-num {
  font-size: 52px;
  font-weight: 800;
  color: #1E2433;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: all 0.3s ease;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-counter-num.svc2-animating {
  color: #1E70C8;
  transform: scale(1.08);
}

.svc2-counter-num.svc2-zero {
  color: #059669;
}

.svc2-counter-label {
  font-size: 12px;
  color: #5C6680;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-engine-block {
  background: #FFFFFF;
  border: 1.5px solid #1E70C8;
  border-radius: 14px;
  padding: 20px 28px;
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.svc2-engine-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 112, 200, 0.04), rgba(30, 112, 200, 0.0));
  pointer-events: none;
}

.svc2-engine-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1E70C8;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-engine-name {
  font-size: 18px;
  font-weight: 700;
  color: #1E2433;
  letter-spacing: -0.02em;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-engine-sub {
  font-size: 12px;
  color: #5C6680;
  margin-top: 3px;
}

.svc2-engine-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E70C8;
  margin: 10px auto 0;
  animation: svc2Pulse 1.4s ease-in-out infinite;
}

@keyframes svc2Pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.svc2-flow-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.svc2-flow-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.svc2-flow-task-mini {
  background: #FFFFFF;
  border: 1px solid rgba(30, 112, 200, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1E2433;
  width: 100%;
  text-align: center;
}

.svc2-flow-arrow {
  font-size: 14px;
  color: #1E70C8;
  line-height: 1;
}

.svc2-flow-engine-mini {
  background: rgba(30, 112, 200, 0.08);
  border: 1px solid #1E70C8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1E70C8;
  width: 100%;
  text-align: center;
}

.svc2-flow-done {
  background: #D1FAE5;
  border: 1px solid rgba(5, 150, 105, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.svc2-particle-line {
  position: relative;
  height: 24px;
  width: 100%;
  overflow: hidden;
}

.svc2-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1E70C8;
  top: 50%;
  transform: translateY(-50%);
  animation: svc2MoveP 0.8s linear infinite;
  opacity: 0;
}

.svc2-particle:nth-child(1) {
  animation-delay: 0s;
}

.svc2-particle:nth-child(2) {
  animation-delay: 0.27s;
}

.svc2-particle:nth-child(3) {
  animation-delay: 0.54s;
}

@keyframes svc2MoveP {
  0% {
    left: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 4px);
    opacity: 0;
  }
}

.svc2-hero-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: svc2HeroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes svc2HeroReveal {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.svc2-hero-num {
  font-size: 88px;
  font-weight: 900;
  color: #059669;
  line-height: 1;
  letter-spacing: -0.06em;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-hero-label {
  font-size: 13px;
  font-weight: 600;
  color: #5C6680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-hero-brand {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1E70C8;
  letter-spacing: -0.01em;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  animation: svc2HeroReveal 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.svc2-outcome-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  justify-content: center;
  animation: svc2HeroReveal 0.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.svc2-outcome-pill {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.svc2-replay-btn {
  margin-top: 20px;
  padding: 9px 20px;
  border: 1px solid #1E70C8;
  border-radius: 8px;
  background: transparent;
  color: #1E70C8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  animation: svc2HeroReveal 0.8s 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.svc2-replay-btn:hover {
  background: rgba(30, 112, 200, 0.06);
}

.svc2-stage-indicator {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.svc2-stage-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(30, 112, 200, 0.15);
  transition: background 0.3s;
}

.svc2-stage-dot.svc2-active {
  background: #1E70C8;
}

.svc2-pile-card {
  animation: svc2PileIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes svc2PileIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.svc2-warn-pulse {
  animation: svc2WarnPulse 1.8s ease-in-out infinite;
}

@keyframes svc2WarnPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.svc2-complete-card {
  animation: svc2CompletePop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes svc2CompletePop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


@media (max-width: 768px) {
  .story-service {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    min-height: auto;
  }

  .story-left {
    padding-right: 0;
    margin-bottom: 32px;
  }

  .story-heading {
    font-size: 28px;
  }

  .story-anim-frame {
    aspect-ratio: 4/3;
  }

  .svc2-right {
    aspect-ratio: 4/3;
    padding: 0;
  }

  .svc2-hero-num {
    font-size: 64px;
  }
}


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

:root {
  --blue: #1E70C8;
  --blue-mid: #1E70C8;
  --blue-light: #3B82F6;
  --blue-pale: #BFDBFE;
  --dark-card: #07111F;
  --panel-bg: #101C2C;
  --gray-text: #64748B;
  --white: #FFFFFF;
  --intel-blue: #1E70C8;
  --near-black: #111827;

  --b50: #EEF5FD;
  --b100: #CCDFF7;
  --b200: #9AC2EF;
  --b300: #5599E0;
  --b400: #1E70C8;
  --b500: #1558A8;
  --b600: #0E4186;
  --b700: #082B5E;
  --g50: #F8F9FB;
  --g100: #F0F2F6;
  --g200: #DDE1EB;
  --g300: #B8BFD0;
  --g400: #64748B;
  --g500: #5C6680;
  --g600: #3D4660;
  --g700: #1E2433;

  
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 56px);
  --space-xs: clamp(8px, 1vw, 12px);
  --space-sm: clamp(12px, 1.6vw, 20px);
  --space-md: clamp(20px, 3vw, 32px);
  --space-lg: clamp(32px, 5vw, 56px);
  --space-xl: clamp(48px, 7vw, 80px);
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 9999;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

html,
body {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', sans-serif;
  background: var(--white);
  color: #0F172A;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}


.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--intel-blue);
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 200;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    transition: none !important;
  }
}

.navbar-wrap {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -20px rgba(15, 23, 42, 0.25);
}

.navbar {
  display: flex;
  align-items: center;
  padding: 0 56px;
  height: 63px;
  max-width: 1440px;
  margin: 0 auto;
}

.nav-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.5px;
  text-decoration: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}

.nav-logo img {
  height: 24px;
  width: auto;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: 44px;
  list-style: none;
  margin-left: auto;
  margin-right: 36px;
}

.nav-center a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--near-black);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 11px 0;
  min-width: 44px;
  text-align: center;
  letter-spacing: -0.1px;
  transition: color 0.2s;
}

.nav-center a:hover {
  color: var(--blue);
}

.nav-center a.active {
  color: var(--blue);
}

.nav-center a.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: -2px;
  right: -2px;
  height: 2px;
  background: var(--blue);
  border-radius: 3px;
}

.nav-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #2378D4 0%, var(--blue) 100%);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.1px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(30, 112, 200, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08);
}

.nav-cta-doodle {
  width: 28px;
  height: 28px;
  flex: none;
  stroke: var(--white);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Right eye swaps from open to a wink, with two gold sparkle strokes, on
   hover, and the whole doodle pops slightly larger — a shape-only change
   on a 22px icon was too subtle to register, so hover now changes color
   and scale too, not just which paths are visible. Left eye and mouth
   stay put — only the doodle reacts. */
.nav-cta:hover .nav-cta-doodle {
  transform: scale(1.25);
}
.nav-cta-doodle .eye-r-open {
  opacity: 1;
  transition: opacity 0.18s ease;
}
.nav-cta-doodle .eye-r-wink {
  opacity: 0;
  stroke-width: 2.2;
  transition: opacity 0.18s ease;
}
.nav-cta-doodle .wink-spark {
  opacity: 0;
  stroke: #FFD34D;
  stroke-width: 2.2;
  transition: opacity 0.18s ease;
}
.nav-cta:hover .nav-cta-doodle .eye-r-open {
  opacity: 0;
}
.nav-cta:hover .nav-cta-doodle .eye-r-wink,
.nav-cta:hover .nav-cta-doodle .wink-spark {
  opacity: 1;
}

.nav-cta:hover {
  background: linear-gradient(180deg, #2A82E8 0%, #1A63B0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 20px rgba(30, 112, 200, 0.32), 0 2px 4px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}


.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}

.nav-hamburger:hover {
  background: rgba(30, 112, 200, 0.06);
}

.nav-hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--near-black);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}


.nav-mobile-backdrop {
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  pointer-events: none;
}


.nav-mobile-panel {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white);
  z-index: 99;
  padding: 96px 28px 40px;
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
  padding-left: calc(28px + env(safe-area-inset-left, 0px));
  padding-right: calc(28px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
  box-shadow: 0 24px 48px -12px rgba(8, 15, 28, 0.18);
  max-height: 100vh;
  overflow-y: auto;
}

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 28px 0;
  padding: 0;
}

.nav-mobile-links a {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: #444746;
  text-decoration: none;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 20px;
  transition: color 0.2s, background-color 0.2s;
}

.nav-mobile-links a:hover {
  background-color: rgba(15, 23, 42, 0.05);
}

.nav-mobile-links a.active {
  color: var(--near-black);
  font-weight: 600;
  background-color: rgba(15, 23, 42, 0.06);
}

.nav-cta-mobile {
  width: 100%;
  justify-content: center;
  padding: 15px 26px;
  font-size: 16px;
  min-height: 48px;
}


.nav-mobile-backdrop.nav-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.nav-mobile-panel.nav-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

.nav-hamburger.nav-open .nav-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.nav-open .nav-hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.nav-open .nav-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {

  .nav-mobile-panel,
  .nav-mobile-backdrop,
  .nav-hamburger-line {
    transition: none !important;
  }
}


@media (max-width: 767px), (max-height: 499px) {
  .navbar {
    padding: 0 20px;
    height: 56px;
  }

  .nav-logo img {
    height: 24px;
  }

  .nav-center,
  .nav-right {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    width: 40px;
    height: 40px;
  }
}


.hero-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  margin-top: 64px;
  background:
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(30, 112, 200, 0.055) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 20% 80%, rgba(30, 112, 200, 0.035) 0%, transparent 60%),
    var(--white);
}

@media (max-width: 767px), (max-height: 499px) {
  .hero-wrap {
    margin-top: 56px;
    min-height: calc(100vh - 56px);
  }
}

.hero {
  display: flex;
  align-items: center;
  padding: 0 56px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  gap: 64px;
  position: relative;
  overflow: visible;
}


@media (max-width: 1560px) {
  .hero {
    gap: 48px;
  }
}

@media (max-width: 1180px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    padding: 48px 32px;
    gap: 40px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 40px var(--container-pad);
    gap: 32px;
  }
}


body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(30, 112, 200, 0.055) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 20% 80%, rgba(30, 112, 200, 0.035) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}


.hero::before {
  content: '';
  position: absolute;
  left: -180px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(30, 112, 200, 0.07);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(30, 112, 200, 0.05);
  pointer-events: none;
  z-index: 0;
}


.hero-left {
  flex: 0 0 580px;
  max-width: 580px;
  position: relative;
  z-index: 2;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 1180px) {
  .hero-left {
    flex: 1 1 auto;
    max-width: 640px;
    width: 100%;
  }

  .hero-left .hero-cta {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-left .hero-para {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.category-pill {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(30, 112, 200, 0.35);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--blue);
  background: rgba(30, 112, 200, 0.08);
  width: fit-content;
  margin-bottom: 22px;
}


.hero-h1 {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1E2433;
  margin-bottom: 20px;
}

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


.hero-para {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #475569;
  max-width: 460px;
  margin-bottom: 30px;
}


@media (max-width: 640px) {
  .hero-h1 {
    font-size: 36px;
  }

  .hero-para {
    font-size: 16px;
  }
}


.hero-cta {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2378D4 0%, var(--blue) 100%);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1px;
  margin-bottom: 8px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 12px rgba(30, 112, 200, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08);
}

.hero-cta:hover {
  background: linear-gradient(180deg, #2A82E8 0%, #1A63B0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 20px rgba(30, 112, 200, 0.32), 0 2px 4px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}


.service-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #E4EAF3;
  padding-top: 24px;
  gap: 14px;
  flex-wrap: nowrap;
}


@media (max-width: 640px) {
  .service-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 16px;
  }

  .svc:not(:last-child) {
    border-right: none;
    padding-right: 0;
  }

  .svc-label {
    white-space: normal;
  }
}

.svc {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  position: relative;
}

.svc:not(:last-child) {
  border-right: 1px solid #E4EAF3;
  padding-right: 14px;
}

.svc-icon {
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(30, 112, 200, 0.08);
}

.svc-icon svg {
  width: 16px;
  height: 16px;
}

.svc-label {
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--near-black);
  text-align: left;
  line-height: 1.35;
  letter-spacing: -0.1px;
  white-space: nowrap;
}


.hero-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 2;
  animation: fadeRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
  container-type: inline-size;
}


@media (max-width: 1180px) {
  .hero-right {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.dcard-scale {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 720px;
}


.dcard-scale::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at center, rgba(30, 112, 200, 0.50) 0%, rgba(30, 112, 200, 0.08) 50%, transparent 75%);
  will-change: transform, opacity;
  transform: translateZ(0);
  pointer-events: none;
  z-index: -1;
}


.dcard {
  --px: calc(min(100cqi, 720px) / 720);
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 480;
  background: #060B14;
  border-radius: calc(24 * var(--px));
  border: calc(1 * var(--px)) solid rgba(28, 58, 94, 0.55);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: center center;
  pointer-events: none;
  box-shadow:
    0 calc(24 * var(--px)) calc(48 * var(--px)) calc(-12 * var(--px)) rgba(8, 15, 28, 0.4),
    0 calc(8 * var(--px)) calc(20 * var(--px)) calc(-6 * var(--px)) rgba(8, 15, 28, 0.3),
    inset 0 calc(1 * var(--px)) 0 rgba(255, 255, 255, 0.06);
}


.dcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(30, 112, 200, 0.26) 0%, rgba(30, 112, 200, 0.08) 22%, transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(30, 112, 200, 0.08) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}


@media (max-width: 768px) {
  .dcard-scale {
    justify-content: center;
  }
  .dcard {
    width: 100%;
    --px: calc(100cqi / 720);
  }
}


.dsvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}


.bnode {
  position: absolute;
  background: #0B1220;
  border: calc(1 * var(--px)) solid #1C2B42;
  border-radius: calc(9 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(12 * var(--px));
  font-weight: 600;
  color: #E2E8F0;
  line-height: 1.3;
  padding: calc(10 * var(--px)) calc(14 * var(--px));
  z-index: 4;
  box-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) calc(-2 * var(--px)) rgba(0, 0, 0, 0.35), inset 0 calc(1 * var(--px)) 0 rgba(255, 255, 255, 0.03);
  transform: translate(-50%, -50%);
}

.n-erp {
  width: calc(90 * var(--px));
  height: calc(44 * var(--px));
  top: calc(70 * var(--px));
  left: calc(360 * var(--px));
}

.n-custom {
  width: calc(90 * var(--px));
  height: calc(48 * var(--px));
  top: calc(240 * var(--px));
  left: calc(230 * var(--px));
}

.n-workflow {
  width: calc(130 * var(--px));
  height: calc(44 * var(--px));
  top: calc(410 * var(--px));
  left: calc(360 * var(--px));
}

.n-ai {
  width: calc(90 * var(--px));
  height: calc(48 * var(--px));
  top: calc(240 * var(--px));
  left: calc(490 * var(--px));
}


.vcircle {
  position: absolute;
  width: calc(130 * var(--px));
  height: calc(130 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle at center, #0F2040 0%, #060E1A 80%);
  border: calc(2 * var(--px)) solid #1E70C8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(26 * var(--px));
  font-weight: 700;
  color: #fff;
  letter-spacing: calc(-0.5 * var(--px));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 0 calc(5 * var(--px)) rgba(30, 112, 200, 0.08), 0 0 calc(16 * var(--px)) rgba(30, 112, 200, 0.32), inset 0 0 calc(16 * var(--px)) rgba(30, 112, 200, 0.32);
}

.vcircle::before {
  content: '';
  position: absolute;
  inset: calc(-20 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 30%, rgba(30, 112, 200, 0.4) 50%, transparent 70%);
  will-change: transform, opacity;
  animation: pulse-core-gpu 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulse-core-gpu {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}


.panel-wrap {
  position: absolute;
  top: 0;
  width: calc(152 * var(--px));
  height: 100%;
  z-index: 4;
}

.lpanel {
  left: calc(16 * var(--px));
}

.rpanel {
  right: calc(16 * var(--px));
}

.ptitle {
  position: absolute;
  top: calc(30 * var(--px));
  left: calc(4 * var(--px));
  font-size: calc(10 * var(--px));
  font-weight: 700;
  letter-spacing: calc(1 * var(--px));
  color: #94A3B8;
  text-transform: uppercase;
}

.pitem {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(40 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  background: #0B1220;
  border: calc(1 * var(--px)) solid #1C2B42;
  border-radius: calc(9 * var(--px));
  padding: 0 calc(14 * var(--px));
  font-size: calc(11.5 * var(--px));
  font-weight: 500;
  color: #E2E8F0;
  box-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) calc(-2 * var(--px)) rgba(0, 0, 0, 0.3), inset 0 calc(1 * var(--px)) 0 rgba(255, 255, 255, 0.03);
  transform: translateY(-50%);
}

.picon {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
}

.picon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}


.lpanel .pitem::after {
  content: "";
  position: absolute;
  right: calc(-5 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  background: #1E70C8;
  border-radius: 50%;
  border: calc(1.5 * var(--px)) solid #060B14;
  box-shadow: 0 0 calc(10 * var(--px)) #1E70C8;
  z-index: 2;
}

.rpanel .pitem::before {
  content: "";
  position: absolute;
  left: calc(-5 * var(--px));
  top: 50%;
  transform: translateY(-50%);
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  background: #1E70C8;
  border-radius: 50%;
  border: calc(1.5 * var(--px)) solid #060B14;
  box-shadow: 0 0 calc(10 * var(--px)) #1E70C8;
  z-index: 2;
}


.spill {
  position: absolute;
  bottom: calc(12 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 17, 30, 0.8);
  border: calc(1 * var(--px)) solid #1C2B42;
  border-radius: calc(999 * var(--px));
  padding: calc(5 * var(--px)) calc(16 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--px));
  font-size: calc(11 * var(--px));
  font-weight: 500;
  color: #A8BACA;
  z-index: 6;
  backdrop-filter: blur(8px);
  box-shadow: 0 calc(4 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.sdot {
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 calc(8 * var(--px)) rgba(34, 197, 94, 0.8);
  animation: blink 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.4
  }
}


.ptcl {
  position: absolute;
  border-radius: 50%;
  background: rgba(30, 112, 200, 0.6);
  animation: pf 4.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes pf {

  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }

  50% {
    opacity: 0.80;
    transform: scale(1.5);
  }
}


.wave-lines {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
}



.viz-container {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: unset;
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 50%, #F8FAFC 0%, #EEF4FB 100%);
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.viz-container.state-fade-out {
  opacity: 0;
}


.scene-inner {
  position: absolute;
  width: 580px;
  height: 580px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


.connection-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.line-svg {
  width: 580px;
  height: 580px;
  position: absolute;
  top: 0;
  left: 0;
}

.path-line {
  fill: none;
  stroke: var(--b300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  opacity: 0;
}


.scene-modules {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.viz-container.state-dashboard .scene-inner {
  opacity: 0;
}


.core-platform {
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--b400) 0%, var(--b600) 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 32px -8px rgba(21, 88, 168, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  z-index: 3;
  opacity: 0;
  transform: scale(0.5);
  will-change: transform, opacity, border-radius;
}

.core-platform::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  border: 1px solid var(--b300);
  opacity: 0;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}


.module-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(0, 0);
  opacity: 0;
  will-change: transform, opacity;
  z-index: 2;
}

.module-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(204, 223, 247, 0.6);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px -6px rgba(8, 43, 94, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: scale(0.8);
  will-change: transform;
}

.module-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--b50);
  color: var(--b500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-icon svg {
  width: 16px;
  height: 16px;
}

.module-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.module-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g700);
  line-height: 1;
}

.module-status {
  font-size: 10px;
  color: var(--g400);
  font-weight: 500;
  line-height: 1;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}


.viz-container.state-assemble .core-platform {
  opacity: 1;
  transform: scale(1);
  transition: transform 1.2s var(--ease-spring), opacity 0.8s ease;
}

.viz-container.state-assemble .core-platform::before {
  animation: pulse-ring 3s infinite var(--ease-out) 1s;
}

.viz-container.state-assemble .module-wrapper {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
  transition: transform 1.2s var(--ease-spring), opacity 0.8s ease;
}

.viz-container.state-assemble .module-card {
  transform: scale(1);
  transition: transform 1.2s var(--ease-spring);
  animation: float 4s ease-in-out infinite;
  animation-delay: var(--delay);
}

.viz-container.state-assemble .path-line {
  opacity: 0.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease-in-out), opacity 0.8s ease;
}


.viz-container.state-merge .module-wrapper {
  transform: translate(-50%, -50%) translate(0, 0);
  opacity: 0;
  transition: transform 0.8s var(--ease-in-out), opacity 0.6s ease 0.2s;
}

.viz-container.state-merge .module-card {
  transform: scale(0.5);
  transition: transform 0.8s var(--ease-in-out);
}

.viz-container.state-merge .path-line {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.viz-container.state-merge .core-platform {
  transform: scale(15);
  border-radius: 50%;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.4s ease 0.5s, border-radius 0.5s;
}

.viz-container.state-merge .core-platform::before {
  display: none;
}


.scene-dashboard {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.viz-container.state-dashboard .scene-dashboard {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.4s;
}

.dash-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px -4px rgba(8, 43, 94, 0.05);
  transform: perspective(1000px) rotateX(10deg) translateY(-20px);
  opacity: 0;
  transform-origin: top center;
}

.dash-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--b600);
}

.dash-status {
  font-size: 11px;
  font-weight: 600;
  color: #10B981;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.bento-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 20px;
  box-shadow: 0 8px 24px -8px rgba(8, 43, 94, 0.06);
  transform: perspective(1000px) rotateX(15deg) translateY(30px) scale(0.95);
  opacity: 0;
  transform-origin: bottom center;
  display: flex;
  flex-direction: column;
}

.bento-large {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.viz-container.state-dashboard .dash-header,
.viz-container.state-dashboard .bento-box {
  transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
  opacity: 1;
  transition: transform 1s var(--ease-spring), opacity 0.8s ease;
}

.viz-container.state-dashboard .dash-header {
  transition-delay: 0.5s;
}

.viz-container.state-dashboard .bento-box:nth-child(2) {
  transition-delay: 0.6s;
}

.viz-container.state-dashboard .bento-box:nth-child(3) {
  transition-delay: 0.7s;
}

.viz-container.state-dashboard .bento-box:nth-child(4) {
  transition-delay: 0.8s;
}

.box-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--g400);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.box-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--g700);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.box-trend {
  font-size: 12px;
  font-weight: 600;
  color: #10B981;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 60px;
  flex: 1;
}

.chart-bar {
  flex: 1;
  background: var(--b50);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.chart-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, var(--b300) 0%, var(--b500) 100%);
  border-radius: 4px;
  height: 0%;
  transition: height 1.2s var(--ease-spring);
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--g100);
}

.metric-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.m-label {
  font-size: 12px;
  color: var(--g500);
  font-weight: 500;
}

.m-val {
  font-size: 13px;
  color: var(--g700);
  font-weight: 600;
}

@media(max-width:860px) {
  .section {
    grid-template-columns: 1fr;
    padding: 56px 24px
  }

  .left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--g200);
    padding-bottom: 40px;
    margin-bottom: 36px
  }

  .sub,
  .desc {
    max-width: 100%
  }

  .right {
    padding-left: 0
  }

  .scene-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow-y: auto;
    padding: 16px;
  }

  .bento-large {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .chart-bars {
    height: 80px;
  }
}



.anim-shell {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  position: relative;
  background: linear-gradient(145deg, #F4F8FD 0%, #EEF4FB 100%);
  border-radius: 18px;
  border: 1px solid var(--b100);
  overflow: hidden;
}


.stage-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g400);
  white-space: nowrap;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--g200);
  transition: opacity .4s ease;
}


.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--b400);
  border-radius: 0 1px 1px 0;
  z-index: 21;
  transition: width linear;
}


.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  pointer-events: auto;
}


.s1 {
  flex-wrap: wrap;
  padding: 28px 24px;
  gap: 10px;
  align-content: center;
  
  background: linear-gradient(150deg, #F0F6FE 0%, #F5F0FC 50%, #F0F8F4 100%);
}


.data-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  
  border: none;
  
  background: var(--clay-bg, var(--b50));
  
  box-shadow:
    0 6px 0 0 var(--clay-shadow, rgba(30, 112, 200, .25)),
    
    0 2px 0 0 rgba(255, 255, 255, .85) inset,
    
    0 10px 24px rgba(0, 0, 0, .08);
  
  font-size: 12px;
  font-weight: 700;
  color: var(--clay-text, var(--b600));
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .38s ease, transform .38s ease;
}

.data-block.shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.data-block svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}



#db0 {
  --clay-bg: #DDEEFB;
  --clay-shadow: rgba(30, 100, 200, .32);
  --clay-text: #0E4186;
}


#db1 {
  --clay-bg: #D4EFDF;
  --clay-shadow: rgba(22, 110, 60, .28);
  --clay-text: #1F7A4A;
}


#db2 {
  --clay-bg: #E5DEFA;
  --clay-shadow: rgba(100, 70, 200, .28);
  --clay-text: #4E349A;
}


#db3 {
  --clay-bg: #CFF0EE;
  --clay-shadow: rgba(20, 120, 120, .28);
  --clay-text: #1A7F7F;
}


#db4 {
  --clay-bg: #FAE8CE;
  --clay-shadow: rgba(180, 100, 30, .28);
  --clay-text: #A05A20;
}


#db5 {
  --clay-bg: #FAD6E0;
  --clay-shadow: rgba(180, 60, 90, .28);
  --clay-text: #A03055;
}


#db6 {
  --clay-bg: #FBF0C4;
  --clay-shadow: rgba(180, 148, 20, .28);
  --clay-text: #8A6800;
}


#db0 svg path,
#db0 svg rect,
#db0 svg line,
#db0 svg circle {
  stroke: #1E70C8
}

#db1 svg path,
#db1 svg rect,
#db1 svg line,
#db1 svg circle {
  stroke: #1F7A4A
}

#db2 svg path,
#db2 svg rect,
#db2 svg line,
#db2 svg circle {
  stroke: #4E349A
}

#db3 svg path,
#db3 svg rect,
#db3 svg line,
#db3 svg circle {
  stroke: #1A7F7F
}

#db4 svg path,
#db4 svg rect,
#db4 svg line,
#db4 svg circle {
  stroke: #A05A20
}

#db5 svg path,
#db5 svg rect,
#db5 svg line,
#db5 svg circle {
  stroke: #A03055
}

#db6 svg path,
#db6 svg rect,
#db6 svg line,
#db6 svg circle {
  stroke: #8A6800
}


.data-block:nth-child(2) {
  animation: float1 4.2s ease-in-out infinite 0s;
}

.data-block:nth-child(3) {
  animation: float2 3.9s ease-in-out infinite .55s;
}

.data-block:nth-child(4) {
  animation: float3 4.4s ease-in-out infinite .25s;
}

.data-block:nth-child(5) {
  animation: float2 4.1s ease-in-out infinite 1.0s;
}

.data-block:nth-child(6) {
  animation: float1 3.7s ease-in-out infinite .45s;
}

.data-block:nth-child(7) {
  animation: float3 4.3s ease-in-out infinite .15s;
}

.data-block:nth-child(8) {
  animation: float1 4.0s ease-in-out infinite .75s;
}


@keyframes float1 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes float2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes float3 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}


.s1-disconnect {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}

.s1-disconnect svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}


.s2 {
  flex-direction: column;
  gap: 20px;
}

.ai-core {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(30, 112, 200, .18);
  animation: pulseRing 2.8s ease-out infinite;
}

.pulse-ring:nth-child(1) {
  width: 100%;
  height: 100%;
  animation-delay: 0s;
}

.pulse-ring:nth-child(2) {
  width: 130%;
  height: 130%;
  animation-delay: .9s;
}

.pulse-ring:nth-child(3) {
  width: 160%;
  height: 160%;
  animation-delay: 1.8s;
}

@keyframes pulseRing {
  0% {
    transform: scale(.75);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}


.core-circle {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A82D8 0%, #1E70C8 60%, #1558A8 100%);
  box-shadow:
    0 0 0 1px rgba(30, 112, 200, .3),
    0 0 32px rgba(30, 112, 200, .28),
    0 4px 24px rgba(30, 112, 200, .22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: corePulse 2.4s ease-in-out infinite;
}

@keyframes corePulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(30, 112, 200, .3), 0 0 32px rgba(30, 112, 200, .28), 0 4px 24px rgba(30, 112, 200, .22);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(30, 112, 200, .4), 0 0 44px rgba(30, 112, 200, .38), 0 4px 32px rgba(30, 112, 200, .32);
  }
}

.core-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
}

.core-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

.core-subtext {
  text-align: center;
  max-width: 220px;
}

.core-subtext p {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g600);
  line-height: 1.55;
}

.core-subtext strong {
  font-weight: 700;
  color: var(--b500);
}


.s3 {
  flex-direction: row;
  padding: 28px;
}


.stream-col {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  padding-right: 16px;
}

.stream-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--sc-bg, var(--white));
  border: 1px solid var(--sc-border, var(--g200));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06), 0 3px 0 0 var(--sc-shadow, var(--g200));
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sc-text, var(--g700));
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .35s ease, transform .35s ease;
}

#sc0 {
  --sc-bg: #DDEEFB;
  --sc-border: #A8CCF0;
  --sc-shadow: rgba(30, 100, 200, .2);
  --sc-text: #0E4186;
}

#sc1 {
  --sc-bg: #FAE8CE;
  --sc-border: #EDCFA0;
  --sc-shadow: rgba(180, 100, 30, .2);
  --sc-text: #A05A20;
}

#sc2 {
  --sc-bg: #E5DEFA;
  --sc-border: #C0ACEC;
  --sc-shadow: rgba(100, 70, 200, .2);
  --sc-text: #4E349A;
}

#sc3 {
  --sc-bg: #FAD6E0;
  --sc-border: #EDAABA;
  --sc-shadow: rgba(180, 60, 90, .2);
  --sc-text: #A03055;
}

#sc4 {
  --sc-bg: #D4EFDF;
  --sc-border: #9ADAB6;
  --sc-shadow: rgba(22, 110, 60, .2);
  --sc-text: #1F7A4A;
}

.stream-card.in {
  opacity: 1;
  transform: translateX(0);
}

.stream-card.out {
  opacity: 0;
  transform: translateX(16px);
}

.stream-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.mini-core-wrap {
  flex: 0 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.mini-core {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A82D8, #1558A8);
  box-shadow: 0 0 20px rgba(30, 112, 200, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: corePulse 2.4s ease-in-out infinite;
}

.mini-core-txt {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
}


.flow-arrow {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  margin: 4px 0;
}

.flow-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--b300) 0, var(--b300) 4px, transparent 4px, transparent 9px);
  position: relative;
  overflow: hidden;
}

.flow-dot {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b400);
  transform: translateY(-50%);
  animation: flowDot 1.4s linear infinite;
}

@keyframes flowDot {
  from {
    left: -6px;
  }

  to {
    left: 100%;
  }
}


.feed-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 16px;
  border-left: 1px solid var(--g200);
}

.feed-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g300);
  margin-bottom: 10px;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--g100);
  font-size: 11px;
  font-weight: 500;
  color: var(--g600);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .3s ease;
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-item.in {
  opacity: 1;
  transform: translateX(0);
}

.feed-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--b400);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-check svg {
  width: 8px;
  height: 8px;
}


.s4 {
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}

.s4-header {
  text-align: center;
  flex-shrink: 0;
}

.s4-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b400);
  margin-bottom: 6px;
}

.s4-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g700);
  line-height: 1.2;
}

.s4-title em {
  font-style: normal;
  color: var(--b400);
}

.out-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.out-card {
  background: var(--oc-bg, var(--b50));
  border: 1.5px solid var(--oc-border, var(--b100));
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow:
    0 4px 0 0 var(--oc-shadow, rgba(30, 112, 200, .18)),
    0 8px 20px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, box-shadow .2s ease;
  cursor: default;
}

.out-card:hover {
  box-shadow: 0 6px 0 0 var(--oc-shadow, rgba(30, 112, 200, .22)), 0 10px 28px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
}

.out-card.shown {
  opacity: 1;
  transform: translateY(0);
}

.out-card:hover.shown {
  transform: translateY(-2px);
}



#oc0 {
  --oc-bg: #DDEEFB;
  --oc-border: #9AC2EF;
  --oc-shadow: rgba(30, 100, 200, .22);
}


#oc1 {
  --oc-bg: #CFF0EE;
  --oc-border: #8CD8D5;
  --oc-shadow: rgba(20, 120, 120, .22);
}


#oc2 {
  --oc-bg: #E5DEFA;
  --oc-border: #C0ACEC;
  --oc-shadow: rgba(100, 70, 200, .22);
}


#oc3 {
  --oc-bg: #FAE8CE;
  --oc-border: #EDCFA0;
  --oc-shadow: rgba(180, 100, 30, .22);
}


#oc4 {
  --oc-bg: #D4EFDF;
  --oc-border: #9ADAB6;
  --oc-shadow: rgba(22, 110, 60, .22);
}


#oc5 {
  --oc-bg: #FAD6E0;
  --oc-border: #EDAABA;
  --oc-shadow: rgba(180, 60, 90, .22);
}


.out-card.shown:nth-child(1) {
  animation: float1 4.8s ease-in-out infinite .0s;
}

.out-card.shown:nth-child(2) {
  animation: float2 5.2s ease-in-out infinite .7s;
}

.out-card.shown:nth-child(3) {
  animation: float3 4.6s ease-in-out infinite .3s;
}

.out-card.shown:nth-child(4) {
  animation: float2 5.0s ease-in-out infinite 1.1s;
}

.out-card.shown:nth-child(5) {
  animation: float1 4.9s ease-in-out infinite .5s;
}

.out-card.shown:nth-child(6) {
  animation: float3 5.3s ease-in-out infinite .9s;
}

.out-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.out-card-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g700);
  letter-spacing: -.01em;
}

.out-card-bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .6);
  position: relative;
  overflow: hidden;
}

.out-card-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--oc-shadow, var(--b400));
  opacity: .7;
  width: 0%;
  transition: width 1s ease .2s;
}

.out-card.shown .out-card-bar-fill {
  width: var(--bar-w, 60%);
}


#oc0 .out-card-icon svg path,
#oc0 .out-card-icon svg circle,
#oc0 .out-card-icon svg line,
#oc0 .out-card-icon svg rect {
  stroke: #1E70C8
}

#oc1 .out-card-icon svg path,
#oc1 .out-card-icon svg circle,
#oc1 .out-card-icon svg line,
#oc1 .out-card-icon svg rect {
  stroke: #1A7F7F
}

#oc2 .out-card-icon svg path,
#oc2 .out-card-icon svg circle,
#oc2 .out-card-icon svg line,
#oc2 .out-card-icon svg rect {
  stroke: #4E349A
}

#oc3 .out-card-icon svg path,
#oc3 .out-card-icon svg circle,
#oc3 .out-card-icon svg line,
#oc3 .out-card-icon svg rect {
  stroke: #A05A20
}

#oc4 .out-card-icon svg path,
#oc4 .out-card-icon svg circle,
#oc4 .out-card-icon svg line,
#oc4 .out-card-icon svg rect {
  stroke: #1F7A4A
}

#oc5 .out-card-icon svg path,
#oc5 .out-card-icon svg circle,
#oc5 .out-card-icon svg line,
#oc5 .out-card-icon svg rect {
  stroke: #A03055
}


.out-card.wide {
  grid-column: span 2;
}


@media(max-width:860px) {
  .section {
    grid-template-columns: 1fr;
    padding: 56px 24px;
  }

  .left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--g200);
    padding-bottom: 40px;
    margin-bottom: 36px;
  }

  .sub,
  .desc {
    max-width: 100%;
  }

  .anim-shell {
    max-width: 100%;
    aspect-ratio: 4/3;
  }

  .right {
    padding-left: 0;
  }
}


@media(prefers-reduced-motion:reduce) {

  .data-block,
  .out-card.shown,
  .pulse-ring,
  .core-circle {
    animation: none !important;
  }

  .flow-dot {
    animation: none !important;
  }

  .scene,
  .data-block,
  .stream-card,
  .feed-item,
  .out-card {
    transition: none !important;
  }
}





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

html,
body {
  width: 100%;
  background: var(--white);
  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
}


.section {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 0;
  align-items: stretch;
  min-height: 640px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 48px 80px 52px;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 48px;
  border-right: 1px solid var(--g200);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--b400);
  margin-bottom: 22px;
}

.eyebrow-line {
  width: 22px;
  height: 1.5px;
  background: var(--b400);
  border-radius: 1px;
  flex-shrink: 0
}

h2.heading {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--g700);
  margin-bottom: 6px;
}

h2.heading em {
  font-style: normal;
  color: var(--b400)
}

.sub {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--g600);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 380px;
}

.desc {
  font-size: 14px;
  color: var(--g400);
  line-height: 1.78;
  margin-bottom: 32px;
  max-width: 380px;
}

.rule {
  width: 32px;
  height: 1px;
  background: var(--g200);
  margin-bottom: 24px
}

.cap-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g300);
  margin-bottom: 12px
}

.caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px
}

.cap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--g600);
  font-weight: 500;
}

.cap-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b400);
  flex-shrink: 0
}


.right {
  padding-left: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anim-shell {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--b100);
  overflow: hidden;
  background: #F4F8FD;
}


.stage-pill {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--g400);
  white-space: nowrap;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--g200);
  backdrop-filter: blur(4px);
  transition: opacity .4s ease;
}


.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  pointer-events: auto
}


.nm-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g400);
}


#s2 {
  background: #ECEEF3;
  overflow: hidden;
  display: block;
  position: absolute;
  inset: 0
}

.clay-base {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
}


.clay-nm-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #ECEEF3;
  box-shadow: 5px 5px 12px #c8cad0, -5px -5px 12px #ffffff;
  opacity: .38;
}

.clay-nm-line {
  height: 7px;
  border-radius: 4px;
  background: #ECEEF3;
  box-shadow: inset 2px 2px 4px #c8cad0, inset -2px -2px 4px #ffffff
}


.clay-block {
  position: absolute;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  animation: clayDrop .55s cubic-bezier(.34, 1.56, .64, 1) both;
  padding: 14px 18px;
  
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .18),
    0 2px 4px rgba(0, 0, 0, .12),
    inset 0 2px 6px rgba(255, 255, 255, .35),
    inset 0 -3px 6px rgba(0, 0, 0, .15);
}

@keyframes clayDrop {
  from {
    transform: translateY(-120px) rotate(-8deg) scale(.8);
    opacity: 0
  }

  to {
    transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
    opacity: 1
  }
}

.cb-excel {
  background: linear-gradient(145deg, #2e9e5e, #1e7a47);
  top: 30px;
  left: 38px;
  width: 110px;
  height: 76px;
  --rot: -6deg;
  animation-delay: .05s
}

.cb-email {
  background: linear-gradient(145deg, #4a90e8, #2563eb);
  top: 18px;
  left: 195px;
  width: 120px;
  height: 68px;
  --rot: 3deg;
  animation-delay: .18s
}

.cb-crm {
  background: linear-gradient(145deg, #e87f3a, #c25e1a);
  top: 42px;
  right: 30px;
  width: 108px;
  height: 72px;
  --rot: 5deg;
  animation-delay: .30s
}

.cb-sheet {
  background: linear-gradient(145deg, #d4a017, #b8860b);
  bottom: 98px;
  left: 54px;
  width: 118px;
  height: 70px;
  --rot: -3deg;
  animation-delay: .44s
}

.cb-legacy {
  background: linear-gradient(145deg, #7c6b9e, #5b4f7a);
  bottom: 80px;
  right: 44px;
  width: 112px;
  height: 74px;
  --rot: 7deg;
  animation-delay: .58s
}

.cb-whatsapp {
  background: linear-gradient(145deg, #25c86a, #1aaa55);
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg) !important;
  width: 126px;
  height: 66px;
  --rot: -2deg;
  animation-delay: .72s
}

.clay-icon {
  font-size: 18px;
  line-height: 1
}

.clay-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .92
}


.clay-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28
}


#s3 {
  overflow: hidden;
  display: block;
  position: absolute;
  inset: 0;
  background: #ECEEF3
}

.glass-chaos-bg {
  position: absolute;
  inset: 0;
  filter: blur(1.5px);
  opacity: .5
}



.glass-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-left: 1.5px solid rgba(255, 255, 255, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 32px;
  animation: glassSlidein .9s cubic-bezier(.22, 1, .36, 1) both;
  box-shadow: -8px 0 32px rgba(30, 112, 200, .06);
}

@keyframes glassSlidein {
  from {
    transform: translateX(100%);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}


.glass-node-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%
}

.glass-node {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(30, 112, 200, .18);
  box-shadow: 0 4px 16px rgba(30, 112, 200, .08), inset 0 1px 2px rgba(255, 255, 255, .9);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: glassNodeIn .5s ease both;
}

.glass-node:nth-child(1) {
  animation-delay: .55s
}

.glass-node:nth-child(2) {
  animation-delay: .72s
}

@keyframes glassNodeIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.gn-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--g400)
}

.gn-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g700)
}

.gn-bar-bg {
  height: 4px;
  border-radius: 2px;
  background: var(--g200)
}

.gn-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--b400);
  animation: barGrow .8s .9s ease both
}

@keyframes barGrow {
  from {
    width: 0 !important
  }

  to {}
}

.glass-center-node {
  padding: 16px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(30, 112, 200, .22);
  box-shadow: 0 8px 28px rgba(30, 112, 200, .10), inset 0 2px 4px rgba(255, 255, 255, .95);
  text-align: center;
  animation: glassNodeIn .5s .38s ease both;
  width: 100%;
}

.gc-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b400);
  margin-bottom: 4px
}

.gc-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g700)
}

.gc-sub {
  font-size: 12px;
  color: var(--g400);
  margin-top: 3px
}


.glass-dot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%
}

.glass-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b400);
  opacity: .7;
  box-shadow: 0 0 0 4px rgba(30, 112, 200, .12);
}

.glass-dot:nth-child(2) {
  width: 10px;
  height: 10px;
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(30, 112, 200, .18), 0 0 12px rgba(30, 112, 200, .3)
}

.glass-dot-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 112, 200, .28), transparent)
}


#s4 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}


.aurora-bg {
  position: absolute;
  inset: 0;
  background: #f0f5fc
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  animation: blobDrift linear infinite alternate;
}

.blob1 {
  width: 260px;
  height: 260px;
  background: rgba(204, 223, 247, .65);
  top: -40px;
  left: -30px;
  animation-duration: 8s;
  animation-delay: 0s
}

.blob2 {
  width: 220px;
  height: 220px;
  background: rgba(154, 194, 239, .45);
  top: 30px;
  right: -20px;
  animation-duration: 10s;
  animation-delay: -3s
}

.blob3 {
  width: 280px;
  height: 280px;
  background: rgba(238, 245, 253, .8);
  bottom: -60px;
  left: 60px;
  animation-duration: 12s;
  animation-delay: -6s
}

.blob4 {
  width: 180px;
  height: 180px;
  background: rgba(85, 153, 224, .22);
  bottom: 20px;
  right: 40px;
  animation-duration: 9s;
  animation-delay: -2s
}

@keyframes blobDrift {
  0% {
    transform: translate(0, 0) scale(1)
  }

  33% {
    transform: translate(18px, -14px) scale(1.06)
  }

  66% {
    transform: translate(-12px, 20px) scale(.96)
  }

  100% {
    transform: translate(10px, 8px) scale(1.03)
  }
}


.aurora-cards {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 36px;
  width: 100%;
}

.au-card {
  width: 100%;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 8px 32px rgba(30, 112, 200, .10), 0 1px 3px rgba(30, 112, 200, .06), inset 0 1px 2px rgba(255, 255, 255, .95);
  animation: cardFloat ease-in-out infinite alternate, cardEnter .7s cubic-bezier(.22, 1, .36, 1) both;
}

.au-card:nth-child(1) {
  animation-duration: 5s, 0s;
  animation-delay: -1s, .08s
}

.au-card:nth-child(2) {
  animation-duration: 6.5s, 0s;
  animation-delay: -3s, .24s
}

.au-card:nth-child(3) {
  animation-duration: 4.8s, 0s;
  animation-delay: -2s, .40s
}

.au-card:nth-child(4) {
  animation-duration: 7s, 0s;
  animation-delay: -4s, .56s
}

@keyframes cardFloat {
  from {
    transform: translateY(-3px)
  }

  to {
    transform: translateY(3px)
  }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.au-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.au-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--g400)
}

.au-card-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(30, 112, 200, .10);
  color: var(--b500);
  border: 1px solid rgba(30, 112, 200, .18);
}

.au-card-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--g700);
  line-height: 1
}

.au-card-sub {
  font-size: 12px;
  color: var(--g400);
  margin-top: 3px
}

.au-card-bar-bg {
  height: 3px;
  border-radius: 2px;
  background: rgba(30, 112, 200, .10);
  margin-top: 10px
}

.au-card-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--b300), var(--b400))
}

.au-card.accent {
  background: rgba(30, 112, 200, .08);
  border: 1px solid rgba(30, 112, 200, .22);
}

.au-card.accent .au-card-value {
  color: var(--b500)
}

.au-outcome-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.au-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(30, 112, 200, .12);
  border: 1px solid rgba(30, 112, 200, .2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.au-check svg {
  width: 11px;
  height: 11px
}

.au-outcome-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--g600)
}


@media(max-width:860px) {
  .section {
    grid-template-columns: 1fr;
    padding: 56px 24px
  }

  .left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--g200);
    padding-bottom: 40px;
    margin-bottom: 36px
  }

  .sub,
  .desc {
    max-width: 100%
  }

  .anim-shell {
    max-width: 100%;
    aspect-ratio: 4/3
  }

  .right {
    padding-left: 0
  }
}



.ps-section-wrapper {
  --ps-bg-page: #F8FAFC;
  --ps-bg-dash: #040914;
  --ps-text-main: #0F172A;
  --ps-text-muted: #94A3B8;
  --ps-color-blue: #3B82F6;
  --ps-color-purple: #A855F7;
  --ps-color-green: #10B981;
  --ps-color-orange: #F97316;
  --ps-color-cyan: #06B6D4;

  font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}

.ps-section-wrapper *,
.ps-section-wrapper *::before,
.ps-section-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.ps-section-wrapper .ps-app-scale-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  width: 100%;
  transition: transform 0.1s ease-out;
  padding: 24px;
}

.ps-section-wrapper .ps-header {
  text-align: center;
  margin-bottom: 48px;
  z-index: 20;
  position: relative;
}

.ps-section-wrapper .ps-header h1 {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: #111827;
}

.ps-section-wrapper .ps-header h1 span {
  color: #1E70C8;
  -webkit-text-fill-color: #1E70C8;
}

@keyframes psGradientShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.ps-section-wrapper .ps-header p {
  font-size: 20px;
  color: #475569;
  font-weight: 500;
}

.ps-section-wrapper .ps-dashboard {
  width: 100%;
  max-width: 1200px;
  background-color: var(--ps-bg-dash);
  border-radius: 24px;
  padding: 40px;
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
}


.ps-section-wrapper .ps-dashboard-grid {
  position: absolute;
  top: -100px;
  left: -100px;
  right: -100px;
  bottom: -100px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  animation: psMoveGrid 20s linear infinite;
}

@keyframes psMoveGrid {
  0% {
    transform: translateY(0) translateX(0);
  }

  100% {
    transform: translateY(40px) translateX(40px);
  }
}

.ps-section-wrapper .ps-dashboard-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: psAmbientPulse 8s ease-in-out infinite alternate;
}

@keyframes psAmbientPulse {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}

.ps-section-wrapper .ps-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
  background-size: 150px 150px;
  background-position: 0 0;
  z-index: 0;
  animation: psDrift 30s linear infinite;
}

.ps-section-wrapper .ps-particles-2 {
  background-size: 250px 250px;
  opacity: 0.5;
  animation: psDrift 20s linear infinite reverse;
}

@keyframes psDrift {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 300px 300px;
  }
}

.ps-section-wrapper .ps-dash-header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}

.ps-section-wrapper .ps-dash-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ps-section-wrapper .ps-dash-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #1E3A8A);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: psLogoShimmer 4s ease infinite;
}

@keyframes psLogoShimmer {
  0% {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 rgba(59, 130, 246, 0);
  }

  50% {
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6), 0 0 15px rgba(59, 130, 246, 0.4);
  }

  100% {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 rgba(59, 130, 246, 0);
  }
}

.ps-section-wrapper .ps-dash-header-center {
  display: flex;
  gap: 16px;
}

.ps-section-wrapper .ps-dash-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: psPillBreath 4s ease-in-out infinite alternate;
}

@keyframes psPillBreath {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.02);
    opacity: 1;
  }
}

.ps-section-wrapper .ps-dash-pill-green {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
  color: #34D399;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.1);
}

.ps-section-wrapper .ps-dash-pill-blue {
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.05);
  color: #60A5FA;
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
}

.ps-section-wrapper .ps-dash-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ps-text-muted);
}

.ps-section-wrapper .ps-status-dot {
  width: 8px;
  height: 8px;
  background: var(--ps-color-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ps-color-green);
  animation: psDotPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes psDotPulse {
  0% {
    opacity: 0.4;
    transform: scale(0.8);
    box-shadow: 0 0 5px var(--ps-color-green);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--ps-color-green);
  }

  100% {
    opacity: 0.4;
    transform: scale(0.8);
    box-shadow: 0 0 5px var(--ps-color-green);
  }
}

.ps-section-wrapper .ps-ecosystem-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
  position: relative;
}

.ps-section-wrapper .ps-ecosystem {
  position: relative;
  width: 1076px;
  height: 680px;
  flex-shrink: 0;
}


.ps-section-wrapper .ps-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.ps-section-wrapper .ps-path-line {
  stroke-dasharray: 8 8;
  animation: psDashFlow 30s linear infinite, psStrokeBreath 4s ease-in-out infinite alternate;
}

@keyframes psDashFlow {
  to {
    stroke-dashoffset: -400;
  }
}

@keyframes psStrokeBreath {
  0% {
    stroke-opacity: 0.2;
    stroke-width: 1.5px;
  }

  100% {
    stroke-opacity: 0.6;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 4px currentColor);
  }
}


.ps-section-wrapper .ps-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(2, 6, 23, 0.9) 100%);
  border-radius: 20px;
  padding: 20px;
  position: absolute;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

@keyframes psCardFloat {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-8px);
  }
}

@keyframes psCardGlowBreath {
  0% {
    box-shadow: 0 0 30px -10px var(--ps-glow-color), inset 0 0 15px -10px var(--ps-glow-color);
    border-color: rgba(var(--ps-glow-rgb), 0.3);
  }

  100% {
    box-shadow: 0 0 50px -5px var(--ps-glow-color), inset 0 0 25px -5px var(--ps-glow-color);
    border-color: rgba(var(--ps-glow-rgb), 0.6);
  }
}

.ps-section-wrapper .ps-card:hover {
  transform: translateY(-12px) scale(1.02) !important;
  z-index: 20;
  animation-play-state: paused;
}

.ps-section-wrapper .ps-card-top-left {
  top: 0;
  left: 68px;
  width: 350px;
  height: 320px;
  --ps-glow-color: rgba(59, 130, 246, 0.4);
  --ps-glow-rgb: 59, 130, 246;
  animation: psCardFloat 7s ease-in-out infinite alternate 0s, psCardGlowBreath 4s ease-in-out infinite alternate 0s;
}

.ps-section-wrapper .ps-card-top-right {
  top: 0;
  right: 68px;
  width: 350px;
  height: 320px;
  --ps-glow-color: rgba(168, 85, 247, 0.4);
  --ps-glow-rgb: 168, 85, 247;
  animation: psCardFloat 6s ease-in-out infinite alternate -2s, psCardGlowBreath 5s ease-in-out infinite alternate -1s;
}

.ps-section-wrapper .ps-card-bottom-left {
  bottom: 0;
  left: 0;
  width: 312px;
  height: 260px;
  --ps-glow-color: rgba(16, 185, 129, 0.4);
  --ps-glow-rgb: 16, 185, 129;
  animation: psCardGlowBreath 4.5s ease-in-out infinite alternate -2s;
}

.ps-section-wrapper .ps-card-bottom-center {
  bottom: 0;
  left: 50%;
  width: 312px;
  height: 260px;
  margin-left: -156px;
  --ps-glow-color: rgba(249, 115, 22, 0.4);
  --ps-glow-rgb: 249, 115, 22;
  animation: psCardGlowBreath 5.5s ease-in-out infinite alternate -3s;
}

.ps-section-wrapper .ps-card-bottom-center:hover {
  transform: translateY(-12px) scale(1.02) !important;
}

.ps-section-wrapper .ps-card-bottom-right {
  bottom: 0;
  right: 0;
  width: 312px;
  height: 260px;
  --ps-glow-color: rgba(6, 182, 212, 0.4);
  --ps-glow-rgb: 6, 182, 212;
  animation: psCardGlowBreath 4s ease-in-out infinite alternate -1s;
}


.ps-section-wrapper .ps-center-logo {
  position: absolute;
  top: 330px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  z-index: 5;
}

.ps-section-wrapper .ps-center-logo-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #1E3A8A);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  animation: psNodeBreath 3s ease-in-out infinite alternate;
}

@keyframes psNodeBreath {
  0% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
  }

  100% {
    box-shadow: 0 0 70px rgba(59, 130, 246, 0.9), inset 0 0 25px rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
  }
}

.ps-section-wrapper .ps-center-logo-ring-1 {
  position: absolute;
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: -14px;
  border-radius: 50%;
  border: 1.5px dashed rgba(59, 130, 246, 0.6);
  animation: psSpin 20s linear infinite;
  z-index: 1;
}

.ps-section-wrapper .ps-center-logo-ring-2 {
  position: absolute;
  top: -28px;
  left: -28px;
  right: -28px;
  bottom: -28px;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.2);
  animation: psSpin 30s linear infinite reverse;
  z-index: 1;
}

.ps-section-wrapper .ps-node-particles {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 112px;
  height: 112px;
  z-index: 3;
  pointer-events: none;
}

@keyframes psSpin {
  100% {
    transform: rotate(360deg);
  }
}


.ps-section-wrapper .ps-badge-live {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.ps-section-wrapper .ps-badge-live.ps-blue {
  background: #2563EB;
  color: white;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

.ps-section-wrapper .ps-badge-live.ps-purple {
  background: #9333EA;
  color: white;
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

.ps-section-wrapper .ps-badge-building {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94A3B8;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.ps-section-wrapper .ps-card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ps-section-wrapper .ps-card-title {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.25;
}

.ps-section-wrapper .ps-card-subtitle {
  color: var(--ps-text-muted);
  font-size: 13px;
}

.ps-section-wrapper .ps-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: psIconShimmer 3s ease infinite alternate;
}

@keyframes psIconShimmer {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }

  100% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  }
}

.ps-section-wrapper .ps-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: psIconShimmer 3s ease infinite alternate;
}

.ps-section-wrapper .ps-stat-grid {
  display: flex;
  gap: 40px;
  margin: 24px 0;
}

.ps-section-wrapper .ps-stat-label {
  color: var(--ps-text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.ps-section-wrapper .ps-stat-value {
  color: white;
  font-size: 24px;
  font-weight: 700;
}

.ps-section-wrapper .ps-stat-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}


.ps-section-wrapper .ps-bar-chart-container {
  height: 48px;
  width: 100%;
  margin-bottom: 24px;
  padding: 0 4px;
  overflow: hidden;
  position: relative;
}

.ps-section-wrapper .ps-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  width: 100%;
}

.ps-section-wrapper .ps-bar-chart div {
  flex: 1;
  border-radius: 2px 2px 0 0;
  opacity: 0.9;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-section-wrapper .ps-bar-chart.ps-blue div {
  background: var(--ps-color-blue);
  box-shadow: 0 -2px 8px rgba(59, 130, 246, 0.3);
}

.ps-section-wrapper .ps-bar-chart.ps-purple div {
  background: var(--ps-color-purple);
  box-shadow: 0 -2px 8px rgba(168, 85, 247, 0.3);
}

.ps-section-wrapper .ps-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 0 16px 0;
  width: 100%;
}


.ps-section-wrapper .ps-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 10px 0 18px 0;
  position: relative;
}

.ps-section-wrapper .ps-progress-fill {
  height: 100%;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.ps-section-wrapper .ps-progress-shine {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}

.ps-section-wrapper .ps-progress-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: psShine 2.5s infinite linear;
}

@keyframes psShine {
  100% {
    left: 200%;
  }
}

.ps-section-wrapper .ps-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: psThumbPulse 2s infinite alternate;
  z-index: 2;
}

@keyframes psThumbPulse {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 8px currentColor;
  }

  100% {
    transform: translateY(-50%) scale(1.4);
    box-shadow: 0 0 16px currentColor;
  }
}


.ps-section-wrapper .ps-line-chart-container {
  height: 64px;
  width: 100%;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center bottom;
}

.ps-section-wrapper .ps-line-chart-group {
  transform-origin: bottom center;
  animation: psFlexGraph 4s ease-in-out infinite alternate;
}

@keyframes psFlexGraph {
  0% {
    transform: scaleY(0.95);
  }

  100% {
    transform: scaleY(1.05);
  }
}


.ps-section-wrapper .ps-line-chart-stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: psLineDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: var(--ps-line-delay, 0.3s);
}

.ps-section-wrapper .ps-line-chart-fill {
  opacity: 0;
  animation: psLineFillIn 1s ease-out both;
  animation-delay: calc(var(--ps-line-delay, 0.3s) + 0.5s);
}

.ps-section-wrapper .ps-line-chart-dot {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: psLineDotIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ps-section-wrapper .ps-line-chart-rider {
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: psLineRider 1.6s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: var(--ps-line-delay, 0.3s);
}


.ps-section-wrapper .ps-line-chart-rider.ps-line-rider-settled {
  animation: psLineRiderBob 3s ease-in-out infinite;
}

@keyframes psLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes psLineFillIn {
  to {
    opacity: 1;
  }
}

@keyframes psLineDotIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes psLineRider {
  from {
    offset-distance: 0%;
    opacity: 1;
  }

  to {
    offset-distance: 100%;
    opacity: 1;
  }
}

@keyframes psLineRiderBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ps-section-wrapper .ps-line-chart-stroke,
  .ps-section-wrapper .ps-line-chart-fill,
  .ps-section-wrapper .ps-line-chart-dot,
  .ps-section-wrapper .ps-line-chart-rider {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }

  
  .ps-section-wrapper .ps-line-chart-rider {
    offset-distance: 100% !important;
  }
}

.ps-section-wrapper .ps-status-text {
  color: var(--ps-text-muted);
  font-size: 12px;
  animation: psTextBreath 3s ease-in-out infinite alternate;
}

@keyframes psTextBreath {
  0% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}



.ps-section-wrapper .ps-ecosystem-wrapper {
  container-type: inline-size;
}

@media (max-width: 768px) {
  .ps-section-wrapper {
    padding: 24px 16px;
  }

  .ps-section-wrapper .ps-app-scale-wrapper {
    padding: 0;
  }

  .ps-section-wrapper .ps-dashboard {
    padding: 32px 24px 40px;
  }

  .ps-section-wrapper .ps-ecosystem-wrapper {
    overflow: visible;
  }

  .ps-section-wrapper .ps-ecosystem {
    transform: scale(var(--ps-eco-scale, 1));
    transform-origin: top center;
    margin-bottom: calc(680px * (var(--ps-eco-scale, 1) - 1));
  }


  .ps-section-wrapper .ps-dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .ps-section-wrapper .ps-dash-header-left {
    width: 100%;
    gap: 10px;
  }

  .ps-section-wrapper .ps-dash-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  .ps-section-wrapper .ps-dash-logo svg {
    width: 15px;
    height: 15px;
  }

  .ps-section-wrapper .ps-dash-header-left h2 {
    font-size: 14px !important;
  }

  .ps-section-wrapper .ps-dash-header-left .ps-status-text {
    font-size: 11px !important;
  }

  .ps-section-wrapper .ps-dash-header-center {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ps-section-wrapper .ps-dash-pill {
    padding: 5px 12px;
    font-size: 11px;
    gap: 6px;
  }

  .ps-section-wrapper .ps-dash-pill svg {
    width: 13px;
    height: 13px;
  }

  .ps-section-wrapper .ps-dash-header-right {
    width: 100%;
    font-size: 11px;
  }

  .ps-section-wrapper .ps-status-dot {
    width: 6px;
    height: 6px;
  }
}





.close {
  position: relative;
  width: 100%;
  /* Bottom padding was 210px — a leftover from when .close-bg's height
     wasn't reserved for (see js/src/08-contact-close.js's
     syncCloseFinaleHeight()), so this padding was doing the job of
     pushing the footer down far enough to clear the image manually. Now
     that .close-finale sizes itself correctly to the image, this much
     padding is just a large empty gap before the footer. Matches the top
     value for symmetry now that it isn't compensating for anything. */
  padding: 56px 48px 56px;
  overflow: hidden;
}

.close-finale {
  position: relative;
  display: flow-root;
  /* .close-bg below is position:absolute (out of flow) so this container's
     own height comes only from .brand-line's text content — far shorter
     than the background image's own aspect-ratio-driven height. Without
     reserving space for it here, whatever follows in the document (the
     footer, with its own opaque background) starts right after the short
     text block and visually covers the bottom portion of the image,
     including the "V" hex node partway down the diagram.
     A pure-CSS min-height here doesn't work: percentages in min-height
     resolve against the CONTAINING BLOCK'S HEIGHT (auto/indefinite here,
     so they compute to nothing), unlike padding percentages which resolve
     against width — and padding-bottom, tried first, stacks extra space
     *after* .brand-line's own content instead of acting as a floor,
     leaving a large empty gap before the footer. js/src/08-contact-close.js
     sets this element's min-height in real pixels instead, read directly
     from .close-bg's own rendered box (which sizes correctly from its
     `aspect-ratio` regardless of JS, since that's plain CSS) — see
     syncCloseFinaleHeight() there. The mobile rule below is unaffected
     (JS only runs this at min-width:768px) and keeps its own CSS-only
     min-height, which doesn't hit this percentage problem because it's
     built from vw units, not %. */
}

/* FooterBG.png (1983x793) has a lot of blank margin baked into the file
   itself above and below the actual diagram — measured directly (script,
   not eyeballed): the real content spans roughly y=148 to y=674 of 793px
   (18.7%-85.0%), a 526px band out of 793px total. Showing the full image
   via `contain` (the old rule) rendered all of that blank margin too.
   This crops it out the same way the mobile rule below already does for
   its own image: aspect-ratio is set to the cropped band's own ratio
   (with a small ~4.5% margin kept top/bottom, 578px), and
   background-size/position scale + shift the full image so only that
   band shows, letterbox-free, at any responsive width (values are
   percentages of this box, not px, so they hold as it scales with
   viewport width). */
.close-bg {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1900px;
  aspect-ratio: 1983 / 578;
  background-size: 100% 137.2%;
  background-repeat: no-repeat;
  background-position: center 56.7%;
  z-index: -1;
  pointer-events: none;
}

/* The image itself is gated behind this class (added by JS in
   08-contact-close.js once the coffee/beer cards become visible)
   instead of being declared directly on .close-bg — a browser only
   fetches a background-image once a rule that sets it actually matches
   the element, so this defers the request from page load (where
   .close-bg exists off-screen at the very bottom of a long page) to
   the point the user has actually scrolled near it. */
.close-bg.bg-loaded {
  background-image: url('../assets/images/FooterBG.webp');
}


.conv {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

.conv.settled {
  transform: translateY(-20px);
  opacity: .55;
}

.conv-line {
  font-size: 17.5px;
  font-weight: 450;
  color: var(--g600);
  line-height: 1.55;
  letter-spacing: -.005em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
  margin-bottom: 6px;
}

.conv-line.in {
  opacity: 1;
  transform: translateY(0)
}

.conv-line:last-child {
  margin-bottom: 0
}


.primary-wrap {
  text-align: center;
  margin-top: 14px;
}

.primary {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--g700);
  max-width: 760px;
  margin: 0 auto;
}

.primary em {
  font-style: normal;
  color: var(--b400)
}

.secondary {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.sec-line {
  font-size: 15px;
  font-weight: 500;
  color: var(--g400);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s cubic-bezier(.22, .61, .36, 1), transform .35s cubic-bezier(.22, .61, .36, 1);
}

.sec-line.in {
  opacity: 1;
  transform: translateY(0)
}

.sec-line.conclude {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--g700);
  margin-top: 4px;
}


.industry-wrap {
  margin-top: 36px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
}

.industry-wrap.in {
  opacity: 1;
  transform: translateY(0)
}

.industry-line {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--b400);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.industry-rotator {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 520px;
  height: 30px;
}

.industry-word {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  white-space: nowrap;
  color: var(--b400);
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: 0 0 18px rgba(30, 112, 200, 0.45), 0 0 40px rgba(30, 112, 200, 0.22);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22, .61, .36, 1);
}

.industry-word.show {
  opacity: 1;
  transform: translateY(0);
}

@media(max-width:640px) {
  .industry-line {
    font-size: 17px
  }

  .industry-word {
    white-space: normal;
    line-height: 1.4;
    text-shadow: 0 0 14px rgba(30, 112, 200, 0.4), 0 0 30px rgba(30, 112, 200, 0.2);
  }

  .industry-rotator {
    height: auto;
    min-height: 30px
  }
}


.close-transition {
  margin-top: 36px;
  text-align: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.trans-line {
  font-size: 17px;
  font-weight: 500;
  color: var(--g500);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

.trans-line.in {
  opacity: 1;
  transform: translateY(0)
}

.trans-line+.trans-line {
  margin-top: 4px
}

.trans-line.wink {
  font-size: 15px;
  color: var(--g400);
  margin-top: 8px;
}


.invite {
  margin-top: 64px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}

.invite.in {
  opacity: 1;
  transform: translateY(0)
}

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 640px;
  margin: 0 auto;
  gap: 0 96px;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .5s ease;
}


.table:hover .seat:not(:hover),
.table:focus-within .seat:not(:focus-within) {
  opacity: .35;
}

.seat:focus-visible {
  outline: 2px solid var(--b300);
  outline-offset: 6px;
  border-radius: 8px
}

.seat-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 0 rgba(30, 112, 200, 0));
  transition: filter .6s ease;
}

.seat-icon dotlottie-wc,
.seat-icon svg {
  display: block;
  width: 72px;
  height: 72px;
}

.seat:hover .seat-icon,
.seat:focus-visible .seat-icon {
  filter: drop-shadow(0 0 8px rgba(30, 112, 200, .2));
}

.seat-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--g700);
  margin-bottom: 14px;
  transition: color .4s ease;
}

.seat:hover .seat-title,
.seat:focus-visible .seat-title {
  color: var(--b500);
}

.seat-line {
  font-size: 14px;
  font-weight: 500;
  color: var(--g500);
  line-height: 1.55;
  max-width: 230px;
}

.seat-subline {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--g400);
  line-height: 1.55;
  max-width: 230px;
  margin-top: 2px;
}

.seat-topics {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--g300);
  letter-spacing: .01em;
}

.seat-topics span {
  color: var(--g400)
}


.steam-layer,
.bubble-layer {
  overflow: visible
}

.steam-curl {
  opacity: 0;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

.steam-curl.run,
.seat:hover .steam-curl,
.seat:focus-visible .steam-curl {
  animation-name: steamCurl;
  animation-timing-function: cubic-bezier(.3, .1, .4, 1);
  animation-iteration-count: infinite;
}

@keyframes steamCurl {
  0% {
    stroke-dashoffset: 22;
    opacity: 0;
    transform: translateY(0) scaleX(1)
  }

  15% {
    opacity: .34
  }

  55% {
    opacity: .2
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
    transform: translateY(-3px) scaleX(1.18)
  }
}

.beer-bubble {
  opacity: 0;
  transform-origin: center;
  --rise: -14px;
}

.beer-bubble.run,
.seat:hover .beer-bubble,
.seat:focus-visible .beer-bubble {
  animation-name: bubbleFloat;
  animation-timing-function: cubic-bezier(.25, .1, .3, 1);
  animation-iteration-count: infinite;
}

@keyframes bubbleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.5)
  }

  10% {
    opacity: .75
  }

  85% {
    opacity: .4
  }

  100% {
    opacity: 0;
    transform: translateY(var(--rise)) scale(.85)
  }
}


.brand-line {
  /* 128px put "Prefer email?" past the diagram's "V" hex node once
     .close-bg's aspect-ratio/background-size were tightened to crop out
     the image's own blank margins (see .close-bg above) — the diagram
     content now occupies the box's full height instead of a shorter band
     centered within extra whitespace, so this text block needs to be
     shorter and sit higher to end above the V node instead of over it. */
  /* The empty band above the "V" node is a FIXED proportion of the
     diagram's own width (measured directly: ~20% of .close-bg's
     rendered width), so the room available for this text scales
     linearly with viewport width all the way down to the 768px mobile
     cutoff — not just between the two widths this was last tuned at
     (1280/1920). A flat floor below 1280px caused real overlap in the
     768-1200px range that was never actually tested. This scales
     continuously across that whole range instead. */
  margin-top: clamp(0px, calc(7.4vw - 57px), 100px);
  margin-bottom: 4px;
  /* Keeps the block clear of the PLANNING/PRODUCTION labels off to
     either side in the diagram (measured at ~25%/~74% of the image's
     width) instead of stretching edge to edge. */
  max-width: 46%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

.brand-line.in {
  opacity: 1;
  transform: translateY(0)
}

.brand-line-text {
  /* Same reasoning as .brand-line's margin-top above — scales
     continuously from 768px up to 1920px instead of hitting a flat
     floor early and overlapping the diagram in the 768-1200px range. */
  font-size: clamp(22px, calc(2.1vw + 5px), 46px);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.15;
  color: var(--g700);
}

.brand-line-sign {
  margin-top: 16px;
  margin-right: -14%;
  font-size: 13px;
  font-weight: 500;
  color: var(--g300);
  letter-spacing: .02em;
  font-style: italic;
}

.brand-line-contact {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--g500);
}

.brand-line-contact a {
  color: var(--b400);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}

.brand-line-contact a:hover {
  text-decoration: underline;
}


.foot {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.foot-grid {
  margin-top: 0;
  padding-top: 32px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--g100);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1);
}

.foot-grid.in {
  opacity: 1;
  transform: translateY(0)
}

.foot-col-brand .foot-word {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--near-black);
  margin-bottom: 3px;
}

.foot-wordmark {
  display: block;
  height: .75em;
  width: auto;
}

.foot-wordmark--inline {
  display: inline-block;
  vertical-align: baseline;
}

.foot-col-brand .foot-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--g300);
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.foot-col.foot-center {
  align-items: center
}

.foot-col.foot-right {
  align-items: flex-end
}

.foot-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--intel-blue);
  margin-bottom: 3px;
}

.foot-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--g400);
  text-decoration: none;
  letter-spacing: -.002em;
  transition: color .35s ease;
  padding: 4px 4px;
}

.foot-link:hover {
  color: var(--b400)
}

.foot-bottom {
  margin-top: 24px;
  padding: 0 0 44px;
  text-align: center;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1);
}

.foot-bottom.in {
  opacity: 1
}

.foot-copyright {
  font-size: 11px;
  color: var(--near-black);
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 0 10px rgba(30, 112, 200, .25);
}

.foot-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.foot-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-radius: 50%;
  background: var(--g50);
  color: var(--g400);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.foot-social-link:hover {
  background: var(--b400);
  color: var(--white);
  transform: translateY(-1px);
}

.foot-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.foot-signature-line {
  width: 72px;
  max-width: 18vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--b400));
  opacity: .55;
}

.foot-signature-line:last-child {
  background: linear-gradient(90deg, var(--b400), transparent);
}

.foot-signature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b400);
  box-shadow: 0 0 8px rgba(30, 112, 200, .7);
  flex: none;
  animation: signatureGlowPulse 2.2s ease-in-out infinite;
}

.foot-signature-brand {
  color: var(--intel-blue);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(30, 112, 200, .35);
}

@keyframes signatureGlowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(30, 112, 200, .6); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(30, 112, 200, 1); transform: scale(1.35); }
}


@media(max-width:768px) {
  .close {
    padding: 44px 24px 20px
  }

  .foot {
    padding: 0 24px;
  }

  .conv-line {
    font-size: 15.5px
  }

  .invite {
    margin-top: 24px
  }

  .table {
    grid-template-columns: 1fr 1fr;
    max-width: 340px;
    gap: 0 4px;
  }

  .seat {
    padding: 4px 0
  }

  .seat-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }

  .seat-icon dotlottie-wc,
  .seat-icon svg {
    width: 56px;
    height: 56px;
  }

  .seat-title {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .seat-line {
    font-size: 10px;
    max-width: 100%;
    letter-spacing: -.02em;
    line-height: 1.4;
    white-space: nowrap;
  }

  .seat-subline {
    font-size: 10.5px;
    max-width: 100%;
    letter-spacing: -.015em;
    line-height: 1.35;
    margin-top: 3px;
    min-height: calc(1.35em * 2);
  }

  .seat-topics {
    margin-top: 10px;
    font-size: 10.5px;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 8px;
    padding-top: 16px;
    text-align: left;
    margin-top: 0;
  }

  .foot-heading {
    font-size: 9.5px;
  }

  .foot-link {
    font-size: 10px;
    padding: 6px 2px;
  }

  .foot-col-brand .foot-word {
    font-size: 12px;
  }

  .foot-col-brand .foot-tag {
    font-size: 9.5px;
  }

  .foot-social-link {
    padding: 10px;
  }

  .foot-bottom {
    padding-bottom: 40px
  }

  .close-finale {
    --bgw: 100vw;
    min-height: calc(var(--bgw) * 0.5 * 1448 / 1086);
    /* Cancels the desktop padding-bottom fix above (base .close-finale
       rule) — mobile already reserves the right space via min-height. */
    padding-bottom: 0;
  }

  .close-bg {
    top: 0;
    width: var(--bgw);
    max-width: 480px;
    height: calc(var(--bgw) * 0.5 * 1448 / 1086);
    background-size: var(--bgw) calc(var(--bgw) * 1448 / 1086);
    background-position: center calc(var(--bgw) * -0.18 * 1448 / 1086);
    background-repeat: no-repeat;
    filter: contrast(1.15) saturate(1.1);
  }

  /* Mobile image, same lazy gate as the desktop rule above. */
  .close-bg.bg-loaded {
    background-image: url('../assets/images/MobFooterBG.webp');
  }

  .brand-line {
    margin-top: 48px;
    /* Cancels the desktop max-width added above (keeps the text clear of
       the diagram's side labels there) — mobile already constrains width
       on the individual text elements below instead, and stacks the
       diagram completely differently, so this isn't needed here and
       would otherwise double up with the 52% below. */
    max-width: none;
  }

  .brand-line-text,
  .brand-line-sign,
  .brand-line-contact {
    max-width: 52%;
    margin-left: auto;
    margin-right: auto;
  }

  .brand-line-text {
    font-size: 19px;
  }

  .brand-line-sign {
    margin-top: 12px;
  }

  .brand-line-contact {
    margin-top: 14px;
    font-size: 13px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .conv-line,
  .sec-line,
  .industry-wrap,
  .trans-line,
  .invite,
  .brand-line,
  .foot-grid,
  .foot-bottom,
  .conv {
    transition: opacity .3s ease !important;
    transform: none !important;
  }

  .foot-signature-dot {
    animation: none !important;
  }

  .industry-word {
    transition: none !important
  }

  .steam-curl,
  .beer-bubble {
    animation: none !important;
    opacity: 0 !important
  }

  .seat-icon {
    transition: none !important
  }
}


#services .story-connector {
  display: none !important;
}

#services .svc-carousel-stage {
  position: relative;
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  perspective: 1600px;
  z-index: 1;
}

#services .svc-slide {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: translate3d(80px, 0, 0) scale(0.94);
  
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  will-change: transform, opacity;
  
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  box-shadow: 0 24px 64px -24px rgba(0, 60, 140, 0.22);
  overflow: hidden;
  box-sizing: border-box;
}


#services .svc-slide.story-service {
  padding: 16px 30px !important;
  
  min-height: 550px;
  
  height: auto;
  
  box-sizing: border-box;
  overflow: visible;
  
}

#services .svc-slide .story-service>* {
  margin-top: 0;
}


#services .svc-slide.is-prev {
  transform: translate3d(-80px, 0, 0) scale(0.94);
}

#services .svc-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  z-index: 3;
}


#services .svc-blob-bg {
  position: absolute;
  inset: -120px;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.55;
}

#services .svc-blob-bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: svcBlob 18s ease-in-out infinite;
  will-change: transform, border-radius;
}

#services .svc-blob-bg span:nth-child(1) {
  width: 460px;
  height: 460px;
  left: 4%;
  top: 8%;
  background: rgba(30, 112, 200, 0.35);
}

#services .svc-blob-bg span:nth-child(2) {
  width: 400px;
  height: 400px;
  right: 6%;
  top: 25%;
  background: rgba(85, 153, 224, 0.30);
  animation-delay: -6s;
}

#services .svc-blob-bg span:nth-child(3) {
  width: 360px;
  height: 360px;
  left: 35%;
  bottom: 4%;
  background: rgba(91, 63, 168, 0.22);
  animation-delay: -12s;
}

@keyframes svcBlob {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 50%;
  }

  33% {
    transform: translate3d(50px, -40px, 0) scale(1.12);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  }

  66% {
    transform: translate3d(-40px, 40px, 0) scale(0.92);
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  }
}


#services .svc-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px auto 0;
  max-width: 640px;
}

#services .svc-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#services .svc-tab {
  border: 1px solid rgba(30, 112, 200, 0.18);
  background: #fff;
  color: #3A4257;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

#services .svc-tab:hover {
  border-color: rgba(30, 112, 200, 0.4);
  color: #1E70C8;
}

#services .svc-tab.active {
  background: #1E70C8;
  border-color: #1E70C8;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(30, 112, 200, 0.55);
}

@media (max-width: 640px) {
  #services .svc-controls {
    gap: 8px;
  }

  #services .svc-tab {
    font-size: 13px;
    padding: 8px 14px;
  }
}


#services .svc-progress {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30, 112, 200, 0.55);
}

@media (max-width: 1024px) {
  #services .svc-carousel-stage {
    min-height: auto;
    max-height: none;
  }

  #services .svc-slide .story-service {
    padding: 24px 24px !important;
  }
}

@media (max-width: 768px) {
  #services .svc-carousel-stage {
    min-height: auto;
    max-height: none;
  }

  #services .svc-slide {
    border-radius: 16px;
  }

  #services .svc-slide .story-service {
    padding: 18px 16px !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  #services .svc-slide {
    transition: opacity 0.3s ease;
    transform: none !important;
  }

  #services .svc-blob-bg span {
    animation: none;
  }
}

:root {
  --intel-blue: #1E70C8;
  --near-black: #111827;
  --white: #FFFFFF;
}

@keyframes waveReveal {

  0% {

    color: var(--white);

    text-shadow: none;

  }

  35% {

    color: var(--intel-blue);

    text-shadow:
      0 0 6px rgba(30, 112, 200, .10);

  }

  100% {

    color: var(--near-black);

    text-shadow: none;

  }

}



@keyframes breatheGlow {

  0%,
  50% {

    color: var(--near-black);

    text-shadow: none;

  }

  75% {

    color: var(--near-black);

    text-shadow:
      0 0 3px rgba(17, 24, 39, .18),
      0 0 8px rgba(17, 24, 39, .08);

  }

  87.5% {

    color: var(--near-black);

    text-shadow:
      0 0 4px rgba(17, 24, 39, .24),
      0 0 10px rgba(17, 24, 39, .12);

  }

  100% {

    color: var(--near-black);

    text-shadow: none;

  }

}

.wave-word {
  display: inline-block;
  white-space: nowrap;
}

.wave-char {
  display: inline-block;
  color: var(--white);
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
}

.wave-char-blue {
  display: inline-block;
  color: var(--white);
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
}

.wave-headline {
  overflow: visible;
}

.wave-headline.wave-run .wave-char {
    animation-name: waveRevealIn, waveReveal, breatheGlow;
    animation-duration: .01s, 1s, 6s;
    animation-timing-function: linear, ease-out, ease-in-out;
    animation-iteration-count: 1, 1, infinite;
    animation-fill-mode: forwards, forwards, none;
    animation-delay: calc(var(--line-delay, 0s) + 0.1s + var(--ci)*0.07s), calc(var(--line-delay, 0s) + 0.1s + var(--ci)*0.07s), calc(var(--line-delay, 0s) + 2.6s + var(--ci)*0s);
}

.wave-headline.wave-run .wave-char-blue {
    animation-name: waveRevealIn, waveRevealBlue, breatheGlowBlue;
    animation-duration: .01s, 1s, 6s;
    animation-timing-function: linear, ease-out, ease-in-out;
    animation-iteration-count: 1, 1, infinite;
    animation-fill-mode: forwards, forwards, none;
    animation-delay: calc(var(--line-delay, 0s) + 0.1s + var(--ci)*0.07s), calc(var(--line-delay, 0s) + 0.1s + var(--ci)*0.07s), calc(var(--line-delay, 0s) + 2.6s + var(--ci)*0s);
}

@media (prefers-reduced-motion:reduce) {
  .wave-headline .wave-char {
    animation: none;
    color: var(--near-black);
    opacity: 1;
  }

  .wave-headline .wave-char-blue {
    animation: none;
    color: var(--intel-blue);
    opacity: 1;
  }
}

@keyframes waveRevealIn {
  to {
    opacity: 1;
  }
}


@keyframes waveRevealBlue {
  0% {
    color: var(--white);
    text-shadow: none;
  }

  35% {
    color: #5BBBFF;
    text-shadow: 0 0 6px rgba(30, 112, 200, .10);
  }

  100% {
    color: var(--intel-blue);
    text-shadow: none;
  }
}

@keyframes breatheGlowBlue {

  0%,
  100% {
    color: var(--intel-blue);
    text-shadow: none;
  }

  50% {
    color: var(--intel-blue);
    text-shadow: 0 0 12px rgba(30, 112, 200, 0.25);
  }
}

@media (prefers-reduced-motion:reduce) {

  .wave-char {

    animation: none;

    color: var(--near-black);
    opacity: 1;

  }

  .wave-char-blue {

    animation: none;

    color: var(--intel-blue);
    opacity: 1;

  }

}


.svc-wave-headline {
  overflow: visible;
}

.svc-wave-word {
  display: inline-block;
  white-space: nowrap;
}


.svc-wave-em {
  font-style: normal;
}

.svc-wave-char {
  display: inline-block;
  
  color: var(--near-black);
  
}


.svc-wave-char--em {
  
  color: var(--near-black);
}




.svc-wave-headline.svc-wave-run .svc-wave-char:not(.svc-wave-char--em) {
    animation-name: waveReveal, breatheGlow;
    animation-duration: 1s, 6s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
    animation-delay: calc(0.1s + var(--ci) * 0.07s), calc(1.1s + var(--ci) * 0.07s);
}


.svc-wave-headline.svc-wave-run .svc-wave-char--em {
    animation-name: svcWaveRevealBlue, svcBreatheBlue;
    animation-duration: 1s, 6s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
    animation-delay: calc(0.1s + var(--ci) * 0.07s), calc(1.1s + var(--ci) * 0.07s);
}

@keyframes svcWaveRevealBlue {
  0% {
    color: var(--near-black);
    text-shadow: none;
  }

  35% {
    color: var(--intel-blue);
    text-shadow: 0 0 6px rgba(30, 112, 200, .18);
  }

  100% {
    color: var(--intel-blue);
    text-shadow: none;
  }
}

@keyframes svcBreatheBlue {

  0%,
  50% {
    color: var(--intel-blue);
    text-shadow: none;
  }

  75% {
    color: var(--intel-blue);
    text-shadow:
      0 0 4px rgba(30, 112, 200, .20),
      0 0 12px rgba(30, 112, 200, .10);
  }

  87.5% {
    color: var(--intel-blue);
    text-shadow:
      0 0 6px rgba(30, 112, 200, .28),
      0 0 16px rgba(30, 112, 200, .14);
  }

  100% {
    color: var(--intel-blue);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-wave-char {
    animation: none !important;
    color: var(--near-black);
  }

  .svc-wave-char--em {
    animation: none !important;
    color: var(--intel-blue);
  }
}



.gpu-idle,
.gpu-idle * {
  animation-play-state: paused !important;
}

body.is-scrolling .wave-headline.wave-run .wave-char {
  animation-play-state: running, running, paused;
}

body.is-scrolling .wave-headline.wave-run .wave-char-blue {
  animation-play-state: running, running, paused;
}

body.is-scrolling .svc-wave-headline.svc-wave-run .svc-wave-char:not(.svc-wave-char--em) {
  animation-play-state: running, paused;
}

body.is-scrolling .svc-wave-headline.svc-wave-run .svc-wave-char--em {
  animation-play-state: running, paused;
}


#about, #services, #products, .vhandl-way-section {
  content-visibility: auto;
}

/* Per-section contain-intrinsic-size, measured via forced content-visibility:visible
   + getBoundingClientRect at a 1280px desktop viewport (see PR for methodology).
   Replaces one shared 1000px placeholder that didn't match any of these sections'
   actual heights, causing layout to grow/shrink underneath in-flight scrolls. */

#about {
  /* Vestigial now that #about is forced to content-visibility:visible below
     (all viewports, not just mobile — see that rule for why) — visible mode
     never consults this value. Left in place, unused, in case
     content-visibility:auto is ever reinstated here and this placeholder
     needs to exist again; if so, re-measure rather than trusting this
     number, since it was already shown to drift out of date. */
  contain-intrinsic-size: 1680px;
}

/* #about was found to render at a stale/incorrect height under
   content-visibility:auto even while on-screen (measured live: 1896px
   rendered vs. 1601px true content height — a 295px phantom gap between
   "Founding Philosophy" and "Our Services" below it). This is the same
   skip/unskip layout-shift bug already diagnosed and fixed for mobile
   further down this file (see that comment for the full mechanism) —
   correcting the contain-intrinsic-size number alone was tested and only
   partially closes the gap (1896px -> 1817px, not 1601px), confirming a
   placeholder-value fix isn't sufficient here, same conclusion the mobile
   fix already reached. Extending that same fix to all viewports instead
   of gating it to max-width:767px removes the bug class entirely rather
   than leaving desktop on the stale behavior. */
#about {
  content-visibility: visible;
}

#services {
  /* Real height ~83px. This element is only the "OUR SERVICES" eyebrow +
     heading - the carousel itself lives in the sibling .carousel-outer div,
     which is not covered by this rule. Text-wrap dependent; revisit if the
     heading copy changes length. */
  contain-intrinsic-size: 90px;
}

@media (max-width: 767px), (max-height: 499px) {
  /* On mobile the real height (~55px, one-line heading at the smaller
     mobile font-size set elsewhere) doesn't match the 90px placeholder
     above, which was measured at a 1280px desktop viewport. On a fresh
     load, #services (positioned right at the top of the page) can still be
     in content-visibility's "skipped" render state for its first paint —
     verified directly: immediately after a hard navigate, before any
     scroll, it measures exactly 90px (the placeholder), not its real
     ~55px — and un-skips (snapping to the real height) once the browser
     re-evaluates relevance, shortly after. #services is only ~55-90px tall
     and sits at the very top of the page, so content-visibility's
     skip-rendering optimization (meant for far off-screen content) buys
     essentially nothing here — disabling it for this element only, on
     mobile only, removes the whole class of skip/unskip layout-shift bugs
     at the source instead of trying to keep chasing an exact placeholder
     number. This alone turned out to be necessary but not sufficient — see
     #about below, which has the same problem at a much larger scale.
     Desktop and every other content-visibility:auto section are
     unaffected. */
  #services {
    content-visibility: visible;
  }

  /* #about used to get this same treatment only at this breakpoint — it's
     now forced to content-visibility:visible unconditionally (see the rule
     right after #about's contain-intrinsic-size above), since the same
     skip/unskip layout-shift bug documented here for mobile turned out to
     also affect desktop. Nothing left to do for #about at this
     breakpoint specifically. */
}

#products {
  /* Real height ~754-762px at 1280px desktop viewport, measured via forced
     content-visibility:visible + getBoundingClientRect after adding the
     Sahith client-showcase block (was 300px for eyebrow+heading+intro only,
     before any showcase content existed). Will need revisiting again once
     Rainer/C Fresh/Cocovik states and switching logic land. */
  contain-intrinsic-size: 770px;
}

.vhandl-way-section {
  /* Vestigial now that this section is forced to content-visibility:visible
     below, same reasoning as #about above — visible mode never consults
     this value. Left in place, unused, in case content-visibility:auto is
     ever reinstated here and this placeholder needs to exist again; if so,
     re-measure rather than trusting this number (contains a dynamic-text
     stepper whose content swaps, so it was always a best-effort estimate). */
  contain-intrinsic-size: 900px;
}

/* Same skip/unskip layout-shift bug as #about above (see that comment for
   the full mechanism): clicking "vHandl Way" in the nav jumps straight to
   this section while it's still in content-visibility:auto's "skipped"
   state, using the placeholder height above rather than its real one — the
   heading then renders flush against the very top of the viewport instead
   of after its own eyebrow + 64px top padding, because the section expands
   to its true height only after the jump already landed. Forcing
   content-visibility:visible removes the skip/unskip step (and its
   layout-shift) entirely, matching how #about was fixed for the identical
   symptom. */
.vhandl-way-section {
  content-visibility: visible;
}

.dcard, .ptcl, .dsvg circle {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.dsvg {
  will-change: transform, filter;
  transform: translateZ(0);
}


.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh !important;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}


    
    #bwb-showcase,
    #bwb-showcase *,
    #bwb-showcase *::before,
    #bwb-showcase *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    #bwb-showcase {
      
      --bwb-accent: #10B981;
      --bwb-accent-light: #D1FAE5;
      --bwb-accent-dark: #059669;
      --bwb-accent-rgb: 16, 185, 129;

      
      --bwb-bg: #F8FAFC;
      --bwb-bg-card: #FFFFFF;
      --bwb-text-primary: #0F172A;
      --bwb-text-secondary: #475569;
      --bwb-text-muted: #64748B;
      --bwb-border: #E2E8F0;
      --bwb-border-light: #F1F5F9;
      --bwb-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
      --bwb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
      --bwb-shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
      --bwb-shadow-xl: 0 20px 50px -12px rgba(0,0,0,0.08);
      --bwb-radius-sm: 8px;
      --bwb-radius-md: 12px;
      --bwb-radius-lg: 16px;
      --bwb-radius-xl: 20px;
      --bwb-radius-full: 9999px;
      --bwb-font-heading: 'Inter', -apple-system, sans-serif;
      --bwb-font-body: 'Nunito Sans', -apple-system, sans-serif;
      --bwb-transition-fast: 150ms ease;
      --bwb-transition-base: 300ms ease;
      --bwb-transition-slow: 500ms ease;
      --bwb-transition-theme: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }


    #bwb-showcase {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: var(--bwb-font-body);
      background: transparent;
      color: var(--bwb-text-primary);
      line-height: 1.6;
      overflow-x: clip;
      position: relative;
    }

    
    .bwb-embed-wrap {
      border-radius: 0;
      overflow: visible;
      border: none;
      width: 1320px;
      max-width: 92vw;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 0;
    }

    
    @media (max-width: 1024px) {
      .bwb-embed-wrap {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        margin-left: 0;
        transform: none;
      }
    }



    
    #bwb-showcase .bwb-product-nav {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 0 auto 24px;
      z-index: 5;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--bwb-border);
      border-radius: var(--bwb-radius-xl);
      box-shadow: var(--bwb-shadow-lg);
      padding: 8px 12px;
      max-width: 95%;
      width: max-content;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }


    #bwb-showcase .bwb-product-nav::-webkit-scrollbar {
      display: none;
    }


    #bwb-showcase .bwb-nav-inner {
      display: flex;
      align-items: center;
      gap: 0;
      position: relative;
      min-width: max-content;
    }


    #bwb-showcase .bwb-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      border-radius: var(--bwb-radius-md);
      cursor: pointer;
      transition: background var(--bwb-transition-fast), transform var(--bwb-transition-fast);
      position: relative;
      user-select: none;
      white-space: nowrap;
      flex-shrink: 0;
    }


    #bwb-showcase .bwb-nav-item:hover {
      background: rgba(var(--bwb-accent-rgb), 0.04);
    }


    #bwb-showcase .bwb-nav-item.bwb-active {
      background: rgba(var(--bwb-accent-rgb), 0.06);
    }


    #bwb-showcase .bwb-nav-item::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 40px;
      height: 3px;
      background: var(--bwb-accent);
      border-radius: var(--bwb-radius-full);
      transition: transform var(--bwb-transition-theme), background var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-nav-item.bwb-active::after {
      transform: translateX(-50%) scaleX(1);
    }


    #bwb-showcase .bwb-nav-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--bwb-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--bwb-transition-theme), color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-nav-icon svg {
      width: 22px;
      height: 22px;
    }

    #bwb-showcase .bwb-nav-icon--img {
      width: auto;
      min-width: 40px;
      padding: 4px 6px;
      background: #fff !important;
    }

    #bwb-showcase .bwb-nav-icon .bwb-logo-img {
      width: auto;
      height: 28px;
      max-width: 72px;
      object-fit: contain;
      display: block;
    }


    #bwb-showcase .bwb-nav-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }


    #bwb-showcase .bwb-nav-product-name {
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 13px;
      color: var(--bwb-text-primary);
      line-height: 1.2;
    }


    #bwb-showcase .bwb-nav-industry {
      font-size: 11px;
      color: var(--bwb-text-muted);
      line-height: 1.2;
      font-weight: 500;
    }


    #bwb-showcase .bwb-nav-separator {
      width: 1px;
      height: 32px;
      background: var(--bwb-border);
      flex-shrink: 0;
      margin: 0 2px;
    }


    
    #bwb-showcase .bwb-hero {
      text-align: center;
      padding: 8px 24px 16px;
      max-width: 800px;
      margin: 0 auto;
    }


    #bwb-showcase .bwb-hero-label {
      font-family: var(--bwb-font-heading);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--intel-blue);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }


    #bwb-showcase .bwb-hero-label::before,
    #bwb-showcase .bwb-hero-label::after {
      content: '';
      width: 28px;
      height: 1.5px;
      background: var(--intel-blue);
      opacity: 0.4;
    }


    #bwb-showcase .bwb-hero-title {
      font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', sans-serif;
      font-size: 38px;
      font-weight: 800;
      line-height: 1.1;
      color: #0B132B;
      margin-bottom: 16px;
      letter-spacing: -0.025em;
    }


    #bwb-showcase .bwb-hero-highlight {
      color: var(--bwb-accent);
      transition: color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-hero-subtitle {
      font-size: 15px;
      line-height: 1.625;
      color: #64748b;
      max-width: 42rem;
      margin: 0.5rem auto 0;
      font-weight: 500;
    }


    
    #bwb-showcase .bwb-content-transition {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }


    #bwb-showcase .bwb-content-transition.bwb-fade-out {
      opacity: 0;
      transform: translateY(12px);
    }


    
    #bwb-showcase .bwb-content-grid {
      display: grid;
      grid-template-columns: 320px 1fr 320px;
      gap: 24px;
      max-width: min(1320px, 100%);
      margin: 0 auto;
      padding: 24px 24px 48px;
      align-items: stretch;
      height: 708px;
      box-sizing: border-box;
    }


    
    #bwb-showcase .bwb-solution-card {
      background: var(--bwb-bg-card);
      border-radius: var(--bwb-radius-lg);
      border: 1px solid var(--bwb-border);
      box-shadow: var(--bwb-shadow-sm);
      padding: 16px 20px;
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }


    #bwb-showcase .bwb-product-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }


    #bwb-showcase .bwb-product-logo {
      width: 40px;
      height: 40px;
      border-radius: var(--bwb-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-product-logo svg {
      width: 20px;
      height: 20px;
    }

    #bwb-showcase .bwb-product-logo--img {
      width: auto;
      min-width: 40px;
      height: 40px;
      padding: 4px 8px;
      background: #fff !important;
    }

    #bwb-showcase .bwb-product-logo .bwb-logo-img {
      width: auto;
      height: 32px;
      max-width: 120px;
      object-fit: contain;
      display: block;
    }


    #bwb-showcase .bwb-product-info .bwb-product-name {
      font-family: var(--bwb-font-heading);
      font-weight: 800;
      font-size: 20px;
      color: var(--bwb-text-primary);
      line-height: 1.2;
    }


    #bwb-showcase .bwb-industry-badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: var(--bwb-radius-full);
      margin-top: 6px;
      transition: background var(--bwb-transition-theme), color var(--bwb-transition-theme);
      background: var(--bwb-accent-light);
      color: var(--bwb-accent);
    }


    
    #bwb-showcase .bwb-section-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 16px;
      color: var(--bwb-accent);
      margin-bottom: 16px;
      transition: color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-section-heading svg {
      width: 14px;
      height: 14px;
    }


    #bwb-showcase .bwb-solution-item {
      margin-bottom: 16px;
    }


    #bwb-showcase .bwb-solution-title {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 15px;
      color: var(--bwb-text-primary);
      margin-bottom: 6px;
      line-height: 1.3;
    }


    #bwb-showcase .bwb-solution-title .bwb-check-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: var(--bwb-accent);
      margin-top: 1px;
      transition: color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-solution-desc {
      font-size: 14px;
      color: var(--bwb-text-secondary);
      line-height: 1.5;
      padding-left: 24px;
    }


    #bwb-showcase .bwb-divider {
      height: 1px;
      background: var(--bwb-border-light);
      margin: auto 0;
    }


    
    #bwb-showcase .bwb-benefits-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }


    #bwb-showcase .bwb-benefit-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--bwb-font-heading);
      font-weight: 600;
      font-size: 14px;
      color: var(--bwb-text-primary);
    }


    #bwb-showcase .bwb-benefit-item .bwb-check-icon {
      width: 16px;
      height: 16px;
      color: var(--bwb-accent);
      flex-shrink: 0;
      transition: color var(--bwb-transition-theme);
    }


    
    #bwb-showcase .bwb-cta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      background: var(--bwb-accent);
      color: #fff;
      border: none;
      border-radius: var(--bwb-radius-sm);
      font-family: var(--bwb-font-heading);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      margin-top: auto;
      transition: background var(--bwb-transition-theme), transform var(--bwb-transition-fast), box-shadow var(--bwb-transition-fast);
      box-shadow: 0 2px 8px rgba(var(--bwb-accent-rgb), 0.3);
    }


    #bwb-showcase .bwb-cta-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(var(--bwb-accent-rgb), 0.35);
    }


    #bwb-showcase .bwb-cta-button svg {
      width: 15px;
      height: 15px;
    }
    
    #bwb-showcase .bwb-solution-card.bwb-text-scale-md .bwb-solution-title { font-size: 14px; margin-bottom: 4px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-md .bwb-solution-desc { font-size: 13px; line-height: 1.4; padding-left: 22px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-md .bwb-solution-item { margin-bottom: 12px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-md .bwb-benefits-list { gap: 8px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-md .bwb-benefit-item { font-size: 13px; }

    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-product-name { font-size: 18px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-section-heading { font-size: 14px; margin-bottom: 12px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-solution-title { font-size: 13px; margin-bottom: 4px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-solution-desc { font-size: 12px; line-height: 1.35; padding-left: 20px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-solution-item { margin-bottom: 10px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-benefits-list { gap: 6px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-benefit-item { font-size: 12px; }
    #bwb-showcase .bwb-solution-card.bwb-text-scale-sm .bwb-cta-button { font-size: 13px; padding: 10px 16px; }


    
    #bwb-showcase .bwb-workflow-panel {
      background: var(--bwb-bg-card);
      border-radius: var(--bwb-radius-lg);
      border: 1px solid var(--bwb-border);
      box-shadow: var(--bwb-shadow-sm);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      position: relative;
      overflow: hidden;
      height: 100%;
    }


    
    #bwb-showcase .bwb-workflow-steps {
      flex: 1;
      padding: 0;
      overflow: hidden;
      position: relative;
      display: block; 
    }



    #bwb-showcase .bwb-workflow-step {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 6px 0;
      opacity: 0;
      transform: translateY(15px);
      animation: bwb-stepFadeIn 0.45s ease forwards;
    }


    #bwb-showcase .bwb-workflow-step:nth-child(1) { animation-delay: 0.05s; }

    #bwb-showcase .bwb-workflow-step:nth-child(2) { animation-delay: 0.12s; }

    #bwb-showcase .bwb-workflow-step:nth-child(3) { animation-delay: 0.19s; }

    #bwb-showcase .bwb-workflow-step:nth-child(4) { animation-delay: 0.26s; }

    #bwb-showcase .bwb-workflow-step:nth-child(5) { animation-delay: 0.33s; }

    #bwb-showcase .bwb-workflow-step:nth-child(6) { animation-delay: 0.40s; }

    #bwb-showcase .bwb-workflow-step:nth-child(7) { animation-delay: 0.47s; }


    @keyframes bwb-stepFadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #bwb-showcase .bwb-step-icon-wrap {
      width: 36px;
      height: 36px;
      border-radius: var(--bwb-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      transition: background var(--bwb-transition-theme), box-shadow var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-step-icon-wrap svg {
      width: 18px;
      height: 18px;
    }


    #bwb-showcase .bwb-step-content {
      flex: 1;
    }


    #bwb-showcase .bwb-step-label {
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 13px;
      color: var(--bwb-text-primary);
      line-height: 1.3;
    }


    #bwb-showcase .bwb-step-sublabel {
      font-size: 11px;
      color: var(--bwb-text-muted);
      font-weight: 500;
      line-height: 1.3;
    }


    #bwb-showcase .bwb-step-badge {
      width: 24px;
      height: 24px;
      border-radius: var(--bwb-radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 10px;
      color: #fff;
      flex-shrink: 0;
      transition: background var(--bwb-transition-theme);
      background: var(--bwb-accent);
    }


    
    #bwb-showcase .bwb-workflow-connector {
      width: 2px;
      flex: 1;
      min-height: 10px;
      background: linear-gradient(to bottom, var(--bwb-accent-light), rgba(var(--bwb-accent-rgb), 0.15));
      margin: 0 auto;
      border-radius: var(--bwb-radius-full);
      position: relative;
      opacity: 0;
      animation: bwb-connectorFadeIn 0.3s ease forwards;
      transition: background var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-workflow-connector::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--bwb-accent);
      opacity: 0.5;
      transition: border-color var(--bwb-transition-theme);
    }


    @keyframes bwb-connectorFadeIn {
      to { opacity: 1; }
    }

    
    #bwb-showcase .bwb-step-color-0 { background: #DBEAFE; color: #2563EB; }

    #bwb-showcase .bwb-step-color-1 { background: #D1FAE5; color: #059669; }

    #bwb-showcase .bwb-step-color-2 { background: #E0E7FF; color: #4F46E5; }

    #bwb-showcase .bwb-step-color-3 { background: #FEF3C7; color: #D97706; }

    #bwb-showcase .bwb-step-color-4 { background: #FCE7F3; color: #DB2777; }

    #bwb-showcase .bwb-step-color-5 { background: #FFEDD5; color: #EA580C; }

    #bwb-showcase .bwb-step-color-6 { background: #F3E8FF; color: #7C3AED; }


    
    #bwb-showcase .bwb-right-panel {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      gap: 16px;
      background: var(--bwb-bg-card);
      border-radius: var(--bwb-radius-lg);
      border: 1px solid var(--bwb-border);
      box-shadow: var(--bwb-shadow-sm);
      padding: 16px 24px;
      position: relative;
      overflow: hidden;
      height: 100%;
    }


    #bwb-showcase .bwb-modules-card,
    #bwb-showcase .bwb-results-card {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
    }


    #bwb-showcase .bwb-panel-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--bwb-font-heading);
      font-weight: 800;
      font-size: 16px;
      color: var(--bwb-text-primary);
      margin-bottom: 16px;
    }


    #bwb-showcase .bwb-panel-heading svg {
      width: 16px;
      height: 16px;
      color: var(--bwb-accent);
      transition: color var(--bwb-transition-theme);
    }


    
    #bwb-showcase .bwb-modules-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }


    #bwb-showcase .bwb-module-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 12px 8px;
      border-radius: var(--bwb-radius-md);
      border: 1px solid var(--bwb-border-light);
      transition: border-color var(--bwb-transition-fast), box-shadow var(--bwb-transition-fast), transform var(--bwb-transition-fast);
      cursor: pointer;
      opacity: 0;
      animation: bwb-moduleFadeIn 0.4s ease forwards;
    }


    #bwb-showcase .bwb-module-item:nth-child(1) { animation-delay: 0.1s; }

    #bwb-showcase .bwb-module-item:nth-child(2) { animation-delay: 0.15s; }

    #bwb-showcase .bwb-module-item:nth-child(3) { animation-delay: 0.2s; }

    #bwb-showcase .bwb-module-item:nth-child(4) { animation-delay: 0.25s; }

    #bwb-showcase .bwb-module-item:nth-child(5) { animation-delay: 0.3s; }

    #bwb-showcase .bwb-module-item:nth-child(6) { animation-delay: 0.35s; }


    @keyframes bwb-moduleFadeIn {
      to {
        opacity: 1;
      }
    }

    #bwb-showcase .bwb-module-item:hover {
      border-color: rgba(var(--bwb-accent-rgb), 0.3);
      box-shadow: 0 2px 8px rgba(var(--bwb-accent-rgb), 0.08);
      transform: translateY(-2px);
    }


    #bwb-showcase .bwb-module-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bwb-accent);
      transition: color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-module-icon svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.8;
    }


    #bwb-showcase .bwb-module-name {
      font-family: var(--bwb-font-heading);
      font-weight: 600;
      font-size: 14px;
      color: var(--bwb-text-primary);
      line-height: 1.3;
    }


    
    #bwb-showcase .bwb-results-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }


    #bwb-showcase .bwb-result-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: bwb-resultFadeIn 0.4s ease forwards;
    }


    #bwb-showcase .bwb-result-item:nth-child(1) { animation-delay: 0.15s; }

    #bwb-showcase .bwb-result-item:nth-child(2) { animation-delay: 0.25s; }

    #bwb-showcase .bwb-result-item:nth-child(3) { animation-delay: 0.35s; }


    @keyframes bwb-resultFadeIn {
      to { opacity: 1; }
    }

    #bwb-showcase .bwb-result-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--bwb-radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--bwb-accent-light);
      color: var(--bwb-accent);
      transition: background var(--bwb-transition-theme), color var(--bwb-transition-theme);
    }


    #bwb-showcase .bwb-result-icon svg {
      width: 16px;
      height: 16px;
    }


    #bwb-showcase .bwb-result-content {
      flex: 1;
    }


    #bwb-showcase .bwb-result-title {
      font-family: var(--bwb-font-heading);
      font-weight: 700;
      font-size: 15px;
      color: var(--bwb-text-primary);
      line-height: 1.3;
      margin-bottom: 4px;
    }


    #bwb-showcase .bwb-result-desc {
      font-size: 14px;
      color: var(--bwb-text-muted);
      line-height: 1.5;
    }

    
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-module-name { font-size: 13px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-result-title { font-size: 14px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-result-desc { font-size: 13px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-panel-heading { font-size: 15px; margin-bottom: 14px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-module-item { padding: 10px 6px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-md .bwb-results-list { gap: 14px; }
    
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-module-name { font-size: 11px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-result-title { font-size: 12px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-result-desc { font-size: 11px; line-height: 1.4; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-panel-heading { font-size: 14px; margin-bottom: 12px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-modules-grid { gap: 10px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-module-item { padding: 8px 6px; gap: 6px; }
    #bwb-showcase .bwb-right-panel.bwb-text-scale-sm .bwb-results-list { gap: 12px; }


    
    @keyframes bwb-fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bwb-fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    #bwb-showcase .bwb-animate-in {
      animation: bwb-fadeInUp 0.5s ease forwards;
    }


    
    @media (prefers-reduced-motion: reduce) {

      #bwb-showcase *,
    #bwb-showcase *::before,
    #bwb-showcase *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

    
}


    
    @media (max-width: 1200px) {

      #bwb-showcase .bwb-content-grid {
        grid-template-columns: 280px 1fr 280px;
        gap: 16px;
      }

    
}


    @media (max-width: 1024px) {


      #bwb-showcase .bwb-content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        height: auto;
      }


      #bwb-showcase .bwb-solution-card,
    #bwb-showcase .bwb-workflow-panel,
    #bwb-showcase .bwb-right-panel {
        height: auto;
        overflow-y: visible;
      }


      #bwb-showcase .bwb-workflow-panel {
        order: -1;
        grid-column: 1 / -1;
      }


      #bwb-showcase .bwb-cinematic-viewport,
      #bwb-showcase .bwb-fashion-viewport,
      #bwb-showcase .bwb-smart-viewport,
      #bwb-showcase .bwb-apparel-viewport,
      #bwb-showcase .bwb-digital-viewport,
      #bwb-showcase .bwb-erp-viewport {
        aspect-ratio: 7 / 9;
        height: auto;
        min-height: 0;
        max-height: 640px;
      }


      
      #bwb-showcase .bwb-product-nav {
        justify-content: flex-start;
      }

    
}


    @media (max-width: 768px) {

      #bwb-showcase .bwb-product-nav {
        position: sticky;
        bottom: 8px;
        top: auto;
        left: 8px;
        right: 8px;
        transform: none;
        border-radius: var(--bwb-radius-lg);
        padding: 6px 8px;
        justify-content: flex-start;
        width: auto;
        max-width: calc(100% - 16px);
      }


      #bwb-showcase .bwb-nav-item {
        padding: 8px 12px;
      }


      #bwb-showcase .bwb-nav-text .bwb-nav-industry {
        display: none;
      }


      #bwb-showcase .bwb-hero {
        padding: 16px 16px 24px;
      }


      #bwb-showcase .bwb-hero-title {
        font-size: 26px;
        line-height: 1.2;
      }


      #bwb-showcase .bwb-hero-subtitle {
        font-size: 15px;
        line-height: 1.625;
      }


      #bwb-showcase .bwb-content-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 90px;
        height: auto;
      }


      #bwb-showcase .bwb-workflow-panel {
        order: 0;
        grid-column: auto;
      }


      #bwb-showcase .bwb-solution-card,
    #bwb-showcase .bwb-right-panel {
        position: relative;
      }

    
}


    @media (max-width: 480px) {

      #bwb-showcase .bwb-nav-icon {
        width: 32px;
        height: 32px;
      }


      #bwb-showcase .bwb-nav-icon svg {
        width: 18px;
        height: 18px;
      }


      #bwb-showcase .bwb-nav-product-name {
        font-size: 11px;
      }


      #bwb-showcase .bwb-nav-separator {
        margin: 0;
      }

    
}


    
    #bwb-showcase .bwb-visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

  



#bwb-showcase .bwb-story-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  opacity: 0;
}


#bwb-showcase .bwb-story-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


#bwb-showcase .bwb-story-icon-wrap svg {
  width: 24px;
  height: 24px;
}


#bwb-showcase .bwb-story-node:hover .bwb-story-icon-wrap {
  transform: scale(1.1);
}


#bwb-showcase .bwb-story-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bwb-text-color);
  text-align: center;
  white-space: nowrap;
  background: white;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}



    #bwb-showcase .bwb-cinematic-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #0f172a;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-cinematic-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-cinematicPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-scene-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    #bwb-showcase .bwb-scene-label {
      position: absolute;
      top: 16px;
      left: 16px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      z-index: 2;
      pointer-events: none;
    }


    @keyframes bwb-cinematicPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    #bwb-showcase .bwb-wave1 { animation: bwb-waveMove 3s ease-in-out infinite alternate; }

    #bwb-showcase .bwb-wave2 { animation: bwb-waveMove 4s ease-in-out infinite alternate-reverse; }

    @keyframes bwb-waveMove { 0% { transform: translateX(-16px); } 100% { transform: translateX(16px); } }

    #bwb-showcase .bwb-fishing-boat { animation: bwb-boatRock 4s ease-in-out infinite; transform-origin: 350px 470px; }

    @keyframes bwb-boatRock {
      0%, 100% { transform: rotate(-2deg) translateY(0); }
      50% { transform: rotate(2deg) translateY(-5px); }
    }

    #bwb-showcase .bwb-fishing-net { animation: bwb-netDrop 40s linear infinite; }

    @keyframes bwb-netDrop {
      0%, 5% { transform: translateY(-40px); opacity: 0; }
      10%, 15% { transform: translateY(0); opacity: 1; }
      20%, 100% { transform: translateY(-40px); opacity: 0; }
    }

    #bwb-showcase .bwb-fish-group { animation: bwb-fishSwim 40s linear infinite; }

    @keyframes bwb-fishSwim {
      0% { transform: translateX(60px); opacity: 0; }
      5%, 15% { transform: translateX(0px); opacity: 1; }
      20%, 100% { transform: translateX(-60px); opacity: 0; }
    }

    #bwb-showcase .bwb-factory-crate { animation: bwb-crateSlide 40s linear infinite; }

    @keyframes bwb-crateSlide {
      0%, 20% { transform: translateY(80px); opacity: 0; }
      25%, 35% { transform: translateY(0); opacity: 1; }
      40%, 100% { transform: translateY(-120px); opacity: 0; }
    }

    #bwb-showcase .bwb-scanner-laser { animation: bwb-scanLaser 40s linear infinite; transform-origin: 350px 470px; }

    @keyframes bwb-scanLaser {
      0%, 25% { transform: scaleY(0); opacity: 0; }
      28% { transform: scaleY(1.2); opacity: 0.8; }
      32% { transform: scaleY(1); opacity: 0.5; }
      35%, 100% { transform: scaleY(0); opacity: 0; }
    }

    #bwb-showcase .bwb-quality-badge { animation: bwb-popBadge 40s linear infinite; }

    @keyframes bwb-popBadge {
      0%, 30% { transform: translate(430px, 430px) scale(0); opacity: 0; }
      32%, 40% { transform: translate(430px, 430px) scale(1.2); opacity: 1; }
      41%, 100% { transform: translate(430px, 430px) scale(0); opacity: 0; }
    }

    #bwb-showcase .bwb-cold-door-left { animation: bwb-doorLeft 40s linear infinite; }

    #bwb-showcase .bwb-cold-door-right { animation: bwb-doorRight 40s linear infinite; }

    @keyframes bwb-doorLeft {
      0%, 32% { transform: translateX(0); }
      35%, 40% { transform: translateX(-45px); }
      45%, 100% { transform: translateX(0); }
    }
    @keyframes bwb-doorRight {
      0%, 32% { transform: translateX(0); }
      35%, 40% { transform: translateX(45px); }
      45%, 100% { transform: translateX(0); }
    }

    #bwb-showcase .bwb-frost-particles circle { animation: bwb-frostFall 2s linear infinite; }

    @keyframes bwb-frostFall {
      0% { transform: translateY(-10px); opacity: 0; }
      50% { opacity: 0.8; }
      100% { transform: translateY(20px); opacity: 0; }
    }

    #bwb-showcase .bwb-delivery-truck { animation: bwb-truckDrive 40s linear infinite; }

    @keyframes bwb-truckDrive {
      0%, 40% { transform: translate(100px, 120px) rotate(90deg) translate(-5px, -18px); opacity: 0; }
      42% { transform: translate(100px, 120px) rotate(90deg) translate(-5px, -18px); opacity: 1; }
      44.8% { transform: translate(100px, 300px) rotate(90deg) translate(-5px, -18px); }
      44.81% { transform: translate(100px, 300px) rotate(0deg) translate(-5px, -18px); }
      49.45% { transform: translate(400px, 300px) rotate(0deg) translate(-5px, -18px); }
      49.46% { transform: translate(400px, 300px) rotate(90deg) translate(-5px, -18px); }
      52.87% { transform: translate(400px, 520px) rotate(90deg) translate(-5px, -18px); }
      52.88% { transform: translate(400px, 520px) rotate(0deg) translate(-5px, -18px); }
      56.29% { transform: translate(620px, 520px) rotate(0deg) translate(-5px, -18px); }
      56.30% { transform: translate(620px, 520px) rotate(90deg) translate(-5px, -18px); }
      60%, 100% { transform: translate(620px, 760px) rotate(90deg) translate(-5px, -18px); opacity: 1; }
    }

    #bwb-showcase .bwb-gps-path-glow { animation: bwb-drawPath 40s linear infinite; stroke-dasharray: 1000; stroke-dashoffset: 1000; }

    @keyframes bwb-drawPath {
      0%, 42% { stroke-dashoffset: 1000; }
      60%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-loc-pin { animation: bwb-pinPop 40s linear infinite; opacity: 0; }

    #bwb-showcase .bwb-pin-1 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-pin-2 { animation-delay: 0.6s; }

    #bwb-showcase .bwb-pin-3 { animation-delay: 1.0s; }

    @keyframes bwb-pinPop {
      0%, 42% { transform: scale(0) translate(0, 20px); opacity: 0; }
      45%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
    }

    #bwb-showcase .bwb-customer-arm { animation: bwb-pickFish 40s linear infinite; transform-origin: top left; }

    @keyframes bwb-pickFish {
      0%, 65% { transform: rotate(0deg); }
      70% { transform: rotate(30deg); }
      75%, 100% { transform: rotate(0deg); }
    }

    #bwb-showcase .bwb-pos-laser { animation: bwb-scanProduct 40s linear infinite; }

    @keyframes bwb-scanProduct {
      0%, 72% { opacity: 0; transform: translateY(0); }
      74% { opacity: 1; transform: translateY(-40px); }
      76%, 100% { opacity: 0; transform: translateY(0); }
    }

    #bwb-showcase .bwb-pos-total { animation: bwb-updateTotal 40s linear infinite; }

    @keyframes bwb-updateTotal {
      0%, 75% { opacity: 0; }
      76%, 100% { opacity: 1; }
    }
    
    #bwb-showcase .bwb-dash-card { animation: bwb-cardUp 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-card-1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-card-2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-card-3 { animation-delay: 0.3s; }

    @keyframes bwb-cardUp {
      0%, 82% { opacity: 0; }
      85%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-chart-line { animation: bwb-drawChart 40s linear infinite; stroke-dasharray: 200; stroke-dashoffset: 200; }

    @keyframes bwb-drawChart {
      0%, 85% { stroke-dashoffset: 200; }
      90%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-bar-chart rect { animation: bwb-growBar 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: bottom; }

    #bwb-showcase .bwb-bar-1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-bar-2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-bar-3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-bar-4 { animation-delay: 0.4s; }

    #bwb-showcase .bwb-bar-5 { animation-delay: 0.5s; }

    @keyframes bwb-growBar {
      0%, 85% { transform: scaleY(0); }
      90%, 100% { transform: scaleY(1); }
    }

    #bwb-showcase .bwb-pulse-ring { animation: bwb-pulseAnim 2s ease-out infinite; }

    @keyframes bwb-pulseAnim {
      0% { transform: scale(0.8); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    
    #bwb-showcase .bwb-fashion-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #000;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-fashion-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-fashionPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-f-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-f-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    @keyframes bwb-fashionPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    
    #bwb-showcase .bwb-fashion-sketch { animation: bwb-fDraw 40s linear infinite; stroke-dasharray: 400; stroke-dashoffset: 400; }

    @keyframes bwb-fDraw {
      0%, 5% { stroke-dashoffset: 400; opacity: 1; }
      10%, 100% { stroke-dashoffset: 0; opacity: 1; }
    }
    
    #bwb-showcase .bwb-fashion-dress { animation: bwb-fFadeDress 40s linear infinite; }

    @keyframes bwb-fFadeDress {
      0%, 8% { opacity: 0; }
      12%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-f-pencil { animation: bwb-fDrawMove 40s linear infinite; transform-origin: 0px 0px; }

    @keyframes bwb-fDrawMove {
      0%, 2%   { transform: translate(310px, 210px) rotate(-15deg); opacity: 0; }
      5%       { transform: translate(310px, 210px) rotate(-15deg); opacity: 1; }
      6.5%     { transform: translate(340px, 315px) rotate(35deg); opacity: 1; }
      8%       { transform: translate(370px, 315px) rotate(-35deg); opacity: 1; }
      10%      { transform: translate(385px, 205px) rotate(20deg); opacity: 1; }
      13%, 100% { transform: translate(385px, 205px) rotate(20deg); opacity: 0; }
    }

    #bwb-showcase .bwb-f-fabric-roll { animation: bwb-fRoll 40s linear infinite; transform-origin: 40px 0px; }

    @keyframes bwb-fRoll {
      0%, 4%   { transform: translate(100px,700px) rotate(0deg); opacity: 0; }
      8%, 100% { transform: translate(100px,700px) rotate(360deg); opacity: 1; }
    }

    #bwb-showcase .bwb-f-palette { animation: bwb-fPalette 40s linear infinite; }

    @keyframes bwb-fPalette {
      0%, 13%  { opacity: 0; transform: translate(480px, 670px); }
      16%, 100% { opacity: 1; transform: translate(480px, 660px); }
    }

    #bwb-showcase .bwb-f-approval { animation: bwb-fApprove 40s linear infinite; }

    @keyframes bwb-fApprove {
      0%, 19% { opacity: 0; }
      22%, 100% { opacity: 1; }
    }

    
    #bwb-showcase .bwb-prod-fabric { animation: bwb-prodUnroll 40s linear infinite; }

    @keyframes bwb-prodUnroll {
      0%, 20% { opacity: 0; }
      25%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-prod-cutter { animation: bwb-cutMove 40s linear infinite; }

    @keyframes bwb-cutMove {
      0%, 25% { opacity: 0; transform: translate(140px, 480px); }
      30%, 100% { opacity: 1; transform: translate(300px, 480px); }
    }

    #bwb-showcase .bwb-cutter-laser { animation: bwb-cutLaser 40s linear infinite; }

    @keyframes bwb-cutLaser {
      0%, 25% { opacity: 0; }
      26%, 34% { opacity: 1; }
      35%, 100% { opacity: 0; }
    }

    #bwb-showcase .bwb-cutter-sparkle { animation: bwb-cutSparkle 40s linear infinite; }

    @keyframes bwb-cutSparkle {
      0%, 25% { opacity: 0; transform: scale(1); }
      26%, 34% { opacity: 1; transform: scale(1.5); }
      35%, 100% { opacity: 0; transform: scale(1); }
    }

    #bwb-showcase .bwb-sewing-needle { animation: bwb-sewStitch 0.2s linear infinite; }

    @keyframes bwb-sewStitch {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(15px); }
    }

    #bwb-showcase .bwb-prod-thread { animation: bwb-fDrawThread 40s linear infinite; stroke-dasharray: 600; stroke-dashoffset: 600; }

    @keyframes bwb-fDrawThread {
      0%, 25% { stroke-dashoffset: 600; }
      35%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-prod-garment { animation: bwb-prodGarmentFade 40s linear infinite; }

    @keyframes bwb-prodGarmentFade {
      0%, 33% { opacity: 0; }
      36%, 100% { opacity: 1; }
    }
    
    #bwb-showcase .bwb-quality-tag { animation: bwb-qTag 40s linear infinite; }

    @keyframes bwb-qTag {
      0%, 36% { opacity: 0; }
      38%, 100% { opacity: 1; }
    }

    
    #bwb-showcase .bwb-wh-box { animation: none; opacity: 0; }

    #bwb-showcase .bwb-box1 { animation: bwb-boxSlide1 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-box2 { animation: bwb-boxSlide2 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-box3 { animation: bwb-boxSlide3 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-boxSlide1 {
      0%, 38%   { transform: translate(-90px, 300px); opacity: 0; }
      44%, 100% { transform: translate(110px, 300px); opacity: 1; }
    }
    @keyframes bwb-boxSlide2 {
      0%, 40%   { transform: translate(-90px, 300px); opacity: 0; }
      46%, 100% { transform: translate(300px, 300px); opacity: 1; }
    }
    @keyframes bwb-boxSlide3 {
      0%, 42%   { transform: translate(700px, 460px); opacity: 0; }
      48%, 100% { transform: translate(490px, 460px); opacity: 1; }
    }

    #bwb-showcase .bwb-wh-scan { animation: bwb-wScan 40s linear infinite; }

    @keyframes bwb-wScan {
      0%, 45% { opacity: 0; }
      46% { opacity: 0.6; }
      48% { opacity: 0; }
      50% { opacity: 0.6; }
      52%, 100% { opacity: 0; }
    }

    #bwb-showcase .bwb-robot-eye { animation: bwb-robotBlink 2s linear infinite; }

    @keyframes bwb-robotBlink {
      0%, 90% { opacity: 1; }
      95% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    #bwb-showcase .bwb-wh-robot { animation: bwb-robotMove 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0px 0px; }

    @keyframes bwb-robotMove {
      0%, 44%   { transform: translate(120px, 560px); opacity: 0; }
      50%, 58%  { transform: translate(120px, 560px); opacity: 1; }
      66%, 78%  { transform: translate(20px, 340px); opacity: 1; }
      86%, 100% { transform: translate(120px, 560px); opacity: 1; }
    }

    #bwb-showcase .bwb-wh-robot-arm { animation: bwb-robotArm 40s linear infinite; transform-origin: 90px 26px; }

    @keyframes bwb-robotArm {
      0%, 66%   { transform: rotate(0deg); }
      70%, 74%  { transform: rotate(-25deg); }
      78%, 100% { transform: rotate(0deg); }
    }

    #bwb-showcase .bwb-wh-ui { animation: bwb-wUI 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-wUI {
      0%, 45% { opacity: 0; }
      50%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-wh-swatch { animation: bwb-whSwatch 40s linear infinite; }

    @keyframes bwb-whSwatch {
      0%, 52% { opacity: 0; }
      56%, 100% { opacity: 1; }
    }

    
    #bwb-showcase .bwb-store-light { animation: bwb-sLight 40s linear infinite; }

    @keyframes bwb-sLight {
      0%, 60% { opacity: 0; }
      62%, 100% { opacity: 0.2; }
    }
    
    #bwb-showcase .bwb-rack-clothes { animation: bwb-rClothes 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-rClothes {
      0%, 62% { opacity: 0; }
      66%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-f-customer { animation: bwb-fCust 40s linear infinite; }

    @keyframes bwb-fCust {
      0%, 65% { opacity: 0; }
      68%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-cust-arm { animation: bwb-cArm 40s linear infinite; transform-origin: 50px 50px; }

    @keyframes bwb-cArm {
      0%, 68% { transform: rotate(0deg); }
      70%, 100% { transform: rotate(-30deg); }
    }

    #bwb-showcase .bwb-picked-hanger,
    #bwb-showcase .bwb-picked-cloth { animation: bwb-pCloth 40s linear infinite; }

    @keyframes bwb-pCloth {
      0%, 70% { transform: translate(0, 0); opacity: 1; }
      72%, 100% { transform: translate(-30px, -20px); opacity: 0; }
    }
    
    #bwb-showcase .bwb-f-pos { animation: bwb-posUp 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-posUp {
      0%, 65% { opacity: 0; }
      68%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-pay-card { animation: bwb-payC 40s linear infinite; }

    @keyframes bwb-payC {
      0%, 72% { opacity: 0; }
      74%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-pos-receipt { animation: bwb-pRec 40s linear infinite; }

    @keyframes bwb-pRec {
      0%, 74% { opacity: 0; }
      77%, 100% { opacity: 1; }
    }

    
    #bwb-showcase .bwb-f-dash-main { animation: bwb-fdash 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-fdash {
      0%, 82% { opacity: 0; }
      85%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-f-line-path { animation: bwb-flPath 40s linear infinite; stroke-dasharray: 400; stroke-dashoffset: 400; }

    @keyframes bwb-flPath {
      0%, 85% { stroke-dashoffset: 400; }
      90%, 100% { stroke-dashoffset: 0; }
    }
    
    #bwb-showcase .bwb-f-line-dot { animation: bwb-flDot 40s linear infinite; }

    @keyframes bwb-flDot {
      0%, 89% { opacity: 0; }
      90%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-f-stat-1 { animation: bwb-fS1 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-fS1 {
      0%, 86% { opacity: 0; }
      89%, 100% { opacity: 1; }
    }
    
    #bwb-showcase .bwb-f-stat-2 { animation: bwb-fS2 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-fS2 {
      0%, 88% { opacity: 0; }
      91%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-star { animation: bwb-starPop 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-star:nth-child(1) { animation-delay: 0.1s; }

    #bwb-showcase .bwb-star:nth-child(2) { animation-delay: 0.2s; }

    #bwb-showcase .bwb-star:nth-child(3) { animation-delay: 0.3s; }

    #bwb-showcase .bwb-star:nth-child(4) { animation-delay: 0.4s; }

    #bwb-showcase .bwb-star:nth-child(5) { animation-delay: 0.5s; }

    @keyframes bwb-starPop {
      0%, 90% { transform: scale(0) rotate(-45deg); transform-origin: center; opacity: 0; }
      92%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    
    #bwb-showcase .bwb-smart-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #051024;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-smart-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-smartPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-s-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-s-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    @keyframes bwb-smartPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    
    #bwb-showcase .bwb-laptop-glow { animation: bwb-lGlow 2s infinite alternate; }

    @keyframes bwb-lGlow { 0% { opacity: 0.2; } 100% { opacity: 0.8; } }

    #bwb-showcase .bwb-data-packet { animation: bwb-dPacket 40s linear infinite; }

    @keyframes bwb-dPacket {
      0%, 3%   { transform: translate(-15px, -30px); opacity: 0; }
      5%       { transform: translate(-15px, -30px); opacity: 1; }
      9%       { transform: translate(130px, 225px); opacity: 1; }
      10%, 100% { transform: translate(130px, 225px); opacity: 0; }
    }

    #bwb-showcase .bwb-core-pulse { animation: bwb-cPulse 1s ease-in-out infinite alternate; }

    @keyframes bwb-cPulse { 0% { transform: scale(0.9); opacity: 0.2; } 100% { transform: scale(1.1); opacity: 0.5; } }
    
    #bwb-showcase .bwb-core-glow { animation: bwb-cGlow 40s linear infinite; }

    @keyframes bwb-cGlow {
      0%, 9% { fill: #4682B4; }
      10%, 100% { fill: #00FFFF; }
    }

    #bwb-showcase .bwb-erp-lines { animation: bwb-eLines 40s linear infinite; }

    @keyframes bwb-eLines {
      0%, 10% { stroke-dashoffset: 263; opacity: 0; }
      12%, 100% { stroke-dashoffset: 0; opacity: 1; }
    }

    #bwb-showcase .bwb-dep-status { animation: bwb-dStatus 40s linear infinite; }

    @keyframes bwb-dStatus {
      0%, 12% { fill: #A9A9A9; }
      14%, 100% { fill: #00FF00; }
    }

    
    #bwb-showcase .bwb-sched-bar { animation: schedFill 40s linear infinite; }

    #bwb-showcase .bwb-sched-bar-1 { animation-name: bwb-schedFill1; }

    #bwb-showcase .bwb-sched-bar-2 { animation-name: bwb-schedFill2; }

    #bwb-showcase .bwb-sched-bar-3 { animation-name: bwb-schedFill3; }

    @keyframes bwb-schedFill1 { 0%, 15% { width: 0; } 20%, 100% { width: 14px; } }
    @keyframes bwb-schedFill2 { 0%, 18% { width: 0; } 23%, 100% { width: 10px; } }
    @keyframes bwb-schedFill3 { 0%, 21% { width: 0; } 26%, 100% { width: 12px; } }

    
    #bwb-showcase .bwb-dep-zoom { animation: bwb-depZoom 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0px 0px; }

    @keyframes bwb-depZoom {
      0%, 88%   { transform: translate(180px, 620px) scale(1); }
      94%       { transform: translate(180px, 620px) scale(1.6); }
      100%      { transform: translate(180px, 620px) scale(1.6); }
    }

    
    #bwb-showcase .bwb-belt-rollers circle { animation: bwb-beltRoll 2s linear infinite; }

    @keyframes bwb-beltRoll { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    
    #bwb-showcase .bwb-prod-raw { animation: bwb-prodRawMove 40s linear infinite; }

    @keyframes bwb-prodRawMove {
      0%, 8%   { transform: translateY(0px); opacity: 0; }
      12%, 26% { transform: translateY(214px); opacity: 1; }
      30%, 100% { transform: translateY(214px); opacity: 0; }
    }

    #bwb-showcase .bwb-prod-finished { animation: bwb-prodFinMove 40s linear infinite; }

    @keyframes bwb-prodFinMove {
      0%, 30%  { transform: translateY(214px); opacity: 0; }
      34%, 40% { transform: translateY(214px); opacity: 1; }
      50%      { transform: translateY(380px); opacity: 1; }
      66%, 100% { transform: translateY(380px); opacity: 1; }
    }

    
    #bwb-showcase .bwb-robot-arm-1 { animation: bwb-rArm1 40s linear infinite; transform-origin: 0px 0px; }

    @keyframes bwb-rArm1 {
      0%, 10%   { transform: rotate(-20deg); }
      16%, 28%  { transform: rotate(-142deg); }
      34%, 100% { transform: rotate(-20deg); }
    }

    #bwb-showcase .bwb-robot-arm-2 { animation: bwb-rArm2 40s linear infinite; transform-origin: 0px -95px; }

    @keyframes bwb-rArm2 {
      0%, 10%   { transform: rotate(30deg); }
      16%, 28%  { transform: rotate(110deg); }
      34%, 100% { transform: rotate(30deg); }
    }

    
    #bwb-showcase .bwb-m-sensor-eye { animation: bwb-mSensorEye 1s ease-in-out infinite alternate; }

    @keyframes bwb-mSensorEye { 0% { opacity: 0.5; } 100% { opacity: 1; } }
    #bwb-showcase .bwb-m-sensor-beam { animation: bwb-mSensorBeam 40s linear infinite; }

    @keyframes bwb-mSensorBeam {
      0%, 32%   { opacity: 0.25; }
      36%, 46%  { opacity: 0.9; }
      50%, 100% { opacity: 0.25; }
    }

    #bwb-showcase .bwb-m-gear-1 { animation: bwb-gearSp1 4s linear infinite; }

    @keyframes bwb-gearSp1 { 0% { transform: translate(50px, 50px) rotate(0deg); } 100% { transform: translate(50px, 50px) rotate(360deg); } }

    #bwb-showcase .bwb-m-gear-2 { animation: bwb-gearSp2 4s linear infinite; }

    @keyframes bwb-gearSp2 { 0% { transform: translate(100px, 100px) rotate(0deg) scale(0.8); } 100% { transform: translate(100px, 100px) rotate(-360deg) scale(0.8); } }

    
    #bwb-showcase .bwb-m-indicator-light { animation: bwb-mIndicator 40s linear infinite; }

    @keyframes bwb-mIndicator {
      0%, 44%   { fill: #374151; }
      48%, 58%  { fill: #00FF00; }
      62%, 100% { fill: #374151; }
    }

    
    #bwb-showcase .bwb-m-laser { animation: bwb-mLaser 40s linear infinite; transform-origin: 0px -390px; }

    @keyframes bwb-mLaser {
      0%, 44%   { transform: scaleY(0); opacity: 0; }
      48%, 56%  { transform: scaleY(1); opacity: 0.6; }
      60%, 100% { transform: scaleY(0); opacity: 0; }
    }

    
    #bwb-showcase .bwb-q-scan-line { animation: bwb-qScan 40s linear infinite; }

    @keyframes bwb-qScan {
      0%, 42% { transform: translateY(0px); opacity: 0; }
      45% { transform: translateY(100px); opacity: 1; }
      48%, 100% { transform: translateY(0px); opacity: 0; }
    }

    #bwb-showcase .bwb-q-product { animation: bwb-qProd 40s linear infinite; }

    @keyframes bwb-qProd {
      0%, 42% { transform: translate(-100px, 0); opacity: 0; }
      45%, 52% { transform: translate(20px, 0); opacity: 1; }
      55%, 100% { transform: translate(230px, 0); opacity: 0; }
    }
    
    #bwb-showcase .bwb-q-check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: bwb-qC 40s linear infinite; }

    @keyframes bwb-qC {
      0%, 46% { stroke-dashoffset: 50; }
      48%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-glow-box { animation: bwb-gBox 40s linear infinite; }

    @keyframes bwb-gBox {
      0%, 53% { fill: #D3D3D3; }
      55%, 100% { fill: #00FFFF; }
    }

    #bwb-showcase .bwb-forklift { animation: bwb-forkMove 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-forkMove {
      0%, 48% { transform: translate(560px, 620px); }
      52%, 100% { transform: translate(280px, 620px); }
    }
    
    #bwb-showcase .bwb-fork-box { animation: bwb-fBox 40s linear infinite; }

    @keyframes bwb-fBox {
      0%, 54% { opacity: 0; }
      55%, 100% { opacity: 1; }
    }

    
    #bwb-showcase .bwb-gps-route { animation: bwb-gpsR 40s linear infinite; stroke-dasharray: 1200; stroke-dashoffset: 1200; }

    @keyframes bwb-gpsR {
      0%, 62% { stroke-dashoffset: 1200; }
      75%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-s-truck { animation: bwb-sTr 40s linear infinite; }

    @keyframes bwb-sTr {
      0%, 62% { transform: translate(350px, 0px) rotate(90deg) translate(6px, -24px); opacity: 0; }
      62.1% { transform: translate(350px, 0px) rotate(90deg) translate(6px, -24px); opacity: 1; }
      65.34% { transform: translate(350px, 260px) rotate(90deg) translate(6px, -24px); opacity: 1; }
      65.35% { transform: translate(350px, 260px) rotate(144deg) translate(6px, -24px); opacity: 1; }
      68.84% { transform: translate(130px, 420px) rotate(144deg) translate(6px, -24px); opacity: 1; }
      68.85% { transform: translate(130px, 420px) rotate(90deg) translate(6px, -24px); opacity: 1; }
      75%, 100% { transform: translate(130px, 900px) rotate(90deg) translate(6px, -24px); opacity: 1; }
    }

    #bwb-showcase .bwb-loc-glow { animation: bwb-lGl 40s linear infinite; }

    @keyframes bwb-lGl {
      0%, 65% { opacity: 0; transform: scale(1); }
      67%, 100% { opacity: 1; transform: scale(1.5); }
    }

    #bwb-showcase .bwb-progress-bar { animation: bwb-pBar 40s linear infinite; }

    @keyframes bwb-pBar {
      0%, 62% { width: 40px; fill: #A9A9A9; }
      72%, 100% { width: 220px; fill: #00FF00; }
    }
    
    #bwb-showcase .bwb-status-text { animation: bwb-sTxt 40s linear infinite; }

    @keyframes bwb-sTxt {
      0%, 71% { fill: #A9A9A9; }
      72%, 100% { fill: #00FF00; }
    }

    
    #bwb-showcase .bwb-core-spin { animation: bwb-cSp 20s linear infinite; }

    @keyframes bwb-cSp { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    #bwb-showcase .bwb-core-spin-rev { animation: bwb-cSpR 15s linear infinite; }

    @keyframes bwb-cSpR { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

    #bwb-showcase .bwb-core-pulse-final { animation: bwb-cPf 2s ease-in-out infinite alternate; }

    @keyframes bwb-cPf { 0% { transform: scale(0.8); opacity: 0.1; } 100% { transform: scale(1.2); opacity: 0.4; } }

    #bwb-showcase .bwb-core-glow-final { animation: bwb-cGf 40s linear infinite; }

    @keyframes bwb-cGf {
      0%, 82% { fill: #4682B4; transform: scale(1); }
      85%, 100% { fill: #00FFFF; transform: scale(1.5); }
    }

    #bwb-showcase .bwb-network-nodes line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: bwb-nNl 40s linear infinite; }

    @keyframes bwb-nNl {
      0%, 85% { stroke-dashoffset: 200; }
      90%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-network-nodes circle { animation: bwb-nNc 40s linear infinite; }

    @keyframes bwb-nNc {
      0%, 89% { opacity: 0; transform: scale(0); }
      91%, 100% { opacity: 1; transform: scale(1); }
    }

    #bwb-showcase .bwb-kpi-panel { animation: bwb-kpiP 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-kpi-1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-kpi-2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-kpi-3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-kpi-4 { animation-delay: 0.4s; }

    @keyframes bwb-kpiP {
      0%, 85% { opacity: 0; }
      88%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-kpi-chart { stroke-dasharray: 200; stroke-dashoffset: 200; animation: bwb-kC 40s linear infinite; }

    @keyframes bwb-kC {
      0%, 88% { stroke-dashoffset: 200; }
      92%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-kpi-bar { animation: bwb-kBar 40s ease-out infinite; transform-origin: bottom; }

    #bwb-showcase .bwb-b1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-b2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-b3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-b4 { animation-delay: 0.4s; }

    @keyframes bwb-kBar {
      0%, 88% { transform: scaleY(0); }
      93%, 100% { transform: scaleY(1); }
    }

    #bwb-showcase .bwb-status-pulse { animation: bwb-sPl 1.5s ease-in-out infinite alternate; }

    @keyframes bwb-sPl { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 1; transform: scale(1.5); } }
    
    #bwb-showcase .bwb-apparel-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #FDF5E6;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-apparel-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-apparelPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-a-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-a-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    @keyframes bwb-apparelPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    
    #bwb-showcase .bwb-a-truck { animation: bwb-aTrk 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 100px 47px; }

    @keyframes bwb-aTrk {
      0%, 3%   { transform: translate(50px, -150px); opacity: 0; }
      10%, 20% { transform: translate(50px, 300px); opacity: 1; }
      28%, 100% { transform: translate(50px, -150px); opacity: 0; }
    }

    #bwb-showcase .bwb-a-rollers circle { animation: bwb-aRolls 2s linear infinite; transform-origin: center; }

    @keyframes bwb-aRolls { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    
    #bwb-showcase .bwb-a-fab-roll { animation: bwb-aFRoll 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: 0px 0px; }

    @keyframes bwb-aFRoll {
      0%, 18%   { transform: translate(140px, 340px) rotate(0deg); opacity: 0; }
      24%, 30%  { transform: translate(350px, 396px) rotate(0deg); opacity: 1; }
      70%       { transform: translate(350px, 396px) rotate(360deg); opacity: 1; }
      85%, 100% { transform: translate(700px, 396px) rotate(360deg); opacity: 1; }
    }

    #bwb-showcase .bwb-a-fab-tail { animation: bwb-aFTail 40s linear infinite; }

    @keyframes bwb-aFTail {
      0%, 24%   { opacity: 0; }
      28%, 80%  { opacity: 1; }
      88%, 100% { opacity: 0; }
    }

    
    #bwb-showcase .bwb-a-scanner { animation: bwb-aScan 40s ease-in-out infinite; }

    @keyframes bwb-aScan {
      0%, 32%   { transform: translate(200px, 384px); opacity: 0; }
      36%       { transform: translate(200px, 384px); opacity: 1; }
      60%       { transform: translate(500px, 384px); opacity: 1; }
      65%, 100% { transform: translate(500px, 384px); opacity: 0; }
    }

    #bwb-showcase .bwb-a-scan-beam { animation: bwb-aBeam 1.5s ease-in-out infinite alternate; }

    @keyframes bwb-aBeam { 0% { opacity: 0.14; } 100% { opacity: 0.42; } }
    #bwb-showcase .bwb-a-scan-light { animation: bwb-aScanLight 0.8s ease-in-out infinite alternate; }

    @keyframes bwb-aScanLight { 0% { opacity: 0.4; } 100% { opacity: 1; } }

    
    #bwb-showcase .bwb-a-defect { opacity: 0; animation: bwb-aDefect 40s linear infinite; }

    #bwb-showcase .bwb-a-defect-1 { animation-delay: 0s; }

    #bwb-showcase .bwb-a-defect-2 { animation-delay: 0s; animation-name: bwb-aDefect2; }

    @keyframes bwb-aDefect {
      0%, 39% { opacity: 0; }
      41%, 45% { opacity: 1; }
      47%, 100% { opacity: 0; }
    }
    @keyframes bwb-aDefect2 {
      0%, 49% { opacity: 0; }
      51%, 55% { opacity: 1; }
      57%, 100% { opacity: 0; }
    }

    
    #bwb-showcase .bwb-a-qual-badge { animation: bwb-aQBadge 40s linear infinite; }

    @keyframes bwb-aQBadge {
      0%, 62%   { transform: translate(350px, 396px) scale(0); opacity: 0; }
      66%, 82%  { transform: translate(350px, 396px) scale(1); opacity: 1; }
      88%, 100% { transform: translate(350px, 396px) scale(0); opacity: 0; }
    }

    
    #bwb-showcase .bwb-long-fabric { animation: bwb-lFab 40s linear infinite; }

    @keyframes bwb-lFab {
      0%, 20% { transform: translateY(150px); opacity: 0; }
      25%, 100% { transform: translateY(0); opacity: 1; }
    }

    #bwb-showcase .bwb-a-plan-dash { animation: bwb-aPlanD 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aPlanD {
      0%, 20% { transform: translate(0, -40px); opacity: 0; }
      25%, 100% { transform: translate(0, 0px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-plan-bar { animation: bwb-aPBar 40s linear infinite; transform-origin: left; }

    #bwb-showcase .bwb-a-plan-dash .bwb-b1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-a-plan-dash .bwb-b2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-a-plan-dash .bwb-b3 { animation-delay: 0.3s; }

    @keyframes bwb-aPBar {
      0%, 22% { transform: scaleX(0); }
      28%, 100% { transform: scaleX(1); }
    }

    #bwb-showcase .bwb-a-pattern { stroke-dasharray: 200; stroke-dashoffset: 200; animation: bwb-aPat 40s linear infinite; }

    @keyframes bwb-aPat {
      0%, 25% { stroke-dashoffset: 200; }
      30%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-a-cutter { animation: bwb-aCut 40s linear infinite; }

    @keyframes bwb-aCut {
      0%, 28% { transform: translate(100px, 368px); }
      32%, 100% { transform: translate(340px, 368px); }
    }

    #bwb-showcase .bwb-a-blade { animation: bwb-aBld 0.2s linear infinite alternate; }

    @keyframes bwb-aBld { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }

    #bwb-showcase .bwb-a-pieces path:nth-child(1) { animation: bwb-aP1 40s linear infinite; }

    @keyframes bwb-aP1 { 0%, 32% { transform: translate(0, 0); } 34%, 100% { transform: translate(-10px, -10px); } }
    #bwb-showcase .bwb-a-pieces path:nth-child(2) { animation: bwb-aP2 40s linear infinite; }

    @keyframes bwb-aP2 { 0%, 32% { transform: translate(0, 0); } 34%, 100% { transform: translate(10px, -10px); } }

    #bwb-showcase .bwb-a-needle { animation: bwb-aNdl 0.1s linear infinite alternate; }

    @keyframes bwb-aNdl { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }

    #bwb-showcase .bwb-a-thread { stroke-dasharray: 200; stroke-dashoffset: 200; animation: bwb-aThr 40s linear infinite; }

    @keyframes bwb-aThr {
      0%, 35% { stroke-dashoffset: 200; }
      40%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-a-garment-form { animation: bwb-aGForm 40s linear infinite; }

    @keyframes bwb-aGForm {
      0%, 38% { opacity: 0; transform: translateY(20px); }
      40%, 100% { opacity: 1; transform: translateY(0); }
    }

    
    #bwb-showcase .bwb-a-qual-garment { animation: bwb-aQGarm 40s linear infinite; transform-origin: 70px 50px; }

    @keyframes bwb-aQGarm {
      0%, 42% { transform: translate(0, -100px); opacity: 0; }
      45%, 100% { transform: translate(0, 60px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-q-laser { animation: bwb-aQLas 40s linear infinite; }

    @keyframes bwb-aQLas {
      0%, 46% { transform: translateY(0); opacity: 0; }
      48%, 52% { transform: translateY(150px); opacity: 1; }
      54%, 100% { transform: translateY(0); opacity: 0; }
    }

    #bwb-showcase .bwb-a-q-badge { animation: bwb-aQB 40s linear infinite; }

    @keyframes bwb-aQB {
      0%, 53% { transform: translate(120px, 200px) scale(0); opacity: 0; }
      55%, 100% { transform: translate(120px, 200px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-a-folded { animation: bwb-aFold 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aFold {
      0%, 55% { transform: translate(0, -60px); opacity: 0; }
      58%, 100% { transform: translate(0, 0); opacity: 1; }
    }

    #bwb-showcase .bwb-a-fold-top { animation: bwb-aFTp 40s linear infinite; }

    @keyframes bwb-aFTp {
      0%, 57% { opacity: 0; transform: translateY(-10px); }
      58%, 100% { opacity: 1; transform: translateY(0); }
    }

    #bwb-showcase .bwb-a-new-stack { animation: bwb-aNStk 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aNStk {
      0%, 60% { transform: translate(-40px, 0); opacity: 0; }
      62%, 100% { transform: translate(0, 0); opacity: 1; }
    }

    #bwb-showcase .bwb-a-inv-dash { animation: bwb-aIDash 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aIDash {
      0%, 45% { transform: translate(0, -60px); opacity: 0; }
      50%, 100% { transform: translate(0, 0px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-inv-num { animation: bwb-aINum 40s linear infinite; }

    @keyframes bwb-aINum {
      0%, 61% { fill: #36454F; }
      62%, 100% { fill: #D4AF37; }
    }

    
    #bwb-showcase .bwb-a-order-panel { animation: bwb-aOrdP 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aOrdP {
      0%, 2%   { transform: translate(60px, 40px); opacity: 0; }
      6%, 100% { transform: translate(60px, 70px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-order-ping { animation: bwb-aPing 1s ease-out infinite; transform-origin: 220px 15px; }

    @keyframes bwb-aPing { 0% { r: 5; opacity: 1; } 100% { r: 12; opacity: 0; } }

    #bwb-showcase .bwb-a-order-status { animation: bwb-aOStat 40s linear infinite; }

    @keyframes bwb-aOStat {
      0%, 84% { opacity: 1; }
      86%, 100% { opacity: 0; }
    }
    #bwb-showcase .bwb-a-order-status-shipped { opacity: 0; animation: bwb-aOStatShip 40s linear infinite; }

    @keyframes bwb-aOStatShip {
      0%, 84% { opacity: 0; }
      86%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-a-shelf { animation: bwb-aShelfIn 40s linear infinite; }

    @keyframes bwb-aShelfIn {
      0%, 8%   { transform: translate(120px, 260px); opacity: 0; }
      12%, 100% { transform: translate(120px, 260px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-shelf-item { animation: bwb-aSHL 40s linear infinite; }

    @keyframes bwb-aSHL {
      0%, 22% { opacity: 1; }
      26%, 44% { opacity: 1; }
      48%, 100% { opacity: 0; }
    }

    
    #bwb-showcase .bwb-a-picker { animation: bwb-aPick 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aPick {
      0%, 20%   { transform: translate(430px, 300px); opacity: 0; }
      24%, 30%  { transform: translate(430px, 300px); opacity: 1; }
      42%, 50%  { transform: translate(182px, 300px); opacity: 1; }
      65%, 72%  { transform: translate(340px, 470px); opacity: 1; }
      78%, 100% { transform: translate(340px, 470px); opacity: 0; }
    }

    #bwb-showcase .bwb-a-picker-eye { animation: bwb-aPEye 0.9s ease-in-out infinite alternate; }

    @keyframes bwb-aPEye { 0% { opacity: 0.5; } 100% { opacity: 1; } }

    #bwb-showcase .bwb-a-picker-arm { animation: bwb-aPArm 40s linear infinite; }

    @keyframes bwb-aPArm {
      0%, 44%   { transform: translateX(0) scaleX(1); }
      47%, 63%  { transform: translateX(-6px) scaleX(1.08); }
      66%, 100% { transform: translateX(0) scaleX(1); }
    }

    
    #bwb-showcase .bwb-a-pack-box { animation: bwb-aPkB 40s linear infinite; }

    @keyframes bwb-aPkB {
      0%, 62%   { transform: translate(300px, 560px); opacity: 0; }
      66%, 100% { transform: translate(300px, 560px); opacity: 1; }
    }

    #bwb-showcase .bwb-a-box-flap { animation: bwb-aBFlap 40s linear infinite; transform-origin: 66px 13px; }

    @keyframes bwb-aBFlap {
      0%, 68% { transform: rotateX(50deg); }
      72%, 100% { transform: rotateX(0deg); }
    }

    #bwb-showcase .bwb-a-box-label { animation: bwb-aBLab 40s linear infinite; }

    @keyframes bwb-aBLab {
      0%, 72%  { opacity: 0; transform: translateY(-8px); }
      76%, 100% { opacity: 1; transform: translateY(0); }
    }

    #bwb-showcase .bwb-a-route-dash { stroke-dasharray: 20; stroke-dashoffset: 1000; animation: bwb-aRDa 40s linear infinite; }

    @keyframes bwb-aRDa {
      0%, 80% { stroke-dashoffset: 1000; }
      92%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-a-route-pin { animation: bwb-aRPin 40s linear infinite; }

    @keyframes bwb-aRPin {
      0%, 90%  { opacity: 0; transform: scale(0); }
      94%, 100% { opacity: 1; transform: scale(1); }
    }

    
    #bwb-showcase .bwb-a-del-truck { animation: bwb-aDTr 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aDTr {
      0%, 78%   { transform: translate(297px, 640px); opacity: 0; }
      82%, 84%  { transform: translate(297px, 640px); opacity: 1; }
      92%       { transform: translate(297px, 720px); opacity: 1; }
      96%       { transform: translate(497px, 720px); opacity: 1; }
      100%      { transform: translate(497px, 795px); opacity: 1; }
    }


    
    #bwb-showcase .bwb-a-smoke { animation: bwb-aSmk 4s ease-out infinite; }

    @keyframes bwb-aSmk {
      0% { transform: translateY(0) scale(1); opacity: 0.8; }
      100% { transform: translateY(-100px) scale(2); opacity: 0; }
    }

    #bwb-showcase .bwb-a-dash-main { animation: bwb-aDMn 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aDMn {
      0%, 82% { opacity: 0; }
      85%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-a-kpi { animation: bwb-aKp 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-a-kpi-1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-a-kpi-2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-a-kpi-3 { animation-delay: 0.3s; }

    @keyframes bwb-aKp {
      0%, 85% { opacity: 0; }
      88%, 100% { opacity: 1; }
    }

    #bwb-showcase .bwb-a-graph-line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: bwb-aGLine 40s linear infinite; }

    @keyframes bwb-aGLine {
      0%, 88% { stroke-dashoffset: 400; }
      92%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-a-graph-area { animation: bwb-aGArea 40s linear infinite; }

    @keyframes bwb-aGArea {
      0%, 90% { opacity: 0; }
      92%, 100% { opacity: 0.2; }
    }

    #bwb-showcase .bwb-a-graph-dot { animation: bwb-aGDot 40s linear infinite; }

    @keyframes bwb-aGDot {
      0%, 91% { opacity: 0; transform: scale(0); }
      92%, 100% { opacity: 1; transform: scale(1); }
    }

    #bwb-showcase .bwb-a-growth { animation: bwb-aGrw 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-aGrw {
      0%, 89% { transform: translateY(30px); opacity: 0; }
      92%, 100% { transform: translateY(0); opacity: 1; }
    }

    #bwb-showcase .bwb-a-arrow-up { animation: bwb-aArr 1.5s ease-in-out infinite alternate; }

    @keyframes bwb-aArr { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
    
    #bwb-showcase .bwb-digital-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #0A192F;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-digital-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-digitalPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-d-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-d-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    @keyframes bwb-digitalPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    
    #bwb-showcase .bwb-d-phone { animation: bwb-dPh 40s ease-out infinite; }

    @keyframes bwb-dPh {
      0%, 5% { transform: translate(240px, 340px); opacity: 0; }
      10%, 100% { transform: translate(240px, 260px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-form-line { animation: bwb-dFL 40s linear infinite; transform-origin: left; }

    #bwb-showcase .bwb-d-phone .bwb-l1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-d-phone .bwb-l2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-d-phone .bwb-l3 { animation-delay: 0.3s; }

    @keyframes bwb-dFL {
      0%, 8% { transform: scaleX(0); opacity: 0; }
      12%, 100% { transform: scaleX(1); opacity: 1; }
    }

    #bwb-showcase .bwb-d-btn-submit { animation: bwb-dBtn 40s linear infinite; }

    @keyframes bwb-dBtn {
      0%, 12% { fill: #008080; }
      14%, 100% { fill: #00FFFF; }
    }

    #bwb-showcase .bwb-d-data-particle { animation: bwb-dPart 40s ease-in infinite; }

    @keyframes bwb-dPart {
      0%, 14% { opacity: 0; transform: translate(0, 0); }
      15% { opacity: 1; transform: translate(0, 0); }
      20%, 100% { opacity: 0; transform: translate(0, 160px); }
    }

    #bwb-showcase .bwb-d-conn-line { stroke-dasharray: 260; stroke-dashoffset: 260; animation: bwb-dCLine 40s linear infinite; }

    @keyframes bwb-dCLine {
      0%, 15% { stroke-dashoffset: 260; }
      20%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-d-cloud { animation: bwb-dCld 4s ease-in-out infinite alternate; }

    @keyframes bwb-dCld { 0% { transform: translate(210px, 555px); } 100% { transform: translate(210px, 565px); } }

    
    #bwb-showcase .bwb-d-engine { animation: bwb-dEng 40s ease-out infinite; }

    @keyframes bwb-dEng {
      0%, 20% { transform: translate(350px, 340px) scale(0); opacity: 0; }
      23%, 100% { transform: translate(350px, 340px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-d-core-pulse { animation: bwb-dCP 1s infinite alternate; }

    @keyframes bwb-dCP { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

    #bwb-showcase .bwb-d-core-spin { animation: bwb-dCS 5s linear infinite; }

    @keyframes bwb-dCS { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    #bwb-showcase .bwb-d-net-line { stroke-dasharray: 300; stroke-dashoffset: 300; animation: bwb-dNLine 40s ease-out infinite; }

    #bwb-showcase .bwb-nl1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-nl2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-nl3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-nl4 { animation-delay: 0.6s; }

    @keyframes bwb-dNLine {
      0%, 23% { stroke-dashoffset: 300; }
      30%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-d-particle { animation: bwb-dPAnim 40s linear infinite; }

    #bwb-showcase .bwb-p1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-p2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-p3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-p4 { animation-delay: 0.6s; }

    @keyframes bwb-dPAnim {
      0%, 25% { opacity: 0; offset-distance: 0%; }
      26% { opacity: 1; offset-distance: 0%; }
      32%, 100% { opacity: 0; offset-distance: 100%; }
    }
    #bwb-showcase .bwb-p1 { offset-path: path('M 190 340 L 175 165'); }

    #bwb-showcase .bwb-p2 { offset-path: path('M 190 340 L 525 340'); }

    #bwb-showcase .bwb-p3 { offset-path: path('M 190 340 L 175 515'); }

    #bwb-showcase .bwb-p4 { offset-path: path('M 525 340 L 525 165'); }


    #bwb-showcase .bwb-d-node { animation: bwb-dNd 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-node-1 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-node-2 { animation-delay: 0.4s; }

    #bwb-showcase .bwb-node-3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-node-4 { animation-delay: 0.7s; }

    @keyframes bwb-dNd {
      0%, 25% { transform: scale(0); opacity: 0; }
      28%, 100% { transform: scale(1); opacity: 1; }
    }
    
    #bwb-showcase .bwb-node-1 { transform: translate(175px, 165px); }

    @keyframes bwb-dNd1 { 0%, 25% { transform: translate(175px, 165px) scale(0); opacity: 0; } 28%, 100% { transform: translate(175px, 165px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-node-1 { animation-name: bwb-dNd1; }

    
    #bwb-showcase .bwb-node-2 { transform: translate(175px, 515px); }

    @keyframes bwb-dNd2 { 0%, 25% { transform: translate(175px, 515px) scale(0); opacity: 0; } 28%, 100% { transform: translate(175px, 515px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-node-2 { animation-name: bwb-dNd2; }

    
    #bwb-showcase .bwb-node-3 { transform: translate(525px, 340px); }

    @keyframes bwb-dNd3 { 0%, 25% { transform: translate(525px, 340px) scale(0); opacity: 0; } 28%, 100% { transform: translate(525px, 340px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-node-3 { animation-name: bwb-dNd3; }

    
    #bwb-showcase .bwb-node-4 { transform: translate(525px, 165px); }

    @keyframes bwb-dNd4 { 0%, 25% { transform: translate(525px, 165px) scale(0); opacity: 0; } 28%, 100% { transform: translate(525px, 165px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-node-4 { animation-name: bwb-dNd4; }


    #bwb-showcase .bwb-d-check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: bwb-dChk 40s linear infinite; }

    @keyframes bwb-dChk {
      0%, 29% { stroke-dashoffset: 50; }
      31%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-d-task-card { animation: bwb-dTC 40s linear infinite; }

    @keyframes bwb-dTC {
      0%, 30% { transform: translate(0, 0); opacity: 0; }
      32% { transform: translate(0, 0); opacity: 1; }
      36%, 100% { transform: translate(50px, -20px); opacity: 0; }
    }

    
    #bwb-showcase .bwb-d-calendar { animation: bwb-dCal 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dCal {
      0%, 40% { transform: translate(100px, 140px); opacity: 0; }
      44%, 100% { transform: translate(100px, 100px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-cal-bar { animation: bwb-dCB 40s linear infinite; transform-origin: left; }

    #bwb-showcase .bwb-cb1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-cb2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-cb3 { animation-delay: 0.3s; }

    @keyframes bwb-dCB {
      0%, 44% { transform: scaleX(0); }
      48%, 100% { transform: scaleX(1); }
    }

    #bwb-showcase .bwb-d-machine { animation: bwb-dMach 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dMach {
      0%, 43% { transform: translate(120px, 390px); opacity: 0; }
      47%, 100% { transform: translate(120px, 320px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-drill { animation: bwb-dDrl 0.5s ease-in-out infinite alternate; }

    @keyframes bwb-dDrl { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }

    #bwb-showcase .bwb-d-m-product { animation: bwb-dMP 40s linear infinite; }

    @keyframes bwb-dMP {
      0%, 47% { opacity: 0; width: 0; }
      55%, 100% { opacity: 1; width: 40px; }
    }

    #bwb-showcase .bwb-d-status-light { animation: bwb-dSL 40s linear infinite; }

    @keyframes bwb-dSL {
      0%, 47% { fill: #008080; }
      48%, 100% { fill: #00FFFF; }
    }

    #bwb-showcase .bwb-d-engineer { animation: bwb-dEngin 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dEngin {
      0%, 45% { transform: translate(420px, 450px); opacity: 0; }
      49%, 100% { transform: translate(420px, 400px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-live-panel { animation: bwb-dLP 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dLP {
      0%, 48% { transform: translate(110px, 570px); opacity: 0; }
      52%, 100% { transform: translate(110px, 620px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-ring { animation: bwb-dR 40s linear infinite; }

    #bwb-showcase .bwb-r1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-r2 { animation-delay: 0.2s; }

    @keyframes bwb-dR {
      0%, 50% { stroke-dashoffset: 125; }
      55%, 100% { stroke-dashoffset: 20; }
    }

    #bwb-showcase .bwb-d-final-prod { animation: bwb-dFP 40s linear infinite; }

    @keyframes bwb-dFP {
      0%, 55% { transform: translateY(0); opacity: 0; }
      57% { transform: translateY(0); opacity: 1; }
      60%, 100% { transform: translateY(220px); opacity: 0; }
    }

    
    #bwb-showcase .bwb-d-package { animation: bwb-dPkg 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dPkg {
      0%, 60% { transform: translate(90px, 50px); opacity: 0; }
      63%, 100% { transform: translate(90px, 100px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-gps-route { animation: bwb-dGPS 40s linear infinite; stroke-dasharray: 1100; stroke-dashoffset: 1100; }

    @keyframes bwb-dGPS {
      0%, 64% { stroke-dashoffset: 1100; }
      75%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-d-truck { animation: bwb-dTrk 40s linear infinite; }

    @keyframes bwb-dTrk {
      0%, 64% { transform: translate(140px, 200px); opacity: 0; }
      65% { transform: translate(140px, 200px); opacity: 1; }
      72%, 100% { transform: translate(140px, 700px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-truck-signal { animation: bwb-dTSig 1s ease-out infinite; }

    @keyframes bwb-dTSig { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

    #bwb-showcase .bwb-d-phone-notif { animation: bwb-dPN 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dPN {
      0%, 70% { transform: translate(390px, 590px); opacity: 0; }
      73%, 100% { transform: translate(390px, 640px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-notif-card { animation: bwb-dNC 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dNC {
      0%, 73% { transform: translateY(-10px); opacity: 0; }
      75%, 100% { transform: translateY(0); opacity: 1; }
    }

    #bwb-showcase .bwb-d-chat-1,
    #bwb-showcase .bwb-d-chat-2,
    #bwb-showcase .bwb-d-chat-3 { animation: bwb-dCh 40s linear infinite; transform-origin: left; }

    #bwb-showcase .bwb-d-chat-1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-d-chat-2 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-d-chat-3 { animation-delay: 0.5s; }

    @keyframes bwb-dCh {
      0%, 75% { transform: scaleX(0); opacity: 0; }
      77%, 100% { transform: scaleX(1); opacity: 1; }
    }

    #bwb-showcase .bwb-d-satisfaction { animation: bwb-dSat 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dSat {
      0%, 78% { transform: translate(180px, 780px) scale(0); opacity: 0; }
      81%, 100% { transform: translate(180px, 780px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-d-sat-pulse { animation: bwb-dSP 1.5s ease-out infinite; }

    @keyframes bwb-dSP { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

    
    #bwb-showcase .bwb-d-feedback-particle { animation: bwb-dFBP 40s ease-in infinite; }

    @keyframes bwb-dFBP {
      0%, 82% { opacity: 0; transform: translate(0, 0); }
      83% { opacity: 1; transform: translate(0, 0); }
      88%, 100% { opacity: 0; transform: translate(0, -320px); }
    }

    #bwb-showcase .bwb-d-bi-dash { animation: bwb-dBI 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-dBI {
      0%, 85% { transform: translate(90px, 200px); opacity: 0; }
      88%, 100% { transform: translate(90px, 150px); opacity: 1; }
    }

    #bwb-showcase .bwb-d-growth-chart { stroke-dasharray: 400; stroke-dashoffset: 400; animation: bwb-dGC 40s linear infinite; }

    @keyframes bwb-dGC {
      0%, 88% { stroke-dashoffset: 400; }
      92%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-d-growth-area { animation: bwb-dGA 40s linear infinite; }

    @keyframes bwb-dGA { 0%, 90% { opacity: 0; } 92%, 100% { opacity: 0.2; } }

    #bwb-showcase .bwb-d-growth-dot { animation: bwb-dGD 40s linear infinite; }

    @keyframes bwb-dGD { 0%, 91% { opacity: 0; transform: scale(0); } 92%, 100% { opacity: 1; transform: scale(1); } }

    #bwb-showcase .bwb-d-final-net { animation: bwb-dFN 40s ease-in infinite; }

    @keyframes bwb-dFN {
      0%, 90% { transform: translate(350px, 660px) scale(0.5); opacity: 0; }
      94%, 100% { transform: translate(350px, 660px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-d-spin-slow { animation: bwb-dSpSl 20s linear infinite; }

    @keyframes bwb-dSpSl { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    #bwb-showcase .bwb-d-spin-fast { animation: bwb-dSpFa 40s linear infinite; }

    @keyframes bwb-dSpFa { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

    #bwb-showcase .bwb-d-net-pulse { animation: bwb-dNPu 2s ease-in-out infinite alternate; }

    @keyframes bwb-dNPu { 0% { opacity: 0.2; } 100% { opacity: 1; } }

    #bwb-showcase .bwb-d-node-pulse { animation: bwb-dNdPu 1.5s ease-in-out infinite alternate; }

    @keyframes bwb-dNdPu { 0% { transform: scale(0.8); box-shadow: 0 0 0 #00FFFF; } 100% { transform: scale(1.2); box-shadow: 0 0 10px #00FFFF; } }
    
    #bwb-showcase .bwb-erp-viewport {
      width: 100%;
      height: 100%;
      min-height: 400px;
      overflow: hidden;
      position: relative;
      background: #1A237E;
      border-radius: 16px;
    }


    #bwb-showcase .bwb-erp-world {
      display: flex;
      width: 500%;
      height: 100%;
      animation: bwb-erpPan 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }


    #bwb-showcase .bwb-e-scene {
      width: 20%;
      height: 100%;
      position: relative;
    }


    #bwb-showcase .bwb-e-svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    @keyframes bwb-erpPan {
      0%, 15% { transform: translateX(0%); }
      20%, 35% { transform: translateX(-20%); }
      40%, 55% { transform: translateX(-40%); }
      60%, 75% { transform: translateX(-60%); }
      80%, 95% { transform: translateX(-80%); }
      100% { transform: translateX(0%); }
    }

    
    #bwb-showcase .bwb-e-dept { animation: bwb-eDept 40s ease-in-out infinite; }

    @keyframes bwb-eDept {
      0%, 15% { opacity: 1; transform: scale(1); }
      18%, 100% { opacity: 0; transform: scale(0.9); }
    }

    #bwb-showcase .bwb-dept-1 { transform: translate(175px, 140px); }

    @keyframes bwb-eDept1 { 0%, 15% { transform: translate(175px, 140px) scale(1); opacity: 1; } 18%, 100% { transform: translate(175px, 140px) scale(0.9); opacity: 0; } }
    #bwb-showcase .bwb-dept-1 { animation-name: bwb-eDept1; }


    #bwb-showcase .bwb-dept-2 { transform: translate(545px, 210px); }

    @keyframes bwb-eDept2 { 0%, 15% { transform: translate(545px, 210px) scale(1); opacity: 1; } 18%, 100% { transform: translate(545px, 210px) scale(0.9); opacity: 0; } }
    #bwb-showcase .bwb-dept-2 { animation-name: bwb-eDept2; }


    #bwb-showcase .bwb-dept-3 { transform: translate(175px, 460px); }

    @keyframes bwb-eDept3 { 0%, 15% { transform: translate(175px, 460px) scale(1); opacity: 1; } 18%, 100% { transform: translate(175px, 460px) scale(0.9); opacity: 0; } }
    #bwb-showcase .bwb-dept-3 { animation-name: bwb-eDept3; }


    #bwb-showcase .bwb-dept-4 { transform: translate(545px, 540px); }

    @keyframes bwb-eDept4 { 0%, 15% { transform: translate(545px, 540px) scale(1); opacity: 1; } 18%, 100% { transform: translate(545px, 540px) scale(0.9); opacity: 0; } }
    #bwb-showcase .bwb-dept-4 { animation-name: bwb-eDept4; }


    #bwb-showcase .bwb-e-alert { animation: bwb-eAlt 0.5s ease-in-out infinite alternate; }

    @keyframes bwb-eAlt { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

    #bwb-showcase .bwb-e-paper { transform: translate(160px, 160px); animation: bwb-ePap 40s linear infinite; }

    #bwb-showcase .bwb-p1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-p2 { animation-delay: 0.5s; }

    #bwb-showcase .bwb-p3 { animation-delay: 0.3s; }

    @keyframes bwb-ePap {
      0%, 15% { transform: translate(160px, 160px) rotate(0deg); opacity: 0; }
      2%, 13% { opacity: 1; }
      15% { transform: translate(260px, 60px) rotate(45deg); opacity: 0; }
      16%, 100% { opacity: 0; }
    }

    
    #bwb-showcase .bwb-e-erp-core { transform: translate(350px, 380px); animation: bwb-eCore 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eCore {
      0%, 15% { transform: translate(350px, 380px) scale(0); opacity: 0; }
      20%, 100% { transform: translate(350px, 380px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-e-core-pulse { animation: bwb-eCP 1.5s ease-in-out infinite alternate; }

    @keyframes bwb-eCP { 0% { opacity: 0.4; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

    #bwb-showcase .bwb-e-conn-lines { stroke-dasharray: 240; stroke-dashoffset: 240; animation: bwb-eCL 40s ease-out infinite; }

    @keyframes bwb-eCL {
      0%, 20% { stroke-dashoffset: 240; }
      25%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-e-dept-active { animation: bwb-eDAct 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-e-d1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-e-d2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-e-d3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-e-d4 { animation-delay: 0.4s; }

    @keyframes bwb-eDAct {
      0%, 22% { opacity: 0; transform: scale(0.8); }
      25%, 100% { opacity: 1; transform: scale(1); }
    }

    #bwb-showcase .bwb-e-d1 { transform: translate(140px, 200px); }

    @keyframes bwb-eDAct1 { 0%, 22% { transform: translate(140px, 200px) scale(0.8); opacity: 0; } 25%, 100% { transform: translate(140px, 200px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-d1 { animation-name: bwb-eDAct1; }


    #bwb-showcase .bwb-e-d2 { transform: translate(350px, 130px); }

    @keyframes bwb-eDAct2 { 0%, 22% { transform: translate(350px, 130px) scale(0.8); opacity: 0; } 25%, 100% { transform: translate(350px, 130px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-d2 { animation-name: bwb-eDAct2; }


    #bwb-showcase .bwb-e-d3 { transform: translate(560px, 200px); }

    @keyframes bwb-eDAct3 { 0%, 22% { transform: translate(560px, 200px) scale(0.8); opacity: 0; } 25%, 100% { transform: translate(560px, 200px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-d3 { animation-name: bwb-eDAct3; }


    #bwb-showcase .bwb-e-d4 { transform: translate(350px, 620px); }

    @keyframes bwb-eDAct4 { 0%, 22% { transform: translate(350px, 620px) scale(0.8); opacity: 0; } 25%, 100% { transform: translate(350px, 620px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-d4 { animation-name: bwb-eDAct4; }


    #bwb-showcase .bwb-e-data { animation: bwb-eDAnim 40s linear infinite; }

    #bwb-showcase .bwb-d1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-d2 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-d3 { animation-delay: 0.5s; }

    #bwb-showcase .bwb-d4 { animation-delay: 0.7s; }

    @keyframes bwb-eDAnim {
      0%, 25% { opacity: 0; offset-distance: 0%; }
      26% { opacity: 1; offset-distance: 0%; }
      32%, 100% { opacity: 0; offset-distance: 100%; }
    }
    #bwb-showcase .bwb-d1 { offset-path: path('M 350 380 L 140 200'); }

    #bwb-showcase .bwb-d2 { offset-path: path('M 350 320 L 350 130'); }

    #bwb-showcase .bwb-d3 { offset-path: path('M 350 380 L 560 200'); }

    #bwb-showcase .bwb-d4 { offset-path: path('M 350 440 L 350 620'); }


    
    #bwb-showcase .bwb-e-planning-dash { animation: bwb-ePDash 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-ePDash {
      0%, 40% { transform: translate(180px, 10px); opacity: 0; }
      45%, 100% { transform: translate(180px, 90px); opacity: 1; }
    }

    #bwb-showcase .bwb-e-cal-row { animation: bwb-eCRow 40s linear infinite; transform-origin: left; }

    #bwb-showcase .bwb-cr1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-cr2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-cr3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-cr4 { animation-delay: 0.4s; }

    @keyframes bwb-eCRow {
      0%, 45% { transform: scaleX(0); }
      50%, 100% { transform: scaleX(1); }
    }

    #bwb-showcase .bwb-e-smart-mach { animation: bwb-eSMach 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eSMach {
      0%, 42% { transform: scale(0); opacity: 0; }
      46%, 100% { transform: scale(1); opacity: 1; }
    }
    
    #bwb-showcase .bwb-e-smart-mach-1 { transform: translate(120px, 420px); }

    @keyframes bwb-eSMach1 { 0%, 42% { transform: translate(120px, 420px) scale(0); opacity: 0; } 46%, 100% { transform: translate(120px, 420px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-smart-mach-1 { animation-name: bwb-eSMach1; }


    #bwb-showcase .bwb-e-smart-mach-2 { transform: translate(420px, 520px); }

    @keyframes bwb-eSMach2 { 0%, 42% { transform: translate(420px, 520px) scale(0); opacity: 0; } 46%, 100% { transform: translate(420px, 520px) scale(1); opacity: 1; } }
    #bwb-showcase .bwb-e-smart-mach-2 { animation-name: bwb-eSMach2; }


    #bwb-showcase .bwb-e-mach-ring { animation: bwb-eMR 40s linear infinite; }

    @keyframes bwb-eMR {
      0%, 45% { stroke-dashoffset: 100; }
      50%, 100% { stroke-dashoffset: 0; }
    }

    #bwb-showcase .bwb-e-mach-laser { animation: bwb-eML 2s linear infinite alternate; }

    @keyframes bwb-eML { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } }

    #bwb-showcase .bwb-e-mach-status { animation: bwb-eMS 40s linear infinite; }

    @keyframes bwb-eMS {
      0%, 46% { fill: #1A237E; }
      48%, 100% { fill: #00E676; }
    }

    #bwb-showcase .bwb-e-flow-card { transform: translate(200px, 200px); animation: bwb-eFC 40s ease-in-out infinite; }

    #bwb-showcase .bwb-fc1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-fc2 { animation-delay: 0.5s; }

    @keyframes bwb-eFC {
      0%, 45% { transform: translate(200px, 200px); opacity: 0; }
      47% { opacity: 1; }
      52%, 100% { transform: translate(400px, 300px); opacity: 0; }
    }

    #bwb-showcase .bwb-e-engineer { animation: bwb-eEng 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eEng {
      0%, 48% { transform: translate(390px, 760px); opacity: 0; }
      52%, 100% { transform: translate(390px, 680px); opacity: 1; }
    }

    #bwb-showcase .bwb-e-eng-graph { stroke-dasharray: 200; stroke-dashoffset: 200; animation: bwb-eEG 40s linear infinite; }

    @keyframes bwb-eEG {
      0%, 50% { stroke-dashoffset: 200; }
      55%, 100% { stroke-dashoffset: 0; }
    }

    
    #bwb-showcase .bwb-e-rise { animation: bwb-eRs 40s ease-out infinite; }

    #bwb-showcase .bwb-r1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-r2 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-r3 { animation-delay: 0.5s; }

    #bwb-showcase .bwb-r4 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-r5 { animation-delay: 0.4s; }

    @keyframes bwb-eRs {
      0%, 60% { transform: translateY(0); opacity: 0; }
      62% { opacity: 1; }
      68%, 100% { transform: translateY(-260px); opacity: 0; }
    }

    #bwb-showcase .bwb-e-report-dash { animation: bwb-eRD 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eRD {
      0%, 62% { transform: translate(160px, 0px); opacity: 0; }
      65%, 100% { transform: translate(160px, 60px); opacity: 1; }
    }

    #bwb-showcase .bwb-e-kpi { animation: bwb-eKpi 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    #bwb-showcase .bwb-k1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-k2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-k3 { animation-delay: 0.3s; }

    @keyframes bwb-eKpi {
      0%, 65% { transform: translateY(-20px); opacity: 0; }
      68%, 100% { transform: translateY(0); opacity: 1; }
    }
    
    #bwb-showcase .bwb-k1 { transform: translate(30px, 70px); }

    @keyframes bwb-eKpi1 { 0%, 65% { transform: translate(30px, 50px); opacity: 0; } 68%, 100% { transform: translate(30px, 70px); opacity: 1; } }
    #bwb-showcase .bwb-k1 { animation-name: bwb-eKpi1; }

    
    #bwb-showcase .bwb-k2 { transform: translate(30px, 220px); }

    @keyframes bwb-eKpi2 { 0%, 65% { transform: translate(30px, 200px); opacity: 0; } 68%, 100% { transform: translate(30px, 220px); opacity: 1; } }
    #bwb-showcase .bwb-k2 { animation-name: bwb-eKpi2; }

    
    #bwb-showcase .bwb-k3 { transform: translate(30px, 370px); }

    @keyframes bwb-eKpi3 { 0%, 65% { transform: translate(30px, 350px); opacity: 0; } 68%, 100% { transform: translate(30px, 370px); opacity: 1; } }
    #bwb-showcase .bwb-k3 { animation-name: bwb-eKpi3; }


    #bwb-showcase .bwb-e-bar { animation: bwb-eBar 40s ease-out infinite; transform-origin: bottom; }

    #bwb-showcase .bwb-b1 { animation-delay: 0.1s; }

    #bwb-showcase .bwb-b2 { animation-delay: 0.2s; }

    #bwb-showcase .bwb-b3 { animation-delay: 0.3s; }

    #bwb-showcase .bwb-b4 { animation-delay: 0.4s; }

    #bwb-showcase .bwb-b5 { animation-delay: 0.5s; }

    #bwb-showcase .bwb-b6 { animation-delay: 0.6s; }

    #bwb-showcase .bwb-b7 { animation-delay: 0.7s; }

    #bwb-showcase .bwb-b8 { animation-delay: 0.8s; }

    @keyframes bwb-eBar {
      0%, 68% { transform: scaleY(0); }
      75%, 100% { transform: scaleY(1); }
    }
    
    #bwb-showcase .bwb-b1 { transform: scaleY(0.2); }
 @keyframes bwb-eBar1 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.2); } } #bwb-showcase .bwb-b1 { animation-name: bwb-eBar1; }

    #bwb-showcase .bwb-b2 { transform: scaleY(0.3); }
 @keyframes bwb-eBar2 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.3); } } #bwb-showcase .bwb-b2 { animation-name: bwb-eBar2; }

    #bwb-showcase .bwb-b3 { transform: scaleY(0.5); }
 @keyframes bwb-eBar3 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.5); } } #bwb-showcase .bwb-b3 { animation-name: bwb-eBar3; }

    #bwb-showcase .bwb-b4 { transform: scaleY(0.4); }
 @keyframes bwb-eBar4 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.4); } } #bwb-showcase .bwb-b4 { animation-name: bwb-eBar4; }

    #bwb-showcase .bwb-b5 { transform: scaleY(0.7); }
 @keyframes bwb-eBar5 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.7); } } #bwb-showcase .bwb-b5 { animation-name: bwb-eBar5; }

    #bwb-showcase .bwb-b6 { transform: scaleY(0.6); }
 @keyframes bwb-eBar6 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.6); } } #bwb-showcase .bwb-b6 { animation-name: bwb-eBar6; }

    #bwb-showcase .bwb-b7 { transform: scaleY(0.9); }
 @keyframes bwb-eBar7 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(0.9); } } #bwb-showcase .bwb-b7 { animation-name: bwb-eBar7; }

    #bwb-showcase .bwb-b8 { transform: scaleY(1.0); }
 @keyframes bwb-eBar8 { 0%, 68% { transform: scaleY(0); } 75%, 100% { transform: scaleY(1.0); } } #bwb-showcase .bwb-b8 { animation-name: bwb-eBar8; }


    
    #bwb-showcase .bwb-e-net-pulse { animation: bwb-eNP 2s ease-in-out infinite alternate; }

    @keyframes bwb-eNP { 0% { opacity: 0.1; } 100% { opacity: 0.5; } }

    #bwb-showcase .bwb-e-final-brain { transform: translate(350px, 400px); animation: bwb-eFB 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eFB {
      0%, 82% { transform: translate(350px, 400px) scale(0); opacity: 0; }
      85%, 100% { transform: translate(350px, 400px) scale(1); opacity: 1; }
    }

    #bwb-showcase .bwb-e-brain-glow { animation: bwb-eBG 2s infinite alternate; }

    @keyframes bwb-eBG { 0% { opacity: 0.4; } 100% { opacity: 1; } }

    #bwb-showcase .bwb-e-brain-spin { animation: bwb-eBS 15s linear infinite; }

    @keyframes bwb-eBS { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    #bwb-showcase .bwb-e-orbit { animation: eOrb 5s linear infinite; transform-origin: 150px 150px; }

    #bwb-showcase .bwb-o1 { animation: bwb-eOrb1 5s linear infinite; }
 @keyframes bwb-eOrb1 { 0% { transform: rotate(0deg) translate(-150px, 0) rotate(0deg); } 100% { transform: rotate(360deg) translate(-150px, 0) rotate(-360deg); } }
    #bwb-showcase .bwb-o2 { animation: bwb-eOrb2 5s linear infinite; }
 @keyframes bwb-eOrb2 { 0% { transform: rotate(0deg) translate(150px, 0) rotate(0deg); } 100% { transform: rotate(360deg) translate(150px, 0) rotate(-360deg); } }
    #bwb-showcase .bwb-o3 { animation: bwb-eOrb3 5s linear infinite; }
 @keyframes bwb-eOrb3 { 0% { transform: rotate(0deg) translate(0, -150px) rotate(0deg); } 100% { transform: rotate(360deg) translate(0, -150px) rotate(-360deg); } }
    #bwb-showcase .bwb-o4 { animation: bwb-eOrb4 5s linear infinite; }
 @keyframes bwb-eOrb4 { 0% { transform: rotate(0deg) translate(0, 150px) rotate(0deg); } 100% { transform: rotate(360deg) translate(0, 150px) rotate(-360deg); } }

    #bwb-showcase .bwb-e-final-growth { animation: bwb-eFG 40s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

    @keyframes bwb-eFG {
      0%, 88% { transform: translate(0, 0) scaleY(0); opacity: 0; transform-origin: bottom; }
      92%, 100% { transform: translate(0, 0) scaleY(1); opacity: 1; transform-origin: bottom; }
    }
    
    @media (max-width: 1024px) {

      #bwb-showcase .bwb-cinematic-viewport,
    #bwb-showcase .bwb-fashion-viewport,
    #bwb-showcase .bwb-smart-viewport,
    #bwb-showcase .bwb-apparel-viewport,
    #bwb-showcase .bwb-digital-viewport,
    #bwb-showcase .bwb-erp-viewport {
        width: 100%;
        aspect-ratio: 7 / 9;
        height: auto;
        min-height: 0;
        max-height: 640px;
      }

    
}


    @media (max-width: 768px) {

      #bwb-showcase .bwb-cinematic-viewport,
    #bwb-showcase .bwb-fashion-viewport,
    #bwb-showcase .bwb-smart-viewport,
    #bwb-showcase .bwb-apparel-viewport,
    #bwb-showcase .bwb-digital-viewport,
    #bwb-showcase .bwb-erp-viewport {
        max-height: 70vh;
      }

    
}
    
    #bwb-showcase .bwb-cinematic-world,
    #bwb-showcase .bwb-fashion-world,
    #bwb-showcase .bwb-smart-world,
    #bwb-showcase .bwb-apparel-world,
    #bwb-showcase .bwb-digital-world,
    #bwb-showcase .bwb-erp-world {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 500% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }


    #bwb-showcase .bwb-scene,
    #bwb-showcase .bwb-f-scene,
    #bwb-showcase .bwb-s-scene,
    #bwb-showcase .bwb-a-scene,
    #bwb-showcase .bwb-d-scene,
    #bwb-showcase .bwb-e-scene {
      flex: 0 0 20% !important;
      width: 20% !important;
      max-width: 20% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }


    #bwb-showcase .bwb-scene-svg,
    #bwb-showcase .bwb-f-svg,
    #bwb-showcase .bwb-s-svg,
    #bwb-showcase .bwb-a-svg,
    #bwb-showcase .bwb-d-svg,
    #bwb-showcase .bwb-e-svg {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }


    #bwb-showcase .bwb-cinematic-viewport,
    #bwb-showcase .bwb-fashion-viewport,
    #bwb-showcase .bwb-smart-viewport,
    #bwb-showcase .bwb-apparel-viewport,
    #bwb-showcase .bwb-digital-viewport,
    #bwb-showcase .bwb-erp-viewport {
      padding: 0 !important;
      margin: 0 !important;
    }

.bg-light-gray {
  background-color: #F8FAFC;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -12; }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes flipWord {
  0% { transform: rotateX(90deg); opacity: 0; }
  3% { transform: rotateX(0deg); opacity: 1; }
  22% { transform: rotateX(0deg); opacity: 1; }
  25% { transform: rotateX(-90deg); opacity: 0; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}

.word-flip {
  animation: flipWord 16s infinite;
  transform-origin: center;
  opacity: 0; 
}

.word-flip-1 { animation-delay: 0s; }
.word-flip-2 { animation-delay: 4s; }
.word-flip-3 { animation-delay: 8s; }
.word-flip-4 { animation-delay: 12s; }

/* TEMP — static-build freeze for the Sahith showcase validation build only.
   Scoped override, does not touch flipWord/.word-flip/.word-flip-1..4 above.
   Revert: remove this block and the .products-heading-frozen class from the
   #products <h2> in src/sections/work.html once all 4 client states exist
   and the full word-flip rotation is restored. */
.products-heading-frozen .word-flip {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}
.products-heading-frozen .word-flip-1 {
  opacity: 1 !important;
  transition: opacity 0.18s ease;
}

/* Deck heading: "Built for" stays fixed; only the domain text swaps.
   Unused flip spans are removed from layout so placeholders cannot
   resize the slot. See the heading block below for the fixed-width,
   centered-within-slot rule that keeps "Built for" from shifting. */
#products .products-heading-frozen > .highlight-blue {
  justify-items: start;
}
.products-heading-frozen .word-flip-2,
.products-heading-frozen .word-flip-3,
.products-heading-frozen .word-flip-4 {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Modest type trim + optical center with OUR WORK eyebrow. */
#products .main-heading.products-heading-frozen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: clamp(26px, 2.55vw, 36px);
  gap: 0.55rem 0.85rem;
  text-align: center;
}
/* Domain width follows live text so "Built for + domain" shares
   the same optical center as — OUR WORK — (no phantom long-slot). */
#products .products-heading-frozen > .highlight-blue {
  width: max-content;
  max-width: 100%;
}
#products .products-heading-frozen > .highlight-blue::before {
  content: none;
}
#products .products-deck-lede {
  font-size: 15px;
  line-height: 1.55;
  margin-top: 0.65rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  white-space: nowrap;
}
@media (min-width: 768px) and (min-height: 500px) {
  #products .products-deck-lede {
    font-size: 16px;
  }
}
@media (max-width: 900px) {
  #products .products-deck-lede {
    white-space: normal;
    max-width: 36rem;
    padding-inline: 0.5rem;
  }
}



.scroll-top-btn {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 14px;
  color: var(--white);
  background: linear-gradient(180deg, #2378D4 0%, var(--blue, #1E70C8) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px rgba(30, 112, 200, 0.28),
    0 2px 6px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: linear-gradient(180deg, #2A82E8 0%, #1A63B0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 28px rgba(30, 112, 200, 0.36),
    0 2px 6px rgba(15, 23, 42, 0.14);
}

.scroll-top-btn:focus-visible {
  outline: 2px solid var(--blue, #1E70C8);
  outline-offset: 3px;
}

.scroll-top-btn:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn {
    transition: opacity 0.01ms, visibility 0.01ms;
    transform: none;
  }

  .scroll-top-btn.is-visible,
  .scroll-top-btn:active {
    transform: none;
  }
}

@media (max-width: 640px) {
  .scroll-top-btn {
    width: 44px;
    height: 44px;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    border-radius: 12px;
  }
}

/* ===== Client showcase (Sahith build — first of 4 client states) =====
   Section-scoped, .client-showcase* only. Colors restricted to Intel Blue
   (#1E70C8) and near-black (#1E2433) per the client-showcase color contract;
   real logo/photo assets are exempt (their own colors are not "new"). */
.client-showcase {
  /* Wider frame so active + peek stack can occupy the red composition band */
  max-width: 1200px;
  margin: 40px auto 0;
  text-align: left;
}

.client-showcase-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.client-showcase-text {
  flex: 1 1 420px;
  min-width: 320px;
}

.client-showcase-logo {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 28px;
}

.client-showcase-heading-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 28px;
}

.client-showcase-rule {
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  background: #1E70C8;
}

.client-showcase-heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1E2433;
}

.client-showcase-accent {
  color: #1E70C8;
}

.client-showcase-heading .client-showcase-accent {
  display: block;
}

.client-showcase-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.client-showcase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.client-showcase-step-icon {
  width: 22px;
  height: 22px;
  color: #1E70C8;
}
.client-showcase-step-icon svg { width: 100%; height: 100%; display: block; }

.client-showcase-step-label {
  font-size: 13px;
  font-weight: 600;
  color: #1E2433;
  white-space: nowrap;
}

.client-showcase-step-arrow {
  width: 16px;
  height: 16px;
  color: #1E70C8;
  flex-shrink: 0;
}
.client-showcase-step-arrow svg { width: 100%; height: 100%; display: block; }

.client-showcase-closing {
  font-size: 16px;
  line-height: 1.6;
  color: #1E2433;
  margin: 0 0 20px;
}

.client-showcase-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #1E2433;
}

.client-showcase-tag-icon {
  width: 20px;
  height: 20px;
  color: #1E70C8;
  flex-shrink: 0;
}
.client-showcase-tag-icon svg { width: 100%; height: 100%; display: block; }

.client-showcase-photo-wrap {
  flex: 0 1 380px;
  display: flex;
  justify-content: center;
}

.client-showcase-photo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

@media (max-width: 900px) {
  .client-showcase-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 32px;
  }
  .client-showcase-photo-wrap {
    width: 100%;
  }
}

/* Connector arrows share a relative slot (used by all client showcases). */
.client-showcase-step-arrow {
  position: relative;
}

/* Deck of cards — physical layered fan driven by
   js/src/25-client-showcase-deck.js via [data-deck-state].
   Active = full normal card. Queued cards progressively scale down and
   recede right, with logos staggered in the exposed strip.

   Cards do NOT use `.fade-in-up` (scroll-reveal `.active` would collide
   with this deck's own active state). */
#products {
  overflow-x: hidden;
}

.client-showcase-stage {
  position: relative;
  display: block;
  width: 100%;
  /* Height set by JS from the active card so absolute peeks don't collapse
     the stage. Fallback keeps first paint from jumping to zero. */
  min-height: 420px;
}

.client-showcase-stage .client-showcase-group {
  position: absolute;
  top: 0;
  left: 0;
  /* Landscape active card — wider than tall; peeks fill the rest of the red band */
  width: min(70%, 880px);
  max-width: none;
  margin: 0;
  justify-self: auto;
  overflow: visible;
  display: block;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  /* Top-left origin so each scale step shortens height clearly downward */
  transform-origin: left top;
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.client-showcase-stage .client-showcase-group .client-showcase-inner.client-showcase-card {
  width: 100%;
  max-width: none;
  transform: none;
}

.client-showcase-group[data-deck-state="active"] {
  z-index: 4;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
  cursor: default;
  overflow: visible;
}

/* Sahith's card is naturally the shortest of the four (381px vs. Rainer's
   439/Cocovik's 506/CFresh's ~425) — shorter than queued-1's fixed-height
   footprint behind it (440px card, scale(0.92), 8px translateY = a ~413px
   bottom edge). Since both are position:absolute from the same top:0
   origin, that left queued-1's white card background visibly poking out
   ~32px below Sahith's own rounded bottom corner whenever Sahith is
   active — a step in the outer silhouette where there should be one clean
   edge. min-height (not height) means this only ever ADDS blank space
   below a card that's shorter than the queued footprint behind it; it
   never trims a taller one, and never touches any card's actual content,
   fonts, or images — Rainer/Cocovik/CFresh are already taller than this
   floor so nothing changes for them. Value = queued-1's own bottom edge
   at each tier below, so it never depends on which card is active. */
.client-showcase-group[data-deck-state="active"] .client-showcase-inner.client-showcase-card {
  min-height: 413px;
}

/* Progressive recession — peek strips sized so logos can sit fully inside:
   ~19% / ~9% / ~6% past the active edge. No fan/rotation.

   `height` here (and on the inner card below) is fixed, NOT set by JS —
   this is the fix for queued cards' peek geometry depending on which card
   is active. JS used to force every queued card's outer height to match
   whatever the CURRENT active card measured, and since the logo/photo
   inside are positioned with top/bottom PERCENTAGES against that height,
   the same queued card would compose differently depending purely on
   which other card happened to be active at the time — never a stable,
   per-depth look. All three depths share one fixed base height (440px);
   the existing per-depth `scale()` above already shrinks queued-2/3
   uniformly (box + everything positioned inside it together), so it alone
   still produces the "consistently smaller/deeper" progression without
   needing separate height values per depth. */
.client-showcase-group[data-deck-state="queued-1"] {
  z-index: 3;
  height: 440px;
  transform: translate3d(27%, 8px, 0) scale(0.92);
  opacity: 1;
  filter: brightness(0.99);
  pointer-events: auto;
  overflow: hidden;
  border-radius: 20px;
}

.client-showcase-group[data-deck-state="queued-2"] {
  z-index: 2;
  height: 440px;
  transform: translate3d(42%, 14px, 0) scale(0.86);
  opacity: 1;
  filter: brightness(0.975);
  pointer-events: auto;
  overflow: hidden;
  border-radius: 20px;
}

.client-showcase-group[data-deck-state="queued-3"] {
  z-index: 1;
  height: 440px;
  transform: translate3d(54%, 20px, 0) scale(0.8);
  opacity: 1;
  filter: brightness(0.96);
  pointer-events: auto;
  overflow: hidden;
  border-radius: 20px;
}

/* ----- Intentional peek composition -----
   Visible band = right edge only. Logo + hero are composed inside that band
   (not “whatever falls under the active card”). Depth steps strength.
   height:100% here is what actually matters for the top/bottom % rules
   further down — this inner element (not the outer .client-showcase-group)
   is the `position:relative` containing block the absolutely-positioned
   photo-wrap/logo resolve their percentages against, and it does NOT
   inherit a block parent's height automatically, so it needs its own
   explicit height tied to the same fixed value above. */
.client-showcase-group[data-deck-state^="queued"] .client-showcase-inner.client-showcase-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  box-shadow:
    inset 1px 0 0 rgba(230, 236, 243, 0.95),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 36px -16px rgba(15, 23, 42, 0.24);
}

.client-showcase-group[data-deck-state^="queued"] .client-showcase-text > :not(.client-showcase-logo) {
  visibility: hidden;
  pointer-events: none;
}

/* Peek visual band — width matched to the exposed strip, not the full card */
.client-showcase-group[data-deck-state^="queued"] .client-showcase-photo-wrap,
.client-showcase-group[data-deck-state^="queued"] .client-showcase-visual {
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0 !important;
  min-height: 0;
  visibility: visible;
  pointer-events: none;
  overflow: hidden;
  display: block;
}

.client-showcase-group[data-deck-state^="queued"] .client-showcase-photo,
.client-showcase-group[data-deck-state^="queued"] .client-showcase-visual-stage > .client-showcase-photo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  transform: none !important;
}

.client-showcase-group[data-deck-state^="queued"] .client-showcase-visual-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: block;
}

.client-showcase-group[data-deck-state^="queued"] .client-showcase-map,
.client-showcase-group[data-deck-state^="queued"] .client-showcase-regional,
.client-showcase-group[data-deck-state^="queued"] .client-showcase-photo-accent {
  display: none !important;
}

.client-showcase-group[data-deck-state^="queued"] .client-showcase-logo {
  position: absolute;
  left: auto;
  z-index: 4;
  margin: 0 !important;
  max-height: none !important;
  width: auto;
  object-fit: contain;
  object-position: right center;
  visibility: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.95));
}

/* 1st queued — larger peek: full logo + controlled hero */
.client-showcase-group[data-deck-state="queued-1"] .client-showcase-logo {
  top: 8%;
  bottom: auto;
  right: 10px;
  left: auto;
  width: calc(100% - 20px);
  max-width: 120px;
  height: 34px !important;
  transform: none;
}

.client-showcase-group[data-deck-state="queued-1"] .client-showcase-photo-wrap,
.client-showcase-group[data-deck-state="queued-1"] .client-showcase-visual {
  top: 22%;
  bottom: 8%;
  width: 20%;
  opacity: 1;
  filter: none;
  border-radius: 0 0 18px 0;
}

/* 2nd queued — smaller peek: logo + subtle hero */
.client-showcase-group[data-deck-state="queued-2"] .client-showcase-logo {
  top: 48%;
  bottom: auto;
  right: 8px;
  width: calc(100% - 16px);
  max-width: 72px;
  height: 22px !important;
  transform: translateY(-50%);
}

.client-showcase-group[data-deck-state="queued-2"] .client-showcase-photo-wrap,
.client-showcase-group[data-deck-state="queued-2"] .client-showcase-visual {
  top: 58%;
  bottom: 10%;
  width: 11%;
  opacity: 0.72;
  filter: saturate(0.85) brightness(1.02);
  border-radius: 0 0 16px 0;
}

/* 3rd queued — deepest: mostly logo, minimal visual */
.client-showcase-group[data-deck-state="queued-3"] .client-showcase-logo {
  top: auto;
  bottom: 12%;
  right: 6px;
  width: calc(100% - 12px);
  max-width: 48px;
  height: 16px !important;
  transform: none;
}

.client-showcase-group[data-deck-state="queued-3"] .client-showcase-photo-wrap,
.client-showcase-group[data-deck-state="queued-3"] .client-showcase-visual {
  top: 28%;
  bottom: 28%;
  width: 7%;
  opacity: 0.4;
  filter: saturate(0.65) brightness(1.04);
  border-radius: 0;
}

/* Per-client hero crop — strongest identity in the peek band */
.client-showcase-group-sahith[data-deck-state^="queued"] .client-showcase-photo {
  object-position: 62% 38%;
}

.client-showcase-group-rainer[data-deck-state^="queued"] .client-showcase-photo {
  object-position: 72% 48%;
}

.client-showcase-group-cocovik[data-deck-state^="queued"] .client-showcase-visual-stage > .client-showcase-photo {
  object-position: 42% 40%;
}

.client-showcase-group-cfresh[data-deck-state^="queued"] .client-showcase-photo {
  object-position: 82% 42%;
}

.client-showcase-group[data-deck-state="queued-1"] .client-showcase-inner.client-showcase-card {
  box-shadow:
    inset 1px 0 0 rgba(230, 236, 243, 0.95),
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 20px 44px -18px rgba(15, 23, 42, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .client-showcase-stage .client-showcase-group {
    transition: opacity 0.2s linear;
  }
}

@media (max-width: 1100px) {
  .client-showcase-stage .client-showcase-group {
    width: min(72%, 780px);
  }

  .client-showcase-group[data-deck-state="active"] .client-showcase-inner.client-showcase-card {
    /* 8px translateY + 400px queued height * scale(0.92) = queued-1's bottom edge at this tier */
    min-height: 376px;
  }

  .client-showcase-group[data-deck-state="queued-1"] {
    height: 400px;
    transform: translate3d(25%, 8px, 0) scale(0.92);
  }

  .client-showcase-group[data-deck-state="queued-2"] {
    height: 400px;
    transform: translate3d(40%, 12px, 0) scale(0.86);
  }

  .client-showcase-group[data-deck-state="queued-3"] {
    height: 400px;
    transform: translate3d(52%, 18px, 0) scale(0.8);
  }

  .client-showcase-group[data-deck-state="queued-1"] .client-showcase-logo {
    max-width: 104px;
    height: 30px !important;
  }

  .client-showcase-group[data-deck-state="queued-2"] .client-showcase-logo {
    max-width: 64px;
    height: 20px !important;
  }

  .client-showcase-group[data-deck-state="queued-3"] .client-showcase-logo {
    max-width: 42px;
    height: 15px !important;
  }

  .client-showcase-group[data-deck-state="queued-1"] .client-showcase-photo-wrap,
  .client-showcase-group[data-deck-state="queued-1"] .client-showcase-visual {
    width: 19%;
  }

  .client-showcase-group[data-deck-state="queued-2"] .client-showcase-photo-wrap,
  .client-showcase-group[data-deck-state="queued-2"] .client-showcase-visual {
    width: 10%;
  }

  .client-showcase-group[data-deck-state="queued-3"] .client-showcase-photo-wrap,
  .client-showcase-group[data-deck-state="queued-3"] .client-showcase-visual {
    width: 6.5%;
  }
}

@media (max-width: 900px) {
  .client-showcase-stage .client-showcase-group {
    width: 74%;
  }

  .client-showcase-group[data-deck-state="active"] .client-showcase-inner.client-showcase-card {
    /* 6px translateY + 360px queued height * scale(0.93) = queued-1's bottom edge at this tier */
    min-height: 341px;
  }

  .client-showcase-group[data-deck-state="queued-1"] {
    height: 360px;
    transform: translate3d(22%, 6px, 0) scale(0.93);
  }

  .client-showcase-group[data-deck-state="queued-2"] {
    height: 360px;
    transform: translate3d(36%, 12px, 0) scale(0.88);
  }

  .client-showcase-group[data-deck-state="queued-3"] {
    height: 360px;
    transform: translate3d(48%, 16px, 0) scale(0.82);
  }
}

/* ===== Landscape density =====
   Rectangle silhouette with a touch more vertical room (pass B height).
   Width stays on the deck group rule; purple band stays mostly empty. */
/* Active-card logos only — queued peeks use their own depth sizes */
.client-showcase-stage .client-showcase-group[data-deck-state="active"] .client-showcase-logo {
  height: 46px !important;
  max-height: 46px;
  margin-bottom: 14px;
}

.client-showcase-stage .client-showcase-heading-row {
  gap: 12px;
  margin-bottom: 14px;
}

.client-showcase-stage .client-showcase-heading {
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.18;
}

.client-showcase-stage .client-showcase-steps {
  gap: 10px;
  margin: 0 0 16px;
}

/* Rainer: keep Order → … → Dispatch on one row */
.client-showcase-stage .client-showcase-group-rainer .client-showcase-steps {
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.client-showcase-stage .client-showcase-group-rainer .client-showcase-step {
  flex-shrink: 0;
}

.client-showcase-stage .client-showcase-group-rainer .client-showcase-step-arrow {
  flex-shrink: 0;
  width: 12px;
}

.client-showcase-stage .client-showcase-group-rainer .client-showcase-step-label {
  font-size: 11px;
  white-space: nowrap;
}

.client-showcase-stage .client-showcase-step-icon {
  width: 18px;
  height: 18px;
}

.client-showcase-stage .client-showcase-step-label {
  font-size: 12px;
}

.client-showcase-stage .client-showcase-stats {
  gap: 16px;
  margin: 0 0 14px;
}

.client-showcase-stage .client-showcase-stat-value {
  font-size: 22px;
}

.client-showcase-stage .client-showcase-closing {
  margin: 0 0 10px;
  font-size: 13px;
}

.client-showcase-stage .client-showcase-subhead {
  font-size: 13px;
  margin: 0 0 14px;
}

.client-showcase-stage .client-showcase-features {
  margin: 0 0 14px;
  gap: 6px;
}

.client-showcase-stage .client-showcase-group-sahith .client-showcase-text,
.client-showcase-stage .client-showcase-group-rainer .client-showcase-text {
  padding: 28px 10px 26px 30px;
}

/* Sahith: fill the lower dead band — tighter footer, larger photo, less bottom pad */
.client-showcase-stage .client-showcase-group-sahith .client-showcase-text {
  padding: 24px 10px 18px 28px;
}

.client-showcase-stage .client-showcase-group-sahith .client-showcase-steps {
  margin: 0 0 12px;
}

.client-showcase-stage .client-showcase-group-sahith .client-showcase-closing {
  margin: 0 0 8px;
}

.client-showcase-stage .client-showcase-group-sahith .client-showcase-photo-wrap {
  padding: 12px 16px 12px 4px;
  align-items: flex-end;
}

.client-showcase-stage .client-showcase-group-sahith .client-showcase-photo {
  max-width: min(100%, 360px);
  max-height: 340px;
}

.client-showcase-stage .client-showcase-group-rainer .client-showcase-photo-wrap {
  padding: 16px 18px 16px 4px;
}

.client-showcase-stage .client-showcase-group-rainer .client-showcase-photo {
  max-height: 320px;
}

/* C Fresh: slight size/density bump to match siblings */
.client-showcase-stage .client-showcase-group-cfresh .client-showcase-text {
  padding: 30px 12px 28px 32px;
}

.client-showcase-stage .client-showcase-group-cfresh .client-showcase-logo {
  height: 50px !important;
  max-height: 50px;
  margin-bottom: 16px;
}

.client-showcase-stage .client-showcase-group-cfresh .client-showcase-heading {
  font-size: clamp(21px, 2vw, 30px);
}

.client-showcase-stage .client-showcase-group-cfresh .client-showcase-photo-wrap {
  padding: 22px 22px 22px 6px;
}

.client-showcase-stage .client-showcase-group-cfresh .client-showcase-photo {
  max-height: 360px;
}

.client-showcase-stage .client-showcase-group-cocovik .client-showcase-inner.client-showcase-card {
  gap: 14px;
  padding: 28px 30px 24px;
}

.client-showcase-stage .client-showcase-group-cocovik .client-showcase-closing {
  margin: 0 0 10px;
  padding-top: 12px;
  font-size: 12.5px;
}

.client-showcase-stage .client-showcase-group-cocovik .client-showcase-visual-stage {
  /* Less bottom strip — accent no longer needs a tall cocoa band */
  padding: 0 148px 28px 0;
}

.client-showcase-stage .client-showcase-group-cocovik .client-showcase-visual-stage > .client-showcase-photo {
  width: min(100%, 360px);
}

.client-showcase-stage .client-showcase-group-cocovik .client-showcase-map {
  width: 290px;
}

/* Cocovik cocoa: clear of region rail / Americas text; smaller, lower-left of stage */
.client-showcase-stage .client-showcase-group-cocovik .client-showcase-photo-accent {
  width: 118px;
  max-width: 26%;
  right: auto;
  left: 4%;
  bottom: 2px;
  z-index: 2;
}

/* Rainer stats row (proof-point pair with a thin divider — only new
   element type introduced beyond Sahith's existing grammar). */
.client-showcase-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 28px;
}

.client-showcase-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #1E2433;
  line-height: 1.1;
}

.client-showcase-stat-label {
  font-size: 12.5px;
  color: #1E2433;
  margin-top: 4px;
}

.client-showcase-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(30, 112, 200, 0.25);
}

/* Sahith — same centered premium card chrome as Rainer/Cocovik. Melanger
   cutout sits on the card (already transparent asset). */
.client-showcase-group-sahith {
  justify-self: center;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.client-showcase-group-sahith .client-showcase-inner.client-showcase-card {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: 20px;
  border: 1px solid #E6ECF3;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px -18px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.client-showcase-group-sahith .client-showcase-text {
  flex: 1 1 48%;
  max-width: none;
  min-width: 0;
  align-self: center;
  box-sizing: border-box;
  padding: 36px 12px 36px 40px;
}

.client-showcase-group-sahith .client-showcase-heading {
  font-size: clamp(24px, 2.4vw, 34px);
}

.client-showcase-group-sahith .client-showcase-photo-wrap {
  flex: 1 1 52%;
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 28px 24px 8px;
  background: transparent;
  overflow: hidden;
}

.client-showcase-group-sahith .client-showcase-photo {
  position: static;
  inset: auto;
  display: block;
  width: auto;
  max-width: min(100%, 420px);
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

@media (max-width: 1100px) {
  .client-showcase-group-sahith {
    max-width: 960px;
  }

  .client-showcase-group-sahith .client-showcase-text {
    padding: 28px 24px 28px 28px;
  }

  .client-showcase-group-sahith .client-showcase-photo {
    max-width: min(100%, 360px);
    max-height: 360px;
  }
}

@media (max-width: 900px) {
  .client-showcase-group-sahith {
    max-width: 100%;
  }

  .client-showcase-group-sahith .client-showcase-inner.client-showcase-card {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .client-showcase-group-sahith .client-showcase-text {
    flex: 1 1 100%;
    max-width: none;
    order: 2;
    padding: 24px 20px 20px;
  }

  .client-showcase-group-sahith .client-showcase-photo-wrap {
    flex: 1 1 100%;
    order: 1;
    width: 100%;
    min-height: 0;
    padding: 20px 20px 8px;
  }

  .client-showcase-group-sahith .client-showcase-photo {
    max-width: min(100%, 300px);
    max-height: 300px;
  }
}

/* Rainer — same centered premium card chrome as Cocovik. Left copy +
   right product photo share one card; cutout sits on the card so it
   doesn’t read as a detached inset. */
.client-showcase-group-rainer {
  justify-self: center;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.client-showcase-group-rainer .client-showcase-inner.client-showcase-card {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: 20px;
  border: 1px solid #E6ECF3;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px -18px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.client-showcase-group-rainer .client-showcase-text {
  flex: 1 1 44%;
  max-width: none;
  min-width: 0;
  align-self: center;
  box-sizing: border-box;
  padding: 36px 12px 36px 40px;
}

.client-showcase-group-rainer .client-showcase-heading {
  font-size: clamp(24px, 2.4vw, 34px);
}

.client-showcase-group-rainer .client-showcase-photo-wrap {
  flex: 1 1 56%;
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 18px 22px 18px 4px;
  background: transparent;
  overflow: hidden;
}

.client-showcase-group-rainer .client-showcase-photo {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: none;
  /* Soft lift so the cutout sits on the card, Cocovik-style */
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

@media (max-width: 1100px) {
  .client-showcase-group-rainer {
    max-width: 960px;
  }

  .client-showcase-group-rainer .client-showcase-text {
    padding: 28px 24px 28px 28px;
  }
}

@media (max-width: 900px) {
  .client-showcase-group-rainer {
    max-width: 100%;
  }

  .client-showcase-group-rainer .client-showcase-inner.client-showcase-card {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .client-showcase-group-rainer .client-showcase-text {
    flex: 1 1 100%;
    max-width: none;
    order: 2;
    padding: 24px 20px 20px;
  }

  .client-showcase-group-rainer .client-showcase-photo-wrap {
    flex: 1 1 100%;
    order: 1;
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    padding: 16px 16px 8px;
  }

  .client-showcase-group-rainer .client-showcase-photo {
    position: static;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* C Fresh — same centered premium card chrome. Device collage on the right. */
.client-showcase-group-cfresh {
  justify-self: center;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.client-showcase-group-cfresh .client-showcase-inner.client-showcase-card {
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-radius: 20px;
  border: 1px solid #E6ECF3;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px -18px rgba(15, 23, 42, 0.14);
  /* Keep radius clip, but photo sits inset so devices/tray aren't shaved */
  overflow: hidden;
}

.client-showcase-group-cfresh .client-showcase-text {
  flex: 1 1 40%;
  max-width: none;
  min-width: 0;
  align-self: center;
  box-sizing: border-box;
  padding: 36px 8px 36px 40px;
}

.client-showcase-group-cfresh .client-showcase-heading {
  font-size: clamp(24px, 2.4vw, 34px);
}

.client-showcase-group-cfresh .client-showcase-features {
  justify-content: flex-start;
  gap: 18px 22px;
}

.client-showcase-group-cfresh .client-showcase-photo-wrap {
  flex: 1 1 60%;
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 28px 28px 28px 8px;
  background: transparent;
  overflow: visible;
}

.client-showcase-group-cfresh .client-showcase-photo {
  position: static;
  inset: auto;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.14));
}

@media (max-width: 1100px) {
  .client-showcase-group-cfresh {
    max-width: 960px;
  }

  .client-showcase-group-cfresh .client-showcase-text {
    padding: 28px 20px 28px 28px;
  }

  .client-showcase-group-cfresh .client-showcase-photo {
    max-height: 420px;
  }
}

@media (max-width: 900px) {
  .client-showcase-group-cfresh {
    max-width: 100%;
  }

  .client-showcase-group-cfresh .client-showcase-inner.client-showcase-card {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .client-showcase-group-cfresh .client-showcase-text {
    flex: 1 1 100%;
    max-width: none;
    order: 2;
    padding: 24px 20px 20px;
  }

  .client-showcase-group-cfresh .client-showcase-photo-wrap {
    flex: 1 1 100%;
    order: 1;
    width: 100%;
    min-height: 0;
    padding: 24px 20px 12px;
  }

  .client-showcase-group-cfresh .client-showcase-photo {
    max-height: 340px;
  }
}

/* Cocovik — centered premium card. Card chrome stays; inner content
   composition (features row + machine/map/rail/cocoa) matches reference. */
.client-showcase-group-cocovik {
  justify-self: center;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.client-showcase-group-cocovik .client-showcase-inner.client-showcase-card {
  gap: 18px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 36px 40px 28px;
  border-radius: 20px;
  border: 1px solid #E6ECF3;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px -18px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.client-showcase-group-cocovik .client-showcase-text {
  flex: 0 1 36%;
  max-width: 380px;
  min-width: 0;
}

.client-showcase-group-cocovik .client-showcase-heading {
  font-size: clamp(24px, 2.4vw, 34px);
}

.client-showcase-subhead {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(30, 36, 51, 0.75);
  margin: 0 0 18px;
  max-width: 42ch;
}

/* Reference: one horizontal row — icon above label */
.client-showcase-features {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.client-showcase-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.client-showcase-feature-icon {
  width: 22px;
  height: 22px;
  color: #1E70C8;
  flex-shrink: 0;
}
.client-showcase-feature-icon svg { width: 100%; height: 100%; display: block; }

.client-showcase-feature-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #1E2433;
}

.client-showcase-group-cocovik .client-showcase-closing {
  font-size: 13.5px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid #E8EEF5;
}

.client-showcase-visual {
  flex: 1 1 58%;
  min-width: 0;
  max-width: none;
}

/* Machine in flow = stage height. Map/regions/cocoa are layers on that stage. */
.client-showcase-group-cocovik .client-showcase-visual-stage {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 168px 72px 0; /* right = country rail; bottom = cocoa strip */
  box-sizing: border-box;
}

/* Machine — in-flow anchor */
.client-showcase-group-cocovik .client-showcase-visual-stage > .client-showcase-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 440px);
  max-width: none;
  height: auto;
  margin: 0;
}

/* Map — behind machine upper-right; India hub centered in crop */
.client-showcase-group-cocovik .client-showcase-map {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: 30%;
  right: auto;
  width: 340px;
  max-width: 68%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  object-position: 68% 52%;
  margin: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 68% 52%, #000 42%, transparent 90%);
  mask-image: radial-gradient(ellipse 58% 58% at 68% 52%, #000 42%, transparent 90%);
}

/* Country rail — far right mid band (red box); clear of cocoa */
.client-showcase-group-cocovik .client-showcase-regional {
  position: absolute;
  z-index: 3;
  top: 28%;
  right: 4px;
  bottom: auto;
  width: 158px;
  margin: 0;
  padding: 0;
  transform: none;
}

.client-showcase-group-cocovik .client-showcase-region-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.client-showcase-group-cocovik .client-showcase-region {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.client-showcase-group-cocovik .client-showcase-region-icon {
  width: 16px;
  height: 16px;
  color: #1E70C8;
  flex-shrink: 0;
  margin-top: 2px;
}
.client-showcase-group-cocovik .client-showcase-region-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.client-showcase-group-cocovik .client-showcase-region-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.client-showcase-group-cocovik .client-showcase-region-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1E2433;
}

.client-showcase-group-cocovik .client-showcase-region-tagline {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(30, 36, 51, 0.7);
}

/* Cocoa — bottom-right strip (blue box); not under the country list */
.client-showcase-group-cocovik .client-showcase-photo-accent {
  display: block;
  position: absolute;
  z-index: 3;
  left: auto;
  right: 8px;
  bottom: 0;
  top: auto;
  width: 210px;
  max-width: 38%;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

/* Kill leftover aside rules if any remain from prior pass — safe no-ops if unused */
.client-showcase-group-cocovik .client-showcase-aside,
.client-showcase-group-cocovik .client-showcase-photo-cluster {
  display: contents;
}

@media (max-width: 1100px) {
  .client-showcase-group-cocovik {
    max-width: 960px;
  }

  .client-showcase-group-cocovik .client-showcase-inner.client-showcase-card {
    padding: 28px 28px 24px;
  }

  .client-showcase-group-cocovik .client-showcase-visual-stage {
    padding: 0 150px 64px 0;
  }

  .client-showcase-group-cocovik .client-showcase-visual-stage > .client-showcase-photo {
    width: min(100%, 380px);
  }

  .client-showcase-group-cocovik .client-showcase-map {
    width: 300px;
    left: 28%;
    top: 4%;
  }

  .client-showcase-group-cocovik .client-showcase-regional {
    width: 145px;
    top: 26%;
    right: 0;
  }

  .client-showcase-group-cocovik .client-showcase-photo-accent {
    left: auto;
    right: 4px;
    bottom: 0;
    width: 180px;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .client-showcase-group-cocovik {
    max-width: 100%;
  }

  .client-showcase-group-cocovik .client-showcase-inner.client-showcase-card {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 20px 20px;
    border-radius: 16px;
  }

  .client-showcase-group-cocovik .client-showcase-text {
    flex: 1 1 100%;
    max-width: none;
  }

  .client-showcase-features {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 10px;
  }

  .client-showcase-feature {
    flex: 0 1 calc(50% - 10px);
  }

  .client-showcase-visual {
    flex: 1 1 100%;
  }

  .client-showcase-group-cocovik .client-showcase-visual-stage {
    padding: 0 0 120px;
  }

  .client-showcase-group-cocovik .client-showcase-visual-stage > .client-showcase-photo {
    width: min(100%, 340px);
  }

  .client-showcase-group-cocovik .client-showcase-map {
    left: auto;
    right: 0;
    top: 0;
    width: 160px;
  }

  .client-showcase-group-cocovik .client-showcase-regional {
    top: auto;
    bottom: 100px;
    right: auto;
    left: 0;
    width: 100%;
    max-width: 280px;
  }

  .client-showcase-group-cocovik .client-showcase-photo-accent {
    left: auto;
    right: 0;
    bottom: 0;
    width: 160px;
  }
}

/* ===== True mobile: same deck, scaled down (not restructured) =====
   The deck geometry above (active card ~74% of the stage, queued cards
   layered/receding behind its right edge via translate+scale) already
   works correctly at this width — it's inherited unchanged from the
   900px tier above and needs no new rules of its own. What breaks at
   phone width is that (a) the "Built for X." heading was sized for a
   desktop-width column and (b) every client card's 900px rule (above)
   switches text+photo from side-by-side to stacked, which is the
   opposite of what a "smaller version of the same card" should do — a
   242px-wide (74% of ~327px) active card can't fit a stacked photo
   above a full-height text block without scrolling for ages, but it CAN
   fit the same side-by-side composition once every font size, icon,
   image and padding in it is scaled down together. That's what this
   block does: restore row layout per client, then shrink every piece of
   "Landscape density" (the desktop-compact pass above) further.
   Decorative-only elements (Cocovik's world-map layer and cocoa-pod
   accent photo, the step-arrow connectors) are dropped rather than
   shrunk to illegible size — everything that's actual content
   (logos, headings, stats, feature/step labels, the closing line, the
   tag, the hero photo) stays, just smaller. */
@media (max-width: 640px) {
  /* ---- Section heading + lede ---- */
  #products {
    padding-top: 2rem !important;
    padding-bottom: 1.25rem !important;
  }
  #products .nav-eyebrow {
    margin-bottom: 12px !important;
  }
  .client-showcase {
    margin-top: 10px !important;
  }
  #products .main-heading.products-heading-frozen {
    font-size: clamp(18px, 5.4vw, 24px);
    gap: 0.3rem 0.45rem;
  }
  #products .products-deck-lede {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 0.35rem;
  }
  /* Freeze the domain word's box to the longest word's width ONLY here
     — on mobile's narrow column, "Built for" visibly sliding left/right
     as the domain word's width changes (justify-content:center above
     re-splits space around the whole row on every swap) was the actual
     complaint. At desktop's much larger clamp() font-size this same
     22ch slot becomes very wide, and centering a shorter word inside it
     left a large, obviously-wrong gap before "Built for" — that's a
     real desktop regression, not a matter of taste, so this now only
     applies below 640px, where the fixed-position benefit is worth the
     trade-off; desktop keeps its original per-word width (a small,
     easy-to-miss shift is preferable there to a visibly broken gap). */
  #products .products-heading-frozen > .highlight-blue {
    min-width: 22ch;
    justify-items: center;
  }

  /* ---- Card chrome: row layout restored for all four, undoing the
     900px block's column stack; smaller radius to match the smaller
     card. !important because the 900px rules above are equal
     specificity and would otherwise win on source order alone for the
     properties both blocks touch. ---- */
  .client-showcase-stage .client-showcase-group-sahith .client-showcase-inner.client-showcase-card,
  .client-showcase-stage .client-showcase-group-rainer .client-showcase-inner.client-showcase-card,
  .client-showcase-stage .client-showcase-group-cfresh .client-showcase-inner.client-showcase-card {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border-radius: 14px !important;
  }
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-inner.client-showcase-card {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px 10px !important;
    border-radius: 14px !important;
  }

  .client-showcase-stage .client-showcase-group-sahith .client-showcase-text,
  .client-showcase-stage .client-showcase-group-rainer .client-showcase-text,
  .client-showcase-stage .client-showcase-group-cfresh .client-showcase-text {
    order: 0 !important;
    flex: 1 1 48% !important;
    padding: 10px 6px 10px 12px !important;
  }
  .client-showcase-stage .client-showcase-group-sahith .client-showcase-photo-wrap,
  .client-showcase-stage .client-showcase-group-cfresh .client-showcase-photo-wrap {
    order: 0 !important;
    flex: 1 1 52% !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 8px 8px 4px !important;
  }
  .client-showcase-stage .client-showcase-group-rainer .client-showcase-photo-wrap {
    order: 0 !important;
    flex: 1 1 52% !important;
    position: relative !important;
    width: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 8px 8px 8px 4px !important;
  }
  .client-showcase-stage .client-showcase-group-rainer .client-showcase-photo {
    position: static !important;
    height: auto !important;
  }

  .client-showcase-stage .client-showcase-group-sahith .client-showcase-photo,
  .client-showcase-stage .client-showcase-group-rainer .client-showcase-photo,
  .client-showcase-stage .client-showcase-group-cfresh .client-showcase-photo {
    max-width: 120px !important;
    max-height: 120px !important;
  }

  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-text {
    flex: 1 1 46% !important;
    max-width: none !important;
  }
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-visual {
    flex: 1 1 54% !important;
  }
  /* Machine photo only — the world-map background layer and cocoa-pod
     accent photo are decorative dressing that can't survive shrinking
     to a ~120px column, so they're dropped rather than rendered as an
     illegible smear; the four feature icons plus the tag line already
     carry the "global" identity in text. */
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-visual-stage {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-visual-stage > .client-showcase-photo {
    width: auto !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-map,
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-regional,
  .client-showcase-stage .client-showcase-group-cocovik .client-showcase-photo-accent {
    display: none !important;
  }

  /* ---- Typography/icon/spacing scale-down, shared by all four ---- */
  .client-showcase-stage .client-showcase-group[data-deck-state="active"] .client-showcase-logo {
    height: 20px !important;
    max-height: 20px !important;
    margin-bottom: 6px !important;
  }
  .client-showcase-stage .client-showcase-heading-row {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .client-showcase-stage .client-showcase-rule {
    display: none !important;
  }
  .client-showcase-stage .client-showcase-heading {
    font-size: clamp(10.5px, 3.4vw, 13px) !important;
    line-height: 1.2 !important;
  }
  .client-showcase-stage .client-showcase-steps {
    gap: 5px !important;
    margin: 0 0 6px !important;
    flex-wrap: wrap !important;
  }
  .client-showcase-stage .client-showcase-step {
    flex: 1 1 calc(50% - 5px) !important;
  }
  .client-showcase-stage .client-showcase-step-icon,
  .client-showcase-stage .client-showcase-feature-icon,
  .client-showcase-stage .client-showcase-tag-icon {
    width: 11px !important;
    height: 11px !important;
  }
  .client-showcase-stage .client-showcase-step-label,
  .client-showcase-stage .client-showcase-feature-label {
    font-size: 8px !important;
  }
  /* Connector arrows are decorative between-step ornaments, not
     content — dropped so steps can wrap 2-per-row without an
     arrow stranded at a row edge. */
  .client-showcase-stage .client-showcase-step-arrow {
    display: none !important;
  }
  .client-showcase-stage .client-showcase-stats {
    gap: 10px !important;
    margin: 0 0 6px !important;
  }
  .client-showcase-stage .client-showcase-stat-value {
    font-size: 13px !important;
  }
  .client-showcase-stage .client-showcase-stat-label {
    font-size: 8px !important;
  }
  .client-showcase-stage .client-showcase-closing,
  .client-showcase-stage .client-showcase-subhead {
    font-size: 8px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    padding-top: 6px !important;
  }
  .client-showcase-stage .client-showcase-features {
    gap: 4px !important;
    margin: 0 0 6px !important;
  }
  .client-showcase-stage .client-showcase-tag {
    font-size: 7.5px !important;
    gap: 4px !important;
  }
}
    :root {
      --color-bg: #ffffff;
      --color-navy: #1E2433;
      --color-navy-muted: #1E2433;
      --color-blue: #1E70C8;
      --color-blue-glow: rgba(30, 112, 200, 0.15);
      --color-gray: #3D4660;
      --color-gray-light: #B8BFD0;
      --color-border: #E2E8F0;
      --color-border-card: #CCDFF7;

      --font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

      --shadow-card:
        0 20px 40px -15px rgba(30, 112, 200, 0.05),
        0 15px 30px -10px rgba(0, 0, 0, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.01);

      --shadow-card-hover:
        0 30px 60px -15px rgba(30, 112, 200, 0.12),
        0 20px 40px -10px rgba(0, 0, 0, 0.06),
        0 1px 5px rgba(0, 0, 0, 0.02);

      --shadow-logo-card:
        0 10px 25px -5px rgba(0, 0, 0, 0.02),
        0 1px 3px rgba(0, 0, 0, 0.01);

      --shadow-logo-card-hover:
        0 20px 35px -10px rgba(30, 112, 200, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.02);
    }

    #our-story-section * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #our-story-section {
      background-color: var(--color-bg);
      font-family: var(--font-family);
      color: var(--color-navy);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .section-wrapper {
      position: relative;
      width: 100%;
      padding: 3.5rem 0 10rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2.5rem;
      position: relative;
      z-index: 10;
    }

    .bg-gradients {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 15% 25%, rgba(0, 82, 255, 0.03) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(0, 82, 255, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 82, 255, 0.01) 0%, transparent 70%);
    }

    .parallax-decor {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      will-change: transform;
      transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .parallax-content {
      position: relative;
      will-change: transform;
      transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
    }

    @media (hover: none),
    (pointer: coarse) {

      .parallax-decor,
      .parallax-content {
        will-change: auto;
        transition: none;
      }
    }

    .decor-dot-grid {
      width: 260px;
      height: 260px;
      background-image: radial-gradient(rgba(0, 82, 255, 0.08) 1.5px, transparent 1.5px);
      background-size: 20px 20px;
      opacity: 0.85;
    }

    .decor-circle {
      display: block;
      width: 480px;
      height: 480px;
      will-change: transform;
    }

    @keyframes slowFloatLeft {
      0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }

      50% {
        transform: translate3d(-10px, 15px, 0) rotate(3deg);
      }

      100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }
    }

    @keyframes slowFloatRight {
      0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }

      50% {
        transform: translate3d(15px, -12px, 0) rotate(-3deg);
      }

      100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }
    }

    .decor-circle.left-circle {
      animation: slowFloatLeft 22s ease-in-out infinite;
    }

    .decor-circle.right-circle {
      animation: slowFloatRight 28s ease-in-out infinite;
    }

    .decor-dot-grid.top-grid {
      animation: slowFloatRight 18s ease-in-out infinite;
    }

    .decor-dot-grid.bottom-grid {
      animation: slowFloatLeft 24s ease-in-out infinite;
    }

    .top-label-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 22px;
    }

    .top-label-line {
      width: 22px;
      height: 1.5px;
      background-color: var(--color-blue);
      border-radius: 1px;
    }

    .top-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: var(--color-blue);
      text-transform: uppercase;
    }

    .nav-eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #1E70C8;
    }

    .nav-eyebrow-line {
      width: 22px;
      height: 1.5px;
      background-color: #1E70C8;
      border-radius: 1px;
      flex-shrink: 0;
    }

    .section-label-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 0 auto 28px auto;
      gap: 24px;
    }

    .section-label-line {
      flex-grow: 1;
      height: 1px;
      border: none;
    }

    .section-label-line.left {
      background: linear-gradient(90deg, rgba(0, 82, 255, 0) 0%, rgba(0, 82, 255, 0.18) 100%);
    }

    .section-label-line.right {
      background: linear-gradient(90deg, rgba(0, 82, 255, 0.18) 0%, rgba(0, 82, 255, 0) 100%);
    }

    .section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--color-blue);
      white-space: nowrap;
      text-transform: uppercase;
    }

    .blue-divider {
      width: 40px;
      height: 2px;
      background-color: var(--color-blue);
      margin: 0 auto 32px auto;
      border-radius: 2px;
    }

    .main-heading {
      font-size: clamp(32px, 3.2vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      color: var(--color-navy);
      text-align: center;
      letter-spacing: -0.03em;
      max-width: 900px;
      margin: 0 auto 18px auto;
    }

    #services .main-heading {
      font-size: clamp(24px, 2.4vw, 36px);
    }

    .main-heading span.highlight-blue {
      color: var(--color-blue);
    }

    .heading-divider {
      width: 48px;
      height: 3px;
      background-color: var(--color-blue);
      margin: 0 auto 36px auto;
      border-radius: 2px;
    }

    .intro-bold {
      font-size: 17px;
      font-weight: 500;
      line-height: 1.6;
      color: var(--color-gray);
      text-align: center;
      max-width: 560px;
      margin: 0 auto 24px auto;
      letter-spacing: normal;
    }

    .intro-p {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      color: var(--color-gray);
      text-align: center;
      max-width: 720px;
      margin: 0 auto;
    }

    .blue-statement {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-navy);
      text-align: center;
      margin: 0 auto 24px auto;
      letter-spacing: normal;
    }

    .philosophy-statement {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.6;
      color: var(--color-navy);
      text-align: center;
      max-width: 860px;
      margin: 0 auto 32px auto;
      letter-spacing: normal;
    }

    .philosophy-statement .highlight-blue {
      color: var(--color-blue);
    }

    .experience-text {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      color: var(--color-gray);
      text-align: center;
      margin-top: 24px;
      letter-spacing: normal;
    }

    @keyframes textGlow {
      0% {
        text-shadow: 0 0 0px rgba(0, 82, 255, 0);
      }

      50% {
        text-shadow: 0 0 10px rgba(0, 82, 255, 0.15);
      }

      100% {
        text-shadow: 0 0 0px rgba(0, 82, 255, 0);
      }
    }

    .highlight-blue,
    .blue-statement {
      animation: textGlow 5s ease-in-out infinite;
    }

    
    .wave-headline .highlight-blue {
      animation: none;
    }

    .quote-card-parallax-wrapper {
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      z-index: 10;
    }

    @keyframes quoteFloat {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }

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

    .quote-card {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      background-color: #EEF5FD;
      border-radius: 0 10px 10px 0;
      border-left: 3px solid var(--color-blue);
      padding: 24px 32px;
      box-shadow: none;
      animation: quoteFloat 6s ease-in-out infinite;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    .quote-card:hover {
      animation-play-state: paused;
      transform: translateY(-4px);
      box-shadow: var(--shadow-card-hover);
    }

    .quote-icon-container {
      flex-shrink: 0;
      color: var(--color-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    @keyframes iconPulse {
      0% {
        transform: scale(1);
        opacity: 0.9;
      }

      50% {
        transform: scale(1.06);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 0.9;
      }
    }

    .quote-icon {
      animation: iconPulse 4s ease-in-out infinite;
    }

    .quote-text {
      font-size: 16px;
      font-weight: 500;
      font-style: italic;
      color: var(--color-navy);
      line-height: 1.7;
      margin: 0;
      letter-spacing: normal;
    }

    .founding-card .founding-quote-text {
      font-size: clamp(19px, 2vw, 24px);
      font-weight: 600;
      font-style: normal;
      color: var(--color-navy);
      line-height: 1.5;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .founding-card .founding-quote-text .highlight-blue {
      color: var(--color-blue);
    }

    .quote-card.founding-card {
      padding: 36px 40px;
      border-radius: 0 12px 12px 0;
    }

    .company-cards-wrapper {
      width: 100%;
      max-width: 820px;
      margin: 0 auto;
      z-index: 10;
    }

    .company-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      width: 100%;
    }

    .company-card {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 2.25rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 110px;
      box-shadow: var(--shadow-logo-card);
      border: 1px solid var(--color-border-card);
      transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    .company-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: var(--shadow-logo-card-hover);
      border-color: rgba(0, 82, 255, 0.16);
    }

    .company-card svg,
    .company-card img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 34px;
      flex-shrink: 0;
      display: block;
      overflow: visible;
      object-fit: contain;
      transition: filter 0.3s ease;
    }

    .company-card .logo-building {
      color: var(--color-blue);
      stroke: currentColor;
      stroke-width: 1.5;
    }

    .fade-in-up {
      opacity: 0;
      transform: translateY(24px);
      will-change: transform, opacity;
      transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .fade-in-up.active {
      opacity: 1;
      transform: translateY(0);
    }

    .delay-heading {
      transition-delay: 0.1s;
    }

    .delay-divider {
      transition-delay: 0.2s;
    }

    .delay-bold {
      transition-delay: 0.35s;
    }

    .delay-p1 {
      transition-delay: 0.45s;
    }

    .delay-p2 {
      transition-delay: 0.55s;
    }

    .divider-fade {
      opacity: 0;
      will-change: opacity;
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .divider-fade.active {
      opacity: 1;
    }

    .company-cards-grid .company-card {
      opacity: 0;
      transform: translateY(18px);
    }

    .company-cards-grid.active .company-card {
      opacity: 1;
      transform: translateY(0);
    }

    .company-cards-grid.active .company-card:nth-child(1) {
      transition-delay: 0.05s;
    }

    .company-cards-grid.active .company-card:nth-child(2) {
      transition-delay: 0.15s;
    }

    .company-cards-grid.active .company-card:nth-child(3) {
      transition-delay: 0.25s;
    }

    .company-cards-grid.active .company-card:nth-child(4) {
      transition-delay: 0.35s;
    }

    .company-cards-grid.active .company-card:nth-child(5) {
      transition-delay: 0.45s;
    }

    @media (prefers-reduced-motion: reduce) {

      .fade-in-up,
      .divider-fade,
      .company-cards-grid .company-card {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    @media (max-width: 1024px) {
      .section-wrapper {
        padding: 3rem 0 8rem;
      }

      .quote-card {
        padding: 1.75rem 2rem;
      }

      .company-cards-grid {
        gap: 1rem;
      }

      .company-card {
        height: 100px;
        padding: 1.75rem 1rem;
      }
    }

    @media (max-width: 768px) {
      .section-wrapper {
        padding: 2.5rem 0 6rem;
      }

      .container {
        padding: 0 1.5rem;
      }

      .main-heading {
        line-height: 1.2;
      }

      .heading-divider {
        margin: 1.75rem auto 2.25rem auto;
      }

      .intro-bold {
        margin-bottom: 2rem;
      }

      .intro-p {
        line-height: 1.65;
      }

      .quote-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 1.5rem;
        border-left-width: 3px;
      }

      .philosophy-statement {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 2.5rem;
      }

      .section-label {
        padding: 0 1rem;
      }

      .company-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
      }

      .company-card {
        height: 90px;
        border-radius: 16px;
      }

      .decor-circle {
        width: 320px;
        height: 320px;
      }
    }

    #app-wrapper *,
    #app-wrapper *::before,
    #app-wrapper *::after {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: #e5e7eb;
    }

    #app-wrapper {
      font-family: 'Inter', 'Manrope', 'Plus Jakarta Sans', sans-serif;
      background-color: #F8FAFC;
      background-image: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F1F5F9 100%);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    #app-wrapper {
      width: 100%;
      overflow-x: hidden;
    }

    #app {
      width: 100%;
      max-width: 1680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
    }

    /* The 3 inactive carousel cards stay mounted (position:absolute,
       centered via top:50%/translate(-50%,-50%) same as the active card)
       so they're ready to swipe in. When one of them is taller than the
       currently active card, its top/bottom edges genuinely extend past
       #cards-container's own bounds — and since every ancestor up to
       #app-wrapper is overflow:visible, that unclipped extent inflates
       their scrollHeight all the way up the chain, even though the taller
       card is invisible (opacity:0 while peeking on mobile). #app-wrapper
       is overflow-y:auto, so that phantom scrollHeight became a real,
       independently-scrollable nested container with no visible content to
       justify it. Clipping here — the narrowest element that actually
       wraps just the 4 cards, not the nav buttons (siblings of this under
       .carousel-outer, unaffected) — stops the inflation at its source
       without changing anything a user can see: peek cards are already
       invisible on mobile and correctly bounded for the desktop peek
       effect within the container's own footprint. */
    #cards-container {
      overflow: hidden;
    }

    .carousel-card {
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
      contain: layout paint;
    }

    /* While the window is actively being resized, snap card size/position
       instantly instead of easing every intermediate frame — prevents the
       card visibly "chasing" the cursor during a drag-resize. Discrete
       interactions (prev/next, swipe) are untouched since they never add
       this class. */
    #cards-container.is-resizing .carousel-card {
      transition: none !important;
    }

    /* Subtle recede on the peeking side cards so they read as receding
       into the background rather than just smaller/dimmer. */
    .carousel-card.card-left::after,
    .carousel-card.card-right::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.28);
    }

    .dash-card {
      opacity: 0.85;
      transform: translate3d(0, 14px, 0) scale(0.98);
      transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
      backface-visibility: hidden;
    }

    .dash-card.dash-card-in {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    .dash-card.dash-done {
      will-change: auto;
    }

    .dashboard-inner .wf-node {
      transition-duration: 450ms;
      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dash-container {
      perspective: 1500px;
    }

    .transform-style-3d {
      transform-style: preserve-3d;
    }

    .nav-btn {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .carousel-outer {
      height: 660px;
    }

    @media (min-width: 768px) and (min-height: 500px) {
      .carousel-outer {
        height: clamp(660px, 80vh, 680px);
      }
    }

    .nav-btn {
      width: 48px;
      height: 48px;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      border-color: #E2E8F0 !important;
      color: #94A3B8;
    }

    .nav-btn svg {
      width: 20px;
      height: 20px;
    }

    #prev-btn {
      left: 4%;
    }

    #next-btn {
      right: 4%;
    }

    @media (min-width: 768px) and (min-height: 500px) {
      #prev-btn {
        left: 6%;
      }

      #next-btn {
        right: 6%;
      }
    }

    .nav-btn:hover {
      transform: scale(1.06) translateY(-50%);
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
      color: #475569;
      background-color: #ffffff;
    }

    .nav-btn:active {
      transform: scale(0.95) translateY(-50%);
    }

    /* Mobile-only carousel affordance: the same #prev-btn/#next-btn
       elements desktop uses (Tailwind's `hidden md:flex` keeps them
       display:none below 768px normally) are shown here with a
       completely different presentation — a small, subtle chevron glyph
       anchored near the top of the animation area, mostly sitting in the
       existing empty gutter beside the card (16-34px at these widths,
       measured directly) rather than a solid floating button mid-card.
       Reuses the exact same click handlers in js/src/18-services-dash-
       carousel.js (currentIndex/updateCarousel()) untouched — only this
       element's own size/position/style changes here, nothing about the
       carousel's sizing, swipe handling, height sync, or the #cards-
       container overflow fix is touched. #app-wrapper prefix needed to
       beat Tailwind's ID-boosted `hidden`/`top-1/2`/etc utility classes. */
    @media (max-width: 767px), (max-height: 499px) {
      #app-wrapper #prev-btn,
      #app-wrapper #next-btn {
        display: flex !important;
        top: 130px !important;
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--text-light, #6b7280);
        opacity: .5;
      }

      #app-wrapper #prev-btn {
        left: 2px !important;
        justify-content: flex-start !important;
      }

      #app-wrapper #next-btn {
        right: 2px !important;
        justify-content: flex-end !important;
      }

      #app-wrapper #prev-btn svg,
      #app-wrapper #next-btn svg {
        width: 22px !important;
        height: 22px !important;
        filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .18));
      }

      /* Tap feedback without the desktop hover's translateY(-50%) — this
         version doesn't rely on that transform for vertical centering
         (fixed `top` above does it instead), so re-adding it here would
         shift the button off its intended position on tap. */
      #app-wrapper #prev-btn:active,
      #app-wrapper #next-btn:active {
        transform: scale(0.92) !important;
        opacity: .85;
      }
    }

    .carousel-card .card-left-side,
    .carousel-card .card-right-side {
      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .carousel-card.card-left .card-left-side,
    .carousel-card.card-right .card-left-side {
      opacity: 0.5;
      filter: saturate(0.7);
    }

    .carousel-card:not(.card-active) .side-teaser-fade {
      opacity: 0;
    }

    .carousel-card:not(.card-active) .side-teaser-mask {
      -webkit-mask-image: linear-gradient(to right, black 0%, black 55%, transparent 92%);
      mask-image: linear-gradient(to right, black 0%, black 55%, transparent 92%);
    }

    .carousel-card.card-right:not(.card-active) .side-teaser-mask {
      -webkit-mask-image: linear-gradient(to left, black 0%, black 55%, transparent 92%);
      mask-image: linear-gradient(to left, black 0%, black 55%, transparent 92%);
    }

    .carousel-card:not(.card-active) .dash-container {
      opacity: 0.35;
      filter: saturate(0.5);
      pointer-events: none;
    }

    .wf-glow {
      filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.6));
    }

    .ai-pulse-circle {
      animation: pulse-ring 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    @keyframes pulse-ring {
      0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
      }

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

    .ai-pulse-circle {
      will-change: transform, opacity;
    }

    .dashboard-inner {
      will-change: transform;
      transform: translateZ(0);
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 767px), (max-height: 499px) {
      .bruhm-mobile-card {
        border-radius: 2rem !important;
        padding: 2rem 1.5rem !important;
      }

      .bruhm-mobile-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
      }
    }
.texture-grid {
    background-image: linear-gradient(rgba(17, 17, 17, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
}


.transition-standard {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


#services {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}




:root {
    --primary: #1c64f2;
    --text-dark: #0a1128;
    --text-gray: #4b5563;
    --text-light: #6b7280;
    --bg-color: #f9fafb;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --success: #10b981;
}





.carousel-container {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.02);
    display: grid;
    overflow-y: auto;

    margin: 0 auto;
}


.carousel-container::-webkit-scrollbar {
    width: 6px;
}

.carousel-container::-webkit-scrollbar-track {
    background: transparent;
}

.carousel-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}


.left-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cs-left-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.cs-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--intel-blue);
    text-transform: uppercase;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

/* Custom Software's card renders narrower than ERP's/Applied AI's
   (its right-panel visual is smaller), so its .left-col sits at the
   clamp(230px, 30%, 380px) rule's 230px floor even at wide viewports —
   this isn't a viewport-width thing a vw-based clamp (like the other
   cards use) can track, since it depends on this card's own rendered
   width, not the window's. "Custom Software" is also longer than "ERP
   Solutions"/"Applied AI", so at a shared vw-based size it wrapped to
   two lines inside that narrower column. Sizing from the column's own
   width via a container query fixes both at once: it shrinks exactly
   as much as this specific column needs, no more, and still reaches
   the same ~36px as the other three once the column is wide enough. */
[data-index="0"] .left-col {
    container-type: inline-size;
}

.cs-heading {
    font-size: clamp(18px, 8.7cqw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--near-black);
    margin: 0;
    flex: 0 0 auto;
}

.cs-heading-accent {
    color: var(--intel-blue);
}

/* Tagline role — the same shape as ERP's/Applied AI's: two stacked
   phrases, blue then near-black, both bold. Custom Software previously
   had no equivalent element at all (the "your business." accent lived
   inside the main heading instead); this replaces that pattern now
   that "Custom Software" itself is the big heading, matching the other
   three cards' structure. */
.cs-tagline {
    margin: 0 0 10px;
    max-width: 380px;
}

.cs-tagline span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--intel-blue);
    line-height: 1.3;
}

.cs-tagline span.dark {
    color: var(--near-black);
}

.cs-rule {
    width: 44px;
    height: 3px;
    background: var(--intel-blue);
    border-radius: 999px;
    opacity: 0.9;
    margin: 12px 0 10px;
    flex: 0 0 auto;
}

.cs-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--near-black);
    margin: 0 0 16px;
    max-width: 400px;
    flex: 0 0 auto;
}

.cs-desc-mobile {
    display: none;
    font-size: 14px;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0 0 16px;
    flex: 0 0 auto;
}

.cs-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
}

.cs-feature-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
}

.cs-feature-chevron {
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    color: var(--intel-blue);
    flex-shrink: 0;
}

.cs-feature-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--near-black);
    letter-spacing: -0.01em;
}

.cs-feature-sub {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 2px;
}

.cs-builtfor {
    margin-top: auto;
    background: rgba(30, 112, 200, .08);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.cs-bf-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--intel-blue);
    margin-bottom: 6px;
}

.cs-bf-list {
    font-size: 14px;
    font-weight: 600;
    color: var(--near-black);
    line-height: 1.4;
}

.cs-mobile-supporting {
    display: none;
    flex-direction: column;
    gap: 16px;
}


.right-col {
    display: flex;
    flex-direction: column;
    background-color: #fafbfc;
}

.right-header {
    text-align: center;
}

.right-header h3 {
    font-weight: 700;
    color: var(--text-dark);
}

.cs-stage {
    position: relative;
    flex: 1 1 auto;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    overflow: hidden;
    min-height: 640px;
}

.cs-breath {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
}


.cs-rail {
    flex: 0 0 auto;
    width: clamp(100px, 11vw, 130px);
    display: flex;
    flex-direction: row;
    gap: 12px;
    position: relative;
    padding: 16px 0 16px 16px;
}

.cs-rail-track {
    position: absolute;
    left: 22px;
    top: 31px;
    bottom: 31px;
    width: 2px;
    border-radius: 2px;
    background: var(--border-color);
}

.cs-rail-fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--intel-blue);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0.9;
}

.cs-rail-dots {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.cs-rail-dot {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--white);
    z-index: 2;
    transition: box-shadow .15s var(--ease);
}

.cs-rail-dot-fill {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--intel-blue);
    opacity: 0;
}

.cs-rail-labels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
    min-width: 0;
}

.cs-rail-num {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #cbd5e1;
}

.cs-rail-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin-top: 1px;
    color: #cbd5e1;
}

.cs-rail-sub {
    font-size: 8.5px;
    font-weight: 400;
    line-height: 1.35;
    margin-top: 2px;
    color: #cbd5e1;
}

.cs-rail-label.is-reached .cs-rail-num {
    color: var(--text-light);
}

.cs-rail-label.is-reached .cs-rail-text {
    color: var(--text-dark);
}

.cs-rail-label.is-reached .cs-rail-sub {
    color: var(--text-light);
}

.cs-rail-label.is-active .cs-rail-num {
    color: var(--intel-blue);
}

.cs-rail-label.is-active .cs-rail-text {
    color: var(--near-black);
}

.cs-rail-label.is-active .cs-rail-sub {
    color: var(--text-light);
}


.cs-mobile-step {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 8px;
}

.cs-mobile-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--intel-blue);
}

.cs-mobile-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--near-black);
}


.cs-viewport {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
    min-width: 0;
    margin-bottom: 8px;
}

.cs-blueprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    filter: grayscale(1) brightness(1.32) contrast(0.92);
}

.cs-hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity, transform;
}

.cs-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background: linear-gradient(to top, rgba(10, 12, 22, .52), rgba(10, 12, 22, 0));
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

.cs-job-tag {
    position: absolute;
    top: clamp(12px, 4%, 20px);
    left: clamp(12px, 4%, 20px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .06);
    opacity: 0;
    z-index: 6;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    pointer-events: none;
}

.cs-job-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--intel-blue);
    flex: 0 0 7px;
}

.cs-caption {
    position: absolute;
    left: clamp(14px, 5%, 24px);
    bottom: clamp(14px, 5%, 22px);
    max-width: min(80%, 400px);
    opacity: 0;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.cs-caption-title {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.cs-caption-sub {
    font-size: clamp(11px, 1.3vw, 13px);
    font-weight: 400;
    opacity: .9;
    margin-top: 4px;
}


.cs-rfq-card {
    position: absolute;
    left: clamp(14px, 5%, 26px);
    top: clamp(14px, 5%, 24px);
    width: clamp(200px, 60%, 270px);
    max-width: calc(100% - 28px);
    opacity: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 12px 32px rgba(17, 17, 17, .10);
    border-radius: 14px;
    padding: 14px;
    z-index: 6;
    pointer-events: none;
}

.cs-rfq-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-rfq-icon {
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(30, 112, 200, .1);
    align-items: center;
    justify-content: center;
    color: var(--intel-blue);
    flex: 0 0 28px;
    font-size: 12px;
}

.cs-rfq-top-text {
    flex: 1;
    min-width: 0;
}

.cs-rfq-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--near-black);
}

.cs-rfq-sub {
    font-size: 11px;
    color: var(--text-light);
}

.cs-rfq-check {
    display: flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 18px;
    font-size: 9px;
}

.cs-rfq-file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.cs-rfq-filename {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
    flex: 1;
}

.cs-rfq-verified {
    font-size: 10px;
    font-weight: 600;
    color: #158055;
}

.cs-rfq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.cs-rfq-grid-label {
    font-size: 10px;
    color: var(--text-light);
    margin-bottom: 2px;
}

.cs-rfq-grid-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--near-black);
}

.cs-rfq-grid-accent {
    color: var(--intel-blue);
}


.cs-dash-card {
    position: absolute;
    left: clamp(12px, 4%, 24px);
    right: clamp(12px, 4%, 24px);
    bottom: clamp(14px, 5%, 22px);
    opacity: 0;
    z-index: 7;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17, 17, 17, .10);
    padding: 14px 16px;
    pointer-events: none;
}

.cs-dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cs-dash-top-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--near-black);
}

.cs-dash-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--intel-blue);
}

.cs-dash-order {
    font-size: 11px;
    color: var(--text-light);
}

.cs-dash-stepper {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.cs-dash-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
    white-space: nowrap;
}

.cs-dash-step-icon {
    display: flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    font-size: 8px;
}

.cs-dash-step--done .cs-dash-step-icon {
    background: var(--success);
    color: #fff;
}

.cs-dash-step-icon--active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--intel-blue);
    background: rgba(30, 112, 200, .1);
}

.cs-dash-step-icon--pending {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.cs-dash-step--pending {
    color: var(--text-light);
}

.cs-dash-step-line {
    flex: 1;
    height: 1.5px;
    background: var(--border-color);
    min-width: 12px;
}

.cs-dash-stats {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.cs-dash-stat-label {
    font-size: 10px;
    color: var(--text-light);
    margin-bottom: 1px;
}

.cs-dash-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--near-black);
}


.cs-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--border-color);
    z-index: 19;
}

.cs-progress-fill {
    height: 100%;
    background: var(--intel-blue);
    width: 0%;
}


.cs-controls {
    position: absolute;
    top: clamp(10px, 3.5%, 16px);
    right: clamp(10px, 3.5%, 16px);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.cs-ctrl-btn {
    padding: 15px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-gray);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .06);
    transition: all .15s var(--ease);
}

.cs-ctrl-btn:hover {
    background: rgba(30, 112, 200, .08);
    color: var(--intel-blue);
    border-color: var(--intel-blue);
}













@media (max-width: 767px), (max-height: 499px) {
    /* Base rule shared by both cards that use .left-col (Workflow Automation
       data-index="2" and Custom Software data-index="3"). Left as originally
       written; each card overrides what it needs via a [data-index] rule
       below with higher specificity, so neither card's override leaks to
       the other or changes this shared default itself. */
    .left-col {
        border-bottom: 1px solid var(--border-color);
        gap: 1rem;
        max-height: 46%;
        flex: 0 0 auto;
    }

    /* Workflow Automation: same "card grows naturally" approach as Custom
       Software. Its left column no longer needs the 46% height cap once the
       5 bullets and bottom "Built for" box are hidden (see
       23-workflow-automation.css) — letting it size to its own content and
       giving the animation the reclaimed space is simpler here than Custom
       Software's display:contents reorder, since Workflow's mobile
       composition doesn't need to interleave left-column content with the
       animation in a new order — it just needs room to breathe. */
    [data-index="2"] .left-col {
        max-height: none;
        /* The shared .left-col rule sets gap:1rem (16px) as flex-gap
           between every direct child (h3, tagline, description) — that was
           stacking on top of each element's own margin-bottom, so
           tightening the margins alone left an 18px gap either way.
           Overriding gap here is safe for Custom Software: its .left-col
           is display:contents, which removes the flex box entirely, so
           gap has no effect there regardless of this rule's value. */
        gap: 4px;
    }

    /* Tailwind's p-6 gives .left-col 24px of padding on every side; the
       bottom 24px plus .wf-right-outer's own 6px top padding was leaving a
       ~29px gap between the italic description and the animation below.
       #app-wrapper prefix needed to beat p-6's ID-boosted specificity. */
    #app-wrapper [data-index="2"] .left-col {
        padding-bottom: 16px;
    }

    /* The right side's height:100% chain (.wf-right-outer -> .wf-right-
       container -> .wf-right, all height:100% by class or inline style)
       collapses to near-zero once .wf-card-container is height:auto —
       100% of an indeterminate height resolves to auto, and being flex
       containers (each with a single child) rather than plain blocks left
       their own auto-height ambiguous even after overriding height and
       overflow. Neither wrapper needs flex behaviour — each has exactly one
       child that's already sized to fill it (w-full/h-full) — so switching
       them to block sidesteps the ambiguity entirely and lets them size to
       their content the normal block way.
       #app-wrapper prefix needed: both also carry Tailwind's `h-full`
       utility, compiled at ID-level specificity in this build. */
    #app-wrapper [data-index="2"] .wf-right-outer {
        display: block;
        height: auto;
        overflow: visible;
        /* Still a flex item of .wf-card-container (flex-col) regardless of
           its own display:block above — Tailwind's `flex-1` utility
           (flex:1 1 0%) pins its hypothetical size to 0 along that column's
           main axis, which an auto-height container has no extra space to
           grow it back out of. flex:0 0 auto sizes it by content instead,
           the same way a plain block child would. */
        flex: 0 0 auto;
        /* Reclaim width for the step-card grid: Tailwind's p-3 gives 12px
           on every side by default here. */
        padding: 6px !important;
    }

    #app-wrapper [data-index="2"] .wf-right-container {
        display: block;
        height: auto;
        overflow: visible;
        /* This element carries inline style="container-type: size", which
           establishes strict CSS size containment (contain:size layout
           style) for its container-query children — by definition it can
           no longer size itself from its own content and needs its size
           handed down from outside. That's exactly what height:100% did on
           desktop, chained back to a real pixel height; once the chain
           above is auto-height on mobile there's nothing to hand down, so
           it collapses to ~0 regardless of the height:auto/overflow rules
           above. !important is required to beat the inline style. */
        container-type: normal !important;
    }

    [data-index="2"] .wf-right {
        height: auto !important;
        overflow-y: visible !important;
        /* Inline style sets padding:8px 12px — trim the horizontal side to
           give the step-card grid a few more px of usable width. */
        padding: 8px 6px !important;
    }

    /* "Built for Sahith Engineering" pill in the animation's header row.
       Shared with Applied AI (data-index="1") and Custom Software
       (data-index="3"), so scoped to [data-index="2"] only. width:auto on
       the logo means shrinking max-height alone naturally produces a
       shorter, more horizontal-looking mark at the same aspect ratio. */
    [data-index="2"] .svc-visual-caption-pill {
        padding: 3px 8px;
        gap: 5px;
    }

    [data-index="2"] .svc-visual-caption-logo {
        max-height: 13px;
    }

    [data-index="2"] .svc-visual-caption-label {
        font-size: 10px;
    }

    /* Custom Software mobile composition: headline -> animation -> supporting info.
       Scoped to this card only via [data-index="0"], which is more specific
       than the shared .left-col rule above and so overrides it here without
       touching Workflow Automation's card. Making it `display:contents`
       unwraps it so its two children (the headline block and the new
       supporting block) become direct flex items alongside .right-col,
       letting all three be reordered independently.

       #app-wrapper prefix is required throughout this block: Tailwind
       utilities in this build are compiled as "#app-wrapper :is(.X)", which
       gives them ID-level specificity that a plain class selector can never
       beat (same reason the existing #app-wrapper .carousel-card .left-col
       rule above needs it). .left-col and .right-col both carry the raw
       `flex` utility class in their markup, so any rule touching their
       `display` must match or exceed that specificity. */
    #app-wrapper [data-index="0"] .left-col {
        display: contents;
    }

    #app-wrapper [data-index="0"] .cs-left-inner {
        order: 1;
        height: auto;
        overflow-y: visible;
        /* .left-col (the box that used to carry p-6/md:p-7) is display:contents
           here, so it no longer contributes any padding — .cs-left-inner has
           to supply it directly or its content (starting with the eyebrow)
           sits flush against the card edge and clips horizontally. Bottom
           padding kept minimal — the gap to the animation below should come
           from breathing room within the animation area, not from here. */
        padding: 20px 1.5rem 4px;
    }

    [data-index="0"] .cs-eyebrow {
        font-size: 10px;
        margin-bottom: 6px;
    }

    [data-index="0"] .cs-rule {
        margin: 8px 0 8px;
    }

    /* Full desktop description is replaced by the shortened mobile version;
       the four-row feature list and the first "Built for" pill are replaced
       by the trimmed supporting block below the animation. */
    [data-index="0"] .cs-desc {
        display: none;
    }

    [data-index="0"] .cs-desc-mobile {
        display: block;
        margin-bottom: 6px;
    }

    [data-index="0"] .cs-left-inner > .cs-feature-list {
        display: none;
    }

    [data-index="0"] .cs-left-inner > .cs-builtfor {
        display: none;
    }

    /* .right-col also carries Tailwind's `!p-3` (mobile padding, compiled
       with !important) — padding here needs !important + #app-wrapper
       specificity to actually take effect instead of silently losing. */
    #app-wrapper [data-index="0"] .right-col {
        order: 2;
        padding: 0 1.5rem 1.5rem !important;
        gap: 1.5rem;
    }

    /* "System integrations" here is a static duplicate of desktop supporting
       copy (no click handler, no carousel/next-card wiring — verified in
       js/src/*.js) and the bottom "Built for <industries>" block is likewise
       secondary content, not the client identifier (that's the Rainer pill
       above the animation, which stays). Both are hidden on mobile so their
       space goes to the animation instead. */
    [data-index="0"] .cs-mobile-supporting {
        display: none;
    }

    /* Animation gets the space reclaimed from the headings, pill, and the
       now-hidden supporting block below it. */
    [data-index="0"] .cs-stage {
        min-height: 560px;
    }

    [data-index="0"] .cs-breath {
        flex-direction: column;
        padding: 0;
        gap: 6px;
    }

    [data-index="0"] .cs-rail {
        display: none !important;
    }

    [data-index="0"] .cs-mobile-step {
        display: flex !important;
    }

    [data-index="0"] .cs-viewport {
        min-height: 480px;
    }

    /* Fixed-width text pill: at narrow viewport widths its nowrap content
       can reach far enough right to overlap .cs-controls' top-right corner.
       Reserve space for the controls and let it wrap to two lines instead. */
    [data-index="0"] .cs-job-tag {
        max-width: calc(100% - 130px);
        white-space: normal;
        line-height: 1.3;
    }

    /* Custom Software's own heading — reclaim vertical space for the
       animation below. Copy is unchanged, only size/spacing. Left-aligned
       by default (no text-align rule anywhere on .cs-heading); kept that
       way deliberately when it wraps to two lines. */
    [data-index="0"] .cs-heading {
        font-size: 17px;
        line-height: 1.2;
    }

    /* New element (see base rule above) — no prior mobile treatment
       existed for it since the equivalent copy used to live inside
       .cs-heading itself. Sized down from the 18px desktop value so it
       doesn't crowd the now-compact heading above it. */
    [data-index="0"] .cs-tagline span {
        font-size: 14px;
        line-height: 1.25;
    }

    /* .svc-visual-caption-pill/-logo/-label are shared with Applied AI
       (data-index="1") and Workflow Automation (data-index="2"), so every
       rule here is scoped to [data-index="0"] only — Custom Software's own
       "Built for Rainer Engineering" pill above the animation. */
    [data-index="0"] .svc-visual-caption {
        padding: 4px 1.5rem 0;
    }

    [data-index="0"] .svc-visual-caption-pill {
        padding: 3px 8px;
        gap: 5px;
    }

    [data-index="0"] .svc-visual-caption-logo {
        max-height: 18px;
    }

    [data-index="0"] .svc-visual-caption-label {
        font-size: 11px;
    }

    /* Applied AI mobile composition (data-index="1"): same treatment as
       Workflow Automation and Custom Software — eyebrow/tagline stay,
       5 capability checks + bottom "Built for" pill hidden, description
       gets the shared italic/left-rule editorial style (no new mobile-only
       copy needed here since the existing sentence is kept as-is), and the
       right side becomes auto-height so the animation gets the reclaimed
       space. .ai-left/.ai-right-outer/.ai-right-container are new classes
       added solely for this scoping — .svc-panel-title/-tagline/-desc/
       -checks/-builtfor and the outer/container divs were otherwise
       unclassed or, in the container's case, would have reused the shared
       .inner-dashboard class (which carries a desktop-only dot-grid
       background and container-type:size) had a dedicated class not been
       added instead. */
    #app-wrapper [data-index="1"] .ai-left {
        padding: 12px 1.5rem 0;
    }

    [data-index="1"] .svc-panel-title {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        line-height: 1;
        margin: 0 0 6px;
    }

    /* One line: each span defaults to display:block (see the shared
       .svc-panel-tagline rule outside this breakpoint), which is what put
       "People lead." and "AI assists." on separate lines. flex + inline
       spans keep both phrases on one row; the font-size drop is what makes
       the full pair actually fit at these widths. */
    [data-index="1"] .svc-panel-tagline {
        margin-bottom: 6px;
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 6px;
        max-width: none;
    }

    [data-index="1"] .svc-panel-tagline span {
        display: inline;
        font-size: 15px;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Desktop's fuller sentence is replaced on mobile by the shorter
       .svc-panel-desc-mobile copy below — .svc-panel-desc itself is only
       hidden here, never edited, so desktop keeps its original text.
       Same pattern as .wf-desc-mobile / .cs-desc-mobile. */
    [data-index="1"] .svc-panel-desc {
        display: none;
    }

    #app-wrapper [data-index="1"] .svc-panel-desc-mobile {
        display: block;
        font-size: 12px;
        font-style: italic;
        line-height: 1.35;
        color: var(--text-light);
        margin: 0 0 6px;
        padding-left: 10px;
        border-left: 2px solid var(--border-color);
    }

    [data-index="1"] .svc-panel-checks {
        display: none;
    }

    [data-index="1"] .svc-panel-builtfor {
        display: none;
    }

    /* Right side: same height:auto + container-type:normal fix used for
       Workflow's .wf-right-outer/.wf-right-container — the chain would
       otherwise collapse to near-zero height once the card itself goes
       height:auto on mobile. */
    #app-wrapper [data-index="1"] .ai-right-outer {
        display: block;
        height: auto;
        overflow: visible;
        flex: 0 0 auto;
        padding: 2px !important;
    }

    /* No card look on mobile: the animation should blend with the section
       background instead of sitting in its own white/bordered/shadowed
       box, matching the other two services' mobile treatment. */
    #app-wrapper [data-index="1"] .ai-right-container {
        display: block;
        height: auto;
        overflow: visible;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* "Built for Sahith Engineering" sits inside the animation as a small,
       centered label — not a separate pill/card. No background, minimal
       padding, normal-weight sizing close to a plain header line. */
    [data-index="1"] .svc-visual-caption {
        justify-content: center !important;
        padding: 2px 22px 4px !important;
    }

    [data-index="1"] .svc-visual-caption-pill {
        background: transparent !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    [data-index="1"] .svc-visual-caption-logo {
        max-height: 20px !important;
    }

    [data-index="1"] .svc-visual-caption-label {
        font-size: 14px !important;
    }

    /* Mobile recomposition of the AI animation itself, not just its
       container. The desktop version is a fixed 680x620px canvas with every
       card position:absolute at hand-placed coordinates, uniformly shrunk
       via transform:scale() to fit. On a ~350px-wide phone that scale is
       capped at width/680 (~0.52x) no matter how tall the surrounding box
       is — the content can never exceed ~620*0.52 =~ 320px tall, so a taller
       box just becomes empty space under a small, fixed-size animation.
       Instead of scaling the whole canvas, every card is reflowed into a
       normal top-to-bottom stack at these widths — same elements, same ids,
       same JS-driven opacity/translateY reveal timeline (js/src/
       20-services-cards-anim.js only ever touches opacity/transform on
       these, never left/top/width, so this reflow doesn't fight it) — so
       each card can render at full, readable width instead of a shrunk
       miniature, and the section's height comes from real stacked content
       via the same scrollHeight sync every other mobile card already uses,
       not a scale calculation. Purely a mobile presentation change: desktop
       keeps the exact original canvas/scale/positions untouched. */
    #app-wrapper [data-index="1"] #stageWrapper {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    #app-wrapper [data-index="1"] #stageWrapper > div {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #app-wrapper [data-index="1"] #stageInner {
        position: static;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    #app-wrapper [data-index="1"] #wrapperAnim {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 2px 2px 6px;
    }

    /* The connector lines/dots (svg) and the AI-cursor micro-interaction
       are drawn relative to the fixed canvas's absolute coordinates — they
       have no meaningful position once their anchor cards reflow, so they're
       hidden on mobile. Nothing they connect is removed, only the connector
       graphic itself. */
    [data-index="1"] #wrapperAnim > svg,
    [data-index="1"] #cursorBox {
        display: none !important;
    }

    #app-wrapper [data-index="1"] #emailBox,
    #app-wrapper [data-index="1"] #extractBox,
    #app-wrapper [data-index="1"] #historyBox,
    #app-wrapper [data-index="1"] #inventoryBox,
    #app-wrapper [data-index="1"] #recBox,
    #app-wrapper [data-index="1"] #workflowBox {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* "New enquiry received" etc. — a small status chip, same treatment as
       #issueBox below: auto-width, not stretched to the card's full width. */
    #app-wrapper [data-index="1"] #statusBadge {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 100%;
        align-self: flex-start;
        margin-left: 12px;
    }

    #app-wrapper [data-index="1"] #extractBox {
        height: auto !important;
        flex-wrap: wrap;
    }

    #app-wrapper [data-index="1"] #extractBox > div {
        flex: 1 1 30%;
        min-width: 84px;
    }

    /* Shrink every card in the animation to fit its content tightly instead
       of the desktop canvas's generous padding/type scale — helps the
       whole Applied AI section land closer to a single mobile screen.
       Content, ids, and the JS-driven reveal/highlight timeline in
       js/src/20-services-cards-anim.js (opacity/transform/text only) are
       unchanged; only padding and font-size shrink. */
    #app-wrapper [data-index="1"] #emailBox {
        height: auto !important;
        padding: 10px !important;
    }
    [data-index="1"] #emailBox .mb-2\.5 {
        margin-bottom: 6px !important;
    }
    [data-index="1"] #emailBox .w-\[26px\] {
        width: 20px !important;
        height: 20px !important;
        font-size: 9.5px !important;
    }
    [data-index="1"] #hlName {
        font-size: 11.5px !important;
    }
    [data-index="1"] #emailBox .text-\[11px\] {
        font-size: 9.5px !important;
    }
    [data-index="1"] #emailBox .text-\[14px\] {
        font-size: 12.5px !important;
        margin-bottom: 4px !important;
    }
    [data-index="1"] #emailBox .text-\[13px\] {
        font-size: 11.5px !important;
        line-height: 1.4 !important;
    }

    #app-wrapper [data-index="1"] #extractBox {
        padding: 8px !important;
        gap: 6px !important;
    }
    [data-index="1"] #extractBox > div {
        padding: 5px 6px !important;
    }
    [data-index="1"] #extractBox .text-\[10px\] {
        font-size: 8.5px !important;
    }
    [data-index="1"] #extractBox .text-\[13px\] {
        font-size: 11px !important;
    }

    #app-wrapper [data-index="1"] #historyBox,
    #app-wrapper [data-index="1"] #inventoryBox {
        height: auto !important;
        padding: 10px !important;
    }
    [data-index="1"] #historyBox .mb-2,
    [data-index="1"] #inventoryBox .mb-2 {
        margin-bottom: 6px !important;
    }
    [data-index="1"] #historyBox .text-xs,
    [data-index="1"] #inventoryBox .text-xs {
        font-size: 10.5px !important;
    }
    [data-index="1"] #historyBox .text-\[13px\] {
        font-size: 11.5px !important;
    }
    [data-index="1"] #inventoryBox .text-\[11px\] {
        font-size: 10px !important;
    }

    #app-wrapper [data-index="1"] #issueBox {
        padding: 5px 12px !important;
        height: auto !important;
    }
    [data-index="1"] #issueBox .text-xs {
        font-size: 10.5px !important;
    }

    #app-wrapper [data-index="1"] #recBox {
        height: auto !important;
        padding: 10px 12px !important;
    }
    [data-index="1"] #recBox .text-\[11px\] {
        font-size: 10px !important;
    }
    [data-index="1"] #recBox .text-\[15px\] {
        font-size: 13px !important;
        margin-top: 4px !important;
    }
    [data-index="1"] #recBox .text-\[13px\] {
        font-size: 11px !important;
    }
    #app-wrapper [data-index="1"] #recBox .h-8 {
        height: 30px !important;
    }

    /* "Capacity shortfall" pill reads as a status chip, not a full-width
       card like its siblings — kept auto-width and centered instead of
       stretched edge-to-edge. */
    #app-wrapper [data-index="1"] #issueBox {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: 100%;
        align-self: center;
    }

    /* Row, not column: the 3 steps (Production job created / Schedule
       updated / Quality inspection scheduled) fit side by side at this
       width once the connector bars between them are removed and the gap/
       font are trimmed — kept as one compact line instead of stacking. */
    #app-wrapper [data-index="1"] #workflowBox {
        height: auto !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4px;
    }

    /* The thin horizontal connector bars between the 3 workflow steps only
       make sense in the desktop's single-row layout; hidden here, the 3
       step groups themselves (icon + label) are unaffected. */
    [data-index="1"] #workflowBox > .flex-1 {
        display: none !important;
    }

    [data-index="1"] #workflowBox > div {
        flex: 1 1 0;
        min-width: 0;
    }

    [data-index="1"] #workflowBox span.text-xs {
        font-size: 9.5px !important;
        white-space: normal !important;
        line-height: 1.2;
    }

    [data-index="1"] #workflowBox [id$="Bg"] {
        width: 18px !important;
        height: 18px !important;
    }

    /* ERP Solutions mobile composition (data-index="0"): same treatment as
       the other three services — 5 capability checks and the bottom
       "Built for <industries>" block hidden, description gets the shared
       italic/left-rule editorial style applied directly (copy unchanged,
       so no new duplicate element needed, same as Applied AI's
       .svc-panel-desc), header compacted to free room for the animation. */
    #app-wrapper [data-index="3"] .erp-left {
        padding: 16px 1.5rem 0;
    }

    [data-index="3"] .erp-left h1 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    [data-index="3"] .erp-left .tagline {
        font-size: 14px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    /* Desktop keeps "Run the business," and "not the spreadsheets." as two
       lines (the <b> is display:block there). On mobile the whole sentence
       reads more naturally as one line, so the <b> goes inline — its
       source markup has no space before it ("business,<b>not..."), relying
       on the block break to separate the words, so a generated space is
       added back via ::before now that it's inline. Text content itself is
       unchanged. */
    [data-index="3"] .erp-left .tagline b {
        display: inline;
    }

    [data-index="3"] .erp-left .tagline b::before {
        content: " ";
    }

    #app-wrapper [data-index="3"] .erp-left .desc {
        font-size: 12.5px;
        font-style: italic;
        line-height: 1.4;
        color: var(--text-light);
        margin: 0 0 10px;
        padding-left: 10px;
        border-left: 2px solid var(--border-color);
    }

    [data-index="3"] .erp-checks {
        display: none;
    }

    [data-index="3"] .erp-builtfor {
        display: none;
    }

    /* Animation panel: reclaim the generous desktop padding for the
       compact mobile "Built for" label and the stage itself. */
    #app-wrapper [data-index="3"] .eco-panel {
        padding: 10px 12px 12px !important;
    }

    /* "Built For" competed with the modules for attention on mobile —
       removed here (the compact text-only equivalent added in an earlier
       pass) so the 6 module cards become the clear visual focus. */
    [data-index="3"] .erp-builtfor-mobile {
        display: none !important;
    }

    /* Recompose the animation itself rather than stacking every module
       into one long column (the shared max-width:600px rule elsewhere in
       this file does that for narrower general contexts — these
       data-index="0"-scoped rules, at higher specificity, override it here
       only). VHANDL CORE becomes a compact full-width row at the top
       instead of sitting mid-canvas, and the 6 module cards wrap two-per-
       row beneath it — same modules, same content, same JS-driven status/
       progress updates (js/src/20-services-cards-anim.js only ever reads
       each node's rendered box via getBoundingClientRect(), so it doesn't
       care whether that box came from absolute canvas coordinates or a
       wrapped flex row). */
    [data-index="3"] .eco-stage {
        aspect-ratio: auto !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        min-height: 0;
    }

    /* VHANDL CORE (the large ring visualization) competed with the 6
       module cards for attention on mobile — removed so the modules become
       the clear visual focus, per this pass's intent. Its connector lines
       (.eco-lines, drawn from the core to each module) have nothing left
       to connect from, so they're hidden alongside it. The dot-grid
       backdrop stays hidden too, as before. Real-time status (.eco-sync)
       and the process timeline (#ecoTimeline) are untouched — kept exactly
       as requested. */
    [data-index="3"] .eco-core-wrap {
        display: none;
    }

    [data-index="3"] .eco-lines {
        display: none;
    }

    [data-index="3"] .eco-grid {
        display: none;
    }

    /* The space freed by removing "Built For" and VHANDL CORE goes
       directly to the 6 module cards — more breathing room per card
       instead of the cramped @container eco(max-width:400px) sizing
       further down this file, which was tuned for a much tighter budget. */
    [data-index="3"] .eco-node {
        position: static;
        width: auto;
        margin-bottom: 0;
        padding: 12px 12px 11px;
    }

    [data-index="3"] .n-title {
        font-size: 12px;
    }

    [data-index="3"] .n-sub {
        font-size: 9.5px;
    }

    [data-index="3"] .n-icon {
        width: 24px;
        height: 24px;
    }

    /* Give the real-time status line and process-flow timeline more room
       below the module grid instead of sitting cramped right under it —
       the card is auto-height (JS-driven, see js/src/18-services-dash-
       carousel.js), so this normal-flow spacing is what grows the card
       itself; nothing here touches height/scroll logic directly. Content,
       animation timing and the module grid above are unchanged. Margins
       trimmed back from an earlier pass now that the timeline below wraps
       into real rows of content instead of a thin horizontal-scroll strip
       — that reflow is what should fill the reclaimed space, not just
       empty margin. */
    [data-index="3"] .eco-sync {
        margin-top: 20px;
        padding-top: 16px;
        padding-bottom: 4px;
    }

    [data-index="3"] .eco-timeline {
        margin-top: 16px;
        padding-top: 14px;
        padding-bottom: 4px;
    }

    #app-wrapper [data-index="3"] .eco-panel {
        padding-bottom: 20px !important;
    }

    /* The 6 process steps (Order Received -> Delivered/Completed) were a
       horizontally-scrollable strip (only ~2 steps visible at a time,
       needing a sideways scroll to see the rest) — same desktop treatment
       as everywhere overflow-x:auto was used for a wide row. On mobile
       they wrap into a 2-column grid instead, so all 6 are visible at
       once; the connector arrows only made sense in a single row, so
       they're hidden here. Same steps, same JS-driven done/current state
       toggling (js/src/20-services-cards-anim.js's setTimelineStep() only
       ever toggles classes, never touches layout). */
    [data-index="3"] #ecoTimeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 10px;
        overflow-x: visible;
    }

    [data-index="3"] .tl-arrow {
        display: none;
    }

    [data-index="3"] .tl-step {
        flex-shrink: 1;
    }

    [data-index="3"] .tl-label {
        font-size: 10px;
        white-space: normal;
    }

    [data-index="3"] .tl-text {
        white-space: normal;
    }
}

/* Landscape phones (e.g. 844x390) match width >=768px, so Tailwind's own
   `md:` utilities (compiled with #app-wrapper-boosted specificity in
   08-tailwind-services.css — see the #app-wrapper .carousel-card .erp-left
   comment above for why a plain class selector can't outrank them) still
   force the desktop row layout and a fixed 420px column width there, even
   though updateCarousel() has already sized the card for its mobile
   360px-wide branch (isMobile now also checks innerHeight, see
   js/src/18-services-dash-carousel.js). A 420px column inside a 360px card
   is what caused the overlap/clipping. This block only fires below the
   same 500px height threshold the rest of this experiment uses, so tall
   viewports (including narrow-but-tall real mobile) are untouched — those
   already get the correct layout from Tailwind's own base (non-md:)
   classes or the mobile block below. Scoped to .carousel-outer, the single
   ancestor of #prev-btn/#cards-container/#next-btn, so nothing outside the
   services carousel is affected. !important matches the existing pattern
   in this file for beating Tailwind's boosted specificity (see the
   #app-wrapper [data-index="0"] .right-col rule earlier in this file). */
@media (max-height: 499px) {
    /* #app-wrapper prefix needed here too: 06-extracted-sections.css's
       mobile-chevron block (`#app-wrapper #prev-btn`, two IDs) also matches
       this same media condition and is also !important, so without an
       equal-or-higher specificity selector here that rule would still win
       and keep the chevrons visible instead of hiding them. */
    #app-wrapper .carousel-outer #prev-btn,
    #app-wrapper .carousel-outer #next-btn {
        display: none !important;
    }

    .carousel-outer .md\:flex-row {
        flex-direction: column !important;
    }

    .carousel-outer .md\:w-\[420px\] {
        width: 100% !important;
    }

    /* ERP's left column uses its own width utilities (md:w-[38%],
       md:min-w-[300px], md:max-w-[420px]) instead of the flat
       md:w-[420px] the other three cards share — same problem, same fix. */
    .carousel-outer .erp-left {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 767px), (max-height: 499px) {
    /* Page-level "Technology built around your business" heading sits above
       the whole carousel (shared by all four cards, not Custom-Software-
       specific content) — #services already scopes it to this section only,
       so this doesn't touch the Hero/About/Products headings that reuse the
       same .main-heading class. */
    #services .main-heading {
        font-size: 19px;
        line-height: 1.15;
        margin: 0 auto 6px auto;
    }
}


@media (min-width: 768px) and (min-height: 500px) {
    .carousel-container {
        height: 100%;
        width: 100%;
        max-width: 100%;
        grid-template-columns: 36% 64%;
        overflow: hidden;
    }

    .left-col {
        border-right: 1px solid var(--border-color);
    }

    /* Override the fixed md:w-[420px] Tailwind utility on .carousel-card .left-col:
       a flat 420px left column starves .right-col/.cs-stage on the peek-scaled
       carousel card (which renders well under 420px + comfortable-stage width
       at most viewports). Scale left-col with the card instead. Desktop/tablet only.
       Needs #app-wrapper-prefixed specificity to beat the generated
       "#app-wrapper :is(.md\:w-\[420px\])" utility rule. */
    #app-wrapper .carousel-card .left-col {
        width: clamp(230px, 30%, 380px);
    }

    /* Applied AI (card index 1) has no distinguishing class on its left
       panel, so it still carries the raw Tailwind md:w-[420px] utility.
       Target it structurally so it shrinks in step with .left-col above
       instead of starving #stageWrapper's visual stage. Coupled to the
       literal md:w-[420px] utility class on that div in
       src/sections/services.html — if that class is ever changed there,
       update this selector to match. */
    #app-wrapper .carousel-card[data-index="1"] .md\:w-\[420px\] {
        width: clamp(230px, 30%, 380px);
    }

    /* ERP (card index 0): same fix as above, same reason. Its old rule
       used a bare `.erp-left` selector, which is lower specificity than
       "#app-wrapper :is(.w-full)" (from the w-full class also on this
       element) and was silently losing on `width` — it only ever looked
       constrained because a separate max-width:420px happened to not be
       contested. Match .left-col's specificity pattern instead so `width`
       itself actually wins. */
    #app-wrapper .carousel-card .erp-left {
        width: clamp(230px, 30%, 380px);
    }

    .cs-eyebrow {
        margin-bottom: 10px;
    }

    .cs-rule {
        margin: 14px 0 12px;
    }

    .cs-desc {
        margin-bottom: 18px;
    }

    .cs-feature-list {
        gap: 13px;
    }

    /* Custom Software's left panel (.cs-left-inner) content is tall enough
       at common laptop heights (e.g. 1366x768, where .carousel-outer sits
       at its 660px clamp floor) to overflow and trigger the internal
       scrollbar — the other three cards' left columns have less content
       and don't hit this. Trimming this card's own padding/gaps (not the
       shared rules above, so ERP/AI/Workflow are untouched) removes the
       scrollbar at that height without needing a taller card, which would
       instead push the card's bottom off-screen on short viewports. */
    #app-wrapper [data-index="0"] .left-col {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    [data-index="0"] .cs-desc {
        margin-bottom: 10px;
    }

    [data-index="0"] .cs-feature-list {
        gap: 8px;
    }

    [data-index="0"] .cs-builtfor {
        padding: 12px 20px;
    }

    .right-col {
        padding: 1.5rem;
        justify-content: space-between;
    }

    .right-header {
        margin-bottom: 0.5rem;
    }

    .right-header h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .cs-stage {
        min-height: 540px;
        /* .carousel-card has no explicit width and is sized by shrink-to-fit
           (it's position:absolute with width:auto), so without a floor here
           the auto-sized card just shrinks along with .left-col instead of
           handing the saved space to .right-col/.cs-stage. This min-width
           forces the card wide enough for cs-rfq-card/cs-dash-card/captions. */
        min-width: 340px;
    }





    .feature-box:last-child {
        border-right: none;
    }






}

.erp-eyebrow {
    display: none;
}

.erp-left h1 {
    font-size: clamp(25px, 3.15vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--near-black);
    margin-bottom: 8px;
}

.erp-left .tagline {
    font-size: 18px;
    font-weight: 700;
    color: var(--intel-blue);
    line-height: 1.3;
    margin-bottom: 8px;
    max-width: 380px;
}

.erp-left .tagline b {
    color: var(--near-black);
    font-weight: 700;
    display: block
}

.erp-left .desc {
    font-size: 14px;
    color: var(--near-black);
    line-height: 1.5;
    margin: 0 0 12px;
    max-width: 380px;
}

.erp-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px
}

.erp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--near-black);
}

.erp-check svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px
}

.erp-builtfor {
    /* Was margin-top:auto, bottom-anchoring this box to match the taller
       diagram panel's height — on ERP's comparatively short content that
       collapsed all the slack into one ~180px dead gap above this box.
       A fixed, bounded gap reads as intentional breathing room after a
       complete block instead of an interruption mid-content. */
    margin-top: 56px;
    background: rgba(30, 112, 200, .08);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.erp-bf-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--intel-blue);
    margin-bottom: 6px;
}

.erp-bf-list {
    font-size: 14px;
    font-weight: 600;
    color: var(--near-black);
    line-height: 1.4;
}

.erp-builtfor-mobile {
    display: none;
}


.svc-panel-title {
    font-size: clamp(25px, 3.15vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--near-black);
    margin: 0 0 8px;
}

.svc-panel-tagline {
    margin-bottom: 10px;
    max-width: 380px;
}

.svc-panel-tagline span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--intel-blue);
    line-height: 1.3;
}

.svc-panel-tagline span.dark {
    color: var(--near-black);
}

.svc-panel-desc {
    font-size: 14px;
    color: var(--near-black);
    line-height: 1.5;
    margin: 0 0 16px;
    max-width: 380px;
}

.svc-panel-desc-mobile {
    display: none;
}

.svc-panel-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px
}

.svc-panel-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.svc-panel-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: var(--intel-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.svc-panel-check-icon svg {
    width: 10px;
    height: 10px;
    color: var(--white);
}

.svc-panel-check-icon--arrow {
    background: none;
}

.svc-panel-check-icon--arrow svg {
    width: 14px;
    height: 14px;
    color: var(--intel-blue);
}

.svc-panel-check-icon--outline {
    background: var(--white);
    border: 1.5px solid var(--intel-blue);
}

.svc-panel-check-icon--outline svg {
    color: var(--intel-blue);
}

.svc-panel-check-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--near-black);
    line-height: 1.4;
}

.svc-panel-builtfor {
    margin-top: auto;
    background: rgba(30, 112, 200, .08);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.svc-panel-bf-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--intel-blue);
    margin-bottom: 6px;
}

.svc-panel-bf-list {
    font-size: 14px;
    font-weight: 600;
    color: var(--near-black);
    line-height: 1.4;
}

.svc-visual-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 14px 16px 0;
}

.svc-visual-caption-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-100);
    border-radius: 999px;
    padding: 6px 14px;
}

.svc-visual-caption-logo {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.svc-visual-caption-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--near-black);
}


.erp-left {
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
}





.eco-panel {
    container-type: inline-size;
    container-name: eco;
}

.eco-stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    flex: 1;
    min-height: 280px;
    margin: 0 auto;
}

.eco-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 14px;
    background-image:
        linear-gradient(to right, rgba(30, 112, 200, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 112, 200, .05) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 48%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 68% 72% at 50% 48%, #000 30%, transparent 100%);
}


.eco-lines {
    position: absolute;
    inset: 0;
    overflow: visible
}

.eco-lines path {
    fill: none;
    stroke: var(--b300);
    stroke-width: 1.4;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
    opacity: .55
}

.eco-lines path.hot {
    stroke: var(--b400);
    opacity: .9;
    stroke-dashoffset: 0;
    animation: dashFlow 1.1s linear infinite
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -16
    }
}

.eco-lines circle.node-dot {
    fill: var(--white);
    stroke: var(--b300);
    stroke-width: 1.4
}

.eco-lines circle.node-dot.hot {
    stroke: var(--b400);
    fill: var(--b50)
}


.pulse-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--b400);
    box-shadow: 0 0 0 4px rgba(30, 112, 200, .16);
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.eco-core-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eco-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--b100);
}

.ring-1 {
    inset: -14%
}

.ring-2 {
    inset: -30%
}

.ring-3 {
    inset: -48%;
    opacity: .6
}

.eco-ring.pulse-ring {
    border-color: var(--b300);
    opacity: 0;
}

.eco-core {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--b300);
    box-shadow:
        0 1px 2px rgba(20, 60, 110, .06),
        0 18px 34px -14px rgba(30, 112, 200, .28),
        inset 0 0 0 6px rgba(238, 245, 253, .7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.eco-core.active {
    border-color: var(--b400);
    box-shadow:
        0 1px 2px rgba(20, 60, 110, .08),
        0 22px 44px -14px rgba(30, 112, 200, .4),
        inset 0 0 0 6px rgba(238, 245, 253, .85);
}

.eco-core svg {
    width: 23%;
    height: 23%;
    color: var(--b400)
}

.eco-core .core-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--g700);
    letter-spacing: -.01em;
    margin-top: 2px;
}

.eco-core .core-sub {
    font-size: 8.5px;
    font-weight: 500;
    color: var(--g400);
    letter-spacing: .01em;
}

.eco-core .core-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 8px;
    font-weight: 600;
    color: var(--green);
}

.eco-core .core-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0
}


.eco-node {
    position: absolute;
    width: clamp(88px, 32%, 130px);
    background: var(--white);
    border: 1px solid var(--g200);
    border-radius: 12px;
    padding: 10px 10px 9px;
    box-shadow: 0 2px 4px rgba(20, 60, 110, .04), 0 14px 26px -18px rgba(20, 60, 110, .22);
    transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}

.eco-node.active {
    border-color: var(--b200);
    box-shadow: 0 2px 4px rgba(20, 60, 110, .05), 0 20px 36px -16px rgba(30, 112, 200, .28);
    transform: translateY(-2px) scale(1.025);
}

.n-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px
}

.n-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--b50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .35s var(--ease);
}

.n-icon svg {
    width: 13px;
    height: 13px;
    color: var(--b400)
}

.eco-node.active .n-icon {
    background: var(--b400)
}

.eco-node.active .n-icon svg {
    color: #fff
}

.n-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--g700);
    letter-spacing: -.005em
}

.n-sub {
    font-size: 9.5px;
    color: var(--g400);
    font-weight: 500;
    margin-bottom: 6px;
    min-height: 12px;
    line-height: 1.2
}

.n-bar {
    height: 4px;
    border-radius: 3px;
    background: var(--g100);
    overflow: hidden;
    margin-bottom: 6px
}

.n-bar i {
    display: block;
    height: 100%;
    width: 8%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--b300), var(--b400));
    transition: width .55s var(--ease);
}

.n-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--g400);
}

.n-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g300);
    flex-shrink: 0;
    transition: background .3s
}

.n-status.ok {
    color: var(--green)
}

.n-status.ok i {
    background: var(--green)
}

.n-status.warn {
    color: var(--amber)
}

.n-status.warn i {
    background: var(--amber)
}

.node-sales {
    left: 2%;
    top: 0%;
}

.node-inventory {
    right: 2%;
    top: 0%;
}

.node-finance {
    left: 0%;
    top: 50%;
    margin-top: -44px;
    width: clamp(84px, 30%, 126px);
}

.node-purchasing {
    right: 0%;
    top: 50%;
    margin-top: -44px;
    width: clamp(84px, 30%, 126px);
}

.node-warehouse {
    left: 2%;
    bottom: 0%;
}

.node-production {
    right: 2%;
    bottom: 0%;
}


.eco-sync {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--g100);
    font-size: 11.5px;
    color: var(--g400);
    font-weight: 500;
}

.eco-sync svg {
    width: 13px;
    height: 13px;
    color: var(--b300);
    animation: spin 3s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.eco-sync .sync-time {
    color: var(--g600);
    font-weight: 600;
    margin-left: auto;
    font-variant-numeric: tabular-nums
}

.eco-sync .sync-sep {
    color: var(--g200)
}


.eco-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--g100);
    overflow-x: auto;
    scrollbar-width: none;
}

.eco-timeline::-webkit-scrollbar {
    display: none
}

.tl-step {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tl-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--g100);
    border: 1px solid var(--g200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .35s var(--ease), border-color .35s var(--ease);
}

.tl-icon svg {
    width: 10px;
    height: 10px;
    color: var(--g400);
    transition: color .35s var(--ease)
}

.tl-step.done .tl-icon {
    background: var(--b50);
    border-color: var(--b200)
}

.tl-step.done .tl-icon svg {
    color: var(--b400)
}

.tl-step.current .tl-icon {
    background: var(--b400);
    border-color: var(--b400)
}

.tl-step.current .tl-icon svg {
    color: #fff
}

.tl-text {
    white-space: nowrap
}

.tl-label {
    font-size: 8.2px;
    font-weight: 700;
    color: var(--g600);
    line-height: 1.25
}

.tl-step.done .tl-label,
.tl-step.current .tl-label {
    color: var(--g700)
}

.tl-dotrow {
    display: flex;
    align-items: center;
    margin-top: 1px
}

.tl-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--g300)
}

.tl-step.done .tl-dot {
    background: var(--b400)
}

.tl-step.current .tl-dot {
    background: var(--b400);
    box-shadow: 0 0 0 3px var(--b100)
}

.tl-arrow {
    width: 7px;
    height: 7px;
    color: var(--g200);
    flex-shrink: 0;
    margin: 0 1px
}

@media(prefers-reduced-motion:reduce) {
    .eco-lines path.hot {
        animation: none
    }

    .eco-sync svg {
        animation: none
    }

    .eco-node,
    .eco-core,
    .n-bar i {
        transition: none
    }
}

@media(max-width:860px) {

    .erp-left .tagline,
    .erp-left .desc {
        max-width: 100%
    }
}

@media(max-width:600px) {
    .eco-stage {
        aspect-ratio: 1/1.35
    }

    .eco-node {
        position: static;
        width: 100%;
        margin-bottom: 10px
    }

    .eco-core-wrap {
        position: static;
        transform: none;
        width: 120px;
        margin: 14px auto;
        order: 99
    }

    .eco-lines {
        display: none
    }

    .eco-grid {
        display: none
    }

    .eco-stage {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
}


@container eco (max-width: 400px) {
    .eco-node {
        padding: 8px 8px 7px
    }

    .n-title {
        font-size: 10.5px
    }

    .n-sub {
        font-size: 8.5px;
        margin-bottom: 4px
    }

    .n-status {
        font-size: 8.5px
    }

    .n-icon {
        width: 20px;
        height: 20px
    }

    .eco-core .core-label {
        font-size: 10px
    }

    .eco-core .core-sub {
        font-size: 7.5px
    }

    .eco-core .core-status {
        font-size: 7px
    }
}

@container eco (max-width: 280px) {
    .eco-stage {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        min-height: 0
    }

    .eco-node {
        position: static;
        width: 100%;
        margin: 0 0 10px
    }

    .eco-core-wrap {
        position: static;
        transform: none;
        width: 110px;
        margin: 14px auto;
        order: 99
    }

    .eco-lines {
        display: none
    }

    .eco-grid {
        display: none
    }
}




:root {
    --primary-blue: #2563EB;
    --light-blue: #EFF6FF;
    --dark-blue: #0F172A;
    --text-gray: #64748B;
    --border-color: #E2E8F0;
    --green: #10B981;
    --light-green: #D1FAE5;
    --bg-color: #F8FAFC;
}


.carousel-container {
    position: relative;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 20;
    border: 1px solid var(--border-color);
    color: var(--dark-blue);
    transition: all 0.2s;
}

.nav-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.nav-btn.prev {
    left: -10px;
}

.nav-btn.next {
    right: -10px;
}

.main-card {
    background: #FFFFFF;
    border-radius: 32px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 540px;
}

.left-panel {
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
    background: #FFFFFF;
}

.right-panel-wrapper {
    flex: 1;
    padding: 12px;
    background-color: #F8FAFC;
    display: flex;
    min-width: 0;
}

.inner-dashboard {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    container-name: rightpanel;

    background-image: radial-gradient(#CBD5E1 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: -12px -12px;
}


@media (min-width: 768px) and (min-height: 500px) {

    .nav-btn {
        width: 48px;
        height: 48px;
    }

    .nav-btn.prev {
        left: -24px;
    }

    .nav-btn.next {
        right: -24px;
    }

    .main-card {
        flex-direction: row;
        height: 100%;
        width: 100%;
        max-width: 100%;
    }

    .left-panel {
        width: 420px;
        flex-shrink: 0;
        height: 100%;
        padding: 28px;
        border-bottom: none;
        border-right: 1px solid #f1f5f9;
    }

    .right-panel-wrapper {
        padding: 16px;
    }
}



.carousel-card p.description {
    color: var(--text-gray);
    line-height: 1.5;
    margin-bottom: 16px;
    font-size: 12px;
}

.carousel-card ul.feature-list {
    list-style: none;
    margin-bottom: 16px;
}

.carousel-card ul.feature-list li {
    display: flex;
    align-items: center;
    color: var(--dark-blue);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 11px;
}

.carousel-card ul.feature-list li svg {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    color: var(--primary-blue);
    stroke-width: 3;
    flex-shrink: 0;
}

.built-for-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.built-for-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-blue);
    flex-wrap: wrap;
}

.built-for-pill .bullet {
    font-size: 12px;
    color: rgba(37, 99, 235, 0.4);
}

@media (min-width: 1024px) {
    .carousel-card p.description {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .carousel-card ul.feature-list {
        margin-bottom: 20px;
    }

    .carousel-card ul.feature-list li {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .built-for-label {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .built-for-pill {
        font-size: 11px;
        padding: 6px 12px;
        gap: 8px;
    }

    .built-for-pill .bullet {
        font-size: 14px;
    }
}


.diagram-area {
    position: relative;
    width: 700px;
    height: 550px;
    flex-shrink: 0;
    transform-origin: center;
    transform: scale(0.4);
}

@container rightpanel (min-width: 350px) {
    .diagram-area {
        transform: scale(0.5);
    }
}

@container rightpanel (min-width: 450px) {
    .diagram-area {
        transform: scale(0.65);
    }
}

@container rightpanel (min-width: 550px) {
    .diagram-area {
        transform: scale(0.75);
    }
}

@container rightpanel (min-width: 620px) {
    .diagram-area {
        transform: scale(0.85);
    }
}

.svg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.path-dotted {
    fill: none;
    stroke: var(--primary-blue);
    stroke-width: 2;
    stroke-dasharray: 4 6;
    stroke-linecap: round;
}

.path-solid {
    fill: none;
    stroke: var(--primary-blue);
    stroke-width: 2;
}

@keyframes dot-flow {
    to {
        stroke-dashoffset: 100;
    }
}

.node {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    z-index: 10;
}

.node:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.12);
}

.node-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 13px;
}

.bg-blue {
    background-color: var(--primary-blue);
    color: white;
}

.node-info {
    flex: 1;
    overflow: hidden;
}

.node-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--dark-blue);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-sub {
    font-size: 11px;
    color: var(--text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-icon {
    width: 16px;
    height: 16px;
    background-color: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.check-icon svg {
    width: 10px;
    height: 10px;
}


#node-start {
    top: 20px;
    left: 20px;
    width: 220px;
    height: 60px;
}

#node-assigned {
    top: 100px;
    left: 240px;
    width: 220px;
    height: 60px;
}

#node-approval {
    top: 240px;
    left: 60px;
    width: 220px;
    height: 60px;
}

#node-review {
    top: 240px;
    left: 420px;
    width: 220px;
    height: 60px;
}

#node-completed {
    top: 380px;
    left: 240px;
    width: 220px;
    height: auto;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
}

.completed-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.auto-routed-badge {
    position: absolute;
    top: 180px;
    left: 350px;
    transform: translateX(-50%);
    background: white;
    color: var(--primary-blue);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
}


.float-card {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    padding: 16px;
    border: 1px solid var(--border-color);
    z-index: 15;
    display: flex;
    flex-direction: column;
}

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

#card-insight {
    top: 80px;
    right: -20px;
    width: 200px;
}

#card-saved {
    bottom: 60px;
    left: 0px;
    width: 180px;
}

#card-active {
    bottom: 60px;
    right: 0px;
    width: 180px;
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.card-desc {
    font-size: 11px;
    color: var(--text-gray);
    line-height: 1.4;
    margin-bottom: 12px;
    white-space: normal;
}

.card-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-main {
    font-size: 16px;
    font-weight: 800;
    color: var(--dark-blue);
}

.stats-sub {
    font-size: 11px;
    color: var(--text-gray);
}

.chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}


.dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #E2E8F0;
    transition: all 0.3s;
}

.dot.active {
    background-color: var(--primary-blue);
}




.feature-item {
    display: flex;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.feature-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--light-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--primary-blue);
}

.feature-icon-box svg {
    width: 20px;
    height: 20px;
}

.feature-text h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 12px;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 768px) and (min-height: 500px) {

    .feature-item {
        flex: 1;
        padding-bottom: 0;
        border-bottom: none;
        padding-right: 24px;
        border-right: 1px solid var(--border-color);
    }

    .feature-item:last-child {
        border-right: none;
        padding-right: 0;
    }
}


@keyframes reveal-mask {
    0% {
        stroke-dashoffset: var(--path-len);
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes travel-signal {
    0% {
        opacity: 0;
        stroke-dashoffset: 15;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        stroke-dashoffset: calc(var(--path-len) * -1);
    }
}

@keyframes fade-in-scale {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
        border-color: var(--border-color);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
        border-color: var(--primary-blue);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
        border-color: var(--border-color);
        transform: scale(1);
    }
}

@keyframes fade-in-scale-badge {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    50% {
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.6);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }
}

.mask-path {
    stroke-dasharray: var(--path-len);
    stroke-dashoffset: var(--path-len);
    animation-fill-mode: forwards;
}

.path-signal {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 15 1000;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
    animation-fill-mode: forwards;
}


#node-start,
#node-assigned,
#node-assigned .check-icon,
.auto-routed-badge,
#node-approval,
#node-approval .check-icon,
#node-review,
#node-review .check-icon,
#node-completed,
#node-completed .completed-row:last-child,
#card-saved,
#card-active,
#card-insight {
    opacity: 0;
    animation-fill-mode: forwards;
}


.carousel-visible .card-active #node-start {
    animation: fade-in-scale 0.5s ease-out 0s forwards, glow-pulse 0.6s ease-in-out 0.5s forwards;
}


.carousel-visible .card-active #mp-0-1 {
    animation: reveal-mask 1s linear 0.8s forwards;
}

.carousel-visible .card-active #sig-0-1 {
    animation: travel-signal 1s linear 0.8s forwards;
}


.carousel-visible .card-active #node-assigned {
    animation: fade-in-scale 0.4s ease-out 1.8s forwards, glow-pulse 0.5s ease-in-out 1.8s forwards;
}

.carousel-visible .card-active #node-assigned .check-icon {
    animation: fade-in-scale 0.3s ease-out 2.1s forwards;
}


.carousel-visible .card-active #mp-1-split {
    animation: reveal-mask 0.5s linear 2.3s forwards;
}

.carousel-visible .card-active #sig-1-split {
    animation: travel-signal 0.5s linear 2.3s forwards;
}


.carousel-visible .card-active .auto-routed-badge {
    animation: fade-in-scale-badge 0.5s ease-out 2.8s forwards;
}


.carousel-visible .card-active #mp-split-2,
.carousel-visible .card-active #mp-1-2 {
    animation: reveal-mask 1s linear 3.3s forwards;
}

.carousel-visible .card-active #sig-split-2,
.carousel-visible .card-active #sig-1-2 {
    animation: travel-signal 1s linear 3.3s forwards;
}


.carousel-visible .card-active #node-approval {
    animation: fade-in-scale 0.4s ease-out 4.3s forwards, glow-pulse 0.5s ease-in-out 4.3s forwards;
}

.carousel-visible .card-active #node-approval .check-icon {
    animation: fade-in-scale 0.3s ease-out 4.6s forwards;
}


.carousel-visible .card-active #mp-split-3,
.carousel-visible .card-active #mp-1-3 {
    animation: reveal-mask 1s linear 4.6s forwards;
}

.carousel-visible .card-active #sig-split-3,
.carousel-visible .card-active #sig-1-3 {
    animation: travel-signal 1s linear 4.6s forwards;
}


.carousel-visible .card-active #node-review {
    animation: fade-in-scale 0.4s ease-out 5.6s forwards, glow-pulse 0.5s ease-in-out 5.6s forwards;
}

.carousel-visible .card-active #node-review .check-icon {
    animation: fade-in-scale 0.3s ease-out 5.9s forwards;
}


.carousel-visible .card-active #mp-2-4,
.carousel-visible .card-active #mp-3-4 {
    animation: reveal-mask 1s linear 6.1s forwards;
}

.carousel-visible .card-active #sig-2-4,
.carousel-visible .card-active #sig-3-4 {
    animation: travel-signal 1s linear 6.1s forwards;
}


.carousel-visible .card-active #node-completed {
    animation: fade-in-scale 0.4s ease-out 7.1s forwards, glow-pulse 0.6s ease-in-out 7.1s forwards;
}

.carousel-visible .card-active #node-completed .completed-row:last-child {
    animation: fade-in-scale 0.4s ease-out 7.5s forwards;
}


.carousel-visible .card-active #card-saved {
    animation: fade-in-scale 0.5s ease-out 7.8s forwards, float2 5s ease-in-out infinite 8.3s;
}


.carousel-visible .card-active #card-active {
    animation: fade-in-scale 0.5s ease-out 8.5s forwards, float1 7s ease-in-out infinite 9.0s;
}


.carousel-visible .card-active #card-insight {
    animation: fade-in-scale 0.6s ease-out 9.2s forwards, float1 6s ease-in-out infinite 9.8s;
}


@media (prefers-reduced-motion: reduce) {

    #node-start,
    #node-assigned,
    #node-assigned .check-icon,
    .auto-routed-badge,
    #node-approval,
    #node-approval .check-icon,
    #node-review,
    #node-review .check-icon,
    #node-completed,
    #node-completed .completed-row:last-child,
    #card-saved,
    #card-active,
    #card-insight {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .auto-routed-badge {
        transform: translateX(-50%) !important;
    }

    .mask-path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }

    .path-signal {
        display: none !important;
    }
}*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  
}

#app-wrapper :is(.pointer-events-none) {
  pointer-events: none
}

#app-wrapper :is(.fixed) {
  position: fixed
}

#app-wrapper :is(.absolute) {
  position: absolute
}

#app-wrapper :is(.relative) {
  position: relative
}

#app-wrapper :is(.inset-0) {
  inset: 0px
}

#app-wrapper :is(.bottom-0) {
  bottom: 0px
}

#app-wrapper :is(.left-0) {
  left: 0px
}

#app-wrapper :is(.left-1\/2) {
  left: 50%
}

#app-wrapper :is(.left-4) {
  left: 1rem
}

#app-wrapper :is(.left-6) {
  left: 1.5rem
}

#app-wrapper :is(.left-\[100px\]) {
  left: 100px
}

#app-wrapper :is(.left-\[130px\]) {
  left: 130px
}

#app-wrapper :is(.left-\[170px\]) {
  left: 170px
}

#app-wrapper :is(.left-\[210px\]) {
  left: 210px
}

#app-wrapper :is(.left-\[380px\]) {
  left: 380px
}

#app-wrapper :is(.left-\[40px\]) {
  left: 40px
}

#app-wrapper :is(.left-\[470px\]) {
  left: 470px
}

#app-wrapper :is(.left-\[70px\]) {
  left: 70px
}

#app-wrapper :is(.right-0) {
  right: 0px
}

#app-wrapper :is(.right-4) {
  right: 1rem
}

#app-wrapper :is(.top-0) {
  top: 0px
}

#app-wrapper :is(.top-1\/2) {
  top: 50%
}

#app-wrapper :is(.top-5) {
  top: 1.25rem
}

#app-wrapper :is(.top-\[16px\]) {
  top: 16px
}

#app-wrapper :is(.top-\[176px\]) {
  top: 176px
}

#app-wrapper :is(.top-\[260px\]) {
  top: 260px
}

#app-wrapper :is(.top-\[376px\]) {
  top: 376px
}

#app-wrapper :is(.top-\[420px\]) {
  top: 420px
}

#app-wrapper :is(.top-\[432px\]) {
  top: 432px
}

#app-wrapper :is(.top-\[556px\]) {
  top: 556px
}

#app-wrapper :is(.z-10) {
  z-index: 10
}

#app-wrapper :is(.z-20) {
  z-index: 20
}

#app-wrapper :is(.z-30) {
  z-index: 30
}

#app-wrapper :is(.z-50) {
  z-index: 50
}

#app-wrapper :is(.m-0) {
  margin: 0px
}

#app-wrapper :is(.mx-1) {
  margin-left: 0.25rem;
  margin-right: 0.25rem
}

#app-wrapper :is(.mx-2) {
  margin-left: 0.5rem;
  margin-right: 0.5rem
}

#app-wrapper :is(.mx-2\.5) {
  margin-left: 0.625rem;
  margin-right: 0.625rem
}

#app-wrapper :is(.mx-auto) {
  margin-left: auto;
  margin-right: auto
}

#app-wrapper :is(.mb-1) {
  margin-bottom: 0.25rem
}

#app-wrapper :is(.mb-1\.5) {
  margin-bottom: 0.375rem
}

#app-wrapper :is(.mb-2) {
  margin-bottom: 0.5rem
}

#app-wrapper :is(.mb-2\.5) {
  margin-bottom: 0.625rem
}

#app-wrapper :is(.mb-3) {
  margin-bottom: 0.75rem
}

#app-wrapper :is(.mb-4) {
  margin-bottom: 1rem
}

#app-wrapper :is(.mb-5) {
  margin-bottom: 1.25rem
}

#app-wrapper :is(.ml-auto) {
  margin-left: auto
}

#app-wrapper :is(.mt-0) {
  margin-top: 0px
}

#app-wrapper :is(.mt-0\.5) {
  margin-top: 0.125rem
}

#app-wrapper :is(.mt-1) {
  margin-top: 0.25rem
}

#app-wrapper :is(.mt-2) {
  margin-top: 0.5rem
}

#app-wrapper :is(.mt-2\.5) {
  margin-top: 0.625rem
}

#app-wrapper :is(.mt-3) {
  margin-top: 0.75rem
}

#app-wrapper :is(.mt-\[2px\]) {
  margin-top: 2px
}

#app-wrapper :is(.mt-auto) {
  margin-top: auto
}

#app-wrapper :is(.flex) {
  display: flex
}

#app-wrapper :is(.inline-flex) {
  display: inline-flex
}

#app-wrapper :is(.hidden) {
  display: none
}

#app-wrapper :is(.h-1) {
  height: 0.25rem
}

#app-wrapper :is(.h-1\.5) {
  height: 0.375rem
}

#app-wrapper :is(.h-5) {
  height: 1.25rem
}

#app-wrapper :is(.h-6) {
  height: 1.5rem
}

#app-wrapper :is(.h-8) {
  height: 2rem
}

#app-wrapper :is(.h-\[104px\]) {
  height: 104px
}

#app-wrapper :is(.h-\[120px\]) {
  height: 120px
}

#app-wrapper :is(.h-\[150px\]) {
  height: 150px
}

#app-wrapper :is(.h-\[1px\]) {
  height: 1px
}

#app-wrapper :is(.h-\[2\.5px\]) {
  height: 2.5px
}

#app-wrapper :is(.h-\[22px\]) {
  height: 22px
}

#app-wrapper :is(.h-\[26px\]) {
  height: 26px
}

#app-wrapper :is(.h-\[28px\]) {
  height: 28px
}

#app-wrapper :is(.h-\[2px\]) {
  height: 2px
}

#app-wrapper :is(.h-\[34px\]) {
  height: 34px
}

#app-wrapper :is(.h-\[46px\]) {
  height: 46px
}

#app-wrapper :is(.h-\[620px\]) {
  height: 620px
}

#app-wrapper :is(.h-\[68px\]) {
  height: 68px
}

#app-wrapper :is(.h-\[7px\]) {
  height: 7px
}

#app-wrapper :is(.h-full) {
  height: 100%
}

#app-wrapper :is(.min-h-\[500px\]) {
  min-height: 500px
}

#app-wrapper :is(.w-0) {
  width: 0px
}

#app-wrapper :is(.w-1) {
  width: 0.25rem
}

#app-wrapper :is(.w-1\.5) {
  width: 0.375rem
}

#app-wrapper :is(.w-5) {
  width: 1.25rem
}

#app-wrapper :is(.w-\[220px\]) {
  width: 220px
}

#app-wrapper :is(.w-\[22px\]) {
  width: 22px
}

#app-wrapper :is(.w-\[260px\]) {
  width: 260px
}

#app-wrapper :is(.w-\[26px\]) {
  width: 26px
}

#app-wrapper :is(.w-\[340px\]) {
  width: 340px
}

#app-wrapper :is(.w-\[420px\]) {
  width: 420px
}

#app-wrapper :is(.w-\[480px\]) {
  width: 480px
}

#app-wrapper :is(.w-\[540px\]) {
  width: 540px
}

#app-wrapper :is(.w-\[58px\]) {
  width: 58px
}

#app-wrapper :is(.w-\[680px\]) {
  width: 680px
}

#app-wrapper :is(.w-\[7px\]) {
  width: 7px
}

#app-wrapper :is(.w-full) {
  width: 100%
}

#app-wrapper :is(.w-max) {
  width: -moz-max-content;
  width: max-content
}

#app-wrapper :is(.w-px) {
  width: 1px
}

#app-wrapper :is(.max-w-2xl) {
  max-width: 42rem
}

#app-wrapper :is(.max-w-full) {
  max-width: 100%
}

#app-wrapper :is(.flex-1) {
  flex: 1 1 0%
}

#app-wrapper :is(.shrink-0) {
  flex-shrink: 0
}

#app-wrapper :is(.origin-center) {
  transform-origin: center
}

#app-wrapper :is(.-translate-y-1\/2) {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

#app-wrapper :is(.translate-y-\[10px\]) {
  --tw-translate-y: 10px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

#app-wrapper :is(.translate-y-\[14px\]) {
  --tw-translate-y: 14px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

#app-wrapper :is(.flex-col) {
  flex-direction: column
}

#app-wrapper :is(.items-start) {
  align-items: flex-start
}

#app-wrapper :is(.items-center) {
  align-items: center
}

#app-wrapper :is(.justify-center) {
  justify-content: center
}

#app-wrapper :is(.justify-between) {
  justify-content: space-between
}

#app-wrapper :is(.gap-1) {
  gap: 0.25rem
}

#app-wrapper :is(.gap-1\.5) {
  gap: 0.375rem
}

#app-wrapper :is(.gap-2) {
  gap: 0.5rem
}

#app-wrapper :is(.gap-2\.5) {
  gap: 0.625rem
}

#app-wrapper :is(.overflow-hidden) {
  overflow: hidden
}

#app-wrapper :is(.overflow-x-auto) {
  overflow-x: auto
}

#app-wrapper :is(.overflow-y-auto) {
  overflow-y: auto
}

#app-wrapper :is(.whitespace-nowrap) {
  white-space: nowrap
}

#app-wrapper :is(.rounded) {
  border-radius: 0.25rem
}

#app-wrapper :is(.rounded-2xl) {
  border-radius: 1rem
}

#app-wrapper :is(.rounded-\[10px\]) {
  border-radius: 10px
}

#app-wrapper :is(.rounded-\[32px\]) {
  border-radius: 32px
}

#app-wrapper :is(.rounded-full) {
  border-radius: 9999px
}

#app-wrapper :is(.rounded-md) {
  border-radius: 0.375rem
}

#app-wrapper :is(.rounded-xl) {
  border-radius: 0.75rem
}

#app-wrapper :is(.rounded-t) {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem
}

#app-wrapper :is(.border) {
  border-width: 1px
}

#app-wrapper :is(.border-b) {
  border-bottom-width: 1px
}

#app-wrapper :is(.border-amber-500\/35) {
  border-color: rgb(245 158 11 / 0.35)
}

#app-wrapper :is(.border-blue-100) {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity))
}

#app-wrapper :is(.border-gray-200) {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity))
}

#app-wrapper :is(.border-purple-200) {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity))
}

#app-wrapper :is(.border-slate-100) {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity))
}

#app-wrapper :is(.border-slate-200) {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity))
}

#app-wrapper :is(.bg-amber-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-amber-500) {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-blue-300) {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-blue-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-brand) {
  --tw-bg-opacity: 1;
  background-color: rgb(76 111 255 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-brand-subtle) {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 255 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-gray-100) {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-gray-200) {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-gray-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-green-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-green-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-orange-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-purple-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-purple-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-slate-200) {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-slate-50) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-transparent) {
  background-color: transparent
}

#app-wrapper :is(.bg-white) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

#app-wrapper :is(.bg-gradient-to-r) {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

#app-wrapper :is(.from-transparent) {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

#app-wrapper :is(.via-brand) {
  --tw-gradient-to: rgb(76 111 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #4c6fff var(--tw-gradient-via-position), var(--tw-gradient-to)
}

#app-wrapper :is(.to-transparent) {
  --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

#app-wrapper :is(.\!p-3) {
  padding: 0.75rem !important
}

#app-wrapper :is(.\!p-6) {
  padding: 1.5rem !important
}

#app-wrapper :is(.p-3) {
  padding: 0.75rem
}

#app-wrapper :is(.p-4) {
  padding: 1rem
}

#app-wrapper :is(.p-6) {
  padding: 1.5rem
}

#app-wrapper :is(.px-1) {
  padding-left: 0.25rem;
  padding-right: 0.25rem
}

#app-wrapper :is(.px-2) {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}

#app-wrapper :is(.px-2\.5) {
  padding-left: 0.625rem;
  padding-right: 0.625rem
}

#app-wrapper :is(.px-3) {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}

#app-wrapper :is(.px-3\.5) {
  padding-left: 0.875rem;
  padding-right: 0.875rem
}

#app-wrapper :is(.px-4) {
  padding-left: 1rem;
  padding-right: 1rem
}

#app-wrapper :is(.px-5) {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

#app-wrapper :is(.px-\[26px\]) {
  padding-left: 26px;
  padding-right: 26px
}

#app-wrapper :is(.py-0) {
  padding-top: 0px;
  padding-bottom: 0px
}

#app-wrapper :is(.py-0\.5) {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem
}

#app-wrapper :is(.py-1) {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}

#app-wrapper :is(.py-1\.5) {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}

#app-wrapper :is(.py-2) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

#app-wrapper :is(.py-2\.5) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem
}

#app-wrapper :is(.py-3) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

#app-wrapper :is(.py-3\.5) {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem
}

#app-wrapper :is(.py-4) {
  padding-top: 1rem;
  padding-bottom: 1rem
}

#app-wrapper :is(.pb-2) {
  padding-bottom: 0.5rem
}

#app-wrapper :is(.pb-\[20px\]) {
  padding-bottom: 20px
}

#app-wrapper :is(.pt-1) {
  padding-top: 0.25rem
}

#app-wrapper :is(.pt-\[28px\]) {
  padding-top: 28px
}

#app-wrapper :is(.text-center) {
  text-align: center
}

#app-wrapper :is(.text-right) {
  text-align: right
}

#app-wrapper :is(.text-\[10px\]) {
  font-size: 10px
}

#app-wrapper :is(.text-\[11px\]) {
  font-size: 11px
}

#app-wrapper :is(.text-\[12\.5px\]) {
  font-size: 12.5px
}

#app-wrapper :is(.text-\[13px\]) {
  font-size: 13px
}

#app-wrapper :is(.text-\[14px\]) {
  font-size: 14px
}

#app-wrapper :is(.text-\[15px\]) {
  font-size: 15px
}

#app-wrapper :is(.text-\[16px\]) {
  font-size: 16px
}

#app-wrapper :is(.text-\[32px\]) {
  font-size: 32px
}

#app-wrapper :is(.text-sm) {
  font-size: 0.875rem;
  line-height: 1.25rem
}

#app-wrapper :is(.text-xl) {
  font-size: 1.25rem;
  line-height: 1.75rem
}

#app-wrapper :is(.text-xs) {
  font-size: 0.75rem;
  line-height: 1rem
}

#app-wrapper :is(.font-bold) {
  font-weight: 700
}

#app-wrapper :is(.font-extrabold) {
  font-weight: 800
}

#app-wrapper :is(.font-medium) {
  font-weight: 500
}

#app-wrapper :is(.font-semibold) {
  font-weight: 600
}

#app-wrapper :is(.uppercase) {
  text-transform: uppercase
}

#app-wrapper :is(.leading-\[1\.6\]) {
  line-height: 1.6
}

#app-wrapper :is(.leading-none) {
  line-height: 1
}

#app-wrapper :is(.leading-relaxed) {
  line-height: 1.625
}

#app-wrapper :is(.leading-snug) {
  line-height: 1.375
}

#app-wrapper :is(.leading-tight) {
  line-height: 1.25
}

#app-wrapper :is(.tracking-tight) {
  letter-spacing: -0.025em
}

#app-wrapper :is(.tracking-wider) {
  letter-spacing: 0.05em
}

#app-wrapper :is(.tracking-widest) {
  letter-spacing: 0.1em
}

#app-wrapper :is(.text-amber-600) {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-blue-600) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-blue-700) {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-brand) {
  --tw-text-opacity: 1;
  color: rgb(76 111 255 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-gray-400) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-gray-500) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-gray-600) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-gray-700) {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-gray-900) {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-green-600) {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-orange-600) {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-purple-600) {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-slate-500) {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-slate-600) {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity))
}

#app-wrapper :is(.text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

#app-wrapper :is(.opacity-0) {
  opacity: 0
}

#app-wrapper :is(.shadow) {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

#app-wrapper :is(.shadow-md) {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

#app-wrapper :is(.shadow-sm) {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

#app-wrapper :is(.ring-1) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

#app-wrapper :is(.ring-2) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

#app-wrapper :is(.transition-all) {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

#app-wrapper :is(.transition-colors) {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

#app-wrapper :is(.transition-opacity) {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

#app-wrapper :is(.delay-150) {
  transition-delay: 150ms
}

#app-wrapper :is(.delay-200) {
  transition-delay: 200ms
}

#app-wrapper :is(.delay-300) {
  transition-delay: 300ms
}

#app-wrapper :is(.delay-500) {
  transition-delay: 500ms
}

#app-wrapper :is(.duration-300) {
  transition-duration: 300ms
}

#app-wrapper :is(.duration-500) {
  transition-duration: 500ms
}

#app-wrapper :is(.duration-700) {
  transition-duration: 700ms
}

#app-wrapper :is(.duration-\[1000ms\]) {
  transition-duration: 1000ms
}

#app-wrapper :is(.duration-\[1200ms\]) {
  transition-duration: 1200ms
}

#app-wrapper :is(.duration-\[1400ms\]) {
  transition-duration: 1400ms
}

#app-wrapper :is(.duration-\[1600ms\]) {
  transition-duration: 1600ms
}

#app-wrapper :is(.duration-\[550ms\]) {
  transition-duration: 550ms
}

#app-wrapper :is(.ease-linear) {
  transition-timing-function: linear
}

#app-wrapper :is(.hover\:bg-brand-hover:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(56 84 224 / var(--tw-bg-opacity))
}

#app-wrapper :is(.hover\:bg-gray-50:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

#app-wrapper :is(.hover\:bg-slate-50:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity))
}

#app-wrapper :is(.hover\:text-blue-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity))
}

#app-wrapper :is(.hover\:text-green-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity))
}

#app-wrapper :is(.hover\:text-orange-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity))
}

#app-wrapper :is(.hover\:text-purple-600:hover) {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity))
}

@media (min-width: 768px) {
  #app-wrapper :is(.md\:left-6) {
    left: 1.5rem
  }

  #app-wrapper :is(.md\:right-6) {
    right: 1.5rem
  }

  #app-wrapper :is(.md\:mb-3) {
    margin-bottom: 0.75rem
  }

  #app-wrapper :is(.md\:mb-4) {
    margin-bottom: 1rem
  }

  #app-wrapper :is(.md\:flex) {
    display: flex
  }

  #app-wrapper :is(.md\:min-h-0) {
    min-height: 0px
  }

  #app-wrapper :is(.md\:w-\[420px\]) {
    width: 420px
  }

  #app-wrapper :is(.md\:flex-row) {
    flex-direction: row
  }

  #app-wrapper :is(.md\:gap-2) {
    gap: 0.5rem
  }

  #app-wrapper :is(.md\:gap-2\.5) {
    gap: 0.625rem
  }

  #app-wrapper :is(.md\:border-b-0) {
    border-bottom-width: 0px
  }

  #app-wrapper :is(.md\:border-r) {
    border-right-width: 1px
  }

  #app-wrapper :is(.md\:\!p-4) {
    padding: 1rem !important
  }

  #app-wrapper :is(.md\:\!p-7) {
    padding: 1.75rem !important
  }

  #app-wrapper :is(.md\:p-4) {
    padding: 1rem
  }

  #app-wrapper :is(.md\:p-6) {
    padding: 1.5rem
  }

  #app-wrapper :is(.md\:p-7) {
    padding: 1.75rem
  }

  #app-wrapper :is(.md\:px-7) {
    padding-left: 1.75rem;
    padding-right: 1.75rem
  }

  #app-wrapper :is(.md\:py-3) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
  }

  #app-wrapper :is(.md\:text-\[12px\]) {
    font-size: 12px
  }

  #app-wrapper :is(.md\:text-\[13px\]) {
    font-size: 13px
  }

  #app-wrapper :is(.md\:text-\[14px\]) {
    font-size: 14px
  }

  #app-wrapper :is(.md\:text-\[15px\]) {
    font-size: 15px
  }

  #app-wrapper :is(.md\:text-\[18px\]) {
    font-size: 18px
  }

  #app-wrapper :is(.md\:text-\[24px\]) {
    font-size: 24px
  }

  #app-wrapper :is(.md\:text-\[38px\]) {
    font-size: 38px
  }
}
/* --b400 / --g700 / --g500 / --g300 already exist site-wide (css/src/03-brand-chrome.css).
   Only the two tint/border derivatives below are new to this component. */
.vh-way {
  --b400-tint: #E7F0FA;
  --b400-border: #C7DDF2;

  padding: 64px 32px 80px;
  max-width: 1260px;
  margin: 0 auto;
}

.vh-way-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b400);
  margin-bottom: 20px;
}
.vh-way-eyebrow::before, .vh-way-eyebrow::after {
  content: "—"; color: var(--b400-border); margin: 0 10px;
}

.vh-way-headline {
  text-align: center;
  font-size: clamp(16px, 4.2vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--g700);
  max-width: 96vw;
  margin: 0 auto 40px;
}
.vh-way-headline .accent {
  display: block;
  color: var(--b400);
  margin-top: 4px;
  white-space: nowrap;
}

.vh-way-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}

/* ===== LEFT — philosophy pillars (unchanged, approved) ===== */
.vh-way .vh-pillar-list { display: flex; flex-direction: column; }
.vh-way .vh-pillar-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--b400-border);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.vh-way .vh-pillar-item:first-child { padding-top: 0; }
.vh-way .vh-pillar-item:last-child { border-bottom: none; }

.vh-way .vh-pillar-bracket {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--b400-tint);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'SF Mono', Consolas, monospace;
  font-weight: 700;
  color: var(--b400);
}
.vh-way .vh-pillar-bracket .brace-l,
.vh-way .vh-pillar-bracket .brace-r {
  font-size: 26px;
  line-height: 1;
}
.vh-way .vh-pillar-bracket .brace-l { margin-right: 1px; }
.vh-way .vh-pillar-bracket .brace-r { margin-left: 1px; }
.vh-way .vh-pillar-bracket .glyph {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--g700);
}
.vh-way .vh-pillar-bracket .glyph svg {
  width: 15px;
  height: 15px;
  display: block;
}

.vh-way .vh-pillar-title { font-size: 15.5px; font-weight: 600; color: var(--g700); margin: 0 0 6px; }
.vh-way .vh-pillar-sub { font-size: 13.5px; line-height: 1.6; color: var(--g500); margin: 0; }

/* ===== RIGHT — Inside vHandl collage board ===== */
.vh-way .vh-work-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--b400); margin-bottom: 6px;
}
.vh-way .vh-work-heading {
  font-size: 19px; font-weight: 700; color: var(--g700); margin: 0 0 4px;
}

.vh-way .board {
  position: relative;
  width: 100%;
  max-width: 740px;
  height: 470px;
  margin-top: 32px;
}

.vh-way .note {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(30, 36, 51, 0.12);
  padding: 14px 16px 14px;
  overflow: hidden;
  height: auto;
}
.vh-way .note.blue { background: var(--b400); }
.vh-way .note.white { background: #ffffff; border: 1px solid #EBEEF3; }
.vh-way .note.dark { background: var(--g700); }

/* Card 2 (clinic) needs a push-pin that pokes ABOVE the card's top edge.
   It cannot live inside .note: .note has overflow:hidden (required to
   contain the corner illustration/tape), which was silently clipping
   ~20% of the pin off the top — the actual cause of the "barely visible"
   pin, confirmed by hit-testing the clipped region. Fix: the pin is a
   sibling of .note inside this wrapper instead of a child of .note, so
   nothing clips it. The wrapper takes over .note's absolute positioning
   (.c2 below) and its entrance animation; .note itself just fills it. */
.vh-way .note-pin-wrap {
  position: absolute;
}
.vh-way .note-pin-wrap .note {
  position: relative;
  width: 100%;
}

.vh-way .note-pin {
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--b400);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(30,112,200,0.5);
  z-index: 3;
}

.vh-way .note-tape {
  position: absolute;
  top: -8px; left: 20px;
  width: 42px; height: 16px;
  background: rgba(142, 180, 226, 0.6);
  border-radius: 2px;
  transform: rotate(-4deg);
  z-index: 3;
}

.vh-way .note-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 6px;
  padding-right: 56px;
}
.vh-way .note.white .note-title { color: var(--b400); }

.vh-way .note-body {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  margin: 0;
  padding-right: 56px;
}
.vh-way .note.white .note-body { color: var(--g500); }

.vh-way .note-illustration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 58px;
  height: 58px;
  color: rgba(255,255,255,0.55);
}
.vh-way .note.white .note-illustration { color: var(--b400-border); }
.vh-way .note-illustration svg { width: 100%; height: 100%; }

/* Card positions — widths computed from actual title/body character counts,
   positions verified via rectangle-overlap check to guarantee zero collisions.
   Resting rotation is applied via --rest-rotate (see animation block below)
   rather than a static transform here, so the entrance animation can drive
   the same transform property without a competing declaration overriding it. */
.vh-way .c1 { left: 0px;   top: 40px;  width: 210px; z-index: 2; }
.vh-way .c2 { right: 40px; top: 20px;  width: 250px; z-index: 2; }
.vh-way .c3 { left: 240px; top: 170px; width: 240px; z-index: 3; }
.vh-way .c4 { left: 0px;   top: 320px; width: 270px; z-index: 1; }
.vh-way .c5 { left: 300px; top: 340px; width: 215px; z-index: 1; }

.vh-way .annotation {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: #4B5568;
}
.vh-way .reaction-face {
  position: absolute;
  z-index: 4;
}
.vh-way .reaction-face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.vh-way .a1 { left: 220px; top: 0px;   width: 145px; }
.vh-way .a1-face { left: 365px; top: 5px; width: 52px; height: 52px; }

.vh-way .a2 { left: 5px;  top: 155px; width: 150px; }
.vh-way .a2-face { left: 130px; top: 130px; width: 52px; height: 52px; }

.vh-way .a3 { right: 15px; top: 165px; width: 165px; }
/* a3-face repositioned (was left:545/top:118, overlapping card 2's bottom
   edge by ~26px). There isn't enough vertical room between the card's
   nominal bottom (141px) and the a3 text's top (165px) to fit a 48px-tall
   face between them, so it sits in the clear corridor to the LEFT of the
   text instead (verified against rendered bounding boxes: ~7-10px gap to
   both card 2 and the a3 text, no overlap with card 3 either). */
.vh-way .a3-face { left: 502px; top: 151px; width: 48px; height: 48px; }

.vh-way .a4 { right: 45px; top: 330px; width: 170px; }
.vh-way .a4-face { right: 143px; top: 288px; width: 52px; height: 52px; }

/* ============================================================
   ANIMATION — "Discovery, not reveal" choreography, 3 acts:
     ACT 1: left principles establish (0.0 - 2.3s)
     ACT 2: "Inside vHandl" moment + genuine quiet hold (1.3 - 3.05s)
     ACT 3: the board builds as individual thoughts, not a card list —
            Card 1 is the slow, establishing beat; Cards 2-3 build
            momentum (each starting before the previous one's payoff
            fully finishes); Card 4 is the lightest breath (no
            question/face); Card 5 is a deliberate closing beat.
   Total runtime ~10.6s. Triggered once on scroll-into-view, plays once.

   Card <-> annotation <-> face mapping (verified against real markup,
   NOT treated as interchangeable):
     Card 1 = c1 "POS for roadside vendors"      -> a1 "Do they need software at all?"       -> skeptical face
     Card 2 = c2 "A lightweight system for clinics" -> a3 "Who is actually going to use this every day?" -> curious face
     Card 3 = c3 "Industrial workflows"           -> a2 "Can we remove this step instead?"    -> thinking face
     Card 4 = c4 "ERP / CRM for distributors"     -> (no paired annotation — lightest beat)
     Card 5 = c5 "Community software"             -> a4 "Do they really need all these features?" -> worried face

   Headline (.vh-way-eyebrow / .vh-way-headline) intentionally has NO
   animation classes here — matches the existing Services section
   entrance pattern, wired up separately.

   IMPORTANT: each element's full `transition` (including delay) is
   declared in ONE rule per element — never split shorthand/longhand
   for the same property across two rules (prior bug: a static
   `transform` on .c1-.c5 silently overrode the animated transform).

   Respects prefers-reduced-motion (see bottom of this block).
   ============================================================ */

/* ACT 1 — Left pillars: opacity + translateY only, no scale on the row.
   Only the {} bracket mark gets a tiny separate "resolve" effect. */
.vh-way .vh-pillar-item {
  opacity: 0;
  transform: translateY(10px);
}
.vh-way .vh-pillar-bracket {
  opacity: 0;
  transform: scale(0.85);
}
.vh-way.is-visible .vh-pillar-item:nth-child(1) {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.42s ease-out 0.05s, transform 0.42s ease-out 0.05s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(1) .vh-pillar-bracket {
  opacity: 1; transform: scale(1);
  transition: opacity 0.3s ease-out 0.2s, transform 0.3s ease-out 0.2s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(2) {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.42s ease-out 0.5s, transform 0.42s ease-out 0.5s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(2) .vh-pillar-bracket {
  opacity: 1; transform: scale(1);
  transition: opacity 0.3s ease-out 0.65s, transform 0.3s ease-out 0.65s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(3) {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.42s ease-out 1.0s, transform 0.42s ease-out 1.0s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(3) .vh-pillar-bracket {
  opacity: 1; transform: scale(1);
  transition: opacity 0.3s ease-out 1.15s, transform 0.3s ease-out 1.15s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(4) {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.42s ease-out 1.5s, transform 0.42s ease-out 1.5s;
}
.vh-way.is-visible .vh-pillar-item:nth-child(4) .vh-pillar-bracket {
  opacity: 1; transform: scale(1);
  transition: opacity 0.3s ease-out 1.65s, transform 0.3s ease-out 1.65s;
}

/* ACT 2 — "INSIDE vHANDL" and the work-heading are one slow,
   opacity-dominant transition spread across pillars 3 and 4, so the
   right side visibly begins existing WHILE the visitor is still reading
   the left side.

   Sequence: pillar1 -> pillar2 -> INSIDE VHANDL begins (slow fade,
   starts while pillar2 is still finishing) -> pillar3 -> heading
   gradually establishes (slow fade, starts as pillar3 finishes /
   pillar4 begins) -> pillar4 -> both fades complete -> quiet hold
   (only after pillar4 AND heading have both fully settled) ->
   Card 1 begins.

   Movement is intentionally minimal (small translateY) — the effect
   comes from opacity + timing, not noticeable motion. */
.vh-way .vh-work-label,
.vh-way .vh-work-heading {
  opacity: 0;
  transform: translateY(4px);
}
/* INSIDE VHANDL: starts at 0.7s (while pillar 2 is still finishing,
   pillar 2 spans 0.55-0.97s), fades slowly over 1.4s so it's still
   gently completing through pillar 3 and pillar 4. */
.vh-way.is-visible .vh-work-label {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.4s ease-out 0.7s, transform 1.4s ease-out 0.7s;
}
/* "We've been using our brain on...": starts at 1.65s (as pillar 3's
   settle is finishing and pillar 4 begins, pillar 3 spans 1.05-1.47s,
   pillar 4 starts 1.55s), fades slowly over 1.3s so it completes
   right around when pillar 4 finishes settling. */
.vh-way.is-visible .vh-work-heading {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.3s ease-out 1.65s, transform 1.3s ease-out 1.65s;
}
/* Quiet hold placed only AFTER both pillar 4 (ends 1.97s) and the
   heading (fully visible at 1.65+1.3=2.95s) have completed:
   hold spans 2.95s - 3.55s, then Card 1 begins at 3.55s. */

/* ACT 3 — the board builds as individual thoughts.
   Resting rotation preserved via CSS variable per card. Applies to both
   .note (cards 1,3,4,5) and .note-pin-wrap (card 2's wrapper, see above)
   so the whole card — including the pin — animates as one unit. */
.vh-way .note,
.vh-way .note-pin-wrap {
  --rest-rotate: 0deg;
  opacity: 0;
  transform: translateY(10px) rotate(calc(var(--rest-rotate) * 2.4));
}
/* The inner .note inside card 2's wrapper must not double-animate — the
   wrapper (.note-pin-wrap.c2) already carries the opacity/transform. */
.vh-way .note-pin-wrap .note {
  opacity: 1;
  transform: none;
}
.vh-way .c1 { --rest-rotate: -1.5deg; }
.vh-way .c2 { --rest-rotate: 1.2deg; }
.vh-way .c3 { --rest-rotate: -1deg; }
.vh-way .c4 { --rest-rotate: 1deg; }
.vh-way .c5 { --rest-rotate: -1.3deg; }

/* Card 1 — the establishing beat: slowest, most deliberate settle. */
.vh-way.is-visible .c1 {
  opacity: 1; transform: translateY(0) rotate(var(--rest-rotate));
  transition: opacity 0.55s ease-out 3.25s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 3.25s;
}
/* Card 2 — building momentum, starts before Card 1's face fully lands. */
.vh-way.is-visible .c2 {
  opacity: 1; transform: translateY(0) rotate(var(--rest-rotate));
  transition: opacity 0.35s ease-out 5.63s,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 5.63s;
}
/* Card 3 — same tight rhythm as Card 2, overlapping its tail. */
.vh-way.is-visible .c3 {
  opacity: 1; transform: translateY(0) rotate(var(--rest-rotate));
  transition: opacity 0.35s ease-out 6.78s,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 6.78s;
}
/* Card 4 — lightest beat, a brief breath before the close. */
.vh-way.is-visible .c4 {
  opacity: 1; transform: translateY(0) rotate(var(--rest-rotate));
  transition: opacity 0.3s ease-out 7.93s,
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 7.93s;
}
/* Card 5 — closing beat, picks the pace back up slightly. */
.vh-way.is-visible .c5 {
  opacity: 1; transform: translateY(0) rotate(var(--rest-rotate));
  transition: opacity 0.45s ease-out 8.48s,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 8.48s;
}

/* Illustration line-draw — each begins shortly after its own card
   starts settling (overlapping, not after it fully finishes). */
.vh-way .note-illustration svg path,
.vh-way .note-illustration svg rect,
.vh-way .note-illustration svg circle {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.vh-way.is-visible .c1 .note-illustration svg path,
.vh-way.is-visible .c1 .note-illustration svg rect,
.vh-way.is-visible .c1 .note-illustration svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.65s ease-out 3.95s;
}
.vh-way.is-visible .c2 .note-illustration svg path,
.vh-way.is-visible .c2 .note-illustration svg rect,
.vh-way.is-visible .c2 .note-illustration svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease-out 6.03s;
}
.vh-way.is-visible .c3 .note-illustration svg path,
.vh-way.is-visible .c3 .note-illustration svg rect,
.vh-way.is-visible .c3 .note-illustration svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease-out 7.18s;
}
.vh-way.is-visible .c4 .note-illustration svg path,
.vh-way.is-visible .c4 .note-illustration svg rect,
.vh-way.is-visible .c4 .note-illustration svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s ease-out 8.28s;
}
.vh-way.is-visible .c5 .note-illustration svg path,
.vh-way.is-visible .c5 .note-illustration svg rect,
.vh-way.is-visible .c5 .note-illustration svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease-out 9.03s;
}

/* Annotations — each tied to its OWN card's timing, giving real
   reading time before its face reacts (see face section below). */
.vh-way .annotation {
  opacity: 0;
  transform: translateY(8px);
}
/* a1 -> Card 1 (POS): the establishing question, most reading room */
.vh-way.is-visible .a1 {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.45s ease-out 4.5s, transform 0.45s ease-out 4.5s;
}
/* a3 -> Card 2 (Clinic): quicker beat */
.vh-way.is-visible .a3 {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.28s ease-out 6.38s, transform 0.28s ease-out 6.38s;
}
/* a2 -> Card 3 (Industrial): quicker beat */
.vh-way.is-visible .a2 {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.28s ease-out 7.53s, transform 0.28s ease-out 7.53s;
}
/* a4 -> Card 5 (Community): closing question, deliberate pace again */
.vh-way.is-visible .a4 {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.35s ease-out 9.45s, transform 0.35s ease-out 9.45s;
}

/* Reaction faces — quiet fade/scale settle, no pop/overshoot.
   Card 1's face gets the longest pause after its question (the one
   deliberate "catchy" beat); the middle cards' faces follow quickly;
   Card 5's face gets a real pause again for the closing beat. */
.vh-way .reaction-face {
  opacity: 0;
  transform: scale(0.94);
}
/* a1-face: question ends 4.95s, +0.4s pause -> face at 5.35s */
.vh-way.is-visible .a1-face {
  opacity: 1; transform: scale(1);
  transition: opacity 0.45s ease-out 5.35s, transform 0.45s ease-out 5.35s;
}
/* a3-face: question ends 6.66s, +0.12s pause -> face at 6.78s */
.vh-way.is-visible .a3-face {
  opacity: 1; transform: scale(1);
  transition: opacity 0.32s ease-out 6.9s, transform 0.32s ease-out 6.9s;
}
/* a2-face: question ends 7.81s, +0.12s pause -> face at 7.93s */
.vh-way.is-visible .a2-face {
  opacity: 1; transform: scale(1);
  transition: opacity 0.32s ease-out 8.07s, transform 0.32s ease-out 8.07s;
}
/* a4-face: question ends 9.8s, +0.25s pause -> face at 10.05s */
.vh-way.is-visible .a4-face {
  opacity: 1; transform: scale(1);
  transition: opacity 0.4s ease-out 10.05s, transform 0.4s ease-out 10.05s;
}

/* Respect reduced-motion preference: skip choreography, show the
   approved static end state immediately. */
@media (prefers-reduced-motion: reduce) {
  .vh-way .vh-pillar-item,
  .vh-way .vh-pillar-bracket,
  .vh-way .vh-work-label,
  .vh-way .vh-work-heading,
  .vh-way .note,
  .vh-way .note-pin-wrap,
  .vh-way .note-illustration svg path,
  .vh-way .note-illustration svg rect,
  .vh-way .note-illustration svg circle,
  .vh-way .annotation,
  .vh-way .reaction-face {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .vh-way .note,
  .vh-way .note-pin-wrap {
    transform: rotate(var(--rest-rotate)) !important;
  }
}

/* Mobile layout — board/annotation/face keep the desktop markup order
   (already sequenced Card -> its quote/face -> next Card by the source
   HTML), but render as a simple static flow instead of the absolute
   collage. Each quote+face pair sits snug under its own card (rendered
   as adjacent inline-block "text" so the small face reads as a reaction
   bubble at the end of the quote); real spacing only appears BETWEEN
   groups, so the section reads as board -> thought -> next board rather
   than a stacked pile. Card 4 has no paired quote (matches desktop's
   "lightest beat"), so it sits close to Card 5 instead. */
@media (max-width: 900px) {
  .vh-way .vh-way-grid { grid-template-columns: 1fr; gap: 40px; }
  .vh-way .board { height: auto; max-width: 100%; }

  .vh-way .note,
  .vh-way .annotation,
  .vh-way .reaction-face,
  .vh-way .note-pin-wrap {
    position: static !important;
    transform: none !important;
  }

  .vh-way .note-pin-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .vh-way .note-pin-wrap .note { margin-bottom: 0; }

  .vh-way .note,
  .vh-way .note-pin-wrap {
    width: 100% !important;
    margin-bottom: 10px;
  }

  /* Quote + face render as adjacent inline-block "words" so the face
     sits right at the end of the quote line instead of floating below. */
  .vh-way .annotation {
    display: inline-block !important;
    vertical-align: middle;
    width: auto !important;
    max-width: calc(100% - 52px);
    margin: 0 8px 28px 0;
  }
  .vh-way .reaction-face {
    display: inline-block !important;
    vertical-align: middle;
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 28px;
  }

  /* Card 4 has no paired quote — keep it close to Card 5, not stranded
     with the large post-quote gap meant for the other cards. */
  .vh-way .c4 { margin-bottom: 10px; }

  /* Last group (Card 5's quote/face) needs no trailing gap. */
  .vh-way .a4,
  .vh-way .a4-face {
    margin-bottom: 0;
  }
}

/* Mobile reveal — fully isolated from desktop's timeline: each card
   triggers its OWN self-contained sequence (note lands -> icon draws
   -> handwritten quote -> reaction face) the instant IT scrolls into
   view (JS toggles 'mv-in' on .c1-.c5 only, see
   24-vhandl-way-reveal.js). Quote and face are NOT watched by their
   own observer — they're chained off the card's 'mv-in' via sibling
   combinators (a quote always directly follows its card in the
   markup, and its face directly follows the quote), with each stage's
   transition-delay baked into its own "revealed" rule per this file's
   existing convention (never split across two rules). That makes the
   whole beat deterministic and repeatable on every scroll, rather than
   four independently-observed elements crossing the viewport threshold
   within the same scroll tick and reading as "everything at once".
   The .is-visible-driven desktop rules are reset back to hidden here
   too, so mobile's visual state never depends on whether the section
   itself is "is-visible" — that class still gets added (it also drives
   the pillars/heading), but this block doesn't react to it. */
@media (max-width: 900px) {
  .vh-way .c1, .vh-way .c2, .vh-way .c3, .vh-way .c4, .vh-way .c5,
  .vh-way.is-visible .c1, .vh-way.is-visible .c2, .vh-way.is-visible .c3,
  .vh-way.is-visible .c4, .vh-way.is-visible .c5 {
    opacity: 0;
    transform: translateY(28px) rotate(var(--rest-rotate));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .vh-way .c1.mv-in, .vh-way .c2.mv-in, .vh-way .c3.mv-in,
  .vh-way .c4.mv-in, .vh-way .c5.mv-in {
    opacity: 1 !important;
    transform: translateY(0) rotate(var(--rest-rotate)) !important;
  }

  /* Illustration line-draw — starts shortly after the card begins
     landing, well before the quote appears (note -> icon -> quote). */
  .vh-way .c1 .note-illustration svg path, .vh-way .c1 .note-illustration svg rect, .vh-way .c1 .note-illustration svg circle,
  .vh-way .c2 .note-illustration svg path, .vh-way .c2 .note-illustration svg rect, .vh-way .c2 .note-illustration svg circle,
  .vh-way .c3 .note-illustration svg path, .vh-way .c3 .note-illustration svg rect, .vh-way .c3 .note-illustration svg circle,
  .vh-way .c4 .note-illustration svg path, .vh-way .c4 .note-illustration svg rect, .vh-way .c4 .note-illustration svg circle,
  .vh-way .c5 .note-illustration svg path, .vh-way .c5 .note-illustration svg rect, .vh-way .c5 .note-illustration svg circle {
    transition: stroke-dashoffset 0.7s ease-out 0.5s;
  }
  .vh-way .c1.mv-in .note-illustration svg path, .vh-way .c1.mv-in .note-illustration svg rect, .vh-way .c1.mv-in .note-illustration svg circle,
  .vh-way .c2.mv-in .note-illustration svg path, .vh-way .c2.mv-in .note-illustration svg rect, .vh-way .c2.mv-in .note-illustration svg circle,
  .vh-way .c3.mv-in .note-illustration svg path, .vh-way .c3.mv-in .note-illustration svg rect, .vh-way .c3.mv-in .note-illustration svg circle,
  .vh-way .c4.mv-in .note-illustration svg path, .vh-way .c4.mv-in .note-illustration svg rect, .vh-way .c4.mv-in .note-illustration svg circle,
  .vh-way .c5.mv-in .note-illustration svg path, .vh-way .c5.mv-in .note-illustration svg rect, .vh-way .c5.mv-in .note-illustration svg circle {
    stroke-dashoffset: 0 !important;
  }

  /* Quote — appears after the card + icon beat has landed. */
  .vh-way .a1, .vh-way .a2, .vh-way .a3, .vh-way .a4,
  .vh-way.is-visible .a1, .vh-way.is-visible .a2,
  .vh-way.is-visible .a3, .vh-way.is-visible .a4 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .vh-way .c1.mv-in + .a1,
  .vh-way .c2.mv-in + .a3,
  .vh-way .c3.mv-in + .a2,
  .vh-way .c5.mv-in + .a4 {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease-out 1.5s, transform 0.6s ease-out 1.5s !important;
  }

  /* Reaction face — the closing beat, after the quote has had a
     moment to read. */
  .vh-way .a1-face, .vh-way .a2-face, .vh-way .a3-face, .vh-way .a4-face,
  .vh-way.is-visible .a1-face, .vh-way.is-visible .a2-face,
  .vh-way.is-visible .a3-face, .vh-way.is-visible .a4-face {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .vh-way .c1.mv-in + .a1 + .a1-face,
  .vh-way .c2.mv-in + .a3 + .a3-face,
  .vh-way .c3.mv-in + .a2 + .a2-face,
  .vh-way .c5.mv-in + .a4 + .a4-face {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: opacity 0.5s ease-out 2.2s, transform 0.5s ease-out 2.2s !important;
  }
}
:root{
--blue-50:#eef1ff;--blue-100:#dce3ff;--blue-200:#b9c8ff;--blue-300:#8fa4ff;--blue-400:#6c85ff;--blue-500:#4c6fff;--blue-600:#3854e0;--blue-700:#2a3fb8;--blue-800:#1f2f8a;--blue-900:#16215e;
--gray-0:#ffffff;--gray-50:#fafafa;--gray-100:#f4f4f5;--gray-200:#e5e5e7;--gray-300:#d4d4d6;--gray-400:#a8a8a8;--gray-500:#8a8a8e;--gray-600:#666666;--gray-700:#444448;--gray-800:#262629;--gray-900:#111111;
--green-50:#eaf7f0;--green-500:#1a9e6b;--green-600:#158055;
--amber-50:#fdf3e3;--amber-500:#d98c00;--amber-600:#b37200;
--red-50:#fdecea;--red-500:#e0473e;--red-600:#c23a32;
--color-bg:var(--gray-0);
--color-surface:var(--gray-0);
--color-surface-sunken:var(--gray-50);
--color-surface-inverse:var(--gray-900);
--color-border:var(--gray-200);
--color-border-strong:var(--gray-300);
--color-text-primary:var(--gray-900);
--color-text-secondary:var(--gray-600);
--color-text-tertiary:var(--gray-400);
--color-text-inverse:var(--gray-0);
--color-brand:var(--blue-500);
--color-brand-hover:var(--blue-600);
--color-brand-active:var(--blue-700);
--color-brand-subtle:var(--blue-50);
--color-focus-ring:var(--blue-400);
--color-success:var(--green-500);
--color-success-subtle:var(--green-50);
--color-warning:var(--amber-500);
--color-warning-subtle:var(--amber-50);
--color-danger:var(--red-500);
--color-danger-subtle:var(--red-50);
}

:root{
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--fw-light:300;/* @kind font */--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
--fs-display-xl:88px;--lh-display-xl:1;/* @kind font */--ls-display-xl:-0.045em;/* @kind font */
--fs-display-l:64px;--lh-display-l:1.05;/* @kind font */--ls-display-l:-0.035em;/* @kind font */
--fs-display-m:48px;--lh-display-m:1.1;/* @kind font */--ls-display-m:-0.03em;/* @kind font */
--fs-heading-l:32px;--lh-heading-l:1.2;/* @kind font */--ls-heading-l:-0.02em;/* @kind font */
--fs-heading-m:24px;--lh-heading-m:1.3;/* @kind font */--ls-heading-m:-0.01em;/* @kind font */
--fs-heading-s:20px;--lh-heading-s:1.35;/* @kind font */--ls-heading-s:-0.005em;/* @kind font */
--fs-body-l:18px;--lh-body-l:1.6;/* @kind font */--ls-body-l:0em;/* @kind font */
--fs-body-m:16px;--lh-body-m:1.6;/* @kind font */--ls-body-m:0em;/* @kind font */
--fs-body-s:14px;--lh-body-s:1.5;/* @kind font */--ls-body-s:0em;/* @kind font */
--fs-caption:12px;--lh-caption:1.4;/* @kind font */--ls-caption:0.01em;/* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px;--space-12:192px;
--grid-unit:40px;
--container-max:1200px;
}

:root{
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
--shadow-sm:0 1px 2px rgba(17,17,17,0.06);
--shadow-md:0 4px 12px rgba(17,17,17,0.08);
--shadow-lg:0 12px 32px rgba(17,17,17,0.10);
--ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
--duration-fast:150ms;/* @kind other */--duration-base:250ms;/* @kind other */--duration-slow:400ms;/* @kind other */
--texture-grid:linear-gradient(rgba(17,17,17,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,0.025) 1px,transparent 1px);/* @kind other */
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary)}
a{color:var(--color-brand)}
a:hover{color:var(--color-brand-hover)}

:root{
--blue-50:#eef1ff;--blue-100:#dce3ff;--blue-200:#b9c8ff;--blue-300:#8fa4ff;--blue-400:#6c85ff;--blue-500:#4c6fff;--blue-600:#3854e0;--blue-700:#2a3fb8;--blue-800:#1f2f8a;--blue-900:#16215e;
--gray-0:#ffffff;--gray-50:#fafafa;--gray-100:#f4f4f5;--gray-200:#e5e5e7;--gray-300:#d4d4d6;--gray-400:#a8a8a8;--gray-500:#8a8a8e;--gray-600:#666666;--gray-700:#444448;--gray-800:#262629;--gray-900:#111111;
--green-50:#eaf7f0;--green-500:#1a9e6b;--green-600:#158055;
--amber-50:#fdf3e3;--amber-500:#d98c00;--amber-600:#b37200;
--red-50:#fdecea;--red-500:#e0473e;--red-600:#c23a32;
--color-bg:var(--gray-0);
--color-surface:var(--gray-0);
--color-surface-sunken:var(--gray-50);
--color-surface-inverse:var(--gray-900);
--color-border:var(--gray-200);
--color-border-strong:var(--gray-300);
--color-text-primary:var(--gray-900);
--color-text-secondary:var(--gray-600);
--color-text-tertiary:var(--gray-400);
--color-text-inverse:var(--gray-0);
--color-brand:var(--blue-500);
--color-brand-hover:var(--blue-600);
--color-brand-active:var(--blue-700);
--color-brand-subtle:var(--blue-50);
--color-focus-ring:var(--blue-400);
--color-success:var(--green-500);
--color-success-subtle:var(--green-50);
--color-warning:var(--amber-500);
--color-warning-subtle:var(--amber-50);
--color-danger:var(--red-500);
--color-danger-subtle:var(--red-50);
}

:root{
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--fw-light:300;/* @kind font */--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
--fs-display-xl:88px;--lh-display-xl:1;/* @kind font */--ls-display-xl:-0.045em;/* @kind font */
--fs-display-l:64px;--lh-display-l:1.05;/* @kind font */--ls-display-l:-0.035em;/* @kind font */
--fs-display-m:48px;--lh-display-m:1.1;/* @kind font */--ls-display-m:-0.03em;/* @kind font */
--fs-heading-l:32px;--lh-heading-l:1.2;/* @kind font */--ls-heading-l:-0.02em;/* @kind font */
--fs-heading-m:24px;--lh-heading-m:1.3;/* @kind font */--ls-heading-m:-0.01em;/* @kind font */
--fs-heading-s:20px;--lh-heading-s:1.35;/* @kind font */--ls-heading-s:-0.005em;/* @kind font */
--fs-body-l:18px;--lh-body-l:1.6;/* @kind font */--ls-body-l:0em;/* @kind font */
--fs-body-m:16px;--lh-body-m:1.6;/* @kind font */--ls-body-m:0em;/* @kind font */
--fs-body-s:14px;--lh-body-s:1.5;/* @kind font */--ls-body-s:0em;/* @kind font */
--fs-caption:12px;--lh-caption:1.4;/* @kind font */--ls-caption:0.01em;/* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px;--space-12:192px;
--grid-unit:40px;
--container-max:1200px;
}

:root{
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
--shadow-sm:0 1px 2px rgba(17,17,17,0.06);
--shadow-md:0 4px 12px rgba(17,17,17,0.08);
--shadow-lg:0 12px 32px rgba(17,17,17,0.10);
--ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
--duration-fast:150ms;/* @kind other */--duration-base:250ms;/* @kind other */--duration-slow:400ms;/* @kind other */
--texture-grid:linear-gradient(rgba(17,17,17,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,0.025) 1px,transparent 1px);/* @kind other */
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary)}
a{color:var(--color-brand)}
a:hover{color:var(--color-brand-hover)}



    /* Mobile-only value statement, replacing .wf-desc's fuller sentence
       (see below). Hidden by default so it never renders on desktop even
       though it's a real element in the DOM there — .wf-desc itself is
       left completely untouched for desktop, this is a separate paragraph
       shown only at mobile widths, same pattern as Custom Software's
       .cs-desc-mobile. */
    .wf-desc-mobile{
      display:none;
    }
    @keyframes wfFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    @keyframes wfPing{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.1);opacity:0}}
    @keyframes wfPulseRing{0%{box-shadow:0 0 0 0 rgba(76,111,255,.45)}70%{box-shadow:0 0 0 9px rgba(76,111,255,0)}100%{box-shadow:0 0 0 0 rgba(76,111,255,0)}}
    @keyframes wfDotFade{0%,100%{opacity:.25}50%{opacity:1}}
    @media (max-width:960px){
      .wf-cols{grid-template-columns:1fr !important}
      .wf-left{border-right:none !important;border-bottom:1px solid var(--color-border) !important}
    }
    @media (max-width:860px){
      .wf-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    }
    /* Two-tone tagline split, desktop — previously only existed inside
       the max-width:767px block below, so on desktop the whole "Every
       order. Every approval. Every stage. Connected." line just
       inherited .wf-tagline's flat --blue-600, with no blue/black split
       at all (unlike ERP's and Applied AI's taglines). Reusing the same
       phrase selection the mobile rule below already established
       (order + stage = the emphasized/blue phrases), now also on
       desktop, and switching to --intel-blue to match every other
       card's tagline blue instead of this element's own indigo. */
    .wf-tag-order,
    .wf-tag-stage{
      color:var(--intel-blue);
    }
    .wf-tag-approval,
    .wf-tag-connected{
      color:var(--gray-900);
    }

    /* Mobile composition (data-index="2" = Workflow Automation only).
       Supersedes the old max-width:640px rules for .wf-h3/.wf-timeline/
       .wf-row-4/.wf-arrow, which stacked everything into one column and
       reset step order — that conflicted with this pass's requirement to
       keep the row layout, connectors, and step sequence intact, so those
       rules were removed rather than layered under a second breakpoint. */
    @media (max-width:767px){
      /* Identity: the desktop's large "Workflow / Automation" heading
         becomes the small eyebrow; the tagline becomes the main headline.
         Both are styled via inline style="" in the markup (not Tailwind
         utility classes), so every override here needs !important — a
         plain class rule cannot beat an inline style otherwise. */
      [data-index="2"] .wf-h3{
        font-size:12px !important;
        font-weight:700 !important;
        letter-spacing:.06em !important;
        text-transform:uppercase !important;
        color:var(--gray-900) !important;
        line-height:1 !important;
        margin:0 0 10px !important;
      }
      /* Single line: the markup now has a literal space before the <br>
         ("Workflow <br>Automation") so hiding the break here doesn't fuse
         the two words into "WorkflowAutomation" the way it did before —
         the space renders as a real character once the break disappears. */
      [data-index="2"] .wf-h3 br{
        display:none;
      }
      [data-index="2"] .wf-tagline{
        font-size:12px !important;
        line-height:1.1 !important;
        margin:0 0 6px !important;
      }
      /* Per-phrase emphasis: alternating blue/black instead of the desktop's
         single blue-600 for the whole line. The parent's inline color:blue-600
         still governs desktop (spans just inherit it there since only these
         two are overridden, and only inside this mobile breakpoint), so
         desktop's original all-blue heading is untouched. The blue phrases
         are repointed from --blue-600 (#3854e0, an indigo-leaning shade
         unique to this element) to --intel-blue (#1E70C8) — the brand blue
         every other mobile card's headline/accent color already uses (ERP's
         "Run the business", Applied AI's "People lead", etc.) — so this
         reads consistently with the rest of the mobile carousel instead of
         standing out as a slightly different blue. */
      [data-index="2"] .wf-tag-order,
      [data-index="2"] .wf-tag-stage{
        color:var(--intel-blue) !important;
      }
      [data-index="2"] .wf-tag-approval,
      [data-index="2"] .wf-tag-connected{
        color:var(--gray-900) !important;
      }
      /* Replaced on mobile by the shorter .wf-desc-mobile statement below —
         .wf-desc itself (and its full sentence) is only hidden here, never
         edited, so desktop keeps the original text and styling exactly. */
      [data-index="2"] .wf-desc{
        display:none !important;
      }
      /* Compact editorial/value-statement treatment: italic text with a
         thin grey rule on the left, comfortable bar-to-text gap, no quote
         marks — kept tight vertically so it doesn't eat into the space
         reclaimed for the animation.
         #app-wrapper prefix needed for the border: Tailwind's preflight
         resets border-width to 0 via "#app-wrapper *", an ID-boosted
         universal selector that beats a plain class rule regardless of how
         many classes it has. */
      #app-wrapper [data-index="2"] .wf-desc-mobile{
        display:block;
        font-size:12.5px;
        font-style:italic;
        line-height:1.4;
        color:var(--gray-600);
        margin:0 0 14px;
        padding-left:10px;
        border-left:2px solid var(--gray-200);
      }

      /* The 5 capability bullets and the bottom "Built for <depts>" box are
         secondary on mobile — the animation demonstrates the same
         capabilities, and the "Built for Sahith Engineering" pill on the
         right already carries the client identity. Both stay untouched on
         desktop (no display rule for them exists outside this block). */
      [data-index="2"] .wf-bullets{
        display:none !important;
      }
      [data-index="2"] .wf-builtfor{
        display:none !important;
      }

      /* Animation header row: title, client pill and the "Live Workflow"
         indicator, all inline-styled — compacted so title + pill fit on one
         line at this width instead of the pill wrapping to its own row. */
      [data-index="2"] .wf-header-row{
        margin-bottom:2px !important;
      }
      [data-index="2"] .wf-title{
        font-size:9px !important;
        white-space:nowrap;
      }
      [data-index="2"] .wf-title-row{
        flex-wrap:nowrap !important;
        min-width:0;
        width:100%;
        justify-content:space-between;
        gap:6px !important;
      }
      /* "Built for" and the logo were spread to opposite ends of the row
         (justify-content:space-between), reading as two disconnected
         elements. Right-aligned as one tight group instead — still using
         the row's available right-hand space (flex:1 1 auto keeps the pill
         claiming that space, just no longer spreading its own two children
         apart within it), with a slightly larger label/logo so the pair
         reads as a single, more prominent unit. */
      [data-index="2"] .svc-visual-caption-pill{
        background:transparent !important;
        padding:0 !important;
        gap:6px !important;
        flex:1 1 auto;
        justify-content:flex-end;
        min-width:0;
      }
      [data-index="2"] .svc-visual-caption-logo{
        max-height:26px !important;
      }
      [data-index="2"] .svc-visual-caption-label{
        font-size:12px !important;
      }
      [data-index="2"] .wf-live-row{
        gap:5px !important;
      }
      [data-index="2"] #wf-live-label{
        font-size:10px !important;
      }

      /* Row layout, connectors and step order are preserved exactly —
         only the arrow columns narrow (32px -> 10px) to give the four step
         cards in each row more of the available width. */
      [data-index="2"] .wf-row-4{
        grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) !important;
      }
      [data-index="2"] .wf-arrow svg{
        width:10px;
        height:6px;
      }

      /* The downward "bridge" connector between the two step rows is
         removed — the numbered cards (1-4, then 5-8) already communicate
         the sequence without it. This is the middle of the three
         .wf-timeline elements (the other two are the dot/line progress
         rows directly under each step row, which stay); .wf-bridge-row
         distinguishes it so only this one is hidden. */
      [data-index="2"] .wf-bridge-row{
        display:none !important;
      }
      /* Row 5-8 moves up into the space the bridge used to occupy, and the
         status row below gets extra room in turn. */
      [data-index="2"] .wf-row-4 ~ .wf-row-4{
        margin-top:8px !important;
      }
      [data-index="2"] .wf-kpis{
        margin-top:14px !important;
        gap:8px !important;
      }

      /* Shrink the 4 bottom metric cards (Production Queue, Pending
         Approvals, Machine Utilization, Today's Dispatch) now that the
         header/pill trims above have freed some room — helps the section
         land closer to a single mobile screen. Their internals are inline-
         styled (not classed) in the markup, so these are structural child
         selectors rather than class overrides, applied uniformly since all
         4 cards share the same layout: icon+label row, value, sub-label,
         and (KPI 1/2 only) a small bar chart. Content/labels/values/JS are
         untouched — only size. */
      [data-index="2"] .wf-kpis > div{
        padding:6px !important;
      }
      [data-index="2"] .wf-kpis > div > div:first-child > div:first-child > span:first-child{
        width:14px !important;
        height:14px !important;
      }
      [data-index="2"] .wf-kpis > div > div:first-child > div:first-child > span:last-child{
        font-size:9.5px !important;
      }
      [data-index="2"] .wf-kpis > div > div:first-child > div:nth-child(2){
        font-size:12px !important;
      }
      [data-index="2"] .wf-kpis > div > div:first-child > div:last-child{
        font-size:9.5px !important;
        margin-top:2px !important;
      }
      [data-index="2"] .wf-kpis > div > div:last-child[aria-hidden]{
        height:18px !important;
      }

      /* Step 4 "BOM Generated" runs a 5-item checklist that made this one
         card noticeably taller than its row-1 neighbours. Trimming the
         first ("SS Drum") and last ("Electricals") entries via display:none
         — scoped to mobile only, nothing removed from the markup — brings
         it back in line with the other cards' height without touching the
         card's own layout, and desktop still shows all 5 items unchanged. */
      #wf-bom-1,
      #wf-bom-5{
        display:none !important;
      }

      /* Status pills ("Pending Approval", "Approved", "In Progress",
         "Dispatched") are inline-style white-space:nowrap at 12px — the
         longest ("Pending Approval") measures ~121px, well past the ~75px
         step cards now use, so at this width it was spilling out past the
         card edge instead of wrapping or shrinking with everything else.
         Letting it wrap plus a smaller size keeps every label's full text
         (nothing removed) legible inside its own card. */
      [data-index="2"] .wf-status-pill{
        white-space:normal !important;
        font-size:9px !important;
        line-height:1.25 !important;
        padding:2px 4px !important;
        text-align:center;
      }

      /* Step 1's "Receiving request" label + animated dots sit in a
         nowrap flex row (the default for display:flex) that doesn't fit
         next to each other at this card width — wrapping keeps the dots
         under the text instead of spilling past the card edge. */
      #wf-step-1-arriving{
        flex-wrap:wrap !important;
      }
    }
    @media (prefers-reduced-motion:reduce){
      *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
    }