/* Okenova Beauty: знак «глаз и бровь» одной винной линией, высокая антиква логотипа, мятая бумага прайс-листа, розовая лента и мятная бирка подарочков. Playfair Display — заголовки, Montserrat — как в их прайсе. */
@font-face { font-family: 'Playfair Display'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(/static/fonts/playfair-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(/static/fonts/playfair-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Playfair Display'; font-weight: 400 700; font-style: italic; font-display: swap; src: url(/static/fonts/playfair-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-weight: 400 700; font-style: italic; font-display: swap; src: url(/static/fonts/playfair-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Montserrat'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(/static/fonts/montserrat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(/static/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

:root { --night: #4A1729; --night-2: #5B1E34; --olive: #5B1E34; --olive-h: #73304A; --gold: #E7A6B5; --gold-h: #EFBCC7; --gold-ink: #8E3352; --wine: #5B1E34; --blush: #E7A6B5; --mint: #CFE6DA;
  --mist: #F3EFE9; --steam: #FBF9F6; --ink: #1D1819; --ink-2: #4E4447; --muted: #7A6D70; --line: #E3DAD2; --on-night: #FAF1EE; --on-night-2: #D9BFC6; --line-night: rgba(231,166,181,.3);
  --display: "Playfair Display", Georgia, serif; --caps: "Montserrat", "Golos Text", sans-serif; --r: 2px; --r-s: 2px;
  /* мятая бумага, как у их прайс-листа: несколько мягких складок поверх молочного */
  --paper: linear-gradient(172deg, transparent 0 38%, rgba(120,100,90,.035) 40%, rgba(255,255,255,.5) 41%, transparent 44%),
           radial-gradient(60% 50% at 20% 20%, rgba(255,255,255,.75), transparent 70%), radial-gradient(50% 60% at 85% 80%, rgba(120,100,90,.06), transparent 70%), #F3EFE9; }
body { font-family: var(--caps); font-weight: 400; }
h1, h2 { font-weight: 400; letter-spacing: -.01em; line-height: 1.06; } h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h1 em, h2 em { font-style: italic; color: var(--wine); }
.eyebrow { font: 500 11px/1.2 var(--caps); letter-spacing: .34em; color: var(--gold-ink); }
.top { background: rgba(243,239,233,.92); color: var(--ink); border-bottom: 1px solid var(--line); } .brand-t b { font: 400 21px/1 var(--display); letter-spacing: .1em; color: var(--wine); transform: scaleX(.86); transform-origin: left; display: inline-block; }
.brand-t small { color: var(--muted); font: 500 10px/1.6 var(--caps); letter-spacing: .2em; text-transform: uppercase; } .menu a { color: var(--ink-2); font: 500 12px var(--caps); letter-spacing: .14em; text-transform: uppercase; } .menu a:hover { color: var(--wine); }
.share-btn { border-color: var(--line); color: var(--ink); border-radius: 2px; } .share-btn:hover { border-color: var(--wine); color: var(--wine); }
.btn { border-radius: 2px; font: 600 12.5px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; } .btn-gold { background: var(--wine); color: var(--on-night); } .btn-gold:hover { background: var(--olive-h); }
.btn-line { border-color: var(--wine); color: var(--wine); } .btn-line:hover { background: var(--wine); color: var(--on-night); } .pill, .for li, .float, .float .btn { border-radius: 2px; }

/* первый экран: бумага, бровь-линия через весь экран, арка-зеркало, овал и бирка с лентой */
.hero { background: var(--paper); color: var(--ink); padding: clamp(36px, 6vw, 80px) 0 clamp(60px, 7vw, 100px); } .hero h1 { color: var(--ink); } .hero .lead { color: var(--ink-2); max-width: 42ch; font-weight: 400; }
.ok-line { position: absolute; inset: 6% 0 auto; width: 100%; height: clamp(140px, 22vw, 300px); z-index: 0; pointer-events: none; }
.ok-line path { fill: none; stroke: var(--wine); stroke-width: 1.300; opacity: .35; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ok-draw 2.600s .3s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ok-line path { animation: none; stroke-dashoffset: 0; } }
.hero-g { position: relative; z-index: 1; }
.ok-word { display: grid; justify-items: start; margin: 0 0 30px; color: var(--wine); line-height: 1; } .ok-word svg { width: 64px; height: auto; margin: 0 0 10px -4px; }
.ok-word b { font: 400 clamp(2.4rem, 4.2vw, 3.4rem)/.9 var(--display); letter-spacing: .04em; transform: scaleX(.78); transform-origin: left; } .ok-word span { font: 500 10.5px/1 var(--caps); letter-spacing: .78em; text-transform: uppercase; margin: 10px 0 0 .3em; }
.btn-ghost-d { color: var(--ink); border-color: rgba(29,24,25,.32); } .btn-ghost-d:hover { border-color: var(--wine); color: var(--wine); }
.status { background: rgba(255,255,255,.66); border-color: var(--line); color: var(--ink); border-radius: 2px; backdrop-filter: none; } .st-dot { background: var(--muted); } .status.on .st-dot { background: #3BAF6A; box-shadow: 0 0 0 4px rgba(59,175,106,.2); }
.st-s { font: 400 1.1rem/1 var(--display); } .status.on .st-s { color: var(--ink); } .st-k { color: var(--muted); } .rating { color: var(--ink-2); } .rating b { color: var(--ink); } .rating .star { color: var(--wine); fill: var(--wine); }
.ok-stage { position: relative; height: clamp(440px, 46vw, 600px); }
.ok-stage figure { position: absolute; margin: 0; overflow: hidden; background: #fff; }
/* арка — как их зеркало с тёплой подсветкой */
.ok-arch { right: 4%; top: 0; width: 58%; height: 100%; border-radius: 999px 999px 2px 2px; box-shadow: 0 0 0 10px #FFF8F0, 0 0 0 11px rgba(91,30,52,.25), 0 0 60px 18px rgba(255,214,170,.55), 0 40px 70px rgba(74,23,41,.22); }
.ok-arch .silk { object-position: 50% 20%; }
.ok-oval { left: 0; bottom: 6%; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 24px 50px rgba(74,23,41,.24); z-index: 2; } .ok-oval .silk { object-position: 50% 50%; }
/* бирка подарочка: мятная карточка на розовой ленте */
.ok-tag { position: absolute; left: 30%; top: 4%; z-index: 3; margin: 0; width: 118px; padding: 34px 10px 18px; background: var(--mint); color: var(--wine); text-align: center; display: grid; gap: 2px; rotate: -8deg; border-radius: 4px;
  box-shadow: 0 18px 30px rgba(74,23,41,.18); clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.ok-tag::before { content: ""; position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.500px rgba(91,30,52,.3); }
.ok-tag b { font: 400 21px/1 var(--display); font-style: italic; } .ok-tag i { font: 500 8.5px/1 var(--caps); letter-spacing: .5em; text-transform: uppercase; font-style: normal; margin-left: .5em; }
.ok-ribbon { position: absolute; left: 50%; top: -46px; width: 3px; height: 62px; margin-left: -1.500px; background: var(--blush); }
.ok-ribbon::before, .ok-ribbon::after { content: ""; position: absolute; top: 4px; width: 26px; height: 15px; border: 3px solid var(--blush); border-radius: 50%; } .ok-ribbon::before { right: 1px; rotate: 20deg; } .ok-ribbon::after { left: 1px; rotate: -20deg; }

.facts { background: var(--steam); } .facts .i { color: var(--wine); } .facts b { font: 400 1.1rem var(--display); }
.prog { border-radius: 2px; } .prog-pic h3 { font: 400 clamp(1.55rem, 2.2vw, 1.95rem)/1.1 var(--display); } .prog-k { font-family: var(--caps); letter-spacing: .24em; font-size: 10.5px; } .prog-pic { aspect-ratio: 4 / 3.800; } .prog-pic .silk { object-position: 50% 35%; }
.prog-pic::after { background: linear-gradient(0deg, rgba(74,23,41,.92) 0%, rgba(74,23,41,.45) 44%, rgba(74,23,41,0) 78%); }
.for li { background: transparent; border-color: rgba(91,30,52,.35); font: 500 11.5px var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* «как проходит» — последовательность, но вместо номеров тонкая дуга-бровь */
.ritual { background: radial-gradient(70% 100% at 0% 0%, #6B2A40 0%, var(--night) 72%); } .ritual .sec-note { color: var(--on-night-2); font-style: italic; max-width: 52ch; font-family: var(--display); font-size: 1.1rem; }
.rit li::before { content: ""; width: 44px; height: 12px; margin: 2px 0 8px; border-top: 1.500px solid var(--blush); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .rit b { font: 400 1.75rem/1.1 var(--display); font-style: italic; color: var(--on-night); } .rit span { color: var(--on-night-2); }
/* до и после */
.ok-ba { background: var(--steam); } .ok-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); }
.ok-pair { margin: 0; display: grid; gap: 6px; } .ok-pair div { position: relative; overflow: hidden; aspect-ratio: 2.400 / 1; background: #eee; } .ok-pair .silk { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ok-pair span { position: absolute; left: 12px; top: 10px; padding: 5px 10px 6px; background: rgba(251,249,246,.92); color: var(--wine); font: 400 15px/1 var(--display); font-style: italic; }
.ok-pair div:last-child span { background: var(--wine); color: var(--on-night); }
/* студия и подарочек */
.ok-gift { background: var(--paper); border-bottom: 1px solid var(--line); } .ok-gift-g { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.ok-mirror { margin: 18px; overflow: hidden; aspect-ratio: 3 / 4.300; border-radius: 999px 999px 2px 2px; box-shadow: 0 0 0 10px #FFF8F0, 0 0 0 11px rgba(91,30,52,.22), 0 0 70px 20px rgba(255,214,170,.5); }
.ok-gift .sec-note { font-size: 1.05rem; } .ok-gift-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .ok-gift-pics figure { margin: 0; overflow: hidden; aspect-ratio: 1; border: 7px solid #fff; box-shadow: 0 16px 34px rgba(74,23,41,.14); }
.ok-gift-pics figure:nth-child(2) { translate: 0 20px; rotate: 2deg; } .ok-gift-pics figure:first-child { rotate: -2deg; }
.ok-cert { margin: 48px 0 0; display: grid; gap: 4px; padding: 18px 22px; background: var(--mint); color: var(--wine); max-width: 440px; border-left: 3px solid var(--blush); } .ok-cert b { font: 400 1.35rem/1.15 var(--display); font-style: italic; } .ok-cert span { font-size: 14px; color: #4B3A3F; }
.works-s { background: var(--steam); border: 0; } .works { gap: 16px; } .works li { border-radius: 2px; } .works li:nth-child(3n+2) { border-radius: 999px 999px 2px 2px; }
/* прайс — как их бумажный лист */
.sec-price { background: var(--paper); } .plist { background: rgba(255,255,255,.55); padding: clamp(16px, 3vw, 36px); box-shadow: 0 1px 0 var(--line), 0 30px 60px rgba(74,23,41,.08); }
.cat h3 { font: 400 1.6rem/1.1 var(--display); font-style: italic; color: var(--wine); border-bottom-color: rgba(91,30,52,.3); } .mn, .addr, .job h3 { font-family: var(--display); } .m { border-radius: 2px; }
.m-photo.mono { background: var(--mint); color: var(--wine); font: 400 44px/1 var(--display); font-style: italic; }
.sec-dark { background: radial-gradient(70% 90% at 100% 0%, #6B2A40, var(--night) 70%); } .sec-dark h2 { color: var(--on-night); } .sec-dark .q { background: rgba(255,255,255,.04); border-radius: 2px; } .q blockquote { color: #FBEFEF; font-family: var(--display); font-size: 1.08rem; line-height: 1.5; } .qmark { fill: var(--blush); }
.card, .job, .qr-card, .sheet, .f input, .f select, .day, .slot { border-radius: 2px; } .pay-steps li::before { font: 400 18px/1 var(--display); color: var(--wine); } .sheet h2 { font-size: 1.8rem; }
.foot-word { padding-top: 40px; font: 400 clamp(4rem, 17vw, 15rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: rgba(250,241,238,.08); white-space: nowrap; transform: scaleX(.8); }
.foot b { font: 400 19px var(--display); letter-spacing: .06em; color: var(--on-night); } .float { background: rgba(74,23,41,.97); } .float .btn-gold { background: var(--blush); color: var(--night); }
@media (max-width: 960px) { .ok-stage { order: -1; height: clamp(360px, 92vw, 520px); } .ok-gift-g { grid-template-columns: 1fr; } .ok-mirror { max-width: 380px; } .ok-word { margin-bottom: 18px; } .ok-word svg { width: 50px; } }
@media (max-width: 700px) { .ok-stage { height: 80vw; max-height: 380px; } .ok-arch { width: 52%; right: 6%; } .ok-oval { width: 36%; bottom: 2%; } .ok-word { display: none; } .ok-mirror { max-width: 290px; margin: 18px auto; } .hero h1 { font-size: 2.6rem; } .ok-pairs { grid-template-columns: 1fr; } .ok-tag { width: 92px; padding: 28px 8px 14px; left: 26%; } .ok-tag b { font-size: 17px; } .ok-gift-pics { gap: 14px; } .works { gap: 10px; } .ok-oval { border-width: 6px; } }
@media (max-width: 1200px) { .brand-t small { display: none; } .menu { gap: 18px; } .menu a { letter-spacing: .08em; font-size: 12px; } .top-in { gap: 14px; } }