/* Sendajoy · один файл стилей на весь сайт.
   Дизайн перенесён с eto-povod.online: палитра, антиква в заголовках,
   витрина карточками на фотографиях, тёмный правовой подвал. */

:root{
  --ink:#101526;      /* тёмная база и подвал */
  --paper:#f6f0e7;    /* кремовый текст на тёмном */
  --acid:#d9f65a;     /* кислотный акцент */
  --coral:#ff6d52;    /* коралловый */
  --pink:#c92f62;     /* надзаголовки */
  --pink2:#d83268;    /* акцент в h1 */
  --slate:#20252d;    /* тёмный текст на светлом */
  --muted:#53606b;    /* вторичный текст */
  --line:#cdd3da;
  --tint:#fff2d9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f3f4f5;color:var(--slate);
  font:16px/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}

/* Антиква в заголовках. Для тайского и китайского Georgia не годится —
   подставляем Noto Serif тех же письменностей. */
.serif,h1,h2,.brand,.sample b,.card b,.howto .step b,.note{
  font-family:Georgia,"Noto Serif Thai","Noto Serif SC",serif}
html[lang="th"] body{font-family:"Noto Sans Thai",Arial,sans-serif;line-height:1.85}
html[lang="zh"] body{font-family:"Noto Sans SC",Arial,sans-serif;line-height:1.8}
html[lang="th"] .serif,html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] .card b,
html[lang="th"] .sample b,html[lang="th"] .howto .step b,html[lang="th"] .note{
  font-family:"Noto Serif Thai",Georgia,serif;letter-spacing:0!important;line-height:1.3!important}
html[lang="zh"] .serif,html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] .card b,
html[lang="zh"] .sample b,html[lang="zh"] .howto .step b,html[lang="zh"] .note{
  font-family:"Noto Serif SC",Georgia,serif;letter-spacing:0!important;line-height:1.25!important}

/* ————— шапка ————— */
.nav{height:78px;padding:0 6vw;background:#fff;color:var(--slate);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:30px Georgia,serif;letter-spacing:-.035em;text-decoration:none;color:var(--slate);white-space:nowrap}
.brand i{color:var(--coral);font-style:normal;margin-left:2px}
.nav-right{display:flex;align-items:center;gap:18px}
.nav a{color:var(--slate);font-size:13px;text-decoration:none;font-weight:bold}
/* Выпадашка языков */
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:99px;padding:7px 13px;
  font-size:12px;font-weight:bold;color:var(--slate);background:#fff}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:after{content:'';width:0;height:0;border:4px solid transparent;
  border-top-color:var(--muted);margin-top:3px;transition:transform .18s}
details.lang[open] summary:after{transform:rotate(180deg);margin-top:-3px}
details.lang summary:hover{border-color:var(--slate)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:172px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px #10152626}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  font-size:13px;font-weight:bold;color:var(--slate);text-decoration:none;white-space:nowrap}
.lang-menu a i{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--muted);
  min-width:30px}
.lang-menu a:hover{background:#f3f4f5}
.lang-menu a.on{background:var(--slate);color:#fff}
.lang-menu a.on i{color:#ffffff8c}
@media(max-width:700px){.nav{height:68px;padding:0 5vw}.brand{font-size:24px}
  .nav-right{gap:10px}}
/* На узком экране ссылка «все поводы» не помещается рядом с переключателем
   языков — витрина всё равно ниже по странице. */
@media(max-width:620px){.nav-right>a{display:none}}

.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);font-weight:bold;margin:0}

/* ————— герой на первый экран ————— */
.hero-only{min-height:calc(100vh - 78px);padding:9vh 6vw 11vh;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at 86% 19%,#ff8fb3 0 9%,transparent 9.3%),
    radial-gradient(circle at 78% 77%,#75d0a9 0 7%,transparent 7.3%),
    linear-gradient(125deg,#fff 0%,#aedfff 52%,#d9dde2 100%)}
.hero-only:after{content:'✦';position:absolute;right:3vw;top:8%;
  font:min(36vw,520px)/1 Georgia,serif;color:#ffffff70;transform:rotate(-13deg)}
.hero-only>*{position:relative;z-index:2}
.hero-only .eyebrow{color:#38434e;font-size:12px}
.hero-only h1{max-width:1050px;margin:24px 0 35px;font-weight:400;
  font-size:clamp(58px,8.4vw,124px);line-height:.83;letter-spacing:-.09em;color:var(--slate)}
.hero-only h1 em{color:var(--pink2);font-style:normal}
.hero-only p{max-width:700px;margin:0;color:#303c47;
  font-size:clamp(19px,2vw,28px);line-height:1.38}
.hero-only .hero-price{display:inline-block;align-self:flex-start;margin:30px 0 0;
  padding:11px 18px;background:#ffffffd9;border-radius:999px;
  color:var(--slate);font-size:15px;line-height:1}
.hero-only .hero-price b{color:var(--pink2)}
@media(max-width:700px){
  .hero-only{min-height:calc(100vh - 68px);padding:10vh 6vw}
  .hero-only h1{font-size:clamp(48px,15vw,76px);line-height:.87}
  .hero-only p{font-size:19px}
  .hero-only:after{right:-22vw;top:18%;font-size:80vw}}

/* ————— три готовых примера ————— */
.samples{padding:78px 6vw 6px}
.samples-head{display:flex;align-items:end;justify-content:space-between;gap:28px;
  margin-bottom:30px;flex-wrap:wrap}
.samples-head h2{margin:0;font-weight:400;font-size:clamp(38px,5.4vw,68px);
  line-height:.9;letter-spacing:-.07em;color:var(--slate)}
.samples-head p{margin:0 0 6px;max-width:330px;font-size:15px;line-height:1.5;color:var(--muted)}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sample{position:relative;height:306px;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  color:#fff;text-decoration:none;background:var(--ink);box-shadow:0 10px 30px #273b4d1c;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.sample:hover{transform:translateY(-7px);box-shadow:0 26px 52px #273b4d33}
.sample img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.sample:hover img{transform:scale(1.06)}
.sample:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,#0b1020f2 0%,#0b1020ab 30%,#0b10203d 58%,#0b102000 82%)}
.sample>*{position:relative;z-index:2}
.sample .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#ffd2c6;
  text-shadow:0 1px 6px #0b1020}
.sample b{display:block;margin:10px 0 8px;font-weight:400;font-size:34px;line-height:.95;
  letter-spacing:-.05em;text-shadow:0 2px 14px #0b1020,0 1px 4px #0b1020}
.sample span.txt{font-size:13px;line-height:1.45;color:#e4e8ef;max-width:32ch;
  text-shadow:0 1px 8px #0b1020}
.sample .go{margin-top:16px;text-shadow:0 1px 8px #0b1020;display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:bold;letter-spacing:.02em}
.sample .go i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:#ffffff2b;font-style:normal;transition:background .4s,transform .4s}
.sample:hover .go i{background:var(--pink);transform:translateX(3px)}
@media(max-width:1050px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.samples{padding:56px 5vw 0}.sample-grid{grid-template-columns:1fr;gap:12px}
  .sample{height:240px;padding:18px}.sample b{font-size:29px}}

/* ————— как это работает ————— */
.howto{padding:30px 6vw 4px}
.howto .eyebrow{margin:0 0 22px}
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.howto .step{border-top:1px solid var(--line);padding-top:15px}
.howto .step b{display:block;margin:0 0 9px;font-weight:400;
  font-size:clamp(21px,2.3vw,29px);line-height:1.05;letter-spacing:-.035em;color:var(--slate)}
.howto .step p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
@media(max-width:760px){.howto{padding:26px 5vw 0}.howto-grid{grid-template-columns:1fr;gap:20px}}

/* ————— витрина ————— */
.stage{padding:110px 6vw;background:#fff}
.showcase-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px;margin-bottom:48px}
.showcase-head .eyebrow{grid-column:1/-1}
.showcase-head h2{margin:0;font-weight:400;font-size:clamp(52px,7vw,94px);
  line-height:.85;letter-spacing:-.08em;color:var(--slate)}
.showcase-head>p:last-child{max-width:440px;margin:0 0 5px;font-size:18px;line-height:1.5;color:var(--muted)}
.belt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}

/* карточка повода на фотографии */
.card{position:relative;overflow:hidden;width:100%;height:230px;padding:20px;border:0;
  border-radius:10px;text-align:left;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;text-shadow:0 2px 12px var(--ink),0 1px 3px var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 24%,transparent),#10152640),
             var(--photo) center/cover;
  box-shadow:0 10px 30px #273b4d1c;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-7px);box-shadow:8px 10px 0 #ff8fb3}
.card .tag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:bold;color:#fff}
.card b{font-weight:400;font-size:31px;line-height:.88;letter-spacing:-.06em;color:#fff}
.card .sub{font-size:11px;font-weight:bold;color:#fff;opacity:.92;margin-top:5px;display:block}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  transform:translateX(-120%)}
.card:hover::after{transform:translateX(120%);transition:transform .85s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.card::after{display:none}}
@media(max-width:1050px){.belt{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.stage{padding:78px 5vw}.showcase-head{display:block}
  .showcase-head h2{margin:14px 0 22px}.showcase-head>p:last-child{font-size:16px}
  .belt{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
  .card{height:180px;padding:14px}.card b{font-size:25px}}

/* ————— фраза-перебивка ————— */
.strip-note{margin:0;padding:90px 6vw;background:#d9dde2;color:#26313b;
  font:400 clamp(28px,4vw,48px)/.98 Georgia,serif;letter-spacing:-.06em}
.strip-note em{color:var(--pink);font-style:normal}
@media(max-width:700px){.strip-note{padding:65px 5vw;font-size:32px}}

/* ————— питомцы ————— */
.pets{padding:100px 6vw;color:var(--slate);
  background:linear-gradient(135deg,#fff 0%,#e7f7ef 48%,#dff2ff 100%)}
.pets h2{margin:14px 0 20px;font-weight:400;font-size:clamp(44px,6vw,80px);
  line-height:.85;letter-spacing:-.08em}
.pets h2 em{color:var(--coral);font-style:italic}
.pets>p:not(.eyebrow){max-width:610px;font-size:17px;line-height:1.5;margin:0 0 34px;color:var(--muted)}
.pet-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pet-grid .card{height:220px}
@media(max-width:1100px){.pet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.pets{padding:72px 5vw}
  .pet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pet-grid .card{height:180px}}

/* ————— правовой подвал ————— */
.pv-law{padding:40px 6vw 54px;background:var(--ink);color:var(--paper);
  font:13px/1.6 Arial,Helvetica,sans-serif}
.pv-law p{margin:0 0 10px;max-width:900px}
.pv-law a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  margin-right:20px;display:inline-block}
.pv-law a:hover{color:var(--coral)}
.pv-law .who{opacity:.62;margin-top:16px}
.pv-law .zaglushka{opacity:.62;margin-top:14px;max-width:900px}
html.pv-final .pv-law{display:none}
@media print{.pv-law{display:none}}

/* ═══════════ страница повода ═══════════
   Разметку не трогаем: редактор ищет .hero h1, .hero .ded span, .hero .lead,
   .hero .medal, .film .slots .slot, .duet .slot, .toast .slot, .jokes .joke. */

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
main.occ-page{background:#f3f4f5}
main.occ-page h1{margin:16px 0 18px;font-weight:400;
  font-size:clamp(40px,6.6vw,86px);line-height:.86;letter-spacing:-.075em;color:var(--slate)}
main.occ-page h1 em{font-style:normal;color:var(--pink2)}
main.occ-page h2{margin:0 0 14px;font-weight:400;
  font-size:clamp(30px,4vw,54px);line-height:.92;letter-spacing:-.06em;color:var(--slate)}
main.occ-page section{padding:72px 0}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);
  font-weight:bold;margin:0 0 16px}
.kicker span{color:var(--muted)}
.lead{font-size:19px;line-height:1.5;color:#303c47;max-width:640px}
.sub{color:var(--muted);margin:0 0 26px;max-width:640px}

/* ——— герой-обложка: фотография во весь экран, как в «поводе» ———
   Фон — снимок повода (медальон-img теперь фон). Режим (светлый/тёмный)
   и лёгкое размытие под текстом ставит редактор по яркости кадра. */
main.occ-page .hero{position:relative;min-height:92svh;overflow:hidden;
  display:grid;align-content:end;isolation:isolate;padding:0 0 7vh;background:#0b0f16}
main.occ-page .hero .wrap{position:relative;z-index:2;min-height:0;display:block}
.ded{font-size:14px;color:#405276;margin:0}
.ded span{color:var(--slate);font-weight:bold}
.hero .medal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;z-index:0;pointer-events:none;
  animation:sj-kb 26s ease-out both}
@keyframes sj-kb{from{transform:scale(1.07) translate(.7%,.5%)}to{transform:scale(1)}}
.hero .sj-scrim{position:absolute;inset:0;z-index:1;transition:background .4s}
/* до подбора режима — тёмный скрим, чтобы белый текст был читаем сразу */
.hero .sj-scrim{background:linear-gradient(to top,#07090eec 0%,#07090e99 30%,#07090e33 58%,transparent 90%)}
.hero.sj-dark .sj-scrim{background:linear-gradient(to top,#07090ef2 0%,#07090ec4 26%,#07090e5c 52%,#07090e12 78%,transparent 92%)}
.hero.sj-light .sj-scrim{background:linear-gradient(to top,#fffffff5 0%,#ffffffd6 26%,#ffffff7d 52%,#ffffff21 78%,transparent 92%)}
.hero.sj-hazy.sj-dark .sj-scrim{background:linear-gradient(to top,#06080cfa 0%,#06080ce8 32%,#06080cb0 54%,#06080c5c 76%,transparent 95%)}
.hero.sj-hazy.sj-light .sj-scrim{background:linear-gradient(to top,#fffffffa 0%,#ffffffe8 32%,#ffffffb8 54%,#ffffff5c 76%,transparent 95%)}
.hero .chip{display:inline-block;margin:0 0 14px;padding:6px 13px;border-radius:999px;
  font:bold 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em}
.hero .ded,.hero h1,.hero .lead,.hero .price-hint{position:relative;z-index:2}
.hero h1,.hero .lead{max-width:660px}
.price-hint,.price-tag{font-size:14px;color:#405276}
.price-hint b,.price-tag b{color:var(--slate);font-size:16px}
.hero .price-hint{display:inline-block;margin:24px 0 0;
  padding:11px 18px;background:#ffffffe6;border-radius:999px;line-height:1;color:#405276}
/* цвета текста по режиму */
.hero:not(.sj-light) .chip{background:#fff;color:var(--slate)}
.hero:not(.sj-light) .ded,.hero:not(.sj-light) .lead{color:#eef2f7;text-shadow:0 1px 3px #0000006e}
.hero:not(.sj-light) .ded span{color:#fff}
.hero:not(.sj-light) h1{color:#fff;text-shadow:0 1px 2px #00000047,0 4px 30px #00000052}
.hero:not(.sj-light) h1 em{color:#ffd6df}
.hero.sj-light .chip{background:var(--slate);color:#fff}
.hero.sj-light .ded,.hero.sj-light .lead{color:#2a323b;text-shadow:0 1px 3px #ffffffa6}
.hero.sj-light .ded span{color:var(--slate)}
.hero.sj-light h1{color:#12161c;text-shadow:0 1px 2px #ffffff8c}
.hero.sj-light h1 em{color:var(--pink2)}
@media(prefers-reduced-motion:reduce){.hero .medal{animation:none}}

.film{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
@media(max-width:900px){.slots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.slots{grid-template-columns:1fr}}
.slot{margin:0;background:#f3f4f5;border:1px dashed #b9c2cc;border-radius:10px;
  min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;padding:16px;text-align:center;transition:border-color .25s,background .25s}
.slot:hover{border-color:var(--coral);background:#fff8f4}
.slot.wide{min-height:160px;margin-top:24px;max-width:520px}
.slot .plus{font-size:13px;font-weight:bold;color:var(--coral)}
.slot figcaption{font-size:12.5px;color:var(--muted);line-height:1.45}
.hint{margin-top:14px;font-size:12.5px;color:#8b96a2}
.text{font-size:17px;line-height:1.7;max-width:640px;color:#2b3b4a}

.jokes{background:#d9dde2}
.joke{max-width:640px;margin:0 0 16px;padding:20px 24px;background:#fff;
  border-left:3px solid var(--coral);border-radius:0 10px 10px 0;font-size:16px;line-height:1.6}
.toast{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toast .text{font-size:18px;line-height:1.75}
.end{background:linear-gradient(135deg,#fff 0%,#e7f7ef 48%,#dff2ff 100%)}
.end h2 em{font-style:normal;color:var(--coral)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.btn{display:inline-block;padding:15px 28px;border-radius:99px;background:var(--ink);color:#fff;
  text-decoration:none;font-weight:bold;font-size:15px;border:0;cursor:pointer}
.btn:hover{background:var(--pink)}
.btn.ghost{background:none;color:var(--slate);border:1px solid var(--line)}
.pays{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pay{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 15px;
  font-size:13px;font-weight:bold;color:var(--muted)}

.near{background:#fff;border-top:1px solid var(--line);padding:64px 0}
.near-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.near-row{grid-template-columns:repeat(2,1fr)}}
.near-item{display:block;overflow:hidden;border-radius:10px;text-decoration:none;color:#fff;
  position:relative;box-shadow:0 10px 30px #273b4d1c;transition:transform .3s,box-shadow .3s}
.near-item:hover{transform:translateY(-5px);box-shadow:8px 10px 0 #ff8fb3}
.near-item img{display:block;width:100%;aspect-ratio:700/470;object-fit:cover}
.near-item span{position:absolute;left:0;right:0;bottom:0;padding:14px;
  font:400 21px/1 Georgia,serif;letter-spacing:-.04em;
  text-shadow:0 2px 12px var(--ink);background:linear-gradient(to top,#0b1020cc,#0b102000)}
.all{color:var(--pink);text-decoration:none;font-weight:bold;font-size:14px}
.card b{display:block}
.card .ttl{display:block}

/* ————— заполненный слот и пример ————— */
.slot.full{padding:0;border:0;background:#fff;overflow:hidden;display:block;min-height:0;
  border-radius:10px;box-shadow:0 10px 30px #273b4d1c}
.slot.full img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.slot.full.wide{max-width:640px;margin-top:24px}
.slot.full.wide img{aspect-ratio:10/7}
.slot.full figcaption{padding:12px 15px 15px;font-size:13px;line-height:1.5;
  color:var(--muted);text-align:left}
.ex-chip{position:relative;z-index:1;display:inline-block;align-self:flex-start;margin:0 0 6px;
  padding:6px 13px;border-radius:999px;background:#ffffffd9;
  font-size:10px;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}

/* ————— ролики на главной ————— */
.films .sample{cursor:pointer;border:0;font:inherit;text-align:left;width:100%;padding:22px}
.films .sample-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.films .sample .tag,.films .sample b,.films .sample .txt,.films .sample .go{position:relative;z-index:2}
.films .sample::after{z-index:1}

/* ————— полоса «пока бесплатно» и кнопки ————— */
.pricebar{max-width:1180px;margin:34px auto 0;padding:0 6vw;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:14px;text-align:center}
.pricebar span{display:inline-block;padding:12px 20px;background:#fff;border:1px solid #dbe4ea;
  border-radius:999px;font-size:15px;line-height:1.3;color:#20252d}
.pricebar span b{color:#d83268}
.hero-btn{display:inline-block;padding:14px 26px;border-radius:12px;
  font:bold 16px/1.2 var(--sans,Arial,Helvetica,sans-serif);text-decoration:none;
  background:#ffffffe6;color:#142044;border:1px solid #b9cdd9}
.hero-btn:hover{background:#fff;border-color:#142044}
@media(max-width:700px){.pricebar .hero-btn{width:100%}}

/* ————— приглашения ————— */
.invites{padding:84px 6vw;background:#f7f8f9;color:#20252d}
.invites .eyebrow{color:#c92f62;margin:0 0 10px}
.invites h2{margin:0 0 8px;font:400 clamp(38px,5.4vw,68px)/.9 Georgia,serif;letter-spacing:-.07em}
.invites .sub{max-width:620px;margin:0 0 30px;font-size:16px;line-height:1.5;color:#53606b}
.invite-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.invite-grid .card{width:100%;height:200px;padding:18px;border-radius:10px;color:#fff;
  text-decoration:none;text-shadow:0 2px 12px #101526,0 1px 3px #101526;
  box-shadow:0 10px 30px #273b4d1c;transition:transform .2s,box-shadow .2s}
.invite-grid .card:hover{transform:translateY(-7px);box-shadow:8px 10px 0 #ff8fb3}
.invite-grid .card .tag,.invite-grid .card b{color:#fff;text-shadow:0 2px 12px #101526,0 1px 3px #101526}
.invite-grid .card b{font-size:26px}
.invite-grid .card .tag{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:1050px){.invite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.invites{padding:64px 5vw}.invite-grid{gap:10px}
  .invite-grid .card{height:160px;padding:14px}.invite-grid .card b{font-size:20px}}

/* ————— большой готовый пример ————— */
.primer{padding:10px 6vw 64px}
.primer-card{position:relative;display:block;max-width:1120px;margin:0 auto;height:380px;
  border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;background:#101526;
  box-shadow:0 14px 40px #273b4d1f}
.primer-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.primer-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,21,38,.88) 0%,rgba(16,21,38,.62) 46%,rgba(16,21,38,.12) 100%)}
.primer-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:34px;max-width:520px}
.primer-in .eyebrow{color:#ff8fb3;margin-bottom:10px}
.primer-in b{font:400 clamp(34px,4.4vw,54px)/.95 Georgia,serif;letter-spacing:-.04em;margin-bottom:10px}
.primer-in .txt{font-size:15px;line-height:1.5;opacity:.92;margin-bottom:14px;max-width:44ch}
.primer-in .go{font-size:14px;font-weight:700}
@media(max-width:700px){.primer{padding:6px 5vw 44px}.primer-card{height:330px}
  .primer-in{padding:22px;max-width:none}
  .primer-card::after{background:linear-gradient(180deg,rgba(16,21,38,.15) 20%,rgba(16,21,38,.85) 100%)}}

/* ————— окно с роликом ————— */
.film-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,18,.92);padding:20px}
.film-modal.on{display:flex}
.film-modal video{width:min(360px,86vw);max-height:86vh;aspect-ratio:9/16;border-radius:14px;background:#000}
.film-close{position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;border:0;
  cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1}
.film-close:hover{background:rgba(255,255,255,.26)}

/* ————— список «что будет» на странице приглашения ————— */
.plan{margin:0 0 26px;padding:0;list-style:none;max-width:640px}
.plan li{position:relative;padding:0 0 0 22px;margin:0 0 10px;font-size:17px;line-height:1.5;color:#3a4450}
.plan li:before{content:'—';position:absolute;left:0;color:#c92f62}

/* ————— страница «сделаем на заказ» ————— */
.order{max-width:1120px;margin:0 auto;padding:0 6vw 80px}
.order h1{margin:56px 0 18px;font:400 clamp(38px,5.2vw,68px)/.95 Georgia,serif;letter-spacing:-.05em;color:#20252d}
.order h2{margin:56px 0 18px;font:400 clamp(28px,3.4vw,44px)/1 Georgia,serif;letter-spacing:-.04em;color:#20252d}
.order .lead{max-width:70ch;font-size:17px;line-height:1.6;color:#3a4450}
.order .pricebar{justify-content:flex-start;margin-left:0;padding:0}
.ostep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ostep{border-top:1px solid #cdd3da;padding-top:14px}
.ostep .n{display:inline-block;margin-bottom:8px;color:#c92f62;font-weight:bold;font-size:12px}
.ostep b{display:block;margin:0 0 8px;font:400 21px/1.1 Georgia,serif;color:#20252d}
.ostep p{margin:0;font-size:15px;line-height:1.55;color:#53606b}
.onote{max-width:70ch;margin:22px 0 0;font-size:16px;line-height:1.6;color:#3a4450}
.badges{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 30px}
.badge{padding:14px 18px;border:1px solid #dbe4ea;border-radius:12px;background:#fff}
.badge b{display:block;font-size:17px;color:#d83268}
.badge span{font-size:13px;color:#53606b}
#orderForm{max-width:640px}
#orderForm label{display:block;margin:0 0 16px;font-size:14px;color:#3a4450}
#orderForm input,#orderForm textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid #cdd3da;border-radius:10px;font:16px/1.4 inherit;background:#fff;color:#20252d}
#orderForm fieldset{margin:0 0 16px;padding:0;border:0}
#orderForm legend{padding:0;font-size:14px;color:#3a4450}
#orderForm .pick{margin:8px 0 0;font-size:15px}
#orderForm .pick input{display:inline;width:auto;margin-right:8px}
#orderForm .hint{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#7b8794}
.qa{border-top:1px solid #cdd3da;padding:14px 0}
.qa summary{cursor:pointer;font:400 20px/1.2 Georgia,serif;color:#20252d}
.qa p{margin:10px 0 0;font-size:15px;line-height:1.6;color:#53606b;max-width:70ch}
@media(max-width:900px){.ostep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ostep-grid{grid-template-columns:1fr}}

/* ————— два окна с примерами на странице заказа ————— */
.look-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:26px}
.look{margin:0}
.look-screen{height:420px;border-radius:12px;overflow:hidden;border:1px solid #dbe4ea;background:#fff;
  box-shadow:0 10px 30px #273b4d14}
.look-screen iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0}
.look figcaption{margin-top:10px;font-size:14px;color:#53606b}
@media(max-width:800px){.look-grid{grid-template-columns:1fr}.look-screen{height:340px}}

/* Герой после переработки «повода»: заголовок в три строки,
   кегль меньше прежнего, межстрочное — единица. */
.hero-only h1{font-size:clamp(34px,5.7vw,80px);line-height:1;letter-spacing:-.05em;margin:18px 0}

/* ————— веер кадров —————
   Телефон — прежняя лента карточек в столбик, десктоп — веер, как
   на странице «повода». Углы и шаг считает скрипт: веер должен
   сходиться и при пяти кадрах, и при двух оставшихся. */
@media(min-width:901px){
  .film .slots{display:block;position:relative;height:min(48vh,420px);
    perspective:1500px;margin:44px 0 26px;overflow:visible}
  .film .slots .slot{position:absolute;left:50%;bottom:24px;
    width:var(--sj-card,220px);aspect-ratio:3/4;min-height:0;padding:14px;
    margin-left:calc(var(--sj-card,220px) / -2);
    border:5px solid #fff;border-radius:14px;background:#f3f4f5;overflow:hidden;
    transform-origin:50% 155%;
    transform:translateX(calc(var(--i,0) * var(--sj-step,132px)))
              rotate(calc(var(--i,0) * var(--sj-tilt,7deg)))
              translateY(calc(var(--a,0) * var(--sj-rise,16px)));
    box-shadow:0 18px 40px #17151220;
    transition:transform .55s cubic-bezier(.2,.7,.3,1),box-shadow .55s,
               border-color .25s,background .25s;
    z-index:calc(4 + var(--i,0))}
  .film .slots .slot:hover,.film .slots .slot:focus-visible{z-index:30;
    transform:translateX(calc(var(--i,0) * var(--sj-step,132px)))
              rotate(0deg) translateY(-58px) scale(1.09);
    box-shadow:0 34px 70px #17151230;border-color:#fff}
  /* Пример: кадры уже стоят, подпись живёт поверх нижнего края. */
  .film .slots .slot.full{padding:0;border:5px solid #fff;background:#fff}
  .film .slots .slot.full img{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover}
  /* Подпись к кадру видна на наведении: на соседних карточках она
     всё равно уходит под верхнюю, а поднятая карточка показывает её
     целиком. */
  .film .slots .slot.full figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
    padding:26px 12px 10px;color:#fff;font-size:12px;line-height:1.35;
    background:linear-gradient(180deg,#0b102000,#0b1020cc);
    opacity:0;transition:opacity .35s}
  .film .slots .slot.full:hover figcaption,
  .film .slots .slot.full:focus-visible figcaption{opacity:1}

  /* Пустое место: белая карточка с пунктиром внутри, как в «поводе». */
  .film .slots .slot:not(.full){background:#fff;border-color:#fff;
    display:grid;place-content:center;gap:8px}
  .film .slots .slot:not(.full):before{content:'';position:absolute;inset:9px;
    border:2px dashed #c7ced6;border-radius:9px;transition:border-color .3s;
    pointer-events:none}
  .film .slots .slot:not(.full):hover:before{border-color:var(--coral)}
  .film .slots .slot:not(.full) .plus{position:relative}
  .film .slots .slot figcaption{max-width:15ch;margin:0 auto;font-size:11.5px;
    line-height:1.35}
  .film .hint{position:relative;z-index:31}
}
@media(prefers-reduced-motion:reduce){
  .film .slots .slot{transition:none!important}
}