/* =========================================================
   WealthRose — base styles, shared by every page and language.
   Written with logical properties (inline-start / inline-end),
   so the same rules serve RTL (fa, ar) and LTR (en).
   ========================================================= */

:root {
    --rose-gold: #C9956A;
    --rose-gold-light: #E8C4A0;
    --rose-gold-pale: #F5E6D8;
    --crimson: #8B1A1A;
    --crimson-deep: #5C0F0F;
    --dark: #0D0D0D;
    --dark2: #141414;
    --dark3: #1C1A18;
    --off-white: #F9F5F0;
    --muted: #7A7570;
    --gold-line: linear-gradient(90deg, transparent, #C9956A, transparent);

    --orchid: #C9956A;
    --carex: #E8C4A0;
    --roots: #B33A3A;
    --roots-light: #D46A5E;
    --line: rgba(201, 149, 106, .14);
    --line-strong: rgba(201, 149, 106, .3);

    --latin: 'Cormorant Garamond', serif;
    --font-body: 'Vazirmatn', sans-serif;
    --font-display: 'Vazirmatn', sans-serif;
    --nav-h: 84px;

    /* gradient that fades from the reading start edge */
    --from-start: 270deg;
}

html[dir="ltr"] { --from-start: 90deg }
html[lang="ar"] {
    --font-body: 'IBM Plex Sans Arabic', 'Vazirmatn', sans-serif;
    --font-display: 'IBM Plex Sans Arabic', 'Vazirmatn', sans-serif;
}
html[lang="en"] {
    --font-body: 'Manrope', sans-serif;
    --font-display: 'Cormorant Garamond', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
html, body { overflow-x: hidden }

body {
    background: var(--dark);
    color: var(--off-white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.9;
    text-align: start;
    cursor: none
}
html[lang="en"] body { line-height: 1.7 }

a { color: inherit; text-decoration: none }
img { max-width: 100% }
button { font-family: inherit }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden }

/* Latin brand words inside RTL text, and numbers that must read left-to-right */
.latin { font-family: var(--latin) }
.ltr { direction: ltr; unicode-bidi: isolate }
html[dir="rtl"] .ltr { text-align: right }
html[dir="ltr"] .ltr { text-align: left }

section[id], div[id] { scroll-margin-top: var(--nav-h) }

/* ---------- CURSOR (pointer devices only) ---------- */

.cursor, .cursor-ring {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    left: -100px; top: -100px
}
.cursor { width: 10px; height: 10px; background: var(--rose-gold); z-index: 9999 }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(201, 149, 106, .4); z-index: 9998; transition: width .2s, height .2s }
@media (hover: none), (pointer: coarse) {
    body { cursor: auto }
    .cursor, .cursor-ring { display: none }
}

/* ---------- NAV ---------- */

.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 110;  /* above the architecture sub-nav (101), so the language menu opens over it */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 60px;
    background: linear-gradient(180deg, rgba(13, 13, 13, .95) 0%, rgba(13, 13, 13, .55) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(201, 149, 106, .06)
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0 }
#logopng { height: 36px; display: block }

.nav-links { display: flex; gap: 36px; list-style: none }
.nav-links a {
    font-size: 13px;
    color: rgba(249, 245, 240, .6);
    transition: color .3s;
    white-space: nowrap
}
html[lang="en"] .nav-links a { font-size: 13.5px; letter-spacing: .3px }
.nav-links a:hover, .nav-links a.active { color: var(--rose-gold) }
.nav-links a.active { box-shadow: 0 1px 0 var(--rose-gold); padding-bottom: 3px }

.nav-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0 }

.nav-cta {
    border: 1px solid var(--rose-gold);
    color: var(--rose-gold);
    font-size: 11.5px;
    padding: 9px 22px;
    transition: all .3s;
    white-space: nowrap
}
.nav-cta:hover { background: var(--rose-gold); color: var(--dark) }

/* language switcher */
.lang-switch { position: relative }
.lang-btn {
    display: flex; align-items: center; gap: 7px;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(201, 149, 106, .25);
    color: var(--rose-gold-light);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .3s, background .3s
}
.lang-btn:hover, .lang-switch.open .lang-btn { border-color: var(--rose-gold); background: rgba(201, 149, 106, .08) }
.lang-btn .globe { width: 17px; height: 17px; color: var(--rose-gold) }
.lang-btn span { min-width: 16px; text-align: center; font-weight: 500 }

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 150px;
    list-style: none;
    padding: 6px;
    background: rgba(20, 20, 20, .98);
    border: 1px solid var(--line-strong);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 5
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none }
.lang-menu a {
    display: block;
    padding: 9px 14px;
    font-size: 14px;
    text-align: center;
    color: rgba(249, 245, 240, .75);
    transition: background .2s, color .2s
}
.lang-menu a[lang="fa"] { font-family: 'Vazirmatn', sans-serif }
.lang-menu a[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Vazirmatn', sans-serif }
.lang-menu a[lang="en"] { font-family: 'Manrope', sans-serif }
.lang-menu a:hover { background: rgba(201, 149, 106, .08); color: var(--off-white) }
.lang-menu a.active { color: var(--rose-gold) }
.lang-menu a.active::after { content: ' ✓'; font-size: 11px }

/* ---------- MOBILE MENU (built by site.js) ---------- */

.mnav-btn, .mnav-panel { display: none }

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

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: calc(var(--nav-h) + 40px) 60px 170px
}
.hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 40% 50%, rgba(139, 26, 26, .12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 30%, rgba(201, 149, 106, .07) 0%, transparent 50%),
        var(--dark)
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(201, 149, 106, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 149, 106, .04) 1px, transparent 1px);
    background-size: 60px 60px
}
.hero-content { position: relative; z-index: 2; max-width: 680px }

.hero-eyebrow {
    display: flex; align-items: center; gap: 16px;
    font-size: 16px;
    color: var(--rose-gold);
    margin-bottom: 18px
}
.hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--rose-gold) }
html[lang="en"] .hero-eyebrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 30px
}
html[lang="en"] .hero-title { font-weight: 500; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.5px }
.hero-title em { font-style: normal; color: var(--rose-gold) }
html[lang="en"] .hero-title em { font-style: italic }
.hero-title .r { color: var(--crimson) }

.hero-sub { font-size: 16px; color: rgba(249, 245, 240, .6); line-height: 2; max-width: 540px }
html[lang="en"] .hero-sub { font-size: 15px; line-height: 1.8 }
.hero-sub strong { font-weight: 500 }

.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 36px }

.btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, var(--crimson), var(--rose-gold));
    color: #fff;
    font-size: 13px;
    padding: 15px 34px;
    border: none;
    transition: opacity .3s, transform .3s
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px) }

.btn-ghost { display: inline-flex; align-items: center; gap: 10px; color: var(--rose-gold-light); font-size: 13px }
.btn-ghost::after { content: '←'; transition: transform .3s }
html[dir="ltr"] .btn-ghost::after { content: '→' }
.btn-ghost:hover::after { transform: translateX(-4px) }
html[dir="ltr"] .btn-ghost:hover::after { transform: translateX(4px) }

.hero-visual {
    position: absolute;
    inset-inline-end: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: min(480px, 40vw);
    z-index: 1
}

.hero-orb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(201, 149, 106, .15);
    position: relative;
    animation: orbit 20s linear infinite
}
.hero-orb::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(139, 26, 26, .2) }
.hero-orb::after {
    content: '';
    position: absolute; inset: 17%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 26, 26, .18), rgba(201, 149, 106, .08), transparent);
    animation: pulse 4s ease-in-out infinite
}
.orb-dot { position: absolute; width: 8px; height: 8px; background: var(--rose-gold); border-radius: 50% }
.orb-dot:nth-child(1) { top: 10%; left: 50%; transform: translateX(-50%) }
.orb-dot:nth-child(2) { bottom: 10%; left: 50%; transform: translateX(-50%) }
.orb-dot:nth-child(3) { left: 10%; top: 50%; transform: translateY(-50%) }
.orb-dot:nth-child(4) { right: 10%; top: 50%; transform: translateY(-50%) }

@keyframes orbit { to { transform: rotate(360deg) } }
@keyframes pulse { 0%, 100% { opacity: .6; transform: scale(.95) } 50% { opacity: 1; transform: scale(1.05) } }

.hero-stats {
    position: absolute;
    bottom: 56px;
    inset-inline-start: 60px;
    display: flex;
    gap: 56px;
    z-index: 2
}
.stat { border-inline-start: 1px solid rgba(201, 149, 106, .3); padding-inline-start: 20px }
.stat-val { font-size: 36px; font-weight: 300; color: var(--rose-gold-light); line-height: 1.3 }
html[lang="en"] .stat-val { font-family: var(--latin); font-size: 42px; font-weight: 400 }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px }

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

.gold-divider { height: 1px; background: var(--gold-line) }
section { padding: 120px 60px }

.section-eyebrow { font-size: 12px; color: var(--rose-gold); margin-bottom: 12px }
html[lang="en"] .section-eyebrow { letter-spacing: 2px; text-transform: uppercase; font-size: 11px }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.5vw, 52px);
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 24px
}
html[lang="en"] .section-title { font-size: clamp(36px, 4vw, 60px); font-weight: 400; line-height: 1.1 }
.section-title em { font-style: normal; color: var(--rose-gold); font-weight: 600 }
html[lang="en"] .section-title em { font-style: italic; font-weight: 500 }

.section-sub { font-size: 15px; color: rgba(249, 245, 240, .55); line-height: 2; max-width: 600px }
html[lang="en"] .section-sub { line-height: 1.8 }
.center-head { text-align: center; max-width: 820px; margin: 0 auto }
.section-sub.center { margin: 0 auto }
.sub-title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.5; margin-bottom: 28px }
html[lang="en"] .sub-title { font-family: var(--latin); font-size: clamp(26px, 2.6vw, 36px); font-weight: 400 }

.t-orchid { color: var(--orchid); font-weight: 600 }
.t-carex  { color: var(--carex);  font-weight: 600 }
.t-roots  { color: var(--roots);  font-weight: 600 }
.hl-orchid { color: var(--orchid) }
.hl-carex  { color: var(--carex) }
.hl-roots  { color: var(--roots-light) }

/* ---------- PILLAR CARDS (home + architecture) ---------- */

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 70px auto 0
}
.pillar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 36px 36px;
    background: rgba(201, 149, 106, .035);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .4s ease, border-color .4s, background .4s
}
.pillar-card::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0;
    width: 56px; height: 2px;
    background: var(--accent);
    transition: width .5s ease
}
.pillar-card::after {
    content: '';
    position: absolute;
    bottom: -60%; inset-inline-start: -30%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    pointer-events: none
}
.pillar-card:hover { transform: translateY(-6px); border-color: var(--line-strong); background: rgba(201, 149, 106, .06) }
.pillar-card:hover::before { width: 100% }
.p-orchid { --accent: var(--orchid); --glow: rgba(201, 149, 106, .14) }
.p-carex  { --accent: var(--carex);  --glow: rgba(232, 196, 160, .12) }
.p-roots  { --accent: var(--roots);  --glow: rgba(179, 58, 58, .16) }

.pillar-logo { width: 64px; height: 64px; margin-bottom: 26px }
.pillar-role { font-size: 12px; color: var(--accent); margin-bottom: 6px }
.p-roots .pillar-role { color: var(--roots-light) }
.pillar-name { font-size: 40px; font-weight: 400; letter-spacing: 5px; line-height: 1.1 }
.pillar-full { font-style: italic; font-size: 16px; color: var(--muted); margin: 6px 0 22px; line-height: 1.45 }
.pillar-q {
    font-size: 17px;
    color: var(--rose-gold-light);
    font-weight: 400;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    margin-bottom: 10px
}
.pillar-desc { font-size: 14px; color: rgba(249, 245, 240, .55); line-height: 2; flex: 1 }
html[lang="en"] .pillar-desc { line-height: 1.75 }
.pillar-more { margin-top: 22px; font-size: 13px; color: var(--accent) }
.p-roots .pillar-more { color: var(--roots-light) }
.pillar-more::after { content: ' ←' }
html[dir="ltr"] .pillar-more::after { content: ' →' }

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

.cta-section {
    background: linear-gradient(135deg, var(--crimson-deep), var(--dark3), var(--dark));
    padding: 130px 60px;
    text-align: center;
    position: relative;
    overflow: hidden
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201, 149, 106, .08), transparent);
    pointer-events: none
}
.cta-section > div { position: relative }
.cta-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 5.2vw, 70px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 18px
}
html[lang="en"] .cta-title { font-weight: 500; line-height: 1.1 }
.cta-title em { font-style: normal; color: var(--rose-gold) }
html[lang="en"] .cta-title em { font-style: italic }
.cta-sub { font-size: 15px; color: rgba(249, 245, 240, .55); margin: 0 auto 40px; max-width: 520px }
.cta-form { display: flex; justify-content: center; max-width: 520px; margin: 0 auto }
.cta-btn, .cta-mail { padding: 16px 28px; font-size: 13px; white-space: nowrap }
.cta-btn { background: linear-gradient(135deg, var(--crimson), var(--rose-gold)); color: #fff; flex: 1 }
.cta-mail { background: #000; color: var(--rose-gold-light); text-align: center !important }
.cta-btn:hover, .cta-mail:hover { opacity: .88 }

/* ---------- FOOTER ---------- */

.site-footer { background: var(--dark); padding: 70px 60px 0 }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px
}
.footer-brand img { height: 32px; margin-bottom: 18px }
.footer-brand p { font-size: 13px; color: rgba(249, 245, 240, .45); line-height: 2; max-width: 340px }
.footer-motto { font-style: italic; font-size: 17px !important; color: var(--rose-gold) !important; margin-top: 12px }
.footer-col h4 { font-size: 12px; color: var(--rose-gold); font-weight: 500; margin-bottom: 18px }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px }
.footer-col a { font-size: 13px; color: rgba(249, 245, 240, .5); transition: color .3s }
.footer-col a.latin { font-size: 16px; letter-spacing: 2px }
.footer-col a:hover, .footer-col a.active { color: var(--rose-gold-light) }
.footer-bottom {
    border-top: 1px solid rgba(201, 149, 106, .08);
    padding: 22px 0 26px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto
}
.footer-bottom p { font-size: 12px; color: rgba(249, 245, 240, .3); line-height: 2 }

/* ---------- REVEAL ---------- */

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease }
.fade-up.visible { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
    .fade-up { opacity: 1; transform: none; transition: none }
    *, *::before, *::after { animation: none !important }
}

::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-track { background: var(--dark) }
::-webkit-scrollbar-thumb { background: var(--rose-gold) }

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

@media (max-width: 1200px) {
    .nav-links { gap: 24px }
    .site-nav { padding: 20px 36px }
    .hero-visual { opacity: .5 }
}

@media (max-width: 1080px) {
    .pillar-grid { grid-template-columns: 1fr; max-width: 560px }
    .footer-grid { grid-template-columns: 1fr 1fr }
    .footer-brand { grid-column: 1 / -1 }
}

@media (max-width: 900px) {
    :root { --nav-h: 72px }
    .site-nav { padding: 14px 18px; justify-content: center }
    .nav-links, .nav-cta { display: none }
    #logopng { height: 30px }

    /* language button on the start side, menu button on the end side */
    .nav-tools { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%) }
    .lang-btn { height: 40px; padding: 0 10px }
    .lang-menu { inset-inline-end: auto; inset-inline-start: 0 }

    .mnav-btn {
        display: flex;
        flex-direction: column; justify-content: center; align-items: center; gap: 5px;
        position: absolute;
        inset-inline-end: 18px; top: 50%;
        transform: translateY(-50%);
        width: 40px; height: 40px;
        background: transparent;
        border: 1px solid rgba(201, 149, 106, .4);
        cursor: pointer
    }
    .mnav-btn span { display: block; width: 18px; height: 1px; background: var(--rose-gold); transition: transform .35s, opacity .25s }
    body.mnav-open .mnav-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
    body.mnav-open .mnav-btn span:nth-child(2) { opacity: 0 }
    body.mnav-open .mnav-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

    body.mnav-open { overflow: hidden }
    body.mnav-open .site-nav { z-index: 220; background: transparent; backdrop-filter: none; border-color: transparent }

    .mnav-panel {
        display: flex;
        flex-direction: column; justify-content: center; align-items: center;
        gap: 32px;
        position: fixed; inset: 0;
        z-index: 210;
        padding: 90px 24px 40px;
        background:
            radial-gradient(ellipse 80% 50% at 50% 100%, rgba(139, 26, 26, .25), transparent 70%),
            rgba(13, 13, 13, .985);
        opacity: 0; visibility: hidden;
        transition: opacity .35s, visibility .35s
    }
    body.mnav-open .mnav-panel { opacity: 1; visibility: visible }
    .mnav-panel ul { list-style: none; width: 100%; max-width: 320px }
    .mnav-panel li {
        text-align: center;
        border-bottom: 1px solid rgba(201, 149, 106, .12);
        opacity: 0; transform: translateY(12px);
        transition: opacity .4s, transform .4s
    }
    .mnav-panel li:last-child { border-bottom: none }
    body.mnav-open .mnav-panel li { opacity: 1; transform: none }
    .mnav-panel li a { display: block; padding: 13px 0; font-size: 19px; color: rgba(249, 245, 240, .85) }
    .mnav-panel li a.active { color: var(--rose-gold); font-weight: 500 }
    .mnav-cta { border: 1px solid var(--rose-gold); color: var(--rose-gold); font-size: 13px; padding: 12px 34px }

    .hero { display: block; min-height: 0; padding: calc(var(--nav-h) + 50px) 22px 50px }
    .hero-content { max-width: none }
    .hero-sub { font-size: 14px }
    .hero-visual {
        position: relative;
        inset: auto; transform: none;
        width: 280px;
        margin: 50px auto 10px;
        opacity: 1
    }
    .hero-stats {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px 16px;
        margin-top: 40px
    }
    .stat-val { font-size: 30px }

    section { padding: 80px 22px }
    .cta-section { padding: 80px 22px }
    .cta-form { flex-direction: column }
    .site-footer { padding: 50px 22px 0 }
    .footer-grid { gap: 34px }
}

@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr }
}