:root {
    --forest: #143728;
    --deep: #0c2119;
    --leaf: #5f9b52;
    --lime: #c9df8a;
    --soil: #8a5a37;
    --clay: #c8794a;
    --water: #4a98a8;
    --blood: #7a1111;
    --blood-dark: #4b0909;
    --cream: #fffaf0;
    --paper: rgba(255, 255, 255, .88);
    --muted: #607168;
    --line: rgba(20, 55, 40, .14);
    --shadow: 0 22px 70px rgba(12, 33, 25, .14);
    --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--deep);
    background:
        radial-gradient(circle at 10% 4%, rgba(201, 223, 138, .75), transparent 34rem),
        radial-gradient(circle at 90% 12%, rgba(74, 152, 168, .28), transparent 30rem),
        linear-gradient(135deg, #fffaf0 0%, #edf5e4 48%, #f8efe2 100%);
    line-height: 1.6;
    position: relative;
}
/* Sacred geometry: Flower of Life tiling behind every page */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        /* ring grid forming the flower of life lattice */
        radial-gradient(circle at 0 0, transparent 17px, rgba(20,55,40,.10) 18px, transparent 19px),
        radial-gradient(circle at 22px 0, transparent 17px, rgba(20,55,40,.10) 18px, transparent 19px),
        radial-gradient(circle at 11px 19px, transparent 17px, rgba(20,55,40,.10) 18px, transparent 19px);
    background-size: 44px 38px, 44px 38px, 44px 38px;
    background-position: 0 0, 0 0, 0 0;
}
/* secondary larger vesica overlay for depth */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
    background:
        radial-gradient(circle at 30% 25%, transparent 120px, rgba(74,152,168,.06) 121px, transparent 122px),
        radial-gradient(circle at 70% 25%, transparent 120px, rgba(74,152,168,.06) 121px, transparent 122px),
        radial-gradient(circle at 50% 58%, transparent 120px, rgba(95,155,82,.06) 121px, transparent 122px);
}
.site-header, main, footer { position: relative; z-index: 1; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 250, 240, .86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
.nav {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: -.04em;
    text-decoration: none;
}
.brand-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    background: conic-gradient(from 90deg, var(--leaf), var(--water), var(--soil), var(--leaf));
    box-shadow: 0 14px 34px rgba(20, 55, 40, .22);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 760;
}
.nav-links a {
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--forest);
    background: rgba(201, 223, 138, .35);
}
.hero {
    padding: clamp(48px, 8vw, 106px) 0 46px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: clamp(30px, 5vw, 68px);
    align-items: center;
}
.page-hero {
    padding: clamp(42px, 7vw, 86px) 0 34px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--forest);
    background: rgba(255, 255, 255, .72);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 900;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--leaf);
    box-shadow: 0 0 0 8px rgba(95, 155, 82, .15);
}
h1, h2, h3 { margin: 0; line-height: 1.08; }
h1 {
    margin-top: 22px;
    color: var(--blood);
    font-size: clamp(2.7rem, 8vw, 6.4rem);
    letter-spacing: -.075em;
    text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 8px 24px rgba(122,17,17,.14);
}
h2 {
    color: var(--blood);
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -.055em;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.blood-print {
    color: var(--blood);
    font-weight: 950;
    letter-spacing: -.08em;
    text-transform: uppercase;
    filter: contrast(1.06);
}
.blood-print::selection, h1::selection, h2::selection { background: rgba(122,17,17,.18); }
.coexist-word { display: block; }
.coexist-symbolic {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 18px);
    align-items: center;
    margin: 12px 0 4px;
    color: var(--blood-dark);
    font-size: clamp(1.6rem, 4.2vw, 3.8rem);
    letter-spacing: .02em;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,.86), 0 4px 18px rgba(75,9,9,.12);
}
.title-break {
    display: block;
    color: var(--blood);
    font-size: clamp(2.2rem, 6.5vw, 5.4rem);
}
.lede {
    max-width: 760px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--forest); color: white; box-shadow: 0 18px 38px rgba(20, 55, 40, .22); }
.btn.secondary { background: rgba(255, 255, 255, .74); color: var(--forest); border-color: var(--line); }
.dashboard-card {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 40px;
    color: white;
    background:
        linear-gradient(155deg, rgba(12, 33, 25, .96), rgba(20, 55, 40, .9)),
        radial-gradient(circle at 75% 25%, rgba(201, 223, 138, .55), transparent 22rem);
    box-shadow: var(--shadow);
}
.perma-grid {
    position: absolute;
    inset: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    opacity: .9;
}
.tile {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    padding: 14px;
    display: flex;
    align-items: end;
    font-size: .8rem;
    font-weight: 850;
}
.tile:nth-child(2), .tile:nth-child(6) { background: rgba(74, 152, 168, .22); }
.tile:nth-child(5) { background: rgba(201, 223, 138, .22); color: var(--lime); transform: scale(1.06); }
.tile:nth-child(7) { background: rgba(200, 121, 74, .24); }
section { padding: clamp(44px, 7vw, 88px) 0; }
.section-head {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(290px, 1fr);
    gap: 26px;
    align-items: end;
    margin-bottom: 32px;
}
.kicker {
    margin-bottom: 12px;
    color: var(--clay);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .13em;
    position: relative;
    padding-left: 22px;
}
.kicker::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 14px; height: 16px;
    transform: translateY(-50%);
    background: var(--clay);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    opacity: .85;
}
.section-head p, .intro { margin: 0; color: var(--muted); font-size: 1.05rem; }
.grid-2, .example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3, .steps-grid, .greenhouse-grid, .region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4, .knowledge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card, .form-card, .chat-panel, .step-card, .greenhouse-card, .stat-card, .knowledge-card, .fascitory-card, .example-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: 0 18px 54px rgba(12, 33, 25, .08);
}
.card, .form-card, .chat-panel, .step-card, .greenhouse-card, .stat-card, .knowledge-card, .fascitory-card, .example-card { padding: 24px; }
.card p, .step-card p, .greenhouse-card p, .stat-card p, .knowledge-card p, .fascitory-card p, .example-card p { color: var(--muted); }
.step-card h3, .greenhouse-card h3, .stat-card h3, .knowledge-card h3, .fascitory-card h3, .example-card h3, .card h3 { color: var(--forest); font-size: 1.22rem; letter-spacing: -.03em; }
.step-num, .fascitory-level {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 15px;
    color: var(--forest);
    background: rgba(95, 155, 82, .16);
    font-weight: 950;
}
.fascitory-level { color: white; background: var(--forest); }
.facet-pill, .example-meta, .badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--forest);
    background: rgba(201, 223, 138, .42);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.example-meta { background: rgba(74, 152, 168, .16); }
.badge { margin: 0; text-transform: none; letter-spacing: 0; }
.mini-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: .92rem;
}
.fascitory-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.example-card, .greenhouse-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,240,.86)); }
.media-card { overflow:hidden; padding:0; }
.media-frame { aspect-ratio: 16 / 10; background:rgba(20,55,40,.08); overflow:hidden; }
.media-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.media-body { padding:24px; }
.media-body p { color:var(--muted); }
.media-source { font-size:.88rem; color:var(--muted); word-break:break-word; }
.media-source a { font-weight:850; color:var(--forest); }
.render-slot {
    min-height: 250px;
    display:grid;
    place-items:center;
    padding:24px;
    border-radius:24px;
    border:2px dashed rgba(122,17,17,.28);
    background:
        linear-gradient(rgba(122,17,17,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,17,17,.05) 1px, transparent 1px),
        radial-gradient(circle at 50% 30%, rgba(255,229,120,.24), rgba(255,250,240,.72));
    background-size:24px 24px, 24px 24px, auto;
    color:var(--blood);
    text-align:center;
    font-weight:950;
}
.render-prompt {
    margin-top:14px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.72);
    border:1px solid var(--line);
    color:var(--deep);
    font-size:.92rem;
}
.progression-card {
    position:relative;
    overflow:hidden;
}
.progression-card::after {
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:5px;
    background:linear-gradient(90deg, var(--blood), var(--clay), var(--leaf), var(--water));
}
.mega-canvas {
    position: relative;
    min-height: 760px;
    overflow: auto;
    border-radius: 34px;
    border: 1px solid rgba(20,55,40,.18);
    background:
        radial-gradient(circle at 50% 18%, rgba(255,229,120,.35), transparent 18%),
        linear-gradient(rgba(20,55,40,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,55,40,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,250,240,.96) 0 32%, rgba(138,90,55,.28) 32% 100%);
    background-size:auto, 30px 30px, 30px 30px, auto;
    box-shadow: var(--shadow);
}
.mega-formulation {
    position: relative;
    width: 1180px;
    min-height: 760px;
    transform-origin: top left;
}
.mega-spire {
    position:absolute; left:50%; top:4%; width:86px; height:300px; margin-left:-43px;
    border:4px solid rgba(122,17,17,.72);
    border-radius:44px 44px 18px 18px;
    background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,229,120,.34), rgba(74,152,168,.24));
    box-shadow:0 0 26px rgba(255,229,120,.45);
}
.mega-oculus { position:absolute; left:50%; top:2%; width:110px; height:110px; margin-left:-55px; border-radius:50%; background:radial-gradient(circle, #fff, rgba(74,152,168,.62)); border:5px solid var(--blood); z-index:5; }
.mega-underground { position:absolute; left:7%; right:7%; top:34%; height:50%; border:5px solid rgba(20,55,40,.7); border-top:0; border-radius:0 0 80px 80px; background:rgba(255,250,240,.62); }
.mega-ring { position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); border-radius:50%; border:2px dashed rgba(20,55,40,.18); }
.mega-ring.r1 { width:230px; height:230px; } .mega-ring.r2 { width:430px; height:430px; } .mega-ring.r3 { width:680px; height:680px; }
.mega-node {
    position:absolute; z-index:6; width:150px; min-height:92px; padding:12px;
    border-radius:22px; border:1px solid var(--line);
    background:rgba(255,255,255,.86); box-shadow:0 12px 30px rgba(12,33,25,.12);
    color:var(--muted); font-size:.82rem;
}
.mega-node strong { display:block; color:var(--forest); font-size:.92rem; margin-bottom:4px; }
.mega-node.n1 { left:43%; top:20%; } .mega-node.n2 { left:16%; top:41%; } .mega-node.n3 { right:16%; top:41%; }
.mega-node.n4 { left:10%; top:64%; } .mega-node.n5 { right:10%; top:64%; } .mega-node.n6 { left:43%; top:70%; }
.mega-channel { position:absolute; height:8px; border-radius:999px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 14px, rgba(74,152,168,.45) 14px 24px); z-index:2; }
.mega-channel.c1 { left:48%; top:36%; width:250px; transform:rotate(28deg); }
.mega-channel.c2 { right:48%; top:36%; width:250px; transform:rotate(-28deg); }
.mega-channel.c3 { left:34%; top:62%; width:380px; transform:rotate(0deg); }
.mega-channel.c4 { left:48%; top:52%; width:320px; transform:rotate(96deg); }
.mega-water { position:absolute; left:13%; right:13%; bottom:9%; height:18px; border-radius:999px; background:repeating-linear-gradient(90deg, var(--water) 0 22px, rgba(255,255,255,.7) 22px 34px); }
.mega-bio { position:absolute; left:36%; top:47%; width:28%; height:18%; border-radius:50%; background:radial-gradient(circle, rgba(140,255,190,.5), rgba(20,55,40,.12)); box-shadow:0 0 28px rgba(140,255,190,.32); }
.mega-zoom-note { color:var(--muted); font-size:.9rem; margin-top:10px; }
.example-card::before, .greenhouse-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--water), var(--lime), var(--clay));
}
.safety-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #783d23;
    background: rgba(200, 121, 74, .14);
    border: 1px solid rgba(200, 121, 74, .24);
    font-size: .92rem;
}
.trust-note {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #214c2b;
    background: rgba(201, 223, 138, .34);
    border: 1px solid rgba(95, 155, 82, .22);
    font-size: .92rem;
}
.elementary { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 22px; align-items: stretch; }
.check-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; color: var(--muted); align-items: start; }
.check { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: white; background: var(--leaf); font-weight: 950; }
.zone-visual {
    min-height: 430px;
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 12%, rgba(201,223,138,.7) 12% 25%, rgba(95,155,82,.36) 25% 42%, rgba(74,152,168,.28) 42% 58%, rgba(138,90,55,.28) 58% 78%, rgba(20,55,40,.35) 78% 100%);
    box-shadow: var(--shadow);
}
.zone-label { position: absolute; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.76); border: 1px solid var(--line); color: var(--forest); font-size: .82rem; font-weight: 900; }
.z0 { left: 45%; top: 46%; } .z1 { left: 58%; top: 32%; } .z2 { left: 25%; top: 28%; } .z3 { right: 12%; bottom: 24%; } .z4 { left: 13%; bottom: 18%; } .z5 { right: 20%; top: 13%; }
.blueprint-board {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(20, 55, 40, .18);
    background:
        linear-gradient(rgba(20,55,40,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,55,40,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(237,245,228,.78));
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: var(--shadow);
}
.blueprint-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(138,90,55,.28), rgba(77,55,37,.48));
    border-top: 3px solid rgba(138,90,55,.55);
}
.blueprint-berm {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 18%;
    height: 30%;
    border-radius: 55% 55% 0 0;
    background: linear-gradient(180deg, rgba(95,155,82,.58), rgba(138,90,55,.44));
}
.blueprint-room {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 14%;
    height: 34%;
    border: 4px solid rgba(20,55,40,.78);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    background: rgba(255,250,240,.72);
}
.blueprint-glazing {
    position: absolute;
    left: 31%;
    right: 12%;
    bottom: 48%;
    height: 15%;
    transform: skewX(-24deg);
    border: 3px solid rgba(74,152,168,.8);
    background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(74,152,168,.22));
}
.blueprint-light {
    position: absolute;
    right: 10%;
    top: 10%;
    width: 38%;
    height: 42%;
    background: linear-gradient(152deg, rgba(255,229,120,.82) 0 9%, transparent 9% 100%);
    clip-path: polygon(100% 0, 0 70%, 100% 100%);
    opacity: .68;
}
.blueprint-drain {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 9%;
    height: 12px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--water) 0 16px, rgba(255,255,255,.65) 16px 24px);
}
.blueprint-bed {
    position: absolute;
    left: 26%;
    bottom: 20%;
    width: 22%;
    height: 10%;
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(180deg, rgba(95,155,82,.72), rgba(77,55,37,.55));
}
.blueprint-bed.two { left: auto; right: 26%; }
.blueprint-label {
    position: absolute;
    z-index: 2;
    max-width: 210px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    color: var(--forest);
    font-size: .8rem;
    font-weight: 850;
}
.bp-a { right: 8%; top: 8%; } .bp-b { left: 8%; top: 25%; } .bp-c { left: 10%; bottom: 5%; } .bp-d { right: 8%; bottom: 22%; }
.material-chip {
    display: inline-flex;
    margin: 4px 6px 4px 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(138,90,55,.12);
    color: var(--soil);
    font-size: .82rem;
    font-weight: 850;
}
.visual-panel {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,245,228,.8));
    box-shadow: var(--shadow);
}
.visual-sky { position:absolute; inset:0 0 54% 0; background: linear-gradient(180deg, rgba(255,229,120,.34), rgba(74,152,168,.16)); }
.visual-soil { position:absolute; inset:46% 0 0 0; background: linear-gradient(180deg, rgba(138,90,55,.32), rgba(77,55,37,.54)); }
.visual-tunnel { position:absolute; left:13%; right:13%; bottom:16%; height:36%; border:4px solid rgba(20,55,40,.76); border-top:0; border-radius:0 0 42px 42px; background:rgba(255,250,240,.66); }
.visual-water { position:absolute; left:8%; right:8%; bottom:10%; height:14px; border-radius:999px; background:repeating-linear-gradient(90deg, var(--water) 0 22px, rgba(255,255,255,.7) 22px 32px); }
.visual-beam { position:absolute; right:9%; top:8%; width:44%; height:50%; clip-path:polygon(100% 0, 0 58%, 100% 100%); background:linear-gradient(150deg, rgba(255,229,120,.84), transparent 72%); opacity:.74; }
.visual-mirror { position:absolute; right:30%; top:36%; width:26%; height:10px; transform:rotate(-22deg); border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(74,152,168,.58)); box-shadow:0 0 18px rgba(255,255,255,.8); }
.visual-filter { position:absolute; left:14%; bottom:12%; width:24%; height:25%; border-radius:18px; border:2px solid rgba(20,55,40,.45); background:linear-gradient(180deg, rgba(255,255,255,.65) 0 25%, rgba(138,90,55,.32) 25% 50%, rgba(30,30,30,.42) 50% 76%, rgba(74,152,168,.34) 76%); }
.visual-grow { position:absolute; right:17%; bottom:20%; width:24%; height:17%; border-radius:18px 18px 8px 8px; background:linear-gradient(180deg, rgba(95,155,82,.82), rgba(77,55,37,.55)); }
.visual-roof { position:absolute; left:9%; right:9%; top:32%; height:20%; border-radius:55% 55% 0 0; background:linear-gradient(180deg, rgba(95,155,82,.64), rgba(138,90,55,.35)); }
.visual-post { position:absolute; bottom:20%; width:8px; height:32%; border-radius:999px; background:rgba(138,90,55,.68); }
.visual-post.one { left:26%; } .visual-post.two { right:26%; }
.visual-note { position:absolute; z-index:2; padding:7px 9px; border-radius:12px; background:rgba(255,255,255,.82); border:1px solid var(--line); color:var(--forest); font-size:.78rem; font-weight:850; }
.vn-a { top:8%; left:7%; } .vn-b { top:42%; right:7%; } .vn-c { bottom:7%; left:7%; } .vn-d { bottom:24%; right:7%; }
.visual-flow { display:grid; gap:10px; margin-top:16px; }
.flow-step { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; color:var(--muted); }
.flow-step span { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--forest); font-weight:950; }
.spire-board {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(20, 55, 40, .18);
    background:
        linear-gradient(rgba(20,55,40,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,55,40,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,229,120,.16), rgba(255,250,240,.86) 30%, rgba(138,90,55,.22) 100%);
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: var(--shadow);
}
.spire-oculus {
    position:absolute; left:50%; top:7%; width:84px; height:84px; margin-left:-42px;
    border-radius:50%;
    border:4px solid var(--forest);
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(74,152,168,.5));
    box-shadow: 0 0 26px rgba(255,255,255,.7);
    z-index:3;
}
.spire-shaft {
    position:absolute; left:50%; top:12%; bottom:30%; width:60px; margin-left:-30px;
    border:3px solid rgba(20,55,40,.6);
    border-radius:14px;
    background: linear-gradient(180deg, rgba(255,229,120,.5), rgba(255,255,255,.4));
    z-index:2;
}
.spire-lens {
    position:absolute; left:50%; top:20%; width:90px; height:24px; margin-left:-45px;
    transform:rotate(-8deg);
    border-radius:999px;
    background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(74,152,168,.6));
    box-shadow:0 0 16px rgba(255,255,255,.8);
    z-index:4;
}
.spire-mirror {
    position:absolute; width:70px; height:14px; border-radius:999px;
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(201,223,138,.7));
    box-shadow:0 0 14px rgba(255,255,255,.8);
    z-index:4;
}
.spire-mirror.m1 { left:42%; top:42%; transform:rotate(28deg); }
.spire-mirror.m2 { right:42%; top:42%; transform:rotate(-28deg); }
.spire-mirror.m3 { left:40%; top:56%; transform:rotate(18deg); }
.spire-mirror.m4 { right:40%; top:56%; transform:rotate(-18deg); }
.spire-tube {
    position:absolute; height:10px; border-radius:999px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 12px, rgba(74,152,168,.5) 12px 20px);
    z-index:1;
}
.spire-tube.t1 { left:26%; top:46%; width:22%; transform:rotate(20deg); }
.spire-tube.t2 { right:26%; top:46%; width:22%; transform:rotate(-20deg); }
.spire-tube.t3 { left:24%; top:60%; width:24%; transform:rotate(12deg); }
.spire-tube.t4 { right:24%; top:60%; width:24%; transform:rotate(-12deg); }
.spire-room {
    position:absolute; bottom:6%; width:26%; height:22%;
    border:3px solid rgba(20,55,40,.7);
    border-radius:18px;
    background: rgba(255,250,240,.7);
    z-index:2;
}
.spire-room.r1 { left:6%; } .spire-room.r2 { right:6%; }
.spire-viewport {
    position:absolute; top:18%; width:30px; height:30px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,229,120,.9), rgba(74,152,168,.5));
    border:2px solid var(--forest);
    box-shadow:0 0 12px rgba(255,255,255,.7);
}
.spire-room.r1 .spire-viewport { right:10%; }
.spire-room.r2 .spire-viewport { left:10%; }
.spire-beam {
    position:absolute; top:5%; left:50%; margin-left:-80px; width:160px; height:50%;
    background: linear-gradient(180deg, rgba(255,229,120,.55), transparent 80%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    opacity:.6; z-index:0;
}
.spire-label {
    position:absolute; z-index:5; padding:6px 9px; border-radius:12px;
    background:rgba(255,255,255,.85); border:1px solid var(--line);
    color:var(--forest); font-size:.76rem; font-weight:850;
}
.sl-o { top:2%; left:54%; } .sl-l { top:18%; left:60%; } .sl-m { top:40%; left:8%; }
.sl-r { bottom:8%; left:34%; } .sl-c { bottom:30%; right:8%; }
.sacred-board {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(20, 55, 40, .18);
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(237,245,228,.78));
    box-shadow: var(--shadow);
}
.sacred-ring {
    position: absolute; left:50%; top:42%; transform:translate(-50%,-50%);
    border:2px solid rgba(20,55,40,.28);
    border-radius:50%;
}
.sacred-ring.r1 { width:120px; height:120px; }
.sacred-ring.r2 { width:220px; height:220px; border-style:dashed; border-color:rgba(20,55,40,.2); }
.sacred-ring.r3 { width:340px; height:340px; border-color:rgba(20,55,40,.16); }
.sacred-ring.r4 { width:460px; height:460px; border-style:dashed; border-color:rgba(20,55,40,.12); }
.sacred-spoke {
    position:absolute; left:50%; top:42%; width:240px; height:2px;
    transform-origin:left center;
    background: linear-gradient(90deg, rgba(20,55,40,.4), rgba(20,55,40,0));
}
.sacred-anchor {
    position:absolute; left:50%; top:42%; width:26px; height:26px; margin:-13px 0 0 -13px;
    border-radius:50%;
    background: radial-gradient(circle, var(--blood), var(--blood-dark));
    box-shadow: 0 0 0 6px rgba(122,17,17,.18), 0 0 22px rgba(255,229,120,.6);
    z-index:5;
}
.sacred-hub {
    position:absolute; width:22px; height:22px; border-radius:50%;
    border:2px solid var(--forest);
    background: rgba(201,223,138,.7);
    z-index:4;
}
.sacred-node {
    position:absolute; width:16px; height:16px;
    background: rgba(74,152,168,.8);
    transform:rotate(45deg);
    z-index:3;
}
.sacred-form {
    position:absolute; z-index:2;
    border:2px solid rgba(20,55,40,.34);
    background: rgba(255,255,255,.5);
}
.sacred-form.hex {
    width:46px; height:52px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border:0; background: rgba(95,155,82,.34);
}
.sacred-form.pent {
    width:42px; height:42px; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
    border:0; background: rgba(200,121,74,.4);
}
.sacred-label {
    position:absolute; z-index:6; padding:5px 8px; border-radius:10px;
    background:rgba(255,255,255,.86); border:1px solid var(--line);
    color:var(--forest); font-size:.74rem; font-weight:850;
}
.scl-anchor { left:50%; top:42%; margin:14px 0 0 -40px; }
.scl-hub { top:54%; left:54%; }
.scl-general { top:18%; right:14%; }
.scl-special { bottom:10%; left:14%; }
.sacred-legend { display:grid; gap:10px; margin-top:8px; }
.sacred-legend > div { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; }
.sacred-dot { width:18px; height:18px; border-radius:50%; }
.sacred-dot.anchor { background: radial-gradient(circle, var(--blood), var(--blood-dark)); }
.sacred-dot.hub { border:2px solid var(--forest); background: rgba(201,223,138,.7); }
.sacred-dot.general { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(95,155,82,.5); border-radius:0; }
.sacred-dot.special { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); background: rgba(200,121,74,.55); border-radius:0; }
.water-board {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(20, 55, 40, .18);
    background:
        linear-gradient(180deg,
            #bfe6f0 0%, #d6f0e6 16%,
            #6cc0c8 30%, #3a8fa0 50%,
            #1f5d72 68%, #103a4e 100%);
    box-shadow: var(--shadow);
}
/* --- SKY --- */
.water-sky { position:absolute; inset:0 0 70% 0; background: linear-gradient(180deg, rgba(255,229,120,.42), rgba(214,240,230,.18)); }
.water-cloud {
    position:absolute; border-radius:50%;
    background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.9), rgba(255,255,255,.2));
    filter: blur(3px); z-index:2;
}
.water-cloud.c1 { left:10%; top:8%; width:120px; height:34px; }
.water-cloud.c2 { right:12%; top:5%; width:90px; height:26px; }
.water-cloud.c3 { left:60%; top:12%; width:70px; height:20px; }
.water-sun {
    position:absolute; left:50%; top:5%; width:84px; height:84px; margin-left:-42px; border-radius:50%;
    background: radial-gradient(circle, #fff7cf 0%, #ffe59c 55%, rgba(255,229,120,0) 78%);
    box-shadow:0 0 0 24px rgba(255,229,120,.18), 0 0 60px rgba(255,229,120,.5);
    z-index:3;
}
.water-sunray {
    position:absolute; left:50%; top:14%; width:140%; height:42%; margin-left:-70%;
    background:
        conic-gradient(from 95deg at 50% 0%,
            transparent 0deg, rgba(255,237,160,.14) 4deg, transparent 9deg,
            transparent 86deg, rgba(255,237,160,.14) 90deg, transparent 94deg,
            transparent 176deg, rgba(255,237,160,.14) 180deg, transparent 184deg);
    z-index:2; mix-blend-mode:screen;
}
/* --- SEA SURFACE --- */
.water-surface {
    position:absolute; left:0; right:0; top:38%; height:8%;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    z-index:2;
}
.water-wave {
    position:absolute; left:0; right:0; height:6px; border-radius:999px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 18px, rgba(255,255,255,0) 18px 34px);
    z-index:3;
}
.water-wave.w1 { top:44%; }
.water-wave.w2 { top:62%; opacity:.5; }
.water-wave.w3 { top:80%; opacity:.35; }
.water-glint {
    position:absolute; top:46%; left:50%; width:46%; height:120px; margin-left:-23%; z-index:3;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.7), transparent 70%);
    opacity:.6;
}
/* --- CIRCULAR RAFT DISC (perspective ellipse) --- */
.water-raft {
    position:absolute; left:50%; top:50%; width:64%; height:60px; margin-left:-32%;
    border-radius:50%;
    background: linear-gradient(180deg, rgba(77,55,37,.92), rgba(40,28,18,.95));
    box-shadow:
        0 26px 40px rgba(6,24,32,.55),
        0 8px 0 rgba(6,24,32,.35),
        inset 0 3px 0 rgba(255,255,255,.25),
        inset 0 -6px 12px rgba(0,0,0,.4);
    z-index:5;
}
/* buoyancy floats around the rim */
.water-float {
    position:absolute; width:34px; height:18px; border-radius:50%;
    background: radial-gradient(ellipse at 50% 30%, #f4f1e6, #c7b489);
    box-shadow: 0 6px 10px rgba(6,24,32,.4);
    z-index:6;
}
.water-float.fl1 { left:20%; top:53%; }
.water-float.fl2 { left:50%; top:57%; margin-left:-17px; }
.water-float.fl3 { right:20%; top:53%; }
/* grow bed ring on top of the disc */
.water-growring {
    position:absolute; left:50%; top:47%; width:50%; height:34px; margin-left:-25%;
    border-radius:50%;
    background:
        repeating-conic-gradient(from 0deg, rgba(95,155,82,.95) 0deg 14deg, rgba(120,170,95,.9) 14deg 28deg);
    box-shadow: inset 0 4px 0 rgba(255,255,255,.25), 0 4px 8px rgba(6,24,32,.4);
    z-index:6;
}
/* open light ring (gap) between grow ring and dome */
.water-ring-open {
    position:absolute; left:50%; top:48%; width:36%; height:24px; margin-left:-18%;
    border-radius:50%;
    border:4px dashed rgba(255,255,255,.45);
    box-shadow: 0 0 18px rgba(255,229,120,.3);
    z-index:6;
}
/* --- CENTRAL GEODESIC DOME --- */
.water-dome {
    position:absolute; left:50%; top:30%; width:26%; height:26%; margin-left:-13%;
    border-radius:50% 50% 42% 42% / 60% 60% 40% 40%;
    background:
        radial-gradient(circle at 38% 28%, rgba(255,255,255,.95), rgba(160,210,220,.6) 45%, rgba(74,152,168,.5) 80%);
    box-shadow: 0 14px 30px rgba(6,24,32,.4), inset 0 0 30px rgba(255,255,255,.35);
    z-index:7;
    overflow:hidden;
}
/* dome geodesic ribs */
.water-dome::before, .water-dome::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:
        repeating-conic-gradient(from 20deg, transparent 0deg 28deg, rgba(40,90,100,.4) 28deg 30deg);
    -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 40%, #000 60%, transparent 72%);
            mask: radial-gradient(ellipse 70% 80% at 50% 40%, #000 60%, transparent 72%);
}
.water-dome::after { transform: rotate(46deg); opacity:.7; }
/* dome top vent */
.water-vent {
    position:absolute; left:50%; top:30%; width:6%; height:12px; margin-left:-3%;
    border-radius:999px; background:rgba(20,55,40,.7);
    z-index:8;
}
/* --- FRESNEL LENS CATCHING SUN --- */
.water-fresnel {
    position:absolute; left:50%; top:33%; width:22%; height:16px; margin-left:-11%;
    border-radius:999px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, rgba(120,190,210,.6) 4px 8px);
    box-shadow:0 0 24px rgba(255,255,255,.8), inset 0 2px 0 rgba(255,255,255,.6);
    z-index:9;
}
/* --- REFRACTED LIGHT FAN TO PORTHOLE/WATER GAPS --- */
.water-refract {
    position:absolute; left:50%; top:38%; width:64%; height:30%; margin-left:-32%;
    background:
        conic-gradient(from 90deg at 50% 0%,
            transparent 0deg, rgba(255,237,160,.34) 5deg, transparent 11deg,
            transparent 80deg, rgba(255,237,160,.34) 90deg, transparent 100deg,
            transparent 170deg, rgba(255,237,160,.34) 180deg, transparent 190deg,
            transparent 260deg, rgba(255,237,160,.34) 270deg, transparent 280deg);
    z-index:4; mix-blend-mode:screen;
}
/* downward shaft into water gap */
.water-shaft {
    position:absolute; left:50%; top:50%; width:14%; height:34%; margin-left:-7%;
    background: linear-gradient(180deg, rgba(255,237,160,.5), rgba(120,200,210,.1));
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    z-index:4; mix-blend-mode:screen;
}
/* --- RIM PORTHOLES --- */
.water-porthole {
    position:absolute; width:24px; height:24px; border-radius:50%;
    border:3px solid rgba(248,244,232,.92);
    background: radial-gradient(circle, rgba(255,237,160,.85), rgba(20,55,80,.7));
    box-shadow:0 0 14px rgba(255,237,160,.6), inset 0 2px 4px rgba(0,0,0,.4);
    z-index:8;
}
.water-porthole.p1 { left:23%; top:49%; }
.water-porthole.p2 { left:50%; top:53%; margin-left:-12px; }
.water-porthole.p3 { right:23%; top:49%; }
.water-porthole.p4 { left:50%; top:45%; margin-left:-12px; }
/* --- MOORING + MOTION --- */
.water-anchor {
    position:absolute; left:8%; top:54%; width:46%; height:2px; z-index:5;
    background: linear-gradient(90deg, rgba(60,40,20,.7), transparent);
    transform: rotate(-6deg);
}
.water-motion {
    position:absolute; left:9%; top:50%; width:18px; height:18px; border-radius:50%;
    border:2.5px solid rgba(255,255,255,.9); border-top-color:transparent;
    z-index:9; animation: waterspin 4s linear infinite;
}
.water-motion.two { left:auto; right:9%; top:52%; }
@keyframes waterspin { to { transform: rotate(360deg); } }
/* --- MARINE LIFE + SEABED --- */
.water-fish {
    position:absolute; z-index:5; color:rgba(255,255,255,.9); font-size:1.2rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.water-fish.f1 { left:14%; top:72%; } .water-fish.f2 { right:14%; top:82%; } .water-fish.f3 { left:30%; top:90%; font-size:.9rem; }
.water-bubble {
    position:absolute; border-radius:50%; z-index:5;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(255,255,255,.1));
}
.water-bubble.b1 { left:24%; top:64%; width:10px; height:10px; }
.water-bubble.b2 { left:26%; top:70%; width:6px; height:6px; }
.water-bubble.b3 { right:28%; top:74%; width:8px; height:8px; }
.water-grass {
    position:absolute; bottom:0; left:0; right:0; height:18%;
    background:
        repeating-linear-gradient(96deg, rgba(60,120,70,.7) 0 6px, transparent 6px 16px),
        linear-gradient(180deg, transparent, rgba(20,55,40,.5));
    z-index:4;
}
.water-grass::after {
    content:''; position:absolute; inset:0;
    background: repeating-linear-gradient(80deg, rgba(40,90,50,.6) 0 4px, transparent 4px 20px);
}
.water-reef {
    position:absolute; bottom:2%; left:40%; width:20%; height:10%; z-index:4;
    background: radial-gradient(ellipse at 50% 100%, rgba(180,90,70,.6), transparent 70%);
    border-radius:50%;
}
/* --- LABELS --- */
.water-label {
    position:absolute; z-index:10; padding:5px 9px; border-radius:10px;
    background:rgba(255,255,255,.9); border:1px solid var(--line);
    color:var(--forest); font-size:.74rem; font-weight:850;
    box-shadow:0 4px 12px rgba(6,24,32,.2);
}
.wl-dome { left:8%; top:30%; }
.wl-grow { left:6%; top:46%; }
.wl-fresnel { right:7%; top:24%; }
.wl-view { right:6%; top:44%; }
.wl-float { left:8%; top:56%; }
.wl-grass { left:8%; bottom:3%; }
.network-layout { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; color: var(--forest); font-weight: 850; font-size: .9rem; }
input, select, textarea {
    width: 100%;
    border: 1px solid rgba(20, 55, 40, .18);
    border-radius: 16px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, .82);
    color: var(--deep);
    font: inherit;
}
textarea { min-height: 116px; resize: vertical; }
button.btn { cursor: pointer; font: inherit; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice, .error { margin-bottom: 18px; padding: 14px 16px; border-radius: 18px; font-weight: 800; }
.notice { color: #214c2b; background: rgba(201, 223, 138, .45); border: 1px solid rgba(95, 155, 82, .22); }
.error { color: #793a21; background: rgba(200, 121, 74, .16); border: 1px solid rgba(200, 121, 74, .26); }
.post-list, .chat-list { display: grid; gap: 14px; margin-top: 18px; }
.post, .message { padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: .82rem; }
.empty { color: var(--muted); padding: 18px; border: 1px dashed var(--line); border-radius: 18px; }
.cta {
    margin: 38px 0 72px;
    padding: clamp(28px, 6vw, 56px);
    border-radius: 38px;
    color: white;
    background: linear-gradient(135deg, rgba(12,33,25,.96), rgba(20,55,40,.9)), radial-gradient(circle at 80% 20%, rgba(201,223,138,.55), transparent 22rem);
    box-shadow: var(--shadow);
}
.cta h2 { color: white; }
.cta p { max-width: 820px; color: rgba(255,255,255,.82); }
footer { padding: 30px 0 44px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ===== Per-page gentle pastel themes =====
   Each theme softly recolors the page background while keeping text readable.
   All hues are light, low-saturation, and easy on the eyes. */
body[class^="theme-"] {
    background:
        radial-gradient(circle at 12% 6%, var(--bg-accent1), transparent 34rem),
        radial-gradient(circle at 88% 12%, var(--bg-accent2), transparent 30rem),
        linear-gradient(135deg, var(--bg-base1) 0%, var(--bg-base2) 52%, var(--bg-base3) 100%);
}

/* Home — warm cream + sage (default feel) */
body.theme-home {
    --bg-base1:#fffaf0; --bg-base2:#edf5e4; --bg-base3:#f8efe2;
    --bg-accent1:rgba(201,223,138,.75); --bg-accent2:rgba(74,152,168,.28);
}
/* Evidence — soft rose */
body.theme-evidence {
    --bg-base1:#fff5f5; --bg-base2:#fbeaec; --bg-base3:#fdeef0;
    --bg-accent1:rgba(244,193,193,.55); --bg-accent2:rgba(255,221,160,.4);
}
/* Sources — calm lavender */
body.theme-sources {
    --bg-base1:#f8f6ff; --bg-base2:#efeafc; --bg-base3:#f3f0fb;
    --bg-accent1:rgba(196,184,245,.5); --bg-accent2:rgba(210,225,255,.45);
}
/* Media — soft peach */
body.theme-media {
    --bg-base1:#fff7f0; --bg-base2:#fdeee2; --bg-base3:#fff1ea;
    --bg-accent1:rgba(255,209,173,.5); --bg-accent2:rgba(255,231,190,.45);
}
/* Renderings — pale gold */
body.theme-renderings {
    --bg-base1:#fffdf3; --bg-base2:#fbf6e2; --bg-base3:#fff9e8;
    --bg-accent1:rgba(255,233,157,.5); --bg-accent2:rgba(255,218,180,.4);
}
/* Mega — soft rose-gold */
body.theme-mega {
    --bg-base1:#fff6f4; --bg-base2:#fbe9ec; --bg-base3:#fdeef0;
    --bg-accent1:rgba(255,196,210,.55); --bg-accent2:rgba(255,221,170,.4);
}
/* Knowledge — soft mint */
body.theme-knowledge {
    --bg-base1:#f4fbf3; --bg-base2:#e9f6ec; --bg-base3:#f1faf2;
    --bg-accent1:rgba(190,235,200,.55); --bg-accent2:rgba(214,240,225,.45);
}
/* Blog — soft butter */
body.theme-blog {
    --bg-base1:#fffef0; --bg-base2:#fbf8de; --bg-base3:#fdfaea;
    --bg-accent1:rgba(245,235,170,.5); --bg-accent2:rgba(225,240,200,.4);
}
/* Blueprints — soft sky */
body.theme-blueprints {
    --bg-base1:#f2faff; --bg-base2:#e6f2fb; --bg-base3:#eef7fc;
    --bg-accent1:rgba(180,215,245,.5); --bg-accent2:rgba(205,230,250,.45);
}
/* Visuals — soft aqua */
body.theme-visuals {
    --bg-base1:#f0fbfc; --bg-base2:#e4f5f6; --bg-base3:#eef9fa;
    --bg-accent1:rgba(175,225,228,.5); --bg-accent2:rgba(205,240,235,.45);
}
/* Spire — soft dawn */
body.theme-spire {
    --bg-base1:#fff6f2; --bg-base2:#fdeee4; --bg-base3:#fff2eb;
    --bg-accent1:rgba(255,210,190,.5); --bg-accent2:rgba(255,226,170,.4);
}
/* Sacred — soft amethyst */
body.theme-sacred {
    --bg-base1:#f7f4ff; --bg-base2:#efe9fb; --bg-base3:#f4f0fc;
    --bg-accent1:rgba(205,190,245,.5); --bg-accent2:rgba(225,210,250,.45);
}
/* Water — soft seafoam */
body.theme-water {
    --bg-base1:#f0fbf8; --bg-base2:#e3f4f1; --bg-base3:#eef9f7;
    --bg-accent1:rgba(180,228,220,.5); --bg-accent2:rgba(205,238,232,.45);
}
/* Systems — soft sage */
body.theme-systems {
    --bg-base1:#f3fbf4; --bg-base2:#e8f4ea; --bg-base3:#f0f9f1;
    --bg-accent1:rgba(195,228,200,.5); --bg-accent2:rgba(220,240,222,.45);
}
/* Trust — soft clay/terracotta */
body.theme-trust {
    --bg-base1:#fff7f1; --bg-base2:#fbece2; --bg-base3:#fdf1e9;
    --bg-accent1:rgba(245,205,175,.5); --bg-accent2:rgba(230,190,165,.4);
}
/* Donations — soft coral */
body.theme-donations {
    --bg-base1:#fff5f3; --bg-base2:#fdebe7; --bg-base3:#fdeeeb;
    --bg-accent1:rgba(255,200,190,.5); --bg-accent2:rgba(255,222,205,.4);
}
/* Network — soft teal */
body.theme-network {
    --bg-base1:#f1fbfa; --bg-base2:#e5f4f3; --bg-base3:#eef9f8;
    --bg-accent1:rgba(180,225,225,.5); --bg-accent2:rgba(205,235,235,.45);
}

@media (max-width: 1000px) {
    .hero, .section-head, .elementary, .network-layout { grid-template-columns: 1fr; }
    .grid-3, .steps-grid, .greenhouse-grid, .region-grid, .grid-4, .knowledge-grid, .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fascitory-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-card { min-height: 430px; }
}
@media (max-width: 720px) {
    .wrap { width: min(100% - 24px, 1180px); }
    .nav { flex-direction: column; align-items: flex-start; padding: 14px 0; }
    .nav-links { width: 100%; overflow-x: auto; padding-bottom: 4px; }
    .grid-2, .grid-3, .grid-4, .steps-grid, .greenhouse-grid, .region-grid, .knowledge-grid, .example-grid, .fascitory-strip, .split { grid-template-columns: 1fr; }
    .actions .btn { width: 100%; }
    .dashboard-card { min-height: 360px; }
    .perma-grid { inset: 18px; gap: 7px; }
    .tile { padding: 10px; font-size: .72rem; }
    .zone-visual { min-height: 350px; }
}