@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;0,900;1,700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   HD DIGITAL SOLUTIONS — style.css (COMPREHENSIVE MASTER BUILD)
   ═══════════════════════════════════════════════════════════════ */

/* Global font override — Poppins across the entire site */
*, *::before, *::after { font-family: 'Poppins', sans-serif !important; }

:root {
  --dark:      #060604;
  --white:     #FEFEFE;
  --lilac-bg:  #EEEAEF;
  --plum:      #60336A;
  --dusty:     #6D4D73;
  --orchid:    #AF8FB8;
  --ease-k:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-w:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-s:    cubic-bezier(0.76, 0, 0.24, 1);
  --grid:         rgba(109, 77, 115, 0.04);
  --grid-reveal:  rgba(109, 77, 115, 0.18);

  /* ── HDDS COLOR PALETTE (image_82d4bf.jpg) ──────────────────── */
  --hdds-main-text:   #E42785;
  --hdds-second-text: #C14CFA;
  --hdds-third-text:  #F6A04C;
  --hdds-other-text:  #2C2828;
  --hdds-main-bg:     #F6DFD9;

  /* HIGH-END SCI-FI NEON EMISSION MATRIX */
  --neon-glow: 0 0 10px #ff00bb, 0 0 25px #ff00bb, 0 0 50px rgba(255, 0, 187, 0.4);
}

/* ── RESET, BASE MECHANICS ────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* JS drives the snap glide via rAF; native smooth-scroll fights it and breaks
     the idle-rest triggers, so keep the browser's own scrolling instantaneous. */
  scroll-behavior: auto;
  overflow-x: hidden;
}
body {
  /* Legacy static grid removed — the interactive #grid-spotlight now owns the grid */
  background: var(--hdds-main-bg);
  color: var(--white);
  font-family: 'Instrument Sans', Inter, system-ui, sans-serif;
  overflow-x: hidden;
  cursor: none;
}
img, canvas { display: block; }

/* Global Section Size Token */
#hero,
#marquee-section {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* ── CUSTOM KINETIC CURSOR SYSTEM ───────────────────────────── */
#cursor-ring {
  position: fixed; left: 0; top: 0; width: 36px; height: 36px;
  will-change: transform;
  border: 1px solid var(--orchid); border-radius: 50%;
  pointer-events: none; z-index: 9990;
  transform: translate(-50%, -50%);
  transition: width .45s var(--ease-k), height .45s var(--ease-k),
              border-color .3s ease, background-color .3s ease,
              border-radius .4s var(--ease-k);
  mix-blend-mode: exclusion;
}
/* PERF: while the 3D layer is live, drop the ring's blend mode — blending
   against an animating WebGL canvas forces an expensive compositor blend pass
   every frame. Over the dark showcase the exclusion look is negligible anyway. */
body.threed-active #cursor-ring { mix-blend-mode: normal; }
#cursor-dot {
  position: fixed; left: 0; top: 0; width: 5px; height: 5px;
  will-change: transform;
  background: var(--orchid); border-radius: 50%;
  pointer-events: none; z-index: 9991;
  transform: translate(-50%, -50%);
}
body.cursor-hover #cursor-ring {
  width: 60px; height: 60px;
  border-color: var(--white);
  background: rgba(175, 143, 184, .08);
}
body.cursor-service #cursor-ring {
  width: 76px; height: 76px; border-radius: 4px;
  border-color: var(--plum);
  background: rgba(96, 51, 106, .08);
}

/* ── PRELOADER: removed for now — video/Lottie loader planned as a finishing
   touch (markup + engine also removed from index.html / script.js). ── */

/* ── INTERACTIVE GRID SPOTLIGHT (full-viewport) ──────────── */
#grid-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;            /* behind all text / canvas, above the body bg */
  pointer-events: none;  /* never blocks clicks or canvas interaction */
}

/* Brighter grid lines revealed under cursor.
   PERF: instead of re-painting a full-viewport mask every mouse frame, the
   spotlight is a fixed 600px tile (exactly the old 300px-radius circle) moved
   with a compositor-only transform. The grid pattern inside counter-shifts via
   background-position so its 80px lines stay perfectly screen-aligned — the
   per-frame repaint shrinks from the whole viewport to one 600px square. */
#grid-spotlight::before {
  content: '';
  position: fixed;
  left: 0; top: 0;
  width: 600px; height: 600px;
  background-image:
    linear-gradient(var(--grid-reveal) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-reveal) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position:
    calc(300px - var(--mouse-x, -9999px)) calc(300px - var(--mouse-y, -9999px));
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    circle 300px at center,
    black 0%, rgba(0,0,0,0.5) 50%, transparent 100%
  );
  mask-image: radial-gradient(
    circle 300px at center,
    black 0%, rgba(0,0,0,0.5) 50%, transparent 100%
  );
  transform: translate3d(
    calc(var(--mouse-x, -9999px) - 300px),
    calc(var(--mouse-y, -9999px) - 300px), 0);
  will-change: transform;
}

/* Feathered glow halo under cursor — same trick, transform-only (no repaint). */
#grid-spotlight::after {
  content: '';
  position: fixed;
  left: 0; top: 0;
  width: 600px; height: 600px;
  background: radial-gradient(
    circle 300px at center,
    rgba(109, 77, 115, 0.08) 0%,
    rgba(109, 77, 115, 0.03) 40%,
    transparent 100%
  );
  pointer-events: none;
  transform: translate3d(
    calc(var(--mouse-x, -9999px) - 300px),
    calc(var(--mouse-y, -9999px) - 300px), 0);
  will-change: transform;
}
/* PERF: applied by anim-idle.js while an animated element is offscreen —
   freezes its infinite CSS animations (self, subtree, pseudos) in place. */
.anim-idle,
.anim-idle *,
.anim-idle::before,
.anim-idle::after,
.anim-idle *::before,
.anim-idle *::after {
  animation-play-state: paused !important;
}

body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9000; opacity: .45;
}

/* ── ADAPTIVE GLOBAL NAVIGATION STRIP ───────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.75rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .6s var(--ease-k), border-bottom .5s ease, padding .4s var(--ease-k);
}

/* Dynamic Scroll States */
#main-nav.scrolled {
  /* PERF: no backdrop blur — at 90%+ black it was invisible anyway, yet it
     re-blurred the full-width strip every frame anything moved beneath it
     (the whole 3D sequence slides under the nav). Opacity bumped to cover. */
  background: rgba(6, 6, 4, 0.96);
  border-bottom: .5px solid var(--grid);
  padding: 1.25rem 2.5rem;
}
#main-nav.scrolled.on-light {
  background: rgba(254, 254, 254, 0.9);
  border-bottom: .5px solid rgba(109, 77, 115, 0.15);
}
/* From RESULTS ("RESULTS THAT SPEAK") down: thin the dark bar so it reads more
   transparent over that stretch (white text still legible over the dark section).
   The on-pastel rule below is more specific, so it still wins over before-after. */
#main-nav.scrolled.on-dim {
  background: transparent;
  border-bottom-color: transparent;
}
/* Over the pastel BEFORE & AFTER band: keep the landing's transparent nav
   (dark text from .on-light, no white bar / border). */
#main-nav.scrolled.on-light.on-pastel {
  background: transparent;
  border-bottom-color: transparent;
}

/* Nav Typography Tokens */
.nav-brand {
  font-family: 'Space Mono', monospace;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  transition: color .4s ease;
}
.nav-brand em { font-style: normal; color: var(--orchid); transition: color .4s ease; }

.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-status-wrap { display: flex; align-items: center; gap: .75rem; }
.nav-dot {
  width: 6px; height: 6px; background: var(--orchid);
  border-radius: 50%; animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(175, 143, 184, 0.7); }
  50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(175, 143, 184, 0); }
}
.nav-status {
  font-family: 'Space Mono', monospace;
  font-size: .62rem; letter-spacing: .15em; color: var(--orchid); opacity: .75;
  transition: color .4s ease;
}

.nav-cta {
  font-family: 'Space Mono', monospace;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--white); text-decoration: none; padding: .5rem 1.1rem;
  border: .5px solid rgba(175, 143, 184, .35);
  transition: background .4s var(--ease-k), border-color .4s ease, color .3s ease;
}
.nav-cta:hover { background: var(--plum) !important; border-color: var(--plum) !important; color: var(--white) !important; }

/* Inverted Nav Over Light Hero Backdrop */
#main-nav.on-light .nav-brand { color: var(--hdds-other-text); }
#main-nav.on-light .nav-brand em { color: var(--hdds-main-text); }
#main-nav.on-light .nav-status { color: var(--hdds-second-text); }
#main-nav.on-light .nav-cta { color: var(--hdds-other-text); border-color: rgba(44, 40, 40, 0.35); }

/* ── IMMERSIVE FULL-SCREEN HERO LAYER ───────────────────────── */
#hero {
  position: relative;
  z-index: 900;   /* above all content sections (below the nav @1000) so the fixed
                     foreground icons are never clipped by a section scrolling over them */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;                 /* occupy the absolute full screen on load */
  width: 100%;
  height: auto;
  padding: 0 2.5rem;
  /* transparent so the fixed #grid-spotlight shows through on the landing fold
     (page base colour comes from body { background: var(--hdds-main-bg) }) */
  background-color: transparent !important;
  overflow: visible !important;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 100vh;                 /* fills the full-screen fold, keeps content centred */
  position: relative;
  width: 100%;
  max-width: 1000px;
  z-index: 10;
}

/* ── FLOATING 3D ICON ASSETS ───────────────────────────────── */
.nd-floating-assets {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  /* perspective lives on .nd-icon (not here) so the fixed foreground pair
     anchors to the viewport corners instead of this headline box */
}

.nd-icon {
  position: absolute;
  width: 180px; height: 180px;
  overflow: visible;
  background: transparent;
  pointer-events: none;   /* purely decorative — never intercept clicks now they sit on top */
  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.12s linear;   /* smooth the per-frame scroll parallax */
  will-change: transform;
}
/* Outer wrapper = scroll-parallax layer; inner img = idle float + depth. */
.nd-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;   /* separate per-icon PNGs → scales freely, never clips */
  background: transparent;
  will-change: transform, filter;
}

/* ── FOREGROUND pair (Camera + Chat): relocated down + outward into the lower
      side areas, scaled up and heavily blurred → ultra-close to the lens ──── */
.nd-icon-camera {
  position: fixed; top: auto; bottom: -80px; left: -185px; right: auto; z-index: 5;   /* seated in bottom-left corner, cropped off-edge */
  transform: translate(calc(var(--sy, 0) * -0.9px), calc(var(--sy, 0) * 1.4px));
}
.nd-icon-chat {
  position: fixed; top: auto; bottom: -80px; right: -185px; left: auto; z-index: 5;   /* seated in bottom-right corner, cropped off-edge */
  transform: translate(calc(var(--sy, 0) *  0.9px), calc(var(--sy, 0) * 1.4px));
}
.nd-icon-camera img,
.nd-icon-chat img { scale: 2.3; filter: blur(4px); opacity: 0.8; }

/* ── PASTEL-BAND ICONS ────────────────────────────────────────────────────
   The landing's blurred camera/chat pair reprised over the BEFORE & AFTER
   pastel band. Same fixed corners + blur/scale, but their own layer that fades
   in (via .live, toggled with the nav-transparent trigger) and idles gently. */
.pastel-icons {
  position: fixed; inset: 0; z-index: 7; pointer-events: none;
}
.pastel-icon {
  position: fixed; width: 180px; height: 180px; pointer-events: none;
  opacity: 0;
  /* Entrance = the REVERSE of the landing's scroll-exit: on the landing the pair
     slid DOWN + OUTWARD as you scrolled away, so here they slide back UP + INWARD
     from that same off-screen exit offset into their resting spot. */
  transition: transform 0.95s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.6s ease;
}
.pastel-icon img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  scale: 2.3; filter: blur(3.5px); opacity: 1;
}
/* Resting position (pulled in toward centre) + the off-screen exit offset each
   card starts at (down-left / down-right, mirroring the landing exit vectors). */
.pastel-icon-camera { bottom: -45px; left: -50px;  transform: translate(-70px, 95px); }
.pastel-icon-chat   { bottom: -45px; right: -50px; transform: translate(70px, 95px); }
.pastel-icons.live .pastel-icon { opacity: 1; }
.pastel-icons.live .pastel-icon-camera,
.pastel-icons.live .pastel-icon-chat { transform: translate(0, 0); }
.pastel-icon-camera img { animation: pastel-float-a 6.6s ease-in-out infinite; }
.pastel-icon-chat   img { animation: pastel-float-b 7.4s ease-in-out infinite 0.8s; }
@keyframes pastel-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 4px -10px; } }
@keyframes pastel-float-b { 0%, 100% { translate: 0 0; } 50% { translate: -4px -12px; } }
@media (max-width: 768px) {
  .pastel-icon { width: 130px; height: 130px; }
  .pastel-icon-camera { bottom: -40px; left: -60px;  transform: translate(-55px, 75px); }
  .pastel-icon-chat   { bottom: -40px; right: -60px; transform: translate(55px, 75px); }
  .pastel-icons.live .pastel-icon-camera,
  .pastel-icons.live .pastel-icon-chat { transform: translate(0, 0); }
  .pastel-icon img { scale: 1.85; filter: blur(3px); }
}

/* ── BACKGROUND pair (Heart + Video): crisp, native, anchoring the frame and
      drifting gently upward as the page scrolls ─────────────────────────── */
.nd-icon-heart {
  bottom: -50px; left: -130px; top: auto; z-index: 1;                /* bottom-left  */
  transform: translate(calc(var(--sy, 0) * -0.15px), calc(var(--sy, 0) * -0.35px));
}
.nd-icon-video {
  bottom: -50px; right: -130px; top: auto; left: auto; z-index: 1;   /* bottom-right */
  transform: translate(calc(var(--sy, 0) *  0.15px), calc(var(--sy, 0) * -0.35px));
}

/* ── Independent idle 3D float keyframes ─────────────────── */
@keyframes nd-float-1 {
  0%   { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
  25%  { transform: translateY(-14px) rotateX(4deg)   rotateY(-6deg);  }
  50%  { transform: translateY(-6px)  rotateX(-3deg)  rotateY(4deg);   }
  75%  { transform: translateY(-18px) rotateX(5deg)   rotateY(-3deg);  }
  100% { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
}
@keyframes nd-float-2 {
  0%   { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
  30%  { transform: translateY(-12px) rotateX(-5deg)  rotateY(5deg);   }
  60%  { transform: translateY(-20px) rotateX(3deg)   rotateY(-4deg);  }
  100% { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
}
@keyframes nd-float-3 {
  0%   { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
  35%  { transform: translateY(-16px) rotateX(6deg)   rotateY(5deg);   }
  65%  { transform: translateY(-8px)  rotateX(-4deg)  rotateY(-6deg);  }
  100% { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
}
@keyframes nd-float-4 {
  0%   { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
  20%  { transform: translateY(-10px) rotateX(-3deg)  rotateY(-5deg);  }
  55%  { transform: translateY(-22px) rotateX(5deg)   rotateY(4deg);   }
  80%  { transform: translateY(-8px)  rotateX(-2deg)  rotateY(-3deg);  }
  100% { transform: translateY(0)    rotateX(0deg)   rotateY(0deg);   }
}

.nd-icon-camera img { animation: nd-float-1 6s   ease-in-out infinite; }
.nd-icon-chat   img { animation: nd-float-2 7s   ease-in-out infinite 0.8s; }
.nd-icon-heart  img { animation: nd-float-3 7.5s ease-in-out infinite 1.6s; }
.nd-icon-video  img { animation: nd-float-4 6.5s ease-in-out infinite 2.4s; }

/* ── Responsive scaling ──────────────────────────────────── */
@media (max-width: 1100px) {
  .nd-icon { width: 150px; height: 150px; }
  .nd-icon-camera { bottom: -55px; left: -185px; right: auto; }
  .nd-icon-chat   { bottom: -55px; right: -185px; left: auto; }
  .nd-icon-heart  { bottom: -40px; left: -95px; }
  .nd-icon-video  { bottom: -40px; right: -95px; }
  .nd-icon-camera img,
  .nd-icon-chat img { scale: 1.9; filter: blur(3.5px); }
}
@media (max-width: 768px) {
  .nd-icon { width: 110px; height: 110px; }
  .nd-icon-camera { bottom: -35px; left: -185px; right: auto; }
  .nd-icon-chat   { bottom: -35px; right: -185px; left: auto; }
  .nd-icon-heart  { bottom: -35px; left: -45px; }
  .nd-icon-video  { bottom: -35px; right: -45px; }
  .nd-icon-camera img,
  .nd-icon-chat img { scale: 1.65; filter: blur(3px); }
}

.hero-headline {
  position: relative;
  font-weight: 900; font-style: normal;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  line-height: .95; letter-spacing: -.03em;
  text-transform: lowercase;
  text-align: center;
  color: #E42785 !important;   /* "turning your" */
}
.hero-headline span { display: inline-block; will-change: transform, opacity; }
.hl-outline { color: #C14CFA; -webkit-text-stroke: 0; }       /* "vision" solid fill */
.hl-plum     { color: #F6A04C; }                              /* "conversion." */
.hl-indent  { display: block; padding-left: 0; }
.hl-indent2 { display: block; padding-left: 0; color: #C14CFA; }  /* "into" */
.hl-block   { display: block; }

/* ── 3-ROW HEADING (explicit sizes / weights / transforms) ──── */
.hero-headline .hl-row { display: block; line-height: .86; }
.hl-r1 {
  color: #E42785 !important; text-transform: lowercase; font-weight: 300;
  font-size: clamp(3.7rem, 7.3vw, 5.6rem);
  line-height: .8;
  margin-bottom: -.08em;   /* tuck tightly over "your vision" */
  letter-spacing: .01em;
}
.hl-r2 {
  color: #C14CFA !important; font-weight: 700;
  /* Same lowercase look as "conversion", just larger */
  font-size: clamp(5.5rem, 13.5vw, 9.5rem);
  text-transform: lowercase !important;
  font-variant: none !important;
  font-variant-caps: normal !important;
  letter-spacing: -.01em;
}
.row-2 {
  text-transform: lowercase !important;
  font-variant: none !important;
  font-variant-caps: normal !important;
}
.hl-r3 {
  text-transform: lowercase;
  font-size: clamp(3.2rem, 7.5vw, 5.6rem);
  letter-spacing: -.03em;   /* lock width from 'o' in "your" to 'o' in "vision" */
}
.hl-into { color: #F6A04C !important; font-weight: 300; }
.hl-conv { color: #F6A04C !important; font-weight: 700; }

/* ── ORANGE DOT + HANGING 3D "hd" TAG ───────────────────────── */
.dot {
  position: relative; display: inline-block;
  color: #F6A04C !important;
}
/* Hanging assembly (string + tag) — <i> elements dodge the JS span stagger */
.hd-hang {
  position: absolute; top: 84%; left: 58%;   /* tied just off the dot's bottom-right */
  /* whole assembly (string + tag) tilted 45° to the left, pivoting at the dot */
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: top center;
  display: flex; flex-direction: column; align-items: center;
  perspective: 1000px;
  pointer-events: none;
  font-style: normal;
}
.hd-string {
  display: block; width: 30px; height: 34px; overflow: visible; margin-bottom: -1px;
  /* the string flexes from its anchor at the dot, in phase with the tag's swing */
  transform-origin: top center;
  animation: string-sway 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
.hd-string path {
  fill: none; stroke: #2C2828; stroke-width: 1.4; stroke-linecap: round;
}
.hd-tag {
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 66px;                  /* portrait cloth-tag body */
  color: #FEFEFE;
  /* portrait tag: sharp point at top center where the string ties on */
  clip-path: polygon(50% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  background: #C14CFA radial-gradient(circle at 50% 6%, rgba(44,40,40,.6) 0 1.6px, transparent 2.4px);
  box-shadow: 0 18px 38px rgba(44, 40, 40, .4), 0 6px 14px rgba(193, 76, 250, .4);
  /* pivot at the top-center apex, continuous lifelike sway (leaning right) */
  transform-origin: top center;
  transform-style: preserve-3d;
  animation: tag-dangle 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}
.hd-text {                                     /* text rotated 90° like a cloth label */
  display: inline-block;
  transform: rotate(90deg);
  white-space: nowrap;
  font-style: normal; font-weight: 700;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; line-height: 1;
}
@keyframes tag-dangle {
  0%   { transform: rotateZ(-8deg) rotateY(18deg)  rotateX(8deg); }
  25%  { transform: rotateZ(3deg)  rotateY(6deg)   rotateX(6deg); }
  50%  { transform: rotateZ(8deg)  rotateY(-6deg)  rotateX(5deg); }
  75%  { transform: rotateZ(0deg)  rotateY(8deg)   rotateX(7deg); }
  100% { transform: rotateZ(-8deg) rotateY(18deg)  rotateX(8deg); }
}
/* string bends in phase with the tag (same timing) so the line reacts with it */
@keyframes string-sway {
  0%   { transform: rotateZ(-4deg); }
  25%  { transform: rotateZ(1.5deg); }
  50%  { transform: rotateZ(4deg); }
  75%  { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-4deg); }
}

.hero-body {
  max-width: 560px; font-size: .95rem; line-height: 1.8; font-weight: 400;
  text-align: center;
  margin: 0 auto;
  color: #2C2828 !important;
  border-top: .5px solid rgba(109, 77, 115, 0.15); padding-top: 1.5rem;
}
.hero-cta-row { display: flex; align-items: center; gap: 2.5rem; }
.hero-link {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--plum) !important; text-decoration: none;
  position: relative; padding-bottom: .3rem;
}
.hero-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0%; height: .5px; background: var(--plum);
  transition: width .6s var(--ease-k);
}
.hero-link:hover::after { width: 100%; }
.link-arrow { display: inline-block; transition: transform .5s var(--ease-k); }
.hero-link:hover .link-arrow { transform: translateX(5px); }
.hero-coord {
  font-family: 'Space Mono', monospace;
  font-size: .57rem; letter-spacing: .2em; color: rgba(109, 77, 115, .4);
}

.canvas-label {
  position: absolute; bottom: 2.5rem; right: 0;
  font-family: 'Space Mono', monospace;
  font-size: .54rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(109, 77, 115, .4);
  transition: opacity .4s ease;
}
.hero-rule {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 77, 115, .15) 40%, rgba(96, 51, 106, .25) 60%, transparent);
  transition: opacity .4s ease;
}

/* ── MARQUEE RIBBON ─────────────────────────────────────────── */
#marquee-section {
  border-top: .5px solid var(--grid); border-bottom: .5px solid var(--grid);
  background: #ffffff;
  z-index: 0;
  display: flex; align-items: center; height: auto !important; min-height: 80px;
  position: relative;
  overflow: hidden;                 /* clip the ribbon so it never reflows the fold */
  overflow-anchor: none;            /* stop scroll-anchoring nudges during snap */
}
/* Keep the white bar + Trusted By rock-steady while the JS snap animates. */
#marquee-section, .trust-banner-section, .showcase-section { overflow-anchor: none; }
.mq-track { display: flex; width: max-content; animation: mq-run 90s linear infinite; }
.mq-track:hover { animation-play-state: paused; }
@keyframes mq-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mq-chunk { display: flex; align-items: center; gap: 1.75rem; padding: 0 1.75rem; white-space: nowrap; }
.mq-text {
  font-family: 'Space Mono', monospace;
  font-size: .67rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hdds-main-text);                        /* #E42785 brand pink */
}
.mq-slash { font-family: 'Space Mono', monospace; font-size: .7rem; color: rgba(228, 39, 133, .5); letter-spacing: .05em; }

/* ── TRUST BANNER ─────────────────────────────────────────────── */
.trust-banner-section {
  background: var(--dark);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
  padding: 4rem 0 6rem;              /* pulled the label + logos slightly up */
  text-align: center;
  position: relative;
  z-index: 6;
}
.trust-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.trust-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.3);
  display: block;
  margin-bottom: 3rem;
}
.trust-logos {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  perspective: 1000px;
}
.trust-logo.glass-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.1em;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);   /* PERF: blur dropped — invisible over the flat dark band, re-blurred on every hover tilt */
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 24px;
  border-radius: 4px;
  display: inline-block;
  will-change: transform, box-shadow;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.trust-logo.glass-tag:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

/* ── SHOWCASE: Lottie build animation + 3D staging ground ──────────────
   A fixed 100vh section. Snapping the Trusted By boundary to top:0 lands the
   viewport exactly here, so a stable, non-scrolling height prevents the layout
   shift and clipping that a variable/scroller height was causing. */
.showcase-section {
  width: 100%;
  height: 100vh;
  height: 100dvh;                  /* mobile-stable — no address-bar reflow jumps */
  position: relative;
  z-index: 6;
  background: #060604;              /* seams flush with the Trusted By band above */
  overflow: hidden;                /* the build/3D never bleed into adjacent zones */
}

/* The 100vh stage: dark gradient + Lottie + 3D all stacked in one grid cell. */
.showcase-stage {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #060604;
  /* Bottom fades to a uniform #060604 across the full width so the seam into
     #capabilities (which starts at #060604) is perfectly continuous. */
  background-image:
    linear-gradient(180deg, transparent 66%, #060604 100%),
    radial-gradient(circle at 70% 125%, #200831 0%, #100319 35%, #08010e 60%, #060604 85%);
  /* GPU-friendly + 3D-ready: own compositor layer, isolate paints, hold depth */
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
  contain: layout paint;
  z-index: 1;
}

/* Frame-sequence canvas: transparent frames, spring "snap" reveal on decode. */
.showcase-canvas {
  grid-area: 1 / 1;                 /* stack all stage layers in one cell */
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  z-index: 2;                       /* above gradient, below the 3D pop-up */
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.22, 0.9, 0.24, 1.18);
  will-change: opacity, transform;
}
.showcase-canvas.is-ready { opacity: 1; transform: scale(1); }

/* 3D staging ground: robust rules so a heavy Three.js payload drops in cleanly
   without clipping, z-fighting, or layout shift. */
.interactive-3d-stage__layer,
#threejs-container {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 3;                       /* the interactive model sits on top */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;            /* flip to auto once the 3D model is live */
  contain: layout paint size;
}

/* Loader — hidden once the opening frames reveal (JS adds .sfa-ready to <html>). */
.showcase-loader {
  grid-area: 1 / 1;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.sfa-ready .showcase-loader { opacity: 0; }
.showcase-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--hdds-main-text);
  border-radius: 50%;
  animation: showcase-spin 0.9s linear infinite;
}
@keyframes showcase-spin { to { transform: rotate(360deg); } }

/* Respect reduced-motion: static frame, no spring/spin. */
@media (prefers-reduced-motion: reduce) {
  .showcase-canvas { transform: none; transition: opacity 0.3s ease; }
  .showcase-canvas.is-ready { transform: none; }
  .showcase-spinner { animation: none; }
}

/* ── PERSISTENT FIXED 3D LAYER (shared: showcase center -> capabilities left) ── */
#logo3d-fixed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 40;                       /* above sections, below the nav (1000) */
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}
/* Override the old grid/containment staging rules — inside the fixed wrapper the
   canvas host must be an explicit full-viewport box (size containment collapsed
   it to 0×0, which initialised the WebGL canvas at 1×1 = invisible). */
#logo3d-fixed #threejs-container {
  grid-area: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;                        /* render on top of adjacent backgrounds */
  contain: none;
  transform-style: flat;
}

/* ── HALO BACKDROP (inside the fixed layer, under the canvas) ──────────────
   Center pop-out: warm brand-pink bloom radiating behind the chrome.
   Dock transit: the pink dissolves while a purple ring-bloom condenses onto
   the docked position — both ride the layer's dock/exit transforms, and the
   whole thing is compositor-only (opacity/transform driven by --dock). */
#logo3d-halo {
  position: absolute;
  inset: 0;
  z-index: 5;                        /* under the canvas (10) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#logo3d-fixed.halo-on #logo3d-halo { opacity: 1; }
/* Geometry note: the 3D pivot rests at BASELINE_Y -0.35 world units and the
   dock nudges it +0.28 y / -0.18 x. With the camera at z=6 / fov 35°, one world
   unit ≈ 26.5vh on screen — so the model center sits 9.3vh below the viewport
   center at rest, easing to (−4.8vh x, +1.9vh y) when docked. The halo pieces
   track that exact path via --dock so they stay centered on the model. */
#logo3d-halo::before {               /* pink center bloom (pop-out state) */
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 9.3vh);
  width: min(58vw, 840px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(228, 39, 133, 0.26),
    rgba(193, 76, 250, 0.12) 42%,
    transparent 68%);
  filter: blur(8px);
  opacity: calc(1 - var(--dock, 0));
  will-change: opacity;
}
#logo3d-halo::after {                /* purple glow bloom (docked state) */
  content: "";
  position: absolute;
  left: calc(50% - 4.8vh * var(--dock, 0));
  top: calc(50% + 9.3vh - 7.4vh * var(--dock, 0));
  width: min(34vw, 500px);
  aspect-ratio: 1;
  /* No border/border-radius: the 1px ring read as an obvious hard circle behind
     the model. Kept the soft purple radial bloom (the "purple effect") only. */
  transform: translate(-50%, -50%) scale(calc(1.35 - 0.35 * var(--dock, 0)));
  background: radial-gradient(circle,
    rgba(124, 58, 237, 0.28),
    rgba(124, 58, 237, 0.10) 55%,
    transparent 72%);
  filter: blur(6px);
  opacity: var(--dock, 0);
  will-change: transform, opacity;
}

/* ── CAPABILITIES: dark vertical-striped purple glow, two-column ───────────── */
.cap-section {
  position: relative;
  z-index: 6;                        /* sit above the global cream body + grid wrapper */
  min-height: 100vh;
  overflow: hidden;
  /* Solid dark base FIRST so the light cream body/grid can never show through,
     then the plum glow + faint vertical striping on top. All base stops opaque. */
  background-color: #0a0110;
  background-image:
    radial-gradient(120% 85% at 22% -10%, rgba(140, 60, 200, 0.28), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #060604 0%, #120420 26%, #1c0733 62%, #0a0110 100%);
}
/* Slowly drifting ambient spotlight glow — premium depth behind the layout. */
.cap-section::before {
  content: "";
  position: absolute;
  inset: -12% -12% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 30% 44%, rgba(196, 76, 250, 0.22), transparent 70%),
    radial-gradient(40% 36% at 72% 60%, rgba(120, 40, 180, 0.18), transparent 72%);
  filter: blur(22px);
  animation: capGlowDrift 18s ease-in-out infinite alternate;
}
/* Soft top bridge so it melts out of the previous section's dark base. */
.cap-section::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #060604 0%, transparent 100%);
}
@keyframes capGlowDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate3d(2%, 3%, 0)  scale(1.08);  opacity: 1;    }
  100% { transform: translate3d(4%, -1%, 0) scale(1.04);  opacity: 0.9;  }
}
.cap-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12vh 2.5rem;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.cap-left { position: relative; min-height: 60vh; }
.cap-logo-slot { width: 100%; height: 100%; }

.cap-right { display: flex; flex-direction: column; gap: 1.75rem; }
.cap-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 2rem 2.25rem;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cap-card-tag {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--hdds-second-text);
  margin-bottom: 1rem;
}
.cap-card-title {
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 0.9rem;
}
.cap-card-body {
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* Word-by-word reveal: words ride up out of clipping containers. */
.reveal-text { visibility: hidden; }        /* revealed by JS once split */
.reveal-text .w-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.reveal-text .w-inner {
  display: inline-block;
  transform: translateY(110%);              /* initial (matches GSAP from) */
  opacity: 0;
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .cap-inner { grid-template-columns: 1fr; gap: 2rem; padding: 10vh 1.5rem; }
  .cap-left { min-height: 40vh; order: -1; }
}

/* ── CORE PERFORMANCE SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--plum); }
::-webkit-scrollbar-thumb:hover { background: var(--orchid); }

/* ── RESPONSIVE MASTER MEDIA CASCADE ────────────────────────── */
@media(max-width: 1100px) {
  #hero { flex-direction: column; padding-top: 9rem; height: auto;}
  .hero-left { width: 100%; position: relative; }
}

@media (max-width: 768px) {
  #main-nav { padding: 1.25rem 1.5rem; }
  #main-nav.scrolled { padding: 1rem 1.5rem; }
  #hero { padding: 8rem 1.5rem 3rem; gap: 3rem; }
}

@media(max-width: 480px) {
  .hero-headline { font-size: clamp(2.2rem, 11vw, 3.2rem); }
}


/* ══════════════════════════════════════════════════════════════════════════
   HD CONTINUATION — statement (3D dock area) / results dashboard / niches.
   Ported from the mock; EVERYTHING scoped under #hd-continuation so it can't
   leak into the rest of the site. Background layers are absolute (not fixed)
   so they only cover this block. The 3D (#logo3d-fixed, z-index 40) docks in
   the open left of .statement and scrolls away with #capabilities.
   ══════════════════════════════════════════════════════════════════════════ */
#hd-continuation {
  --purple:     #7c3aed;
  --purple-lt:  #a855f7;
  --violet-tx:  #7b5bd6;
  --card-border: rgba(168, 85, 247, 0.35);
  position: relative;
  z-index: 6;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  color: #fff;
  background: linear-gradient(160deg, #140a22 0%, #0a0410 45%, #06030b 100%);
}
#hd-continuation, #hd-continuation *,
#hd-continuation *::before, #hd-continuation *::after { box-sizing: border-box; }
#hd-continuation h1, #hd-continuation p { margin: 0; }

/* seamless bridge down from the showcase (#060604) */
#hd-continuation::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22vh;
  background: linear-gradient(180deg, #060604, transparent);
  z-index: 2; pointer-events: none;
}

/* ---- ambient background (absolute within the block, NOT fixed) ---- */
#hd-continuation .bg-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 620px at 6% 22%, rgba(168, 85, 247, 0.55), transparent 62%),
    radial-gradient(700px 700px at 4% 78%, rgba(124, 58, 237, 0.45), transparent 60%);
}
#hd-continuation .bg-streaks {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    100deg, transparent 0px, transparent 46px,
    rgba(168, 85, 247, 0.10) 47px, rgba(168, 85, 247, 0.10) 48px);
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 42%);
          mask-image: linear-gradient(to right, #000 0%, transparent 42%);
  /* Partnered with the dock: the diagonal streaks sweep in from the left and
     brighten as the model lands. Driven by a CLASS + transition (dock-live is
     toggled once by showcase-dock.js), not a per-frame CSS var — this layer
     spans the whole continuation block, and re-resolving a var on it every
     dock frame repainted the full-page gradient (the lag). One class flip
     lets the compositor animate transform/opacity on its own. */
  transform: translate3d(-48px, 0, 0);
  opacity: 0.25;
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 0.9, 0.24, 1);
}
#hd-continuation.dock-live .bg-streaks { transform: none; opacity: 0.7; }
@media (max-width: 900px) {
  /* No dock on mobile — keep the streaks at their full resting look. */
  #hd-continuation .bg-streaks { transform: none; opacity: 0.7; transition: none; }
}
#hd-continuation .page {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 0 40px;   /* no vertical pad: sections own the fold */
}

/* ---- statement cards = the 3D docking area (one exact 100vh fold) ---- */
#hd-continuation .statement {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  gap: clamp(14px, 2.4vh, 30px);
  height: 100vh;                 /* strictly one viewport, no spill */
  overflow: hidden;
  margin-bottom: 0;
}
/* Dock-reactive ambience: a soft violet-into-pink wash blooms out of the left
   column as the model lands there (--dock 0..1). Scrolls away with the section,
   exactly like the docked model itself. */
#hd-continuation .statement::before {
  content: "";
  position: absolute;
  /* Centered BEHIND the docked model (was -14%, whose bright center sat off the
     left viewport edge → a hard-clipped band = the "cut off light on the left").
     At ~8% the bloom pools behind the model with a soft falloff to both edges. */
  left: 8%;
  top: 50%;
  width: min(48vw, 700px);
  aspect-ratio: 1;
  transform: translateY(-50%) scale(calc(0.72 + 0.28 * var(--dock, 0)));
  background: radial-gradient(circle,
    rgba(124, 58, 237, 0.34),
    rgba(228, 39, 133, 0.10) 48%,
    transparent 70%);
  filter: blur(12px);
  opacity: calc(var(--dock, 0) * 0.9);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;   /* promoted: var updates stay compositor-only */
}
#hd-continuation .glass-card {
  position: relative;
  z-index: 1;              /* always above the .statement::before dock glow */
  width: min(660px, 100%);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: clamp(18px, 3vh, 34px) clamp(26px, 3vw, 44px);
  /* PERF: backdrop-filter removed — it re-blurred its backdrop EVERY frame the
     3D/halo animated underneath (the whole dock sequence). A slightly deeper
     tint + inner sheen keeps the glass read on this dark background. */
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 40px rgba(124, 58, 237, 0.12);
}
#hd-continuation .glass-card p {
  font-size: clamp(14.5px, 1.5vw, 19px);
  line-height: 1.5; font-weight: 400;
  color: #efeaf7; letter-spacing: 0.1px;
}

/* ---- results head — whole section is one exact 100vh fold ---- */
#hd-continuation .results {
  position: relative;
  height: 100vh;
  overflow: visible;               /* was hidden — it clipped the left cards' border/shadow */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;     /* top-align + controlled pad so the head sits just under the nav
                                      (centering left a big dead gap up top + jammed the card to the bottom) */
  padding: clamp(60px, 8.5vh, 96px) 28px 3vh;
}
#hd-continuation .results-head { position: relative; text-align: center; margin-bottom: 0.4vh; }
#hd-continuation .results-title {
  display: inline-block; font-weight: 800;
  font-size: clamp(40px, 6.4vw, 84px); line-height: 0.92;
  letter-spacing: 1px; color: #fff;
  text-shadow: 0 6px 40px rgba(168, 85, 247, 0.35);
}
/* ---- dashed orbit ring with a paper plane flying its path ---- */
#hd-continuation .dashed-circle {
  position: absolute; left: 50%; top: 50%;
  width: 170px; height: 170px; margin-left: -318px; margin-top: -104px;
  border: 2px dashed rgba(168, 85, 247, 0.7); border-radius: 50%;
}
#hd-continuation .orbit-plane {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  display: grid; place-items: center; color: #c9b3fb;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.95));
  /* circle path, radius 85 centred in the 170px ring; offset-rotate banks the
     plane along the tangent so it always faces its direction of travel */
  offset-path: path('M85,0 A85,85 0 1 1 85,170 A85,85 0 1 1 85,0');
  offset-anchor: 50% 50%; offset-rotate: auto; offset-distance: 0%;
  animation: orbit-fly 9s linear infinite;
  animation-play-state: paused;    /* resumed by .anim-live (offscreen pause) */
}
#hd-continuation.anim-live .orbit-plane { animation-play-state: running; }
@keyframes orbit-fly { to { offset-distance: 100%; } }
/* ---- accolade badges scattered around the title — dark glass chips in the
       section's purple palette, staggered (size/offset/tilt) so they read
       organic rather than a lined-up pair ---- */
#hd-continuation .head-badges { position: absolute; inset: 0; pointer-events: none; }
#hd-continuation .badge {
  position: absolute; border-radius: 50%;
  display: grid; place-items: center; color: var(--purple-lt);
  background: rgba(28, 15, 43, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(124, 58, 237, 0.32);
}
/* tucked just off the end of the top RESULTS line */
#hd-continuation .badge-spark { width: 38px; height: 38px; top: 4px; left: calc(50% + 212px); transform: rotate(-7deg); }
/* lower, hugging the right edge of the K — diagonal from the spark, brighter icon */
#hd-continuation .badge-bolt  { width: 30px; height: 30px; top: 120px; left: calc(50% + 284px); transform: rotate(9deg); color: #d9c2ff; }
#hd-continuation .results-sub {
  text-align: center; color: #cbc2dd;
  font-size: 15.5px; font-weight: 400; line-height: 1.5; margin: 0.8vh 0 1.8vh;
}
#hd-continuation .plane-ico { color: var(--purple-lt); vertical-align: -2px; margin-right: 4px; }

/* ---- CTA ---- */
#hd-continuation .cta {
  display: flex; align-items: center; gap: 22px; width: max-content;
  margin: 0 auto clamp(16px, 2.6vh, 34px); padding: 12px 12px 12px 26px;
  background: var(--purple); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600; border-radius: 40px;
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.45);
  transition: box-shadow 0.35s ease, background 0.35s ease;  /* transform driven by GSAP */
  will-change: transform;
}
#hd-continuation .cta:hover { box-shadow: 0 14px 42px rgba(124, 58, 237, 0.65); background: var(--purple-lt); }
#hd-continuation .cta-label { display: inline-block; }
#hd-continuation .cta-word  { display: inline-block; will-change: transform; }
#hd-continuation .cta-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--purple); display: grid; place-items: center;
  will-change: transform;
}

/* ---- dashboard cluster — compressed to sit in the lower part of the fold ---- */
#hd-continuation .dashboard {
  position: relative; display: grid;
  grid-template-columns: 300px 1fr 280px;
  align-items: center; gap: clamp(16px, 1.8vw, 24px);
  min-height: clamp(260px, 38vh, 350px);
  padding-bottom: 0;
  overflow: visible;               /* never clip the floating stat cards */
}
#hd-continuation .stat-card {
  position: relative; background: linear-gradient(180deg, #ede7fb, #ffffff);
  border-radius: 22px; padding: 18px 22px; color: #2a1a45;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), 0 18px 40px rgba(0,0,0,0.4);
  overflow: hidden;
}
#hd-continuation .stat-num { font-weight: 700; font-size: 37px; line-height: 1; color: #1c0f2b; white-space: nowrap; }
#hd-continuation .stat-c .stat-num { font-size: 32px; }
#hd-continuation .stat-label { margin-top: 5px; font-size: 13.5px; font-weight: 500; color: #4a3a63; }
#hd-continuation .stat-spark { position: absolute; right: 18px; bottom: 14px; color: #7c3aed; opacity: 0.55; }
#hd-continuation .stat-a { position: absolute; left: -6px;  top: -14px; width: 192px; transform: rotate(-7deg); z-index: 3; }
#hd-continuation .stat-b { position: absolute; left: 152px; top: 74px;  width: 170px; transform: rotate(-6deg); z-index: 2; }
#hd-continuation .stat-c { position: absolute; left: 20px;  top: 166px; width: 188px; transform: rotate(-6deg); z-index: 1; }

#hd-continuation .revenue-card {
  grid-column: 2; justify-self: center; width: 100%; max-width: 540px;
  margin-left: 26px;               /* nudge the revenue box slightly right */
  background: linear-gradient(180deg, #f2edfc, #ffffff);
  border-radius: 24px; padding: 22px 28px 18px; color: #1c0f2b;
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.35), 0 24px 60px rgba(0,0,0,0.45);
}
#hd-continuation .pill {
  display: inline-block; background: #e4d8fb; color: #6d28d9;
  font-size: 13.5px; font-weight: 600; padding: 7px 18px; border-radius: 30px;
}
#hd-continuation .revenue-amount { margin-top: 12px; font-weight: 700; font-size: clamp(28px, 3vw, 36px); letter-spacing: 0.5px; color: #150a26; }
#hd-continuation .revenue-caption { margin-top: 3px; font-size: 14px; font-weight: 500; color: #4a3a63; }
#hd-continuation .revenue-chart { display: block; width: 100%; height: clamp(105px, 14vh, 148px); margin-top: 10px; }

#hd-continuation .outputs-card {
  grid-column: 3; border: 1px solid var(--card-border);
  margin-left: 22px;               /* nudge the 1k+ outputs box slightly right */
  border-radius: 24px; padding: 26px 24px; text-align: center;
  /* PERF: blur dropped — this card FLOATS via GSAP, so the backdrop re-blurred
     on every float frame forever. Tint deepened to keep the glass read. */
  background: linear-gradient(180deg, rgba(124,58,237,0.20), rgba(124,58,237,0.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(124,58,237,0.15);
}
#hd-continuation .outputs-num { font-weight: 700; font-size: 52px; line-height: 1; color: #fff; }
#hd-continuation .outputs-label { margin-top: 6px; font-size: 18px; font-weight: 500; color: #efeaf7; }
#hd-continuation .dashed-divider { margin: 16px auto; width: 78%; border-top: 2px dashed rgba(168,85,247,0.6); }
#hd-continuation .outputs-desc { font-size: 13px; color: #b9add0; line-height: 1.5; }

/* ---- niches (white band) ---- */
#hd-continuation .niches {
  margin: 20px -40px 46px; background: #fff;
  border-radius: 26px; padding: 34px 60px 44px; color: #2a1a45;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
#hd-continuation .niches-title {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-size: 15px; font-weight: 600; letter-spacing: 3px; color: #6d28d9; margin-bottom: 30px;
}
#hd-continuation .niches-title .line { height: 1px; width: 120px; background: linear-gradient(90deg, transparent, #c9b6f5); }
#hd-continuation .niches-title .line:last-child { background: linear-gradient(90deg, #c9b6f5, transparent); }
#hd-continuation .niche-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
#hd-continuation .niche {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding: 4px 18px; text-align: center;
}
#hd-continuation .niche + .niche::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: #ece6f6;
}
#hd-continuation .niche-ico {
  width: 58px; height: 58px; border-radius: 50%;
  background: #f1ebfb; display: grid; place-items: center; color: #7c3aed;
}
#hd-continuation .niche-label { font-size: 14px; font-weight: 600; color: #2a1a45; line-height: 1.4; }

/* Hover micro-interaction: gentle lift + icon warm-up + soft ring. Discrete,
   user-triggered transitions (not a perpetual loop) — no reduced-motion gate needed. */
#hd-continuation .niche { transition: transform 0.35s cubic-bezier(0.22,0.9,0.24,1); }
#hd-continuation .niche:hover { transform: translateY(-6px); }
#hd-continuation .niche-ico { transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; }
#hd-continuation .niche:hover .niche-ico {
  background: #7c3aed; color: #fff;
  box-shadow: 0 0 0 6px rgba(124,58,237,0.14), 0 10px 22px rgba(124,58,237,0.32);
}

/* ---- OUR SERVICES (dark, continues the results background) ---- */
#hd-continuation .services { padding: 10px 0 220px; }
#hd-continuation .services-title {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-size: 15px; font-weight: 600; letter-spacing: 3px; color: #fff; margin-bottom: 44px;
}
#hd-continuation .services-title .line { height: 1px; width: 120px; background: linear-gradient(90deg, transparent, var(--card-border)); }
#hd-continuation .services-title .line:last-child { background: linear-gradient(90deg, var(--card-border), transparent); }
#hd-continuation .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
#hd-continuation .service-card {
  position: relative; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(124,58,237,0.03));
  border: 1px solid var(--card-border); border-radius: 22px; padding: 34px 24px 30px;
  cursor: none;   /* custom kinetic cursor owns the pointer (cursor-service ring) */
  transition: transform 0.4s cubic-bezier(0.22,0.9,0.24,1), box-shadow 0.4s ease;
}
#hd-continuation .service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(124,58,237,0.28), 0 0 0 1px rgba(168,85,247,0.55), 0 0 30px rgba(168,85,247,0.32); }
#hd-continuation .service-ico {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(124,58,237,0.20); color: var(--purple-lt); display: grid; place-items: center;
}
#hd-continuation .service-name { margin: 0; font-size: 18.5px; font-weight: 700; color: #fff; line-height: 1.3; }
#hd-continuation .service-rule { display: block; width: 56%; margin: 16px auto; border-top: 2px dashed rgba(168,85,247,0.45); }
#hd-continuation .service-desc { margin: 0; font-size: 13px; color: #b9add0; line-height: 1.65; }
#hd-continuation .service-card--hi {
  background: linear-gradient(165deg, var(--purple-lt), var(--purple) 70%, var(--violet-tx));
  border-color: transparent; transform: translateY(-14px);
  box-shadow: 0 0 60px rgba(124,58,237,0.55), 0 26px 54px rgba(0,0,0,0.4);
}
#hd-continuation .service-card--hi:hover { transform: translateY(-20px); box-shadow: 0 0 70px rgba(124,58,237,0.7), 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.35); }
#hd-continuation .service-card--hi .service-ico {
  background: rgba(255,255,255,0.2); color: #fff;
  transform-origin: 50% 50%; animation: hi-ico-breathe 3.6s ease-in-out infinite;
}
/* Soft glow ring behind the icon, breathing in step with the scale — keeps the
   featured card's icon feeling alive. Compositor-only (transform + opacity). */
#hd-continuation .service-card--hi .service-ico::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 72%);
  opacity: 0; animation: hi-ico-glow 3.6s ease-in-out infinite;
}
@keyframes hi-ico-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes hi-ico-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.85; }
}
#hd-continuation .service-card--hi .service-rule { border-top-color: rgba(255,255,255,0.4); }
#hd-continuation .service-card--hi .service-desc { color: #ece3ff; }
/* The little pointer icon is part of the highlighted look — hidden until the
   card is activated by a click (the --hi class is now toggled in JS, not baked
   into the markup). */
#hd-continuation .service-cursor { position: absolute; right: 16px; bottom: 14px; opacity: 0; transition: opacity 0.35s ease; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
#hd-continuation .service-card--hi .service-cursor { opacity: 0.9; }

/* Diagonal gloss sheen sweeping across the highlighted card, looping slowly.
   `isolation:isolate` + explicit z-index keep the card's real content above
   the sheen layer so text never washes out mid-sweep. */
#hd-continuation .service-card--hi { isolation: isolate; }
#hd-continuation .service-card--hi .service-ico,
#hd-continuation .service-card--hi .service-name,
#hd-continuation .service-card--hi .service-rule,
#hd-continuation .service-card--hi .service-desc { position: relative; z-index: 2; }
#hd-continuation .service-card--hi .service-cursor { z-index: 2; }
#hd-continuation .service-card--hi::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.42) 48%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.42) 52%, transparent 68%);
  background-size: 220% 220%; background-position: -130% -130%;
  animation: service-sheen 5.5s ease-in-out infinite;
}
@keyframes service-sheen {
  0%   { background-position: -130% -130%; }
  45%  { background-position: 230% 230%; }
  100% { background-position: 230% 230%; }
}

/* ---- BEFORE & AFTER (light band — wave seam bridges from the dark services bg) ---- */
#hd-continuation .before-after {
  /* overflow visible (was hidden) so the .ba-lattice can extend up through the
     seam; #hd-continuation still clips the 100vw width so there's no page scroll,
     and the inner particle/deco layers carry their own overflow:hidden.
     z-index 6 (> seam-wrap's 5) so the extended lattice renders OVER the pastel
     wave-fill — otherwise the grid is hidden behind it exactly in the wave band. */
  position: relative; z-index: 6; overflow: visible;
  /* Full-bleed: this section lives inside .page (max-width 1280, centered), which
     boxed the pastel with dark bars on wide screens. calc(-50vw + 50%) breaks it
     out to the full viewport width at ANY size (50% resolves against .page's
     content box, cancelling the centering). #hd-continuation clips overflow so
     no horizontal page scroll. Inner content stays centered via its own max-widths. */
  margin: 0 calc(-50vw + 50%); padding: 0 40px;
  background: var(--hdds-main-bg);   /* match the landing/hero pastel exactly (#F6DFD9) */
  color: #2a1a45;
}
/* Each block is its own full-viewport fold with vertically-CENTERED content — so
   the heading isn't jammed under the header, the cards get breathing room, and
   the "you've found" block owns a whole screen (the cards above scroll off). */
#hd-continuation .ba-fold {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
/* A little extra pastel above the first heading (shifts the centered content down). */
/* Top-align (not center) so the title sits just under the wave instead of
   floating in the middle of the fold — kills the big gap above BEFORE & AFTER. */
#hd-continuation .ba-fold-top { justify-content: flex-start; padding-top: clamp(6px, 1.5vh, 18px); }
/* ---- cursor lattice-spotlight (ported from the landing #grid-spotlight) ----
   Sits behind the copy/cards (z-index 0; content is z-index 1) and is revealed
   only under the mouse. Same "fixed 600px tile moved by a compositor transform,
   masked to a soft circle" trick — the grid counter-shifts via background-position
   so its lines stay screen-aligned. --mouse-x/y are fed to #hd-continuation by
   grid-effect.js; the .lattice-live class (toggled while the section is in view)
   fades it in so the viewport-fixed tile never lingers over other sections. */
#hd-continuation .ba-lattice {
  /* Extends 280px ABOVE the section top so the cursor grid reaches up through the
     wavy seam (no hard cut at the boundary). grid-effect.js adds the same 280 to
     --ly so the tile still lands under the cursor. */
  position: absolute; top: -280px; left: 0; right: 0; bottom: 0; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
}
#hd-continuation .ba-lattice.lattice-live { opacity: 1; }
/* ABSOLUTE (not fixed): cursor-follow.js transforms #hd-continuation .page, which
   would make a `fixed` tile anchor to that transformed box instead of the viewport
   (skill gotcha #1) — the spotlight then lands nowhere near the cursor. Absolute +
   SECTION-LOCAL coords (--lx/--ly, fed by grid-effect.js as clientX/Y minus the
   section's rect) keeps it glued to the cursor, and .ba-lattice's overflow:hidden
   clips it cleanly to this section (no bleed). */
#hd-continuation .ba-lattice { overflow: hidden; }
#hd-continuation .ba-lattice::before {
  content: ''; position: absolute; left: 0; top: 0; width: 640px; height: 640px;
  /* Subtle, matching the landing #grid-spotlight (same --grid-reveal plum). */
  background-image:
    linear-gradient(var(--grid-reveal) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-reveal) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position:
    calc(320px - var(--lx, -9999px)) calc(320px - var(--ly, -9999px));
  -webkit-mask-image: radial-gradient(circle 300px at center, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
          mask-image: radial-gradient(circle 300px at center, #000 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
  transform: translate3d(
    calc(var(--lx, -9999px) - 320px),
    calc(var(--ly, -9999px) - 320px), 0);
  will-change: transform;
}
/* ══ GLOWING WAVY SEAM — OUR SERVICES → BEFORE & AFTER ═══════════════════════
   Zero-height wrapper pinned on the section boundary; its full-bleed children
   straddle it. Lives in .page (which doesn't clip — .before-after's
   overflow:hidden would flatten the upward wave); #hd-continuation clips the
   100vw width so there's no page scroll. */
#hd-continuation .seam-wrap { position: relative; z-index: 5; height: 0; }
#hd-continuation .seam-wrap > * {
  position: absolute; left: calc(-50vw + 50%); width: 100vw; pointer-events: none;
}
/* FRONT seam layer — z7, ABOVE .before-after (z6), so bubbles + edge glow sit on
   top of the wave and section. Same zero-height, full-bleed treatment. */
#hd-continuation .seam-front { position: relative; z-index: 7; height: 0; }
#hd-continuation .seam-front > * {
  position: absolute; left: calc(-50vw + 50%); width: 100vw; pointer-events: none;
}
/* Soft pink glow hugging the very L/R edges (brightest just off-screen so it reads
   as an elegant edge fade, never a hard cut). Sits behind the bubbles. */
#hd-continuation .seam-edge {
  bottom: -40px; height: clamp(160px, 20vw, 300px); z-index: -1; filter: blur(34px);
  background:
    radial-gradient(34% 58% at -2% 60%,  rgba(255,140,205,0.55), transparent 62%),
    radial-gradient(34% 58% at 102% 60%, rgba(255,140,205,0.55), transparent 62%);
}
/* Wave band tall enough for the edge dips + mountains to read; the deep central
   valley keeps the title tight underneath. */
#hd-continuation .seam-wave { bottom: -2px; height: clamp(115px, 13.5vw, 185px); z-index: 2; }
#hd-continuation .seam-fill { fill: var(--hdds-main-bg); }
/* Signature magenta bloom hugging the crest (blurred gradient stroke). */
#hd-continuation .seam-crest {
  fill: none; stroke: url(#seamCrest); stroke-width: 14; stroke-linecap: round;
  opacity: 1; transform-box: fill-box; transform-origin: 50% 100%;
  animation: seam-breathe 5.5s ease-in-out infinite;
  animation-play-state: paused;   /* resumed by .anim-live (offscreen pause) */
}
@keyframes seam-breathe {
  0%, 100% { opacity: 0.68; transform: scaleY(1); }
  50%      { opacity: 1;    transform: scaleY(1.16); }
}
/* Purple accent line on the wave edge — bright at the L/R edges, fading out toward
   the middle dip (via #seamLineGrad). The GLOW layer is thick + blurred (reads as
   thicker/softer at the edges); the crisp layer keeps it bright. */
/* Faint twinkling sparkle dots in the dark region above the wave. */
#hd-continuation .seam-sparkles { bottom: 10px; height: clamp(220px, 26vw, 360px); z-index: 1; overflow: visible; }
/* size + opacity are set INLINE per-sparkle (varied/organic, not systematic). */
#hd-continuation .sp {
  position: absolute; border-radius: 50%;
  background: #fff; box-shadow: 0 0 5px 1px rgba(255, 210, 250, 0.8);
  animation: sp-twinkle 3.6s ease-in-out infinite;
  animation-play-state: paused;
}
#hd-continuation.anim-live .sp { animation-play-state: running; }
#hd-continuation .sp:nth-child(2n) { animation-duration: 4.6s; animation-delay: -1.6s; }
#hd-continuation .sp:nth-child(3n) { animation-duration: 3s;   animation-delay: -2.6s; }
#hd-continuation .sp:nth-child(5n) { animation-duration: 5.4s; animation-delay: -0.8s; }
#hd-continuation .sp:nth-child(7n) { animation-duration: 2.6s; animation-delay: -3.4s; }
/* A couple of 4-point star glints (crossed thin rays) among the round dots. */
#hd-continuation .sp.star { background: transparent; box-shadow: none; }
#hd-continuation .sp.star::before,
#hd-continuation .sp.star::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 255, 0.95), transparent);
}
#hd-continuation .sp.star::before { width: 340%; height: 24%; transform: translate(-50%, -50%); }
#hd-continuation .sp.star::after  { width: 24%;  height: 340%; transform: translate(-50%, -50%); }
/* Twinkle via scale only, so each dot keeps its own inline opacity (brightness). */
@keyframes sp-twinkle { 0%, 100% { transform: scale(0.62); } 50% { transform: scale(1.15); } }

#hd-continuation .seam-line-glow {
  fill: none; stroke: url(#seamLineGrad); stroke-width: 18; stroke-linecap: round;
  filter: blur(7px); opacity: 0.92;
}
#hd-continuation .seam-line {
  fill: none; stroke: url(#seamLineGrad); stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(230, 170, 255, 0.9));
  opacity: 1;
}
/* Dark→magenta glow lifting the services bottom toward the seam. */
#hd-continuation .seam-glow-dark {
  bottom: 0; height: clamp(220px, 26vw, 360px); z-index: 1;
  /* Two bright lobes under the two mountains + a centred base bloom. The radials
     concentrate in the middle and fall off symmetrically, so the glow fades to a
     soft pink at the L/R edges on its own — no mask, no scattered haze. */
  background:
    radial-gradient(44% 60% at 25% 100%, rgba(255,95,205,0.62), transparent 60%),   /* left magenta lobe */
    radial-gradient(44% 60% at 75% 100%, rgba(255,150,80,0.60), transparent 60%),    /* right ORANGE lobe */
    radial-gradient(120% 96% at 20% 100%, rgba(185,80,240,0.40), transparent 70%),   /* left purple base */
    radial-gradient(120% 96% at 80% 100%, rgba(255,125,55,0.38), transparent 72%);   /* right orange base */
}
/* Bokeh spheres drifting on the dark side near the seam. */
#hd-continuation .seam-bokeh { bottom: 0; height: clamp(220px, 26vw, 360px); z-index: 1; overflow: hidden; }
/* animation-name/timing here; each .bk-N supplies its own duration + delay so
   they drift out of sync. Paused by default, resumed by .anim-live. */
/* Glossy 3D bubbles: white specular offset highlight + translucent tinted body
   + rim shading (inset shadows) + a soft outer glow. Mostly crisp (foreground),
   a couple softened via --bk-blur for depth-of-field. */
#hd-continuation .bk {
  position: absolute; border-radius: 50%; opacity: 0.9;
  background: radial-gradient(circle at 32% 27%,
    rgba(255,255,255,0.96) 0%,
    rgba(255,214,240,0.72) 19%,
    var(--bk, rgba(235,96,180,0.5)) 55%,
    rgba(150,38,112,0.20) 84%,
    transparent 100%);
  box-shadow:
    0 6px 22px rgba(255,90,190,0.34),
    inset -3px -5px 12px rgba(140,30,108,0.30),
    inset 3px 4px 10px rgba(255,255,255,0.22);
  filter: blur(var(--bk-blur, 0.6px));
  animation-name: bk-drift; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-play-state: paused;
}
#hd-continuation .bk::before {   /* glossy specular highlight */
  content: ''; position: absolute; top: 12%; left: 20%; width: 34%; height: 26%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%);
}
#hd-continuation.anim-live .seam-crest,
#hd-continuation.anim-live .bk { animation-play-state: running; }
@keyframes bk-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -15px); } }
/* Placed like the reference: a cluster lower-left, a couple centre, a cluster right. */
#hd-continuation .bk-1 { width:60px;height:60px;left:4%; bottom:13%; --bk:rgba(255,105,195,.55); --bk-blur:.5px; animation-duration:13s; }
#hd-continuation .bk-2 { width:26px;height:26px;left:14%;bottom:8%;  --bk:rgba(210,130,255,.5);  --bk-blur:2px; opacity:.7; animation-duration:17s;animation-delay:-4s; }
#hd-continuation .bk-3 { width:44px;height:44px;left:9%; bottom:33%; --bk:rgba(190,110,255,.55); --bk-blur:.6px; animation-duration:15s;animation-delay:-8s; }
#hd-continuation .bk-4 { width:18px;height:18px;left:44%;bottom:37%; --bk:rgba(255,170,225,.6);  --bk-blur:1px; opacity:.66; animation-duration:12s;animation-delay:-2s; }
#hd-continuation .bk-5 { width:54px;height:54px;left:88%;bottom:14%; --bk:rgba(255,95,190,.55);   --bk-blur:.5px; animation-duration:16s;animation-delay:-6s; }
#hd-continuation .bk-6 { width:34px;height:34px;left:82%;bottom:33%; --bk:rgba(200,120,255,.5);   --bk-blur:4px; opacity:.6; animation-duration:14s;animation-delay:-10s; }
#hd-continuation .bk-7 { width:22px;height:22px;left:93%;bottom:9%;  --bk:rgba(255,150,215,.6);   --bk-blur:.6px; animation-duration:18s;animation-delay:-3s; }
#hd-continuation .bk-8 { width:40px;height:40px;left:50%;bottom:9%;  --bk:rgba(255,120,205,.55);  --bk-blur:.6px; animation-duration:15s;animation-delay:-12s; }
/* Pink cloud blobs on the pastel side, just below the seam. */
#hd-continuation .seam-clouds { top: 0; height: clamp(140px, 16vw, 220px); z-index: 0; overflow: visible; }
#hd-continuation .cl { position:absolute; border-radius:50%; filter: blur(34px); opacity:0.5; background: radial-gradient(circle, rgba(255,175,205,0.85), transparent 70%); }
#hd-continuation .cl-1 { width:320px;height:190px;left:2%;  top:12px; }
#hd-continuation .cl-2 { width:360px;height:210px;right:2%; top:0;   opacity:0.45; }
#hd-continuation .cl-3 { width:220px;height:140px;left:42%; top:44px; opacity:0.3; }

/* Ambient sphere/sparkle particles — small soft dots drifting in the section's
   background (mock's scattered-sphere motif). One container spans the whole
   `.before-after` box (incl. the nested `.ba-closing`), z-index 0 so it sits
   below the wave-sheen/decos (z-index 1/2) and all copy (z-index 1). Pure
   transform/opacity, tiny elements — cheap regardless of how many run. */
#hd-continuation .ba-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#hd-continuation .ba-particle { position: absolute; border-radius: 50%; animation: ba-particle-drift ease-in-out infinite; }
#hd-continuation .ba-particle-1 {
  left: 9%; top: 20%; width: 10px; height: 10px;
  background: radial-gradient(circle, rgba(124,58,237,0.75), rgba(124,58,237,0) 70%);
  animation-duration: 12s;
}
#hd-continuation .ba-particle-2 {
  left: 23%; top: 74%; width: 7px; height: 7px;
  background: radial-gradient(circle, rgba(228,39,133,0.7), rgba(228,39,133,0) 70%);
  animation-duration: 15s; animation-delay: -4s;
}
#hd-continuation .ba-particle-3 {
  right: 12%; top: 33%; width: 13px; height: 13px;
  background: radial-gradient(circle, rgba(246,160,76,0.7), rgba(246,160,76,0) 70%);
  animation-duration: 17s; animation-delay: -8s;
}
#hd-continuation .ba-particle-4 {
  right: 7%; top: 86%; width: 8px; height: 8px;
  background: radial-gradient(circle, rgba(124,58,237,0.7), rgba(124,58,237,0) 70%);
  animation-duration: 13.5s; animation-delay: -2s;
}
@keyframes ba-particle-drift {
  0%, 100% { transform: translate(0, 0);       opacity: 0.32; }
  50%      { transform: translate(16px, -14px); opacity: 0.62; }
}
/* Closing-area spheres */
#hd-continuation .ba-particle-5 {
  left: 44%; top: 55%; width: 9px; height: 9px;
  background: radial-gradient(circle, rgba(124,58,237,0.75), rgba(124,58,237,0) 70%);
  animation-duration: 14s; animation-delay: -3s;
}
#hd-continuation .ba-particle-6 {
  right: 19%; top: 91%; width: 12px; height: 12px;
  background: radial-gradient(circle, rgba(246,160,76,0.72), rgba(246,160,76,0) 70%);
  animation-duration: 16s; animation-delay: -7s;
}
#hd-continuation .ba-particle-7 {
  left: 16%; top: 95%; width: 7px; height: 7px;
  background: radial-gradient(circle, rgba(193,76,250,0.7), rgba(193,76,250,0) 70%);
  animation-duration: 12.5s; animation-delay: -5s;
}
/* White 4-point sparkles scattered through the closing area (reference accent). */
#hd-continuation .ba-spark {
  position: absolute; width: 16px; height: 16px; background: #fff;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity: 0.5; animation: ba-twinkle ease-in-out infinite;
}
#hd-continuation .ba-spark-1 { left: 27%; top: 60%; width: 15px; height: 15px; animation-duration: 3.6s; }
#hd-continuation .ba-spark-2 { right: 29%; top: 57%; width: 12px; height: 12px; animation-duration: 4.4s; animation-delay: -1.5s; }
#hd-continuation .ba-spark-3 { left: 41%; top: 89%; width: 10px; height: 10px; animation-duration: 3.1s; animation-delay: -0.8s; }
#hd-continuation .ba-spark-4 { right: 11%; top: 77%; width: 18px; height: 18px; animation-duration: 5s;   animation-delay: -2.2s; }
#hd-continuation .ba-spark-5 { left: 11%; top: 71%; width: 11px; height: 11px; animation-duration: 3.9s; animation-delay: -3s; }
@keyframes ba-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 0.85; transform: scale(1) rotate(45deg); }
}

/* Thin dashed "flight-path" connectors arcing near the decos (mock's dotted
   flight-line motif) — z-index 0, strictly behind the section's copy/cards
   (z-index 1) and decos (z-index 2). stroke-dashoffset drift only — cheap,
   compositor-friendly, and the paths themselves are tiny SVG primitives. */
#hd-continuation .ba-fly { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
#hd-continuation .ba-fly-top   { top: 2.5%; height: clamp(130px, 15vw, 220px); }
#hd-continuation .ba-fly-path {
  /* stroke set per-path (inline gradient) so each swoosh can fade toward the
     heading — a CSS `stroke:` here would override the gradient attribute. */
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 7 9; animation: ba-fly-drift 16s linear infinite;
}
@keyframes ba-fly-drift { to { stroke-dashoffset: -160; } }
/* Tiny sparkle riding the mid path. */
#hd-continuation .ba-fly-spark { fill: rgba(196,140,255,0.85); }

/* .deco-wrap owns the static absolute position (and the GSAP scroll-parallax
   y below); the inner .deco keeps its own continuous CSS bob transform.
   Splitting the two means GSAP's scroll `y` and the CSS bob never write the
   same element's transform — no war (see hard-won gotcha #3). */
#hd-continuation .deco-wrap { position: absolute; width: 58px; height: 58px; z-index: 2; }
/* Nudged toward the wave seam so the pair reads as straddling it (mock's
   "large motifs on the crest" look). `.before-after` has overflow:hidden, so
   a large negative top would flat-clip the icon with nothing behind it to
   sell the illusion (reads as a chopped icon, not a seam straddle) — kept the
   offsets close to 0%, with only a hair of negative on the taller-sitting
   camera icon so it just kisses the crest without a visible clip line. */
/* Positions match the reference: decos flank the headings and sit FULLY inside
   the pastel (the section clips overflow, so edge/negative offsets chopped them).
   tl/tr are children of .before-after (offset from its full height); bl/br live
   inside .ba-closing, flanking the "right place" title near the closing's top. */
/* vh/%-based tops so they flank the now-CENTERED fold content (tl/tr are relative
   to the full ~200vh section → vh; bl/br are relative to the 100vh closing fold → %). */
#hd-continuation .deco-wrap-tl { left: 3%; top: 24vh; }
#hd-continuation .deco-wrap-tr { right: 3%; top: 20vh; }
#hd-continuation .deco-wrap-bl { left: 2%; top: 34%; }
#hd-continuation .deco-wrap-br { right: 2%; top: 26%; }
#hd-continuation .deco {
  position: relative; width: 58px; height: 58px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center;
  /* deepened drop shadow + inset top/bottom rim shading = glossy 3D bubble read */
  box-shadow: 0 18px 38px rgba(80,40,120,0.32), inset 0 3px 4px rgba(255,255,255,0.45), inset 0 -8px 14px rgba(0,0,0,0.18);
}
/* Specular highlight (broad soft glow + tight bright dot), top-left like glass/plastic. */
#hd-continuation .deco::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 27% 24%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.95) 5%, rgba(255,255,255,0) 8%),
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0) 62%);
}
/* Thin bright rim-light tracing the top inner edge. */
#hd-continuation .deco::after {
  content: ''; position: absolute; top: 3px; left: 14%; right: 14%; height: 3px;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0));
}
#hd-continuation .deco-tl { background: linear-gradient(160deg, var(--purple-lt), var(--purple)); animation: deco-bob-tl 4.4s ease-in-out infinite; }
#hd-continuation .deco-tr { background: linear-gradient(160deg, #F6A04C, #d9711f); animation: deco-bob-tr 5.1s ease-in-out infinite; }
#hd-continuation .deco-bl { background: linear-gradient(160deg, var(--purple), var(--violet-tx)); animation: deco-bob-bl 4.8s ease-in-out infinite; }
#hd-continuation .deco-br { background: linear-gradient(160deg, #C14CFA, var(--purple)); animation: deco-bob-br 5.6s ease-in-out infinite; }
@keyframes deco-bob-tl { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-10px); } }
@keyframes deco-bob-tr { 0%, 100% { transform: rotate(13deg)  translateY(0); } 50% { transform: rotate(13deg)  translateY(-12px); } }
@keyframes deco-bob-bl { 0%, 100% { transform: rotate(-6deg)  translateY(0); } 50% { transform: rotate(-6deg)  translateY(-9px); } }
@keyframes deco-bob-br { 0%, 100% { transform: rotate(10deg)  translateY(0); } 50% { transform: rotate(10deg)  translateY(-11px); } }

/* Real 3D PNG decos (PICS/icon-*.png) — glossy renders on transparent bg, so
   drop ALL the faux-blob chrome (gradient fill, rounded clip, inset rim-shading,
   specular pseudos) and just float the image with a soft grounding shadow. The
   bob keyframes above still animate transform on the same .deco element. */
#hd-continuation .deco-wrap:has(.deco-img) { width: 86px; height: 86px; }
#hd-continuation .deco-img {
  width: 86px; height: 86px; border-radius: 0; overflow: visible;
  background: none !important; box-shadow: none;
  filter: drop-shadow(0 16px 20px rgba(60,20,90,0.35));
}
#hd-continuation .deco-img::before,
#hd-continuation .deco-img::after { display: none; }
#hd-continuation .deco-img img {
  width: 100%; height: 100%; object-fit: contain; display: block; user-select: none;
}
/* Closing pair — prominent, but below the signature top pair. */
/* Per-corner sizing: the camera cube reads chunkier than the heart bubble in the
   reference, so the camera pair (tr/br) is a step larger than the heart pair
   (tl/bl). Declared after the base sizing rules so they win on source order. */
#hd-continuation .deco-tl.deco-img { width: 134px; height: 134px; }
#hd-continuation .deco-wrap-tl.deco-wrap { width: 134px; height: 134px; }
#hd-continuation .deco-tr.deco-img { width: 158px; height: 158px; }
#hd-continuation .deco-wrap-tr.deco-wrap { width: 158px; height: 158px; }
#hd-continuation .deco-bl.deco-img { width: 128px; height: 128px; }
#hd-continuation .deco-wrap-bl:has(.deco-img) { width: 128px; height: 128px; }
#hd-continuation .deco-br.deco-img { width: 150px; height: 150px; }
#hd-continuation .deco-wrap-br:has(.deco-img) { width: 150px; height: 150px; }

/* ---- extra scattered small decos (mock: motifs repeat more than once) ----
   Reuse the same two PNGs + an existing direction class purely for its bob
   keyframe/timing; `.deco-wrap-sm` overrides the size down to background scale.
   Same "id + 2 classes" specificity as the sizing rules above, declared after
   them so it wins without needing !important. */
#hd-continuation .deco-wrap-sm.deco-wrap { width: 50px; height: 50px; opacity: 0.9; }
#hd-continuation .deco-wrap-sm .deco-img {
  width: 50px; height: 50px;
  filter: drop-shadow(0 9px 12px rgba(60,20,90,0.26));
}
#hd-continuation .deco-wrap-tc { left: 15%; top: 1.5%; }
#hd-continuation .deco-wrap-ml { left: 0.5%; top: 44%; }
#hd-continuation .deco-wrap-cu { right: 4%; top: 3%; }

#hd-continuation .ba-head { position: relative; z-index: 1; text-align: center; }
#hd-continuation .ba-title { margin: 0; font-weight: 800; font-size: clamp(28px, 4.7vw, 70px); line-height: 1.05; letter-spacing: 0.4px; }
/* Gradient-clipped text keeps each line's brand color but sweeps a soft
   brighter band through it on a slow loop — a shine rather than a wash. */
#hd-continuation .ba-purple {
  background: linear-gradient(100deg, var(--purple) 0%, var(--purple) 44%, #a672f5 50%, var(--purple) 56%, var(--purple) 100%);
  background-size: 240% 100%; background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ba-shine 6.5s ease-in-out infinite;
}
#hd-continuation .ba-orange {
  background: linear-gradient(100deg, #d9711f 0%, #d9711f 44%, #f59a3c 50%, #d9711f 56%, #d9711f 100%);
  background-size: 240% 100%; background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ba-shine 6.5s ease-in-out infinite; animation-delay: 0.5s;
}
@keyframes ba-shine {
  0%   { background-position: 200% 0; }
  55%  { background-position: -140% 0; }
  100% { background-position: -140% 0; }
}
#hd-continuation .ba-sub { margin: clamp(10px, 1.6vh, 18px) 0 0; font-size: clamp(15px, 1.2vw, 18px); color: #5b4a70; line-height: 1.55; }
#hd-continuation .ba-hl { color: #d9711f; font-weight: 600; }

#hd-continuation .ba-grid {
  position: relative; z-index: 1; margin: clamp(14px, 2.3vh, 44px) auto 0; max-width: 1010px;
  display: grid; grid-template-columns: 1fr 58px 1fr; align-items: stretch; gap: 18px;
}
#hd-continuation .ba-card {
  position: relative;          /* anchor for the straddling state pill */
  /* Frosted, LOWER-opacity glass (reference cards are translucent, the pastel
     shows softly through). backdrop blur gives the frosted read; the section is
     otherwise static so the blur cost is contained to this band. */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px; padding: clamp(22px, 3.2vh, 40px) 34px clamp(18px, 2.4vh, 30px);
  box-shadow: 0 26px 60px rgba(80,40,120,0.14);
  animation: ba-card-glow 6.4s ease-in-out infinite;
}
/* AFTER is the LIGHTER container (clean bright white — the improved state);
   BEFORE carries a soft pink tint (its theme), so it reads a touch darker. */
#hd-continuation .ba-after  { background: rgba(255, 255, 255, 0.78); }
#hd-continuation .ba-before { background: linear-gradient(180deg, rgba(255,228,240,0.62), rgba(252,221,236,0.5)); }
/* Soft ambient glow pulse, out of sync between the two panels. */
#hd-continuation .ba-before { animation-delay: 0s; }
#hd-continuation .ba-after  { animation-delay: 3.2s; }
@keyframes ba-card-glow {
  0%, 100% { box-shadow: 0 26px 60px rgba(80,40,120,0.14); }
  50%      { box-shadow: 0 26px 60px rgba(80,40,120,0.14), 0 0 46px rgba(124,58,237,0.18); }
}
#hd-continuation .ba-pill {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); margin: 0;   /* centered on the card's top edge, like the reference */
  display: inline-block; padding: 9px 22px; border-radius: 30px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.6px;
  box-shadow: 0 8px 20px rgba(80,40,120,0.14);
}
#hd-continuation .ba-pill--before { background: #fde3ef; color: #E42785; }
#hd-continuation .ba-pill--after { background: var(--purple); color: #fff; }
#hd-continuation .ba-card-title { margin: 0 0 clamp(8px, 1.4vh, 18px); font-size: clamp(19px, 1.5vw, 23px); font-weight: 700; line-height: 1.3; }
#hd-continuation .ba-card-title--before { color: #E42785; }
#hd-continuation .ba-card-title--after { color: var(--purple); }
#hd-continuation .ba-list { list-style: none; margin: 0; padding: 0; }
#hd-continuation .ba-list li {
  display: flex; align-items: center; gap: 14px; padding: clamp(6px, 1vh, 12px) 0; font-size: clamp(14px, 1.05vw, 15.5px);
  color: #3a2a55; border-bottom: 1px dashed rgba(228, 39, 133, 0.22);
}
#hd-continuation .ba-list--after li { border-bottom-color: rgba(124, 58, 237, 0.24); }
#hd-continuation .ba-list li:last-child { border-bottom: none; }
#hd-continuation .ba-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; }
#hd-continuation .ba-ico--x { background: #E42785; }
#hd-continuation .ba-ico--check { background: var(--purple); }
#hd-continuation .ba-arrow {
  position: relative;
  align-self: center; justify-self: center; margin-top: 0;   /* centered between the cards */
  width: 54px; height: 54px; border-radius: 50%; color: var(--purple);
  /* Vibrant pink->purple gradient RING (the reference look), white center via
     an inset ::before, glyph lifted above it. */
  background: linear-gradient(135deg, #E42785, #C14CFA 55%, var(--purple));
  display: grid; place-items: center;
  box-shadow: 0 14px 32px rgba(196,76,250,0.4);
}
#hd-continuation .ba-arrow::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: #fff; pointer-events: none;
}
#hd-continuation .ba-arrow-glyph { position: relative; z-index: 1; }
/* Gentle pulsing ring drawing the eye to the before->after transition. */
#hd-continuation .ba-arrow::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(124,58,237,0.45); pointer-events: none;
  animation: ba-arrow-ring 2.4s ease-out infinite;
}
@keyframes ba-arrow-ring {
  0%   { transform: scale(0.85); opacity: 0.9; }
  80%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}
/* Inner glyph nudges right-and-back on a slow loop, implying the before→after direction. */
#hd-continuation .ba-arrow-glyph { animation: ba-arrow-slide 1.8s ease-in-out infinite; }
@keyframes ba-arrow-slide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

#hd-continuation .ba-closing { position: relative; z-index: 1; text-align: center; margin-top: 0; padding: 0 20px; }
#hd-continuation .ba-kicker { margin: 0; font-size: clamp(16px, 1.5vw, 22px); color: #4a3a63; font-weight: 500; }
#hd-continuation .ba-close-title { margin: 6px 0 0; font-weight: 800; font-size: clamp(30px, 5.2vw, 78px); line-height: 1.05; }
/* "to grow your brand." reads a step smaller than "the right place" above it. */
#hd-continuation .ba-close-title .ba-orange { font-size: 0.8em; }
#hd-continuation .ba-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 740px; margin: clamp(30px, 4.6vh, 60px) auto 0; }
#hd-continuation .ba-feature {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(124,58,237,0.18); border-radius: 18px; padding: 24px 18px;
  transition: translate 0.35s cubic-bezier(0.22,0.9,0.24,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Playful scattered tilt lives in continuation-motion.js (GSAP `rotation`) — a
   CSS `rotate:` here gets cleared by GSAP when it takes over the transform. */
#hd-continuation .ba-feature:hover {
  translate: 0 -6px; border-color: rgba(124,58,237,0.4);   /* individual translate composes with GSAP's rotation transform */
  box-shadow: 0 18px 34px rgba(124,58,237,0.22);
}
#hd-continuation .ba-feature-ico {
  width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; background: #fff; color: var(--purple);
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(124,58,237,0.22);
  transform-origin: 50% 50%; animation: ba-feature-breathe 4.2s ease-in-out infinite;
}
/* Very gentle idle breathe, out of sync across the three closing feature icons. */
#hd-continuation .ba-feature:nth-child(1) .ba-feature-ico { animation-delay: 0s; }
#hd-continuation .ba-feature:nth-child(2) .ba-feature-ico { animation-delay: 1.1s; }
#hd-continuation .ba-feature:nth-child(3) .ba-feature-ico { animation-delay: 2.3s; }
@keyframes ba-feature-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
#hd-continuation .ba-feature h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--purple); }
#hd-continuation .ba-feature p { margin: 0; font-size: 12.5px; color: #5b4a70; line-height: 1.55; }
#hd-continuation .ba-closing-copy { max-width: 760px; margin: clamp(34px, 5vh, 66px) auto 0; font-size: 13.5px; color: #5b4a70; line-height: 1.75; }
#hd-continuation .ba-chevron {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: clamp(16px, 2.5vh, 36px);
  border-radius: 50%; color: var(--purple); border: 1px solid rgba(124,58,237,0.3);
  animation: ba-bounce 1.8s ease-in-out infinite;
}
@keyframes ba-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---- PERF: freeze the section's decorative `infinite` CSS loops while off-
   screen. continuation-motion.js toggles `.anim-live` on #hd-continuation via
   an IntersectionObserver (generous rootMargin so they're already running by
   the time the section scrolls in) — paused by default costs nothing, and
   resuming mid-cycle is invisible for an ambient loop. GSAP ScrollTrigger
   tweens (entries, deco parallax, floats) are untouched — only bare CSS
   `@keyframes ... infinite` loops are gated here. */
#hd-continuation .service-card--hi .service-ico,
#hd-continuation .service-card--hi .service-ico::after,
#hd-continuation .service-card--hi::after,
#hd-continuation .ba-particle,
#hd-continuation .ba-spark,
#hd-continuation .ba-fly-path,
#hd-continuation .deco-tl,
#hd-continuation .deco-tr,
#hd-continuation .deco-bl,
#hd-continuation .deco-br,
#hd-continuation .ba-purple,
#hd-continuation .ba-orange,
#hd-continuation .ba-card,
#hd-continuation .ba-arrow::after,
#hd-continuation .ba-arrow-glyph,
#hd-continuation .ba-feature-ico,
#hd-continuation .ba-chevron {
  animation-play-state: paused;
}
#hd-continuation.anim-live .service-card--hi .service-ico,
#hd-continuation.anim-live .service-card--hi .service-ico::after,
#hd-continuation.anim-live .service-card--hi::after,
#hd-continuation.anim-live .ba-spark,
#hd-continuation.anim-live .ba-particle,
#hd-continuation.anim-live .ba-fly-path,
#hd-continuation.anim-live .deco-tl,
#hd-continuation.anim-live .deco-tr,
#hd-continuation.anim-live .deco-bl,
#hd-continuation.anim-live .deco-br,
#hd-continuation.anim-live .ba-purple,
#hd-continuation.anim-live .ba-orange,
#hd-continuation.anim-live .ba-card,
#hd-continuation.anim-live .ba-arrow::after,
#hd-continuation.anim-live .ba-arrow-glyph,
#hd-continuation.anim-live .ba-feature-ico,
#hd-continuation.anim-live .ba-chevron {
  animation-play-state: running;
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  /* below the desktop fold, let both sections grow & scroll naturally */
  #hd-continuation .ba-fold { min-height: 0; display: block; }
  #hd-continuation .before-after { padding-top: 90px; }
  #hd-continuation .ba-closing { padding-bottom: 70px; }
  #hd-continuation .statement { align-items: stretch; height: auto; overflow: visible; padding: 70px 0; }
  #hd-continuation .results { height: auto; overflow: visible; display: block; padding: 60px 0; }
  #hd-continuation .glass-card { width: 100%; }
  #hd-continuation .dashed-circle, #hd-continuation .head-badges { display: none; }
  #hd-continuation .dashboard { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
  #hd-continuation .stat-card { position: static !important; transform: none !important; width: 100% !important; }
  #hd-continuation .revenue-card, #hd-continuation .outputs-card { grid-column: auto; max-width: 100%; margin-left: 0; }
  #hd-continuation .niche-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  #hd-continuation .niche:nth-child(odd)::before { display: none; }

  #hd-continuation .service-grid { grid-template-columns: repeat(2, 1fr); }
  #hd-continuation .service-card--hi { transform: none; }
  #hd-continuation .service-card--hi:hover { transform: translateY(-6px); }

  #hd-continuation .deco-wrap { display: none; }
  #hd-continuation .ba-fly { display: none; }  /* connectors read "between the decos" — pointless once decos are hidden */
  #hd-continuation .ba-grid { grid-template-columns: 1fr; max-width: 520px; }
  #hd-continuation .ba-arrow { margin: 8px auto; transform: rotate(90deg); }
  #hd-continuation .ba-feature-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 560px) {
  #hd-continuation .page { padding: 40px 18px 0; }
  #hd-continuation .glass-card { padding: 28px; }
  #hd-continuation .glass-card p { font-size: 17px; }
  #hd-continuation .revenue-amount { font-size: 32px; }
  #hd-continuation .niches { margin: 20px -18px 30px; padding: 30px 22px; }
  #hd-continuation .niche-grid { grid-template-columns: 1fr; }
  #hd-continuation .niche::before { display: none !important; }

  #hd-continuation .service-grid { grid-template-columns: 1fr; }
  #hd-continuation .before-after { margin: 0 -18px; padding: 90px 18px 0; }
  #hd-continuation .ba-title, #hd-continuation .ba-close-title { font-size: 30px; }
  #hd-continuation .ba-card { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #hd-continuation .ba-chevron, #hd-continuation .deco { animation: none; }
  #hd-continuation .service-card--hi::after,
  #hd-continuation .ba-purple, #hd-continuation .ba-orange,
  #hd-continuation .ba-arrow::after,
  #hd-continuation .ba-card { animation: none; }
  #hd-continuation .ba-arrow-glyph,
  #hd-continuation .ba-feature-ico,
  #hd-continuation .service-card--hi .service-ico,
  #hd-continuation .service-card--hi .service-ico::after,
  #hd-continuation .seam-crest,
  #hd-continuation .bk { animation: none; }
  #hd-continuation .service-card--hi .service-ico::after { opacity: 0; }
  #hd-continuation .ba-particle, #hd-continuation .ba-spark, #hd-continuation .ba-fly-path { animation: none; opacity: 0.4; }
  #hd-continuation .ba-fly-spark { display: none; }  /* SMIL animateMotion isn't a CSS animation — hide the riding glyph outright */
}

/* ═══════════════════════════════════════════════════════════════
   OUR SERVICES — case-study overlay (service-detail.js)
   Body-level + fixed so it escapes the transformed #hd-continuation .page.
   The moving card is a clone that lives OUTSIDE #hd-continuation, so it can't
   inherit the scoped .service-card rules — its lit look is mirrored below.
   ═══════════════════════════════════════════════════════════════ */
#service-detail {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden; pointer-events: none;
  --sd-purple: #7c3aed; --sd-purple-lt: #a855f7; --sd-violet: #7b5bd6;
}
#service-detail.open { visibility: visible; pointer-events: auto; }

#service-detail .sd-backdrop {
  position: absolute; inset: 0; opacity: 0; cursor: none;
  background:
    radial-gradient(125% 105% at 50% 44%, rgba(12,5,22,0.30), rgba(4,2,9,0.88) 78%),
    rgba(6,3,12,0.5);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}

#service-detail .sd-close {
  position: fixed; top: 22px; right: 26px; z-index: 5; opacity: 0;
  width: 44px; height: 44px; border-radius: 50%; cursor: none;
  display: grid; place-items: center; color: #fff;
  background: rgba(28,15,43,0.72); border: 1px solid rgba(168,85,247,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transition: background 0.25s ease, transform 0.35s ease;
}
#service-detail .sd-close:hover { background: var(--sd-purple); transform: rotate(90deg); }

#service-detail .sd-stage { position: absolute; inset: 0; perspective: 1400px; }

/* ── the moving card clone (always shown in its lit / featured state) ── */
#service-detail .sd-card {
  box-sizing: border-box; position: relative; text-align: center; overflow: hidden;
  width: 300px; padding: 34px 24px 30px; border-radius: 22px;
  background: linear-gradient(165deg, var(--sd-purple-lt), var(--sd-purple) 70%, var(--sd-violet));
  border: 1px solid rgba(255,255,255,0.22); color: #fff;
  box-shadow: 0 0 72px rgba(124,58,237,0.6), 0 30px 64px rgba(0,0,0,0.55);
  will-change: transform;
}
#service-detail .sd-card .service-ico {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,0.2); color: #fff;
}
#service-detail .sd-card .service-name { margin: 0; font-size: 18.5px; font-weight: 700; color: #fff; line-height: 1.3; }
#service-detail .sd-card .service-rule { display: block; width: 56%; margin: 16px auto; border-top: 2px dashed rgba(255,255,255,0.4); }
#service-detail .sd-card .service-desc { margin: 0; font-size: 13px; color: #ece3ff; line-height: 1.65; }
#service-detail .sd-card .service-cursor { display: none; }

/* ── the case-study panel ── */
#service-detail .sd-panel-pos {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: min(46vw, 620px);
}
#service-detail .sd-panel-pos.sd-left  { left: 46%; }
#service-detail .sd-panel-pos.sd-right { right: 46%; }
#service-detail .sd-panel {
  --sd-accent: #8b5cf6;
  background: linear-gradient(180deg, rgba(30,17,47,0.94), rgba(16,8,28,0.94));
  border: 1px solid rgba(168,85,247,0.32); border-radius: 24px;
  padding: 26px 28px 22px; color: #fff;
  box-shadow: 0 0 60px rgba(124,58,237,0.3), 0 30px 70px rgba(0,0,0,0.55);
  will-change: transform, opacity;
}
#service-detail .sd-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sd-purple-lt);
}
#service-detail .sd-panel-title { margin: 6px 0 4px; font-size: clamp(19px, 2vw, 25px); font-weight: 800; line-height: 1.15; }
#service-detail .sd-panel-tag { margin: 0 0 18px; font-size: 13.5px; color: #c4b8dc; line-height: 1.5; }

#service-detail .sd-preview { margin-bottom: 12px; }
#service-detail .sd-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#service-detail .sd-panel-note { margin-top: 16px; font-size: 11.5px; color: #8f83ab; text-align: center; font-style: italic; }

/* ── media placeholder tiles ── */
#service-detail .sd-tile {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--sd-accent) 55%, transparent), transparent 70%),
    linear-gradient(150deg, rgba(124,58,237,0.32), rgba(10,5,20,0.55));
  border: 1px solid rgba(168,85,247,0.28);
}
#service-detail .sd-tile--big { aspect-ratio: 16 / 9; border-radius: 16px; }
#service-detail .sd-tile-glyph {
  display: grid; place-items: center; width: 100%; color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
#service-detail .sd-tile--video .sd-tile-glyph { color: #fff; }
#service-detail .sd-tile--video .sd-tile-glyph .sd-glyph {
  padding: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35);
  box-sizing: content-box;
}
#service-detail .sd-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: linear-gradient(0deg, rgba(6,3,12,0.78), transparent);
}
#service-detail .sd-tile-label { font-size: 11.5px; font-weight: 600; color: #fff; }
#service-detail .sd-tile--big .sd-tile-label { font-size: 13.5px; }
#service-detail .sd-tile-meta {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; color: #fff;
  padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25); white-space: nowrap;
}

/* ── simple stacked mode (coarse pointer / narrow / reduced-motion) ── */
#service-detail.stacked .sd-stage {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  overflow-y: auto; overflow-x: hidden; padding: 78px 18px 40px; perspective: none;
}
#service-detail.stacked .sd-card {
  position: static !important; transform: none !important;
  width: min(86vw, 340px); height: auto !important; margin: 0 !important; flex: none;
}
#service-detail.stacked .sd-panel-pos {
  position: static !important; transform: none !important;
  width: min(92vw, 560px); flex: none;
}
#service-detail.stacked .sd-thumbs { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 560px) {
  #service-detail .sd-panel { padding: 20px 18px 18px; }
  #service-detail .sd-thumbs { gap: 9px; }
}