/* XYRA live demo – presentation slides on the shared screen (see demo-slides.js). */

.xd-deck {
    --xs-ink: #f4f3ff; --xs-muted: #b9b6d8; --xs-cyan: #22d3ee; --xs-violet: #a855f7; --xs-indigo: #6366f1;
    --xs-card: rgba(255,255,255,.06); --xs-line: rgba(255,255,255,.12);
    z-index: 1; overflow: hidden; color: var(--xs-ink); perspective: 1400px;
    background: radial-gradient(120% 90% at 15% 0%, #2a1660 0%, #120c33 45%, #070718 100%);
    font-family: inherit;
}

/* ---- the stage: drifting light and a 3D grid floor ---- */
.xs-bg { position: absolute; inset: 0; pointer-events: none; }
.xs-bg::before, .xs-bg::after {
    content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .45;
    animation: xs-drift 18s ease-in-out infinite alternate;
}
.xs-bg::before { background: var(--xs-violet); top: -25%; left: -10%; }
.xs-bg::after { background: var(--xs-cyan); bottom: -35%; right: -15%; opacity: .3; animation-delay: -9s; }
@keyframes xs-drift { to { transform: translate(12%, 10%) scale(1.15); } }
.xs-floor {
    position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; pointer-events: none;
    background-image: linear-gradient(rgba(168,85,247,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.22) 1px, transparent 1px);
    background-size: 64px 64px; transform: rotateX(72deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    animation: xs-floor 6s linear infinite;
}
@keyframes xs-floor { to { background-position: 0 64px, 0 0; } }

/* ---- slides ---- */
.xs-slides { position: absolute; inset: 0; transform-style: preserve-3d; }
.xs-slide {
    position: absolute; inset: 0; padding: clamp(20px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: safe center; gap: clamp(12px, 2vh, 22px);
    opacity: 0; transform: translateZ(-160px) rotateY(10deg) translateX(6%); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.xs-slide.on { opacity: 1; transform: none; }
.xs-slide.off { opacity: 0; transform: translateZ(-220px) rotateY(-12deg) translateX(-8%); }
.xs-slide [style*="--i"] { opacity: 0; transform: translateY(18px) rotateX(-18deg); transform-origin: 50% 0; }
.xs-slide.on [style*="--i"] { animation: xs-in .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.35s + var(--i) * .32s); }
@keyframes xs-in { to { opacity: 1; transform: none; } }

.xs-head { max-width: 860px; }
.xs-kicker {
    margin: 0 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--xs-cyan), var(--xs-violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xs-title { margin: 0; font-size: clamp(1.5rem, 2.9vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.xs-sub { margin: 10px 0 0; color: var(--xs-muted); font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.55; max-width: 760px; }

/* ---- the XYRA ring ---- */
.xs-ring { position: relative; width: 92px; aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.xs-ring.big { width: clamp(120px, 15vw, 190px); }
.xs-ring img { width: 74%; height: 74%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 22px rgba(34,211,238,.45)); animation: xs-float 5s ease-in-out infinite; }
.xs-ring-line { position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--xs-cyan), var(--xs-violet), var(--xs-indigo), var(--xs-cyan));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xs-spin 8s linear infinite; }
.xs-ring-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.45), transparent 65%); animation: xs-pulse 4s ease-in-out infinite; }
@keyframes xs-spin { to { transform: rotate(360deg); } }
@keyframes xs-float { 50% { transform: translateY(-6px) rotateY(18deg); } }
@keyframes xs-pulse { 50% { opacity: .5; transform: scale(1.08); } }

/* ---- hero ---- */
.xs-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.xs-hero .xs-sub { margin-inline: auto; }
.xs-hero-title { font-size: clamp(1.9rem, 4vw, 3.4rem); background: linear-gradient(90deg, #fff, #d9ccff 60%, #9ef0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xs-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; margin-top: 18px; }
.xs-logo-row img { height: clamp(22px, 2.6vw, 32px); width: auto; opacity: .92; }

/* ---- split (profile, showcase) ---- */
.xs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 44px); align-items: center; height: 100%; }
.xs-split-copy { display: flex; flex-direction: column; gap: 22px; }
.xs-profile { display: flex; flex-direction: column; gap: 12px; }
.xs-field {
    position: relative; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; padding: 16px 52px 16px 20px; border-radius: 16px;
    background: var(--xs-card); border: 1px solid var(--xs-line); backdrop-filter: blur(6px); transition: border-color .4s, background .4s, box-shadow .4s;
}
.xs-field-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--xs-muted); }
.xs-field-value { font-size: 1.08rem; font-weight: 600; color: rgba(255,255,255,.55); }
.xs-field.filled .xs-field-value { color: #fff; }
.xs-field.filled { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.08); }
.xs-field.asking { border-color: var(--xs-violet); box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 12px 40px rgba(168,85,247,.25); }
.xs-field.asking .xs-field-value { color: #fff; font-weight: 500; font-style: italic; }
.xs-tick { position: absolute; right: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--xs-cyan), var(--xs-violet)); animation: xs-pop .5s ease; }
.xs-tick svg { width: 15px; height: 15px; color: #fff; }
@keyframes xs-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } }

/* ---- steps ---- */
.xs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.xs-steps li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: var(--xs-card); border: 1px solid var(--xs-line); font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 600; }
.xs-num { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--xs-cyan), var(--xs-violet)); color: #fff; box-shadow: 0 6px 20px rgba(168,85,247,.4); }
.xs-num svg { width: 20px; height: 20px; }
.xs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.xs-btn { padding: 14px 26px; border-radius: 999px; font-weight: 700; background: linear-gradient(90deg, var(--xs-cyan), var(--xs-violet)); color: #fff; box-shadow: 0 10px 30px rgba(168,85,247,.4); }
.xs-btn.ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; }

/* ---- cards ---- */
.xs-cards { display: grid; gap: clamp(10px, 1.6vw, 18px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xs-cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xs-cards.c3.with-image { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); }
.xs-card {
    padding: clamp(14px, 1.8vw, 22px); border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    border: 1px solid var(--xs-line); box-shadow: 0 18px 40px rgba(0,0,0,.25); transition: transform .4s;
}
.xs-card:nth-child(odd) { --tilt: -3deg; } .xs-card:nth-child(even) { --tilt: 3deg; }
.xs-slide.on .xs-card { animation: xs-in .7s cubic-bezier(.2,.8,.2,1) forwards, xs-hover 7s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .32s), calc(1.5s + var(--i) * .5s); }
@keyframes xs-hover { 50% { transform: translateY(-5px) rotateY(var(--tilt)); } }
.xs-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(168,85,247,.35)); color: #fff; margin-bottom: 12px; }
.xs-icon svg { width: 24px; height: 24px; }
.xs-card h3 { margin: 0 0 6px; font-size: clamp(1rem, 1.3vw, 1.18rem); }
.xs-card p { margin: 0; color: var(--xs-muted); font-size: clamp(.85rem, 1.05vw, .97rem); line-height: 1.5; }
.xs-float { margin: 0; align-self: center; border-radius: 20px; overflow: hidden; transform: rotateY(-14deg) rotateX(6deg); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.xs-slide.on .xs-float { animation: xs-in .8s ease forwards, xs-float 6s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .32s), 2s; }
.xs-float img { display: block; width: 100%; height: auto; }
.xs-badges { display: flex; gap: 16px; }
.xs-badges img { height: 64px; width: auto; border-radius: 10px; background: #fff; padding: 4px; }

/* ---- compare ---- */
.xs-compare { display: flex; flex-direction: column; gap: 8px; max-width: 980px; }
.xs-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 18px; border-radius: 14px; background: var(--xs-card); border: 1px solid var(--xs-line); font-size: clamp(.9rem, 1.15vw, 1.05rem); }
.xs-row-head { background: none; border: 0; padding-block: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--xs-muted); }
.xs-row .xs-us { font-weight: 700; color: #fff; text-align: center; }
.xs-row-head .xs-us { color: var(--xs-cyan); }
.xs-them { color: var(--xs-muted); }
.xs-yes { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--xs-cyan), var(--xs-violet)); }
.xs-yes svg { width: 18px; height: 18px; }

/* ---- logos ---- */
.xs-logos { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.xs-logo-group p { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--xs-muted); }
.xs-logo-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.xs-logo-tile { width: clamp(84px, 9vw, 118px); height: clamp(58px, 6vw, 74px); border-radius: 16px; display: grid; place-items: center; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.xs-logo-tile img { max-width: 72%; max-height: 60%; object-fit: contain; }
.xs-logos.migrate { justify-content: center; gap: 34px; }
.xs-migrate-arrow { width: 70px; height: 70px; color: var(--xs-cyan); }
.xs-slide.on .xs-migrate-arrow { animation: xs-in .6s forwards, xs-nudge 1.6s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .32s), 2s; }
@keyframes xs-nudge { 50% { transform: translateX(10px); } }

/* ---- pricing ---- */
.xs-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.xs-plan { padding: 18px; border-radius: 20px; background: var(--xs-card); border: 1px solid var(--xs-line); }
.xs-plan.best { background: linear-gradient(160deg, rgba(168,85,247,.32), rgba(34,211,238,.12)); border-color: rgba(168,85,247,.7); box-shadow: 0 24px 60px rgba(124,58,237,.35); transform: translateY(-6px); }
.xs-plan h3 { margin: 0; font-size: 1.1rem; color: var(--xs-muted); }
.xs-price { margin: 6px 0 0; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; }
.xs-price small { font-size: 1rem; font-weight: 500; color: var(--xs-muted); margin-left: 6px; }
.xs-plan-note { margin: 2px 0 0; color: var(--xs-muted); font-size: .9rem; }
.xs-plan ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xs-plan li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; }
.xs-plan li svg { width: 18px; height: 18px; flex: none; color: var(--xs-cyan); margin-top: 2px; }
.xs-foot { margin: 0; color: var(--xs-muted); font-size: .9rem; max-width: 720px; }

/* ---- products orbit ---- */
.xs-products { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.xs-products > .xs-ring { display: none; }
.xs-product { padding: 18px; border-radius: 18px; background: var(--xs-card); border: 1px solid var(--xs-line); display: flex; flex-direction: column; gap: 10px; }
.xs-product img { height: 28px; width: auto; align-self: flex-start; }
.xs-product p { margin: 0; color: var(--xs-muted); font-size: .95rem; }

/* ---- showcase ---- */
.xs-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.xs-points li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.45; }
.xs-points svg { width: 22px; height: 22px; flex: none; color: var(--xs-cyan); margin-top: 1px; }
.xs-shots { position: relative; height: 100%; min-height: 260px; }
.xs-shot { position: absolute; margin: 0; width: 82%; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 1px solid var(--xs-line); }
.xs-shot:nth-child(1) { top: 6%; left: 0; transform: rotateY(-16deg) rotateX(4deg); }
.xs-shot:nth-child(2) { bottom: 6%; right: 0; transform: rotateY(-8deg) rotateX(4deg) translateZ(40px); }
.xs-shot img { display: block; width: 100%; height: auto; }

/* ---- note ---- */
.xs-note { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }

@media (max-width: 900px) {
    .xs-split { grid-template-columns: 1fr; align-items: start; }
    .xs-split-copy .xs-ring { display: none; }
    .xs-cards, .xs-cards.c3.with-image, .xs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xs-float, .xs-shots { display: none; }
    .xs-plans { grid-template-columns: 1fr 1fr; }
    .xs-field { grid-template-columns: 1fr; gap: 2px; padding: 10px 44px 10px 14px; }
    .xs-row { grid-template-columns: 1.4fr .6fr .9fr; padding: 10px 12px; }
}
@media (max-width: 600px) {
    .xs-cards, .xs-cards.c3.with-image, .xs-products, .xs-plans { grid-template-columns: 1fr; }
    .xs-slide { justify-content: flex-start; overflow-y: auto; }
    .xs-card p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xd-deck *, .xd-deck *::before, .xd-deck *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* dense slides: smaller heading, tighter rows so everything fits on a laptop screen */
.xs-l-compare .xs-title, .xs-l-pricing .xs-title, .xs-l-cards .xs-title { font-size: clamp(1.3rem, 2.3vw, 2.1rem); }
.xs-l-compare .xs-row { padding-block: 9px; }
.xs-l-cards .xs-cards:not(.c4):not(.with-image) .xs-card p { font-size: clamp(.8rem, .95vw, .92rem); }
.xs-l-logos .xs-logo-tile { width: clamp(70px, 7vw, 100px); height: clamp(48px, 5vw, 62px); }
.xs-cards.c6 .xs-card { padding: 14px 16px; }
.xs-cards.c6 .xs-icon { width: 36px; height: 36px; margin-bottom: 8px; }
.xs-cards.c6 .xs-card h3 { margin-bottom: 4px; }

/* content wrapper: the layout's flex column moves inside it, so fit() can scale it as one */
.xs-fit { display: flex; flex-direction: column; justify-content: safe center; gap: clamp(12px, 2vh, 22px); min-height: 100%; }

/* While the live app is on screen the deck is hidden: stop its animations (less CPU/GPU). */
.xd-screen:not([data-view="slides"]) .xd-deck *, .xd-screen:not([data-view="slides"]) .xd-deck *::before, .xd-screen:not([data-view="slides"]) .xd-deck *::after { animation-play-state: paused !important; }

.xs-plan { position: relative; }
.xs-badge { position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(90deg, var(--xs-cyan), var(--xs-violet)); box-shadow: 0 6px 18px rgba(168,85,247,.45); }

/* the outgoing slide leaves quickly and stays underneath, so two slides never read on top of each other */
.xs-slide.off { transition: opacity .3s ease, transform .5s ease; z-index: 0; pointer-events: none; }
.xs-slide.on { z-index: 1; }