/* ===================================================================
 * Dream PP — a separate, dreamy visual language
 *
 * Deep indigo field, luminous violet, soft cyan and rose. Deliberately
 * distinct from the Lucid Fabric site: Dream is imagination, not fact.
 * =================================================================== */

:root {
    --dream-bg: #08061a;
    --dream-bg-2: #0f0b2b;
    --dream-panel: rgba(139, 92, 246, .06);
    --dream-violet: #8b5cf6;
    --dream-violet-rgb: 139, 92, 246;
    --dream-lilac: #c4b5fd;
    --dream-indigo: #4c1d95;
    --dream-cyan: #67e8f9;
    --dream-cyan-rgb: 103, 232, 249;
    --dream-rose: #f0abfc;
    --dream-rose-rgb: 240, 171, 252;
    --dream-mist: #ece7ff;
    --dream-dim: rgba(236, 231, 255, .68);
}

body.dream-page {
    background: var(--dream-bg);
    color: var(--dream-mist);
    font-family: "lora-regular", serif;
}

.dream-page ::selection {
    background: rgba(var(--dream-violet-rgb), .35);
    color: #fff;
}


/* ===================================================================
 * header
 * ------------------------------------------------------------------- */
.dream-header .site-logo--text {
    color: #fff;
}

.dream-header .site-logo__dot {
    color: var(--dream-cyan);
}

.dream-header .header-nav__label {
    color: var(--dream-cyan);
}


/* ===================================================================
 * shared
 * ------------------------------------------------------------------- */
.dream-kicker,
.dream-stage {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .34rem;
    color: var(--dream-cyan);
    margin-bottom: 1.6rem;
}

.dream-h2 {
    font-family: "montserrat-light", sans-serif;
    font-size: 4.2rem;
    line-height: 1.15;
    color: var(--dream-mist);
    margin: 0 0 2.4rem;
}

.dream-lead {
    font-family: "lora-italic", serif;
    font-size: 2.2rem;
    line-height: 1.6;
    color: var(--dream-lilac);
    max-width: 78rem;
    margin-bottom: 3rem;
}

.dream-body {
    font-family: "lora-regular", serif;
    font-size: 1.8rem;
    line-height: 1.8;
    color: var(--dream-dim);
    max-width: 78rem;
    margin: 0 0 2.4rem;
}

.dream-body strong {
    color: var(--dream-mist);
    font-weight: normal;
}

.dream-note {
    font-family: "lora-regular", serif;
    font-size: 1.55rem;
    line-height: 1.7;
    color: rgba(196, 181, 253, .8);
    max-width: 78rem;
    padding: 1.6rem 2rem;
    border-left: 2px solid rgba(var(--dream-violet-rgb), .5);
    background: var(--dream-panel);
    margin-top: 2rem;
}

.dream-note--warn {
    border-left-color: rgba(var(--dream-rose-rgb), .6);
    color: rgba(240, 171, 252, .85);
}


/* ===================================================================
 * hero
 * ------------------------------------------------------------------- */
.dream-hero {
    position: relative;
    padding: 18rem 0 12rem;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(var(--dream-violet-rgb), .22), transparent 60%),
        radial-gradient(900px 500px at 10% 20%, rgba(var(--dream-cyan-rgb), .12), transparent 60%),
        linear-gradient(180deg, var(--dream-bg) 0%, var(--dream-bg-2) 100%);
}

.dream-hero__aura {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 140%;
    height: 120%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%, rgba(var(--dream-rose-rgb), .10), transparent 55%);
    pointer-events: none;
}

.dream-hero__content {
    position: relative;
    z-index: 2;
}

.dream-title {
    font-family: "montserrat-extrabold", sans-serif;
    font-size: 8.4rem;
    line-height: 1.02;
    letter-spacing: -.1rem;
    color: #fff;
    margin: 0 0 3rem;
    text-shadow: 0 0 60px rgba(var(--dream-violet-rgb), .45);
}

.dream-dot {
    color: var(--dream-cyan);
}

.dream-hero__sub {
    font-family: "lora-regular", serif;
    font-size: 2rem;
    line-height: 1.7;
    color: var(--dream-dim);
    max-width: 72rem;
    margin-bottom: 5rem;
}

.dream-trinity__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 90rem;
    margin-bottom: 2rem;
}

.dream-trinity__cell {
    border: 1px solid rgba(var(--dream-violet-rgb), .3);
    background: var(--dream-panel);
    padding: 2.4rem;
    border-radius: 3px;
}

.dream-trinity__q {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .16rem;
    color: var(--dream-cyan);
    margin-bottom: .8rem;
}

.dream-trinity__a {
    font-family: "lora-italic", serif;
    font-size: 1.8rem;
    color: var(--dream-mist);
    margin: 0;
}

.dream-trinity__coda {
    font-family: "lora-italic", serif;
    font-size: 1.7rem;
    color: var(--dream-lilac);
}


/* ===================================================================
 * sections
 * ------------------------------------------------------------------- */
.dream-section {
    padding: 11rem 0;
    background: var(--dream-bg);
    position: relative;
}

.dream-section--alt {
    background: var(--dream-bg-2);
}

.dream-section--firewall {
    background:
        radial-gradient(800px 400px at 80% 0%, rgba(var(--dream-rose-rgb), .10), transparent 60%),
        var(--dream-bg);
}

.dream-section--roadmap {
    background:
        radial-gradient(900px 500px at 20% 0%, rgba(var(--dream-cyan-rgb), .08), transparent 60%),
        var(--dream-bg-2);
}


/* substrate */
.substrate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.substrate-cell {
    border: 1px solid rgba(var(--dream-violet-rgb), .28);
    background: var(--dream-panel);
    padding: 2.6rem 2.4rem;
    border-radius: 3px;
}

.substrate-num {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.15rem;
    letter-spacing: .2rem;
    text-transform: uppercase;
    color: var(--dream-cyan);
}

.substrate-cell h3 {
    font-family: "montserrat-medium", sans-serif;
    font-size: 1.85rem;
    color: var(--dream-mist);
    margin: 1rem 0 .8rem;
}

.substrate-cell p {
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--dream-dim);
    margin: 0;
}


/* produces */
.produces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin: 3rem 0 1rem;
}

.produces-cell {
    padding: 2.2rem;
    border-left: 2px solid rgba(var(--dream-cyan-rgb), .5);
    background: var(--dream-panel);
}

.produces-cell h3 {
    font-family: "montserrat-medium", sans-serif;
    font-size: 1.7rem;
    color: var(--dream-lilac);
    margin: 0 0 .6rem;
}

.produces-cell p {
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--dream-dim);
    margin: 0;
}


/* firewall */
.firewall-list {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}

.firewall-list li {
    font-family: "lora-regular", serif;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--dream-mist);
    padding: 1.3rem 0 1.3rem 3.2rem;
    border-bottom: 1px solid rgba(var(--dream-violet-rgb), .18);
    position: relative;
}

.firewall-list li::before {
    content: "\25C6";
    position: absolute;
    left: .4rem;
    color: var(--dream-rose);
    font-size: 1.2rem;
}

.firewall-list strong {
    color: var(--dream-cyan);
    font-weight: normal;
}


/* earn flow */
.earn-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin: 3.4rem 0;
}

.earn-node {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.4rem;
    letter-spacing: .18rem;
    padding: 1.3rem 3.4rem;
    border: 1px solid rgba(var(--dream-violet-rgb), .45);
    border-radius: 2px;
    color: var(--dream-mist);
    background: var(--dream-panel);
}

.earn-node--dream { border-color: rgba(var(--dream-cyan-rgb), .5); color: var(--dream-cyan); }
.earn-node--hyp { border-color: rgba(var(--dream-rose-rgb), .5); color: var(--dream-rose); }
.earn-node--exp { border-color: rgba(var(--dream-violet-rgb), .6); color: var(--dream-lilac); }
.earn-node--ev { border-color: rgba(126, 231, 135, .5); color: #7ee787; }
.earn-node--canon { border-color: rgba(240, 171, 252, .7); color: #fff; background: rgba(var(--dream-rose-rgb), .12); }

.earn-arrow {
    color: rgba(var(--dream-violet-rgb), .7);
    font-size: 1.8rem;
    line-height: 1;
}


/* minds */
.minds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-top: 3rem;
}

.mind-cell {
    border: 1px solid rgba(var(--dream-violet-rgb), .25);
    background: var(--dream-panel);
    padding: 2rem 1.8rem;
    border-radius: 3px;
}

.mind-cell h3 {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.5rem;
    color: var(--dream-lilac);
    margin: 0 0 .7rem;
}

.mind-cell p {
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--dream-dim);
    margin: 0;
}


/* roadmap */
.roadmap-list {
    list-style: none;
    margin: 4rem 0 0;
    padding: 0;
    position: relative;
}

.roadmap-item {
    position: relative;
    padding: 0 0 4rem 3.4rem;
    border-left: 1px solid rgba(var(--dream-violet-rgb), .3);
}

.roadmap-item:last-child {
    border-left-color: transparent;
}

.roadmap-item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: .4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dream-violet);
    box-shadow: 0 0 12px rgba(var(--dream-violet-rgb), .8);
}

.roadmap-item--proven::before { background: #7ee787; box-shadow: 0 0 12px rgba(126,231,135,.8); }
.roadmap-item--proposed::before { background: rgba(var(--dream-violet-rgb), .5); box-shadow: none; }

.roadmap-badge {
    display: inline-block;
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.05rem;
    letter-spacing: .18rem;
    padding: .4rem 1.1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.roadmap-badge--current { background: rgba(var(--dream-cyan-rgb), .16); color: var(--dream-cyan); }
.roadmap-badge--proven { background: rgba(126, 231, 135, .16); color: #7ee787; }
.roadmap-badge--proposed { background: rgba(var(--dream-violet-rgb), .18); color: var(--dream-lilac); }

.roadmap-item h3 {
    font-family: "montserrat-medium", sans-serif;
    font-size: 2.1rem;
    color: var(--dream-mist);
    margin: 0 0 1rem;
}

.roadmap-item p {
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--dream-dim);
    max-width: 74rem;
    margin: 0;
}


/* closing */
.dream-closing {
    padding: 12rem 0;
    text-align: center;
    background:
        radial-gradient(700px 400px at 50% 0%, rgba(var(--dream-violet-rgb), .22), transparent 65%),
        var(--dream-bg);
}

.dream-closing__line {
    font-family: "lora-italic", serif;
    font-size: 2.6rem;
    line-height: 1.5;
    color: var(--dream-lilac);
    max-width: 70rem;
    margin: 0 auto 4rem;
}

.dream-closing__line strong {
    display: block;
    color: #fff;
    font-family: "montserrat-light", sans-serif;
    font-style: normal;
    margin-top: .6rem;
}

.dream-closing__cta {
    display: flex;
    gap: 1.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.dream-btn {
    font-family: "montserrat-semibold", sans-serif;
    font-size: 1.3rem;
    letter-spacing: .18rem;
    text-transform: uppercase;
    padding: 1.5rem 3rem;
    border: 1px solid var(--dream-violet);
    color: #fff;
    background: rgba(var(--dream-violet-rgb), .18);
    border-radius: 2px;
    transition: all .25s ease;
}

.dream-btn:hover,
.dream-btn:focus {
    background: rgba(var(--dream-violet-rgb), .35);
    color: #fff;
}

.dream-btn--ghost {
    background: transparent;
    border-color: rgba(var(--dream-cyan-rgb), .5);
    color: var(--dream-cyan);
}

.dream-btn--ghost:hover,
.dream-btn--ghost:focus {
    border-color: var(--dream-cyan);
    color: #fff;
}


/* footer */
.dream-footer {
    background: #05040f;
    padding: 6rem 0;
    text-align: center;
    border-top: 1px solid rgba(var(--dream-violet-rgb), .2);
}

.dream-footer__mark {
    font-family: "montserrat-extrabold", sans-serif;
    font-size: 1.8rem;
    letter-spacing: .34rem;
    color: #fff;
    margin-bottom: 1.4rem;
}

.dream-footer__mark span { color: var(--dream-cyan); }

.dream-footer__note {
    font-family: "lora-italic", serif;
    font-size: 1.4rem;
    line-height: 1.7;
    color: rgba(236, 231, 255, .55);
    max-width: 66rem;
    margin: 0 auto 1.6rem;
}

.dream-footer__copy {
    font-family: "montserrat-medium", sans-serif;
    font-size: 1.2rem;
    color: rgba(236, 231, 255, .4);
}


/* ===================================================================
 * responsive
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
    .minds-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 900px) {
    .dream-title { font-size: 5.4rem; }
    .dream-h2 { font-size: 3.2rem; }
    .dream-trinity__grid,
    .substrate-grid,
    .produces-grid { grid-template-columns: 1fr; }
    .dream-hero { padding: 13rem 0 8rem; }
    .dream-section { padding: 7rem 0; }
}

@media only screen and (max-width: 600px) {
    .minds-grid { grid-template-columns: 1fr; }
    .dream-title { font-size: 4.2rem; }
}


/* ===================================================================
 * gradient layer — dream titles, panels, controls
 * =================================================================== */
:root {
    --dream-grad: linear-gradient(112deg, #a78bfa 0%, #67e8f9 50%, #f0abfc 100%);
    --dream-grad-btn: linear-gradient(112deg, #8b5cf6 0%, #67e8f9 100%);
}

.dream-title {
    background: var(--dream-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 42px rgba(139, 92, 246, .45));
}

.dream-kicker,
.dream-stage {
    background: var(--dream-grad-btn);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dream-h2 {
    background: var(--dream-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dream-btn {
    background: var(--dream-grad-btn);
    border-color: transparent;
    color: #08061a;
}

.dream-btn:hover,
.dream-btn:focus {
    background: var(--dream-grad);
    color: #08061a;
    box-shadow: 0 10px 34px rgba(139, 92, 246, .4);
}

.dream-btn--ghost {
    background: transparent;
    border-color: rgba(var(--dream-cyan-rgb), .6);
    color: var(--dream-cyan);
}

.dream-btn--ghost:hover,
.dream-btn--ghost:focus {
    background: transparent;
    border-color: var(--dream-cyan);
    color: #fff;
    box-shadow: none;
}

.earn-node {
    background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(103, 232, 249, .05));
}

.earn-node--dream { background: linear-gradient(135deg, rgba(103, 232, 249, .16), rgba(139, 92, 246, .05)); }
.earn-node--hyp { background: linear-gradient(135deg, rgba(240, 171, 252, .16), rgba(139, 92, 246, .05)); }
.earn-node--canon { background: var(--dream-grad); color: #08061a; }

.substrate-cell,
.mind-cell,
.produces-cell {
    background: linear-gradient(150deg, rgba(139, 92, 246, .10), rgba(8, 6, 26, .2));
}

.dream-trinity__cell {
    background: linear-gradient(150deg, rgba(139, 92, 246, .10), rgba(103, 232, 249, .04));
}

.dream-closing__line strong {
    background: var(--dream-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ===================================================================
 * "Lucid Fabric" wordmark — the shared LF HUD gold gradient
 * =================================================================== */
:root {
    --grad-fabric: linear-gradient(112deg, #d99e0d 0%, #fad159 45%, #fff5d1 100%);
}

.dream-header .site-logo--text,
.dream-footer__mark {
    white-space: nowrap;
    background: var(--grad-fabric);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dream-header .site-logo__dot,
.dream-footer__mark span {
    -webkit-text-fill-color: inherit;
    color: inherit;
}