/* ============================================================
   Forge landing · WOW effects
   1  spotlight cursor (hero)
   2  title reveal stagger (.hero__title, .cta-card__title)
   3  accent gradient animado
   4  grid lines breathing
   5  floating orbs
   6  mockup tilt 3D (data-tilt)
   7  terminal auto-typing (clip-path reveal)
   8  terminal blinking cursor
   9  mockup url favicon pulse
   10 build success flash
   11 count-up scramble (handled in effects.js)
   12 underline traveling between metrics
   13 stagger reveal feature cards (data-stagger)
   14 feature cards tilt 3D (data-tilt)
   15 feature card icon pulse on enter
   16 feature card animated border on hover
   17 how-it-works connecting rail
   18 how-it-works numbers rotateX entry
   19 pricing pro animated border
   20 pricing tier hover levitation
   21 pricing checks SVG draw on enter
   22 magnetic CTA (handled in effects.js)
   23 primary CTA glow pulse
   24 ripple click (handled in effects.js)
   25 button arrow shift on hover
   26 footer spark trail rising
   ============================================================ */

/* ============= 1 · spotlight cursor ============= */
.hero__spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 30%),
    rgba(242, 144, 48, 0.18) 0%,
    rgba(242, 144, 48, 0.06) 30%,
    transparent 60%
  );
  transition: background 200ms ease;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 2; }

/* ============= 2 · title reveal stagger ============= */
.hero__title [data-word],
.cta-card__title [data-word] {
  display: inline-block;
  /* extend the bbox so descenders ("g", "p", "j") are not clipped by
     background-clip: text or by the span's inline-block bbox. */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  filter: blur(6px);
  transition:
    opacity 600ms cubic-bezier(.2,.8,.2,1) calc(var(--w, 0) * 60ms),
    transform 700ms cubic-bezier(.2,.8,.2,1) calc(var(--w, 0) * 60ms),
    filter 600ms ease calc(var(--w, 0) * 60ms);
}
.hero__title.is-revealed [data-word],
.cta-card__title.is-revealed [data-word] {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ============= 3 · accent gradient animado =============
   Note: background-clip is NOT inherited, so a wrapped .accent loses its
   gradient on the inner [data-word] spans (they have transforms → own
   stacking context). We apply the gradient on BOTH the .accent fallback
   and on each word individually. */
.hero__title .accent,
.hero__title .accent [data-word] {
  background: linear-gradient(
    100deg,
    var(--forge-accent) 0%,
    #FFB75E 25%,
    var(--forge-accent) 50%,
    #FFB75E 75%,
    var(--forge-accent) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: accentShift 6s linear infinite;
}
@keyframes accentShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============= 4 · grid lines breathing ============= */
.hero::after {
  animation: gridBreathe 8s ease-in-out infinite;
}
@keyframes gridBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ============= 5 · floating orbs ============= */
.hero__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.42;
  animation: orbFloat 14s ease-in-out infinite;
}
.orb--1 {
  width: 420px; height: 420px;
  left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(242,144,48,0.55) 0%, transparent 70%);
  animation-duration: 18s;
}
.orb--2 {
  width: 280px; height: 280px;
  right: 10%; top: 20%;
  background: radial-gradient(circle, rgba(255,183,94,0.45) 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: -4s;
}
.orb--3 {
  width: 320px; height: 320px;
  right: -60px; bottom: -100px;
  background: radial-gradient(circle, rgba(242,144,48,0.4) 0%, transparent 70%);
  animation-duration: 16s;
  animation-delay: -8s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* ============= 6 · mockup tilt 3D ============= */
.mockup {
  transform-style: preserve-3d;
  perspective: 1500px;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.mockup__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  mix-blend-mode: overlay;
  z-index: 5;
}
.mockup.is-active .mockup__shine {
  animation: mockupShine 1.6s ease;
}
@keyframes mockupShine {
  0%   { background-position: -100% 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0; }
}

/* ============= 7 · terminal auto-typing ============= */
.mockup__terminal__line {
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: termTyping 0.55s cubic-bezier(.7,0,.4,1) forwards;
}
@keyframes termTyping {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  15%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ============= 8 · terminal blinking cursor ============= */
.mockup__terminal__line:last-child::after {
  content: "▊";
  display: inline-block;
  margin-left: 4px;
  color: var(--forge-accent);
  animation: cursorBlink 1s steps(2) infinite;
  animation-delay: 2.8s;
  opacity: 0;
}
@keyframes cursorBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ============= 9 · mockup url dot pulse ============= */
.mockup__url::before {
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

/* ============= 10 · build progress success flash ============= */
.mockup__build__progress span {
  animation: buildProgressFlash 4.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes buildProgressFlash {
  0%   { width: 0;    background: var(--forge-accent); box-shadow: none; }
  60%  { width: 78%;  background: var(--forge-accent); }
  88%  { width: 100%; background: var(--forge-success); box-shadow: 0 0 18px rgba(22,163,74,0.6); }
  92%  { background: var(--forge-success); }
  100% { width: 100%; background: var(--forge-accent); box-shadow: none; }
}

/* ============= 12 · trust metric underline travel ============= */
.trust__metrics { position: relative; }
.trust__metric { position: relative; transition: transform 300ms ease; cursor: default; }
.trust__metric:hover { transform: translateY(-3px); }
.trust__metric::after {
  content: "";
  position: absolute;
  left: 30%; right: 30%;
  bottom: -8px;
  height: 2px;
  background: var(--forge-accent);
  transform: scaleX(0);
  transition: transform 300ms ease;
  transform-origin: center;
  border-radius: var(--forge-r-pill);
}
.trust__metric:hover::after { transform: scaleX(1); }

/* ============= 13 · stagger reveal grid items ============= */
[data-stagger] > * {
  --stagger-delay: 0ms;
}
[data-stagger] > *:nth-child(1) { --stagger-delay: 0ms; }
[data-stagger] > *:nth-child(2) { --stagger-delay: 80ms; }
[data-stagger] > *:nth-child(3) { --stagger-delay: 160ms; }
[data-stagger] > *:nth-child(4) { --stagger-delay: 240ms; }
[data-stagger] > *:nth-child(5) { --stagger-delay: 320ms; }
[data-stagger] > *:nth-child(6) { --stagger-delay: 400ms; }
[data-stagger] > *:nth-child(7) { --stagger-delay: 480ms; }
[data-stagger] > .reveal {
  transition: opacity 700ms ease var(--stagger-delay), transform 700ms ease var(--stagger-delay);
}

/* ============= 14 · feature card tilt 3D ============= */
.tilt {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}

/* ============= 15 · feature card icon pulse on enter ============= */
.feat-card.is-in .feat-card__icon {
  animation: iconPop 700ms cubic-bezier(.5,1.5,.5,1) 200ms both;
}
@keyframes iconPop {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0.4; }
  60%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0);   opacity: 1; }
}

/* ============= 16 · feature card glow halo on hover =============
   Halo perimetral: borde acentuado + ring + sombra naranja difusa.
   No conic-gradient — buscamos un brillo limpio sobre el marco. */
.feat-card {
  position: relative;
  isolation: isolate;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 280ms ease,
    border-color 280ms ease;
}
.feat-card:hover {
  border-color: rgba(242,144,48,0.55);
  box-shadow:
    0 0 0 1px rgba(242,144,48,0.45),
    0 18px 48px rgba(242,144,48,0.18),
    0 24px 60px rgba(14,15,17,0.08);
}
.feat-card:hover .feat-card__icon {
  background: var(--forge-accent);
  color: var(--forge-text-on-accent);
  box-shadow: 0 8px 24px rgba(242,144,48,0.45);
}
.feat-card .feat-card__icon { transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease; }

/* ============= 17 · how-it-works connecting rail ============= */
.how__steps { position: relative; }
[data-rail]::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(48px / 2);
  right: calc(48px / 2);
  height: 2px;
  background: linear-gradient(to right,
    var(--forge-ink-800) 0%,
    var(--forge-accent) 50%,
    var(--forge-accent) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s cubic-bezier(.7,0,.3,1) 200ms;
  border-radius: var(--forge-r-pill);
  opacity: 0.6;
}
.how.is-in [data-rail]::before { transform: scaleX(1); }

/* ============= 18 · how-it-works num rotateX entry ============= */
.how__num {
  transform: rotateX(-90deg);
  transform-origin: center bottom;
  transition: transform 700ms cubic-bezier(.6,1.5,.4,1);
}
.how__step:nth-child(1).is-in .how__num { transition-delay: 0ms;   }
.how__step:nth-child(2).is-in .how__num { transition-delay: 220ms; }
.how__step:nth-child(3).is-in .how__num { transition-delay: 440ms; }
.how__step.is-in .how__num { transform: rotateX(0); }

/* ============= 19 · pricing pro static glow border =============
   (was a rotating conic gradient — caused a visible rotating square
   bug because overflow had to be visible for the pulsing rings) */
.tier--pro {
  position: relative;
  isolation: isolate;
  border: 1.5px solid rgba(242,144,48,0.55);
  box-shadow:
    0 0 0 4px rgba(242,144,48,0.12),
    0 24px 48px #0E0F1140,
    0 0 32px rgba(242,144,48,0.18);
}

/* ============= 20 · pricing tier hover levitation ============= */
.tier {
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
}
.tier:not(.tier--pro):hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0E0F1118;
}
.tier--pro:hover {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 32px 60px #0E0F1160;
}

/* ============= 21 · pricing checks draw on enter ============= */
.tier__feats .icon {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 600ms ease;
}
.tier.is-in .tier__feats li:nth-child(1) .icon { transition-delay: 100ms; }
.tier.is-in .tier__feats li:nth-child(2) .icon { transition-delay: 180ms; }
.tier.is-in .tier__feats li:nth-child(3) .icon { transition-delay: 260ms; }
.tier.is-in .tier__feats li:nth-child(4) .icon { transition-delay: 340ms; }
.tier.is-in .tier__feats li:nth-child(5) .icon { transition-delay: 420ms; }
.tier.is-in .tier__feats li:nth-child(6) .icon { transition-delay: 500ms; }
.tier.is-in .tier__feats .icon { stroke-dashoffset: 0; }

/* ============= 22 · magnetic CTA (CSS hooks; JS does the math) ============= */
.btn--magnetic {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 120ms ease;
  will-change: transform;
}

/* ============= 23 · primary CTA glow pulse ============= */
.btn--glow {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0  6px 18px rgba(242,144,48,0.35),
                         0  0  0   0 rgba(242,144,48,0.0); }
  50%      { box-shadow: 0 12px 36px rgba(242,144,48,0.65),
                         0  0  20px 4px rgba(242,144,48,0.35); }
}

/* ============= 24 · ripple (handled in JS but CSS for the span) ============= */
.btn { position: relative; }
.ripple-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: rippleAnim 600ms ease-out forwards;
  mix-blend-mode: screen;
}
.btn--ghost-light .ripple,
.btn--ink .ripple { background: rgba(0,0,0,0.12); }
@keyframes rippleAnim {
  to { transform: scale(2.5); opacity: 0; }
}

/* ============= 25 · arrow shift on hover ============= */
.btn .icon { transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.btn:hover .icon { transform: translateX(4px); }
.btn--ghost-dark:hover .icon,
.btn--ghost-light:hover .icon { transform: translateX(2px); }

/* ============= 26 · footer spark trail ============= */
.footer { position: relative; overflow: hidden; }
.footer__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.footer__sparks .sp {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--forge-accent);
  box-shadow: 0 0 8px var(--forge-accent), 0 0 14px rgba(242,144,48,0.6);
  opacity: 0;
  animation: sparkRise 5s linear infinite;
}
.footer__sparks .sp:nth-child(1)  { left:  6%; animation-delay:  0s;   animation-duration: 5.4s; }
.footer__sparks .sp:nth-child(2)  { left: 13%; animation-delay: 1.2s;  animation-duration: 6.0s; }
.footer__sparks .sp:nth-child(3)  { left: 22%; animation-delay: 2.4s;  animation-duration: 4.8s; }
.footer__sparks .sp:nth-child(4)  { left: 30%; animation-delay: 0.6s;  animation-duration: 5.6s; }
.footer__sparks .sp:nth-child(5)  { left: 41%; animation-delay: 3.1s;  animation-duration: 5.2s; }
.footer__sparks .sp:nth-child(6)  { left: 50%; animation-delay: 1.8s;  animation-duration: 6.4s; }
.footer__sparks .sp:nth-child(7)  { left: 60%; animation-delay: 4.0s;  animation-duration: 5.8s; }
.footer__sparks .sp:nth-child(8)  { left: 68%; animation-delay: 2.2s;  animation-duration: 5.0s; }
.footer__sparks .sp:nth-child(9)  { left: 76%; animation-delay: 0.9s;  animation-duration: 6.2s; }
.footer__sparks .sp:nth-child(10) { left: 84%; animation-delay: 3.6s;  animation-duration: 4.6s; }
.footer__sparks .sp:nth-child(11) { left: 90%; animation-delay: 1.4s;  animation-duration: 6.0s; }
.footer__sparks .sp:nth-child(12) { left: 95%; animation-delay: 2.8s;  animation-duration: 5.4s; }
.footer .container { position: relative; z-index: 1; }
@keyframes sparkRise {
  0%   { transform: translateY(0)      scale(1);   opacity: 0;   }
  10%  { opacity: 0.9; }
  60%  { opacity: 0.6; }
  100% { transform: translateY(-260px) scale(0.4); opacity: 0;   }
}

/* ============================================================
   PARTICLES & DETAILS — added per request
   - hero sparks (rising)
   - hero light beams (sweeping)
   - trust strip twinkle stars
   - features motes (drifting dots)
   - how rail traveling dot
   - pricing pro sparks
   - cta-final sparks
   ============================================================ */

/* ---- shared spark base (footer + hero + cta + tier) ---- */
.hero__sparks,
.cta-card__sparks,
.tier__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__sparks .sp,
.cta-card__sparks .sp,
.tier__sparks .sp {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--forge-accent);
  box-shadow: 0 0 8px var(--forge-accent), 0 0 14px rgba(242,144,48,0.6);
  opacity: 0;
  animation: sparkRise 6s linear infinite;
}

/* ---- hero sparks: 16 across the width ---- */
.hero__sparks { z-index: 1; }
.hero__sparks .sp:nth-child(1)  { left:  4%; animation-delay:  0.2s; animation-duration: 6.4s; }
.hero__sparks .sp:nth-child(2)  { left: 11%; animation-delay:  2.0s; animation-duration: 5.6s; }
.hero__sparks .sp:nth-child(3)  { left: 18%; animation-delay:  4.0s; animation-duration: 7.2s; }
.hero__sparks .sp:nth-child(4)  { left: 25%; animation-delay:  1.0s; animation-duration: 6.0s; }
.hero__sparks .sp:nth-child(5)  { left: 32%; animation-delay:  3.4s; animation-duration: 7.0s; }
.hero__sparks .sp:nth-child(6)  { left: 40%; animation-delay:  0.6s; animation-duration: 5.4s; }
.hero__sparks .sp:nth-child(7)  { left: 48%; animation-delay:  2.6s; animation-duration: 6.8s; }
.hero__sparks .sp:nth-child(8)  { left: 55%; animation-delay:  4.6s; animation-duration: 5.8s; }
.hero__sparks .sp:nth-child(9)  { left: 62%; animation-delay:  1.6s; animation-duration: 7.4s; }
.hero__sparks .sp:nth-child(10) { left: 69%; animation-delay:  3.0s; animation-duration: 5.2s; }
.hero__sparks .sp:nth-child(11) { left: 76%; animation-delay:  0.8s; animation-duration: 6.6s; }
.hero__sparks .sp:nth-child(12) { left: 82%; animation-delay:  2.4s; animation-duration: 7.0s; }
.hero__sparks .sp:nth-child(13) { left: 88%; animation-delay:  4.2s; animation-duration: 5.6s; }
.hero__sparks .sp:nth-child(14) { left: 93%; animation-delay:  1.4s; animation-duration: 6.4s; }
.hero__sparks .sp:nth-child(15) { left: 96%; animation-delay:  3.6s; animation-duration: 6.0s; }
.hero__sparks .sp:nth-child(16) { left:  7%; animation-delay:  5.0s; animation-duration: 6.2s; }

/* ---- hero light beams (vertical sweeping pillars) ---- */
.hero__beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  opacity: 0.55;
}
.hero__beams .beam {
  position: absolute;
  top: -10%; bottom: -10%;
  width: 220px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242,144,48,0.10) 30%,
    rgba(255,183,94,0.18) 50%,
    rgba(242,144,48,0.10) 70%,
    transparent 100%
  );
  filter: blur(24px);
  transform: translateX(-100%) skewX(-18deg);
  animation: beamSweep 12s ease-in-out infinite;
}
.hero__beams .beam:nth-child(1) { left:  10%; animation-delay:  0s;   }
.hero__beams .beam:nth-child(2) { left:  45%; animation-delay: -4s;   }
.hero__beams .beam:nth-child(3) { left:  78%; animation-delay: -8s;   }
@keyframes beamSweep {
  0%   { transform: translateX(-200%) skewX(-18deg); opacity: 0;    }
  20%  { opacity: 1; }
  60%  { opacity: 0.7; }
  100% { transform: translateX(200%)  skewX(-18deg); opacity: 0;    }
}

/* ---- trust strip twinkle stars ---- */
.trust { position: relative; overflow: hidden; }
.trust__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.trust__stars .star {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--forge-accent);
  box-shadow: 0 0 6px var(--forge-accent);
  opacity: 0;
  animation: twinkle 3.6s ease-in-out infinite;
}
.trust__stars .star:nth-child(1) { left:  8%;  top: 30%; animation-delay: 0s;   }
.trust__stars .star:nth-child(2) { left: 19%;  top: 70%; animation-delay: 1.2s; }
.trust__stars .star:nth-child(3) { left: 33%;  top: 25%; animation-delay: 2.0s; }
.trust__stars .star:nth-child(4) { left: 47%;  top: 65%; animation-delay: 0.6s; }
.trust__stars .star:nth-child(5) { left: 58%;  top: 20%; animation-delay: 2.6s; }
.trust__stars .star:nth-child(6) { left: 72%;  top: 60%; animation-delay: 1.6s; }
.trust__stars .star:nth-child(7) { left: 84%;  top: 32%; animation-delay: 0.4s; }
.trust__stars .star:nth-child(8) { left: 92%;  top: 72%; animation-delay: 2.2s; }
@keyframes twinkle {
  0%, 100% { opacity: 0;   transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1.4); }
}

/* ---- features motes (mini-orbs con glow real) ---- */
.features { position: relative; overflow: hidden; }
.features__motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.features__motes .mote {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(242,144,48,0.85) 0%,
    rgba(242,144,48,0.45) 45%,
    rgba(242,144,48,0)    75%);
  filter: blur(0.5px);
  box-shadow: 0 0 24px rgba(242,144,48,0.55), 0 0 48px rgba(242,144,48,0.25);
  animation: moteFloat 14s ease-in-out infinite;
}
.features__motes .mote:nth-child(1)  { left:  4%; top: 10%; animation-delay:  0s;  animation-duration: 16s; width: 18px; height: 18px; }
.features__motes .mote:nth-child(2)  { left: 14%; top: 78%; animation-delay: -3s;  animation-duration: 14s; }
.features__motes .mote:nth-child(3)  { left: 24%; top: 32%; animation-delay: -6s;  animation-duration: 18s; width: 22px; height: 22px; }
.features__motes .mote:nth-child(4)  { left: 38%; top: 88%; animation-delay: -1s;  animation-duration: 13s; }
.features__motes .mote:nth-child(5)  { left: 48%; top: 18%; animation-delay: -8s;  animation-duration: 17s; width: 14px; height: 14px; }
.features__motes .mote:nth-child(6)  { left: 62%; top: 68%; animation-delay: -4s;  animation-duration: 15s; width: 24px; height: 24px;
  background: radial-gradient(circle, rgba(255,183,94,0.85) 0%, rgba(255,183,94,0.4) 45%, transparent 75%);
  box-shadow: 0 0 28px rgba(255,183,94,0.6), 0 0 56px rgba(255,183,94,0.3); }
.features__motes .mote:nth-child(7)  { left: 74%; top: 14%; animation-delay: -2s;  animation-duration: 19s; }
.features__motes .mote:nth-child(8)  { left: 84%; top: 50%; animation-delay: -7s;  animation-duration: 12s; width: 20px; height: 20px; }
.features__motes .mote:nth-child(9)  { left: 92%; top: 86%; animation-delay: -5s;  animation-duration: 20s; }
.features__motes .mote:nth-child(10) { left: 32%; top: 60%; animation-delay: -2.5s;animation-duration: 16s; width: 14px; height: 14px; }
.features__motes .mote:nth-child(11) { left: 56%; top: 92%; animation-delay: -9s;  animation-duration: 17s; }
.features__motes .mote:nth-child(12) { left: 68%; top: 24%; animation-delay: -3.5s;animation-duration: 15s; width: 18px; height: 18px; }
.features > .container { position: relative; z-index: 1; }
@keyframes moteFloat {
  0%, 100% { transform: translate(0, 0)        scale(1);   }
  25%      { transform: translate(28px, -22px) scale(1.25);}
  50%      { transform: translate(-16px, 28px) scale(0.85);}
  75%      { transform: translate(22px, 12px)  scale(1.15);}
}

/* ---- features bloom · big soft orbs in the bg ---- */
.features__bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.features__bloom .bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: bloomFloat 22s ease-in-out infinite;
}
.features__bloom .bloom--1 {
  width: 520px; height: 520px;
  left: -160px; top: -120px;
  background: radial-gradient(circle, rgba(242,144,48,0.65) 0%, rgba(242,144,48,0) 70%);
  animation-duration: 24s;
}
.features__bloom .bloom--2 {
  width: 460px; height: 460px;
  right: -120px; bottom: -160px;
  background: radial-gradient(circle, rgba(255,183,94,0.55) 0%, rgba(255,183,94,0) 70%);
  animation-duration: 28s;
  animation-delay: -8s;
}
@keyframes bloomFloat {
  0%, 100% { transform: translate(0, 0)        scale(1);    }
  33%      { transform: translate(60px, -40px) scale(1.08); }
  66%      { transform: translate(-50px, 60px) scale(0.92); }
}

/* ---- features streaks · diagonal shooting lights ---- */
.features__streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.features__streaks .streak {
  position: absolute;
  width: 320px; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242,144,48,0.0) 5%,
    rgba(242,144,48,0.85) 50%,
    rgba(255,183,94,0.95) 55%,
    rgba(242,144,48,0) 95%,
    transparent 100%);
  filter: blur(1.5px);
  opacity: 0;
  transform: translateX(-120%) rotate(-22deg);
  animation: streakFly 9s ease-in-out infinite;
}
.features__streaks .streak--1 { top: 22%; left:  5%; animation-delay:  0s;   }
.features__streaks .streak--2 { top: 58%; left: 35%; animation-delay: -3.5s; }
.features__streaks .streak--3 { top: 80%; left: 60%; animation-delay: -6.5s; }
@keyframes streakFly {
  0%   { transform: translateX(-120%) rotate(-22deg); opacity: 0;   }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(220%)  rotate(-22deg); opacity: 0;   }
}

/* ---- how rail traveling dot ---- */
.how__steps { position: relative; }
.rail-dot {
  position: absolute;
  top: 16px;     /* center on the rail line which sits at top:24px height:2px → center 25 */
  left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--forge-accent);
  box-shadow:
    0 0 0 4px rgba(242,144,48,0.25),
    0 0 18px var(--forge-accent),
    0 0 32px rgba(242,144,48,0.5);
  opacity: 0;
  transform: translateX(0);
  z-index: 1;
}
.how.is-in .rail-dot {
  animation: railTravel 4s cubic-bezier(.7,0,.3,1) 200ms forwards;
}
@keyframes railTravel {
  0%   { left: 24px;        opacity: 0; transform: scale(0.4); }
  10%  { opacity: 1;        transform: scale(1); }
  90%  { opacity: 1; }
  100% { left: calc(100% - 36px); opacity: 0; transform: scale(0.6); }
}

/* ---- pricing pro sparks (inside the dark Pro tier) ---- */
.tier__sparks .sp:nth-child(1) { left: 12%; animation-delay: 0.2s; animation-duration: 5.0s; width: 3px; height: 3px; }
.tier__sparks .sp:nth-child(2) { left: 28%; animation-delay: 1.6s; animation-duration: 5.6s; }
.tier__sparks .sp:nth-child(3) { left: 46%; animation-delay: 0.8s; animation-duration: 4.8s; }
.tier__sparks .sp:nth-child(4) { left: 60%; animation-delay: 2.4s; animation-duration: 5.4s; }
.tier__sparks .sp:nth-child(5) { left: 76%; animation-delay: 1.2s; animation-duration: 5.0s; width: 3px; height: 3px; }
.tier__sparks .sp:nth-child(6) { left: 88%; animation-delay: 3.0s; animation-duration: 5.8s; }

/* keep the tier content above sparks + rings */
.tier--pro > *:not(.tier__sparks):not(.tier__rings) { position: relative; z-index: 1; }

/* ---- cta-final sparks (inside the dark CTA card) ---- */
.cta-card__sparks { border-radius: inherit; }
.cta-card__sparks .sp:nth-child(1)  { left:  6%; animation-delay: 0.4s; animation-duration: 5.6s; }
.cta-card__sparks .sp:nth-child(2)  { left: 16%; animation-delay: 2.0s; animation-duration: 6.4s; }
.cta-card__sparks .sp:nth-child(3)  { left: 26%; animation-delay: 1.2s; animation-duration: 5.0s; }
.cta-card__sparks .sp:nth-child(4)  { left: 38%; animation-delay: 3.4s; animation-duration: 6.0s; width: 3px; height: 3px; }
.cta-card__sparks .sp:nth-child(5)  { left: 50%; animation-delay: 0.8s; animation-duration: 5.4s; }
.cta-card__sparks .sp:nth-child(6)  { left: 62%; animation-delay: 2.6s; animation-duration: 6.2s; }
.cta-card__sparks .sp:nth-child(7)  { left: 74%; animation-delay: 1.6s; animation-duration: 5.8s; }
.cta-card__sparks .sp:nth-child(8)  { left: 84%; animation-delay: 3.0s; animation-duration: 5.0s; width: 3px; height: 3px; }
.cta-card__sparks .sp:nth-child(9)  { left: 92%; animation-delay: 0.6s; animation-duration: 6.4s; }
.cta-card__sparks .sp:nth-child(10) { left: 96%; animation-delay: 2.2s; animation-duration: 5.6s; }

/* keep the cta card content above sparks + rings + scanline */
.cta-card > *:not(.cta-card__sparks):not(.cta-card__rings):not(.cta-card__scanline) { position: relative; z-index: 2; }

/* ============================================================
   LIGHT-GREY SECTIONS · ambient backgrounds
   - features: dot grid (subtle)
   - how: constellation (lines + dots, drawing animation)
   - pricing: diagonal stripes (slow scroll) + Pro pulsing rings
   - cta-final: scanline sweep + pulsing rings
   ============================================================ */

/* ---- Features · dot grid (más visible) ---- */
.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(242,144,48,0.42) 2px, transparent 2.2px);
  background-size: 32px 32px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, transparent 95%);
  animation: gridPulse 5s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.7; background-position: 0 0; }
  50%      { opacity: 1;   background-position: 4px 4px; }
}

/* ---- How · constellation ---- */
.how { position: relative; overflow: hidden; }
.how > .container { position: relative; z-index: 1; }
.how__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--forge-accent);
  opacity: 0.55;
  z-index: 0;
}
.how__constellation .lines line {
  stroke: currentColor;
  opacity: 0.35;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: constDraw 6s ease-in-out infinite;
}
.how__constellation .lines line:nth-child(1) { animation-delay: 0.0s; }
.how__constellation .lines line:nth-child(2) { animation-delay: 0.6s; }
.how__constellation .lines line:nth-child(3) { animation-delay: 1.2s; }
.how__constellation .lines line:nth-child(4) { animation-delay: 1.8s; }
.how__constellation .lines line:nth-child(5) { animation-delay: 2.4s; }
.how__constellation .lines line:nth-child(6) { animation-delay: 3.0s; }
.how__constellation .lines line:nth-child(7) { animation-delay: 3.6s; }
@keyframes constDraw {
  0%   { stroke-dashoffset: 320; opacity: 0;   }
  20%  { opacity: 0.45; }
  60%  { stroke-dashoffset: 0;   opacity: 0.45;}
  85%  { stroke-dashoffset: -40; opacity: 0.20;}
  100% { stroke-dashoffset: -320; opacity: 0;  }
}
.how__constellation .dots circle {
  opacity: 0;
  animation: constDot 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.how__constellation .dots circle:nth-child(1) { animation-delay: 0.0s; }
.how__constellation .dots circle:nth-child(2) { animation-delay: 0.6s; }
.how__constellation .dots circle:nth-child(3) { animation-delay: 1.2s; }
.how__constellation .dots circle:nth-child(4) { animation-delay: 1.8s; }
.how__constellation .dots circle:nth-child(5) { animation-delay: 2.4s; }
.how__constellation .dots circle:nth-child(6) { animation-delay: 3.0s; }
.how__constellation .dots circle:nth-child(7) { animation-delay: 3.6s; }
.how__constellation .dots circle:nth-child(8) { animation-delay: 4.2s; }
.how__constellation .dots circle:nth-child(9) { animation-delay: 4.8s; }
@keyframes constDot {
  0%, 100% { opacity: 0;    transform: scale(0.5); }
  20%      { opacity: 0.85; transform: scale(1.4); }
  60%      { opacity: 0.6;  transform: scale(1);   }
}

/* ---- Pricing · diagonal stripes (slow scroll) ---- */
.pricing { position: relative; overflow: hidden; }
.pricing > .container { position: relative; z-index: 1; }
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 28px,
    rgba(242,144,48,0.05) 28px,
    rgba(242,144,48,0.05) 32px
  );
  pointer-events: none;
  animation: stripeScroll 40s linear infinite;
  z-index: 0;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
@keyframes stripeScroll {
  0%   { background-position: 0    0;    }
  100% { background-position: 320px 320px;}
}

/* ---- Pricing · Pro tier pulsing rings ---- */
.tier__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tier__rings .ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(242,144,48,0.6);
  border-radius: inherit;
  opacity: 0;
  animation: ringPulse 3.6s ease-out infinite;
}
.tier__rings .ring:nth-child(1) { animation-delay: 0s;    }
.tier__rings .ring:nth-child(2) { animation-delay: 1.2s;  }
.tier__rings .ring:nth-child(3) { animation-delay: 2.4s;  }
@keyframes ringPulse {
  0%   { opacity: 0.7; transform: scale(1);    }
  60%  { opacity: 0.2; }
  100% { opacity: 0;   transform: scale(1.10); }
}

/* let the rings escape slightly outside the Pro card bounds */
.tier--pro { overflow: visible; }

/* ---- CTA Final · pulsing rings + scanline sweep ---- */
.cta-card { position: relative; overflow: visible; isolation: isolate; }
.cta-card__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cta-card__rings .ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(242,144,48,0.45);
  border-radius: inherit;
  opacity: 0;
  animation: ringPulseLg 4.5s ease-out infinite;
}
.cta-card__rings .ring:nth-child(1) { animation-delay: 0s;   }
.cta-card__rings .ring:nth-child(2) { animation-delay: 1.5s; }
.cta-card__rings .ring:nth-child(3) { animation-delay: 3.0s; }
@keyframes ringPulseLg {
  0%   { opacity: 0.7; transform: scale(1);     }
  60%  { opacity: 0.15;}
  100% { opacity: 0;   transform: scale(1.06); }
}

.cta-card__scanline {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242,144,48,0.0) 10%,
    rgba(242,144,48,0.65) 45%,
    rgba(255,183,94,0.85) 50%,
    rgba(242,144,48,0.65) 55%,
    transparent 90%,
    transparent 100%
  );
  filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  animation: scanlineSweep 7s ease-in-out infinite;
}
@keyframes scanlineSweep {
  0%   { top: 0;     opacity: 0; }
  10%  { opacity: 0.9; }
  60%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { top: 100%;  opacity: 0; }
}

/* ============= reduced motion ============= */
@media (prefers-reduced-motion: reduce) {
  .orb, .hero::after, .btn--glow,
  .mockup__build__progress span,
  .mockup__terminal__line,
  .mockup__terminal__line:last-child::after,
  .mockup__url::before,
  .footer__sparks .sp,
  .hero__sparks .sp,
  .hero__beams .beam,
  .trust__stars .star,
  .features__motes .mote,
  .features__bloom .bloom,
  .features__streaks .streak,
  .features::before,
  .tier__sparks .sp,
  .cta-card__sparks .sp,
  .rail-dot,
  .pricing::before,
  .how__constellation .lines line,
  .how__constellation .dots circle,
  .tier__rings .ring,
  .cta-card__rings .ring,
  .cta-card__scanline {
    animation: none !important;
  }
  .hero__title [data-word],
  .cta-card__title [data-word] {
    opacity: 1; transform: none; filter: none;
  }
}