/*
 * QuolexIQ™ public homepage
 *
 * This stylesheet owns the homepage hero, intelligence map, animated core,
 * navigation nodes, feature sections, specialist cards, process flow, and
 * early access presentation.
 *
 * Global header, footer, buttons, typography, and shared containers remain
 * in the site shell and base stylesheets.
 */

/* =========================================================
   Hero
   ========================================================= */

.qxi-home-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding-top: var(--qxi-header-height);
    background: radial-gradient( circle at 50% 48%, rgba(36, 80, 191, 0.16), transparent 34% ), radial-gradient( circle at 18% 30%, rgba(57, 215, 255, 0.08), transparent 28% ), radial-gradient( circle at 82% 32%, rgba(155, 109, 255, 0.09), transparent 30% );
    isolation: isolate;
}

    .qxi-home-hero::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent 0%, rgba(79, 124, 255, 0.04) 50%, transparent 100% );
        content: "";
    }

.qxi-home-ambient-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.72;
}

.qxi-home-hero-glow {
    position: absolute;
    z-index: 0;
    width: 460px;
    height: 460px;
    border-radius: var(--qxi-radius-circle);
    pointer-events: none;
    filter: blur(110px);
    opacity: 0.28;
}

.qxi-home-hero-glow-left {
    top: 18%;
    left: -220px;
    background: rgba(57, 215, 255, 0.28);
}

.qxi-home-hero-glow-right {
    top: 10%;
    right: -210px;
    background: rgba(155, 109, 255, 0.28);
}

.qxi-home-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(720px, 1.35fr);
    align-items: center;
    min-height: calc(100vh - var(--qxi-header-height));
    gap: var(--qxi-space-10);
    padding-block: var(--qxi-space-10) var(--qxi-space-16);
}

.qxi-home-hero-introduction {
    position: relative;
    z-index: 20;
    max-width: 640px;
}

    .qxi-home-hero-introduction h1 {
        margin-top: var(--qxi-space-6);
    }

.qxi-home-hero-summary {
    max-width: 610px;
    margin-top: var(--qxi-space-6);
}

.qxi-home-hero-benefit {
    max-width: 610px;
    margin-top: var(--qxi-space-4);
    color: var(--qxi-color-text);
    font-size: var(--qxi-font-size-sm);
    font-weight: 600;
    line-height: 1.7;
}

.qxi-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qxi-space-4);
    margin-top: var(--qxi-space-8);
}

.qxi-home-development-status {
    display: flex;
    align-items: center;
    gap: var(--qxi-space-3);
    margin-top: var(--qxi-space-6);
    color: var(--qxi-color-text-muted);
    font-size: var(--qxi-font-size-sm);
}

.qxi-home-status-indicator {
    position: relative;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: var(--qxi-radius-circle);
    background: var(--qxi-color-green);
    box-shadow: 0 0 10px rgba(72, 216, 138, 0.9), 0 0 20px rgba(72, 216, 138, 0.38);
}

    .qxi-home-status-indicator::after {
        position: absolute;
        inset: -5px;
        border: 1px solid rgba(72, 216, 138, 0.35);
        border-radius: var(--qxi-radius-circle);
        content: "";
        animation: qxi-home-status-pulse 2.8s ease-out infinite;
    }

/* =========================================================
   Intelligence map
   ========================================================= */

.qxi-home-intelligence-map {
    position: relative;
    width: min(100%, 920px);
    min-height: 700px;
    margin-inline: auto;
    perspective: 1200px;
}

    .qxi-home-intelligence-map::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 620px;
        height: 620px;
        border: 1px solid rgba(111, 149, 255, 0.08);
        border-radius: var(--qxi-radius-circle);
        background: radial-gradient( circle, rgba(79, 124, 255, 0.08), transparent 64% );
        content: "";
        pointer-events: none;
        transform: translate(-50%, -50%);
    }

    .qxi-home-intelligence-map::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 500px;
        border: 1px dashed rgba(57, 215, 255, 0.08);
        border-radius: var(--qxi-radius-circle);
        content: "";
        pointer-events: none;
        transform: translate(-50%, -50%);
        animation: qxi-home-map-ring-spin 70s linear infinite;
    }

.qxi-home-connections {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.qxi-home-connection-path {
    fill: none;
    stroke: url("#qxi-connection-gradient");
    stroke-linecap: round;
    stroke-width: 1.35;
    opacity: 0.28;
    transition: opacity var(--qxi-duration-normal) var(--qxi-ease-standard), stroke-width var(--qxi-duration-normal) var(--qxi-ease-standard), filter var(--qxi-duration-normal) var(--qxi-ease-standard);
}

    .qxi-home-connection-path.is-active {
        stroke-width: 2.2;
        opacity: 0.94;
        filter: url("#qxi-connection-glow");
    }

/*
 * Q is the central intelligence layer for QuolexIQ™.
 *
 * The dedicated Q mark is displayed inside the intelligence sphere rather
 * than rendering Q as plain text. The image remains proportional and does
 * not interfere with the decorative sphere layers surrounding it.
 */
.qxi-home-core-q-logo {
    display: block;
    width: clamp(72px, 8vw, 118px);
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* =========================================================
   Navigation nodes
   ========================================================= */

.qxi-home-node {
    position: absolute;
    z-index: 8;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 255px;
    min-height: 92px;
    gap: var(--qxi-space-3);
    padding: var(--qxi-space-4);
    border: 1px solid var(--qxi-color-border);
    border-radius: var(--qxi-radius-lg);
    background: linear-gradient( 145deg, rgba(20, 36, 72, 0.8), rgba(7, 14, 32, 0.86) );
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateZ(0);
    transition: transform var(--qxi-duration-normal) var(--qxi-ease-emphasized), border-color var(--qxi-duration-normal) var(--qxi-ease-standard), box-shadow var(--qxi-duration-normal) var(--qxi-ease-standard), background-color var(--qxi-duration-normal) var(--qxi-ease-standard), opacity var(--qxi-duration-normal) var(--qxi-ease-standard);
}

    .qxi-home-node::before {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.045) 42%, transparent 72% );
        content: "";
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--qxi-duration-normal) var(--qxi-ease-standard);
    }

    .qxi-home-node:hover,
    .qxi-home-node:focus-visible,
    .qxi-home-node.is-active {
        border-color: rgba(118, 231, 255, 0.5);
        background: linear-gradient( 145deg, rgba(28, 52, 101, 0.92), rgba(8, 16, 39, 0.94) );
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.36), 0 0 34px rgba(57, 215, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transform: translateY(-5px) scale(1.025);
    }

        .qxi-home-node:hover::before,
        .qxi-home-node:focus-visible::before,
        .qxi-home-node.is-active::before {
            opacity: 1;
        }

.qxi-home-node-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(118, 231, 255, 0.2);
    border-radius: var(--qxi-radius-md);
    background: linear-gradient( 145deg, rgba(79, 124, 255, 0.22), rgba(57, 215, 255, 0.08) );
    color: var(--qxi-color-cyan-bright);
    font-size: 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.qxi-home-node-content {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.qxi-home-node-label {
    color: var(--qxi-color-text);
    font-family: var(--qxi-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.qxi-home-node-description {
    color: var(--qxi-color-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.qxi-home-node-arrow {
    color: var(--qxi-color-text-faint);
    font-size: 0.9rem;
    transition: color var(--qxi-duration-fast) var(--qxi-ease-standard), transform var(--qxi-duration-fast) var(--qxi-ease-standard);
}

.qxi-home-node:hover .qxi-home-node-arrow,
.qxi-home-node:focus-visible .qxi-home-node-arrow,
.qxi-home-node.is-active .qxi-home-node-arrow {
    color: var(--qxi-color-cyan-bright);
    transform: translateX(3px);
}

.qxi-home-node-platform {
    top: 8%;
    left: 7%;
}

.qxi-home-node-specialists {
    top: 7%;
    right: 4%;
}

.qxi-home-node-use-cases {
    top: 41%;
    left: 0;
}

.qxi-home-node-how {
    top: 41%;
    right: 0;
}

.qxi-home-node-insights {
    bottom: 5%;
    left: 10%;
}

.qxi-home-node-access {
    right: 7%;
    bottom: 5%;
}

/* =========================================================
   Intelligence core
   ========================================================= */

.qxi-home-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 330px;
    height: 330px;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

    .qxi-home-core::before {
        position: absolute;
        inset: -84px;
        border-radius: var(--qxi-radius-circle);
        background: radial-gradient( circle, rgba(57, 215, 255, 0.16), rgba(79, 124, 255, 0.06) 44%, transparent 70% );
        content: "";
        filter: blur(20px);
        pointer-events: none;
        animation: qxi-home-core-aura 8s ease-in-out infinite;
    }

.qxi-home-core-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(118, 231, 255, 0.2);
    border-radius: var(--qxi-radius-circle);
    pointer-events: none;
    transform-style: preserve-3d;
}

.qxi-home-core-orbit-outer {
    width: 410px;
    height: 410px;
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg);
    animation: qxi-home-orbit-outer 24s linear infinite;
}

.qxi-home-core-orbit-middle {
    width: 372px;
    height: 372px;
    border-color: rgba(185, 154, 255, 0.2);
    transform: translate(-50%, -50%) rotateX(72deg) rotateZ(66deg);
    animation: qxi-home-orbit-middle 19s linear infinite reverse;
}

.qxi-home-core-orbit-inner {
    width: 344px;
    height: 344px;
    border-color: rgba(79, 124, 255, 0.23);
    transform: translate(-50%, -50%) rotateY(72deg) rotateZ(16deg);
    animation: qxi-home-orbit-inner 16s linear infinite;
}

.qxi-home-orbit-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: var(--qxi-radius-circle);
    background: var(--qxi-color-cyan-bright);
    box-shadow: 0 0 10px rgba(118, 231, 255, 0.9), 0 0 24px rgba(57, 215, 255, 0.6);
}

.qxi-home-orbit-particle-one {
    top: 50%;
    left: -4px;
}

.qxi-home-orbit-particle-two {
    top: 12%;
    right: 12%;
    background: var(--qxi-color-purple-bright);
    box-shadow: 0 0 10px rgba(185, 154, 255, 0.9), 0 0 24px rgba(155, 109, 255, 0.5);
}

.qxi-home-orbit-particle-three {
    right: 22%;
    bottom: 3%;
    background: var(--qxi-color-primary-bright);
}

.qxi-home-core-sphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 231, 255, 0.34);
    border-radius: var(--qxi-radius-circle);
    background: var(--qxi-gradient-sphere);
    box-shadow: inset 0 0 48px rgba(57, 215, 255, 0.1), inset -24px -30px 50px rgba(0, 0, 0, 0.4), 0 0 50px rgba(57, 215, 255, 0.18), 0 0 110px rgba(79, 124, 255, 0.16);
    transform: translateZ(40px);
    animation: qxi-home-sphere-breathe 9s ease-in-out infinite;
}

    .qxi-home-core-sphere::before {
        position: absolute;
        inset: 12px;
        z-index: 1;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--qxi-radius-circle);
        content: "";
    }

    .qxi-home-core-sphere::after {
        position: absolute;
        inset: 0;
        z-index: 4;
        border-radius: inherit;
        background: radial-gradient( circle at 70% 75%, rgba(0, 0, 0, 0.42), transparent 52% ), linear-gradient( 125deg, rgba(255, 255, 255, 0.08), transparent 32% );
        content: "";
        pointer-events: none;
    }

.qxi-home-core-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.qxi-home-core-surface {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: repeating-radial-gradient( circle at 50% 50%, transparent 0, transparent 18px, rgba(118, 231, 255, 0.025) 19px, transparent 20px );
    opacity: 0.8;
    pointer-events: none;
}

.qxi-home-core-reflection {
    position: absolute;
    top: 34px;
    left: 56px;
    z-index: 5;
    width: 110px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(255, 255, 255, 0.22), transparent 72% );
    filter: blur(3px);
    opacity: 0.6;
    pointer-events: none;
    transform: rotate(-28deg);
}

.qxi-home-core-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    display: grid;
    width: 72%;
    gap: var(--qxi-space-2);
    text-align: center;
    transform: translate(-50%, -50%);
}

.qxi-home-core-kicker {
    color: var(--qxi-color-cyan-bright);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qxi-home-core-brand {
    color: var(--qxi-color-text);
    font-family: var(--qxi-font-heading);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.18), 0 0 34px rgba(57, 215, 255, 0.18);
}

.qxi-home-core-brand-base {
    color: var(--qxi-color-text);
}

.qxi-home-core-brand-accent {
    background: var(--qxi-gradient-brand-text);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.qxi-home-core-trademark {
    position: relative;
    top: -0.55em;
    margin-left: 2px;
    color: var(--qxi-color-cyan-bright);
    font-family: var(--qxi-font-body);
    font-size: 0.3em;
    font-weight: 700;
    line-height: 1;
}

.qxi-home-core-description {
    color: var(--qxi-color-text-soft);
    font-size: 0.72rem;
    line-height: 1.55;
}

.qxi-home-core-platform {
    position: absolute;
    bottom: -67px;
    left: 50%;
    z-index: 0;
    width: 230px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(57, 215, 255, 0.18), rgba(79, 124, 255, 0.07) 48%, transparent 72% );
    filter: blur(2px);
    transform: translateX(-50%);
}

    .qxi-home-core-platform::before {
        position: absolute;
        inset: 20px 28px;
        border: 1px solid rgba(118, 231, 255, 0.18);
        border-radius: 50%;
        content: "";
        box-shadow: 0 0 22px rgba(57, 215, 255, 0.14);
    }

    .qxi-home-core-platform span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: var(--qxi-radius-pill);
        background: var(--qxi-color-cyan);
        box-shadow: 0 0 14px rgba(57, 215, 255, 0.8);
        transform: translate(-50%, -50%);
    }

.qxi-home-intelligence-map.has-active-node
.qxi-home-node:not(.is-active) {
    opacity: 0.54;
}

.qxi-home-intelligence-map.has-active-node
.qxi-home-core-sphere {
    border-color: rgba(118, 231, 255, 0.62);
    box-shadow: inset 0 0 54px rgba(57, 215, 255, 0.13), inset -24px -30px 50px rgba(0, 0, 0, 0.4), 0 0 68px rgba(57, 215, 255, 0.28), 0 0 135px rgba(79, 124, 255, 0.2);
}

.qxi-home-scroll-indicator {
    position: absolute;
    bottom: var(--qxi-space-5);
    left: 50%;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: var(--qxi-space-2);
    color: var(--qxi-color-text-faint);
    font-size: var(--qxi-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--qxi-letter-spacing-wide);
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: color var(--qxi-duration-fast) var(--qxi-ease-standard);
}

    .qxi-home-scroll-indicator i {
        animation: qxi-home-scroll-bounce 2s ease-in-out infinite;
    }

    .qxi-home-scroll-indicator:hover,
    .qxi-home-scroll-indicator:focus-visible {
        color: var(--qxi-color-cyan-bright);
    }

/* =========================================================
   Shared homepage surfaces
   ========================================================= */

.qxi-home-platform-section,
.qxi-home-how-section,
.qxi-home-about-section {
    background: linear-gradient( 180deg, rgba(3, 7, 18, 0.18), rgba(8, 15, 33, 0.5) );
}

.qxi-home-specialists-section,
.qxi-home-insights-section {
    background: radial-gradient( circle at 15% 20%, rgba(57, 215, 255, 0.055), transparent 34% ), radial-gradient( circle at 85% 18%, rgba(155, 109, 255, 0.06), transparent 34% );
}

.qxi-home-use-cases-section {
    border-block: 1px solid var(--qxi-color-border);
    background: linear-gradient( 135deg, rgba(7, 14, 32, 0.72), rgba(3, 7, 18, 0.54) );
}

/* =========================================================
   Platform features
   ========================================================= */

.qxi-home-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--qxi-space-6);
}

.qxi-home-feature-card {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    padding: var(--qxi-space-8);
    border: 1px solid var(--qxi-color-border);
    border-radius: var(--qxi-radius-xl);
    background: var(--qxi-gradient-surface);
    box-shadow: var(--qxi-shadow-small), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform var(--qxi-duration-normal) var(--qxi-ease-emphasized), border-color var(--qxi-duration-normal) var(--qxi-ease-standard), box-shadow var(--qxi-duration-normal) var(--qxi-ease-standard);
}

    .qxi-home-feature-card::before {
        position: absolute;
        right: -80px;
        bottom: -110px;
        width: 220px;
        height: 220px;
        border-radius: var(--qxi-radius-circle);
        background: radial-gradient( circle, rgba(79, 124, 255, 0.18), transparent 70% );
        content: "";
        pointer-events: none;
    }

    .qxi-home-feature-card:hover {
        border-color: var(--qxi-color-border-strong);
        box-shadow: var(--qxi-shadow-medium), var(--qxi-shadow-primary);
        transform: translateY(-6px);
    }

.qxi-home-feature-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin-bottom: var(--qxi-space-8);
    border: 1px solid rgba(118, 231, 255, 0.2);
    border-radius: var(--qxi-radius-lg);
    background: linear-gradient( 145deg, rgba(79, 124, 255, 0.22), rgba(57, 215, 255, 0.08) );
    color: var(--qxi-color-cyan-bright);
    font-size: 1.35rem;
}

.qxi-home-feature-card h3 {
    font-size: var(--qxi-font-size-xl);
}

.qxi-home-feature-card p {
    margin-top: var(--qxi-space-4);
    color: var(--qxi-color-text-muted);
}

/* =========================================================
   Specialists
   ========================================================= */

.qxi-home-specialist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--qxi-space-5);
}

.qxi-home-specialist-card {
    position: relative;
    min-height: 290px;
    overflow: hidden;
    padding: var(--qxi-space-6);
    border: 1px solid var(--qxi-color-border);
    border-radius: var(--qxi-radius-lg);
    background: linear-gradient( 150deg, rgba(15, 28, 58, 0.84), rgba(5, 11, 26, 0.82) );
    box-shadow: var(--qxi-shadow-small), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: transform var(--qxi-duration-normal) var(--qxi-ease-emphasized), border-color var(--qxi-duration-normal) var(--qxi-ease-standard), box-shadow var(--qxi-duration-normal) var(--qxi-ease-standard);
}

    .qxi-home-specialist-card:nth-child(7) {
        grid-column: 2 / span 2;
    }

    .qxi-home-specialist-card::after {
        position: absolute;
        top: -60px;
        right: -60px;
        width: 145px;
        height: 145px;
        border-radius: var(--qxi-radius-circle);
        background: radial-gradient( circle, rgba(155, 109, 255, 0.16), transparent 70% );
        content: "";
        pointer-events: none;
    }

    .qxi-home-specialist-card:hover {
        border-color: rgba(185, 154, 255, 0.36);
        box-shadow: var(--qxi-shadow-medium), var(--qxi-shadow-purple);
        transform: translateY(-6px);
    }

.qxi-home-specialist-number {
    position: absolute;
    top: var(--qxi-space-5);
    right: var(--qxi-space-5);
    color: rgba(255, 255, 255, 0.12);
    font-family: var(--qxi-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

.qxi-home-specialist-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    margin-bottom: var(--qxi-space-8);
    border: 1px solid rgba(185, 154, 255, 0.2);
    border-radius: var(--qxi-radius-md);
    background: linear-gradient( 145deg, rgba(155, 109, 255, 0.2), rgba(79, 124, 255, 0.08) );
    color: var(--qxi-color-purple-bright);
    font-size: 1.15rem;
}

.qxi-home-specialist-card h3 {
    font-size: 1.2rem;
}

.qxi-home-specialist-card p {
    margin-top: var(--qxi-space-4);
    color: var(--qxi-color-text-muted);
    font-size: var(--qxi-font-size-sm);
}

/* =========================================================
   Use cases
   ========================================================= */

.qxi-home-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--qxi-space-20);
    align-items: start;
}

.qxi-home-use-case-list {
    display: grid;
    gap: var(--qxi-space-4);
}

.qxi-home-use-case-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--qxi-space-5);
    padding: var(--qxi-space-5);
    border: 1px solid var(--qxi-color-border);
    border-radius: var(--qxi-radius-lg);
    background: rgba(255, 255, 255, 0.025);
    transition: transform var(--qxi-duration-normal) var(--qxi-ease-emphasized), border-color var(--qxi-duration-normal) var(--qxi-ease-standard), background-color var(--qxi-duration-normal) var(--qxi-ease-standard);
}

    .qxi-home-use-case-item:hover {
        border-color: var(--qxi-color-border-strong);
        background: rgba(79, 124, 255, 0.055);
        transform: translateX(6px);
    }

    .qxi-home-use-case-item > span {
        color: var(--qxi-color-cyan-bright);
        font-family: var(--qxi-font-heading);
        font-size: var(--qxi-font-size-sm);
        font-weight: 700;
        letter-spacing: var(--qxi-letter-spacing-wide);
    }

    .qxi-home-use-case-item h3 {
        font-size: 1.08rem;
    }

    .qxi-home-use-case-item p {
        margin-top: var(--qxi-space-2);
        color: var(--qxi-color-text-muted);
        font-size: var(--qxi-font-size-sm);
    }

/* =========================================================
   Process
   ========================================================= */

.qxi-home-process {
    --qxi-process-marker-size: 60px;
    --qxi-process-step-gap: var(--qxi-space-5);
    --qxi-process-step-padding: var(--qxi-space-6);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--qxi-process-step-gap);
}

.qxi-home-process-step {
    position: relative;
    padding: var(--qxi-process-step-padding);
    text-align: center;
}

    /*
 * Each step draws only the section of line leading to the next step.
 * The line begins at the right edge of the current marker and ends at
 * the left edge of the next marker, so it never passes through a number.
 */
    .qxi-home-process-step:not(:last-child)::after {
        position: absolute;
        top: calc( var(--qxi-process-step-padding) + (var(--qxi-process-marker-size) / 2) );
        left: calc( 50% + (var(--qxi-process-marker-size) / 2) );
        z-index: 0;
        width: calc( 100% + var(--qxi-process-step-gap) - var(--qxi-process-marker-size) );
        height: 2px;
        background: linear-gradient( 90deg, rgba(79, 124, 255, 0.55), rgba(57, 215, 255, 0.72), rgba(155, 109, 255, 0.55) );
        content: "";
        pointer-events: none;
        transform: translateY(-50%);
    }

.qxi-home-process-marker {
    position: relative;
    z-index: 2;
    display: grid;
    width: var(--qxi-process-marker-size);
    height: var(--qxi-process-marker-size);
    margin-inline: auto;
    place-items: center;
    border: 1px solid rgba(118, 231, 255, 0.38);
    border-radius: var(--qxi-radius-circle);
    background: radial-gradient( circle at 35% 30%, #315b91 0%, #172e5f 45%, #060d1f 100% );
    color: var(--qxi-color-text);
    font-family: var(--qxi-font-heading);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 7px #060d1f, 0 0 28px rgba(57, 215, 255, 0.16);
}

.qxi-home-process-step h3 {
    margin-top: var(--qxi-space-6);
    font-size: 1.1rem;
}

.qxi-home-process-step p {
    margin-top: var(--qxi-space-3);
    color: var(--qxi-color-text-muted);
    font-size: var(--qxi-font-size-sm);
}

/* =========================================================
   Insights
   ========================================================= */

.qxi-home-insights-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: center;
    gap: var(--qxi-space-12);
    padding: var(--qxi-space-12);
    border: 1px solid var(--qxi-color-border-strong);
    border-radius: var(--qxi-radius-2xl);
    background: radial-gradient( circle at 15% 10%, rgba(57, 215, 255, 0.1), transparent 32% ), radial-gradient( circle at 90% 90%, rgba(155, 109, 255, 0.12), transparent 34% ), var(--qxi-gradient-surface);
    box-shadow: var(--qxi-shadow-large), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

    .qxi-home-insights-panel h2 {
        margin-top: var(--qxi-space-5);
    }

    .qxi-home-insights-panel p {
        margin-top: var(--qxi-space-5);
    }

.qxi-home-insights-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qxi-space-3);
    align-content: center;
}

    .qxi-home-insights-topics span {
        padding: var(--qxi-space-3) var(--qxi-space-4);
        border: 1px solid var(--qxi-color-border);
        border-radius: var(--qxi-radius-pill);
        background: rgba(255, 255, 255, 0.035);
        color: var(--qxi-color-text-soft);
        font-size: var(--qxi-font-size-sm);
    }

/* =========================================================
   About
   ========================================================= */

.qxi-home-about-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--qxi-space-20);
}

.qxi-home-about-visual {
    position: relative;
    display: grid;
    min-height: 410px;
    place-items: center;
}

.qxi-home-about-orbit {
    position: absolute;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(118, 231, 255, 0.2);
    border-radius: var(--qxi-radius-circle);
    animation: qxi-home-about-spin 26s linear infinite;
}

    .qxi-home-about-orbit::before,
    .qxi-home-about-orbit::after {
        position: absolute;
        border: 1px solid rgba(185, 154, 255, 0.18);
        border-radius: var(--qxi-radius-circle);
        content: "";
    }

    .qxi-home-about-orbit::before {
        inset: 40px -28px;
        transform: rotate(58deg);
    }

    .qxi-home-about-orbit::after {
        inset: -24px 52px;
        border-color: rgba(79, 124, 255, 0.18);
        transform: rotate(-42deg);
    }

.qxi-home-about-core {
    position: relative;
    z-index: 2;
    display: grid;
    width: 190px;
    height: 190px;
    padding: 28px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(118, 231, 255, 0.3);
    border-radius: var(--qxi-radius-circle);
    background: radial-gradient( circle at 35% 30%, rgba(118, 231, 255, 0.24), rgba(79, 124, 255, 0.18) 45%, rgba(7, 14, 34, 0.96) 100% );
    box-shadow: 0 0 50px rgba(57, 215, 255, 0.15), 0 0 110px rgba(79, 124, 255, 0.12);
}

    .qxi-home-about-core img {
        width: 75%;
        height: 75%;
        object-fit: contain;
    }

.qxi-home-about-grid .qxi-section-heading {
    margin-bottom: 0;
}

.qxi-home-about-grid .qxi-body-large {
    margin-top: var(--qxi-space-5);
}

.qxi-home-about-grid .qxi-link {
    margin-top: var(--qxi-space-6);
}

/* =========================================================
   Early access
   ========================================================= */

.qxi-home-access-section {
    padding-top: var(--qxi-space-16);
}

.qxi-home-access-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    overflow: hidden;
    gap: var(--qxi-space-12);
    padding: var(--qxi-space-12);
    border: 1px solid rgba(118, 231, 255, 0.28);
    border-radius: var(--qxi-radius-2xl);
    background: radial-gradient( circle at 10% 20%, rgba(57, 215, 255, 0.15), transparent 32% ), radial-gradient( circle at 92% 82%, rgba(155, 109, 255, 0.17), transparent 34% ), linear-gradient( 135deg, rgba(18, 36, 76, 0.94), rgba(6, 13, 32, 0.96) );
    box-shadow: var(--qxi-shadow-large), 0 0 60px rgba(79, 124, 255, 0.12);
}

    .qxi-home-access-panel::before {
        position: absolute;
        top: -140px;
        right: 12%;
        width: 300px;
        height: 300px;
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: var(--qxi-radius-circle);
        content: "";
    }

.qxi-home-access-copy h2 {
    margin-top: var(--qxi-space-5);
}

.qxi-home-access-copy p {
    margin-top: var(--qxi-space-5);
}

.qxi-home-access-form-placeholder {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--qxi-space-4);
    padding: var(--qxi-space-6);
    border: 1px solid var(--qxi-color-border-strong);
    border-radius: var(--qxi-radius-xl);
    background: rgba(2, 6, 18, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.qxi-home-access-form-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: var(--qxi-radius-md);
    background: linear-gradient( 145deg, rgba(79, 124, 255, 0.3), rgba(57, 215, 255, 0.12) );
    color: var(--qxi-color-cyan-bright);
    font-size: 1.25rem;
}

.qxi-home-access-form-placeholder h3 {
    font-size: 1.15rem;
}

.qxi-home-access-form-placeholder p {
    margin-top: var(--qxi-space-2);
    color: var(--qxi-color-text-muted);
    font-size: var(--qxi-font-size-sm);
}

.qxi-home-access-status {
    grid-column: 2;
    justify-self: start;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(246, 191, 85, 0.24);
    border-radius: var(--qxi-radius-pill);
    background: rgba(246, 191, 85, 0.08);
    color: var(--qxi-color-warning);
    font-size: var(--qxi-font-size-xs);
    font-weight: 700;
    letter-spacing: var(--qxi-letter-spacing-wide);
    text-transform: uppercase;
}

.qxi-home-access-form-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--qxi-space-6);
    align-items: flex-start;
}

.qxi-home-access-form-heading {
    display: flex;
    gap: var(--qxi-space-4);
    align-items: flex-start;
}

.qxi-home-access-form-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid rgba(118, 231, 255, 0.24);
    border-radius: 16px;
    color: var(--qxi-color-cyan-bright);
    background: rgba(57, 215, 255, 0.09);
    font-size: 1.2rem;
    box-shadow: 0 0 28px rgba(57, 215, 255, 0.08);
}

.qxi-home-access-form-heading > div {
    min-width: 0;
}

.qxi-home-access-form-heading h3 {
    margin: 0 0 0.45rem;
    color: var(--qxi-color-text);
}

.qxi-home-access-form-heading p {
    max-width: 520px;
    margin: 0;
    color: var(--qxi-color-text-muted);
    line-height: 1.65;
}

.qxi-home-access-form-placeholder .qxi-button {
    margin-left: calc(52px + var(--qxi-space-4));
}

.qxi-home-access-section .qxi-button-primary,
.qxi-home-hero-actions .qxi-button-secondary {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.qxi-home-access-section .qxi-button-primary {
    border-color: rgba(118, 231, 255, 0.45);
    background: linear-gradient( 135deg, #315fe8, #5d3fd3 );
    box-shadow: 0 12px 30px rgba(49, 95, 232, 0.28), 0 0 22px rgba(57, 215, 255, 0.12);
}

    .qxi-home-access-section .qxi-button-primary:hover,
    .qxi-home-access-section .qxi-button-primary:focus-visible {
        background: linear-gradient( 135deg, #3c6bf2, #6c4be3 );
        box-shadow: 0 16px 36px rgba(49, 95, 232, 0.34), 0 0 28px rgba(57, 215, 255, 0.16);
    }

.qxi-home-hero-actions .qxi-button-secondary {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(4, 11, 27, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.qxi-home-about-logo-link {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: inherit;
    transition: transform 220ms ease, filter 220ms ease;
}

    .qxi-home-about-logo-link:hover,
    .qxi-home-about-logo-link:focus-visible {
        transform: scale(1.05);
        filter: brightness(1.08) drop-shadow(0 0 18px rgba(57, 215, 255, 0.28));
    }

    .qxi-home-about-logo-link:focus-visible {
        outline: 2px solid var(--qxi-color-cyan-bright);
        outline-offset: 6px;
    }

.qxi-home-about-company {
    display: inline-block;
    background: var(--qxi-gradient-brand-text);
    background-clip: text;
    color: transparent;
    font-weight: 800;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(57, 215, 255, 0.12);
}

/* =========================================================
   Animations
   ========================================================= */

@keyframes qxi-home-status-pulse {
    0% {
        opacity: 0.7;
        transform: scale(0.8);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes qxi-home-map-ring-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes qxi-home-core-aura {
    0%, 100% {
        opacity: 0.7;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes qxi-home-orbit-outer {
    from {
        transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotateX(68deg) rotateZ(8deg) rotate(360deg);
    }
}

@keyframes qxi-home-orbit-middle {
    from {
        transform: translate(-50%, -50%) rotateX(72deg) rotateZ(66deg) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotateX(72deg) rotateZ(66deg) rotate(360deg);
    }
}

@keyframes qxi-home-orbit-inner {
    from {
        transform: translate(-50%, -50%) rotateY(72deg) rotateZ(16deg) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotateY(72deg) rotateZ(16deg) rotate(360deg);
    }
}

@keyframes qxi-home-sphere-breathe {
    0%, 100% {
        transform: translateZ(40px) scale(0.985);
    }

    50% {
        transform: translateZ(40px) scale(1.02);
    }
}

@keyframes qxi-home-scroll-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

@keyframes qxi-home-about-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Responsive layout
   ========================================================= */

@media (max-width: 1399.98px) {
    .qxi-home-hero-inner {
        grid-template-columns: minmax(300px, 0.76fr) minmax(650px, 1.24fr);
    }

    .qxi-home-intelligence-map {
        min-height: 650px;
    }

    .qxi-home-core {
        width: 300px;
        height: 300px;
    }

    .qxi-home-core-orbit-outer {
        width: 376px;
        height: 376px;
    }

    .qxi-home-core-orbit-middle {
        width: 342px;
        height: 342px;
    }

    .qxi-home-core-orbit-inner {
        width: 318px;
        height: 318px;
    }

    .qxi-home-node {
        width: 230px;
    }
}

@media (max-width: 1199.98px) {
    .qxi-home-hero-inner {
        grid-template-columns: 1fr;
        padding-top: var(--qxi-space-16);
    }

    .qxi-home-hero-introduction {
        max-width: 820px;
        margin-inline: auto;
        text-align: center;
    }

    .qxi-home-hero-actions,
    .qxi-home-development-status {
        justify-content: center;
    }

    .qxi-home-intelligence-map {
        width: min(100%, 900px);
    }

    .qxi-home-specialist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .qxi-home-specialist-card:nth-child(7) {
        grid-column: 2;
    }

    .qxi-home-platform-grid,
    .qxi-home-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .qxi-home-process::before {
            display: none;
        }

    .qxi-home-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qxi-home-process-step::after {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .qxi-home-intelligence-map {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: auto;
        gap: var(--qxi-space-4);
        padding-top: 470px;
    }

        .qxi-home-intelligence-map::before,
        .qxi-home-intelligence-map::after,
        .qxi-home-connections {
            display: none;
        }

    .qxi-home-core {
        top: 210px;
        width: 280px;
        height: 280px;
    }

    .qxi-home-core-orbit-outer {
        width: 352px;
        height: 352px;
    }

    .qxi-home-core-orbit-middle {
        width: 322px;
        height: 322px;
    }

    .qxi-home-core-orbit-inner {
        width: 298px;
        height: 298px;
    }

    .qxi-home-node {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 96px;
    }

    .qxi-home-intelligence-map.has-active-node
    .qxi-home-node:not(.is-active) {
        opacity: 1;
    }

    .qxi-home-split-layout,
    .qxi-home-insights-panel,
    .qxi-home-about-grid,
    .qxi-home-access-panel {
        grid-template-columns: 1fr;
    }

    .qxi-home-about-visual {
        min-height: 350px;
    }

    .qxi-home-access-form-placeholder {
        max-width: 640px;
    }
}

@media (max-width: 767.98px) {
    .qxi-home-hero {
        min-height: auto;
    }

    .qxi-home-hero-inner {
        min-height: auto;
        padding-top: var(--qxi-space-12);
        padding-bottom: var(--qxi-space-20);
    }

    .qxi-home-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

        .qxi-home-hero-actions .qxi-button {
            width: 100%;
        }

    .qxi-home-development-status {
        align-items: flex-start;
        text-align: left;
    }

    .qxi-home-intelligence-map {
        grid-template-columns: 1fr;
        padding-top: 420px;
    }

    .qxi-home-core {
        top: 185px;
        width: 240px;
        height: 240px;
    }

    .qxi-home-core-orbit-outer {
        width: 306px;
        height: 306px;
    }

    .qxi-home-core-orbit-middle {
        width: 278px;
        height: 278px;
    }

    .qxi-home-core-orbit-inner {
        width: 258px;
        height: 258px;
    }

    .qxi-home-core-brand {
        font-size: 1.75rem;
    }

    .qxi-home-core-description {
        font-size: 0.65rem;
    }

    .qxi-home-core-platform {
        bottom: -58px;
        width: 190px;
    }

    .qxi-home-scroll-indicator {
        display: none;
    }

    .qxi-home-platform-grid,
    .qxi-home-specialist-grid,
    .qxi-home-process {
        grid-template-columns: 1fr;
    }

    .qxi-home-specialist-card:nth-child(7) {
        grid-column: auto;
    }

    .qxi-home-feature-card,
    .qxi-home-specialist-card {
        min-height: auto;
    }

    .qxi-home-insights-panel,
    .qxi-home-access-panel {
        padding: var(--qxi-space-8);
    }

    .qxi-home-about-orbit {
        width: 270px;
        height: 270px;
    }

    .qxi-home-about-core {
        width: 160px;
        height: 160px;
        font-size: 1.7rem;
    }

    .qxi-home-process {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .qxi-home-node {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .qxi-home-node-arrow {
        display: none;
    }

    .qxi-home-intelligence-map {
        padding-top: 370px;
    }

    .qxi-home-core {
        top: 160px;
        width: 210px;
        height: 210px;
    }

    .qxi-home-core-orbit-outer {
        width: 270px;
        height: 270px;
    }

    .qxi-home-core-orbit-middle {
        width: 244px;
        height: 244px;
    }

    .qxi-home-core-orbit-inner {
        width: 224px;
        height: 224px;
    }

    .qxi-home-core-brand {
        font-size: 1.5rem;
    }

    .qxi-home-core-kicker {
        font-size: 0.56rem;
    }

    .qxi-home-core-description {
        display: none;
    }

    .qxi-home-feature-card,
    .qxi-home-specialist-card,
    .qxi-home-insights-panel,
    .qxi-home-access-panel {
        padding: var(--qxi-space-6);
    }

    .qxi-home-access-form-placeholder {
        grid-template-columns: 1fr;
    }

    .qxi-home-access-status {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .qxi-home-access-form-heading {
        flex-direction: column;
    }

    .qxi-home-access-form-placeholder .qxi-button {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .qxi-home-intelligence-map::after,
    .qxi-home-core::before,
    .qxi-home-core-orbit,
    .qxi-home-core-sphere,
    .qxi-home-status-indicator::after,
    .qxi-home-scroll-indicator i,
    .qxi-home-about-orbit {
        animation: none !important;
    }
}