/* ==========================================================================
   Nexolve: homepage scenes
   Scenes expose --p (0..1). [data-r] children expose --t / --e for their own range.
   ========================================================================== */

.curtain { border-radius: 32px 32px 0 0; margin-top: -32px; position: relative; }

/* ---------- 1. Hero ---------- */
.hero-wrap { position: relative; z-index: 0; height: 160svh; }
.hero { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero__stage { height: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding-top: 84px; padding-bottom: 72px; }
.hero__copy {
  display: grid; justify-items: start; gap: clamp(1.1rem, 2.2vw, 1.9rem);
  transform: translate3d(0, calc(var(--p) * -9svh), 0); opacity: calc(1 - var(--p) * 1.3);
}
.hero__sub { max-width: 31rem; color: var(--slate); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__tags { color: var(--slate); }

.hero__art { position: relative; justify-self: end; width: min(100%, 560px); aspect-ratio: 1 / 1.1; transform: translate3d(0, calc(var(--p) * -4svh), 0) scale(calc(1 + var(--p) * 0.4)); opacity: calc(1 - var(--p) * 1.1); }
.hero__tilt { position: absolute; inset: 0; transform: perspective(1000px) rotateY(calc(var(--mx, 0) * 8deg)) rotateX(calc(var(--my, 0) * -7deg)); transition: transform 0.9s var(--ease-out); }
.hero__mark { position: absolute; inset: 4% 8%; }
.hero__mark-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mk { transition: transform 1.5s var(--ease-out), opacity 1.1s var(--ease-out); }
.mk--sky { translate: calc(var(--p) * -70px) 0; }
.mk--indigo { translate: calc(var(--p) * 70px) 0; }
html.js:not(.reduced) .mk--sky { transform: translate(-130px, 70px); opacity: 0; }
html.js:not(.reduced) .mk--indigo { transform: translate(130px, -70px); opacity: 0; }
html.js:not(.reduced).is-ready .mk { transform: none; opacity: 1; }
html.js:not(.reduced).is-ready .mk--indigo { transition-delay: 0.08s; }

.frag { position: absolute; }
.frag--a { top: 9%; left: -12%; }
.frag--b { top: 55%; right: -8%; }
.frag--c { bottom: 4%; left: 6%; }
.frag__in { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.15rem 0.85rem 0.95rem; background: var(--white); border-radius: 14px; box-shadow: var(--shadow-s); font-size: 0.875rem; line-height: 1.3; white-space: nowrap; animation: drift 7s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -2.3s); }
.frag__in strong { display: block; font-weight: 700; letter-spacing: -0.01em; }
.frag__in div span { display: block; color: var(--slate); }
.frag__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(56, 182, 255, 0.22); }
.hero-wrap.is-away .frag__in { animation-play-state: paused; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-6px); } }
html.js:not(.reduced) .frag { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(6px); }
html.js:not(.reduced).is-ready .frag { opacity: 1; transform: none; filter: none; transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: calc(1.1s + var(--k) * 0.18s); }

.hero__foot { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(100% - 2 * var(--gutter), var(--max)); display: flex; justify-content: space-between; align-items: center; opacity: calc(1 - var(--p) * 4); }
.hero__scroll { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__scroll i { display: block; width: 1px; height: 30px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 2.6s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 899px) {
  .hero__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 0.5rem; padding-top: 76px; padding-bottom: 64px; }
  .hero__art { order: -1; justify-self: end; width: clamp(120px, 28vw, 250px); margin-right: 2%; }
  .frag { display: none; }
  .hero__tags { display: none; }
}

/* ---------- 2. Problem ---------- */
.problem { height: 290svh; z-index: 2; margin-top: -60svh; }
.problem__stage { position: sticky; top: 0; height: 100svh; }
.problem__inner { position: relative; height: 100%; display: flex; align-items: center; }
.problem__head { transform-origin: 0 0; transform: translate3d(0, calc(var(--e) * -17svh), 0) scale(calc(1 - var(--e) * 0.3)); will-change: transform; }
.problem__title { font-size: clamp(2.3rem, 0.6rem + 5.6vw, 5.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.048em; max-width: 15ch; text-wrap: balance; }
.sw { opacity: clamp(0.16, calc(0.16 + (var(--p) * 2 * (var(--n) + 2) - var(--i)) * 0.42), 1); }
.problem__pains { position: absolute; left: 0; right: 0; bottom: clamp(36px, 9svh, 100px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.problem__pains li { padding: 1.05rem 0; border-top: 1px solid var(--line); font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; color: #fff; opacity: var(--e); transform: translate3d(0, calc((1 - var(--e)) * 18px), 0); }
@media (max-width: 719px) { .problem__pains { grid-template-columns: 1fr; } .problem__pains li { padding: 0.8rem 0; } }

/* ---------- 3. The custom-system scene ---------- */
.sys { height: 560svh; z-index: 3; background: var(--paper); }
.sys__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sys__statement { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gutter); text-align: center; pointer-events: none; opacity: calc(1 - var(--e)); transform: translate3d(0, calc(var(--e) * -7svh), 0) scale(calc(1 - var(--e) * 0.06)); filter: blur(calc(var(--e) * 10px)); will-change: transform, opacity; }
.sys__h { font-size: clamp(2.6rem, 0.6rem + 7vw, 7.25rem); font-weight: 700; letter-spacing: -0.052em; line-height: 0.98; max-width: 13ch; text-wrap: balance; }
.sys__l1, .sys__l2 { display: block; }
.sys__l2 { color: var(--indigo); opacity: var(--e); transform: translate3d(0, calc((1 - var(--e)) * 34px), 0); }

.sys__layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-top: 76px; }
.sys__captions { position: relative; height: min(24rem, 56svh); opacity: var(--e); }
.cap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-44%); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out); }
.cap.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.cap__t { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.cap__p { margin-top: 1rem; max-width: 28rem; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem); color: var(--slate); }

.switch { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.switch__l { width: 100%; font-size: var(--fs-small); font-weight: 500; color: var(--slate); }
.chip { min-height: 44px; padding: 0 1.15rem; border-radius: 999px; border: 1px solid var(--mist-2); background: var(--white); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.sys__winwrap { perspective: 1600px; opacity: clamp(0, calc(var(--e) * 2.4), 1); transform: translate3d(0, calc((1 - var(--e)) * 62svh), 0); will-change: transform, opacity; }
.sys__win { transform: rotateX(calc((1 - var(--e)) * 14deg)) scale(calc(0.9 + var(--e) * 0.1)); transform-origin: 50% 100%; }
.sys__win .win__in { font-size: clamp(10px, 1.4cqw, 16px); }

.sys__body { display: grid; grid-template-columns: 13em 1fr; min-height: 28em; }
.sys__body.is-swapping, .is-swapping .sys__body { animation: swapfade 0.5s var(--ease-io); }
@keyframes swapfade { 0%, 100% { opacity: 1; } 35%, 65% { opacity: 0; } }
.sys__nav { padding: 1.2em 0.9em; display: grid; gap: 0.3em; align-content: start; border-right: 1px solid var(--mist); background: #fbfbfc; }
.navi { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 0.8em; border-radius: 0.6em; font-weight: 500; color: var(--slate); }
.navi i { flex: none; width: 1.05em; height: 1.05em; border-radius: 0.3em; border: 0.15em solid currentColor; opacity: 0.6; }
.navi.is-cur { background: var(--mist); color: var(--ink); }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }
.swap__a { opacity: clamp(0, calc(1 - var(--e) * 2), 1); }
.swap__b { opacity: clamp(0, calc(var(--e) * 2 - 1), 1); white-space: nowrap; }
.win__title.swap { white-space: nowrap; }

.sys__main { padding: 1.5em 1.7em; display: grid; gap: 1.2em; align-content: start; min-width: 0; }
.sys__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.sys__head h4 { margin: 0; font-size: 1.4em; font-weight: 700; letter-spacing: -0.03em; }
.sbtn { padding: 0.6em 1.1em; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9em; }
.sys__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1em; align-items: stretch; }
.cell { display: grid; min-width: 0; }
.cell > * { grid-area: 1 / 1; min-width: 0; }
.cell--pipe { grid-column: 1 / 9; }
.cell--cust { grid-column: 9 / 13; }
.cell--stats { grid-column: 1 / 7; }
.cell--chart { grid-column: 7 / 13; }

.skel { display: grid; gap: 0.7em; align-content: start; padding: 1.1em; border-radius: 1em; background: #f1f3f7; opacity: calc(1 - var(--e)); filter: blur(calc(var(--e) * 3px)); }
.skel b { display: block; height: 1.1em; width: 38%; border-radius: 0.4em; background: var(--mist-2); }
.skel s { display: block; height: 0.9em; width: 94%; border-radius: 0.4em; background: var(--mist); text-decoration: none; }
.skel s:nth-child(even) { width: 76%; }
.skel s:nth-child(3n) { width: 58%; }
.skel--stats { grid-template-columns: repeat(3, 1fr); padding: 0; background: none; }
.skel--stats b { width: 100%; height: 100%; min-height: 5.6em; border-radius: 1em; background: #f1f3f7; }
.skel--chart { display: flex; align-items: flex-end; gap: 0.8em; }
.skel--chart s { flex: 1; width: auto; background: var(--mist-2); border-radius: 0.3em 0.3em 0 0; }
.skel--chart s:nth-child(1) { height: 45%; } .skel--chart s:nth-child(2) { height: 70%; } .skel--chart s:nth-child(3) { height: 55%; } .skel--chart s:nth-child(4) { height: 85%; } .skel--chart s:nth-child(5) { height: 62%; }

.real { padding: 1.1em; border-radius: 1em; background: var(--white); border: 1px solid var(--mist); opacity: var(--e); transform: translate3d(0, calc((1 - var(--e)) * 0.8em), 0) scale(calc(0.98 + var(--e) * 0.02)); filter: blur(calc((1 - var(--e)) * 3px)); }
.pipe__title { margin-bottom: 0.9em; font-weight: 700; letter-spacing: -0.01em; }
.pipe__board { position: relative; }
.pcols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8em; }
.pcol { display: grid; gap: 0.6em; align-content: start; min-width: 0; }
.pcol__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.4em; min-height: 2.4em; font-size: 0.8em; line-height: 1.2; font-weight: 500; color: var(--slate); }
.pcol__h em { font-style: normal; flex: none; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; display: inline-grid; place-items: center; border-radius: 99px; background: var(--mist); }
.pc { height: 3.8em; border-radius: 0.6em; background: #f3f5f8; border: 1px solid var(--mist); }
.pc--s { height: 2.8em; }
.pc--gap { visibility: hidden; border: 0; }
.pcol--done .pc { opacity: 0.55; }
.lane { position: absolute; left: 0; right: 0; top: calc(2.4em * 0.8 + 0.6em); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8em; pointer-events: none; }
.pc--live { grid-column: 2; height: 3.8em; padding: 0.55em 0.7em; display: flex; flex-direction: column; justify-content: center; background: var(--white); border: 1.5px solid var(--sky); box-shadow: 0 10px 22px -10px rgba(56, 182, 255, 0.65); font-size: 0.8em; line-height: 1.25; transform: translate3d(calc((100% + 1em) * 2 * var(--e)), 0, 0); min-width: 0; }
.pc--live strong { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc--live span { color: var(--slate); }
.pipe__track { display: none; }
.track { position: relative; height: 1.4em; margin: 0.5em 10% 0.5em; }
.track i { position: absolute; left: 0; right: 0; top: 50%; height: 0.22em; margin-top: -0.11em; border-radius: 99px; background: var(--mist); }
.track b { position: absolute; left: 0; top: 50%; height: 0.22em; margin-top: -0.11em; width: calc(25% + var(--e) * 50%); border-radius: 99px; background: var(--grad); }
.track b::after { content: ""; position: absolute; right: -0.5em; top: 50%; width: 1em; height: 1em; margin-top: -0.5em; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0.3em rgba(56, 182, 255, 0.25); }
.track u { position: absolute; top: 50%; width: 0.8em; height: 0.8em; margin: -0.4em 0 0 -0.4em; border-radius: 50%; background: var(--white); border: 0.18em solid var(--mist-2); }
.track u:nth-of-type(1) { left: 0; } .track u:nth-of-type(2) { left: 25%; } .track u:nth-of-type(3) { left: 50%; } .track u:nth-of-type(4) { left: 75%; } .track u:nth-of-type(5) { left: 100%; }
.track__labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2em; font-size: 0.74em; text-align: center; color: var(--slate); }

.cust { display: grid; gap: 0.85em; align-content: start; }
.cust__top { display: flex; gap: 0.8em; align-items: center; }
.cust__av { flex: none; width: 2.8em; height: 2.8em; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9em; }
.cust__top strong { display: block; letter-spacing: -0.01em; }
.cust__top div span { display: block; font-size: 0.82em; color: var(--slate); }
.cust__tags { display: flex; flex-wrap: wrap; gap: 0.4em; }
.cust__tags span { padding: 0.25em 0.75em; border-radius: 99px; background: var(--mist); font-size: 0.78em; font-weight: 500; }
.cust__note { font-size: 0.82em; color: var(--slate); }
.cust__status { display: grid; }
.st { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.55em; font-size: 0.85em; font-weight: 700; }
.st i { width: 0.7em; height: 0.7em; border-radius: 50%; }
.st--a { opacity: clamp(0, calc(1 - var(--e) * 2), 1); } .st--a i { background: var(--slate-light); }
.st--b { opacity: clamp(0, calc(var(--e) * 2 - 1), 1); } .st--b i { background: var(--sky); box-shadow: 0 0 0 0.25em rgba(56, 182, 255, 0.25); }
.cust__msg { display: flex; gap: 0.6em; align-items: flex-start; padding: 0.7em 0.8em; border-radius: 0.7em; background: #eaf6ff; font-size: 0.8em; line-height: 1.35; opacity: var(--e); transform: translate3d(0, calc((1 - var(--e)) * 0.8em), 0); }
.cust__msg svg { flex: none; width: 1.25em; height: 1.25em; color: var(--blue-text); margin-top: 0.05em; }

.real.stats { padding: 0; border: 0; background: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.stat { display: grid; align-content: space-between; gap: 0.5em; padding: 0.95em 1em; border-radius: 1em; background: var(--white); border: 1px solid var(--mist); }
.stat__l { font-size: 0.8em; color: var(--slate); font-weight: 500; line-height: 1.2; }
.stat__v { font-size: 2.1em; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat__v small { margin-left: 0.3em; font-size: 0.38em; font-weight: 500; letter-spacing: 0; color: var(--slate); }
.chart { display: grid; gap: 0.5em; }
.chart__t { font-size: 0.85em; font-weight: 700; }
.bars { display: flex; align-items: flex-end; gap: 0.7em; height: 3.4em; }
.bars i { flex: 1; height: var(--h); border-radius: 0.3em 0.3em 0 0; background: var(--sky); transform-origin: bottom; transform: scaleY(var(--e)); }
.bars i:nth-child(4) { background: var(--indigo); }
.bars__l { display: flex; gap: 0.7em; font-size: 0.7em; color: var(--slate); }
.bars__l span { flex: 1; text-align: center; }

/* Portrait version of the window (phones, narrow containers) */
@container win (max-width: 599px) {
  .sys__win .win__in { font-size: clamp(11px, 3.2cqw, 15px); }
  .win__tag { display: none; }
  .sys__body { grid-template-columns: 1fr; min-height: 0; }
  .sys__nav { display: none; }
  .sys__main { padding: 1.1em; gap: 1em; }
  .sys__grid { grid-template-columns: 1fr; gap: 0.9em; }
  .cell--cust { order: 1; grid-column: 1; } .cell--pipe { order: 2; grid-column: 1; } .cell--stats { order: 3; grid-column: 1; } .cell--chart { display: none; }
  .pipe__board { display: none; }
  .pipe__track { display: block; }
  .pipe__title { margin-bottom: 0.4em; }
  .stat { padding: 0.7em 0.8em; } .stat__v { font-size: 1.7em; }
  .skel--stats b { min-height: 4em; }
}

@media (max-width: 1099px) {
  .sys__layout { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 1rem; padding-top: 72px; }
  .sys__captions { height: 10.5rem; }
  .cap { top: 0; transform: translateY(12px); }
  .cap.is-active { transform: none; }
  .cap__t { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
  .cap__p { margin-top: 0.5rem; font-size: 0.98rem; }
  .switch { margin-top: 0.8rem; }
  .sys__winwrap { width: min(100%, 780px); margin-inline: auto; }
}
@media (max-width: 719px) { .cap__p { font-size: 0.94rem; } .chip { min-height: 40px; padding: 0 0.9rem; font-size: 0.85rem; } .sys__captions { height: 11.5rem; } }
@media (max-height: 700px) and (max-width: 719px) { .sys__captions { height: 10rem; } .cap__p { font-size: 0.88rem; } }

/* ---------- 4. Solutions ---------- */
.svc { position: relative; z-index: 4; background: var(--white); }
.svc__stage { padding-block: var(--section-y); }
.svc__grid { display: grid; gap: 2rem; }
.svc__head { display: grid; gap: 1rem; }
.svc__head .lead { max-width: 28rem; }
.svc__list { display: grid; }
.svc__item { border-top: 1px solid var(--mist); }
.svc__btn { display: block; width: 100%; text-align: left; padding: 0.7rem 0; }
.svc__name { display: block; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; color: #8b94a3; transition: color 0.5s; }
.svc__item--lead .svc__name { font-size: clamp(2.1rem, 1rem + 2.6vw, 3.3rem); }
.svc__item.is-active .svc__name { color: var(--ink); }
.svc__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-out); }
.svc__item.is-active .svc__more { grid-template-rows: 1fr; }
.svc__more-in { overflow: hidden; min-height: 0; display: grid; gap: 1rem; justify-items: start; max-width: 36rem; }
.svc__more-in > p { margin-top: 0.2rem; color: var(--slate); font-size: 1.05rem; }
.svc__more-in > a { margin-bottom: 1.2rem; }
.svc__sep { padding: 1.8rem 0 0.7rem; border-top: 1px solid var(--mist); font-size: 0.9rem; font-weight: 500; color: var(--slate); }
.svc__preview { display: none; }
.pv-slot .pv { margin-bottom: 1.4rem; }
.pv-slot .win--pv { min-height: 17rem; }

@media (min-width: 900px) {
  html:not(.reduced) .svc { height: 440svh; }
  html:not(.reduced) .svc__stage { position: sticky; top: 0; height: 100svh; padding-block: 0; display: flex; align-items: center; overflow: hidden; }
  html:not(.reduced) .svc__grid { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "list prev"; gap: 1.6rem clamp(2rem, 6vw, 6rem); padding-top: 64px; }
  html:not(.reduced) .svc__head { grid-area: head; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
  html:not(.reduced) .svc__head .h2 { font-size: clamp(2rem, 0.8rem + 2.6vw, 3.4rem); }
  html:not(.reduced) .svc__head .lead { font-size: 1.1rem; max-width: 20rem; }
  html:not(.reduced) .svc__list { grid-area: list; align-self: center; }
  html:not(.reduced) .svc__preview { grid-area: prev; display: block; position: relative; align-self: center; aspect-ratio: 1 / 1.02; max-height: 62svh; }
  html:not(.reduced) .pv-slot { display: none; }
  html:not(.reduced) .svc__preview .pv { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out); pointer-events: none; }
  html:not(.reduced) .svc__preview .pv.is-on { opacity: 1; transform: none; }
  html:not(.reduced) .svc__btn:hover .svc__name { color: var(--ink); }
}
@media (min-width: 900px) and (max-height: 780px) {
  html:not(.reduced) .svc__item--lead .svc__name { font-size: clamp(1.9rem, 3.2vw, 3rem); }
  html:not(.reduced) .svc__name { font-size: clamp(1.4rem, 2vw, 2rem); }
  html:not(.reduced) .svc__head .lead { font-size: 1rem; }
}

/* Preview windows */
.win--pv { height: 100%; }
.win--pv .win__in { height: 100%; display: flex; flex-direction: column; font-size: clamp(11px, 2.75cqw, 15px); }
.win--pv .win__bar { flex: none; }
.urlbar { flex: 1; max-width: 18em; padding: 0.35em 1em; border-radius: 99px; background: var(--mist); color: var(--slate); font-size: 0.85em; font-weight: 500; }
.pv.is-on [style*="--k"] { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--k) * 0.12s + 0.15s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.site { flex: 1; padding: 1.3em; display: grid; gap: 1.2em; align-content: start; }
.site s, .site b, .site em, .site i { display: block; text-decoration: none; font-style: normal; }
.site__nav { display: flex; align-items: center; justify-content: space-between; }
.site__nav b { width: 5em; height: 1.4em; border-radius: 0.3em; background: var(--ink); }
.site__nav span { display: flex; gap: 1em; }
.site__nav span s { width: 3em; height: 0.6em; border-radius: 0.3em; background: var(--mist-2); }
.site__nav em { width: 5em; height: 1.8em; border-radius: 99px; background: var(--sky); }
.site__hero { display: grid; gap: 0.9em; padding: 2em 0 1em; }
.site__h { display: grid; gap: 0.5em; }
.site__h s { height: 1.9em; width: 82%; border-radius: 0.3em; background: var(--ink); }
.site__h s + s { width: 56%; }
.site__p { display: grid; gap: 0.45em; }
.site__p s { height: 0.7em; width: 70%; border-radius: 0.3em; background: var(--mist-2); }
.site__p s + s { width: 48%; }
.site__btn { width: 7.5em; height: 2.5em; border-radius: 99px; background: var(--sky); }
.site__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.site__cols div { display: grid; gap: 0.5em; align-content: start; }
.site__cols i { aspect-ratio: 16 / 10; border-radius: 0.5em; background: var(--mist); }
.site__cols s { height: 0.6em; width: 90%; border-radius: 0.3em; background: var(--mist-2); }
.site__cols s + s { width: 60%; }

.mini { flex: 1; display: grid; grid-template-columns: 5.5em 1fr; }
.mini s, .mini b { display: block; text-decoration: none; }
.mini__nav { display: grid; gap: 0.7em; align-content: start; padding: 1.1em 0.9em; border-right: 1px solid var(--mist); background: #fbfbfc; }
.mini__nav s { height: 0.9em; border-radius: 0.3em; background: var(--mist-2); }
.mini__nav s:first-child { background: var(--ink); }
.mini__main { display: grid; gap: 1.1em; align-content: start; padding: 1.2em; }
.mini__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.mini__stats div { display: grid; gap: 0.6em; padding: 0.8em; border: 1px solid var(--mist); border-radius: 0.8em; }
.mini__stats s { height: 0.6em; width: 55%; border-radius: 0.3em; background: var(--mist-2); }
.mini__stats b { height: 1.5em; width: 70%; border-radius: 0.3em; background: var(--ink); }
.mini__flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; padding-top: 1.1em; }
.mini__flow span { padding: 0.55em 0.3em; border: 1px solid var(--mist); border-radius: 0.6em; background: #f6f7f9; font-size: 0.74em; font-weight: 500; text-align: center; color: var(--slate); }
.mini__dot { position: absolute; top: 0; left: 12%; width: 1.05em; height: 1.05em; margin-left: -0.5em; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0.35em rgba(56, 182, 255, 0.25); }
.pv.is-on .mini__dot { animation: hop 5s var(--ease-io) 0.8s infinite; }
@keyframes hop { 0%, 12% { left: 12.5%; } 30%, 42% { left: 37.5%; } 60%, 72% { left: 62.5%; } 90%, 100% { left: 87.5%; } }
.mini__rows { display: grid; gap: 0.5em; }
.mini__rows s { height: 2.3em; border-radius: 0.6em; background: #f3f5f8; border: 1px solid var(--mist); }

.host { padding: 1.4em; display: grid; gap: 1.3em; align-content: start; }
.host__top { display: flex; align-items: center; gap: 0.8em; font-size: 1.25em; letter-spacing: -0.02em; }
.pulse { position: relative; flex: none; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--sky); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sky); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.8); opacity: 0; } }
.host__up { display: grid; gap: 0.6em; }
.uptime { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; }
.uptime i { height: 2.4em; border-radius: 2px; background: var(--sky); }
.pv.is-on .uptime { animation: wipe 1.1s var(--ease-out) 0.4s both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.host__list li { display: flex; justify-content: space-between; gap: 1em; padding: 0.85em 0; border-top: 1px solid var(--mist); font-size: 0.95em; }
.host__list em { font-style: normal; color: var(--slate); }

.net { flex: 1; padding: 1em 1.2em 1.2em; display: grid; gap: 0.8em; align-content: center; }
.net svg { width: 100%; height: auto; overflow: visible; }
.net__wall { fill: none; stroke: var(--mist-2); stroke-width: 2; stroke-linecap: round; }
.net__arc { fill: rgba(56, 182, 255, 0.1); stroke: var(--sky); stroke-width: 1.2; stroke-opacity: 0.55; transform-box: fill-box; transform-origin: center; }
.net__arc--e1, .net__arc--e2 { opacity: 0; }
.net__node { fill: var(--ink); }
.net__node--e { fill: var(--sky); opacity: 0; transform-box: fill-box; transform-origin: center; }
.net__t { font-size: 13px; fill: var(--ink); font-weight: 700; font-family: var(--font); }
.net__t--s { fill: var(--slate); font-weight: 500; font-size: 11.5px; }
.pv.is-on .net__arc--1 { animation: wave 3s ease-out 0.2s infinite; }
.pv.is-on .net__arc--2 { animation: wave 3s ease-out 0.7s infinite; }
.pv.is-on .net__arc--3 { animation: wave 3s ease-out 1.2s infinite; }
.pv.is-on .net__arc--e1, .pv.is-on .net__arc--e2 { animation: fadein 1s ease-out 1.6s both; }
.pv.is-on .net__node--e { animation: pop 0.8s var(--ease-out) 1.4s both; }
@keyframes wave { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1); opacity: 0.15; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.net__legend { display: flex; gap: 1.4em; font-size: 0.85em; color: var(--slate); }
.net__legend span { display: inline-flex; align-items: center; gap: 0.5em; }
.net__legend i { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--ink); }
.net__legend i.e { background: var(--sky); }

.chat { flex: 1; padding: 1.3em; display: grid; gap: 0.7em; align-content: start; }
.b { margin: 0; max-width: 82%; padding: 0.75em 1em; border-radius: 1.1em; font-size: 0.95em; line-height: 1.35; }
.b--c { justify-self: start; background: var(--mist); border-bottom-left-radius: 0.3em; }
.b--n { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 0.3em; }

/* ---------- 5. We do more ---------- */
.more { background: var(--paper); z-index: 4; }
.more__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.more__lead { display: grid; gap: 1.4rem; justify-items: start; position: sticky; top: 120px; }
.more__lead .lead { max-width: 30rem; }
.more__note { max-width: 28rem; color: var(--slate); }
.more__list li { padding: 1.1rem 0; border-top: 1px solid var(--mist-2); font-size: clamp(1.2rem, 1rem + 0.95vw, 1.85rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; }
.more__list li:last-child { border-bottom: 1px solid var(--mist-2); }
@media (max-width: 899px) { .more__grid { grid-template-columns: 1fr; } .more__lead { position: static; } }

/* ---------- 6. How we work ---------- */
.how { height: 560svh; z-index: 6; }
.how__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.how__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-top: 56px; }
.how__left { display: grid; gap: 1.6rem; }
.how__dots { display: none; }
.how__steps-wrap { position: relative; }
.how__rail { position: absolute; left: 1.5rem; top: 1.4rem; bottom: 1.4rem; width: 2px; margin-left: -1px; background: var(--line); border-radius: 2px; overflow: hidden; }
.how__rail i { display: block; width: 100%; height: 100%; background: var(--grad); transform-origin: top; transform: scaleY(var(--p)); }
.how__step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 0.5rem 0; }
.how__t, .how__d { opacity: 0.4; transition: opacity 0.5s; }
.how__step.is-active .how__t, .how__step.is-active .how__d { opacity: 1; }
.how__n { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.92rem; font-weight: 700; color: var(--slate-light); transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.how__step.is-active .how__n { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.how__t { padding-top: 0.3rem; font-size: clamp(1.6rem, 1rem + 1.7vw, 2.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.how__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-out); }
.how__step.is-active .how__d { grid-template-rows: 1fr; }
.how__d > div { overflow: hidden; min-height: 0; }
.how__s { margin-top: 0.6rem; font-size: 1.1rem; font-weight: 500; color: #fff; }
.how__d p + p { margin-top: 0.4rem; color: var(--slate-light); font-size: 1rem; }
.how__right { min-width: 0; }
.how__win { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 90px -30px rgba(0, 0, 0, 0.7); }
.how__win .win__in { font-size: clamp(11px, 1.9cqw, 16px); }
.hp { position: relative; height: 31em; }
.hp__p { position: absolute; inset: 0; padding: 1.7em; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; }
.hp__p.is-on { opacity: 1; transform: none; }
.hp__h { margin: 0 0 1em; font-size: 1.3em; font-weight: 700; letter-spacing: -0.03em; }
.hp__l { margin: 1.2em 0 0.6em; }
.hp__foot { margin-top: 1.4em; }
.notes li { display: flex; gap: 0.9em; align-items: flex-start; padding: 1em 1.1em; margin-bottom: 0.7em; border: 1px solid var(--mist); border-radius: 0.8em; font-size: 1.02em; line-height: 1.35; }
.notes li::before { content: ""; flex: none; width: 0.6em; height: 0.6em; margin-top: 0.5em; border-radius: 50%; background: var(--sky); }
.hp__p.is-on [style*="--k"] { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--k) * 0.14s + 0.2s); }
.chain { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
.chain span { position: relative; padding: 0.6em 1em; border: 1px solid var(--mist-2); border-radius: 99px; font-size: 0.95em; }
.chain span:not(:last-child)::after { content: "→"; position: absolute; right: -0.95em; top: 50%; transform: translateY(-52%); color: var(--slate-light); font-size: 0.9em; background: var(--white); padding: 0 0.1em; }
.chain { column-gap: 1.2em; }
.chain--old .x { color: var(--slate); }
.chain--old .x::before { content: ""; position: absolute; left: 0.7em; right: 0.7em; top: 50%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.hp__p.is-on .chain--old .x::before { transform: none; }
.chain--old .x:nth-child(2)::before { transition-delay: 0.7s; } .chain--old .x:nth-child(3)::before { transition-delay: 0.9s; } .chain--old .x:nth-child(4)::before { transition-delay: 1.1s; }
.chain--new .n { background: var(--sky); border-color: var(--sky); color: var(--ink); font-weight: 700; }
.build li { display: grid; grid-template-columns: 11em 1fr 3.8em; gap: 1em; align-items: center; padding: 0.85em 0; border-top: 1px solid var(--mist); font-size: 1.02em; }
.build i { display: block; height: 0.55em; border-radius: 99px; background: var(--mist); overflow: hidden; }
.build b { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ease-out) calc(var(--k) * 0.12s + 0.2s); }
.hp__p.is-on .build b { transform: none; }
.build em { font-style: normal; text-align: right; color: var(--slate); font-size: 0.9em; }
.live { display: flex; align-items: center; gap: 0.8em; padding: 1em 1.2em; margin-bottom: 0.8em; border: 1px solid var(--mist); border-radius: 0.9em; font-size: 1.05em; }
.live em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--blue-text); }
.check li { display: flex; align-items: center; gap: 0.9em; padding: 0.75em 0; border-top: 1px solid var(--mist); }
.check i { position: relative; flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; border: 2px solid var(--mist-2); transition: background-color 0.4s, border-color 0.4s; transition-delay: calc(var(--k) * 0.18s + 0.3s); }
.check i::after { content: ""; position: absolute; left: 0.43em; top: 0.18em; width: 0.35em; height: 0.7em; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.4s var(--ease-out); transition-delay: calc(var(--k) * 0.18s + 0.4s); }
.hp__p.is-on .check i { background: var(--sky); border-color: var(--sky); }
.hp__p.is-on .check i::after { transform: rotate(45deg) scale(1); }
.chat--how { padding: 0.4em 0 0; }

@media (max-width: 899px) {
  .how { height: 440svh; }
  .how__grid { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 70px; align-content: center; }
  .how__left { gap: 0.8rem; }
  .how__dots { display: flex; gap: 0.4rem; }
  .how__dots i { width: 1.6rem; height: 4px; border-radius: 4px; background: var(--line); transition: background-color 0.4s; }
  .how__dots i.is-on { background: var(--sky); }
  .how__rail { display: none; }
  .how__step { display: none; padding: 0; }
  .how__step.is-active { display: grid; }
  .how__step .how__d { grid-template-rows: 1fr; }
  .how__n { width: 2.6rem; height: 2.6rem; }
  .how__step { grid-template-columns: 2.6rem 1fr; gap: 0.9rem; }
  .how__d p + p { font-size: 0.95rem; }
  .how__s { font-size: 1rem; margin-top: 0.3rem; }
  .how__win .win__in { font-size: clamp(11px, 3cqw, 15px); }
  .hp { height: 28em; }
  .hp__p { padding: 1.2em; }
  .build li { grid-template-columns: 8.5em 1fr 3.2em; gap: 0.7em; }
}
@media (max-width: 899px) and (max-height: 700px) { .hp { height: 22em; } .how__t { font-size: 1.4rem; } }

/* ---------- 7. The result ---------- */
.value { height: 430svh; z-index: 7; background: var(--warm); }
.value__stage { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.value__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; padding-top: 40px; }
.value__title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.052em; line-height: 0.98; text-wrap: balance; }
.value__body { display: grid; gap: clamp(1.4rem, 4svh, 2.6rem); }
.value__roles { display: grid; gap: 0.5rem; opacity: calc(1 - var(--e) * 0.74); }
.role { font-size: clamp(1.6rem, 0.8rem + 3vw, 3.9rem); font-weight: 700; letter-spacing: -0.048em; line-height: 1.06; opacity: calc(0.14 + var(--e) * 0.86); transform: translate3d(0, calc((1 - var(--e)) * 18px), 0); text-wrap: balance; }
.value__close { font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.3rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.2; color: var(--ink); opacity: calc(0.12 + var(--e) * 0.88); transform: translate3d(0, calc((1 - var(--e)) * 18px), 0); }
.value__close strong { display: block; font-weight: 700; color: var(--blue-text); }
@media (max-width: 1099px) { .value__inner { grid-template-columns: 1fr; gap: 1.6rem; } .value__title { max-width: 12ch; } }

.plate { background: var(--warm); z-index: 7; position: relative; padding-top: 0; }
.plate__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.plate__lead { display: grid; gap: 1.2rem; position: sticky; top: 120px; }
.plate__lead .lead { max-width: 26rem; }
.plate__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.35rem 0; border-top: 1px solid var(--mist-2); font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.65rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; }
.plate__row:last-child { border-bottom: 1px solid var(--mist-2); }
.plate__t { position: relative; transition: color 0.8s ease 0.5s; }
.plate__t::after { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-io) 0.6s; }
.plate__row.is-in .plate__t { color: var(--slate); }
.plate__row.is-in .plate__t::after { transform: none; }
.plate__ok { flex: none; font-weight: 700; color: var(--blue-text); opacity: 0; transform: translateX(-8px); transition: opacity 0.6s ease 1.3s, transform 0.8s var(--ease-out) 1.3s; }
.plate__row.is-in .plate__ok { opacity: 1; transform: none; }
html.no-js .plate__ok { opacity: 1; transform: none; }
@media (max-width: 899px) { .plate__grid { grid-template-columns: 1fr; } .plate__lead { position: static; } }

/* ---------- 8. Trust ---------- */
.trust { background: var(--white); z-index: 7; position: relative; }
.trust__h { margin-bottom: clamp(2rem, 4vw, 4rem); color: var(--slate); font-weight: 500; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.trust__i { padding-top: 1.3rem; border-top: 2px solid var(--ink); }
.trust__i h3 { margin-bottom: 0.6rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; }
.trust__i p { color: var(--slate); }
@media (max-width: 899px) { .trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) { .trust__grid { grid-template-columns: 1fr; } }
.cta { position: relative; z-index: 7; }

/* ---------- Shorter scenes on phones ---------- */
@media (max-width: 899px) {
  .problem { height: 250svh; }
  .sys { height: 500svh; }
  .value { height: 360svh; }
}

/* ---------- Static version (reduced motion, no JS) ---------- */
html:is(.reduced, .no-js) .hero-wrap { --p: 0; height: auto; }
html:is(.reduced, .no-js) .hero { position: relative; height: auto; min-height: 100svh; }
html:is(.reduced, .no-js) .hero__scroll i { animation: none; }
html:is(.reduced, .no-js) .problem { margin-top: 0; height: auto; padding-block: var(--section-y); border-radius: 0; }
html:is(.reduced, .no-js) .problem__stage, html:is(.reduced, .no-js) .sys__stage, html:is(.reduced, .no-js) .how__stage, html:is(.reduced, .no-js) .value__stage { position: static; height: auto; overflow: visible; }
html:is(.reduced, .no-js) .problem__inner { display: grid; gap: 3rem; height: auto; }
html:is(.reduced, .no-js) .problem__head { transform: none; }
html:is(.reduced, .no-js) .problem__pains { position: static; }
html:is(.reduced, .no-js) .sys { height: auto; padding-block: var(--section-y); }
html:is(.reduced, .no-js) .sys__statement { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 4rem; }
html:is(.reduced, .no-js) .sys__l2 { opacity: 1; transform: none; }
html:is(.reduced, .no-js) .sys__layout { height: auto; padding-top: 0; }
html:is(.reduced, .no-js) .sys__captions { height: auto; }
html:is(.reduced, .no-js) .cap { position: static; display: none; }
html:is(.reduced, .no-js) .cap[data-cap="4"] { display: block; opacity: 1; transform: none; pointer-events: auto; }
html:is(.reduced, .no-js) .sys__winwrap, html:is(.reduced, .no-js) .sys__win { transform: none; will-change: auto; }
html:is(.reduced, .no-js) .how { height: auto; padding-block: var(--section-y); border-radius: 0; }
html:is(.reduced, .no-js) .how__right, html:is(.reduced, .no-js) .how__rail, html:is(.reduced, .no-js) .how__dots { display: none; }
html:is(.reduced, .no-js) .how__grid { grid-template-columns: 1fr; }
html:is(.reduced, .no-js) .how__step { opacity: 1; display: grid; }
html:is(.reduced, .no-js) .how__d { grid-template-rows: 1fr; }
html:is(.reduced, .no-js) .value { height: auto; padding-block: var(--section-y) calc(var(--section-y) / 2); border-radius: 0; margin-top: 0; }
html:is(.reduced, .no-js) .value__roles { opacity: 1; }
html:is(.reduced, .no-js) .role, html:is(.reduced, .no-js) .value__close { opacity: 1; transform: none; }
html:is(.reduced, .no-js) .frag__in { animation: none; }