/* ==========================================================================
   Zakaz Plus — the chrome every page shares: header and footer.

   Breakpoints: phone < 768 (Figma 375 frames) · tablet 768–1023 (not in the
   design; the desktop layout without the section nav) · desktop ≥ 1024
   (Figma 1440 frames).
   ========================================================================== */

/* How far the header reaches down the page at rest; content starts below it.
   Anchored sections stop clear of the pinned bar. */
:root { --head-h: 125px; }
html  { scroll-padding-top: 80px; }
@media (min-width: 768px)  { :root { --head-h: 87px; }  html { scroll-padding-top: 100px; } }
@media (min-width: 1024px) { :root { --head-h: 107px; } html { scroll-padding-top: 125px; } }

.site-head + main { padding-top: var(--head-h); }

/* ==========================================================================
   header
   ========================================================================== */

/* Pinned to the top of the screen the whole time, so it never scrolls away.
   Out of the flow, so changing to the pinned look never moves the page. */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}

/* the pinned look, from the first bit of scroll (site.js) */
.site-head.is-stuck {
  background: var(--glass);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 0 0 30px 30px;
}
@media (prefers-reduced-motion: no-preference) {
  .site-head { transition: background-color .2s ease-out, border-radius .2s ease-out; }
}

.site-head__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: var(--shell);
  margin: 0 auto;
}
.site-head__bar .logo { margin-right: auto; }

/* language pill + button; on a phone its children join the bar's own wrap */
.site-head__end { display: flex; align-items: center; gap: 5px; }
@media (max-width: 767px) {
  .site-head__end { display: contents; }
}

/* ---- section nav (Figma "Switch", 481:5197) ---- */
.site-nav {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 2px;
  border-radius: 22px;
  background: var(--chip);
}
.site-nav__link {
  padding: 12px 15px;
  border-radius: 20px;
  font: var(--t1);
  color: var(--green-dark);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
@media (hover: hover) {
  .site-nav__link:hover { color: var(--ink); }
}
.site-nav__link.is-active { background: var(--green); color: var(--white); }

/* ---- language pill (desktop "lang-selector Desktop" 481:5222,
        phone "Language" 479:3878) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
  border-radius: 10px;
  background: var(--chip-solid);
}
.lang-switch__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  font: var(--t4);
  color: var(--green-dark);
  transition: color .2s;
}
@media (hover: hover) {
  .lang-switch__item:not([aria-current]):hover { color: var(--ink); }
}
.lang-switch__item[aria-current] { background: var(--white); color: var(--green); }

/* ---- "For business" ---- */
.site-head__cta {
  height: 40px;
  padding: 0 8px;
  border-radius: 30px;
  font: 600 14px/normal var(--font);
}

/* ---- phone: logo and language on one row, the button full width below ---- */
@media (max-width: 767px) {
  .site-head__bar {
    flex-wrap: wrap;
    row-gap: 20px;
    padding: 15px 20px;
  }
  .site-head__cta { flex-basis: 100%; }

  /* pinned: logo and a compact button, no language pill (Figma "Variant3") */
  .site-head.is-stuck .site-head__bar { padding: 10px 20px; }
  .site-head.is-stuck .lang-switch { display: none; }
  .site-head.is-stuck .site-head__cta {
    flex-basis: auto;
    padding: 0 18px;
    border-radius: var(--r-button);
  }
}

/* ---- tablet and up: one row, the desktop pill and button ---- */
@media (min-width: 768px) {
  .site-head__bar { padding: 20px 30px; }

  .lang-switch {
    gap: 0;
    height: 47px;
    border-radius: 30px;
    background: var(--chip);
  }
  .lang-switch__item {
    height: 100%;
    padding: 7px 15px;
    border-radius: 30px;
  }

  .site-head__cta {
    height: 47px;
    padding: 0 28px;
    border-radius: var(--r-button);
    font: var(--t5);
  }
}

/* desktop: logo, nav and buttons in three columns, so the nav stays centred
   between them in every language — Figma spaces the three groups evenly */
@media (min-width: 1024px) {
  .site-head__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 20px;
    padding: 30px 40px;
  }
  .site-head__bar .logo { justify-self: start; margin-right: 0; }
  .site-head__end { justify-self: end; }
  .site-nav { display: flex; gap: 2px; }
  .site-nav__link { padding: 12px 10px; }
}

@media (min-width: 1280px) {
  .site-head__bar { padding: 30px 60px; }
  .site-nav { gap: 10px; }
  .site-nav__link { padding: 12px 15px; }
}

/* ==========================================================================
   footer
   ========================================================================== */

.site-foot {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 50px 20px;
  border-radius: var(--r-section) var(--r-section) 0 0;
  background: var(--card);
}
.site-foot > * { width: 100%; max-width: 1360px; margin-inline: auto; }

/* brand, then the columns, 32px apart as in the phone frame */
.site-foot__top { display: flex; flex-direction: column; gap: 32px; }

.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* one run of text across the width it has, not Figma's 299px box, so it
   only wraps where the screen ends */
.foot-brand__tagline { font: var(--t1); color: var(--ink-muted); }

.foot-cols { display: flex; flex-direction: column; gap: 30px; }
/* phone order: contacts, documents, social */
.foot-col--contacts { order: 1; }
.foot-col--docs     { order: 2; }
.foot-col--social   { order: 3; }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.foot-col__title { font: var(--title-card); color: var(--ink); white-space: nowrap; }

/* ---- contacts: a white pill that opens mail or the dialler, and a copy
        button beside it (Figma component 263:9311 "Copy") ---- */
/* the full width on a phone, as in the 375 frame; 335 wide from a tablet
   up, as the Figma component is, so the next column lines up from it */
.contacts { display: flex; flex-direction: column; gap: 5px; width: 100%; }
@media (min-width: 768px) {
  .contacts { width: 335px; }
}
.contact { display: flex; align-items: center; gap: 10px; }
.contact__pill {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 3px 3px 3px 15px;
  border-radius: 33px;
  background: var(--white);
}
.contact__value { font: var(--t14); color: var(--ink); overflow-wrap: anywhere; }
.contact__go { width: 40px; height: 40px; flex: none; transition: transform .2s; }
@media (hover: hover) {
  .contact__pill:hover .contact__go { transform: rotate(45deg); }
}

.copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 30px;
  transition: background-color .2s;
}
.copy__icon { width: 17.2005px; height: 17.2px; }
@media (hover: hover) {
  .copy:hover { background: var(--white); }
}
.copy.is-copied { background: var(--white); box-shadow: inset 0 0 0 2px var(--green); }

/* "Copied", in the page's language (data-copied), over the button for a
   moment. The label hangs from the button's right edge so it stays on a
   phone's screen; its pointer sits over the button's middle. */
.copy::before,
.copy::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.copy::after {
  content: attr(data-copied);
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--night);
  font: var(--t4);
  color: var(--white);
  white-space: nowrap;
  transform: translateY(4px);
}
.copy::before {
  content: "";
  right: 18px;
  bottom: calc(100% + 3px);
  width: 10px;
  height: 10px;
  background: var(--night);
  transform: translateY(4px) rotate(45deg);
}
.copy.is-copied::before,
.copy.is-copied::after { opacity: 1; }
.copy.is-copied::after { transform: none; }
.copy.is-copied::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .copy::before,
  .copy::after { transition: none; }
}

/* ---- social: white circles, 18px icons (Figma component 263:9351) ---- */
.socials { display: flex; align-items: flex-start; gap: 10px; }
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background: var(--white);
  transition: box-shadow .2s;
}
.social__icon { width: 19.3px; height: 19.3px; }
.social__icon--whatsapp { width: 19.3077px; }
/* Telegram's export carries its own white circle, at 50 × 48 */
.social--whole { width: 50px; background: none; }
.social--whole img { width: 50px; height: 48px; }
/* an icon or document still waiting for its address is a plain placeholder */
@media (hover: hover) {
  .social[href]:hover { box-shadow: inset 0 0 0 2px var(--chip-solid); }
  .social--whole[href]:hover { box-shadow: none; opacity: .8; }
}

.foot-links { display: flex; flex-direction: column; gap: 15px; font: var(--t14); color: var(--ink-muted); }
@media (hover: hover) {
  .foot-links a[href]:hover { color: var(--ink); }
}

/* ---- business invitation ---- */
.biz-banner { display: none; }
.biz-button { width: 100%; padding: 13px 18px; }

.site-foot__legal { font: var(--t14); color: var(--ink-muted); }

@media (min-width: 768px) {
  .site-foot { gap: 60px; padding: 40px; }

  /* brand on its own row, the columns side by side beneath it */
  .site-foot__top { gap: 40px; padding: 0 20px; }
  .foot-cols { flex-direction: row; flex-wrap: wrap; gap: 40px 60px; }
  .foot-col--contacts { order: 1; }
  .foot-col--social   { order: 2; }
  .foot-col--docs     { order: 3; }

  .biz-button { display: none; }
  .biz-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 90px;
    padding: 20px 20px 20px 40px;
    border-radius: 20px;
    background: var(--grad-banner);
  }
  .biz-banner__text { font: 500 20px/1.3 var(--font); color: var(--white); }
  .biz-banner__btn  { flex: none; height: 50px; padding-block: 0; }
  /* the banner is the link; its button only looks like one */
  @media (hover: hover) {
    .biz-banner:hover .biz-banner__btn { background: transparent; border-color: var(--night); color: var(--night); }
  }

  .site-foot__legal { text-align: center; }
}

@media (min-width: 1024px) {
  .biz-banner { padding: 20px 20px 20px 67px; }
  .biz-banner__text { font: var(--h2); }
}

/* One row, as in Figma. The 1440 frame leaves the documents column just
   enough room for its longest line, so below 1440 the gaps and the social
   column give way first: each value reaches its Figma size at 1440 and its
   minimum at 1280. */
@media (min-width: 1280px) {
  .site-foot__top { flex-direction: row; gap: clamp(40px, 50vw - 600px, 120px); }
  .foot-brand { flex: none; }
  /* beside the columns it keeps the design's 299px */
  .foot-brand__tagline { max-width: 299px; }
  .foot-cols { flex: 1; flex-wrap: nowrap; gap: clamp(40px, 12.5vw - 120px, 60px); }
  .foot-col--social { flex: none; width: clamp(166px, 44.375vw - 402px, 237px); }
  /* Figma sets social and documents 40px apart, not the columns' usual gap */
  .foot-col--social + .foot-col--docs { margin-left: calc(40px - clamp(40px, 12.5vw - 120px, 60px)); }
  .foot-links { white-space: nowrap; }
}

/* ==========================================================================
   B2B header and phone menu (Figma: "header" 481:5517; phone "Variant5",
   "For Business" and the menu frames 387:6475 / 386:7908)
   ========================================================================== */

/* the burger, and the X it turns into while the menu is open */
.menu-toggle { display: none; flex: none; width: 40px; height: 40px; border-radius: 24px; }
.menu-toggle__icon { width: 40px; height: 40px; }
.menu-toggle__icon--close,
.site-head.is-menu-open .menu-toggle__icon--open { display: none; }
.site-head.is-menu-open .menu-toggle__icon--close { display: block; }

/* On the dark B2B page the bar keeps its own ground wherever it isn't lying
   over the light hero, and it stays solid mint when pinned: 80% glass over
   the dark page would turn it grey. */
.site-head--b2b.is-stuck,
.site-head--b2b.is-menu-open {
  background: var(--mint);
  /* nothing to blur behind a solid bar, and a backdrop filter would make the
     bar the containing block of the fixed menu inside it */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-head--b2b.is-menu-open { border-radius: 0; }
html.is-menu-locked { overflow: hidden; }

@media (max-width: 1279px) {
  .site-head--b2b { background: var(--mint); border-radius: 0 0 30px 30px; }
}

@media (max-width: 767px) {
  /* at rest: logo and language pill, the button below, 20px under it */
  .site-head--b2b .site-head__bar { padding: 15px 20px 20px; }

  /* collapsed: logo, the compact button and the burger, 10px apart */
  .site-head--b2b.is-stuck .site-head__bar,
  .site-head--b2b.is-menu-open .site-head__bar { flex-wrap: nowrap; padding: 10px 20px; }
  .site-head--b2b.is-stuck .menu-toggle,
  .site-head--b2b.is-menu-open .menu-toggle { display: block; margin-left: 5px; }
  .site-head--b2b.is-menu-open .site-head__bar .lang-switch { display: none; }
  .site-head--b2b.is-menu-open .site-head__cta { flex-basis: auto; padding: 0 18px; border-radius: var(--r-button); }
  /* "For customers" is longer: Figma tightens EN to fit */
  .site-head--b2b:lang(en).is-stuck .site-head__bar,
  .site-head--b2b:lang(en).is-menu-open .site-head__bar { padding-right: 15px; }
  .site-head--b2b:lang(en).is-stuck .menu-toggle,
  .site-head--b2b:lang(en).is-menu-open .menu-toggle { margin-left: 0; }
}

/* a tablet has no section nav, so the burger stays in its one-row bar */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-head--b2b .menu-toggle { display: block; margin-left: 5px; }
}

/* the menu: a full screen under the compact bar */
.menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 80px 20px 50px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mint);
}
.site-head__bar { position: relative; z-index: 1; }
/* the menu's own language pill stays, even though the collapsed bar hides its one */
.site-head--b2b .menu .lang-switch { display: inline-flex; }
.menu__list { display: flex; flex-direction: column; width: 100%; }
.menu__list > li { border-bottom: 1px solid #DADFD5; }
.menu__list > li:last-child { border-bottom: 0; }
.menu__link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 0 18px;
  font: var(--title-card);
  color: var(--night);
  text-align: left;
}
.menu__chevron { flex: none; transition: transform .2s; }
.menu__toggle[aria-expanded="true"] { padding-bottom: 15px; color: var(--green); }
.menu__toggle[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }
.menu__sub { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; }
.menu__sublink { display: block; padding: 4px 10px; font: var(--t14); color: var(--night); }
/* pinned 50px above the bottom while the list is short; after the list when it isn't */
.menu__cta { width: 100%; margin-top: auto; }

@media (min-width: 768px) {
  /* the menu keeps the phone's language pill */
  .menu .lang-switch { gap: 10px; height: auto; border-radius: 10px; background: var(--chip-solid); }
  .menu .lang-switch__item { height: auto; padding: 7px 10px; border-radius: 8px; }
  .menu { padding-inline: max(20px, calc(50% - 300px)); padding-top: 107px; }
}
@media (min-width: 1024px) {
  .menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu__chevron { transition: none; }
}

/* ==========================================================================
   B2B footer: the same footer on a dark panel ("For Business" variant)
   ========================================================================== */

.site-foot--dark { background: var(--night); }
.site-foot--dark .logo__word,
.site-foot--dark .foot-col__title,
.site-foot--dark .contact__value { color: var(--white); }
.site-foot--dark .foot-brand__tagline,
.site-foot--dark .foot-links,
.site-foot--dark .site-foot__legal { color: rgba(255, 255, 255, .7); }
.site-foot--dark .contact__pill,
.site-foot--dark .social { background: #343536; }
.site-foot--dark .social--whole { background: none; }
.site-foot--dark .copy.is-copied { background: #343536; }
.site-foot--dark .copy::before,
.site-foot--dark .copy::after { background: var(--white); }
.site-foot--dark .copy::after { color: var(--night); }
@media (hover: hover) {
  .site-foot--dark .copy:hover { background: #343536; }
  .site-foot--dark .foot-links a[href]:hover { color: var(--white); }
}
/* the phone frame dims the documents title along with its links */
@media (max-width: 767px) {
  .site-foot--dark .foot-col--docs .foot-col__title { color: rgba(255, 255, 255, .7); }
}

/* the customers' banner: Figma's own ellipse, title 30px from the left, a
   196px button */
.biz-banner.biz-banner--client {
  padding-left: 30px;
  background: radial-gradient(48.89% 53.85% at 37.66% 54.79%, #FF6B4A 0%, #FFCF4A 100%);
}
.biz-banner--client .biz-banner__btn { width: 196px; padding-inline: 0; }

/* ==========================================================================
   FAQ rows, on the customers' and the business page alike
   (Figma component "Questions" 77:21)
   ========================================================================== */

.faq-item { border-radius: 30px; background: var(--white); }
.faq-item__question {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  font: 700 16px/1.2 var(--font-display);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question > span:first-child { flex: 1; }
.faq-item[open] .faq-item__question { padding: 25px 25px 15px; }

/* plus on a dark-green disc; open, a ring with a × (the plus turned 45°) */
.faq-item__icon {
  flex: none;
  width: 25px;
  height: 25px;
  border: 1.173px solid transparent;
  border-radius: 20px;
  background: var(--green-dark) url("../img/faq-plus.svg") center / 11.25px 11.25px no-repeat;
  transition: background-color .2s;
}
.faq-item[open] .faq-item__icon {
  border-color: var(--green-dark);
  background: url("../img/faq-close.svg") center / 10.557px 10.557px no-repeat;
  transform: rotate(45deg);
}
.faq-item__answer { padding: 0 25px 25px; font: var(--t14); color: var(--ink-label); }

/* ==========================================================================
   Motion, on both pages (design brief §10)
   ========================================================================== */

/* Blocks marked data-reveal rise up to 24px and fade in as they're scrolled
   to. site.js turns it on (html.reveal-ready) and never hides what's already
   on screen, so nothing flickers and nothing waits on the script to be
   seen. `translate` rather than `transform`, so a block's own transform (a
   centring translate, say) is left alone. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready [data-reveal]:not(.is-revealed):not(.is-shown) { opacity: 0; }
  [data-reveal].is-revealed {
    animation: reveal-in var(--reveal-time) var(--ease-out) var(--reveal-delay, 0ms) backwards;
  }

  /* the round copy button gives like the pill ones */
  .copy { transition: background-color .2s, box-shadow .2s, scale .15s var(--ease-out); }
  .copy:active { scale: .92; }

  /* the business page's phone menu drops in */
  .menu:not([hidden]) { animation: reveal-in .25s var(--ease-out); --reveal-shift: -12px; }

  /* the accordion: the plus turns into a cross, the answer eases in */
  .faq-item__icon { transition: background-color .2s, border-color .2s, transform .25s var(--ease-out); }
  .faq-item[open] .faq-item__answer { animation: reveal-in .25s var(--ease-out); --reveal-shift: -8px; }
}

@keyframes reveal-in {
  from { opacity: 0; translate: 0 var(--reveal-shift); }
}