/* =====================================================================
   Matchmaking landing — styles
   Fonts: Cormorant Garamond (serif headings) + Montserrat (sans)
   Palette: gold #EDC97B, deep gold #C9A961, ink #0E1E2D, bg #000
   ===================================================================== */

:root{
  --gold:#EDC97B;
  --gold-2:#C9A961;
  --gold-grad:linear-gradient(180deg,#EAD08C 0%,#C9A55E 100%);
  --ink:#10202E;
  --bg:#000000;
  --white:#FFFFFF;
  --cream:#F7F6F2;
  --gray:#8C8C8C;          /* secondary text on dark */
  --gray-2:#6E6E6E;        /* secondary text on light */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',Arial,sans-serif;
  --pad:clamp(20px,4.2vw,80px);  /* page side padding */
  --content:1300px;              /* shared centered content column — text in hero/problem/about aligns to its left edge */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* ---- shared gold button ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;
  padding:16px 28px;border-radius:7px;cursor:pointer;border:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn--gold{
  background:var(--gold-grad);color:var(--ink);
  box-shadow:0 6px 20px rgba(201,165,94,.25);
}
.btn--gold:hover{filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(201,165,94,.38);}

/* ---- vertical divider ---- */
.divider-v{display:block;width:1px;height:64px;background:rgba(255,255,255,.45);}

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

/* =====================================================================
   BLOCK 1 — HERO
   ===================================================================== */
.hero{
  position:relative;height:100vh;
  display:flex;flex-direction:column;
  background:#000;overflow:hidden;
}
.hero::before{                 /* photo — full height, melts into black with a long soft tail (no shelf/edge) */
  content:"";position:absolute;inset:0;
  background:url("files/block-1/background.jpg") center 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.14) 73%,transparent 84%);
          mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.14) 73%,transparent 84%);
  z-index:0;
}
.hero::after{                  /* dark overlay — vertical layer on TOP so the stats band becomes opaque pure #000 (matches block 2, no blue line) */
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(4,7,12,.30) 0%,rgba(4,7,12,.10) 32%,rgba(4,7,12,.5) 62%,#000 80%),
    linear-gradient(90deg,rgba(4,7,12,.92) 0%,rgba(4,7,12,.62) 42%,rgba(4,7,12,.25) 72%,rgba(4,7,12,.5) 100%);
}
.hero>*{position:relative;z-index:2;}

/* ===== fixed, always-visible site header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(8,8,10,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.08);
}
.site-header__bar{
  max-width:1520px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.2vw,36px);
  padding:16px var(--pad);transition:padding .3s ease;
}
.site-header.is-scrolled .site-header__bar{padding:11px var(--pad);}
.logo{
  font-family:var(--serif);font-weight:600;font-size:22px;
  letter-spacing:.16em;color:#E6D6B0;white-space:nowrap;flex:0 0 auto;
}
/* brand cluster: logo + primary CTA pinned together at the left edge */
.site-header__brand{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);flex:0 0 auto;}
.site-header__cta{padding:11px 18px;font-size:11.5px;white-space:nowrap;flex:0 0 auto;}
.site-nav{display:flex;align-items:center;gap:clamp(12px,1.3vw,24px);}
.site-nav__link{
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:#CFD2D7;white-space:nowrap;
  position:relative;padding:6px 0;transition:color .2s ease;
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.site-nav__link:hover{color:#fff;}
.site-nav__link:hover::after{transform:scaleX(1);}
.site-nav__link.is-active{color:var(--gold);}
.site-nav__link.is-active::after{transform:scaleX(1);}
.site-nav__cta{display:none;}   /* desktop CTA lives in .site-header__brand; this copy is for the mobile dropdown */
.site-header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
/* language switch — segmented pill matching the ig-btn frame; active segment is gold like the CTA */
.lang-switch{
  display:flex;align-items:center;gap:4px;flex:0 0 auto;
  height:42px;padding:4px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.08em;
}
.lang-switch__opt{
  display:grid;place-items:center;height:100%;padding:0 12px;border-radius:8px;
  color:#B9BDC4;transition:color .2s ease,background .2s ease;
}
.lang-switch__opt:hover{color:#fff;}
.lang-switch__opt.is-active{background:rgba(255,255,255,.13);color:#F2F2F0;font-weight:700;}
.lang-switch__sep{display:none;}
.ig-btn{
  width:42px;height:42px;border:1.5px solid rgba(255,255,255,.5);
  border-radius:12px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  transition:border-color .2s,color .2s,background .2s;
}
.ig-btn:hover{border-color:var(--gold);color:var(--gold);}
.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
body.nav-open .site-header{
  background:rgba(8,8,10,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* anchored sections clear the fixed header when navigated to */
#advantages,#problem,#gallery,#features,#about,#process{scroll-margin-top:80px;}

.hero__body{           /* text + couple are a single group inside the shared content column: text pinned to its left edge, couple linked to its right, the column centered */
  flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,64px);
  width:100%;max-width:calc(var(--content) + 2*var(--pad));margin-inline:auto;
  padding:0 var(--pad);min-height:0;
}
.hero__text{flex:1 1 auto;min-width:0;max-width:none;align-self:center;}
.hero__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,4.4vw,58px);line-height:1.06;
  letter-spacing:.005em;text-transform:uppercase;color:#fff;
  /* the 3 explicit <br> lines hold the layout; a line longer than the available
     left slot wraps inside the text box instead of overflowing onto the couple photo */
}
.hero__sub{
  margin-top:30px;max-width:560px;
  font-size:16px;line-height:1.62;color:#CFD3D8;font-weight:400;
}
.hero__sub strong{color:#fff;font-weight:700;}
.hero__btn{margin-top:34px;padding:18px 30px;font-size:14px;}

.hero__couple{
  flex:0 0 auto;align-self:flex-end;
  width:clamp(280px,30vw,560px);height:auto;max-height:90%;z-index:1;
  object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 92%,transparent 100%);
}

.hero__stats{
  display:flex;justify-content:center;gap:clamp(40px,7vw,130px);
  padding:clamp(18px,2.5vh,34px) var(--pad) clamp(24px,3.5vh,56px);
}
.stat{display:flex;flex-direction:column;}
.stat__num{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(46px,4.6vw,72px);line-height:1;color:var(--gold);
  letter-spacing:.01em;
}
.stat__label{
  margin-top:14px;font-size:15px;line-height:1.35;color:#C9CCd1;font-weight:400;
}

/* =====================================================================
   BLOCK 2 — ADVANTAGES PANEL
   ===================================================================== */
.advantages{background:#000;padding:48px var(--pad) 200px;}
.panel{
  max-width:1400px;margin:0 auto;background:var(--cream);
  border-radius:34px;padding:64px 70px 52px;color:#15161a;
  position:relative;
}
.panel__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,3.6vw,58px);line-height:1.08;
  text-align:center;letter-spacing:.04em;text-transform:uppercase;
  color:#2b2b2b;margin-bottom:54px;
}
.adv-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:30px;max-width:1180px;margin:0 auto;
}
.adv{min-width:0;}   /* grid item: long RU words ("КОНФИДЕНЦИАЛЬНОСТЬ") must not widen the track */
.adv__title{
  font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.18;
  letter-spacing:.005em;color:#1c1c1c;margin-bottom:16px;text-transform:uppercase;
  overflow-wrap:break-word;
}
.adv__text{font-size:15px;line-height:1.5;color:#7a7a7a;font-weight:400;}
.adv__text strong{color:#2b2b2b;font-weight:700;}

.adv-photos{
  position:relative;height:300px;margin-top:40px;margin-bottom:-150px;
  display:flex;justify-content:center;align-items:flex-start;z-index:5;
}
.adv-photo{
  position:absolute;top:0;width:230px;height:300px;object-fit:cover;
  border-radius:10px;box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.adv-photo--l{transform:translateX(-198px) rotate(-6deg);z-index:1;top:16px;}
.adv-photo--c{transform:translateY(4px) rotate(0deg);z-index:3;}
.adv-photo--r{transform:translateX(198px) rotate(6deg);z-index:1;top:16px;}

/* =====================================================================
   BLOCK 3 — PROBLEM / SOLUTION
   ===================================================================== */
.problem{background:#000;padding:90px var(--pad) 110px;}
.problem__top{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:40px;max-width:var(--content);margin:0 auto;
}
.problem__head{max-width:1000px;}
.problem__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(32px,3.7vw,62px);line-height:1.08;
  text-transform:uppercase;color:#fff;letter-spacing:.005em;
  /* the <br> lines hold the layout; a too-long line wraps within the head box
     instead of overflowing onto the social logos on the right */
}
.problem__text{
  margin-top:26px;max-width:430px;
  font-size:15px;line-height:1.5;color:var(--gray);font-weight:400;
}
.problem__text strong{color:#fff;font-weight:700;}
/* brand logos — loose, slightly tilted cluster (matches reference 3.png).
   --s scales the whole cluster proportionally for smaller screens. */
.problem__logos{position:relative;--s:1;flex:0 0 auto;
  width:calc(320px*var(--s));height:calc(254px*var(--s));}
.brand-logo{position:absolute;width:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));}
.brand-logo--tg{width:calc(118px*var(--s));left:calc(6px*var(--s));top:calc(10px*var(--s));transform:rotate(-8deg);}
.brand-logo--ig{width:calc(128px*var(--s));left:calc(176px*var(--s));top:0;transform:rotate(10deg);}
.brand-logo--tinder{width:calc(206px*var(--s));left:calc(20px*var(--s));top:calc(159px*var(--s));transform:rotate(-5deg);}

.problem__bottom{
  max-width:var(--content);margin:150px auto 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.problem__title2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(36px,4.3vw,78px);line-height:1.07;
  text-transform:uppercase;color:#fff;text-align:center;letter-spacing:.005em;
  white-space:nowrap;
}
.problem__bottom .divider-v{margin:34px 0 30px;height:74px;}
.problem__caption{font-size:15px;line-height:1.55;color:var(--gray);}

/* =====================================================================
   BLOCK 4 — GALLERY (fanned photos)
   ===================================================================== */
.gallery{background:#000;padding:30px var(--pad) 60px;}
.fan{position:relative;height:347px;display:flex;justify-content:center;align-items:center;}
.fan__img{
  position:absolute;width:253px;height:333px;object-fit:cover;
  border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.fan__img--l{transform:translateX(-200px) rotate(-9deg);z-index:1;}
.fan__img--r{transform:translateX(200px) rotate(9deg);z-index:1;}
.fan__img--c{transform:translateY(-9px);z-index:3;}

/* =====================================================================
   BLOCK 5 — FEATURE CARDS (2x2)
   ===================================================================== */
.features{background:#000;padding:60px var(--pad) 80px;}
.feat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:40px 56px;max-width:1620px;margin:0 auto;
}
.feat{
  display:flex;align-items:center;gap:26px;
  background:var(--cream);border-radius:34px;
  padding:34px 44px;min-height:170px;color:#16171b;
  min-width:0;   /* grid item: don't let content-based auto minimum widen the track */
}
.feat__num{
  font-family:var(--sans);font-weight:300;font-size:84px;line-height:.9;
  color:var(--gold);flex:0 0 auto;min-width:96px;
}
/* min-width:0 lets the card shrink to its grid track: without it the flex item's
   automatic minimum size is the longest word, which on RU ("ДЕЙСТВИТЕЛЬНО",
   "СОПРОВОЖДЕНИЕ") is wider than a phone and pushes the whole page sideways */
.feat__body{min-width:0;}
.feat__title{
  font-family:var(--sans);font-weight:700;font-size:21px;line-height:1.2;
  text-transform:uppercase;color:#15161a;margin-bottom:12px;
  overflow-wrap:break-word;
}
.feat__text{font-size:14.5px;line-height:1.5;color:#7c7c7c;font-weight:400;}

/* =====================================================================
   BLOCK 6 — ABOUT ALEX
   ===================================================================== */
.about{
  position:relative;background:#000;overflow:hidden;
  padding:clamp(64px,7vw,108px) var(--pad);
}
.about__inner{
  position:relative;z-index:2;max-width:var(--content);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4vw,72px);align-items:center;
}
.about__content{min-width:0;}
.about__title{
  font-family:var(--serif);font-weight:600;
  /* cap keeps the nowrap name inside the left grid column — it must never run under the photo */
  font-size:clamp(38px,4.2vw,62px);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  color:#E7CE96;
}
.about__sub{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;
  margin:20px 0 38px;color:#B7BABF;font-size:16px;line-height:1.45;
}
.about__dash{display:inline-block;width:46px;height:2px;background:var(--gold);}
.about__list{list-style:none;display:flex;flex-direction:column;}
.about__item{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
}
.about__item:first-child{border-top:none;padding-top:4px;}
.about__item:last-child{padding-bottom:0;}
.about__check{
  flex:0 0 auto;width:22px;height:22px;margin-top:3px;
  display:grid;place-items:center;color:var(--gold);
}
.about__check svg{width:20px;height:20px;stroke-width:1.6;}
.about__item-body b{display:block;font-size:16px;font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:.005em;}
.about__item-body span{display:block;font-size:13.5px;line-height:1.5;color:#9a9da2;font-weight:400;}

.about__media{position:relative;}
.about__photo{
  display:block;width:100%;height:auto;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  filter:contrast(1.03);
}
.profile-card{
  position:absolute;left:-22px;bottom:-26px;z-index:3;display:block;
  width:clamp(300px,24vw,380px);height:auto;
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);
}

/* =====================================================================
   BLOCK 7 — PROCESS
   ===================================================================== */
.process{
  background:#000;padding:80px var(--pad) 110px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.process__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(40px,4.6vw,80px);line-height:1;
  text-transform:uppercase;color:#fff;letter-spacing:.06em;
}
.process__divider{margin:30px 0;height:120px;}
.step{max-width:640px;}
.step__title{
  font-family:var(--sans);font-weight:700;font-size:24px;line-height:1.25;
  text-transform:uppercase;color:#fff;letter-spacing:.02em;margin-bottom:14px;
}
.step__text{font-size:15px;line-height:1.55;color:var(--gray);font-weight:400;}
.process__btn{margin-top:46px;padding:18px 30px;font-size:14px;}

/* =====================================================================
   SITE FOOTER — mirrors the header (brand · nav · CTA · language · Instagram)
   with the policy line on the bottom rail
   ===================================================================== */
.site-footer{
  position:relative;background:#000;
  padding:clamp(48px,6vw,84px) var(--pad) 0;
  border-top:1px solid rgba(255,255,255,.08);
}
/* gold hairline: picks up the accent without adding a heavy divider */
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(237,201,123,.45),transparent);
}
.footer__inner{
  max-width:var(--content);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(34px,4vw,54px);
}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.footer__logo{font-size:22px;}
.footer__tagline{max-width:40ch;font-size:14px;line-height:1.65;color:#9a9da2;}
.footer__cta{padding:15px 24px;font-size:12px;}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;}
.footer__heading{
  font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
/* 12+20+12 = 44px tall: text-sized link, touch-sized hit area */
.footer__link{
  display:inline-block;font-size:14px;line-height:20px;padding:12px 0;
  color:#CFD2D7;position:relative;transition:color .2s ease;
}
.footer__link::after{
  content:"";position:absolute;left:0;bottom:10px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.footer__link:hover{color:#fff;}
.footer__link:hover::after{transform:scaleX(1);}
.footer__meta{display:flex;align-items:center;gap:12px;margin-top:18px;}
.footer__bottom{
  max-width:var(--content);margin-inline:auto;
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0 26px;
  display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
}
.footer__copy{font-size:13px;line-height:20px;color:#8C9096;}
.footer__policy{
  display:inline-block;font-size:13px;line-height:20px;padding:12px 0;
  color:#B9BDC4;transition:color .2s ease;
}
.footer__policy:hover{color:var(--gold);}

/* =====================================================================
   LEGAL PAGES (privacy policy) — static bar, no fixed header to offset
   ===================================================================== */
.legal-header{background:#000;border-bottom:1px solid rgba(255,255,255,.08);}
.legal-header__bar{
  max-width:1520px;margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.legal{
  max-width:820px;margin-inline:auto;
  padding:clamp(40px,5vw,68px) var(--pad) clamp(48px,6vw,80px);
}
.legal__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(32px,5vw,52px);line-height:1.05;
  text-transform:uppercase;letter-spacing:.03em;color:#E7CE96;
}
.legal__meta{margin-top:12px;font-size:13px;color:#8C9096;}
.legal__lead{margin-top:20px;font-size:15.5px;line-height:1.7;color:#CFD3D8;}
.legal h2{
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;margin:34px 0 10px;
}
.legal p{font-size:14.5px;line-height:1.7;color:#9a9da2;margin-bottom:10px;}
.legal ul{margin:0 0 10px;padding-left:19px;}
.legal li{font-size:14.5px;line-height:1.7;color:#9a9da2;margin-bottom:5px;}
.legal a:not(.btn){color:#CFD3D8;border-bottom:1px solid rgba(237,201,123,.45);transition:color .2s ease;}
.legal a:not(.btn):hover{color:var(--gold);}
/* unmissable marker for the facts that must be supplied before publishing */
.legal__todo{
  display:inline-block;padding:0 7px;border-radius:4px;
  background:rgba(237,201,123,.1);border:1px solid rgba(237,201,123,.45);
  color:var(--gold);font-weight:600;font-size:.9em;
}

/* =====================================================================
   404 — minimal not-found page (scales fluidly, no wrap-breaking on phones)
   ===================================================================== */
.notfound{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,20px);
  padding:clamp(28px,8vw,64px) var(--pad);
  text-align:center;
}
.notfound__code{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(38px,12vw,140px);line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
}
.notfound__text{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,3.4vw,18px);line-height:1.5;
  letter-spacing:.09em;text-transform:uppercase;color:#8C9096;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1160px){
  .adv-grid{grid-template-columns:repeat(2,1fr);gap:34px 40px;max-width:640px;}
  .problem__top{flex-direction:column;padding-left:0;}
  .problem__logos{margin-top:22px;}
  .feat-grid{grid-template-columns:1fr;max-width:720px;}
}

/* header collapses to a hamburger dropdown before the horizontal nav crowds the left-aligned CTA
   (threshold set for the longest label — the Russian "Записаться на консультацию") */
@media(max-width:1320px){
  .nav-toggle{display:flex;}
  /* only the nav links fold away here — CTA and language switch stay on the bar */
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--pad) 26px;
    background:rgba(8,8,10,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .3s ease,opacity .3s ease,visibility .3s;
  }
  .site-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .site-nav__link{font-size:16px;letter-spacing:.04em;padding:15px 2px;
    border-bottom:1px solid rgba(255,255,255,.07);color:#E7E9EC;}
  .site-nav__link::after{display:none;}
}
/* about: stack into a single column — content first, portrait + card below */
@media(max-width:900px){
  /* footer: brand takes the full width, nav + contact share the row below it */
  .footer__inner{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1/-1;}
  .about{padding:clamp(56px,8vw,80px) var(--pad);}
  .about__inner{grid-template-columns:1fr;gap:36px;}
  .about__media{order:2;display:flex;flex-direction:column;align-items:center;}
  .about__photo{width:100%;max-width:440px;height:auto;}
  .profile-card{position:relative;left:auto;bottom:auto;margin-top:-28px;width:min(400px,88%);}
}
/* hero stacks below 1024px: couple full-width at the bottom of the first screen, text above it */
@media(max-width:1024px){
  /* reserve room for the fixed header so it no longer sits on top of the hero copy */
  .hero{height:auto;min-height:100vh;min-height:100dvh;}
  .hero__body{flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:calc(100vh - 88px);min-height:calc(100dvh - 88px);gap:20px;padding:88px 0 0;}
  .hero__text{order:1;flex:0 0 auto;max-width:none;align-self:stretch;padding:0 var(--pad);}
  .hero__title{white-space:normal;}
  .hero__couple{order:2;position:relative;right:auto;bottom:auto;
    width:100%;height:auto;max-width:none;max-height:64vh;opacity:1;margin:auto auto 0;z-index:1;
    object-fit:contain;object-position:bottom center;
    -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 90%,transparent 100%);}
  .hero__stats{flex-wrap:wrap;justify-content:center;gap:26px 40px;}
  /* mobile: solid header (drop backdrop blur) so the fixed bar doesn't flicker/partially vanish while scrolling */
  .site-header.is-scrolled,
  body.nav-open .site-header{background:#08080A;-webkit-backdrop-filter:none;backdrop-filter:none;}
}
@media(max-width:760px){
  .hero__title,.problem__title,.problem__title2{white-space:normal;}
  /* phones: hero copy is centred as one column above the couple photo */
  .hero__text{text-align:center;}
  .hero__sub{margin-inline:auto;}
  /* footer: one centred column, matching the centred hero/problem blocks */
  .site-footer{padding:44px var(--pad) 0;}
  .footer__inner{grid-template-columns:1fr;gap:30px;text-align:center;padding-bottom:26px;}
  .footer__brand{align-items:center;gap:16px;}
  .footer__tagline{max-width:36ch;margin-inline:auto;}
  .footer__col{align-items:center;}
  /* the nav pairs up: five 44px touch targets in one column made the footer the
     tallest section on the phone. The odd fifth link spans and stays centred. */
  nav.footer__col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;justify-items:center;}
  nav.footer__col .footer__heading{grid-column:1/-1;}
  nav.footer__col .footer__link:last-child{grid-column:1/-1;}
  .footer__bottom{flex-direction:column;justify-content:center;text-align:center;gap:0;padding:14px 0 22px;}
  /* phones: the tallest section on the page (1300px) — a full-width portrait and
     a full-width screenshot stacked above a 615px list. It regroups into a
     profile card: portrait + name side by side, the Instagram strip, then the
     credentials. display:contents lifts the children of .about__content and
     .about__media into the same grid so they can be placed independently. */
  .about{padding:44px var(--pad);}
  .about__content,.about__media{display:contents;}
  .about__inner{
    grid-template-columns:120px minmax(0,1fr);
    grid-template-areas:
      "photo title"
      "photo sub"
      "strip strip"
      "list  list";
    gap:0 16px;align-items:start;
  }
  /* 4:5 crop. The source is near-square and taller than this frame is wide, so
     cover fills the height exactly and only trims horizontally — hence the 72%,
     which cuts the empty black on the left of the shot rather than his shoulder
     on the right. A vertical offset would do nothing here. */
  .about__photo{
    grid-area:photo;width:120px;max-width:none;aspect-ratio:4/5;
    object-fit:cover;object-position:72% center;
    border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.5);
  }
  .about__title{grid-area:title;white-space:normal;font-size:25px;line-height:1.06;}
  .about__sub{grid-area:sub;margin:8px 0 0;font-size:14px;line-height:1.4;}
  .about__dash{display:none;}   /* decorative rule crowds the narrow name column */
  .about__list{grid-area:list;margin-top:20px;}
  .about__item{padding:12px 0;gap:12px;}
  .about__item:first-child{padding-top:0;}
  .about__item-body b{font-size:15px;margin-bottom:3px;}
  .about__item-body span{font-size:13px;line-height:1.45;}
  /* the hard breaks are positioned for the wide desktop column; on a phone they
     end a line early and cost roughly one extra line each */
  .about__sub br,.about__item-body span br{display:none;}
  /* phones: the problem block centres as one column and tightens up — the
     desktop rhythm (90/110px section padding, 150px split) leaves huge empty
     black gaps once the two columns stack */
  .problem{padding:52px var(--pad) 60px;}
  .problem__top{align-items:center;text-align:center;gap:0;}
  .problem__head{max-width:none;}
  .problem__text{margin:16px auto 0;max-width:38ch;}
  .problem__logos{--s:.55;margin:26px auto 0;}
  .problem__bottom{margin-top:60px;}
  .problem__bottom .divider-v{margin:20px 0 18px;height:46px;}
  .problem__caption{max-width:38ch;}
  .advantages{padding:48px var(--pad) 150px;}
  /* phones: the cream panel dissolves and each advantage becomes its own card.
     The cards are sticky at staggered offsets, so scrolling piles them on top of
     one another and leaves a slice of each previous card visible above. */
  .panel{background:none;padding:0;border-radius:0;}
  .panel__title{font-size:clamp(26px,7.4vw,34px);margin-bottom:28px;color:#F2F0EA;}
  .adv-grid{display:flex;flex-direction:column;gap:14px;max-width:none;}
  .adv{
    position:sticky;top:var(--stack-top);
    background:var(--cream);border-radius:22px;
    padding:26px 22px 28px;
    box-shadow:0 -1px 0 rgba(255,255,255,.06),0 16px 34px rgba(0,0,0,.55);
  }
  .adv:nth-child(1){--stack-top:78px;}
  .adv:nth-child(2){--stack-top:92px;}
  .adv:nth-child(3){--stack-top:106px;}
  .adv:nth-child(4){--stack-top:120px;}
  /* Runway so the finished pile dwells on screen instead of all four clamping to
     one offset and collapsing in view. It has to be an extra flex item: a sticky
     item is held inside its container's CONTENT box (so container padding is
     excluded) and that rect is inset by the item's OWN margins (so a margin on
     the last card would only be subtracted from that same card's runway). */
  .adv-grid::after{content:"";flex:0 0 auto;height:120px;}
  /* the stacking IS the animation here — the fade-up would fight it */
  .adv.reveal{opacity:1;transform:none;transition:none;}
  .adv__title{font-size:19px;margin-bottom:10px;}
  .adv__text{color:#6b6b6b;}   /* 4.93:1 on cream — the desktop #7a7a7a is only 3.97:1 */
  .problem__title,.problem__title2{font-size:clamp(24px,6.8vw,32px);}
  /* photo fans scale with viewport so they never overflow narrow phones */
  .adv-photos{height:min(60vw,240px);margin-top:26px;margin-bottom:-120px;}
  .adv-photo{width:min(43vw,170px);height:auto;aspect-ratio:170/230;}
  .adv-photo--l{transform:translateX(max(-24vw,-104px)) rotate(-6deg);top:12px;}
  .adv-photo--r{transform:translateX(min(24vw,104px)) rotate(6deg);top:12px;}
  .fan{height:min(64vw,300px);}
  .fan__img{width:min(44vw,180px);height:auto;aspect-ratio:253/333;}
  .fan__img--l{transform:translateX(max(-24vw,-110px)) rotate(-9deg);}
  .fan__img--r{transform:translateX(min(24vw,110px)) rotate(9deg);}
  /* phones: the number stops being a side column and sits above the title, so the
     copy runs the full card width instead of ~62% of it — the narrow measure was
     what forced 5-6 line paragraphs and made these cards so tall. Dropping the
     row layout also removes the dead space beside the (54px tall) numeral. */
  .features{padding:48px var(--pad) 64px;}
  .feat{
    flex-direction:column;align-items:stretch;gap:0;
    padding:22px 22px 24px;min-height:0;border-radius:24px;
    position:sticky;top:var(--stack-top);
    box-shadow:0 16px 34px rgba(0,0,0,.55);
  }
  .feat__num{font-size:44px;line-height:1;min-width:0;margin-bottom:6px;}
  .feat__title{font-size:18px;margin-bottom:8px;}
  .feat__text{color:#6b6b6b;}   /* 4.93:1 on cream — the desktop #7c7c7c is only 3.9:1 */
  /* Same stacking motif as the advantages block; see that block for why the
     runway has to be an extra track rather than padding or a margin.
     The 1fr rows equalise every card to the tallest one. That is load-bearing,
     not cosmetic: a sticky card is clamped at (container bottom - its OWN
     height), so unequal cards clamp at different moments and the taller ones
     overtake the cards above them, scrambling the pile on the way out. Equal
     heights keep the tops monotonic, so the deck merges cleanly as it exits. */
  .feat-grid{
    display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr) 120px;
    gap:14px;max-width:none;
  }
  .feat:nth-child(1){--stack-top:78px;}
  .feat:nth-child(2){--stack-top:92px;}
  .feat:nth-child(3){--stack-top:106px;}
  .feat:nth-child(4){--stack-top:120px;}
  .feat-grid::after{content:"";}
  .feat.reveal{opacity:1;transform:none;transition:none;}
  .profile-card{grid-area:strip;position:relative;left:auto;bottom:auto;
    width:100%;max-width:none;margin:20px 0 0;border-radius:12px;}
  .step__title{font-size:19px;}
  .hero__btn{padding:15px 22px;font-size:12px;}
  /* phones: the CTA folds into the dropdown too, leaving logo · Instagram · menu on the bar */
  .site-header__cta{display:none;}
  /* the label wraps instead of forcing the dropdown wider than the viewport —
     the long Russian "ЗАПИСАТЬСЯ НА КОНСУЛЬТАЦИЮ" needs ~376px on one line */
  .site-nav__cta{display:inline-flex;margin:22px 0 0;width:100%;min-width:0;justify-content:center;
    padding:17px 14px;font-size:13px;white-space:normal;text-align:center;text-wrap:balance;}
  .logo{font-size:16px;letter-spacing:.05em;}
  .site-header__bar{gap:8px;}
  .site-header__actions{gap:8px;}
  .ig-btn{width:40px;height:40px;border-width:1px;border-radius:10px;}
  /* header language switch: quiet text pair — no pill/frame, tap area kept via padding
     (scoped to the header so the footer switch keeps its pill) */
  .site-header .lang-switch{height:auto;padding:0;gap:0;border:0;border-radius:0;
    font-size:11px;letter-spacing:.06em;font-weight:500;}
  .site-header .lang-switch__opt{height:auto;padding:13px 6px;border-radius:0;color:#8A8F97;}
  .site-header .lang-switch__opt.is-active{background:none;color:#E7E9EC;font-weight:700;}
}
@media(max-width:380px){
  .logo{font-size:14px;}
  .site-header__actions{gap:6px;}
  .ig-btn{width:36px;height:36px;}
}

/* =====================================================================
   SCROLL REVEAL — simple fade-up as sections enter the viewport
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .65s ease-out,transform .65s ease-out;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}