/* ==========================================================================
   QuanLLM Homepage Visual Prototype v1
   Scientific / Quantum Editorial
   --------------------------------------------------------------------------
   This file intentionally overrides only the homepage. Existing shared CSS,
   theme switching and JS remain unchanged.
   ========================================================================== */

.home-redesign {
    --q-blue: #5576ee;
    --q-blue-strong: #7893ff;
    --q-cyan: #24b8c5;
    --q-violet: #826be7;
    --q-emerald: #39b98a;
    --q-ink: #08131f;
    --q-line: rgba(118, 147, 255, 0.18);
    --q-line-strong: rgba(90, 211, 218, 0.34);
    --q-section-cool: rgba(36, 184, 197, 0.045);
    --q-section-blue: rgba(85, 118, 238, 0.055);
    --q-section-violet: rgba(130, 107, 231, 0.045);
    --q-card-border: rgba(137, 159, 194, 0.14);
    --q-card-shadow: 0 22px 70px -48px rgba(0, 0, 0, 0.78);

    background:
        radial-gradient(circle at 72% 10%, rgba(85, 118, 238, 0.055), transparent 28rem),
        var(--bg);
}

html[data-theme="light"] .home-redesign {
    --q-blue: #3158d5;
    --q-blue-strong: #426ce2;
    --q-cyan: #0e8e9c;
    --q-violet: #6d55cb;
    --q-emerald: #14815e;
    --q-ink: #071421;
    --q-line: rgba(49, 88, 213, 0.12);
    --q-line-strong: rgba(14, 142, 156, 0.20);
    --q-section-cool: rgba(14, 142, 156, 0.035);
    --q-section-blue: rgba(49, 88, 213, 0.04);
    --q-section-violet: rgba(109, 85, 203, 0.035);
    --q-card-border: rgba(27, 48, 78, 0.095);
    --q-card-shadow: 0 24px 60px -42px rgba(35, 55, 88, 0.35);

    background:
        radial-gradient(circle at 72% 8%, rgba(49, 88, 213, 0.06), transparent 31rem),
        #f7f9fc;
}

/* --- Navigation ---------------------------------------------------------- */

.home-redesign .navbar {
    padding-top: 14px;
}

.home-redesign .navbar.scrolled {
    background: rgba(7, 16, 29, 0.78);
    border-bottom-color: rgba(142, 164, 199, 0.12);
    box-shadow: 0 14px 50px -34px rgba(0, 0, 0, 0.72);
}

html[data-theme="light"] .home-redesign .navbar.scrolled {
    background: rgba(248, 250, 253, 0.84);
    border-bottom-color: rgba(25, 45, 76, 0.08);
    box-shadow: 0 14px 42px -32px rgba(25, 45, 76, 0.34);
}

.home-redesign .nav-cta {
    background: linear-gradient(135deg, var(--q-blue) 0%, var(--q-cyan) 100%);
    box-shadow: 0 8px 24px -14px rgba(66, 127, 238, 0.72);
}

.home-redesign .logo-icon {
    filter: saturate(.7);
}

/* --- Hero: probability field + Bloch sphere + wave ---------------------- */

.home-redesign .hero {
    min-height: 100svh;
    padding-top: 126px;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 22%, rgba(86, 121, 236, 0.13), transparent 28rem),
        radial-gradient(circle at 17% 74%, rgba(35, 184, 197, 0.085), transparent 27rem),
        linear-gradient(180deg, rgba(255,255,255,0.01), transparent 46%);
}

.home-redesign .hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1120px, 92vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--q-line-strong), transparent);
    opacity: .7;
}

.home-redesign .hero-bg {
    pointer-events: none;
}

.home-redesign .gradient-orb {
    filter: blur(150px);
    animation-duration: 34s;
}

.home-redesign .orb-1 {
    width: 460px;
    height: 460px;
    top: -210px;
    right: 4%;
    background: var(--q-blue);
    opacity: .18;
}

.home-redesign .orb-2 {
    width: 420px;
    height: 420px;
    left: 2%;
    bottom: -190px;
    background: var(--q-cyan);
    opacity: .12;
}

.home-redesign .orb-3 {
    width: 340px;
    height: 340px;
    top: 41%;
    left: 54%;
    background: var(--q-violet);
    opacity: .075;
}

.home-redesign .grid-overlay {
    background-image:
        linear-gradient(var(--q-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--q-line) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .34;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 78%);
}

html[data-theme="light"] .home-redesign .hero {
    background:
        radial-gradient(circle at 78% 20%, rgba(49, 88, 213, 0.085), transparent 30rem),
        radial-gradient(circle at 16% 74%, rgba(14, 142, 156, 0.055), transparent 28rem),
        linear-gradient(180deg, #fbfcff 0%, #f7f9fc 72%, #f7f9fc 100%);
}

html[data-theme="light"] .home-redesign .gradient-orb {
    filter: blur(170px);
}

/* Quantum ambient layer */
.quantum-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--q-cyan);
}

.quantum-ambient::before {
    content: "";
    position: absolute;
    inset: 7% 4% 10%;
    opacity: .48;
    background-image:
        radial-gradient(circle, var(--q-line-strong) 0 1px, transparent 1.5px),
        radial-gradient(circle, var(--q-line) 0 1px, transparent 1.5px);
    background-position: 0 0, 22px 22px;
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 72% 36%, #000 0 9rem, transparent 25rem),
                radial-gradient(circle at 20% 73%, #000 0 7rem, transparent 22rem);
    -webkit-mask-image: radial-gradient(circle at 72% 36%, #000 0 9rem, transparent 25rem);
}

.quantum-bloch {
    position: absolute;
    width: min(480px, 42vw);
    height: min(480px, 42vw);
    right: -4vw;
    top: 9%;
    color: var(--q-blue-strong);
    opacity: .34;
    filter: drop-shadow(0 0 28px rgba(74, 112, 233, .12));
    animation: qFloat 16s ease-in-out infinite;
}

.quantum-bloch .q-line,
.quantum-bloch .q-axis,
.quantum-bloch .q-state {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.quantum-bloch .q-line {
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: .64;
}

.quantum-bloch .q-line--main {
    stroke-width: 1.6;
    opacity: .8;
}

.quantum-bloch .q-line--dash {
    stroke-dasharray: 8 10;
    animation: qDash 18s linear infinite;
}

.quantum-bloch .q-axis {
    stroke: var(--q-line-strong);
    stroke-width: 1;
    opacity: .55;
}

.quantum-bloch .q-state {
    stroke: var(--q-cyan);
    stroke-width: 2.2;
    opacity: .84;
}

.quantum-bloch .q-node {
    fill: var(--q-blue-strong);
}

.quantum-bloch .q-node--state {
    fill: var(--q-cyan);
    filter: drop-shadow(0 0 8px rgba(36, 184, 197, .85));
    animation: qPulseNode 3.4s ease-in-out infinite;
}

.quantum-wave {
    position: absolute;
    left: -3%;
    bottom: 8%;
    width: min(860px, 72vw);
    height: 230px;
    color: var(--q-cyan);
    opacity: .27;
    transform: rotate(-2deg);
}

.quantum-wave .q-wave {
    fill: none;
    stroke: url(#waveFade);
    vector-effect: non-scaling-stroke;
}

.quantum-wave .q-wave--1 {
    stroke-width: 1.8;
    stroke-dasharray: 8 7;
    animation: qDash 28s linear infinite reverse;
}

.quantum-wave .q-wave--2 {
    stroke-width: 1;
    opacity: .5;
}

.quantum-formula {
    position: absolute;
    font-family: "Times New Roman", Georgia, serif;
    color: var(--text-subtle);
    letter-spacing: .03em;
    opacity: .24;
    user-select: none;
}

.quantum-formula--a {
    left: 10%;
    top: 24%;
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.quantum-formula--b {
    left: 7%;
    bottom: 20%;
    font-size: clamp(.9rem, 1.4vw, 1.25rem);
}

.quantum-formula--c {
    right: 17%;
    bottom: 14%;
    font-size: clamp(.9rem, 1.3vw, 1.18rem);
}

html[data-theme="light"] .home-redesign .quantum-bloch {
    opacity: .26;
}

html[data-theme="light"] .home-redesign .quantum-wave {
    opacity: .21;
}

.home-redesign .hero-content {
    max-width: 1120px;
}

.home-redesign .hero-badge {
    margin-bottom: 26px;
    background: rgba(85, 118, 238, .07);
    border-color: rgba(99, 136, 242, .15);
    color: var(--q-blue-strong);
    backdrop-filter: blur(10px);
}

.home-redesign .hero-title {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -.035em;
}

.home-redesign .gradient-text {
    background: linear-gradient(100deg, var(--q-blue-strong) 0%, var(--q-cyan) 76%);
    -webkit-background-clip: text;
    background-clip: text;
}

.home-redesign .hero-subtitle {
    max-width: 790px;
    line-height: 1.85;
}

.home-redesign .btn-primary {
    background: linear-gradient(135deg, var(--q-blue) 0%, var(--q-cyan) 100%);
    box-shadow: 0 14px 35px -18px rgba(69, 126, 235, .88);
}

.home-redesign .btn-primary:hover {
    box-shadow: 0 18px 44px -18px rgba(69, 126, 235, .72);
}

.home-redesign .hero .btn-secondary {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.035);
    border-color: rgba(151, 176, 214, .15);
}

html[data-theme="light"] .home-redesign .hero .btn-secondary {
    background: rgba(255,255,255,.58);
    border-color: rgba(24, 54, 94, .11);
}

.home-redesign .hero-stats {
    margin-top: 4px;
    gap: 14px;
}

.home-redesign .stat-item {
    position: relative;
    overflow: hidden;
    padding: 18px 14px 16px;
    background: rgba(12, 27, 45, .42);
    border-color: rgba(129, 159, 201, .12);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px -36px rgba(0,0,0,.8);
}

.home-redesign .stat-item::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--q-line-strong), transparent);
    opacity: .65;
}

html[data-theme="light"] .home-redesign .stat-item {
    background: rgba(255,255,255,.72);
    border-color: rgba(32, 59, 94, .08);
    box-shadow: 0 20px 50px -40px rgba(25, 50, 82, .4);
}

.home-redesign .stat-value {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
    letter-spacing: -.02em;
}

.home-redesign .stat-label {
    text-transform: uppercase;
    letter-spacing: .055em;
    font-size: .72rem;
}

/* --- Section rhythm ----------------------------------------------------- */

.home-redesign section:not(.hero):not(.cta) {
    overflow: clip;
}

.home-redesign .section-header {
    max-width: 790px;
}

.home-redesign .section-tag {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 28px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--q-blue-strong);
}

.home-redesign .section-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    transform: translateY(-50%);
    background: var(--q-cyan);
}

.home-redesign .section-header h2 {
    letter-spacing: -.025em;
    line-height: 1.18;
}

.home-redesign .section-header p {
    line-height: 1.82;
}

/* Overview */
.home-redesign .intro {
    background:
        radial-gradient(circle at 50% 0%, var(--q-section-blue), transparent 34rem),
        var(--bg);
}

.home-redesign .intro .feature-card {
    position: relative;
    overflow: hidden;
    padding-top: 36px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 34%),
        var(--bg-light);
    border-color: var(--q-card-border);
    box-shadow: var(--q-card-shadow);
}

.home-redesign .intro .feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--q-blue);
    opacity: .78;
}

.home-redesign .intro .feature-card:nth-child(1)::before { background: var(--q-cyan); }
.home-redesign .intro .feature-card:nth-child(2)::before { background: var(--q-blue); }
.home-redesign .intro .feature-card:nth-child(3)::before { background: var(--q-violet); }

.home-redesign .feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 124, 255, .24);
    box-shadow: 0 22px 55px -40px rgba(52, 95, 180, .5);
}

/* Product: wave / interference */
.home-redesign .teaching {
    background:
        radial-gradient(ellipse at 12% 30%, rgba(36, 184, 197, .08), transparent 28rem),
        linear-gradient(180deg, var(--bg) 0%, rgba(36,184,197,.025) 48%, var(--bg) 100%);
}

.home-redesign .teaching::before,
.home-redesign .teaching::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid var(--q-line-strong);
    opacity: .2;
}

.home-redesign .teaching::before {
    width: 580px;
    height: 160px;
    left: -210px;
    top: 27%;
    transform: rotate(-13deg);
    box-shadow:
        0 46px 0 -1px transparent,
        0 46px 0 0 var(--q-line),
        0 92px 0 -1px transparent,
        0 92px 0 0 var(--q-line);
}

.home-redesign .teaching::after {
    width: 420px;
    height: 120px;
    right: -170px;
    bottom: 12%;
    transform: rotate(14deg);
}

.home-redesign .teaching .feature-card {
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%);
    border-color: var(--q-card-border);
}

/* Harness: DAG / evidence grid */
.home-redesign .research {
    background:
        linear-gradient(90deg, transparent 0 49.9%, rgba(85,118,238,.035) 50%, transparent 50.1%),
        radial-gradient(circle at 82% 18%, rgba(85,118,238,.08), transparent 26rem),
        var(--bg);
}

.home-redesign .research::before {
    content: "";
    position: absolute;
    inset: 6% 3%;
    background-image: radial-gradient(circle, var(--q-line-strong) 0 1.25px, transparent 1.6px);
    background-size: 54px 54px;
    opacity: .18;
    mask-image: linear-gradient(to right, transparent, #000 38%, #000 72%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 38%, #000 72%, transparent);
    pointer-events: none;
}

.home-redesign .feature-rows {
    max-width: 960px;
}

.home-redesign .feature-row {
    position: relative;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
    border-color: var(--q-card-border);
    box-shadow: var(--q-card-shadow);
}

.home-redesign .feature-row::after {
    content: "";
    position: absolute;
    left: 82px;
    top: 100%;
    width: 1px;
    height: 24px;
    background: linear-gradient(var(--q-line-strong), transparent);
    opacity: .45;
}

.home-redesign .feature-row:last-child::after {
    display: none;
}

.home-redesign .feature-row-icon {
    border: 1px solid rgba(85,118,238,.13);
    background: rgba(85,118,238,.07);
    filter: saturate(.72);
}

/* Model: orbit / state space */
.home-redesign .domains {
    background:
        radial-gradient(circle at 86% 35%, rgba(130,107,231,.08), transparent 26rem),
        linear-gradient(180deg, var(--bg), rgba(130,107,231,.022), var(--bg));
}

.home-redesign .domains::before,
.home-redesign .domains::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid var(--q-line);
    border-radius: 50%;
    right: -150px;
    top: 210px;
    width: 500px;
    height: 500px;
    opacity: .35;
}

.home-redesign .domains::after {
    right: -56px;
    top: 280px;
    width: 310px;
    height: 140px;
    transform: rotate(34deg);
    border-color: var(--q-line-strong);
}

.home-redesign .domain-item {
    background: color-mix(in srgb, var(--bg-light) 96%, var(--q-violet) 4%);
    border-color: var(--q-card-border);
    box-shadow: var(--q-card-shadow);
}

.home-redesign .domain-name {
    position: relative;
    padding-left: 17px;
}

.home-redesign .domain-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-violet);
    box-shadow: 0 0 0 5px rgba(130,107,231,.08);
}

/* Architecture panel */
.home-redesign .research-flow {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(85,118,238,.035), transparent 42%),
        var(--bg-light);
    border-color: var(--q-card-border);
    box-shadow: var(--q-card-shadow);
}

.home-redesign .research-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--q-line) 0 1px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: .14;
    mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
}

.home-redesign .research-flow > * {
    position: relative;
}

.home-redesign .flow-step {
    min-width: 104px;
    padding: 16px 13px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}

html[data-theme="light"] .home-redesign .flow-step {
    background: rgba(255,255,255,.62);
    border-color: rgba(29,55,92,.05);
}

.home-redesign .flow-icon {
    filter: saturate(.68);
}

/* Roadmap: editorial, lower visual noise */
.home-redesign .roadmap {
    background:
        radial-gradient(circle at 18% 25%, rgba(36,184,197,.045), transparent 25rem),
        var(--bg);
}

.home-redesign .roadmap-timeline::before {
    background: linear-gradient(var(--q-cyan), var(--q-blue), var(--border));
    opacity: .5;
}

.home-redesign .roadmap-content {
    border-color: var(--q-card-border);
    box-shadow: 0 18px 48px -42px rgba(0,0,0,.72);
}

.home-redesign .roadmap-item.completed .roadmap-marker {
    background: linear-gradient(135deg, var(--q-blue), var(--q-cyan));
    box-shadow: 0 0 0 7px rgba(85,118,238,.055);
}

/* --- CTA: always a dark scientific anchor ------------------------------- */

.home-redesign .cta {
    padding: 96px 0 88px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 54%, rgba(85,118,238,.025) 100%);
}

.home-redesign .cta-card {
    min-height: 390px;
    padding: 82px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
    border: 1px solid rgba(157, 184, 222, .13);
    background:
        radial-gradient(circle at 82% 20%, rgba(85,118,238,.24), transparent 19rem),
        radial-gradient(circle at 14% 86%, rgba(36,184,197,.14), transparent 20rem),
        linear-gradient(135deg, #091523 0%, #0c1a2b 52%, #0a1423 100%);
    color: #f7faff;
    box-shadow: 0 34px 100px -50px rgba(0,0,0,.86);
}

.home-redesign .cta-card::before {
    inset: 0;
    opacity: .5;
    background:
        radial-gradient(circle at 1px 1px, rgba(149,190,230,.20) 0 1px, transparent 1.4px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 80% 35%, #000 0 5rem, transparent 25rem);
    -webkit-mask-image: radial-gradient(circle at 80% 35%, #000 0 5rem, transparent 25rem);
}

.home-redesign .cta-card::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 150px;
    right: -50px;
    top: 52px;
    border: 1px solid rgba(91,205,214,.24);
    border-radius: 50%;
    transform: rotate(-18deg);
    box-shadow:
        0 42px 0 -1px transparent,
        0 42px 0 0 rgba(112,145,255,.12);
}

.home-redesign .cta-card h2,
.home-redesign .cta-card p,
.home-redesign .cta-actions {
    z-index: 1;
}

.home-redesign .cta-card h2 {
    color: #f8fbff;
    letter-spacing: -.025em;
    text-shadow: 0 1px 0 rgba(255,255,255,.03);
}

.home-redesign .cta-card p {
    color: #b8c7d9;
    opacity: 1;
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.home-redesign .cta-card .btn-primary {
    background: linear-gradient(135deg, #5576ee, #22b7c4);
    color: #fff;
}

.home-redesign .cta-card .btn-secondary,
html[data-theme="light"] .home-redesign .cta-card .btn-secondary {
    color: #f7faff !important;
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(255,255,255,.16) !important;
}

.home-redesign .cta-card .btn-secondary:hover,
html[data-theme="light"] .home-redesign .cta-card .btn-secondary:hover {
    color: #fff !important;
    background: rgba(255,255,255,.11) !important;
    border-color: rgba(255,255,255,.26) !important;
}

/* Footer */
.home-redesign .footer {
    background: color-mix(in srgb, var(--bg) 97%, var(--q-blue) 3%);
    border-top-color: var(--q-card-border);
}

/* --- Light theme card refinement ---------------------------------------- */

html[data-theme="light"] .home-redesign .intro .feature-card,
html[data-theme="light"] .home-redesign .teaching .feature-card,
html[data-theme="light"] .home-redesign .feature-row,
html[data-theme="light"] .home-redesign .domain-item,
html[data-theme="light"] .home-redesign .research-flow,
html[data-theme="light"] .home-redesign .roadmap-content {
    background-color: rgba(255,255,255,.88);
    border-color: rgba(29, 55, 92, .075);
    box-shadow: 0 22px 58px -46px rgba(29,55,92,.34);
}

/* --- Motion -------------------------------------------------------------- */

@keyframes qFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0.001deg); }
    50% { transform: translate3d(-10px, 12px, 0) rotate(2deg); }
}

@keyframes qDash {
    to { stroke-dashoffset: -180; }
}

@keyframes qPulseNode {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .quantum-bloch,
    .home-redesign .quantum-bloch .q-line--dash,
    .home-redesign .quantum-bloch .q-node--state,
    .home-redesign .quantum-wave .q-wave--1 {
        animation: none !important;
    }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    .home-redesign .hero {
        padding-top: 116px;
    }

    .quantum-bloch {
        width: 440px;
        height: 440px;
        right: -180px;
        top: 12%;
        opacity: .22;
    }

    .quantum-wave {
        width: 780px;
        left: -220px;
        opacity: .19;
    }

    .quantum-formula--c {
        display: none;
    }
}

@media (max-width: 768px) {
    .home-redesign .hero {
        padding-top: 118px;
    }

    .home-redesign .hero-title {
        letter-spacing: -.02em;
    }

    .quantum-bloch {
        width: 360px;
        height: 360px;
        right: -190px;
        top: 18%;
        opacity: .16;
    }

    .quantum-wave {
        width: 650px;
        height: 180px;
        left: -250px;
        bottom: 13%;
        opacity: .15;
    }

    .quantum-formula {
        opacity: .15;
    }

    .quantum-formula--a {
        left: 5%;
        top: 20%;
    }

    .quantum-formula--b {
        left: 4%;
        bottom: 19%;
    }

    .home-redesign .teaching::before,
    .home-redesign .teaching::after,
    .home-redesign .domains::before,
    .home-redesign .domains::after {
        opacity: .12;
    }

    .home-redesign .feature-row::after {
        left: 50%;
    }

    .home-redesign .cta-card {
        min-height: 0;
        padding: 58px 24px;
        border-radius: 20px;
    }

    .home-redesign .cta-card::after {
        width: 250px;
        height: 100px;
        right: -110px;
        top: 32px;
        opacity: .5;
    }
}

@media (max-width: 480px) {
    .home-redesign .hero {
        padding-top: 108px;
    }

    .quantum-bloch {
        right: -230px;
        top: 15%;
    }

    .home-redesign .stat-label {
        letter-spacing: .02em;
        font-size: .68rem;
    }

    .home-redesign .cta {
        padding: 72px 0;
    }
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v2
   System map + Harness pipeline
   ========================================================================== */

/* --- Three-layer system map --------------------------------------------- */

.home-redesign .system-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
}

.home-redesign .system-layer {
    position: relative;
    min-width: 0;
    padding: 26px 26px 24px;
    overflow: hidden;
    border: 1px solid var(--q-card-border);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.022), transparent 32%),
        var(--bg-light);
    box-shadow: var(--q-card-shadow);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.home-redesign .system-layer:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 78px -50px rgba(47, 92, 177, .5);
}

.home-redesign .system-layer--product:hover { border-color: rgba(36,184,197,.28); }
.home-redesign .system-layer--harness:hover { border-color: rgba(85,118,238,.30); }
.home-redesign .system-layer--model:hover { border-color: rgba(130,107,231,.28); }

.home-redesign .system-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    mask-image: linear-gradient(to bottom, #000, transparent 55%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
}

.home-redesign .system-layer--product::before {
    background: radial-gradient(circle at 86% 6%, rgba(36,184,197,.16), transparent 16rem);
}

.home-redesign .system-layer--harness::before {
    background: radial-gradient(circle at 86% 6%, rgba(85,118,238,.16), transparent 16rem);
}

.home-redesign .system-layer--model::before {
    background: radial-gradient(circle at 86% 6%, rgba(130,107,231,.16), transparent 16rem);
}

.home-redesign .system-layer > * {
    position: relative;
}

.home-redesign .system-layer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.home-redesign .system-layer__index {
    font-family: "Courier New", monospace;
    font-size: .78rem;
    color: var(--text-subtle);
    letter-spacing: .08em;
}

.home-redesign .system-layer__eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--text-subtle);
}

.home-redesign .system-layer--product .system-layer__eyebrow { color: var(--q-cyan); }
.home-redesign .system-layer--harness .system-layer__eyebrow { color: var(--q-blue-strong); }
.home-redesign .system-layer--model .system-layer__eyebrow { color: var(--q-violet); }

.home-redesign .system-layer__visual {
    position: relative;
    height: 122px;
    margin: 4px 0 22px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(145,166,196,.08);
}

html[data-theme="light"] .home-redesign .system-layer__visual {
    background: rgba(245,248,252,.82);
    border-color: rgba(26,52,87,.055);
}

/* Product wave */
.home-redesign .system-layer__visual--wave svg {
    position: absolute;
    inset: 8px -12px 0;
    width: calc(100% + 24px);
    height: 112px;
}

.home-redesign .system-layer__visual--wave path {
    fill: none;
    stroke: var(--q-cyan);
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
    opacity: .75;
    stroke-dasharray: 6 7;
    animation: systemWaveDash 20s linear infinite;
}

.home-redesign .system-layer__visual--wave path.soft {
    stroke: var(--q-blue);
    stroke-width: 1;
    opacity: .34;
    stroke-dasharray: none;
}

.home-redesign .system-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 6px rgba(36,184,197,.08);
}

.home-redesign .system-dot--1 { left: 20%; top: 31%; }
.home-redesign .system-dot--2 { left: 50%; top: 70%; background: var(--q-blue); box-shadow: 0 0 0 6px rgba(85,118,238,.08); }
.home-redesign .system-dot--3 { right: 13%; top: 48%; }

/* Harness DAG */
.home-redesign .system-layer__visual--dag {
    background:
        radial-gradient(circle at 1px 1px, rgba(109,143,235,.20) 0 1px, transparent 1.4px);
    background-size: 24px 24px;
}

.home-redesign .dag-node {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--q-blue);
    border: 3px solid color-mix(in srgb, var(--bg-light) 88%, transparent);
    box-shadow: 0 0 0 5px rgba(85,118,238,.08);
}

.home-redesign .dag-node--a { left: 12%; top: 50%; }
.home-redesign .dag-node--b { left: 38%; top: 25%; }
.home-redesign .dag-node--c { left: 38%; top: 72%; }
.home-redesign .dag-node--d { right: 28%; top: 49%; background: var(--q-cyan); box-shadow: 0 0 0 5px rgba(36,184,197,.08); }
.home-redesign .dag-node--e { right: 9%; top: 49%; background: var(--q-emerald); box-shadow: 0 0 0 5px rgba(57,185,138,.08); }

.home-redesign .dag-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(85,118,238,.2), rgba(36,184,197,.55));
    transform-origin: left center;
}

.home-redesign .dag-line--1 { left: 16%; top: 53%; width: 25%; transform: rotate(-25deg); }
.home-redesign .dag-line--2 { left: 16%; top: 55%; width: 25%; transform: rotate(25deg); }
.home-redesign .dag-line--3 { left: 42%; top: 31%; width: 35%; transform: rotate(23deg); }
.home-redesign .dag-line--4 { left: 42%; top: 76%; width: 35%; transform: rotate(-23deg); }

/* Model Bloch mini visual */
.home-redesign .system-layer__visual--bloch {
    display: grid;
    place-items: center;
}

.home-redesign .bloch-ring,
.home-redesign .bloch-axis,
.home-redesign .bloch-vector,
.home-redesign .bloch-center,
.home-redesign .bloch-state {
    position: absolute;
}

.home-redesign .bloch-ring {
    width: 88px;
    height: 88px;
    border: 1px solid rgba(130,107,231,.58);
    border-radius: 50%;
}

.home-redesign .bloch-ring--x {
    transform: scaleY(.38);
}

.home-redesign .bloch-ring--y {
    transform: scaleX(.38);
}

.home-redesign .bloch-axis {
    width: 1px;
    height: 103px;
    background: linear-gradient(transparent, rgba(117,98,212,.48), transparent);
}

.home-redesign .bloch-vector {
    width: 2px;
    height: 53px;
    background: linear-gradient(var(--q-cyan), var(--q-violet));
    transform-origin: 50% 100%;
    transform: translate(18px, -19px) rotate(37deg);
}

.home-redesign .bloch-center {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-violet);
}

.home-redesign .bloch-state {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--q-cyan);
    transform: translate(37px, -40px);
    box-shadow: 0 0 12px rgba(36,184,197,.75);
}

.home-redesign .system-layer h3 {
    margin-bottom: 10px;
    font-size: 1.22rem;
    letter-spacing: -.015em;
}

.home-redesign .system-layer p {
    min-height: 112px;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.75;
}

.home-redesign .system-layer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.home-redesign .system-layer__meta span {
    padding: 5px 8px;
    font-family: "Courier New", monospace;
    font-size: .67rem;
    color: var(--text-subtle);
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: rgba(255,255,255,.02);
}

.home-redesign .system-layer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: .88rem;
    font-weight: 650;
    color: var(--text);
}

.home-redesign .system-layer__link span {
    transition: transform .2s ease;
}

.home-redesign .system-layer__link:hover span {
    transform: translateX(4px);
}

.home-redesign .system-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
}

.home-redesign .system-bridge::before,
.home-redesign .system-bridge::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--q-line), var(--q-line-strong));
}

.home-redesign .system-bridge::after {
    background: linear-gradient(90deg, var(--q-line-strong), var(--q-line));
}

.home-redesign .system-bridge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 5px rgba(36,184,197,.065);
}

.home-redesign .system-bridge span {
    display: none;
}

/* --- Harness pipeline --------------------------------------------------- */

.home-redesign .harness-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
    gap: 28px;
    align-items: stretch;
}

.home-redesign .harness-stage__visual {
    position: relative;
    min-height: 610px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(86,121,236,.16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 12%, rgba(85,118,238,.13), transparent 18rem),
        radial-gradient(circle at 20% 90%, rgba(36,184,197,.075), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 97%, var(--q-blue) 3%);
    box-shadow: 0 34px 90px -56px rgba(32,72,155,.62);
}

.home-redesign .harness-stage__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(101,132,214,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101,132,214,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000 0, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0, transparent 76%);
}

.home-redesign .harness-stage__visual > * {
    position: relative;
}

.home-redesign .harness-visual__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--q-card-border);
}

.home-redesign .harness-visual__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Courier New", monospace;
    font-size: .76rem;
    color: var(--text-muted);
}

.home-redesign .harness-visual__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-emerald);
    box-shadow: 0 0 0 5px rgba(57,185,138,.08);
}

.home-redesign .harness-visual__version {
    font-family: "Courier New", monospace;
    font-size: .72rem;
    color: var(--text-subtle);
}

.home-redesign .harness-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto;
}

.home-redesign .harness-track__node {
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--q-card-border);
    border-radius: 15px;
    background: rgba(255,255,255,.022);
    backdrop-filter: blur(6px);
}

html[data-theme="light"] .home-redesign .harness-track__node {
    background: rgba(255,255,255,.72);
}

.home-redesign .track-index {
    grid-row: 1 / 3;
    align-self: center;
    font-family: "Courier New", monospace;
    font-size: .8rem;
    color: var(--q-blue-strong);
}

.home-redesign .harness-track__node strong {
    font-size: .94rem;
    letter-spacing: -.01em;
}

.home-redesign .harness-track__node small {
    margin-top: 3px;
    color: var(--text-subtle);
    font-size: .74rem;
}

.home-redesign .harness-track__node::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--q-blue);
    opacity: .8;
}

.home-redesign .harness-track__node--evidence::after { background: var(--q-cyan); }
.home-redesign .harness-track__node--judge::after { background: var(--q-violet); }
.home-redesign .harness-track__node--repair::after { background: var(--q-emerald); }

.home-redesign .track-connector {
    width: 1px;
    height: 22px;
    margin: 0 auto;
    background: var(--q-line-strong);
    position: relative;
}

.home-redesign .track-connector span {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: var(--q-cyan);
    transform: translate(-50%, -50%);
    animation: harnessSignal 2.4s ease-in-out infinite;
}

.home-redesign .evidence-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--q-card-border);
}

.home-redesign .evidence-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    font-family: "Courier New", monospace;
    font-size: .68rem;
    color: var(--text-subtle);
    border-radius: 7px;
    border: 1px solid var(--q-card-border);
    background: rgba(255,255,255,.025);
}

.home-redesign .evidence-strip span i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-blue);
}

.home-redesign .evidence-strip .is-verified {
    color: var(--q-emerald);
    border-color: rgba(57,185,138,.18);
    background: rgba(57,185,138,.06);
}

.home-redesign .evidence-strip .is-verified i {
    background: var(--q-emerald);
}

.home-redesign .harness-stage__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-redesign .harness-capability {
    flex: 1;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 15px;
    align-items: start;
    padding: 19px 20px;
    border: 1px solid var(--q-card-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--q-blue) 2%);
    transition: transform .25s ease, border-color .25s ease;
}

.home-redesign .harness-capability:hover {
    transform: translateX(4px);
    border-color: rgba(85,118,238,.24);
}

.home-redesign .harness-capability__num {
    padding-top: 2px;
    font-family: "Courier New", monospace;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--q-blue-strong);
}

.home-redesign .harness-capability h3 {
    margin-bottom: 6px;
    font-size: 1rem;
}

.home-redesign .harness-capability p {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.63;
}

@keyframes systemWaveDash {
    to { stroke-dashoffset: -150; }
}

@keyframes harnessSignal {
    0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(.75); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .system-layer__visual--wave path,
    .home-redesign .track-connector span {
        animation: none !important;
    }
}

@media (max-width: 1060px) {
    .home-redesign .system-map {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-redesign .system-bridge {
        height: 42px;
        min-height: 42px;
        flex-direction: column;
    }

    .home-redesign .system-bridge::before,
    .home-redesign .system-bridge::after {
        width: 1px;
        height: auto;
        flex: 1;
        background: linear-gradient(var(--q-line), var(--q-line-strong));
    }

    .home-redesign .system-layer p {
        min-height: auto;
    }

    .home-redesign .harness-stage {
        grid-template-columns: 1fr;
    }

    .home-redesign .harness-stage__visual {
        min-height: auto;
    }

    .home-redesign .harness-stage__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-redesign .harness-capability:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .home-redesign .system-layer {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .home-redesign .system-layer__visual {
        height: 110px;
    }

    .home-redesign .harness-stage__visual {
        padding: 22px 18px;
        border-radius: 19px;
    }

    .home-redesign .harness-track__node {
        grid-template-columns: 40px 1fr;
        padding: 15px 16px;
    }

    .home-redesign .harness-stage__features {
        grid-template-columns: 1fr;
    }

    .home-redesign .harness-capability:last-child {
        grid-column: auto;
    }
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v3
   Motion system
   ========================================================================== */

/* A fixed, extremely subtle field allows the whole page to feel connected as
   the active section changes. It is intentionally low-opacity. */
.home-redesign::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background:
        radial-gradient(circle at 78% 24%, rgba(85,118,238,.13), transparent 24rem),
        radial-gradient(circle at 16% 74%, rgba(36,184,197,.08), transparent 26rem);
    transition: background 1.2s ease, opacity 1.2s ease;
}

.home-redesign[data-home-zone="product"]::before {
    background:
        radial-gradient(circle at 18% 52%, rgba(36,184,197,.11), transparent 28rem),
        radial-gradient(circle at 82% 28%, rgba(85,118,238,.06), transparent 25rem);
}

.home-redesign[data-home-zone="harness"]::before {
    background:
        radial-gradient(circle at 76% 34%, rgba(85,118,238,.12), transparent 27rem),
        radial-gradient(circle at 28% 76%, rgba(57,185,138,.05), transparent 22rem);
}

.home-redesign[data-home-zone="model"]::before {
    background:
        radial-gradient(circle at 80% 40%, rgba(130,107,231,.12), transparent 28rem),
        radial-gradient(circle at 18% 70%, rgba(36,184,197,.05), transparent 24rem);
}

.home-redesign[data-home-zone="cta"]::before {
    opacity: .12;
    background:
        radial-gradient(circle at 50% 70%, rgba(85,118,238,.13), transparent 30rem);
}

/* --- Hero motion -------------------------------------------------------- */

.home-redesign .quantum-bloch {
    --hero-parallax-x: 0px;
    --hero-parallax-y: 0px;
    --hero-tilt-x: 0deg;
    --hero-tilt-y: 0deg;
    transform:
        perspective(900px)
        translate3d(var(--hero-parallax-x), var(--hero-parallax-y), 0)
        rotateX(var(--hero-tilt-x))
        rotateY(var(--hero-tilt-y));
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    animation: none;
    transform-style: preserve-3d;
    will-change: transform;
}

.home-redesign .quantum-bloch .q-line,
.home-redesign .quantum-bloch .q-axis,
.home-redesign .quantum-bloch .q-state,
.home-redesign .quantum-bloch .q-node {
    transform-box: view-box;
    transform-origin: 260px 260px;
}

.home-redesign .quantum-bloch .q-line--main {
    animation: heroOrbitA 28s linear infinite;
}

.home-redesign .quantum-bloch ellipse.q-line:first-of-type {
    animation: heroOrbitB 22s linear infinite reverse;
}

.home-redesign .quantum-bloch ellipse.q-line:nth-of-type(2) {
    animation: heroOrbitC 31s linear infinite;
}

.home-redesign .quantum-bloch .q-line--dash {
    animation: qDash 18s linear infinite, heroDashDrift 26s ease-in-out infinite;
}

.home-redesign .quantum-bloch .q-state,
.home-redesign .quantum-bloch .q-node--state {
    animation: heroPrecess 11s cubic-bezier(.45,.04,.55,.96) infinite;
}

.home-redesign .quantum-bloch .q-node--state {
    filter: drop-shadow(0 0 9px rgba(36,184,197,.9));
}

.home-redesign .quantum-ambient::before {
    animation: probabilityBreathe 8s ease-in-out infinite;
    transform-origin: center;
}

.home-redesign .quantum-wave .q-wave--1 {
    animation:
        qDash 24s linear infinite reverse,
        waveOscillate 7s ease-in-out infinite;
    transform-origin: center;
}

.home-redesign .quantum-wave .q-wave--2 {
    animation: waveOscillateSoft 9s ease-in-out infinite reverse;
    transform-origin: center;
}

.home-redesign .quantum-formula {
    animation: formulaDrift 10s ease-in-out infinite;
}

.home-redesign .quantum-formula--b { animation-delay: -3s; }
.home-redesign .quantum-formula--c { animation-delay: -6s; }

@keyframes heroOrbitA {
    0%   { transform: rotate(0deg) scaleX(1); }
    50%  { transform: rotate(180deg) scaleX(.985); }
    100% { transform: rotate(360deg) scaleX(1); }
}

@keyframes heroOrbitB {
    0%   { transform: rotate(0deg) scaleY(1); }
    50%  { transform: rotate(180deg) scaleY(.94); }
    100% { transform: rotate(360deg) scaleY(1); }
}

@keyframes heroOrbitC {
    0%   { transform: rotate(0deg) scaleX(1); }
    50%  { transform: rotate(-180deg) scaleX(.95); }
    100% { transform: rotate(-360deg) scaleX(1); }
}

@keyframes heroDashDrift {
    0%,100% { opacity: .46; }
    50% { opacity: .88; }
}

@keyframes heroPrecess {
    0%   { transform: rotate(-24deg); }
    42%  { transform: rotate(34deg); }
    70%  { transform: rotate(12deg); }
    100% { transform: rotate(-24deg); }
}

@keyframes probabilityBreathe {
    0%, 100% { opacity: .34; transform: scale(1); }
    50% { opacity: .62; transform: scale(1.015); }
}

@keyframes waveOscillate {
    0%,100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-6px) scaleY(1.12); }
}

@keyframes waveOscillateSoft {
    0%,100% { transform: translateY(3px) scaleY(.94); }
    50% { transform: translateY(-4px) scaleY(1.06); }
}

@keyframes formulaDrift {
    0%,100% { transform: translate3d(0,0,0); opacity: .18; }
    50% { transform: translate3d(0,-7px,0); opacity: .3; }
}

/* --- Three-layer system: motion with meaning ---------------------------- */

.home-redesign .system-map:not(.is-motion-active) .system-layer__visual *,
.home-redesign .system-map:not(.is-motion-active) .system-bridge i {
    animation-play-state: paused !important;
}

/* Product: interference visualization */
.home-redesign .interference-screen {
    position: absolute;
    z-index: 0;
    right: 2px;
    top: 12px;
    bottom: 12px;
    width: 42%;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    opacity: .18;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

.home-redesign .interference-screen i {
    width: 7px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--q-cyan) 18%,
        var(--q-blue) 50%,
        var(--q-cyan) 82%,
        transparent
    );
    transform-origin: center;
    animation: interferencePulse 4.8s ease-in-out infinite;
}

.home-redesign .interference-screen i:nth-child(2) { animation-delay: -.45s; }
.home-redesign .interference-screen i:nth-child(3) { animation-delay: -.9s; }
.home-redesign .interference-screen i:nth-child(4) { animation-delay: -1.35s; }
.home-redesign .interference-screen i:nth-child(5) { animation-delay: -1.8s; }
.home-redesign .interference-screen i:nth-child(6) { animation-delay: -2.25s; }
.home-redesign .interference-screen i:nth-child(7) { animation-delay: -2.7s; }

.home-redesign .system-layer__visual--wave svg {
    z-index: 1;
}

.home-redesign .system-layer__visual--wave .system-dot {
    z-index: 2;
}

@keyframes interferencePulse {
    0%,100% { transform: scaleY(.26); opacity: .26; }
    30% { transform: scaleY(.9); opacity: .58; }
    55% { transform: scaleY(.45); opacity: .34; }
    78% { transform: scaleY(1); opacity: .7; }
}

/* Harness card: signal actually travels through DAG edges */
.home-redesign .dag-line {
    overflow: visible;
}

.home-redesign .dag-line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 8px rgba(36,184,197,.75);
    transform: translate(-50%, -50%);
    animation: dagSignal 4.8s linear infinite;
}

.home-redesign .dag-line--2::after { animation-delay: -.6s; }
.home-redesign .dag-line--3::after { animation-delay: -1.7s; }
.home-redesign .dag-line--4::after { animation-delay: -2.4s; }

.home-redesign .dag-node {
    animation: dagNodeBreath 4.8s ease-in-out infinite;
}

.home-redesign .dag-node--b { animation-delay: -.8s; }
.home-redesign .dag-node--c { animation-delay: -1.1s; }
.home-redesign .dag-node--d { animation-delay: -2.1s; }
.home-redesign .dag-node--e { animation-delay: -3.1s; }

@keyframes dagSignal {
    0% { left: 0%; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes dagNodeBreath {
    0%,100% { transform: scale(.9); }
    45% { transform: scale(1.08); }
}

/* Model card: the sphere itself now moves */
.home-redesign .system-map.is-motion-active .bloch-ring--x {
    animation: miniBlochX 8s linear infinite;
}

.home-redesign .system-map.is-motion-active .bloch-ring--y {
    animation: miniBlochY 10s linear infinite reverse;
}

.home-redesign .system-map.is-motion-active .bloch-vector,
.home-redesign .system-map.is-motion-active .bloch-state {
    animation: miniStatePrecess 6.5s ease-in-out infinite;
}

@keyframes miniBlochX {
    0% { transform: rotate(0deg) scaleY(.38); }
    100% { transform: rotate(360deg) scaleY(.38); }
}

@keyframes miniBlochY {
    0% { transform: rotate(0deg) scaleX(.38); }
    100% { transform: rotate(-360deg) scaleX(.38); }
}

@keyframes miniStatePrecess {
    0%,100% { rotate: -14deg; }
    50% { rotate: 26deg; }
}

/* Signal flow between Product → Harness → Model */
.home-redesign .system-map.is-motion-active .system-bridge i {
    animation: bridgeSignal 2.8s ease-in-out infinite;
}

.home-redesign .system-map.is-motion-active .system-bridge:nth-of-type(2) i {
    animation-delay: 1.25s;
}

@keyframes bridgeSignal {
    0%,100% { opacity: .25; transform: scale(.72); box-shadow: 0 0 0 4px rgba(36,184,197,.04); }
    50% { opacity: 1; transform: scale(1.16); box-shadow: 0 0 0 8px rgba(36,184,197,.08); }
}

/* --- Harness main pipeline: staged traversal ---------------------------- */

.home-redesign .harness-stage:not(.is-motion-active) .track-connector span,
.home-redesign .harness-stage:not(.is-motion-active) .harness-track__node::after {
    animation-play-state: paused !important;
}

.home-redesign .harness-stage.is-motion-active .track-connector span {
    top: -2px;
    animation: pipelineTravel 4.8s linear infinite;
}

.home-redesign .harness-stage.is-motion-active .track-connector:nth-child(2) span { animation-delay: 0s; }
.home-redesign .harness-stage.is-motion-active .track-connector:nth-child(4) span { animation-delay: 1.05s; }
.home-redesign .harness-stage.is-motion-active .track-connector:nth-child(6) span { animation-delay: 2.1s; }
.home-redesign .harness-stage.is-motion-active .track-connector:nth-child(8) span { animation-delay: 3.15s; }

.home-redesign .harness-stage.is-motion-active .harness-track__node::after {
    animation: pipelineNode 4.8s ease-in-out infinite;
}

.home-redesign .harness-stage.is-motion-active .harness-track__node--route::after    { animation-delay: -.15s; }
.home-redesign .harness-stage.is-motion-active .harness-track__node--solve::after    { animation-delay: .9s; }
.home-redesign .harness-stage.is-motion-active .harness-track__node--evidence::after { animation-delay: 1.95s; }
.home-redesign .harness-stage.is-motion-active .harness-track__node--judge::after    { animation-delay: 3s; }
.home-redesign .harness-stage.is-motion-active .harness-track__node--repair::after   { animation-delay: 4.05s; }

@keyframes pipelineTravel {
    0% { top: -2px; opacity: 0; }
    12% { opacity: 1; }
    74% { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

@keyframes pipelineNode {
    0%,70%,100% { transform: scale(.78); opacity: .45; }
    78%,88% { transform: scale(1.22); opacity: 1; }
}

/* Evidence tags reveal in a short sequence once Harness is active */
.home-redesign .harness-stage .evidence-strip span {
    opacity: .42;
    transform: translateY(3px);
    transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}

.home-redesign .harness-stage.is-motion-active .evidence-strip span {
    opacity: 1;
    transform: translateY(0);
}

.home-redesign .harness-stage.is-motion-active .evidence-strip span:nth-child(1) { transition-delay: .55s; }
.home-redesign .harness-stage.is-motion-active .evidence-strip span:nth-child(2) { transition-delay: .8s; }
.home-redesign .harness-stage.is-motion-active .evidence-strip span:nth-child(3) { transition-delay: 1.05s; }
.home-redesign .harness-stage.is-motion-active .evidence-strip span:nth-child(4) { transition-delay: 1.3s; }

/* --- Model section ambient rotation ------------------------------------ */

.home-redesign .domains::before {
    transform-origin: center;
    animation: modelOrbitSlow 24s linear infinite;
}

.home-redesign .domains::after {
    transform-origin: center;
    animation: modelOrbitFast 16s linear infinite reverse;
}

@keyframes modelOrbitSlow {
    to { transform: rotate(360deg); }
}

@keyframes modelOrbitFast {
    from { transform: rotate(34deg); }
    to { transform: rotate(-326deg); }
}

/* --- CTA orbit ---------------------------------------------------------- */

.home-redesign .cta-orbit {
    position: absolute;
    right: 4%;
    top: 50%;
    width: 270px;
    height: 190px;
    transform: translateY(-50%);
    opacity: .54;
    pointer-events: none;
}

.home-redesign .cta-orbit__ring,
.home-redesign .cta-orbit__dot {
    position: absolute;
    left: 50%;
    top: 50%;
}

.home-redesign .cta-orbit__ring {
    width: 220px;
    height: 86px;
    margin-left: -110px;
    margin-top: -43px;
    border: 1px solid rgba(112,145,255,.34);
    border-radius: 50%;
}

.home-redesign .cta-orbit__ring--a {
    animation: ctaOrbitA 15s linear infinite;
}

.home-redesign .cta-orbit__ring--b {
    transform: rotate(63deg) scaleX(.72);
    border-color: rgba(91,205,214,.30);
    animation: ctaOrbitB 19s linear infinite reverse;
}

.home-redesign .cta-orbit__dot {
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: #5bd0d8;
    box-shadow: 0 0 16px rgba(91,208,216,.78);
    transform-origin: -88px 0;
    animation: ctaElectron 8s linear infinite;
}

@keyframes ctaOrbitA {
    to { transform: rotate(360deg); }
}

@keyframes ctaOrbitB {
    from { transform: rotate(63deg) scaleX(.72); }
    to { transform: rotate(-297deg) scaleX(.72); }
}

@keyframes ctaElectron {
    from { transform: translateX(88px) rotate(0deg); }
    to { transform: translateX(88px) rotate(360deg); }
}

/* Existing decorative CTA ellipse is softened because the new orbit now
   carries the motion. */
.home-redesign .cta-card::after {
    opacity: .28;
}

/* --- Motion accessibility / mobile ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .home-redesign .quantum-bloch *,
    .home-redesign .quantum-ambient::before,
    .home-redesign .quantum-wave *,
    .home-redesign .quantum-formula,
    .home-redesign .interference-screen i,
    .home-redesign .dag-line::after,
    .home-redesign .dag-node,
    .home-redesign .bloch-ring,
    .home-redesign .bloch-vector,
    .home-redesign .bloch-state,
    .home-redesign .track-connector span,
    .home-redesign .harness-track__node::after,
    .home-redesign .domains::before,
    .home-redesign .domains::after,
    .home-redesign .cta-orbit * {
        animation: none !important;
    }

    .home-redesign .quantum-bloch {
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 900px) {
    .home-redesign .quantum-bloch {
        --hero-parallax-x: 0px !important;
        --hero-parallax-y: 0px !important;
        --hero-tilt-x: 0deg !important;
        --hero-tilt-y: 0deg !important;
    }

    .home-redesign .cta-orbit {
        right: -50px;
        width: 220px;
        opacity: .36;
    }
}

@media (max-width: 680px) {
    .home-redesign .cta-orbit {
        width: 160px;
        height: 130px;
        right: -62px;
        top: 34%;
        opacity: .26;
    }

    .home-redesign .cta-orbit__ring {
        width: 150px;
        height: 60px;
        margin-left: -75px;
        margin-top: -30px;
    }

    .home-redesign .cta-orbit__dot {
        display: none;
    }
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v4
   Multi-layer quantum ambience + top-to-bottom evolution story
   ========================================================================== */

/* --- Hero: turn one isolated sphere into a multi-layer quantum field ----- */

.home-redesign .probability-cloud {
    position: absolute;
    inset: 3% 2% 7%;
    pointer-events: none;
}

.home-redesign .probability-cloud i {
    position: absolute;
    left: var(--px);
    top: var(--py);
    width: calc(4px * var(--ps));
    height: calc(4px * var(--ps));
    border-radius: 50%;
    opacity: var(--po);
    background: var(--q-cyan);
    box-shadow:
        0 0 0 1px rgba(36,184,197,.08),
        0 0 14px rgba(36,184,197,.16);
    animation: probabilityParticle 8.5s ease-in-out infinite;
    animation-delay: var(--pd);
}

.home-redesign .probability-cloud i:nth-child(3n) {
    background: var(--q-blue-strong);
    box-shadow:
        0 0 0 1px rgba(85,118,238,.08),
        0 0 14px rgba(85,118,238,.14);
}

.home-redesign .probability-cloud i:nth-child(5n) {
    background: var(--q-violet);
}

@keyframes probabilityParticle {
    0%,100% {
        transform: translate3d(0,0,0) scale(.72);
        filter: blur(.1px);
    }
    35% {
        transform: translate3d(4px,-7px,0) scale(1.2);
        opacity: calc(var(--po) + .12);
    }
    68% {
        transform: translate3d(-3px,4px,0) scale(.9);
    }
}

.home-redesign .quantum-ripples {
    position: absolute;
    width: min(760px, 58vw);
    height: 310px;
    left: -5%;
    top: 42%;
    color: var(--q-cyan);
    opacity: .12;
    transform: rotate(-9deg);
}

.home-redesign .quantum-ripples ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation: rippleExpand 9s ease-in-out infinite;
}

.home-redesign .quantum-ripples ellipse:nth-child(2) {
    animation-delay: -3s;
    color: var(--q-blue);
}

.home-redesign .quantum-ripples ellipse:nth-child(3) {
    animation-delay: -6s;
}

@keyframes rippleExpand {
    0%,100% { transform: scale(.88); opacity: .15; }
    45% { transform: scale(1.08); opacity: .85; }
    70% { transform: scale(1.16); opacity: .2; }
}

.home-redesign .quantum-wavepacket {
    position: absolute;
    right: -7%;
    bottom: 15%;
    width: min(820px, 62vw);
    height: 180px;
    color: var(--q-violet);
    opacity: .12;
    transform: rotate(3deg);
}

.home-redesign .quantum-wavepacket path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-dasharray: 5 8;
    vector-effect: non-scaling-stroke;
    animation: packetFlow 15s linear infinite, packetBreath 7s ease-in-out infinite;
    transform-origin: center;
}

@keyframes packetFlow {
    to { stroke-dashoffset: -180; }
}

@keyframes packetBreath {
    0%,100% { transform: scaleY(.82); opacity: .45; }
    50% { transform: scaleY(1.2); opacity: 1; }
}

.home-redesign .quantum-notation {
    position: absolute;
    font-family: "Times New Roman", Georgia, serif;
    color: var(--text-subtle);
    pointer-events: none;
    opacity: .13;
    animation: notationFloat 12s ease-in-out infinite;
}

.home-redesign .quantum-notation--uncertainty {
    right: 7%;
    top: 66%;
    font-size: clamp(.78rem, 1.05vw, 1rem);
}

.home-redesign .quantum-notation--expectation {
    left: 30%;
    top: 17%;
    font-size: clamp(.76rem, 1vw, .96rem);
    animation-delay: -5s;
}

@keyframes notationFloat {
    0%,100% { transform: translate3d(0,0,0); opacity: .09; }
    50% { transform: translate3d(0,-8px,0); opacity: .18; }
}

/* Make the Hero sphere part of the field rather than the only object. */
.home-redesign .quantum-bloch {
    opacity: .28;
}

html[data-theme="light"] .home-redesign .quantum-bloch {
    opacity: .22;
}

html[data-theme="light"] .home-redesign .quantum-ripples,
html[data-theme="light"] .home-redesign .quantum-wavepacket {
    opacity: .09;
}

html[data-theme="light"] .home-redesign .quantum-notation {
    opacity: .1;
}

/* Slightly richer section-local atmospheres. */
.home-redesign .teaching {
    background:
        radial-gradient(ellipse at 12% 28%, rgba(36,184,197,.09), transparent 27rem),
        radial-gradient(ellipse at 85% 76%, rgba(85,118,238,.055), transparent 24rem),
        linear-gradient(180deg, var(--bg), rgba(36,184,197,.03) 52%, var(--bg));
}

.home-redesign .research {
    background:
        linear-gradient(90deg, transparent 0 49.9%, rgba(85,118,238,.035) 50%, transparent 50.1%),
        radial-gradient(circle at 82% 18%, rgba(85,118,238,.085), transparent 26rem),
        radial-gradient(circle at 12% 78%, rgba(57,185,138,.038), transparent 20rem),
        var(--bg);
}

.home-redesign .research::after {
    content: "";
    position: absolute;
    inset: 16% 0 8%;
    pointer-events: none;
    opacity: .09;
    background:
        linear-gradient(115deg,
            transparent 0 15%,
            var(--q-blue) 15.2% 15.35%,
            transparent 15.55% 35%,
            var(--q-cyan) 35.2% 35.35%,
            transparent 35.55% 68%,
            var(--q-violet) 68.2% 68.35%,
            transparent 68.55%);
    animation: harnessScanField 10s ease-in-out infinite;
}

@keyframes harnessScanField {
    0%,100% { transform: translateX(-1.5%); opacity: .05; }
    50% { transform: translateX(1.5%); opacity: .13; }
}

.home-redesign .domains {
    background:
        radial-gradient(circle at 86% 35%, rgba(130,107,231,.09), transparent 26rem),
        radial-gradient(circle at 14% 72%, rgba(36,184,197,.035), transparent 24rem),
        linear-gradient(180deg, var(--bg), rgba(130,107,231,.026), var(--bg));
}

/* --- Evolution path: the page now develops from top to bottom ----------- */

.home-redesign .roadmap-timeline--evolution {
    max-width: 900px;
    padding-bottom: 10px;
}

.home-redesign .roadmap-timeline--evolution::before {
    left: 24px;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            rgba(128,148,184,.2) 0%,
            var(--q-violet) 22%,
            var(--q-blue) 48%,
            var(--q-cyan) 72%,
            var(--q-emerald) 100%
        );
    opacity: .7;
    transform-origin: top;
    animation: evolutionLineGlow 5.5s ease-in-out infinite;
}

@keyframes evolutionLineGlow {
    0%,100% { filter: drop-shadow(0 0 0 transparent); opacity: .5; }
    50% { filter: drop-shadow(0 0 6px rgba(36,184,197,.28)); opacity: .85; }
}

.home-redesign .evolution-step {
    gap: 34px;
    margin-bottom: 42px;
}

.home-redesign .evolution-step .roadmap-marker {
    width: 49px;
    height: 49px;
    margin-left: 0;
    border-width: 1px;
    background: var(--bg-light);
    border-color: var(--q-card-border);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--bg) 84%, transparent);
}

.home-redesign .evolution-step .roadmap-marker::after {
    content: attr(data-step) !important;
    color: var(--text-subtle) !important;
    font-family: "Courier New", monospace;
    font-size: .69rem;
    font-weight: 700;
}

.home-redesign .evolution-step--history .roadmap-marker {
    border-color: rgba(128,148,184,.24);
}

.home-redesign .evolution-step--model .roadmap-marker {
    border-color: rgba(130,107,231,.35);
    box-shadow: 0 0 0 7px rgba(130,107,231,.045);
}

.home-redesign .evolution-step--harness .roadmap-marker {
    border-color: rgba(85,118,238,.38);
    box-shadow: 0 0 0 7px rgba(85,118,238,.05);
}

.home-redesign .evolution-step--product .roadmap-marker {
    border-color: rgba(36,184,197,.38);
    box-shadow: 0 0 0 7px rgba(36,184,197,.05);
}

.home-redesign .evolution-step .roadmap-content {
    position: relative;
    overflow: hidden;
    padding: 26px 28px 24px;
}

.home-redesign .evolution-step .roadmap-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--text-subtle);
    opacity: .22;
}

.home-redesign .evolution-step--model .roadmap-content::before { background: var(--q-violet); opacity: .72; }
.home-redesign .evolution-step--harness .roadmap-content::before { background: var(--q-blue); opacity: .72; }
.home-redesign .evolution-step--product .roadmap-content::before { background: var(--q-cyan); opacity: .72; }

.home-redesign .evolution-caption {
    display: block;
    margin-top: 14px;
    font-size: .76rem;
    color: var(--text-subtle);
    letter-spacing: .015em;
}

.home-redesign .roadmap-convergence {
    position: relative;
    margin-left: 82px;
    margin-top: 10px;
    padding-top: 26px;
}

.home-redesign .roadmap-convergence::before {
    content: "";
    position: absolute;
    left: -58px;
    top: -10px;
    width: 58px;
    height: 1px;
    background: linear-gradient(90deg, var(--q-emerald), rgba(57,185,138,.16));
}

.home-redesign .roadmap-convergence__body {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 22px;
    border: 1px solid rgba(57,185,138,.18);
    background:
        radial-gradient(circle at 87% 12%, rgba(57,185,138,.09), transparent 16rem),
        radial-gradient(circle at 15% 90%, rgba(36,184,197,.06), transparent 18rem),
        color-mix(in srgb, var(--bg-light) 98%, var(--q-emerald) 2%);
    box-shadow: 0 30px 84px -60px rgba(27,110,92,.58);
}

.home-redesign .roadmap-convergence__body::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -50px;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(57,185,138,.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(36,184,197,.025),
        0 0 0 58px rgba(85,118,238,.02);
    animation: convergenceOrbit 16s linear infinite;
}

@keyframes convergenceOrbit {
    to { transform: rotate(360deg); }
}

.home-redesign .roadmap-convergence__body h3 {
    margin: 8px 0 10px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -.02em;
}

.home-redesign .roadmap-convergence__body p {
    max-width: 700px;
    color: var(--text-muted);
    line-height: 1.75;
}

.home-redesign .roadmap-convergence__layers {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.home-redesign .roadmap-convergence__layers span {
    padding: 7px 10px;
    border: 1px solid var(--q-card-border);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    font-family: "Courier New", monospace;
    font-size: .72rem;
    color: var(--text);
}

.home-redesign .roadmap-convergence__layers i {
    color: var(--q-emerald);
    font-style: normal;
    font-weight: 700;
}

.home-redesign .roadmap-convergence__signal {
    position: absolute;
    left: -64px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.home-redesign .roadmap-convergence__signal span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-emerald);
    animation: convergenceSignal 1.8s ease-in-out infinite;
}

.home-redesign .roadmap-convergence__signal span:nth-child(2) { animation-delay: .22s; }
.home-redesign .roadmap-convergence__signal span:nth-child(3) { animation-delay: .44s; }

@keyframes convergenceSignal {
    0%,100% { opacity: .24; transform: translateY(-2px) scale(.78); }
    50% { opacity: 1; transform: translateY(2px) scale(1.12); }
}

/* Light mode keeps the atmosphere subtle rather than washed-out. */
html[data-theme="light"] .home-redesign .roadmap-convergence__body {
    background:
        radial-gradient(circle at 87% 12%, rgba(20,129,94,.06), transparent 16rem),
        radial-gradient(circle at 15% 90%, rgba(14,142,156,.045), transparent 18rem),
        rgba(255,255,255,.9);
    border-color: rgba(20,129,94,.14);
}

/* Mobile: preserve variety, reduce clutter. */
@media (max-width: 900px) {
    .home-redesign .quantum-ripples {
        width: 720px;
        left: -260px;
        opacity: .08;
    }

    .home-redesign .quantum-wavepacket {
        width: 640px;
        right: -280px;
        opacity: .08;
    }

    .home-redesign .quantum-notation--expectation {
        display: none;
    }
}

@media (max-width: 680px) {
    .home-redesign .probability-cloud {
        opacity: .55;
    }

    .home-redesign .quantum-ripples,
    .home-redesign .quantum-wavepacket {
        opacity: .055;
    }

    .home-redesign .quantum-notation--uncertainty {
        right: 4%;
        top: 72%;
        opacity: .08;
    }

    .home-redesign .roadmap-convergence {
        margin-left: 62px;
    }

    .home-redesign .roadmap-convergence::before {
        left: -38px;
        width: 38px;
    }

    .home-redesign .roadmap-convergence__signal {
        left: -44px;
    }

    .home-redesign .roadmap-convergence__body {
        padding: 26px 22px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .probability-cloud i,
    .home-redesign .quantum-ripples ellipse,
    .home-redesign .quantum-wavepacket path,
    .home-redesign .quantum-notation,
    .home-redesign .research::after,
    .home-redesign .roadmap-timeline--evolution::before,
    .home-redesign .roadmap-convergence__body::after,
    .home-redesign .roadmap-convergence__signal span {
        animation: none !important;
    }
}


.home-redesign .evolution-step,
.home-redesign .roadmap-convergence {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .62s ease,
        transform .62s cubic-bezier(.22,.61,.36,1);
}

.home-redesign .evolution-step.is-evolution-visible,
.home-redesign .roadmap-convergence.is-evolution-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .evolution-step,
    .home-redesign .roadmap-convergence {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v5
   Light-mode Pearl Quantum CTA
   ========================================================================== */

/* The section itself now eases from the page background into a cool scientific
   field instead of placing a dark card abruptly on white. */
html[data-theme="light"] .home-redesign .cta {
    background:
        radial-gradient(
            circle at 50% 52%,
            rgba(49, 88, 213, 0.065) 0%,
            rgba(14, 142, 156, 0.028) 25%,
            transparent 56%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #f2f6fb 42%,
            #eef4f9 58%,
            #f7f9fc 100%
        );
}

/* Pearl card: bright, cool, layered, but not "flat white". */
html[data-theme="light"] .home-redesign .cta-card {
    border: 1px solid rgba(49, 88, 213, 0.10);
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(49, 88, 213, 0.11) 0%,
            rgba(49, 88, 213, 0.045) 24%,
            transparent 46%
        ),
        radial-gradient(
            circle at 13% 86%,
            rgba(14, 142, 156, 0.085) 0%,
            rgba(14, 142, 156, 0.032) 27%,
            transparent 48%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.98) 0%,
            rgba(247,250,254,0.98) 48%,
            rgba(238,245,251,0.98) 100%
        );
    color: #0b1726;
    box-shadow:
        0 28px 70px -46px rgba(28, 56, 93, 0.34),
        inset 0 1px 0 rgba(255,255,255,0.88);
}

/* Replace white star-field dots with cool blue/cyan instrumentation dots. */
html[data-theme="light"] .home-redesign .cta-card::before {
    opacity: .72;
    background:
        radial-gradient(
            circle at 1px 1px,
            rgba(49, 88, 213, 0.14) 0 1px,
            transparent 1.45px
        );
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 80% 35%, #000 0 6rem, transparent 27rem);
    -webkit-mask-image: radial-gradient(circle at 80% 35%, #000 0 6rem, transparent 27rem);
}

/* Keep the orbital motif, but turn it into a quiet scientific illustration. */
html[data-theme="light"] .home-redesign .cta-card::after {
    opacity: .42;
    border-color: rgba(14, 142, 156, 0.18);
    box-shadow:
        0 42px 0 -1px transparent,
        0 42px 0 0 rgba(49, 88, 213, 0.09);
}

html[data-theme="light"] .home-redesign .cta-card h2 {
    color: #0b1726;
    text-shadow: none;
}

html[data-theme="light"] .home-redesign .cta-card p {
    color: #52637a;
    opacity: 1;
}

/* Primary CTA remains the strongest visual anchor. */
html[data-theme="light"] .home-redesign .cta-card .btn-primary {
    background: linear-gradient(135deg, #426ce2 0%, #16a5b2 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px -20px rgba(49, 88, 213, 0.55);
}

html[data-theme="light"] .home-redesign .cta-card .btn-primary:hover {
    box-shadow: 0 20px 42px -20px rgba(49, 88, 213, 0.44);
}

/* Secondary action becomes a pearl button instead of a dark translucent pill. */
html[data-theme="light"] .home-redesign .cta-card .btn-secondary {
    color: #1d2d43 !important;
    background: rgba(255,255,255,0.72) !important;
    border-color: rgba(29, 45, 67, 0.14) !important;
    box-shadow: 0 12px 28px -24px rgba(29,45,67,.30);
    backdrop-filter: blur(10px);
}

html[data-theme="light"] .home-redesign .cta-card .btn-secondary:hover {
    color: #0b1726 !important;
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(49, 88, 213, 0.22) !important;
}

/* Light-mode orbit gets higher contrast without becoming decorative clutter. */
html[data-theme="light"] .home-redesign .cta-orbit {
    opacity: .46;
}

html[data-theme="light"] .home-redesign .cta-orbit__ring {
    border-color: rgba(49, 88, 213, 0.24);
}

html[data-theme="light"] .home-redesign .cta-orbit__ring--b {
    border-color: rgba(14, 142, 156, 0.23);
}

html[data-theme="light"] .home-redesign .cta-orbit__dot {
    background: #1599a7;
    box-shadow: 0 0 14px rgba(21,153,167,.34);
}

/* Give the footer transition a quieter landing after the bright CTA. */
html[data-theme="light"] .home-redesign .footer {
    background:
        linear-gradient(
            180deg,
            rgba(247,249,252,.92) 0%,
            #f7f9fc 100%
        );
    border-top-color: rgba(29, 55, 92, 0.07);
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v6
   Product feature motion system
   ========================================================================== */

.home-redesign .teaching {
    isolation: isolate;
}

/* A faint moving interference field ties the six cards together. */
.home-redesign .teaching > .container::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 49%;
    width: min(1180px, 94vw);
    height: 540px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .12;
    background:
        repeating-radial-gradient(
            ellipse at 50% 52%,
            transparent 0 34px,
            rgba(36,184,197,.14) 35px 36px,
            transparent 37px 68px
        );
    mask-image: radial-gradient(ellipse at center, #000 0 35%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 35%, transparent 76%);
    animation: productFieldBreath 11s ease-in-out infinite;
}

html[data-theme="light"] .home-redesign .teaching > .container::before {
    opacity: .085;
}

@keyframes productFieldBreath {
    0%,100% { transform: translate(-50%, -50%) scale(.96); opacity: .075; }
    50% { transform: translate(-50%, -50%) scale(1.06); opacity: .15; }
}

.home-redesign .product-feature-grid {
    perspective: 1200px;
}

.home-redesign .product-feature-card {
    --card-mx: 50%;
    --card-my: 50%;
    --card-tilt-x: 0deg;
    --card-tilt-y: 0deg;
    position: relative;
    min-height: 350px;
    padding-top: 28px;
    overflow: hidden;
    transform:
        perspective(1000px)
        rotateX(var(--card-tilt-x))
        rotateY(var(--card-tilt-y))
        translateY(0);
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease,
        box-shadow .28s ease;
}

/* Pointer-following light is present but intentionally very subtle. */
.home-redesign .product-feature-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            220px circle at var(--card-mx) var(--card-my),
            rgba(85,118,238,.085),
            transparent 68%
        );
    transition: opacity .25s ease;
}

.home-redesign .product-feature-card:hover::after,
.home-redesign .product-feature-card.is-pointer-active::after {
    opacity: 1;
}

.home-redesign .product-feature-card:hover {
    border-color: rgba(85,118,238,.22);
    box-shadow: 0 28px 62px -44px rgba(39,78,147,.42);
}

.home-redesign .product-feature-card > h3,
.home-redesign .product-feature-card > p {
    position: relative;
    z-index: 2;
    transform: translateZ(16px);
}

.home-redesign .product-feature-card > h3 {
    margin-top: 22px;
}

/* Card animation only runs strongly while section is on-screen. */
.home-redesign .product-feature-grid:not(.is-motion-active) .feature-motion *,
.home-redesign .product-feature-grid:not(.is-motion-active) .feature-motion::before,
.home-redesign .product-feature-grid:not(.is-motion-active) .feature-motion::after {
    animation-play-state: paused !important;
}

.home-redesign .feature-motion {
    position: relative;
    z-index: 1;
    height: 78px;
    margin: -2px 0 4px;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(128,153,190,.09);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(85,118,238,.018);
    transform: translateZ(12px);
}

html[data-theme="light"] .home-redesign .feature-motion {
    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(242,247,252,.7));
    border-color: rgba(29,55,92,.055);
}

/* 01 — Modular textbook: moving sequence + progress scan */
.home-redesign .feature-motion--lessons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 18px;
}

.home-redesign .lesson-page {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 46px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-blue) 6%);
    font-family: "Courier New", monospace;
    font-size: .67rem;
    color: var(--text-subtle);
    animation: lessonLift 6.4s ease-in-out infinite;
}

.home-redesign .lesson-page::before {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 8px;
    height: 2px;
    background: var(--q-line-strong);
    box-shadow: 0 -5px 0 var(--q-line), 0 -10px 0 var(--q-line);
}

.home-redesign .lesson-page--2 { animation-delay: -.8s; }
.home-redesign .lesson-page--3 { animation-delay: -1.6s; }
.home-redesign .lesson-page--4 { animation-delay: -2.4s; }

.home-redesign .lesson-progress {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 8px;
    height: 1px;
    background: rgba(85,118,238,.10);
}

.home-redesign .lesson-progress::after {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 34%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    animation: lessonScan 5.2s ease-in-out infinite;
}

@keyframes lessonLift {
    0%,100% { transform: translateY(2px); opacity: .65; }
    50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes lessonScan {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(190%); }
}

/* 02 — Experiments: oscillating wave + traveling probe */
.home-redesign .feature-motion--experiment svg {
    position: absolute;
    inset: 5px 0 0;
    width: 100%;
    height: 68px;
}

.home-redesign .experiment-wave {
    fill: none;
    vector-effect: non-scaling-stroke;
    transform-origin: center;
}

.home-redesign .experiment-wave--a {
    stroke: var(--q-cyan);
    stroke-width: 1.6;
    stroke-dasharray: 5 7;
    animation: experimentFlow 9s linear infinite, experimentAmplitude 5s ease-in-out infinite;
}

.home-redesign .experiment-wave--b {
    stroke: var(--q-blue);
    stroke-width: 1;
    opacity: .42;
    animation: experimentAmplitudeSoft 7s ease-in-out infinite reverse;
}

.home-redesign .experiment-probe {
    position: absolute;
    left: 10%;
    top: 36px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 0 6px rgba(36,184,197,.08), 0 0 14px rgba(36,184,197,.35);
    animation: experimentProbe 6s ease-in-out infinite;
}

@keyframes experimentFlow { to { stroke-dashoffset: -140; } }
@keyframes experimentAmplitude {
    0%,100% { transform: scaleY(.82); }
    50% { transform: scaleY(1.18); }
}
@keyframes experimentAmplitudeSoft {
    0%,100% { transform: scaleY(1.1); }
    50% { transform: scaleY(.78); }
}
@keyframes experimentProbe {
    0%,100% { left: 9%; transform: translateY(8px); }
    28% { left: 34%; transform: translateY(-13px); }
    57% { left: 61%; transform: translateY(12px); }
    80% { left: 82%; transform: translateY(-6px); }
}

/* 03 — Tutor: dialogue breathing + typing indicator */
.home-redesign .feature-motion--tutor {
    padding: 14px 16px;
}

.home-redesign .chat-line {
    position: absolute;
    height: 19px;
    border-radius: 999px;
    animation: chatExchange 5.5s ease-in-out infinite;
}

.home-redesign .chat-line--user {
    right: 16px;
    top: 13px;
    width: 45%;
    background: rgba(85,118,238,.11);
    border: 1px solid rgba(85,118,238,.12);
}

.home-redesign .chat-line--ai {
    left: 16px;
    bottom: 13px;
    width: 58%;
    background: rgba(36,184,197,.08);
    border: 1px solid rgba(36,184,197,.11);
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 11px;
    animation-delay: -2.6s;
}

.home-redesign .chat-line--ai i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--q-cyan);
    animation: typingDot 1.2s ease-in-out infinite;
}

.home-redesign .chat-line--ai i:nth-child(2) { animation-delay: .16s; }
.home-redesign .chat-line--ai i:nth-child(3) { animation-delay: .32s; }

.home-redesign .chat-cursor {
    position: absolute;
    left: 18px;
    top: 13px;
    width: 1px;
    height: 18px;
    background: var(--q-cyan);
    animation: chatCursor 1s step-end infinite;
}

@keyframes chatExchange {
    0%,100% { transform: translateY(2px); opacity: .55; }
    50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes typingDot {
    0%,60%,100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes chatCursor { 50% { opacity: 0; } }

/* 04 — Quiz: ring fills, options scan, verified check appears */
.home-redesign .feature-motion--quiz {
    position: relative;
}

.home-redesign .quiz-ring {
    position: absolute;
    left: 24px;
    top: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--q-cyan) 0 72%, rgba(128,153,190,.11) 72% 100%);
    animation: quizSpin 7s ease-in-out infinite;
}

.home-redesign .quiz-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--bg-light);
}

.home-redesign .quiz-ring i {
    position: absolute;
    z-index: 2;
    inset: 17px;
    border-radius: 50%;
    background: var(--q-blue);
    opacity: .68;
}

.home-redesign .quiz-option {
    position: absolute;
    left: 94px;
    right: 24px;
    height: 7px;
    border-radius: 999px;
    background: rgba(128,153,190,.12);
}

.home-redesign .quiz-option--1 { top: 18px; }
.home-redesign .quiz-option--2 { top: 36px; }
.home-redesign .quiz-option--3 { top: 54px; }

.home-redesign .quiz-option::after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    animation: quizOptionScan 5.4s ease-in-out infinite;
}

.home-redesign .quiz-option--2::after { animation-delay: -1.1s; }
.home-redesign .quiz-option--3::after { animation-delay: -2.2s; }

.home-redesign .quiz-check {
    position: absolute;
    right: 24px;
    top: 25px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--q-emerald);
    border: 1px solid rgba(57,185,138,.22);
    background: rgba(57,185,138,.06);
    font-size: .78rem;
    font-weight: 700;
    animation: quizCheck 5.4s ease-in-out infinite;
}

@keyframes quizSpin {
    0%,100% { transform: rotate(-14deg); }
    50% { transform: rotate(18deg); }
}
@keyframes quizOptionScan {
    0%,18% { width: 0; opacity: .3; }
    52%,72% { width: 64%; opacity: .8; }
    100% { width: 0; opacity: .3; }
}
@keyframes quizCheck {
    0%,60%,100% { transform: scale(.72); opacity: .25; }
    72%,86% { transform: scale(1); opacity: 1; }
}

/* 05 — Strategy: feedback loop signal travels between mastery states */
.home-redesign .feature-motion--strategy {
    background:
        radial-gradient(circle at 1px 1px, rgba(85,118,238,.12) 0 1px, transparent 1.4px);
    background-size: 20px 20px;
}

.home-redesign .strategy-node {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 5px rgba(85,118,238,.06);
}

.home-redesign .strategy-node--a { left: 18%; top: 28px; }
.home-redesign .strategy-node--b { left: 48%; top: 48px; background: var(--q-cyan); }
.home-redesign .strategy-node--c { right: 16%; top: 20px; background: var(--q-emerald); }

.home-redesign .strategy-path {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--q-blue), var(--q-cyan));
    transform-origin: left center;
}

.home-redesign .strategy-path--1 { left: 21%; top: 34px; width: 31%; transform: rotate(13deg); }
.home-redesign .strategy-path--2 { left: 51%; top: 52px; width: 35%; transform: rotate(-18deg); }

.home-redesign .strategy-signal {
    position: absolute;
    z-index: 3;
    left: 19%;
    top: 29px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.6);
    animation: strategyTravel 5.8s ease-in-out infinite;
}

@keyframes strategyTravel {
    0%,100% { left: 19%; top: 29px; opacity: .3; }
    42% { left: 49%; top: 49px; opacity: 1; }
    76% { left: 82%; top: 22px; opacity: 1; }
    88% { opacity: .25; }
}

/* 06 — Knowledge graph: network pulses from prerequisite to target */
.home-redesign .feature-motion--graph {
    background:
        radial-gradient(circle at 1px 1px, rgba(36,184,197,.11) 0 1px, transparent 1.4px);
    background-size: 22px 22px;
}

.home-redesign .graph-node {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--q-blue);
    box-shadow: 0 0 0 4px rgba(85,118,238,.055);
    animation: graphNodePulse 5s ease-in-out infinite;
}

.home-redesign .graph-node--a { left: 15%; top: 32px; }
.home-redesign .graph-node--b { left: 37%; top: 18px; animation-delay: -.8s; }
.home-redesign .graph-node--c { left: 48%; top: 54px; background: var(--q-cyan); animation-delay: -1.6s; }
.home-redesign .graph-node--d { right: 30%; top: 29px; background: var(--q-violet); animation-delay: -2.4s; }
.home-redesign .graph-node--e { right: 12%; top: 46px; background: var(--q-emerald); animation-delay: -3.2s; }

.home-redesign .graph-edge {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: rgba(85,118,238,.23);
    transform-origin: left center;
}

.home-redesign .graph-edge::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    animation: graphSignal 4.6s linear infinite;
}

.home-redesign .graph-edge--1 { left: 18%; top: 36px; width: 21%; transform: rotate(-16deg); }
.home-redesign .graph-edge--2 { left: 40%; top: 23px; width: 18%; transform: rotate(48deg); }
.home-redesign .graph-edge--3 { left: 51%; top: 58px; width: 23%; transform: rotate(-36deg); }
.home-redesign .graph-edge--4 { left: 70%; top: 34px; width: 20%; transform: rotate(20deg); }

.home-redesign .graph-edge--2::after { animation-delay: -1.1s; }
.home-redesign .graph-edge--3::after { animation-delay: -2.2s; }
.home-redesign .graph-edge--4::after { animation-delay: -3.3s; }

@keyframes graphNodePulse {
    0%,100% { transform: scale(.8); opacity: .45; }
    48% { transform: scale(1.12); opacity: 1; }
}
@keyframes graphSignal {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Stagger the six cards when Product enters the viewport. */
.home-redesign .product-feature-card {
    opacity: .84;
}

.home-redesign .product-feature-grid.is-motion-active .product-feature-card {
    animation: productCardEnter .62s cubic-bezier(.22,.61,.36,1) both;
}

.home-redesign .product-feature-grid.is-motion-active .product-feature-card:nth-child(2) { animation-delay: .08s; }
.home-redesign .product-feature-grid.is-motion-active .product-feature-card:nth-child(3) { animation-delay: .16s; }
.home-redesign .product-feature-grid.is-motion-active .product-feature-card:nth-child(4) { animation-delay: .24s; }
.home-redesign .product-feature-grid.is-motion-active .product-feature-card:nth-child(5) { animation-delay: .32s; }
.home-redesign .product-feature-grid.is-motion-active .product-feature-card:nth-child(6) { animation-delay: .40s; }

@keyframes productCardEnter {
    from { opacity: .35; transform: perspective(1000px) translateY(16px) scale(.985); }
    to { opacity: 1; transform: perspective(1000px) translateY(0) scale(1); }
}

@media (max-width: 768px) {
    .home-redesign .product-feature-card {
        min-height: 0;
        --card-tilt-x: 0deg !important;
        --card-tilt-y: 0deg !important;
    }

    .home-redesign .feature-motion {
        height: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-redesign .teaching > .container::before,
    .home-redesign .product-feature-card,
    .home-redesign .feature-motion *,
    .home-redesign .feature-motion::before,
    .home-redesign .feature-motion::after {
        animation: none !important;
    }

    .home-redesign .product-feature-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   QuanLLM Homepage Visual Prototype v7
   Semantic visual refinement:
   QMStudy workspace / Tutor interaction / Strategy feedback loop
   ========================================================================== */

/* --- QMStudy system-map visual: integrated learning workspace ----------- */

.home-redesign .system-layer__visual--workspace {
    padding: 11px;
    background:
        linear-gradient(180deg, rgba(36,184,197,.025), rgba(85,118,238,.018)),
        rgba(255,255,255,.012);
}

.home-redesign .workspace-shell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(111,142,190,.10);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-light) 97%, var(--q-cyan) 3%);
}

.home-redesign .workspace-shell__bar {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(128,153,190,.08);
    background: rgba(85,118,238,.025);
}

.home-redesign .workspace-shell__bar span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(128,153,190,.38);
}

.home-redesign .workspace-shell__bar i {
    margin-left: 4px;
    font-family: "Courier New", monospace;
    font-size: .48rem;
    font-style: normal;
    letter-spacing: .08em;
    color: var(--text-subtle);
}

.home-redesign .workspace-hub {
    position: absolute;
    inset: 22px 6px 3px;
}

.home-redesign .workspace-core {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -15px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--q-blue), var(--q-cyan));
    color: white;
    font-family: "Courier New", monospace;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 0 0 7px rgba(85,118,238,.055);
    animation: workspaceCorePulse 5s ease-in-out infinite;
}

.home-redesign .workspace-module {
    position: absolute;
    z-index: 3;
    min-width: 44px;
    padding: 5px 7px;
    border: 1px solid var(--q-card-border);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--q-blue) 4%);
    font-family: "Courier New", monospace;
    font-size: .47rem;
    color: var(--text-subtle);
    text-align: center;
    animation: workspaceModulePulse 6s ease-in-out infinite;
}

.home-redesign .workspace-module--lesson { left: 5%; top: 9%; }
.home-redesign .workspace-module--tutor { right: 4%; top: 8%; animation-delay: -1.1s; }
.home-redesign .workspace-module--test { right: 3%; bottom: 8%; animation-delay: -2.2s; }
.home-redesign .workspace-module--strategy { left: 34%; bottom: 3%; animation-delay: -3.3s; }
.home-redesign .workspace-module--graph { left: 3%; bottom: 12%; animation-delay: -4.4s; }

.home-redesign .workspace-link {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(85,118,238,.26), rgba(36,184,197,.35));
}

.home-redesign .workspace-link::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 9px rgba(36,184,197,.45);
    animation: workspaceSignal 5.4s linear infinite;
}

.home-redesign .workspace-link--1 { width: 39%; transform: rotate(-145deg); }
.home-redesign .workspace-link--2 { width: 38%; transform: rotate(-33deg); }
.home-redesign .workspace-link--3 { width: 38%; transform: rotate(30deg); }
.home-redesign .workspace-link--4 { width: 31%; transform: rotate(82deg); }
.home-redesign .workspace-link--5 { width: 39%; transform: rotate(145deg); }

.home-redesign .workspace-link--2::after { animation-delay: -1.05s; }
.home-redesign .workspace-link--3::after { animation-delay: -2.1s; }
.home-redesign .workspace-link--4::after { animation-delay: -3.15s; }
.home-redesign .workspace-link--5::after { animation-delay: -4.2s; }

.home-redesign .workspace-pulse {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px;
    border: 1px solid rgba(85,118,238,.14);
    border-radius: 50%;
    animation: workspaceRipple 4.8s ease-out infinite;
}

@keyframes workspaceSignal {
    0% { left: 0%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes workspaceCorePulse {
    0%,100% { transform: scale(.94); box-shadow: 0 0 0 7px rgba(85,118,238,.04); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 11px rgba(36,184,197,.055); }
}

@keyframes workspaceModulePulse {
    0%,100% { transform: translateY(0); opacity: .65; }
    50% { transform: translateY(-2px); opacity: 1; }
}

@keyframes workspaceRipple {
    0% { transform: scale(.75); opacity: .55; }
    100% { transform: scale(2.9); opacity: 0; }
}

/* --- AI Tutor: selected textbook text -> question -> streaming answer --- */

.home-redesign .feature-motion--tutor-v2 {
    overflow: visible;
    padding: 9px 12px;
}

.home-redesign .tutor-source {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 45%;
    height: 52px;
    border-radius: 8px;
    border: 1px solid rgba(128,153,190,.08);
    background: rgba(255,255,255,.018);
}

html[data-theme="light"] .home-redesign .tutor-source {
    background: rgba(255,255,255,.72);
}

.home-redesign .tutor-text,
.home-redesign .tutor-highlight {
    position: absolute;
    left: 9px;
    height: 4px;
    border-radius: 999px;
}

.home-redesign .tutor-text {
    background: rgba(128,153,190,.16);
}

.home-redesign .tutor-text--1 { top: 10px; width: 74%; }
.home-redesign .tutor-text--2 { top: 21px; width: 56%; }
.home-redesign .tutor-text--3 { top: 38px; width: 67%; }

.home-redesign .tutor-highlight {
    top: 30px;
    width: 0;
    background: linear-gradient(90deg, rgba(36,184,197,.18), rgba(85,118,238,.20));
    animation: tutorSelect 6s ease-in-out infinite;
}

.home-redesign .tutor-bridge {
    position: absolute;
    z-index: 2;
    left: 48%;
    top: 30px;
    width: 10%;
    height: 1px;
    background: linear-gradient(90deg, var(--q-cyan), var(--q-blue));
}

.home-redesign .tutor-bridge::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--q-cyan);
    animation: tutorBridgeSignal 6s ease-in-out infinite;
}

.home-redesign .tutor-question {
    position: absolute;
    right: 12px;
    top: 9px;
    width: 31%;
    height: 22px;
    border-radius: 999px 999px 999px 6px;
    border: 1px solid rgba(85,118,238,.12);
    background: rgba(85,118,238,.07);
    opacity: .35;
    transform: translateY(4px);
    animation: tutorQuestionAppear 6s ease-in-out infinite;
}

.home-redesign .tutor-question span {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 8px;
    height: 4px;
    border-radius: 999px;
    background: rgba(85,118,238,.24);
}

.home-redesign .tutor-answer {
    position: absolute;
    right: 12px;
    bottom: 8px;
    width: 39%;
    height: 31px;
    border-radius: 6px 999px 999px 999px;
    border: 1px solid rgba(36,184,197,.11);
    background: rgba(36,184,197,.055);
    opacity: .28;
    transform: translateY(4px);
    animation: tutorAnswerAppear 6s ease-in-out infinite;
}

.home-redesign .answer-line {
    position: absolute;
    left: 9px;
    height: 3px;
    border-radius: 999px;
    background: rgba(36,184,197,.27);
    transform-origin: left center;
    animation: tutorTypingLine 6s ease-in-out infinite;
}

.home-redesign .answer-line--1 { top: 7px; width: 68%; }
.home-redesign .answer-line--2 { top: 14px; width: 54%; animation-delay: .12s; }
.home-redesign .answer-line--3 { top: 21px; width: 74%; animation-delay: .24s; }

.home-redesign .answer-cursor {
    position: absolute;
    left: 77%;
    top: 19px;
    width: 1px;
    height: 6px;
    background: var(--q-cyan);
    animation: answerCursorBlink .9s step-end infinite;
}

@keyframes tutorSelect {
    0%,12% { width: 0; opacity: .15; }
    26%,70% { width: 58%; opacity: 1; }
    100% { width: 0; opacity: .15; }
}

@keyframes tutorBridgeSignal {
    0%,24% { left: 0; opacity: 0; }
    34% { opacity: 1; }
    49% { left: 100%; opacity: 1; }
    56%,100% { left: 100%; opacity: 0; }
}

@keyframes tutorQuestionAppear {
    0%,31% { opacity: .18; transform: translateY(6px) scale(.95); }
    42%,76% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: .22; transform: translateY(4px) scale(.97); }
}

@keyframes tutorAnswerAppear {
    0%,46% { opacity: .15; transform: translateY(6px); }
    58%,88% { opacity: 1; transform: translateY(0); }
    100% { opacity: .18; transform: translateY(4px); }
}

@keyframes tutorTypingLine {
    0%,48% { transform: scaleX(.05); opacity: .2; }
    66%,88% { transform: scaleX(1); opacity: .9; }
    100% { transform: scaleX(.05); opacity: .15; }
}

@keyframes answerCursorBlink { 50% { opacity: 0; } }

/* --- Learning strategy: feedback loop, not a generic line graph --------- */

.home-redesign .feature-motion--strategy-loop {
    overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(85,118,238,.09) 0 1px, transparent 1.4px);
    background-size: 20px 20px;
}

.home-redesign .loop-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-redesign .loop-path {
    fill: none;
    stroke: var(--q-line-strong);
    stroke-width: 1.2;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    animation: loopPathFlow 10s linear infinite;
}

.home-redesign .loop-node {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--q-card-border);
    background: color-mix(in srgb, var(--bg-light) 94%, var(--q-blue) 6%);
    box-shadow: 0 0 0 5px rgba(85,118,238,.035);
    animation: loopNodePulse 6.4s ease-in-out infinite;
}

.home-redesign .loop-node i {
    font-family: "Courier New", monospace;
    font-size: .52rem;
    font-style: normal;
    color: var(--text-subtle);
}

.home-redesign .loop-node--mastery { left: 18%; top: 8px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-emerald) 6%); }
.home-redesign .loop-node--question { right: 18%; top: 20px; animation-delay: -1.4s; }
.home-redesign .loop-node--error { right: 35%; bottom: 3px; background: color-mix(in srgb, var(--bg-light) 94%, #d49a43 6%); animation-delay: -2.8s; }
.home-redesign .loop-node--review { left: 17%; bottom: 9px; background: color-mix(in srgb, var(--bg-light) 94%, var(--q-cyan) 6%); animation-delay: -4.2s; }

.home-redesign .loop-label {
    position: absolute;
    z-index: 2;
    font-family: "Courier New", monospace;
    font-size: .43rem;
    color: var(--text-subtle);
    opacity: .6;
}

.home-redesign .loop-label--mastery { left: 6%; top: 15px; }
.home-redesign .loop-label--error { right: 21%; bottom: 8px; }
.home-redesign .loop-label--review { left: 5%; bottom: 15px; }

.home-redesign .loop-signal {
    position: absolute;
    z-index: 4;
    left: 22%;
    top: 17px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--q-cyan);
    box-shadow: 0 0 10px rgba(36,184,197,.65);
    animation: feedbackLoopTravel 6.4s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes loopPathFlow {
    to { stroke-dashoffset: -120; }
}

@keyframes loopNodePulse {
    0%,100% { transform: scale(.9); opacity: .58; }
    48% { transform: scale(1.08); opacity: 1; }
}

@keyframes feedbackLoopTravel {
    0%, 6%   { left: 22%; top: 17px; opacity: .35; }
    24%      { left: 77%; top: 30px; opacity: 1; }
    47%      { left: 61%; top: 66px; opacity: 1; background: #d49a43; }
    72%      { left: 21%; top: 58px; opacity: 1; background: var(--q-cyan); }
    92%,100% { left: 22%; top: 17px; opacity: .45; background: var(--q-emerald); }
}

/* Reduced motion remains meaningful as a static diagram. */
@media (prefers-reduced-motion: reduce) {
    .home-redesign .workspace-core,
    .home-redesign .workspace-module,
    .home-redesign .workspace-link::after,
    .home-redesign .workspace-pulse,
    .home-redesign .tutor-highlight,
    .home-redesign .tutor-bridge::after,
    .home-redesign .tutor-question,
    .home-redesign .tutor-answer,
    .home-redesign .answer-line,
    .home-redesign .answer-cursor,
    .home-redesign .loop-path,
    .home-redesign .loop-node,
    .home-redesign .loop-signal {
        animation: none !important;
    }

    .home-redesign .tutor-highlight {
        width: 58%;
        opacity: .8;
    }

    .home-redesign .tutor-question,
    .home-redesign .tutor-answer {
        opacity: 1;
        transform: none;
    }

    .home-redesign .answer-line {
        transform: scaleX(1);
        opacity: .8;
    }
}


/* ==========================================================================
   Homepage V3 · Hero layout after removing the stack badge
   ========================================================================== */
.home-redesign .hero-main {
    padding-top: 118px;
    padding-bottom: 72px;
}

.home-redesign .hero-content {
    max-width: 1220px;
}

.home-redesign .hero-title {
    max-width: 1160px;
    margin-bottom: 22px;
}

.home-redesign .hero-subtitle {
    max-width: 900px;
    margin-bottom: 32px;
}

.home-redesign .hero-actions {
    margin-bottom: 18px;
}

.home-redesign .hero-stats {
    max-width: 1020px;
}

@media (min-width: 1200px) {
    .home-redesign .hero-main .hero-title {
        max-width: 1160px;
        font-size: clamp(2.55rem, 3.15vw, 3.45rem);
        line-height: 1.14;
        white-space: normal;
        text-wrap: balance;
    }
}

@media (max-width: 820px) {
    .home-redesign .hero-main {
        padding-top: 104px;
        padding-bottom: 64px;
    }

    .home-redesign .hero-subtitle {
        max-width: 680px;
    }
}


/* ==========================================================================
   Homepage V5 · Evolution Path
   Early Exploration -> Current Model -> Reliability -> Product -> Next -> Future
   ========================================================================== */

.home-redesign .roadmap--v5 .section-header {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.home-redesign .evolution-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 24px auto 0;
}

.home-redesign .evolution-legend__item {
    padding: 6px 10px;
    border: 1px solid var(--q-card-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    font-family: "Courier New", monospace;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-subtle);
}

.home-redesign .evolution-legend__item.is-current {
    color: var(--q-cyan);
    border-color: rgba(36,184,197,.25);
    background: rgba(36,184,197,.055);
}

.home-redesign .evolution-legend__item.is-next {
    color: var(--q-emerald);
    border-color: rgba(57,185,138,.22);
    background: rgba(57,185,138,.045);
}

.home-redesign .evolution-legend__line {
    flex: 1 1 44px;
    max-width: 78px;
    height: 1px;
    background: linear-gradient(90deg, var(--q-card-border), rgba(36,184,197,.28), var(--q-card-border));
}

.home-redesign .roadmap-timeline--v5 {
    max-width: 940px;
    margin-top: 44px;
}

.home-redesign .roadmap-timeline--v5::before {
    background:
        linear-gradient(
            to bottom,
            rgba(128,148,184,.22) 0%,
            rgba(128,148,184,.22) 13%,
            var(--q-violet) 26%,
            var(--q-blue) 43%,
            var(--q-cyan) 60%,
            var(--q-emerald) 78%,
            rgba(57,185,138,.22) 100%
        );
}

.home-redesign .roadmap-timeline--v5 .evolution-step {
    margin-bottom: 34px;
}

.home-redesign .roadmap-timeline--v5 .roadmap-content {
    min-height: 0;
    padding: 28px 30px 26px;
}

.home-redesign .roadmap-timeline--v5 .roadmap-content h3 {
    margin-top: 7px;
    margin-bottom: 10px;
}

.home-redesign .roadmap-timeline--v5 .roadmap-content > p {
    max-width: 760px;
    line-height: 1.75;
}

.home-redesign .evolution-step--early .roadmap-content {
    opacity: .86;
    background:
        linear-gradient(135deg, rgba(128,148,184,.035), transparent 55%),
        var(--bg-light);
}

.home-redesign .evolution-step--early .roadmap-content::before {
    background: rgba(128,148,184,.55);
    opacity: .55;
}

.home-redesign .evolution-step--current-model .roadmap-content {
    background:
        radial-gradient(circle at 92% 12%, rgba(130,107,231,.075), transparent 18rem),
        var(--bg-light);
}

.home-redesign .evolution-step--current-harness .roadmap-content {
    background:
        radial-gradient(circle at 92% 12%, rgba(85,118,238,.075), transparent 18rem),
        var(--bg-light);
}

.home-redesign .evolution-step--current-product .roadmap-marker {
    background: linear-gradient(135deg, var(--q-blue), var(--q-cyan));
    border-color: transparent;
    box-shadow:
        0 0 0 8px rgba(36,184,197,.075),
        0 0 30px rgba(36,184,197,.13);
}

.home-redesign .evolution-step--current-product .roadmap-marker::after {
    color: #fff !important;
}

.home-redesign .evolution-step--current-product .roadmap-content {
    border-color: rgba(36,184,197,.24);
    background:
        radial-gradient(circle at 88% 8%, rgba(36,184,197,.115), transparent 19rem),
        radial-gradient(circle at 6% 100%, rgba(85,118,238,.045), transparent 20rem),
        var(--bg-light);
    box-shadow:
        0 26px 70px -52px rgba(24,157,175,.6),
        0 0 0 1px rgba(36,184,197,.02);
}

.home-redesign .evolution-step--current-product .roadmap-content::before {
    background: linear-gradient(180deg, var(--q-blue), var(--q-cyan));
    opacity: 1;
    width: 3px;
}

.home-redesign .evolution-now-badge {
    position: absolute;
    right: 22px;
    top: 20px;
    padding: 5px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(85,118,238,.13), rgba(36,184,197,.13));
    border: 1px solid rgba(36,184,197,.20);
    color: var(--q-cyan);
    font-family: "Courier New", monospace;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.home-redesign .evolution-step--next .roadmap-marker {
    border-color: rgba(57,185,138,.38);
    box-shadow: 0 0 0 7px rgba(57,185,138,.05);
}

.home-redesign .evolution-step--next .roadmap-content {
    border-style: dashed;
    border-color: rgba(57,185,138,.22);
    background:
        radial-gradient(circle at 90% 10%, rgba(57,185,138,.075), transparent 18rem),
        var(--bg-light);
}

.home-redesign .evolution-step--next .roadmap-content::before {
    background: var(--q-emerald);
    opacity: .76;
}

.home-redesign .evolution-step--future .roadmap-marker {
    border-style: dashed;
    border-color: rgba(57,185,138,.28);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.home-redesign .evolution-step--future .roadmap-content {
    border-style: dashed;
    border-color: rgba(128,148,184,.20);
    background:
        linear-gradient(135deg, rgba(57,185,138,.035), transparent 55%),
        color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.home-redesign .evolution-step--future .roadmap-content::before {
    background: linear-gradient(180deg, var(--q-emerald), rgba(57,185,138,.16));
    opacity: .52;
}

.home-redesign .evolution-mini-path,
.home-redesign .evolution-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.home-redesign .evolution-mini-path span,
.home-redesign .evolution-tags span {
    padding: 6px 9px;
    border: 1px solid var(--q-card-border);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: var(--text-muted);
    font-family: "Courier New", monospace;
    font-size: .68rem;
}

html[data-theme="light"] .home-redesign .evolution-mini-path span,
html[data-theme="light"] .home-redesign .evolution-tags span {
    background: rgba(255,255,255,.72);
}

.home-redesign .evolution-mini-path i {
    color: var(--text-subtle);
    font-style: normal;
    font-weight: 700;
}

.home-redesign .evolution-tags--product span {
    border-color: rgba(36,184,197,.16);
}

.home-redesign .evolution-step--current-model .roadmap-phase {
    color: var(--q-violet);
}

.home-redesign .evolution-step--current-harness .roadmap-phase {
    color: var(--q-blue);
}

.home-redesign .evolution-step--current-product .roadmap-phase {
    color: var(--q-cyan);
}

.home-redesign .evolution-step--next .roadmap-phase,
.home-redesign .evolution-step--future .roadmap-phase {
    color: var(--q-emerald);
}

@media (max-width: 680px) {
    .home-redesign .evolution-legend {
        gap: 6px;
        margin-top: 18px;
    }

    .home-redesign .evolution-legend__item {
        padding: 5px 8px;
        font-size: .58rem;
    }

    .home-redesign .evolution-legend__line {
        min-width: 18px;
    }

    .home-redesign .roadmap-timeline--v5 {
        margin-top: 34px;
    }

    .home-redesign .roadmap-timeline--v5 .roadmap-content {
        padding: 24px 20px 22px;
    }

    .home-redesign .evolution-now-badge {
        position: static;
        display: inline-flex;
        margin-bottom: 8px;
    }

    .home-redesign .evolution-mini-path--future {
        align-items: flex-start;
    }
}