/* ==========================================================================
   ЭРЧИМ ХҮЧ ХЭМНЭЛТТЭЙ ХАУС
   Үндсэн хуудсаас (v6.css) илүү цайвар, гэгээлэг. Цагаан + shiny silver
   давамгайлж, ногоон нь зөвхөн өргөлт болно. Алтлаг нь дулааныг заана.
   ========================================================================== */

body { background: var(--white); }

/* Энэ хуудсанд толгой бүр цайвар */
.b-head { background: rgba(255,255,255,.9); }
.b-top { background: var(--forest); }

/* --- Цайвар хийл --------------------------------------------------------- */
.e-hero {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--silver) 100%);
    overflow: hidden;
    padding: 64px 0 0;
}
.e-hero::after {
    content: '';
    position: absolute; right: -6%; top: -18%;
    width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
    background: radial-gradient(circle, rgba(184,174,102,.28) 0%, rgba(184,174,102,0) 68%);
    pointer-events: none;
}
.e-hero .shell { position: relative; z-index: 1; }

.e-crumb {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--evergreen-45);
    margin-bottom: 24px;
}
.e-crumb a { color: var(--olive); }
.e-crumb a:hover { color: var(--evergreen); }

.e-title {
    font-size: clamp(38px, 6.4vw, 88px);
    font-weight: 700; letter-spacing: -.028em; line-height: 1;
    max-width: 16ch;
}
.e-title em { font-style: normal; color: var(--olive); }
.e-lead { max-width: 50ch; margin-top: 22px; color: var(--evergreen-70); font-size: 16.5px; }
.e-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Гол үзүүлэлтийн хайрцгууд */
.e-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px; }
@media (max-width: 900px) { .e-kpis { grid-template-columns: repeat(2, 1fr); } }
.e-kpi {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 22px 20px 24px;
}
.e-kpi b {
    display: block; font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1; color: var(--evergreen);
}
.e-kpi b sup { font-size: .45em; font-weight: 500; color: var(--olive); }
.e-kpi span { display: block; margin-top: 10px; font-size: 12.5px; color: var(--evergreen-70); }

.e-hero-art { margin-top: 46px; aspect-ratio: 21 / 8; background: var(--silver); overflow: hidden; }
.e-hero-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 780px) { .e-hero-art { aspect-ratio: 4 / 3; } }

/* --- Хэсэг -------------------------------------------------------------- */
.e-sec { padding: 92px 0; }
.e-sec--tint { background: var(--silver); }
@media (max-width: 780px) { .e-sec { padding: 64px 0; } }

/* --- Хананы огтлол ------------------------------------------------------- */
.e-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .e-wall { grid-template-columns: 1fr; gap: 34px; } }
.e-wall-fig { background: var(--white); border: 1px solid var(--line); padding: 26px; }
.e-wall-fig svg { width: 100%; height: auto; display: block; }

.e-layers { margin-top: 26px; }
.e-layer {
    display: grid; grid-template-columns: 26px 1fr auto;
    gap: 14px; align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.e-layer .sw { width: 22px; height: 22px; border: 1px solid var(--line); }
.e-layer .nm { font-size: 14.5px; color: var(--evergreen); }
.e-layer .th {
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--olive); white-space: nowrap;
}

.e-uvalue {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
    margin-top: 24px; padding: 18px 20px;
    background: var(--faded-16); border: 1px solid var(--faded-30);
}
.e-uvalue b { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--evergreen); }
.e-uvalue span { font-size: 13.5px; color: var(--evergreen-70); }

/* --- Дулаан алдагдлын харьцуулалт --------------------------------------- */
.e-loss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 880px) { .e-loss { grid-template-columns: 1fr; } }
.e-loss-card { background: var(--white); border: 1px solid var(--line); padding: 26px 24px 30px; }
.e-loss-card.is-good { border-color: var(--olive); }
.e-loss-card h3 {
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 6px;
}
.e-loss-card .sum { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; }
.e-loss-card .sum small { font-size: 13px; font-weight: 500; color: var(--evergreen-70); }
.e-loss-card.is-bad .sum { color: #A2553B; }
.e-loss-card.is-good .sum { color: var(--olive); }
.e-loss-card svg { width: 100%; height: auto; display: block; margin: 18px 0 8px; }

.e-bars { margin-top: 14px; }
.e-bar { padding: 9px 0; }
.e-bar-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--evergreen-70); margin-bottom: 6px; }
.e-bar-top b { font-family: var(--font-display); font-weight: 700; color: var(--evergreen); }
.e-bar-track { height: 8px; background: var(--silver); border: 1px solid var(--line); }
.e-bar-fill { height: 100%; background: var(--olive); }
.is-bad .e-bar-fill { background: #C0714F; }

/* --- Зардлын харьцуулалт ------------------------------------------------ */
.e-cost { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .e-cost { grid-template-columns: 1fr; gap: 32px; } }
.e-cost-table { width: 100%; border-collapse: collapse; }
.e-cost-table th, .e-cost-table td { padding: 15px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; text-align: right; }
.e-cost-table th:first-child, .e-cost-table td:first-child { text-align: left; padding-left: 0; }
.e-cost-table thead th {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: var(--evergreen-45);
}
.e-cost-table td { font-family: var(--font-display); font-weight: 700; color: var(--evergreen); }
.e-cost-table td:first-child { font-weight: 400; font-family: var(--font-body); color: var(--evergreen-70); }
.e-cost-table .hi { color: var(--olive); }
.e-cost-note { margin-top: 14px; font-size: 12.5px; color: var(--evergreen-45); }

.e-save {
    background: var(--evergreen); color: var(--white);
    padding: 34px 30px 38px;
}
.e-save b {
    display: block; font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 66px); font-weight: 700; line-height: 1; color: var(--faded);
}
.e-save span { display: block; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.75); }
.e-save ul { margin-top: 22px; border-top: 1px solid var(--line-light); }
.e-save li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-light); font-size: 14px; color: rgba(255,255,255,.82); }
.e-save li::before { content: ''; width: 14px; height: 11px; margin-top: 6px; flex: 0 0 auto; background: var(--faded); clip-path: polygon(50% 0%, 100% 46%, 100% 100%, 0% 100%, 0% 46%); }

/* --- Стандарт / шалгуур -------------------------------------------------- */
.e-std { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 880px) { .e-std { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .e-std { grid-template-columns: 1fr; } }
.e-std-item { background: var(--white); padding: 28px 24px 32px; }
.e-std-item .lbl {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--olive);
}
.e-std-item h3 { font-size: 16px; margin: 12px 0 8px; }
.e-std-item p { font-size: 14px; color: var(--evergreen-70); }

/* <picture> нь inline элемент тул блок болгож, өндрийг дамжуулна —
   эс бөгөөс доор нь мөрийн зай гарч, object-fit ажиллахгүй. */
.e-hero-art picture { display: block; width: 100%; height: 100%; }