/* «Ясмина × Greenleaf» — как её листовки: шампань с блёстками, изумрудный бархат, белый жасмин и золотая тонкая линия.
   Фоны — картинки боке (img/fon-*.jpg) + сияние .avrora + искры [data-iskry]; карточки — стекло. */
:root {
  --krem: #F7F1EA; --krem2: #FBF7F1; --shampan: #F3E9DA; --pudra: #F2DED6; --shalfey: #DCE5D8;
  --izumrud: #12392F; --izumrud2: #1C4D40; --izumrud3: #0C2A22; --vino: #7B2942; --vino-t: #3B1520;
  --zoloto: #B48A55; --zoloto-s: #D8B985; --zoloto-t: #8A6634; --tekst: #20261F; --tekst2: #5C6560; --liniya: rgba(32, 38, 31, .12);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ten: 0 30px 70px -34px rgba(18, 57, 47, .5);
  --plavno: cubic-bezier(.2, .75, .2, 1);
  --blesk: linear-gradient(100deg, #7E5B2E 0%, #A97F45 22%, #D9BC85 42%, #F3E2B8 50%, #C9A462 60%, #8E6A3A 80%, #B48A55 100%);
  --blesk-svet: linear-gradient(100deg, #C9A462 0%, #E9D3A0 25%, #FFF3D6 45%, #E3C994 60%, #B48A55 80%, #F1DDB0 100%);
  --steklo: rgba(255, 252, 247, .58);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #F4ECE1; color-scheme: only light; }
body { position: relative; margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--tekst); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("img/fon-blestki.jpg") center / cover no-repeat, #F4ECE1; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--zoloto); outline-offset: 3px; }
.sprayt { position: absolute; width: 0; height: 0; overflow: hidden; }
.vizh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.obertka { position: relative; z-index: 1; width: min(1220px, 100% - 48px); margin-inline: auto; }
section { position: relative; scroll-margin-top: 96px; }
main { display: block; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(42px, 5.2vw, 72px); color: var(--izumrud); }
h1 i, h2 i, h3 i { font-style: italic; padding: 0 .07em; margin: 0 -.07em; background: var(--blesk); background-size: 240% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.js-anim h1 i, .js-anim h2 i { animation: perelyv 9s ease-in-out infinite alternate; }
@keyframes perelyv { to { background-position: 100% 0; } }
.temno h1, .temno h2, .temno h3 { color: #FBF6EC; }
.temno h1 i, .temno h2 i, .temno h3 i { background-image: var(--blesk-svet); }
.nad { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--zoloto-t); }
.nad::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.temno .nad { color: var(--zoloto-s); }
.zag-blok { margin-bottom: 54px; }
.zag-centr { text-align: center; }
.zag-centr .nad { justify-content: center; }
.zag-centr .nad::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.zag-ryad { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.zag-tekst { max-width: 580px; margin: 18px 0 0; color: var(--tekst2); font-size: 17.5px; }
.temno .zag-tekst { color: rgba(237, 229, 214, .78); }

/* стекло, тёмный бархат, сияние, искры */
.steklo { background: var(--steklo); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -38px rgba(59, 40, 20, .45); }
.temno { color: #EDE5D6; background: url("img/fon-izumrud.jpg") center / cover no-repeat, var(--izumrud); overflow: hidden; }
.avrora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.avrora span { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .75; }
.avrora span:nth-child(1) { left: -18vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(242, 222, 214, .95), rgba(242, 222, 214, 0)); }
.avrora span:nth-child(2) { right: -22vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(220, 229, 216, .9), rgba(220, 229, 216, 0)); }
.avrora span:nth-child(3) { left: 30%; bottom: -36vmax; background: radial-gradient(closest-side, rgba(233, 211, 160, .55), rgba(233, 211, 160, 0)); }
.temno .avrora span:nth-child(1) { background: radial-gradient(closest-side, rgba(216, 185, 133, .26), rgba(216, 185, 133, 0)); }
.temno .avrora span:nth-child(2) { background: radial-gradient(closest-side, rgba(70, 150, 120, .3), rgba(70, 150, 120, 0)); }
.js-anim .avrora span:nth-child(1) { animation: dreif 22s ease-in-out infinite alternate; }
.js-anim .avrora span:nth-child(2) { animation: dreif 26s ease-in-out -8s infinite alternate-reverse; }
.js-anim .avrora span:nth-child(3) { animation: dreif 30s ease-in-out -4s infinite alternate; }
@keyframes dreif { 50% { transform: translate(6vmax, 4vmax) scale(1.08); } 100% { transform: translate(-4vmax, 7vmax) scale(.95); } }
.iskra { position: absolute; z-index: 0; width: var(--r, 14px); height: var(--r, 14px); pointer-events: none; opacity: .9;
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 246, 220, .7) 18%, transparent 42%),
    linear-gradient(90deg, transparent 47%, rgba(255, 244, 214, .95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 244, 214, .95) 50%, transparent 53%); }
.iskra.zol { background: radial-gradient(circle, #FFF8E6 0 12%, rgba(216, 185, 133, .8) 18%, transparent 42%),
    linear-gradient(90deg, transparent 47%, rgba(201, 164, 98, .95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(201, 164, 98, .95) 50%, transparent 53%); }
.js-anim .iskra { animation: mercat var(--t, 4s) ease-in-out var(--z, 0s) infinite; }
@keyframes mercat { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); } }
.cvetok { position: absolute; z-index: 3; width: 74px; height: 74px; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(59, 40, 20, .22)); }
.js-anim .cvetok { animation: kachat 7s ease-in-out infinite; }
.js-anim .cvetok-2 { animation-duration: 9s; animation-delay: -3s; }
.js-anim .cvetok-3 { animation-duration: 8s; animation-delay: -5s; }
@keyframes kachat { 50% { transform: rotate(14deg) translateY(-6px); } }

/* кнопки */
.knopka { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; overflow: hidden; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(135deg, #1F5646, #12392F 60%); color: #FBF8F3; text-decoration: none; font-weight: 600; font-size: 15.5px; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 14px 30px -16px rgba(18, 57, 47, .7), 0 1px 0 rgba(255, 255, 255, .18) inset; transition: transform .25s var(--plavno), box-shadow .25s, color .25s, background .25s; }
.knopka:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(18, 57, 47, .75), 0 1px 0 rgba(255, 255, 255, .18) inset; }
.knopka svg { width: 20px; height: 20px; flex: none; }
.knopka-kontur { background: rgba(255, 255, 255, .35); color: var(--izumrud); border-color: rgba(18, 57, 47, .3); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.knopka-kontur:hover { background: rgba(255, 255, 255, .7); box-shadow: 0 14px 28px -20px rgba(18, 57, 47, .5); }
.knopka-steklo { background: rgba(255, 255, 255, .5); color: var(--izumrud); border-color: rgba(255, 255, 255, .9); box-shadow: 0 14px 30px -20px rgba(59, 40, 20, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.knopka-steklo:hover { background: rgba(255, 255, 255, .8); }
.knopka-vino { background: linear-gradient(135deg, #933A57, #7B2942 55%, #5E1E33); box-shadow: 0 16px 32px -16px rgba(123, 41, 66, .85), 0 1px 0 rgba(255, 255, 255, .2) inset; }
.knopka-zoloto { background: linear-gradient(135deg, #F1DDB0, #D8B985 35%, #B48A55 75%, #CDA66A); color: #23200F; box-shadow: 0 14px 30px -16px rgba(180, 138, 85, .9), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.knopka-kontur-svet { background: rgba(255, 255, 255, .06); color: #F7F1EA; border-color: rgba(247, 241, 234, .38); box-shadow: none; }
.knopka-kontur-svet:hover { background: rgba(247, 241, 234, .14); }
.knopka-blik::after, .knopka-zoloto::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); pointer-events: none; }
.js-anim .knopka-blik::after, .js-anim .knopka-zoloto::after { animation: blik-kn 4.8s ease-in-out 1.5s infinite; }
@keyframes blik-kn { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.knopka-mal { min-height: 42px; padding: 0 20px; font-size: 14px; }
.knopka-shiroko { width: 100%; }
.knopki { display: flex; flex-wrap: wrap; gap: 14px; }
.knopki-centr { justify-content: center; }

/* демо */
.demo { position: relative; z-index: 60; background: var(--izumrud3); color: #E9DFC9; font-size: 13px; line-height: 1.45; text-align: center; padding: 9px 46px; }
#demoX { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: inherit; font-size: 20px; }

/* шапка */
.shapka { position: sticky; top: 0; z-index: 50; margin-bottom: -84px; transition: background .35s, box-shadow .35s; }
.shapka.skolzit { background: rgba(250, 245, 238, .78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 rgba(180, 138, 85, .25), 0 18px 40px -30px rgba(59, 40, 20, .4); }
.shapka-ryad { width: min(1320px, 100% - 40px); margin-inline: auto; height: 84px; display: flex; align-items: center; gap: 22px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--izumrud); }
.logo-medal { display: block; flex: none; width: 52px; height: 52px; padding: 2px; border-radius: 50%; background: var(--blesk); box-shadow: 0 8px 18px -10px rgba(59, 40, 20, .6); }
.logo-medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.12); clip-path: circle(44.6%); }
.logo-t { display: flex; flex-direction: column; line-height: 1; }
.logo-t i { font-family: var(--serif); font-size: 30px; font-style: italic; color: var(--izumrud); }
.logo-t small { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zoloto-t); }
.menu { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.menu a:not(.knopka) { position: relative; text-decoration: none; font-size: 14.5px; font-weight: 600; }
.menu a:not(.knopka)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: var(--blesk); transform: scaleX(0); transition: transform .3s var(--plavno); }
.menu a.tut::after, .menu a:hover::after { transform: scaleX(1); }
.podborka-mini { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border: 1px solid rgba(180, 138, 85, .35); border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--vino); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.podborka-mini svg { width: 18px; height: 18px; }
.podborka-mini b { font-size: 13px; color: var(--tekst); }
.burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(180, 138, 85, .35); border-radius: 50%; background: rgba(255, 255, 255, .55); flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.burger span { width: 18px; height: 1.5px; background: var(--izumrud); transition: transform .3s; }
.shapka:has(.menu.otkryto) .burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.shapka:has(.menu.otkryto) .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
/* на тёмном первом экране шапка светлая, пока не поехала */
body:not([data-str="index"]) .shapka:not(.skolzit) .logo-t i, body:not([data-str="index"]) .shapka:not(.skolzit) .menu a:not(.knopka) { color: #FBF6EC; }
body:not([data-str="index"]) .shapka:not(.skolzit) .logo-t small { color: var(--zoloto-s); }
body:not([data-str="index"]) .shapka:not(.skolzit) .podborka-mini, body:not([data-str="index"]) .shapka:not(.skolzit) .burger { background: rgba(255, 255, 255, .1); border-color: rgba(216, 185, 133, .4); }
body:not([data-str="index"]) .shapka:not(.skolzit) .podborka-mini, body:not([data-str="index"]) .shapka:not(.skolzit) .podborka-mini b { color: #FBF6EC; }
body:not([data-str="index"]) .shapka:not(.skolzit) .burger span { background: #FBF6EC; }
body:not([data-str="index"]) .shapka:not(.skolzit) .menu-knopka { background: linear-gradient(135deg, #F1DDB0, #D8B985 35%, #B48A55 75%); color: #23200F; }

/* главный экран */
.hero { overflow: hidden; padding: 120px 0 110px; }
.hero-setka { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; min-height: min(calc(100svh - 160px), 820px); }
.hero h1 { font-size: clamp(54px, 7vw, 108px); font-weight: 300; line-height: .95; color: var(--izumrud); }
.hero h1 .h1-1 { display: block; max-width: 560px; margin-bottom: 12px; font-size: max(25px, .34em); font-weight: 500; line-height: 1.15; letter-spacing: 0; color: var(--izumrud); }
.hero h1 i { display: inline-block; font-weight: 500; }
.hero h1 .h1-3 { display: block; margin-top: 10px; font-size: .42em; font-style: italic; line-height: 1.1; color: var(--vino); }
.lead { max-width: 560px; margin: 28px 0 36px; font-size: clamp(17px, 1.35vw, 19px); color: #4D5751; }
.hero-niz { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 38px; }
.hero-ocenka { display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px 10px 12px; border-radius: 999px; text-decoration: none; font-size: 13.5px; line-height: 1.35; color: var(--tekst2);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-ocenka b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--izumrud); font-family: var(--serif); font-size: 24px; font-weight: 500; color: #FBF6EC; }
.zvezdy { color: var(--zoloto); letter-spacing: 3px; font-size: 13px; }
.hero-fakty { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--izumrud); }
.hero-fakty li { display: flex; align-items: center; gap: 10px; }
.hero-fakty li::before { content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--blesk); }
.hero-vid { position: relative; justify-self: center; width: min(100%, 450px); aspect-ratio: 45 / 64; }
.hero-oreol { position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 252, 240, .95), rgba(243, 226, 184, .5) 45%, rgba(242, 222, 214, 0) 72%); }
.hero-ramka { position: absolute; left: -24%; top: -14%; width: 72%; height: auto; aspect-ratio: 1; z-index: 0; opacity: .95; }
.js-anim .hero-ramka { animation: krutit 120s linear infinite; }
.hero-vid::before { content: ""; position: absolute; inset: -16px; z-index: 1; border-radius: 999px 999px 40px 40px; padding: 1.5px; background: var(--blesk);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .9; }
.arka { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 999px 999px 30px 30px; background: var(--pudra); box-shadow: 0 60px 100px -50px rgba(18, 57, 47, .65); }
.arka::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(12, 42, 34, .28)), radial-gradient(80% 50% at 50% 0%, rgba(255, 245, 225, .25), transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.arka img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hero-vid .cvetok-1 { left: -38px; top: 34%; width: 88px; height: 88px; }
.hero-vid .cvetok-2 { right: -30px; top: 6%; width: 64px; height: 64px; }
.hero-vid .cvetok-3 { right: 22%; bottom: -36px; width: 58px; height: 58px; }
.shtamp { position: absolute; z-index: 4; right: -58px; top: 30%; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #2B6A57, #12392F 60%, #0C2A22); box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), 0 0 0 5px rgba(216, 185, 133, .8), var(--ten); }
.shtamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: krutit 30s linear infinite; }
.shtamp text { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: #E8CF98; }
.shtamp b { position: relative; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; color: #FBF8F3; }
@keyframes krutit { to { transform: rotate(360deg); } }
.hero-tovar { position: absolute; z-index: 4; left: -92px; bottom: 70px; display: flex; align-items: center; gap: 14px; max-width: 280px; padding: 10px 20px 10px 10px; border-radius: 22px; text-decoration: none; }
.hero-tovar img { width: 70px; height: 70px; border-radius: 15px; object-fit: contain; background: #fff; }
.hero-tovar small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zoloto-t); }
.hero-tovar b { display: block; margin-top: 3px; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.1; color: var(--izumrud); }
.hero-yarlyk { position: absolute; z-index: 4; right: -26px; bottom: -22px; display: flex; align-items: center; gap: 12px; padding: 14px 24px 14px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #933A57, #7B2942 55%, #5E1E33); color: #F7EDE6; text-decoration: none; font-size: 14px; box-shadow: 0 22px 44px -20px rgba(123, 41, 66, .8); }
.hero-yarlyk svg { width: 36px; height: 22px; color: var(--zoloto-s); }
.hero-yarlyk b { margin-right: 4px; font-family: var(--serif); font-size: 23px; font-weight: 500; }
.js-anim .hero-tovar { animation: plyt 7s ease-in-out infinite; }
.js-anim .hero-yarlyk { animation: plyt 8s ease-in-out 1.2s infinite; }
@keyframes plyt { 50% { transform: translateY(-9px); } }
.hero-vetka { position: absolute; color: var(--zoloto); opacity: .22; pointer-events: none; }
.hero-vetka-1 { width: 230px; height: 368px; left: -46px; bottom: -70px; transform: rotate(16deg); }

/* бегущая строка */
.polosa { position: relative; overflow: hidden; padding: 20px 0; background: url("img/fon-izumrud-sm.jpg") center / cover, var(--izumrud); color: #EADFC8;
  border-block: 1px solid rgba(216, 185, 133, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.begushka { display: flex; width: max-content; }
.begushka span { display: flex; align-items: center; gap: 50px; padding-right: 50px; font-family: var(--serif); font-style: italic; font-size: 26px; white-space: nowrap; }
.begushka span::after { content: "✦"; font-style: normal; font-size: 14px; color: var(--zoloto-s); }
.begushka.idet { animation: beg 52s linear infinite; }
@keyframes beg { to { transform: translateX(-50%); } }
.bez-anim .begushka { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 4px; padding-inline: 20px; }
.bez-anim .begushka [data-pr-kopiya] { display: none; }
.bez-anim .begushka span { gap: 24px; padding-right: 24px; white-space: normal; text-align: center; }

/* внутренние страницы — первый экран */
.str-hero { padding: 150px 0 110px; }
.str-hero-setka { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.str-hero h1 { font-size: clamp(50px, 6.4vw, 96px); font-weight: 300; line-height: .98; }
.str-hero h1 i { font-weight: 400; }
.str-hero .lead { color: rgba(237, 229, 214, .82); }
.kroshki { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(237, 229, 214, .6); }
.kroshki a { text-decoration: none; color: var(--zoloto-s); }
.kroshki a::after { content: "·"; margin-left: 10px; color: rgba(237, 229, 214, .4); }
.str-hero-vid { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; }
.str-ramka { position: absolute; inset: -12%; width: 124%; height: 124%; opacity: .9; }
.js-anim .str-ramka { animation: krutit 140s linear infinite; }
.str-foto { position: absolute; inset: 8%; overflow: hidden; border-radius: 50%; background: #1C4D40; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 0 7px rgba(216, 185, 133, .55), 0 50px 90px -40px rgba(0, 0, 0, .7); }
.str-foto img { width: 100%; height: 100%; object-fit: cover; }
body[data-str="registraciya"] .str-foto img { object-position: 50% 18%; }
body[data-str="podarki"] .str-foto img { object-position: 46% 60%; }
body[data-str="registraciya"] .str-hero { padding-bottom: 80px; }
body[data-str="registraciya"] .kak { padding-top: 80px; box-shadow: inset 0 1px 0 rgba(216, 185, 133, .35); }
.str-hero-vid .cvetok-1 { left: 2%; bottom: 10%; width: 82px; height: 82px; }
.str-hero-vid .cvetok-2 { right: 4%; top: 6%; width: 56px; height: 56px; }
.str-hero-vid-mozaika .str-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14% 12%; background: radial-gradient(circle, #FFFDF9, #F3E9DA); }
.str-hero-vid-mozaika .str-foto img { border-radius: 18px; background: #fff; object-fit: contain; padding: 8%; box-shadow: 0 14px 24px -18px rgba(59, 40, 20, .6); }
.str-hero-vid-karta .str-foto { inset: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; display: grid; place-items: center; }
.str-hero-vid-karta .str-ramka { inset: -6%; width: 112%; height: 112%; }
.str-hero-vid-karta .podkarta { width: 100%; transform: rotate(-6deg); }

/* тизер подарков на главной */
.pk { padding: 110px 0 100px; overflow: hidden; }
.pk-setka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pk-karta { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 26px 24px 24px; overflow: hidden; border-radius: 28px; text-decoration: none; color: #FBF6EC; isolation: isolate;
  box-shadow: 0 34px 60px -36px rgba(59, 21, 32, .6); transition: transform .45s var(--plavno), box-shadow .45s; }
.pk-karta:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 44px 70px -36px rgba(59, 21, 32, .7); }
.pk-karta::before { content: ""; position: absolute; inset: 10px; z-index: -1; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; }
.pk-karta::after { content: ""; position: absolute; z-index: -1; right: 34px; top: 0; bottom: 0; width: 12px; background: var(--lenta-pk, rgba(216, 185, 133, .75)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.pk-karta.cvet-izumrud { background: url("img/fon-izumrud-sm.jpg") center / cover, #12392F; }
.pk-karta.cvet-zoloto { background: linear-gradient(150deg, #F3E2B8, #D8B985 45%, #B48A55); color: #2A2312; --lenta-pk: rgba(18, 57, 47, .85); }
.pk-karta.cvet-roza { background: url("img/fon-pudra-sm.jpg") center / cover, #F2DED6; color: #3B1520; --lenta-pk: rgba(123, 41, 66, .8); }
.pk-karta.cvet-vino { background: radial-gradient(120% 90% at 0% 0%, #A5466A, #7B2942 45%, #3B1520); }
.pk-nomer { font-family: var(--serif); font-style: italic; font-size: 22px; opacity: .85; }
.pk-krupno { margin: auto 0 8px; font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -.02em; }
.pk-tema { margin: auto 0 8px; font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1; }
.pk-krupno + .pk-tema { display: none; }
.pk-nazv { margin: 0; max-width: 220px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pk-bant { position: absolute; right: 12px; top: 18px; width: 58px; height: 36px; color: var(--lenta-pk, var(--zoloto-s)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.pk-strelka { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* лозунг с фото подарка */
.lozung { padding: 40px 0 110px; overflow: clip; }
.lozung-setka { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 72px; align-items: center; }
.lozung-foto { position: relative; border-radius: 34px; padding: 12px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--ten); }
.lozung-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 40%; border-radius: 24px; }
.lozung-foto figcaption { position: absolute; right: 34px; top: 34px; padding: 12px 20px; border-radius: 18px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--izumrud); }
.lozung-tekst { position: relative; }
.lozung-venok { position: absolute; right: -96px; top: -120px; width: 240px; height: 240px; opacity: .38; pointer-events: none; }
.lozung-p { max-width: 520px; margin: 22px 0 34px; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 31px); line-height: 1.28; color: #3D4842; }

/* как получить */
.kak { padding: 120px 0; }
.kak-vetka { position: absolute; right: -40px; top: -30px; width: 250px; height: 400px; color: var(--zoloto-s); opacity: .16; transform: rotate(200deg); pointer-events: none; }
.shagi { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.shagi::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 185, 133, .7) 8%, rgba(216, 185, 133, .7) 92%, transparent); }
.shag { position: relative; padding: 0 6px; }
.shag-nomer { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 26px; border-radius: 50%; font-family: var(--serif); font-style: italic; font-size: 38px; color: #FBF6EC;
  background: radial-gradient(circle at 30% 25%, #2B6A57, #12392F 70%); box-shadow: 0 0 0 1px rgba(216, 185, 133, .8), 0 0 0 7px rgba(18, 57, 47, .9), 0 0 0 8px rgba(216, 185, 133, .35), 0 20px 40px -20px rgba(0, 0, 0, .6); }
.shag h3 { margin-bottom: 10px; font-size: 31px; color: #FBF8F3; }
.shag p { margin: 0; font-size: 15.5px; color: rgba(237, 229, 214, .8); }
.kak-niz { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; margin-top: 62px; }
.kak-servis { max-width: 540px; margin: 0; font-size: 14.5px; color: rgba(237, 229, 214, .72); }

/* витрина */
.katalog { padding: 110px 0; }
.vk { padding: 110px 0 100px; }
.podborka-knopka b, .podborka-knopka svg { color: var(--vino); }
.kat-panel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; padding: 12px; border-radius: 999px; }
.kat-razdely { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 10px 18px; border: 1px solid rgba(32, 38, 31, .1); border-radius: 999px; background: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.chip small { margin-left: 5px; font-size: 12px; color: var(--tekst2); }
.chip:hover { border-color: rgba(18, 57, 47, .4); }
.chip.tut, .chip[aria-pressed="true"] { background: linear-gradient(135deg, #1F5646, #12392F); border-color: var(--izumrud); color: #FBF8F3; }
.chip.tut small, .chip[aria-pressed="true"] small { color: rgba(251, 248, 243, .7); }
.kat-poisk { display: block; width: min(330px, 100%); }
.kat-poisk input { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; padding: 0 18px 0 46px; border: 1px solid rgba(32, 38, 31, .1); border-radius: 999px; font: inherit; font-size: 14.5px; color: var(--tekst);
  background: #FFFDF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23B48A55' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5 17 17'/%3E%3C/svg%3E") no-repeat 18px center; }
.kat-poisk input:focus { outline: none; border-color: var(--izumrud); }
.tovary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tovar { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; background: rgba(255, 253, 249, .82);
  box-shadow: 0 22px 44px -36px rgba(59, 40, 20, .5); transition: transform .35s var(--plavno), box-shadow .35s; }
.tovar:hover { transform: translateY(-5px); box-shadow: 0 32px 56px -34px rgba(18, 57, 47, .5); }
.tovar-foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff 55%, #F6EEE3); }
.tovar-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .6s var(--plavno); }
.tovar:hover .tovar-foto img { transform: scale(1.06); }
.hit { position: absolute; left: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, #933A57, #7B2942); color: #F7EDE6; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tovar-tekst { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; border-top: 1px solid rgba(180, 138, 85, .15); }
.brend { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zoloto-t); }
.tovar h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.38; letter-spacing: 0; color: var(--tekst); }
.tovar-niz { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.cena { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1; color: var(--izumrud); }
.cena small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--tekst2); }
.serdce { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(32, 38, 31, .1); border-radius: 50%; background: #fff; color: #CDBDB4; transition: background .25s, color .25s, border-color .25s; }
.serdce svg { width: 20px; height: 20px; }
.serdce:hover { color: var(--vino); border-color: rgba(123, 41, 66, .4); }
.serdce[aria-pressed="true"] { background: linear-gradient(135deg, #933A57, #7B2942); border-color: var(--vino); color: #fff; animation: tuk .4s; }
@keyframes tuk { 40% { transform: scale(1.2); } }
.kat-pusto { margin: 10px 0 0; padding: 30px; border-radius: 22px; background: rgba(255, 253, 249, .8); text-align: center; color: var(--tekst2); }
.kat-niz { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; text-align: center; }
.kat-prim { max-width: 660px; margin: 0; font-size: 13.5px; color: var(--tekst2); }
.podbor-banner { display: flex; align-items: center; gap: 20px; margin-top: 34px; padding: 18px 28px 18px 18px; border-radius: 26px; text-decoration: none; transition: transform .3s var(--plavno); }
.podbor-banner:hover { transform: translateY(-3px); }
.pb-ikonka { flex: none; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2B6A57, #12392F 70%); }
.pb-ikonka svg { width: 52px; height: 52px; }
.podbor-banner b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--izumrud); }
.podbor-banner small { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tekst2); }
.podbor-banner i { margin-left: auto; font-style: normal; font-size: 26px; color: var(--zoloto); }

/* подбор */
.podbor { overflow: hidden; padding: 120px 0; background: linear-gradient(180deg, rgba(220, 229, 216, .78), rgba(220, 229, 216, .55)), url("img/fon-blestki.jpg") center / cover; }
.podbor-setka { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.podbor-tekst { position: relative; }
.podbor-tekst p { max-width: 420px; margin: 22px 0 0; font-size: 17.5px; color: #4C5A52; }
.podbor-ramka { display: block; width: 220px; height: 220px; margin-top: 30px; opacity: .8; }
.js-anim .podbor-ramka { animation: krutit 120s linear infinite; }
.kviz { min-height: 450px; padding: 38px; border-radius: 34px; }
.kviz-verh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zoloto-t); }
.kviz-tochki span { display: inline-block; width: 28px; height: 3px; margin-left: 6px; border-radius: 3px; background: var(--liniya); transition: background .3s; }
.kviz-tochki span.tut { background: var(--izumrud); }
.kviz h3 { margin-bottom: 24px; font-size: 40px; color: var(--izumrud); }
.kviz-otvety { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kviz-otvet { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 20px; border: 1px solid rgba(32, 38, 31, .1); border-radius: 18px; background: rgba(255, 255, 255, .85); text-align: left; font-size: 16px; font-weight: 600; transition: border-color .2s, background .2s, transform .2s; }
.kviz-otvet::after { content: "→"; color: var(--zoloto); transition: transform .25s; }
.kviz-otvet:hover { border-color: var(--izumrud); background: #F5F8F3; transform: translateY(-2px); }
.kviz-otvet:hover::after { transform: translateX(4px); }
.kviz-poyav { animation: vsplyt .5s var(--plavno) both; }
.kviz-itog-zag { margin: 0 0 18px; font-size: 15px; color: var(--tekst2); }
.kviz-itog-zag b { color: var(--izumrud); }
.kviz-sp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kviz-tovar { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid rgba(32, 38, 31, .08); border-radius: 18px; background: rgba(255, 255, 255, .9); }
.kviz-tovar img { width: 70px; height: 70px; border-radius: 12px; object-fit: contain; cursor: pointer; }
.kviz-tovar h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.kviz-tovar .cena { font-size: 19px; }
.kviz-tovar .serdce { width: 38px; height: 38px; }
.kviz-dey { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.kviz-zanovo { padding: 0; border: 0; background: none; font-size: 14px; color: var(--tekst2); text-decoration: underline; text-underline-offset: 4px; }

/* подарки-коробки */
.podarki { padding: 110px 0 112px; overflow: hidden; background: url("img/fon-pudra.jpg") center / cover, var(--pudra); }
.podskazka { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; font-size: 15px; color: #5E5050; }
.otkr-schet { display: inline-flex; gap: 5px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13.5px; border: 1px solid rgba(255, 255, 255, .9); }
.otkr-schet b { color: var(--vino); }
.korobki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
.podarok { position: relative; display: grid; min-height: 500px; border-radius: 30px; overflow: hidden; isolation: isolate; background: #FFFBF7; box-shadow: 0 40px 70px -44px rgba(59, 21, 32, .6); }
.podarok > * { grid-area: 1 / 1; }
.cvet-izumrud { --k1: #1C4D40; --k2: #24604F; --lenta: #D8B985; --lenta2: #C29963; --fon-k: #E3ECE5; }
.cvet-zoloto { --k1: #CBA772; --k2: #D8BA88; --lenta: #12392F; --lenta2: #1C4D40; --fon-k: #F5ECDC; }
.cvet-roza { --k1: #D9A49B; --k2: #E4B6AE; --lenta: #7B2942; --lenta2: #943553; --fon-k: #F8E6E1; }
.cvet-vino { --k1: #7B2942; --k2: #8E3350; --lenta: #D8B985; --lenta2: #C29963; --fon-k: #F2E1E3; }
.podarok-zakryt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 30px 20px; border: 0; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .95) 0%, var(--fon-k) 72%), url("img/fon-blestki-sm.jpg") center / cover; transition: opacity .45s, transform .5s var(--plavno), visibility 0s .5s; }
.podarok-zakryt::before, .podarok-zakryt::after { content: ""; position: absolute; z-index: -1; background: var(--lenta); opacity: .14; }
.podarok-zakryt::before { left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; }
.podarok-zakryt::after { left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; }
.p-nomer { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--zoloto-t); }
.korobka-svg { width: min(84%, 230px); height: auto; overflow: visible; filter: drop-shadow(0 22px 20px rgba(59, 21, 32, .22)); }
.js-anim .podarok:not(.otkryta) .korobka-svg { animation: dyshat 4.6s ease-in-out infinite; }
.js-anim .podarok:nth-child(2):not(.otkryta) .korobka-svg { animation-delay: -1.2s; }
.js-anim .podarok:nth-child(3):not(.otkryta) .korobka-svg { animation-delay: -2.4s; }
.js-anim .podarok:nth-child(4):not(.otkryta) .korobka-svg { animation-delay: -3.6s; }
@keyframes dyshat { 50% { transform: translateY(-6px); } }
.k-telo { fill: var(--k1); }
.k-krysh { fill: var(--k2); }
.k-ten { fill: rgba(0, 0, 0, .1); }
.k-lenta { fill: var(--lenta); }
.k-bant { fill: var(--lenta2); }
.k-kryshka { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--plavno), opacity .5s .15s; }
.podarok.otkryvaetsya .k-kryshka { transform: translate(14px, -64px) rotate(16deg); opacity: 0; }
.podarok-zakryt:hover .korobka-svg { animation: kach .9s ease; }
@keyframes kach { 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-1.5deg); } }
.p-tema { position: relative; padding: 2px 14px; border-radius: 12px; font-family: var(--serif); font-size: 32px; line-height: 1.1; color: var(--izumrud); }
.p-otkryt { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst2); }
.podarok-vnutri { display: flex; flex-direction: column; background: #FFFBF7; }
.js-anim .podarok-vnutri { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transition: opacity .6s, transform .7s var(--plavno), visibility 0s .7s; }
.js-anim .podarok.otkryta .podarok-vnutri { opacity: 1; visibility: visible; transform: none; transition: opacity .6s .12s, transform .7s var(--plavno) .12s, visibility 0s; }
.js-anim .podarok.otkryta .podarok-zakryt { opacity: 0; visibility: hidden; transform: scale(.94); pointer-events: none; }
html:not(.js-anim) .podarok-zakryt { display: none; }
.pv-verh { position: relative; height: 188px; overflow: hidden; background: var(--k1); }
.cvet-izumrud .pv-verh { background: url("img/fon-izumrud-sm.jpg") center / cover; }
.cvet-zoloto .pv-verh { background: linear-gradient(150deg, #F3E2B8, #D8B985 45%, #B48A55); }
.pv-verh img { width: 100%; height: 100%; object-fit: cover; }
.pv-verh::before, .pv-verh::after { content: ""; position: absolute; z-index: 1; background: var(--lenta); opacity: .9; }
.pv-verh::before { right: 26px; top: 0; bottom: 0; width: 10px; }
.pv-verh::after { left: 0; right: 0; bottom: 26px; height: 10px; }
.pv-verh .pv-tovary { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 30px 22px 16px; }
.pv-verh .pv-tovary img { width: 30%; height: auto; aspect-ratio: 1; padding: 8px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .5); }
.pv-verh .pv-tovary img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-8px) scale(1.14); }
.pv-krupno { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 66px; line-height: 1; color: var(--lenta); text-shadow: 0 2px 20px rgba(0, 0, 0, .12); }
.cvet-zoloto .pv-krupno { font-style: normal; font-weight: 500; font-size: 76px; }
.pv-telo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.pv-nomer { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--zoloto-t); }
.pv-telo h3 { font-size: 28px; line-height: 1.06; color: var(--izumrud); }
.pv-telo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tekst2); }
.pv-ceny { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; line-height: 1.35; }
.pv-ceny li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--liniya); }
.pv-ceny span:last-child { flex: none; white-space: nowrap; }
.pv-ceny s { margin-right: 5px; color: #8C8A82; }
.pv-ceny b { color: var(--vino); }
.pv-ceny i { color: var(--tekst2); }
.pv-knopka { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border: 0; background: none; padding-left: 0; font-weight: 700; font-size: 14.5px; color: var(--vino); text-decoration: none; text-align: left; }
.pv-knopka::after { content: "→"; transition: transform .25s; }
.pv-knopka:hover::after { transform: translateX(4px); }
.podarki-final { position: relative; max-width: 760px; margin: 56px auto 0; padding: 50px 34px 40px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9); border-radius: 34px; background: rgba(255, 252, 247, .7);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-align: center; box-shadow: var(--ten); }
.js-anim .podarki-final { display: none; }
.js-anim .podarki-final.pokazan { display: block; animation: vsplyt .8s var(--plavno) both; }
@keyframes vsplyt { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.final-ramka { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); opacity: .25; pointer-events: none; }
.podarki-final h3 { position: relative; font-size: 50px; font-style: italic; color: var(--izumrud); }
.podarki-final p { position: relative; max-width: 520px; margin: 12px auto 26px; color: var(--tekst2); }
.lepestok { position: absolute; top: -24px; z-index: 6; width: 12px; height: 16px; border-radius: 12px 0 12px 0; pointer-events: none; animation: padat var(--t, 3.8s) cubic-bezier(.3, .6, .4, 1) var(--z, 0s) forwards; }
.lepestok.zhasmin { width: 15px; height: 15px; border-radius: 50% 0 50% 50%; background: #FFFDF8 !important; box-shadow: 0 0 0 1px #E6D7BC; }
@keyframes padat { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* где получить подарки */
.gde-podarki { padding: 90px 0 30px; }
.gp-setka { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gp-karta { padding: 38px 36px; border-radius: 30px; }
.gp-karta h3 { font-size: 36px; color: var(--izumrud); }
.gp-karta p:not(.nad) { margin: 10px 0 24px; color: var(--tekst2); }
.gp-temno { position: relative; overflow: hidden; color: #EDE5D6; background: url("img/fon-izumrud-sm.jpg") center / cover, var(--izumrud); box-shadow: var(--ten); }
.gp-temno h3 { color: #FBF6EC; }
.gp-temno .nad { color: var(--zoloto-s); }
.gp-temno p:not(.nad) { color: rgba(237, 229, 214, .78); }

/* о greenleaf */
.greenleaf { padding: 120px 0; }
.gl-setka { display: grid; grid-template-columns: 1.12fr .88fr; gap: 70px; align-items: start; }
.gl-tekst p { max-width: 580px; margin: 22px 0 0; font-size: 18px; color: #4D5751; }
.cifry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.cifra { padding: 22px 20px; border-radius: 24px; background: rgba(255, 252, 247, .6); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cifra b { display: block; font-family: var(--serif); font-size: clamp(40px, 4.2vw, 58px); font-weight: 500; line-height: 1; color: var(--izumrud); white-space: nowrap; }
.cifra span { display: block; margin-top: 8px; font-size: 14px; color: var(--tekst2); }
.gl-plusy { position: relative; padding: 42px 38px; border-radius: 34px; box-shadow: var(--ten); }
.gl-plusy > *:not(.iskra) { position: relative; z-index: 1; }
.gl-plusy h3 { margin-bottom: 18px; font-size: 36px; }
.gl-plusy ul { margin: 0 0 30px; padding: 0; list-style: none; }
.gl-plusy li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(216, 185, 133, .2); font-size: 15.5px; }
.gl-plusy li::before { content: ""; position: absolute; left: 0; top: 18px; width: 18px; height: 18px; border: 1px solid var(--zoloto-s); border-radius: 50%; background: radial-gradient(circle, var(--zoloto-s) 0 3px, transparent 3.5px); }

/* студия: тизер, услуги, лента */
.sk { padding: 110px 0; overflow: hidden; }
.sk-setka { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.sk-tekst .zag-tekst { margin-bottom: 26px; }
.sk-fakty { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.sk-kollazh { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.sk-kollazh figure { position: relative; overflow: hidden; border-radius: 28px; box-shadow: var(--ten); }
.sk-kollazh figure:first-child { grid-row: span 2; border-radius: 999px 999px 28px 28px; }
.sk-kollazh img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--plavno); }
.sk-kollazh figure:hover img { transform: scale(1.05); }
.sk-kollazh figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 13px; border-radius: 12px; background: rgba(251, 248, 243, .88); font-size: 12.5px; font-weight: 700; color: var(--izumrud); }
.uslugi { padding: 110px 0 60px; }
.st-fakty { display: flex; flex-wrap: wrap; gap: 14px; }
.fakt { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 18px 24px; border-radius: 22px; text-decoration: none; }
.fakt b { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; color: var(--izumrud); }
.fakt span { font-size: 13.5px; color: var(--tekst2); }
.us-setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.us-kolonka { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.us-gruppa { overflow: hidden; border-radius: 30px; }
.us-verh { position: relative; height: 170px; overflow: hidden; }
.us-verh img { width: 100%; height: 100%; object-fit: cover; }
.us-verh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 42, 34, 0) 30%, rgba(12, 42, 34, .78)); }
.us-verh h3 { position: absolute; left: 26px; bottom: 18px; z-index: 1; font-size: 34px; color: #FBF6EC; }
.us-podarok { margin: 18px 26px 0; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(123, 41, 66, .1), rgba(180, 138, 85, .14)); font-size: 14px; font-weight: 600; color: var(--vino); }
.us-podarok::before { content: "🎁 "; }
.us-spisok { margin: 0; padding: 10px 26px 22px; list-style: none; }
.us-spisok li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(32, 38, 31, .08); font-size: 15px; }
.us-spisok li:last-child { border-bottom: 0; }
.us-nazv { flex: 1; min-width: 0; }
.us-nazv small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tekst2); }
.us-metka { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--vino); color: #FBF2EC; font-size: 12px; font-weight: 700; }
.us-cena { flex: none; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--izumrud); }
.us-cena i { font-family: var(--sans); font-size: 13px; font-style: normal; color: var(--tekst2); }
.us-prim { max-width: 760px; margin: 26px 0 0; font-size: 13.5px; color: var(--tekst2); }
.studiya { overflow: hidden; padding: 60px 0 100px; }
.lenta { display: flex; align-items: flex-end; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px max(24px, calc((100% - 1220px) / 2)); scroll-padding-inline: max(24px, calc((100% - 1220px) / 2)); }
.lenta::-webkit-scrollbar { display: none; }
.st-kadr { position: relative; flex: 0 0 auto; width: clamp(250px, 29vw, 390px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: #DCCFBF; scroll-snap-align: start; box-shadow: 0 30px 50px -36px rgba(59, 40, 20, .6); }
.st-kadr:nth-child(even) { width: clamp(220px, 23vw, 310px); aspect-ratio: 1; }
.st-kadr:nth-child(3n+1) { border-radius: 999px 999px 28px 28px; }
.st-kadr img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--plavno); }
.st-kadr:hover img { transform: scale(1.04); }
.st-kadr figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 14px; border-radius: 14px; background: rgba(251, 248, 243, .9); font-size: 13.5px; font-weight: 600; color: var(--izumrud); pointer-events: none; }
.lenta-upr { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.strelka { width: 54px; height: 54px; border: 1px solid rgba(18, 57, 47, .25); border-radius: 50%; background: rgba(255, 255, 255, .5); font-size: 20px; color: var(--izumrud); transition: background .25s, color .25s; }
.strelka:hover { background: var(--izumrud); color: #FBF8F3; }

/* отзывы */
.otzyvy { padding: 120px 0; overflow: hidden; color: #F1E6DF;
  background: radial-gradient(60% 80% at 100% 0%, rgba(165, 70, 106, .55), transparent 65%), radial-gradient(50% 70% at 0% 100%, rgba(216, 185, 133, .18), transparent 70%), linear-gradient(160deg, #4A1A29, #3B1520 55%, #2A0F17); }
.otzyvy h2 { color: #FBF2EC; }
.otzyvy h2 i { background-image: var(--blesk-svet); }
.ot-ssylka { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid rgba(216, 185, 133, .45); color: var(--zoloto-s); text-decoration: none; font-size: 15px; }
.ot-ssylka b { font-family: var(--serif); font-size: 26px; font-weight: 500; color: #FBF2EC; }
.ot-setka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.otzyv { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 30px 28px; border: 1px solid rgba(216, 185, 133, .22); border-radius: 28px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.otzyv:first-child { grid-column: span 2; padding: 38px 40px; background: rgba(255, 255, 255, .09); }
.otzyv:nth-child(4):last-child { grid-column: span 2; }
.otzyv-zvezdy { color: var(--zoloto-s); letter-spacing: 3px; font-size: 14px; }
.otzyv p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(241, 230, 223, .9); }
.otzyv:first-child p { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.24; color: #FBF2EC; }
.otzyv footer { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14.5px; font-weight: 600; }
.otzyv footer small { display: block; font-size: 12.5px; font-weight: 400; color: rgba(241, 230, 223, .6); }
.otzyv-ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--blesk-svet); color: var(--vino-t); font-family: var(--serif); font-size: 21px; font-weight: 600; }

/* обо мне */
.ya { overflow: hidden; padding: 120px 0; background: url("img/fon-pudra.jpg") center / cover, var(--pudra); }
.ya-setka { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; }
.ya-foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 30px 30px; background: url("img/fon-izumrud-sm.jpg") center / cover, var(--izumrud); box-shadow: var(--ten); }
.ya-foto img { width: 100%; height: 100%; object-fit: cover; }
.ya-foto::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(216, 185, 133, .55); border-radius: inherit; pointer-events: none; }
.ya-vensel { width: 66%; color: var(--zoloto-s); }
.ya-vensel text { font-family: var(--serif); font-style: italic; }
.ya h2 { font-size: clamp(50px, 6.2vw, 88px); }
.ya-tekst p { max-width: 560px; margin: 20px 0 0; font-size: 18px; color: #5A4A4A; }
.ya-tekst p:first-child { font-family: var(--serif); font-size: 27px; line-height: 1.25; color: var(--izumrud); }
.ya-otzyv { max-width: 560px; margin: 32px 0; padding: 22px 26px; border-radius: 22px; font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.35; color: var(--izumrud); }
.ya-otzyv cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--tekst2); }
.kanaly { display: flex; flex-wrap: wrap; gap: 10px; }
.kanal { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid rgba(18, 57, 47, .25); border-radius: 999px; background: rgba(255, 255, 255, .5); text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--izumrud); transition: background .25s, color .25s; }
.kanal:hover { background: var(--izumrud); color: #FBF8F3; }
.kanaly-svet .kanal { border-color: rgba(247, 241, 234, .3); background: rgba(255, 255, 255, .05); color: #F7F1EA; }
.kanaly-svet .kanal:hover { background: rgba(247, 241, 234, .14); }

/* вопросы */
.voprosy { padding: 120px 0; }
.vo-setka { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; align-items: start; }
.vo-zag { position: sticky; top: 120px; }
.vo-zag .zag-tekst { margin-bottom: 22px; }
.vo-spisok { padding: 8px 34px; border-radius: 30px; }
.vopros { border-bottom: 1px solid var(--liniya); }
.vopros:last-child { border-bottom: 0; }
.vopros summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; list-style: none; cursor: pointer; font-family: var(--serif); font-size: 27px; line-height: 1.2; color: var(--izumrud); }
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(180, 138, 85, .45); font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--zoloto-t); transition: transform .3s; }
.vopros[open] summary::after { transform: rotate(45deg); }
.vopros p { max-width: 660px; margin: 0 0 24px; font-size: 16.5px; color: var(--tekst2); }

/* как добраться */
.gde { padding: 40px 0 110px; }
.gde-setka { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }
.gde-tekst h2 { font-size: clamp(36px, 4vw, 54px); }
.gde-chasy { margin: 14px 0 6px; color: var(--tekst2); }
.gde-tel { display: inline-block; margin: 6px 0 22px; font-size: 22px; font-weight: 700; color: var(--vino); text-decoration: none; }
.gde-karta { padding: 10px; border-radius: 32px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--ten); }
.gde-karta iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 24px; background: #E8E2D6; }

/* призыв */
.prizyv { padding: 40px 0 120px; }
.prizyv-karta { position: relative; max-width: 940px; margin: 0 auto; padding: 70px 40px 56px; overflow: hidden; border-radius: 44px; text-align: center;
  background: url("img/fon-pudra.jpg") center / cover, var(--pudra); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 50px 90px -50px rgba(59, 21, 32, .55); }
.prizyv-ramka { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%); opacity: .35; pointer-events: none; }
.js-anim .prizyv-ramka { animation: krutit-c 160s linear infinite; }
@keyframes krutit-c { to { transform: translate(-50%, -50%) rotate(360deg); } }
.prizyv-karta > *:not(.iskra):not(.prizyv-ramka) { position: relative; z-index: 1; }
.prizyv-logo { width: 92px; height: 92px; margin: 0 auto 22px; }
.prizyv h2 { font-size: clamp(42px, 5vw, 66px); }
.prizyv p { max-width: 520px; margin: 18px auto 30px; font-size: 17.5px; color: #5A4A4A; }

/* заявка */
.zayavka-sek { padding: 150px 0 120px; min-height: 100svh; }
.zayavka-sek h1 { font-size: clamp(50px, 6vw, 88px); font-weight: 300; line-height: .98; }
.za-vetka { position: absolute; left: -50px; bottom: -40px; width: 260px; height: 416px; color: var(--zoloto-s); opacity: .14; transform: rotate(14deg); pointer-events: none; }
.za-setka { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.za-tekst > p { max-width: 470px; margin: 22px 0 26px; font-size: 18px; color: rgba(237, 229, 214, .82); }
.za-podarki { display: grid; gap: 10px; max-width: 470px; margin: 0 0 30px; padding: 0; list-style: none; }
.za-podarki li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(216, 185, 133, .22); font-size: 15px; }
.za-podarki b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blesk-svet); color: var(--izumrud3); font-family: var(--serif); font-size: 18px; font-style: italic; }
.za-reg { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 4px; border-bottom: 1px solid rgba(216, 185, 133, .5); color: var(--zoloto-s); text-decoration: none; font-weight: 600; }
.za-kartochka { position: relative; padding: 40px; border-radius: 34px; background: rgba(251, 248, 243, .96); color: var(--tekst); box-shadow: 0 0 0 1px rgba(216, 185, 133, .5), 0 0 0 9px rgba(255, 255, 255, .06), 0 60px 100px -54px rgba(0, 0, 0, .8); }
.forma { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.forma > * { grid-column: 1 / -1; }
.pole { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pole > span, .pole legend { padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); }
.pole input, .pole textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(32, 38, 31, .16); border-radius: 16px; background: #fff; font: inherit; font-size: 16px; color: var(--tekst); transition: border-color .2s, box-shadow .2s; }
.pole textarea { resize: vertical; min-height: 56px; }
.pole input:focus, .pole textarea:focus { outline: none; border-color: var(--izumrud); box-shadow: 0 0 0 4px rgba(18, 57, 47, .1); }
.pole input.oshibka { border-color: var(--vino); box-shadow: 0 0 0 4px rgba(123, 41, 66, .1); }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.f-podborka ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.f-podborka li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #F2E4E0; font-size: 13px; }
.f-podborka li button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(123, 41, 66, .12); color: var(--vino); font-size: 15px; line-height: 1; }
.f-oshibka { margin: 0; font-size: 14px; font-weight: 600; color: var(--vino); }
.f-melko { margin: 0; text-align: center; font-size: 12.5px; color: var(--tekst2); }
.karta-spasibo { margin: 0 0 20px; font-family: var(--serif); font-size: 27px; line-height: 1.2; color: var(--izumrud); }
.podkarta { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; aspect-ratio: 1.6; padding: 28px 30px; overflow: hidden; border-radius: 24px; color: #F3E6CF;
  background: radial-gradient(120% 140% at 0% 0%, rgba(43, 102, 84, .9) 0%, rgba(18, 57, 47, .6) 55%, rgba(12, 42, 34, .9) 100%), url("img/fon-izumrud-sm.jpg") center / cover; box-shadow: 0 34px 60px -32px rgba(0, 0, 0, .65); }
.podkarta::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(216, 185, 133, .5); border-radius: 18px; pointer-events: none; }
.podkarta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 210, .18) 50%, transparent 65%); transform: translateX(-100%); pointer-events: none; }
.js-anim .podkarta::after { animation: blik 3.2s ease-in-out 1s infinite; }
@keyframes blik { 60%, 100% { transform: translateX(100%); } }
.podkarta-venok { position: absolute; right: 22px; top: 20px; width: 66px; height: 66px; color: var(--zoloto-s); }
.podkarta p { position: relative; margin: 0; }
.podkarta-zag { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--zoloto-s); }
.podkarta-imya { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1.05; color: #FBF2E4; }
.podkarta-kod { font-size: 17px; font-weight: 700; letter-spacing: .16em; }
.podkarta-podarki { font-size: 12.5px; color: rgba(243, 230, 207, .88); }
.podkarta-gde { font-size: 12px; color: rgba(243, 230, 207, .66); }
.karta-itog .knopki { margin-top: 22px; }

/* мой кабинет */
.kabinet { padding: 100px 0 40px; }
.kb-setka { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.kb-blok { padding: 32px 32px 30px; border-radius: 32px; }
.kb-blok h3 { font-size: 34px; color: var(--izumrud); }
.kb-blok > p:not(.nad) { color: var(--tekst2); }
.kb-karta .podkarta { margin: 6px 0 20px; }
.kb-karta-pusto { display: grid; gap: 14px; justify-items: start; }
.kb-karta-pusto p { margin: 0; color: var(--tekst2); }
.kb-shagi { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: kb; }
.kb-shagi li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--liniya); }
.kb-shagi li:last-child { border-bottom: 0; }
.kb-shagi .kb-znak { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(180, 138, 85, .5); font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--zoloto-t); background: rgba(255, 255, 255, .6); }
.kb-shagi .gotovo .kb-znak { border-color: transparent; background: linear-gradient(135deg, #1F5646, #12392F); color: #FBF6EC; }
.kb-shagi .kb-znak svg { width: 20px; height: 20px; }
.kb-shagi b { display: block; font-size: 15.5px; color: var(--izumrud); }
.kb-shagi small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tekst2); }
.kb-shagi a { color: var(--vino); font-weight: 700; text-decoration: none; }
.kb-shagi .gotovo b { text-decoration: line-through; text-decoration-color: rgba(18, 57, 47, .35); }
.kb-pod { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.kb-pod li { display: flex; flex-direction: column; gap: 4px; min-height: 110px; padding: 14px 16px; border-radius: 20px; font-size: 13.5px; line-height: 1.35; }
.kb-pod li b { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.1; }
.kb-pod li small { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.kb-pod .zakryt { background: rgba(255, 255, 255, .5); border: 1px dashed rgba(180, 138, 85, .55); color: var(--tekst2); }
.kb-pod .zakryt b { font-style: italic; color: var(--zoloto-t); }
.kb-pod .otkr { color: #FBF6EC; }
.kb-pod .otkr.cvet-izumrud { background: url("img/fon-izumrud-sm.jpg") center / cover; }
.kb-pod .otkr.cvet-zoloto { background: linear-gradient(150deg, #F3E2B8, #D8B985 45%, #B48A55); color: #2A2312; }
.kb-pod .otkr.cvet-roza { background: url("img/fon-pudra-sm.jpg") center / cover; color: #3B1520; }
.kb-pod .otkr.cvet-vino { background: linear-gradient(150deg, #A5466A, #7B2942 50%, #3B1520); }
.kb-tovary { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.kb-tovary li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, .7); }
.kb-tovary img { width: 54px; height: 54px; border-radius: 12px; background: #fff; object-fit: contain; }
.kb-tovary h4 { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.kb-tovary .cena { font-size: 18px; }
.kb-pusto { margin: 0 0 18px; color: var(--tekst2); }
.kb-prim { grid-column: 1 / -1; margin: 8px 0 0; text-align: center; font-size: 13.5px; color: var(--tekst2); }

/* подвал */
.podval { position: relative; padding: 90px 0 30px; color: rgba(237, 229, 214, .8); }
.podval-setka { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 50px; align-items: start; }
.logo-svet .logo-t i { color: #FBF8F3; }
.logo-svet .logo-t small { color: var(--zoloto-s); }
.pd-lozung { max-width: 340px; margin: 24px 0 22px; font-family: var(--serif); font-style: italic; font-size: 25px; line-height: 1.25; color: #F3E6CF; }
.pd-nav { display: grid; gap: 10px; }
.pd-nav a { width: max-content; text-decoration: none; font-size: 15px; color: rgba(237, 229, 214, .85); border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.pd-nav a:hover { color: var(--zoloto-s); border-color: rgba(216, 185, 133, .5); }
.pd-adres { margin: 0 0 6px; font-family: var(--serif); font-size: 27px; line-height: 1.2; color: #FBF8F3; }
.pd-chasy { margin: 0; font-size: 15px; }
.pd-tel { display: inline-block; margin: 14px 0 12px; font-size: 21px; font-weight: 700; color: var(--zoloto-s); text-decoration: none; }
.pd-gde { display: block; width: max-content; color: var(--zoloto-s); font-weight: 600; text-decoration: none; }
.pd-niz { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(237, 229, 214, .14); font-size: 12.5px; color: rgba(237, 229, 214, .55); }
.pd-niz p { max-width: 780px; margin: 0; }

/* нижняя панель телефона */
.niz-panel { display: none; }

/* подборка */
.podborka { position: fixed; inset: 0; z-index: 90; }
.podborka[hidden], .okno[hidden] { display: none; }
.podborka-fon, .okno-fon { position: absolute; inset: 0; background: rgba(12, 42, 34, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.podborka-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: url("img/fon-blestki-sm.jpg") center / cover, #FBF8F3; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .4); animation: vyezd .45s var(--plavno); }
@keyframes vyezd { from { transform: translateX(100%); } }
.podborka-panel > header { display: flex; justify-content: space-between; align-items: center; padding: 26px 28px 18px; border-bottom: 1px solid var(--liniya); }
.podborka-panel h3 { font-size: 36px; color: var(--izumrud); }
.krestik { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--liniya); border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; }
.podborka-spisok { flex: 1; overflow: auto; margin: 0; padding: 0 28px; list-style: none; }
.podborka-spisok li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--liniya); }
.podborka-spisok img { width: 64px; height: 64px; border-radius: 12px; background: #fff; object-fit: contain; }
.podborka-spisok h4 { margin: 2px 0 4px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.podborka-spisok .cena { font-size: 19px; }
.podborka-pusto { flex: 1; margin: 0; padding: 30px 28px; color: var(--tekst2); }
.podborka-pusto a { color: var(--vino); font-weight: 700; }
.podborka-panel > footer { padding: 20px 28px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--liniya); }
.podborka-itog { margin: 0 0 14px; font-size: 14px; color: var(--tekst2); }
.podborka-itog b { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--izumrud); }

/* окно товара */
.okno { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.okno-panel { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 32px; background: #FBF8F3; animation: vsplyt .4s var(--plavno); }
.okno-panel > .krestik { position: absolute; right: 16px; top: 16px; z-index: 2; }
.okno-foto { background: radial-gradient(circle at 50% 45%, #fff 55%, #F6EEE3); }
.okno-foto img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.okno-tekst { display: flex; flex-direction: column; gap: 12px; padding: 50px 36px 36px; }
.okno-tekst h3 { font-size: 34px; color: var(--izumrud); }
.okno-kat { margin: 0; font-size: 14px; color: var(--tekst2); }
.okno-cena { margin: 8px 0 0; font-family: var(--serif); font-size: 40px; font-weight: 500; color: var(--izumrud); }
.okno-prim { margin: 0 0 10px; font-size: 13px; color: var(--tekst2); }

/* лупа */
.lupa { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 50px 80px; background: rgba(10, 22, 18, .93); }
.lupa figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lupa img { max-width: min(1100px, 100%); max-height: calc(100vh - 150px); border-radius: 16px; object-fit: contain; }
.lupa figcaption { font-size: 14.5px; color: #EDE5D6; }
.lupa-schet { margin-left: 8px; color: rgba(237, 229, 214, .5); }
.lupa-x, .lupa-str { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(237, 229, 214, .3); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #F7F1EA; font-size: 22px; }
.lupa-x { right: 20px; top: 20px; }
.lupa-str { top: 50%; transform: translateY(-50%); }
.lupa-nazad { left: 18px; }
.lupa-vpered { right: 18px; }

/* появление */
.js-anim [data-poyav] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--plavno) var(--zaderzhka, 0ms), transform .9s var(--plavno) var(--zaderzhka, 0ms); }
.js-anim [data-poyav].vidno { opacity: 1; transform: none; }
.bez-anim *, .bez-anim *::before, .bez-anim *::after { animation: none !important; }

/* планшет */
/* запись на процедуру — столбик на главной */
.zp { padding: 120px 0; }
.zp-vetka { position: absolute; left: -50px; bottom: -60px; width: 250px; height: 400px; color: var(--zoloto-s); opacity: .14; transform: rotate(16deg); pointer-events: none; }
.zp-setka { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.zp-tekst { position: sticky; top: 120px; }
.zp-svyaz { display: flex; flex-direction: column; gap: 4px; margin-top: 34px; padding-left: 20px; border-left: 1px solid rgba(216, 185, 133, .45); }
.zp-tel { font-family: var(--serif); font-size: 34px; line-height: 1.1; color: #FBF6EC; text-decoration: none; transition: color .25s; }
.zp-tel:hover { color: var(--zoloto-s); }
.zp-chasy { font-size: 14px; color: rgba(237, 229, 214, .62); }
.zp-stolbik { display: flex; flex-direction: column; gap: 12px; }
.zp-ryad { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; padding: 14px 22px 14px 14px; border: 1px solid rgba(216, 185, 133, .24); border-radius: 28px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); text-align: left; color: inherit; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .35s var(--plavno), background .3s, border-color .3s, box-shadow .3s; }
.zp-ryad:hover { transform: translateX(6px); background: linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border-color: rgba(216, 185, 133, .6); box-shadow: 0 24px 44px -30px rgba(0, 0, 0, .7); }
.zp-foto { display: block; width: 76px; height: 76px; padding: 2px; border-radius: 50%; background: var(--blesk); }
.zp-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zp-ryad-t { display: flex; flex-direction: column; min-width: 0; }
.zp-ryad-t small { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--zoloto-s); }
.zp-ryad-t b { margin-top: 2px; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.08; color: #FBF6EC; }
.zp-ryad-niz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 14px; }
.zp-ot { font-weight: 600; color: rgba(237, 229, 214, .86); }
.zp-vygoda { padding: 3px 11px; border-radius: 999px; background: rgba(216, 185, 133, .16); box-shadow: 0 0 0 1px rgba(216, 185, 133, .35) inset; color: var(--zoloto-s); font-size: 12.5px; font-weight: 700; }
.zp-vygoda.zvezda::before { content: "★ "; }
.zp-strelka { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(216, 185, 133, .45); font-style: normal; font-size: 18px; color: var(--zoloto-s); transition: background .3s, color .3s, transform .35s var(--plavno); }
.zp-ryad:hover .zp-strelka { background: var(--zoloto-s); color: var(--izumrud3); transform: rotate(-45deg); }

/* окно записи */
.okno-zapis { z-index: 96; }
.zp-panel { position: relative; display: flex; flex-direction: column; width: min(1000px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; border-radius: 32px;
  background: url("img/fon-blestki-sm.jpg") center / cover, #FBF8F3; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .55); animation: vsplyt .4s var(--plavno); }
.zp-panel.shag-0, .zp-panel.shag-2, .zp-panel.shag-3 { width: min(640px, 100%); }
.zp-shapka { display: flex; align-items: center; gap: 14px; padding: 22px 22px 18px 30px; border-bottom: 1px solid var(--liniya); }
.zp-shapka-t { flex: 1; min-width: 0; }
.zp-shapka .nad { margin: 0 0 6px; font-size: 12px; }
.zp-shapka h3 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; color: var(--izumrud); }
.zp-nazad { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--liniya); border-radius: 50%; background: #fff; font-size: 19px; color: var(--izumrud); }
.zp-shapka .krestik { flex: none; }
.zp-telo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 30px 28px; }
.zp-niz { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px calc(18px + env(safe-area-inset-bottom)) 30px; border-top: 1px solid var(--liniya); background: rgba(251, 248, 243, .94); }
.zp-niz:empty { display: none; }
.zp-panel.shag-2 .zp-niz, .zp-panel.shag-3 .zp-niz { flex-direction: column; align-items: stretch; gap: 10px; padding-right: 30px; }
.zp-itog { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.3; }
.zp-itog small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); }
.zp-itog b { font-size: 15.5px; color: var(--izumrud); }
.zp-niz > .knopka { flex: none; }
.zp-vvod { margin: 0 0 18px; font-size: 15.5px; color: var(--tekst2); }
.zp-tel-niz { width: 100%; margin: 0; text-align: center; font-size: 14.5px; color: var(--tekst2); }
.zp-tel-niz a { font-weight: 700; color: var(--vino); text-decoration: none; }
.zp-podzag { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zoloto-t); }
.zp-podzag small { margin-left: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tekst2); }

/* столбик внутри окна — светлый */
.zp-stolbik-okno { gap: 10px; }
.zp-stolbik-okno .zp-ryad { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; padding: 10px 16px 10px 10px; border-color: rgba(32, 38, 31, .08); border-radius: 24px; background: rgba(255, 255, 255, .8); color: var(--tekst); }
.zp-stolbik-okno .zp-ryad:hover { border-color: rgba(180, 138, 85, .55); background: #fff; box-shadow: 0 18px 36px -26px rgba(59, 40, 20, .5); transform: translateX(4px); }
.zp-stolbik-okno .zp-foto { width: 62px; height: 62px; }
.zp-stolbik-okno .zp-ryad-t small { color: var(--zoloto-t); }
.zp-stolbik-okno .zp-ryad-t b { font-size: 25px; color: var(--izumrud); }
.zp-stolbik-okno .zp-ot { color: var(--tekst2); }
.zp-stolbik-okno .zp-vygoda { background: rgba(123, 41, 66, .07); box-shadow: 0 0 0 1px rgba(123, 41, 66, .18) inset; color: var(--vino); }
.zp-stolbik-okno .zp-strelka { width: 42px; height: 42px; border-color: rgba(180, 138, 85, .45); color: var(--zoloto-t); }
.zp-stolbik-okno .zp-ryad:hover .zp-strelka { background: var(--izumrud); border-color: var(--izumrud); color: #FBF6EC; }

/* варианты «можно так — а можно выгоднее» */
.zp-varianty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.32fr); gap: 14px; margin-bottom: 32px; }
.zp-varianty.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.zp-varianty.n1 { grid-template-columns: minmax(0, 1fr); }
.zp-variant { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px 18px; border: 1.5px solid rgba(32, 38, 31, .1); border-radius: 26px;
  background: rgba(255, 255, 255, .86); text-align: left; transition: transform .3s var(--plavno), border-color .25s, box-shadow .25s; }
.zp-variant:hover { transform: translateY(-3px); border-color: rgba(180, 138, 85, .6); box-shadow: 0 22px 44px -28px rgba(59, 40, 20, .55); }
.zp-variant[aria-pressed="true"] { border-color: var(--izumrud); box-shadow: 0 0 0 3px rgba(18, 57, 47, .14), 0 22px 44px -28px rgba(18, 57, 47, .6); }
.zpv-nad { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst2); }
.zpv-nazv { font-family: var(--serif); font-size: 25px; line-height: 1.08; color: var(--izumrud); }
.zpv-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 2px 0; font-family: var(--serif); line-height: 1; }
.zpv-cena b { font-size: 36px; font-weight: 500; color: var(--izumrud); }
.zpv-cena b i { font-family: var(--sans); font-size: 14px; font-style: normal; color: var(--tekst2); }
.zpv-cena s { font-family: var(--sans); font-size: 15px; color: var(--tekst2); text-decoration-color: rgba(123, 41, 66, .7); }
.zpv-krupno { font-size: 40px; font-weight: 500; color: var(--vino); }
.zpv-krupno.dlinno { font-size: 25px; line-height: 1.1; }
.zpv-podpis { font-size: 13.5px; line-height: 1.45; color: var(--tekst2); }
.zpv-plyusy { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--liniya); }
.zpv-plyusy span { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.4; }
.zpv-plyusy span::before { content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--zoloto); }
.zpv-prim { font-size: 13px; font-weight: 700; color: var(--vino); }
.zpv-vybor { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--izumrud); }
.zp-variant[aria-pressed="true"] .zpv-vybor { color: var(--vino); }
/* главный вариант — тёмный изумруд, золото, звезда */
.zp-variant.glavnyy { overflow: hidden; border-color: rgba(216, 185, 133, .75); background: radial-gradient(130% 90% at 0% 0%, #24604F, #12392F 58%, #0C2A22); color: #EDE5D6; box-shadow: 0 28px 54px -30px rgba(12, 42, 34, .95); }
.zp-variant.glavnyy::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 240, 210, .16), transparent); transform: skewX(-18deg); pointer-events: none; }
.js-anim .zp-variant.glavnyy::after { animation: blik-kn 5.5s ease-in-out 1s infinite; }
.zp-variant.glavnyy:hover { border-color: var(--zoloto-s); }
.zp-variant.glavnyy[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(216, 185, 133, .5), 0 28px 54px -30px rgba(12, 42, 34, .95); }
.zp-variant.glavnyy .zpv-nad, .zp-variant.glavnyy .zpv-prim, .zp-variant.glavnyy .zpv-vybor { color: var(--zoloto-s); }
.zp-variant.glavnyy .zpv-nazv { color: #FBF6EC; }
.zp-variant.glavnyy .zpv-cena b, .zp-variant.glavnyy .zpv-krupno { background: var(--blesk-svet); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.zp-variant.glavnyy .zpv-cena s, .zp-variant.glavnyy .zpv-podpis { color: rgba(237, 229, 214, .72); }
.zp-variant.glavnyy .zpv-plyusy { border-top-color: rgba(216, 185, 133, .26); }
.zp-variant.glavnyy .zpv-plyusy span::before { background: var(--zoloto-s); }

/* все процедуры и цены — с галочками */
.zp-uslugi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.zp-usluga { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid rgba(32, 38, 31, .08); border-radius: 16px; background: rgba(255, 255, 255, .72); text-align: left; font-size: 14.5px; line-height: 1.35; transition: border-color .2s, background .2s; }
.zp-usluga:hover { border-color: rgba(18, 57, 47, .35); background: #fff; }
.zp-usluga[aria-pressed="true"] { border-color: var(--izumrud); background: #fff; }
.zpu-galka { position: relative; flex: none; width: 22px; height: 22px; border: 1.5px solid rgba(32, 38, 31, .25); border-radius: 7px; transition: background .2s, border-color .2s; }
.zp-usluga[aria-pressed="true"] .zpu-galka { border-color: var(--izumrud); background: var(--izumrud); }
.zp-usluga[aria-pressed="true"] .zpu-galka::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.zpu-nazv { flex: 1; min-width: 0; }
.zpu-nazv small { display: block; margin-top: 1px; font-size: 12px; color: var(--tekst2); }
.zpu-cena { flex: none; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--izumrud); }
.zpu-cena i { font-family: var(--sans); font-size: 12.5px; font-style: normal; color: var(--tekst2); }

/* шаг «телефон» */
.zp-vybor { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(18, 57, 47, .07), rgba(180, 138, 85, .14)); }
.zp-vybor > div { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.zp-vybor small { font-size: 12.5px; color: var(--tekst2); }
.zp-vybor b { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.15; color: var(--izumrud); }
.zp-vybor span { font-size: 13.5px; color: var(--tekst2); }
.zp-izmenit { flex: none; padding: 8px 15px; border: 1px solid rgba(18, 57, 47, .25); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--izumrud); }
.zp-forma { gap: 16px; }
.zp-forma .pole-pol { grid-column: auto; }

/* шаг «заявка у меня» */
.zp-gotovo { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 0 4px; text-align: center; }
.zp-znak { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2B6654, #12392F 70%); color: var(--zoloto-s);
  box-shadow: 0 0 0 6px rgba(216, 185, 133, .28), 0 22px 40px -20px rgba(18, 57, 47, .85); animation: tuk .7s var(--plavno) .1s; }
.zp-znak svg { width: 40px; height: 40px; }
.zp-spasibo { max-width: 440px; margin: 0; font-size: 16.5px; }
.zp-svodka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.zp-svodka li { padding: 12px 16px; border: 1px solid var(--liniya); border-radius: 16px; background: rgba(255, 255, 255, .82); }
.zp-svodka li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.zp-svodka small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst2); }
.zp-svodka b { font-size: 15px; font-weight: 600; color: var(--izumrud); }
.zp-srochno { margin: 0; font-size: 14.5px; color: var(--tekst2); }
.zp-srochno a { font-weight: 700; color: var(--vino); text-decoration: none; }
.zp-kross { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #933A57, #7B2942 55%, #5E1E33); color: #FBF2EC; text-align: left; text-decoration: none;
  box-shadow: 0 18px 36px -20px rgba(123, 41, 66, .85); transition: transform .3s var(--plavno); }
.zp-kross:hover { transform: translateY(-2px); }
.zp-kross svg { flex: none; width: 40px; height: 24px; color: var(--zoloto-s); }
.zp-kross span { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.zp-kross b { font-size: 15.5px; }
.zp-kross small { font-size: 13px; line-height: 1.4; color: rgba(251, 242, 236, .8); }
.zp-kross i { font-size: 20px; font-style: normal; }

/* прайс на странице «Студия»: кнопка записи под группой */
.us-niz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 4px 26px 26px; }
.us-kombo { padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 700; color: var(--vino); text-align: left; }
.us-kombo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* видео с производства */
.vi { padding: 110px 0; overflow: hidden; background: radial-gradient(80% 70% at 18% 45%, rgba(220, 229, 216, .9), rgba(220, 229, 216, 0) 70%); }
.vi-setka { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: center; }
.vi-ekran { position: relative; justify-self: center; width: min(330px, 100%); }
.vi-ramka { position: relative; aspect-ratio: 352 / 640; overflow: hidden; border-radius: 42px; background: #0C2A22;
  box-shadow: 0 0 0 2px rgba(216, 185, 133, .75), 0 0 0 11px rgba(255, 255, 255, .6), 0 0 0 12px rgba(216, 185, 133, .45), 0 60px 100px -46px rgba(18, 57, 47, .8); }
.vi-ramka img, .vi-ramka video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vi-ramka video { z-index: 2; object-fit: contain; background: #0C2A22; }
.vi-ramka.idet img, .vi-ramka.idet .vi-pusk { display: none; }
.vi-pusk { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border: 0; background: linear-gradient(180deg, rgba(12, 42, 34, .05) 35%, rgba(12, 42, 34, .6)); color: #FBF6EC; }
.vi-krug { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); transition: transform .35s var(--plavno), background .3s; }
.vi-krug svg { width: 34px; height: 34px; margin-left: 5px; fill: #FBF6EC; }
.vi-pusk:hover .vi-krug { transform: scale(1.08); background: rgba(216, 185, 133, .6); }
.js-anim .vi-krug { animation: pulsi 2.8s ease-out infinite; }
@keyframes pulsi { 0% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 0 rgba(255, 255, 255, .4); } 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 28px rgba(255, 255, 255, 0); } }
.vi-dlit { padding: 5px 13px; border-radius: 999px; background: rgba(12, 42, 34, .6); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.vi-dlit:empty { display: none; }
.vi-cvetok { right: -36px; top: 54px; }
.vi-punkty { display: grid; gap: 18px; margin: 34px 0; padding: 0; list-style: none; }
.vi-punkty li { display: flex; gap: 16px; }
.vi-znak { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #1F5646, #12392F); color: var(--zoloto-s); box-shadow: 0 10px 20px -12px rgba(18, 57, 47, .8); }
.vi-znak svg { width: 19px; height: 19px; }
.vi-punkty b { display: block; font-size: 17px; color: var(--izumrud); }
.vi-punkty p { margin: 3px 0 0; font-size: 15px; color: var(--tekst2); }
.vi-podpis { margin: 22px 0 0; font-size: 12.5px; color: var(--tekst2); }
.vi-podpis:empty { display: none; }

/* шапка: кнопка «Записаться» рядом с «Забрать подарки» */
.menu-zapis { color: var(--vino); border-color: rgba(123, 41, 66, .35); }
body:not([data-str="index"]) .shapka:not(.skolzit) .menu-zapis { color: #FBF6EC; border-color: rgba(247, 241, 234, .4); background: rgba(255, 255, 255, .08); }

@media (max-width: 1240px) {
  .hero-yarlyk { right: -6px; }
  .shtamp { right: -30px; }
  .hero-tovar { left: -50px; }
}
@media (max-width: 1100px) {
  .korobki, .pk-setka { grid-template-columns: repeat(2, 1fr); }
  .tovary { grid-template-columns: repeat(3, 1fr); }
  .tovary-4 .tovar:nth-child(4) { display: none; }
  .ot-setka { grid-template-columns: 1fr 1fr; }
  .otzyv:first-child { grid-column: 1 / -1; }
  .menu { gap: 18px; }
  .us-setka { grid-template-columns: 1fr; }
  .us-kolonka { display: contents; }
  .us-gruppa { order: var(--n, 0); }
  .podval-setka { grid-template-columns: 1fr 1fr; }
  .pd-brend { grid-column: 1 / -1; }
}
@media (max-width: 1060px) {
  .burger { display: flex; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 10px 24px 24px; background: rgba(250, 245, 238, .98); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .3s, visibility 0s .3s; }
  .menu.otkryto { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
  .menu a:not(.knopka) { padding: 14px 0; border-bottom: 1px solid var(--liniya); font-family: var(--serif); font-size: 25px; font-weight: 500; }
  body:not([data-str="index"]) .shapka:not(.skolzit) .menu a:not(.knopka) { color: var(--izumrud); }
  .menu a:not(.knopka)::after { display: none; }
  .menu a.tut { color: var(--vino); }
  .menu-knopka { margin-top: 18px; }
  .podborka-mini { margin-left: auto; }
}
@media (max-width: 900px) {
  .hero { padding: 104px 0 96px; }
  .hero-setka, .str-hero-setka { grid-template-columns: 1fr; gap: 64px; min-height: 0; }
  .hero-vid { width: min(74%, 360px); }
  .str-hero { padding: 120px 0 90px; }
  .str-hero-vid { width: min(76%, 360px); }
  .shtamp { right: -40px; top: 34px; width: 118px; height: 118px; }
  .shtamp b { font-size: 31px; }
  .shtamp text { font-size: 13px; }
  .hero-tovar { left: -40px; bottom: 44px; max-width: 230px; }
  .hero-tovar img { width: 58px; height: 58px; }
  .hero-tovar b { font-size: 18px; }
  .hero-yarlyk { right: -14px; }
  .shagi { grid-template-columns: 1fr; gap: 26px; }
  .shagi::before { left: 46px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(216, 185, 133, .6) 8%, rgba(216, 185, 133, .6) 92%, transparent); }
  .shag { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; }
  .shag-nomer { margin: 0; }
  .podbor-setka, .gl-setka, .ya-setka, .vo-setka, .za-setka, .lozung-setka, .sk-setka, .gde-setka, .kb-setka, .gp-setka { grid-template-columns: 1fr; gap: 44px; }
  .podbor-ramka, .lozung-venok { display: none; }
  .vo-zag { position: static; }
  .ya-foto { width: min(76%, 340px); justify-self: center; }
  .sk-kollazh { height: 460px; }
  .katalog, .podbor, .greenleaf, .kak, .otzyvy, .ya, .voprosy, .podarki, .pk, .vk, .sk { padding: 88px 0; }
  .uslugi { padding: 88px 0 40px; }
  .zayavka-sek { padding: 120px 0 90px; }
}
/* телефон */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .shapka { margin-bottom: -72px; }
  .shapka-ryad { height: 72px; gap: 10px; width: calc(100% - 28px); }
  .logo-medal { width: 44px; height: 44px; }
  .logo-t i { font-size: 26px; }
  .zag-blok { margin-bottom: 38px; }
  .hero { padding: 92px 0 90px; }
  .hero h1 .h1-1 { font-size: 21px; }
  .hero-niz { gap: 16px; }
  .korobki, .pk-setka { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -24px; padding: 6px 24px 22px; }
  .korobki::-webkit-scrollbar, .pk-setka::-webkit-scrollbar { display: none; }
  .podarok { flex: 0 0 84%; min-height: 470px; scroll-snap-align: center; }
  .pk-karta { flex: 0 0 72%; min-height: 290px; scroll-snap-align: center; }
  .tovary { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tovary-4 .tovar:nth-child(4) { display: flex; }
  .tovar { border-radius: 18px; }
  .tovar-tekst { padding: 12px 12px 14px; }
  .tovar h3 { font-size: 13.5px; }
  .cena { font-size: 22px; }
  .serdce { width: 40px; height: 40px; }
  .kat-panel { flex-direction: column; flex-wrap: nowrap; align-items: stretch; border-radius: 26px; }
  .kat-panel > * { min-width: 0; }
  .kat-razdely { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding: 2px 12px; }
  .kat-razdely::-webkit-scrollbar { display: none; }
  .kat-poisk { width: 100%; }
  .podborka-knopka { display: none; }
  .podbor-banner { padding: 14px 18px 14px 14px; gap: 14px; }
  .pb-ikonka { width: 54px; height: 54px; }
  .pb-ikonka svg { width: 40px; height: 40px; }
  .podbor-banner b { font-size: 23px; }
  .podbor-banner small { font-size: 13px; }
  .kviz { min-height: 0; padding: 26px 20px; border-radius: 26px; }
  .kviz h3 { font-size: 31px; }
  .kviz-sp { grid-template-columns: 1fr; }
  .kviz-otvety { gap: 8px; }
  .kviz-otvet { padding: 14px 14px; font-size: 15px; border-radius: 14px; }
  .cifry { grid-template-columns: 1fr; gap: 10px; }
  .cifra { display: flex; align-items: baseline; gap: 18px; padding: 16px 18px; }
  .cifra b { min-width: 120px; font-size: 42px; }
  .cifra span { margin: 0; }
  .gl-plusy { padding: 32px 24px; border-radius: 26px; }
  .ot-setka { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -24px; padding: 4px 24px 10px; }
  .ot-setka::-webkit-scrollbar { display: none; }
  .otzyv, .otzyv:first-child { flex: 0 0 86%; padding: 26px 22px; scroll-snap-align: center; }
  .otzyv:first-child p { font-size: 22px; }
  .st-fakty, .sk-fakty { flex-wrap: nowrap; width: 100%; gap: 10px; }
  .fakt { flex: 1 1 0; min-width: 0; padding: 14px 16px; border-radius: 18px; }
  .fakt b { font-size: 32px; }
  .fakt span { font-size: 12.5px; }
  .sk-kollazh { height: 380px; gap: 10px; }
  .st-kadr { width: 74vw; }
  .st-kadr:nth-child(even) { width: 62vw; }
  .us-verh { height: 140px; }
  .us-verh h3 { font-size: 29px; left: 20px; }
  .us-spisok { padding: 6px 20px 18px; }
  .us-podarok { margin: 16px 20px 0; }
  .us-spisok li { flex-wrap: wrap; font-size: 14.5px; }
  .us-nazv { flex-basis: 100%; }
  .us-cena { margin-left: auto; }
  .vopros summary { font-size: 22px; padding: 20px 0; }
  .vo-spisok { padding: 4px 20px; border-radius: 24px; }
  .gde-karta iframe { height: 320px; }
  .lozung-foto figcaption { right: 22px; top: 22px; padding: 9px 15px; font-size: 16px; }
  .lozung-p { font-size: 23px; }
  .gp-karta, .kb-blok { padding: 26px 22px; border-radius: 26px; }
  .gp-karta h3, .kb-blok h3 { font-size: 29px; }
  .prizyv-karta { padding: 54px 22px 40px; border-radius: 32px; }
  .prizyv-logo { width: 76px; height: 76px; }
  .za-kartochka { padding: 26px 20px; border-radius: 26px; }
  .forma { grid-template-columns: 1fr; }
  .podkarta { padding: 22px; aspect-ratio: auto; min-height: 210px; }
  .podkarta-imya { font-size: 32px; }
  .podkarta-venok { width: 52px; height: 52px; }
  .okno-panel { grid-template-columns: 1fr; }
  .okno-foto img { max-height: 300px; }
  .okno-tekst { padding: 24px 24px 28px; }
  .lupa { padding: 70px 12px; }
  .lupa-str { top: auto; bottom: 18px; transform: none; }
  .podval-setka { grid-template-columns: 1fr; gap: 34px; }
  .pd-niz { flex-direction: column; }
  .podval { padding-bottom: 110px; }
  .niz-panel { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 8px; padding: 7px; border-radius: 999px;
    background: rgba(251, 248, 243, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(216, 185, 133, .4), 0 16px 40px -14px rgba(0, 0, 0, .35); transition: transform .4s var(--plavno), opacity .3s; }
  .niz-panel .knopka { min-height: 50px; }
  .niz-panel .knopka:first-child { flex: 1; padding: 0 18px; }
  .niz-panel .knopka-kontur { padding: 0 16px; color: var(--vino); }
  .niz-panel .niz-kab { color: var(--zoloto-t); }
  .niz-panel.skryt { transform: translateY(140%); opacity: 0; }
  .hero-tovar { display: none; }
  .hero-yarlyk { left: 0; right: 0; bottom: -26px; width: max-content; max-width: calc(100% + 20px); margin-inline: auto; padding: 12px 20px 12px 14px; font-size: 13px; }
  .hero-yarlyk b { font-size: 21px; }
  .hero-vid .cvetok-1 { left: -30px; width: 64px; height: 64px; }
  .bez-anim .begushka span { font-size: 20px; }
  .bez-anim .begushka span:nth-child(n+4) { display: none; }
}
@media (max-width: 420px) {
  .obertka { width: calc(100% - 36px); }
  .korobki, .ot-setka, .pk-setka { margin-inline: -18px; padding-inline: 18px; }
  h2 { font-size: 40px; }
  .hero h1 { font-size: 52px; }
  .str-hero h1, .zayavka-sek h1 { font-size: 46px; }
  .knopki .knopka { flex: 1 1 100%; }
  .hero-vid { width: 76%; }
  .shtamp { right: -26px; width: 104px; height: 104px; }
  .shtamp b { font-size: 27px; }
  .podarok { flex-basis: 86%; }
  .kanal { height: 44px; padding: 0 16px; }
  .kb-pod { grid-template-columns: 1fr; }
}

/* запись, окно и видео — планшет и телефон */
@media (max-width: 1240px) {
  .menu { gap: 18px; }
}
@media (max-width: 1060px) {
  .menu-zapis { margin-top: 18px; }
  body:not([data-str="index"]) .shapka:not(.skolzit) .menu-zapis { color: var(--vino); border-color: rgba(123, 41, 66, .35); background: rgba(255, 255, 255, .35); }
  .menu-zapis + .menu-knopka { margin-top: 10px; }
}
@media (max-width: 900px) {
  .zp { padding: 90px 0; }
  .zp-setka, .vi-setka { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .zp-tekst { position: static; }
  .vi { padding: 90px 0; }
  /* телефон: заголовок → ролик → пункты */
  .vi-setka { gap: 0; }
  .vi-tekst { display: contents; }
  .vi-tekst > .nad { order: 1; }
  .vi-tekst > h2 { order: 2; }
  .vi-tekst > .zag-tekst { order: 3; }
  .vi-ekran { order: 4; width: min(290px, 78%); margin: 40px 0 8px; }
  .vi-punkty { order: 5; }
  .vi-tekst > .knopki { order: 6; }
  .vi-podpis { order: 7; }
  .zp-varianty, .zp-varianty.n2 { grid-template-columns: minmax(0, 1fr); }
  .zp-variant.glavnyy { order: -1; }
  .zp-uslugi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .zp { padding: 80px 0; }
  .zp-svyaz { margin-top: 26px; }
  .zp-tel { font-size: 29px; }
  .zp-ryad { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 24px; }
  .zp-foto { width: 58px; height: 58px; }
  .zp-ryad-t small { font-size: 12px; letter-spacing: .16em; }
  .zp-ryad-t b { font-size: 23px; }
  .zp-ryad-niz { margin-top: 6px; font-size: 13px; }
  .zp-vygoda { font-size: 12px; padding: 2px 9px; }
  .zp-strelka { width: 38px; height: 38px; font-size: 16px; }
  .zp-ryad:hover { transform: none; }
  /* окно снизу — как лист в телефоне */
  .okno-zapis { align-items: end; padding: 0; }
  .zp-panel, .zp-panel.shag-0, .zp-panel.shag-2, .zp-panel.shag-3 { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 28px 28px 0 0; animation: list-vverh .45s var(--plavno); }
  .zp-panel::before { content: ""; position: absolute; left: 50%; top: 8px; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: rgba(32, 38, 31, .18); }
  .zp-shapka { padding: 20px 14px 14px 20px; gap: 10px; }
  .zp-shapka h3 { font-size: 27px; }
  .zp-nazad { width: 40px; height: 40px; }
  .zp-shapka .krestik { width: 40px; height: 40px; }
  .zp-telo { padding: 18px 16px 22px; }
  .zp-niz { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .zp-panel.shag-2 .zp-niz, .zp-panel.shag-3 .zp-niz { padding-right: 16px; }
  .zp-niz > .knopka { padding: 0 22px; }
  .zp-itog b { font-size: 14px; }
  .zp-stolbik-okno .zp-ryad { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
  .zp-stolbik-okno .zp-foto { width: 52px; height: 52px; }
  .zp-stolbik-okno .zp-ryad-t b { font-size: 21px; }
  .zp-variant { padding: 16px 16px 14px; border-radius: 22px; }
  .zpv-nazv { font-size: 23px; }
  .zpv-cena b { font-size: 32px; }
  .zp-forma .pole-pol { grid-column: 1 / -1; }
  .zp-svodka { grid-template-columns: minmax(0, 1fr); }
  .us-niz { padding: 2px 20px 22px; }
  .vi-cvetok { right: -24px; width: 60px; height: 60px; }
  .niz-panel .niz-zapis { flex: 1; padding: 0 16px; }
  .niz-panel .knopka-vino { flex: none; padding: 0 18px; }
}
@keyframes list-vverh { from { transform: translateY(100%); } }
@media (max-width: 420px) {
  .zp-ryad-t b { font-size: 21px; }
  .zp-strelka { display: none; }
  .zp-ryad { grid-template-columns: 54px minmax(0, 1fr); }
  .zp-stolbik-okno .zp-ryad { grid-template-columns: 50px minmax(0, 1fr); }
  .zp-niz { flex-wrap: wrap; }
  .zp-niz > .knopka { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .zp-panel { animation: none; }
  .vi-krug, .zp-variant.glavnyy::after { animation: none !important; }
}