/* Демо «Синица», цветочный магазин (21.10.2026). Референс: flowerbx.com (витрина букетов на
   одинаковом фоне, цена на карточке). От себя: фото букета до отправки и окна доставки.
   Гамма «кобальт + холодный белый», не бежевый. Формы: кнопки и фильтры - таблетки,
   всё остальное - 16px. Акцент один: кобальт */
:root{--bg:#F5F6F7;--bg2:#ECEEF1;--card:#FFFFFF;--ink:#14171C;--muted:#5A606B;--line:rgba(20,23,28,.12);
  --blue:#2346C8;--blue-ink:#FFFFFF;--blue-soft:rgba(35,70,200,.08);--r:16px}
@media (prefers-color-scheme:dark){:root{--bg:#0F1216;--bg2:#161A20;--card:#1B2027;--ink:#ECEEF1;--muted:#A2A9B4;
  --line:rgba(236,238,241,.13);--blue:#6E8CFF;--blue-ink:#0B1030;--blue-soft:rgba(110,140,255,.13)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Commissioner,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(30px,4vw,46px)}
.demo{background:var(--blue);color:var(--blue-ink);font-size:13.5px;text-align:center;padding:8px 16px}
.demo a{color:var(--blue-ink);font-weight:600}

.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:21px;text-decoration:none;letter-spacing:-.02em}
.logo i{color:var(--blue);font-size:26px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;color:var(--muted);font-size:15.5px;transition:color .2s}
.nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font:600 16px/1 Commissioner,sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,color .2s,box-shadow .25s}
.btn:active{transform:scale(.98)}
.btn--sm{padding:10px 18px;font-size:14.5px}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--blue{background:var(--blue);color:var(--blue-ink)}
.btn--blue:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px var(--blue)}
.btn--line{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn--line:hover{background:var(--ink);color:var(--bg)}
.btn--wide{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* первый экран: слова слева, букет справа на всю высоту */
.hero{padding:40px 0 56px}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero__txt{display:flex;flex-direction:column;gap:24px;animation:up .9s .1s cubic-bezier(.16,1,.3,1) both}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(42px,5vw,72px);max-width:11ch}
.hero h1 span{color:var(--blue)}
.hero p{font-size:19px;color:var(--muted);max-width:32ch}
.hero__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;height:min(718px,calc(100dvh - 180px));width:auto;justify-self:end}
.hero__img img{width:100%;height:100%;object-fit:cover;animation:kb 14s cubic-bezier(.16,1,.3,1) both}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}

.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{display:flex;gap:14px;padding:28px 28px 28px 0}
.fact+.fact{padding-left:28px;border-left:1px solid var(--line)}
.fact i{font-size:28px;color:var(--blue);flex:none;margin-top:2px}
.fact p{font-size:15.5px;color:var(--muted)}
.fact b{color:var(--ink);font-weight:600}

.sec{padding:100px 0}

/* каталог */
.kat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.filtr{display:flex;flex-wrap:wrap;gap:8px}
.filtr button{font:500 15px/1 Commissioner,sans-serif;padding:11px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.filtr button:hover{border-color:var(--ink)}
.filtr button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.kat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tov{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;border:1.5px solid transparent;transition:border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.tov[hidden]{display:none}
.tov:hover{transform:translateY(-3px)}
.tov.on{border-color:var(--blue)}
.tov img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--bg2)}
.tov__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.tov h3{font-size:22px}
.tov p{color:var(--muted);font-size:15px}
.tov__f{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px}
.tov__f b{font-size:20px;font-variant-numeric:tabular-nums}

/* оформление доставки */
.zakaz{padding:100px 0;background:var(--bg2)}
.zakaz__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.zakaz__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;position:sticky;top:96px}
.zakaz__img img{width:100%;height:100%;object-fit:cover}
.forma{background:var(--card);border-radius:var(--r);padding:32px;display:grid;gap:24px}
.forma h2{font-size:clamp(28px,3vw,38px)}
.vybran{background:var(--blue-soft);border-radius:var(--r);padding:14px 16px;color:var(--muted);font-size:15.5px;display:flex;gap:14px;align-items:center}
.vybran.est{color:var(--ink)}
.vybran img{width:56px;height:56px;border-radius:var(--r);object-fit:cover}
.vybran b{display:block;font-size:17px}
fieldset{border:0;display:grid;gap:10px}
legend{font-weight:600;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);font-size:15px;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.chips input:disabled+span{opacity:.38;text-decoration:line-through;cursor:not-allowed}
.okna{margin-top:4px}
.pusto,.samovyvoz{color:var(--muted);font-size:15px}
.pole[hidden],.samovyvoz[hidden]{display:none}
.pole{display:grid;gap:8px}
.pole label{font-weight:500;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.pole label span{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.pole input,.pole textarea{font:16px Commissioner,sans-serif;padding:14px 16px;border-radius:var(--r);border:1.5px solid color-mix(in srgb,var(--ink) 50%,transparent);background:var(--bg);color:var(--ink);resize:vertical}
.pole input:focus,.pole textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.err{color:#C0362C;font-size:14.5px;font-weight:500}
@media (prefers-color-scheme:dark){.err{color:#FF8A80}}
.itog{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:18px}
.itog span{color:var(--muted)}
.itog b{font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ok{border:1.5px solid var(--blue);border-radius:var(--r);padding:16px;font-size:15.5px}

/* подписка: широкая полоса, цены справа */
.podp{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;background:var(--blue);color:var(--blue-ink);border-radius:var(--r);padding:56px}
.podp p{opacity:.85;margin-top:14px;max-width:44ch}
.podp__ceny{display:grid;gap:12px}
.podp__ceny div{background:color-mix(in srgb,var(--blue-ink) 12%,transparent);border-radius:var(--r);padding:20px 24px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.podp__ceny b{font-size:30px;letter-spacing:-.02em}

.sec--q{padding-top:0}
.quotes{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.q p{font-size:clamp(19px,1.8vw,23px);line-height:1.4;letter-spacing:-.01em}
.q:first-child p{font-size:clamp(22px,2.3vw,30px)}
.q cite{display:block;margin-top:16px;font-style:normal;color:var(--muted);font-size:15px}

#voprosy h2{margin-bottom:24px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:500;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-size:24px;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:12px;max-width:62ch}

.foot{padding:40px 0 60px;color:var(--muted);font-size:14.5px;border-top:1px solid var(--line)}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero__img img,.hero__txt{animation:none}.btn,.tov{transition:none}.btn--blue:hover,.tov:hover{transform:none}html{scroll-behavior:auto}}

@media (max-width:1000px){
  .nav{display:none}
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__img{aspect-ratio:4/5;height:min(70vh,calc((100vw - 32px)*1.25));width:auto;justify-self:center;order:-1}
  .kat{grid-template-columns:1fr 1fr}
  .zakaz__grid{grid-template-columns:1fr}
  .zakaz__img{position:static}
  .podp{grid-template-columns:1fr;padding:40px 32px}
}
@media (max-width:767px){
  .wrap{padding:0 16px}
  .top__in{gap:12px}
  .hero{padding:20px 0 40px}
  .sec,.zakaz{padding:72px 0}
  .facts__grid{grid-template-columns:1fr}
  .fact,.fact+.fact{padding:18px 0;border-left:0}
  .fact+.fact{border-top:1px solid var(--line)}
  .kat{grid-template-columns:1fr 1fr;gap:12px}
  .tov__b{padding:14px 14px 16px}
  .tov h3{font-size:18px}
  .tov p{font-size:13.5px}
  .tov__f{flex-direction:column;align-items:stretch;gap:10px}
  .tov__f b{font-size:17px}
  .forma{padding:22px 18px}
  .podp{padding:30px 22px}
  .quotes{grid-template-columns:1fr;gap:30px}
}