/* Imtiyaz Group: A101 dizayn tizimi, brendbuk 1.0 ranglarida.
   Bitta shrift (Golos Text), zich katta sarlavhalar, kulrang bloklar chiziq o'rniga,
   hamma boshqaruv tabletka, sahifa deyarli chetdan chetgacha, bitta urg'u: g'isht rang faqat asosiy harakatda. */
:root {
  --page: #FFFFFF; --block: #F3F1EC; --block-2: #E9E5DD; --line: #E2DDD3;
  --ink: #1C1B18; --ink-2: #4B4740; --ink-3: #9C968C;
  --accent: #A8482A; --accent-hover: #933D23; --on-accent: #FFFFFF; --accent-soft: #F4E4DC;
  --clay: #CDBBA3; --clay-ink: #7D6448;
  --ok: #3E6B4F;
  --dark: #1C1B18; --on-dark: #EEE8DD; --on-dark-2: #A79F92;
  --glass: rgba(28, 27, 24, .45);
  --f-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-s: 6px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 100px;
  --gut: clamp(16px, 1.4vw, 20px);
  --gap: clamp(16px, 1.4vw, 20px);
  --sec: clamp(48px, 5vw, 80px);
  --wrap: 1880px;
  --header-h: 72px;
  --ls: -.05em;
}
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.4 var(--f-sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--r-pill); z-index: 100; }
.skip:focus { left: 16px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
/* kulrang blok: bo'lim chiziq bilan emas, fon bilan ajraladi */
.blocky { background: var(--block); border-radius: var(--r-xl); margin-inline: var(--gut); }

/* ---------- type ---------- */
.h-hero { font: 500 clamp(40px, 5vw, 72px)/.92 var(--f-sans); letter-spacing: var(--ls); margin: 0; text-wrap: balance; }
.h-display { font: 500 clamp(30px, 3.6vw, 52px)/.94 var(--f-sans); letter-spacing: var(--ls); margin: 0 0 20px; text-wrap: balance; }
.h-title { font: 500 clamp(24px, 2.6vw, 42px)/.95 var(--f-sans); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.h-sub { font: 500 20px/1.1 var(--f-sans); letter-spacing: -.02em; margin: 32px 0 8px; }
.eyebrow { font: 500 14px/1.28 var(--f-sans); letter-spacing: -.01em; color: var(--ink-3); margin: 0 0 12px; }
.eyebrow-brass { color: var(--clay-ink); }
.eyebrow-light { color: var(--on-dark-2); }
.muted { color: var(--ink-2); }
.lead-p { font-size: 18px; line-height: 1.4; color: var(--ink-2); max-width: 60ch; }
.note { font-size: 13px; color: var(--ink-3); }
.empty { color: var(--ink-3); padding: 32px 0; }

/* ---------- buttons & chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill); border: 0; font: 500 15px/1 var(--f-sans); letter-spacing: -.01em; text-decoration: none; transition: background .2s, color .2s, transform .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn:active { transform: scale(.98); }
.btn-lapis, .btn-brass { background: var(--accent); color: var(--on-accent); }
.btn-lapis:hover, .btn-brass:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--block); color: var(--ink); }
.btn-ghost:hover { background: var(--block-2); }
.btn-on-lapis { background: #FFFFFF; color: #1C1B18; }
.btn-on-lapis:hover { background: #EEE8DD; }
.btn-outline-on-lapis { background: rgba(255, 255, 255, .16); color: #FFFFFF; backdrop-filter: blur(8px); }
.btn-outline-on-lapis:hover { background: rgba(255, 255, 255, .26); }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: #FFFFFF; color: #1C1B18; font: 500 13px/1 var(--f-sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.chip-feruza { background: var(--glass); color: #FFFFFF; backdrop-filter: blur(8px); }
.chip-brass { background: var(--block); color: var(--clay-ink); }
.chip-on-dark { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.chip-on-dark:hover { background: rgba(255, 255, 255, .24); }
.num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--block); color: var(--ink); font: 500 13px/1 var(--f-sans); flex: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter: blur(14px); }
.header-row { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.logo { display: inline-flex; color: var(--ink); flex: none; }
.logo svg { height: 38px; width: auto; }
.logo.on-lapis { color: #FFFFFF; }
.main-nav { display: none; gap: 4px; margin-inline: auto; padding: 4px; background: var(--block); border-radius: var(--r-pill); }
.main-nav > a, .nav-mega > a { text-decoration: none; font-weight: 500; font-size: 14px; padding: 10px 16px; border-radius: var(--r-pill); }
.main-nav > a:hover, .nav-mega > a:hover, .nav-mega > a[aria-expanded=true] { background: var(--block-2); }
.main-nav > a[aria-current], .nav-mega > a[aria-current] { background: var(--page); }
.header-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lang { display: flex; gap: 2px; padding: 4px; background: var(--block); border-radius: var(--r-pill); font: 500 13px/1 var(--f-sans); }
.lang > * { padding: 8px 11px; border-radius: var(--r-pill); text-decoration: none; }
.lang [aria-current] { background: var(--page); }
.lang a:hover { background: var(--block-2); }
.header-phones { display: none; flex-direction: column; text-align: right; font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.header-phones a { text-decoration: none; }
.burger { width: 44px; height: 44px; border: 0; background: var(--block); border-radius: 50%; display: grid; place-content: center; gap: 5px; }
.burger:hover { background: var(--block-2); }
.burger span:not(.sr) { width: 18px; height: 1.5px; background: currentColor; display: block; }
.nav-mega { position: relative; display: flex; }
.mega { position: fixed; left: var(--gut); right: var(--gut); top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: 1fr 260px; gap: 12px; max-width: calc(var(--wrap) - 2 * var(--gut)); margin-inline: auto; padding: 16px; border-radius: var(--r-xl); background: var(--page); box-shadow: 0 24px 60px rgba(28,27,24,.14); z-index: 60; }
.mega[hidden] { display: none; }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: min(70vh, 560px); overflow: auto; }
.mega-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-m); text-decoration: none; }
.mega-item:hover, .mega-item:focus-visible { background: var(--block); }
.mega-img { flex: none; width: 72px; height: 54px; border-radius: var(--r-s); overflow: hidden; background: var(--block); }
.mega-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-txt { display: grid; gap: 2px; min-width: 0; }
.mega-txt b { font-weight: 500; font-size: 15px; }
.mega-txt small { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-txt .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.mega-all { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 20px; border-radius: var(--r-l); background: var(--dark); color: var(--on-dark); text-decoration: none; }
.mega-all b { font: 500 28px/.95 var(--f-sans); letter-spacing: var(--ls); margin-bottom: auto; }
.mega-all span { color: var(--on-dark-2); font-size: 14px; }
.mega-all svg { width: 24px; height: 24px; margin-top: 8px; transition: transform .2s; }
.mega-all:hover svg { transform: translateX(4px); }
@media (min-width: 1080px) { .main-nav { display: flex; } .header-tools { margin-left: 0; } .header-phones { display: flex; } }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 80; background: var(--page); color: var(--ink); overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer-top { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.drawer-top .lang { margin-left: auto; }
.drawer-close { width: 44px; height: 44px; font-size: 26px; line-height: 1; background: var(--block); border: 0; border-radius: 50%; color: inherit; }
.drawer-grid { display: grid; gap: var(--gap); padding-block: 12px 48px; }
@media (min-width: 900px) { .drawer-grid { grid-template-columns: 1.3fr 1fr; } }
.drawer-nav { display: flex; flex-direction: column; gap: 4px; background: var(--block); border-radius: var(--r-xl); padding: 12px; }
.drawer-nav a { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: var(--r-l); font: 500 clamp(26px, 3.6vw, 42px)/.95 var(--f-sans); letter-spacing: var(--ls); text-decoration: none; }
.drawer-nav a:hover { background: var(--page); }
.drawer-nav .num { background: var(--page); color: var(--ink-3); }
.drawer-info { display: flex; flex-direction: column; gap: 24px; background: var(--block); border-radius: var(--r-xl); padding: 24px; }
.drawer-info h5 { font: 500 14px/1.28 var(--f-sans); color: var(--ink-3); margin: 0 0 6px; }
.drawer-info p { margin: 0; }
.drawer-info .big { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.03em; text-decoration: none; font-variant-numeric: tabular-nums; }
.drawer-info .btn { align-self: start; }
.socials { display: flex; gap: 8px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--page); }
.socials a:hover { background: var(--block-2); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- sections ---------- */
.section { padding-block: var(--sec); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.sec-head .h-display { margin: 0; }
.two-col { display: grid; gap: 32px; align-items: start; }
.two-col > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 48px; } }
.about-band, .calc-sec, .arch-sec, .docs-sec { background: var(--block); border-radius: var(--r-xl); margin-inline: var(--gut); }
.about-band > .wrap, .calc-sec > .wrap, .arch-sec > .wrap, .docs-sec > .wrap { padding-inline: clamp(16px, 3vw, 48px); }

/* hero: sahifa ichidagi yumaloq karta */
.hero { position: relative; min-height: min(820px, calc(100svh - var(--header-h) - 16px)); color: #FFFFFF; display: flex; overflow: hidden; background: var(--dark); margin: 0 var(--gut); border-radius: var(--r-xl); }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.hero-slide.is-on img { transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 19, 17, .8) 0%, rgba(20, 19, 17, .25) 50%, rgba(20, 19, 17, .1) 100%), linear-gradient(90deg, rgba(20, 19, 17, .45) 0%, rgba(20, 19, 17, 0) 60%); }
.hero-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; width: 100%; max-width: none; padding: clamp(24px, 3.4vw, 48px); }
.hero-text { max-width: 780px; display: flex; flex-direction: column; gap: 18px; animation: rise .7s ease both; }
@keyframes rise { from { opacity: .001; transform: translateY(14px); } }
.hero-text .eyebrow { color: rgba(255, 255, 255, .72); margin: 0; }
.hero-lead { font-size: 18px; line-height: 1.35; color: rgba(255, 255, 255, .85); margin: 0; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-nav { display: flex; align-items: end; gap: 20px; }
.hero-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.hero-thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 6px 14px 6px 6px; background: rgba(255, 255, 255, .14); border: 0; border-radius: var(--r-l); text-align: left; color: #FFFFFF; backdrop-filter: blur(12px); overflow: hidden; }
.thumb img { width: 56px; height: 44px; object-fit: cover; border-radius: var(--r-m); }
.thumb span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; }
.thumb small { color: rgba(255, 255, 255, .65); }
.thumb .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #FFFFFF; }
.thumb.is-on { background: rgba(255, 255, 255, .26); }
.thumb.is-on .bar { animation: bar 6.5s linear forwards; }
.hero.paused .thumb.is-on .bar { animation-play-state: paused; }
@keyframes bar { to { width: 100%; } }
.hero-count { font: 500 24px/1 var(--f-sans); letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; display: none; }
@media (min-width: 700px) { .hero-count { display: block; } }

/* filters & collection */
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; scrollbar-width: none; }
.filter { flex: none; display: inline-flex; gap: 8px; align-items: center; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--block); font-size: 15px; font-weight: 500; }
.filter:hover { background: var(--block-2); }
.filter .count { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.filter.is-on { background: var(--ink); color: var(--page); }
.filter.is-on .count { color: inherit; opacity: .6; }
.collection { display: grid; gap: 32px var(--gap); grid-template-columns: 1fr; }
@media (min-width: 600px) { .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .collection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .collection { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.p-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-l); }
.p-link:focus-visible { outline: none; }
.p-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.p-head { display: flex; align-items: center; gap: 10px; }
.p-mark { width: 34px; height: 34px; flex: none; }
.btn-more { align-self: flex-start; margin-top: auto; min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn-more svg { width: 16px; height: 16px; transition: transform .2s; }
.p-card:hover .btn-more { background: var(--ink); color: var(--page); }
.p-card:hover .btn-more svg { transform: translateX(3px); }
.p-price b { font-weight: 600; font-variant-numeric: tabular-nums; }
.total-pill { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 14px 0 0; padding: 10px 18px; border-radius: var(--r-pill); background: var(--block); font-size: 15px; }
.total-pill b { font-weight: 600; font-variant-numeric: tabular-nums; }
.total-pill .muted { font-size: 13px; color: var(--ink-3); }
.p-media { position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%; background: var(--block); border-radius: var(--r-l); overflow: hidden; }
.p-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.p-card:hover .p-media img { transform: scale(1.03); }
.p-tags { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.p-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 4px; }
.p-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.p-dots i.on { background: #FFFFFF; }
.p-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 2px 0; flex: 1; }
.p-name { font: 500 24px/1.05 var(--f-sans); letter-spacing: -.035em; margin: 0; }
.p-name a { text-decoration: none; }
.p-loc { margin: 0; color: var(--ink-2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.p-loc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.p-price { margin: 4px 0 6px; font-weight: 500; }
.p-body .link-arrow { margin-top: auto; font-size: 14px; color: var(--ink-2); }
@media (min-width: 1200px) { .collection-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* map */
.geo .tabs { margin-bottom: 16px; }
.map-panel { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .map-panel { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.map-svg { background: var(--block); border-radius: var(--r-xl); overflow: hidden; }
.map-svg svg { display: block; width: 100%; height: auto; }
.map-bg { fill: var(--block); }
.map-grid line { stroke: var(--line); stroke-width: 1; opacity: .7; }
.river { fill: none; stroke: var(--clay); stroke-width: 3; opacity: .6; }
.city { fill: var(--page); opacity: .9; }
.city-l { font: 500 13px var(--f-sans); fill: var(--ink-3); }
.pin circle { fill: var(--ink); stroke: var(--page); stroke-width: 2.5; transition: r .2s; }
.pin text { font: 600 10px var(--f-sans); fill: var(--page); }
a:hover .pin circle, a:focus .pin circle { fill: var(--accent); }
.map-legend { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; background: var(--block); border-radius: var(--r-xl); }
.map-legend li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-m); }
.map-legend li:hover { background: var(--page); }
.map-legend a { display: flex; flex-direction: column; text-decoration: none; }
.map-legend small { color: var(--ink-3); }

/* tabs */
.tabs { display: inline-flex; max-width: 100%; gap: 2px; overflow-x: auto; margin: 8px 0 24px; padding: 4px; background: var(--block); border-radius: var(--r-pill); scrollbar-width: none; }
.tabs [role=tab] { flex: none; background: none; border: 0; border-radius: var(--r-pill); padding: 10px 16px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.tabs [role=tab][aria-selected=true] { color: var(--ink); background: var(--page); }
.tabs .count { font-size: 12px; color: var(--ink-3); }

/* about */
.about-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .about-grid, .page-hero .two-col { grid-template-columns: 1.1fr .9fr; } }
.about-copy p { max-width: 60ch; color: var(--ink-2); }
.about-copy .btn { margin-top: 12px; }
.arch-frame { margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.arch-frame img { width: 100%; height: 100%; object-fit: cover; }
.arch-frame.wide { aspect-ratio: 16 / 9; margin-block: 32px; }
/* about: sarlavhada surat, kollaj, loyihalar shkalasi */
.ax-title { font: 500 clamp(52px, 9vw, 168px)/.92 var(--f-sans); letter-spacing: var(--ls); margin: 8px 0 clamp(32px, 4vw, 56px); text-wrap: balance; }
.ax-pill { display: inline-block; width: 1.9em; height: .82em; border-radius: var(--r-pill); overflow: hidden; vertical-align: -.04em; background: var(--block); }
.ax-pill img { width: 100%; height: 100%; object-fit: cover; }
.ax-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .ax-grid { grid-template-columns: .8fr 1.2fr; align-items: start; } .ax-copy { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } }
.ax-copy p { max-width: 52ch; color: var(--ink-2); font-size: 17px; }
.ax-copy .btn { margin-top: 16px; }
.ax-collage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--gap); aspect-ratio: 16 / 11; }
.ax-shot { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--block); }
.ax-shot.s1 { grid-row: 1 / 3; }
.ax-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ax-shot:hover img { transform: scale(1.04); }
.ax-shot figcaption { position: absolute; left: 12px; bottom: 12px; display: grid; padding: 8px 14px; border-radius: var(--r-m); background: rgba(255,255,255,.88); backdrop-filter: blur(8px); font-size: 13px; color: var(--ink-2); }
.ax-shot figcaption b { color: var(--ink); font-weight: 500; font-size: 15px; }
@media (max-width: 600px) { .ax-collage { aspect-ratio: auto; grid-template-rows: 260px 160px; grid-template-columns: 1fr 1fr; } .ax-shot.s1 { grid-row: auto; grid-column: 1 / -1; } }

.ledger { margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--dark); color: var(--on-dark); display: grid; gap: 32px; }
@media (min-width: 1000px) { .ledger { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; } }
.lg-total { display: grid; gap: 8px; }
.lg-total b { font: 500 clamp(80px, 9vw, 152px)/.85 var(--f-sans); letter-spacing: var(--ls); }
.lg-total span { color: var(--on-dark-2); max-width: 18ch; }
.lg-bar { display: grid; gap: 16px; min-width: 0; }
.lg-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.lg-seg { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-m); background: rgba(255,255,255,.06); transition: transform .3s, opacity .3s, background .3s; }
.lg-seg i { width: 78%; height: 78%; background: var(--accent); }
.lg-seg.is-ready i { background: var(--clay); }
.lg-seg.has-mark i { -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lg-seg:not(.has-mark) i { border-radius: var(--r-s); }
.lg-name { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 6px 12px; border-radius: var(--r-pill); background: var(--page); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; display: none; pointer-events: none; z-index: 3; }
.lg-segs:hover .lg-seg { opacity: .45; }
.lg-segs .lg-seg:hover, .lg-seg:focus-visible { opacity: 1; transform: translateY(-4px); background: rgba(255,255,255,.12); }
.lg-seg:hover .lg-name, .lg-seg:focus-visible .lg-name { display: block; transform: translate(-50%, 0); }
.lg-legend, .lg-regions { list-style: none; margin: 0; padding: 0; }
.lg-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--on-dark-2); font-size: 14px; }
.lg-legend b { color: var(--on-dark); font-weight: 500; }
.lg-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 8px; }
.lg-legend .dot.is-ready { background: var(--clay); }
.lg-regions { display: grid; gap: 6px; min-width: 240px; }
.lg-regions li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); }
.lg-regions b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ax-shot img, .lg-seg { transition: none; } }
/* raqamli plitkalar */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin: 40px 0 0; }
.stats > div { padding: 24px; background: var(--page); border-radius: var(--r-l); min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
.section > .wrap > .stats > div { background: var(--block); }
.stats dt { font: 500 clamp(48px, 5.4vw, 88px)/.9 var(--f-sans); letter-spacing: var(--ls); font-variant-numeric: tabular-nums; }
.stats dd { margin: 12px 0 0; color: var(--ink-2); max-width: 30ch; }

/* gallery */
.g-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
@media (min-width: 900px) { .g-track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); } }
.g-track figure { margin: 0; scroll-snap-align: start; }
.g-item { display: block; padding: 0; border: 0; background: none; width: 100%; border-radius: var(--r-l); overflow: hidden; }
.g-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s; }
.g-item:hover img { transform: scale(1.04); }
.g-track figcaption { margin-top: 10px; font: 500 18px var(--f-sans); letter-spacing: -.03em; }
.p-gallery .g-big img { aspect-ratio: 16 / 9; }

/* video */
.video-box { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 7; max-width: 100%; min-height: 240px; background: var(--dark); }
.video-box img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.play { position: absolute; inset: 0; margin: auto; width: 120px; height: 120px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); color: #FFFFFF; display: grid; place-content: center; justify-items: center; gap: 4px; text-decoration: none; backdrop-filter: blur(10px); transition: transform .3s; }
.play:hover { transform: scale(1.06); }
.play svg { width: 30px; height: 30px; fill: currentColor; }
.play span { font-size: 13px; }
.video-soon { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 520px; background: var(--page); color: var(--ink); padding: 14px 18px; border-radius: var(--r-pill); text-align: center; font-size: 14px; }

/* calculator */
.calc-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.calc { background: var(--page); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); display: grid; gap: 24px; }
.calc-pick { display: grid; gap: 8px; }
.calc-pick label { color: var(--ink-2); font-size: 14px; }
.calc-pick select { width: 100%; height: 52px; padding: 0 44px 0 20px; border: 0; border-radius: var(--r-pill); background: var(--block) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1B18' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 20px center; font: 500 16px/1 var(--f-sans); color: var(--ink); appearance: none; cursor: pointer; }
.calc-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.range { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.range label { color: var(--ink-2); font-size: 14px; }
.range output { font-weight: 500; font-variant-numeric: tabular-nums; }
.range input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; }
.terms { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.terms legend { color: var(--ink-2); font-size: 14px; margin-bottom: 8px; padding: 0; }
.terms label { position: relative; }
.terms input { position: absolute; opacity: 0; }
.terms span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; background: var(--block); border-radius: var(--r-pill); font-weight: 500; font-size: 14px; cursor: pointer; }
.terms input:checked + span { background: var(--ink); color: var(--page); }
.terms input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 20px; background: var(--block); border-radius: var(--r-l); }
.calc-result span { width: 100%; color: var(--ink-3); font: 500 14px/1.28 var(--f-sans); }
.calc-result strong { font: 500 clamp(36px, 5vw, 52px)/.92 var(--f-sans); letter-spacing: var(--ls); font-variant-numeric: tabular-nums; }
.calc-result small { color: var(--ink-2); }

/* lead section & forms */
.lead-section { position: relative; color: #FFFFFF; padding-block: clamp(40px, 5vw, 72px); background: var(--dark); overflow: hidden; margin: var(--sec) var(--gut) 0; border-radius: var(--r-xl); }
.lead-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.lead-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 19, 17, .9), rgba(20, 19, 17, .45)); }
.lead-section > .wrap { padding-inline: clamp(16px, 3vw, 48px); }
.lead-grid { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .lead-grid { grid-template-columns: 1fr 460px; } }
.lead-copy p { color: rgba(255, 255, 255, .8); max-width: 46ch; font-size: 18px; }
.sales-card { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding: 12px 18px 12px 12px; background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); max-width: 460px; backdrop-filter: blur(10px); }
.sales-card .mark { width: 44px; height: 44px; flex: none; color: #FFFFFF; }
.sales-card div { display: flex; flex-direction: column; font-size: 14px; color: rgba(255, 255, 255, .7); }
.sales-card strong { color: #FFFFFF; font-size: 16px; font-weight: 500; }
.lead-form { position: relative; display: grid; gap: 14px; background: var(--page); color: var(--ink); padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); }
.lead-form h3 { font: 500 32px/.95 var(--f-sans); letter-spacing: var(--ls); margin: 0 0 6px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--ink-2); padding-left: 4px; }
.field input, .field select { height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--block); color: var(--ink); font: inherit; width: 100%; min-width: 0; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); background: var(--page); }
.field.invalid input { border-color: #B3412E; }
.err { display: none; color: #B3412E; font-size: 12px; padding-left: 4px; }
.field.invalid .err, .err.show { display: block; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.check input { margin-top: 2px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-3); }
.trust li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.sent { position: absolute; inset: 0; background: var(--page); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; }
.sent-mark { width: 56px; color: var(--ok); }
.contact-form-card .lead-form { background: var(--block); }
.contact-form-card .field input, .contact-form-card .field select { background: var(--page); }

/* news */
.news-grid { display: grid; gap: 32px var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.n-card { display: flex; flex-direction: column; }
.n-media { display: block; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; background: var(--block); }
.n-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.n-card:hover .n-media img { transform: scale(1.03); }
.n-body { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; flex: 1; }
.n-body h3 { font: 500 24px/1.05 var(--f-sans); letter-spacing: -.035em; margin: 0; }
.n-body h3 a { text-decoration: none; }
.n-body p { margin: 0; color: var(--ink-2); }
.n-body .link-arrow { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--ink-2); }
.meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin: 0; font-variant-numeric: tabular-nums; }

/* cta band & footer */
.cta-band { background: var(--block); color: var(--ink); padding: clamp(28px, 3vw, 48px) 0; margin: var(--sec) var(--gut) 0; border-radius: var(--r-xl); }
.cta-band > .wrap { padding-inline: clamp(16px, 3vw, 48px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-row .h-title { max-width: 18ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cta-band .btn-on-lapis { background: var(--accent); color: var(--on-accent); }
.cta-band .btn-on-lapis:hover { background: var(--accent-hover); }
.cta-band .btn-outline-on-lapis { background: var(--page); color: var(--ink); }
.cta-band .btn-outline-on-lapis:hover { background: var(--block-2); }
.site-footer { background: var(--block); padding-block: 40px 96px; margin: var(--gap) var(--gut) var(--gut); border-radius: var(--r-xl); }
.site-footer > .wrap { padding-inline: clamp(16px, 3vw, 48px); }
@media (min-width: 900px) { .site-footer { padding-bottom: 28px; } }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.footer-grid h4 { font: 500 14px/1.28 var(--f-sans); color: var(--ink-3); margin: 0 0 4px; }
.footer-grid h4.mt { margin-top: 12px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--accent); }
.footer-grid p { margin: 0; }
.f-brand .slogan { font: 500 24px/1 var(--f-sans); letter-spacing: -.04em; color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.footer-bottom p { margin: 0; max-width: 80ch; }
.mobile-bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); border-radius: var(--r-pill); padding: 4px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; text-decoration: none; color: var(--ink); }
.mobile-bar a:last-child { background: var(--accent); color: var(--on-accent); }
.mobile-bar svg { width: 20px; height: 20px; fill: currentColor; }
.mobile-bar a:last-child svg { fill: none; color: currentColor; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* modal */
.modal { border: 0; padding: 0; background: transparent; max-width: min(460px, calc(100vw - 32px)); width: 100%; }
.modal::backdrop { background: rgba(20, 19, 17, .6); backdrop-filter: blur(4px); }
.modal .lead-form { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--block); color: var(--ink); font-size: 24px; line-height: 1; }
.lightbox { max-width: min(1100px, calc(100vw - 32px)); }
.lightbox img { width: 100%; border-radius: var(--r-xl); }

/* project page */
.p-hero { position: relative; color: #FFFFFF; background: var(--dark); overflow: hidden; margin: 0 var(--gut); border-radius: var(--r-xl); }
.p-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-hero-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 3.4vw, 48px); max-width: none; min-height: min(760px, calc(100svh - var(--header-h) - 16px)); justify-content: flex-end; }
.p-hero .eyebrow { margin: 0; color: rgba(255, 255, 255, .72); }
.p-bullets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.p-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; width: 100%; margin: 12px 0 0; }
.p-facts div { padding: 14px 16px; background: rgba(255, 255, 255, .12); border-radius: var(--r-l); backdrop-filter: blur(10px); }
.p-facts dt { font-size: 13px; color: rgba(255, 255, 255, .65); }
.p-facts dd { margin: 6px 0 0; font: 500 22px/1.05 var(--f-sans); letter-spacing: -.035em; }
.p-facts .muted { color: rgba(255, 255, 255, .8); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: inherit; opacity: .85; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 28px 0 0; }
.spec-grid div { background: var(--block); padding: 16px; border-radius: var(--r-l); }
.spec-grid dt { font-size: 13px; color: var(--ink-3); }
.spec-grid dd { margin: 6px 0 0; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.spec-grid .muted { font-weight: 400; }
.arch-sec .spec-grid div, .docs-sec .spec-grid div { background: var(--page); }
.p-collage { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; }
.p-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-l); aspect-ratio: 3 / 4; }
.p-collage img:last-child { margin-top: 48px; }
.hs-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.hs-stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hs-dot { position: absolute; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: #FFFFFF; color: #1C1B18; font-weight: 500; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
.hs-dot.is-on { background: var(--accent); color: #FFFFFF; animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.hs-detail { display: flex; gap: 14px; padding: 20px; background: var(--page); border-radius: var(--r-l); margin: 20px 0; }
.hs-detail .num { background: var(--accent); color: var(--on-accent); }
.hs-detail p { margin: 4px 0 0; color: var(--ink-2); }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; background: none; border: 0; border-radius: var(--r-m); text-align: left; }
.hs-list button:hover { background: var(--page); }
.hs-list .num { background: var(--page); color: var(--ink-3); }
.hs-list [aria-pressed=true] { background: var(--page); }
.hs-list [aria-pressed=true] .num { background: var(--ink); color: var(--page); }
.plan-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--block); border-radius: var(--r-xl); transition: background .2s; }
.plan-card:hover { background: var(--block-2); }
.plan-cta { margin-top: auto; }
.plan-cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); }
.plan-card:hover .plan-cta { background: var(--ink); color: var(--page); }
.plan-free { margin-left: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--page); color: var(--ink); font-weight: 500; }
.plan-blocks { margin: 0; font-size: 13px; color: var(--ink-3); }
.plan-card[hidden], .tabs [hidden], .tabs[hidden] { display: none; }
.blk-pick { display: inline-flex; align-items: center; gap: 10px; margin: 16px 12px 0 0; padding: 4px 4px 4px 18px; border-radius: var(--r-pill); background: var(--block); font-weight: 500; }
.blk-pick select { height: 40px; padding: 0 36px 0 16px; border: 0; border-radius: var(--r-pill); background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231C1B18' stroke-width='2'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; font: 500 15px var(--f-sans); appearance: none; color: var(--ink); }
.commerce { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl); background: var(--dark); color: var(--on-dark); }
.commerce-n { margin: 0; font-size: clamp(20px, 2vw, 26px); max-width: 40ch; }
.commerce-n b { font: 500 clamp(56px, 6vw, 96px)/.9 var(--f-sans); letter-spacing: var(--ls); display: block; margin-bottom: 8px; }
.live-map { min-width: 0; }
.live-map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 320px; border: 0; border-radius: var(--r-l); background: var(--block); }
.p-hero-mark { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-l); background: rgba(255,255,255,.92); }
.p-hero-mark img { width: 56px; height: 56px; }
.plan-card h3 { font: 500 28px/.95 var(--f-sans); letter-spacing: var(--ls); margin: 0; }
.plan-card .area { margin: 0; font-size: 13px; color: var(--ink-3); }
.plan-card img { border-radius: var(--r-l); background: var(--page); }
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.docs li { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--r-l); background: var(--page); }
.docs li > span:first-of-type { flex: 1; font-weight: 500; }
.docs .chip { white-space: normal; height: auto; min-height: 28px; padding: 6px 12px; line-height: 1.3; text-align: right; background: var(--block); }
.docs .chip-feruza { background: var(--ink); color: var(--page); }
.docs svg { width: 26px; height: 26px; color: var(--ink-3); flex: none; }
.master { margin: 0; border-radius: var(--r-l); overflow: hidden; }
.master img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* page hero */
.page-hero { padding-block: 32px 8px; }
.page-hero .crumbs { margin-bottom: 20px; color: var(--ink-3); }
.page-hero-lapis { background: var(--block); color: var(--ink); padding-block: 32px 56px; margin: 0 var(--gut); border-radius: var(--r-xl); }
.page-hero-lapis > .wrap { padding-inline: clamp(16px, 3vw, 48px); }
.page-hero-lapis .crumbs { color: var(--ink-3); }
.page-hero-lapis p { color: var(--ink-2); max-width: 60ch; }
.page-hero-lapis .h-hero { margin-bottom: 20px; }
.page-hero-lapis .chip-on-dark { background: var(--page); color: var(--ink); }
.page-hero-lapis .logo.on-lapis { color: var(--ink); }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.values { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 24px; }
.values article { padding: 24px; background: var(--block); border-radius: var(--r-xl); min-height: 220px; display: flex; flex-direction: column; }
.values .mark { display: block; width: 32px; color: var(--accent); margin-bottom: auto; padding-bottom: 32px; }
.values h3 { font: 500 26px/.95 var(--f-sans); letter-spacing: -.045em; margin: 0 0 10px; }
.values p { margin: 0; color: var(--ink-2); }
.team { display: grid; gap: 28px var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: 24px; }
.team .avatar { aspect-ratio: 4 / 5; max-width: 100%; display: grid; place-items: center; background: var(--block); border-radius: var(--r-l); color: var(--ink-3); overflow: hidden; }
.team .avatar svg { width: 30%; opacity: .5; }
.team .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team h3 { font: 500 18px var(--f-sans); letter-spacing: -.02em; margin: 12px 0 2px; }
.team p { margin: 0; color: var(--ink-2); font-size: 14px; }
.timeline .tl-years { display: inline-flex; max-width: 100%; gap: 2px; padding: 4px; margin: 16px 0 24px; overflow-x: auto; background: var(--block); border-radius: var(--r-pill); }
.timeline .tl-years button { border: 0; background: none; border-radius: var(--r-pill); height: 40px; padding: 0 18px; font: 500 16px var(--f-sans); }
.timeline .tl-years [aria-selected=true] { background: var(--page); }
.tl-item { display: grid; gap: 24px; align-items: center; }
@media (min-width: 800px) { .tl-item { grid-template-columns: 1fr 1fr; } }
.tl-item img { border-radius: var(--r-xl); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.contacts-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .contacts-grid { grid-template-columns: 1fr 480px; } }
.contact-info { display: grid; gap: 8px; align-content: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.contact-info > div { background: var(--block); border-radius: var(--r-l); padding: 20px; }
.contact-info h3 { font: 500 14px/1.28 var(--f-sans); color: var(--ink-3); margin: 0 0 8px; }
.contact-info p { margin: 0; }
.contact-info a { text-decoration: none; display: block; }
.contact-info .big { font-size: 24px; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; display: inline; }
.copyable { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy { border: 0; background: var(--page); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; }

/* article */
.article-cover { aspect-ratio: 21 / 8; max-width: calc(100% - 2 * var(--gut)); min-height: 200px; overflow: hidden; margin: 0 var(--gut); border-radius: var(--r-xl); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-wrap { max-width: 820px; padding-block: 32px 16px; }
.article-wrap .crumbs { color: var(--ink-3); margin-bottom: 20px; }
.article-wrap .h-display { margin-top: 12px; }
.prose { font-size: 17px; line-height: 1.6; letter-spacing: -.005em; }
.prose h2 { font: 500 32px/.95 var(--f-sans); letter-spacing: -.045em; margin: 40px 0 12px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }

/* admin bilan qo'shilgan */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.plan-price { margin: 0; font-weight: 500; }