/* Surette Data Systems — Apps page secondary brand under Dark Matter */

.sds-apps-page {
  --sds-cyan: #22d3ee;
  --sds-violet: #a855f7;
  --sds-amber: #f59e0b;
  --sds-rose: #f472b6;
  --sds-lime: #a3e635;
  --sds-glow: rgba(168, 85, 247, 0.35);
  --cosmic-accent-a: rgba(168, 85, 247, 0.22);
  --cosmic-accent-b: rgba(245, 158, 11, 0.14);
  --cosmic-hue: 38deg;
  --cosmic-saturate: 1.18;
}

.sds-apps-page .fixed.inset-0 .bg-\[linear-gradient\(to_bottom\,rgba\(5\,5\,5\,0\.48\)\,\#050505_84\%\)\] {
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.42), #050505 84%),
    radial-gradient(circle at 82% 12%, rgba(168, 85, 247, 0.16), transparent 34%),
    radial-gradient(circle at 12% 28%, rgba(245, 158, 11, 0.1), transparent 38%) !important;
}

.sds-hero {
  position: relative;
  isolation: isolate;
  margin-bottom: 1rem !important;
}

.sds-hero__grid {
  display: block;
}

.sds-hero__copy {
  position: relative;
  z-index: 3;
  max-width: min(58rem, 64vw);
}

.sds-hero__copy:has(.sds-physics-wordmark) {
  max-width: min(62rem, 100%);
}

.sds-hero__visual {
  position: fixed;
  top: 1.5rem;
  right: -7rem;
  z-index: 0;
  width: min(54vw, 46rem);
  height: clamp(34rem, 54vw, 48rem);
  padding: clamp(1rem, 2vw, 2rem);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
  contain: layout style paint;
}

.sds-hero__visual::before {
  content: "";
  position: absolute;
  inset: 11% 1% 4%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 42%, rgba(245, 158, 11, 0.22), transparent 43%),
    radial-gradient(circle at 66% 28%, rgba(168, 85, 247, 0.32), transparent 46%);
  filter: blur(24px);
  opacity: 0.95;
  z-index: -1;
}

.sds-hero__floating-wrap {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: center center;
  transition: transform 0.75s ease-out;
}

.sds-hero__floating-wrap:has(.sds-hero__floating-stage:hover) {
  transform: scale(1.05) translateZ(0);
}

.sds-hero__floating-stage {
  display: block;
  width: min(78%, clamp(18rem, 30vw, 29rem));
  pointer-events: none;
  transform-origin: center center;
  animation: sds-floating-blocks 36s ease-in-out infinite;
  will-change: transform;
}

.sds-hero__floating-mark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 24px rgba(168, 85, 247, 0.28))
    drop-shadow(0 24px 54px rgba(0, 0, 0, 0.44));
  transition: filter 0.75s ease-out;
}

.sds-hero__floating-mark.is-flicked-away {
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.sds-hero__floating-stage:has(.sds-hero__floating-mark.is-flicked-away) {
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.sds-hero__flick-reveal {
  position: absolute;
  inset: 6% 6% 14%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94) translateY(6px);
}

.sds-hero__flick-reveal.is-revealed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(-12px);
  transition:
    opacity 0.85s ease-out 0.08s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    visibility 0s linear 0.08s;
}

.sds-hero__flick-reveal-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 1.1rem);
  margin-bottom: 0.15rem;
}

.sds-hero__flick-reveal-icon {
  width: clamp(24px, 2.4vw, 28px);
  height: clamp(24px, 2.4vw, 28px);
  color: rgba(163, 230, 53, 0.72);
  filter: drop-shadow(0 0 8px rgba(163, 230, 53, 0.28));
  opacity: 0.88;
  pointer-events: none;
}

.sds-hero__flick-reveal-icon.is-knocked-away {
  visibility: hidden;
}

.sds-hero__flick-reveal-icon:nth-child(2) {
  color: rgba(34, 211, 238, 0.78);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.24));
}

.sds-hero__flick-reveal-icon:nth-child(3) {
  color: rgba(168, 85, 247, 0.78);
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.24));
}

.sds-hero__flick-reveal-icon:nth-child(4) {
  color: rgba(245, 158, 11, 0.82);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.22));
}

.sds-hero__flick-reveal-kicker {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(0.74rem, 1.05vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(227, 226, 226, 0.52);
}

.sds-hero__flick-reveal-headline {
  margin: 0;
  max-width: 16ch;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-wrap: balance;
}

.sds-hero__flick-reveal-win {
  color: var(--sds-lime);
  text-shadow: 0 0 18px rgba(163, 230, 53, 0.38);
}

.sds-hero__flick-reveal-sub {
  margin: 0;
  max-width: 28ch;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(0.96rem, 1.45vw, 1.12rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(227, 226, 226, 0.72);
  text-wrap: balance;
}

html:lang(es) .sds-hero__copy:has(.sds-physics-wordmark) {
  max-width: min(68rem, 100%);
}

html:lang(es) .sds-hero__flick-reveal-headline {
  max-width: 24ch;
}

html:lang(es) .sds-hero__flick-reveal-sub {
  max-width: 36ch;
}

.sds-hero__flick-reveal-accent {
  color: var(--sds-lime);
  font-weight: 500;
}

.sds-flick-reveal-icon-fall {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 43;
  will-change: transform;
}

.sds-flick-reveal-icon-fall svg {
  width: 100%;
  height: 100%;
}

.sds-flick-reveal-icon-fall.is-rematerializing-icon {
  filter: blur(0);
}

.sds-hero__floating-wrap:has(.sds-hero__floating-stage:hover) .sds-hero__floating-stage {
  animation-play-state: paused;
}

.sds-hero__floating-wrap:has(.sds-hero__floating-stage:hover) .sds-hero__floating-mark {
  filter:
    drop-shadow(0 0 28px rgba(168, 85, 247, 0.36))
    drop-shadow(0 28px 58px rgba(0, 0, 0, 0.46));
}

.sds-hero + section {
  position: relative;
  z-index: 2;
  margin-top: -0.25rem;
}

.sds-hero__brand-mark {
  display: block;
  width: clamp(2.4rem, 5.2vw, 4rem);
  height: auto;
  margin: 0 0 0.38rem 0.08rem;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(168, 85, 247, 0.42))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.44));
  animation: sds-logo-float 7.2s ease-in-out infinite;
}

@media (min-width: 768px) {
  .sds-hero__floating-stage {
    pointer-events: auto;
    cursor: pointer;
  }

  .sds-apps-page .sds-hero__brand-mark:not(.sds-hero__brand-mark--physics-captured) {
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.28s ease;
  }

  .sds-apps-page .sds-hero__brand-mark:not(.sds-hero__brand-mark--physics-captured):hover {
    filter:
      drop-shadow(0 0 18px rgba(168, 85, 247, 0.52))
      drop-shadow(0 12px 24px rgba(0, 0, 0, 0.46));
  }
}

.sds-hero__brand-mark--physics-freeze {
  animation-play-state: paused !important;
}

.sds-hero__brand-mark--physics-captured {
  display: none !important;
  pointer-events: none;
  animation: none;
}

.sds-hero__brand-mark-spacer {
  display: block;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
  box-sizing: content-box;
  min-height: 0;
  contain: layout style;
}

/* "click me" speech bubble shown next to the brand mark while it rests in
   place on load. Hidden automatically once the mark is launched into physics
   (the source picks up the --physics-captured class). */
.sds-hero__click-hint {
  position: absolute;
  top: 0.7rem;
  left: clamp(3.1rem, 6vw, 5rem);
  z-index: 6;
  padding: 0.34rem 0.66rem;
  font: 700 clamp(0.72rem, 1.5vw, 0.92rem) "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0a0610;
  background: linear-gradient(135deg, #22d3ee, #a3e635);
  border-radius: 0.66rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(34, 211, 238, 0.45);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  animation: sds-click-hint-bob 2.6s ease-in-out infinite;
}

.sds-hero__click-hint::before {
  content: "";
  position: absolute;
  left: -0.46rem;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 0.42rem 0.5rem 0.42rem 0;
  border-color: transparent #22d3ee transparent transparent;
}

.sds-hero__brand-mark--physics-captured ~ .sds-hero__click-hint {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

@keyframes sds-click-hint-bob {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (max-width: 767px) {
  .sds-hero__click-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sds-hero__click-hint {
    animation: none;
  }
}

.sds-wordmark {
  position: relative;
  isolation: isolate;
  margin: 0 0 1.05rem;
  max-width: min(100%, 58rem);
  transform: translateZ(0);
  height: clamp(11rem, 26vw, 17rem);
}

.sds-wordmark::before {
  content: "";
  position: absolute;
  inset: 4% -3% 18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 58%, rgba(34, 211, 238, 0.32), transparent 34%),
    radial-gradient(circle at 72% 28%, rgba(139, 28, 255, 0.36), transparent 42%);
  filter: blur(26px);
  opacity: 0.8;
  z-index: -1;
  animation: sds-glow-pulse 4.5s ease-in-out infinite;
}

.sds-wordmark__system {
  display: grid;
  grid-template-columns: minmax(1.8rem, 7rem) auto minmax(1.8rem, 7rem);
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.6rem);
  width: min(100%, 52rem);
  margin-top: clamp(0.36rem, 0.78vw, 0.62rem);
  color: var(--sds-white);
  font: 900 clamp(1.25rem, 4.2vw, 3.2rem) "JetBrains Mono", monospace;
  letter-spacing: clamp(0.22em, 1vw, 0.48em);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
}

.sds-wordmark__rule {
  display: block;
  height: clamp(0.18rem, 0.7vw, 0.42rem);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.24);
}

.sds-wordmark__system-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.58rem, 2vw, 1.45rem);
  white-space: nowrap;
}

.sds-wordmark__data,
.sds-wordmark__systems {
  display: inline-block;
  transform: none;
}

.sds-hero__kicker {
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.sds-hero__kicker-lead {
  font-size: 0.72em;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.58);
}

.sds-hero__kicker-brand {
  color: var(--sds-amber);
}

.sds-hero__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.35rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
}

.sds-gradient-text {
  background: linear-gradient(120deg, var(--sds-cyan) 0%, var(--sds-violet) 48%, var(--sds-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sds-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--sds-white);
  max-width: 42rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.sds-hero__sub {
  margin-top: 0.85rem;
  font: 500 11px/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(142, 145, 146, 0.78);
  overflow: visible;
}

.sds-hero__sub + .sds-hero__sub {
  margin-top: 0.4rem;
}

.sds-hero__sub-spacer {
  height: 2.1rem;
}

.sds-hero__sub-accent {
  color: var(--sds-lime);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(163, 230, 53, 0.35);
}

.sds-hero__sub-prefix {
  color: rgba(168, 170, 171, 0.88);
  text-shadow: none;
}

.sds-hero__sub-prefix--falls {
  font-weight: 600;
}

.sds-hero__sub .sds-physics-wordmark--sub {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  overflow: visible;
  max-width: none;
  margin: 0;
  z-index: 31;
  pointer-events: auto;
  line-height: 1.4;
}

.sds-hero__sub .sds-physics-wordmark--sub .sds-physics-wordmark__arena {
  display: inline-block;
  vertical-align: baseline;
  width: auto;
  min-height: 0;
  line-height: 1.4;
  pointer-events: auto;
}

.sds-hero__sub .sds-physics-wordmark--sub .sds-physics-wordmark__line,
.sds-hero__sub .sds-physics-wordmark--sub .sds-physics-wordmark__line .char {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sds-lime);
  text-shadow: 0 0 12px rgba(163, 230, 53, 0.35);
  filter: none;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-visible .sds-physics-wordmark__line,
.sds-hero__sub .sds-physics-wordmark--sub.is-split .sds-physics-wordmark__line {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  margin: 0;
  white-space: nowrap;
  opacity: 1;
  overflow: visible;
  line-height: 1.4;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-split .sds-physics-wordmark__line::after {
  content: attr(data-split);
  display: inline;
  visibility: hidden;
  pointer-events: none;
  font: 600 11px/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-visible:not(.is-ready).is-split .sds-physics-wordmark__line .char {
  pointer-events: none;
  cursor: default;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-split .sds-physics-wordmark__arena {
  overflow: visible;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-split .sds-physics-wordmark__line .char {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  transform-origin: 50% 50%;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__arena {
  touch-action: manipulation;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 0.22em);
  height: calc(100% + 0.34em);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char.is-engage-cooldown {
  pointer-events: none;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char.is-cycle-active {
  pointer-events: none;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char.is-space-char {
  pointer-events: none;
  cursor: default;
}

.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char:hover,
.sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char:focus-visible {
  opacity: 0.88;
}

.sds-hero__sub .sds-physics-wordmark--sub[data-word="falls-apart"] .sds-physics-wordmark__line,
.sds-hero__sub .sds-physics-wordmark--sub[data-word="falls-apart"] .sds-physics-wordmark__line .char,
.sds-hero__sub .sds-physics-wordmark--sub[data-word="todo-falla"] .sds-physics-wordmark__line,
.sds-hero__sub .sds-physics-wordmark--sub[data-word="todo-falla"] .sds-physics-wordmark__line .char {
  color: rgba(168, 170, 171, 0.88);
  text-shadow: none;
}

.sds-physics-fall-layer .char.is-subline-char {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--sds-lime);
  text-shadow: 0 0 12px rgba(163, 230, 53, 0.35);
  filter: none;
  transform-origin: 50% 50%;
}

.sds-section-kicker {
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sds-violet);
  margin-bottom: 0.75rem;
}

.sds-section-kicker--gallery {
  color: var(--sds-cyan);
}

.sds-badge {
  display: inline-block;
  font: 700 10px "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sds-badge--live {
  color: var(--sds-lime);
  background: rgba(163, 230, 53, 0.1);
  border-color: rgba(163, 230, 53, 0.28);
}

.sds-badge--tag {
  color: var(--sds-violet);
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.24);
}

.sds-badge--custom {
  color: var(--sds-amber);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.28);
}

/* Highlight only the active Apps nav item (the one carrying the active
   border-b-2 marker), not other links that merely point to apps.html
   such as the Services dropdown trigger. */
.sds-apps-page nav a[href="apps.html"].border-b-2,
.sds-apps-page nav a[href="../apps.html"].border-b-2,
.sds-apps-page nav a[href="es/apps.html"].border-b-2 {
  color: var(--sds-violet) !important;
  border-color: var(--sds-violet) !important;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}

/* Mobile bottom nav: highlight the Apps tab only, never the Services
   trigger (which opens the services menu and also points to apps.html). */
.sds-apps-page .md\:hidden nav a[href="apps.html"]:not([data-mobile-services-trigger]),
.sds-apps-page .md\:hidden nav a[href="../apps.html"]:not([data-mobile-services-trigger]) {
  color: var(--sds-cyan) !important;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.75));
}

@keyframes sds-logo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1.2deg); }
}

@keyframes sds-floating-blocks {
  0%, 100% { transform: translate(-18%, 4%) rotate(-3deg); }
  12% { transform: translate(26%, -18%) rotate(1.4deg); }
  25% { transform: translate(48%, -7%) rotate(3.4deg); }
  39% { transform: translate(25%, 10%) rotate(-1deg); }
  54% { transform: translate(-21%, 11%) rotate(-3.8deg); }
  69% { transform: translate(-24%, -8%) rotate(-1.6deg); }
  84% { transform: translate(32%, -20%) rotate(2.6deg); }
}

@keyframes sds-glow-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

html { scroll-behavior: smooth; }

body.sds-apps-page {
  background: #050505;
  color: #e3e2e2;
  overflow-x: hidden;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.app-tile {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.14) 54%, rgba(245, 158, 11, 0.08));
  border-color: rgba(168, 85, 247, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.app-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 70px rgba(168, 85, 247, 0.16);
}

.app-tile__top {
  position: relative;
  z-index: 2;
  min-height: 96px;
  overflow: visible;
  background:
    radial-gradient(circle at 78% 18%, rgba(168, 85, 247, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(34, 211, 238, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-tile__icon {
  position: absolute;
  left: 20px;
  bottom: -24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}

.app-tile__icon .material-symbols-outlined {
  color: var(--sds-cyan);
}

.app-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 42px 20px 20px;
}

.app-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--sds-amber);
  font: 700 11px "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.app-custom-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.14));
  border: 1px solid rgba(168, 85, 247, 0.24);
  box-shadow: 0 24px 80px rgba(168, 85, 247, 0.1);
}

.app-custom-banner h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  line-height: 1.08;
  color: #fff;
}

.app-custom-banner p {
  max-width: 760px;
}

.app-custom-banner__kicker {
  color: var(--sds-cyan);
}

.sds-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(120deg, var(--sds-violet), var(--sds-amber));
  color: #050505;
  font: 700 14px "JetBrains Mono", monospace;
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.32);
  transition: transform 0.2s ease;
}

.sds-btn-primary:hover {
  transform: scale(1.05);
}

.sds-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(34, 211, 238, 0.45);
  color: var(--sds-cyan);
  font: 700 14px "JetBrains Mono", monospace;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sds-btn-secondary:hover {
  background: rgba(34, 211, 238, 0.1);
  transform: scale(1.05);
}

.app-tile__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.72;
  filter: saturate(1.1) contrast(1.05) hue-rotate(18deg);
}

.app-tile__top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.78)),
    radial-gradient(circle at 78% 12%, rgba(168, 85, 247, 0.24), transparent 38%);
  pointer-events: none;
}

.app-tile__visual {
  position: absolute;
  inset: 12px 14px 20px;
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(5, 5, 5, 0.84), rgba(31, 32, 32, 0.72));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.app-tile__visual::before {
  content: "";
  display: block;
  height: 20px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.18));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-tile__visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}

.app-tile__visual-pill,
.app-tile__visual-row {
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.app-tile__visual-pill {
  height: 18px;
}

.app-tile__visual-row {
  height: 7px;
  margin: 7px 8px;
}

.app-tile__visual-row:nth-child(2) {
  width: 72%;
  background: rgba(34, 211, 238, 0.24);
}

.app-tile__visual-row:nth-child(3) {
  width: 88%;
}

.app-tile__visual-row:nth-child(4) {
  width: 58%;
  background: rgba(245, 158, 11, 0.22);
}

@media (max-width: 767px) {
  .sds-hero {
    min-height: clamp(24rem, 104vw, 31rem);
    margin-inline: -1rem;
    margin-bottom: 1.25rem !important;
    padding-inline: 1rem;
    overflow: visible;
  }

  .sds-hero__copy--mark-collapsed .sds-hero__kicker {
    line-height: 1.4;
  }

  .sds-hero__grid {
    display: block;
  }

  .sds-hero__copy {
    max-width: none;
  }

  .sds-hero__visual {
    position: absolute;
    inset: -3.5rem -2.75rem -15rem 0.35rem;
    z-index: 0;
    width: auto;
    height: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .sds-hero__flick-reveal {
    display: none;
  }

  .sds-hero__visual::before {
    inset: 18% -5% 2%;
    filter: blur(22px);
  }

  .sds-hero__floating-wrap {
    transition: none;
    transform: none;
  }

  .sds-hero__floating-wrap:has(.sds-hero__floating-stage:hover) .sds-hero__floating-stage {
    animation-play-state: running;
  }

  .sds-hero__floating-wrap:has(.sds-hero__floating-stage:hover) .sds-hero__floating-mark {
    filter:
      drop-shadow(0 0 24px rgba(168, 85, 247, 0.28))
      drop-shadow(0 24px 54px rgba(0, 0, 0, 0.44));
  }

  .sds-hero__floating-stage {
    width: min(84vw, 21rem);
    pointer-events: none;
    cursor: default;
    animation-name: sds-floating-blocks-mobile;
  }

  .sds-hero__floating-mark {
    pointer-events: none;
    cursor: default;
  }

  .sds-hero__sub {
    line-height: 1.4;
  }

  .sds-hero + section {
    margin-top: -1.1rem;
  }

  @keyframes sds-floating-blocks-mobile {
    0%, 100% { transform: translate(10%, -2%) rotate(-3deg); }
    12% { transform: translate(24%, -20%) rotate(1.4deg); }
    25% { transform: translate(34%, -9%) rotate(3.4deg); }
    39% { transform: translate(19%, 8%) rotate(-1deg); }
    54% { transform: translate(6%, 9%) rotate(-3.8deg); }
    69% { transform: translate(3%, -10%) rotate(-1.6deg); }
    84% { transform: translate(28%, -22%) rotate(2.6deg); }
  }

  .sds-wordmark {
    max-width: 100%;
    height: clamp(9rem, 50vw, 14rem);
  }

  .sds-wordmark__system {
    grid-template-columns: minmax(1rem, 2.4rem) auto minmax(1rem, 2.4rem);
    gap: 0.55rem;
    color: var(--sds-white);
    font-size: clamp(0.82rem, 4.4vw, 1.15rem);
    letter-spacing: 0.2em;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
  }

  .sds-wordmark__rule {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.24);
  }

  .sds-apps-page .sds-hero__brand-mark:not(.sds-hero__brand-mark--physics-captured) {
    pointer-events: auto;
    cursor: pointer;
  }

  .sds-hero__brand-mark {
    width: clamp(2.05rem, 10.5vw, 2.75rem);
    margin-bottom: 0.3rem;
  }

  .downloads-main {
    padding-top: 7.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 5.5rem !important;
  }

  .downloads-main section:first-child {
    margin-bottom: 2rem;
  }

  .downloads-main .glass-panel,
  .downloads-main .glass-card {
    border-radius: 1rem;
  }

  .downloads-main article.glass-panel,
  .downloads-main aside.glass-card {
    padding: 1.25rem;
  }

  .app-tile {
    min-height: 210px;
  }

  .app-tile__top {
    min-height: 68px;
  }

  .app-tile__icon {
    left: 12px;
    bottom: -19px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .app-tile__icon .material-symbols-outlined {
    font-size: 1.55rem;
  }

  .app-tile__body {
    gap: 10px;
    padding: 32px 12px 12px;
  }

  .app-tile__body h3 {
    font-size: 0.98rem !important;
    line-height: 1.15;
  }

  .app-tile__body p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .app-tile__body .sds-badge {
    font-size: 8px;
    line-height: 1.1;
    padding: 0.18rem 0.38rem;
  }

  .app-tile__cta {
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }

  .app-custom-banner {
    padding: 1.35rem;
  }

  .app-tile__image {
    opacity: 0.65;
  }

  .app-tile__visual {
    inset: 8px 9px 15px;
    border-radius: 9px;
  }

  .app-tile__visual::before {
    height: 14px;
  }

  .app-tile__visual-grid {
    gap: 4px;
    padding: 6px;
  }

  .app-tile__visual-pill {
    height: 13px;
  }

  .app-tile__visual-row {
    height: 5px;
    margin: 5px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sds-wordmark::before,
  .sds-hero__floating-stage {
    animation: none;
  }

  .sds-hero__flick-reveal {
    transform: none;
  }

  .sds-hero__flick-reveal.is-revealed {
    transition: opacity 0.35s ease, visibility 0s;
    transform: none;
  }
}

/* Apps page — full-viewport loading overlay */

body.is-apps-loading {
  overflow: hidden;
}

body.is-apps-loading > :not(#sds-apps-loader) {
  visibility: hidden;
}

body.is-apps-ready > :not(#sds-apps-loader) {
  visibility: visible;
}

.sds-apps-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(139, 106, 173, 0.07), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(78, 50, 110, 0.1), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(184, 147, 90, 0.04), transparent 38%),
    #050505;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.sds-apps-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sds-apps-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sds-apps-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  width: min(18rem, 78vw);
  text-align: center;
}

.sds-apps-loader__mark {
  position: relative;
  width: 4.5rem;
  height: 4.75rem;
  display: grid;
  place-items: center;
}

.sds-apps-loader__mark-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(160, 130, 90, 0.2);
  box-shadow:
    0 0 24px rgba(107, 88, 130, 0.1),
    inset 0 0 18px rgba(160, 120, 72, 0.06);
  animation: sds-loader-ring-pulse 2.4s ease-in-out infinite;
}

.sds-apps-loader__mark-core {
  position: relative;
  z-index: 1;
  display: block;
  width: 2.75rem;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter:
    saturate(0.48)
    brightness(0.86)
    contrast(0.92)
    drop-shadow(0 0 8px rgba(107, 88, 130, 0.24))
    drop-shadow(0 0 12px rgba(160, 120, 72, 0.14));
  animation: sds-loader-mark-pulse 2.8s ease-in-out infinite;
}

.sds-apps-loader__bar {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 12px rgba(107, 88, 130, 0.08);
}

.sds-apps-loader__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b7c8f, #8b6aad 42%, #b8935a 78%, #9a7b4f);
  box-shadow: 0 0 14px rgba(139, 106, 173, 0.28);
  transition: width 0.28s ease-out;
}

.sds-apps-loader__status {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 199, 199, 0.72);
}

@keyframes sds-loader-ring-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes sds-loader-mark-pulse {
  0%,
  100% {
    opacity: 0.86;
    filter:
      saturate(0.44)
      brightness(0.84)
      contrast(0.9)
      drop-shadow(0 0 6px rgba(107, 88, 130, 0.18))
      drop-shadow(0 0 10px rgba(160, 120, 72, 0.1));
  }

  50% {
    opacity: 0.96;
    filter:
      saturate(0.52)
      brightness(0.9)
      contrast(0.94)
      drop-shadow(0 0 10px rgba(107, 88, 130, 0.28))
      drop-shadow(0 0 14px rgba(160, 120, 72, 0.16));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sds-apps-loader,
  .sds-apps-loader.is-active {
    transition: none;
  }

  .sds-apps-loader__mark-ring,
  .sds-apps-loader__mark-core {
    animation: none;
  }

  .sds-apps-loader__bar-fill {
    transition: none;
    width: 100% !important;
  }
}

/* Contact CTA — fixed top-right on desktop */
.sds-apps-page .sds-nav-contact-stack {
  position: fixed;
  z-index: 55;
  display: none;
  pointer-events: none;
}

.sds-apps-page .sds-nav-contact-stack > * {
  pointer-events: auto;
}

/* Physics toggle — top-right of hero content (scrolls with page, below fixed nav) */
.sds-apps-page .sds-hero .sds-physics-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 43;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .sds-apps-page .sds-hero .sds-physics-toggle {
    right: 0.5rem;
  }
}

@media (min-width: 768px) {
  .sds-apps-page .sds-nav-contact-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    top: calc(env(safe-area-inset-top, 0px) + 1.14rem);
    right: var(--dm-nav-side-offset, 4rem);
  }

  .sds-apps-page .sds-nav-contact-stack__cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.225rem;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.18);
    transition: transform 0.2s ease;
  }

  .sds-apps-page .sds-nav-contact-stack__cta:hover {
    transform: scale(1.05);
  }

  .sds-apps-page .sds-nav-contact-stack__cta:active {
    transform: scale(0.95);
  }
}

/* ───────────────────────────────────────────────────────────────
   Fluid desktop top-nav (≥768px). The base layout in nav.css pins the
   brand and Contact CTA with absolute/fixed positioning at a fixed
   side offset while the link cluster is centred across the full width,
   so on narrow desktop/tablet widths (≈768–1150px) the centred links
   slid under the brand and the CTA and the text overlapped.

   Here the brand is returned to normal flow and the cluster is centred
   in the space that remains, with the side offset, inter-link gap and
   link font-size all scaling continuously via clamp(). The result
   adapts to any width instead of snapping between two fixed states.
   Scoped to .sds-apps-page so other pages keep the base nav.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sds-apps-page {
    /* Edge inset shared by the brand (left) and Contact CTA (right);
       tightens as the viewport narrows but reaches the original 4rem
       by standard desktop widths (~1280px). */
    --dm-nav-side-offset: clamp(1.25rem, 5vw, 4rem);
    /* Right gutter held open for the fixed Contact CTA overlay so the
       centred link cluster can never slide underneath it. */
    --dm-nav-contact-reserve: 10.5rem;
  }

  /* Brand back into the flex flow (was position:absolute) — the links
     now physically cannot overlap it at any width. */
  .sds-apps-page nav.fixed.top-0.w-full > .site-brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto;
  }

  /* Single flow row: brand | centred links | reserved right gutter
     (the Contact overlay lives in that gutter). */
  .sds-apps-page nav.fixed.top-0.w-full {
    justify-content: flex-start !important;
    padding-left: var(--dm-nav-side-offset) !important;
    padding-right: calc(var(--dm-nav-side-offset) + var(--dm-nav-contact-reserve)) !important;
    column-gap: clamp(0.6rem, 1.6vw, 1.5rem);
  }

  /* Link cluster centres in the gap between the brand and the reserved
     gutter; internal spacing tightens fluidly. */
  .sds-apps-page nav.fixed.top-0.w-full > .hidden.md\:flex {
    margin-inline: auto !important;
    gap: clamp(0.55rem, 1.5vw, 2.5rem) !important;
    min-width: 0;
  }

  /* Link text eases down a little on narrow widths to buy room. */
  .sds-apps-page nav.fixed.top-0.w-full > .hidden.md\:flex a.font-label-mono,
  .sds-apps-page nav.fixed.top-0.w-full > .hidden.md\:flex .services-nav-group > a,
  .sds-apps-page nav.fixed.top-0.w-full > .hidden.md\:flex .lang-switch {
    font-size: clamp(0.78rem, 0.66rem + 0.42vw, 0.875rem);
  }
}

/* Tight band: below ≈880px there isn't room for the floating Contact
   CTA alongside the full link row. Drop the CTA and reclaim its gutter
   so the links keep one clean, non-overlapping row down to the mobile
   breakpoint (Contact is still reachable from the footer, and from the
   bottom nav once below 768px). */
@media (min-width: 768px) and (max-width: 879.98px) {
  .sds-apps-page {
    --dm-nav-contact-reserve: 0rem;
  }

  .sds-apps-page .sds-nav-contact-stack {
    display: none !important;
  }
}

.sds-physics-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin: 0;
  padding: 0.18rem 0.34rem 0.18rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 5, 5, 0.52);
  backdrop-filter: blur(10px);
  cursor: pointer;
  user-select: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 199, 199, 0.72);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.sds-physics-toggle__label:hover {
  border-color: rgba(0, 240, 255, 0.28);
  color: rgba(227, 226, 226, 0.88);
}

.sds-physics-toggle.is-physics-on .sds-physics-toggle__text {
  color: rgba(0, 240, 255, 0.82);
}

.sds-physics-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sds-physics-toggle__track {
  position: relative;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sds-physics-toggle__thumb {
  position: absolute;
  top: 0.11rem;
  left: 0.11rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(196, 199, 199, 0.88);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  transform: translateX(0.63rem);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sds-physics-toggle__input:checked + .sds-physics-toggle__track {
  background: rgba(0, 240, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.24);
}

.sds-physics-toggle__input:checked + .sds-physics-toggle__track .sds-physics-toggle__thumb {
  transform: translateX(0);
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
}

.sds-physics-toggle__input:focus-visible + .sds-physics-toggle__track {
  outline: 1px solid rgba(0, 240, 255, 0.55);
  outline-offset: 2px;
}

html[data-sds-physics-disabled="true"] .sds-physics-wordmark.is-ready.is-split .sds-physics-wordmark__line .char:hover,
html[data-sds-physics-disabled="true"] .sds-physics-wordmark.is-ready.is-split .sds-physics-wordmark__line .char:focus-visible,
html[data-sds-physics-disabled="true"] .sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char:hover,
html[data-sds-physics-disabled="true"] .sds-hero__sub .sds-physics-wordmark--sub.is-ready.is-split .sds-physics-wordmark__line .char:focus-visible {
  color: inherit;
  text-shadow: none;
}