:root {
    --cast-bg: #050814;
    --cast-bg-soft: #0b1730;
    --cast-panel: rgba(12, 20, 42, 0.62);
    --cast-panel-strong: rgba(18, 28, 58, 0.88);
    --cast-text: #edf4ff;
    --cast-muted: #9fb6d4;
    --cast-blue: #5d8cff;
    --cast-cyan: #54e7ff;
    --cast-purple: #935bff;
    --cast-border: rgba(148, 189, 255, 0.2);
    --cast-shadow: 0 30px 80px rgba(3, 8, 24, 0.45);
    --cast-radius: 28px;
    --cast-max-width: 1240px;
}

#cast-landing {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at top left, rgba(84, 231, 255, 0.16), transparent 32%),
        radial-gradient(circle at top right, rgba(147, 91, 255, 0.18), transparent 28%),
        linear-gradient(180deg, #040712 0%, #07101f 45%, #03050d 100%);
    color: var(--cast-text);
    isolation: isolate;
}

#cast-landing,
#cast-landing * {
    box-sizing: border-box;
}

#cast-landing::before,
#cast-landing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#cast-landing::before {
    background:
        radial-gradient(circle at 20% 10%, rgba(93, 140, 255, 0.14), transparent 0 28%),
        radial-gradient(circle at 80% 24%, rgba(84, 231, 255, 0.11), transparent 0 24%),
        radial-gradient(circle at 50% 92%, rgba(147, 91, 255, 0.12), transparent 0 26%);
    z-index: -2;
}

#cast-landing::after {
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    z-index: -1;
}

.cast-stars,
.cast-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.cast-stars {
    opacity: 0.65;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.4px),
        radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.7) 0 1.1px, transparent 1.5px),
        radial-gradient(circle at 32% 58%, rgba(84, 231, 255, 0.8) 0 1.1px, transparent 1.7px),
        radial-gradient(circle at 46% 16%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.4px),
        radial-gradient(circle at 57% 67%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.4px),
        radial-gradient(circle at 64% 34%, rgba(147, 91, 255, 0.75) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at 72% 48%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px),
        radial-gradient(circle at 84% 18%, rgba(84, 231, 255, 0.85) 0 1.2px, transparent 1.6px),
        radial-gradient(circle at 90% 74%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px);
    animation: cast-twinkle 10s linear infinite alternate;
}

.cast-orbit {
    border-radius: 999px;
    border: 1px solid rgba(148, 189, 255, 0.07);
    filter: blur(0.2px);
}

.cast-orbit-one {
    inset: auto auto 12% -18%;
    width: min(70vw, 1000px);
    height: min(70vw, 1000px);
}

.cast-orbit-two {
    inset: 8% -12% auto auto;
    width: min(46vw, 720px);
    height: min(46vw, 720px);
}

.cast-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(5rem, 7vw, 8rem) 1.5rem;
}

.cast-hero {
    min-height: auto;
    padding-top: clamp(4.5rem, 6vw, 7rem);
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

.section-inner {
    width: min(100%, var(--cast-max-width));
    margin: 0 auto;
}

.cast-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cast-cyan);
}

#cast-landing h1,
#cast-landing h2,
#cast-landing h3,
#cast-landing p {
    margin-top: 0;
}

#cast-landing h1,
#cast-landing h2,
#cast-landing h3 {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

#cast-landing h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(3.4rem, 7vw, 6.5rem);
    line-height: 0.96;
}

#cast-landing h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.2rem, 4.5vw, 4.3rem);
    line-height: 1;
}

#cast-landing h3 {
    margin-bottom: 0.8rem;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.1;
}

#cast-landing p {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.75;
    color: var(--cast-muted);
}

.cast-intro {
    max-width: 40rem;
}

.cast-hero-grid,
.cast-open-source-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
}

.cast-copy-block {
    position: relative;
    z-index: 1;
}

.cast-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.25rem;
}

.cast-trust-band {
    position: relative;
    z-index: 2;
    padding: 0 1.5rem;
    margin-top: clamp(-1.5rem, -2vw, -0.5rem);
    margin-bottom: clamp(-1.5rem, -2vw, -0.5rem);
}

.cast-trust-band-inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3.45rem;
    padding: clamp(2.9rem, 4.8vw, 3.8rem) 0 clamp(2.65rem, 4.6vw, 3.6rem);
}

.cast-trust-band-inner::before {
    content: "";
    position: absolute;
    inset: auto 12% 0;
    height: clamp(12rem, 22vw, 18rem);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 48%, rgba(84, 231, 255, 0.1), transparent 42%),
        radial-gradient(circle at 50% 48%, rgba(147, 91, 255, 0.08), transparent 56%);
    filter: blur(20px);
    opacity: 0.95;
    pointer-events: none;
}

.cast-trust-band-kicker {
    margin: 0;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(237, 244, 255, 0.76);
}

.cast-trust-band-kicker::before,
.cast-trust-band-kicker::after {
    content: "";
    width: clamp(2.5rem, 6vw, 4.5rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0), rgba(84, 231, 255, 0.55), rgba(147, 91, 255, 0));
    box-shadow: 0 0 1rem rgba(84, 231, 255, 0.18);
}

.cast-trust-strip {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 1180px);
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.02fr) minmax(0, 1.48fr) minmax(0, 1.02fr) minmax(0, 0.96fr);
    gap: clamp(1.05rem, 1.45vw, 1.3rem);
    align-items: stretch;
}

.cast-trust-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 12.5rem;
    padding: 1.7rem 1.45rem 1.65rem;
    border: 1px solid rgba(148, 189, 255, 0.12);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 16% 12%, rgba(84, 231, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 22%, rgba(255, 255, 255, 0)),
        linear-gradient(160deg, rgba(10, 20, 42, 0.92), rgba(8, 16, 34, 0.9) 48%, rgba(5, 10, 22, 0.94));
    box-shadow:
        0 26px 64px rgba(2, 8, 22, 0.34),
        0 12px 24px rgba(3, 9, 24, 0.14),
        0 0 0 1px rgba(148, 189, 255, 0.025),
        0 0 18px rgba(84, 231, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -20px 38px rgba(4, 9, 22, 0.12);
    backdrop-filter: blur(16px);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.cast-trust-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(84, 231, 255, 0.28), rgba(84, 231, 255, 0.06) 38%, rgba(147, 91, 255, 0) 74%) top/100% 1px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 32%),
        radial-gradient(circle at 16% 12%, rgba(84, 231, 255, 0.07), transparent 30%);
    box-shadow:
        inset 0 0 0 1px rgba(84, 231, 255, 0.035),
        0 0 14px rgba(84, 231, 255, 0.035);
    opacity: 0.9;
    pointer-events: none;
}

.cast-trust-item::before {
    content: none;
}

.cast-trust-item-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    min-height: 2.8rem;
    color: var(--cast-text);
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: clamp(1.22rem, 1.75vw, 1.48rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

#cast-landing .cast-trust-item p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    max-width: 14ch;
    font-size: 0.9rem;
    line-height: 1.58;
    color: rgba(228, 237, 249, 0.78);
}

#cast-landing .cast-trust-item:nth-child(2) p,
#cast-landing .cast-trust-item:nth-child(4) p {
    margin-top: 0.45rem;
}

#cast-landing .cast-trust-item:nth-child(1) p,
#cast-landing .cast-trust-item:nth-child(5) p {
    margin-top: 0.9rem;
}

.cast-trust-item:hover,
.cast-trust-item:focus-within {
    transform: translateY(-4px);
    border-color: rgba(175, 223, 255, 0.16);
    box-shadow:
        0 34px 84px rgba(2, 8, 22, 0.38),
        0 14px 28px rgba(3, 9, 24, 0.18),
        0 0 22px rgba(84, 231, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -18px 36px rgba(4, 9, 22, 0.12);
}

.cast-trust-item:nth-child(1),
.cast-trust-item:nth-child(5) {
    min-height: 11.75rem;
    margin-top: 1.25rem;
    background:
        radial-gradient(circle at 18% 12%, rgba(84, 231, 255, 0.05), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008) 24%, rgba(255, 255, 255, 0)),
        linear-gradient(160deg, rgba(7, 16, 35, 0.9), rgba(7, 14, 30, 0.88) 48%, rgba(4, 9, 20, 0.93));
    box-shadow:
        0 20px 50px rgba(2, 8, 22, 0.28),
        0 8px 20px rgba(3, 9, 24, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -22px 40px rgba(4, 9, 22, 0.12);
}

.cast-trust-item:nth-child(2),
.cast-trust-item:nth-child(4) {
    min-height: 12.15rem;
    margin-top: 0.55rem;
}

.cast-trust-item-featured {
    min-height: 15rem;
    padding: 2rem 1.8rem 2rem;
    margin-top: -0.6rem;
    border-color: rgba(118, 217, 255, 0.16);
    background:
        radial-gradient(circle at 16% 10%, rgba(84, 231, 255, 0.18), transparent 30%),
        radial-gradient(circle at 74% 0%, rgba(147, 91, 255, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 22%, rgba(255, 255, 255, 0)),
        linear-gradient(160deg, rgba(14, 30, 62, 0.98), rgba(10, 23, 49, 0.97) 54%, rgba(7, 14, 30, 0.99));
    box-shadow:
        0 48px 114px rgba(3, 10, 26, 0.54),
        0 22px 48px rgba(4, 11, 28, 0.24),
        0 0 22px rgba(84, 231, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -22px 42px rgba(4, 9, 22, 0.08);
    align-items: center;
    text-align: center;
}

.cast-trust-item-featured::before {
    content: none;
}

.cast-trust-item-featured .cast-trust-item-label {
    font-size: clamp(1.42rem, 2.15vw, 1.82rem);
    margin-top: 0;
    min-height: 0;
    margin-bottom: 1.35rem;
}

#cast-landing .cast-trust-item-featured p {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 0.4rem;
    max-width: none;
    width: 100%;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.62;
    justify-items: center;
    align-content: center;
}

.cast-trust-item-featured p span {
    display: block;
}

.cast-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 11.5rem;
    padding: 0.95rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 189, 255, 0.22);
    color: var(--cast-text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.cast-button:hover,
.cast-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(84, 231, 255, 0.42);
    box-shadow: 0 14px 40px rgba(7, 17, 42, 0.35);
}

.cast-button-primary {
    background: linear-gradient(135deg, rgba(93, 140, 255, 0.95), rgba(84, 231, 255, 0.92));
    color: #04111f;
}

.cast-button-secondary {
    background: rgba(11, 20, 40, 0.5);
    backdrop-filter: blur(16px);
}

.cast-hero-visuals {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.18fr) auto minmax(0, 1.18fr);
    align-items: center;
}

.cast-modes-showcase {
    min-height: auto;
    padding-top: clamp(8.5rem, 12vw, 10rem);
}

#modes {
    scroll-margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

.visual-card,
.split-card,
.mode-card,
.cast-side-panel {
    position: relative;
    border: 1px solid var(--cast-border);
    background: linear-gradient(180deg, rgba(14, 23, 46, 0.82), rgba(10, 18, 34, 0.54));
    box-shadow: var(--cast-shadow);
    backdrop-filter: blur(18px);
}

.visual-card {
    overflow: hidden;
    border-radius: var(--cast-radius);
    min-height: clamp(24rem, 50vw, 36rem);
}

.visual-card-wide {
    min-height: clamp(26rem, 42vw, 32rem);
}

.cast-hero .visual-card {
    min-height: clamp(18rem, 34vw, 28rem);
}

.cast-hero .visual-card-wide {
    min-height: clamp(18rem, 34vw, 28rem);
}

.visual-card img,
.mode-card img,
.mode-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(4, 9, 20, 0.76));
}

.visual-card-results::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 9, 20, 0.14), rgba(4, 9, 20, 0.74));
}

.visual-results-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.visual-result-slice {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(148, 189, 255, 0.16);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(7, 14, 28, 0.14), rgba(7, 14, 28, 0.38));
}

.visual-result-slice:first-child {
    border-top: 1px solid rgba(148, 189, 255, 0.16);
}

.visual-result-slice img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.96;
}

.visual-result-slice::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 10, 22, 0.04) 0%, rgba(5, 10, 22, 0.06) 58%, rgba(5, 10, 22, 0.36) 100%);
}

.visual-label,
.visual-result-slice span {
    position: absolute;
    left: 0.85rem;
    bottom: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1.7rem);
    min-height: 1.65rem;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 189, 255, 0.16);
    background: rgba(7, 14, 28, 0.74);
    box-shadow: 0 10px 24px rgba(2, 7, 20, 0.32);
    color: var(--cast-text);
    font-size: clamp(0.58rem, 0.62vw, 0.68rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.visual-label {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.visual-result-slice span {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(7, 14, 28, 0.56);
    box-shadow: 0 8px 18px rgba(2, 7, 20, 0.24);
    backdrop-filter: blur(10px);
}

.cast-data-flow {
    display: grid;
    justify-items: center;
    gap: 1rem;
    min-width: 7rem;
}

.cast-data-flow-line {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0), rgba(84, 231, 255, 0.95), rgba(147, 91, 255, 0));
    box-shadow: 0 0 22px rgba(84, 231, 255, 0.65);
}

.cast-data-flow-line::after {
    content: "";
    position: absolute;
    right: -0.2rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid rgba(84, 231, 255, 0.92);
    border-right: 2px solid rgba(84, 231, 255, 0.92);
    transform: translateY(-50%) rotate(45deg);
}

.cast-data-flow-text {
    max-width: 8rem;
    color: var(--cast-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cast-problem .section-inner,
.cast-gap-inner {
    max-width: 860px;
}

.cast-problem {
    isolation: isolate;
    overflow: hidden;
    min-height: max(100svh, 71vw);
}

.cast-problem::before,
.cast-problem::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cast-problem::before {
    z-index: 0;
    background: url("../images/background2.png") 62% center / auto 108% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.025) 6%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.32) 24%, rgba(0, 0, 0, 0.7) 36%, #000 48%, #000 58%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.32) 82%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0.025) 96%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.025) 6%, rgba(0, 0, 0, 0.1) 14%, rgba(0, 0, 0, 0.32) 24%, rgba(0, 0, 0, 0.7) 36%, #000 48%, #000 58%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.32) 82%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0.025) 96%, transparent 100%);
    opacity: 1;
}

.cast-problem::after {
    z-index: 0;
    background: radial-gradient(ellipse at 30% 36%, rgba(84, 231, 255, 0.08) 0%, rgba(84, 231, 255, 0.045) 34%, rgba(93, 140, 255, 0.025) 58%, transparent 88%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 34%, #000 66%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 34%, #000 66%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
}

.cast-problem .section-inner {
    position: relative;
    z-index: 1;
    transform: translateX(clamp(-4.8rem, -4.5vw, -2.35rem));
}

#cast-landing .cast-problem .cast-eyebrow {
    position: relative;
    z-index: 0;
    display: inline-flex;
    color: rgba(219, 234, 255, 0.95);
    text-shadow: 0 1px 10px rgba(2, 7, 20, 0.9), 0 0 26px rgba(84, 231, 255, 0.3);
}

#cast-landing .cast-problem .cast-eyebrow::before {
    content: "";
    position: absolute;
    inset: -0.7rem -1.1rem -0.65rem -0.85rem;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(ellipse at 22% 50%, rgba(2, 7, 20, 0.78) 0%, rgba(2, 7, 20, 0.42) 38%, rgba(2, 7, 20, 0.12) 68%, transparent 100%);
    filter: blur(9px);
}

#cast-landing .cast-problem h2,
#cast-landing .cast-problem .section-inner > p:not(.cast-eyebrow) {
    text-shadow: 0 1px 18px rgba(2, 7, 20, 0.58);
}

.cast-problem .section-inner::before {
    content: "";
    position: absolute;
    inset: -12rem -16rem -9rem -13rem;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 18% 16%, rgba(84, 231, 255, 0.13) 0%, rgba(84, 231, 255, 0.09) 18%, rgba(93, 140, 255, 0.062) 36%, rgba(93, 140, 255, 0.038) 55%, rgba(84, 231, 255, 0.018) 74%, transparent 100%),
        radial-gradient(ellipse at 34% 34%, rgba(237, 244, 255, 0.055) 0%, rgba(84, 231, 255, 0.035) 32%, rgba(93, 140, 255, 0.018) 64%, transparent 100%);
    filter: blur(42px);
    opacity: 0.86;
    pointer-events: none;
}

#cast-landing .cast-problem .section-inner > p:not(.cast-eyebrow):not(.cast-problem-closing) {
    color: rgba(222, 233, 248, 0.93);
}

.cast-problem-closing {
    margin-top: 2.35rem;
    color: rgba(237, 244, 255, 0.94);
    font-size: clamp(1.08rem, 1.5vw, 1.32rem);
    font-weight: 600;
    line-height: 1.45;
}

#cast-landing .cast-problem-closing {
    margin-top: 2.35rem;
    color: rgba(237, 244, 255, 0.96);
}

.cast-gap {
    overflow: hidden;
    text-align: center;
}

.cast-gap::before {
    content: "";
    position: absolute;
    inset: 12% 8% auto;
    height: 54%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(84, 231, 255, 0.08), rgba(147, 91, 255, 0.045) 34%, transparent 68%);
    filter: blur(18px);
}

.cast-gap-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 1480px);
    max-width: 1480px;
}

.cast-gap h2 {
    max-width: 56rem;
    margin-inline: auto;
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    text-shadow: 0 0 25px rgba(84, 231, 255, 0.18);
}

#cast-landing .cast-gap-inner > p:not(.cast-eyebrow) {
    max-width: 48rem;
    margin-inline: auto;
}

.cast-gap-pipeline {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(1rem, 1.35vw, 1.25rem);
    width: min(100%, 1440px);
    margin: clamp(3.2rem, 5.5vw, 5rem) auto 0;
    opacity: 0.76;
}

.cast-gap-pipeline::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 9%;
    right: 9%;
    top: 38%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(84, 231, 255, 0.38), rgba(147, 91, 255, 0.24), transparent);
    box-shadow: 0 0 22px rgba(84, 231, 255, 0.12);
}

.cast-gap-pipeline::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7.1rem -8.3rem -5.4rem;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(84, 231, 255, 0.26) 0%, rgba(84, 231, 255, 0.156) 33%, rgba(147, 91, 255, 0.104) 64%, transparent 94%),
        radial-gradient(ellipse at 72% 54%, rgba(93, 140, 255, 0.15), rgba(147, 91, 255, 0.06) 42%, transparent 68%);
    filter: blur(34px);
    opacity: 0.98;
}

.cast-gap-stage {
    --cast-gap-visual-height: clamp(14.6rem, 15vw, 16.5rem);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 1.02rem;
    min-height: 18.8rem;
    padding: 1.18rem 1.18rem 1.35rem;
    border: 1px solid rgba(148, 189, 255, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(12, 22, 44, 0.64), rgba(5, 10, 23, 0.5)),
        radial-gradient(circle at 50% 0%, rgba(84, 231, 255, 0.08), transparent 42%);
    box-shadow: 0 24px 70px rgba(2, 8, 24, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.cast-gap-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 72%, rgba(84, 231, 255, 0.05));
}

.cast-gap-stage-results {
    --cast-gap-visual-height: clamp(22rem, 23vw, 24.5rem);
    z-index: 2;
    min-height: 25.4rem;
}

.cast-gap-stage-visual {
    position: relative;
    height: var(--cast-gap-visual-height);
    min-height: var(--cast-gap-visual-height);
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 189, 255, 0.12);
    background: rgba(3, 8, 20, 0.58);
}

.cast-gap-frame-stack {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 34% 30%, rgba(84, 231, 255, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(4, 9, 20, 0.12), rgba(4, 9, 20, 0.54));
}

.cast-gap-frame-stack img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(68%, 12.6rem);
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(237, 244, 255, 0.16);
    box-shadow: 0 18px 38px rgba(2, 7, 20, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0.92;
}

.cast-gap-frame-stack img:nth-child(1) {
    z-index: 1;
    transform: translate(-34%, -36%) rotate(7deg);
    opacity: 0.42;
}

.cast-gap-frame-stack img:nth-child(2) {
    z-index: 2;
    transform: translate(-46%, -46%) rotate(2deg);
    opacity: 0.62;
}

.cast-gap-frame-stack img:nth-child(3) {
    z-index: 3;
    transform: translate(-58%, -56%) rotate(-4deg);
}

.cast-gap-workflow-panel {
    position: relative;
    display: grid;
    height: 100%;
    box-sizing: border-box;
    align-content: center;
    gap: 0.42rem;
    padding: 0.44rem 1.08rem 0.44rem 0.95rem;
}

.cast-gap-workflow-panel::before {
    content: "";
    position: absolute;
    top: 0.86rem;
    right: 0.58rem;
    bottom: 0.82rem;
    width: 3.55rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 168' fill='none'%3E%3Cpath d='M10 20 C70 22 72 138 13 148' stroke='rgb(84,231,255)' stroke-opacity='.72' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M23 137 L13 148 L27 154' stroke='rgb(84,231,255)' stroke-opacity='.82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: 0.86;
    filter: drop-shadow(0 0 10px rgba(84, 231, 255, 0.42));
    pointer-events: none;
}

.cast-gap-workflow-panel::after {
    content: none;
}

.cast-gap-workflow-panel span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 1.4rem;
    color: rgba(237, 244, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cast-gap-workflow-panel span:first-child,
.cast-gap-workflow-panel span:last-child {
    color: rgba(237, 244, 255, 0.92);
    font-weight: 800;
}

.cast-gap-workflow-panel span:nth-child(n + 2):nth-child(-n + 5) {
    color: rgba(181, 201, 229, 0.42);
    font-weight: 600;
}

.cast-gap-workflow-panel span::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(84, 231, 255, 0.78);
    box-shadow: 0 0 14px rgba(84, 231, 255, 0.45);
}

.cast-gap-workflow-panel span:nth-child(n + 2):nth-child(-n + 5)::before {
    background: rgba(148, 189, 255, 0.28);
    box-shadow: none;
}

.cast-gap-workflow-panel span::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(148, 189, 255, 0.28), transparent);
}

.cast-gap-workflow-panel span:nth-child(n + 2):nth-child(-n + 5)::after {
    background: linear-gradient(90deg, rgba(148, 189, 255, 0.1), transparent);
}

.cast-gap-output-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    opacity: 0.88;
    filter: saturate(0.92) contrast(1.06) brightness(0.86);
    transform: scale(1.02);
}

.cast-gap-stage-results .cast-gap-stage-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 8, 20, 0.04), rgba(3, 8, 20, 0.32)),
        radial-gradient(circle at 68% 36%, rgba(84, 231, 255, 0.16), transparent 38%);
}

.cast-gap-stage > span {
    color: rgba(237, 244, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

#cast-landing .cast-gap-stage p {
    max-width: none;
    margin: 0;
    color: rgba(181, 201, 229, 0.8);
    font-size: 0.97rem;
    line-height: 1.45;
}

.cast-gap-pipeline-arrow {
    position: relative;
    z-index: 3;
    width: clamp(2.35rem, 3.4vw, 3.4rem);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0.08), rgba(84, 231, 255, 0.92), rgba(147, 91, 255, 0.7));
    box-shadow: 0 0 20px rgba(84, 231, 255, 0.36), 0 0 34px rgba(147, 91, 255, 0.18);
}

.cast-gap-pipeline-arrow::after {
    content: "";
    position: absolute;
    right: -0.05rem;
    top: 50%;
    width: 0.68rem;
    height: 0.68rem;
    border-top: 2px solid rgba(84, 231, 255, 0.92);
    border-right: 2px solid rgba(84, 231, 255, 0.92);
    transform: translateY(-50%) rotate(45deg);
    filter: drop-shadow(0 0 9px rgba(84, 231, 255, 0.48));
}

.cast-split {
    overflow: hidden;
    text-align: left;
}

.cast-split::before {
    content: "";
    position: absolute;
    inset: 9% -8% 8%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 22% 38%, rgba(84, 231, 255, 0.12), transparent 42%),
        radial-gradient(ellipse at 78% 50%, rgba(147, 91, 255, 0.12), transparent 44%),
        linear-gradient(90deg, transparent 0%, rgba(84, 231, 255, 0.06) 50%, transparent 100%);
    filter: blur(22px);
    opacity: 0.86;
}

.cast-split-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 1320px);
    max-width: 1320px;
}

.cast-section-heading.cast-split-heading {
    max-width: 62rem;
    gap: clamp(0.85rem, 1.2vw, 1.1rem);
    margin-bottom: clamp(1.8rem, 2.8vw, 2.55rem);
}

#cast-landing .cast-split-heading .cast-eyebrow {
    color: rgba(181, 229, 255, 0.9);
}

#cast-landing .cast-split-heading h2 {
    max-width: 60rem;
    margin-bottom: 0;
    font-size: clamp(2.7rem, 4.9vw, 5.1rem);
    line-height: 1;
    text-shadow: 0 0 26px rgba(84, 231, 255, 0.18);
}

.cast-split-grid {
    display: grid;
    gap: clamp(1.4rem, 2.15vw, 1.95rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.split-card {
    --split-card-pad: clamp(2.05rem, 2.55vw, 2.75rem);
    --split-visual-inset: clamp(1.2rem, 1.55vw, 1.6rem);
    --split-visual-height: clamp(17.1rem, 18.9vw, 19.15rem);
    --split-copy-gap: clamp(0.6rem, 0.9vw, 0.8rem);
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-content: start;
    min-height: clamp(31.6rem, 37vw, 39.75rem);
    padding: var(--split-card-pad);
    border-radius: 30px;
}

.split-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 28%, transparent 72%, rgba(84, 231, 255, 0.06));
}

.split-card-soft {
    background:
        linear-gradient(180deg, rgba(12, 23, 45, 0.78), rgba(7, 14, 29, 0.58)),
        radial-gradient(circle at 22% 20%, rgba(84, 231, 255, 0.1), transparent 42%);
}

.split-card-strong {
    background:
        linear-gradient(180deg, rgba(15, 26, 53, 0.94), rgba(7, 13, 28, 0.84)),
        radial-gradient(circle at top right, rgba(147, 91, 255, 0.18), transparent 38%),
        radial-gradient(circle at 74% 22%, rgba(84, 231, 255, 0.09), transparent 36%);
    border-color: rgba(84, 231, 255, 0.3);
}

.split-card-copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    max-width: 35.25rem;
    min-height: 0;
    margin-top: calc(var(--split-visual-height) + var(--split-copy-gap));
}

.split-card .cast-eyebrow {
    margin-bottom: 1.23rem;
}

#cast-landing .split-card h3 {
    max-width: 32.75rem;
    min-height: 0;
    margin-bottom: 1.23rem;
    font-size: clamp(2.25rem, 3.35vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: 0;
}

#cast-landing .split-card .split-card-copy > p:not(.cast-eyebrow) {
    max-width: 31.75rem;
    margin-bottom: 0;
    color: rgba(224, 234, 248, 0.94);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.62;
}

#cast-landing .split-card-strong .split-card-copy > p:not(.cast-eyebrow) {
    max-width: 29.4rem;
}

#cast-landing .split-card .split-card-note {
    max-width: none;
    margin-top: 0;
    color: rgba(232, 241, 255, 0.92);
    font-size: clamp(0.88rem, 0.93vw, 0.95rem);
    font-weight: 600;
    line-height: 1.38;
}

.split-card-example-row,
.split-card-support-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem 0.85rem;
    align-items: center;
    min-height: 5rem;
    margin-left: -0.35rem;
    width: calc(100% + 0.35rem);
    padding: 0.78rem 0.9rem 0.78rem 0.55rem;
    border: 1px solid rgba(148, 189, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 18, 37, 0.34), rgba(4, 10, 23, 0.2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.split-card-example-row {
    margin-top: 3.15rem;
}

.split-card-support-row {
    margin-top: 1.35rem;
}

.split-card-support-row-expert {
    margin-top: 1.5rem;
}

.split-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-self: end;
    margin-top: 0;
}

.split-card-button {
    min-width: 0;
    min-height: 2.6rem;
    padding: 0.62rem 0.9rem;
    border-radius: 999px;
    border-color: rgba(84, 231, 255, 0.26);
    background: rgba(11, 20, 40, 0.62);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.split-card-button-highlight {
    border-color: rgba(84, 231, 255, 0.36);
    background: linear-gradient(135deg, rgba(93, 140, 255, 0.98), rgba(84, 231, 255, 0.96));
    color: #04111f;
    box-shadow: 0 14px 30px rgba(84, 231, 255, 0.17), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.split-card-visual {
    position: absolute;
    inset: var(--split-visual-inset) var(--split-visual-inset) auto;
    height: var(--split-visual-height);
    z-index: 0;
    pointer-events: none;
}

.split-card-visual-beginner {
    display: grid;
    align-content: start;
    gap: 0.95rem;
    max-width: 36rem;
    opacity: 0.74;
}

.split-guide-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.5rem;
    border: 1px solid rgba(148, 189, 255, 0.17);
    border-radius: 22px;
    background: rgba(4, 10, 23, 0.5);
}

.split-guide-path::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0.6), rgba(84, 231, 255, 0.22), transparent);
}

.split-guide-path span {
    position: relative;
    display: grid;
    min-height: 3.15rem;
    place-items: center;
    border: 1px solid rgba(148, 189, 255, 0.16);
    border-radius: 16px;
    background: rgba(8, 18, 37, 0.72);
    color: rgba(237, 244, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.split-guide-path span:first-child,
.split-guide-path span:last-child {
    border-color: rgba(84, 231, 255, 0.35);
    color: rgba(237, 244, 255, 0.92);
    box-shadow: 0 0 22px rgba(84, 231, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.split-guide-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(8.6rem, 0.76fr);
    gap: 0.9rem;
    width: min(100%, 33rem);
    padding: 0.9rem;
    border: 1px solid rgba(148, 189, 255, 0.18);
    border-radius: 20px;
    background: rgba(4, 10, 23, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 42px rgba(2, 8, 24, 0.18);
}

.split-guide-status,
.split-guide-preview {
    min-height: 10.6rem;
    border: 1px solid rgba(148, 189, 255, 0.13);
    border-radius: 17px;
    background: rgba(8, 18, 37, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.split-guide-status {
    display: grid;
    gap: 0.52rem;
    align-content: start;
    padding: 0.9rem 0.95rem;
}

.split-guide-kicker,
.split-preview-label {
    color: rgba(181, 201, 229, 0.62);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.split-guide-status strong {
    color: rgba(237, 244, 255, 0.92);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.1;
}

.split-guide-complete {
    display: grid;
    gap: 0.38rem;
    margin-top: 0.08rem;
}

.split-guide-complete span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.52rem;
    color: rgba(205, 220, 240, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
}

.split-guide-complete span::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background:
        linear-gradient(135deg, transparent 48%, rgba(3, 8, 20, 0.82) 48% 58%, transparent 58%),
        rgba(84, 231, 255, 0.78);
    box-shadow: 0 0 13px rgba(84, 231, 255, 0.32);
}

.split-guide-action {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    min-height: 1.7rem;
    margin-top: 0.18rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(84, 231, 255, 0.3);
    border-radius: 999px;
    background: rgba(84, 231, 255, 0.11);
    color: rgba(237, 244, 255, 0.88);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.split-guide-preview {
    display: grid;
    gap: 0.58rem;
    padding: 0.82rem;
}

.split-preview-graph {
    position: relative;
    min-height: 4.35rem;
    overflow: hidden;
    border: 1px solid rgba(148, 189, 255, 0.1);
    border-radius: 13px;
    background:
        linear-gradient(rgba(148, 189, 255, 0.08) 1px, transparent 1px) 0 0 / 100% 33.333%,
        linear-gradient(90deg, rgba(148, 189, 255, 0.07) 1px, transparent 1px) 0 0 / 25% 100%,
        rgba(3, 8, 20, 0.44);
}

.split-preview-graph::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 1px;
    background: rgba(181, 201, 229, 0.2);
}

.split-preview-graph::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 13%;
    top: 53%;
    height: 1px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0.76), rgba(84, 231, 255, 0.32));
    transform: rotate(-7deg);
    transform-origin: left center;
    box-shadow: 0 0 12px rgba(84, 231, 255, 0.2);
}

.split-preview-point {
    position: absolute;
    z-index: 1;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(84, 231, 255, 0.84);
    box-shadow: 0 0 10px rgba(84, 231, 255, 0.36);
}

.split-preview-point-1 {
    left: 18%;
    top: 56%;
}

.split-preview-point-2 {
    left: 38%;
    top: 43%;
}

.split-preview-point-3 {
    left: 61%;
    top: 48%;
}

.split-preview-point-4 {
    left: 80%;
    top: 34%;
}

.split-preview-meta {
    display: grid;
    gap: 0.18rem;
}

.split-preview-meta span {
    color: rgba(205, 220, 240, 0.62);
    font-size: 0.62rem;
    font-weight: 700;
}

.split-preview-meta strong {
    color: rgba(237, 244, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 800;
}

.split-card-visual-expert {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    opacity: 0.76;
}

.split-card-strong .split-card-visual {
    inset-inline: clamp(1.05rem, 1.4vw, 1.55rem);
}

.split-control-stack,
.split-data-panel {
    height: 17.65rem;
    border: 1px solid rgba(148, 189, 255, 0.14);
    border-radius: 20px;
    background: rgba(3, 8, 20, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.split-control-stack {
    align-self: start;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}

.split-control-title {
    color: rgba(237, 244, 255, 0.72);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.split-field-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-field {
    display: grid;
    gap: 0.28rem;
    min-height: 2.72rem;
    padding: 0.55rem 0.62rem;
    border: 1px solid rgba(148, 189, 255, 0.13);
    border-radius: 12px;
    background: rgba(148, 189, 255, 0.055);
}

.split-field span {
    color: rgba(181, 201, 229, 0.58);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.split-field strong {
    color: rgba(237, 244, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
}

.split-data-panel {
    align-self: start;
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem;
}

.split-data-row {
    display: grid;
    grid-template-columns: 7.1rem 2.45rem 3rem 2rem;
    gap: 0.26rem;
    padding: 0.38rem 0.42rem;
    border: 1px solid rgba(148, 189, 255, 0.1);
    border-radius: 9px;
    background: rgba(148, 189, 255, 0.045);
    color: rgba(190, 207, 231, 0.68);
    font-size: 0.48rem;
    font-weight: 700;
}

.split-data-row:first-of-type {
    color: rgba(237, 244, 255, 0.72);
    background: rgba(84, 231, 255, 0.075);
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.split-quality-plot {
    position: relative;
    height: 5rem;
    margin-top: 0.1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 189, 255, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(rgba(148, 189, 255, 0.09) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, rgba(148, 189, 255, 0.08) 1px, transparent 1px) 0 0 / 20% 100%,
        rgba(4, 10, 23, 0.38);
}

.split-quality-plot::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 8%;
    bottom: 18%;
    height: 1px;
    background: rgba(181, 201, 229, 0.24);
}

.split-quality-plot::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 10%;
    top: 52%;
    height: 1px;
    background: linear-gradient(90deg, rgba(84, 231, 255, 0.7), rgba(147, 91, 255, 0.45));
    transform: rotate(-9deg);
    transform-origin: left center;
    box-shadow: 0 0 12px rgba(84, 231, 255, 0.2);
}

.split-plot-label {
    position: absolute;
    left: 0.55rem;
    top: 0.42rem;
    color: rgba(181, 201, 229, 0.58);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.split-plot-point {
    position: absolute;
    z-index: 1;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: rgba(84, 231, 255, 0.86);
    box-shadow: 0 0 10px rgba(84, 231, 255, 0.42);
}

.split-plot-point-1 {
    left: 17%;
    top: 57%;
}

.split-plot-point-2 {
    left: 28%;
    top: 48%;
}

.split-plot-point-3 {
    left: 39%;
    top: 54%;
}

.split-plot-point-4 {
    left: 52%;
    top: 40%;
}

.split-plot-point-5 {
    left: 64%;
    top: 36%;
}

.split-plot-point-6 {
    left: 74%;
    top: 42%;
}

.split-plot-point-7 {
    left: 84%;
    top: 31%;
}

.cast-section-heading {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 2.4rem;
    max-width: 52rem;
}

.cast-section-heading-showcase {
    max-width: 46rem;
    margin-bottom: clamp(2.4rem, 3.2vw, 2.9rem);
}

.cast-mode-grid {
    position: relative;
    display: grid;
    align-items: stretch;
    gap: clamp(1.3rem, 1.6vw, 1.7rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cast-mode-grid::before {
    content: "";
    position: absolute;
    inset: -14% -10% -12%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 24%, rgba(84, 231, 255, 0.1), transparent 24%),
        radial-gradient(circle at 48% 58%, rgba(93, 140, 255, 0.085), transparent 20%),
        radial-gradient(circle at 84% 30%, rgba(147, 91, 255, 0.1), transparent 25%);
    filter: blur(56px);
    opacity: 0.92;
}

.cast-mode-grid::after {
    content: "";
    position: absolute;
    inset: -8% -4% -6%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(84, 231, 255, 0.055), transparent 42%),
        linear-gradient(180deg, rgba(84, 231, 255, 0.02), transparent 34%, rgba(147, 91, 255, 0.03) 100%);
    filter: blur(34px);
    opacity: 0.8;
}

.mode-card {
    overflow: hidden;
    border-radius: 32px;
    min-height: 460px;
    isolation: isolate;
    border-color: rgba(148, 189, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(14, 24, 48, 0.74), rgba(7, 13, 28, 0.56)),
        radial-gradient(circle at top, rgba(84, 231, 255, 0.05), transparent 48%);
    box-shadow:
        0 28px 72px rgba(2, 8, 24, 0.42),
        0 0 0 1px rgba(148, 189, 255, 0.04),
        0 0 73px rgba(84, 231, 255, 0.14),
        0 0 134px rgba(93, 140, 255, 0.1);
    backdrop-filter: blur(16px);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid rgba(148, 189, 255, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(84, 231, 255, 0.13),
        0 0 62px rgba(84, 231, 255, 0.28),
        0 0 118px rgba(93, 140, 255, 0.15);
}

.mode-card-media {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 14%, rgba(84, 231, 255, 0.08), rgba(4, 9, 20, 0.04) 42%, rgba(4, 9, 20, 0.14) 100%);
}

.mode-card-media::after,
.mode-card-media-split::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
    linear-gradient(180deg, rgba(5, 10, 22, 0.04), rgba(5, 10, 22, 0.05) 36%, rgba(5, 10, 22, 0.12) 100%),
    radial-gradient(circle at 50% 24%, rgba(84, 231, 255, 0.018), transparent 34%),
    radial-gradient(circle at 50% 52%, transparent 54%, rgba(5, 10, 22, 0.025) 100%);
}

.mode-card-media-split {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
    background: rgba(4, 9, 20, 0.82);
}

.mode-card-media-split img {
    height: 100%;
}

.mode-card:nth-child(1),
.mode-card:nth-child(2) {
    background: rgba(7, 14, 28, 0.58);
    backdrop-filter: blur(10px);
    grid-column: span 6;
    min-height: 520px;
}

.mode-card:nth-child(3),
.mode-card:nth-child(4),
.mode-card:nth-child(5) {
    grid-column: span 4;
    min-height: 432px;
}

.mode-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 43%;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 8, 24, 0) 0%, rgba(3, 8, 24, 0.08) 20%, rgba(7, 13, 28, 0.5) 66%, rgba(7, 13, 28, 0.84) 100%),
        radial-gradient(circle at 50% 100%, rgba(84, 231, 255, 0.05), transparent 48%);
}

.mode-card-asteroid::after {
    height: 47%;
    background:
        linear-gradient(180deg, rgba(3, 8, 24, 0) 0%, rgba(3, 8, 24, 0.12) 18%, rgba(7, 13, 28, 0.58) 64%, rgba(7, 13, 28, 0.88) 100%),
        radial-gradient(circle at 50% 100%, rgba(84, 231, 255, 0.04), transparent 44%);
}

.mode-card-sky::after {
    height: 45%;
    background:
        linear-gradient(180deg, rgba(3, 8, 24, 0) 0%, rgba(3, 8, 24, 0.1) 20%, rgba(7, 13, 28, 0.54) 66%, rgba(7, 13, 28, 0.86) 100%),
        radial-gradient(circle at 50% 100%, rgba(84, 231, 255, 0.04), transparent 46%);
}

.mode-card-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    align-content: end;
    gap: 0.68rem;
    min-height: 50%;
    padding: 2rem 1.75rem 1.85rem;
    background: linear-gradient(180deg, rgba(6, 11, 24, 0) 0%, rgba(6, 11, 24, 0.06) 18%, rgba(7, 13, 28, 0.34) 48%, rgba(7, 13, 28, 0.62) 100%);
}

.mode-card:nth-child(n + 3) .mode-card-body {
    min-height: 54%;
    padding: 1.55rem 1.3rem 1.25rem;
}

.mode-card-body h3 {
    margin-bottom: 0;
    color: rgba(237, 244, 255, 0.96);
    font-size: clamp(1.65rem, 2.15vw, 2.1rem);
    line-height: 1.08;
    text-shadow: 0 6px 18px rgba(2, 8, 24, 0.38);
}

#cast-landing .mode-card-body p {
    max-width: none;
    color: rgba(228, 237, 249, 0.88);
    font-size: clamp(0.9rem, 0.98vw, 0.98rem);
    line-height: 1.5;
}

.mode-card:nth-child(n + 3) h3 {
    font-size: clamp(1.38rem, 1.65vw, 1.72rem);
}

#cast-landing .mode-card:nth-child(n + 3) p {
    color: rgba(228, 237, 249, 0.84);
    font-size: clamp(0.84rem, 0.9vw, 0.92rem);
    line-height: 1.46;
}

.mode-card p,
.cast-side-panel p {
    margin-bottom: 0;
}

.mode-card-media img {
    filter: saturate(0.9) brightness(0.91) contrast(1.03) sepia(0.015);
    transform: scale(1.01);
    transition: transform 260ms ease, filter 260ms ease;
}

.mode-card-asteroid .mode-card-media-split img:nth-child(2),
.mode-card:nth-child(4) .mode-card-media img {
    filter: saturate(0.78) brightness(0.82) contrast(1.04) sepia(0.02);
}

.mode-card:hover,
.mode-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(84, 231, 255, 0.3);
    box-shadow:
        0 32px 88px rgba(2, 8, 24, 0.5),
    0 0 84px rgba(84, 231, 255, 0.22),
    0 0 151px rgba(93, 140, 255, 0.11);
}

.mode-card:hover .mode-card-media img,
.mode-card:focus-within .mode-card-media img {
    filter: saturate(0.98) brightness(0.98) contrast(1.05) sepia(0.01);
    transform: scale(1.028);
}

.cast-open-source-grid {
    align-items: stretch;
}

.cast-open-source {
    overflow: hidden;
}

.cast-open-source::before {
    content: none;
}

.cast-open-source .cast-copy-block::before {
    content: "";
    position: absolute;
    inset: -12% -16% auto auto;
    width: min(66vw, 51rem);
    height: min(66vw, 51rem);
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(circle at 68% 28%, rgba(84, 231, 255, 0.24) 0%, rgba(84, 231, 255, 0.15) 24%, rgba(93, 140, 255, 0.09) 45%, rgba(147, 91, 255, 0.052) 62%, transparent 82%);
    filter: blur(26px);
    opacity: 0.96;
    z-index: -1;
}

.cast-side-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1.5rem, 2vw, 2rem);
    border-radius: 32px;
    align-content: center;
}

.cast-side-stat {
    padding: 1.15rem 1.25rem;
    border-radius: 22px;
    background: rgba(8, 14, 30, 0.55);
    border: 1px solid rgba(148, 189, 255, 0.14);
}

.cast-side-stat-proof {
    display: grid;
    gap: 0.75rem;
}

.cast-side-kicker {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--cast-cyan);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cast-side-stat strong {
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    line-height: 1.35;
}

.cast-side-stat p {
    color: rgba(205, 220, 240, 0.78);
    font-size: clamp(0.98rem, 1.08vw, 1.08rem);
    font-weight: 500;
    line-height: 1.5;
}

.cast-validation-mini {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem;
    border: 1px solid rgba(148, 189, 255, 0.12);
    border-radius: 16px;
    background: rgba(3, 8, 20, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cast-validation-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) 0.62fr 0.48fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.38rem 0.45rem;
    border-radius: 10px;
    background: rgba(148, 189, 255, 0.045);
    color: rgba(205, 220, 240, 0.74);
    font-size: 0.62rem;
    font-weight: 700;
}

.cast-validation-row span:last-child {
    justify-self: end;
}

.cast-validation-row-head {
    background: rgba(84, 231, 255, 0.08);
    color: rgba(237, 244, 255, 0.76);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes cast-twinkle {
    0% {
        opacity: 0.45;
        transform: translateY(0);
    }
    100% {
        opacity: 0.75;
        transform: translateY(-12px);
    }
}

@media (max-width: 1100px) {
    .cast-hero-grid,
    .cast-open-source-grid,
    .cast-split-grid {
        grid-template-columns: 1fr;
    }

    .cast-split-inner {
        max-width: 760px;
    }

    .cast-section-heading.cast-split-heading {
        max-width: 44rem;
        margin-bottom: 2.15rem;
    }

    .split-card {
        min-height: clamp(29.5rem, 62vw, 35.5rem);
    }

    .split-card-visual-expert {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }

    .cast-hero-visuals {
        grid-template-columns: 1fr;
    }

    .cast-trust-band {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cast-trust-band-kicker::before,
    .cast-trust-band-kicker::after {
        width: clamp(1.8rem, 8vw, 3rem);
    }

    .cast-trust-band-inner {
        gap: 3.2rem;
    }

    .cast-trust-strip {
        width: min(100%, 860px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .cast-trust-item-featured {
        grid-column: 1 / -1;
        min-height: 0;
        margin-top: 0;
    }

    .cast-trust-item:nth-child(1),
    .cast-trust-item:nth-child(2),
    .cast-trust-item:nth-child(4),
    .cast-trust-item:nth-child(5) {
        min-height: 0;
        margin-top: 0;
    }

    .visual-result-slice {
        min-height: 0;
        border-top: 1px solid rgba(148, 189, 255, 0.16);
        align-items: center;
    }

    .visual-result-slice:first-child {
        border-top: 0;
    }

    .cast-data-flow {
        min-width: auto;
    }

    .cast-data-flow-line {
        width: 2px;
        height: 4rem;
        background: linear-gradient(180deg, rgba(84, 231, 255, 0), rgba(84, 231, 255, 0.95), rgba(147, 91, 255, 0));
    }

    .cast-data-flow-line::after {
        right: 50%;
        top: auto;
        bottom: -0.1rem;
        transform: translateX(50%) rotate(135deg);
    }

    .cast-data-flow-text {
        max-width: none;
    }

    .split-card-strong {
        transform: none;
    }

    .cast-mode-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mode-card:nth-child(1),
    .mode-card:nth-child(2) {
        grid-column: span 3;
        min-height: 460px;
    }

    .mode-card:nth-child(3),
    .mode-card:nth-child(4),
    .mode-card:nth-child(5) {
        grid-column: span 2;
        min-height: 360px;
    }

    .cast-gap-pipeline {
        grid-template-columns: 1fr;
        max-width: 34rem;
        opacity: 0.82;
    }

    .cast-gap-stage {
        --cast-gap-visual-height: clamp(13.1rem, 13.4vw, 14.25rem);
        min-height: 17rem;
        padding: 1.08rem 1.08rem 1.25rem;
    }

    .cast-gap-pipeline::before {
        top: 6%;
        bottom: 6%;
        left: 50%;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(84, 231, 255, 0.34), rgba(147, 91, 255, 0.22), transparent);
    }

    .cast-gap-pipeline-arrow {
        justify-self: center;
        width: 2px;
        height: 2.35rem;
        background: linear-gradient(180deg, rgba(84, 231, 255, 0.08), rgba(84, 231, 255, 0.92), rgba(147, 91, 255, 0.7));
    }

    .cast-gap-pipeline-arrow::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%) rotate(135deg);
    }

    .cast-gap-stage-results {
        --cast-gap-visual-height: clamp(13.1rem, 13.4vw, 14.25rem);
        min-height: 17rem;
        transform: none;
    }
}

@media (max-width: 767px) {
    .cast-section {
        min-height: auto;
        padding: 4.75rem 1rem;
    }

    .cast-trust-band {
        padding: 0 1rem;
    }

    .cast-trust-strip {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .cast-trust-item {
        min-height: 0;
        padding: 1.35rem 1.1rem 1.35rem;
    }

    .cast-trust-band-inner {
        gap: 2.7rem;
    }

    .cast-trust-item-label {
        min-height: 0;
        margin-top: 0;
    }

    .cast-trust-item p,
    .cast-trust-item-featured p {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: none;
    }

    #cast-landing h1 {
        font-size: clamp(2.7rem, 15vw, 4rem);
    }

    #cast-landing h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .cast-problem .section-inner {
        transform: none;
    }

    .cast-problem .section-inner::before {
        inset: -3rem -1.2rem -2.5rem;
    }

    .cast-button-row {
        flex-direction: column;
    }

    .cast-button {
        width: 100%;
    }

    .cast-gap-pipeline {
        margin-top: 3rem;
        opacity: 0.86;
    }

    .cast-gap-stage {
        min-height: 0;
        padding: 0.85rem 0.85rem 1rem;
        border-radius: 20px;
    }

    .cast-gap-stage-visual {
        height: 8.5rem;
        min-height: 8.5rem;
        border-radius: 15px;
    }

    .visual-card,
    .visual-card-wide,
    .split-card,
    .mode-card {
        min-height: auto;
    }

    .cast-section-heading.cast-split-heading {
        margin-bottom: 1.6rem;
    }

    .split-card {
        --split-card-pad: 1.45rem;
        --split-visual-inset: 1rem;
        --split-visual-height: 13rem;
        --split-copy-gap: 0.95rem;
        min-height: 29.75rem;
        padding: var(--split-card-pad);
        border-radius: 24px;
    }

    .split-card-visual {
        opacity: 0.48;
    }

    .split-guide-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-guide-panel {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .split-card-example-row,
    .split-card-support-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 1.35rem;
        padding: 0.85rem 0.9rem;
    }

    .split-guide-preview {
        display: none;
    }

    .split-card-visual-expert {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .split-data-panel {
        display: none;
    }

    .split-card-copy {
        min-height: 0;
        margin-top: calc(var(--split-visual-height) + var(--split-copy-gap));
    }

    #cast-landing .split-card h3 {
        min-height: 0;
        font-size: clamp(2rem, 11vw, 2.8rem);
    }

    .visual-card img {
        aspect-ratio: 5 / 6;
    }

    .mode-card img {
        aspect-ratio: 4 / 3;
    }

    .mode-card-media {
        position: relative;
    }

    .mode-card-media-split {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mode-card-media-split img:first-child {
        display: none;
    }

    .cast-mode-grid {
        grid-template-columns: 1fr;
    }

    .mode-card,
    .mode-card:nth-child(1),
    .mode-card:nth-child(2),
    .mode-card:nth-child(3),
    .mode-card:nth-child(4),
    .mode-card:nth-child(5) {
        grid-column: span 1;
    }

    .mode-card-body {
        position: relative;
        background: linear-gradient(180deg, rgba(7, 13, 28, 0), rgba(7, 13, 28, 0.94));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cast-stars,
    .reveal,
    .mode-card,
    .cast-button {
        animation: none !important;
        transition: none !important;
    }

    .reveal,
    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}
/* CAst standalone WordPress isolation fixes */
html,
body,
body.cast-standalone-page,
body.cast-standalone-page #cast-landing,
body.cast-standalone-page #cast-landing * {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.cast-standalone-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #071323 !important;
}

body.cast-standalone-page a,
body.cast-standalone-page a:hover,
body.cast-standalone-page button,
body.cast-standalone-page button:hover,
body.cast-standalone-page .cast-button,
body.cast-standalone-page .cast-button:hover,
body.cast-standalone-page .cast-btn,
body.cast-standalone-page .cast-btn:hover {
    text-decoration: none !important;
}

body.cast-standalone-page a:hover,
body.cast-standalone-page button:hover {
    color: inherit !important;
}

#wpadminbar,
#wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
