/* Components — mirror the Figma components (Button, Card / Service, Card / Testimonial, …) */

/* ---------- Layout ---------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
}

/* Rounded olive panel inset 10px from the page edge (sections 1, 3, 5, 7) */
.panel {
  position: relative;
  overflow: hidden;
  margin: 0 var(--page-inset);
  border-radius: var(--radius-20);
  background: var(--surface-section);
}

/* Faint leaf texture used as background decoration */
.leaf-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.059; /* 10% frame × 59% layer in Figma */
  background: url("../assets/img/leaf-pattern.png") center / 100% 100% no-repeat;
  aspect-ratio: 1000 / 1125;
}

/* ---------- Button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 13px var(--space-20) 14px;
  border-radius: var(--radius-40);
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn--primary {
  min-width: 173px;
  background: var(--action-primary);
  color: var(--text-inverse);
}
/* Every :hover effect on the site sits in @media (hover: hover): mouse / trackpad only, so phones never
   show a hover state that sticks after a tap */
@media (hover: hover) {
  .btn--primary:hover { background: #7c8666; }
}

.btn--secondary {
  background: var(--action-secondary);
  color: var(--text-primary);
}
@media (hover: hover) {
  .btn--secondary:hover { background: #e6e6d0; }
}

/* Design / Navigation / 14 / Bold */
.btn--nav {
  background: var(--action-secondary);
  color: var(--text-primary);
  font-weight: 700;
}
@media (hover: hover) {
  .btn--nav:hover { background: #e6e6d0; }
}

.btn:focus-visible,
.icon-btn:focus-visible,
.arrow-btn:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

/* Vertical nav stack on the hero image */
.nav-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  width: 138px;
}
.nav-stack .btn--full { width: 100%; }

/* ---------- Social icon button (Telegram / WhatsApp) ---------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: var(--space-10);
  border-radius: var(--radius-20);
  background: var(--surface-control);
}
.icon-btn img {
  width: 18px;
  height: 18px;
}

.socials {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

/* ---------- Slider arrow ---------- */

.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-26);
  background: var(--surface-subtle);
}
.arrow-btn--next img { transform: scaleX(-1); }
.arrow-btn:disabled { opacity: 0.5; cursor: default; }

.arrows {
  display: flex;
  gap: var(--space-8);
}

/* ---------- Portrait (cropped photo) ---------- */

.portrait {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 131px;
  height: var(--portrait-h, 119px);
  border-radius: var(--radius-12);
}
.portrait img {
  position: absolute;
  max-width: none;
  left: var(--img-x, 0);
  top: var(--img-y, 0);
  width: var(--img-w, 100%);
  height: var(--img-h, 100%);
  object-fit: cover;
}
/* Hero crop (node 1:55) */
.portrait--hero { --portrait-h: 119px; --img-x: -7.94%; --img-y: -8.7%; --img-w: 117.27%; --img-h: 172.13%; }
/* Nutrition "resource" crop (node 1:313) */
.portrait--resource { --portrait-h: 150px; --img-x: -8.46%; --img-y: -8.22%; --img-w: 133.02%; --img-h: 154.89%; }
/* Footer crop (node 12:544) */
.portrait--footer { --portrait-h: 160px; --img-x: -16.4%; --img-y: -10.34%; --img-w: 148.09%; --img-h: 161.67%; }

/* ---------- Profile (portrait + name + subtitle) ---------- */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}
.profile__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* ---------- Card / Service ---------- */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 305px;
  min-height: 316px;
  padding: var(--space-20);
  border-radius: var(--radius-20);
  background: var(--surface-page);
  color: var(--text-primary);
}
.service-card__num {
  font-family: var(--font-hand);
  font-size: var(--fs-handwritten);
  text-transform: uppercase;
  color: var(--text-accent);
}
.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: auto;
  min-height: 145px; /* body starts 151px from the top, as in Figma */
  font-size: var(--fs-body-sm);
}
.service-card__title { font-weight: 600; }
.service-card__text { font-weight: 500; color: var(--text-secondary); }

.service-card--outline {
  background: transparent;
  border: 1px solid var(--border-accent);
}
.service-card--muted {
  background: var(--surface-card-muted);
}
.service-card--muted,
.service-card--muted .service-card__num,
.service-card--muted .service-card__text {
  color: var(--text-inverse);
}

/* Round decorative photo that sits in the service grid */
.decor-circle {
  width: 305px;
  height: 305px;
  border-radius: 50%;
}

/* ---------- Card / Feature (Комплексный подход) ---------- */

.feature-card {
  position: relative;
  overflow: hidden;
  width: 630px;
  min-height: 476px;
  padding: 27px 40px 40px 39px;
  border-radius: var(--radius-20);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.feature-card__num {
  font-family: var(--font-serif);
  font-size: var(--fs-display-numeral);
  text-transform: uppercase;
  color: var(--text-accent);
}
.feature-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-top: 31px;
  max-width: 543px;
}
.feature-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-heading-hero);
  text-transform: uppercase;
}
.feature-card__text {
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

/* Photo variant: blurred image with dark overlay, inverse text */
.feature-card--image {
  border: 0;
  padding: 28px 40px 40px;
  color: var(--text-inverse);
}
.feature-card--image .feature-card__num { color: var(--text-inverse); position: relative; }
.feature-card__bg {
  position: absolute;
  inset: -4px; /* fills the card; the small bleed hides the blurred edge */
  filter: blur(2px);
}
.feature-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-image-overlay);
}

/* ---------- Card / Testimonial ---------- */

.testimonial {
  flex-shrink: 0;
  width: 414px; /* 364 content + 2×24 padding + 2×1 border */
  padding: var(--space-40) var(--space-24);
  border-radius: var(--radius-20);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.testimonial__avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial__name {
  font-size: var(--fs-body-lg);
  color: var(--text-accent);
}
.testimonial__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: var(--fs-body-sm);
}
.testimonial__title { font-weight: 700; color: var(--text-accent); }
.testimonial__quote { margin: 0; font-weight: 500; color: var(--text-primary); }
.testimonial__quote p + p { margin-top: var(--space-8); }

/* ---------- Approach bubble (Мой подход) ---------- */

.approach-bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 317px;
  height: 111px;
}
.approach-bubble__ring {
  position: absolute;
  inset: 0;
  width: 317px;
  height: 111px;
}
.approach-bubble__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 128px;
  text-align: center;
}
.approach-bubble__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-10);
  background: var(--surface-card);
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  color: var(--text-accent);
}
.approach-bubble__label {
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Section / Contact footer ---------- */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 527px;
  max-width: 100%;
  text-align: center;
}
.contact__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.contact__head,
.contact__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.contact__lines {
  font-family: var(--font-serif);
  font-size: var(--fs-heading-name);
}
@media (min-width: 640px) {
  .contact__lines,
  .contact__head p,
  .profile__text p { white-space: nowrap; }
}

/* ---------- Reveal (fade-in on load / scroll) ---------- */
/* Add data-reveal to any element; optional data-reveal="up|fade|zoom" and style="--reveal-delay: 200ms".
   Elements are hidden only when JS is running (html.js), so content never stays invisible. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease; /* keep button hover transitions */
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
  will-change: opacity, transform;
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="zoom"] { transform: scale(1.06); transition-duration: 1.4s; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
/* Wrapper that only toggles .is-visible; children animate themselves */
.js [data-reveal="stage"] { opacity: 1; transform: none; }

/* ---------- Site header (inner pages, Figma symbol 1:292) ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  max-width: var(--page-max);
  height: 60px;
  margin: 0 auto;
  padding: 0 20px 0 10px; /* brand text and icons both sit 20px from the page edge (panels sit at 10px) */
}
.site-header__brand {
  padding: var(--space-10);
  font-family: var(--font-serif);
  font-size: 20px; /* Design / Label / Brand */
  color: var(--text-primary);
  white-space: nowrap;
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}
.site-header__menu {
  display: flex;
  gap: var(--space-12);
}
.site-header .socials { gap: var(--space-12); }

/* Compact nav pill: 8 / 20 padding, 33px tall */
.btn--sm {
  height: auto;
  padding: var(--space-8) var(--space-20);
}

.icon-btn--sm {
  width: 33px;
  height: 33px;
  padding: var(--space-8);
  border-radius: 16px;
  background: var(--surface-section);
}
.icon-btn--sm img { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-8) var(--space-10) 0;
    row-gap: var(--space-4);
  }
  .site-header__right { display: contents; }
  .site-header .socials { order: 1; }
  .site-header__menu {
    order: 2;
    gap: var(--space-8);
    /* bleed to the screen edges so the scrolling row isn't cut 10px short of the edge */
    width: calc(100% + var(--space-10) * 2);
    margin-inline: calc(var(--space-10) * -1);
    padding: 0 var(--space-10) var(--space-10);
    scroll-padding-inline: var(--space-10);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header__menu .btn--sm { flex-shrink: 0; padding-inline: 14px; }
  .site-header__menu::-webkit-scrollbar { display: none; }
}

/* Home page: the header is only for phone / tablet; desktop has the menu on the hero photo */
@media (min-width: 901px) {
  .site-header--home { display: none; }
}

/* ---------- Video card (CMS: poster image now, video later) ---------- */
/* <li class="video-card" data-video-src="…mp4"> <img class="video-card__media" src="poster.jpg" alt="…"> </li>
   With data-video-src set, main.js swaps the image for a muted looping <video> (the image becomes its poster). */

.video-card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: 305px;
  height: 490px;
  border-radius: var(--radius-20);
  background: var(--surface-card);
}
.video-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ▶ badge: click the card to watch with sound in a popup (.video-modal) */
.video-card.is-playable { cursor: pointer; }
.video-card.is-playable:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 3px; }
.video-card__play {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(53, 48, 46, 0.45);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.video-card__play svg { width: 20px; height: 20px; margin-left: 2px; }
@media (hover: hover) {
  .video-card.is-playable:hover .video-card__play { background: rgba(53, 48, 46, 0.7); transform: scale(1.08); }
}

/* Quote variant: muted card with a centred handwritten note (Design / Handwritten / Note / 24-28) */
.service-card--quote {
  justify-content: center;
  align-items: center;
  background: var(--surface-card-muted);
  text-align: center;
}
.service-card__note {
  max-width: 269px;
  font-family: var(--font-hand);
  font-size: var(--fs-handwritten);
  line-height: 28px;
  color: var(--text-accent);
}

/* ---------- Article row (Figma component "Content / Article row") ---------- */

.article-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 847px) 325px;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--border-divider);
}
.article-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.article-row__date,
.article-row__excerpt {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
}
.article-row__title {
  max-width: 738px;
  font-size: 24px; /* Design / Heading / Sans / Semibold */
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
/* The title link covers the whole row, so the row is one big click target */
.article-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.article-row__link:focus-visible { outline: none; }
.article-row:has(.article-row__link:focus-visible) { outline: 2px solid var(--border-accent); outline-offset: 6px; border-radius: var(--radius-12); }
.article-row__thumb {
  overflow: hidden;
  width: 325px;
  height: 204px;
  border-radius: var(--radius-20);
  background: var(--surface-subtle);
}
.article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .article-row:hover .article-row__title { color: var(--text-accent); }
}
@media (hover: hover) {
  .article-row:hover .article-row__thumb img { transform: scale(1.04); }
}

@media (max-width: 900px) {
  .article-row { grid-template-columns: minmax(0, 1fr) 240px; }
  .article-row__thumb { width: 240px; height: 150px; }
}
@media (max-width: 640px) {
  .article-row { grid-template-columns: 1fr; gap: var(--space-16); }
  .article-row__thumb { order: -1; width: 100%; height: auto; aspect-ratio: 325 / 204; }
  .article-row__title { font-size: 20px; }
  .article-row__date, .article-row__excerpt { font-size: 16px; }
}

/* ---------- Back link (arrow + "Назад") ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  color: var(--text-accent);
  transition: color 0.2s ease;
}
.back-link img { transition: transform 0.25s ease; }
@media (hover: hover) {
  .back-link:hover { color: var(--text-primary); }
}
@media (hover: hover) {
  .back-link:hover img { transform: translateX(-3px); }
}

/* ---------- Rich text (CMS article body) ---------- */
.rich-text {
  font-size: var(--fs-body-lg);
  line-height: normal;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.rich-text > * + * { margin-top: 24px; }
.rich-text h2,
.rich-text h3 {
  font-size: 24px; /* Design / Heading / Sans / Semibold */
  font-weight: 600;
}
.rich-text > * + h2,
.rich-text > * + h3 { margin-top: 24px; }
.rich-text h2 + *,
.rich-text h3 + * { margin-top: 12px; }
.rich-text ul,
.rich-text ol { padding-left: 1.4em; }
.rich-text li + li { margin-top: 8px; }
.rich-text a { color: var(--text-accent); text-decoration: underline; text-underline-position: from-font; }
.rich-text strong, .rich-text b { font-weight: 600; }
.rich-text blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--space-20);
  border-left: 2px solid var(--border-brand);
  color: var(--text-secondary);
}
.rich-text img,
.rich-text figure img { width: 100%; height: auto; border-radius: var(--radius-20); }
.rich-text figure { margin-left: 0; margin-right: 0; }
.rich-text figcaption { margin-top: var(--space-8); font-size: var(--fs-caption); color: var(--text-muted); }

@media (max-width: 640px) {
  .rich-text { font-size: 17px; }
  .rich-text > * + * { margin-top: 18px; }
  .rich-text h2, .rich-text h3 { font-size: 20px; }
}

/* ---------- Filter chip (article tags) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-40);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .chip:hover { border-color: var(--border-brand); background: var(--surface-subtle); }
}
.chip[aria-pressed="true"] {
  background: var(--action-primary); /* surface/accent */
  color: var(--text-inverse);
  font-weight: 600;
}
.chip:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }

/* ---------- Certificate card (opens full size in a lightbox) ---------- */
.cert-card {
  position: relative;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  /* Sized by the scan itself: portrait diplomas and landscape certificates both keep their proportions */
  border-radius: var(--radius-20);
  background: var(--surface-subtle);
  cursor: zoom-in;
}
.cert-card img {
  width: auto;
  height: auto;
  max-height: var(--cert-h, 400px);
  max-width: var(--cert-max-w, 600px);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .cert-card:hover img { transform: scale(1.03); }
}
.cert-card:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 3px; }

/* ---------- Lightbox (created by main.js for [data-lightbox] links) ---------- */
.lightbox {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-24);
  border: 0;
  background: rgba(53, 48, 46, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox[open] { display: flex; animation: lightbox-in 0.25s ease; }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  border-radius: var(--radius-12);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.lightbox__close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
}
/* Video popup: same overlay as the lightbox, native playback controls */
.video-modal__player {
  max-width: min(1100px, 100%);
  max-height: 100%;
  border-radius: var(--radius-12);
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Approach card (white, title + text) ---------- */
.method-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40) var(--space-24);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-20);
  background: var(--surface-card);
}
.method-card__title {
  font-size: 24px; /* Design / Heading / Sans / Bold */
  font-weight: 700;
  color: var(--text-accent);
}
.method-card__text { font-size: var(--fs-body-sm); font-weight: 500; }
@media (max-width: 640px) {
  .method-card { padding: var(--space-24) var(--space-20); }
  .method-card__title { font-size: 20px; }
}

/* ---------- Telegram / WhatsApp buttons: calm hover (header, hero & footer) ---------- */
.icon-btn {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.icon-btn img { transition: transform 0.3s ease; }
@media (hover: hover) {
  .icon-btn:hover {
    background: var(--surface-subtle);
    box-shadow: inset 0 0 0 1px var(--border-brand);
  }
}
@media (hover: hover) {
  .icon-btn:hover img { transform: scale(1.08); }
}


/* ---------- Legal links (footer bottom row: policy + consent) ---------- */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4) var(--space-24);
}
@media (max-width: 640px) {
  .legal-links { flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
}

/* ---------- Cookie notice (js/main.js adds it until accepted or declined) ---------- */
.cookie-notice {
  position: fixed;
  left: var(--space-20);
  bottom: var(--space-20);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-20);
  max-width: 560px;
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-20);
  background: var(--surface-card);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  animation: cookie-in 0.4s ease both;
}
.cookie-notice a { color: var(--text-accent); text-decoration: underline; text-underline-position: from-font; }
.cookie-notice__actions { display: flex; flex-shrink: 0; gap: var(--space-8); }
.cookie-notice .btn { height: 38px; min-width: 0; padding: 10px var(--space-16) 11px; }
@keyframes cookie-in { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 640px) {
  .cookie-notice { left: var(--space-16); right: var(--space-16); bottom: var(--space-16); flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .cookie-notice__actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice { animation: none; }
}