/* ─── Nav ────────────────────────────────────────────────────── */

#nav {
  padding-block: 0;
}

/* ─── S1: Hero ───────────────────────────────────────────────── */

#hero {
  padding-top: calc(4rem + var(--space-8));
  padding-bottom: var(--space-6);
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#cost {
  padding-top: var(--space-10);
}

#hero > .container {
  position: relative;
  z-index: 1;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__bg .hero-mesh {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  width: 100%;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero__content {
  display: grid;
  gap: var(--space-8);
  max-width: 56ch;
}

.hero__visual {
  width: 100%;
  aspect-ratio: 1;
}

@media (max-width: 1023px) {
  .hero__visual {
    display: none;
  }
}

.hero__headline {
  display: flex;
  flex-direction: column;
}

/* Word-by-word reveal of the yellow line — only when JS has split the words */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: hero-word-in 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(900ms + (var(--i) * 70ms));
  will-change: transform, opacity;
}

@keyframes hero-word-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { opacity: 1; transform: none; animation: none; }
}

/* Without JS the .hero-word class never gets created, so the yellow span renders normally. */

.hero__cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__note {
  font-size: 0.8125rem;
  opacity: 0.4;
}

/* ─── S2: Cost of disorder ───────────────────────────────────── */

#cost {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cost__header {
  margin-bottom: var(--space-12);
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}

.cost__header .eyebrow { margin-inline: auto; }
.cost__header .flow-plot { margin-inline: auto; max-width: 800px; }

.cost__symptoms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-12);
}

.symptom {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-8);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.symptom__arrow {
  color: var(--color-yellow);
  font-weight: var(--weight-bold);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.symptom__title {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.symptom__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.72;
}

.cost__body {
  max-width: 64ch;
}

.cost__body p {
  opacity: 0.8;
  line-height: 1.7;
}

/* ─── S3: Real diagnosis ─────────────────────────────────────── */

#diagnosis .section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.diagnosis__content > * + * {
  margin-top: var(--space-5);
}

.diagnosis__content p {
  opacity: 0.7;
  line-height: 1.7;
}

.diagnosis__content .bold-line {
  font-weight: var(--weight-bold);
  opacity: 1;
  font-size: var(--text-h3);
  line-height: 1.3;
}

.diagnosis__quote {
  position: sticky;
  top: calc(4rem + var(--space-10));
}

/* ─── S4: What BEAI does ─────────────────────────────────────── */

#what .section__inner {
  display: grid;
  gap: var(--space-12);
}

.what__lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.what__lead-text > * + * {
  margin-top: var(--space-5);
}

.what__lead-text p {
  opacity: 0.85;
  line-height: 1.7;
}

.what__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pillar {
  background-color: var(--color-black);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: background-color var(--duration-normal) var(--ease-out-quad);
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-quad);
}

.pillar:hover::before {
  transform: scaleX(1);
}

.pillar__num {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  color: var(--color-yellow);
  display: inline-block;
  transition:
    opacity 600ms 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js .pillar__num {
  opacity: 0;
  transform: translateX(-16px);
}

.js .pillar.is-visible .pillar__num,
.js .reveal.is-visible .pillar__num {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .pillar__num { opacity: 1; transform: none; transition: none; }
}

.pillar__title {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.pillar__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.8;
  flex: 1;
}

/* ─── S5: How it works ───────────────────────────────────────── */

#process .section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.process__header {
  position: sticky;
  top: calc(4rem + var(--space-10));
}

.process__header > * + * {
  margin-top: var(--space-5);
}

.process__header p {
  opacity: 0.65;
  line-height: 1.7;
}

.process__steps {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Markers only — no vertical track line */
.process__steps--enhanced {
  position: relative;
  padding-left: var(--space-6);
}

.step--connected {
  position: relative;
}

.step__marker {
  position: absolute;
  left: calc(-1 * var(--space-6) - 4px);
  /* font-size matches the number so 0.5em lands at its vertical centre */
  font-size: var(--text-h2);
  top: calc(var(--space-5) + 0.5em);
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: background var(--duration-normal) var(--ease-out-quad),
              border-color var(--duration-normal) var(--ease-out-quad),
              transform var(--duration-normal) var(--ease-out-quad);
}

.step--connected.is-active .step__marker {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  transform: scale(1.3);
}

.step--light {
  border-color: rgba(0, 0, 0, 0.1);
}

.step--light .step__num  {
  color: var(--color-yellow);
  opacity: 0.35;
  transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step--light.is-active .step__num {
  opacity: 1;
  transform: scale(1.04);
}
.step--light .step__desc { opacity: 0.7; }

/* ─── S6: Differentiation ────────────────────────────────────── */

#diff .section__inner {
  display: grid;
  gap: var(--space-12);
}

.diff__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: end;
}

.diff__header p {
  opacity: 0.8;
  line-height: 1.7;
}

/* ─── S7: Results ────────────────────────────────────────────── */

#results {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.results__header {
  margin-bottom: var(--space-12);
  max-width: 48ch;
}

.results__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.08);
}

.case__col {
  background-color: var(--color-black);
  padding: var(--space-8);
}

.case__label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.case__col--after .case__label {
  color: var(--color-yellow);
}

.case__col--before .case__label {
  opacity: 0.4;
}

.case__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case__item {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.case__col--before .case__item { opacity: 0.72; }

.case__note {
  font-size: 0.8125rem;
  opacity: 0.35;
  margin-top: var(--space-8);
  font-style: italic;
}

/* ─── Results context + caso real ───────────────────────────── */

.results__context {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.5;
  font-style: italic;
  max-width: 72ch;
  margin-bottom: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caso {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.caso__intro {
  padding: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--space-3);
}

.caso__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.caso__disclaimer {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.45;
  font-style: italic;
}

.caso .case {
  margin: 0;
}

.caso .case__col {
  padding: var(--space-8);
}

.case__items--arrows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.case__items--arrows .case__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.case__items--arrows .case__item:last-child {
  border-bottom: none;
}

.case__items--arrows .case__item::before {
  content: '→';
  color: var(--color-yellow);
  flex-shrink: 0;
  font-weight: var(--weight-bold);
}

/* ─── S8: Services ───────────────────────────────────────────── */

#services .section__inner {
  display: grid;
  gap: var(--space-10);
}

.services__header {
  max-width: 48ch;
}

.services__header > * + * {
  margin-top: var(--space-4);
}

.services__header p {
  opacity: 0.65;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ─── S9: Guarantee ──────────────────────────────────────────── */

#guarantee {
  text-align: center;
}

.guarantee__inner {
  max-width: 56ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.guarantee__label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.5;
}

.guarantee__statement {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: -0.022em;
}

.guarantee__fine {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 44ch;
}

/* ─── S10: FAQ ───────────────────────────────────────────────── */

#faq .section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.faq__header {
  position: sticky;
  top: calc(4rem + var(--space-10));
}

.faq__header > * + * {
  margin-top: var(--space-5);
}

.faq__header p {
  opacity: 0.65;
  line-height: 1.7;
}

/* ─── S11: Final CTA ─────────────────────────────────────────── */

#cta-final {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-final__inner {
  max-width: 52ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.cta-final__tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-yellow);
  color: var(--color-yellow);
}

.cta-final__body {
  opacity: 0.8;
  line-height: 1.7;
}

.cta-final__note {
  font-size: 0.8125rem;
  opacity: 0.35;
}

/* ─── Footer ─────────────────────────────────────────────────── */

.footer {
  padding-block: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.footer__logo-img {
  height: 1.25rem;
  width: auto;
  display: block;
  filter: invert(1);
  margin-bottom: 0.25rem;
}

.footer__tagline {
  font-size: 0.8125rem;
  opacity: 0.35;
  margin-top: 0.25rem;
}

.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-size: 0.875rem;
  opacity: 0.5;
  transition: opacity var(--duration-fast);
}

.footer__link:hover { opacity: 1; }

.footer__copy {
  font-size: 0.8125rem;
  opacity: 0.3;
}

/* ─── S4.5: About ─────────────────────────────────────────────── */

#about .section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about__content > * + * {
  margin-top: var(--space-5);
}

.about__content p {
  opacity: 0.82;
  line-height: 1.7;
}

.about__visual {
  aspect-ratio: 1;
  width: 100%;
}

/* ─── S10.5: Contact (compact) ────────────────────────────────── */

#contact {
  padding-block: var(--space-10);
}

#contact .section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.contact__content > * + * {
  margin-top: var(--space-3);
}

.contact__content p {
  opacity: 0.82;
  line-height: 1.6;
  max-width: 48ch;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-4);
}

.contact__item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-3);
  font-size: 0.9375rem;
  align-items: baseline;
}

.contact__label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.5;
}

.contact__value {
  opacity: 0.9;
  transition: color var(--duration-fast);
}

a.contact__value:hover {
  color: var(--color-yellow);
}

.contact__visual {
  aspect-ratio: 1;
  width: 100%;
}

/* Hide decorative signal radar on tablet & mobile (saves space, no info loss) */
@media (max-width: 1024px) {
  .contact__visual { display: none; }
  #contact .section__inner { grid-template-columns: 1fr; }
}

/* ─── SVG Visuals ─────────────────────────────────────────────── */

/* Hero — system grid */
.system-grid {
  width: 100%;
  height: 100%;
}

.system-grid__path {
  animation: dash 8s linear infinite;
}

@keyframes dash {
  to { stroke-dashoffset: -16; }
}

.node {
  transform-origin: center;
  transform-box: fill-box;
  animation: pulse 3s ease-in-out infinite;
}

.node--1 { animation-delay: 0s; }
.node--2 { animation-delay: 0.6s; }
.node--3 { animation-delay: 1.2s; }
.node--4 { animation-delay: 1.8s; }
.node--5 { animation-delay: 2.4s; }

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.6); opacity: 1; }
}

/* Cost — cumulative chain animation: 1 → 1-2 → 1-2-3 → 1-2-3-4 → reset */
.flow-plot {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.flow-plot__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.flow-label {
  font-family: var(--font-body);
  font-size: 8px;
  fill: rgba(255, 255, 255, 0.55);
  letter-spacing: 1.5px;
  font-weight: var(--weight-medium);
  animation: flow-label-cycle 8s linear infinite;
}
.flow-plot text.flow-label:nth-of-type(1) { animation-delay: 0s; }
.flow-plot text.flow-label:nth-of-type(2) { animation-delay: 0s; }
.flow-plot text.flow-label:nth-of-type(3) { animation-delay: 0s; }
.flow-plot text.flow-label:nth-of-type(4) { animation-delay: 0s; }

@keyframes flow-label-cycle {
  0%, 100% { fill: rgba(255, 255, 255, 0.55); }
}

/* Lines: each link draws when its end-node activates, stays drawn, then resets at the end of the cycle. Cycle = 8s. */
.flow-line {
  fill: none;
  stroke: var(--color-yellow);
  stroke-width: 1.5;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: flow-line-cycle 8s linear infinite;
}
.flow-line--1 { animation-delay: 0s; }
.flow-line--2 { animation-delay: 0s; }
.flow-line--3 { animation-delay: 0s; }

/* Node 1 lights at 0%, node 2 at 25%, node 3 at 50%, node 4 at 75%. Reset at ~95%. */
@keyframes flow-line-cycle {
  /* idle */
  0%   { stroke-dashoffset: 160; }
  /* draw windows for each link, sequenced via per-line keyframes overrides */
  100% { stroke-dashoffset: 160; }
}

/* Per-line draw timing */
.flow-line--1 { animation-name: flow-line-1; }
.flow-line--2 { animation-name: flow-line-2; }
.flow-line--3 { animation-name: flow-line-3; }

@keyframes flow-line-1 {
  0%   { stroke-dashoffset: 160; }
  20%  { stroke-dashoffset: 160; }
  28%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; }
  96%  { stroke-dashoffset: 160; }
  100% { stroke-dashoffset: 160; }
}
@keyframes flow-line-2 {
  0%   { stroke-dashoffset: 160; }
  45%  { stroke-dashoffset: 160; }
  53%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; }
  96%  { stroke-dashoffset: 160; }
  100% { stroke-dashoffset: 160; }
}
@keyframes flow-line-3 {
  0%   { stroke-dashoffset: 160; }
  70%  { stroke-dashoffset: 160; }
  78%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; }
  96%  { stroke-dashoffset: 160; }
  100% { stroke-dashoffset: 160; }
}

/* Nodes — fade from gray to yellow at their activation moment, stay yellow, reset at cycle end. */
.flow-node {
  transform-box: fill-box;
  transform-origin: center;
  fill: rgba(255, 255, 255, 0.55);
  animation: 8s ease-out infinite;
}
.flow-node--1 { animation-name: flow-node-1; }
.flow-node--2 { animation-name: flow-node-2; }
.flow-node--3 { animation-name: flow-node-3; }
.flow-node--4 { animation-name: flow-node-4; }

@keyframes flow-node-1 {
  0%   { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  3%   { fill: var(--color-yellow);    transform: scale(1.4); }
  10%  { fill: var(--color-yellow);    transform: scale(1.1); }
  92%  { fill: var(--color-yellow);    transform: scale(1.1); }
  96%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  100% { fill: rgba(255,255,255,0.5);  transform: scale(1); }
}
@keyframes flow-node-2 {
  0%   { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  25%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  28%  { fill: var(--color-yellow);    transform: scale(1.4); }
  35%  { fill: var(--color-yellow);    transform: scale(1.1); }
  92%  { fill: var(--color-yellow);    transform: scale(1.1); }
  96%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  100% { fill: rgba(255,255,255,0.5);  transform: scale(1); }
}
@keyframes flow-node-3 {
  0%   { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  50%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  53%  { fill: var(--color-yellow);    transform: scale(1.4); }
  60%  { fill: var(--color-yellow);    transform: scale(1.1); }
  92%  { fill: var(--color-yellow);    transform: scale(1.1); }
  96%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  100% { fill: rgba(255,255,255,0.5);  transform: scale(1); }
}
@keyframes flow-node-4 {
  0%   { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  75%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  78%  { fill: var(--color-yellow);    transform: scale(1.4); }
  85%  { fill: var(--color-yellow);    transform: scale(1.1); }
  92%  { fill: var(--color-yellow);    transform: scale(1.1); }
  96%  { fill: rgba(255,255,255,0.5);  transform: scale(1); }
  100% { fill: rgba(255,255,255,0.5);  transform: scale(1); }
}

.flow-halo { display: none; }

.flow-plot__caption {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .flow-line, .flow-node, .flow-label { animation: none; }
  .flow-line { stroke-dashoffset: 0; }
  .flow-node { fill: var(--color-yellow); }
}

/* About — constellation */
.constellation {
  width: 100%;
  height: auto;
}

.cluster .cluster__rotor circle.cluster__dot {
  animation: cluster-pulse 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.cluster--1 .cluster__dot:nth-of-type(1) { animation-delay: 0.0s; }
.cluster--1 .cluster__dot:nth-of-type(2) { animation-delay: 0.3s; }
.cluster--1 .cluster__dot:nth-of-type(3) { animation-delay: 0.6s; }
.cluster--1 .cluster__dot:nth-of-type(4) { animation-delay: 0.9s; }

.cluster--2 .cluster__dot:nth-of-type(1) { animation-delay: 0.5s; }
.cluster--2 .cluster__dot:nth-of-type(2) { animation-delay: 0.8s; }
.cluster--2 .cluster__dot:nth-of-type(3) { animation-delay: 1.1s; }
.cluster--2 .cluster__dot:nth-of-type(4) { animation-delay: 1.4s; }

.cluster--3 .cluster__dot:nth-of-type(1) { animation-delay: 1.0s; }
.cluster--3 .cluster__dot:nth-of-type(2) { animation-delay: 1.3s; }
.cluster--3 .cluster__dot:nth-of-type(3) { animation-delay: 1.6s; }
.cluster--3 .cluster__dot:nth-of-type(4) { animation-delay: 1.9s; }

@keyframes cluster-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.constellation__center {
  animation: center-pulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes center-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.6; }
}

/* Results — sparklines auto-loop every 5s, all together */
.metric__spark {
  width: 100%;
  height: 30px;
  margin-top: var(--space-3);
}

.spark-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: spark-loop 5s ease-in-out infinite;
}

@keyframes spark-loop {
  0%   { stroke-dashoffset: 100; }
  30%  { stroke-dashoffset: 0;   }
  85%  { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: 100; }
}

/* Contact — signal */
.signal {
  width: 100%;
  height: auto;
}

.signal__ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: signal-pulse 3s ease-out infinite;
}

.signal__ring--1 { animation-delay: 0s; }
.signal__ring--2 { animation-delay: 1s; }
.signal__ring--3 { animation-delay: 2s; }

@keyframes signal-pulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* prefers-reduced-motion — all visuals */
@media (prefers-reduced-motion: reduce) {
  .system-grid__path,
  .node,
  .cluster circle,
  .constellation__center,
  .spark-line,
  .signal__ring {
    animation: none;
  }

  .spark-line { stroke-dashoffset: 0; }
}

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .results__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  #diagnosis .section__inner,
  .what__lead,
  #process .section__inner,
  .diff__header,
  #faq .section__inner,
  #about .section__inner,
  #contact .section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .diagnosis__quote,
  .process__header,
  .faq__header {
    position: static;
  }

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

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

@media (max-width: 768px) {
  .nav__links {
    display: none;
  }

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

  .results__metrics {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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

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

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .footer__links {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

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

@media (max-width: 480px) {
  .results__metrics {
    grid-template-columns: 1fr;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Hero full-width mesh visual ───────────────────────────── */

.hero__visual-full {
  width: 100%;
  margin-top: var(--space-10);
  overflow: hidden;
  line-height: 0;
}

.hero-mesh {
  width: 100%;
  height: clamp(100px, 16vw, 220px);
  display: block;
}

/* ─── Constellation rotation: ring + inner dots together ────── */

.cluster__rotor {
  transform-box: fill-box;
  transform-origin: center;
}

.cluster--1 .cluster__rotor { animation: ring-spin-cw  18s linear infinite; }
.cluster--2 .cluster__rotor { animation: ring-spin-ccw 24s linear infinite; }
.cluster--3 .cluster__rotor { animation: ring-spin-cw  21s linear infinite; }

@keyframes ring-spin-cw  { to { transform: rotate(360deg); } }
@keyframes ring-spin-ccw { to { transform: rotate(-360deg); } }



/* ─── Section spacing: what → about and diff → results ─────── */

#what  { padding-bottom: var(--space-6); }
#about { padding-top: var(--space-4); padding-bottom: var(--space-8); }
#diff  { padding-bottom: var(--space-6); }
#results { padding-top: var(--space-8); }

/* ─── Reduced motion overrides ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cluster--1 > circle:first-child,
  .cluster--2 > circle:first-child,
  .cluster--3 > circle:first-child {
    animation: none;
  }

  .chaos-polyline {
    stroke-dashoffset: 0;
    animation: none;
  }
}