.ix-hero {
padding-bottom: 0;
}.ix-hero__row {
display: grid;
gap: 40px;
margin-top: clamp(8px, 1.5vw, 24px);
}.ix-hero__copy {
display: grid;
align-content: end;
gap: 32px;
}.ix-hero__copy .t-lead {
max-width: 30em;
}.ix-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 28px;
}.ix-hero__count {
color: var(--fg-3);
letter-spacing: 0.16em;
}.ix-hero__count b {
font-weight: 500;
color: var(--accent);
}@media (min-width: 1024px) {
.ix-hero__row {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}
}.ix-console {
display: grid;
max-width: 720px;
justify-self: end;
width: 100%;
}.ix-console__stage {
--ps: clamp(170px, 15vw, 236px);
position: relative;
height: clamp(250px, 22vw, 320px);
overflow: hidden;
border-bottom: 1px solid var(--line);
background:
radial-gradient(ellipse 60% 55% at 50% 55%, rgba(123, 44, 240, 0.22), transparent 70%);
}.ix-console__stage .ix-scene {
position: absolute;
inset: 0;
}.ix-console__cap {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4px 18px;
padding: 16px 18px 4px;
}.ix-console__num {
color: var(--fg-3);
}.ix-console__num b {
font-weight: 500;
color: var(--accent);
}.ix-console__name {
display: inline-flex;
align-items: center;
gap: 10px;
justify-self: start;
min-height: 44px;
font-family: var(--font-heading);
font-size: clamp(1.35rem, 0.9rem + 1.1vw, 2.1rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ix-console__arrow {
width: 18px;
height: 18px;
color: var(--accent);
transition: transform 0.5s var(--ease-expo);
}.ix-console__name:hover .ix-console__arrow {
transform: translateY(3px);
}.ix-console__note {
grid-column: 1 / -1;
min-height: 3em;
font-size: 0.95rem;
line-height: 1.5;
color: var(--fg-2);
}.ix-console__ctrl {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px 12px 18px;
}.ix-console__btns {
display: inline-flex;
gap: 6px;
}.no-js .ix-console__btns {
display: none;
}.ix-ibtn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg-2);
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}.ix-ibtn .icon {
width: 16px;
height: 16px;
}.ix-ibtn:hover {
border-color: var(--accent);
color: var(--accent);
}.ix-ibtn__pause {
position: relative;
width: 10px;
height: 12px;
border-inline: 3px solid currentColor;
}.ix-ibtn[aria-pressed="true"] .ix-ibtn__pause {
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent currentColor;
margin-left: 3px;
}.ix-ticker {
--speed: 90s;
margin-top: clamp(56px, 7vw, 112px);
padding-block: clamp(16px, 1.8vw, 26px);
border-top: 1px solid var(--line);
}.ix-ticker .marquee__track {
align-items: center;
}.ix-ticker__item {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 1rem + 3.6vw, 5rem);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
transition: color 0.6s var(--ease-out), -webkit-text-stroke-color 0.6s var(--ease-out);
}.ix-ticker__item.is-on {
color: var(--fg);
-webkit-text-stroke-color: transparent;
}.ix-ticker .wedge {
width: clamp(16px, 1.6vw, 26px);
transform: rotate(22.5deg);
}.ix-ticker.is-paused .marquee__track,
.ix-ticker.is-off .marquee__track {
animation-play-state: paused;
}.ix-scene {
--tilt: 56deg;
--a: var(--rz, -34deg);
--ps: 260px;
display: grid;
place-items: center;
perspective: 1500px;
perspective-origin: 50% 35%;
pointer-events: none;
color: #fff;
}.ix-scene__plane {
position: relative;
width: var(--ps);
height: var(--ps);
transform-style: preserve-3d;
transform: translateY(8%) rotateX(var(--tilt)) rotateZ(var(--a));
transition: transform 1.2s var(--ease-expo);
}.ix-scene__floor {
position: absolute;
inset: -16%;
border-radius: 14px;
background:
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 12) calc(100% / 12),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / calc(100% / 12) calc(100% / 12);
-webkit-mask: radial-gradient(closest-side, #000 55%, transparent);
mask: radial-gradient(closest-side, #000 55%, transparent);
transition: opacity 0.6s var(--ease-out);
}.ix-scene__halo {
position: absolute;
inset: 8%;
border-radius: 50%;
border: 1px dashed rgba(197, 244, 61, 0.28);
}.ix-scene__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
transform: translateZ(1px);
}.ix-wire {
fill: none;
stroke: rgba(255, 255, 255, 0.34);
stroke-width: 1.2;
stroke-dasharray: 100;
stroke-dashoffset: 0;
vector-effect: non-scaling-stroke;
transition: stroke-dashoffset 1s var(--ease-expo) calc(0.3s + var(--i) * 0.1s);
}.ix-wire--sig {
stroke: var(--dc-lime);
stroke-width: 2;
stroke-dasharray: 7 93;
stroke-dashoffset: 100;
animation: ixSignal 3s linear infinite;
animation-delay: calc(var(--i) * -1s);
transition: opacity 0.5s var(--ease-out);
}@keyframes ixSignal {
to { stroke-dashoffset: 0; }
}.ix-core {
position: absolute;
left: calc(var(--x) * 1%);
top: calc(var(--y) * 1%);
width: 0;
height: 0;
transform-style: preserve-3d;
--z: 18;
}.ix-core::before {
content: "";
position: absolute;
left: calc(var(--ps) * -0.19);
top: calc(var(--ps) * -0.19);
width: calc(var(--ps) * 0.38);
height: calc(var(--ps) * 0.38);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.35), transparent);
}.ix-core__block {
position: absolute;
left: calc(var(--ps) * -0.075);
top: calc(var(--ps) * -0.075);
width: calc(var(--ps) * 0.15);
height: calc(var(--ps) * 0.15);
display: grid;
place-items: center;
border-radius: 8px;
background: var(--dc-purple);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 34px rgba(123, 44, 240, 0.7);
transform: translateZ(18px);
}.ix-core__block .wedge {
width: 46%;
transform: rotate(22.5deg);
}.ix-mod {
position: absolute;
left: calc((var(--x) - var(--w) / 2) * 1%);
top: calc((var(--y) - var(--h) / 2) * 1%);
width: calc(var(--w) * 1%);
height: calc(var(--h) * 1%);
transform-style: preserve-3d;
}.ix-mod__shadow {
position: absolute;
inset: 4%;
border-radius: 8px;
background: rgba(8, 4, 14, 0.55);
border: 1px solid rgba(197, 244, 61, 0.14);
transition: opacity 0.8s var(--ease-out) calc(0.1s + var(--i) * 0.08s);
}.ix-mod__face {
position: absolute;
inset: 0;
container-type: size;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.26);
background: linear-gradient(155deg, #2d1f40, #1a1225 70%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(20, 13, 29, 0.4);
transform: translateZ(calc(var(--z) * 1px));
transition:
transform 1s var(--ease-expo) calc(0.12s + var(--i) * 0.09s),
opacity 0.5s var(--ease-out) calc(0.12s + var(--i) * 0.09s);
}.ix-mod:first-of-type .ix-mod__face {
border-color: rgba(197, 244, 61, 0.7);
}.ix-tag {
position: absolute;
left: 50%;
top: 50%;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(20, 13, 29, 0.88);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
transform-origin: 0 0;
transform:
translateZ(calc(var(--z) * 1px + 2px))
rotateZ(calc(var(--a) * -1))
rotateX(calc(var(--tilt) * -1))
translate(-50%, calc(-100% - var(--lift, 22px)));
transition:
transform 1s var(--ease-expo) calc(0.2s + var(--i, 0) * 0.09s),
opacity 0.5s var(--ease-out) calc(0.25s + var(--i, 0) * 0.09s);
}.ix-tag b {
font-weight: 500;
color: var(--dc-lime);
}.ix-tag--core {
--lift: 14px;
--i: 0;
background: var(--dc-lime);
border-color: var(--dc-lime);
color: var(--dc-purple-black);
}.ix-f {
position: absolute;
inset: 12% 10%;
display: grid;
align-content: start;
gap: 7cqh;
}.ix-f i,
.ix-f b {
display: block;
border-radius: 2px;
background: rgba(255, 255, 255, 0.16);
}.ix-f .on {
background: var(--dc-lime);
}.ix-f__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4cqh 4cqw;
}.ix-mod--calendar .ix-f > b {
width: 46%;
height: 9cqh;
background: rgba(255, 255, 255, 0.34);
}.ix-mod--calendar .ix-f__grid i {
height: 11cqh;
}.ix-mod--list .ix-f,
.ix-mod--doc .ix-f {
gap: 9cqh;
}.ix-mod--list .ix-f i {
height: 12cqh;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 12cqh, transparent 12cqh 18cqw, rgba(255, 255, 255, 0.16) 18cqw);
}.ix-mod--list .ix-f i.on {
background: linear-gradient(90deg, var(--dc-lime) 0 12cqh, transparent 12cqh 18cqw, rgba(197, 244, 61, 0.45) 18cqw);
}.ix-mod--form .ix-f i {
height: 15cqh;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
}.ix-mod--form .ix-f b {
width: 48%;
height: 16cqh;
border-radius: 20cqh;
background: var(--dc-lime);
}.ix-mod--cards .ix-f__grid {
grid-template-columns: repeat(2, 1fr);
gap: 7cqh 6cqw;
}.ix-mod--cards .ix-f__grid i {
height: 32cqh;
background: linear-gradient(180deg, rgba(123, 44, 240, 0.75) 0 58%, rgba(255, 255, 255, 0.18) 58% 72%, transparent 72%);
}.ix-mod--cards .ix-f__grid i.on {
background: linear-gradient(180deg, var(--dc-lime) 0 58%, rgba(255, 255, 255, 0.3) 58% 72%, transparent 72%);
}.ix-f__bars {
display: flex;
align-items: flex-end;
gap: 6cqw;
height: 72cqh;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}.ix-f__bars i {
flex: 1;
height: calc(var(--v) * 100%);
border-radius: 2px 2px 0 0;
background: rgba(123, 44, 240, 0.85);
}.ix-mod--chat .ix-f {
gap: 8cqh;
}.ix-mod--chat .ix-f i {
width: 64%;
height: 20cqh;
border-radius: 10cqh;
}.ix-mod--chat .ix-f i.on {
justify-self: end;
background: var(--dc-purple-bright);
}.ix-f__nodes {
display: flex;
align-items: center;
justify-content: space-between;
height: 70cqh;
background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) center / 100% 1px no-repeat;
}.ix-f__nodes i {
width: 22cqw;
height: 34cqh;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: #231833;
}.ix-f__nodes i.on {
background: var(--dc-lime);
border-color: var(--dc-lime);
}.ix-mod--doc .ix-f > b {
width: 62%;
height: 10cqh;
background: rgba(255, 255, 255, 0.4);
}.ix-mod--doc .ix-f i {
height: 5cqh;
}.ix-mod--doc .ix-f i:nth-child(3n) {
width: 70%;
}.ix-mod--doc .ix-f i:last-child {
width: 40%;
background: var(--dc-lime);
}.ix-f__tracks {
display: grid;
gap: 8cqh;
}.ix-f__tracks i {
height: 16cqh;
background:
linear-gradient(90deg, rgba(123, 44, 240, 0.9) 0 34%, transparent 34% 38%, rgba(123, 44, 240, 0.9) 38% 70%, transparent 70% 74%, rgba(123, 44, 240, 0.9) 74%);
}.ix-f__tracks i:nth-child(2) {
background: linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.3) 12% 52%, transparent 52% 58%, rgba(255, 255, 255, 0.3) 58% 88%, transparent 88%);
}.ix-f__tracks i:nth-child(3) {
background: repeating-linear-gradient(90deg, rgba(197, 244, 61, 0.7) 0 1px, transparent 1px 3px);
}.ix-mod--timeline .ix-f > b {
position: absolute;
left: 58%;
top: -8%;
width: 2px;
height: 116%;
background: var(--dc-lime);
}.ix-mod--cart .ix-f i {
height: 22cqh;
background:
linear-gradient(90deg, rgba(123, 44, 240, 0.8) 0 22cqh, transparent 22cqh calc(22cqh + 6cqw), rgba(255, 255, 255, 0.16) calc(22cqh + 6cqw));
}.ix-mod--cart .ix-f b {
height: 18cqh;
border-radius: 20cqh;
background: var(--dc-lime);
}.ix-mod--map .ix-f {
inset: 0;
}.ix-mod--map .ix-f i {
position: absolute;
inset: 0;
border-radius: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1.5px) 0 0 / 9cqw 9cqw;
}.ix-mod--map .ix-f b {
position: absolute;
left: 50%;
top: 50%;
width: 18cqh;
height: 18cqh;
margin: -9cqh 0 0 -9cqh;
border-radius: 50%;
background: var(--dc-lime);
box-shadow: 0 0 0 7cqh rgba(197, 244, 61, 0.22);
}.ix-mod--stars .ix-f > b {
background: none;
font-size: 20cqh;
line-height: 1;
letter-spacing: 0.1em;
color: var(--dc-lime);
}.ix-mod--stars .ix-f i {
height: 8cqh;
}.ix-mod--stars .ix-f i:last-child {
width: 60%;
}.ix-x.is-live .ix-env:not(.is-active) .ix-mod__face,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-mod__face {
transform: translateZ(0);
opacity: 0;
transition-duration: 0.45s, 0.3s;
transition-delay: calc(var(--i) * 0.03s);
}.ix-x.is-live .ix-env:not(.is-active) .ix-mod__shadow,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-mod__shadow,
.ix-x.is-live .ix-env:not(.is-active) .ix-core,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-core {
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}.ix-core {
transition: opacity 0.6s var(--ease-out) 0.1s;
}.ix-x.is-live .ix-env:not(.is-active) .ix-tag,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-tag {
opacity: 0;
transition-duration: 1s, 0.2s;
transition-delay: 0s;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-wire {
stroke-dashoffset: 100;
transition-duration: 0.35s;
transition-delay: 0s;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire--sig,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-wire--sig,
.ix-x.is-off .ix-wire--sig,
.ix-hero.is-off .ix-wire--sig,
.ix-hero.is-paused .ix-wire--sig {
animation-play-state: paused;
}.ix-x.is-live .ix-env:not(.is-active) .ix-wire--sig,
.ix-console .ix-scene:not(.is-active):not(.ix-scene--rig) .ix-wire--sig {
opacity: 0;
}.ix-console .ix-scene:not(.ix-scene--rig) .ix-scene__floor,
.ix-x.is-live .ix-env .ix-scene__floor {
opacity: 0;
}.ix-console .ix-scene {
--a: var(--ix-rz, var(--rz, -36deg));
}.ix-x {
padding-block: var(--chapter-pad);
}.ix-x__intro {
display: grid;
gap: 22px;
margin-bottom: clamp(32px, 4vw, 56px);
}.ix-x__title .accent {
color: var(--accent);
}.ix-x__lead {
max-width: 30em;
}.ix-x__hint,
.ix-x__rig {
display: none;
}.ix-x__list {
border-top: 1px solid var(--line-2);
}.ix-ind {
border-bottom: 1px solid var(--line);
}.ix-ind__head {
scroll-margin-top: calc(var(--header-h) + 16px);
font: inherit;
}.ix-ind__row {
position: relative;
display: grid;
grid-template-columns: 2.8em minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
min-height: 64px;
padding: 20px 0;
text-align: left;
-webkit-tap-highlight-color: transparent;
}.ix-ind__num {
align-self: start;
padding-top: 0.5em;
color: var(--accent);
}.ix-ind__name {
grid-column: 2;
font-family: var(--font-heading);
font-size: clamp(1.6rem, 0.9rem + 3vw, 2.8rem);
line-height: 0.95;
letter-spacing: var(--tracking-heading);
text-transform: uppercase;
color: var(--fg);
transition: color 0.5s var(--ease-out);
}.ix-ind__note {
grid-column: 2;
margin-top: 8px;
max-width: 34em;
font-size: 0.95rem;
line-height: 1.5;
color: var(--fg-2);
}.ix-ind__mark {
display: none;
}.ix-env__in {
display: grid;
gap: 22px;
padding-bottom: 40px;
}.ix-env__top {
display: none;
}.ix-env__stage {
--ps: min(60vw, 240px);
position: relative;
height: clamp(250px, 70vw, 330px);
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background:
radial-gradient(ellipse 60% 55% at 50% 55%, rgba(123, 44, 240, 0.22), transparent 70%),
var(--panel);
}.ix-env__stage .ix-scene {
position: absolute;
inset: 0;
}.ix-env__info {
display: grid;
gap: 24px;
}.ix-env__block {
display: grid;
align-content: start;
gap: 10px;
}.ix-env__label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ix-env__text {
max-width: 40em;
color: var(--fg-2);
line-height: 1.55;
text-wrap: pretty;
}.ix-env__text--solution {
color: var(--fg);
font-weight: 500;
}.ix-env__text--solution .wedge {
width: 0.8em;
margin-right: 10px;
vertical-align: 0.05em;
transform: rotate(22.5deg);
}.ix-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.ix-chip {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 12px 8px 14px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.1;
color: var(--fg);
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}.ix-chip__n {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--accent);
}.ix-chip__arrow {
width: 14px;
height: 14px;
color: var(--fg-3);
transition: transform 0.5s var(--ease-expo), color 0.35s var(--ease-out);
}.ix-chip:hover {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}.ix-chip:hover .ix-chip__arrow {
color: var(--accent);
transform: translate(2px, -2px);
}.ix-flow {
display: grid;
gap: 8px;
}.ix-flow .wstep {
min-height: 52px;
padding: 10px 14px;
}.ix-flow .wstep__label {
font-size: 0.9375rem;
line-height: 1.3;
}.ix-flow .wstep__meta {
font-size: 0.625rem;
}.ix-flow .wstep.is-done {
border-color: var(--line-2);
}@media (min-width: 1024px) {
.ix-x__intro {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.ix-x__intro .folio {
grid-column: 1 / -1;
}.ix-x:not(.is-live) .ix-ind {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 5vw, 96px);
padding-block: 36px;
}.ix-x:not(.is-live) .ix-ind__head {
position: sticky;
top: calc(var(--header-h) + 24px);
align-self: start;
}.ix-x:not(.is-live) .ix-env__in {
padding-bottom: 0;
}.ix-x:not(.is-live) .ix-env__info {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
}.ix-x:not(.is-live) .ix-env__block--flow,
.ix-x:not(.is-live) .ix-env__block--solution {
grid-column: 1 / -1;
}.ix-x:not(.is-live) .ix-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}@media (min-width: 1024px) {
.ix-x.is-live {
--ix-top: calc(var(--header-h) + 14px);
--ix-h: calc(100vh - var(--header-h) - 28px);
--ix-bar: 58px;
--ix-stage-h: clamp(170px, calc(100vh - 560px), 380px);
padding-bottom: 0;
}.ix-x.is-live .ix-x__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(36px, 4vw, 80px);
}.ix-x.is-live .ix-x__list,
.ix-x.is-live .ix-ind {
display: contents;
}.ix-x.is-live .ix-x__intro {
grid-column: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
min-height: calc(50vh - var(--ix-top) - 40px);
margin: 0;
padding-bottom: 48px;
}.ix-x.is-live .ix-x__title {
font-size: min(var(--fs-h2), 3.9vw);
}.ix-x.is-live .ix-x__title .line {
white-space: nowrap;
}.ix-x.is-live .ix-x__hint {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: auto;
color: var(--fg-3);
}.ix-x__hint-line {
position: relative;
width: 1px;
height: 36px;
background: var(--line-2);
overflow: hidden;
}.ix-x__hint-line::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 40%;
background: var(--accent);
animation: ixHint 2.2s var(--ease-in-out) infinite;
}@keyframes ixHint {
from { transform: translateY(-100%); }
to { transform: translateY(260%); }
}.ix-x.is-live .ix-ind__head {
grid-column: 1;
border-top: 1px solid var(--line);
}.ix-x.is-live .ix-x__outro {
grid-column: 1;
min-height: calc(50vh + 40px);
padding-top: 40px;
border-top: 1px solid var(--line);
}.ix-x.is-live .ix-ind__row {
grid-template-columns: 3.2em minmax(0, 1fr) auto;
min-height: max(150px, 17vh);
padding: 22px 0;
will-change: transform;
}.ix-x.is-live .ix-ind__num {
align-self: center;
padding-top: 0;
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ix-x.is-live .ix-ind__name {
font-size: min(3.3vw, 4.4rem);
line-height: 0.92;
color: color-mix(in srgb, var(--fg) 40%, transparent);
}.ix-x.is-live .ix-ind__note {
display: none;
}.ix-x.is-live .ix-ind.is-active .ix-ind__name,
.ix-x.is-live .ix-ind__row:hover .ix-ind__name,
.ix-x.is-live .ix-ind__row:focus-visible .ix-ind__name {
color: var(--fg);
}.ix-x.is-live .ix-ind.is-active .ix-ind__num {
color: var(--accent);
}
.ix-x.is-live .ix-ind__mark {
display: block;
position: relative;
grid-column: 3;
grid-row: 1;
width: clamp(28px, 3vw, 60px);
height: 1px;
margin-right: calc(clamp(36px, 4vw, 80px) * -1);
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.7s var(--ease-expo);
}.ix-x.is-live .ix-ind__mark::before {
content: "";
position: absolute;
left: -14px;
top: -6px;
width: 13px;
aspect-ratio: var(--wedge-ratio);
background: var(--dc-lime);
-webkit-mask: var(--wedge);
mask: var(--wedge);
transform: rotate(22.5deg);
opacity: 0;
transition: opacity 0.4s var(--ease-out);
}.ix-x.is-live .ix-ind.is-active .ix-ind__mark {
transform: scaleX(1);
transform-origin: left;
}.ix-x.is-live .ix-ind.is-active .ix-ind__mark::before {
opacity: 1;
}
.ix-x.is-live .ix-x__rig {
display: block;
position: sticky;
top: var(--ix-top);
z-index: 0;
grid-column: 2;
grid-row: 1 / span 20;
align-self: start;
height: var(--ix-h);
border: 1px solid var(--line);
border-radius: 14px;
background:
radial-gradient(ellipse 55% 40% at 50% calc(var(--ix-bar) + var(--ix-stage-h) * 0.55), rgba(123, 44, 240, 0.26), transparent 70%),
var(--panel);
}.ix-x__rig-stage {
position: absolute;
left: 0;
right: 0;
top: var(--ix-bar);
height: var(--ix-stage-h);
overflow: hidden;
}.ix-x__rig .ix-scene,
.ix-x.is-live .ix-env__stage .ix-scene {
--ps: min(calc(var(--ix-stage-h) * 0.92), 300px);
position: absolute;
inset: 0;
}.ix-x.is-live .ix-scene {
--a: var(--ix-rz, var(--rz));
}.ix-x__ghost {
position: absolute;
right: 24px;
top: calc(var(--ix-bar) + 10px);
font-family: var(--font-heading);
font-size: clamp(3.5rem, 7vw, 7.5rem);
line-height: 0.8;
-webkit-text-stroke-color: var(--line-2);
}
.ix-x.is-live .ix-env {
position: sticky;
top: var(--ix-top);
z-index: 1;
grid-column: 2;
grid-row: 1 / span 20;
align-self: start;
height: var(--ix-h);
visibility: hidden;
transition: visibility 0s linear 0.7s;
}.ix-x.is-live .ix-env.is-active {
z-index: 2;
visibility: visible;
transition-delay: 0s;
}.ix-x.is-live .ix-env__in {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 clamp(20px, 2vw, 32px) clamp(16px, 1.8vw, 26px);
gap: 0;
}.ix-x.is-live .ix-env__top {
display: flex;
align-items: center;
gap: 18px;
flex: none;
height: var(--ix-bar);
border-bottom: 1px solid var(--line);
}.ix-env__id {
display: inline-flex;
gap: 8px;
color: var(--fg-3);
}.ix-env__num {
color: var(--accent);
}.ix-env__name {
font-family: var(--font-heading);
font-size: 1.05rem;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}.ix-env__status {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
font-size: 0.625rem;
color: var(--fg-3);
white-space: nowrap;
}.ix-x.is-live .ix-env__stage {
flex: none;
height: var(--ix-stage-h);
border: 0;
border-radius: 0;
background: none;
overflow: visible;
}.ix-x.is-live .ix-env__info {
flex: 1;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 18px 28px;
min-height: 0;
padding-top: 18px;
border-top: 1px solid var(--line);
}.ix-x.is-live .ix-env__block--flow,
.ix-x.is-live .ix-env__block--solution {
grid-column: 1 / -1;
}.ix-x.is-live .ix-env__text {
font-size: 0.9375rem;
line-height: 1.5;
}.ix-x.is-live .ix-env__text--solution {
font-size: 1rem;
}.ix-x.is-live .ix-flow {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}.ix-x.is-live .ix-flow .wstep {
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
gap: 6px 10px;
min-height: 0;
padding: 10px 12px 12px;
}.ix-x.is-live .ix-flow .wstep__n {
width: 26px;
height: 26px;
}.ix-x.is-live .ix-flow .wstep__meta {
align-self: center;
}.ix-x.is-live .ix-flow .wstep__label {
grid-column: 1 / -1;
font-size: 0.8125rem;
}
.ix-x.is-live .ix-env__top > *,
.ix-x.is-live .ix-env__block {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}.ix-x.is-live .ix-env.is-active .ix-env__top > *,
.ix-x.is-live .ix-env.is-active .ix-env__block {
opacity: 1;
transform: none;
transition: opacity 0.6s var(--ease-out) var(--d, 0.2s), transform 0.9s var(--ease-expo) var(--d, 0.2s);
}.ix-env__block--challenge { --d: 0.22s; }
.ix-env__block--services { --d: 0.28s; }
.ix-env__block--flow { --d: 0.34s; }
.ix-env__block--solution { --d: 0.4s; }
}@media (min-width: 1024px) and (max-width: 1279px) {
.ix-x.is-live .ix-env__info {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}.ix-x.is-live .ix-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ix-x.is-live .ix-env__block--challenge .ix-env__text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}@media (min-width: 1024px) and (max-height: 820px) {
.ix-x.is-live {
--ix-stage-h: clamp(150px, calc(100vh - 540px), 300px);
--ix-bar: 50px;
}.ix-x.is-live .ix-flow .wstep {
padding: 8px 10px 10px;
}
}@media (max-width: 1023px) {
.ix-x.is-acc .ix-ind__mark {
display: block;
position: relative;
grid-column: 3;
grid-row: 1;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-2);
}.ix-x.is-acc .ix-ind__mark::before,
.ix-x.is-acc .ix-ind__mark::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 1.5px;
background: var(--fg);
translate: -50% -50%;
transition: transform 0.5s var(--ease-expo);
}.ix-x.is-acc .ix-ind__mark::after {
transform: rotate(90deg);
}.ix-x.is-acc .ix-ind.is-open .ix-ind__mark {
border-color: var(--accent);
}.ix-x.is-acc .ix-ind.is-open .ix-ind__mark::after {
transform: rotate(0deg);
}.ix-x.is-acc .ix-env {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.6s var(--ease-expo), visibility 0s linear 0.6s;
}.ix-x.is-acc .ix-env__in {
min-height: 0;
overflow: hidden;
}.ix-x.is-acc .ix-ind.is-open .ix-env {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 0.6s var(--ease-expo), visibility 0s;
}.ix-x.is-acc .ix-ind.is-open .ix-ind__name {
color: var(--fg);
}.ix-x.is-acc .ix-no-anim .ix-env,
.ix-x.is-acc .ix-no-anim .ix-ind__mark::after {
transition: none;
}
}.ix-an__grid {
display: grid;
gap: clamp(32px, 4vw, 56px);
}.ix-an__head {
display: grid;
gap: 22px;
}.ix-an__visual {
position: relative;
height: clamp(360px, 92vw, 480px);
}.ix-stack {
--tilt: 56deg;
--a: -38deg;
--ps: clamp(190px, 50vw, 250px);
--gap: clamp(40px, 11vw, 60px);
position: absolute;
inset: 0;
display: grid;
place-items: center;
perspective: 1500px;
perspective-origin: 50% 30%;
color: #fff;
}.ix-stack__plane {
position: relative;
width: var(--ps);
height: var(--ps);
transform-style: preserve-3d;
transform: translateY(calc(var(--gap) * var(--s, 1) * 1.1)) rotateX(var(--tilt)) rotateZ(var(--a));
}.ix-layer {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: translateZ(calc(var(--k) * var(--gap) * var(--s, 1)));
}.ix-layer__sheet {
position: absolute;
inset: 0;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(38, 23, 53, 0.35);
}.ix-layer--core .ix-layer__sheet {
background:
linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
rgba(20, 13, 29, 0.75);
}.ix-layer__block {
position: absolute;
left: 41%;
top: 43%;
width: 18%;
height: 18%;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--dc-lime);
transform: translateZ(8px);
}.ix-layer__block .wedge {
width: 46%;
background: var(--dc-purple-black);
transform: rotate(22.5deg);
}.ix-layer--mods i {
position: absolute;
left: calc((var(--x) - 13) * 1%);
top: calc((var(--y) - 10) * 1%);
width: 26%;
height: 20%;
border-radius: 6px;
background:
linear-gradient(rgba(103, 33, 223, 0.5), rgba(103, 33, 223, 0.5)) 14% 30% / 60% 10% no-repeat,
linear-gradient(rgba(103, 33, 223, 0.3), rgba(103, 33, 223, 0.3)) 14% 58% / 44% 10% no-repeat,
#fff;
}.ix-layer--wires svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}.ix-layer--wires path {
fill: none;
stroke: var(--dc-lime);
stroke-width: 2;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--draw, 1) * 100);
vector-effect: non-scaling-stroke;
}.ix-layer--ai .ix-layer__sheet {
background: rgba(197, 244, 61, 0.06);
border-color: rgba(197, 244, 61, 0.7);
border-style: dashed;
}.ix-layer__ring {
position: absolute;
inset: 18%;
border-radius: 50%;
border: 1px solid rgba(197, 244, 61, 0.75);
}.ix-layer__ring--2 {
inset: 34%;
border-style: dashed;
}.ix-layer--ai i {
position: absolute;
left: calc(var(--x) * 1% - 5px);
top: calc(var(--y) * 1% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--dc-lime);
box-shadow: 0 0 0 5px rgba(197, 244, 61, 0.2);
}.ix-tag--layer {
--z: 0;
--lift: 6px;
left: 100%;
top: 0;
}.ix-an__layers {
display: grid;
gap: 0;
border-top: 1px solid var(--line-2);
}.ix-an__layer {
position: relative;
display: grid;
grid-template-columns: 3em minmax(0, 1fr);
gap: 12px;
padding: 20px 0 22px;
border-bottom: 1px solid var(--line);
}.ix-an__layer::before {
content: "";
position: absolute;
left: 0;
top: -1px;
width: 100%;
height: 1px;
background: var(--dc-lime);
transform: scaleX(var(--lit, 1));
transform-origin: left;
transition: transform 0.9s var(--ease-expo);
}.ix-an__n {
padding-top: 3px;
color: var(--dc-lime);
}.ix-an__role {
margin-bottom: 6px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ix-an__name {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
text-transform: uppercase;
}.ix-an__copy {
margin-top: 10px;
color: var(--fg-2);
line-height: 1.55;
}.ix-an__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin-top: 4px;
font-weight: 700;
color: var(--fg);
}.ix-an__link .icon {
width: 15px;
height: 15px;
color: var(--dc-lime);
transition: transform 0.5s var(--ease-expo);
}.ix-an__link:hover .icon {
transform: translate(3px, -3px);
}.ix-an.is-live .ix-an__layer:not(.is-lit) {
--lit: 0;
}.ix-an.is-live .ix-an__layer:not(.is-lit) .ix-an__n {
color: var(--fg-3);
}@media (min-width: 1024px) {
.ix-an__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "visual head" "visual layers";
grid-template-rows: auto 1fr;
column-gap: clamp(40px, 5vw, 96px);
row-gap: 36px;
align-items: start;
}.ix-an__head { grid-area: head; }
.ix-an__layers { grid-area: layers; }.ix-an__visual {
grid-area: visual;
align-self: stretch;
height: auto;
min-height: 560px;
}.ix-stack {
--ps: clamp(240px, 20vw, 330px);
--gap: clamp(58px, 5.4vw, 88px);
}.ix-an__title {
font-size: min(var(--fs-h2), 4.4vw);
}.ix-an__title .line {
white-space: nowrap;
}.ix-an__layers {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
align-self: end;
}.ix-an__layer {
grid-template-columns: 1fr;
gap: 8px;
}.ix-an__copy {
font-size: 0.9375rem;
}
}.ix-pt__title .accent {
color: var(--accent);
}.ix-pt__grid {
display: grid;
gap: 48px;
}.ix-pt__side {
display: grid;
align-content: start;
gap: 28px;
}.no-js .ix-pt__tabs {
display: none;
}.ix-pt__tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}.ix-pt__tab {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
text-align: left;
color: var(--fg-2);
transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}.ix-pt__tab-n {
color: var(--accent);
transition: color 0.35s var(--ease-out);
}.ix-pt__tab-name {
font-weight: 700;
}.ix-pt__tab:hover {
border-color: var(--accent);
color: var(--fg);
}.ix-pt__tab[aria-selected="true"] {
border-color: var(--dc-purple);
background-color: var(--dc-purple);
color: #fff;
}.ix-pt__tab[aria-selected="true"] .ix-pt__tab-n {
color: var(--dc-lime);
}.ix-pt__panel {
display: grid;
align-content: start;
gap: 14px;
padding-top: 8px;
}.ix-pt__panel + .ix-pt__panel {
padding-top: 32px;
border-top: 1px solid var(--line);
}.js .ix-pt__panel + .ix-pt__panel {
padding-top: 8px;
border-top: 0;
}.ix-pt__panel:focus-visible {
outline-offset: 8px;
}.ix-pt__name {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1;
text-transform: uppercase;
}.ix-pt__name-n {
color: var(--accent);
}.ix-pt__line {
font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--fg);
}.ix-pt__copy {
max-width: 36em;
color: var(--fg-2);
line-height: 1.6;
}.ix-pt__label {
margin-top: 10px;
font-size: 0.6875rem;
color: var(--fg-3);
}.ix-pt__label b {
font-weight: 500;
color: var(--accent);
}.ix-pt__in {
line-height: 1.9;
color: var(--fg-3);
}.ix-pt__in a {
font-weight: 600;
color: var(--fg);
background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
transition: background-size 0.5s var(--ease-expo), color 0.3s var(--ease-out);
}.ix-pt__in a:hover {
color: var(--accent);
background-size: 100% 1px;
}@media (min-width: 1024px) {
.ix-pt__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: start;
}.ix-pt__tabs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}.ix-pt__tab {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 14px;
}.ix-pt__side {
position: sticky;
top: calc(var(--header-h) + 32px);
}
}.ix-mx {
padding: clamp(16px, 2vw, 28px);
border: 1px solid var(--line-2);
border-radius: 14px;
background: color-mix(in srgb, #fff 70%, transparent);
}.ix-mx__cap {
display: grid;
gap: 6px;
margin-bottom: 18px;
color: var(--fg-3);
}.ix-mx__cap .t-mono {
color: var(--fg);
}.ix-mx__note {
font-size: 0.875rem;
}.ix-mx__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}.ix-mx__table th,
.ix-mx__table td {
padding: 0;
border-bottom: 1px solid var(--line);
font-weight: inherit;
}.ix-mx__table thead th {
padding-bottom: 12px;
border-bottom-color: var(--line-2);
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
color: var(--fg-3);
transition: color 0.35s var(--ease-out);
}.ix-mx__table thead th:first-child {
width: 46%;
}.ix-mx__h-n,
.ix-mx__h-name {
display: block;
}.ix-mx__h-n {
margin-bottom: 4px;
}.ix-mx__table tbody th {
text-align: left;
}.ix-mx__table tbody th a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
color: var(--fg-2);
transition: color 0.3s var(--ease-out);
}.ix-mx__table tbody th a:hover {
color: var(--accent);
}.ix-mx__n {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.08em;
color: var(--fg-3);
}.ix-mx__table td {
text-align: center;
transition: background-color 0.4s var(--ease-out);
}.ix-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid var(--line-2);
vertical-align: middle;
transition: transform 0.5s var(--ease-expo), background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}.ix-dot.is-on {
border-color: transparent;
background: var(--fg-3);
}.ix-mx__table[data-col="0"] thead th:nth-child(2),
.ix-mx__table[data-col="1"] thead th:nth-child(3),
.ix-mx__table[data-col="2"] thead th:nth-child(4),
.ix-mx__table[data-col="3"] thead th:nth-child(5) {
color: var(--accent);
}.ix-mx__table[data-col="0"] td:nth-of-type(1),
.ix-mx__table[data-col="1"] td:nth-of-type(2),
.ix-mx__table[data-col="2"] td:nth-of-type(3),
.ix-mx__table[data-col="3"] td:nth-of-type(4) {
background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}.ix-mx__table[data-col="0"] td:nth-of-type(1) .is-on,
.ix-mx__table[data-col="1"] td:nth-of-type(2) .is-on,
.ix-mx__table[data-col="2"] td:nth-of-type(3) .is-on,
.ix-mx__table[data-col="3"] td:nth-of-type(4) .is-on {
background: var(--accent);
transform: scale(1.35);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}.ix-mx__table[data-col="0"] tr:has(td:nth-of-type(1) .is-on) th a,
.ix-mx__table[data-col="1"] tr:has(td:nth-of-type(2) .is-on) th a,
.ix-mx__table[data-col="2"] tr:has(td:nth-of-type(3) .is-on) th a,
.ix-mx__table[data-col="3"] tr:has(td:nth-of-type(4) .is-on) th a {
color: var(--fg);
}.ix-mx.is-pre .ix-dot {
transform: scale(0);
}.ix-mx.is-reveal .ix-dot {
transition-delay: calc(var(--r, 0) * 0.035s);
}.js .ix-pt__panel:not([hidden]) {
animation: ixPanelIn 0.7s var(--ease-expo);
}@keyframes ixPanelIn {
from { opacity: 0; transform: translateY(14px); }
}@media (pointer: coarse) {
.ix-mx__table tbody th a {
min-height: 44px;
}
}@media (max-width: 599px) {
.ix-mx__table thead th:first-child {
width: 42%;
}.ix-mx__h-name {
font-size: 0.5625rem;
letter-spacing: 0.04em;
}.ix-mx__table tbody th a {
font-size: 0.875rem;
}
}@media (prefers-reduced-motion: reduce) {
.ix-wire--sig,
.ix-x__hint-line::after {
display: none;
}
}