/* ==========================================================================
   Kalinotech — home page scenes
   Every scene is a self-contained "shot". Scroll progress arrives as --p
   (0 → 1) on the [data-scene] element; CSS does the interpolation.
   ========================================================================== */

/* helper: per-item window inside a scene ---------------------------------- */
/*   --start  where the item begins inside --p
     --span   how long it takes
     --t      raw progress, --e  eased (ease-out quad)                      */
.stagger-item {
  --start: 0;
  --span: .4;
  --t: clamp(0, calc((var(--p, 1) - var(--start)) / var(--span)), 1);
  --e: calc(1 - (1 - var(--t)) * (1 - var(--t)));
}

/* ======================================================= SCENE 1 — HERO  */
.hero {
  position: relative;
  height: 175vh;
  background: var(--night);
  color: #fff;
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  align-items: center;
  /* vh on a phone is the viewport with the address bar out of the way, so the
     bottom of a 100vh box sits under the bar. Padding the stage by exactly
     that difference keeps the headline and the globe inside what is on
     screen. See the same note in journey.css. */
  --safe-b: 0px;
  padding-bottom: var(--safe-b);
}
@supports (height: 100svh) {
  .hero__stage { --safe-b: calc(100vh - 100svh); }
}

/* atmosphere ------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background:
    radial-gradient(120% 90% at 78% 52%, rgba(22, 119, 255, .13), transparent 58%),
    radial-gradient(70% 60% at 12% 8%, rgba(10, 123, 255, .07), transparent 60%),
    var(--night);
}
.hero__noise {
  position: absolute;
  inset: 0;
  z-index: var(--z-atmos);
  opacity: .5;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: radial-gradient(120% 90% at 70% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 50%, #000, transparent 75%);
}

/* the globe -------------------------------------------------------------- */
.orb {
  position: absolute;
  z-index: var(--z-graphic);
  inset-inline-end: -6%;
  top: 50%;
  width: clamp(460px, 46vw, 760px);
  aspect-ratio: 1;
  translate: 0 -50%;
  transform:
    translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0)
    scale(calc(1 + var(--p, 0) * 1.55));
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - .62) / .3), 1) * .35);
  /* smooths the pointer parallax, which only a mouse has. On touch it would
     just add a second lag on top of the engine's own damping, and the globe
     would visibly trail the finger. */
  transition: transform .18s linear;
}
@media (hover: none), (pointer: coarse) {
  .orb { transition: none; }
}
 /* The orb scales with the scroll, and a blur filter on anything inside it
    has to be rasterised again at every new scale — a 48px blur over a box
    this size, on every frame of the hero. Gradients are soft already, so the
    same glow is built from stops instead and simply scales. */
.orb__glow {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 70%,
      rgba(22, 119, 255, .4) 0%, rgba(22, 119, 255, .26) 22%,
      rgba(22, 119, 255, .1) 40%, transparent 62%),
    radial-gradient(circle at 34% 22%,
      rgba(10, 123, 255, .24) 0%, rgba(10, 123, 255, .13) 24%,
      rgba(10, 123, 255, .05) 40%, transparent 60%);
  opacity: calc(.75 + var(--p, 0) * .25);
  pointer-events: none;
}
/* the thin atmosphere that sits just outside the sphere edge */
.orb__halo {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  /* the thin atmosphere outside the sphere — stops do the softening, for the
     same reason as the glow above */
  background: radial-gradient(circle,
      rgba(90, 160, 255, 0) 58%,
      rgba(90, 160, 255, .12) 66%,
      rgba(90, 160, 255, .22) 71%,
      rgba(120, 180, 255, .14) 76%,
      rgba(120, 180, 255, .05) 82%,
      transparent 88%);
  pointer-events: none;
}
.orb__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}
.orb__canvas.is-grabbing { cursor: grabbing; }
.orb__ring {
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  border: 1px solid rgba(160, 200, 255, .13);
  transform: rotate3d(1, .15, 0, 74deg);
  pointer-events: none;
}

/* marker tooltip ---------------------------------------------------------- */
/* The card is a child of <body> and placed in screen coordinates, so it is
   never clipped by a section and never scaled by the orb it belongs to. */
.globe-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 262px;
  display: block;
  padding: 10px;
  border-radius: var(--r-m);
  background: rgba(10, 13, 20, .9);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
  pointer-events: none;
  text-align: start;
}
.globe-tip.is-on { opacity: 1; visibility: visible; }

/* On a phone the globe hangs past the edge of the screen, so a card placed
   next to its pin would land under the headline or half outside. There the
   card becomes a popup in the middle of the screen, over everything else,
   with the page dimmed behind it. --tip-centred tells the script to leave
   the placing to CSS. */
@media (hover: none), (max-width: 860px) {
  .globe-tip {
    --tip-centred: 1;
    position: fixed;
    inset-inline: auto;
    left: 50%;
    top: 50%;
    z-index: 90;
    width: min(340px, calc(100vw - 28px));
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
  }
  .globe-tip.is-on { transform: translate(-50%, -50%) scale(1); }
  .globe-tip.is-pinned { padding: 14px; }
  .globe-tip.is-pinned::before {
    content: "";
    position: fixed;
    inset: -50vh -50vw;
    z-index: -1;
    background: rgba(4, 6, 12, .62);
  }
  .globe-tip__item { padding: 10px 8px; }
  .globe-tip__thumb { width: 54px; height: 44px; }
}
.globe-tip__row { display: flex; gap: 12px; align-items: center; }

/* a grouped pin, clicked: the card stays and links every project */
.globe-tip.is-pinned { pointer-events: auto; width: 300px; padding: 12px; }
.globe-tip__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.globe-tip__head b { font-size: .92rem; font-weight: 700; color: #fff; }
.globe-tip__head span { grid-column: 1; font-size: .74rem; color: var(--on-night-2); }
.globe-tip__close {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.globe-tip__close:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.globe-tip__list { display: grid; gap: 2px; margin-top: 8px; }
.globe-tip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border-radius: 10px;
  color: #fff;
  transition: background-color .2s var(--ease);
}
.globe-tip__item:hover, .globe-tip__item:focus-visible { background: rgba(255, 255, 255, .08); }
.globe-tip__thumb {
  width: 48px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.globe-tip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.globe-tip__go { color: var(--amber); font-size: 1.2rem; line-height: 1; }
.globe-tip__media {
  flex: none;
  width: 62px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.globe-tip__media img { width: 100%; height: 100%; object-fit: cover; }
.globe-tip__body { display: grid; gap: 2px; min-width: 0; }
.globe-tip__body b { font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.5; }
.globe-tip__body span { font-size: .74rem; color: var(--on-night-2); }
.globe-tip__body i {
  font-style: normal;
  font-size: .7rem;
  color: var(--amber);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: .8rem;
  color: var(--on-night-3);
}
.hero__hint svg { color: var(--amber); flex: none; }

/* the blue flood that ends the hero -------------------------------------- */
.hero__flood {
  position: absolute;
  inset: -20%;
  z-index: var(--z-image);
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 60% 55%, rgba(120, 190, 255, .55), transparent 62%),
    linear-gradient(200deg, #02091C 0%, #063C9C 46%, #1C7BFF 78%, #7FC0FF 100%);
  opacity: clamp(0, calc((var(--p, 0) - .58) / .34), 1);
  /* the gradient is soft enough on its own: a scroll-driven blur would have
     to re-rasterise this full-screen layer on every frame */
  transform: scale(calc(1.25 - clamp(0, calc((var(--p, 0) - .58) / .42), 1) * .25))
             rotate(calc(-6deg + var(--p, 0) * 6deg));
  will-change: transform, opacity;
}
.hero__flood-fade {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-image) + 1);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 42%, var(--paper) 96%);
  opacity: clamp(0, calc((var(--p, 0) - .9) / .1), 1);
}

/* hero content ----------------------------------------------------------- */
/* The content box spans the whole shell and sits above the globe, so it must
   not take pointer events itself — only its actual text and buttons do.
   Otherwise it swallows every hover and click meant for the project pins. */
.hero__content {
  position: relative;
  z-index: var(--z-type);
  pointer-events: none;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  max-width: 100%;
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - .12) / .38), 1));
  transform: translateY(calc(clamp(0, calc((var(--p, 0) - .12) / .5), 1) * -90px));
}
.hero__inner { max-width: min(740px, 62%); }
/* Only the things you can actually press take pointer events. On a phone the
   text column covers the whole stage, and anything else here would swallow
   the taps meant for the project pins on the globe behind it. */
.hero__inner a, .hero__inner .btn { pointer-events: auto; }
.hero .display-1 { margin-block: 20px 24px; }
.hero__lead { max-width: 46ch; color: var(--on-night-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to left, var(--amber), transparent);
  margin-top: 34px;
  transition: width 1.2s var(--ease) .55s;
}
.hero.is-ready .hero__rule { width: min(360px, 60%); }

.hero__ticker {
  pointer-events: none;
  position: absolute;
  inset-inline-start: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  max-width: 62%;
  z-index: var(--z-ui);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-size: var(--fs-micro);
  letter-spacing: .24em;
  color: var(--on-night-3);
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - .1) / .25), 1));
}
.hero__ticker span { display: inline-flex; align-items: center; gap: 12px; direction: ltr; }
.hero__ticker span + span::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber);
  opacity: .75;
}
.hero__scroll {
  pointer-events: none;
  position: absolute;
  inset-inline-end: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  z-index: var(--z-ui);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  color: var(--on-night-3);
  opacity: calc(1 - clamp(0, calc(var(--p, 0) / .2), 1));
}
.hero__scroll i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--amber), transparent);
  animation: scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* intro sequence --------------------------------------------------------- */
.hero__content > * { opacity: 0; transform: translateY(34px); }
.hero.is-ready .hero__content > * {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms);
}
.hero__content > .display-1 { opacity: 1; transform: none; }

/* ====================================================== SCENE 2 — STATS  */
/* The hand-over between the globe and the road. Its --p starts running while
   the hero is still pinned and its flood is washing the screen white, so the
   page keeps moving through the join instead of stopping at a static block.
   Each part owns a slice of --p: --t is its own 0 → 1, eased. */
.stats {
  background: var(--paper);
  position: relative;
  z-index: 2;
  padding-block: clamp(70px, 9vw, 130px);
}
/* everything in this scene arrives on the scroll, in its own slice of --p */
.stats__head .eyebrow,
.stats__head .display-2 span,
.stats__lead,
.stats__cell,
.stats__chain span {
  --t: clamp(0, calc((var(--p, 1) - var(--from)) / var(--len)), 1);
  --e: calc(1 - (1 - var(--t)) * (1 - var(--t)));
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 30px));
}
.stats__head { max-width: none; }
.stats__head .eyebrow { --from: .06; --len: .16; }
.stats__head .display-2 { margin-top: 18px; }
.stats__head .display-2 span { --from: calc(.1 + var(--i) * .05); --len: .18; }
.stats__lead { --from: .19; --len: .2; margin-top: 22px; max-width: 62ch; color: var(--ink-2); }

/* The figures as one band of equal cells. They used to be a very large number
   beside the headline plus a separate row lower down, which read as the same
   information scattered over two places. */
.stats__band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  margin-top: clamp(38px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  /* the 1px gap shows through as the rule between cells, so the separators
     stay right however many cells there are and wherever the row wraps */
  background: var(--line-2);
  overflow: hidden;
}
.stats__cell {
  --from: calc(.26 + var(--i) * .05); --len: .2;
  padding: clamp(20px, 2.6vw, 32px) clamp(18px, 2.2vw, 30px);
  background: #fff;
}
.stats__cell--lead { background: linear-gradient(180deg, #FFF4ED, #fff 78%); }
.stats__value { display: flex; align-items: baseline; gap: 6px; }
.stats__value .num {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.stats__cell--lead .num { font-size: clamp(2.8rem, 5vw, 4.6rem); }
.stats__value sup { font-size: .5em; font-weight: 800; color: var(--amber); top: -.5em; }
.stats__cell p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.7;
}
.stats__cell--lead p { color: var(--ink); font-weight: 600; }

.stats__chain { --from: .5; --len: .22; margin-top: clamp(30px, 4vw, 48px); }
.stats__chain span { --from: calc(.5 + var(--i) * .022); --len: .14; }

.chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: clamp(40px, 5vw, 64px);
  align-items: center;
}
.chain span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .85rem;
  color: var(--ink-2);
  background: #fff;
}
.chain span::after { content: "←"; color: var(--amber); font-size: .8rem; }
.chain span:last-child::after { content: none; }
[data-nav-dark] .chain span { background: rgba(255,255,255,.04); border-color: var(--line-night); color: var(--on-night-2); }

/* ================================================== SCENE 4 — SERVICES   */
.services-scene {
  background: var(--night);
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.services-scene::before {
  content: "";
  position: absolute;
  inset-inline-end: -20%;
  top: -30%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(22, 119, 255, .16), transparent 62%);
  pointer-events: none;
}

/* shared head for the compact scenes: title on one side, lead + link on the other */
.scene-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: end;
}
.scene-head__aside { display: grid; gap: 16px; justify-items: start; }
.scene-head__aside .lead { max-width: 52ch; }
[data-nav-dark] .scene-head__aside .lead { color: var(--on-night-2); }

/* four image panels in one row; the open one takes the room */
.srv-panels {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  height: clamp(380px, 58vh, 520px);
  margin-top: clamp(30px, 4vw, 52px);
}
.srv-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #10141C;
  transition: flex-grow .7s var(--ease);
}
.srv-panel.is-open { flex-grow: 2.7; }
.srv-panel__media { position: absolute; inset: 0; z-index: -2; }
.srv-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: saturate(.55) brightness(.55);
  transition: transform 1s var(--ease), filter .7s var(--ease);
}
.srv-panel.is-open .srv-panel__media img { transform: scale(1); filter: saturate(1) brightness(.78); }
.srv-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 8, 12, .94) 0%, rgba(6, 8, 12, .4) 55%, rgba(6, 8, 12, .08) 100%);
}
.srv-panel::before {
  content: "";
  position: absolute;
  inset-inline: 22px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
}
.srv-panel.is-open::before { transform: scaleX(1); }
.srv-panel__num {
  position: absolute;
  inset-inline-start: 22px;
  top: 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
  direction: ltr;
}
.srv-panel__body {
  position: absolute;
  inset-inline: 22px;
  bottom: 24px;
  display: grid;
  gap: 6px;
}
.srv-panel__latin {
  justify-self: start;         /* LTR text, but on the same side as the title */
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.srv-panel__title { font-size: clamp(1.08rem, 1.5vw, 1.4rem); font-weight: 800; line-height: 1.45; }
.srv-panel__short {
  max-width: 44ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: .88rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .78);
  transition: max-height .6s var(--ease), opacity .35s var(--ease);
}
.srv-panel.is-open .srv-panel__short { max-height: 9em; opacity: 1; transition-delay: .12s; }
.srv-panel__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.srv-panel.is-open .srv-panel__go { opacity: 1; transform: none; transition-delay: .2s; }
.srv-panel:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ================================================== SCENE 5 — PROCESS    */
.process { background: var(--paper); position: relative; z-index: 2; }
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
.process__sticky { position: sticky; top: clamp(90px, 14vh, 140px); }
.process__track { position: relative; padding-inline-start: 46px; }
.process__rail {
  position: absolute;
  inset-inline-start: 13px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
  overflow: hidden;
  border-radius: 2px;
}
.process__rail i {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(to bottom, var(--amber), var(--amber-2));
}
.step {
  position: relative;
  padding-block: clamp(18px, 2.6vw, 30px);
  transition: opacity .6s var(--ease);
  opacity: .42;
}
.step.is-on { opacity: 1; }
.step::before {
  content: "";
  position: absolute;
  inset-inline-start: -40px;
  top: calc(clamp(18px, 2.6vw, 30px) + 12px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  transition: border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease);
}
.step.is-on::before { border-color: var(--amber); background: var(--amber); transform: scale(1.18); }
.step__n {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-3);
  direction: ltr;
  transition: color .5s var(--ease), font-size .5s var(--ease);
}
.step.is-on .step__n { color: var(--amber); }
.step h3 { font-size: var(--fs-h2); font-weight: 800; margin-block: 8px 6px; }
.step p { color: var(--ink-2); font-size: .97rem; max-width: 52ch; }

/* ================================================= SCENE 8 — COMPANIES   */
/* A brand index: the list on one side, a showcase on the other that takes
   the photo, wordmark and accent colour of the brand under the pointer. */
.companies-scene {
  background: var(--night-2);
  color: #fff;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.companies-scene::before {
  content: "";
  position: absolute;
  inset-inline-start: -18%;
  bottom: -40%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(10, 123, 255, .1), transparent 62%);
  pointer-events: none;
}

.bindex {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
}

/* showcase ------------------------------------------------------------- */
.bindex__stage {
  position: sticky;
  top: clamp(84px, 11vh, 110px);
  aspect-ratio: 5 / 4;
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  background: #0B0E14;
}
.bindex__show {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .8s var(--ease), opacity .01s linear .8s;
}
.bindex__show.is-active {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  z-index: 2;
  transition: clip-path .8s var(--ease), opacity 0s;
}
.bindex__photo { position: absolute; inset: 0; }
.bindex__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.4s var(--ease);
}
.bindex__show.is-active .bindex__photo img { transform: scale(1); }
/* the brand's own colour washes up from the bottom of the frame */
.bindex__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 7, 11, .82), transparent 64%); /* without color-mix() */
  background:
    linear-gradient(to top, color-mix(in srgb, var(--accent) 72%, #05070B) 0%,
                            color-mix(in srgb, var(--accent) 30%, transparent) 42%,
                            transparent 70%),
    linear-gradient(to top, rgba(5, 7, 11, .55), transparent 60%);
}
.bindex__caption {
  position: absolute;
  inset-inline: clamp(20px, 2.4vw, 34px);
  bottom: clamp(20px, 2.4vw, 32px);
  display: grid;
  gap: 8px;
  justify-items: start;
}
.bindex__word {
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  text-align: end;             /* LTR wordmark, same edge as the Persian beside it */
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
  transform: translateY(18px);
  opacity: 0;
  transition: transform .8s var(--ease) .15s, opacity .6s var(--ease) .15s;
}
.bindex__tagline {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  opacity: 0;
  transition: opacity .6s var(--ease) .3s;
}
.bindex__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; opacity: 0; transition: opacity .6s var(--ease) .38s; }
.bindex__tags i {
  font-style: normal;
  font-size: .76rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bindex__show.is-active .bindex__word { transform: none; opacity: 1; }
.bindex__show.is-active .bindex__tagline,
.bindex__show.is-active .bindex__tags { opacity: 1; }

/* the list --------------------------------------------------------------- */
.bindex__list { border-top: 1px solid var(--line-night-2); }
.bindex__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding-block: clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid var(--line-night-2);
  color: rgba(255, 255, 255, .5);
  transition: color .35s var(--ease);
}
.bindex__row::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
}
.bindex__row.is-active { color: #fff; }
.bindex__row.is-active::after { transform: scaleX(1); }
.bindex__n {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  direction: ltr;
  transition: color .35s var(--ease);
}
.bindex__row.is-active .bindex__n { color: var(--accent); }
.bindex__names { display: grid; gap: 4px; min-width: 0; }
.bindex__names b {
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  justify-self: start;
}
.bindex__names span {
  font-size: .84rem;
  line-height: 1.8;
  color: var(--on-night-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s var(--ease), opacity .35s var(--ease);
}
.bindex__row.is-active .bindex__names span { max-height: 5.4em; opacity: 1; }
.bindex__thumb { display: none; }
.bindex__go {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-night);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.bindex__row.is-active .bindex__go { background: var(--accent); border-color: var(--accent); color: #fff; }
.bindex__row:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

/* ================================================== SCENE 9 — PROJECTS   */
.projects-scene { background: var(--paper-2); position: relative; z-index: 2; overflow: hidden; }

/* a row of cards on native scroll-snap; motion.js adds arrows, rail, drag */
.carousel { margin-top: clamp(30px, 4vw, 52px); }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(268px, 29vw, 410px);
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* first card lines up with the shell edge, the rest bleed off-screen */
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  padding-block: 4px 16px;
  scrollbar-width: none;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.pcard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  color: #fff;
  background: #1A1F28;
}
.pcard__media { position: absolute; inset: 0; z-index: -2; }
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
  -webkit-user-drag: none;
}
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 10, 15, .9) 0%, rgba(8, 10, 15, .22) 54%, rgba(8, 10, 15, .06) 100%);
}
.pcard__top {
  position: absolute;
  inset-inline: 18px;
  top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.pcard__n { font-size: .74rem; font-weight: 700; letter-spacing: .16em; direction: ltr; }
.pcard__chip {
  font-size: .72rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
.pcard__body {
  position: absolute;
  inset-inline: 20px 74px;
  bottom: 20px;
  display: grid;
  gap: 6px;
}
.pcard__latin { justify-self: start; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.pcard__title { font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 800; line-height: 1.5; }
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .74);
}
.pcard__meta svg { color: var(--amber); flex: none; }
.pcard__meta i {
  font-style: normal;
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, .26);
}
.pcard__go {
  position: absolute;
  inset-inline-end: 18px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: #FFFFFF;
  transform: scale(.55);
  opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.pcard:hover .pcard__go, .pcard:focus-visible .pcard__go { transform: none; opacity: 1; }
.pcard:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.carousel__bar { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.carousel__rail {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.carousel__rail i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--w, 30%);
  /* travels start → end of the reading direction as the track scrolls */
  inset-inline-start: calc(var(--k, 0) * (100% - var(--w, 30%)));
  border-radius: 2px;
  background: var(--ink);
}
.carousel__nav { display: flex; gap: 8px; }
.carousel__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s;
}
.carousel__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.carousel__btn:disabled { opacity: .35; cursor: default; }
/* the arrow icon points to the end of the reading direction; "previous" flips it */
.carousel__btn[data-carousel-prev] svg { transform: scaleX(-1); }

/* ================================================= SCENE 10 — ECOSYSTEM  */
.eco { background: var(--night); color: #fff; position: relative; overflow: hidden; z-index: 2; }
.eco::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: -35%;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(10, 123, 255, .12), transparent 60%);
}
.eco__list { margin-top: clamp(36px, 5vw, 64px); position: relative; }
.eco__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: center;
  padding-block: clamp(16px, 2.2vw, 26px);
  border-top: 1px solid var(--line-night-2);
  transition: background-color var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.eco__row:last-child { border-bottom: 1px solid var(--line-night-2); }
.eco__row:hover { background: rgba(255,255,255,.03); padding-inline: 14px; }
.eco__row b { font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 800; direction: ltr; letter-spacing: .02em; }
.eco__row span { color: var(--on-night-2); font-size: .95rem; }
.eco__row i {
  font-style: normal;
  font-size: .72rem;
  color: var(--on-night-3);
  direction: ltr;
  letter-spacing: .14em;
}
.eco__row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* ================================================== SCENE 11 — CTA       */
.cta-scene {
  background: var(--night);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  z-index: 2;
}
.cta-scene::before {
  content: "";
  position: absolute;
  inset-inline: -10%;
  bottom: -60%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(22, 119, 255, .22), transparent 66%);
}
.cta-scene::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: -20%;
  width: 40%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(10, 123, 255, .16), transparent 62%);
}
.cta-scene__inner { position: relative; z-index: var(--z-type); }
.cta-scene .display-2 { max-width: 18ch; margin-inline: auto; }
.cta-scene .lead { margin-inline: auto; margin-block: 22px 34px; color: var(--on-night-2); }

/* latest posts strip ------------------------------------------------------ */
.news { background: var(--paper); position: relative; z-index: 2; }
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  margin-top: clamp(32px, 4vw, 52px);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .stats__band { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .process__grid { grid-template-columns: 1fr; }
  .process__sticky { position: static; }
  .scene-head { grid-template-columns: 1fr; align-items: start; }
  .srv-panels { height: clamp(360px, 52vh, 460px); }
  .srv-panel.is-open { flex-grow: 3.2; }
  .bindex { grid-template-columns: 1fr; }
  .bindex__stage { display: none; }
  .bindex__thumb { display: block; width: 76px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
  .bindex__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .bindex__row { grid-template-columns: auto minmax(0, 1fr) auto; color: #fff; }
  .bindex__names span { max-height: none; opacity: 1; }
  .bindex__go { display: none; }
  .news__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .hero { height: 152vh; }
  .hero__stage { min-height: 560px; }
  .orb {
    inset-inline-end: -30%;
    top: 22%;
    width: clamp(300px, 92vw, 420px);
    translate: 0 0;
    opacity: .82;
  }
  .hero__inner { max-width: 100%; }
  .hero .display-1 { max-width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__ticker { font-size: .62rem; gap: 6px 14px; }
  .hero__scroll { display: none; }

  /* two cells to a row rather than one tall column of four */
  .stats__band { grid-template-columns: 1fr 1fr; }
  .stats__cell { padding: 16px 14px; }
  .stats__cell p { font-size: .8rem; line-height: 1.65; }
  .stats__cell--lead .num { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  /* panels become a stack of cards, all of them open */
  .srv-panels { flex-direction: column; height: auto; }
  .srv-panel, .srv-panel.is-open { flex: none; min-height: 290px; }
  .srv-panel .srv-panel__short, .srv-panel .srv-panel__go { max-height: none; opacity: 1; transform: none; }
  .srv-panel .srv-panel__media img { transform: none; filter: saturate(1) brightness(.7); }
  .srv-panel::before { transform: scaleX(1); }
  .carousel__track { grid-auto-columns: 78vw; }

  .news__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto !important; overflow: hidden; }
  .hero__stage { position: static; height: auto; min-height: 0; padding-block: var(--section-y); }
  .hero__content, .orb { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__flood, .hero__flood-fade { display: none; }
  .process__rail i { height: 100%; }
  .step { opacity: 1; }
}