/* WealthRose — home page */

/* ---------- APPROACH ---------- */

.about {
    background: var(--dark2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.cred-list { display: flex; flex-direction: column; gap: 22px; margin-top: 40px }
.cred { display: flex; gap: 16px; align-items: flex-start }
.cred-icon { font-size: 24px; color: var(--rose-gold); line-height: 1.4; flex-shrink: 0; width: 28px; text-align: center }
.cred-text { font-size: 15px; color: rgba(249, 245, 240, .68); line-height: 1.9 }
.cred-text strong { display: block; color: var(--rose-gold-light); font-weight: 500; margin-bottom: 2px }

.about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.about-card {
    position: relative;
    padding: 36px;
    background: rgba(201, 149, 106, .04);
    border: 1px solid rgba(201, 149, 106, .12);
    transition: border-color .3s, background .3s
}
.about-card::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0;
    width: 40px; height: 2px;
    background: var(--rose-gold)
}
.about-card:hover { border-color: var(--line-strong); background: rgba(201, 149, 106, .06) }
.about-card h3 { font-size: 18px; font-weight: 400; color: var(--rose-gold-light); margin: 18px 0 10px }
html[lang="en"] .about-card h3 { font-family: var(--latin); font-size: 23px }
.about-card p { font-size: 14px; color: rgba(249, 245, 240, .55); line-height: 2 }
html[lang="en"] .about-card p { line-height: 1.75 }

.card-pillar, .step-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 12px;
    border: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--accent);
    transition: border-color .3s, background .3s
}
.card-pillar svg, .step-tag svg { width: 16px; height: 16px }
.card-pillar:hover, .step-tag:hover { border-color: var(--accent); background: rgba(201, 149, 106, .06) }
.card-pillar.p-roots, .step-tag.p-roots { color: var(--roots-light) }

/* ---------- ARCHITECTURE TEASER ---------- */

.arch-teaser {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 26, 26, .12), transparent 70%),
        var(--dark)
}
.teaser-foot { text-align: center; margin-top: 50px }

/* ---------- PROCESS ---------- */

.process { background: var(--dark2) }
.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 70px auto 0;
    max-width: 1300px;
    position: relative
}
.process-steps::before {
    content: '';
    position: absolute;
    top: 28px; left: 10%; right: 10%;
    height: 1px;
    background: var(--gold-line)
}
.step { text-align: center; padding: 0 16px; display: flex; flex-direction: column; align-items: center }
.step-num {
    width: 56px; height: 56px;
    border: 1px solid rgba(201, 149, 106, .3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    font-size: 20px;
    color: var(--rose-gold);
    background: var(--dark2);
    position: relative;
    z-index: 1
}
html[lang="en"] .step-num { font-family: var(--latin); font-size: 24px }
.step h4 { font-size: 14px; color: var(--rose-gold-light); margin-bottom: 8px; font-weight: 500 }
html[lang="en"] .step h4 { font-family: var(--latin); font-size: 21px; font-weight: 500 }
.step p { font-size: 13px; color: rgba(249, 245, 240, .48); line-height: 2; flex: 1 }
html[lang="en"] .step p { line-height: 1.7 }
.step-tag { margin-top: 16px; font-size: 12px; letter-spacing: 1px }

/* ---------- FEES ---------- */

.pricing { background: var(--dark) }
.pricing-inner { max-width: 920px; margin: 0 auto }
.pricing-card {
    position: relative;
    background: linear-gradient(135deg, rgba(139, 26, 26, .08), rgba(201, 149, 106, .05));
    border: 1px solid rgba(201, 149, 106, .2);
    padding: 56px;
    margin-top: 50px;
    text-align: center
}
.pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 2px;
    background: linear-gradient(90deg, var(--crimson), var(--rose-gold))
}
.pricing-tag { font-size: 12px; color: var(--rose-gold); margin-bottom: 26px }
html[lang="en"] .pricing-tag { letter-spacing: 2px; text-transform: uppercase; font-size: 11px }
.pricing-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: start }
.pricing-point {
    padding: 20px 22px;
    background: rgba(201, 149, 106, .04);
    border-inline-start: 2px solid var(--rose-gold)
}
.pricing-point strong { display: block; color: var(--rose-gold-light); font-weight: 500; font-size: 14px; margin-bottom: 4px }
.pricing-point p { font-size: 14px; color: rgba(249, 245, 240, .62); line-height: 1.9 }

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

@media (max-width: 1080px) {
    .about { grid-template-columns: 1fr; gap: 50px }
    .process-steps { grid-template-columns: repeat(3, 1fr); row-gap: 50px }
    .process-steps::before { display: none }
}

@media (max-width: 900px) {
    .about-cards { grid-template-columns: 1fr }
    .about-card { padding: 28px 24px }
    .process-steps { grid-template-columns: 1fr; row-gap: 0; margin-top: 40px }
    .step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 18px;
        text-align: start;
        align-items: start;
        padding: 22px 0;
        border-bottom: 1px solid var(--line)
    }
    .step:last-child { border-bottom: none }
    .step-num { grid-row: 1 / span 3; margin: 0 }
    .step-tag { justify-self: start; margin-top: 10px }
    .pricing-card { padding: 34px 18px }
    .pricing-points { grid-template-columns: 1fr }
}