/* How we work — hero */
.hw-hero {
  padding: 66px 0 92px;
  overflow: visible
}

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

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

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

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

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

.hw-scrollcue {
  margin-top: 54px;
  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)
}

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

/* the thread (signature) — knotted in the hero: "your tangled reality" */
.hw-thread-col {
  position: relative;
  height: 460px;
  display: flex;
  justify-content: center;
  align-items: center
}

.hw-thread-col::before {
  content: "";
  position: absolute;
  inset: -6% 8% 28% 8%;
  border-radius: 50%;
  background: radial-gradient(52% 40% at 50% 46%, rgba(43, 184, 173, .20), transparent 70%),
  radial-gradient(66% 52% at 50% 60%, rgba(226, 165, 46, .20), transparent 74%);
  filter: blur(6px);
  z-index: 0
}

.hw-thread {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 112%;
  overflow: visible;
  filter: drop-shadow(0 8px 22px rgba(15, 38, 54, .14))
}

.hw-thread path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.hw-b {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.4)
}

.hw-b.ghost {
  opacity: 0
}

.hw-anchor {
  opacity: 0
}

.hw-heart, .hw-hhalo {
  opacity: 0
}

.hw-heart-g, .hw-hhalo, .hw-pulse {
  transform-box: fill-box;
  transform-origin: center
}

.hw-pulse {
  opacity: 0
}

.reveal.in .hw-b {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .85, .2, 1)
}

.reveal.in .hw-b.ghost {
  opacity: .82
}

.reveal.in .hw-anchor {
  opacity: .45;
  transition: opacity .7s ease 5.8s
}

.reveal.in .hw-heart, .reveal.in .hw-hhalo {
  opacity: 1;
  transition: opacity .8s ease .2s
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.in .hw-heart-g {
    animation: hwbeat 5.6s ease-in-out infinite .6s
  }

  .reveal.in .hw-hhalo {
    animation: hwhalo 5.6s ease-in-out infinite .6s
  }

  .reveal.in .hw-pulse {
    animation: hwpulse 5.6s ease-out infinite .6s
  }

  .reveal.in .hw-b.ghost {
    animation: hwghost 6.4s ease-in-out infinite 6s
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hw-thread-flow {
    animation: hwflow 3.6s linear infinite
  }
}

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

@keyframes hwbeat {
  0%, 100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.08)
  }
}

@keyframes hwhalo {
  0%, 100% {
    opacity: .5
  }
  50% {
    opacity: .85
  }
}

@keyframes hwpulse {
  0% {
    opacity: .5;
    transform: scale(.8)
  }
  70% {
    opacity: 0
  }
  100% {
    opacity: 0;
    transform: scale(2.3)
  }
}

@keyframes hwghost {
  0%, 100% {
    opacity: .66
  }
  50% {
    opacity: 1
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw-b, .hw-anchor, .hw-heart, .hw-hhalo {
    opacity: 1 !important;
    transform: none !important
  }

  .hw-b.ghost {
    opacity: .82 !important
  }
}

/* section 2 — the principle */
.principle {
  padding: 90px 0
}

.principle-head {
  max-width: 62ch
}

.principle-head h2 {
  margin-top: 14px;
  max-width: 24ch
}

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

.principle-grid {
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 26px;
  margin-top: 56px
}

.principle-item {
  padding-top: 19px;
  border-top: 2px solid var(--teal)
}

.principle-item:nth-child(2) {
  border-top-color: var(--amber)
}

.principle-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-navy);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin-bottom: 9px
}

.principle-item p {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  line-height: 1.5
}

.dark .principle-item h3 {
  color: var(--ink-100)
}

.dark .principle-item p {
  color: var(--ink-300)
}

/* value equation + bricks */
.value {
  display: grid;
  grid-template-columns:1.05fr .95fr;
  gap: 60px;
  align-items: center
}

.value .lead {
  margin-top: 18px
}

.vstats {
  display: flex;
  gap: 34px;
  margin: 28px 0 8px;
  flex-wrap: wrap
}

.vstat .n {
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  color: var(--ink-navy);
  line-height: 1
}

.vstat .n em {
  font-style: normal;
  color: var(--amber)
}

.vstat .c {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 18ch
}

.vnote {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 8px;
  max-width: 46ch
}

.bricks {
  position: relative;
  width: 100%;
  aspect-ratio: 6/4.4;
  min-height: 320px;
  border-radius: 16px;
  background: linear-gradient(160deg, #f6f1e8, #efe7d9);
  border: 1px solid rgba(15, 38, 54, .10);
  box-shadow: 0 18px 48px rgba(15, 38, 54, .10);
  overflow: hidden
}

.platebar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: linear-gradient(90deg, var(--teal), var(--amber));
  opacity: .9;
  display: flex;
  align-items: center;
  justify-content: center
}

.platebar span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: #06141d;
  text-transform: uppercase;
  font-weight: 500
}

.brick {
  position: absolute;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.7) rotate(var(--r));
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .85, .2, 1)
}

.assembled .brick {
  opacity: 1;
  transform: none
}

.brick.t {
  background: linear-gradient(155deg, rgba(43, 184, 173, .42), rgba(28, 157, 148, .26));
  border: 1px solid rgba(43, 184, 173, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12)
}

.brick.a {
  background: linear-gradient(155deg, rgba(236, 191, 110, .42), rgba(226, 165, 46, .28));
  border: 1px solid rgba(226, 165, 46, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14)
}

.brick.n {
  background: linear-gradient(155deg, rgba(159, 177, 191, .22), rgba(159, 177, 191, .10));
  border: 1px solid rgba(159, 177, 191, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
}

.brick span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: #eaf3f1;
  text-transform: uppercase;
  opacity: .94;
  padding: 0 6px;
  text-align: center;
  line-height: 1.15
}

.bsol {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s ease 1.1s;
  pointer-events: none
}

.assembled .bsol {
  opacity: 1
}

.bsol b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  background: rgba(10, 24, 34, .4);
  padding: 8px 16px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
  font-size: 13px
}

.vwrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.vbrick {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(.72);
  transition: opacity .55s ease, transform .8s cubic-bezier(.2, .85, .2, 1)
}

.assembled .vbrick {
  opacity: 1;
  transform: none
}

.vlabel {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  fill: #143142
}

.vlabel.on-t {
  fill: #f5f0e7
}

.vfil {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .6s ease 1s
}

.assembled .vfil {
  opacity: .55
}

.vflow {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  opacity: 0
}

.assembled .vflow {
  opacity: .9
}

.vpulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0
}

.vheart, .vhalo, .vsol {
  opacity: 0;
  transition: opacity .6s ease 1s
}

.assembled .vheart, .assembled .vhalo, .assembled .vsol {
  opacity: 1
}

.vheart-g {
  transform-box: fill-box;
  transform-origin: center
}

@media (prefers-reduced-motion: no-preference) {
  .assembled .vheart-g {
    animation: vbeat 2.8s ease-in-out infinite 1.2s
  }

  .assembled .vhalo {
    animation: vhalo 2.8s ease-in-out infinite 1.2s
  }

  .assembled .vflow {
    animation: vflow 2s linear infinite 1.1s
  }

  .assembled .vpulse {
    animation: vpulse 2.8s ease-out infinite 1.2s
  }
}

@keyframes vbeat {
  0%, 100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.06)
  }
}

@keyframes vhalo {
  0%, 100% {
    opacity: .45
  }
  50% {
    opacity: .8
  }
}

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

@keyframes vpulse {
  0% {
    opacity: .5;
    transform: scale(.6)
  }
  70% {
    opacity: 0
  }
  100% {
    opacity: 0;
    transform: scale(2.4)
  }
}


@media (max-width: 900px) {
  .value {
    grid-template-columns:1fr;
    gap: 40px
  }
}

/* section 3 — the timeline (the signature) */
.tl {
  padding: 104px 0
}

.tl-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center
}

.tl-head h2 {
  margin: 14px auto 18px;
  max-width: 21ch
}

.tl-head .lead {
  margin: 0 auto
}

.tl-body {
  position: relative;
  margin: 64px auto 0;
  max-width: 720px
}

.tl-thread {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(43, 184, 173, .18));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%)
}

.tl-line {
  fill: none;
  stroke: url(#tlgrad);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.tl-flow {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  opacity: .85;
  stroke-linecap: round;
  stroke-dasharray: 4 96
}

@media (prefers-reduced-motion: no-preference) {
  .tl-flow {
    animation: hwflow 3.6s linear infinite
  }
}

.tl-list {
  list-style: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column
}

.tl-row {
  position: relative;
  padding-left: 84px
}

.tl-beat {
  padding-top: 28px;
  padding-bottom: 28px
}

.tl-evolve {
  padding-bottom: 52px
}

.tl-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 9px;
  flex-wrap: wrap
}

.tl-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--teal-bright);
  font-weight: 500
}

.tl-row[data-accent="amber"] .tl-num {
  color: var(--amber)
}

.tl-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-100);
  letter-spacing: -.01em;
  line-height: 1.1
}

.tl-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #26190a;
  background: var(--amber);
  padding: 4px 9px;
  border-radius: 999px
}

.tl-desc {
  font-size: 15.5px;
  color: var(--ink-300);
  line-height: 1.55;
  max-width: 50ch
}

.tl-proof {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--teal-bright);
  line-height: 1.4
}

.tl-proof::before {
  content: "→ ";
  color: var(--ink-400)
}

.tl-evolve .tl-proof {
  color: var(--amber-soft)
}

.tl-note {
  padding: 13px 0 13px 84px
}

.tl-note .tl-note-in {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-400)
}

.tl-gate .tl-note-in {
  color: var(--amber-soft)
}

/* section 4 — the human core */
.human {
  padding: 104px 0
}

.human-grid {
  display: grid;
  grid-template-columns:1fr .8fr;
  gap: 58px;
  align-items: center
}

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

.human-head h2 {
  margin: 14px 0 18px;
  max-width: 17ch
}

.human-lead {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 36px
}

.human-claims {
  display: flex;
  flex-direction: column;
  gap: 25px
}

.human-claim {
  display: grid;
  grid-template-columns:42px 1fr;
  gap: 18px;
  align-items: start
}

.human-claim h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18.5px;
  color: var(--ink-navy);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 6px
}

.human-claim p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 46ch
}

/* persona glyph: ring + teal/amber dots (reused brand motif) */
.glyph {
  position: relative;
  width: 40px;
  height: 30px;
  flex: none;
  margin-top: 3px
}

.glyph .ring {
  position: absolute;
  left: 5px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  opacity: .5
}

.glyph .d1 {
  position: absolute;
  left: 12px;
  top: 9.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--teal-bright)
}

.glyph .d2 {
  position: absolute;
  left: 19px;
  top: 9.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--amber)
}

/* collective-intelligence constellation — ported verbatim from the Customer stories hero */
.human-viz svg {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
  overflow: visible
}

.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
}

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

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

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

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

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

#heroConstellation .clink {
  opacity: .32
}

.flowline {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
  opacity: 0;
  stroke-dasharray: 17 33
}

.flowline.t {
  stroke: var(--teal-bright);
  filter: drop-shadow(0 0 6px rgba(43, 184, 173, .8))
}

.flowline.a {
  stroke: #f3c45f;
  filter: drop-shadow(0 0 6px rgba(226, 165, 46, .85))
}

.drift {
  transform-origin: center
}

@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
  }

  .constellation.go .flowline {
    opacity: 1;
    transition: opacity .6s ease 2.2s
  }

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

@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
  }
}

@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)
  }
}

/* section 5 — final CTA */
.cta {
  padding: 108px 0;
  text-align: center
}

.cta-inner {
  max-width: 700px;
  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 26px;
  max-width: 62ch
}

.cta-reassure {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--ink-400);
  margin: 0 auto 30px;
  max-width: 64ch;
  line-height: 1.9
}

.cta-reassure b {
  color: var(--amber-soft);
  font-weight: 500
}

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

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

.hw-thread-col.hw-fade {
  opacity: 0 !important;
  transition: opacity .85s ease !important
}

.hw-thread-col.hw-zero .hw-b {
  opacity: 0 !important;
  transform: scale(.4) !important;
  transition: none !important;
  animation: none !important
}

.hw-thread-col.hw-zero .hw-heart, .hw-thread-col.hw-zero .hw-hhalo, .hw-thread-col.hw-zero .hw-anchor, .hw-thread-col.hw-zero .hw-pulse {
  opacity: 0 !important;
  transition: none !important;
  animation: none !important
}

.hw-thread-col.hw-zero .hw-heart-g {
  animation: none !important
}

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

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

  .hw-thread-col {
    height: 300px;
    order: -1
  }

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

  .principle-grid {
    grid-template-columns:1fr;
    gap: 22px
  }

  .tl-row {
    padding-left: 66px
  }

  .tl-note {
    padding-left: 66px
  }

  .tl-label {
    font-size: 20px
  }

  .human-grid {
    grid-template-columns:1fr;
    gap: 38px
  }

  .human {
    padding: 80px 0
  }

  .cta {
    padding: 82px 0
  }

  .wrap {
    padding: 0 22px
  }
}