/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · macrostructure: Bento Grid · H2 split hero · theme: custom
 * vibe: "молочно-лавандовый, мягкий, понятный, женственный"
 * display: Bricolage Grotesque · body: Geist · axes: light / geometric-sans / cool
 * enrichment: E8 generated food photography · nav: N12 banner + retract · footer: Ft5 statement
 * studied: no · context: explicit · contrast: pass · slop: pass · honest: pass
 * chrome: pass · tokens: pass · responsive: pass · mobile: pass · icons: pass
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 7% 18%, oklch(90% 0.05 305 / 0.7) 0 8rem, transparent 8.2rem),
    radial-gradient(circle at 94% 41%, oklch(91% 0.045 322 / 0.55) 0 10rem, transparent 10.2rem),
    var(--color-paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  padding-bottom: 5.5rem;
  overflow-x: clip;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.button:focus-visible,
.announcement__close:focus-visible {
  outline: 2px solid var(--color-paper);
  box-shadow: 0 0 0 5px var(--color-focus);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transform: translateY(0);
  transition: transform 220ms ease;
}

.site-header.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }

.announcement {
  min-height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.announcement__close {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border-radius: 50%;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.nav-shell {
  width: min(100% - 2rem, var(--content));
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: var(--banner-h) 0 0;
  z-index: -1;
  background: oklch(97% 0.014 305 / 0.88);
  border-bottom: 1px solid var(--color-rule-soft);
  backdrop-filter: blur(14px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}

.wordmark__mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--color-accent);
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  font-size: 0.78rem;
  letter-spacing: -0.04em;
}

.button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.button:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.button:active { transform: translateY(1px); }
.button--small { min-height: 2.65rem; padding: 0.6rem 1rem; font-size: 0.9rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-accent-deep);
  font-weight: 700;
  text-underline-offset: 0.25rem;
  white-space: nowrap;
}

.section {
  width: min(100% - 2rem, var(--content));
  margin-inline: auto;
  padding-block: var(--space-16);
}

.section--tight { padding-top: var(--space-10); }

.hero {
  min-height: 100svh;
  padding-top: calc(var(--banner-h) + var(--nav-h) + var(--space-12));
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-accent-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
}

h1 {
  max-width: 11ch;
  margin-bottom: var(--space-6);
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

h2 {
  margin-bottom: var(--space-5);
  font-size: clamp(2.15rem, 5vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.052em;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: 1.22rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hero__lead {
  max-width: 38rem;
  margin-bottom: var(--space-6);
  color: var(--color-ink-2);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
}

.hero__facts div { display: grid; gap: var(--space-1); }
.hero__facts dt { color: var(--color-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hero__facts dd { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }

.hero__visual {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero__visual::before {
  content: "";
  position: absolute;
  width: 36%;
  aspect-ratio: 1;
  right: -9%;
  top: -9%;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  z-index: -1;
}
.section-heading { max-width: 44rem; margin-bottom: var(--space-8); }
.section-heading--compact { max-width: 36rem; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(8.5rem, auto);
  gap: var(--space-4);
}

.tile {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-m);
  background: oklch(99% 0.006 305 / 0.75);
}

.tile p:last-child { margin-bottom: 0; color: var(--color-ink-2); }
.tile__number { margin-bottom: var(--space-8); color: var(--color-muted); font-size: 0.72rem; letter-spacing: 0.12em; }
.tile__big, .tile__date, .tile__price {
  margin-bottom: 0;
  color: var(--color-accent-deep);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.tile__label { margin-bottom: var(--space-3); color: var(--color-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.tile__price { font-size: clamp(2.2rem, 5vw, 4rem); }
.tile--menu { grid-column: span 7; grid-row: span 2; background: var(--color-paper-2); }
.tile--recipes { grid-column: span 5; grid-row: span 2; }
.tile--support { grid-column: span 4; }
.tile--group { grid-column: span 4; background: var(--color-accent-soft); }
.tile--stages { grid-column: span 4; }
.tile--days { grid-column: span 3; }
.tile--start { grid-column: span 4; background: var(--color-paper-3); }
.tile--price { grid-column: span 5; }

.mini-calendar {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}
.mini-calendar span {
  min-width: 0;
  padding-block: var(--space-4);
  border-top: 2px solid var(--color-accent);
  color: var(--color-muted);
  font-size: clamp(0.56rem, 1.7vw, 0.7rem);
  font-weight: 700;
  text-align: center;
}

.process {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2rem, 8vw, 7rem);
  align-items: start;
}

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
}
.steps li:last-child { border-bottom: 1px solid var(--color-rule); }
.steps__index {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent-deep);
  font-weight: 700;
}
.steps p { margin-bottom: 0; color: var(--color-ink-2); }

.expert {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2rem, 8vw, 7rem);
  align-items: center;
  border-block: 1px solid var(--color-rule);
}

.expert__aside {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-accent-deep);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.06em;
}
.expert__aside i { font-size: 0.55em; font-style: normal; }
.expert__aside small { grid-column: 1 / -1; color: var(--color-muted); font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.expert__content > p:not(.eyebrow, .note) { max-width: 46rem; font-size: 1.12rem; color: var(--color-ink-2); }
.note { margin-bottom: 0; color: var(--color-muted); font-size: 0.86rem; }

.reviews {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 8vw, 7rem);
  align-items: end;
}
.reviews > div:first-child > p:last-child { color: var(--color-ink-2); }
.review-links { display: grid; gap: var(--space-3); }
.channel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.25rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.channel-link:hover { border-color: var(--color-accent); background: var(--color-paper-2); }
.channel-link span { color: var(--color-muted); font-size: 0.82rem; }
.channel-link strong { color: var(--color-accent-deep); white-space: nowrap; }

.final-cta {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: var(--space-8);
  align-items: end;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-l);
  background: var(--color-paper-2);
}
.final-cta > div:first-child > p:last-child { margin-bottom: 0; color: var(--color-ink-2); }
.final-cta__action { display: grid; justify-items: start; gap: var(--space-3); }
.final-cta__action > strong { color: var(--color-accent-deep); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1; letter-spacing: -0.06em; }

.site-footer {
  width: min(100% - 2rem, var(--content));
  margin: var(--space-16) auto var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-rule);
}
.footer-statement {
  max-width: 20ch;
  margin-bottom: var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-8); }
.site-footer nav a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-accent-deep); font-weight: 700; text-underline-offset: 0.25rem; }
.footer-meta { color: var(--color-muted); font-size: 0.82rem; }

.sticky-cta {
  position: fixed;
  z-index: 45;
  inset: auto 1rem 1rem;
  width: min(calc(100% - 2rem), 31rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: oklch(97% 0.014 305 / 0.94);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}
.sticky-cta p { display: grid; margin: 0; line-height: 1.1; }
.sticky-cta strong { font-family: var(--font-display); font-size: 1.18rem; }
.sticky-cta span { color: var(--color-muted); font-size: 0.72rem; }

@media (max-width: 760px) {
  :root { --nav-h: 3.85rem; }
  body { padding-bottom: 5rem; }
  .site-header {
    position: relative;
    inset: auto;
  }
  .site-header.is-compact { transform: none; }
  .nav-shell, .section, .site-footer { width: min(100% - 1.25rem, var(--content)); }
  .wordmark__text { display: none; }
  .hero {
    min-height: auto;
    padding-top: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .hero__visual {
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 1;
    block-size: auto;
    padding: 3%;
    margin-inline: auto;
    overflow: hidden;
    background: var(--color-paper-2);
    border-radius: var(--radius-s);
  }
  .hero__content { grid-row: 2; }
  h1 { font-size: clamp(3rem, 14vw, 4.7rem); }
  .hero__visual::before { display: none; }
  .section { padding-block: var(--space-12); }
  .section--tight { padding-top: var(--space-8); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-3); }
  .tile { padding: var(--space-5); }
  .tile--menu, .tile--recipes, .tile--support, .tile--group, .tile--stages { grid-column: 1 / -1; grid-row: auto; }
  .tile--days, .tile--start, .tile--price { grid-column: span 1; }
  .tile--price { grid-column: 1 / -1; }
  .tile__number { margin-bottom: var(--space-6); }
  .process, .expert, .reviews, .final-cta { grid-template-columns: 1fr; gap: var(--space-8); }
  .expert__aside { width: min(100%, 24rem); }
  .final-cta { padding-block: var(--space-10); }
  .site-footer { margin-top: var(--space-10); }
  .sticky-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }
  .site-header.is-compact ~ .sticky-cta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 370px) {
  .announcement { font-size: 0.75rem; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button, .hero__actions .text-link { justify-content: center; width: 100%; }
  .hero__facts { gap: var(--space-5); }
  .tile--days, .tile--start, .tile--price { grid-column: 1 / -1; }
  .channel-link { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .sticky-cta { inset-inline: 0.625rem; bottom: 0.625rem; width: calc(100% - 1.25rem); padding-left: var(--space-4); }
  .sticky-cta .button { padding-inline: 0.85rem; }
}

@media (min-width: 761px) {
  .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}