/* ============================================================
   PIVOŇKA — květinářství & floral studio · Praha, Malá Strana
   Light pastel editorial system · liquid glass · smooth ease
   Brand: vlastní build (portfolio). Fotky květin: flowerbx.com
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg:        #fdf6f4;
  --bg-2:      #fbeef0;
  --bg-3:      #f6e2e6;
  --cream:     #fffaf7;

  --ink:       #3a2a30;
  --ink-soft:  #7c636b;
  --ink-faint: #a9939b;

  --line:      rgba(58, 42, 48, .12);
  --line-soft: rgba(58, 42, 48, .065);

  --rose:      #d27e96;   /* primary accent text */
  --rose-deep: #bd5d7b;   /* stronger accent */
  --rose-ink:  #a8466a;   /* deepest, for small text on light */
  --rose-soft: #f0bccb;
  --blush:     #f7d9e0;
  --sage:      #9bb189;
  --sage-deep: #6f8a5f;
  --peach:     #eab68f;
  --plum:      #a784ad;

  --card:      #ffffff;
  --card-2:    rgba(255,255,255,.7);
  --glass:     rgba(255,255,255,.6);
  --glass-brd: rgba(255,255,255,.8);

  --on-rose:   #fff7fa;

  --shadow:    0 30px 70px -34px rgba(150, 70, 95, .42);
  --shadow-sm: 0 16px 40px -24px rgba(150, 70, 95, .34);
  --shadow-xs: 0 8px 22px -14px rgba(150, 70, 95, .30);
  --glow:      0 0 0 1px rgba(210,126,150,.30), 0 24px 60px -22px rgba(210,126,150,.45);

  --radius:    22px;
  --radius-lg: 30px;
  --radius-sm: 14px;
  --maxw:      1220px;
  --gutter:    clamp(1.15rem, 4vw, 3rem);
  --sectpad:   clamp(3.2rem, 6.8vw, 6.4rem);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-2:    cubic-bezier(.4,0,.1,1);
  --spring:    cubic-bezier(.34,1.4,.5,1);

  --font-d: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-b: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.66;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

h1,h2,h3,h4 {
  font-family: var(--font-d);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--rose-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius: 6px; }

/* ---------- living background (one fixed layer) ---------- */
.bg-stage { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.bg-stage .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; will-change: transform; }
.b1 { width: 52vw; height: 52vw; left: -14vw; top: -10vw; background: radial-gradient(circle at 40% 40%, #f8c7d5, transparent 68%); animation: drift1 26s var(--ease) infinite alternate; }
.b2 { width: 46vw; height: 46vw; right: -12vw; top: 6vh; background: radial-gradient(circle at 50% 50%, #f4d9c8, transparent 66%); animation: drift2 32s var(--ease) infinite alternate; }
.b3 { width: 48vw; height: 48vw; left: 18vw; bottom: -22vh; background: radial-gradient(circle at 50% 50%, #dfe7cf, transparent 66%); opacity:.62; animation: drift3 30s var(--ease) infinite alternate; }
.b4 { width: 38vw; height: 38vw; right: 6vw; bottom: -8vh; background: radial-gradient(circle at 50% 50%, #eccfe0, transparent 68%); opacity:.6; animation: drift1 36s var(--ease) infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-5vw, 6vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(4vw, -5vh, 0) scale(1.14); } }
/* breathing dot veil */
.bg-dots { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(189,93,123,.16) 1px, transparent 1.4px);
  background-size: 26px 26px; opacity: .5;
  animation: breathe 7s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%);
}
@keyframes breathe { 0%,100%{ background-size: 26px 26px } 50%{ background-size: 27.4px 27.4px } }
/* cream wash so content stays readable over blobs */
.bg-wash { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(253,246,244,.35), rgba(253,246,244,.62) 40%, rgba(253,246,244,.5)); }
.cursor-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(480px circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.5), transparent 60%); }
body.has-cursor .cursor-glow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } .bg-dots { animation: none; } .cursor-glow { display:none; } }

/* ---------- layout utils ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sectpad); position: relative; }
.section--tight { padding-block: clamp(2.1rem, 4.6vw, 4rem); }
.center { text-align: center; }
.lead { color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.72; max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-b); font-weight: 700; font-size: .74rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rose-deep);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--rose-deep), transparent); }
.center .eyebrow::before { display: none; }

.sect-head { max-width: 720px; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }
.center.sect-head { margin-inline: auto; }
.sect-head h2 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); margin-top: .9rem; font-weight: 500; }
.sect-head h2 em, h1 em, .cta h2 em { font-style: italic; color: var(--rose-deep); }
.sect-head p { margin-top: 1.05rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-b); font-weight: 700; font-size: .95rem; line-height: 1.15;
  letter-spacing: .005em; text-align: center;
  padding: .95em 1.7em; border-radius: 100px; position: relative; overflow: hidden;
  color: var(--on-rose);
  background: linear-gradient(135deg, #d97f99 0%, #c2607e 52%, #b04f70 100%);
  background-size: 180% 180%;
  box-shadow: 0 14px 30px -12px rgba(176,79,112,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .5s var(--spring), box-shadow .5s var(--ease), background-position .8s var(--ease), filter .4s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.btn:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 22px 44px -14px rgba(176,79,112,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active { transform: translateY(-1px); }
.btn::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,.5) 50%, transparent 64%); transform: translateX(-130%); transition: transform .8s var(--ease); pointer-events:none; }
.btn:hover::after { transform: translateX(130%); }
.btn--ghost {
  background: var(--glass); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px var(--rose-soft), 0 14px 30px -18px rgba(150,70,95,.4); filter:none; }
.btn--ghost::after { display:none; }
.btn--lg { padding: 1.08em 2.1em; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn--sm { padding: .7em 1.25em; font-size: .86rem; }

.txtlink { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-b); font-weight: 700; font-size: .9rem; color: var(--rose-deep); transition: gap .4s var(--ease), color .3s; }
.txtlink svg { width: 1.05em; height: 1.05em; transition: transform .4s var(--ease); }
.txtlink:hover { color: var(--rose-ink); } .txtlink:hover svg { transform: translateX(4px); }

/* ---------- icons ---------- */
.ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 17px; height: 17px; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.nav.scrolled { background: rgba(253,246,244,.72); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); box-shadow: 0 12px 36px -26px rgba(150,70,95,.5); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark { width: 32px; height: 32px; flex: none; color: var(--rose-deep); transition: transform .6s var(--spring); }
.brand:hover .brand-mark { transform: rotate(28deg) scale(1.08); }
.brand-word { font-family: var(--font-d); font-weight: 600; font-size: 1.66rem; line-height: 1; letter-spacing: .015em; color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: .2rem; }
.nav__links a { font-size: .92rem; font-weight: 600; color: var(--ink-soft); padding: .5rem .8rem; border-radius: 9px; position: relative; transition: color .3s; }
.nav__links a::after { content:""; position:absolute; left:.8rem; right:.8rem; bottom:.34rem; height:1.5px; background: var(--rose-deep); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 1.2rem; }
.nav__phone { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--ink-soft); transition: color .3s; }
.nav__phone:hover { color: var(--rose-deep); }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); background: var(--glass); }
.burger span { position: relative; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
.burger span::before, .burger span::after { content:""; position:absolute; left:0; width:20px; height:2px; background: var(--ink); border-radius:2px; transition: transform .4s var(--ease), top .3s; }
.burger span::before { top:-6px; } .burger span::after { top:6px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top:0; transform: rotate(45deg); }
body.menu-open .burger span::after { top:0; transform: rotate(-45deg); }

.drawer { position: fixed; inset: 0; z-index: 95; background: rgba(253,243,243,.92); backdrop-filter: blur(22px); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
body.menu-open .drawer { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.9rem, 8vw, 2.6rem); letter-spacing: .005em; padding: .3rem 0; color: var(--ink); transform: translateY(14px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), color .3s; }
body.menu-open .drawer a { transform: none; opacity: 1; }
.drawer a:nth-child(1){transition-delay:.06s}.drawer a:nth-child(2){transition-delay:.1s}.drawer a:nth-child(3){transition-delay:.14s}.drawer a:nth-child(4){transition-delay:.18s}.drawer a:nth-child(5){transition-delay:.22s}.drawer a:nth-child(6){transition-delay:.26s}
.drawer a:hover { color: var(--rose-deep); }
.drawer .btn { margin-top: 1.5rem; align-self: flex-start; transition-delay:.3s; color: var(--on-rose); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}.reveal[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 90px; }
.hero__grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }
.hero__loc { margin-bottom: 1.3rem; }
.hero h1 { font-size: clamp(3.1rem, 8vw, 6.4rem); font-weight: 500; letter-spacing: -.01em; }
.hero h1 .ln { display: block; }
.hero__sub { margin-top: 1.5rem; max-width: 44ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.24rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }
.hero__trust { display: flex; align-items: center; gap: .7rem; margin-top: 1.8rem; color: var(--ink-soft); font-size: .92rem; }
.hero__trust .stars { color: var(--rose-deep); }
.hero__trust b { color: var(--ink); font-weight: 700; }

/* hero visual: floating flower cards */
.hero__art { position: relative; aspect-ratio: 5/5.4; }
.hero__art .ph { position: absolute; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.hero__art .ph img { width: 100%; height: 100%; object-fit: cover; }
.hero__art .ph-main { inset: 0 16% 8% 0; z-index: 2; animation: floaty 8s var(--ease) infinite alternate; }
.hero__art .ph-sub { width: 46%; aspect-ratio: 3/3.6; right: 0; bottom: 0; z-index: 3; border-radius: var(--radius); box-shadow: var(--shadow); animation: floaty 9s var(--ease) infinite alternate-reverse; }
.hero__art .tagchip { position: absolute; top: 6%; left: -4%; z-index: 4; background: var(--card); border-radius: 100px; padding: .7rem 1.1rem; display: flex; align-items: center; gap: .55rem; box-shadow: var(--shadow-sm); font-weight: 700; font-size: .86rem; animation: floaty 7s var(--ease) infinite alternate; }
.hero__art .tagchip .dot { width: 8px; height: 8px; border-radius: 50%; background: #a06bbf; box-shadow: 0 0 0 4px rgba(160,107,191,.18); animation: pulse 2.6s ease-in-out infinite; }
.hero__art .pricechip { position:absolute; bottom: 16%; left: -6%; z-index: 4; background: var(--card); border-radius: 16px; padding: .7rem 1rem; box-shadow: var(--shadow-sm); animation: floaty 8.5s var(--ease) infinite alternate-reverse; }
.hero__art .pricechip span { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); }
.hero__art .pricechip b { font-family: var(--font-d); font-style: italic; font-size: 1.5rem; color: var(--rose-deep); line-height:1.1; }
@keyframes floaty { to { transform: translateY(-14px); } }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 3px rgba(160,107,191,.24) } 50%{ box-shadow: 0 0 0 7px rgba(160,107,191,0) } }

.scrollcue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); width: 1px; height: 40px; background: linear-gradient(var(--rose-deep), transparent); }
.scrollcue::after { content:""; position:absolute; inset:0; background: var(--rose-deep); transform-origin: top; animation: cue 2.1s var(--ease) infinite; }
@keyframes cue { 0%,100%{ transform: scaleY(.35); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* ---------- marquee trust strip ---------- */
.strip { border-block: 1px solid var(--line-soft); background: rgba(255,255,255,.4); backdrop-filter: blur(6px); overflow: hidden; }
.strip__row { display: flex; gap: 3.2rem; padding-block: 1.05rem; width: max-content; animation: marq 34s linear infinite; }
/* dekorativní pásek scrolluje plynule dál i při hoveru — žádné zastavení */
.strip__row span { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-d); font-style: italic; font-size: 1.35rem; color: var(--ink-soft); white-space: nowrap; }
.strip__row .ic { color: var(--rose-deep); }
.strip__row i.sep { width: 6px; height: 6px; border-radius: 50%; background: var(--rose-soft); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .strip__row{ animation: none } }

/* ---------- about / studio ---------- */
.about__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about__media .m { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card); }
.about__media .m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.about__media .m:hover img { transform: scale(1.05); }
.about__media .m1 { aspect-ratio: 3/4; transform: translateY(-1.2rem); }
.about__media .m2 { aspect-ratio: 3/4; transform: translateY(1.2rem); }
.about__badge { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:3; background: var(--card); border-radius: 50%; width: clamp(96px,13vw,128px); height: clamp(96px,13vw,128px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow: var(--shadow); }
.about__badge b { font-family: var(--font-d); font-style: italic; font-size: clamp(1.7rem,3vw,2.3rem); color: var(--rose-deep); line-height:1; }
.about__badge span { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .25rem; }
.about h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 500; }
.about .lead { margin-top: 1.1rem; }
.about .sig { margin-top: 1.4rem; font-family: var(--font-d); font-style: italic; font-size: 1.5rem; color: var(--rose-deep); }
.about .sig small { display:block; font-family: var(--font-b); font-style: normal; font-size: .82rem; letter-spacing:.04em; color: var(--ink-faint); margin-top:.2rem; }
.feature-list { margin-top: 1.7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
.feature-list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-soft); font-size: .96rem; }
.feature-list .fic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--bg-3); color: var(--rose-deep); }
.feature-list .fic .ic { width: 19px; height: 19px; }
.feature-list b { color: var(--ink); font-weight: 700; display: block; font-size: .98rem; }

/* ---------- flowers carousel ---------- */
.caro { position: relative; }
.caro__head { display:flex; align-items:flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.caro__nav { display: flex; gap: .6rem; }
.caro__nav button { width: 50px; height: 50px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-xs); display: grid; place-items: center; color: var(--ink); transition: transform .4s var(--spring), color .3s, box-shadow .4s; }
.caro__nav button:hover { transform: translateY(-2px); color: var(--rose-deep); box-shadow: var(--shadow-sm); }
.caro__nav button:disabled { opacity: .4; cursor: default; transform: none; }
.caro__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23vw, 280px); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.6rem .2rem .6rem; margin-top: clamp(1.6rem,3vw,2.4rem); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%); }
.caro__track::-webkit-scrollbar { display: none; }
.fcard { scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-xs); transition: transform .55s var(--ease), box-shadow .5s; }
.fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.fcard__img { aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(160deg,#fff,#fdeef1); }
.fcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.fcard:hover .fcard__img img { transform: scale(1.06); }
.fcard__cap { padding: 1rem 1.1rem 1.2rem; display:flex; align-items:center; justify-content: space-between; gap: .6rem; }
.fcard__cap b { font-family: var(--font-d); font-size: 1.3rem; font-weight: 600; }
.fcard__cap span { font-size: .8rem; color: var(--ink-faint); }
.fcard__season { position:absolute; top: .8rem; left:.8rem; }

/* ---------- pill ---------- */
.pill { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-b); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.42em .8em; border-radius:100px; background: var(--glass); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--glass-brd); color: var(--rose-ink); }
.pill--sage { color: var(--sage-deep); }

/* ---------- bouquets (orderable) ---------- */
.bouquet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.7rem); }
.bq { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-xs); border: 1px solid var(--line-soft); transition: transform .55s var(--ease), box-shadow .5s; }
.bq:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.bq__img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(160deg,#fff,#fbe8ec); }
.bq__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bq:hover .bq__img img { transform: scale(1.06); }
.bq__tag { position: absolute; top: .9rem; left: .9rem; }
.bq__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.bq__body h3 { font-size: 1.55rem; font-weight: 600; }
.bq__body p { color: var(--ink-soft); font-size: .92rem; margin-top: .45rem; min-height: 3em; }
.bq__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.bq__price { display:flex; flex-direction:column; line-height:1.1; }
.bq__price span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.bq__price b { font-family: var(--font-d); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.bq__price b em { font-style: italic; color: var(--rose-deep); font-size: .92em; }
.bq-note { margin-top: clamp(1.6rem,3vw,2.4rem); text-align:center; color: var(--ink-soft); font-size: .96rem; }
.bq-note b { color: var(--ink); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); }
.step { position: relative; background: var(--card); border-radius: var(--radius); padding: 1.7rem 1.5rem; box-shadow: var(--shadow-xs); border: 1px solid var(--line-soft); transition: transform .5s var(--ease), box-shadow .5s; }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.step__n { font-family: var(--font-d); font-style: italic; font-size: 2.4rem; color: var(--rose-soft); line-height: 1; }
.step .fic { width: 44px; height: 44px; border-radius: 13px; display:grid; place-items:center; background: var(--bg-3); color: var(--rose-deep); margin: .6rem 0 1rem; }
.step h3 { font-size: 1.3rem; font-weight: 600; }
.step p { color: var(--ink-soft); font-size: .92rem; margin-top: .4rem; }
.delivery { margin-top: clamp(1.4rem,3vw,2.2rem); display:flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content:center; align-items:center; color: var(--ink-soft); font-size: .95rem; }
.delivery span { display:inline-flex; align-items:center; gap:.5rem; }
.delivery .ic { color: var(--sage-deep); }
.delivery b { color: var(--ink); }

/* ---------- occasions ---------- */
.occ { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.occ a { display:inline-flex; align-items:center; gap:.5rem; padding:.7em 1.2em; border-radius:100px; background: var(--card); box-shadow: var(--shadow-xs); font-weight:600; font-size:.92rem; color: var(--ink); transition: transform .4s var(--spring), color .3s, box-shadow .4s; }
.occ a:hover { transform: translateY(-3px); color: var(--rose-deep); box-shadow: var(--shadow-sm); }
.occ a .ic { width:17px; height:17px; color: var(--rose-deep); }

/* ---------- reviews ---------- */
.rev-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem,3.5vw,2.6rem); }
.rev-score { display:flex; align-items:center; gap:.9rem; }
.rev-score .num { font-family:var(--font-d); font-weight:600; font-size: 2.8rem; color: var(--ink); line-height:1; }
.stars { display:inline-flex; gap:.12rem; color: var(--rose-deep); }
.stars .ic { fill: var(--rose-deep); stroke: none; width: 18px; height:18px; }
.star-half { position: relative; display:inline-flex; width:18px; height:18px; }
.star-half .ic { position:absolute; inset:0; }
.star-half .ic.base { fill: var(--rose-soft); }
.star-half .ic.fill { fill: var(--rose-deep); clip-path: inset(0 50% 0 0); }
.rev-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.1vw,.95rem); }
.rev { position: relative; display:flex; flex-direction:column; background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.4rem,1.9vw,1.7rem) clamp(1.5rem,2.2vw,2rem); box-shadow: var(--shadow-xs); transition: transform .5s var(--ease), box-shadow .4s; }
.rev:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.rev .stars { margin-bottom: .8rem; }
.rev p { color: var(--ink); font-size: 1.04rem; line-height: 1.62; flex: 1; }
.rev__who { display:flex; align-items:center; gap:.8rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.rev__ava { width: 46px; height: 46px; border-radius: 50%; display:grid; place-items:center; flex: none; font-family: var(--font-b); font-weight: 800; font-size: .9rem; letter-spacing:.02em; background: linear-gradient(140deg, var(--rose), var(--plum)); }
.rev__ava span { color: #fff; }
.rev__who b { font-size: .94rem; display:block; }
.rev__who small { color: var(--ink-faint); font-size: .8rem; }

/* ---------- faq ---------- */
.faq { max-width: 820px; margin-inline: auto; background: var(--card); border-radius: var(--radius-lg); padding: .4rem clamp(1.2rem,3vw,2.2rem); box-shadow: var(--shadow-xs); border:1px solid var(--line-soft); }
.qa { border-bottom: 1px solid var(--line-soft); }
.qa:last-child { border-bottom: 0; }
.qa__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; padding: 1.3rem .2rem; font-family: var(--font-d); font-weight: 600; font-size: clamp(1.15rem,2.2vw,1.45rem); color: var(--ink); }
.qa__q .ic { color: var(--rose-deep); transition: transform .5s var(--ease); flex:none; }
.qa.open .qa__q .ic { transform: rotate(45deg); }
.qa__a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.qa__a p { color: var(--ink-soft); padding: 0 .2rem 1.3rem; max-width: 68ch; }

/* ---------- cta band ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.8rem,6vw,5rem); text-align: center; isolation: isolate;
  background: linear-gradient(135deg, #e79bb1 0%, #cf6f8f 48%, #b65676 100%); box-shadow: 0 40px 90px -40px rgba(176,79,112,.6); }
.cta::before { content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(50% 60% at 18% 14%, rgba(255,255,255,.32), transparent 60%),
  radial-gradient(46% 60% at 86% 88%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(60% 80% at 50% 120%, rgba(120,40,70,.4), transparent 60%); }
.cta h2 { color: #fff; font-size: clamp(2.2rem,5.5vw,4rem); font-weight: 500; }
.cta h2 em { color: #ffe7ef; font-style: italic; }
.cta p { color: rgba(255,255,255,.92); margin: 1rem auto 0; max-width: 50ch; }
.cta .hero__cta { justify-content: center; margin-top: 2rem; }
.cta .btn { background: #fff; color: var(--rose-ink); box-shadow: 0 16px 34px -14px rgba(90,30,55,.5); }
.cta .btn:hover { background:#fff; filter: brightness(1.02); }
.cta .btn--ghost { background: rgba(255,255,255,.12); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.cta .btn--ghost:hover { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }

/* ---------- contact ---------- */
.contact__grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem,4vw,3.2rem); align-items: start; }
.info-card { background: var(--card); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.3rem); box-shadow: var(--shadow-xs); border:1px solid var(--line-soft); display:grid; gap: 1.3rem; align-content: start; }
.info-row { display:flex; gap: .95rem; align-items: flex-start; }
.info-row .fic { width: 42px; height: 42px; border-radius: 12px; flex:none; display:grid; place-items:center; background: var(--bg-3); color: var(--rose-deep); }
.info-row b { font-family: var(--font-b); font-weight: 700; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); display:block; margin-bottom: .2rem; }
.info-row a, .info-row p { color: var(--ink); font-size: 1.02rem; }
.info-row a:hover { color: var(--rose-deep); }
.hours { border-top: 1px solid var(--line-soft); padding-top: 1.2rem; display:grid; gap:.5rem; }
.hours .r { display:flex; justify-content: space-between; gap:1rem; color: var(--ink-soft); font-size:.96rem; }
.hours .r b { color: var(--ink); font-weight: 700; }
.hours .r.today { color: var(--rose-ink); }
.hours .r.today b { color: var(--rose-ink); }

.form { background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow-xs); }
.form-head { margin-bottom: 1.4rem; }
.form-head h3 { font-size: 1.7rem; font-weight: 600; }
.form-head p { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; }
.field { margin-bottom: 1rem; }
.field label { display:block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width:100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .82rem 1rem; transition: border-color .3s, box-shadow .3s, background .3s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(210,126,150,.18); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field--row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.consent { display:flex; gap:.7rem; align-items:flex-start; color: var(--ink-soft); font-size:.85rem; margin-bottom: 1.1rem; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rose-deep); flex:none; }
.consent a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 2px; }
.form-success { display:none; flex-direction: column; align-items:center; text-align:center; gap:.7rem; padding: 1.4rem 0; }
.form.done .form-grid { display:none; } .form.done .form-success { display:flex; }
.form-success .tick { width:64px; height:64px; border-radius:50%; background: linear-gradient(140deg,var(--rose),var(--rose-deep)); display:grid; place-items:center; color:#fff; }
.form-success .tick .ic { width: 32px; height:32px; stroke-width: 2.4; }
.form-success h3 { font-size: 1.6rem; font-weight: 600; }
.form-success p { color: var(--ink-soft); max-width: 36ch; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: rgba(255,250,248,.7); backdrop-filter: blur(6px); padding-block: clamp(3rem,6vw,4.5rem) 1.8rem; margin-top: clamp(2rem,4vw,3rem); }
.footer__top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer__brand .brand { margin-bottom: 1rem; }
.footer__brand p { color: var(--ink-soft); font-size: .92rem; max-width: 34ch; }
.footer h4 { font-family: var(--font-b); font-weight: 700; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.footer__col a:not(.btn), .footer__col p { display:block; color: var(--ink-soft); font-size:.93rem; padding: .26rem 0; transition: color .3s; }
.footer__col a:not(.btn):hover { color: var(--rose-deep); }
.socials { display:flex; gap:.6rem; margin-top: 1.1rem; }
.socials a { width: 42px; height: 42px; border-radius: 12px; display:grid; place-items:center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: var(--card); transition: transform .4s var(--spring), background .3s, color .3s; }
.socials a:hover { transform: translateY(-3px); background: linear-gradient(140deg,var(--rose),var(--rose-deep)); color:#fff; box-shadow: none; }
.socials .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.footer__bot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap: wrap; margin-top: clamp(2.2rem,4vw,3.2rem); padding-top: 1.5rem; border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: .84rem; }
.footer__bot a { color: var(--ink-soft); } .footer__bot a:hover { color: var(--rose-deep); }
.footer__bot .credit b { color: var(--rose-deep); font-weight: 700; }

/* ---------- progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--rose-soft), var(--rose), var(--rose-deep)); box-shadow: 0 0 14px rgba(210,126,150,.6); z-index: 200; }
@media (prefers-reduced-motion: reduce){ .progress{ transition:none } }

/* ---------- legal pages ---------- */
.legal-main { padding-top: 128px; }
.legal { max-width: 800px; margin-inline: auto; background: var(--card); border-radius: var(--radius-lg); padding: clamp(1.8rem,4vw,3.2rem); box-shadow: var(--shadow-xs); border:1px solid var(--line-soft); }
.legal .back { display:inline-flex; align-items:center; gap:.5rem; margin-bottom: 1.6rem; color: var(--ink-faint); font-weight:600; font-size:.9rem; }
.legal .back:hover { color: var(--rose-deep); }
.legal h1 { font-size: clamp(2.1rem,5vw,3rem); font-weight: 500; margin-bottom: .5rem; }
.legal .updated { color: var(--ink-faint); font-size: .9rem; margin-bottom: 2.2rem; }
.legal h2 { font-size: 1.4rem; font-weight: 600; margin: 2rem 0 .7rem; color: var(--rose-ink); }
.legal h3 { font-size: 1.1rem; font-weight: 700; font-family: var(--font-b); margin: 1.3rem 0 .4rem; }
.legal p, .legal li { color: var(--ink-soft); margin-bottom: .65rem; }
.legal ul { display:grid; gap:.4rem; margin: .3rem 0 1rem; }
.legal ul li { position: relative; padding-left: 1.3rem; }
.legal ul li::before { content:""; position:absolute; left:.25rem; top:.62rem; width:6px; height:6px; border-radius:50%; background: var(--rose); }
.legal a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal table { width:100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size:.92rem; }
.legal th, .legal td { text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav__links, .nav__phone { display: none; }
  .nav__cta .btn { display: none; }
  .burger { display: flex; }
  .bouquet-grid, .rev-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
}
@media (max-width: 860px) {
  .hero { padding-top: 96px; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__art { max-width: 440px; margin-inline: auto; width: 100%; order: 2; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; }
  .feature-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --radius: 18px; --radius-lg: 24px; }
  .bouquet-grid, .rev-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .rev-head { gap: .8rem; }
}
@media (max-width: 380px) {
  .hero__art .tagchip, .hero__art .pricechip { display: none; }
}