/* ===================== FONTS ===================== */
@font-face{font-family:'Onest';src:url('../fonts/Onest/static/Onest-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest/static/Onest-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest/static/Onest-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest/static/Onest-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Onest';src:url('../fonts/Onest/static/Onest-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}

/* ===================== TOKENS ===================== */
:root{
  --dark:#0D0D0D;
  --dark-2:#202020;
  --hero-dark:#050B0C;
  --card-dark:#070707;
  --green:#79C141;
  --green-sec:#69A738;
  --green-btn:#328E34;
  --green-btn-hi:#5FB761;
  --green-btn-lo:#1F5F22;
  --green-deep:#296A2C;
  --yellow:#F8FCC8;
  --gold:#EFD9A0;
  --blue:#3691FF;
  --blue-lo:#1F7BEF;
  --white:#fff;
  --muted:rgba(255,255,255,.78);
  --radius:16px;
  --container:1278px;
}

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
/* єдиний межлітерний інтервал -4% (рахується від кегля кожного елемента) */
*,*::before,*::after{letter-spacing:-.04em}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--dark);
  color:var(--white);
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
b,strong{font-weight:700}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.container--narrow{max-width:856px}
.center{text-align:center}
.accent{color:var(--green)}
.gold{color:var(--gold)}

.section{padding:50px 0}
.section > .container{display:flex;flex-direction:column;gap:30px}
.section > .container > *{width:100%}
.section--dark{background:var(--dark)}
.section--green{background:var(--green-sec)}

.h2{
  font-size:40px;
  line-height:1.18;
  font-weight:700;
  margin:0;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4.364px;
  width:min(420px,100%);
  min-height:79px;
  padding:20.8px 48.8px 14.836px 48.2px;
  border:0;
  border-radius:19.262px;
  font-family:inherit;
  font-size:19px;
  line-height:1.2;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  text-align:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn--green{
  color:#fff;
  background:linear-gradient(90deg,#248026 -2.43%,#62BD64 28%,#248026 76%);
  box-shadow:
    -2.735px -5.47px 9.573px 0 rgba(0,0,0,.15) inset,
    5.47px 4.1px 10.94px 0 rgba(255,255,255,.41) inset,
    0 4.1px 0 0 #0D490E;
}
.btn--yellow{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  height:81.6px;
  min-height:0;
  padding:0 48.8px 0 48.2px;
  border-radius:16.052px;
  color:#1A1A1A;
  background:linear-gradient(90deg,#F7FF9D -2.43%,#FAFFC7 26.03%,#F7FF9D 75%);
  box-shadow:
    -2.279px -4.558px 7.977px 0 #ADB45C inset,
    4.558px 3.419px 9.117px 0 rgba(255,255,255,.41) inset,
    0 3.419px 0 0 #7D8156;
}
.btn--blue{
  position:relative;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:6.871px;
  align-self:stretch;
  width:100%;
  max-width:none;
  height:90.703px;
  min-height:0;
  padding:0 24px;
  border-radius:140px;
  color:#fff;
  background:linear-gradient(95deg,#3F95FF 2.95%,#0072FF 85.35%);
  box-shadow:
    1.569px 1.569px 31.384px 0 rgba(255,255,255,.50) inset,
    0 5.497px 0 0 #0450AD,
    0 8.246px 54.971px 0 rgba(63,149,255,.60);
  /* типографіка напису */
  text-align:center;
  font-size:27.486px;
  font-weight:700;
  line-height:110%;
  letter-spacing:-1.099px;
  text-transform:uppercase;
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;
}
.btn--blue img{flex:0 0 auto}
/* 1.353px рамка-градієнт #A0CAFF 70% -> прозорий */
.btn--blue::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.353px;
  background:linear-gradient(180deg,rgba(160,202,255,.70) 0%,rgba(160,202,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(3px)}
.btn:active{box-shadow:none}
.btn__main{white-space:nowrap}
.btn__sub{
  font-size:14.5px;
  line-height:1.2;
  font-weight:500;
  text-transform:none;
  opacity:.94;
}
.btn__sub b{font-weight:700}

/* ===================== 1. HERO ===================== */
.hero{
  position:relative;
  min-height:786px;
  display:flex;
  align-items:center;
  background:var(--hero-dark);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../Img/hero-bg.png') center/cover no-repeat;
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,10,11,0) 72%, rgba(13,13,13,.9) 100%);
}

.hero__person{
  position:absolute;
  right:0;bottom:0;
  width:753px;
  max-width:53%;
  z-index:1;
  pointer-events:none;
}
.hero__person img{width:100%;height:auto}
.hero__person.is-empty{display:none}

.hero__inner{position:relative;z-index:2;width:100%}
.hero__content{
  max-width:667px;
  padding:56px 0 64px;
}

.hero__badges{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.tag{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;
  border:0;
  border-radius:12px;
  background:rgba(15,15,15,.20);
  font-size:19px;
  font-weight:600;
}
/* 1px рамка-градієнт #79C141 -> прозорий, як на мобільній версії */
.tag::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,#79C141 0%,rgba(121,193,65,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.tag--green{color:var(--green)}
.flag{font-size:18px}

.hero__title{
  align-self:stretch;
  color:#fff;
  font-size:55px;
  line-height:120%;
  font-weight:700;
  margin:0 0 30px;
}

.pills{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px}
.pill{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4.602px;
  padding:10px;
  border:0;
  border-radius:10px;
  background:rgba(35,35,35,.20);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}
/* 1px рамка-градієнт #79C141 -> прозорий (Stroke: Inside) */
.pill::before,
.prog__item::before,
.note--green::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,#79C141 0%,rgba(121,193,65,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.pill__ico{flex:0 0 auto;width:16px;height:16px;font-size:14px;line-height:1}

.bonus{position:relative;margin-bottom:24px;max-width:420px}
.bonus__timer{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:2.876px;
  height:26.194px;
  padding:0 10px;
  margin-left:117px;
  border-radius:5.752px;
  border:.288px solid #79C141;
  background:linear-gradient(103deg,#0B520F 18.95%,#5C955F 100%);
  -webkit-backdrop-filter:blur(9.2px);
  backdrop-filter:blur(9.2px);
  transform:rotate(-1.284deg);
  font-size:12.5px;
  font-weight:500;
  line-height:1;
  position:relative;
  bottom:-6px;
  z-index:2;
}
.bonus__timer b{font-size:15px;font-weight:800;line-height:1}
.bonus__card{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:420px;
  max-width:100%;
  height:120px;
  padding:13px;
  border-radius:12.99px;
  background:#FFF;
  color:#2C2C2C;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
}
.bonus__thumb{position:relative;flex:0 0 89px;width:89px;margin-left:1px;align-self:center}
.bonus__frame{position:relative;z-index:1;width:89px;height:auto;display:block;pointer-events:none}
.bonus__video{
  position:absolute;
  z-index:2;
  left:5.62%;top:6.2%;width:89.89%;height:86.82%;
  object-fit:cover;
  border-radius:3px;
  background:#C4C4C4;
}
.bonus__text{
  width:271px;
  max-width:100%;
  color:#2C2C2C;
  font-size:14px;
  font-weight:500;
  line-height:16.79px;
}
.bonus__title{
  color:#79C141;
  font-weight:700;
  font-size:16px;
  line-height:19px;
  margin:0 0 2px;
}
.bonus__text .accent{color:#79C141;font-weight:700}

.hero__cta{width:420px}

/* ===================== 2. WHY ===================== */
.s-why .h2{max-width:900px;margin-inline:auto}
.s-why__text{
  display:flex;
  flex-direction:column;
  gap:30px;
  max-width:808px;
  margin-inline:auto;
  text-align:center;
  color:#fff;
  font-size:19.5px;
  line-height:1.5;
}
.lb{display:inline}
.mb{display:none}
.s-why__text .accent{font-weight:700}

/* ===================== 3. FORMAT ===================== */
.s-format .h2{max-width:1000px;margin:0 auto}
.s-format__lead{
  max-width:808px;
  margin:0 auto;
  text-align:center;
  font-size:20px;
  line-height:1.2;
}
.s-format__lead b{color:#FFE5B3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .s-format__lead b{
    background:linear-gradient(90deg,#FFE5B3 0%,#FFFFFF 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

.fcards{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:28px 23px;
}
.fcard{
  grid-column:span 2;
  position:relative;
  margin:0;
  aspect-ratio:390/263;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(160deg,#20301c,#0f1a0d);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.fcard:nth-child(4){grid-column:2/4}
.fcard:nth-child(5){grid-column:4/6}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcard figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:56px 50px 18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.92) 100%);
}
.fcard__title{font-size:22px;font-weight:600;line-height:1.2;margin-bottom:6px}
.fcard__sub{font-size:18px;line-height:1.25;color:rgba(255,255,255,.85);margin:0}

.note{
  border-radius:var(--radius);
  padding:26px 34px;
  text-align:center;
  font-size:16px;
  line-height:1.5;
}
.note--dark{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4.602px;
  max-width:651px;
  height:140px;
  margin-left:auto;margin-right:auto;
  padding:0 30px;
  border-radius:10px;
  border:1px solid #FFF;
  background:rgba(35,35,35,.20);
  font-size:20px;
  line-height:1.2;
}
.note--dark p{margin:0}
.note--dark b{color:var(--yellow)}

/* ===================== 4. FOR WHOM ===================== */
.fors{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24.5px;
}
.for__img{
  align-self:stretch;
  height:145.229px;
  border-radius:11.171px;
  border:1.117px solid #79C141;
  background:#363636;
  overflow:hidden;
  margin-bottom:16px;
}
.for__img img{width:100%;height:100%;object-fit:cover}
.for__title{
  color:var(--green);
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  margin:0 0 10px;
}
.for p{font-size:15px;line-height:1.45;color:#fff}
.for p b{color:#fff}

/* ===================== 5. PROGRAM ===================== */
.prog{display:flex;flex-direction:column;gap:16px}
.prog__item{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:22px 26px;
  border-radius:14px;
  background:rgba(35,35,35,.20);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  font-size:16px;
  line-height:1.35;
  font-weight:500;
}
.prog__ico{flex:0 0 auto;font-size:17px;line-height:1.35}

.note--green{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:15px;
  max-width:808px;
  margin-inline:auto;
  padding:20px 30px;
  border:0;
  border-radius:10px;
  background:linear-gradient(103deg, rgba(11,82,15,.30) 18.95%, rgba(92,149,95,.30) 100%);
  box-shadow:0 1.999px 4.997px 0 rgba(0,0,0,.25);
  text-align:left;
  color:#fff;
  font-size:16px;
  line-height:20px;
}
.note--green p{margin:0}

.note__head{color:#fff}
.note--wide{max-width:792px;padding:30px;gap:20px;margin-left:auto;margin-right:auto}

/* ===================== 6. ABOUT ===================== */
.s-about__sub{
  max-width:none;
  margin:0 auto;
  text-align:center;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
}

.gallery{
  display:grid;
  grid-template-columns:minmax(0,489fr) minmax(0,506fr);
  gap:15px;
  max-width:1010px;
  aspect-ratio:1010/463;
  margin:0 auto;
}
.gallery__collage{min-width:0;min-height:0}
.gallery__collage img{width:100%;height:100%;object-fit:contain;object-position:top right}
.ph{
  border-radius:14px;
  overflow:hidden;
  min-height:0;
  background:linear-gradient(150deg,#1c1c1c,#0b0b0b);
}
.ph img{width:100%;height:100%;object-fit:cover}

.gallery__main{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  min-height:0;
  background:url('../Img/author-main.png') top center/cover no-repeat;
}
.gallery__card{
  flex:0 0 35.9%;
  z-index:1;
  padding:22px 30px 20px;
  background:none;
  text-align:center;
  font-size:16px;
  line-height:1.4;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:15.44px;
}
.gallery__card p{margin:0}
.ig{
  display:inline-flex;align-items:center;gap:8px;
  align-self:center;
  padding:8px 18px;
  border-radius:999px;
  background:#fff;
  color:#1A1A1A;
  font-size:14px;
  font-weight:600;
}

/* ===================== 7. RESULTS ===================== */
.s-res .h2{
  max-width:1001px;
  margin:0 auto;
  color:#FFF;
  text-align:center;
  /* 40px на макетних 1440; нижче — масштабуємо, щоб зберегти розбивку у 2 рядки */
  font-size:min(40px, calc((100vw - 48px) / 25.03));
  font-weight:700;
  line-height:109.3%;
  letter-spacing:-.05em;
  /* leading-trim: both; text-edge: cap */
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;
}
.res{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 36px;
  max-width:805px;
  margin:0 auto;
}
.res__label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 auto 14px;
  max-width:323px;
  min-height:50px;
  padding:13px 20px;
  border:1px solid rgba(121,193,65,.55);
  border-radius:12px;
  background:#090908;
  font-size:17px;
  font-weight:500;
}
.res__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shot{
  aspect-ratio:370/488;
  min-width:0;
}
.shot img{width:100%;height:100%;object-fit:contain}

/* ===================== 8. CTA ===================== */
.cta{display:grid;grid-template-columns:5fr 6fr;align-items:stretch}
.cta__left{background:var(--dark-2);display:flex;justify-content:flex-end}
.cta__leftin{
  width:100%;
  max-width:560px;
  padding:50px 48px 50px 24px;
}
.cta__title{
  font-size:38px;
  line-height:1.15;
  font-weight:800;
  margin:0 0 22px;
}
.cta__price{display:flex;align-items:center;gap:13.3px;margin-bottom:30px}
.cta__price s{font-size:26px;font-weight:600;opacity:.75}
.cta__free{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:23.496px;
  width:224.093px;
  height:38.454px;
  padding:0 30.545px;
  border-radius:11.326px;
  border:.663px solid rgba(255,255,255,.50);
  background:linear-gradient(103deg,#0B520F 18.95%,#5C955F 100%);
  -webkit-backdrop-filter:blur(42.43px);
  backdrop-filter:blur(42.43px);
  font-size:21.4px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.bonus--dark{max-width:481px;margin-bottom:0}
.bonus--dark .bonus__thumb{flex:0 0 120px;width:120px;margin-left:0}
.bonus--dark .bonus__frame{width:120px}
.bonus--dark .bonus__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13.743px;
  width:309.214px;
  color:#FFF;
  font-size:16.491px;
  font-weight:500;
  line-height:116.3%;
  letter-spacing:-.66px;
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;
}
.bonus--dark .bonus__text b{font-weight:700}
.bonus--dark .bonus__timer{
  background:linear-gradient(180deg, rgba(246,255,247,.30) 0%, rgba(229,255,231,.30) 100%);
  border:1px solid #22BF2A;
  color:#fff;
}
.bonus--dark .bonus__card{
  width:481px;
  height:122.311px;
  padding:27.34px 34.36px 25.97px 8px;
  gap:9.4px;
  border-radius:13.743px;
  background:linear-gradient(103deg,#0B520F 18.95%,#5C955F 100%);
  color:#fff;
  box-shadow:none;
}
.bonus--dark .bonus__text b{color:#FFE5B3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bonus--dark .bonus__text b{
    background:linear-gradient(90deg,#FFE5B3 0%,#FFFFFF 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

.cta__right{
  background:var(--green);
  display:flex;
  align-items:center;
  padding:50px 24px;
}
.regform{
  width:100%;
  max-width:580px;
  margin:0 auto;
  padding:28px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.regform__field{
  display:flex;align-items:center;gap:10px;
  height:66px;
  padding:0 22px;
  border-radius:14px;
  background:#F4F4F4;
  margin-bottom:16px;
}
.regform__flag{display:inline-flex;align-items:center;gap:6px;line-height:0}
.regform__flag img{width:19px;height:auto;border-radius:2px}
.regform__flag i{
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #333;
}
.regform__code{color:#111;font-size:19px;font-weight:600}
.regform input{
  flex:1;min-width:0;
  border:0;background:transparent;
  font-family:inherit;font-size:19px;color:#111;
  outline:none;
}
.regform input::placeholder{color:#A8A8A8;font-weight:400}
.regform__note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:16px 0 0;
  text-align:center;
  color:#2C7A31;
  font-size:15px;
  font-weight:600;
}
.regform.is-invalid .regform__field{box-shadow:0 0 0 2px #E04747 inset}

/* ===================== 9. FOOTER ===================== */
.footer{background:var(--dark-2);padding:50px 0;font-size:13px;color:rgba(255,255,255,.85)}
.footer__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  margin-bottom:40px;
}
.footer__links{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:16px;
  line-height:1.5;
}
.footer__links a:hover{color:var(--green)}

.footer__pay{display:flex;flex-direction:column;align-items:center;gap:16px;width:337.021px;max-width:100%}
.pay__row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;width:100%}
.pay__row img{height:22px;width:auto;display:block}
.pay__row--small{gap:8px}
.pay__row--small img{height:37px;width:37px}

.footer__note{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1200px){
  .hero__title{font-size:48px}
  .h2{font-size:34px}
  .cta__title{font-size:32px}
  .hero__content{max-width:56%}
  .hero__cta{width:100%;max-width:460px}
}

@media (max-width:1024px){
  .hero__person{max-width:46%}
  .hero__content{max-width:660px}
  .fcards{grid-template-columns:repeat(2,1fr)}
  .fcard,.fcard:nth-child(4),.fcard:nth-child(5){grid-column:auto}
  .fors{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .gallery{grid-template-columns:1fr;aspect-ratio:auto;gap:20px}
  .gallery__collage img{height:auto}
  /* фото окремо, зелена картка — своїм фоном і по висоті контенту */
  .gallery__main{display:block;background:none}
  .gallery__main::before{
    content:'';
    display:block;
    aspect-ratio:489/297;
    background:url('../Img/author-main.png') top center/100% auto no-repeat;
  }
  .gallery__card{
    flex:none;
    margin-top:-26px;
    padding:22px 20px 20px;
    border-radius:14px;
    background:linear-gradient(180deg,#2F7032 0%,#1F6322 100%);
  }
  .cta{grid-template-columns:1fr}
  .cta__left{justify-content:center}
  .cta__leftin{padding:48px 24px;max-width:620px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer__pay{grid-column:1/-1;padding-top:0}
}

@media (max-width:768px){
  .lb{display:none}
  .mb{display:inline}
  body{font-size:16px}
  /* сітка: 390 макет, 350 контент, по 20 з боків */
  .container{padding:0 20px}
  .section{padding:52px 0}
  .h2{font-size:27px}
  .s-res .h2{font-size:24px}

  /* --- 1 екран: фото по центру, пілюлі обабіч нього --- */
  .hero{position:relative;min-height:631px;display:block}
  .hero__inner{position:relative;z-index:2}
  /* фото абсолютом: 352.303x477, top 136, left 15.2 — як у макеті */
  .hero__person{
    display:block;
    position:absolute;
    top:136px;
    left:15.2px;
    width:352.303px;
    height:477px;
    max-width:none;
    margin:0;
    z-index:0;
  }
  .hero__person img{width:100%;height:100%;object-fit:contain;object-position:bottom}
  .hero__content{max-width:none;padding:22px 0 24px}
  .hero__title{font-size:28px;line-height:1.21;margin-bottom:22px}
  .hero__badges{gap:17.35px;flex-wrap:nowrap;justify-content:space-between;margin-bottom:12px}
  .tag{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4.602px;
    padding:10px 15px 10px 10px;
    border:0;
    border-radius:10px;
    background:rgba(15,15,15,.20);
    font-size:12px;
    font-weight:500;
    white-space:nowrap;
  }
  .tag--green{
    width:215.17px;
    flex:0 0 215.17px;
    background:#1B2216;
    color:#79C141;
    text-align:center;
    font-size:14px;
    font-weight:700;
    line-height:19.59px;
    letter-spacing:-.64px;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
    text-box:trim-both cap alphabetic;
  }
  /* дві колонки по 109.6px, притиснуті до країв контенту */
  .pills{
    display:grid;
    grid-template-columns:109.6px 109.6px;
    justify-content:space-between;
    align-content:start;
    row-gap:10px;
    min-height:190px;
    margin-bottom:20px;
  }
  .pill{
    align-self:stretch;
    justify-content:flex-start;
    gap:4.602px;
    padding:10px 15px 10px 10px;
    border-radius:10px;
    background:rgba(15,15,15,.20);
    font-size:12px;
    line-height:1.15;
    white-space:normal;
    text-align:left;
  }

  /* таймер: дизайн той самий, лише по центру */
  .bonus{text-align:center}
  .bonus__card{text-align:left}
  .bonus__timer{margin-left:0}
  .bonus__card{width:100%;height:auto;min-height:0;padding:13px;gap:10px}
  /* планшет вужчий, щоб заголовок бонусу став в один рядок (текст 221px) */
  .bonus__thumb{flex:0 0 93px;width:93px;margin-left:0}
  .bonus__frame{width:93px}
  .bonus__title{white-space:nowrap}
  .bonus__text{
    width:auto;
    font-size:12px;
    line-height:15.8px;
    letter-spacing:-.64px;
    color:#2C2C2C;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
    text-box:trim-both cap alphabetic;
  }
  .bonus__text b,.bonus__text .accent{font-weight:700}
  .bonus__title{
    font-size:14px;
    font-weight:700;
    line-height:19.59px;
    letter-spacing:-.64px;
    color:#79C141;
    margin-bottom:6px;
  }
  .bonus--dark .bonus__card{width:100%;height:auto;padding:20px}
  .bonus--dark .bonus__text{width:auto}
  .bonus--dark .bonus__thumb{flex:0 0 89px;width:89px}
  .bonus--dark .bonus__frame{width:89px}

  .btn{font-size:16px;padding:16px 20px 12px;min-height:64px}
  .btn__main{white-space:normal}
  .btn__sub{font-size:13px}

  /* --- 2 екран: усе по лівому краю --- */
  .s-why .h2,
  .s-why__text{text-align:left}
  .s-why__text{gap:22px}

  /* --- 3 екран: заголовок і лід по лівому краю --- */
  .s-format .h2{text-align:left;font-size:20px}
  .s-format__lead{text-align:left;font-size:16px;line-height:1.4}

  /* --- 4 екран: заголовок по центру --- */
  .s-for .h2{text-align:center}

  .res{grid-template-columns:1fr;gap:28px}
  .fcards{grid-template-columns:1fr;max-width:420px;margin-inline:auto}

  /* --- 6 екран: підзаголовок під галереєю --- */
  .gallery{grid-template-columns:1fr;aspect-ratio:auto;gap:20px}
  .gallery__collage img{height:auto}
  .s-about .h2{order:1}
  .s-about .gallery{order:2}
  .s-about__sub{order:3}
  .s-about .note--wide{order:4}

  .note{padding:22px 20px}
  .note--dark{width:100%;height:auto;padding:22px 20px;gap:14px;font-size:16px;text-align:left}
  .btn--yellow{height:59px;min-height:0;padding:0 20px}
  .note--green{padding:22px 20px}
  .note--wide{padding:22px 20px}
  .prog__item{padding:18px 18px;font-size:16px}
  /* увесь звичайний текст на мобільному — 16px */
  .s-why__text{font-size:16px;line-height:1.4}
  .for p{font-size:16px}
  .fcard__title{font-size:18px}
  .fcard__sub{font-size:14px}
  .fcard figcaption{padding:56px 41px 18px}
  .footer{font-size:16px}
  .footer__links{font-size:16px}

  /* --- 8 екран: увесь блок зелений, по центру --- */
  .cta{grid-template-columns:1fr}
  .cta__left{background:var(--green);justify-content:center}
  .cta__leftin{max-width:none;padding:50px 24px 0;text-align:center}
  .cta__title{
    color:#FFF;
    text-align:center;
    text-shadow:0 3.997px 8.994px rgba(0,0,0,.35);
    font-size:28px;
    font-weight:700;
    line-height:30.78px;
    letter-spacing:-1.399px;
  }
  .cta__price{justify-content:center}
  .cta__price s{font-size:22px}
  .cta__free{font-size:16px;width:auto;padding:9px 16px}
  .bonus--dark{margin-inline:auto;text-align:center}
  .bonus--dark .bonus__card{text-align:left}
  /* текст бонусу — як на першому екрані */
  .bonus--dark .bonus__text{
    font-size:12px;
    line-height:15.8px;
    letter-spacing:-.64px;
  }
  .cta__right{padding:24px 20px 50px}
  .regform{padding:10px}
  .regform__field{height:58px;padding:0 14px}
  .regform__code,.regform input{font-size:17px}
  /* кнопка: висота і радіус з макета */
  .btn--blue{height:65px;border-radius:100px;padding:0 16px;font-size:20px;letter-spacing:-.04em}
  .btn--blue img{width:20px;height:20px}

  /* --- футер: одна колонка, усе по центру --- */
  .footer{padding:40px 0}
  .footer__top{display:flex;flex-direction:column;align-items:center;gap:28px;margin-bottom:28px}
  .footer__links{align-items:center;text-align:center;gap:4px}
  .footer__pay{margin-inline:auto}
  .pay__row{justify-content:center}
  .footer__note{text-align:center;font-size:14px}
}