/* «Закрытый каталог Анапы» — /anapa-katalog (app/routes/anapa_katalog.py, templates/pages/anapa_katalog.html).
   Только токены design/tokens.css: тёмные секции — :root, светлые — .inv. Неймспейс .ak-, чтобы не спорить с site.css.
   Переходы между тёмными и светлыми секциями — градиентом (--ak-fade), без резкого шва. */

.ak { --ak-fade: clamp(140px, 18vw, 260px); --ak-r: 18px; --ak-r-sm: 12px; background: var(--x-bg); color: var(--ink); overflow-x: clip; }
.ak *, .ak *::before, .ak *::after { box-sizing: border-box; }
.ak img, .ak video { display: block; max-width: 100%; }
.ak-wrap { width: min(var(--wrap), 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
.ak h1, .ak h2, .ak h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; color: var(--head); text-wrap: balance; margin: 0; }
.ak h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.ak h2 em, .ak h1 em { font-style: normal; color: var(--acc-ink); }
.ak p { margin: 0; }
.ak .ic { width: 20px; height: 20px; flex: none; }
.ak-eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--eyebrow); }
.ak-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.ak-lede { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.ak-src { font-size: 12px; line-height: 1.5; color: var(--muted); }
.ak-src a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 2px; }
.ak-num { font-variant-numeric: tabular-nums lining-nums; }
.ak-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); max-width: 860px; position: relative; }

/* секции и переходы */
.ak-sec { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); isolation: isolate; overflow-x: clip; }
.ak-sec--dark { background: var(--x-bg); }
.ak-sec.inv { background: var(--bg); }
.ak-sec--to-light::after, .ak-sec--to-dark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ak-fade); z-index: -1; pointer-events: none; }
.ak-sec--to-light::after { background: linear-gradient(180deg, transparent, var(--sand)); }
.ak-sec--to-dark::after { background: linear-gradient(180deg, transparent, var(--x-bg)); }
.ak-sec--from-dark { background: linear-gradient(180deg, var(--x-bg) 0, var(--bg) var(--ak-fade), var(--bg) 100%); padding-top: calc(clamp(4.5rem, 9vw, 8rem) + 2rem); }
.ak-sec--from-light { background: linear-gradient(180deg, var(--sand) 0, var(--x-bg) var(--ak-fade), var(--x-bg) 100%); padding-top: calc(clamp(4.5rem, 9vw, 8rem) + 2rem); }

/* декор сайта (static/img/decor — маски, цвет токеном) */
.ak-decor { position: absolute; z-index: -1; pointer-events: none; -webkit-mask: var(--d) no-repeat center / contain; mask: var(--d) no-repeat center / contain; background: var(--dc, color-mix(in srgb, var(--gold) 34%, transparent)); opacity: 0; transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); transform: translateY(24px); }
.ak-decor.is-in { opacity: 1; transform: none; }
.ak-decor--pilaster { --d: url(../img/decor/relief-pilaster.webp); --dc: color-mix(in srgb, var(--sea) 38%, transparent); width: clamp(200px, 22vw, 340px); aspect-ratio: 720 / 882; right: -2vw; top: -1rem; }
.ak-decor--balustrade { --d: url(../img/decor/relief-balustrade.webp); --dc: color-mix(in srgb, var(--sea) 30%, transparent); width: clamp(300px, 38vw, 560px); aspect-ratio: 720 / 660; right: -4vw; bottom: -2rem; }
.ak-decor--arch { --d: url(../img/decor/relief-arch.webp); --dc: color-mix(in srgb, var(--sea) 34%, transparent); width: clamp(220px, 24vw, 360px); aspect-ratio: 720 / 950; left: -3vw; bottom: 2rem; }
.ak-decor--sketch { --d: url(../img/decor/sketch-2.webp); width: clamp(260px, 30vw, 460px); aspect-ratio: 720 / 542; right: 2vw; top: 3rem; --dc: color-mix(in srgb, var(--gold) 30%, transparent); }
.ak-decor--sketch3 { --d: url(../img/decor/sketch-3.webp); width: clamp(240px, 26vw, 400px); aspect-ratio: 720 / 480; left: 1vw; bottom: 3rem; --dc: color-mix(in srgb, var(--gold) 26%, transparent); }
.ak-decor--coins { --d: url(../img/decor/coins-2.webp); width: clamp(240px, 28vw, 420px); aspect-ratio: 720 / 446; right: 3vw; top: 3.5rem; --dc: color-mix(in srgb, var(--gold) 22%, transparent); }
.ak-decor--topo { --d: url(../img/decor/topo-2.svg); width: min(70vw, 900px); aspect-ratio: 1.6; right: -10vw; top: 0; --dc: color-mix(in srgb, var(--gold) 22%, transparent); }
.ak-decor--topo4 { --d: url(../img/decor/topo-4.svg); width: min(60vw, 800px); aspect-ratio: 1.6; left: -12vw; bottom: 0; --dc: color-mix(in srgb, var(--gold) 18%, transparent); }
.ak-decor--cornice { --d: url(../img/decor/relief-cornice.webp); --dc: color-mix(in srgb, var(--sea) 30%, transparent); width: clamp(200px, 20vw, 300px); aspect-ratio: 720 / 882; right: -1vw; top: 2rem; }

/* кнопки */
.ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: .85rem 1.6rem; border: 0; border-radius: 999px; font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer; background: var(--grad); color: var(--x-on); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--gold) 80%, transparent); transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .3s; }
.ak-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--gold) 90%, transparent); }
.ak-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ak-btn .ic { width: 18px; height: 18px; }
.ak-btn--ink { background: var(--x-bg); color: var(--x-ink); box-shadow: 0 16px 36px -20px var(--shadow); }
.ak-btn--ink:hover { filter: none; background: var(--surf-2); }
.inv .ak-btn--ink:hover { background: var(--sea); }
.ak-btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); box-shadow: none; }
.ak-btn--line:hover { border-color: var(--gold); filter: none; box-shadow: none; }
.ak-btn--block { width: 100%; }

/* шапка */
.ak-hd { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, box-shadow .4s; color: var(--x-ink); }
.ak-hd.is-solid { background: color-mix(in srgb, var(--x-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--x-line); }
.ak-hd__in { display: flex; align-items: center; gap: 1.6rem; height: 76px; }
.ak-hd__logo { display: block; width: 168px; margin-right: auto; color: var(--x-ink); }
.ak-hd__logo .lg { width: 100%; height: auto; display: block; }
.ak-hd__nav { display: flex; gap: 1.5rem; font-size: 15px; }
.ak-hd__nav a { color: var(--x-ink); opacity: .82; text-decoration: none; }
.ak-hd__nav a:hover { opacity: 1; }
.ak-hd__phone { display: flex; align-items: center; gap: .45rem; color: var(--x-ink); font-family: var(--f-mono); font-size: 15px; text-decoration: none; }
.ak-hd .ak-btn { min-height: 44px; padding: .5rem 1.2rem; font-size: 15px; }

/* hero */
.ak-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--x-ink); background: var(--x-bg); overflow: hidden; isolation: isolate; }
.ak-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--x-bg); }
.ak-hero__media img, .ak-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 - var(--p, 0) * .04)) translateY(calc(var(--p, 0) * 5%)); }
.ak-hero__media video { opacity: 0; transition: opacity 1.2s ease; }
.ak-hero__media video.is-playing { opacity: 1; }
.ak-hero__veil { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, color-mix(in srgb, var(--x-bg) 82%, transparent) 0%, color-mix(in srgb, var(--x-bg) 55%, transparent) 36%, color-mix(in srgb, var(--x-bg) 10%, transparent) 66%, transparent 82%),
  linear-gradient(180deg, color-mix(in srgb, var(--x-bg) 55%, transparent) 0%, transparent 22%, transparent 55%, var(--x-bg) 100%); }
.ak-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-block: 120px clamp(3rem, 7vh, 5rem); }
.ak-hero__in > * { min-width: 0; }
.ak-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; transform: translateY(calc(var(--p, 0) * -24px)); }
.ak-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; width: fit-content; max-width: 100%; padding: .4rem .9rem .4rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--x-bg) 60%, transparent); border: 1px solid var(--x-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; color: var(--ink-2); }
.ak-chip b { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; background: var(--grad); color: var(--x-on); font-weight: 600; font-size: 13px; }
.ak-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--x-on); animation: ak-pulse 1.8s ease-in-out infinite; }
@keyframes ak-pulse { 50% { opacity: .25; } }
.ak-hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 15ch; color: var(--x-ink); text-shadow: 0 2px 26px color-mix(in srgb, var(--x-bg) 60%, transparent); }
.ak-hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 46ch; color: var(--x-ink); opacity: .92; text-shadow: 0 1px 14px color-mix(in srgb, var(--x-bg) 70%, transparent); }
.ak-hero__sub a { color: var(--acc-ink); text-decoration: none; }
.ak-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 54ch; }
.ak-ticks li { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; align-items: start; color: var(--x-ink); opacity: .94; }
.ak-ticks .ic { width: 22px; height: 22px; color: var(--gold); margin-top: .1rem; }
.ak-ticks b { font-weight: 600; }

/* карточка формы */
.ak-lcard { background: color-mix(in srgb, var(--x-bg) 74%, transparent); border: 1px solid var(--x-line); border-radius: var(--ak-r); padding: clamp(1.3rem, 2.6vw, 2rem); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -40px var(--shadow); display: grid; gap: 1rem; color: var(--x-ink); }
.ak-lcard__top { display: flex; align-items: center; gap: .9rem; }
.ak-lcard__top > span { width: 46px; height: 46px; border-radius: 12px; background: var(--grad); color: var(--x-on); display: grid; place-items: center; flex: none; }
.ak-lcard h3, .ak-lcard p.ak-lcard__t { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.15; color: var(--x-ink); }
.ak-lcard p { font-size: 14px; color: var(--x-muted); }
.ak-timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ak-timer div { background: color-mix(in srgb, var(--x-ink) 6%, transparent); border: 1px solid var(--x-line); border-radius: 10px; padding: .55rem .3rem; text-align: center; }
.ak-timer b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.65rem; line-height: 1.05; color: var(--accent-soft); }
.ak-timer span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); }
.ak-timer-cap { font-size: 13px; color: var(--x-muted); text-align: center; margin-top: -.4rem !important; }

/* форма */
.ak-form { display: grid; gap: .7rem; }
.ak-field { width: 100%; min-height: 54px; padding: .85rem 1.1rem; border-radius: var(--ak-r-sm); border: 1.5px solid color-mix(in srgb, var(--x-ink) 20%, transparent); background: color-mix(in srgb, var(--x-ink) 7%, transparent); font: 400 16px/1.3 var(--f-body); color: var(--x-ink); transition: border-color .2s, box-shadow .2s; }
.ak-field::placeholder { color: var(--x-muted); }
.ak-field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.ak-field[aria-invalid="true"] { border-color: var(--err); }
.ak-ways-cap { font-size: 13px; color: var(--x-muted); }
.ak-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; border: 0; padding: 0; margin: 0; }
.ak-ways label { position: relative; cursor: pointer; }
.ak-ways input { position: absolute; opacity: 0; pointer-events: none; }
.ak-ways span { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--x-ink) 20%, transparent); font-size: 14px; color: var(--x-muted); transition: all .2s; }
.ak-ways .ic { width: 16px; height: 16px; }
.ak-ways input:checked + span { border-color: var(--gold); color: var(--x-ink); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.ak-ways input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ak-err { display: none; font-size: 14px; color: var(--err); }
.ak-err.is-on { display: block; }
.ak-note { font-size: 12px; line-height: 1.45; color: var(--x-muted); }
.ak-note a { color: inherit; }
.ak-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* цифры */
.ak-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--ak-r); overflow: hidden; }
.ak-stat { background: var(--x-bg); padding: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; gap: .6rem; align-content: start; }
.ak-stat__v { font-family: var(--f-display); font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--head); }
.ak-stat__v small { font-size: .45em; color: var(--acc-ink); margin-left: .15em; }
.ak-stat__t { font-size: 1rem; color: var(--ink); }
.ak-stats__story { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.ak-stats__story p + p { margin-top: 1rem; }
.ak-stats__story .ak-lede { max-width: none; }
.ak-ph { border-radius: var(--ak-r); overflow: hidden; position: relative; }
.ak-ph img { width: 100%; height: 100%; object-fit: cover; }
.ak-stats__img { aspect-ratio: 16 / 10; }

/* три сценария: наезжающие карточки */
.ak-scn .ak-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ak-stack { display: grid; gap: clamp(2rem, 6vh, 4rem); padding-bottom: 2rem; }
.ak-scard { --i: 0; position: sticky; top: calc(96px + var(--i) * 26px); display: grid; grid-template-columns: 1.1fr .9fr; min-height: min(620px, calc(100svh - 140px)); background: var(--surf); border: 1px solid var(--line); border-radius: var(--ak-r); overflow: hidden; box-shadow: 0 40px 80px -50px var(--shadow); transform-origin: 50% 0; transform: scale(calc(1 - var(--c, 0) * .05)); filter: brightness(calc(1 - var(--c, 0) * .12)); will-change: transform; }
.ak-scard.is-static { position: relative; top: auto; }
.ak-scard:nth-child(2) { --i: 1; }
.ak-scard:nth-child(3) { --i: 2; }
.ak-slider { position: relative; min-height: 320px; background: var(--bg-2); }
.ak-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ak-slides::-webkit-scrollbar { display: none; }
.ak-slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.ak-slider__goal { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; display: inline-flex; gap: .55rem; align-items: center; padding: .45rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--x-bg) 72%, transparent); color: var(--x-ink); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ak-slider__goal b { color: var(--gold); font-weight: 400; }
.ak-slider__nav { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: .5rem; }
.ak-dots { display: flex; gap: .4rem; margin-right: auto; }
.ak-dots button { width: 28px; height: 4px; padding: 10px 0; border: 0; background: none; cursor: pointer; position: relative; }
.ak-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 3px; background: color-mix(in srgb, var(--x-ink) 45%, transparent); transition: background .3s; }
.ak-dots button[aria-current="true"]::before { background: var(--gold); }
.ak-arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--x-bg) 62%, transparent); color: var(--x-ink); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s; }
.ak-arrow:hover { background: var(--x-bg); }
.ak-arrow:focus-visible { outline: 2px solid var(--gold); }
.ak-scard__body { padding: clamp(1.5rem, 3vw, 2.8rem); display: grid; gap: 1rem; align-content: center; }
.ak-scard h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.ak-scard p { color: var(--ink-2); line-height: 1.6; }
.ak-locked { display: inline-flex; align-items: center; gap: .55rem; width: max-content; padding: .4rem .75rem; border-radius: 10px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.ak-locked .ic { width: 16px; height: 16px; color: var(--acc-ink); }
.ak-locked i { display: inline-block; width: 110px; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--muted), var(--line)); filter: blur(2.5px); opacity: .7; }
.ak-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; padding-block: 1rem; margin: 0; border-block: 1px solid var(--line); }
.ak-facts dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ak-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.ak-who { font-size: .95rem; color: var(--ink-2); }
.ak-who b { color: var(--ink); }

/* затёртая цена */
.ak-price { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .65rem .9rem; border-radius: 10px; border: 1px dashed var(--line-2); }
.ak-price span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.ak-price span .ic { width: 14px; height: 14px; color: var(--acc-ink); }
.ak-price b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); filter: blur(6px); user-select: none; letter-spacing: .02em; }

/* что внутри */
.ak-inside__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ak-inside__visual { position: relative; }
.ak-inside__visual img { border-radius: var(--ak-r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 40px 90px -40px var(--shadow); transform: perspective(1200px) rotateY(calc(var(--tilt, 0) * 1deg)) rotateX(calc(var(--tiltx, 0) * 1deg)); transition: transform .5s var(--ease); }
.ak-seal { position: absolute; right: -14px; top: -14px; width: 110px; height: 110px; border-radius: 50%; background: var(--grad); color: var(--x-on); display: grid; place-items: center; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; box-shadow: 0 20px 40px -18px var(--shadow); animation: ak-spin 26s linear infinite; }
.ak-seal span { display: block; font-family: var(--f-display); font-size: 1.9rem; letter-spacing: 0; text-transform: none; }
@keyframes ak-spin { to { transform: rotate(360deg); } }
.ak-olist { list-style: none; counter-reset: o; display: grid; gap: 1rem; margin: 1.6rem 0 2rem; padding: 0; }
.ak-olist li { counter-increment: o; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ak-olist li::before { content: counter(o, decimal-leading-zero); font-family: var(--f-mono); font-size: 14px; color: var(--acc-ink); padding-top: .2rem; }
.ak-olist b { display: block; color: var(--ink); font-weight: 600; }
.ak-olist span { font-size: .95rem; color: var(--ink-2); }

/* 7 лотов */
.ak-lots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ak-lot { display: grid; gap: .9rem; align-content: start; padding: 1.4rem; border-radius: var(--ak-r); background: var(--surf); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease); }
.ak-lot:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 30px 60px -40px var(--shadow); }
.ak-lot__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ak-lot__n { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.ak-lot__n b { font-family: var(--f-display); font-size: 2rem; font-weight: 400; letter-spacing: 0; color: var(--acc-ink); margin-left: .2rem; }
.ak-goal { display: inline-flex; padding: .25rem .65rem; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); color: var(--ink-2); }
.ak-goal--live { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ok); }
.ak-goal--inv { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--acc-ink); }
.ak-goal--rest { border-color: color-mix(in srgb, var(--sea) 80%, var(--ink)); color: var(--ink-2); }
.ak-lot h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
.ak-lot__meta { display: flex; gap: .5rem; align-items: baseline; font-size: 14px; color: var(--muted); }
.ak-lot__meta b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.ak-lot p { font-size: 14px; color: var(--ink-2); min-height: 2.6em; }
.ak-lot .ak-btn { min-height: 46px; font-size: 15px; }
.ak-lot .ak-price { flex-direction: column; align-items: flex-start; gap: .25rem; }
.ak-lot .ak-price b { font-size: 1.5rem; }
.ak-lot--intro { background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); align-content: space-between; }
.ak-lot--intro:hover { transform: none; box-shadow: none; }
.ak-lot--intro h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: var(--head); }
.ak-lot--intro .ak-timer b { font-size: 1.35rem; }

/* рост к 2030 */
.ak-grow__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ak-drivers { list-style: none; display: grid; gap: 1.2rem; margin: 1.8rem 0 0; padding: 0; }
.ak-drivers li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; }
.ak-drivers .ic { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.ak-drivers b { display: block; color: var(--ink); }
.ak-drivers span { font-size: .95rem; color: var(--ink-2); }
.ak-calc { background: var(--surf); border: 1px solid var(--line); border-radius: var(--ak-r); padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.4rem; }
.ak-calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ak-calc__row label { font-size: 15px; color: var(--ink-2); }
.ak-calc__row output { font-family: var(--f-display); font-size: 1.9rem; color: var(--head); white-space: nowrap; }
.ak-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--fill, 30%), color-mix(in srgb, var(--ink) 16%, transparent) var(--fill, 30%)); outline: none; }
.ak-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); border: 4px solid var(--gold); cursor: grab; box-shadow: 0 4px 14px var(--shadow); }
.ak-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); border: 4px solid var(--gold); cursor: grab; }
.ak-range:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent); }
.ak-bars { display: grid; gap: 1.1rem; }
.ak-bar { display: grid; gap: .45rem; }
.ak-bar__top { display: flex; justify-content: space-between; gap: 1rem; font-size: 14px; }
.ak-bar__top b { color: var(--ink); }
.ak-bar__top span { color: var(--muted); }
.ak-bar__track { height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); position: relative; overflow: hidden; }
.ak-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 10px; transition: width 1s var(--ease); display: flex; align-items: center; justify-content: flex-end; padding-right: .9rem; font-family: var(--f-display); font-size: 1.1rem; color: var(--x-on); white-space: nowrap; }
.ak-bar:nth-child(1) .ak-bar__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--ink-2) 40%, transparent), var(--ink-2)); }
.ak-bar:nth-child(2) .ak-bar__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 50%, transparent), var(--gold)); }
.ak-bar:nth-child(3) .ak-bar__fill { background: var(--grad); }
.ak-bar__base { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .5; left: var(--b, 50%); }
.ak-calc__wait { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ak-calc__wait b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; color: var(--accent-soft); }
.ak-calc__wait span { font-size: 12px; color: var(--muted); }

/* лента видов */
.ak-band__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.ak-band__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(16px, calc((100vw - var(--wrap)) / 2)); padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent; }
.ak-band__item { flex: 0 0 min(560px, 82vw); scroll-snap-align: center; position: relative; border-radius: var(--ak-r); overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.ak-band__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ak-band__item:hover img { transform: scale(1.05); }
.ak-band__item figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.3rem 1.2rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--x-bg) 88%, transparent)); color: var(--x-ink); font-family: var(--f-display); font-size: 1.35rem; line-height: 1.2; }
.ak-band__item figcaption small { display: block; font-family: var(--f-body); font-size: 13px; color: var(--x-muted); margin-top: .3rem; }
.ak-band__nav { display: flex; gap: .5rem; }

/* мазут */
.ak-oil__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ak-step { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding-bottom: 2rem; position: relative; }
.ak-step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: var(--line-2); }
.ak-step:last-of-type::before { display: none; }
.ak-step__dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surf); border: 1px solid var(--line-2); color: var(--ink-2); z-index: 1; }
.ak-step--now .ak-step__dot { background: var(--sea); color: var(--x-ink); border-color: var(--sea); }
.ak-step h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.ak-step p, .ak-step li { font-size: .98rem; color: var(--ink-2); line-height: 1.6; }
.ak-step ul { list-style: none; display: grid; gap: .45rem; margin: .4rem 0 0; padding: 0; }
.ak-step li { padding-left: 1.1rem; position: relative; }
.ak-step li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
.ak-step b { color: var(--ink); }
.ak-beach { background: var(--surf); border: 1px solid var(--line); border-radius: var(--ak-r); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 30px 70px -50px var(--shadow); display: grid; gap: 1.2rem; }
.ak-beach .ak-ph { aspect-ratio: 16 / 9; }
.ak-beach h3 { font-size: 1.35rem; }
.ak-chart { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; height: 190px; padding-top: 1.4rem; }
.ak-chart div { display: grid; gap: .35rem; height: 100%; grid-template-rows: auto 1fr auto; }
.ak-chart b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; text-align: center; color: var(--ink); }
.ak-chart i { display: block; align-self: end; height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--sea) 70%, var(--x-ink)), var(--sea)); transition: height 1.1s var(--ease); }
.ak-chart div:last-child i { background: var(--grad); }
.ak-chart span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-align: center; }

/* как купить */
.ak-buy__bg { position: absolute; inset: 0; z-index: -2; }
.ak-buy__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.ak-buy__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--x-bg) 0%, color-mix(in srgb, var(--x-bg) 55%, transparent) 40%, var(--x-bg) 100%); }
.ak-buy__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ak-bcard { background: color-mix(in srgb, var(--x-bg) 62%, transparent); border: 1px solid var(--line); border-radius: var(--ak-r); padding: 1.6rem; display: grid; gap: .8rem; align-content: start; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ak-bcard .ic { width: 36px; height: 36px; color: var(--gold); }
.ak-bcard h3 { font-size: 1.3rem; }
.ak-bcard p { font-size: .94rem; color: var(--ink-2); }

/* квиз */
.ak-quiz__box { display: grid; grid-template-columns: .8fr 1.2fr; border-radius: var(--ak-r); overflow: hidden; background: var(--surf); border: 1px solid var(--line); min-height: 500px; }
.ak-quiz__side { position: relative; padding: clamp(1.6rem, 3.4vw, 3rem); display: grid; align-content: space-between; gap: 2rem; isolation: isolate; }
.ak-quiz__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .5; }
.ak-quiz__side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--x-bg) 35%, transparent), color-mix(in srgb, var(--x-bg) 92%, transparent)); }
.ak-quiz__side h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.ak-prog { display: flex; gap: .4rem; }
.ak-prog i { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--x-ink) 18%, transparent); transition: background .4s; }
.ak-prog i.is-on { background: var(--gold); }
.ak-quiz__main { padding: clamp(1.6rem, 3.4vw, 3rem); display: grid; align-content: center; }
.ak-qstep { display: none; gap: 1.2rem; }
.ak-qstep.is-on { display: grid; animation: ak-up .5s var(--ease); }
@keyframes ak-up { from { opacity: 0; transform: translateY(14px); } }
.ak-qstep h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.ak-qopts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ak-qopts button { text-align: left; min-height: 64px; padding: 1rem 1.2rem; border-radius: 14px; border: 1.5px solid var(--line-2); background: transparent; color: var(--ink); font: 400 1rem/1.35 var(--f-body); cursor: pointer; transition: all .25s; }
.ak-qopts button:hover, .ak-qopts button:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); outline: none; }
.ak-qback { justify-self: start; background: none; border: 0; padding: .3rem 0; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ak-qsum { color: var(--ink-2); }

/* вопросы */
.ak-faq__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ak-faq__aside { position: sticky; top: 110px; display: grid; gap: 1.4rem; }
.ak-faq__aside .ak-ph { aspect-ratio: 4 / 5; }
.ak-faq__list { display: grid; gap: .7rem; }
.ak-faq details { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; transition: border-color .3s, box-shadow .3s; }
.ak-faq details[open] { border-color: var(--gold); box-shadow: 0 20px 50px -36px var(--shadow); }
.ak-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; gap: 1rem; align-items: center; padding: 1.15rem 1.3rem; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; color: var(--head); }
.ak-faq summary::-webkit-details-marker { display: none; }
.ak-faq summary i { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: transform .35s var(--ease), background .3s; }
.ak-faq summary i::before { content: "+"; font-style: normal; font-family: var(--f-body); font-size: 1.2rem; line-height: 1; color: var(--ink); }
.ak-faq details[open] summary i { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.ak-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.ak-faq__a { padding: 0 1.3rem 1.3rem; color: var(--ink-2); display: grid; gap: .7rem; line-height: 1.6; }

/* финал */
.ak-final__bg { position: absolute; inset: 0; z-index: -2; }
.ak-final__bg img { width: 100%; height: 100%; object-fit: cover; }
.ak-final__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--x-bg) 0%, color-mix(in srgb, var(--x-bg) 55%, transparent) 30%, color-mix(in srgb, var(--x-bg) 45%, transparent) 70%, var(--x-bg) 100%), linear-gradient(90deg, color-mix(in srgb, var(--x-bg) 80%, transparent), transparent 70%); }
.ak-final__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ak-final h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); color: var(--x-ink); }
.ak-legal { padding-block: 2rem 1rem; background: var(--x-bg); }
.ak-legal p { max-width: 110ch; }
.ak-legal details summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: .8rem; }
.ak-legal ol { padding-left: 1.2rem; display: grid; gap: .3rem; margin: .6rem 0 0; }

/* модалка */
.ak-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; }
.ak-modal[data-open="1"] { visibility: visible; opacity: 1; }
.ak-modal__back { position: absolute; inset: 0; background: color-mix(in srgb, var(--x-bg) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ak-modal__card { position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--bg-2); color: var(--x-ink); border: 1px solid var(--x-line); border-radius: var(--ak-r); padding: clamp(1.5rem, 4vw, 2.2rem); display: grid; gap: 1rem; transform: translateY(16px) scale(.98); transition: transform .45s var(--ease); }
.ak-modal[data-open="1"] .ak-modal__card { transform: none; }
.ak-modal__close { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--x-muted); cursor: pointer; }
.ak-modal__close:hover { color: var(--x-ink); background: color-mix(in srgb, var(--x-ink) 6%, transparent); }
.ak-modal h3 { font-size: 1.6rem; padding-right: 2.4rem; color: var(--x-ink); }
.ak-modal p { font-size: 15px; color: var(--x-muted); }

/* мобильная панель */
.ak-mbar { display: none; }

/* появление */
.js .ak-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .ak-reveal.is-in { opacity: 1; transform: none; }
.js .ak-reveal.ak-d1 { transition-delay: .08s; } .js .ak-reveal.ak-d2 { transition-delay: .16s; } .js .ak-reveal.ak-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ak *, .ak *::before, .ak *::after { animation: none !important; transition: none !important; }
  .js .ak-reveal, .ak-decor { opacity: 1; transform: none; }
  .ak-scard { transform: none; filter: none; }
}

/* адаптив */
@media (max-width: 1100px) {
  .ak-hd__nav { display: none; }
  .ak-lots__grid { grid-template-columns: repeat(2, 1fr); }
  .ak-buy__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ak-hero__in { grid-template-columns: 1fr; padding-top: 110px; }
  .ak-stats__grid { grid-template-columns: 1fr 1fr; }
  .ak-stats__story, .ak-inside__grid, .ak-grow__grid, .ak-oil__grid, .ak-faq__grid, .ak-final__grid, .ak-quiz__box { grid-template-columns: 1fr; }
  .ak-scard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; top: calc(76px + var(--i) * 14px); }
  .ak-slider { min-height: 0; aspect-ratio: 16 / 10; }
  .ak-faq__aside { position: static; }
  .ak-faq__aside .ak-ph { display: none; }
  .ak-quiz__side { min-height: 220px; }
  .ak-decor { display: none; }
}
@media (max-width: 760px) {
  .ak-hd__in { height: 64px; }
  .ak-hd__logo { width: 136px; }
  .ak-hd__phone span, .ak-hd .ak-btn { display: none; }
  .ak-hero { align-items: stretch; }
  .ak-hero__in { padding-block: 88px 2rem; gap: 1.6rem; }
  .ak-hero__veil { background: linear-gradient(180deg, color-mix(in srgb, var(--x-bg) 62%, transparent) 0%, color-mix(in srgb, var(--x-bg) 45%, transparent) 35%, color-mix(in srgb, var(--x-bg) 74%, transparent) 70%, var(--x-bg) 100%); }
  .ak-hero h1 { font-size: clamp(2.15rem, 9.5vw, 2.8rem); }
  .ak-stat__v { font-size: 2.4rem; }
  .ak-scard__body { padding: 1.2rem 1.2rem 1.4rem; gap: .75rem; }
  .ak-scard__body > p { display: none; }
  .ak-slider { aspect-ratio: 16 / 9; }
  .ak-scard h3 { font-size: 1.35rem; }
  .ak-facts { gap: .45rem .9rem; padding-block: .6rem; }
  .ak-facts dd { font-size: 14px; }
  .ak-scard .ak-price { padding: .5rem .8rem; }
  .ak-scard .ak-btn { min-height: 48px; font-size: 15px; }
  .ak-calc__row output { font-size: 1.5rem; }
  .ak-lots__grid { grid-template-columns: 1fr; }
  .ak-calc__wait { grid-template-columns: 1fr; }
  .ak-buy__grid { grid-template-columns: 1fr; }
  .ak-qopts { grid-template-columns: 1fr; }
  .ak-seal { width: 86px; height: 86px; right: -6px; top: -10px; font-size: 9px; }
  .ak-seal span { font-size: 1.5rem; }
  .ak-mbar { display: flex; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); gap: .5rem; transform: translateY(140%); transition: transform .45s var(--ease); }
  .ak-mbar.is-on { transform: none; }
  .ak-mbar .ak-btn { flex: 1; min-height: 52px; }
  .ak-mbar a.ak-btn--ink { flex: 0 0 52px; padding: 0; }
}