/* ==========================================================================
   dAIgnostics — The Core Stack
   Brand: daignostics.info — red #E21E3A / #BB1930, ink #302D2D, Inter + Adarsh Sans
   ========================================================================== */

@font-face {
  font-family: 'Adarsh Sans';
  src: url('../assets/fonts/AdarshSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #E21E3A;
  --red-dark: #BB1930;
  --red-tint: #FCE9EC;
  --ink: #302D2D;
  --ink-soft: #5A5656;
  --ink-mute: #6B6767;
  --ink-faint: #9A9494;
  --line: #ECEAE9;
  --bg-soft: #FAFAF9;

  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Adarsh Sans', 'Questrial', 'Inter', system-ui, sans-serif; /* Adarsh Sans has no Č Ć Đ Š Ž: Questrial supplies matching geometric glyphs */

  /* Isometric geometry — breakpoints only retune these */
  --slab: clamp(220px, min(44vw, 34vh), 320px);
  --thick: calc(var(--slab) * 0.09);
  --gap: calc(var(--slab) * 0.28);
  --lift: 20px;
  --entrance-z: calc(var(--slab) * 0.8);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: #FFFFFF;
  overflow-x: clip; /* transformed 3D extras (module) must never create page-level h-scroll */
}

body {
  margin: 0;
  background: transparent; /* the fixed .bg layer shows through */
  color: var(--ink);
  font: 400 16px/1.55 var(--font-ui);
  /* no overflow on body: html{overflow-x:clip} handles clipping, and a body
     scroll container would break position:sticky for the curtain effect */
}

/* --------------------------------------------------------------------------
   Ambient background — faint neural strands + drifting colour washes,
   echoing the daignostics.info hero. Lives OUTSIDE the 3D scene tree,
   so blur/opacity here can never flatten the stack.
   -------------------------------------------------------------------------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.bg-blob--red {
  top: -18vmax;
  right: -12vmax;
  background: radial-gradient(circle at 40% 40%, rgba(226, 30, 58, .09), transparent 65%);
  animation: blobDrift 24s ease-in-out infinite alternate;
}

.bg-blob--blue {
  bottom: -20vmax;
  left: -14vmax;
  background: radial-gradient(circle at 55% 45%, rgba(36, 103, 224, .09), transparent 65%);
  animation: blobDrift 32s ease-in-out infinite alternate-reverse;
}

@keyframes blobDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-9vmax, 6vmax, 0) scale(1.18); }
}

.bg-net {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  will-change: transform;
}

/* the SVG roots animate (compositor-friendly), never their inner <g> */
.bg-net--a { animation: netDrift 30s ease-in-out infinite alternate; }
.bg-net--b { animation: netDrift 42s ease-in-out infinite alternate-reverse; }

@keyframes netDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-70px, 42px, 0); }
}

body.page-hidden .bg-blob,
body.page-hidden .bg-net,
body.page-hidden .bg-net path,
body.page-hidden .bg-net g > g {
  animation-play-state: paused;
}

/* The strands themselves undulate: CSS animates the path's `d` between
   structurally identical beziers (Chromium/Firefox; Safari falls back to the
   whole-layer drift). Dots twinkle via group opacity. */

.bg-net--a path:nth-of-type(1) { animation: waveA1 8s ease-in-out infinite alternate; }
.bg-net--a path:nth-of-type(2) { animation: waveA2 10s ease-in-out infinite alternate; animation-delay: -3s; }
.bg-net--a path:nth-of-type(3) { animation: waveA3 9s ease-in-out infinite alternate; animation-delay: -6s; }
.bg-net--b path:nth-of-type(1) { animation: waveB1 8.5s ease-in-out infinite alternate; animation-delay: -2s; }
.bg-net--b path:nth-of-type(2) { animation: waveB2 11s ease-in-out infinite alternate; animation-delay: -5s; }

@keyframes waveA1 {
  from { d: path("M -100 180 C 300 80, 520 340, 860 260 S 1420 120, 1750 240"); }
  to   { d: path("M -100 255 C 300 185, 520 250, 860 335 S 1420 215, 1750 165"); }
}
@keyframes waveA2 {
  from { d: path("M -80 620 C 260 700, 540 520, 900 610 S 1460 740, 1720 640"); }
  to   { d: path("M -80 550 C 260 615, 540 605, 900 525 S 1460 655, 1720 715"); }
}
@keyframes waveA3 {
  from { d: path("M 200 -60 C 340 260, 240 520, 430 820 S 620 980, 700 1100"); }
  to   { d: path("M 280 -60 C 275 305, 335 475, 505 775 S 665 935, 655 1100"); }
}
@keyframes waveB1 {
  from { d: path("M 1700 120 C 1320 260, 1080 140, 780 360 S 320 660, -80 560"); }
  to   { d: path("M 1700 190 C 1320 170, 1080 230, 780 290 S 320 575, -80 640"); }
}
@keyframes waveB2 {
  from { d: path("M 1750 820 C 1380 700, 1150 900, 820 780 S 380 640, 60 860"); }
  to   { d: path("M 1750 745 C 1380 775, 1150 815, 820 855 S 380 715, 60 785"); }
}

.bg-net g > g { animation: dotsTwinkle 4.5s ease-in-out infinite alternate; }
.bg-net--b g > g { animation-duration: 6s; animation-delay: -2.5s; }

@keyframes dotsTwinkle {
  from { opacity: .10; }
  to   { opacity: .38; }
}

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

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

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

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font: 600 15px/1 var(--font-ui);
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  min-height: 44px;
  white-space: nowrap;
}

.btn-small { padding: 9px 16px; font-size: 14px; min-height: 40px; }

.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: var(--red-dark); }

.btn-ghost {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 72px;
}

.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }

/* product wordmark next to the company logo (desktop only: the narrow header has no room).
   --mark-h is set inline per site so the two wordmarks, which have different
   proportions, render with the same letter height */
.brand-product { display: none; }
@media (min-width: 900px) {
  .brand-product {
    display: inline-block;
    height: var(--mark-h, 28px);
    width: auto;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
    box-sizing: content-box;
  }
}

/* hero h1 rendered as the product wordmark; --hero-mark-h set inline per site */
.hero-title--logo img {
  display: block;
  height: var(--hero-mark-h, clamp(44px, 5.9vw, 72px));
  width: auto;
  max-width: 100%;
}
.brand-logo {
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;        /* if the narrow header squeezes the box, the mark scales
  object-position: left center;  instead of being squashed */
  display: block;
}

@media (max-width: 399.98px) {
  .head-row { gap: 8px; }
  .brand-logo { height: 26px; min-width: 96px; } /* the mark never shrinks below a legible width; the nav yields instead */
  .head-row .btn-small { padding: 8px 12px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Main navigation (dropdowns on hover/focus-within; plain links < 720px)
   -------------------------------------------------------------------------- */

.main-nav {
  flex: 1 1 auto;
  margin-right: 12px;
}

.main-nav > ul {
  display: flex;
  justify-content: flex-end; /* links sit beside the demo button, not centered */
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul > li { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font: 600 15px/1 var(--font-ui);
  color: var(--red-dark); /* brand red: reads as a menu, not as static text */
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.nav-link:hover,
.nav-link:focus-visible { background: var(--bg-soft); color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.nav-link[aria-current="page"] { color: var(--red); }

.nav-link .nav-chev {
  width: 12px;
  height: 12px;
  color: currentColor;
  transition: transform .18s;
}

.has-dd:hover .nav-chev,
.has-dd:focus-within .nav-chev { transform: rotate(180deg); }

.dd {
  position: absolute;
  top: calc(100% + 6px);
  left: auto;
  right: 0; /* right-anchored: the nav now lives at the right edge */
  min-width: 320px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(48, 45, 45, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
  z-index: 30;
}

.has-dd:hover .dd,
.has-dd:focus-within .dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s, transform .18s, visibility 0s;
}

.dd a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font: 500 14px/1.4 var(--font-ui);
  color: var(--ink-soft);
  text-decoration: none;
}

.dd a:hover { background: var(--bg-soft); color: var(--ink); }
.dd .dd-all { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; color: var(--red-dark); font-weight: 600; }

@media (max-width: 719.98px) {
  .dd { display: none; }
  .nav-link { padding: 10px 10px; font-size: 14px; }
  /* no dropdowns here: the links open the pages, so the chevron points right */
  .nav-link .nav-chev,
  .has-dd:hover .nav-chev,
  .has-dd:focus-within .nav-chev { display: inline-block; transform: rotate(-90deg); }
  .head-row > .btn { display: none; } /* nav wins the narrow header; CTA stays in page */
}

@media (max-width: 399.98px) {
  .nav-link { padding: 8px 6px; font-size: 13px; } /* tighter so logo + nav + language pill fit ~360px */
}

@media (max-width: 349.98px) {
  /* 320px-class phones: everything a notch smaller so nothing overlaps the mark */
  .brand-logo { min-width: 80px; }
  .main-nav { margin-right: 4px; }
  .main-nav ul { gap: 0; }
  .nav-link { padding: 8px 4px; font-size: 12.5px; }
  .lang-switch { padding: 6px 8px; font-size: 12px; }
}

/* Language switch pill */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 10px;
  margin-left: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 12.5px/1 var(--font-ui);
  letter-spacing: .06em;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .15s, border-color .15s, background-color .15s;
}
.lang-switch:hover { color: var(--red); border-color: var(--red); background: var(--red-tint); }

@media (max-width: 719.98px) {
  .lang-switch { margin-left: 4px; }
}

/* --------------------------------------------------------------------------
   Curtain scroll (homepage, desktop): the intro scrolls until its bottom
   meets the viewport bottom and pins; the stack panel rises over it and pins
   in turn; then the badges + CTA curtain rises over the stack. --pin-top is
   set from JS per [data-pin] element, so a region taller than the space
   under the header gets a negative offset and scrolls through first.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js .intro { /* JS-gated: without --pin-top from JS it would pin at once */
    position: sticky;
    top: var(--pin-top, 72px);
    z-index: 0;
  }
  .pin-region {
    position: sticky;
    top: var(--pin-top, 72px); /* just below the sticky header */
    scroll-margin-top: 72px;   /* #platform lands exactly at the pin point */
    z-index: 1;
    /* white panel that rises over the pinned intro; at least a viewport tall
       so nothing of the intro shows below it once pinned.
       NO overflow:hidden here — the 3D scene lives inside (FLATTENING RULES) */
    min-height: calc(100vh - 72px);
    background: #fff;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -22px 48px rgba(48, 45, 45, .10);
  }
  /* tighten the vertical rhythm so heading + stack fit under the header on a
     typical desktop viewport (incl. 1280x720), so the panel pins whole */
  .pin-region .hero { padding-block: 28px 0; }
  .pin-region .hint { margin-top: 12px; }
  .pin-region .stack-viz { padding-block: 8px 24px; }
  .curtain {
    position: relative;
    z-index: 2;
    /* dwell: the pinned stack stays fully uncovered for a stretch of scroll
       before the curtain starts to rise over it, so it can be explored */
    margin-top: 24vh;
    background: #fff;
    border-radius: 28px 28px 0 0;
    overflow: hidden; /* safe: no 3D scene inside the curtain */
    box-shadow: 0 -22px 48px rgba(48, 45, 45, .10);
    /* at least a full viewport tall: the curtain fully covers the pinned
       region before its sticky travel runs out at the end of the document */
    min-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .curtain .badges { border-top: 0; }
  .site-foot {
    position: relative;
    z-index: 2;
    background: #fff;
  }
}

/* --------------------------------------------------------------------------
   Subpages: Rješenja / Primjene
   -------------------------------------------------------------------------- */

.subhero { padding-block: 64px 20px; }

.page-sections {
  max-width: 880px;
  margin-inline: auto;
  padding-bottom: 24px;
}

.sol {
  border-top: 1px solid var(--line);
  padding: 46px 0 40px;
  scroll-margin-top: calc(72px + 24px); /* clear the sticky header when jumped to from the dropdowns */
}
.sol:first-of-type { border-top: 0; padding-top: 28px; }

.sol-kicker {
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin: 0 0 10px;
}

.sol-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  color: var(--ink);
}

.layer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.lb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: 600 11.5px/1 var(--font-ui);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.lb i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.lb-clarity i { background: #FFFFFF; border: 1px solid #C9C4C1; }
.lb-inference i { background: #2467E0; }
.lb-datahub i { background: #4A4747; }
.lb-edge i { background: #16233F; }

.sol-desc {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.sol p strong { color: var(--ink); }

.points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.points li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.sol-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}

.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font: 600 11.5px/1.6 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 8px;
  vertical-align: 1px;
}

.uc-block { margin: 0 0 14px; }
.uc-block .uc-label {
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-dark);
  display: block;
  margin-bottom: 6px;
}
.uc-block p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding-block: 88px 8px;
}

.eyebrow {
  margin: 0 0 14px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 1.08;
  color: var(--ink);
}

.hero-title .accent { color: var(--red); }

.lede {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.hint {
  margin: 22px auto 0;
  font-size: 13px;
  color: var(--ink-mute);
}

/* Hero entrance (pure CSS, plays on load) */
.eyebrow, .hero-title, .lede, .hint,
.intro-tagline, .intro-lede, .intro-actions, .intro-media__frame {
  /* backwards, not both: the end state equals the natural style, and a
     filled-forward transform would keep .intro-media a stacking context
     that paints the photo's shadow over the feature cards below */
  animation: heroIn .5s var(--ease-out) backwards;
}
.hero-title { animation-delay: .08s; }
.lede, .intro-tagline { animation-delay: .16s; }
.hint, .intro-lede { animation-delay: .24s; }
.intro-actions { animation-delay: .32s; }
.intro-media__frame { animation-delay: .2s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; } /* none, not translateY(0): a retained transform
                                            would leave a stacking context that paints
                                            the hero photo's shadow over the cards below */
}

/* --------------------------------------------------------------------------
   Intro — copy on the left over a large hero photo that sits in the
   background, masked so it fades toward the text; the feature grid follows.
   From 900px the photo is sticky inside the intro and recedes (scales down,
   fades) as the copy and cards scroll over it: --hero-p (0..1) is set by JS
   from how far the intro has scrolled. The intro lives ABOVE the pin-region,
   which rises over it as a curtain on desktop.
   -------------------------------------------------------------------------- */

.intro {
  position: relative;
  padding-block: 0 48px;
  --hero-p: 0;
}

.intro-inner {
  position: relative;
  z-index: 1;
}

.intro-hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 72px);
  padding-block: 56px 48px;
}

.intro-copy {
  min-width: 0;
  max-width: 620px;
}

.intro-tagline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.intro-lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.intro-eyebrow { margin-bottom: 12px; }
.intro-eyebrow .brand-case { text-transform: none; } /* keep the dAIgnostics casing inside the uppercase kicker */

/* B1: the pipeline in one glance, before the individual feature cards */
.flow { margin: 4px 0 40px; }

.flow-title {
  margin: 0 0 16px;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 18px;
}

.flow-steps li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(48, 45, 45, .06);
}

/* arrow to the next step */
.flow-steps li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  transform: translateY(-50%) rotate(45deg);
}
.flow-steps li:last-child::after { display: none; }

.flow-num { font: 700 11px/1 var(--font-ui); letter-spacing: .1em; color: var(--red); }
.flow-name { font: 600 16px/1.2 var(--font-ui); color: var(--ink); }
.flow-sub { font: 400 13px/1.45 var(--font-ui); color: var(--ink-mute); }

@media (max-width: 1023.98px) {
  .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-steps li:nth-child(3)::after { display: none; }
}

@media (max-width: 599.98px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .flow-steps li:nth-child(3)::after { display: block; }
  .flow-steps li:nth-child(even)::after { display: none; }
  .flow-sub { display: none; }
}

/* B2: the feature section gets a visible end and a closing link */
.intro-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 36px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}
.intro-close p {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Photo layer: spans the whole intro; the frame inside holds the picture */
.intro-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.intro-media__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(50vh, 440px);
  opacity: .85;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}

.intro-media__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}

@media (max-width: 899.98px) {
  /* photo as a band across the top; the copy starts over its faded lower part */
  .intro-hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: min(36vh, 300px);
  }
  /* the demo button must be visible without scrolling: it moves above the lede */
  .intro-copy { display: flex; flex-direction: column; }
  .intro-lede { order: 1; }
  .intro-actions { margin-top: 22px; }
  .intro-lede:first-of-type { margin-top: 26px; }
}

@media (min-width: 900px) {
  .intro-copy { max-width: 46%; }

  .intro-media__frame {
    position: sticky;
    top: 72px;
    left: auto;
    right: auto;
    width: 64%;
    height: calc(100vh - 72px);
    margin-left: auto; /* right-anchored */
    opacity: 1;
    transform-origin: 82% 26%;
    will-change: transform, opacity;
    /* fade toward the text (left) and softly at the top and bottom */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 42%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 42%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* recede as the intro scrolls: smaller and fainter, toward the top-right */
  .intro-media__frame {
    transform: scale(calc(1 - 0.3 * var(--hero-p)));
    opacity: calc(1 - 0.55 * var(--hero-p));
  }
  /* the copy fades once it is mostly scrolled past (from ~40% travel), so the
     pinned intro shows no stray button peeking out under the header */
  .intro-copy { opacity: calc(1.6 - 1.6 * var(--hero-p)); }
}

.feature-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* a lone card in the last row sits in the middle column instead of hugging the left */
  .feature:last-child:nth-child(3n + 1) { grid-column: 2; }
}

.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 12px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(48, 45, 45, .06);
}

.feature-title {
  margin: 0 0 8px;
  font: 600 17px/1.3 var(--font-ui);
  color: var(--ink);
}

.feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Heading above the interactive stack — an h2 now, the h1 lives in .intro */
.stack-title { font-size: clamp(28px, 3.6vw, 42px); }

/* --------------------------------------------------------------------------
   Stack section layout
   -------------------------------------------------------------------------- */

.stack-viz {
  position: relative;
  display: grid;
  gap: 36px;
  padding-block: 24px 64px;
}

.cards {
  display: grid;
  gap: 12px;
  align-content: start;
}

@media (min-width: 720px) and (max-width: 1023.98px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1024px) {
  .stack-viz {
    grid-template-columns: minmax(460px, 55%) minmax(360px, 45%);
    gap: 48px;
    /* start, not center: an opening panel must grow downward without
       re-centering the scene under a stationary pointer */
    align-items: start;
  }
  .cards { gap: 16px; padding-top: 8px; }
}

@media (min-width: 1440px) {
  .stack-viz { gap: 72px; }
}

/* --------------------------------------------------------------------------
   Isometric scene
   ==========================================================================
   FLATTENING RULES — do not break these or the 3D stack collapses flat:
   never set opacity<1, filter, backdrop-filter, clip-path, mask, contain,
   mix-blend-mode, or non-visible overflow on .scene, .slab-pos, .slab-lift,
   .slab-idle, .slab, or ANY ancestor of .scene. Fades belong on .face leaves
   and on 2D elements only.
   ========================================================================== */

.scene-wrap {
  position: relative;
  width: min(100%, calc(var(--slab) * 1.5));
  aspect-ratio: 150 / 178;
  margin-inline: auto;
}

.ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 82%;
  height: calc(var(--slab) * 0.28);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(48, 45, 45, .17), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.scene {
  position: absolute;
  left: 50%;
  top: 66%;
  width: var(--slab);
  height: var(--slab);
  margin: calc(var(--slab) / -2) 0 0 calc(var(--slab) / -2);
  transform: rotateX(55deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.slab-pos {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--i) * var(--gap))); /* NEVER animated — leader anchors live here */
  transform-style: preserve-3d;
}

.anchor {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

.slab-lift {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.slab-idle {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.slab {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.slab:focus-visible { outline-offset: 8px; }

.face {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* transparent outline keeps polygon edges antialiased while the layer is
     composited during transform animations (Chrome renders hard 3D edges
     jagged without an alpha margin in the rasterized texture) */
  outline: 1px solid transparent;
}

.face--top {
  inset: 0;
  border-radius: 6px;
  background: var(--c-top);
  display: flex;
  align-items: flex-end;      /* label hugs the front edge: the strip that stays
                                 visible below the slab above */
  justify-content: center;
  transition: background-color .3s, box-shadow .3s;
}

.slab-label {
  font: 600 16px/1.25 var(--font-ui);
  letter-spacing: .02em;
  color: var(--label);
  transition: color .3s;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  padding: 0 12px calc(var(--slab) * 0.05);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* small brand mark on the top slab, like the reference diagram */
.slab-mark {
  position: absolute;
  top: 9%;
  left: 9%;
  width: calc(var(--slab) * 0.11);
  height: calc(var(--slab) * 0.11);
  pointer-events: none;
}
.slab-mark svg { width: 100%; height: 100%; display: block; }

.face--south {
  left: 0; right: 0;
  top: calc(100% - 1px);
  height: var(--thick);
  transform-origin: top;
  transform: rotateX(-90deg);
  background: var(--c-s);
  border-radius: 0 0 3px 3px;
  transition: background-color .3s, box-shadow .3s;
}

.face--east {
  top: 0; bottom: 0;
  left: calc(100% - 1px);
  width: var(--thick);
  transform-origin: left;
  transform: rotateY(90deg);
  background: var(--c-e);
  border-radius: 0 3px 3px 0;
  transition: background-color .3s, box-shadow .3s;
}

/* Per-layer face colors: rest / dimmed / active-bright, all precomputed hex */

.slab-pos[data-id="clarity"] {
  --c-top: #FFFFFF; --c-s: #EDE9E7; --c-e: #DBD6D3;
  --c-top-dim: #F0EEEC; --c-s-dim: #E4E0DE; --c-e-dim: #D6D1CE;
  --c-top-hi: #FFFFFF;
  --label: #302D2D; --label-dim: #6E6A69; /* 5.4:1 on #F0EEEC */
}
.slab-pos[data-id="clarity"] .face--top { box-shadow: inset 0 0 0 1px #E7E3E1; }

/* Dim faces desaturate toward gray but stay dark enough that a full-contrast
   white label keeps >=4.5:1 — de-emphasis is carried by the face wash alone */
.slab-pos[data-id="inference"] {
  --c-top: #2467E0; --c-s: #1B4FB3; --c-e: #153F92;
  --c-top-dim: #4D74BC; --c-s-dim: #4766A1; --c-e-dim: #44588D;
  --c-top-hi: #2A6BE8; /* white label keeps >=4.5:1 while active */
  --label: #FFFFFF; --label-dim: #FFFFFF;
}

.slab-pos[data-id="datahub"] {
  --c-top: #4A4747; --c-s: #393535; --c-e: #2E2A2A;
  --c-top-dim: #6B6868; --c-s-dim: #605C5C; --c-e-dim: #575353;
  --c-top-hi: #575353;
  --label: #FFFFFF; --label-dim: #FFFFFF;
}

.slab-pos[data-id="edge"] {
  --c-top: #16233F; --c-s: #0E1730; --c-e: #0A1122;
  --c-top-dim: #3E4C6E; --c-s-dim: #35415E; --c-e-dim: #2E3850;
  --c-top-hi: #1D2F54;
  --label: #FFFFFF; --label-dim: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Top-face detailing (in-plane, decorative) — insets, ports, vents, pads
   -------------------------------------------------------------------------- */

.detail {
  position: absolute;
  pointer-events: none;
}

/* dAI Clarity: bevelled tray with a recessed panel and two card slots */
.slab-pos[data-id="clarity"] .d-frame {
  inset: 6%;
  border-radius: 9% / 9%;
  border: 2px solid #E8E4E1;
  background: #FDFCFB;
  box-shadow: inset 0 0 0 1px #F3F0EE;
}
.slab-pos[data-id="clarity"] .d-screen {
  inset: 13%;
  border-radius: 7% / 7%;
  background: #F4F1EF;
  box-shadow: inset 1.5px 1.5px 5px rgba(48, 45, 45, .10), inset -1px -1px 2px #FFFFFF;
}
.slab-pos[data-id="clarity"] .d-slot {
  right: 17%;
  width: 15%;
  height: 4%;
  border-radius: 3px;
  background: #E7E3E0;
  box-shadow: inset 0 1px 2px rgba(48, 45, 45, .18);
}
.slab-pos[data-id="clarity"] .d-slot-1 { top: 19%; }
.slab-pos[data-id="clarity"] .d-slot-2 { top: 26%; }

/* dAI Inference Engine: raised compute block, traces, docking port */
.slab-pos[data-id="inference"] .d-chip {
  left: 16%;
  top: 20%;
  width: 22%;
  height: 22%;
  border-radius: 8%;
  background: linear-gradient(135deg, #3B7CF2, #1E56C4);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22),
              3px 3px 0 #16418F,
              inset -2px -2px 4px rgba(0, 0, 0, .18);
}
.slab-pos[data-id="inference"] .d-trace {
  height: 2px;
  background: rgba(255, 255, 255, .30);
  border-radius: 1px;
}
.slab-pos[data-id="inference"] .d-trace-1 { left: 40%; top: 30%; width: 42%; }
.slab-pos[data-id="inference"] .d-trace-2 { left: 46%; top: 37%; width: 36%; }
.slab-pos[data-id="inference"] .d-port {
  right: 4%;
  top: 24%;
  width: 7%;
  height: 22%;
  border-radius: 3px;
  background: #163F92;
  box-shadow: inset 0 0 0 1.5px #0F3070, inset 0 2px 4px rgba(0, 0, 0, .35);
}

/* dAI DataHub: recessed storage bay with vents and corner mounts */
.slab-pos[data-id="datahub"] .d-panel {
  inset: 17%;
  border-radius: 6%;
  background: #413E3E;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .38), inset 0 0 0 1px #4E4A4A;
}
.slab-pos[data-id="datahub"] .d-vent {
  left: 28%;
  width: 44%;
  height: 3.5%;
  border-radius: 2px;
  background: #2C2929;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.slab-pos[data-id="datahub"] .d-vent-1 { top: 30%; }
.slab-pos[data-id="datahub"] .d-vent-2 { top: 38%; }
.slab-pos[data-id="datahub"] .d-vent-3 { top: 46%; }
.slab-pos[data-id="datahub"] .d-pad {
  width: 8%;
  height: 8%;
  border-radius: 2px;
  background: #5A5656;
  box-shadow: inset 0 0 0 1px #676262, inset 0 -2px 3px rgba(0, 0, 0, .3);
}

/* dAI Edge: mounting pads (posts rise from here), vent, status LED */
.slab-pos[data-id="edge"] .d-pad {
  width: 8%;
  height: 8%;
  border-radius: 2px;
  background: #24304E;
  box-shadow: inset 0 0 0 1px #2E3C5E, inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.d-pad-nw { left: 4%; top: 4%; }
.d-pad-ne { right: 4%; top: 4%; }
.d-pad-sw { left: 4%; bottom: 4%; }
.d-pad-se { right: 4%; bottom: 4%; }
.slab-pos[data-id="edge"] .d-vent-wide {
  left: 30%;
  right: 30%;
  top: 34%;
  height: 6%;
  border-radius: 3px;
  background: #0C1526;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5);
}
.slab-pos[data-id="edge"] .d-led {
  right: 13%;
  top: 15%;
  width: 3.5%;
  height: 3.5%;
  border-radius: 50%;
  background: #E21E3A;
  box-shadow: 0 0 7px rgba(226, 30, 58, .85);
  animation: ledPulse 2.6s ease-in-out infinite;
}

@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Corner posts: small cuboids rising from Edge toward DataHub */

.post {
  position: absolute;
  width: 7%;
  height: 7%;
  transform-style: preserve-3d;
  pointer-events: none;
  /* capped so the lifted (+20px) posts can never pierce DataHub's top plane on small slabs */
  --post-h: min(calc(var(--gap) - var(--thick) * 1.1), calc(var(--gap) - var(--lift) - 2px));
}
.post-nw { left: 4.5%; top: 4.5%; }
.post-ne { right: 4.5%; top: 4.5%; }
.post-sw { left: 4.5%; bottom: 4.5%; }
.post-se { right: 4.5%; bottom: 4.5%; }

.post i {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
}
.post .post-s {
  left: -1px; right: -1px; bottom: 0; /* 1px overrun tucks behind the east wall at the shared corner */
  height: var(--post-h);
  transform-origin: bottom;
  transform: rotateX(-90deg);
  background: #2A3550;
}
.post .post-e {
  top: 0; bottom: 0; right: 0;
  width: var(--post-h);
  transform-origin: right;
  transform: rotateY(90deg);
  background: #1F2940;
}
.post .post-cap {
  inset: 0;
  transform: translateZ(calc(var(--post-h) - 1px)); /* 1px below wall tops: no hairline seam */
  background: #3A4664;
}

/* "Zamjenjivi AI Model" — detachable module docked beside the Inference layer */

.module {
  position: absolute;
  left: 106%;
  top: 38%;
  width: 30%;
  height: 24%;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: transform 400ms var(--ease-spring);
  --mthick: calc(var(--thick) * 0.75);
}

.slab-pos.on .module { transform: translateX(-18%); } /* docks into the port */

.m-face {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
}
.m-top {
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #363D4C, #262B36);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-label {
  font: 600 max(8px, calc(var(--slab) * 0.036))/1.25 var(--font-ui);
  letter-spacing: .02em;
  color: #FFFFFF;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.m-south {
  left: 0; right: 0;
  top: calc(100% - 1px);
  height: var(--mthick);
  transform-origin: top;
  transform: rotateX(-90deg);
  background: #1E232C;
}
.m-east {
  top: 0; bottom: 0;
  left: calc(100% - 1px);
  width: var(--mthick);
  transform-origin: left;
  transform: rotateY(90deg);
  background: #171B22;
}

/* Active / dimmed states (driven by .on + .has-active set from JS) */

.slab-pos.on .slab-lift { transform: translateZ(var(--lift)); }
.slab-pos.on .face--top { background: var(--c-top-hi); }

/* Red aura around the active layer. The glow lives on always-present ::after
   pseudo-elements with STATIC multi-layer shadows; only their opacity tweens,
   so activation never re-rasterizes blurred shadows frame by frame. */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.face--top::after {
  box-shadow: inset 0 0 0 2px rgba(226, 30, 58, .55),
              0 0 0 2.5px rgba(226, 30, 58, .35),
              0 0 26px 6px rgba(226, 30, 58, .34),
              0 0 52px 18px rgba(226, 30, 58, .18);
}
.face--south::after,
.face--east::after {
  box-shadow: 0 0 0 1.5px rgba(226, 30, 58, .30),
              0 0 26px 7px rgba(226, 30, 58, .30);
}
.slab-pos.on .face::after { opacity: 1; }

.stack-viz.has-active .slab-pos:not(.on) .face--top { background: var(--c-top-dim); }
.stack-viz.has-active .slab-pos:not(.on) .face--south { background: var(--c-s-dim); }
.stack-viz.has-active .slab-pos:not(.on) .face--east { background: var(--c-e-dim); }
.stack-viz.has-active .slab-pos:not(.on) .slab-label { color: var(--label-dim); }

/* Decorations follow their layer into the dim state (leaf elements only —
   never opacity on .module/.post themselves, they are preserve-3d groups) */
.stack-viz.has-active .slab-pos:not(.on) .detail { opacity: .45; }
.stack-viz.has-active .slab-pos:not(.on) .m-top { background: #575D69; }
.stack-viz.has-active .slab-pos:not(.on) .m-south { background: #4A4F59; }
.stack-viz.has-active .slab-pos:not(.on) .m-east { background: #42464F; }
.stack-viz.has-active .slab-pos:not(.on) .m-label { color: rgba(255, 255, 255, .85); }
.stack-viz.has-active .slab-pos:not(.on) .post-s { background: #4A5570; }
.stack-viz.has-active .slab-pos:not(.on) .post-e { background: #414B63; }
.stack-viz.has-active .slab-pos:not(.on) .post-cap { background: #566180; }
.stack-viz.has-active .slab-pos[data-id="edge"]:not(.on) .d-led {
  animation-play-state: paused;
  opacity: .35;
  box-shadow: none;
}

.detail { transition: opacity .3s; }
.m-face { transition: background-color .3s; }
.post i { transition: background-color .3s; }

/* Block interaction until the entrance settles (overlapping mid-flight slabs) */
.stack-viz:not(.is-settled) .scene { pointer-events: none; }

/* --------------------------------------------------------------------------
   Entrance choreography (JS adds .is-in on intersection, .is-settled after)
   -------------------------------------------------------------------------- */

html.js .stack-viz:not(.is-in) .slab-lift { transform: translateZ(var(--entrance-z)); }
html.js .stack-viz:not(.is-in) .face,
html.js .stack-viz:not(.is-in) .m-face,
html.js .stack-viz:not(.is-in) .post i { opacity: 0; }
html.js .stack-viz:not(.is-in) .ground-shadow { opacity: 0; transform: translateX(-50%) scaleX(.7); }
html.js .stack-viz:not(.is-in) .card { opacity: 0; transform: translateX(24px); }
html.js .stack-viz:not(.is-in) .leaders { opacity: 0; }

.stack-viz.is-in .slab-lift {
  transition: transform 650ms var(--ease-out);
  transition-delay: calc(200ms + var(--i) * 120ms);
}
.stack-viz.is-in .face,
.stack-viz.is-in .m-face,
.stack-viz.is-in .post i {
  transition: opacity 300ms linear, background-color .3s;
  transition-delay: calc(200ms + var(--i) * 120ms);
}
.stack-viz.is-in .ground-shadow {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: 200ms;
}
.stack-viz.is-in .card {
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  transition-delay: calc(520ms + var(--ci) * 90ms);
}
.stack-viz.is-in .leaders {
  opacity: 1;
  transition: opacity 400ms linear;
  transition-delay: 1300ms; /* after the last card's entrance transform ends (~1240ms) */
}

/* After settle: fast interaction transitions, no entrance delays */
.stack-viz.is-settled .slab-lift {
  transition: transform 350ms var(--ease-spring);
  transition-delay: 0ms;
}
.stack-viz.is-settled .face,
.stack-viz.is-settled .m-face,
.stack-viz.is-settled .post i {
  transition: opacity .3s, background-color .3s, box-shadow .3s;
  transition-delay: 0ms;
}
.stack-viz.is-settled .card {
  transition: transform .2s, box-shadow .2s, border-color .2s, opacity .2s;
  transition-delay: 0ms;
}
.stack-viz.is-settled .leaders { transition: opacity .2s; transition-delay: 0ms; }
.stack-viz.is-settled .ground-shadow { transition: none; }

/* Idle breathing (starts after settle; pauses when active / page hidden / offscreen) */

.stack-viz.is-settled .slab-idle {
  animation: idleFloat 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.5s);
}

.stack-viz.is-settled .ground-shadow {
  animation: shadowBreathe 6s ease-in-out infinite alternate;
}

/* Touch and small screens: the idle bob shimmers on mobile GPUs and reads as a
   glitch on the top (white) layer, so the stack rests still there */
@media (hover: none), (max-width: 1023.98px) {
  .stack-viz.is-settled .slab-idle,
  .stack-viz.is-settled .ground-shadow { animation: none; }
  .stack-viz.is-settled .slab-idle { transform: translateZ(0); }
}

@keyframes idleFloat {
  from { transform: translateZ(-4px); }
  to   { transform: translateZ(4px); }
}

@keyframes shadowBreathe {
  from { opacity: 1; }
  to   { opacity: .72; }
}

/* While a layer is active, slabs settle onto the base plane (instead of
   freezing mid-bob) so the leader anchors match the geometry exactly */
.stack-viz.has-active .slab-idle {
  animation: none;
  transform: translateZ(0);
  transition: transform 350ms var(--ease-spring);
}
.stack-viz.is-off .slab-idle,
body.page-hidden .slab-idle {
  animation-play-state: paused;
}
.stack-viz.has-active .ground-shadow,
.stack-viz.is-off .ground-shadow,
body.page-hidden .ground-shadow {
  animation-play-state: paused;
}

.stack-viz.is-off .d-led,
body.page-hidden .d-led {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 12px;
  padding: 8px 18px 10px;
  box-shadow: 0 1px 2px rgba(48, 45, 45, .06);
}

.card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(48, 45, 45, .12);
}

.card.is-pinned {
  border-left-color: var(--red-dark);
  box-shadow: 0 12px 28px rgba(48, 45, 45, .12), 0 0 0 2px rgba(226, 30, 58, .18);
}

.card-head { margin: 0; }

.card-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: 600 16.5px/1.3 var(--font-ui);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.card-swatch {
  display: none;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.card[data-id="clarity"] .card-swatch { background: #FFFFFF; }
.card[data-id="inference"] .card-swatch { background: #2467E0; }
.card[data-id="datahub"] .card-swatch { background: #4A4747; }
.card[data-id="edge"] .card-swatch { background: #16233F; }

@media (max-width: 1023.98px) {
  .card-swatch { display: inline-block; }
}

.card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  transition: opacity .2s;
}
.card-icon svg { width: 20px; height: 20px; }

.card-title { flex: 1 1 auto; transition: color .2s; }

.chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--ink-faint);
  transition: transform .3s var(--ease-out);
}
.chev svg { width: 18px; height: 18px; }
.card.is-active .chev { transform: rotate(180deg); }

.card-desc {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: color .2s;
}

/* the technical one-liner moved from the card face into the open panel */
.panel-tech {
  margin: 0;
  padding: 6px 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
}

.stack-viz.has-active .card:not(.is-active) .card-title,
.stack-viz.has-active .card:not(.is-active) .card-desc {
  color: #767070; /* 4.9:1 on white — dimmed but still WCAG AA */
}
.stack-viz.has-active .card:not(.is-active) .card-icon { opacity: .55; }

/* Collapsible panel — grid-rows trick, with delayed visibility for a11y/tab order */

.panel-clip {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 320ms cubic-bezier(.33, 1, .68, 1), visibility 0s .32s;
}

.card.is-active .panel-clip {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 320ms cubic-bezier(.33, 1, .68, 1), visibility 0s;
}

.panel {
  overflow: hidden;
  min-height: 0;
}

.features {
  list-style: none;
  margin: 2px 0 0;
  padding: 6px 0 12px;
  border-top: 1px dashed var(--line);
}

.features li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.card.is-active .features li {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.card.is-active .features li:nth-child(1) { transition-delay: 60ms; }
.card.is-active .features li:nth-child(2) { transition-delay: 100ms; }
.card.is-active .features li:nth-child(3) { transition-delay: 140ms; }
.card.is-active .features li:nth-child(4) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Leader lines (desktop only)
   -------------------------------------------------------------------------- */

.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  .leaders { display: block; }
}

.leaders path {
  fill: none;
  stroke: #C9C6C4;
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  transition: stroke .25s;
}

.leaders circle.dot-start { fill: #C9C6C4; transition: fill .25s; }
.leaders circle.dot-end { fill: #fff; stroke: #C9C6C4; stroke-width: 1.5; transition: stroke .25s; }

.leaders g.on path { stroke: var(--red); stroke-dasharray: none; }
.leaders g.on circle.dot-start { fill: var(--red); }
.leaders g.on circle.dot-end { stroke: var(--red); }

/* --------------------------------------------------------------------------
   Badges strip
   -------------------------------------------------------------------------- */

.badges {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 26px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  border: 1px solid #DEDBD9;
  border-radius: 999px;
  font: 500 13px/1.3 var(--font-ui);
  color: var(--ink-mute);
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
/* a small chevron says "this opens" */
.chip::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s;
}
.chip:hover { border-color: var(--red); color: var(--red-dark); }
.chip.is-open { border-color: var(--red); color: var(--red-dark); background: var(--red-tint); }
.chip.is-open::after { transform: translateY(1px) rotate(-135deg); }

.chip-notes { text-align: center; }
.chip-note {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   CTA + footer
   -------------------------------------------------------------------------- */

.cta {
  text-align: center;
  padding-block: 84px;
  scroll-margin-top: 72px; /* #contact / #kontakt land below the sticky header */
}

.cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
}

.cta-sub {
  max-width: 560px;
  margin: 14px auto 28px;
  color: var(--ink-soft);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 28px;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-mute);
}

.foot-logo { height: 26px; width: auto; opacity: .75; }

.foot-row a { color: var(--ink-mute); text-decoration: none; }
.foot-row a:hover { color: var(--red); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive tuning
   -------------------------------------------------------------------------- */

@media (max-width: 719.98px) {
  :root { --slab: clamp(180px, min(44vw, 34vh), 320px); }
  .container { padding-inline: 20px; }
  .hero { padding-block: 52px 4px; }
  .lede { font-size: 15.5px; }
  .intro { padding-block: 0 32px; }
  .intro-lede { font-size: 15.5px; }
  .slab-label { font-size: 15px; }
  .cta { padding-block: 60px; }
  .btn { width: min(100%, 340px); }
  .head-row .btn { width: auto; }
}

/* --------------------------------------------------------------------------
   Reduced motion — everything renders at rest, states shown without movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .eyebrow, .hero-title, .lede, .hint,
  .intro-tagline, .intro-lede, .intro-actions, .intro-media__frame {
    animation-duration: .15s;
    animation-delay: 0s;
  }

  html.js .stack-viz:not(.is-in) .slab-lift { transform: none; }
  html.js .stack-viz:not(.is-in) .face,
  html.js .stack-viz:not(.is-in) .m-face,
  html.js .stack-viz:not(.is-in) .post i { opacity: 1; }
  html.js .stack-viz:not(.is-in) .ground-shadow { opacity: 1; transform: translateX(-50%); }
  html.js .stack-viz:not(.is-in) .card { opacity: 1; transform: none; }
  html.js .stack-viz:not(.is-in) .leaders { opacity: 1; }

  .stack-viz.is-settled .slab-idle,
  .stack-viz.is-settled .ground-shadow {
    animation: none;
  }

  .slab-pos.on .slab-lift { transform: none; } /* the red aura carries the active state instead */

  .bg-blob, .bg-net--a, .bg-net--b,
  .bg-net path, .bg-net g > g,
  .slab-pos[data-id="edge"] .d-led {
    animation: none;
  }
  .module { transition: none; }
  .face::after { transition: none; }

  .stack-viz.is-in .slab-lift,
  .stack-viz.is-in .face,
  .stack-viz.is-in .card,
  .stack-viz.is-in .ground-shadow,
  .stack-viz.is-settled .slab-lift,
  .stack-viz.is-settled .face,
  .stack-viz.is-settled .card {
    transition: background-color .1s, box-shadow .1s, color .1s;
    transition-delay: 0ms;
  }

  .panel-clip,
  .card.is-active .panel-clip {
    transition: visibility 0s;
  }

  .stack-viz.has-active .slab-idle { transition: none; }

  .features li,
  .card.is-active .features li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .features li { opacity: 0; }
  .card.is-active .features li { opacity: 1; transition: opacity .1s; transition-delay: 0ms; }

  .chev { transition: none; }
}

/* No-JS fallback: everything visible, panels open */

html:not(.js) .panel-clip {
  grid-template-rows: 1fr;
  visibility: visible;
}
html:not(.js) .features li { opacity: 1; transform: none; }
html:not(.js) .leaders { display: none; }
html:not(.js) .hint { display: none; }