/* ===== shared constellation engine (the "settling" pair) ===== */
.constellation {
  overflow: visible
}

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

.m-ring {
  fill: none;
  stroke-width: 1.5
}

.m-ring.t {
  stroke: var(--teal-bright)
}

.m-ring.a {
  stroke: var(--amber)
}

.m-dot.t {
  fill: var(--teal-bright)
}

.m-dot.a {
  fill: var(--amber)
}

.h-glow {
  opacity: .16
}

.h-glow.t {
  fill: var(--teal-bright)
}

.h-glow.a {
  fill: var(--amber)
}

.h-ring {
  fill: none;
  stroke: var(--ink-300);
  stroke-width: 1.5;
  opacity: .7
}

.dark .h-ring {
  stroke: var(--ink-300)
}

.h-d1 {
  fill: var(--teal-bright)
}

.h-d2 {
  fill: var(--amber)
}

.c-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  fill: var(--ink-soft);
  text-anchor: middle
}

.dark .c-label {
  fill: var(--ink-300)
}

.c-label.sol {
  fill: var(--ink-navy);
  font-size: 13px;
  font-weight: 500
}

.c-label.sys {
  fill: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase
}

.m-ring.sys {
  stroke: var(--ink-faint);
  opacity: .85
}

.m-dot.sys {
  fill: var(--ink-faint)
}

.clink.sys {
  stroke: var(--ink-faint);
  opacity: .45
}

.clink {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .55
}

.clink.t {
  stroke: var(--teal-bright)
}

.clink.a {
  stroke: var(--amber)
}

@media (prefers-reduced-motion: no-preference) {
  .constellation .cmark {
    opacity: 0
  }

  .constellation.go .cmark {
    animation: csdrop .72s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i) * 95ms)
  }

  .h-glow {
    transform-box: fill-box;
    transform-origin: center
  }

  .constellation.go .halo .h-glow {
    animation: csbreathe 6.5s ease-in-out infinite;
    animation-delay: 1.4s
  }
}

@keyframes csdrop {
  0% {
    opacity: 0;
    transform: translateY(-16px)
  }
  66% {
    opacity: 1;
    transform: translateY(3px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes csbreathe {
  0%, 100% {
    transform: scale(1);
    opacity: .16
  }
  50% {
    transform: scale(1.08);
    opacity: .22
  }
}

/* hero: fit illustration — cycle A↔B */
.fit-brick.t {
  fill: var(--teal);
  filter: drop-shadow(0 2px 8px rgba(28, 157, 148, .42))
}

.fit-brick.a {
  fill: var(--amber);
  filter: drop-shadow(0 2px 8px rgba(226, 165, 46, .42))
}

.fit-brick.n {
  fill: #9fb1bf;
  filter: drop-shadow(0 1px 4px rgba(15, 38, 54, .18))
}

.fit-joint {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.5;
  stroke-dasharray: 12 38;
  opacity: 0;
  pointer-events: none
}

.fit-joint.t {
  stroke: var(--teal-bright);
  filter: drop-shadow(0 0 7px rgba(43, 184, 173, .9))
}

.fit-joint.a {
  stroke: #f3c45f;
  filter: drop-shadow(0 0 7px rgba(226, 165, 46, .95))
}

.fit-brick {
  transition: opacity .5s ease, transform .82s cubic-bezier(.2, .85, .2, 1)
}

@keyframes fitflow {
  0% {
    opacity: 0;
    stroke-dashoffset: 100
  }
  8% {
    opacity: 1
  }
  85% {
    opacity: 1;
    stroke-dashoffset: -100
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -100
  }
}

@media (prefers-reduced-motion: reduce) {
  .fit-brick {
    transition: none
  }
}

/* section 4 assemble: proven blocks -> bespoke fit -> connect */
.asm {
  overflow: visible
}

.asm .block {
  transform-box: fill-box;
  transform-origin: center
}

.asm .block.t {
  fill: var(--teal)
}

.asm .block.a {
  fill: var(--amber)
}

.asm .sys-glyph {
  fill: none;
  stroke: var(--ink-navy);
  stroke-width: 1.6;
  opacity: .55;
  stroke-linecap: round;
  stroke-linejoin: round
}

.asm .conn {
  fill: none;
  stroke-width: 1.4;
  opacity: .3;
  stroke-linecap: round
}

.asm .conn.t {
  stroke: var(--teal)
}

.asm .conn.a {
  stroke: var(--amber)
}

.asm .flow {
  fill: none;
  stroke-width: 3.4;
  opacity: 0;
  stroke-linecap: round;
  stroke-dasharray: 14 36
}

.asm .flow.t {
  stroke: var(--teal-bright);
  filter: drop-shadow(0 0 5px rgba(43, 184, 173, .75))
}

.asm .flow.a {
  stroke: #f3c45f;
  filter: drop-shadow(0 0 5px rgba(226, 165, 46, .8))
}

.asm .lbl {
  opacity: 0
}

@media (prefers-reduced-motion: no-preference) {
  .constellation.go .flowline {
    opacity: 1;
    transition: opacity .6s ease 2.2s
  }

  .constellation.go .drift {
    animation: drift 13s ease-in-out 1s infinite
  }

  .asm .block {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(.5)
  }

  .asm.go .block {
    transition: opacity .5s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--bi) * 70ms + var(--cd));
    opacity: 1;
    transform: none
  }

  .asm .sys-glyph, .asm .lbl {
    opacity: 0
  }

  .asm.go .sys-glyph {
    transition: opacity .6s ease;
    transition-delay: calc(.2s + var(--cd));
    opacity: .55
  }

  .asm.go .lbl {
    transition: opacity .6s ease;
    transition-delay: var(--cd);
    opacity: 1
  }

  .asm.go .flow {
    opacity: 1;
    transition: opacity .5s ease calc(1.5s + var(--cd))
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: -100
  }
}

@keyframes drift {
  0% {
    transform: translate(0, 0) rotate(0deg)
  }
  25% {
    transform: translate(5px, -6px) rotate(.5deg)
  }
  50% {
    transform: translate(-4px, 4px) rotate(-.4deg)
  }
  75% {
    transform: translate(-5px, -2px) rotate(.45deg)
  }
  100% {
    transform: translate(0, 0) rotate(0deg)
  }
}

@media (prefers-reduced-motion: reduce) {
  .asm .block, .asm .sys-glyph, .asm .lbl {
    opacity: 1
  }

  .asm .block {
    transform: none
  }

  .flowline, .asm .flow {
    display: none
  }
}

/* ===== hero ===== */
.cs-hero {
  padding: 66px 0 92px;
  overflow: visible
}

.cs-hero-grid {
  display: grid;
  grid-template-columns:1fr .82fr;
  gap: 54px;
  align-items: center
}

.cs-hero h1 {
  font-size: clamp(38px, 4.8vw, 58px);
  margin: 14px 0 24px;
  max-width: 15ch
}

.cs-hero h1 em {
  font-style: normal;
  color: var(--amber)
}

.cs-hero .lead {
  margin-bottom: 32px;
  max-width: 48ch
}

.cs-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center
}

.cs-scrollcue {
  margin-top: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

.cs-scrollcue i {
  width: 1px;
  height: 30px;
  background: linear-gradient(var(--teal), transparent);
  display: block
}

.cs-hero-vis {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center
}

.cs-hero-vis::before {
  content: "";
  position: absolute;
  inset: 6% 6% 6% 6%;
  border-radius: 50%;
  background: radial-gradient(54% 40% at 36% 34%, rgba(43, 184, 173, .16), transparent 70%),
  radial-gradient(54% 40% at 66% 70%, rgba(226, 165, 46, .16), transparent 72%);
  filter: blur(8px);
  z-index: 0
}

.cs-hero-vis svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%
}

/* ===== featured (the halos — named, measured) ===== */
.featured {
  padding: 96px 0 104px
}

.feat-head {
  max-width: 60ch
}

.feat-instr {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--ink-faint);
  margin-top: 16px
}

.feat-grid {
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px
}

.feat-card {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 28px 26px 24px;
  box-shadow: 0 1px 2px rgba(15, 38, 54, .05);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column
}

.feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--teal), var(--amber));
  opacity: .9
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -26px rgba(15, 38, 54, .36)
}

.feat-top {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px
}

.feat-node {
  position: relative;
  width: 30px;
  height: 24px;
  flex: 0 0 auto
}

.feat-node .ring {
  position: absolute;
  left: 3px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  opacity: .6
}

.feat-node .d1 {
  position: absolute;
  left: 9px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal-bright)
}

.feat-node .d2 {
  position: absolute;
  left: 15px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber)
}

.feat-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-navy);
  line-height: 1.1
}

.feat-sector {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 3px;
  display: block
}

.feat-block {
  margin-bottom: 15px
}

.feat-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px
}

.feat-tag.week {
  color: var(--ink-faint)
}

.feat-tag.became {
  color: var(--amber)
}

.feat-block p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft)
}

.feat-block.became p {
  color: var(--ink-navy)
}

.feat-metrics {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: 7px
}

.feat-metric {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-navy)
}

.feat-metric b {
  color: var(--teal);
  font-weight: 500
}

.feat-quote {
  margin-top: 15px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 14.5px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45
}

.feat-quote span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

.ph {
  outline: 1px dashed rgba(28, 157, 148, .45);
  outline-offset: 2px;
  border-radius: 2px
}

/* ===== the pattern (dark "moment" — honesty bridge + counters) ===== */
.pattern {
  padding: 110px 0
}

.pattern-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center
}

.pattern h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  margin: 14px 0 22px
}

.pattern .lead {
  margin: 0 auto
}

.pattern .lead em {
  font-style: normal;
  color: var(--amber-soft)
}

.counters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 56px;
  margin-top: 54px
}

.stat {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i) * 140ms)
}

.pattern.lit .stat {
  opacity: 1;
  transform: none
}

.stat-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--ink-100);
  line-height: 1;
  letter-spacing: -.02em
}

.stat-num.warm {
  color: var(--amber-soft)
}

.stat-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 12px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto
}

.lineage {
  margin-top: 66px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto
}

.lineage-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 16px
}

.lineage-names {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-200);
  line-height: 1.4
}

.lineage-names i {
  font-style: normal;
  color: var(--ink-400)
}

.lineage-note {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-300)
}

.lineage-note .link {
  color: var(--teal-bright)
}

/* ===== the field (light — the full constellation of the six) ===== */
.field {
  padding: 96px 0 104px
}

.field-head {
  max-width: 58ch
}

.field-vis {
  margin: 54px 0 6px
}

.field-vis svg {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: auto
}

.marks-grid {
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px
}

.mark-card {
  background: var(--ivory-card);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 22px 22px
}

.mark-sector {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px
}

.mark-sector::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  flex: 0 0 auto
}

.mark-card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft)
}

.mark-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-navy);
  margin-bottom: 9px;
  line-height: 1.2
}

.mark-int {
  display: block;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ink-faint)
}

/* ===== final CTA ===== */
.cta {
  padding: 112px 0;
  text-align: center
}

.cta-inner {
  max-width: 680px;
  margin: 0 auto
}

.cta h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px
}

.cta h2 em {
  font-style: normal;
  color: var(--amber-soft)
}

.cta .lead {
  margin: 0 auto 30px;
  max-width: 62ch
}

.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.cta-note {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-400)
}

@media (max-width: 880px) {
  .menu, .lang {
    display: none
  }

  .menu-toggle {
    display: block
  }

  .wrap {
    padding: 0 22px
  }

  .cs-hero-grid {
    grid-template-columns:1fr;
    gap: 30px
  }

  .cs-hero-vis {
    height: 320px;
    order: -1
  }

  .cs-hero h1 {
    max-width: none
  }

  .feat-grid {
    grid-template-columns:1fr
  }

  .counters {
    gap: 26px 36px
  }

  .marks-grid {
    grid-template-columns:1fr
  }
}

.fit-phase {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .24em;
  fill: #8a7a56
}

.fit-dot {
  fill: #cdc4ae
}

.fit-dot.on {
  fill: #e2a52e
}