/* What we solve — hero */
.ws-hero {
  padding: 66px 0 92px;
  overflow: visible
}

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

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

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

.ws-hero .lead {
  margin-bottom: 32px;
  max-width: 46ch
}

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

/* the thread (signature) */
.ws-thread-col {
  position: relative;
  height: 440px;
  display: flex;
  justify-content: center;
  align-items: stretch
}

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

.ws-thread {
  position: relative;
  z-index: 1;
  width: auto;
  height: 108%;
  overflow: visible;
  filter: drop-shadow(0 6px 16px rgba(15, 38, 54, .12));
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 66%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0, #000 66%, transparent 99%)
}

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

.ws-thread-line {
  stroke: url(#wsgrad);
  stroke-width: 4.2
}

.ws-thread-flow {
  stroke: #fff;
  stroke-width: 4;
  opacity: .85;
  stroke-dasharray: 5 95
}

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

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

.ws-cockpit-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 470px
}

.ws-cockpit-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  border-radius: 18px;
  background: radial-gradient(70% 38% at 24% 16%, rgba(43, 184, 173, .13), transparent 60%),
  radial-gradient(74% 42% at 76% 88%, rgba(226, 165, 46, .13), transparent 60%),
  linear-gradient(157deg, #0e2230, #091620);
  border: 1px solid var(--line);
  box-shadow: 0 22px 60px rgba(8, 18, 26, .45)
}

.ws-hero.dark .lead {
  color: var(--ink-200)
}

.ws-hero.dark .link {
  color: var(--teal-bright)
}

.ws-hero.dark .ws-scrollcue {
  color: var(--ink-300)
}

.wsc-lite {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round
}

.wsc-livedot {
  transform-box: fill-box;
  transform-origin: center
}

@keyframes wscflow {
  from {
    stroke-dashoffset: 0
  }
  to {
    stroke-dashoffset: -100
  }
}

@keyframes wsclivedot {
  0%, 100% {
    opacity: .45;
    transform: scale(1)
  }
  50% {
    opacity: 1;
    transform: scale(1.35)
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsc-lite {
    animation: none !important;
    opacity: .4
  }

  .wsc-livedot {
    animation: none !important
  }
}

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

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

/* problems — bi-state pain / solved cards */
.problems {
  padding: 94px 0 104px
}

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

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

.ps-grid {
  display: grid;
  grid-template-columns:repeat(2, 1fr);
  gap: 20px;
  margin-top: 46px
}

.ps-card {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 1px 2px rgba(15, 38, 54, .05);
  transition: transform .25s ease, box-shadow .25s ease;
  outline: none
}

.ps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(15, 38, 54, .34)
}

.ps-card:focus-visible {
  box-shadow: 0 0 0 2px var(--teal), 0 20px 44px -24px rgba(15, 38, 54, .34)
}

.ps-card.lead {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns:.82fr 1.18fr;
  gap: 34px;
  align-items: center;
  padding: 30px 34px
}

.ps-glyph {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  margin-bottom: 18px
}

.ps-glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .45
}

.ps-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%)
}

.ps-card:nth-of-type(odd) .ps-glyph {
  color: var(--teal)
}

.ps-card:nth-of-type(even) .ps-glyph {
  color: var(--amber)
}

.ps-card:nth-of-type(odd) .ps-glyph::after {
  box-shadow: 0 0 0 6px rgba(43, 184, 173, .15)
}

.ps-card:nth-of-type(even) .ps-glyph::after {
  box-shadow: 0 0 0 6px rgba(226, 165, 46, .17)
}

.ps-faces {
  display: grid;
  position: relative
}

.ps-face {
  grid-area: 1/1;
  transition: opacity .34s ease, transform .34s ease
}

.ps-solved {
  opacity: 0;
  transform: translateY(9px)
}

.ps-card:hover .ps-pain, .ps-card:focus-within .ps-pain, .ps-card.is-flipped .ps-pain {
  opacity: 0;
  transform: translateY(-9px)
}

.ps-card:hover .ps-solved, .ps-card:focus-within .ps-solved, .ps-card.is-flipped .ps-solved {
  opacity: 1;
  transform: none
}

.ps-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 11px
}

.ps-pain .ps-tag {
  color: var(--teal)
}

.ps-solved .ps-tag {
  color: var(--amber)
}

.ps-face p {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.34;
  color: var(--ink-navy)
}

.ps-card.lead .ps-face p {
  font-size: clamp(20px, 2vw, 23px)
}

.ps-domain {
  display: block;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-faint)
}

.ps-lead-aside {
  border-right: 1px solid var(--line-dark);
  padding-right: 30px
}

.ps-domain-lead {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink-navy);
  line-height: 1.22;
  margin-bottom: 9px
}

.ps-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  color: var(--teal)
}

.ps-face em {
  font-style: normal;
  color: var(--amber)
}


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

.solution-card {
  background: var(--ivory-card);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: 0 12px 28px -24px rgba(15, 38, 54, .42)
}

.solution-card .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: 12px
}

.solution-card h3 {
  font-size: 20px;
  margin-bottom: 9px;
  color: var(--ink-navy)
}

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

/* pivot — the calm "once it's connected" moment */
.pivot {
  padding: 108px 0
}

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

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

.pivot .lead {
  margin: 0 auto
}

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

.shifts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-top: 42px
}

.shifts span {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink-400);
  display: inline-flex;
  gap: 9px;
  align-items: center
}

.shifts i {
  font-style: normal;
  color: var(--teal-bright)
}

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

.pivot-link-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px
}

.dark .pivot-link-wrap .link {
  color: var(--teal-bright)
}

/* eco — the pacified enterprise delivering value to every stakeholder */
.eco {
  margin-top: 58px
}

.eco svg {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  height: auto;
  overflow: visible
}

.eco-thread {
  fill: none;
  stroke: url(#ecograd);
  stroke-width: 2.6;
  stroke-linecap: round
}

.eco-ring {
  fill: none;
  stroke: var(--ink-300);
  stroke-width: 1.4;
  opacity: .55
}

.eco-halo {
  opacity: .13
}

.eco-strand {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 2 13;
  opacity: .72
}

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

.eco-strand.a {
  stroke: var(--amber)
}

@media (prefers-reduced-motion: no-preference) {
  .eco-strand {
    animation: ecoflow 2.8s linear infinite
  }
}

@keyframes ecoflow {
  to {
    stroke-dashoffset: -15
  }
}

/* continuation of the hero thread: a light slides down into the core */
.eco-thread-flow {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
  opacity: .9;
  stroke-linecap: round;
  stroke-dasharray: 4 96
}

/* the RAPSODI core pulses — echoes the Home / RAPSODI heart */
.eco-pulse {
  fill: none;
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center
}

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

.eco-pulse.a {
  stroke: var(--amber)
}

.eco-halo {
  transform-box: fill-box;
  transform-origin: center
}

@media (prefers-reduced-motion: no-preference) {
  .eco-thread-flow {
    animation: ecothreadflow 2.6s linear infinite
  }

  .eco-pulse {
    animation: ecopulse 2.8s ease-out infinite
  }

  .eco-halo {
    animation: ecobreathe 2.8s ease-in-out infinite
  }
}

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

@keyframes ecopulse {
  0% {
    transform: scale(1);
    opacity: .5
  }
  70% {
    opacity: 0
  }
  100% {
    transform: scale(2.1);
    opacity: 0
  }
}

@keyframes ecobreathe {
  0%, 100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.07)
  }
}

/* --- revised pivot: hero core + regulated input + stakeholder loop --- */
.eco-heart {
  transform-box: fill-box;
  transform-origin: center
}

.eco-hhalo {
  transform-box: fill-box;
  transform-origin: center
}

.eco-in {
  fill: none;
  stroke: var(--teal-bright);
  stroke-width: 1.4;
  opacity: .5;
  stroke-linecap: round
}

.eco-in-flow {
  fill: none;
  stroke: #dffaf4;
  stroke-width: 2;
  opacity: .85;
  stroke-linecap: round;
  stroke-dasharray: 6 94
}

.eco-return {
  fill: none;
  stroke: var(--teal-bright);
  stroke-width: 1.05;
  opacity: .32;
  stroke-linecap: round
}

.eco-return-flow {
  fill: none;
  stroke: #bff3ea;
  stroke-width: 1.7;
  opacity: .75;
  stroke-linecap: round;
  stroke-dasharray: 5 95
}

@media (prefers-reduced-motion: no-preference) {
  .eco-heart {
    animation: ecobeat 2.8s ease-in-out infinite
  }

  .eco-hhalo {
    animation: ecobreathe 2.8s ease-in-out infinite
  }

  .eco-in-flow {
    animation: ecoinflow 2.2s linear infinite
  }

  .eco-return-flow {
    animation: ecoreturnflow 3.6s linear infinite
  }
}

@keyframes ecobeat {
  0%, 100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.055)
  }
}

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

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

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

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

.eco-nring.t {
  fill: none;
  stroke: var(--teal-bright);
  stroke-width: 1.3;
  opacity: .6
}

.eco-nring.a {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.3;
  opacity: .6
}

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

.eco-cap {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--ink-400);
  text-anchor: middle
}

/* third way — off-the-shelf · co-created · custom */
.ways .ways-head {
  max-width: 60ch
}

.ways-grid {
  display: grid;
  grid-template-columns:1fr 1.1fr 1fr;
  gap: 20px;
  margin-top: 92px;
  align-items: start
}

.way {
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 30px 26px
}

.way .node {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 18px
}

.way .node .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .5
}

.way .node .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%)
}

.way.cold {
  color: var(--teal)
}

.way.warm {
  color: var(--amber)
}

/* side cards: dark — the yin/yang inversion is what makes the recommended option read */
.way.cold, .way.warm {
  background: var(--navy-850);
  border-color: var(--line-strong)
}

.way.cold .way-name {
  color: var(--teal-bright)
}

.way.warm .way-name {
  color: var(--amber)
}

.way-mid .way-name {
  color: var(--ink-navy)
}

.way.cold .way-verdict, .way.warm .way-verdict {
  color: var(--ink-100)
}

.way.cold li, .way.warm li {
  color: var(--ink-300)
}

.way.cold li::before, .way.warm li::before {
  color: var(--ink-400)
}

.way-name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 11px;
  color: var(--ink-faint)
}

.way-verdict {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-navy);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 20px
}

.way ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.way li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5
}

.way li::before {
  content: "–";
  position: absolute;
  left: 3px;
  top: -1px;
  color: var(--ink-faint);
  font-weight: 700
}

.way-mid {
  position: relative;
  overflow: hidden;
  background: var(--ivory-card);
  border-color: rgba(15, 38, 54, .16);
  box-shadow: 0 34px 72px -30px rgba(10, 24, 34, .55);
  margin-top: -44px;
  padding: 38px 30px 32px;
  z-index: 2
}

.way-foot {
  margin: 24px -30px -32px;
  padding: 13px 30px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #26190a;
  background: linear-gradient(90deg, var(--teal), var(--amber))
}

.way-mid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--amber))
}

.way-mid .way-verdict {
  font-size: 23px
}

.way-mid li {
  color: var(--ink-navy)
}

.way-mid li::before {
  content: "✓";
  color: var(--amber);
  font-weight: 700;
  font-size: 12px;
  top: 0
}

.way-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #26190a;
  background: var(--amber);
  padding: 5px 10px;
  border-radius: 999px
}

.node-bal {
  position: relative;
  display: block;
  width: 40px;
  height: 30px;
  margin-bottom: 18px
}

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

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

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

.ways-links {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 46px;
  justify-content: center
}

/* final CTA */
.cta {
  padding: 110px 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
  }

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

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

  .ws-cockpit-col {
    min-height: 320px;
    order: -1
  }

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

  .wrap {
    padding: 0 22px
  }

  .problems {
    padding: 74px 0 86px
  }

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

  .ps-card.lead {
    grid-template-columns:1fr;
    gap: 18px;
    padding: 26px
  }

  .ps-lead-aside {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding-right: 0;
    padding-bottom: 16px
  }

  .pivot {
    padding: 80px 0
  }

  .ways-grid {
    grid-template-columns:1fr;
    gap: 16px
  }

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

  .way-mid {
    margin-top: 0
  }
}