/* ==========================================================================
   gracioo — QR code tipping landing
   Built from Figma "ОАЭ-Проект" → Лаймовый → Homepage — English (1440 canvas)
   Layout is mobile-first; the 1440 design is the top breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------- 1. reset */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, ul, li, figure, address {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address { font-style: normal; }

summary::-webkit-details-marker { display: none; }

/* -------------------------------------------------------------- 2. tokens */

:root {
  /* palette — sampled from the Figma file */
  --ink:          #00241b;   /* primary dark green                */
  --ink-64:       rgba(0, 36, 27, .64);
  --ink-62:       rgba(0, 36, 27, .62);
  --ink-90:       rgba(1, 36, 27, .9);
  --deep:         #004422;   /* headings on light / lime cards    */
  --accent:       #73a916;   /* brand green                       */
  --lime:         #c0ee4e;   /* lime stat card                    */
  --page:         #f8f6f6;   /* page background                   */
  --surface:      #ece9ea;   /* cards, join block                 */
  --muted:        #58534f;   /* stone/40 — body copy              */
  --muted-light:  #c4bcb6;   /* stone/65 — copy on dark           */

  /* radii */
  --r-xl: 40px;
  --r-lg: 24px;

  /* rhythm */
  --gutter:    16px;
  --shell:     1408px;   /* hero / footer card width  */
  --shell-sm:  1340px;   /* inner content width       */
  --gap-section: 150px;

  /* type ramp — fluid between 360px and 1440px viewports */
  --fs-h2:       clamp(2.125rem, 1.0446rem + 4.8016vw, 4.5rem);    /* 34 → 72 */
  --fs-hero:     clamp(2.5rem,  1.1786rem + 5.8730vw,  5.5625rem); /* 40 → 89 */
  --fs-lead:     clamp(1.0625rem, .9489rem + .5051vw, 1.5rem);     /* 17 → 24 */
  --fs-card-h:   clamp(1.625rem, 1.2273rem + 1.7677vw, 2.5rem);    /* 26 → 40 */
  --fs-card-p:   clamp(1rem, .8864rem + .5051vw, 1.25rem);         /* 16 → 20 */
  --fs-stat:     clamp(4rem, 2.4091rem + 7.0707vw, 7.5rem);        /* 64 → 120 */
  --fs-stat-cap: clamp(1.25rem, 1.0227rem + 1.0101vw, 1.75rem);    /* 20 → 28 */
  --fs-body:     clamp(1rem, .6818rem + 1.4141vw, 1.4375rem);      /* 16 → 23 */

  color-scheme: light;
}

/* ------------------------------------------------------------- 3. base */

body {
  background: var(--page);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section {
  width: min(100% - var(--gutter) * 2, var(--shell-sm));
  margin-inline: auto;
  margin-block-start: var(--gap-section);
}

.accent { color: var(--accent); }

.h-section {
  font-family: Onest, Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
}

/* the italic "gracioo" wordmark set inline inside a heading */
.h-logo,
.join__logo {
  display: inline-block;
  width: auto;
  height: .96em;
  vertical-align: baseline;
  translate: 0 .12em;
}

/* ----------------------------------------------------------- 4. header */

.header { padding-block: 25px 0; }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.header__logo {
  grid-column: 2;
  justify-self: center;
}

.header__logo img {
  width: clamp(112px, 11vw, 161px);
  height: auto;
}

.header__contacts {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: clamp(.8125rem, .7rem + .5vw, 1.125rem);
  line-height: 1.2;
}

.header__phone {
  font-family: Onest, Inter, sans-serif;
  color: var(--ink);
}

.header__note { color: rgba(0, 0, 0, .5); }

.header__mail {
  font-family: Onest, Inter, sans-serif;
  color: rgba(0, 0, 0, .5);
  word-break: break-all;
}

.header__phone:hover,
.header__mail:hover { color: var(--accent); }

/* ------------------------------------------------------------- 5. hero */

.hero {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
  margin-block-start: 31px;
}

.hero__card {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1408 / 706;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* Figma radial gradient (node 230:87839), composited over white */
  background:
    radial-gradient(207.5% 182.6% at 76% 110.1%,
      #f7f700 0%,
      #f7f700 15.87%,
      rgba(249, 231, 11, .93) 23.2%,
      rgba(251, 215, 21, .86) 30.53%,
      rgba(255, 183, 42, .72) 45.2%,
      rgba(247, 200, 69, .79) 48.24%,
      rgba(238, 217, 96, .86) 51.29%,
      rgba(222, 251, 150, 1) 57.38%,
      rgba(222, 251, 150, 1) 100%),
    #fff;
}

.hero__copy {
  position: absolute;
  left: 5.11%;              /* 72 / 1408 */
  top: 27.34%;              /* 193 / 706 */
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 2.27cqw;             /* 32px */
  z-index: 2;
}

.hero__title {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 10ch;
}

.hero__lead {
  font-family: Onest, Inter, sans-serif;
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--ink-64);
  max-width: 31.04cqw;      /* 437px */
}

.hero__stage {
  position: absolute;
  inset: 0;
}

.hero__portrait {
  position: absolute;
  left: 45.74%;
  bottom: 0;
  width: 47.04%;            /* 662.4 / 1408 */
  height: 97.03%;           /* 685 / 706   */
  object-fit: cover;
  object-position: 49.45% 0;
}

.hero__clover {
  position: absolute;
  left: 52.27%;
  top: 31.16%;
  width: 10.37%;
  height: auto;
  z-index: 2;
}

.hero__swoosh {
  position: absolute;
  left: 81.68%;
  top: 60.06%;
  width: 8.24%;
  height: auto;
  z-index: 2;
}

/* “Tip” pill ------------------------------------------------- */

/* the pill is its own container, so its innards scale with it at every width */
.hero__tip {
  container-type: inline-size;
  position: absolute;
  left: 77.34%;
  top: 20.25%;
  width: 16.26%;            /* 229 / 1408 */
  aspect-ratio: 229 / 82;
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ink);
  z-index: 3;
}

.hero__tip-badge {
  position: absolute;
  left: 4.07%;              /* 9.32 / 229 */
  top: 10.8%;               /* 8.86 / 82  */
  width: 27.52%;            /* 63.03 / 229 */
  aspect-ratio: 1;
}

.hero__tip-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__tip-arrow {
  inset: 50% auto auto 50% !important;
  width: 56% !important;
  height: 56% !important;
  translate: -50% -50%;
  rotate: 45deg;
}

.hero__tip-label {
  font-family: Onest, Inter, sans-serif;
  font-weight: 700;
  font-size: 14.44cqw;      /* 33.075 / 229 */
  letter-spacing: .01em;
  line-height: .9;
  color: #fff;
  margin-left: 48.5%;       /* 111 / 229 */
}

/* “Rate how is Kate” card ------------------------------------ */

/* every offset below is the Figma value ÷ 300.489 (w) or ÷ 138.939 (h);
   the card is its own container so it scales as one piece */
.hero__rate {
  container-type: inline-size;
  position: absolute;
  left: 41.12%;
  top: 65.58%;
  width: 21.34%;            /* 300.489 / 1408 */
  aspect-ratio: 300.489 / 138.939;
  border-radius: 8.07cqw;   /* 24.243 / 300.489 */
  background: #fff;
  z-index: 3;
}

.hero__rate-avatar {
  position: absolute;
  left: 5.21%;              /* 15.65 */
  top: 6.45%;               /*  8.96 */
  width: 16.76%;            /* 50.356 */
  height: auto;
  border-radius: 50%;
}

.hero__rate-name {
  position: absolute;
  left: 26.16%;             /* 78.62 */
  top: 15.5%;
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: 6.81cqw;       /* 20.464 / 300.489 */
  line-height: 1.1;
  color: #000;
  white-space: nowrap;
}

.hero__rate-stars {
  position: absolute;
  left: 5.65%;              /* 16.99 */
  top: 50%;                 /* 69.47 */
  display: flex;
  gap: 1.45%;               /* pitch 53.37 − star 49.011 */
}

.hero__rate-stars img {
  width: 16.31cqw;          /* 49.011 / 300.489 */
  height: auto;
}

/* -------------------------------------------------------------- 6. why */

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.why__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

/* cards 2 and 4 sit 70px lower in the mockup */
.why__card--low { margin-top: 70px; }

.why__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  flex: none;
}

/* card 1 carries a lime glow behind the illustration (node 230:88173) */
.why__card--glow .why__art {
  background:
    radial-gradient(70.7% 28.9% at 42.3% 105.1%,
      #f7f700 0%,
      #f7f700 15.87%,
      rgb(228, 241, 11) 26.57%,
      rgb(210, 236, 22) 37.26%,
      rgb(172, 224, 44) 58.66%,
      rgb(180, 225, 67) 63.04%,
      rgb(188, 226, 91) 67.43%,
      rgb(204, 229, 139) 76.21%,
      rgb(220, 231, 186) 84.98%,
      rgb(236, 233, 234) 93.75%),
    var(--surface);
}

.why__art img {
  position: absolute;
  left: 6.15%;
  top: 8.6%;
  width: 82.8%;
  height: auto;
}

.why__card:nth-child(2) .why__art img { left: 5.86%; top: 5.97%; width: 82.1%; }
.why__card:nth-child(3) .why__art img { left: 3.47%; top: 5%;    width: 88.9%; }
.why__card:nth-child(4) .why__art img { left: .89%;  top: 12.7%; width: 99.4%; }

.why__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.why__title {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: var(--fs-card-h);
  line-height: 1.1;
  color: var(--ink);
}

.why__text {
  font-size: var(--fs-card-p);
  line-height: 1.3;
  color: var(--muted);
}

/* Figma pins a different measure on each card so the copy breaks the same way */
.why__card:nth-child(1) .why__text { max-width: 267px; }
.why__card:nth-child(2) .why__text { max-width: 304px; }
.why__card:nth-child(3) .why__text { max-width: 271px; }
.why__card:nth-child(4) .why__text { max-width: 298px; }

/* ------------------------------------------------------------- 7. join */

.join-wrap { width: min(100% - var(--gutter) * 2, 1335px); }

.join {
  display: grid;
  grid-template-columns: minmax(0, 558px) 555px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 49px 64px 40px;
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
}

.join__photo img {
  width: 100%;
  max-width: 558px;
  height: auto;
}

.join__copy {
  display: flex;
  flex-direction: column;
  gap: 49px;
}

.join__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.join__title {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 1.1364rem + 3.8384vw, 3.75rem);  /* 32 → 60 */
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: .25em;
  white-space: nowrap;
}

.join__sub,
.join__label {
  font-family: Onest, Inter, sans-serif;
  font-size: var(--fs-lead);
  line-height: 1.2;
  color: var(--ink-62);
}

.join__contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.join__phone {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(1.625rem, 1.0189rem + 2.6936vw, 2.75rem); /* 26 → 44 */
  line-height: 1;
  color: var(--ink);
}

.join__phone a:hover { color: var(--accent); }

.join__mail {
  font-family: Onest, Inter, sans-serif;
  font-size: var(--fs-card-p);
  line-height: 1.2;
  color: var(--ink-62);
}

.join__mail a:hover { color: var(--accent); }

/* ------------------------------------------------------------ 8. stats */

.stats { width: min(100% - var(--gutter) * 2, 1224px); }

.stats__title { line-height: 1.05; }

.stats__grid {
  display: grid;
  grid-template-columns: 400fr 400fr 400fr;
  grid-template-rows: 408px 119px;
  gap: 12px;
  margin-top: 64px;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-align: center;
  color: var(--deep);
}

.stat--dark {
  padding: 32px;
  color: #fff;
  background: var(--ink);
}

/* The Figma glow is a *tilted* ellipse (node 230:88078), which plain
   radial-gradient() cannot express — so it is drawn on a rotated layer. */
.stat--dark::before {
  content: "";
  position: absolute;
  left: 7.25%;
  top: 135.9%;
  width: 325.7%;            /* 2 × 651.34 / 400 */
  height: 132.9%;           /* 2 × 271.18 / 408 */
  translate: -50% -50%;
  rotate: 17.76deg;
  background:
    radial-gradient(closest-side,
      #f7f700 0%,
      #f7f700 53.22%,
      rgb(237, 244, 14) 53.9%,
      rgb(226, 241, 27) 54.58%,
      rgb(206, 235, 54) 55.94%,
      rgb(185, 229, 81) 57.3%,
      rgb(164, 223, 108) 58.66%,
      rgb(123, 176, 88) 67.43%,
      rgb(82, 130, 68) 76.21%,
      rgb(62, 106, 57) 80.59%,
      rgb(41, 83, 47) 84.98%,
      rgb(21, 59, 37) 89.37%,
      rgb(10, 48, 32) 91.56%,
      rgba(0, 36, 27, 1) 93.75%,
      rgba(0, 36, 27, 0) 93.76%);
}

.stat--dark > * { position: relative; z-index: 1; }

.stat--plain { background: var(--surface); }

.stat--lime {
  grid-column: 3;
  grid-row: 1 / span 2;
  background: var(--lime);
}

.stat--bar {
  grid-column: 1 / span 2;
  grid-row: 2;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 24px;
  background: var(--surface);
}

.stat__cap {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: var(--fs-stat-cap);
  line-height: 1.1;
}

.stat__num {
  font-family: Onest, Inter, sans-serif;
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.stat__num--stacked {
  font-weight: 600;
  font-size: clamp(3.25rem, 2.1023rem + 5.1010vw, 6rem);   /* 52 → 96 */
  display: flex;
  flex-direction: column;
}

.stat__num--stacked span {
  font-size: clamp(1.125rem, .7614rem + 1.6162vw, 2rem);   /* 18 → 32 */
  font-weight: 700;
  letter-spacing: 0;
}

.stat__note {
  font-size: var(--fs-lead);          /* 24px at the design width */
  line-height: 1.2;
}

.stat--dark .stat__note { color: var(--muted-light); }

.stat--lime .stat__note {
  font-family: Onest, Inter, sans-serif;
  font-size: var(--fs-stat-cap);
}

.stat__bar-num {
  font-family: Onest, Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 1.5909rem + 4.0404vw, 5rem);    /* 40 → 80 */
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--deep);
}

.stat__bar-note {
  font-family: Onest, Inter, sans-serif;
  font-size: var(--fs-lead);          /* 24px at the design width */
  line-height: 1.2;
  color: var(--deep);
}

/* -------------------------------------------------------- 9. how it works */

.how { width: min(100% - var(--gutter) * 2, 1343px); }

.how__stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1343 / 600;
  margin-top: 64px;
}

.how__step {
  position: absolute;
  font-size: 1.56cqw;                     /* 21px */
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  z-index: 2;
}

.how__step--1 { left: 4.4%;  top: 26.5%; width: 14%; }   /* 188 / 1343 */
.how__step--2 { left: 42.1%; top: 39.2%; width: 14%; }

.how__arrow { position: absolute; height: auto; }
.how__arrow--1 { left: 11.2%; top: 51%;   width: 14.1%; }
.how__arrow--2 { left: 42.4%; top: 49.5%; width: 12.8%; }

/* the SVG already carries its white card and drop shadow (5px / 3px of bleed) */
.how__qr {
  position: absolute;
  left: 26.73%;
  top: 41.33%;
  width: 14.82%;            /* 199 / 1343 */
  height: auto;
  z-index: 2;
}

.how__phone {
  position: absolute;
  left: 59.8%;
  top: 0;
  width: 21.7%;
  height: auto;
  z-index: 2;
}

.how__hand {
  position: absolute;
  left: 76.7%;
  top: 7.8%;
  width: 22.3%;
  height: auto;
  z-index: 3;
}

/* --------------------------------------------------------- 10. reviews */

.reviews { width: min(100% - var(--gutter) * 2, 1390px); }

.reviews__viewport {
  margin-top: 64px;
  overflow: hidden;
}

.reviews__track {
  display: flex;
  gap: 40px;
  transition: translate .45s cubic-bezier(.4, 0, .2, 1);
}

.review {
  flex: 0 0 368px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 40px;
  border-right: 1px solid rgba(1, 36, 27, .25);
}

.review:last-child { border-right: 0; }

.review__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: var(--ink);
}

.review__avatar img { width: 43px; height: auto; }

.review__avatar--art {
  background: none;
  border-radius: 0;
}

.review__avatar--art img { width: 57px; }

.review__who,
.review__text {
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--ink);
}

.review__stars {
  font-size: clamp(1.125rem, .9rem + 1vw, 1.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
}

.review__star--off { color: var(--ink); }

.reviews__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 43px;
  padding-right: 50px;
}

.reviews__btn {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  transition: opacity .2s, scale .2s;
}

.reviews__btn:hover { scale: 1.06; }
.reviews__btn:disabled { opacity: .5; cursor: default; scale: 1; }
.reviews__btn img { width: 100%; height: 100%; }

/* ------------------------------------------------------------- 11. faq */

.faq { width: min(100% - var(--gutter) * 2, 1070px); }

.faq__list {
  margin-top: 64px;
  border-bottom: 1px solid var(--ink);
}

.faq__item { border-top: 1px solid var(--ink); }

.faq__q {
  position: relative;
  display: block;
  padding: 20px 48px 20px 0;
  font-size: clamp(1.25rem, 1.0227rem + 1.0101vw, 1.75rem);  /* 20 → 28 */
  line-height: 1.29;
  color: var(--ink-90);
  cursor: pointer;
  list-style: none;
}

/* + / − toggle, drawn as two 1px rules */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(20px + .645em);
  width: 16px;
  height: 1px;
  background: var(--ink-90);
  transition: rotate .25s ease, opacity .25s ease;
}

.faq__q::after { rotate: 90deg; }

.faq__item[open] > .faq__q::after { rotate: 0deg; opacity: 0; }

.faq__item--static > .faq__q { cursor: default; pointer-events: none; }
.faq__item--static > .faq__q::before,
.faq__item--static > .faq__q::after { display: none; }

.faq__q--link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__a {
  padding: 0 0 20px;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--ink-90);
  max-width: 989px;
}

/* ---------------------------------------------------------- 12. footer */

.footer {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
  margin-block-start: 110px;
}

.footer__card {
  padding: 82px 165px 60px;
  border-radius: var(--r-xl);
  color: rgba(255, 255, 255, .9);
  /* lime glow sweeping the bottom edge out of the left corner */
  background:
    radial-gradient(100% 19% at 0% 100%,
      #f7f700 0%,
      #c0e645 10%,
      #96cf64 27%,
      #6ea151 44%,
      #406d3a 61%,
      #1c4228 78%,
      #04271c 95%,
      var(--ink) 100%),
    var(--ink);
}

.footer__cols {
  display: grid;
  grid-template-columns: 273px max-content 258px;
  justify-content: space-between;
  column-gap: clamp(32px, 6vw, 148px);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.footer__col--support { gap: 24px; }

.footer__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__h {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.footer__muted {
  font-size: 16px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .8);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
}

.footer__links img {
  flex: none;
  width: 20px;
  height: auto;
}

.footer__links a:hover { text-decoration: underline; }

.is-underlined {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: rgba(255, 255, 255, .8);
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.1;
  color: rgba(255, 255, 255, .8);
}

.footer__legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__copy {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .8);
}

.footer__fine {
  margin-top: 116px;
  font-size: 16px;
  line-height: 1.1;
  color: rgba(255, 255, 255, .8);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 0 40px 149px;
  font-size: 16px;
  line-height: 1.375;
  color: var(--muted);
}

.footer__bottom a { text-decoration: underline; text-underline-offset: 2px; }

/* ====================================================================== */
/*  13. responsive                                                        */
/* ====================================================================== */

/* ---- ≤1280: pull the generous paddings in --------------------------- */
@media (max-width: 1280px) {
  :root { --gap-section: clamp(80px, 10vw, 150px); }

  .join { grid-template-columns: 1fr 42%; gap: 32px; padding: 40px; }
  .join__title { white-space: normal; flex-wrap: wrap; }

  .footer__card { padding: 64px 7% 48px; }
  .footer__cols { gap: clamp(32px, 6vw, 148px); }
  .footer__bottom { padding-left: 7%; }
  .footer__fine { margin-top: 72px; }

  .reviews__nav { padding-right: 0; }
}

/* ---- ≤1024: three-up “why”, stats reflow ---------------------------- */
@media (max-width: 1024px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .why__card--low { margin-top: 0; }
  .why__card:nth-child(2n) { margin-top: 56px; }

  /* a clean 2 × 2 — the mockup's tall lime card and wide bar both
     become ordinary cards so no cell is left empty */
  .stats__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .stat { min-height: 300px; padding: 28px 20px; }
  .stat--dark  { grid-area: 1 / 1; }
  .stat--plain { grid-area: 1 / 2; }
  .stat--lime  { grid-area: 2 / 1; }
  .stat--bar {
    grid-area: 2 / 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 20px;
    text-align: center;
  }

  .footer__cols { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__legal { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
}

/* ---- ≤860: hero becomes a stack ------------------------------------- */
@media (max-width: 860px) {
  .hero__card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }

  .hero__copy {
    position: static;
    width: auto;
    padding: 40px 28px 28px;
    gap: 16px;
  }

  .hero__title { max-width: none; }
  .hero__lead { max-width: 46ch; }

  .hero__stage {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / .72;
  }

  /* re-anchor the floating bits to the smaller stage */
  .hero__portrait { left: 34%; width: 66%; height: 100%; }
  .hero__clover   { left: 30%; top: 22%;  width: 17%; }
  .hero__swoosh   { left: 84%; top: 50%;  width: 13%; }

  .hero__tip {
    left: auto;
    right: 3%;
    top: 8%;
    width: 27%;
  }

  .hero__rate {
    left: 3%;
    top: auto;
    bottom: 6%;
    width: 46%;
  }

  .join {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px;
  }
  .join__copy { gap: 32px; }

  .how__stage { aspect-ratio: auto; display: grid; gap: 28px; }
  .how__step, .how__arrow, .how__qr, .how__phone, .how__hand {
    position: static;
    width: auto;
  }
  .how__arrow { display: none; }
  .how__stage {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "qr   step1"
      "step2 step2"
      "phone phone";
    align-items: center;
    justify-items: start;
  }
  .how__qr    { grid-area: qr;    width: min(160px, 34vw); padding: 12px; border-radius: 16px; }
  .how__step--1 { grid-area: step1; font-size: var(--fs-card-p); text-align: left; }
  .how__step--2 { grid-area: step2; font-size: var(--fs-card-p); text-align: left; }
  .how__phone { grid-area: phone; justify-self: center; width: min(280px, 62vw); }
  .how__hand  { display: none; }

  .review { flex: 0 0 300px; padding-right: 28px; }
  .reviews__track { gap: 28px; }

  .footer__card { padding: 48px 24px 40px; border-radius: var(--r-lg); }
  .footer__cols { grid-template-columns: 1fr; gap: 40px; }
  .footer__links li { white-space: normal; }
  .footer__links a { word-break: break-word; }
  .footer__col:last-child { grid-column: auto; }
  .footer__legal { flex-direction: column; }
  .footer__fine { margin-top: 40px; }
  .footer__copy { margin-top: 24px; }
  .footer__bottom { padding: 24px 0 32px 24px; }
}

/* ---- ≤600: single column everywhere --------------------------------- */
@media (max-width: 600px) {
  :root { --gutter: 12px; --r-xl: 28px; }

  .header { padding-top: 16px; }
  .header__inner { grid-template-columns: auto 1fr; align-items: center; }
  .header__logo { grid-column: 1; justify-self: start; }
  .header__contacts { grid-column: 2; }

  .hero { margin-block-start: 20px; }
  .hero__copy { padding: 28px 20px 20px; }

  .why__grid { grid-template-columns: 1fr; gap: 40px; }
  .why__card:nth-child(2n) { margin-top: 0; }
  .why__art { max-width: 325px; }
  .why__title, .why__text { max-width: none; }
  .why__text { margin-top: -16px; }

  /* single column — every explicit placement from the wider breakpoints has to
     be cleared, or `grid-area: 1 / 2` on a card spawns an implicit 2nd column */
  .stats__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .stat--dark,
  .stat--plain,
  .stat--lime,
  .stat--bar { grid-area: auto; }
  .stat--bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
  }
  .stat { min-height: 260px; }
  .stat--bar { min-height: 0; }   /* a one-line stat, not a full card */

  .review { flex: 0 0 82vw; padding-right: 20px; }
  .reviews__track { gap: 20px; }
  .reviews__nav { margin-top: 28px; }

  .faq__q { padding-right: 36px; }
}

/* ---- motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- focus ----------------------------------------------------------- */
:where(a, button, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}