/* === Sitepro landing — UI kit styles === */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sp-ink);
  color: var(--sp-paper);
  font-family: var(--ff-hebrew);
  overflow-x: hidden;
  cursor: none;
  position: relative;
}
main { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: 0; background: transparent; color: inherit; padding: 0; }

/* Global film grain */
.sp-grain {
  position: fixed; inset: 0;
  background-image: url('../images/grain.png');
  background-repeat: repeat;
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 6;
}

/* Section base */
section {
  position: relative;
  min-height: 100svh;
  padding: var(--sp-8) clamp(20px, 5vw, 80px);
}
.sp-section-meta {
  position: absolute;
  top: var(--sp-6);
  inset-inline-end: clamp(20px, 5vw, 80px);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--sp-paper-mute);
}
.sp-section-num {
  position: absolute;
  top: var(--sp-6);
  inset-inline-start: clamp(20px, 5vw, 80px);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--sp-paper-mute);
  transition: color var(--dur-sm) var(--ease-cinema), text-shadow var(--dur-sm);
}
section:hover > .sp-section-num,
.sp-hero:hover .sp-section-num,
.sp-clients-sec:hover .sp-section-num {
  color: var(--sp-coral);
  text-shadow: 0 0 12px var(--sp-coral-soft);
}

/* Topbar */
.sp-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 80px);
  transition: background var(--dur-sm) var(--ease-cinema), border-color var(--dur-sm);
  border-bottom: 1px solid transparent;
  /* Always opaque enough to hide Hero cube/halo bleeding through. */
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sp-topbar.scrolled {
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--sp-line);
}
.sp-topbar .logo {
  display: inline-flex;
  align-items: center;
  color: var(--sp-paper);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-md) var(--ease-cinema);
}
.sp-topbar .logo:hover { filter: brightness(1.1); }

/* Brand-image logo — replaces the old SVG sphere + wordmark.
   Height-based sizing so the topbar row stays consistent; width auto. */
.sp-topbar .logo-img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(245,245,242,.16));
  transition: filter var(--dur-md) var(--ease-cinema);
}
.sp-topbar .logo:hover .logo-img {
  filter: drop-shadow(0 0 18px var(--sp-coral-glow));
}
.sp-topbar .right { display: flex; align-items: center; gap: 18px; }
.sp-topbar .meta {
  font-family: var(--ff-mono); font-size: 11px; color: var(--sp-paper-mute);
  letter-spacing: .12em;
}

/* Buttons */
.sp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--ff-display); font-weight: 600; font-size: 15px;
  letter-spacing: .02em;
  border: 1px solid var(--sp-paper);
  background: var(--sp-paper); color: var(--sp-ink);
  transition: background var(--dur-sm) var(--ease-cinema), color var(--dur-sm), transform var(--dur-sm) var(--ease-soft);
}
.sp-btn:hover {
  background: transparent;
  color: var(--sp-coral);
  border-color: var(--sp-coral);
  box-shadow: 0 0 0 1px var(--sp-coral-soft), 0 0 22px var(--sp-coral-soft);
  text-shadow: 0 0 12px var(--sp-coral-glow);
}
.sp-btn--ghost { background: transparent; color: var(--sp-paper); border-color: var(--sp-line-strong); }
.sp-btn--ghost:hover { border-color: var(--sp-paper); background: var(--sp-paper); color: var(--sp-ink); }
.sp-btn .arrow { font-family: var(--ff-mono); font-size: 14px; transition: transform var(--dur-sm) var(--ease-cinema); }
.sp-btn:hover .arrow { transform: translateX(-6px); }

/* Unified vertical rhythm — every top-level section gets equal breathing room */
.sp-hero,
.sp-marquee,
.sp-partners,
.sp-aistack,
.sp-clients-sec,
.sp-cases,
.sp-cta-sec {
  padding-block: var(--section-pad);
}
/* Performance — skip layout/paint of off-screen sections.
   Browser only renders these when they enter viewport. */
.sp-marquee,
.sp-partners,
.sp-aistack,
.sp-clients-sec,
.sp-cases,
.sp-cta-sec,
.sp-footer {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
/* Pause heavy CSS animations until parent section is visible */
@media (prefers-reduced-motion: no-preference) {
  .sp-clients-sec:not(.is-visible) .cc-motif * { animation-play-state: paused !important; }
  .sp-partners:not(.is-visible) .pc-path,
  .sp-partners:not(.is-visible) .pc-scan { animation-play-state: paused !important; }
  .sp-aistack:not(.is-visible) .ai-pulse span,
  .sp-aistack:not(.is-visible) .ai-scan { animation-play-state: paused !important; }
  .sp-marquee:not(.is-visible) .sp-marquee-track { animation-play-state: paused !important; }
}
/* Drop GPU layer hint once animation has finished */
.sp-asm-block.is-asm { will-change: auto; }
.sp-asm[data-asm-done="1"].is-asm .sp-asm-l { will-change: auto; }
/* Hero a touch more on top because the sticky topbar sits over it */
.sp-hero { padding-top: 88px; padding-bottom: var(--sp-7); }
/* Marquee — connector band, compact */
.sp-marquee { padding-block: clamp(48px, 8vh, 100px); }

/* Hero */
.sp-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "copy cube"
    "cta  cube";
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.sp-hero__copy { grid-area: copy; }
.sp-hero > .sp-cube-stage { grid-area: cube; }
.sp-hero > .cta-row { grid-area: cta; margin-top: 0; align-self: start; }
.sp-eyebrow-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--sp-5);
}
.sp-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--sp-paper-dim);
  direction: ltr;
}
.sp-eyebrow-line { flex: 1; height: 1px; background: var(--sp-line); }
.sp-display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.sp-accent-word {
  text-shadow: 0 0 48px var(--sp-glow);
  position: relative;
}
.sp-shimmer {
  background: linear-gradient(110deg, var(--sp-paper) 30%, var(--sp-glow) 50%, var(--sp-paper) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 12s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ===== Headline rich treatments ===== */
.sp-headline-rich { display: flex; flex-direction: column; gap: 0; line-height: var(--lh-headline); }
.sp-headline-rich .sp-line-row { display: block; }

/* Per-letter assemble — letters fly in from random offsets and snap into place */
.sp-asm { display: inline-block; }
.sp-asm-l {
  display: inline-block;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0)) scale(var(--sc, 1));
  opacity: 0;
  filter: blur(6px);
  transition:
    transform .9s cubic-bezier(.16,.84,.3,1) var(--d, 0s),
    opacity .55s ease-out var(--d, 0s),
    filter .55s ease-out var(--d, 0s);
  will-change: transform, opacity, filter;
}
.sp-asm.is-asm .sp-asm-l {
  transform: translate(0,0) rotate(0) scale(1);
  opacity: 1;
  filter: blur(0);
}
.sp-asm-sp { transform: none !important; opacity: 1 !important; filter: none !important; }

/* Word wrapper — keeps a word as a non-breaking unit. Browser only wraps between
   words, never between letters. Letters animate inside the wrapper. */
.sp-asm-w {
  display: inline-block;
  white-space: nowrap;
}

/* Thread overlay — shift the entire drawn line + anchors + head together so the
   visible path doesn't get pinned under the sticky topbar (was the previous bug). */
/* Apply the 38vh visual offset to the children of the thread layer (not to the
   layer itself), and clip overflow at the layer's bounds. This way the head dot
   and drawn path sit lower than topbar, but they DON'T create scrollable area
   past the footer (layer bounds remain at docH). */
.sp-thread-layer { overflow: hidden; }
.sp-thread,
.thread-anchor,
.thread-head { transform: translateY(38vh); }
html, body { overflow-x: clip; }

/* Hover wave — blur ripple that passes through the letters left-to-right.
   Triggered by JS adding .is-wave on the host heading; removed after the wave finishes. */
.sp-asm.is-wave .sp-asm-l {
  animation: sp-letter-wave 1.1s cubic-bezier(.22,.7,.2,1) var(--d, 0s) both;
  animation-delay: var(--wd, var(--d, 0s));
}
.sp-asm.is-wave .sp-asm-l.sp-asm-sp { animation: none; }
@keyframes sp-letter-wave {
  0%   { filter: blur(0);   transform: translateY(0)   scale(1); opacity: 1; }
  35%  { filter: blur(10px); transform: translateY(-10px) scale(1.06); opacity: .55; }
  70%  { filter: blur(4px); transform: translateY(2px)  scale(.98); opacity: .85; }
  100% { filter: blur(0);   transform: translateY(0)   scale(1); opacity: 1; }
}

/* Letter scatter — gentle fade-up with small jitter (used by AsmReveal only;
   Hero's AsmText keeps its original 2D scatter defined at the top of the file). */
.sp-asm[data-asm-done="1"] .sp-asm-l {
  display: inline-block;
  transform: translate(var(--tx, 0), var(--ty, 0));
  opacity: 0;
  filter: blur(3px);
  transition:
    transform .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s),
    opacity .55s ease-out var(--d, 0s),
    filter .55s ease-out var(--d, 0s);
  will-change: transform, opacity, filter;
}
.sp-asm[data-asm-done="1"].is-asm .sp-asm-l {
  transform: translate(0, 0);
  opacity: 1;
  filter: blur(0);
}

/* Block reveal — slide in from the nearest edge with light fade. Stays inside
   parent containers that have overflow:hidden, so cards in grids don't disappear. */
.sp-asm-block {
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sc, 1));
  opacity: 0;
  transition:
    transform .9s cubic-bezier(.2,.78,.2,1) var(--d, 0s),
    opacity .65s ease-out var(--d, 0s);
  will-change: transform, opacity;
}
.sp-asm-block.is-asm {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* Color highlight — blue glow word (matches reference) */
.sp-w-blue {
  color: #5BA0FF;
  text-shadow: 0 0 22px rgba(91,160,255,.55), 0 0 56px rgba(91,160,255,.28);
  display: inline-block;
}

/* Animated stripe under highlighted word (the "polosa" effect) */
.sp-w-stripe { position: relative; display: inline-block; padding-bottom: .14em; }
.sp-w-stripe::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: .08em;
  background: linear-gradient(90deg,
    rgba(91,160,255,0) 0%,
    rgba(91,160,255,.35) 25%,
    #5BA0FF 50%,
    rgba(91,160,255,.35) 75%,
    rgba(91,160,255,0) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: w-stripe-move 2.4s linear infinite;
  filter: drop-shadow(0 0 8px rgba(91,160,255,.55));
  border-radius: 2px;
}
@keyframes w-stripe-move {
  to { background-position: -120% 0; }
}

/* Final period — coral pulsing accent */
.sp-period-dot {
  display: inline-block;
  color: var(--sp-coral);
  text-shadow: 0 0 18px var(--sp-coral-glow);
  animation: dot-blink 1.6s ease-in-out infinite;
}
@keyframes dot-blink {
  0%, 100% { opacity: .55; transform: translateY(0) scale(1); }
  50%      { opacity: 1;   transform: translateY(2px) scale(1.05); }
}

/* AI pill in lead copy — looks like a small accent badge */
.sp-pill-ai {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(91,160,255,.55);
  color: #5BA0FF;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: .85em;
  letter-spacing: .08em;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(91,160,255,.18) inset;
}
.sp-hero p.lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  max-width: 42ch;
  line-height: 1.5;
}
.sp-hero .sp-hero-lead {
  margin-top: var(--sp-5);
  max-width: 48ch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-hero .sp-hero-lead p { margin: 0; }
.sp-hero .sp-hero-lead__claim {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--sp-paper);
}
.sp-hero .sp-hero-lead__sub {
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  line-height: 1.55;
}
.sp-hero .sp-hero-lead__sub strong {
  color: var(--sp-paper);
  font-weight: 600;
}
.sp-hero .sp-hero-lead__years {
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px solid var(--sp-line);
}
.sp-hero .sp-hero-lead__years strong {
  color: var(--sp-coral);
  font-weight: 700;
  text-shadow: 0 0 18px var(--sp-coral-glow);
}
.sp-hero .sp-hero-lead__years span {
  color: var(--sp-paper);
  font-weight: 500;
}
@media (max-width: 768px) {
  .sp-hero .sp-hero-lead { gap: 10px; max-width: none; }
  .sp-hero .sp-hero-lead__claim { font-size: 1.08rem; }
  .sp-hero .sp-hero-lead__sub,
  .sp-hero .sp-hero-lead__years { font-size: 15px; }
}
.sp-hero .cta-row {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.sp-hero .stat {
  display: flex; flex-direction: column; gap: 2px;
}
.sp-hero .stat .num {
  font-family: var(--ff-display);
  font-size: 36px; font-weight: 700; letter-spacing: -.04em;
}
.sp-hero .stat:nth-of-type(1) .num { color: #5BA0FF; text-shadow: 0 0 22px rgba(91,160,255,.35); }
.sp-hero .stat:nth-of-type(2) .num { color: var(--sp-coral); text-shadow: 0 0 22px var(--sp-coral-soft); }
.sp-hero .stat .label {
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sp-paper-mute);
}

/* ============== Cube — unpacking cinematic case ==============
   Phase 0: sealed   1: lid lifts   2: walls unfold
   Phase 3: 3x3 inner deck assembles   4: fragments scatter & ship
   ================================================================ */
.sp-cube-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  perspective-origin: 50% 38%;
  height: 64svh;
  isolation: isolate;
}
.sp-cube-halo {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 560px; height: 560px;
  background:
    radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 28%, transparent 62%);
  filter: blur(8px);
  pointer-events: none;
  animation: halo-breathe 6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
.sp-cube-floor {
  position: absolute; left: 50%; top: 76%;
  transform: translate(-50%, -50%);
  width: 360px; height: 50px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.85) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.sp-cube-wrap {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
  animation: cube-float 7.5s ease-in-out infinite;
}
@keyframes cube-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.sp-cube {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(-28deg);
  transition: transform 2s var(--ease-cinema), opacity 1.2s var(--ease-cinema);
}
/* Phases 0-1 (sealed + anticipation) — closed-box reading.
   Reduced Y-rotation so side walls present near-edge-on and don't read as
   "open flaps in the air". Phase 2 ramps back to the cinematic angle. */
.sp-cube-stage[data-phase="0"] .sp-cube { transform: rotateX(-15deg) rotateY(-14deg); }
.sp-cube-stage[data-phase="1"] .sp-cube { transform: rotateX(-16deg) rotateY(-15deg); }
.sp-cube-stage[data-phase="2"] .sp-cube { transform: rotateX(-22deg) rotateY(-22deg); }
.sp-cube-stage[data-phase="3"] .sp-cube { transform: rotateX(-34deg) rotateY(-32deg); }
.sp-cube-stage[data-phase="4"] .sp-cube { transform: rotateX(-34deg) rotateY(-32deg); opacity: .55; }
.sp-cube-stage[data-phase="5"] .sp-cube { transform: rotateX(-34deg) rotateY(-32deg); opacity: .12; }
.sp-cube-stage[data-phase="6"] .sp-cube { transform: rotateX(-32deg) rotateY(-30deg); opacity: .12; }
.sp-cube-stage[data-phase="7"] .sp-cube { transform: rotateX(-22deg) rotateY(-28deg); opacity: .25; }
.sp-cube-stage[data-phase="8"] .sp-cube { transform: rotateX(-26deg) rotateY(-30deg); opacity: 1; }
.sp-cube-stage[data-phase="9"] .sp-cube { transform: rotateX(-18deg) rotateY(-28deg); opacity: 1; }

/* Phase 5 — walls fold cleanly back to closed, lid descends partway,
   fragments collapse into the now-sealing cube core. */
.sp-cube-stage[data-phase="5"] .sp-cube .lid {
  transform: translateY(-180px) rotateX(82deg) rotateZ(-1deg);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
/* front, right, left omitted on purpose — they revert to default (closed) */

.sp-cube-caption {
  position: absolute;
  bottom: 14px;
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
  z-index: 5;
  white-space: nowrap;
}
.sp-cube-caption .cap-num { color: var(--sp-paper-mute); font-weight: 500; }
.sp-cube-caption .cap-text {
  color: var(--sp-paper);
  transition: opacity .4s var(--ease-cinema);
}

.sp-cube .face {
  position: absolute; inset: 0;
  border: 1px solid var(--sp-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 700;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(245,245,242,.10) 0%, rgba(245,245,242,.02) 50%, rgba(0,0,0,.35) 100%),
    var(--sp-ink-2);
  /* Hide back sides of faces when rotated >90° from camera. Without this,
     walls rotated away (left, back, bottom side at our perspective) render
     their mirror-back through the cube interior, reading as ghost panels. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 1.8s var(--ease-cinema), opacity 1.2s var(--ease-cinema), box-shadow 1.6s var(--ease-cinema);
}

/* Default closed positions — half of 280 cube = 140 */
.sp-cube .front  {
  transform: translateZ(140px);
  transform-origin: bottom center;
}
.sp-cube .back   { transform: rotateY(180deg) translateZ(140px); background: var(--sp-ink); border-color: var(--sp-line); }
.sp-cube .right  {
  transform: translateX(140px) rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 100%),
    var(--sp-ink);
  border-color: var(--sp-line);
}
.sp-cube .left   {
  transform: translateX(-140px) rotateY(-90deg);
  background:
    linear-gradient(270deg, rgba(245,245,242,.06) 0%, rgba(0,0,0,.45) 100%),
    var(--sp-ink-2);
}
.sp-cube .lid {
  transform: translateY(-140px) rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(245,245,242,.18) 0%, rgba(245,245,242,.04) 50%, rgba(0,0,0,.40) 100%),
    var(--sp-ink-2);
}
.sp-cube .bottom {
  transform: translateY(140px) rotateX(-90deg);
  background: #050506;
  border-color: rgba(245,245,242,.06);
}

/* Phase 1 — anticipation: tape glows, lid trembles */
.sp-cube-stage[data-phase="1"] .sp-cube .lid {
  transform: translateY(-152px) rotateX(88deg) rotateZ(-0.5deg);
  animation: lid-tremble .35s ease-in-out infinite;
}
.sp-cube-stage[data-phase="1"] .sp-cube .tape {
  background:
    repeating-linear-gradient(135deg,
      rgba(245,245,242,.20) 0 6px,
      rgba(245,245,242,.40) 6px 12px);
  box-shadow: 0 0 22px rgba(255,255,255,.35);
}
@keyframes lid-tremble {
  0%, 100% { transform: translateY(-152px) rotateX(88deg) rotateZ(-0.5deg); }
  50%      { transform: translateY(-156px) rotateX(88deg) rotateZ( 0.5deg); }
}

/* Phase 2 — lid fully lifts off, slight tilt */
.sp-cube-stage[data-phase="2"] .sp-cube .lid {
  transform: translateY(-260px) rotateX(72deg) rotateZ(-3deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* Phase 3 — walls fold open like a box flat-pack */
.sp-cube-stage[data-phase="3"] .sp-cube .lid {
  transform: translateY(-300px) rotateX(70deg) rotateZ(-4deg);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.sp-cube-stage[data-phase="3"] .sp-cube .front {
  transform: translateZ(140px) translateY(140px) rotateX(90deg);
}
.sp-cube-stage[data-phase="3"] .sp-cube .right {
  transform: translateX(280px) rotateY(0deg);
}
.sp-cube-stage[data-phase="3"] .sp-cube .left {
  transform: translateX(-280px) rotateY(0deg);
}

/* Phases 4–7 — walls stay UNFOLDED (box opened) while contents are out */
.sp-cube-stage[data-phase="4"] .sp-cube .lid,
.sp-cube-stage[data-phase="5"] .sp-cube .lid,
.sp-cube-stage[data-phase="6"] .sp-cube .lid,
.sp-cube-stage[data-phase="7"] .sp-cube .lid {
  transform: translateY(-340px) rotateX(72deg) rotateZ(-6deg);
  opacity: .35;
}
.sp-cube-stage[data-phase="4"] .sp-cube .front,
.sp-cube-stage[data-phase="5"] .sp-cube .front,
.sp-cube-stage[data-phase="6"] .sp-cube .front,
.sp-cube-stage[data-phase="7"] .sp-cube .front {
  transform: translateZ(140px) translateY(140px) rotateX(90deg);
}
.sp-cube-stage[data-phase="4"] .sp-cube .right,
.sp-cube-stage[data-phase="5"] .sp-cube .right,
.sp-cube-stage[data-phase="6"] .sp-cube .right,
.sp-cube-stage[data-phase="7"] .sp-cube .right {
  transform: translateX(280px) rotateY(0deg);
}
.sp-cube-stage[data-phase="4"] .sp-cube .left,
.sp-cube-stage[data-phase="5"] .sp-cube .left,
.sp-cube-stage[data-phase="6"] .sp-cube .left,
.sp-cube-stage[data-phase="7"] .sp-cube .left {
  transform: translateX(-280px) rotateY(0deg);
}

/* Inner content of the front face */
.sp-cube .face-inner {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 22px;
  box-shadow: inset 0 0 80px rgba(255,255,255,.04);
}
.sp-cube .face-meta {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
  font-weight: 500;
}
.sp-cube .face-meta.top { align-self: start; justify-self: start; }
.sp-cube .face-meta.bot { align-self: end; justify-self: end; }
.sp-cube .mark {
  align-self: center; justify-self: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 92px;
  letter-spacing: -.06em;
  color: var(--sp-paper);
  text-shadow: 0 0 26px rgba(255,255,255,.45), 0 0 60px rgba(255,255,255,.18);
}
.sp-cube .tape {
  position: absolute;
  left: -8px; right: -8px;
  top: 58%;
  height: 22px;
  background:
    repeating-linear-gradient(135deg,
      rgba(245,245,242,.05) 0 6px,
      rgba(245,245,242,.10) 6px 12px);
  border-block: 1px solid rgba(245,245,242,.18);
  transform: rotate(-1.2deg);
}

/* Lid seam on top face */
.sp-cube .lid-seam {
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  height: 1px;
  background: rgba(245,245,242,.32);
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.sp-cube .lid-seam::before,
.sp-cube .lid-seam::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sp-paper);
  top: -3px;
  box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.sp-cube .lid-seam::before { left: -3px; }
.sp-cube .lid-seam::after  { right: -3px; }

/* Per-face grain overlay */
.sp-cube .face-grain {
  position: absolute; inset: 0;
  background-image: url('../images/grain.png');
  background-repeat: repeat;
  opacity: .14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sp-cube .face-grain.dark { opacity: .25; }

/* Wall labels (Hebrew/Latin meta on the side panels) */
.sp-cube .wall-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--sp-paper-dim);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .6s var(--ease-cinema) .2s;
}
.sp-cube-stage[data-phase="3"] .sp-cube .wall-label,
.sp-cube-stage[data-phase="4"] .sp-cube .wall-label,
.sp-cube-stage[data-phase="5"] .sp-cube .wall-label,
.sp-cube-stage[data-phase="6"] .sp-cube .wall-label,
.sp-cube-stage[data-phase="7"] .sp-cube .wall-label { opacity: .9; }
.sp-cube .face-meta.corner {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sp-paper-dim);
}

/* ============== Inner deck — 3×3 process grid ============== */
.sp-cube-deck {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  pointer-events: none;
  z-index: 4;
}

.deck-frag {
  position: relative;
  background: var(--sp-ink-2);
  border: 1px solid var(--sp-line-strong);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px;
  font-family: var(--ff-mono);
  overflow: hidden;
  /* default — invisible, scattered out */
  opacity: 0;
  transform: translate(
    calc((var(--ix) - 1) * 260px),
    calc((var(--iy) - 1) * 260px)
  ) rotate(calc((var(--i) - 4) * 14deg)) scale(.55);
  filter: blur(10px);
  transition:
    opacity 1.4s var(--ease-cinema),
    transform 1.6s var(--ease-cinema),
    filter 1.4s var(--ease-cinema),
    background .8s var(--ease-cinema),
    border-color .8s var(--ease-cinema);
  transition-delay: calc(var(--i) * 70ms);
}
.deck-frag .frag-corner {
  position: absolute; width: 6px; height: 6px;
  border: 1px solid var(--sp-paper-dim);
}
.deck-frag .frag-corner.tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.deck-frag .frag-corner.tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; }
.deck-frag .frag-corner.bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; }
.deck-frag .frag-corner.br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }
.deck-frag .frag-bar {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  height: 1px; background: var(--sp-line);
}
.deck-frag .frag-bar span {
  display: block; height: 100%;
  background: var(--sp-paper);
  width: 0%;
  transition: width 1.2s var(--ease-cinema);
  transition-delay: calc(var(--i) * 90ms + 600ms);
}
.sp-cube-stage[data-phase="5"] .deck-frag .frag-bar span,
.sp-cube-stage[data-phase="6"] .deck-frag .frag-bar span { width: calc((var(--i) + 1) * 11%); }

.deck-frag .frag-num {
  font-size: 10px; letter-spacing: .2em; color: var(--sp-paper-mute);
}
.deck-frag .frag-code {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--sp-paper);
  text-transform: uppercase;
  line-height: 1;
}
.deck-frag .frag-note {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-paper-dim);
}

/* Phase 4 — fragments rise from inside the open cube (still rough/blurred) */
.sp-cube-stage[data-phase="4"] .deck-frag {
  opacity: .65;
  transform: translate(0, 0) rotate(calc((var(--i) - 4) * 4deg)) scale(.85);
  filter: blur(3px);
  transition-delay: calc(var(--i) * 60ms);
}

/* Phase 5 — fragments lock into the clean 3×3 grid, center highlighted */
.sp-cube-stage[data-phase="5"] .deck-frag,
.sp-cube-stage[data-phase="6"] .deck-frag {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}
.sp-cube-stage[data-phase="5"] .deck-frag.lit,
.sp-cube-stage[data-phase="6"] .deck-frag.lit {
  background: var(--sp-paper);
  border-color: var(--sp-paper);
  box-shadow: 0 0 40px rgba(255,255,255,.25);
}
.sp-cube-stage[data-phase="5"] .deck-frag.lit .frag-num,
.sp-cube-stage[data-phase="5"] .deck-frag.lit .frag-note,
.sp-cube-stage[data-phase="6"] .deck-frag.lit .frag-num,
.sp-cube-stage[data-phase="6"] .deck-frag.lit .frag-note { color: rgba(10,10,11,.55); }
.sp-cube-stage[data-phase="5"] .deck-frag.lit .frag-code,
.sp-cube-stage[data-phase="6"] .deck-frag.lit .frag-code { color: var(--sp-ink); }
.sp-cube-stage[data-phase="6"] .deck-frag {
  transition: background .25s var(--ease-snap), border-color .25s var(--ease-snap), box-shadow .25s var(--ease-snap), color .25s var(--ease-snap);
}

/* Phase 8 — fragments collapse back into the cube core, walls re-seal */
.sp-cube-stage[data-phase="8"] .deck-frag {
  opacity: .8;
  transform: translate(0, 0) rotate(0deg) scale(0.15);
  filter: blur(4px);
  transition-delay: calc((8 - var(--i)) * 50ms);
  transition: opacity .9s var(--ease-cinema), transform 1.1s var(--ease-cinema), filter .9s var(--ease-cinema);
}
.sp-cube-stage[data-phase="8"] .deck-frag .frag-bar span {
  width: 0%; transition: width .8s var(--ease-cinema);
}

/* Phase 8 — fragments collapse + walls START closing back to defaults */
.sp-cube-stage[data-phase="8"] .sp-cube .lid {
  transform: translateY(-200px) rotateX(80deg) rotateZ(-1deg);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

/* Phase 9 — EXPLICIT sealed cube: every face forced to closed positions
   + a tiny scale "snap" so the cube re-forms decisively at the end. */
.sp-cube-stage[data-phase="9"] .sp-cube { animation: cube-snap .9s var(--ease-snap); }
.sp-cube-stage[data-phase="9"] .sp-cube .lid    { transform: translateY(-140px) rotateX(90deg); opacity: 1; box-shadow: none; }
.sp-cube-stage[data-phase="9"] .sp-cube .front  { transform: translateZ(140px); }
.sp-cube-stage[data-phase="9"] .sp-cube .right  { transform: translateX(140px)  rotateY(90deg); }
.sp-cube-stage[data-phase="9"] .sp-cube .left   { transform: translateX(-140px) rotateY(-90deg); }
@keyframes cube-snap {
  0%   { transform: rotateX(-18deg) rotateY(-28deg) scale(.92); }
  60%  { transform: rotateX(-18deg) rotateY(-28deg) scale(1.04); }
  100% { transform: rotateX(-18deg) rotateY(-28deg) scale(1); }
}

/* Phase 9 — fully sealed (= phase 0): fragments invisible, defaults take over */
.sp-cube-stage[data-phase="9"] .deck-frag {
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0);
  filter: blur(0);
  transition: opacity .6s var(--ease-cinema), transform .6s var(--ease-cinema);
}

/* Result chips fade out during repack */
.sp-cube-stage[data-phase="8"] .sp-cube-results .result,
.sp-cube-stage[data-phase="9"] .sp-cube-results .result {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  transition: transform 1.2s var(--ease-cinema), opacity .8s var(--ease-cinema);
}

/* Phase 7 — fragments scatter outward (delivery) */
.sp-cube-stage[data-phase="7"] .deck-frag {
  opacity: .55;
  transform: translate(
    calc((var(--ix) - 1) * 380px),
    calc((var(--iy) - 1) * 340px)
  ) rotate(calc((var(--i) - 4) * 10deg)) scale(.82);
  filter: blur(3px);
  transition-delay: calc(var(--i) * 60ms);
}

/* ============== Light beams escaping the cube ============== */
.sp-cube-beams {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-cinema);
  z-index: 2;
}
.sp-cube-stage[data-phase="2"] .sp-cube-beams,
.sp-cube-stage[data-phase="3"] .sp-cube-beams { opacity: 1; }
.sp-cube-stage[data-phase="4"] .sp-cube-beams,
.sp-cube-stage[data-phase="5"] .sp-cube-beams,
.sp-cube-stage[data-phase="6"] .sp-cube-beams { opacity: .4; }
.sp-cube-beams .beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 320px;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%);
  transform-origin: top center;
  filter: blur(1px);
}
.sp-cube-beams .beam-1 { transform: translate(-50%, -10%) rotate(-18deg); }
.sp-cube-beams .beam-2 { transform: translate(-50%, -10%) rotate(0deg); height: 380px; opacity: .7; }
.sp-cube-beams .beam-3 { transform: translate(-50%, -10%) rotate(22deg); }

/* ============== Floating dust particles ============== */
.sp-cube-dust {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.sp-cube-dust .dust {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 6px rgba(255,255,255,.6);
  opacity: 0;
  animation: dust-drift 8s ease-in-out infinite;
}
.sp-cube-stage[data-phase="0"] .sp-cube-dust .dust { animation-play-state: paused; opacity: 0; }
@keyframes dust-drift {
  0%   { opacity: 0; transform: translateY(20px) scale(.5); }
  20%  { opacity: .6; }
  50%  { opacity: 1; transform: translateY(-30px) scale(1); }
  80%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(-80px) scale(.6); }
}

/* ============== Scene marker ============== */
.sp-cube-marker {
  position: absolute;
  top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  z-index: 5;
}
.sp-cube-marker .m-line {
  width: 28px; height: 1px; background: var(--sp-line-strong);
}
.sp-cube-marker .m-text {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
}

/* ============== Caption — track-style scroller ============== */
.sp-cube-caption {
  display: flex !important; align-items: center; gap: 14px;
}
.sp-cube-caption .cap-track {
  position: relative;
  display: inline-block;
  height: 14px;
  overflow: hidden;
  min-width: 220px;
  text-align: left;
}
.sp-cube-caption .cap-row {
  display: flex; flex-direction: column;
  transition: transform 1.1s var(--ease-cinema);
}
.sp-cube-caption .cap-row .cap-text {
  height: 14px; line-height: 14px;
  white-space: nowrap;
}
.sp-cube-caption .cap-progress {
  position: relative;
  width: 64px; height: 1px;
  background: var(--sp-line);
}
.sp-cube-caption .cap-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  background: var(--sp-paper);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-cinema);
}

/* ============== Result chips that ship out ============== */
.sp-cube-results {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  pointer-events: none;
  z-index: 6;
}
.sp-cube-results .result {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%) scale(.4);
  padding: 8px 14px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 24px rgba(255,255,255,.25);
  opacity: 0;
  white-space: nowrap;
  transition:
    transform 1.6s var(--ease-cinema),
    opacity 1.2s var(--ease-cinema);
}
/* ============== Partners section ============== */
.sp-partners {
  display: grid; gap: var(--sp-6);
}
.sp-partners-grid {
  display: grid;
  /* RTL: copy on right, cards on left → in source order: copy first, cards second */
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.sp-partners-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--sp-line-strong);
  background: rgba(20,20,22,.4);
  position: relative;
  overflow: hidden;
}
/* Subtle scanning sheen across the whole card cluster */
.sp-partners-cards::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(245,245,242,.06) 50%, transparent 65%);
  background-size: 240% 240%;
  pointer-events: none;
  animation: pc-cluster-sheen 10s ease-in-out infinite;
}
@keyframes pc-cluster-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.sp-partner-card {
  position: relative;
  padding: 28px 16px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 220px;
  justify-content: flex-start;
  border-right: 1px solid var(--sp-line-strong);
  border-bottom: 1px solid var(--sp-line-strong);
  overflow: hidden;
  transition: background var(--dur-md) var(--ease-cinema);
  isolation: isolate;
  color: var(--brand, var(--sp-paper));
}
/* 4-col × 2-row grid: clear right border on every 4th card; clear bottom on last row (5-8) */
.sp-partner-card:nth-child(4n) { border-right: 0; }
.sp-partner-card:nth-child(n+5) { border-bottom: 0; }
.sp-partner-card:hover { background: rgba(245,245,242,.04); }
.sp-partner-card:hover .pc-scan { transform: translateX(150%); }
.sp-partner-card:hover .pc-icon svg { transform: scale(1.08); }
.sp-partner-card:hover .pc-path { stroke-dashoffset: 0; }
.sp-partner-card:hover { background: color-mix(in srgb, var(--brand, var(--sp-paper)) 6%, transparent); }
.sp-partner-card:hover .pc-title { color: var(--brand, var(--sp-paper)); }

.sp-partner-card .pc-icon svg { filter: drop-shadow(0 0 18px currentColor); opacity: .9; }
/* Status dot uses the inherited accent color too */
.sp-partner-card .pc-status .dot { background: currentColor; box-shadow: 0 0 8px currentColor; }
/* Reset non-icon text back to paper-white so accent applies ONLY to icon + dot */
.sp-partner-card .pc-title,
.sp-partner-card .pc-platforms,
.sp-partner-card .pc-status { color: var(--sp-paper); }
/* Bottom accent strip — fades in on cluster hover */
.sp-partners-cards::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #EA4335 0%, #EA4335 12.5%,
    #4285F4 12.5%, #4285F4 25%,
    #25F4EE 25%, #25F4EE 37.5%,
    #0A66C2 37.5%, #0A66C2 50%,
    #F05A28 50%, #F05A28 62.5%,
    #FF6B00 62.5%, #FF6B00 75%,
    #FF0000 75%, #FF0000 87.5%,
    #FBBC04 87.5%, #FBBC04 100%);
  opacity: .35;
  transition: opacity .6s var(--ease-cinema);
  pointer-events: none;
  z-index: 1;
}
.sp-partners-cards:hover::before { opacity: .9; }

/* Scan-line that crosses the card on hover */
.sp-partner-card .pc-scan {
  position: absolute;
  top: 0; bottom: 0; left: -50%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(245,245,242,.10), transparent);
  transform: translateX(0);
  transition: transform 1.2s var(--ease-cinema);
  pointer-events: none;
  z-index: 0;
}

.sp-partner-card .pc-icon {
  display: flex; align-items: center; justify-content: center;
  height: 52px;
}
.sp-partner-card .pc-icon svg {
  transition: transform .8s var(--ease-cinema);
  filter: drop-shadow(0 0 18px rgba(255,255,255,.2));
}
/* Auto-draw effect on hover */
.sp-partner-card .pc-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: pc-draw 6s var(--ease-cinema) infinite;
}
@keyframes pc-draw {
  0%   { stroke-dashoffset: 1;   opacity: .4; }
  20%  { stroke-dashoffset: 0;   opacity: 1; }
  85%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -1;  opacity: .4; }
}

.sp-partner-card .pc-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
.sp-partner-card .pc-platforms {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 0;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--sp-paper-dim);
}
.sp-partner-card .pc-platforms li {
  display: inline-flex; align-items: center;
  transition: color var(--dur-xs) var(--ease-snap);
}
.sp-partner-card .pc-platforms li:hover { color: var(--sp-paper); }
.sp-partner-card .pc-platforms li:not(:last-child)::after {
  content: "·"; padding-inline: 7px; color: var(--sp-paper-mute);
}
.sp-partner-card .pc-corner {
  position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--sp-paper-dim);
  z-index: 2;
  transition: border-color var(--dur-sm), width var(--dur-sm), height var(--dur-sm);
}
.sp-partner-card:hover .pc-corner { border-color: var(--sp-paper); width: 12px; height: 12px; }
.sp-partner-card .pc-corner.tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.sp-partner-card .pc-corner.tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; }
.sp-partner-card .pc-corner.bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.sp-partner-card .pc-corner.br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }

.sp-partner-card .pc-status {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sp-paper-mute);
  white-space: nowrap;
}
.sp-partner-card .pc-status .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 8px var(--sp-glow);
  animation: status-blink 2.4s ease-in-out infinite;
}
@keyframes status-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(255,255,255,.5); }
  50%      { opacity: .35; box-shadow: 0 0 0 rgba(255,255,255,0); }
}

.sp-partners-copy { direction: rtl; }
.sp-partners-copy h2.sp-h2-display {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  line-height: .92;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-4);
}
.sp-partners-copy .lead {
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  max-width: 38ch;
  line-height: 1.55;
}
.sp-partners-copy .lead strong {
  color: var(--sp-paper);
  font-weight: 600;
}

/* Stat row under the lead */
.sp-partners-stats {
  display: flex; gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sp-line);
}
.sp-partners-stats .ps-item {
  display: flex; flex-direction: column; gap: 2px;
}
.sp-partners-stats .ps-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.03em;
}
.sp-partners-stats .ps-label {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-mute);
  direction: ltr;
}

/* Bottom platform tags — auto-scroll ticker */
.sp-partners-tags {
  display: flex; flex-wrap: nowrap;
  gap: 0;
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
  padding-block: 18px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.sp-partners-tags::before,
.sp-partners-tags::after {
  content: "";
  display: flex; flex: none;
  width: max-content;
}
.sp-partner-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 22px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--sp-paper-dim);
  border-right: 1px solid var(--sp-line);
  white-space: nowrap;
  transition: color var(--dur-xs);
}
.sp-partner-tag:hover { color: var(--sp-paper); }
.sp-partner-tag:last-child { border-right: 0; }
.sp-partner-tag .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 10px var(--sp-glow);
}

@media (max-width: 1180px) {
  /* Stack headline above cards on narrower screens */
  .sp-partners-grid { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 880px) {
  /* Cards drop to 2 columns */
  .sp-partners-cards { grid-template-columns: repeat(2, 1fr); }
  .sp-partner-card:nth-child(4n) { border-right: 1px solid var(--sp-line-strong); }
  .sp-partner-card:nth-child(n+5) { border-bottom: 1px solid var(--sp-line-strong); }
  .sp-partner-card:nth-child(2n) { border-right: 0; }
  .sp-partner-card:nth-child(n+7) { border-bottom: 0; }
  .sp-partner-card .pc-title { font-size: 19px; }
  .sp-partners-stats { flex-wrap: wrap; gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-partners-cards::after,
  .sp-partner-card .pc-path,
  .sp-partner-card .pc-status .dot { animation: none; }
}
.sp-cube-orbit {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 460px; height: 460px;
  pointer-events: none;
  z-index: 1;
}
.sp-cube-orbit .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(245,245,242,.18);
  animation: ring-spin 28s linear infinite;
}
.sp-cube-orbit .ring.r2 {
  inset: 30px;
  border-style: solid;
  border-color: rgba(245,245,242,.08);
  animation-direction: reverse;
  animation-duration: 42s;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============== Coordinate hashes — corners of the stage ============== */
.sp-cube-hashes {
  position: absolute; inset: 36px;
  pointer-events: none;
  z-index: 5;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-mute);
}
.sp-cube-hashes .hash {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
}
.sp-cube-hashes .hash::before {
  content: ""; width: 14px; height: 1px; background: var(--sp-line-strong);
}
.sp-cube-hashes .h-tl { top: 0; left: 0; }
.sp-cube-hashes .h-tr { top: 0; right: 0; flex-direction: row-reverse; }
.sp-cube-hashes .h-tr::before { content: ""; }
.sp-cube-hashes .h-bl { bottom: 0; left: 0; }
.sp-cube-hashes .h-br { bottom: 0; right: 0; flex-direction: row-reverse; }

/* ============== Numerical readout — bottom-right ============== */
.sp-cube-readout {
  position: absolute;
  bottom: 60px;
  right: 36px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--ease-cinema), transform .8s var(--ease-cinema);
}
.sp-cube-readout.on { opacity: 1; transform: translateY(0); }
.sp-cube-readout .ro-key { color: var(--sp-paper-mute); }
.sp-cube-readout .ro-val { color: var(--sp-paper); font-weight: 600; }
.sp-cube-stage[data-phase="7"] .sp-cube-results .r2 { transform: translate(160%, -200%) scale(1); opacity: 1; transition-delay: 100ms; }
.sp-cube-stage[data-phase="7"] .sp-cube-results .r3 { transform: translate(-220%, 140%) scale(1); opacity: 1; transition-delay: 200ms; }
.sp-cube-stage[data-phase="7"] .sp-cube-results .r4 { transform: translate(200%, 160%) scale(1); opacity: 1; transition-delay: 300ms; }

/* Marquee */
.sp-marquee {
  border-block: 1px solid var(--sp-line);
  overflow: hidden;
  position: relative;
  min-height: auto;
}
.sp-marquee-track {
  display: flex; gap: var(--sp-7);
  animation: marquee 28s linear infinite;
  white-space: nowrap;
  /* Force LTR on the track itself so flex items lay out predictably (DOM-order left→right).
     Combined with translateX(0 → -50%) this makes content emerge from the RIGHT edge
     and flow leftward — the natural feel for an RTL site. */
  direction: ltr;
}
/* Second track runs slower so two rivers don't visually sync. Same direction (R→L). */
.sp-marquee-track.reverse { animation-duration: 38s; }
.sp-marquee-track.dim { opacity: .35; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sp-marquee-item {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -.03em;
  display: inline-flex; align-items: center; gap: var(--sp-7);
}
.sp-marquee-item .star { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--sp-paper); box-shadow: 0 0 18px var(--sp-glow); }

/* Promotion */
.sp-promotion { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: center; justify-items: end; }
.sp-promotion > div { max-width: 56ch; }
.sp-promotion h2 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h2); letter-spacing: var(--ls-headline); line-height: var(--lh-headline); margin: 0; }
.sp-promotion p { color: var(--sp-paper-dim); max-width: 48ch; margin-top: var(--sp-4); font-size: var(--fs-lead); }
.sp-poster {
  position: relative;
  aspect-ratio: 1/1;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  max-width: 520px;
  margin-inline-start: auto;
}
.sp-poster .frag {
  background: var(--sp-ink-2);
  border: 1px solid var(--sp-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-paper-dim);
  position: relative; overflow: hidden;
  transition: transform var(--dur-md) var(--ease-cinema), background var(--dur-sm);
}
.sp-poster .frag.lit { background: var(--sp-paper); color: var(--sp-ink); border-color: var(--sp-paper); }
.sp-poster .frag::after {
  content: ""; position: absolute; inset: 0; background: url('../images/grain.png'); opacity: .15; mix-blend-mode: overlay;
}

/* ============== AI Stack — RTL split: cards left, headline right ============== */
.sp-aistack { display: grid; gap: var(--sp-6); }
.sp-aistack-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.sp-aistack-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--sp-line-strong);
  background: rgba(15,15,17,.55);
  position: relative;
  overflow: hidden;
  align-self: center;
}
.sp-aistack-cards::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(245,245,242,.05) 48%, transparent 65%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: ai-cluster-sheen 11s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes ai-cluster-sheen {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}
.sp-ai-card {
  position: relative;
  padding: 36px 26px 30px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--sp-line-strong);
  min-height: 300px;
  justify-content: flex-start;
  overflow: hidden;
  transition: background .5s var(--ease-cinema);
  cursor: none;
}
.sp-ai-card:last-child { border-right: 0; }
.sp-ai-card:hover { background: rgba(245,245,242,.04); }

.sp-ai-card .ai-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--sp-paper-mute);
  text-align: center;
}
.sp-ai-card .ai-tag {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .32em;
  text-align: center;
  color: var(--sp-paper-dim);
  margin-top: 6px;
  margin-bottom: 22px;
  position: relative;
}
.sp-ai-card .ai-tag::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 18px; height: 1px;
  background: var(--sp-paper-dim);
  transform: translateX(-50%);
  transition: background var(--dur-sm) var(--ease-cinema), width var(--dur-sm) var(--ease-cinema);
}
.sp-ai-card:nth-child(1) .ai-tag::after { background: #5BA0FF; box-shadow: 0 0 8px rgba(91,160,255,.5); }
.sp-ai-card:nth-child(3) .ai-tag::after { background: var(--sp-coral); box-shadow: 0 0 8px var(--sp-coral-glow); }
.sp-ai-card:hover .ai-tag::after { width: 36px; }
.sp-ai-card .ai-title {
  font-family: var(--ff-hebrew);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.015em;
  white-space: nowrap;
  text-align: center;
  margin: 0 0 14px;
  color: var(--sp-paper);
}
.sp-ai-card .ai-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sp-paper-dim);
  text-align: center;
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}

/* Tech corners */
.sp-ai-card .ai-corner {
  position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--sp-paper-mute);
  transition: width .3s var(--ease-cinema), height .3s var(--ease-cinema), border-color .3s var(--ease-cinema);
}
.sp-ai-card .ai-corner.tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.sp-ai-card .ai-corner.tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; }
.sp-ai-card .ai-corner.bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.sp-ai-card .ai-corner.br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }
.sp-ai-card:hover .ai-corner { width: 12px; height: 12px; border-color: var(--sp-paper); }

/* Vertical scan line on hover */
.sp-ai-card .ai-scan {
  position: absolute; top: 0; bottom: 0; left: -2px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
  filter: blur(1px);
  opacity: 0;
  transition: opacity .3s var(--ease-cinema);
}
.sp-ai-card:hover .ai-scan {
  opacity: 1;
  animation: ai-scan-sweep 1.4s var(--ease-cinema) forwards;
}
@keyframes ai-scan-sweep {
  from { left: -2px; }
  to   { left: calc(100% + 2px); }
}

/* Pulse waveform under tag — three bars idle, react on hover */
.sp-ai-card .ai-pulse {
  position: absolute;
  top: 78px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px; align-items: end;
  height: 12px;
  opacity: .5;
  transition: opacity .4s var(--ease-cinema);
}
.sp-ai-card .ai-pulse span {
  display: block; width: 2px; height: 4px;
  background: var(--sp-paper-dim);
  animation: ai-pulse-bar 1.6s ease-in-out infinite;
}
.sp-ai-card .ai-pulse span:nth-child(2) { animation-delay: .25s; }
.sp-ai-card .ai-pulse span:nth-child(3) { animation-delay: .5s; }
.sp-ai-card:hover .ai-pulse { opacity: 1; }
.sp-ai-card:hover .ai-pulse span { background: var(--sp-paper); animation-duration: .9s; }
@keyframes ai-pulse-bar {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}

/* Right copy — RTL headline */
.sp-aistack-copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-4);
}
.sp-aistack-copy .ai-headline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: .98;
  letter-spacing: -0.005em;
  margin: 0;
}
/* Each row is its own line — prevents the column from breaking words across more
   than two lines. The contents of each row try to fit on a single visual line. */
.sp-aistack-copy .ai-headline .ai-row {
  display: block;
}
.sp-aistack-copy .ai-headline .ai-mark {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: 1.05em;
  color: var(--sp-coral);
  text-shadow: 0 0 24px var(--sp-coral-glow), 0 0 56px var(--sp-coral-soft);
}
/* Override sp-shimmer gradient with coral palette */
.sp-aistack-copy .ai-headline .ai-mark.sp-shimmer {
  background: linear-gradient(90deg,
    var(--sp-coral) 0%,
    #FFB69E 50%,
    var(--sp-coral) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sp-aistack-copy .ai-headline .ai-rotator {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}
.sp-aistack-copy .ai-headline .ai-rotator__word {
  display: inline-block;
  animation: ai-rotator-in 540ms cubic-bezier(.2,.8,.2,1) both;
  will-change: opacity, transform, filter;
}
@keyframes ai-rotator-in {
  0%   { opacity: 0; transform: translateY(-0.35em); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-aistack-copy .ai-headline .ai-rotator__word { animation: none; }
}

.sp-aistack-copy .lead {
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  max-width: 38ch;
  line-height: 1.6;
  margin: 0;
}
.sp-aistack-copy .lead strong { color: var(--sp-paper); font-weight: 700; }
.sp-aistack-copy .ai-meta-row {
  display: flex; flex-wrap: wrap; gap: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sp-line);
}
.sp-aistack-copy .ai-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
}
.sp-aistack-copy .ai-meta .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 10px var(--sp-glow);
  animation: ai-meta-pulse 2.4s ease-in-out infinite;
}
@keyframes ai-meta-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--sp-glow); }
  50%      { opacity: .35; box-shadow: 0 0 4px var(--sp-glow); }
}

@media (max-width: 980px) {
  .sp-aistack-grid { grid-template-columns: 1fr; }
  .sp-aistack-cards { grid-template-columns: 1fr; }
  .sp-ai-card { border-right: 0; border-bottom: 1px solid var(--sp-line-strong); }
  .sp-ai-card:last-child { border-bottom: 0; }
}

/* Legacy stub kept tiny so the old class names don't 404 styling-wise */
.sp-ai-card-legacy {
  position: absolute;
  width: 220px; height: 300px;
  background: var(--sp-ink-2);
  border: 1px solid var(--sp-line-strong);
  border-radius: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px;
  transition: transform var(--dur-md) var(--ease-cinema), box-shadow var(--dur-md);
  cursor: none;
}
.sp-ai-card .num { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; color: var(--sp-paper-mute); }
.sp-ai-card .title { font-family: var(--ff-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.sp-ai-card .body { font-size: 12px; color: var(--sp-paper-dim); line-height: 1.5; }
.sp-ai-card:hover { box-shadow: var(--sp-shadow-cinema); border-color: var(--sp-paper); z-index: 10 !important; }

/* Clients — selected collaborations */
.sp-clients-sec { display: grid; gap: var(--sp-6); }
.sp-clients-head { display: flex; flex-direction: column; gap: 8px; }
.sp-clients-head .sp-h2-display {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: .96;
  letter-spacing: -0.005em;
  margin: 0;
  text-align: right;
  color: var(--sp-paper);
  text-shadow: 0 0 24px rgba(245,245,242,.18);
}
.sp-clients-head .sp-h2-display [data-asm].is-asm > .sp-asm-l { color: var(--sp-paper); }

.sp-clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--sp-line-strong);
  background: var(--sp-ink);
}
.cc-card {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: flex; flex-direction: column;
  padding: 18px 22px;
  border-right: 1px solid var(--sp-line-strong);
  border-bottom: 1px solid var(--sp-line-strong);
  color: var(--sp-paper);
  text-decoration: none;
  overflow: hidden;
  cursor: none;
  background: var(--sp-ink);
  transition: background .5s var(--ease-cinema), color .5s var(--ease-cinema);
}
.sp-clients-grid .cc-card:nth-child(3n) { border-right: 0; }
.sp-clients-grid .cc-card:nth-last-child(-n+3) { border-bottom: 0; }

.cc-card .cc-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent, var(--sp-paper-mute));
  opacity: .85;
}
.cc-card .cc-arrow-top {
  font-family: var(--ff-display);
  font-size: 18px;
  color: var(--sp-paper-mute);
  opacity: 0;
  transform: translate(-2px, 2px);
  transition: opacity .35s var(--ease-cinema), transform .35s var(--ease-cinema), color .35s var(--ease-cinema);
}
.cc-card:hover .cc-arrow-top { opacity: 1; transform: translate(0,0); color: var(--accent); }

.cc-card .cc-stage {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: var(--sp-paper);
  transition: color .5s var(--ease-cinema), transform .5s var(--ease-cinema);
  min-height: 140px;
}
.cc-card:hover .cc-stage { color: var(--accent); }

.cc-motif {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .8;
  transition: opacity .5s var(--ease-cinema);
  pointer-events: none;
  color: var(--accent);
}
.cc-card:hover .cc-motif { opacity: 1; }
.cc-motif > .mf { width: 70%; height: 70%; }
.cc-motif > svg.mf { width: 70%; height: 70%; }

.cc-logo-corner {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  z-index: 3;
  transition: transform .4s var(--ease-cinema), border-color .4s var(--ease-cinema), box-shadow .4s var(--ease-cinema);
  background: var(--sp-paper);
  border: 1px solid var(--sp-line-strong);
  padding: 6px;
  border-radius: 4px;
}
.cc-card:hover .cc-logo-corner {
  transform: scale(1.08);
  border-color: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
[dir="rtl"] .cc-logo-corner { right: auto; left: 14px; }
.cc-card .cc-foot { padding-right: 76px; }

.cc-card .cc-foot {
  display: flex; align-items: baseline; gap: 12px;
  position: relative;
  padding-top: 14px;
  border-top: 1px solid var(--sp-line);
  transition: border-color .4s var(--ease-cinema);
}
.cc-card .cc-name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -.015em;
  margin: 0;
  color: var(--sp-paper);
  transition: color .4s var(--ease-cinema);
}
.cc-card .cc-cat {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  color: var(--sp-paper-mute);
}
.cc-card .cc-arrow {
  margin-inline-start: auto;
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--sp-paper-mute);
  transform: translate(-4px, 4px);
  opacity: 0;
  transition: opacity .4s var(--ease-cinema), transform .4s var(--ease-cinema), color .4s var(--ease-cinema);
}

.cc-card .cc-corner {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--sp-paper-mute);
  opacity: 0;
  transition: opacity .35s var(--ease-cinema), border-color .35s var(--ease-cinema), width .35s var(--ease-cinema), height .35s var(--ease-cinema);
}
.cc-card .cc-corner.tl { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.cc-card .cc-corner.tr { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }
.cc-card .cc-corner.bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
.cc-card .cc-corner.br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* Glow + scan */
.cc-card .cc-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--accent), transparent 60%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .6s var(--ease-cinema);
}
.cc-card .cc-scan {
  position: absolute; top: 0; bottom: 0; left: -2px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  filter: blur(1px);
  opacity: 0;
  pointer-events: none;
}

/* Hover state — full color takeover */
.cc-card:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--sp-ink));
  color: var(--sp-paper);
  z-index: 2;
}
.cc-card:hover .cc-art { color: var(--accent); transform: scale(1.04); }
.cc-card:hover .cc-name { color: var(--accent); }
.cc-card:hover .cc-foot { border-color: color-mix(in srgb, var(--accent) 50%, var(--sp-line)); }
.cc-card:hover .cc-arrow { opacity: 1; transform: translate(0,0); color: var(--accent); }
.cc-card:hover .cc-corner { opacity: 1; border-color: var(--accent); width: 14px; height: 14px; }
.cc-card:hover .cc-glow { opacity: .22; }
.cc-card:hover .cc-scan { opacity: 1; animation: cc-scan-sweep 1.4s var(--ease-cinema) forwards; }
@keyframes cc-scan-sweep { from { left: -2px; } to { left: calc(100% + 2px); } }

@media (max-width: 880px) {
  .sp-clients-grid { grid-template-columns: 1fr; }
  .sp-clients-grid .cc-card { border-right: 0; }
  .sp-clients-grid .cc-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--sp-line); }
  .sp-clients-grid .cc-card:last-child { border-bottom: 0; }
}

/* ===== Brand-fitting motifs (animated background per card) ===== */

/* TresPesos — papel picado banner sways + ₱ peso pulse */
.mf-pesos .pp-flag {
  transform-origin: top center; transform-box: fill-box;
  animation: pp-sway 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}
.mf-pesos .pp-peso { transform-origin: 100px 88px; transform-box: fill-box; animation: pp-peso-pulse 2.4s ease-in-out infinite; }
@keyframes pp-sway {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg)  translateY(-1px); }
}
@keyframes pp-peso-pulse {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Caffè Olle — steam wisps rise from cup */
.mf-cup .cwisp { stroke-dasharray: 80; stroke-dashoffset: 80; animation: steam-rise 3s ease-in-out infinite; }
.mf-cup .cwisp.w2 { animation-delay: -1s; }
.mf-cup .cwisp.w3 { animation-delay: -2s; }
@keyframes steam-rise {
  0%   { stroke-dashoffset: 80; opacity: 0; transform: translateY(6px); }
  30%  { opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0; transform: translateY(-10px); }
}

/* Dalas — isometric cube slow spin */
.mf-cube .cube-spin { animation: cube-spin 14s ease-in-out infinite; }
@keyframes cube-spin {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg)  scale(1.04); }
}

/* Zula — sun rises over horizon */
.mf-sun .sun-rise { animation: sun-rise 5s ease-in-out infinite; }
.mf-sun .sun-ray  { animation: ray-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); transform-origin: 100px 92px; }
@keyframes sun-rise {
  0%, 100% { transform: translateY(8px) scale(.9); opacity: .7; }
  50%      { transform: translateY(-14px) scale(1); opacity: 1; }
}
@keyframes ray-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* Inbal — valve handwheel rotates + flow arrows pulse */
.mf-valve .valve-spin { animation: valve-spin 6s linear infinite; }
.mf-valve .flow-arrow { animation: arrow-pulse 1.6s ease-in-out infinite; }
.mf-valve .flow-arrow.fa2 { animation-delay: .8s; }
@keyframes valve-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes arrow-pulse { 0%, 100% { opacity: .35; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(3px); } }

/* Kol-Or — traffic light cycle red → yellow → green */
.mf-traffic .tl { opacity: .18; transform-origin: center; transform-box: fill-box; }
.mf-traffic .tl-r { animation: tl-cycle 4.5s steps(1) infinite; }
.mf-traffic .tl-y { animation: tl-cycle 4.5s steps(1) infinite -1.5s; }
.mf-traffic .tl-g { animation: tl-cycle 4.5s steps(1) infinite -3s; }
@keyframes tl-cycle {
  0%, 33%   { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 6px currentColor); }
  34%, 100% { opacity: .18; transform: scale(.9); filter: none; }
}

/* Seedstec — seed sprouts (stem grows + leaves unfold) */
.mf-seed .sd-stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sd-grow 5s ease-in-out infinite; }
.mf-seed .sd-leaf { transform-origin: 100px 72px; transform-box: fill-box; animation: sd-leaf 5s ease-in-out infinite; opacity: 0; }
.mf-seed .sd-leaf.l2 { transform-origin: 100px 50px; animation-delay: .4s; }
@keyframes sd-grow { 0%, 100% { stroke-dashoffset: 1; } 35%, 75% { stroke-dashoffset: 0; } }
@keyframes sd-leaf { 0%, 12%, 100% { opacity: 0; transform: scale(.3) rotate(-20deg); } 50%, 70% { opacity: 1; transform: scale(1) rotate(0); } }

/* General — forklift drives in & raises */
.mf-fork .fork-truck      { animation: fork-drive 5.5s ease-in-out infinite; }
.mf-fork .fk-crate-grp    { animation: fork-lift 5.5s ease-in-out infinite; transform-box: fill-box; }
@keyframes fork-drive {
  0%        { transform: translateX(30px); opacity: 0; }
  12%, 65%  { transform: translateX(0);    opacity: 1; }
  85%, 100% { transform: translateX(0);    opacity: 1; }
}
@keyframes fork-lift {
  0%, 30%, 100% { transform: translateY(0); }
  55%, 80%      { transform: translateY(-40px); }
}

/* Gerstein — cyclist with spinning wheels + brushstroke painting itself across canvas */
.mf-cyclist .cy-wheel { animation: cy-spin 1.6s linear infinite; }
.mf-cyclist .cy-wheel.cy-w2 { animation-delay: -.2s; }
@keyframes cy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.mf-cyclist .cv-stroke { animation: cv-paint 4.2s ease-in-out infinite; }
.mf-cyclist .cv-blob   { animation: cv-blob 4.2s ease-in-out infinite; }
@keyframes cv-paint {
  0%, 8%  { stroke-dashoffset: 1; opacity: 0; }
  12%     { opacity: .8; }
  60%     { stroke-dashoffset: 0; opacity: .8; }
  85%     { stroke-dashoffset: 0; opacity: .8; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cv-blob {
  0%, 55% { opacity: 0; transform: scale(.4); }
  60%, 85% { opacity: .85; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.2); }
}

/* TresPesos — tortilla chip wobbles, salsa bubbles, chili shakes */
.mf-nachos .nc-chip  { animation: nc-chip 3.6s ease-in-out infinite; transform-box: fill-box; }
.mf-nachos .nc-chili { animation: nc-chili 2.4s ease-in-out infinite; transform-box: fill-box; }
.mf-nachos .nc-bub   { animation: nc-bubble 2.2s ease-in-out infinite; transform-box: fill-box; }
.mf-nachos .nc-bub.b2 { animation-delay: -.7s; }
.mf-nachos .nc-bub.b3 { animation-delay: -1.4s; }
@keyframes nc-chip   { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg) translateY(-2px); } }
@keyframes nc-chili  { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 92% { transform: rotate(6deg); } }
@keyframes nc-bubble { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-8px); opacity: 1; } }

/* Dalas — tissue paper trail unrolls, perf dots fade in, napkin stack breathes */
/* Dalas — trash bin lid bounces, small toilet roll slowly rotates */
.mf-bin .bin-lid   { animation: bin-lid 3.4s ease-in-out infinite; transform-box: fill-box; }
.mf-bin .bin-roll  { animation: bin-roll 10s linear infinite; }
.mf-bin .bin-paper { animation: bin-paper 2.4s ease-in-out infinite; }
@keyframes bin-lid {
  0%, 88%, 100% { transform: translateY(0) rotate(0); }
  35%, 55%      { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes bin-roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bin-paper { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Zula — leaf falls from branch and resets, shadow of bench pulses */
.mf-bench .bn-leaf   { animation: bn-leaf 4.8s ease-in-out infinite; transform-box: fill-box; }
.mf-bench .bn-shadow { animation: bn-shadow 4.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bn-leaf {
  0%       { transform: translate(0, 0) rotate(0); opacity: 1; }
  60%      { transform: translate(8px, 30px) rotate(40deg); opacity: 1; }
  75%      { transform: translate(-4px, 56px) rotate(80deg); opacity: 0; }
  100%     { transform: translate(0, 0) rotate(0); opacity: 1; }
}
@keyframes bn-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.92); opacity: .28; } }

/* General Malgezot — freight cargo elevator: cabin rides up the shaft with cable */

/* Cases */
.sp-cases-track { display: flex; gap: var(--sp-5); padding: var(--sp-6) 0; overflow-x: auto; scroll-snap-type: x mandatory; }
.sp-cases-track::-webkit-scrollbar { display: none; }
.sp-case {
  flex: 0 0 clamp(320px, 48vw, 640px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
}
.sp-case-img {
  aspect-ratio: 16/10;
  background: linear-gradient(180deg, #1c1c1f, #0A0A0B);
  position: relative; overflow: hidden;
  border: 1px solid var(--sp-line);
}
.sp-case-img.gA { background: radial-gradient(circle at 30% 30%, #2a2a2e, #0A0A0B 70%); }
.sp-case-img.gB { background: radial-gradient(circle at 70% 60%, rgba(255,255,255,.18), #0A0A0B 60%); }
.sp-case-img.gC { background: linear-gradient(135deg, #1f1f22, #0A0A0B); }
.sp-case-img.gD { background: radial-gradient(circle at 50% 50%, #16161a, #0A0A0B 80%); }
.sp-case-img .label {
  position: absolute; left: 18px; bottom: 18px;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -.03em;
  mix-blend-mode: difference;
}
.sp-case-img .grain {
  position: absolute; inset: 0; background: url('../images/grain.png'); opacity: .14; mix-blend-mode: overlay;
}
.sp-case-meta {
  display: flex; justify-content: space-between; align-items: baseline;
}
.sp-case-meta .num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em; color: var(--sp-paper-mute); }
.sp-case-meta .stat { font-family: var(--ff-display); font-weight: 600; font-size: 18px; }

/* CTA section */
.sp-cta { text-align: center; display: grid; place-items: center; gap: var(--sp-5); }
.sp-cta h2 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0; max-width: 18ch;
}
.sp-cta .lead { color: var(--sp-paper-dim); max-width: 52ch; font-size: var(--fs-lead); }

/* CTA — contact form */
.sp-cta-form .sp-cta-h { font-size: clamp(56px, 9vw, 140px); font-weight: 800; line-height: 1; margin: 0; }
.sp-form {
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column; gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding: var(--sp-6) clamp(20px, 4vw, 48px);
  border: 1px solid var(--sp-line); background: rgba(20,20,24,.4);
  text-align: right;
}
.sp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.sp-field { display: flex; flex-direction: column; gap: 8px; }
.sp-field-msg { grid-column: 1 / -1; }
.sp-field-label {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--sp-paper-mute); text-align: right;
}
.sp-field-label em { color: #FF4D4F; font-style: normal; margin-inline-start: 4px; }
.sp-field-label em.opt { color: var(--sp-paper-mute); }
.sp-field input, .sp-field textarea {
  background: transparent; border: 0;
  border-bottom: 1px solid var(--sp-line-strong, rgba(245,245,242,.32));
  color: var(--sp-paper); font-family: var(--ff-body); font-size: 16px;
  padding: 10px 0; outline: none; text-align: right; direction: rtl;
  transition: border-color .25s var(--ease-cinema);
}
.sp-field input:focus, .sp-field textarea:focus { border-color: #5BA0FF; }
.sp-field textarea { resize: vertical; min-height: 32px; }

.sp-budget { display: flex; flex-direction: column; gap: 14px; }
.sp-budget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sp-budget-val { display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-display); font-weight: 700; font-size: 22px; color: var(--sp-paper); }
.sp-budget-val .dash { color: var(--sp-paper-mute); font-weight: 400; }
.sp-budget-val .per { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; color: var(--sp-paper-mute); margin-inline-start: 8px; }

.sp-range { position: relative; height: 32px; }
.sp-range-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: var(--sp-line); border-radius: 2px; }
.sp-range-fill  { position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  background: linear-gradient(90deg, #5BA0FF, #8BC0FF); box-shadow: 0 0 16px rgba(91,160,255,.45); border-radius: 2px; }
.sp-range-input { position: absolute; inset: 0; width: 100%; height: 32px; background: transparent;
  -webkit-appearance: none; appearance: none; pointer-events: none; margin: 0; }
.sp-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sp-paper); border: 2px solid var(--sp-ink);
  box-shadow: 0 0 0 1px #5BA0FF, 0 0 18px rgba(91,160,255,.55); cursor: none; pointer-events: auto;
}
.sp-range-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sp-paper); border: 2px solid var(--sp-ink);
  box-shadow: 0 0 0 1px #5BA0FF, 0 0 18px rgba(91,160,255,.55); cursor: none; pointer-events: auto;
}

.sp-budget-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--sp-line-strong, rgba(245,245,242,.32));
  background: rgba(20,20,24,.6); color: var(--sp-paper-dim);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em;
  cursor: none; transition: all .2s var(--ease-cinema);
}
.sp-chip:hover { color: var(--sp-paper); border-color: var(--sp-paper); }
.sp-chip.is-on {
  background: #5BA0FF; color: var(--sp-ink); border-color: #5BA0FF;
  box-shadow: 0 0 18px rgba(91,160,255,.4);
}

.sp-form-submit {
  width: 100%; padding: 18px 24px; font-size: 16px;
  border: 1px solid var(--sp-line-strong, rgba(245,245,242,.32));
  display: flex; justify-content: center; gap: 12px;
  transition: all .25s var(--ease-cinema);
}
.sp-form-submit:hover { background: var(--sp-paper); color: var(--sp-ink); border-color: var(--sp-paper); }

@media (max-width: 720px) {
  .sp-form-grid { grid-template-columns: 1fr; }
  .sp-budget-head { flex-direction: column; align-items: flex-end; }
}

/* Footer */
.sp-footer {
  border-top: 1px solid var(--sp-line);
  padding: var(--sp-8) clamp(20px, 5vw, 80px) var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-7);
  min-height: auto;
}
.sp-footer__grid {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.sp-footer .col { display: flex; flex-direction: column; gap: var(--sp-4); }
.sp-footer .col h4 {
  font-family: var(--ff-hebrew);
  font-size: 22px; letter-spacing: 0;
  font-weight: 700;
  color: var(--sp-paper); margin: 0 0 var(--sp-4);
  display: block;
}
.sp-footer .col--studio h4::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sp-coral); box-shadow: 0 0 12px var(--sp-coral-glow);
  margin-inline-end: 12px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* Three contact groups in a balanced horizontal row */
.sp-footer__contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
}
.sp-footer__contact {
  display: flex; flex-direction: column;
  gap: 8px;
}
.sp-footer__contact-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-mute);
  margin-bottom: 4px;
}
.sp-footer__contact-value {
  font-family: var(--ff-hebrew);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sp-paper);
  text-decoration: none;
  transition: color var(--dur-xs) var(--ease-snap);
}
a.sp-footer__contact-value:hover { color: var(--sp-coral); }

.sp-footer__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sp-line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--sp-paper-mute);
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.sp-footer__copy {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sp-paper-dim);
  font-family: var(--ff-hebrew);
  font-size: 13px;
}
.sp-footer__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sp-coral);
  box-shadow: 0 0 10px var(--sp-coral-glow);
  animation: dot-blink 1.6s ease-in-out infinite;
}
.sp-footer__legal { display: inline-flex; gap: 10px; color: var(--sp-paper-mute); }
.sp-footer__legal a {
  color: var(--sp-paper-mute);
  transition: color var(--dur-xs) var(--ease-snap);
  text-decoration: none;
  font-family: var(--ff-hebrew);
  font-size: 13px;
}
.sp-footer__legal a:hover { color: var(--sp-paper); }
.sp-footer__brand { color: var(--sp-paper-mute); }

@media (max-width: 820px) {
  .sp-footer__contacts { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sp-footer__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* Cursor */
.sp-cursor-dot, .sp-cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .36s var(--ease-cinema), height .36s var(--ease-cinema), opacity var(--dur-xs);
}
.sp-cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sp-paper); }
.sp-cursor-ring { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sp-paper); }
.sp-cursor-ring.hover { width: 56px; height: 56px; }
.sp-cursor-ring.view { width: 96px; height: 96px; background: rgba(245,245,242,.06); backdrop-filter: blur(4px); }
.sp-cursor-ring.view::after { content: "VIEW"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; font-size: 11px; letter-spacing: .2em; color: var(--sp-paper); }
.sp-cursor-dot.hover { opacity: 0; }
@media (hover: none) {
  body { cursor: auto; }
  .sp-cursor-dot, .sp-cursor-ring { display: none; }
}

/* Thread — weaves through the page, behind main content, with sparks above */
.sp-thread-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
}
.sp-thread-layer.back  { z-index: 0; }
.sp-thread-layer.front { z-index: 60; }
.sp-thread {
  display: block;
  width: 100%;
}

/* Anchor — pops at major elements */
.thread-anchor {
  position: absolute;
  width: 0; height: 0;
  --r: 50px;
}
.thread-anchor > span {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .9s var(--ease-cinema), opacity .9s var(--ease-cinema);
  opacity: 0;
}
.thread-anchor .anchor-glow {
  width: calc(var(--r) * 3); height: calc(var(--r) * 3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.10) 30%, transparent 65%);
  filter: blur(2px);
  mix-blend-mode: screen;
}
.thread-anchor .anchor-ring {
  width: calc(var(--r) * 0.9); height: calc(var(--r) * 0.9);
  border-radius: 50%;
  border: 1px solid rgba(245,245,242,.55);
  mix-blend-mode: difference;
}
.thread-anchor .anchor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 14px rgba(255,255,255,.85);
}
.thread-anchor .anchor-label {
  width: auto; height: auto;
  transform: translate(8px, calc(-50% - 18px)) scale(0.8);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid var(--sp-line-strong);
  background: rgba(10,10,11,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mix-blend-mode: normal;
}

.thread-anchor.active .anchor-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.thread-anchor.active .anchor-ring {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  animation: anchor-pulse 2.4s var(--ease-cinema) infinite;
}
.thread-anchor.active .anchor-dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.thread-anchor.active .anchor-label {
  opacity: 1;
  transform: translate(8px, calc(-50% - 18px)) scale(1);
  transition-delay: .4s;
}
@keyframes anchor-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); border-color: rgba(245,245,242,.55); }
  50%      { transform: translate(-50%, -50%) scale(1.6); border-color: rgba(245,245,242,.15); }
}

/* Traveling head — at the current scroll progress along the path */
.thread-head {
  position: absolute;
  width: 0; height: 0;
  transition: opacity .4s var(--ease-cinema);
}
.thread-head > span {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
}
.thread-head .head-glow {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,.10) 40%, transparent 70%);
  mix-blend-mode: screen;
  animation: head-breathe 1.6s ease-in-out infinite;
}
.thread-head .head-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sp-paper);
  box-shadow: 0 0 12px rgba(255,255,255,.9);
}
@keyframes head-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
  50%      { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .thread-anchor.active .anchor-ring,
  .thread-head .head-glow { animation: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sp-marquee-track { animation: none; }
  .sp-cube { animation: none; }
}

/* Responsive */
@media (max-width: 880px) {
  .sp-hero { grid-template-columns: 1fr; }
  .sp-promotion { grid-template-columns: 1fr; }
  .sp-clients { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   WordPress integration overrides
   - [sp_cases] plugin output
   - PHP-rendered CTA section wrapping [sp_lead_form]
   ================================================================ */
.sp-cases {
  display: block;
  padding-inline: clamp(20px, 5vw, 80px);
  position: relative;
  min-height: auto;
}
.sp-cases__head {
  max-width: 880px;
  margin-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sp-cases__title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  letter-spacing: var(--ls-display);
  color: var(--sp-paper);
}
.sp-cases__grid {
  display: grid;
  /* Fixed 3 columns so "show more" cards wrap to a new row below the first 3
     rather than being packed sideways on wide screens. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: var(--maxw);
  background: var(--sp-line-strong);
  padding: 1px;
  border: 1px solid var(--sp-line-strong);
}
.sp-case {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-5);
  background: var(--sp-ink-2);
  border: 1px solid var(--sp-line);
  position: relative;
  transition: border-color var(--dur-sm) var(--ease-cinema),
              transform var(--dur-sm) var(--ease-cinema),
              box-shadow var(--dur-sm) var(--ease-cinema);
}
.sp-case:hover {
  border-color: var(--sp-line-strong);
  transform: translateY(-4px);
  box-shadow: var(--sp-shadow-card);
}
.sp-case__vertical {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--sp-paper-mute);
}
.sp-case__metric {
  font-size: clamp(1.75rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sp-coral);
  text-shadow: 0 0 32px var(--sp-coral-soft);
  font-weight: 700;
  direction: rtl;
  text-align: right;
  max-width: 18ch;
}
.sp-case__action,
.sp-case__context,
.sp-case__story,
.sp-case__vertical { direction: rtl; text-align: right; }
.sp-case__action {
  font-family: var(--ff-hebrew);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--sp-paper);
}
.sp-case__context {
  font-size: var(--fs-body);
  color: var(--sp-paper-dim);
  line-height: var(--lh-body);
}
.sp-case__story-wrap {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sp-line);
}
.sp-case__toggle {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-paper-dim);
  cursor: none;
  transition: color var(--dur-xs) var(--ease-snap);
}
.sp-case__toggle:hover { color: var(--sp-paper); }
.sp-case__toggle[aria-expanded="true"]::after { content: " ↑"; }
.sp-case__toggle[aria-expanded="false"]::after { content: " ↓"; }
.sp-case__story {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--sp-paper-dim);
  line-height: var(--lh-body);
}
.sp-case__story[hidden] { display: none; }

/* "Show more" — collapsed cards beyond the first 3 */
.sp-case.is-collapsed { display: none; }
.sp-cases.is-expanded .sp-case.is-collapsed { display: flex; }
.sp-cases__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
  max-width: var(--maxw);
}
.sp-cases__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px;
  background: transparent;
  border: 1px solid var(--sp-paper);
  color: var(--sp-paper);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-cinema),
              color var(--dur-sm) var(--ease-cinema);
}
.sp-cases__more:hover {
  background: var(--sp-paper);
  color: var(--sp-ink);
}
.sp-cases__more-arrow {
  display: inline-block;
  font-size: 14px;
  transition: transform var(--dur-sm) var(--ease-cinema);
}
.sp-cases.is-expanded .sp-cases__more-arrow {
  transform: rotate(180deg);
}

.sp-cta-sec {
  position: relative;
  display: block;
  min-height: auto;
}
.sp-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
  max-width: min(96vw, 1600px);
  margin: 0 auto;
}
.sp-cta-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  direction: rtl;
  text-align: right;
}
.sp-cta-form { max-width: 100%; margin: 0 auto; width: 100%; }
.sp-cta-title {
  font-size: clamp(3rem, 7vw, 6rem);
  margin: 0;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.sp-cta-head .sp-lead {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.5;
}
.sp-cta-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--sp-line);
}
.sp-cta-meta dt {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--sp-paper-mute);
  margin-bottom: 6px;
}
.sp-cta-meta dd {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--sp-paper);
  margin: 0;
  font-family: var(--ff-hebrew);
}
.sp-cta-form-missing {
  padding: var(--sp-5);
  border: 1px dashed var(--sp-line);
  color: var(--sp-paper-dim);
}
@media (max-width: 980px) {
  .sp-cases__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .sp-cta-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sp-cases__grid { grid-template-columns: 1fr; }
}
.sp-cta-form .sp-lf { margin: 0; }

/* ================================================================
   CUBE — sealed states (phase 0, 1, 9): clean 3-face geometry
   Front + right + lid all visible with distinct directional lighting,
   no transparent gradients, no grain/tape, no hairline borders.
   Reads as a solid sculpted object — like a CGI cube reference.
   Other phases (2-8) keep their original cinematic look untouched.
   ================================================================ */

/* Camera angle: light from upper-left.
   - Front  : medium dark (lit from upper-left, fading down-right)
   - Right  : darkest (in shadow, opposite to light)
   - Lid    : lightest visible face (faces upward toward the light)
   - Left/back/bottom: hidden (not visible from camera)
*/

/* Solid (non-gradient) flat colors for clean reading as a single sculpted
   object. Higher contrast between faces (front medium / right dark / lid
   lightest) matches CGI cube reference proportions. Per-face box-shadow
   removed — a unified drop-shadow on .sp-cube-wrap below ties all visible
   faces together as one cohesive cube, eliminating "stuck-together panels"
   reading. */
.sp-cube-stage[data-phase="0"] .sp-cube .front,
.sp-cube-stage[data-phase="1"] .sp-cube .front,
.sp-cube-stage[data-phase="9"] .sp-cube .front {
  background: #26262c;
  border-color: transparent;
}

.sp-cube-stage[data-phase="0"] .sp-cube .right,
.sp-cube-stage[data-phase="1"] .sp-cube .right,
.sp-cube-stage[data-phase="9"] .sp-cube .right {
  background: #07070a;
  border-color: transparent;
}

.sp-cube-stage[data-phase="0"] .sp-cube .lid,
.sp-cube-stage[data-phase="1"] .sp-cube .lid,
.sp-cube-stage[data-phase="9"] .sp-cube .lid {
  background: #34343b;
  border-color: transparent;
}

/* Single unified drop-shadow on the cube wrap — wraps the whole 3D shape
   as one object instead of per-face shadows. Eliminates panel-seam look. */
.sp-cube-stage[data-phase="0"] .sp-cube-wrap,
.sp-cube-stage[data-phase="1"] .sp-cube-wrap,
.sp-cube-stage[data-phase="2"] .sp-cube-wrap,
.sp-cube-stage[data-phase="9"] .sp-cube-wrap {
  filter:
    drop-shadow(0 24px 32px rgba(0,0,0,.55))
    drop-shadow(0 48px 80px rgba(0,0,0,.35));
}

/* Hide non-visible faces during sealed states (left/back/bottom only).
   The .right wall stays visible — it's the third visible face that gives
   the cube its 3D reading (matches the user's reference). */
.sp-cube-stage[data-phase="0"] .sp-cube .left,
.sp-cube-stage[data-phase="1"] .sp-cube .left,
.sp-cube-stage[data-phase="9"] .sp-cube .left,
.sp-cube-stage[data-phase="0"] .sp-cube .back,
.sp-cube-stage[data-phase="1"] .sp-cube .back,
.sp-cube-stage[data-phase="9"] .sp-cube .back,
.sp-cube-stage[data-phase="0"] .sp-cube .bottom,
.sp-cube-stage[data-phase="1"] .sp-cube .bottom,
.sp-cube-stage[data-phase="9"] .sp-cube .bottom {
  opacity: 0;
}

/* Mute decorative overlays on visible faces during sealed states —
   the goal is a clean sculpted material, not "cardboard" with stickers. */
.sp-cube-stage[data-phase="0"] .sp-cube .face-grain,
.sp-cube-stage[data-phase="1"] .sp-cube .face-grain,
.sp-cube-stage[data-phase="9"] .sp-cube .face-grain { opacity: 0; }

.sp-cube-stage[data-phase="0"] .sp-cube .tape,
.sp-cube-stage[data-phase="1"] .sp-cube .tape,
.sp-cube-stage[data-phase="9"] .sp-cube .tape { opacity: .15; }

.sp-cube-stage[data-phase="0"] .sp-cube .lid-seam,
.sp-cube-stage[data-phase="1"] .sp-cube .lid-seam,
.sp-cube-stage[data-phase="9"] .sp-cube .lid-seam { opacity: 0; }

/* ----------------------------------------------------------------
   Phase 2 — extended anticipation, cube STILL fully sealed.
   The original phase 2 CSS (earlier in the file) lifts the lid to
   translateY(-260px) rotateX(72deg). We override that here so the cube
   stays closed for one more beat. The lid lift now begins in phase 3.
   ---------------------------------------------------------------- */

/* Slight progression in cube rotation so phase 2 feels like a step beyond
   phase 1 without breaking the sealed-cube reading. */
.sp-cube-stage[data-phase="2"] .sp-cube {
  transform: rotateX(-17deg) rotateY(-16deg);
}

/* OVERRIDE original phase 2 lid-lift — keep lid sealed at default position
   (translateY(-140px) rotateX(90deg) === closed top of the cube). */
.sp-cube-stage[data-phase="2"] .sp-cube .lid {
  transform: translateY(-140px) rotateX(90deg);
  background: #34343b;
  border-color: transparent;
  /* Keep tremble for tension — visually the lid is still "charging". */
  animation: lid-tremble .35s ease-in-out infinite;
}

/* Match phase 0/1 face lighting on the visible faces (solid flat colors,
   unified shadow handled at .sp-cube-wrap level). */
.sp-cube-stage[data-phase="2"] .sp-cube .front {
  background: #26262c;
  border-color: transparent;
}
.sp-cube-stage[data-phase="2"] .sp-cube .right {
  background: #07070a;
  border-color: transparent;
}

/* Hide the non-visible faces (mirror phase 0/1/9). */
.sp-cube-stage[data-phase="2"] .sp-cube .left,
.sp-cube-stage[data-phase="2"] .sp-cube .back,
.sp-cube-stage[data-phase="2"] .sp-cube .bottom {
  opacity: 0;
}

/* Mute decor that would clutter the clean material. */
.sp-cube-stage[data-phase="2"] .sp-cube .face-grain { opacity: 0; }
.sp-cube-stage[data-phase="2"] .sp-cube .lid-seam { opacity: 0; }
/* Tape stays visible at slightly higher opacity than phase 1 to show
   "charging" progress, but is still subtle. */
.sp-cube-stage[data-phase="2"] .sp-cube .tape { opacity: .25; }

/* ================================================================
   MOBILE — hamburger menu, responsive breakpoints, scatter scaling
   ================================================================ */

/* ============== Breakpoint: 820px — main mobile ============== */
@media (max-width: 820px) {
  .sp-topbar { padding: 14px clamp(16px, 4vw, 32px); }
  .sp-topbar .logo-img { height: 36px; max-width: 160px; }

  /* Hero on mobile: simple vertical stack (copy → cube → cta).
     Source order already matches visual order after JSX restructure. */
  .sp-hero {
    display: flex;
    flex-direction: column;
    grid-template-areas: none;
    gap: var(--sp-4);
    padding-top: 84px;
    padding-bottom: var(--sp-6);
  }
  .sp-hero .sp-cube-stage {
    height: 56svh;
    transform: scale(.66);
    transform-origin: center center;
    margin: 0 auto;
  }
  .sp-hero > .cta-row {
    margin-top: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    text-align: center;
  }
  .sp-hero > .cta-row .sp-btn {
    margin-inline: auto;
  }
  .sp-display { font-size: clamp(2.2rem, 11vw, 4rem); }
  .sp-hero p.lead { font-size: 15px; max-width: none; }
  .sp-hero .stat .num { font-size: 26px; }
  .sp-hero .stat .label { font-size: 9px; }

  /* Section meta tag — move higher so it doesn't overlap the headline
     (mobile sections have small padding-top ~48px, meta default top:48px). */
  .sp-section-meta {
    top: 14px;
    font-size: 10px;
  }

  /* === Center all major text content on mobile === */
  /* Hero */
  .sp-hero,
  .sp-hero__copy,
  .sp-hero-lead,
  .sp-headline-rich,
  .sp-hero-lead__claim,
  .sp-hero-lead__sub,
  .sp-hero-lead__years { text-align: center; }
  .sp-hero .sp-eyebrow-row { justify-content: center; }

  /* Partners */
  .sp-partners-copy,
  .sp-partners-copy h2.sp-h2-display,
  .sp-partners-copy .lead { text-align: center; }
  .sp-partner-card,
  .sp-partner-card .pc-title,
  .sp-partner-card .pc-platforms { text-align: center; }
  .sp-partner-card .pc-platforms { justify-content: center; }

  /* AIStack */
  .sp-aistack-copy,
  .sp-aistack-copy .ai-headline,
  .sp-aistack-copy .lead { text-align: center; }
  .sp-aistack-copy .ai-meta-row { justify-content: center; }
  .sp-ai-card,
  .sp-ai-card .ai-title,
  .sp-ai-card .ai-body { text-align: center; }

  /* Cases — head + each card */
  .sp-cases__head,
  .sp-cases__title { text-align: center; align-items: center; }
  .sp-case,
  .sp-case__vertical,
  .sp-case__metric,
  .sp-case__action,
  .sp-case__context,
  .sp-case__story { text-align: center; }
  .sp-case__story-wrap { display: flex; justify-content: center; }

  /* Clients */
  .sp-clients-head,
  .sp-clients-head .sp-h2-display { text-align: center; align-items: center; }

  /* CTA section + form intro */
  .sp-cta-head,
  .sp-cta-title,
  .sp-cta-head .sp-lead,
  .sp-cta-sec .sp-eyebrow { text-align: center; }
  .sp-lf__intro { text-align: center; }

  /* Footer */
  .sp-footer,
  .sp-footer .col,
  .sp-footer__contact { text-align: center; align-items: center; }
  .sp-footer__contacts { align-items: center; }
  .sp-footer__bar { text-align: center; justify-content: center; }

  /* Legal pages */
  .sp-legal__head,
  .sp-legal__title,
  .sp-legal__updated,
  .sp-legal__body section,
  .sp-legal__body h2,
  .sp-legal__body p { text-align: center; }
  .sp-legal__body ul,
  .sp-legal__body ol {
    text-align: center;
    list-style-position: inside;
    padding-inline-start: 0;
  }
  .sp-legal__contacts { padding-inline-start: 0; }

  /* Thank-you page — already centered, just ensure */
  .sp-thanks__title,
  .sp-thanks__lead { text-align: center; }

  /* Partners — keep 2 columns on mobile (2 wide × 4 rows for 8 cards) */
  .sp-partners-grid {
    gap: var(--sp-4);
  }
  .sp-partners-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-partner-card {
    padding: 22px 12px 18px;
    min-height: auto;
    border-right: 1px solid var(--sp-line-strong);
    border-bottom: 1px solid var(--sp-line-strong);
  }
  /* 2-col grid: clear right border on every 2nd; clear bottom on last row (7-8) */
  .sp-partner-card:nth-child(2n) { border-right: 0; }
  .sp-partner-card:nth-child(n+7) { border-bottom: 0; }
  .sp-partner-card .pc-title { font-size: 15px; }
  .sp-partner-card .pc-platforms { font-size: 8.5px; letter-spacing: .14em; }
  .sp-partner-card .pc-platforms li:not(:last-child)::after { padding-inline: 5px; }
  .sp-partners-copy h2.sp-h2-display {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  /* AIStack — copy ABOVE cards on mobile (DOM has cards first, so reorder via flex) */
  .sp-aistack-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }
  .sp-aistack-copy { order: 1; }
  .sp-aistack-cards { order: 2; grid-template-columns: 1fr; }
  .sp-ai-card {
    border-right: 0;
    border-bottom: 1px solid var(--sp-line-strong);
    min-height: auto;
    padding: 28px 22px;
  }
  .sp-ai-card:last-child { border-bottom: 0; }
  .sp-aistack-copy .ai-headline { font-size: clamp(1.8rem, 8vw, 3rem); }

  /* Clients — 2 columns */
  .sp-clients-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-clients-grid .cc-card:nth-child(3n) { border-right: 1px solid var(--sp-line-strong); }
  .sp-clients-grid .cc-card:nth-child(2n) { border-right: 0; }
  .sp-clients-grid .cc-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--sp-line-strong); }
  .sp-clients-grid .cc-card:nth-last-child(-n+2) { border-bottom: 0; }
  .sp-clients-head .sp-h2-display { font-size: clamp(2rem, 10vw, 3.6rem); }

  /* Cases */
  .sp-cases { padding-inline: clamp(16px, 4vw, 40px); }
  .sp-cases__title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .sp-case { padding: 24px; }
  .sp-case__metric { font-size: clamp(1.3rem, 5vw, 2rem); }

  /* CTA */
  .sp-cta-sec { padding-inline: clamp(16px, 4vw, 40px); }
  .sp-cta-grid { gap: var(--sp-5); }
  .sp-cta-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .sp-cta-meta { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

  /* Footer */
  .sp-footer { padding: var(--sp-7) clamp(16px, 5vw, 40px) var(--sp-4); }
  .sp-footer .col h4 { font-size: 18px; }
  .sp-footer__contact-value { font-size: 17px; }
  .sp-footer__bar { font-size: 11px; }

  /* Hide Thread overlay on mobile */
  .sp-thread-layer { display: none; }

  /* Scatter animations — reduce fly distance so blocks/letters don't fly off-screen */
  .sp-asm-block {
    transform: translate(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .5)) scale(var(--sc, 1));
  }
  .sp-asm-block.is-asm {
    transform: translate(0, 0) scale(1);
  }
  .sp-asm[data-asm-done="1"] .sp-asm-l {
    transform: translate(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .5));
  }
  .sp-asm[data-asm-done="1"].is-asm .sp-asm-l {
    transform: translate(0, 0);
  }
}

/* ============== Breakpoint: 520px — small phones ============== */
@media (max-width: 520px) {
  :root { --section-pad: clamp(36px, 6vh, 72px); }

  .sp-hero .sp-cube-stage { transform: scale(.48); margin-top: -64px; }
  .sp-display { font-size: clamp(2rem, 12vw, 3.4rem); }

  /* Clients fully single-column */
  .sp-clients-grid { grid-template-columns: 1fr; }
  .sp-clients-grid .cc-card { border-right: 0; border-bottom: 1px solid var(--sp-line-strong); }
  .sp-clients-grid .cc-card:last-child { border-bottom: 0; }
  .cc-card { aspect-ratio: 1.3 / 1; }

  /* CTA-meta single column on tiny screens */
  .sp-cta-meta { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ==========================================================================
   Thank-you page (slug: thank-you-page) — confirmation after form submit
   ========================================================================== */
.sp-thanks {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 12vh, 140px) clamp(20px, 4vw, 64px);
}
.sp-thanks__sec {
  position: relative;
  width: min(720px, 100%);
  display: grid;
  gap: var(--sp-6);
  text-align: center;
}
.sp-thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}
.sp-thanks__mark {
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sp-coral);
  filter: drop-shadow(0 0 24px var(--sp-coral-glow, rgba(255,107,71,.4)));
  animation: sp-thanks-pop .8s var(--ease-cinema) both;
}
.sp-thanks__check {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sp-thanks-draw .9s .3s var(--ease-cinema) forwards;
}
@keyframes sp-thanks-pop {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sp-thanks-draw {
  to { stroke-dashoffset: 0; }
}
.sp-thanks__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--sp-paper);
}
.sp-thanks__lead {
  font-size: var(--fs-lead);
  color: var(--sp-paper-dim);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}
.sp-thanks__cta {
  margin-top: var(--sp-3);
}
.sp-thanks__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--sp-paper);
  background: transparent;
  border: 1px solid var(--sp-paper);
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-cinema), color var(--dur-sm) var(--ease-cinema);
}
.sp-thanks__btn:hover {
  background: var(--sp-paper);
  color: var(--sp-ink);
}
.sp-thanks__btn-arrow {
  transition: transform var(--dur-sm) var(--ease-cinema);
}
.sp-thanks__btn:hover .sp-thanks__btn-arrow {
  transform: translateX(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .sp-thanks__mark,
  .sp-thanks__check { animation: none; }
  .sp-thanks__check { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Legal pages — privacy policy / terms of use
   Shared styles for long-form Hebrew legal content.
   ========================================================================== */
.sp-legal {
  padding: clamp(64px, 10vh, 120px) clamp(20px, 4vw, 64px);
  display: flex;
  justify-content: center;
}
.sp-legal__article {
  width: min(780px, 100%);
  color: var(--sp-paper);
}
.sp-legal__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(28px, 4vh, 48px);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--sp-line);
}
.sp-legal__head .sp-section-meta {
  align-self: flex-start;
}
.sp-legal__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--sp-paper);
}
.sp-legal__updated {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-paper-mute);
  margin: 0;
}
.sp-legal__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sp-legal__body section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Override the global `section { min-height: 100svh; padding: var(--sp-8) ... }`
     base rule — that's intended for full-screen landing sections, not text sub-blocks. */
  min-height: 0;
  padding: 0;
  position: static;
}
.sp-legal__body h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: -.005em;
  margin: 0 0 4px;
  color: var(--sp-paper);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sp-line);
}
.sp-legal__body p {
  font-family: var(--ff-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sp-paper-dim);
  margin: 0;
}
.sp-legal__body p strong {
  color: var(--sp-paper);
  font-weight: 600;
}
.sp-legal__body ul,
.sp-legal__body ol {
  font-family: var(--ff-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sp-paper-dim);
  margin: 0;
  padding: 0;
  padding-inline-start: 22px;
  padding-inline-end: 0;
}
.sp-legal__body li {
  margin-bottom: 4px;
}
.sp-legal__body li::marker {
  color: var(--sp-coral);
}
.sp-legal__body a {
  color: var(--sp-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sp-coral);
  transition: color var(--dur-xs);
}
.sp-legal__body a:hover {
  color: var(--sp-coral);
}
.sp-legal__contacts {
  list-style: none !important;
  padding: 0 !important;
}
.sp-legal__contacts li {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .08em;
}
.sp-legal__cta {
  margin-top: clamp(28px, 4vh, 48px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sp-line);
  display: flex;
  justify-content: center;
}
.sp-legal__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--sp-paper);
  background: transparent;
  border: 1px solid var(--sp-paper);
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-cinema), color var(--dur-sm) var(--ease-cinema);
}
.sp-legal__btn:hover {
  background: var(--sp-paper);
  color: var(--sp-ink);
}
.sp-legal__btn-arrow {
  transition: transform var(--dur-sm) var(--ease-cinema);
}
.sp-legal__btn:hover .sp-legal__btn-arrow {
  transform: translateX(-6px);
}
@media (max-width: 720px) {
  .sp-legal__body p,
  .sp-legal__body ul,
  .sp-legal__body ol {
    font-size: 14.5px;
  }
}

/* sp-site-pro-blocks: the custom cursor hides the native one only while it actually runs
   (pointer:fine + JS on). Everywhere else the browser cursor is restored (accessibility). */
html:not(.sp-cursor-on) body,
html:not(.sp-cursor-on) body * { cursor: revert !important; }

/* sp-site-pro-blocks: buttons are links here (multi-page site), so beat the Kit link colour
   (.elementor-kit-N a) with one extra element in the selector. */
body a.sp-btn { color: var(--sp-ink); text-decoration: none; }
body a.sp-btn:hover, body a.sp-btn:focus-visible { color: var(--sp-coral); }
/* Kit "button" defaults (.elementor-kit-N button) are meant for Elementor forms; design buttons
   (sp-* classes) keep the original transparent reset, and button.sp-btn keeps its paper fill. */
body button[class*="sp-"] { background-color: transparent; color: inherit; border-radius: 0; }
body button.sp-btn { background-color: var(--sp-paper); color: var(--sp-ink); border-radius: var(--r-1, 2px); }
body button.sp-btn:hover { background-color: transparent; color: var(--sp-coral); }
/* Logged-in editors: keep the fixed topbar below the WordPress admin bar. */
body.admin-bar .sp-topbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sp-topbar { top: 46px; } }

.sp-topbar .right .sp-btn { white-space: nowrap; }