/* WealthRose — architecture page (direction-aware) */

:root { --nav-stack: 130px }
section[id], div[id] { scroll-margin-top: calc(var(--nav-stack) + 10px) }

/* ---------- SUB-NAV (second row) ---------- */

.subnav {
    position: fixed;
    top: 70px; left: 0; right: 0;
    z-index: 101;
    background: rgba(13, 13, 13, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 149, 106, .14)
}
.subnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none
}
.subnav-inner::-webkit-scrollbar { display: none }
.subnav-title {
    display: flex; align-items: center;
    font-size: 11px;
    color: var(--muted);
    padding-inline-end: 22px;
    margin-inline-end: 10px;
    border-inline-end: 1px solid rgba(201, 149, 106, .18);
    white-space: nowrap
}
html[lang="en"] .subnav-title { letter-spacing: 1.5px; text-transform: uppercase; font-size: 10px }
.sn-item {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 12px 18px;
    font-size: 13px;
    color: rgba(249, 245, 240, .55);
    white-space: nowrap;
    transition: color .3s, background .3s
}
.sn-item svg { width: 20px; height: 20px; opacity: .55; transition: opacity .3s }
.sn-item b { font-weight: 500; font-size: 15px; letter-spacing: 2px; margin-inline-start: 3px }
.sn-item::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: -1px;
    height: 2px;
    background: var(--rose-gold);
    transform: scaleX(0);
    transition: transform .35s ease
}
.sn-item:hover { color: var(--off-white) }
.sn-item:hover svg { opacity: .9 }
.sn-item.active { color: var(--rose-gold-light); background: rgba(201, 149, 106, .05) }
.sn-item.active svg { opacity: 1 }
.sn-item.active::after { transform: scaleX(1) }
.sn-item[data-sec="carex"].active::after { background: var(--carex) }
.sn-item[data-sec="roots"].active::after { background: var(--roots-light) }

.subnav-progress i {
    display: block;
    height: 1px;
    width: 0;
    margin-inline-end: auto;
    background: linear-gradient(var(--from-start), var(--crimson), var(--rose-gold))
}

/* ---------- HERO ---------- */

.arch-hero { padding-top: calc(var(--nav-stack) + 50px) }
.hero-visual .garden { width: 100%; display: block; overflow: visible }
.garden .g-en { font-family: var(--latin); font-size: 17px; letter-spacing: 4px; fill: var(--rose-gold-light); text-anchor: middle }
.garden a { cursor: pointer }
.spin-slow, .spin-rev, .breathe { transform-origin: 240px 240px }
.spin-slow { animation: orbit 60s linear infinite }
.spin-rev  { animation: orbit 90s linear infinite reverse }
.breathe   { animation: pulse 5s ease-in-out infinite }
.garden .node circle { transition: stroke-width .3s }
.garden .node:hover circle { stroke-width: 2 }

/* ---------- OVERVIEW + BLUEPRINT ---------- */

.pillars { background: var(--dark2) }

.blueprint {
    max-width: 1100px;
    margin: 90px auto 0;
    padding: 48px 40px 36px;
    border: 1px solid var(--line);
    background:
        linear-gradient(rgba(201, 149, 106, .03) 1px, transparent 1px) 0 0/40px 40px,
        linear-gradient(90deg, rgba(201, 149, 106, .03) 1px, transparent 1px) 0 0/40px 40px,
        rgba(13, 13, 13, .6)
}
.blueprint-head { text-align: center; margin-bottom: 24px }
.blueprint-head h3 { font-size: 24px; font-weight: 300 }
html[lang="en"] .blueprint-head h3 { font-family: var(--latin); font-size: 30px; font-weight: 400 }

.blueprint-svg { width: 100%; height: auto; display: block; direction: ltr }
.blueprint-svg text { text-anchor: middle; font-family: var(--font-body) }
.bp-node { fill: rgba(13, 13, 13, .9); stroke: var(--rose-gold) }
.bp-title { fill: var(--off-white); font-size: 19px; font-weight: 500 }
.bp-title.sm { font-size: 16px }
.bp-sub { fill: rgba(249, 245, 240, .5); font-size: 12.5px }
.bp-label { fill: var(--rose-gold); font-size: 12px }
.blueprint-svg .bp-en { font-family: var(--latin); fill: var(--rose-gold-light); font-size: 22px; letter-spacing: 5px }
.blueprint-svg .bp-en.roots { fill: var(--roots-light) }
.bp-band.carex  { fill: url(#g-band); stroke: rgba(232, 196, 160, .4) }
.bp-band.orchid { fill: url(#g-band); stroke: rgba(201, 149, 106, .55) }
.bp-chips rect { fill: rgba(13, 13, 13, .85) }
.bp-chips text { font-size: 11px; fill: rgba(249, 245, 240, .78) }
html[lang="en"] .bp-chips text { font-family: var(--latin); font-size: 14px; letter-spacing: .5px }
.bp-chips.carex rect  { stroke: rgba(232, 196, 160, .35) }
.bp-chips.orchid rect { stroke: rgba(201, 149, 106, .45) }

.flow { stroke: var(--rose-gold); stroke-width: 1.3; stroke-dasharray: 5 5; animation: dash 1.4s linear infinite }
@keyframes dash { to { stroke-dashoffset: -20 } }

/* mobile blueprint */
.bpm { display: none; flex-direction: column }
.bpm-node { text-align: center; padding: 14px; border: 1px solid var(--rose-gold); background: rgba(13, 13, 13, .9); margin: 0 14% }
.bpm-node strong { display: block; font-weight: 500; font-size: 16px }
.bpm-node span { font-size: 11.5px; color: rgba(249, 245, 240, .5) }
.bpm-link { display: flex; justify-content: center; gap: 34px; padding: 10px 0 }
.bpm-link span { position: relative; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--rose-gold) }
.bpm-link span::before {
    content: '';
    flex-shrink: 0;
    width: 1px; height: 46px;
    background: repeating-linear-gradient(180deg, var(--rose-gold) 0 4px, transparent 4px 8px);
    background-size: 1px 16px
}
.bpm-link .down::before { animation: bpm-down 1s linear infinite }
.bpm-link .up::before   { animation: bpm-up 1s linear infinite; opacity: .55 }
@keyframes bpm-down { to { background-position: 0 16px } }
@keyframes bpm-up   { to { background-position: 0 -16px } }
.bpm-link span::after { content: ''; position: absolute; inset-inline-start: -4.5px; border: 5px solid transparent }
.bpm-link .down::after { bottom: -6px; border-top-color: var(--rose-gold) }
.bpm-link .up::after   { top: -6px; border-bottom-color: var(--rose-gold) }

.bpm-band { padding: 18px 14px 16px; text-align: center; border: 1px solid rgba(201, 149, 106, .5); background: linear-gradient(90deg, rgba(201, 149, 106, 0), rgba(201, 149, 106, .1), rgba(201, 149, 106, 0)) }
.bpm-band.carex { border-color: rgba(232, 196, 160, .4) }
.bpm-band.roots { border-color: rgba(179, 58, 58, .5); background: linear-gradient(180deg, rgba(139, 26, 26, .25), rgba(92, 15, 15, .05)) }
.bpm-band-head { display: flex; align-items: center; justify-content: center; gap: 10px }
.bpm-band-head svg { width: 28px; height: 28px }
.bpm-band-head b { font-weight: 400; font-size: 22px; letter-spacing: 5px; color: var(--rose-gold-light) }
.bpm-band.roots .bpm-band-head b { color: var(--roots-light) }
.bpm-desc { display: block; font-size: 12px; color: rgba(249, 245, 240, .5); margin: 2px 0 12px }
.bpm-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.bpm-chips i { font-style: normal; font-size: 11.5px; padding: 6px 4px; border: 1px solid rgba(232, 196, 160, .3); background: rgba(13, 13, 13, .85); color: rgba(249, 245, 240, .8) }
.bpm-chips i.wide { grid-column: 1 / -1 }
.bpm-chips.roots { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) }
.bpm-chips.roots i { border-color: rgba(179, 58, 58, .4) }
.bpm-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: start }
.bpm-steps li {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px;
    color: rgba(249, 245, 240, .75);
    padding: 6px 10px;
    border: 1px solid rgba(201, 149, 106, .3);
    background: rgba(13, 13, 13, .85)
}
.bpm-steps b {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--rose-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 400;
    color: var(--rose-gold)
}
.bpm-steps em { font-style: normal; font-size: 16px; color: var(--off-white); min-width: 96px }
.bpm-ground { text-align: center; margin: 18px 0 10px; border-top: 1px dashed rgba(201, 149, 106, .5) }
.bpm-ground span { position: relative; top: -10px; font-size: 10px; color: var(--muted); background: var(--dark2); padding: 0 10px }

/* ---------- PILLAR SECTIONS ---------- */

.pillar-section { position: relative; overflow: hidden }
.orchid-section { background: var(--dark) }
.carex-section  { background: var(--dark3) }
.roots-section  { background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(92, 15, 15, .35), transparent 70%), var(--dark) }

.pillar-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 70px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto
}
.pillar-hero-mark {
    position: relative;
    width: 280px; height: 280px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mark)
}
.pillar-hero-mark::before { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed var(--mark); opacity: .5; animation: orbit 50s linear infinite }
.pillar-hero-mark::after { content: ''; position: absolute; inset: 60px; border-radius: 50%; background: radial-gradient(circle, var(--markglow), transparent 70%); animation: pulse 5s ease-in-out infinite }
.pillar-hero-mark svg { width: 130px; height: 130px; position: relative; z-index: 1 }
.pillar-hero-mark.orchid { --mark: rgba(201, 149, 106, .45); --markglow: rgba(201, 149, 106, .18) }
.pillar-hero-mark.carex  { --mark: rgba(232, 196, 160, .4);  --markglow: rgba(232, 196, 160, .14) }
.pillar-hero-mark.roots  { --mark: rgba(179, 58, 58, .5);    --markglow: rgba(139, 26, 26, .35) }

.brand-title {
    font-size: clamp(54px, 7vw, 104px);
    font-weight: 300;
    letter-spacing: 12px;
    line-height: 1;
    background: linear-gradient(135deg, var(--rose-gold-pale), var(--rose-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}
.roots-section .brand-title { background-image: linear-gradient(135deg, var(--rose-gold-light), var(--roots-light)) }
.brand-full { font-style: italic; font-size: clamp(17px, 1.6vw, 23px); color: var(--rose-gold-light); margin: 12px 0 26px; line-height: 1.4 }
.pillar-hero-text .section-sub { max-width: 680px }

.motto {
    margin-top: 32px;
    padding: 18px 24px;
    border-inline-start: 2px solid var(--rose-gold);
    background: linear-gradient(var(--from-start), rgba(201, 149, 106, .08), transparent);
    display: flex; flex-direction: column; gap: 4px;
    max-width: 620px
}
.motto.carex { border-color: var(--carex) }
.motto.roots { border-color: var(--roots); background: linear-gradient(var(--from-start), rgba(179, 58, 58, .1), transparent) }
.motto .en { font-size: 23px; font-style: italic; color: var(--off-white); direction: ltr; unicode-bidi: isolate }
html[dir="rtl"] .motto .en { text-align: right }
.motto .tr { font-size: 14px; color: rgba(249, 245, 240, .55) }

/* ---------- ORCHID : STAGE ---------- */

.stage-wrap {
    max-width: 1100px;
    margin: 100px auto 0;
    padding: 40px;
    border: 1px solid var(--line);
    background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(139, 26, 26, .14), transparent 70%), rgba(20, 20, 20, .7)
}
.stage-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 10px }
.stage-head h3 { font-size: 22px; font-weight: 400; color: var(--rose-gold-light); margin-bottom: 6px }
html[lang="en"] .stage-head h3 { font-family: var(--latin); font-size: 28px }
.stage-head p { font-size: 14px; color: rgba(249, 245, 240, .5); max-width: 560px; line-height: 1.9 }
.regime { display: flex; flex-direction: column; align-items: center; padding: 12px 22px; border: 1px solid var(--line-strong); min-width: 180px; background: rgba(13, 13, 13, .7) }
.regime-lbl { font-size: 11px; color: var(--muted) }
.regime-val { font-size: 18px; color: var(--rose-gold); font-weight: 500 }
.regime-val.flash { animation: flash .9s ease }
@keyframes flash { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.stage-svg { width: 100%; height: auto; display: block; direction: ltr }
.eng { transition: r .6s ease, opacity .6s ease; opacity: .72 }
.eng.solo { opacity: 1; filter: url(#glow) }
.eng.rest { opacity: .12 }
.beam { stroke-width: .8; stroke-opacity: .35; stroke-dasharray: 3 4; animation: dash 1.2s linear infinite }
.stage-cond { font-family: var(--font-body); font-size: 13px; fill: var(--rose-gold-light); text-anchor: middle }

.stage-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 18px; font-size: 12px; color: rgba(249, 245, 240, .6) }
.stage-legend span { display: inline-flex; align-items: center; gap: 8px }
.stage-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block }
.stage-legend .sep { width: 1px; height: 14px; background: var(--line-strong) }
.stage-legend .st.solo   { background: var(--rose-gold-light); box-shadow: 0 0 10px var(--rose-gold); width: 12px; height: 12px }
.stage-legend .st.active { background: var(--rose-gold); opacity: .72 }
.stage-legend .st.rest   { background: var(--rose-gold); opacity: .15 }
.stage-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px }

/* ---------- ORCHID : LEAGUE vs ORCHESTRA ---------- */

.versus { max-width: 1000px; margin: 90px auto 0; display: grid; grid-template-columns: 1fr auto 1fr }
.vs-col { padding: 36px; border: 1px solid var(--line) }
.vs-col.league { opacity: .62; border-inline-end: none }
.vs-col.orchestra { border-color: var(--line-strong); background: linear-gradient(135deg, rgba(139, 26, 26, .1), rgba(201, 149, 106, .06)) }
.vs-tag { font-size: 12px; color: var(--muted); margin-bottom: 6px }
.vs-col.orchestra .vs-tag { color: var(--rose-gold) }
.vs-col h4 { font-size: 24px; font-weight: 300; margin-bottom: 18px }
html[lang="en"] .vs-col h4 { font-family: var(--latin); font-size: 30px; font-weight: 400 }
.vs-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px }
.vs-col li { position: relative; font-size: 14px; color: rgba(249, 245, 240, .62); padding-inline-start: 18px; line-height: 1.9 }
.vs-col li::before { content: ''; position: absolute; inset-inline-start: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-gold) }
.vs-col.league li::before { background: var(--muted) }
.vs-col strong { color: var(--rose-gold-light); font-weight: 500 }
.vs-mid {
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl;
    font-size: 12px;
    color: var(--rose-gold);
    padding: 0 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

/* ---------- ORCHID : CYCLE ---------- */

.cycle-grid { max-width: 1200px; margin: 110px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center }
.cycle-visual svg { width: 100%; height: auto; display: block; direction: ltr; overflow: visible }
.cycle-visual text { text-anchor: middle }
.flow-ring { stroke-dasharray: 10 14; animation: dash-ring 3s linear infinite }
@keyframes dash-ring { to { stroke-dashoffset: -48 } }
.cy-node circle { fill: var(--dark); stroke: var(--rose-gold); stroke-width: 1.2; transition: fill .3s }
.cy-node text { font-family: var(--font-body); fill: var(--rose-gold-light); font-size: 20px }
html[lang="en"] .cy-node text { font-family: var(--latin); font-size: 22px }
.cy-node:hover circle { fill: rgba(139, 26, 26, .4) }
.cy-en { font-family: var(--latin); font-size: 21px; fill: var(--off-white); letter-spacing: 1px }
.cy-fa { font-family: var(--font-body); font-size: 13px; fill: var(--rose-gold) }
.cy-center { font-family: var(--latin); font-size: 22px; letter-spacing: 6px; fill: var(--rose-gold-light) }
.cy-center-sub { font-family: var(--font-body); font-size: 12px; fill: rgba(249, 245, 240, .5) }

.cstep { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line) }
.cstep:last-child { border-bottom: none }
.cstep-num { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rose-gold); font-size: 17px }
.cstep-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px }
.cstep-head .en { font-size: 22px; color: var(--off-white) }
.cstep-head .fa { font-size: 14px; color: var(--rose-gold-light) }
.cstep-head .hz { margin-inline-start: auto; font-size: 11px; color: var(--rose-gold); border: 1px solid var(--line-strong); padding: 1px 10px; line-height: 1.9 }
.cstep p { font-size: 14px; color: rgba(249, 245, 240, .55); line-height: 1.95 }
html[lang="en"] .cstep p { line-height: 1.75 }
.cstep strong { color: var(--rose-gold-light); font-weight: 500 }

/* ---------- CAREX : TRANSLATOR ---------- */

.translator { max-width: 1100px; margin: 100px auto 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.3fr 1fr; align-items: center }
.tr-node { text-align: center; padding: 30px 16px; border: 1px solid var(--line); background: rgba(13, 13, 13, .6) }
.tr-node.hub { border-color: rgba(232, 196, 160, .45); background: radial-gradient(circle at 50% 30%, rgba(232, 196, 160, .1), transparent 70%), rgba(13, 13, 13, .8); padding: 36px 16px }
.tr-node svg { width: 54px; height: 54px; margin-bottom: 8px }
.tr-icon { font-size: 34px; color: var(--carex); line-height: 1.6 }
.tr-node h4 { font-size: 18px; font-weight: 400 }
.tr-node h4.latin { letter-spacing: 4px; font-size: 21px }
.tr-node p { font-size: 12px; color: var(--muted) }

.tr-flows { display: flex; flex-direction: column; gap: 28px; padding: 0 10px }
.tr-flow { position: relative; text-align: center }
.tr-line {
    display: block;
    height: 1px;
    position: relative;
    background: repeating-linear-gradient(90deg, var(--carex) 0 6px, transparent 6px 11px);
    background-size: 22px 1px
}
.tr-flow.back .tr-line { opacity: .55 }
.tr-line::after { content: ''; position: absolute; top: -4px; border: 4.5px solid transparent }
/* "out" travels in the reading direction, "back" against it */
html[dir="rtl"] .tr-flow.out .tr-line  { animation: slide-l 1.2s linear infinite }
html[dir="rtl"] .tr-flow.back .tr-line { animation: slide-r 1.2s linear infinite }
html[dir="ltr"] .tr-flow.out .tr-line  { animation: slide-r 1.2s linear infinite }
html[dir="ltr"] .tr-flow.back .tr-line { animation: slide-l 1.2s linear infinite }
@keyframes slide-l { to { background-position: -22px 0 } }
@keyframes slide-r { to { background-position: 22px 0 } }
html[dir="rtl"] .tr-flow.out .tr-line::after  { left: -2px;  border-right-color: var(--carex) }
html[dir="rtl"] .tr-flow.back .tr-line::after { right: -2px; border-left-color: var(--carex) }
html[dir="ltr"] .tr-flow.out .tr-line::after  { right: -2px; border-left-color: var(--carex) }
html[dir="ltr"] .tr-flow.back .tr-line::after { left: -2px;  border-right-color: var(--carex) }
.tr-text { display: block; font-size: 11.5px; color: rgba(249, 245, 240, .6); margin-top: 8px; line-height: 1.7 }
.tr-flow.back .tr-text { color: rgba(249, 245, 240, .42) }

/* ---------- CAREX : LETTERS ---------- */

.carex-grid {
    max-width: 1200px;
    margin: 90px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px dashed rgba(232, 196, 160, .35)
}
.cx-card { padding: 34px 28px; background: rgba(232, 196, 160, .035); border: 1px solid rgba(232, 196, 160, .12); transition: background .4s, transform .4s }
.cx-card:hover { background: rgba(232, 196, 160, .07); transform: translateY(-4px) }
.cx-letter {
    font-size: 76px;
    font-weight: 300;
    line-height: 1;
    background: linear-gradient(160deg, var(--rose-gold-pale), var(--rose-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px
}
.cx-en { font-size: 18px; letter-spacing: 2px; color: var(--muted) }
.cx-en .latin { font-size: 18px }
.cx-card h4 { font-size: 18px; font-weight: 400; color: var(--carex); margin: 4px 0 12px }
html[lang="en"] .cx-card h4 { font-family: var(--latin); font-size: 22px }
.cx-card p { font-size: 13.5px; color: rgba(249, 245, 240, .55); line-height: 1.95 }
html[lang="en"] .cx-card p { line-height: 1.7 }
.cx-card.x {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 30px;
    align-items: center;
    background: linear-gradient(var(--from-start), rgba(232, 196, 160, .06), rgba(139, 26, 26, .1));
    border-color: rgba(232, 196, 160, .25)
}
.cx-card.x .cx-en { font-size: 14px; letter-spacing: 0 }
.cx-card.x .cx-letter { font-size: 110px; text-align: center; margin: 0 }

.loop-line { margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; font-size: 20px; color: var(--rose-gold-light) }
.loop-line .arr::before { content: '←'; font-style: normal; color: var(--rose-gold); font-size: 15px; font-family: var(--font-body) }
html[dir="ltr"] .loop-line .arr::before { content: '→' }
.loop-line .again { font-size: 14px; color: var(--carex); border: 1px solid rgba(232, 196, 160, .35); padding: 2px 14px }

/* ---------- ROOTS : STRATA ---------- */

.strata { position: relative; max-width: 1100px; margin: 100px auto 0; border: 1px solid rgba(179, 58, 58, .3); overflow: hidden }
.surface {
    position: relative;
    z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 22px;
    letter-spacing: 5px;
    font-size: 19px;
    color: var(--rose-gold-light);
    border-bottom: 1px dashed var(--rose-gold);
    background: linear-gradient(180deg, rgba(201, 149, 106, .08), transparent)
}
.surface .dot { color: var(--roots) }
.surface em { position: absolute; inset-inline-end: 20px; font-style: normal; font-size: 11px; letter-spacing: 0; color: var(--muted) }
.roots-overlay { position: absolute; inset-inline-end: 0; top: 66px; width: 220px; height: calc(100% - 66px); z-index: 1; opacity: .75 }
.roots-overlay .grow path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 3.2s ease }
.strata.visible .roots-overlay .grow path { stroke-dashoffset: 0 }
.stratum {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    align-items: center;
    padding-block: 26px;
    padding-inline: 36px 260px;
    border-bottom: 1px solid rgba(179, 58, 58, .15)
}
.stratum:last-child { border-bottom: none }
.stratum:nth-of-type(1) { background: rgba(92, 15, 15, .08) }
.stratum:nth-of-type(2) { background: rgba(92, 15, 15, .14) }
.stratum:nth-of-type(3) { background: rgba(92, 15, 15, .2) }
.stratum:nth-of-type(4) { background: rgba(92, 15, 15, .27) }
.stratum:nth-of-type(5) { background: rgba(92, 15, 15, .35) }
.s-letter {
    font-size: 58px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    background: linear-gradient(180deg, var(--rose-gold-light), var(--roots-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}
.s-body h4 { font-weight: 400; margin-bottom: 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.s-body h4 .latin { font-size: 25px; color: var(--off-white) }
.s-body h4 small { font-size: 14px; color: var(--roots-light) }
.s-body p { font-size: 14px; color: rgba(249, 245, 240, .58); line-height: 1.95 }
.s-body strong { color: var(--rose-gold-light); font-weight: 500 }

/* ---------- ROOTS : DEFENCE ---------- */

.defense { max-width: 1100px; margin: 100px auto 0 }
.defense-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(179, 58, 58, .25); border: 1px solid rgba(179, 58, 58, .25) }
.def-card { position: relative; background: var(--dark); padding: 34px 30px }
.def-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; height: 2px; background: linear-gradient(var(--from-start), var(--roots), transparent) }
.def-card:nth-child(1)::before { width: 33% }
.def-card:nth-child(2)::before { width: 66% }
.def-card:nth-child(3)::before { width: 100% }
.def-num { font-size: 12px; color: var(--roots-light); margin-bottom: 8px }
.def-card h4 { font-size: 19px; font-weight: 400; margin-bottom: 10px }
html[lang="en"] .def-card h4 { font-family: var(--latin); font-size: 24px }
.def-card p { font-size: 13.5px; color: rgba(249, 245, 240, .55); line-height: 1.95 }
.trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px }
.trust-strip > div { display: flex; flex-direction: column; padding: 20px 24px; border-inline-start: 2px solid var(--rose-gold); background: rgba(201, 149, 106, .04) }
.trust-strip strong { color: var(--rose-gold-light); font-weight: 500; font-size: 15px }
.trust-strip span { font-size: 13px; color: rgba(249, 245, 240, .55) }

/* ---------- SYNTHESIS ---------- */

.synthesis { background: var(--dark2) }
.syn-table { max-width: 1000px; margin: 50px auto 0; border: 1px solid var(--line) }
.syn-row { display: grid; grid-template-columns: 1.1fr .8fr 1.6fr 1.1fr; align-items: center; border-bottom: 1px solid var(--line); transition: background .3s }
.syn-row:last-child { border-bottom: none }
.syn-row:not(.head):hover { background: rgba(201, 149, 106, .05) }
.syn-row > div { padding: 20px 24px; font-size: 14px; color: rgba(249, 245, 240, .7) }
.syn-row.head > div { font-size: 12px; color: var(--rose-gold); padding: 14px 24px; background: rgba(201, 149, 106, .05) }
.syn-name { display: flex; align-items: center; gap: 12px }
.syn-name .latin { font-size: 21px; letter-spacing: 3px; color: var(--off-white) }
.syn-name svg { width: 34px; height: 34px; flex-shrink: 0 }
.syn-motto { text-align: center; margin-top: 50px; font-style: italic; font-size: clamp(24px, 3vw, 40px); color: var(--rose-gold-light) }
.syn-motto span { color: var(--crimson); margin: 0 14px }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1080px) {
    .pillar-hero { grid-template-columns: 1fr; gap: 40px }
    .pillar-hero-mark { width: 220px; height: 220px; margin: 0 auto }
    .pillar-hero-mark svg { width: 100px; height: 100px }
    .cycle-grid { grid-template-columns: 1fr }
    .cycle-visual { max-width: 520px; margin: 0 auto; width: 100% }
    .translator { grid-template-columns: 1fr; max-width: 420px }
    .tr-flows { flex-direction: row; justify-content: center; gap: 40px; padding: 26px 0 }
    .tr-flow { flex: 1 }
    .tr-line { width: 1px; height: 50px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--carex) 0 6px, transparent 6px 11px); animation: none !important }
    .tr-line::after { display: none }
    .carex-grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 900px) {
    .subnav { background: rgba(13, 13, 13, .97) }
    .subnav-inner { padding: 0 10px; gap: 0; justify-content: space-between }
    .subnav-title { display: none }
    .sn-item { padding: 10px 10px; gap: 6px; font-size: 12px }
    .sn-item svg { width: 16px; height: 16px }
    .sn-item b { font-size: 13px; letter-spacing: 1px }
    .arch-hero { padding-top: calc(var(--nav-stack) + 36px) }

    .blueprint { padding: 28px 16px; margin-top: 60px }
    .blueprint-svg { display: none }
    .bpm { display: flex }

    .stage-wrap { padding: 20px 12px; margin-top: 70px }
    .stage-head { flex-direction: column }
    .regime { align-self: stretch }

    .versus { grid-template-columns: 1fr; margin-top: 70px }
    .vs-col.league { border-inline-end: 1px solid var(--line) }
    .vs-mid { writing-mode: horizontal-tb; padding: 12px; border: none }

    .carex-grid { grid-template-columns: 1fr; padding: 10px }
    .cx-card.x { grid-template-columns: 1fr; gap: 6px }
    .cx-card.x .cx-letter { text-align: start }

    .roots-overlay { width: 90px; opacity: .45 }
    .stratum { grid-template-columns: 50px 1fr; gap: 14px; padding-block: 22px; padding-inline: 16px 74px }
    .s-letter { font-size: 42px }
    .surface em { display: none }

    .defense-grid, .trust-strip { grid-template-columns: 1fr }

    .syn-row { grid-template-columns: 1fr 1fr }
    .syn-row.head { display: none }
    .syn-row > div { padding: 10px 16px }
    .syn-row .syn-name { grid-column: 1 / -1; padding-top: 18px }
}

@media (max-width: 480px) {
    /* narrow phones: pillar names only */
    .sn-item svg { display: none }
    .sn-item .sn-txt { font-size: 0 }
    .sn-item .sn-txt b { font-size: 13px; margin: 0 }
    .sn-item[data-sec="overview"] .sn-txt { font-size: 12px }
}