/* MIRA — лендинг. Классы секций из implementation pack (§19: их нельзя
 * переименовывать, чтобы код сопоставлялся с аннотированным референсом).
 * Размеры, отступы и состояния — из STYLE-GUIDE.md пака v4.
 * Ассеты — mira_separate_assets.zip: PNG-линии как есть, три «фотографии»
 * (эмблема и два ландшафта) сведены на фон #090B0C и лежат в JPEG:
 * их альфа была нужна только ради растворения краёв, а края мы растворяем
 * маской в CSS — так три файла весят 684 КБ вместо 4.7 МБ.
 */

:root{
  --bg:#090B0C; --bg-2:#0D1012; --surface:#101315;
  --text:#F1E9DD; --text-2:#B9B2A8; --muted:#77756F;
  --gold:#C9975D; --gold-light:#E3B977; --gold-dark:#715034;
  --border:rgba(225,185,119,.13); --border-strong:rgba(225,185,119,.40);
  --line:rgba(255,255,255,.055);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --container:1280px; --page-pad:24px;
  --section-y:104px;
  --radius:16px; --pill:999px; --ease:320ms ease-out;
  /* сколько контейнер не добирает до ширины окна — им вылетают картинки */
  --edge:max(var(--page-pad), (100vw - var(--container)) / 2);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{margin:0; overflow-x:clip; color:var(--text-2); background:var(--bg);
     font:400 17px/1.58 var(--font-ui); -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{color:var(--text); background:rgba(201,151,93,.25)}
:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px}

.container{width:min(calc(100% - var(--page-pad)*2), var(--container)); margin-inline:auto}

/* ── Типографика ───────────────────────────────────────────────── */
.section-title{margin:0; color:var(--text); letter-spacing:-.018em;
               font:400 clamp(40px,3.6vw,48px)/1.02 var(--font-display)}
.gold-title{color:var(--gold-light)}
.lead{color:var(--text-2); font-size:16px; line-height:1.6}
.muted{color:var(--muted)}

/* ── Кнопки ────────────────────────────────────────────────────── */
.button{min-height:54px; padding:0 28px; display:inline-flex; align-items:center;
        justify-content:center; gap:11px; border:0; border-radius:var(--pill);
        cursor:pointer; font:600 14px var(--font-ui);
        transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease}
.button--primary{color:#17120d; background:linear-gradient(180deg,#E5BF84,#C89458);
                 box-shadow:0 8px 30px rgba(199,148,82,.16)}
.button--primary:hover{transform:translateY(-1px); filter:brightness(1.04);
                       box-shadow:0 11px 36px rgba(199,148,82,.26)}
.button--primary:active{transform:none; box-shadow:0 5px 18px rgba(199,148,82,.18)}
.button .ico{width:18px; height:18px}
.button .arr{transition:transform 180ms ease}
.button:hover .arr{transform:translateX(3px)}

/* ── 01 Шапка ──────────────────────────────────────────────────── */
.site-header{position:absolute; inset:0 0 auto 0; z-index:20; min-height:72px;
             display:flex; align-items:center}
.site-header__inner{display:flex; align-items:center; gap:24px}
.site-header__brand{color:var(--gold-light); font-size:20px; font-weight:500;
                    letter-spacing:.28em; white-space:nowrap}
.site-header__nav{display:flex; align-items:center; gap:34px; margin-left:auto}
.site-header__nav a{color:var(--text-2); font-size:13px; transition:color var(--ease)}
.site-header__nav a:hover{color:var(--gold-light)}
.site-header__cta{min-height:40px; padding:0 20px; display:inline-flex; align-items:center;
                  gap:9px; border:1px solid rgba(227,185,119,.5); border-radius:var(--pill);
                  color:var(--gold-light); font-size:12px; font-weight:600;
                  transition:border-color var(--ease), background-color var(--ease)}
.site-header__cta:hover{border-color:var(--gold-light); background:rgba(227,185,119,.06)}
.site-header__cta .ico{width:15px; height:15px}
.lang-switch{display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border);
             border-radius:var(--pill)}
.lang-switch a{padding:5px 10px; border-radius:var(--pill); color:var(--muted);
               font:600 11px var(--font-ui); letter-spacing:.08em; transition:color var(--ease)}
.lang-switch a:hover{color:var(--text)}
.lang-switch a[aria-current="true"]{background:var(--gold); color:#17120d}

/* ── 02 Герой ──────────────────────────────────────────────────── */
.hero{position:relative; padding:104px 0 0; overflow:visible}
.hero__grid{display:grid; grid-template-columns:50% 50%; align-items:center;
            min-height:400px; position:relative; z-index:2}
.hero__title{max-width:560px; margin:0; color:var(--text); letter-spacing:-.022em;
             font:400 clamp(56px,5.6vw,80px)/.93 var(--font-display)}
.hero__lead{max-width:440px; margin:26px 0 0; font-size:16px; line-height:1.55}
.hero__actions{margin-top:28px}
.hero__formats{margin-top:20px; display:flex; gap:24px; color:var(--muted); font-size:13px}
.hero__format{display:inline-flex; align-items:center; gap:8px}
.hero__format .ico{width:17px; height:17px; color:var(--gold)}
/* эмблема: своя карточка у неё чуть светлее фона — гасим края маской */
.hero__emblem{justify-self:center; width:min(100%,420px); height:auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
/* ландшафт: во всю ширину окна, верх растворяется в фоне */
.hero__landscape{position:absolute; left:calc(-1 * var(--edge)); right:calc(-1 * var(--edge));
  bottom:0; height:420px; z-index:1; pointer-events:none;
  background:url("/img/hero-landscape.jpg?v=c0e86af78b") center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 46%);
          mask-image:linear-gradient(180deg,transparent,#000 46%)}
.hero__landscape::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,11,12,.93) 0%, rgba(9,11,12,.62) 34%,
                                    rgba(9,11,12,.12) 56%, transparent 70%)}
/* transition-lines из пака не используется: на тёмном фоне его прямоугольник
   виден полосой, а переход и так даёт ландшафт с растворённым верхом. */

/* ── Общая полоса с картинкой навылет ──────────────────────────── */
.band{position:relative; display:grid; align-items:center; overflow:hidden;
      border-top:1px solid var(--line); background:var(--bg)}
.band__media{position:absolute; top:0; bottom:0; pointer-events:none;
             background-size:cover; background-position:center}
.band__copy{position:relative; z-index:2; padding-block:var(--section-y)}
.problem__copy{padding-left:56px; padding-right:var(--edge)}
.continuity__copy,.channels__copy{padding-left:var(--edge); padding-right:48px}

/* ── 03 Problem ────────────────────────────────────────────────── */
.problem{grid-template-columns:50% 50%}
.problem__visual{left:0; width:56%;
  background-image:url("/img/problem-flow.png?v=c9d604ee22"); background-size:contain;
  background-position:left center; background-repeat:no-repeat}
.problem__copy{grid-column:2; max-width:520px}
.problem__title{margin:0 0 18px}
.problem p{margin:0 0 14px; font-size:16px}
.problem__callout{margin-top:20px !important; color:var(--gold-light); font-weight:600}

/* ── 04 Process ────────────────────────────────────────────────── */
.process{padding-block:var(--section-y); border-top:1px solid var(--line)}
.process__title{margin:0 0 48px}
.process__grid{display:grid; grid-template-columns:repeat(3,1fr)}
.process__step{padding:0 40px}
.process__step:first-child{padding-left:0}
.process__step:last-child{padding-right:0}
.process__step + .process__step{border-left:1px solid rgba(255,255,255,.08)}
.process__number{margin-bottom:18px; color:var(--gold);
                 font:400 54px/1 var(--font-display); font-variant-numeric:lining-nums}
.process__step h3{margin:0 0 10px; color:var(--text); font-size:16px; font-weight:600}
.process__step p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}

/* ── 05 Continuity ─────────────────────────────────────────────── */
.continuity{grid-template-columns:52% 48%}
.continuity__visual{right:0; width:58%;
  background-image:url("/img/continuity-path.jpg?v=55935a7bf6");
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
          mask-image:linear-gradient(90deg,transparent,#000 42%)}
.continuity__copy{grid-column:1; max-width:560px}
.continuity__title{margin:0 0 20px}
.continuity p{margin:0 0 14px; font-size:16px}
.continuity .small{color:var(--muted); font-size:14px}

/* ── 06 Use cases ──────────────────────────────────────────────── */
.use-cases{padding-block:var(--section-y); border-top:1px solid var(--line)}
.use-cases__header{display:flex; align-items:baseline; justify-content:space-between;
                   gap:24px; margin-bottom:40px}
.use-cases__meta{display:inline-flex; align-items:center; gap:7px; color:var(--muted);
                 font-size:13px; white-space:nowrap}
.use-cases__meta .ico{width:15px; height:15px; transition:transform 180ms ease}
.use-cases__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.use-case{display:grid; grid-template-columns:30px 1fr; column-gap:18px; align-items:start;
          padding:22px 24px; border:1px solid var(--border); border-radius:var(--radius);
          background:rgba(255,255,255,.012);
          transition:border-color var(--ease), background-color var(--ease)}
.use-case:hover{border-color:var(--border-strong); background:rgba(255,255,255,.028)}
.use-case .ico{width:26px; height:26px; color:var(--gold); transition:color var(--ease)}
.use-case:hover .ico{color:var(--gold-light)}
.use-case h3{margin:0 0 7px; color:var(--text); font-size:15px; font-weight:600}
.use-case p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}

/* ── 07 Channels ───────────────────────────────────────────────── */
.channels{grid-template-columns:62% 38%}
/* Телефон крупнее высоты секции (auto 116%) и сдвинут от правого края внутрь:
   так он читается как срезанный кадром, а не как картинка, прижатая к углу. */
.channels{min-height:450px}
.channels__visual{right:0; width:54%;
  background-image:url("/img/telegram-phone.png?v=f9868bec5f"); background-size:auto 116%;
  background-position:72% center; background-repeat:no-repeat}
.channels__copy{grid-column:1; max-width:620px}
.channels__title{margin:0 0 20px}
.channels p{margin:0; font-size:16px}

/* ── 08 Security ───────────────────────────────────────────────── */
.security{position:relative; overflow:hidden; background:var(--bg-2);
          padding-block:56px; border-top:1px solid var(--line)}
.security__lines{position:absolute; left:0; top:0; bottom:0; width:46%; opacity:.35;
  background:url("/img/security-lines.png?v=70c668b3c7") left center / contain no-repeat; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 40%,transparent 100%)}
.security__grid{position:relative; z-index:2; display:grid;
                grid-template-columns:96px 1.15fr 1fr 1fr 1fr; align-items:center}
.security__lock-wrap{width:72px; height:72px; display:grid; place-items:center;
                     border-radius:19px; background:rgba(255,255,255,.035);
                     border:1px solid rgba(255,255,255,.04)}
.security__lock{width:34px; height:34px; color:var(--gold-light)}
.security__lead{padding-right:28px}
.security__lead h2{margin:0; color:var(--text); font-size:17px; font-weight:600}
.security__item{min-height:66px; padding:0 26px; display:flex; align-items:center;
                color:var(--text-2); font-size:13px; line-height:1.5}
.security__item + .security__item{border-left:1px solid rgba(255,255,255,.08)}

/* ── 09 Pricing ────────────────────────────────────────────────── */
.pricing{padding-block:var(--section-y); border-top:1px solid var(--line)}
.pricing__title{margin:0 0 44px}
.pricing__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pricing-card{display:flex; flex-direction:column; min-height:260px; padding:28px 28px 26px;
              border:1px solid var(--border); border-radius:var(--radius);
              background:rgba(255,255,255,.012); transition:border-color var(--ease)}
.pricing-card:hover{border-color:var(--border-strong)}
.pricing-card--featured{border-color:rgba(227,185,119,.62);
  background:radial-gradient(circle at 50% 0%,rgba(205,150,84,.09),transparent 62%);
  box-shadow:0 0 34px rgba(201,151,93,.06)}
.pricing-card__term{color:var(--gold-light); font-size:14px; font-weight:600}
.pricing-card__price{margin-top:8px; color:var(--text);
                     font:400 44px/1 var(--font-display); font-variant-numeric:lining-nums}
.pricing-card__monthly{margin-top:6px; color:var(--muted); font-size:13px}
.pricing-card__copy{margin:18px 0 0; color:var(--text-2); font-size:13px; line-height:1.55}
.pricing-card .button{min-height:44px; min-width:120px; margin-top:auto; padding-top:0;
                      align-self:flex-start; padding-inline:22px; font-size:13px}
.pricing-card__action{margin-top:auto; padding-top:26px}

/* ── 10 Final CTA ──────────────────────────────────────────────── */
.final-cta{position:relative; isolation:isolate; overflow:hidden; text-align:center;
           padding-block:96px 104px; border-top:1px solid var(--line)}
/* Волна владельца (1920x819, фон чёрный, без альфы). mix-blend-mode:screen
   гасит её чёрный фон об фон страницы — прямоугольника не видно, а свет
   складывается. Маска убирает жёсткие боковые края. */
.final-cta__wave{position:absolute; inset:0; z-index:0; mix-blend-mode:screen;
  background:url("/img/final-wave.jpg?v=df676d8a9c") center center / cover no-repeat;
  opacity:.9; pointer-events:none;
  /* две маски пересечением: по горизонтали гасим боковые края, по вертикали —
     верхний и нижний, иначе видно прямую границу прямоугольника */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(180deg,transparent,#000 26%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),
                     linear-gradient(180deg,transparent,#000 26%,#000 88%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect}
.final-cta__inner{position:relative; z-index:2}
/* мягкое затемнение под текстом: волна проходит ровно по строке подзаголовка
   и роняла её контраст. Виньетка гасит волну только под словами. */
.final-cta__inner::before{content:""; position:absolute; inset:-48px -80px; z-index:-1;
  background:radial-gradient(58% 72% at 50% 46%, rgba(9,11,12,.78), transparent 72%)}
.final-cta__title{margin:0; color:var(--text); font:400 clamp(34px,3.2vw,44px)/1.06 var(--font-display)}
.final-cta__copy{margin:14px 0 30px; color:var(--text-2); font-size:15px}

/* ── 11 Footer ─────────────────────────────────────────────────── */
.site-footer{display:flex; align-items:center; min-height:88px; padding-block:24px;
             border-top:1px solid var(--line)}
/* ОДНА полоса (владелец 06.10): знак · 18+ и контакт · документы · оплата. Узко — документы и оплата
   переносятся строкой ниже сами (wrap), второй линии нет ни при какой ширине. */
.site-footer__inner{display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px}
.site-footer__brand{color:var(--gold-light); font-size:18px; letter-spacing:.28em}
.site-footer__about{flex:1 1 420px; display:flex; flex-direction:column; gap:4px;
                    color:var(--muted); font-size:11px; line-height:1.55}
.site-footer__inner a{color:var(--text-2); text-decoration:none}
.site-footer__inner a:hover{color:var(--gold-light)}
.site-footer__docs{display:flex; align-items:center; gap:8px; font-size:11px; white-space:nowrap}
.site-footer__sep{color:var(--muted)}
.site-footer__pay{display:block; line-height:0}
.site-footer__pay img{display:block; width:250px; max-width:100%; height:auto}

/* ── Страницы документов: /offer, /refund (v79) ─────────────────── */
.site-header--doc{position:relative; border-bottom:1px solid var(--line)}
.site-header--doc .lang-switch{margin-left:auto}
.legal{max-width:760px; padding-block:56px 88px; font-size:16px; line-height:1.7}
.legal h1{margin:0 0 28px; color:var(--text); font:500 clamp(34px,5vw,46px)/1.1 var(--font-display); letter-spacing:-.015em}
.legal h1 + p strong{color:var(--gold-light); font-weight:500}
.legal ol + h1, .legal p + h1{margin-top:64px; padding-top:48px; border-top:1px solid var(--line)}
.legal p, .legal li{margin:0 0 14px}
.legal ol{margin:0; padding-left:1.4em}
.legal li::marker{color:var(--gold)}
.legal strong{color:var(--text); font-weight:600}
.legal a{color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(227,185,119,.4)}
.legal a:hover{text-decoration-color:var(--gold-light)}

/* ── Планшет ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  :root{--page-pad:20px; --section-y:80px}
  .site-header__nav{gap:22px}
  .hero{padding-top:112px}
  .hero__grid{grid-template-columns:52% 48%; min-height:auto}
  .use-cases__grid{grid-template-columns:repeat(2,1fr)}
  .security__grid{grid-template-columns:84px 1fr 1fr; row-gap:18px}
  .security__item{padding-left:0}
  .security__item:nth-of-type(1){grid-column:1 / -1; padding-left:0; border-left:0;
                                 border-top:1px solid rgba(255,255,255,.08); padding-top:18px}
  .security__item + .security__item{border-left:0}
}

/* ── Мобильный: порядок из SECTION-MAP пака ────────────────────── */
@media (max-width:768px){
  :root{--page-pad:18px; --section-y:64px}
  body{font-size:16px}

  .site-header{position:relative; min-height:64px; border-bottom:1px solid var(--line)}
  .site-header__nav,.site-header__cta{display:none}
  .lang-switch{margin-left:auto}

  .hero{padding-top:34px}
  .hero__grid{display:flex; flex-direction:column; gap:0}
  .hero__emblem{order:-1; width:min(78%,300px); margin:0 auto 26px}
  .hero__title{font-size:clamp(44px,12.5vw,52px); line-height:.96}
  .hero__lead{max-width:none; margin-top:20px}
  .hero__actions .button{width:100%}
  .hero__formats{justify-content:space-between; gap:10px; font-size:12px}
  .hero__landscape{position:relative; left:calc(-1 * var(--page-pad));
    right:calc(-1 * var(--page-pad)); width:100vw; height:220px; margin-top:44px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);
            mask-image:linear-gradient(180deg,transparent,#000 34%)}
  .hero__transition{display:none}

  .band{display:flex; flex-direction:column; align-items:stretch}
  .band__media{position:relative; inset:auto; width:100% !important; height:210px;
               background-size:cover !important; background-position:center !important}
  .band__copy{padding-block:var(--section-y) 28px; max-width:none}
  /* problem: сначала графика, потом текст (SECTION-MAP, пп. 5-6) */
  .problem__visual{order:1; background-size:contain !important; margin-top:8px}
  .problem__copy{order:2; padding-top:36px}
  /* continuity и channels: сначала текст, потом картинка (пп. 8-9, 11-12) */
  .continuity__visual,.channels__visual{order:2; -webkit-mask-image:none; mask-image:none}
  .continuity__copy,.channels__copy{order:1}
  .channels__visual{height:250px; background-size:contain !important;
                    background-position:right center !important}

  .process__grid{display:block}
  .process__step{padding:26px 0}
  .process__step:first-child{padding-top:0}
  .process__step + .process__step{border-left:0; border-top:1px solid rgba(255,255,255,.08)}

  .use-cases__grid{grid-template-columns:1fr; gap:10px}
  .use-cases__meta{display:none}

  .security{padding-block:40px}
  .security__lines{display:none}
  .security__grid{grid-template-columns:72px 1fr; row-gap:0}
  .security__lead{padding:0}
  .security__item,.security__item:nth-of-type(1){grid-column:1 / -1; min-height:auto;
    padding:18px 0; border-left:0; border-top:1px solid rgba(255,255,255,.08)}

  .pricing__grid{grid-template-columns:1fr}
  .pricing-card{min-height:auto}
  .pricing-card .button{width:100%; align-self:stretch}

  .final-cta{padding-block:64px 72px}
  .final-cta__wave{opacity:.6; background-size:220% auto}
  .final-cta .button{width:100%}

  .site-footer{padding-block:28px}
  .site-footer__inner{flex-direction:column; align-items:flex-start; gap:14px}
  .site-footer__about{flex:none}
}

@media (max-width:420px){
  .hero__title{font-size:44px}
  .hero__landscape{height:180px}
  .band__media{height:185px}
}

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