/* EvNet.az — "emlak" page group on top of the ev- kit (evnet-ui.css), 2026-10-28.
 *
 * Pages: /new-builds  /market  /calculator  /ai-valuation  /insurance
 * Everything here is either an `em-` class of this file, or a restyle of the
 * classes those pages' own scripts render (public-project-card, pi-*, bank-card,
 * mkt-chip …): the scripts keep their markup, this file gives it the kit's look.
 * Animation: transform / opacity (plus stroke-dash on small SVGs); every loop has
 * a static reduced-motion fallback at the bottom.
 * Names avoid "ad", "banner", "promo", "sponsor" (ad blockers).
 */

/* ── shared bits ──────────────────────────────────────────────────────── */

.em-scene svg { display: block; }
.em-scene .acc { stroke: var(--ev-tif-2); }
/* amber stroke that draws itself under a heading word (the word's innerHTML is owned by i18n, so no inline svg) */
.em-ul { position: relative; color: var(--ev-tif-text); }
.em-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.16em; height: .12em; border-radius: .1em; background: var(--ev-amber); transform: scaleX(0); transform-origin: 0 50%; animation: em-ul 1s 1s var(--ev-e-in-out) forwards; }
.em-h1-line { display: block; }
.ev-h1 .em-h1-line.w { display: block; width: fit-content; }
.em-fade { stroke-opacity: 0; transition: stroke-opacity .9s var(--ev-e-out); transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.ev-draw.is-in .em-fade { stroke-opacity: .85; }
/* the main drawing of each hero: slow, so the "being drawn" moment reads */
.em-scene.ev-draw.is-in .dr { animation-duration: 1.6s; }
.em-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ev-line), var(--ev-shadow-1); font: 600 .72rem/1 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ev-lagoon); white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .6s var(--ev-e-out), transform .6s var(--ev-e-out); transition-delay: calc(var(--i, 0) * 120ms + 1.4s); }
.ev-draw.is-in .em-tag { opacity: 1; transform: none; }
.em-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ev-tif-2)); flex: none; }
.em-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.em-legend li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); font: 500 .7rem/1 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ev-lagoon); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ev-e-out), transform .6s var(--ev-e-spring); transition-delay: calc(var(--i, 0) * 110ms + 1s); }
.is-in .em-legend li, .em-legend.is-in li { opacity: 1; transform: none; }
.em-legend svg { width: 22px; height: 12px; flex: none; fill: none; stroke: var(--ev-tif-text); stroke-width: 2; }
.em-bump { animation: em-bump .45s var(--ev-e-spring); }

/* ── /new-builds ──────────────────────────────────────────────────────── */

.em-nb-hero .ev-scene { max-width: 540px; }
.em-light { opacity: .12; animation: em-blink 5.5s ease-in-out infinite; }
.em-hook { transform-box: view-box; transform-origin: 214px 44px; animation: em-sway 5.5s var(--ev-e-in-out) 2.4s infinite; }
.em-hero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.em-nb-count { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 9px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); }
.em-nb-count[hidden] { display: none; }
.em-nb-count b { font: 700 1.5rem/1 var(--ev-f-display); letter-spacing: -.03em; color: var(--ev-lagoon); }
.em-nb-count span { font: 500 .75rem/1 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ev-tif-text); }

.em-nb-list { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 48px); }
.projects-discovery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; }
.projects-discovery > :nth-child(3n + 2) { --i: 1; }
.projects-discovery > :nth-child(3n + 3) { --i: 2; }
.pp-cell { min-width: 0; }
.public-project-card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; cursor: pointer;
  border-radius: var(--ev-r-lg); background: #fff; box-shadow: 0 0 0 1px var(--ev-line);
  transition: box-shadow .4s var(--ev-e-out), transform .5s var(--ev-e-out);
}
.public-project-card:hover, .public-project-card:focus-visible { box-shadow: 0 0 0 1px var(--ev-tif), var(--ev-shadow-2); }
.pp-img { position: relative; height: 224px; overflow: hidden; background: var(--ev-mist); }
.pp-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ev-e-out); }
.public-project-card:hover .pp-img img { transform: scale(1.06); }
.pp-img::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 38%; pointer-events: none; background: linear-gradient(0deg, rgba(10, 22, 40, .28), transparent); }
.pp-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--ev-lagoon), var(--ev-lagoon-2)); }
.pp-ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(129, 216, 208, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 216, 208, .12) 1px, transparent 1px); background-size: 28px 28px; }
.pp-ph svg { position: relative; width: 58%; max-width: 200px; height: auto; fill: none; stroke: var(--ev-tif); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-badge {
  position: absolute; z-index: 3; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(10, 22, 40, .18);
  font: 600 .68rem/1 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ev-lagoon);
}
.pp-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ev-amber); flex: none; }
.pp-badge[data-status="delivered"]::before { background: var(--ev-ok); }
.pp-badge[data-status="planning"]::before { background: var(--ev-tif-2); }
.pp-content { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.pp-title { margin: 0 0 12px; font: 700 1.18rem/1.25 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); overflow-wrap: anywhere; }
.pp-mtk, .pp-loc { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: .92rem; line-height: 1.4; }
.pp-mtk { font-weight: 600; color: var(--ev-tif-text); }
.pp-loc { color: var(--ev-ink-2); }
.pp-mtk svg, .pp-loc svg, .pp-date svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--ev-line); }
.pp-date { display: inline-flex; align-items: center; gap: 8px; font: 500 .78rem/1.2 var(--ev-f-mono); letter-spacing: .02em; color: var(--ev-lagoon); }
.pp-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--ev-tif-text); }
.pp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ev-e-spring); }
.public-project-card:hover .pp-btn svg { transform: translateX(5px); }
.em-nb-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 4px; color: var(--ev-ink-3); font: 500 .8rem/1.2 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; }
.em-nb-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ev-mist-2); border-top-color: var(--ev-tif-2); animation: ev-spin .8s linear infinite; }
.em-skel-card { height: 380px; border-radius: var(--ev-r-lg); background: #fff; box-shadow: 0 0 0 1px var(--ev-line); overflow: hidden; }
.em-skel-card .ev-skel { border-radius: 0; height: 224px; }
.em-skel-card i { display: block; margin: 18px 22px 0; height: 14px; }
.em-skel-card i:nth-of-type(2) { width: 55%; }
.em-nb-empty { grid-column: 1 / -1; border-radius: var(--ev-r-lg); background: #fff; box-shadow: 0 0 0 1px var(--ev-line); padding: clamp(28px, 6vw, 64px) 20px; }
.em-nb-empty .ev-scene { max-width: 360px; margin: 0 auto 8px; }
.em-nb-error { grid-column: 1 / -1; text-align: center; color: var(--ev-danger); font-weight: 600; }

/* ── /market ──────────────────────────────────────────────────────────── */

.em-mkt-hero .ev-scene { max-width: 560px; }
.em-mkt-title { display: block; }
.em-mkt-title::after { content: ""; display: block; width: 84px; height: 6px; margin-top: 14px; border-radius: 6px; background: var(--ev-amber); transform: scaleX(0); transform-origin: 0 50%; animation: em-ul 1s 1s var(--ev-e-in-out) forwards; }
.em-bar-fill { fill: var(--ev-mist-2); opacity: 0; transition: opacity .7s var(--ev-e-out), transform .5s var(--ev-e-spring); transition-delay: calc(var(--i, 0) * 90ms + 1s); transform-box: fill-box; transform-origin: 50% 100%; }
.ev-draw.is-in .em-bar-fill { opacity: .9; }
.em-bar:hover .em-bar-fill { fill: var(--ev-tif); transform: scaleY(1.05); }
.em-bar:hover .dr { stroke: var(--ev-lagoon); }
.em-grid-l { stroke-dasharray: 2 8; stroke-width: 1.2; }
.em-area { opacity: 0; transition: opacity 1.2s var(--ev-e-out) 2.4s; }
.ev-draw.is-in .em-area { opacity: 1; }
.em-trend { stroke: var(--ev-amber); stroke-width: 3.2; }
.em-end { opacity: 0; transition: opacity .5s 3s; }
.ev-draw.is-in .em-end { opacity: 1; }
.em-end-ring { transform-box: fill-box; transform-origin: center; animation: ev-ping 2s var(--ev-e-out) infinite; }
.em-mkt-tag { position: absolute; z-index: 2; left: 60%; top: 3%; }

.em-mkt-band { padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 36px); }
.mkt-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(24px, 3vw, 36px); }
.mkt-chip { position: relative; min-width: 0; padding: 18px 18px 16px; border-radius: var(--ev-r-md); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(129, 216, 208, .2); transition: transform .4s var(--ev-e-out), box-shadow .4s, background .4s; }
.mkt-chip:hover { transform: translateY(-4px); background: rgba(129, 216, 208, .09); box-shadow: inset 0 0 0 1px var(--ev-tif); }
.mkt-chip-label { font: 500 .68rem/1.3 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fd6cf; }
.mkt-chip-val { margin: 12px 0 8px; font: 700 clamp(1.25rem, .95rem + 1vw, 1.75rem)/1.1 var(--ev-f-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mkt-chip-val.is-set { animation: em-pop .6s var(--ev-e-spring); }
.mkt-chip-sub { font-size: .82rem; color: #9cc9c4; }
.mkt-chip-change { display: inline-flex; padding: 4px 10px; border-radius: 999px; font: 600 .72rem/1 var(--ev-f-mono); letter-spacing: .03em; }
.mkt-chip-change.up { background: rgba(74, 222, 128, .16); color: #7ee8a8; }
.em-mkt-chart { position: relative; }
.em-mkt-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.em-mkt-chart-head .ev-mono { color: #8fd6cf; }
.em-mkt-chart-head i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(129, 216, 208, .4), transparent); }
.mkt-main-chart-wrap { position: relative; height: clamp(220px, 28vw, 300px); }
.mkt-main-chart-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(129, 216, 208, .5), transparent); background-size: 200% 100%; animation: ev-sheen-x 1.6s ease-in-out infinite; transition: opacity .4s; }
.mkt-main-chart-wrap.is-ready::before { opacity: 0; animation: none; }
.mkt-main-chart-wrap canvas { position: relative; }

.em-mkt-body { background: var(--ev-mist); }
.em-mkt-body .pi-wrap { margin-bottom: 24px; }
.pi-section { padding: clamp(20px, 3vw, 34px); border-radius: var(--ev-r-lg); background: #fff; box-shadow: var(--ev-shadow-2), 0 0 0 1px rgba(10, 22, 40, .05); margin-bottom: 24px; }
.pi-title { margin: 0 0 12px; font: 700 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.2 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); }
.pi-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; color: var(--ev-ink-3); }
.pi-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 .74rem/1 var(--ev-f-mono); letter-spacing: .03em; background: var(--ev-mist-2); color: var(--ev-tif-text); border: 0; }
.pi-note { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--ev-amber-soft); box-shadow: inset 0 0 0 1px #f3d991; color: var(--ev-ink-2); font-size: .9rem; line-height: 1.55; }
.pi-tabs { margin: 22px 0 16px; padding: 4px; border-bottom: 0; }
.pi-tabs.ev-tabs { display: inline-flex; }
.pi-tabs:not(.ev-tabs) { display: inline-flex; gap: 4px; border-radius: 999px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); }
.pi-tab { position: relative; z-index: 1; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--ev-ink-2); font: 600 .92rem/1 var(--ev-f-body); cursor: pointer; transition: color .25s; margin: 0; }
.pi-tab.active { color: var(--ev-lagoon); }
.pi-tabs:not(.ev-tabs) .pi-tab.active { background: #fff; box-shadow: 0 1px 4px rgba(10, 22, 40, .12); }
.pi-table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ev-line); -webkit-overflow-scrolling: touch; }
.pi-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .92rem; }
.pi-table th { padding: 13px 14px; text-align: left; background: var(--ev-mist); color: var(--ev-tif-text); border: 0; font: 600 .7rem/1.3 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pi-table th small { font: inherit; opacity: .8; text-transform: none; letter-spacing: 0; }
.pi-row { border-bottom: 0; cursor: default; transition: background .25s; animation: em-row-in .6s var(--ev-e-out) backwards; }
.pi-row:nth-child(1) { animation-delay: .04s; } .pi-row:nth-child(2) { animation-delay: .09s; } .pi-row:nth-child(3) { animation-delay: .14s; }
.pi-row:nth-child(4) { animation-delay: .19s; } .pi-row:nth-child(5) { animation-delay: .24s; } .pi-row:nth-child(6) { animation-delay: .29s; }
.pi-row:nth-child(7) { animation-delay: .34s; } .pi-row:nth-child(8) { animation-delay: .39s; } .pi-row:nth-child(9) { animation-delay: .44s; }
.pi-row:nth-child(10) { animation-delay: .49s; }
.pi-row:hover { background: var(--ev-mist); }
.pi-row td { padding: 14px; border-top: 1px solid var(--ev-line); vertical-align: middle; color: var(--ev-ink-2); }
.pi-row td strong { color: var(--ev-ink); }
.pi-range-bar { display: flex; align-items: center; gap: 4px; min-width: 190px; }
.pi-range-bar > span:nth-child(2) { height: 6px !important; margin: 0 8px !important; border-radius: 6px !important; transform-origin: 0 50%; animation: em-grow 1s var(--ev-e-out) .3s backwards; }
.pi-median { font: 600 .95rem/1 var(--ev-f-mono) !important; color: var(--ev-lagoon) !important; font-variant-numeric: tabular-nums; }
.pi-disclaimer { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); color: var(--ev-ink-2); font-size: .85rem; line-height: 1.6; }
.em-card-chart { padding: clamp(22px, 3vw, 34px); }
.em-card-chart h2 { margin: 0 0 6px; font: 700 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.2 var(--ev-f-display); letter-spacing: -.02em; }
.em-card-chart p { margin: 0 0 18px; color: var(--ev-ink-2); font-size: .95rem; }
.em-card-chart .em-chart-box { position: relative; height: 260px; }
.em-mkt-foot { text-align: center; padding: 22px var(--ev-gut); color: var(--ev-ink-3); font: 500 .75rem/1.4 var(--ev-f-mono); letter-spacing: .06em; }

/* ── /calculator ──────────────────────────────────────────────────────── */

.em-calc-hero .ev-scene { max-width: 500px; }
.em-calc-sec { padding-top: clamp(28px, 4vw, 48px); }
.em-banks { padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.em-flow { fill: none; stroke: var(--ev-tif-2); stroke-width: 2; stroke-dasharray: 3 9; animation: em-march 3s linear infinite; }
.em-flow-dot { offset-path: path("M352 190C330 60 262 50 200 112"); offset-rotate: 0deg; animation: em-flow 3.4s var(--ev-e-in-out) 1.8s infinite; opacity: 0; }

.em-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.em-inputs { padding: clamp(22px, 3vw, 36px); }
.calc-title { margin: 0 0 24px; font: 700 1.2rem/1.25 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); }
.calc-group { margin-bottom: 26px; }
.calc-group:last-child { margin-bottom: 0; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; font: 500 .72rem/1.3 var(--ev-f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ev-ink-3); }
.calc-label span:last-child { font: 600 1rem/1.2 var(--ev-f-mono); letter-spacing: 0; text-transform: none; color: var(--ev-lagoon); font-variant-numeric: tabular-nums; text-align: right; transform-origin: 100% 50%; }
.em-inputs input[type=range] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 6px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--ev-tif-2) 0, var(--ev-tif) var(--percent, 50%), var(--ev-mist-2) var(--percent, 50%), var(--ev-mist-2) 100%);
}
.em-inputs input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ev-tif-2), 0 5px 12px rgba(10, 22, 40, .22); cursor: grab; transition: transform .25s var(--ev-e-spring), box-shadow .25s; }
.em-inputs input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ev-tif-2), 0 5px 12px rgba(10, 22, 40, .22); cursor: grab; }
.em-inputs input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.em-inputs input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); box-shadow: 0 0 0 3px var(--ev-tif-2), 0 0 0 11px rgba(129, 216, 208, .28), 0 6px 14px rgba(10, 22, 40, .25); }
.em-ruler { height: 8px; margin: 10px 14px 0; background:
  repeating-linear-gradient(90deg, #b9d6d2 0 1px, transparent 1px 25%) 0 0 / 100% 8px no-repeat,
  repeating-linear-gradient(90deg, #d6e6e4 0 1px, transparent 1px 5%) 0 100% / 100% 4px no-repeat; }
.em-ruler { border-right: 1px solid #b9d6d2; }
.em-presets { margin-top: 12px; }
.em-presets .ev-chip { padding: 7px 12px; font-size: .8rem; }

.em-result { position: sticky; top: 88px; padding: clamp(22px, 3vw, 34px); border-radius: var(--ev-r-lg); background: var(--ev-lagoon); color: #e9f6f4; overflow: hidden; box-shadow: var(--ev-shadow-2); }
.em-result::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(129, 216, 208, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 216, 208, .07) 1px, transparent 1px); background-size: 32px 32px; }
.em-result > * { position: relative; }
.em-result-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.em-result-main { min-width: 0; }
.result-label { font: 500 .72rem/1.3 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fd6cf; }
.result-val { margin: 12px 0 8px; font: 700 clamp(2.2rem, 1.5rem + 2.6vw, 3.3rem)/1 var(--ev-f-display); letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-sub { color: #9cc9c4; font-size: .95rem; }
.em-donut { position: relative; width: 150px; height: 150px; margin: 0; flex: none; }
.em-donut::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba(129, 216, 208, .35); animation: ev-spin 48s linear infinite; }
.em-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.em-donut circle { fill: none; stroke-width: 15; }
.em-donut-track { stroke: rgba(129, 216, 208, .14); }
.em-donut-p { stroke: var(--ev-tif); transition: stroke-dasharray .75s var(--ev-e-out), stroke-dashoffset .75s var(--ev-e-out); }
.em-donut-i { stroke: var(--ev-amber); transition: stroke-dasharray .75s var(--ev-e-out), stroke-dashoffset .75s var(--ev-e-out); }
.em-donut figcaption { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; }
.em-donut figcaption b { font: 700 1.6rem/1 var(--ev-f-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.em-donut figcaption span { max-width: 86px; margin: 0 auto; font: 500 .58rem/1.25 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; color: #8fd6cf; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.result-item { position: relative; min-width: 0; padding: 14px 14px 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(129, 216, 208, .16); transition: background .3s, transform .35s var(--ev-e-spring); }
.result-item:hover { background: rgba(129, 216, 208, .1); transform: translateY(-2px); }
.result-item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: rgba(129, 216, 208, .25); }
.result-item.em-k-p::before { background: var(--ev-tif); }
.result-item.em-k-i::before { background: var(--ev-amber); }
.result-item-label { margin-bottom: 8px; font: 500 .64rem/1.3 var(--ev-f-mono); letter-spacing: .07em; text-transform: uppercase; color: #8fd6cf; }
.result-item-val { font: 600 1.02rem/1.2 var(--ev-f-mono); color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.em-curve { margin-bottom: 22px; }
.em-curve-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; min-height: 18px; }
.em-curve-head .ev-mono { color: #8fd6cf; }
.em-curve-tip { font: 600 .78rem/1 var(--ev-f-mono); color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.em-curve.is-scrub .em-curve-tip { opacity: 1; }
.em-curve svg { display: block; width: 100%; height: 112px; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.em-curve-grid { fill: none; stroke: rgba(129, 216, 208, .16); stroke-width: 1; stroke-dasharray: 2 6; }
.em-curve-line { fill: none; stroke: var(--ev-tif); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.em-curve-cursor { stroke: rgba(255, 190, 26, .8); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; }
.em-curve-dot { fill: var(--ev-amber); stroke: var(--ev-lagoon); stroke-width: 2; opacity: 0; transition: opacity .2s; }
.em-curve.is-scrub .em-curve-cursor, .em-curve.is-scrub .em-curve-dot { opacity: 1; }
.em-curve-axis { display: flex; justify-content: space-between; margin-top: 6px; font: 500 .66rem/1 var(--ev-f-mono); letter-spacing: .06em; color: #8fd6cf; }
.disclaimer { padding-top: 16px; border-top: 1px solid rgba(129, 216, 208, .2); color: #9cc9c4; font-size: .76rem; line-height: 1.6; }
.em-mini {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-radius: 16px; background: var(--ev-lagoon); color: #fff; box-shadow: var(--ev-shadow-2), inset 0 0 0 1px rgba(129, 216, 208, .25);
  transform: translateY(140%); transition: transform .5s var(--ev-e-spring);
}
.em-mini.is-on { transform: none; }
.em-mini span { font: 500 .7rem/1.2 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fd6cf; }
.em-mini b { font: 700 1.2rem/1 var(--ev-f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.bank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bank-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "icon name" "icon rate" "icon lbl"; column-gap: 16px; align-items: center; padding: 20px; border-radius: var(--ev-r-md); background: #fff; box-shadow: 0 0 0 1px var(--ev-line); text-align: left; transition: transform .4s var(--ev-e-out), box-shadow .4s var(--ev-e-out); }
.bank-card::after { content: ""; position: absolute; right: -30%; bottom: -70%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(129, 216, 208, .45), transparent 70%); transform: scale(.4); opacity: 0; transition: transform .6s var(--ev-e-out), opacity .6s; pointer-events: none; }
.bank-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--ev-tif), var(--ev-shadow-2); }
.bank-card:hover::after { transform: scale(1); opacity: 1; }
.bank-icon { grid-area: icon; display: grid; place-items: center; width: 56px; height: 56px; margin: 0; border-radius: 16px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); font-size: 1.6rem; transition: background .4s, transform .5s var(--ev-e-spring); }
.bank-card:hover .bank-icon { background: #dff6f2; transform: rotate(-5deg) scale(1.06); }
.bank-name { grid-area: name; margin: 0; font-weight: 700; font-size: .95rem; color: var(--ev-ink); overflow-wrap: anywhere; }
.bank-rate { grid-area: rate; margin: 2px 0; font: 700 1.55rem/1.1 var(--ev-f-display); letter-spacing: -.03em; color: var(--ev-lagoon); }
.bank-rate-lbl { grid-area: lbl; font: 500 .68rem/1.3 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ev-ink-3); }

/* ── /ai-valuation ────────────────────────────────────────────────────── */

.em-aiv-hero .ev-scene { max-width: 540px; }
.em-scan-svg text { font: 600 13px var(--ev-f-mono); letter-spacing: .06em; fill: var(--ev-tif-text); stroke: none; }
.em-txt { opacity: 0; transition: opacity .8s var(--ev-e-out) 2s; }
.ev-draw.is-in .em-txt { opacity: 1; }
.em-room { fill: var(--ev-tif); stroke: none; opacity: 0; }
.em-room.r1 { animation: em-room-a 8s linear infinite; }
.em-room.r2 { animation: em-room-b 8s linear infinite; }
.em-room.r3 { animation: em-room-c 8s linear infinite; }
.em-room.r4 { animation: em-room-d 8s linear infinite; }
.em-beam { opacity: 0; animation: em-beam 8s linear 1.6s infinite; }
.em-snap { fill: #fff; stroke: var(--ev-amber); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: em-snap 8s ease-out infinite; animation-delay: calc(var(--k, 0) * .45s + 2s); }
.em-lab { opacity: 0; animation: em-lab 8s linear 1.6s infinite; }
.em-lab.l2 { animation-name: em-lab2; }
.em-pricetag { opacity: 0; transform-box: fill-box; transform-origin: center; animation: em-tagpop 8s var(--ev-e-spring) 1.6s infinite; }
.em-pricetag text { fill: var(--ev-lagoon); font: 700 20px var(--ev-f-body); letter-spacing: 0; }
.em-route { display: flex; flex-direction: column; min-height: 100%; padding: clamp(24px, 3vw, 34px); }
.em-route .ev-ico { margin-bottom: 20px; }
.em-route h2 { margin: 0 0 10px; font: 700 1.2rem/1.28 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); padding-right: 28px; }
.em-route p { margin: 0 0 18px; color: var(--ev-ink-2); font-size: 1rem; line-height: 1.6; }
.em-route .ev-link { margin-top: auto; align-self: flex-start; }
.em-aiv-steps .ev-step-list { --n: 3; }
.em-route-grid { align-items: stretch; }

/* ── /insurance ───────────────────────────────────────────────────────── */

.em-ins { margin: 0; }
.em-ins-hero .ev-actions { margin-top: 18px; }
.em-ins-hero .ev-btn:hover svg.ev-arrow { transform: translateX(-4px); }
.em-ins-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 6px; }
.em-ins-top .em-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ev-lagoon); font: 800 1.35rem/1 var(--ev-f-body); letter-spacing: -.03em; text-decoration: none; }
.em-ins-top .em-logo svg { width: 32px; height: 32px; color: var(--ev-tif-2); }
.em-ins-top .em-logo b { color: var(--ev-tif-2); font-weight: 800; }
.em-ins .lang-switcher { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); }
.em-ins .lang-btn { padding: 7px 12px; border: 0; border-radius: 999px; background: none; color: var(--ev-ink-2); font: 600 .78rem/1 var(--ev-f-mono); letter-spacing: .04em; cursor: pointer; transition: background .25s, color .25s; }
.em-ins .lang-btn.active { background: var(--ev-tif); color: var(--ev-lagoon); }
.em-ins-hero { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 7vw, 96px); min-height: calc(100vh - 80px); display: flex; align-items: center; }
.em-ins-hero > .ev-wrap { width: 100%; }
.em-ins-hero .ev-scene { max-width: 520px; }
.em-ins-hero .ev-lead { max-width: 30em; }
.em-dome { fill: none; stroke: var(--ev-tif-2); stroke-width: 2; stroke-dasharray: 3 9; opacity: 0; transition: opacity 1s 1.8s; animation: em-march 14s linear infinite; }
.ev-draw.is-in .em-dome { opacity: .8; }
.em-drop { fill: none; stroke: var(--ev-tif-2); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: em-drop 3s var(--ev-e-in-out) infinite; }
.em-shield-in { animation: em-shield-in 1.2s var(--ev-e-spring) .5s backwards; }
.em-shield { transform-box: fill-box; transform-origin: center; animation: ev-float 5.5s var(--ev-e-in-out) 1.7s infinite; }
.em-shield-fill { fill: var(--ev-mist); stroke: none; opacity: 0; transition: opacity .8s 1.6s; }
.ev-draw.is-in .em-shield-fill { opacity: 1; }
.em-check { stroke: var(--ev-amber); stroke-width: 6; }
.em-tw { stroke: var(--ev-amber); stroke-width: 2.4; opacity: 0; animation: em-twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.em-ins-next .ev-card { padding: clamp(22px, 3vw, 30px); }
.em-ins-next .ev-card h3 { margin: 0 0 8px; font: 700 1.12rem/1.3 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); padding-right: 28px; }
.em-ins-foot { padding: 26px var(--ev-gut) 34px; text-align: center; color: var(--ev-ink-3); font: 500 .75rem/1.4 var(--ev-f-mono); letter-spacing: .06em; }

/* ── keyframes ────────────────────────────────────────────────────────── */

@keyframes em-ul { to { transform: scaleX(1); } }
@keyframes em-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--ev-tif-text); } 100% { transform: scale(1); } }
@keyframes em-pop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes em-blink { 0%, 100% { opacity: .08; } 40%, 62% { opacity: .95; } }
@keyframes em-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg); } }
@keyframes em-march { to { stroke-dashoffset: -96; } }
@keyframes em-flow { 0% { offset-distance: 100%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 0%; opacity: 0; } }
@keyframes em-grow { from { transform: scaleX(0); } }
@keyframes em-row-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes em-beam { 0%, 3% { opacity: 0; transform: translateX(40px); } 6% { opacity: 1; transform: translateX(40px); } 52% { opacity: 1; transform: translateX(432px); } 58%, 100% { opacity: 0; transform: translateX(432px); } }
@keyframes em-room-a { 0%, 24% { opacity: 0; } 28%, 78% { opacity: .22; } 90%, 100% { opacity: 0; } }
@keyframes em-room-b { 0%, 42% { opacity: 0; } 46%, 78% { opacity: .22; } 90%, 100% { opacity: 0; } }
@keyframes em-room-c { 0%, 28% { opacity: 0; } 32%, 78% { opacity: .22; } 90%, 100% { opacity: 0; } }
@keyframes em-room-d { 0%, 44% { opacity: 0; } 48%, 78% { opacity: .22; } 90%, 100% { opacity: 0; } }
@keyframes em-snap { 0%, 4% { opacity: 0; transform: scale(.2); } 10% { opacity: 1; transform: scale(1.4); } 16%, 78% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1); } }
@keyframes em-lab { 0%, 26% { opacity: 0; } 32%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes em-lab2 { 0%, 46% { opacity: 0; } 52%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes em-tagpop { 0%, 54% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.15); } 64%, 80% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1); } }
@keyframes em-drop { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .9; } 66% { opacity: .9; transform: translateY(var(--len, 150px)); } 72%, 100% { opacity: 0; transform: translateY(var(--len, 150px)); } }
@keyframes em-shield-in { from { opacity: 0; transform: translateY(-36px) scale(.9); } }
@keyframes em-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .em-calc { grid-template-columns: minmax(0, 1fr); }
  .em-result { position: static; }
  .mkt-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-ins-hero { min-height: 0; }
  .ev-hero-grid .ev-scene { max-width: 460px; }
}
@media (max-width: 760px) {
  .em-mini { display: flex; }
  .em-result-top { gap: 14px; }
  .em-donut { width: 124px; height: 124px; }
  .em-donut figcaption b { font-size: 1.3rem; }
  .em-legend { gap: 8px; }
  .em-mkt-tag { display: none; }
  .em-aiv-hero .ev-scene, .em-ins-hero .ev-scene { max-width: 380px; }
}
@media (max-width: 520px) {
  .result-val { font-size: 1.75rem; }
  .em-donut { width: 112px; height: 112px; }
  .em-donut figcaption b { font-size: 1.15rem; }
  .bank-grid { grid-template-columns: minmax(0, 1fr); }
  .mkt-stat-row { gap: 10px; }
  .mkt-chip { padding: 14px; }
  .result-grid { gap: 8px; }
  .em-ins-top { padding-top: 16px; }
  .pp-img { height: 200px; }
}

/* ── reduced motion: loops rest in their finished state ───────────────── */

@media (prefers-reduced-motion: reduce) {
  .em-light { opacity: .8; }
  .em-room { opacity: .2; }
  .em-room.r4 { opacity: .2; }
  .em-beam { display: none; }
  .em-snap { opacity: 1; transform: none; }
  .em-lab, .em-pricetag { opacity: 1; transform: none; }
  .em-drop { display: none; }
  .em-tw { opacity: 1; }
  .em-flow-dot { display: none; }
  .em-ul::after, .em-mkt-title::after { transform: scaleX(1); }
  .em-hook { transform: none; }
  .em-end-ring { animation: none; }
  .em-legend li, .em-tag { opacity: 1; transform: none; }
  .em-donut::before { animation: none; }
}

/* "online now" row inside each hero */
.em-live-row { margin: 0 0 6px; }