@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-400-cyrillic.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-400-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-500-cyrillic.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-500-latin.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-700-cyrillic.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-700-latin.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-900-cyrillic.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Roboto;src:url('/wp-content/uploads/mta-hub/fonts/roboto-900-latin.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-400-cyrillic.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-400-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-500-cyrillic.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-500-latin.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-600-cyrillic.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-600-latin.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-700-cyrillic.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-700-latin.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-800-cyrillic.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/wp-content/uploads/mta-hub/fonts/manrope-800-latin.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  color-scheme:dark;
  --ink:#0b1014;--ink-1:#0f161b;--ink-2:#141d24;--ink-3:#1b262e;
  --ink-line:#223039;--ink-fg:#f5f6f7;--ink-muted:#bec8d3;
  /* v11 is a style reference for future light sections only. */
  --paper:#f3f5f7;--paper-2:#e9edf2;--paper-fg:#0d1418;--paper-secondary:#38464f;--paper-muted:#64727d;--paper-line:#dde3e9;
  --copper:#e7964b;--copper-light:#efb172;--brown:#915737;--brown-hover:#a56843;
  --sans:Roboto,Arial,sans-serif;
  --light-sans:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  /* Моноширинный сайт не грузит: системные шрифты по порядку — без Menlo и Consolas Chrome уходил в Courier с засечками. */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono','DejaVu Sans Mono',monospace;
  /* One reference pixel at a 1672px viewport. */
  --u:clamp(.574px,calc(100vw / 1672),1.148px);
  --content:1920px;--gutter:calc(82 * var(--u));--header-height:clamp(68px,calc(80 * var(--u)),86px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-height)}
body{margin:0;background:var(--ink);color:var(--ink-fg);font-weight:400;font-size:16px;line-height:1.5;font-family:var(--t-text);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0}
button:disabled{opacity:1}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--copper-light);outline-offset:5px}
img,svg{display:block}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.container{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

.site-header{position:relative;z-index:20;background:#0c1216;border-bottom:2px solid #8e5734}
.header-inner{height:calc(var(--header-height) - 2px);display:flex;align-items:center;justify-content:space-between;gap:calc(32 * var(--u))}
.brand{display:flex;align-items:center;gap:calc(15 * var(--u));flex:none}
.brand-mark{width:calc(50 * var(--u));height:calc(50 * var(--u));color:var(--copper);flex:none}
.brand-type{display:block}
.brand-type strong{display:block;font-size:calc(34 * var(--u));letter-spacing:-.025em;font-weight:700;line-height:1.1}
.brand-type>span{display:block;margin-top:4px;color:#b3bec8;font-size:calc(11.5 * var(--u));font-weight:400;letter-spacing:.12em;line-height:1}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));flex:1}
.nav-item{border-radius:7px;background:transparent;white-space:nowrap;padding:calc(12 * var(--u)) calc(17 * var(--u));color:#bfc8d1;font-size:calc(18 * var(--u));line-height:1.2;font-weight:400;transition:background .2s,color .2s}
.nav-item.is-current{background:linear-gradient(135deg,#995f3d,#77452e);color:#fff;box-shadow:inset 0 1px 0 #d1946940}
.nav-item:hover{background:#ffffff08;color:#fff}
.nav-item.is-current:hover{background:var(--brown-hover)}
.header-actions{display:flex;align-items:center;gap:calc(20 * var(--u));flex:none}
.demo-button{border:1px solid #b17b4a;color:var(--copper-light);border-radius:7px;padding:calc(8 * var(--u)) calc(22 * var(--u));background:transparent;font-size:calc(18 * var(--u));font-weight:500;line-height:1.3;transition:background .2s}
.demo-button:hover{background:#9b654018}
.language-button{display:flex;gap:9px;align-items:center;border-radius:7px;background:#1b2228;padding:calc(10 * var(--u)) calc(13 * var(--u));font-size:calc(18 * var(--u));line-height:1;font-weight:400}
.language-button svg{width:12px;height:8px;fill:none;stroke:#b5c0cc;stroke-width:1.3}
.flag-ru{width:24px;height:17px;border-radius:2px;background:linear-gradient(to bottom,#f6f7f8 0 33.333%,#346bc8 33.333% 66.666%,#cc3e45 66.666%);box-shadow:0 0 0 1px #ffffff12}
.menu-toggle{display:none;border:1px solid #ffffff20;background:#ffffff05;width:42px;height:42px;border-radius:7px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.menu-toggle span{height:1.5px;width:19px;background:#e5eaf0;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav[hidden]{display:none}
.mobile-nav{position:absolute;inset:100% 0 auto;background:#11191f;border-bottom:1px solid #795037;padding:12px var(--gutter) 18px;box-shadow:0 20px 30px #0006;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.mobile-nav a,.mobile-nav button{padding:12px 4px;text-align:left;font-size:16px;background:none;border:0;color:#b7c2cc}
.mobile-nav a[aria-current]{color:var(--copper-light)}

.hero{position:relative;background:#0b1014}
.hero-main{position:relative;isolation:isolate;width:100%;max-width:var(--content);aspect-ratio:1945 / 808;margin-inline:auto}
.hero-container{position:absolute;inset:0;z-index:2}
.hero-copy{padding-top:calc(77 * var(--u))}
.eyebrow{margin:0 0 calc(13 * var(--u));font-size:var(--t-caption);line-height:1.4;color:#cbd2dc;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
h1{margin:0;font-size:var(--t-h1);font-weight:800;line-height:1.07;letter-spacing:-.03em;font-family:var(--t-head)}
.title-line{display:block}
.title-accent{display:block;white-space:nowrap;color:#e99b53;background:linear-gradient(180deg,#ffc078 8%,#f19746 72%,#c87235);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{margin:calc(24 * var(--u)) 0 0;color:#bec8d3;font-size:var(--t-lead);line-height:1.65;letter-spacing:normal;max-width:calc(650 * var(--u))}
.hero-benefits{display:flex;align-items:center;gap:calc(42 * var(--u));padding:0;margin:calc(35 * var(--u)) 0 0;list-style:none}
.hero-benefits li{display:flex;align-items:center;gap:calc(19 * var(--u))}
.benefit-icon{height:calc(46 * var(--u));width:calc(46 * var(--u));color:var(--copper);stroke-width:1.8}
.hero-benefits span{font-size:var(--t-body);line-height:1.65;color:#c4cdd7}
.hero-actions{display:flex;gap:calc(15 * var(--u));flex-wrap:wrap;margin-top:calc(40 * var(--u))}
.button{height:calc(70 * var(--u));display:inline-flex;align-items:center;justify-content:center;gap:calc(18 * var(--u));padding:0 calc(25 * var(--u));border-radius:11px;font-size:var(--t-btn);line-height:1.2;font-weight:800;white-space:nowrap;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s;font-family:var(--t-text)}
.button .icon{width:calc(31 * var(--u));height:calc(31 * var(--u));stroke-width:1.9}
.button-primary{min-width:calc(297 * var(--u));justify-content:space-between;background:linear-gradient(115deg,#a36743,#7f492f);border:1px solid #b17a5370;box-shadow:0 9px 26px #4f2d1a3d,inset 0 1px 0 #e9b08326;color:#fff;padding-inline:calc(38 * var(--u)) calc(28 * var(--u))}
.button-primary:hover{background:linear-gradient(115deg,#b1744c,#925636);transform:translateY(-2px);box-shadow:0 12px 26px #5c321b66}
.button-outline{background:#0b1014bb;backdrop-filter:blur(10px);border:1px solid #ae794c;color:#eef2f6}
.button-outline .icon{width:calc(30 * var(--u));height:calc(35 * var(--u));color:var(--copper)}
.button-outline:hover{background:#181b1c;border-color:#c99567;transform:translateY(-2px)}
/* The full reference scene is scaled as one image. No cover, crop, mask or zoom. */
.hero-visual{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-visual img{width:100%;height:100%;object-fit:contain;object-position:center;animation:art-arrive 1s ease-out both}
.capabilities{position:relative;z-index:3;background:linear-gradient(180deg,#10161a,#0d1317)}
.capabilities::before{content:'';position:absolute;top:0;left:2.5%;right:2.5%;height:1px;background:#ffffff18}
.capabilities-inner{display:grid;grid-template-columns:1fr 1.04fr 1.04fr 1.18fr .9fr;list-style:none;margin-block:0;padding-block:calc(32 * var(--u)) calc(58 * var(--u))}
.capabilities li{display:flex;align-items:flex-start;gap:calc(22 * var(--u));padding:calc(9 * var(--u)) calc(30 * var(--u));border-left:1px solid #ffffff18;min-width:0}
.capabilities li:first-child{border-left:0;padding-left:0}
.capabilities li:last-child{padding-right:0}
.capability-icon{width:calc(48 * var(--u));height:calc(48 * var(--u));stroke-width:1.85;color:var(--copper)}
.capabilities strong{display:block;font-size:var(--t-body);line-height:1.65;font-weight:700;white-space:nowrap;letter-spacing:normal}
.capabilities span{display:block;margin-top:5px;font-size:var(--t-small);line-height:1.5;color:#b9c5d1;white-space:nowrap;letter-spacing:normal}
.reveal{animation:copy-arrive .7s cubic-bezier(.2,.65,.25,1) both}
.reveal-1{animation-delay:.04s}.reveal-2{animation-delay:.1s}.reveal-3{animation-delay:.16s}.reveal-4{animation-delay:.22s}.reveal-5{animation-delay:.28s}
@keyframes copy-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-arrive{from{opacity:0}to{opacity:1}}

@media(max-width:1280px){
  .desktop-nav{display:none}.menu-toggle{display:flex}
  .brand-mark{width:43px;height:43px}.brand-type strong{font-size:29px}.brand-type>span{font-size:10px}.brand{gap:11px}
  .header-actions{gap:18px}.demo-button,.language-button{font-size:16px}.demo-button{padding:8px 19px}.language-button{padding:10px 12px}
  .hero-benefits span{font-size:var(--t-body)}.eyebrow{font-size:var(--t-caption);letter-spacing:.06em}
  .capabilities-inner{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px;padding-block:28px 36px}
  .capabilities li{gap:16px;padding:4px 24px}.capabilities li:nth-child(4){border:0;padding-left:0}.capabilities li:nth-child(3){padding-right:0}
  .capability-icon{width:36px;height:36px}.capabilities strong{font-size:var(--t-body)}.capabilities span{font-size:var(--t-small);white-space:normal}
}
@media(max-width:960px){
  :root{--gutter:32px}
  .hero-main{aspect-ratio:auto;display:flex;flex-direction:column}
  .hero-container{position:relative;inset:auto;order:0}
  .hero-copy{padding-top:52px}
  .eyebrow{font-size:var(--t-caption);letter-spacing:.06em;margin-bottom:17px}
  h1{font-size:var(--t-h1);line-height:1.07}
  .title-accent{margin-top:5px}
  .hero-description{font-size:var(--t-lead);line-height:1.65;max-width:650px;margin-top:24px}
  .hero-benefits{gap:36px;margin-top:28px}.hero-benefits li{gap:14px}.benefit-icon{width:36px;height:36px}.hero-benefits span{font-size:var(--t-body)}
  .hero-actions{gap:14px;margin-top:32px}.button{height:60px;font-size:var(--t-btn);padding:0 24px;gap:16px}.button-primary{min-width:260px}.button .icon{width:26px;height:26px}
  .hero-visual{position:relative;inset:auto;order:1;width:100%;aspect-ratio:1945 / 808;margin-top:10px}
}
@media(max-width:600px){
  :root{--gutter:22px;--header-height:68px}
  .header-inner{gap:12px}.brand{gap:8px}.brand-mark{width:36px;height:36px}.brand-type strong{font-size:25px}.brand-type>span{font-size:8px;letter-spacing:.12em;margin-top:4px}.header-actions{gap:10px}.demo-button{font-size:14px;padding:8px 13px}.language-button{display:none}.menu-toggle{width:38px;height:38px}
  .hero-copy{padding-top:38px}
  .eyebrow{font-size:var(--t-caption);letter-spacing:.06em;margin-bottom:17px}
  h1{font-size:var(--t-h1);line-height:1.07}
  .title-accent{margin-top:5px;white-space:normal;overflow-wrap:anywhere}
  .hero-description{margin-top:22px;font-size:var(--t-lead);line-height:1.65;max-width:35ch}.desktop-break{display:none}
  .hero-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.hero-benefits li{flex-direction:column;text-align:center;gap:9px}.benefit-icon{width:29px;height:29px}.hero-benefits span{font-size:var(--t-body);line-height:1.65}
  .hero-actions{gap:11px;flex-direction:column;margin-top:28px}.button{height:56px;width:100%;font-size:var(--t-btn);padding-inline:20px;gap:14px}.button-primary{justify-content:center;min-width:0}.button-outline{background:#0b1014e8}.button .icon{width:25px;height:25px}
  .hero-visual{margin-top:20px}
  .capabilities-inner{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:25px 30px;gap:22px 0}
  .capabilities li{border:0;padding:0 0 0 14px;gap:12px}.capabilities li:nth-child(odd){padding-left:0}.capabilities li:nth-child(even){border-left:1px solid #ffffff18}.capabilities li:nth-child(4){padding-left:14px;border-left:1px solid #ffffff18}.capabilities li:last-child{grid-column:1/-1;padding-top:20px;border-top:1px solid #ffffff18}
  .capability-icon{width:30px;height:30px}.capabilities strong{font-size:var(--t-body);white-space:normal}.capabilities span{font-size:var(--t-small);margin-top:3px}
}
@media(max-width:370px){:root{--gutter:18px}.demo-button{display:none}.hero-benefits{gap:8px}.hero-benefits span{font-size:var(--t-body)}.capabilities li{gap:9px;padding-left:10px}.capabilities li:nth-child(4){padding-left:10px}.capabilities strong{font-size:var(--t-body)}.capability-icon{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* The first light section uses the user's v11 palette and Manrope. */
.interface-section{position:relative;background:var(--paper);color:var(--paper-fg);font-family:var(--t-text);padding:80px 0 76px;scroll-margin-top:28px;overflow:hidden}
.interface-container{width:100%;max-width:calc(1280px + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.interface-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:end}
.section-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:#895635;font-weight:800;font-size:var(--t-caption);line-height:1.4;font-family:var(--t-text);letter-spacing:.06em;text-transform:uppercase}
.section-kicker>span{color:#8c969e;letter-spacing:0}
.interface-intro h2{font-size:var(--t-h2);line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance;font-family:var(--t-head)}
.interface-intro h2>span{color:#835439}
.interface-lead{margin:0 0 3px;max-width:530px;font-size:var(--t-intro);line-height:1.65;color:var(--paper-secondary);letter-spacing:normal}
.interface-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:38px;border-bottom:1px solid #d5dde3}
.interface-tab{position:relative;display:flex;align-items:center;gap:17px;text-align:left;padding:20px 24px 21px;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--paper-fg);font-family:var(--t-text);cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.interface-tab+.interface-tab::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:#dbe1e6}
.interface-tab:hover{background:#ffffff85}
.interface-tab[aria-selected=true]{border-bottom-color:#97623e;background:#fff;box-shadow:0 -4px 18px #0d141805}
.interface-tab[aria-selected=true]::before,.interface-tab[aria-selected=true]+.interface-tab::before{opacity:0}
.interface-tab:focus-visible{outline:2px solid #97623e;outline-offset:4px;z-index:2}
.tab-number{align-self:flex-start;padding-top:1px;font-weight:500;font-size:var(--t-body);line-height:1.65;font-family:var(--mono);color:#8b959e}
.interface-tab[aria-selected=true] .tab-number{color:#97623e}
.interface-tab strong{display:block;font-size:var(--t-body);line-height:1.65;font-weight:700;letter-spacing:normal}
.tab-description{display:block;font-size:var(--t-list);line-height:1.55;margin-top:5px;color:var(--paper-muted)}
.interface-stage{position:relative;isolation:isolate;margin:28px 0 0}
.interface-stage::before,.interface-stage::after{content:'';position:absolute;border:1px solid #d3dbe2;border-radius:20px;z-index:-1;pointer-events:none}
.interface-stage::before{inset:18px 17px -11px;background:#e1e6ec;transform:rotate(-.5deg)}
.interface-stage::after{inset:8px 8px -6px;background:#fafdff;transform:rotate(.3deg)}
.screen-shell{position:relative;overflow:hidden;border-radius:16px;border:1px solid #35414a;background:#171c21;box-shadow:0 24px 48px -24px #10283966,0 3px 9px #1528371a}
.screen-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 19px;height:56px;background:linear-gradient(180deg,#263039,#1b242b);border-bottom:1px solid #3b454d}
.screen-brand{display:flex;align-items:center;gap:10px;color:#e2e7eb;font-size:var(--t-list);font-weight:700;min-width:0}
.screen-brand>svg{width:21px;height:21px;color:#dc9b62;flex:none}
.screen-brand .screen-divider{color:#6c7a85;font-weight:400;margin-inline:8px}
#screen-name{font-size:var(--t-small);color:#b6c0c8;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-expand{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:36px;flex:none;padding:7px 11px;background:#ffffff07;border:1px solid #ffffff1a;border-radius:7px;color:#d7e0e7;font-size:var(--t-small);line-height:1.2;font-family:var(--t-text);cursor:pointer;transition:background .2s,border-color .2s}
.screen-expand:hover{background:#ffffff10;border-color:#cc955c99}
.screen-expand .icon{width:17px;height:17px;stroke-width:1.6}
.screen-panel{margin:0}
.screen-panel[hidden]{display:none}
.screen-panel:not([hidden]){animation:screen-arrive .32s ease-out}
.screen-viewport{height:clamp(360px,37vw,552px);overflow:auto;overscroll-behavior:contain;background:#151a1d;scrollbar-width:thin;scrollbar-color:#65717a #20282e;border:8px solid #171c21;border-top-width:10px;border-bottom-width:10px}
.screen-viewport img{display:block;width:100%;height:auto}
.screen-viewport:focus-visible{outline:2px solid #ca925e;outline-offset:-3px}
.screen-panel figcaption{padding:17px 23px 19px;min-height:62px;color:#a9b6c1;font-size:var(--t-list);line-height:1.55;border-top:1px solid #333d44;letter-spacing:normal}
.screen-panel figcaption strong{color:#e4eaf0;font-weight:600;margin-right:4px}
.interface-footnote{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:26px;color:var(--paper-muted);font-size:var(--t-caption);line-height:1.5}
.scroll-hint>span{display:inline-block;margin-left:7px;color:#97623e;font-size:16px}
.interface-section[data-motion=waiting] .interface-intro,.interface-section[data-motion=waiting] .interface-tabs,.interface-section[data-motion=waiting] .interface-stage{opacity:0;transform:translateY(18px)}
.interface-section[data-motion=visible] .interface-intro,.interface-section[data-motion=visible] .interface-tabs,.interface-section[data-motion=visible] .interface-stage{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.interface-section[data-motion=visible] .interface-tabs{transition-delay:.08s}
.interface-section[data-motion=visible] .interface-stage{transition-delay:.16s}
@keyframes screen-arrive{from{opacity:.5}to{opacity:1}}

.screen-dialog{width:min(1500px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;background:#13191d;color:#eaf0f4;border:1px solid #59636a;border-radius:14px;box-shadow:0 30px 100px #0008;overflow:hidden;font-family:var(--t-text)}
.screen-dialog[open]{display:flex;flex-direction:column}
.screen-dialog::backdrop{background:#081015b8;backdrop-filter:blur(8px)}
.screen-dialog-toolbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 16px 12px 24px;border-bottom:1px solid #364048;background:#202a32}
.screen-dialog-toolbar h2{font-size:var(--t-h3s);line-height:1.22;font-weight:800;margin:0;text-transform:none;letter-spacing:-.01em;font-family:var(--t-head)}
.screen-dialog-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff25;border-radius:7px;background:#ffffff05;cursor:pointer}
.screen-dialog-close:hover{background:#ffffff15}
.screen-dialog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px}
.screen-dialog-content img{width:100%;height:auto}
body.has-screen-dialog{overflow:hidden}

@media(max-width:1100px){
  .interface-section{padding-block:64px}.interface-intro{gap:32px}.interface-intro h2{font-size:var(--t-h2)}.interface-lead{font-size:var(--t-intro);line-height:1.65}
  .interface-tab{padding:18px 17px;gap:13px}.interface-tab strong{font-size:var(--t-body)}.tab-description{font-size:var(--t-list)}
  .screen-panel figcaption{min-height:84px}.interface-footnote{gap:16px}
}
@media(max-width:760px){
  .interface-section{padding:48px 0 44px}.interface-intro{grid-template-columns:1fr;gap:19px}.interface-intro h2{font-size:var(--t-h2);letter-spacing:-.03em}.section-kicker{margin-bottom:16px}.interface-lead{max-width:600px;font-size:var(--t-intro)}
  .interface-tabs{margin-top:24px}.interface-tab{padding:16px 12px;gap:9px}.tab-number{display:none}.interface-tab strong{font-size:var(--t-body)}.tab-description{display:none}.interface-tab+.interface-tab::before{top:17px;bottom:17px}
  .interface-stage{margin-top:20px}.screen-shell{border-radius:12px}.screen-toolbar{height:48px;padding-inline:12px;gap:12px}.screen-brand{font-size:var(--t-list);gap:8px}.screen-brand>svg{width:19px;height:19px}.screen-brand .screen-divider{margin-inline:2px}#screen-name{font-size:var(--t-small)}.screen-expand{width:34px;min-height:32px;padding:0}.screen-expand>span{display:none}
  .screen-viewport{height:auto;max-height:580px;overflow:auto;border-width:5px}.screen-panel figcaption{padding:14px 16px 16px;font-size:var(--t-list);min-height:106px}.screen-panel figcaption strong{display:block;margin-bottom:3px}
  .interface-footnote{font-size:var(--t-caption);justify-content:center;text-align:center;margin-top:22px}.scroll-hint{display:none}
  .screen-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:10px}.screen-dialog-toolbar{padding:9px 10px 9px 15px}.screen-dialog-toolbar h2{font-size:var(--t-h3s)}.screen-dialog-content{padding:5px}
}
@media(max-width:400px){.interface-intro h2{font-size:var(--t-h2)}.interface-tab{padding:15px 9px}.interface-tab strong{font-size:var(--t-body)}#screen-name{max-width:110px}.screen-brand{gap:6px}.screen-panel figcaption{min-height:128px}}
@media(prefers-reduced-motion:reduce){.interface-section[data-motion] .interface-intro,.interface-section[data-motion] .interface-tabs,.interface-section[data-motion] .interface-stage{opacity:1;transform:none;transition:none!important}.screen-panel{animation:none!important}}

/* The complete workflow scene follows the user's 1653 x 784 reference.
   The image defines the section height; nothing clips or translates it.
   Overlay coordinates are reference pixels scaled with the whole canvas. */
.workflow-section{position:relative;background:#090f13;color:#eef2f6;font-family:var(--t-text);scroll-margin-top:24px}
.workflow-container{--wf:min(calc(100vw / 1653),1.1615245px);position:relative;isolation:isolate;width:100%;max-width:var(--content);margin-inline:auto}
.workflow-background{display:block;width:100%;height:auto;pointer-events:none}
.workflow-intro{position:absolute;z-index:1;left:4.1137326%;right:4%;top:3.9540816%}
.workflow-intro .section-kicker{display:block;margin:0 0 calc(11 * var(--wf));color:#f6a24c;font-weight:800;font-size:var(--t-caption);line-height:calc(18 * var(--wf));font-family:var(--t-text);letter-spacing:.06em;text-transform:uppercase}
.workflow-intro h2{margin:0;font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.03em;white-space:nowrap;font-family:var(--t-head)}
.workflow-intro h2>span{display:block;color:#ff9c35;background:linear-gradient(180deg,#ffb651 8%,#ff9b2a 75%,#ef8123);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.workflow-lead{margin:calc(14 * var(--wf)) 0 0;font-size:var(--t-intro);line-height:calc(31 * var(--wf));letter-spacing:0;color:#bdcbd7}
.workflow-steps{position:absolute;z-index:1;left:3.9927405%;right:1.3309135%;top:55.4%;display:grid;grid-template-columns:calc(335 * var(--wf)) calc(310 * var(--wf)) calc(329 * var(--wf)) calc(337 * var(--wf)) minmax(0,1fr);gap:0;list-style:none;margin:0;padding:0}
.workflow-step{min-width:0;padding-right:calc(15 * var(--wf))}
.workflow-step:last-child{padding-right:0}
.step-art{display:none}
.step-marker{display:block;color:#f7903d;font-size:calc(35 * var(--wf));font-weight:800;line-height:calc(40 * var(--wf));letter-spacing:-.03em}
.workflow-step h3{margin:calc(2 * var(--wf)) 0 calc(11 * var(--wf));min-height:calc(26 * var(--wf));font-size:var(--t-h3);line-height:1.22;font-weight:800;letter-spacing:-.02em;color:#f0f3f6;font-family:var(--t-head)}
/* Пояснение под рядом шагов: занимает полосу между подписями и призывом. */
.workflow-note{position:absolute;z-index:1;left:3.9927405%;right:5.2%;top:68.4%;margin:0;font-size:var(--t-body);line-height:calc(29 * var(--wf));letter-spacing:0;color:#a7b7c6}
.workflow-cta{position:absolute;z-index:1;left:4.1137326%;right:4.4162129%;top:83.8010204%;display:grid;grid-template-columns:minmax(0,1fr) calc(431 * var(--wf));align-items:start;gap:calc(30 * var(--wf))}
.workflow-cta h3{margin:0;font-size:var(--t-h3);line-height:1.22;font-weight:800;letter-spacing:-.02em;color:#f0f3f6;font-family:var(--t-head)}
.workflow-cta p{margin:calc(4 * var(--wf)) 0 0;font-size:var(--t-intro);line-height:calc(34 * var(--wf));color:#bacbd9;letter-spacing:0}
.workflow-cta-button{width:100%;height:calc(80 * var(--wf));min-width:0;margin-top:calc(3 * var(--wf));gap:calc(18 * var(--wf));padding:0 calc(29 * var(--wf));font-size:var(--t-btn);font-weight:800;justify-content:center;border-radius:calc(13 * var(--wf));font-family:var(--t-text)}
.workflow-cta-button .icon:first-child{width:calc(34 * var(--wf));height:calc(39 * var(--wf))}.workflow-cta-button .icon:last-child{width:calc(27 * var(--wf));height:calc(27 * var(--wf))}
.workflow-section[data-motion=waiting] .workflow-background{opacity:0}
.workflow-section[data-motion=waiting] .workflow-step{opacity:0;transform:translateY(8px)}
.workflow-section[data-motion=visible] .workflow-background{opacity:1;transition:opacity .9s ease}
.workflow-step:nth-child(1){--step-delay:90ms}.workflow-step:nth-child(2){--step-delay:170ms}.workflow-step:nth-child(3){--step-delay:250ms}.workflow-step:nth-child(4){--step-delay:330ms}.workflow-step:nth-child(5){--step-delay:410ms}
.workflow-section[data-motion=visible] .workflow-step{opacity:1;transform:translateY(0);transition:opacity .6s ease var(--step-delay),transform .6s ease var(--step-delay)}
@supports(width:1cqw){.workflow-section{container-type:inline-size}.workflow-container{--wf:min(calc(100cqw / 1653),1.1615245px)}}
/* On narrow screens each illustration stays beside its readable HTML caption. */
@media(max-width:1100px){
  .workflow-section{padding:47px 0 43px;background:radial-gradient(ellipse at 90% 8%,#62341820,transparent 48%),#090f13}
  .workflow-container{padding-inline:var(--gutter)}.workflow-background{display:none}.workflow-intro{position:static}
  .workflow-intro .section-kicker{font-size:var(--t-caption);line-height:1.25;letter-spacing:.06em;margin-bottom:13px}
  .workflow-intro h2{font-size:var(--t-h2);line-height:1.08;max-width:980px;white-space:normal;letter-spacing:-.03em}
  .workflow-intro h2>span{}.workflow-lead{font-size:var(--t-intro);line-height:1.65;max-width:900px;margin-top:18px}
  .workflow-steps{position:static;display:block;margin-top:26px}
  .workflow-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:32px;align-items:start;padding:23px 0 26px;border-bottom:1px solid #ffffff10}
  .workflow-step:last-child{border-bottom:0;padding-bottom:0}
  .step-art{display:block;width:100%;height:auto;max-width:335px;grid-column:1;grid-row:1 / span 3;align-self:center;justify-self:center}
  .step-marker{grid-column:2;font-size:32px;line-height:1;align-self:end}.workflow-step h3{grid-column:2;margin:6px 0 13px;min-height:0;font-size:var(--t-h3);line-height:1.22}.workflow-step h3 br{display:none}
  
  .workflow-note{position:static;margin-top:24px;font-size:var(--t-body);line-height:1.65;max-width:900px}
  .workflow-cta{position:static;grid-template-columns:1fr;gap:24px;margin-top:31px;padding-top:26px;border-top:1px solid #ffffff1c}.workflow-cta h3{font-size:var(--t-h3);line-height:1.22}.workflow-cta p{margin-top:8px;font-size:var(--t-intro);line-height:1.65}
  .workflow-cta-button{justify-self:start;width:auto;font-size:var(--t-btn);height:69px;margin-top:0;padding-inline:27px;gap:17px;border-radius:12px}.workflow-cta-button .icon:first-child{width:33px;height:38px}.workflow-cta-button .icon:last-child{width:27px;height:27px}
}
@media(max-width:600px){
  .workflow-section{padding:40px 0 35px}.workflow-intro .section-kicker{font-size:var(--t-caption);letter-spacing:.06em;margin-bottom:14px}.workflow-intro h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.03em}.workflow-lead{font-size:var(--t-intro);line-height:1.65;margin-top:17px}
  .workflow-steps{margin-top:20px}.workflow-step{column-gap:18px;padding:24px 0}.step-art{max-width:285px}.step-marker{font-size:28px}.workflow-step h3{font-size:var(--t-h3);margin-bottom:12px}
  .workflow-note{margin-top:20px;font-size:var(--t-body);line-height:1.65}
  .workflow-cta h3{font-size:var(--t-h3)}.workflow-cta p{font-size:var(--t-intro)}.workflow-cta-button{width:100%;max-width:440px;height:65px;padding-inline:17px;font-size:var(--t-btn);gap:11px}.workflow-cta-button .icon:first-child{width:27px;height:32px}.workflow-cta-button .icon:last-child{width:24px;height:24px}
}
@media(max-width:390px){.workflow-step{column-gap:13px}.workflow-step h3{font-size:var(--t-h3)}.workflow-cta-button{font-size:var(--t-btn);padding-inline:12px;gap:10px}}
@media(prefers-reduced-motion:reduce){.workflow-section[data-motion] .workflow-background,.workflow-section[data-motion] .workflow-step{opacity:1;transform:none;transition:none!important}}

/* A quiet light module overview, using the approved v11 palette and Manrope. */
.modules-section{padding:76px 0 80px;background:var(--paper);color:var(--paper-fg);font-family:var(--t-text);scroll-margin-top:28px}
.modules-container{width:100%;max-width:calc(1280px + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.modules-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:48px}
.modules-intro .section-kicker{font-size:var(--t-small);margin-bottom:16px}
.modules-intro h2{margin:0;font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.03em;font-family:var(--t-head)}
.modules-intro h2>span{color:#835439;white-space:nowrap}
.modules-lead{margin:0 0 2px;max-width:520px;color:var(--paper-secondary);font-size:var(--t-intro);line-height:1.65;letter-spacing:normal}
.modules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:36px 0 0;padding:1px;list-style:none;border-radius:14px;background:var(--paper-line);overflow:hidden}
.module-card{display:flex;flex-direction:column;min-width:0;padding:27px 28px 23px;background:#fff}
.module-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:28px}
.module-icon{width:27px;height:27px;stroke-width:1.6;color:#96623f}
.module-number{font-weight:400;font-size:var(--t-list);line-height:1;font-family:var(--mono);color:#86939d;letter-spacing:.04em}
.module-card h3{margin:17px 0 10px;font-size:var(--t-h3s);line-height:1.22;font-weight:800;letter-spacing:-.01em;font-family:var(--t-head)}
.module-description{margin:0 0 23px;font-size:var(--t-body);line-height:1.65;letter-spacing:normal;color:var(--paper-secondary)}
.module-scope{margin:auto 0 0;padding-top:16px;border-top:1px solid #e7ecf0;color:#586976;font-size:var(--t-list);line-height:1.55;letter-spacing:normal}
.module-scope>span{padding-inline:5px;color:#9a6a47}
.module-card[data-motion=waiting]{opacity:0;transform:translateY(12px)}
.module-card[data-motion=visible]{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media(max-width:1100px){
  .modules-section{padding-block:64px}.modules-intro{gap:32px}.modules-intro h2{font-size:var(--t-h2)}.modules-lead{font-size:var(--t-intro);line-height:1.65}
  .module-card{padding:24px 23px 22px}.module-card h3{font-size:var(--t-h3s)}.module-description{line-height:1.65}
}
@media(max-width:960px){.modules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-card{padding:27px 28px 24px}.module-card h3{font-size:var(--t-h3s)}}
@media(max-width:760px){
  .modules-section{padding:48px 0}.modules-intro{grid-template-columns:1fr;gap:18px}.modules-intro h2{font-size:var(--t-h2)}.modules-lead{max-width:600px}
  .modules-grid{margin-top:27px}.module-card{padding:23px 21px 22px}.module-card h3{font-size:var(--t-h3s)}.module-scope{padding-top:14px}.module-scope>span{padding-inline:3px}
}
@media(max-width:600px){
  .modules-grid{grid-template-columns:1fr;border-radius:12px}.module-card{padding:24px}.module-card h3{font-size:var(--t-h3s);margin-top:15px}.module-description{margin-bottom:20px}.module-scope>span{padding-inline:5px}
}
@media(max-width:400px){.modules-intro h2{font-size:var(--t-h2)}.module-card{padding:22px 20px}.module-card h3{font-size:var(--t-h3s)}}
@media(prefers-reduced-motion:reduce){.module-card[data-motion]{opacity:1;transform:none;transition:none!important}}

/* Two equal scenarios keep the narrative compact after the light module grid. */
.scenarios-section{padding:66px 0 70px;background:#10171c;color:#edf2f5;font-family:var(--t-text);scroll-margin-top:28px}
.scenarios-container{width:100%;max-width:calc(1280px + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.scenarios-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:48px}
.scenarios-intro .section-kicker{color:#cea078;font-size:var(--t-small);margin-bottom:16px}
.scenarios-intro h2{margin:0;font-size:var(--t-h2);line-height:1.08;font-weight:800;letter-spacing:-.03em;font-family:var(--t-head)}
.scenarios-intro h2>span{color:#d6a578}
.scenarios-lead{margin:0 0 3px;max-width:520px;color:#b8c4cc;font-size:var(--t-intro);line-height:1.65;letter-spacing:normal}
.scenarios-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:34px}
.scenario-card{display:flex;flex-direction:column;min-width:0}
.scenario-art{width:100%;aspect-ratio:710 / 270;margin:0 0 23px;border:1px solid #2b363d;border-radius:12px;background:#0b1115;overflow:hidden;box-shadow:0 12px 24px -18px #0008}
.scenario-art img{display:block;width:100%;height:100%;object-fit:contain}
.scenario-label{margin:0 0 9px;color:#c49a78;font-weight:500;font-size:var(--t-list);line-height:1.55;font-family:var(--mono);letter-spacing:.055em}
.scenario-card h3{margin:0;font-size:var(--t-h3);line-height:1.22;font-weight:800;letter-spacing:-.02em;color:#f0f3f5;font-family:var(--t-head)}
.scenario-points{display:grid;gap:10px;margin:19px 0 25px;padding:0;list-style:none;color:#b8c4cc;font-size:var(--t-body);line-height:1.65;letter-spacing:normal}
.scenario-points li{position:relative;padding-left:20px}
.scenario-points li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border:1px solid #bc8c65;border-radius:1px}
.scenario-link{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:auto;padding-top:17px;border-top:1px solid #2b363e;color:#d7ab88;font-size:var(--t-body);line-height:1.65;font-weight:600;transition:color .2s,border-color .2s}
.scenario-link .icon{width:22px;height:22px;transition:transform .2s}
.scenario-link:hover{color:#f0c6a2;border-top-color:#7c5a43}.scenario-link:hover .icon{transform:translateX(3px)}
.scenario-link:focus-visible{outline:2px solid #d7ab88;outline-offset:6px;border-radius:2px}
.scenario-card[data-motion=waiting]{opacity:0;transform:translateY(12px)}
.scenario-card[data-motion=visible]{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
@media(max-width:1100px){.scenarios-intro,.scenarios-grid{gap:32px}.scenarios-intro h2{font-size:var(--t-h2)}.scenarios-lead{font-size:var(--t-intro);line-height:1.65}.scenario-card h3{font-size:var(--t-h3)}}
@media(max-width:760px){
  .scenarios-section{padding:48px 0}.scenarios-intro{grid-template-columns:1fr;gap:18px}.scenarios-intro h2{font-size:var(--t-h2)}.scenarios-lead{max-width:600px}
  .scenarios-grid{grid-template-columns:1fr;gap:38px;margin-top:28px}.scenario-art{margin-bottom:21px}.scenario-card h3{font-size:var(--t-h3)}.scenario-points{margin-top:16px;margin-bottom:20px}
}
@media(max-width:400px){.scenarios-intro h2{font-size:var(--t-h2)}.scenario-card h3{font-size:var(--t-h3)}.scenario-label{letter-spacing:.025em}}
@media(prefers-reduced-motion:reduce){.scenario-card[data-motion]{opacity:1;transform:none;transition:none!important}.scenario-link,.scenario-link .icon{transition:none!important}.scenario-link:hover .icon{transform:none}}

/* Installation and export are separate responsibilities, shown in equal panels. */
.transfer-section{padding:74px 0 78px;background:var(--paper);color:var(--paper-fg);font-family:var(--t-text);scroll-margin-top:28px}
.transfer-container{width:100%;max-width:calc(1280px + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.transfer-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:48px}
.transfer-intro .section-kicker{font-size:var(--t-caption);margin-bottom:16px;font-weight:800;letter-spacing:.06em}
.transfer-intro h2{margin:0;font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.03em;font-family:var(--t-head)}
.transfer-intro h2>span{color:#835439}
.transfer-lead{margin:0 0 3px;max-width:530px;font-size:var(--t-intro);line-height:1.65;letter-spacing:normal;color:var(--paper-secondary)}
.transfer-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
.transfer-panel{display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--paper-line);border-radius:14px;background:#fff}
.transfer-panel-heading{display:flex;align-items:center;gap:13px}
.transfer-number{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #e4d8cc;border-radius:7px;background:#f6f1ec;color:#85563a;font-weight:500;font-size:var(--t-list);line-height:1;font-family:var(--mono)}
.transfer-panel h3{margin:0;font-size:var(--t-h3s);line-height:1.22;font-weight:800;letter-spacing:-.01em;font-family:var(--t-head)}
.transfer-description{min-height:3.3em;margin:14px 0 24px;font-size:var(--t-body);line-height:1.65;letter-spacing:normal;color:var(--paper-secondary)}
.mta-products{display:grid;gap:10px;margin:0}
.mta-product{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border:1px solid #e1e6eb;border-radius:9px;background:#f6f8fa}
.mta-product dt{display:flex;align-items:center;gap:11px;font-size:var(--t-intro);line-height:1.65;font-weight:700;letter-spacing:normal}
.mta-product .icon{width:22px;height:22px;color:#91603f;stroke-width:1.7}
.mta-product dd{margin:0;text-align:right;color:#586976;font-size:var(--t-list);line-height:1.55}
.mta-installation{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;margin:18px 0 0;padding:13px 0 0;color:#596a76;font-size:var(--t-list);line-height:1.55}
.mta-installation li{display:flex;align-items:center;gap:14px;min-width:0}
.mta-installation .icon{width:18px;height:18px;color:#96623f;stroke-width:1.7}
.smtp-platforms{margin:0}
.smtp-platform{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #e8edf1}
.smtp-platform:first-child{padding-top:0}.smtp-platform:last-child{border-bottom:0;padding-bottom:0}
.smtp-platform dt{font-size:var(--t-body);line-height:1.65;font-weight:700;letter-spacing:normal}
.platform-status{margin:0;padding:4px 10px;border-radius:6px;font-size:var(--t-list);line-height:1.55;white-space:nowrap}
.platform-status.is-available{background:#eaf3ed;color:#326a48}
.platform-status.is-planned{background:#eef1f4;color:#5a6975}
.transfer-result{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:20px;border-top:1px solid var(--paper-line)}
.mta-installation+.transfer-result,.smtp-platforms+.transfer-result{margin-top:24px}
.transfer-panel:first-child .transfer-result{margin-top:auto}
.transfer-result>span{color:#64727d;font-size:var(--t-list);line-height:1.55}
.transfer-result strong{color:#714b33;font-size:var(--t-body);line-height:1.65;font-weight:700;letter-spacing:normal}
.transfer-bridge{position:absolute;z-index:2;left:50%;top:52%;display:grid;place-items:center;width:40px;height:40px;border:1px solid #d8c7b7;border-radius:50%;background:var(--paper);color:#96623f;transform:translate(-50%,-50%)}
.transfer-bridge .icon{width:23px;height:23px;stroke-width:1.6}
.transfer-panel[data-motion=waiting]{opacity:0;transform:translateY(12px)}
.transfer-panel[data-motion=visible]{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
@media(max-width:1100px){
  .transfer-section{padding-block:64px}.transfer-intro{gap:32px}.transfer-intro h2{font-size:var(--t-h2)}.transfer-lead{font-size:var(--t-intro);line-height:1.65}.transfer-panel{padding:24px}.transfer-panel h3{font-size:var(--t-h3s)}
  .mta-product{align-items:flex-start;flex-direction:column;gap:5px;padding:13px 15px}.mta-product dd{text-align:left;padding-left:33px}
  .transfer-panel:first-child .transfer-result{margin-top:24px}.transfer-panel:last-child .transfer-result{margin-top:auto}
}
@media(max-width:860px){
  .transfer-grid{grid-template-columns:1fr;gap:22px}.transfer-bridge{display:none}.transfer-panel{padding:28px}.transfer-panel h3{font-size:var(--t-h3s)}.transfer-description{min-height:0}
  .mta-product{flex-direction:row;align-items:center;gap:18px;padding:15px 17px}.mta-product dd{padding-left:0;text-align:right}
  .transfer-panel:last-child .transfer-result{margin-top:24px}.mta-installation{justify-content:flex-start;gap:24px}
}
@media(max-width:760px){
  .transfer-section{padding:48px 0}.transfer-intro{grid-template-columns:1fr;gap:18px}.transfer-intro h2{font-size:var(--t-h2)}.transfer-lead{max-width:600px}.transfer-grid{margin-top:27px}
}
@media(max-width:520px){
  .transfer-panel{padding:23px 21px}.transfer-panel-heading{gap:10px}.transfer-number{width:30px;height:30px}.transfer-panel h3{font-size:var(--t-h3s)}
  .mta-product{flex-direction:column;align-items:flex-start;gap:5px;padding:13px 15px}.mta-product dd{padding-left:33px;text-align:left}
  .mta-installation{justify-content:space-between;gap:8px}.mta-installation li{gap:7px}.mta-installation .icon{width:15px;height:15px}.smtp-platform{gap:12px}.platform-status{padding-inline:8px}
}
@media(max-width:400px){.transfer-intro h2{font-size:var(--t-h2)}.transfer-intro .section-kicker{letter-spacing:.06em}.transfer-panel{padding:21px 18px}.mta-installation{flex-direction:column;align-items:flex-start;gap:8px}.mta-installation li{gap:8px}.mta-installation li:first-child{padding-left:23px}.mta-installation .icon{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.transfer-panel[data-motion]{opacity:1;transform:none;transition:none!important}}

/* Native disclosure controls keep the FAQ compact and keyboard accessible. */
.faq-section{padding:72px 0 82px;background:radial-gradient(ellipse at 90% 0%,#60402c14,transparent 48%),#0f171b;color:#eef2f5;font-family:var(--t-text);scroll-margin-top:28px}
.faq-container{width:100%;max-width:calc(1180px + var(--gutter)*2);padding-inline:var(--gutter);margin-inline:auto}
.faq-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:48px}
.faq-intro .section-kicker{font-size:var(--t-small);margin-bottom:16px;color:#d1a07b}
.faq-intro h2{margin:0;font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.03em;font-family:var(--t-head)}
.faq-lead{margin:0 0 3px;max-width:460px;color:#b9c6ce;font-size:var(--t-intro);line-height:1.65;letter-spacing:normal}
.faq-list{margin-top:34px;border-top:1px solid #765640}
.faq-list details{border-bottom:1px solid #614734;transition:background .2s}
.faq-list details[open]{background:#ffffff06}
.faq-list summary{display:grid;grid-template-columns:36px minmax(0,1fr) 25px;align-items:center;gap:22px;min-height:68px;padding:17px 22px;list-style:none;cursor:pointer;color:#eff3f5;font-size:var(--t-faq);line-height:1.45;font-weight:800;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';justify-self:end;color:#d4a079;font:400 1.75rem/1 var(--sans)}
.faq-list details[open] summary::after{content:'−'}
.faq-list summary:hover{color:#fff}
.faq-list summary:focus-visible{outline:2px solid #d4a079;outline-offset:-3px;border-radius:4px}
.faq-number{color:#d3a078;font-weight:500;font-size:var(--t-list);line-height:1.55;font-family:var(--mono);letter-spacing:.02em}
.faq-answer{max-width:1000px;margin:0 64px 0 80px;padding:0 0 23px;color:#bfcbd3;font-size:var(--t-body);line-height:1.65;letter-spacing:normal;animation:faq-answer-arrive .28s ease-out both}
.faq-answer p{margin:0}.faq-answer a{color:#e0b493;text-decoration:underline;text-underline-offset:3px}.faq-answer a:hover{color:#f2ccb0}
@keyframes faq-answer-arrive{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.faq-section{padding-block:64px}.faq-intro{gap:32px}.faq-intro h2{font-size:var(--t-h2)}.faq-lead{font-size:var(--t-intro);line-height:1.65}}
@media(max-width:760px){.faq-section{padding:48px 0 56px}.faq-intro{grid-template-columns:1fr;gap:17px}.faq-intro h2{font-size:var(--t-h2)}.faq-list{margin-top:26px}.faq-list summary{grid-template-columns:30px minmax(0,1fr) 23px;gap:14px;padding:17px 15px;font-size:var(--t-faq)}.faq-answer{margin:0 42px 0 59px;padding-bottom:21px}}
@media(max-width:420px){.faq-intro h2{font-size:var(--t-h2)}.faq-list summary{grid-template-columns:24px minmax(0,1fr) 18px;gap:10px;padding-inline:10px}.faq-list summary::after{font-size:1.5rem}.faq-answer{margin:0 20px 0 44px}}
@media(prefers-reduced-motion:reduce){.faq-list details{transition:none!important}.faq-answer{animation:none!important}}

/* ═════════ финальный призыв и подвал (собраны при переносе) ═════════ */
.closing-section{position:relative;overflow:hidden;background:#090f13;color:#eef2f6;font-family:var(--t-text);
  padding:calc(96 * var(--u)) 0;text-align:center}
.closing-section::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 58% at 50% 44%,#e7964b26,transparent 70%)}
.closing-inner{position:relative;z-index:1}
.closing-section h2{margin:0;font-size:var(--t-h2);font-weight:800;line-height:1.08;letter-spacing:-.03em;font-family:var(--t-head)}
.closing-section h2 span{color:var(--copper-light)}
.closing-section p{margin:calc(20 * var(--u)) auto 0;max-width:58ch;color:#bdcbd7;font-size:var(--t-intro);line-height:1.65}
.closing-actions{display:flex;gap:calc(14 * var(--u));justify-content:center;flex-wrap:wrap;margin-top:calc(34 * var(--u))}

.site-footer{background:#0b1014;color:#eef2f6;font-family:var(--sans);border-top:1px solid #1d272e;
  padding:calc(64 * var(--u)) 0 0}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:calc(44 * var(--u))}
.footer-about p{margin:calc(18 * var(--u)) 0 0;max-width:36ch;color:#9fb0bd;font-size:calc(17 * var(--u));line-height:1.6}
.footer-about small{display:block;margin-top:calc(20 * var(--u));color:#697b88;font-size:calc(15 * var(--u))}
.site-footer h3{margin:0 0 calc(18 * var(--u));font-size:calc(14 * var(--u));font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.site-footer li a{color:#a9b8c4;font-size:calc(17 * var(--u));transition:color .18s}
.site-footer li a:hover{color:#eef2f6}
.footer-bottom{margin-top:calc(52 * var(--u));padding:calc(24 * var(--u)) 0;border-top:1px solid #1d272e;
  display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u));flex-wrap:wrap;
  color:#697b88;font-size:calc(15 * var(--u))}
.footer-bottom a{color:#697b88}.footer-bottom a:hover{color:#eef2f6}
.footer-lang b{color:var(--copper-light);font-weight:600}

@media(max-width:1100px){
  .closing-section{padding:70px 0}.closing-section h2{font-size:var(--t-h2)}.closing-section p{font-size:var(--t-intro);margin-top:16px}
  .closing-actions{margin-top:28px;gap:12px}
  .site-footer{padding-top:52px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .footer-about p{font-size:15px;margin-top:14px}.footer-about small{font-size:13px;margin-top:16px}
  .site-footer h3{font-size:12px;margin-bottom:14px}.site-footer li a{font-size:15px}
  .footer-bottom{margin-top:38px;font-size:13px;padding:18px 0}
}
@media(max-width:600px){
  .closing-section{padding:52px 0}.closing-section h2{font-size:var(--t-h2)}.closing-section p{font-size:var(--t-intro)}
  .closing-actions .button{width:100%;justify-content:center}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ═════════════════════════════════════════════════════════════════════════
   Совместимость с темой Vintech

   🔴 Весь блок написан через :where() — у него нулевая специфичность.
   Первая попытка была обычными селекторами: сброс `margin:0` стоял ниже по
   файлу и перебил отступы макета — текст первого экрана слипся в кучу.
   Теперь тема перебивается, а наши собственные правила остаются главнее.
   ═══════════════════════════════════════════════════════════════════════ */
:where(.hero,.interface-section,.workflow-section,.modules-section,
       .scenarios-section,.transfer-section,.faq-section,.closing-section){
  font-family:var(--t-text);
}
:where(.interface-section,.modules-section,.transfer-section,
       .scenarios-section,.faq-section){font-family:var(--t-text)}

:where(.hero,.interface-section,.workflow-section,.modules-section,
       .scenarios-section,.transfer-section,.faq-section,.closing-section)
:where(h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,details,summary){
color:inherit;margin:0;padding:0;text-transform:none;
}
:where(.hero,.interface-section,.workflow-section,.modules-section,
       .scenarios-section,.transfer-section,.faq-section,.closing-section)
:where(ul,ol){list-style:none}

/* Elementor оборачивает каждый блок в свои контейнеры с полями и предельной
   шириной — снимаем, наши секции считают ширину сами. */
body .elementor-widget-html{margin:0}
body .elementor-section-wrap>.elementor-section{margin:0;padding:0}

/* На главной у темы включён баннер с заголовком страницы («Главная») —
   между шапкой и первым экраном он лишний. */
body.mtahub-page .pxl--parallax,
body.mtahub-page .pxl-page-title,
body.mtahub-page .pxl-breadcrumbs{display:none}

/* 🔴 Тема печатает заголовки «С Заглавных Букв», а кнопки — КАПСОМ.
   Нулевая специфичность :where() здесь не спасает, поэтому отдельные правила
   с классом секции: регистр в макете задан текстом, а не стилем. */
.hero h1,.hero .title-line,.hero .title-accent,
.interface-intro h2,.workflow-intro h2,.modules-intro h2,
.scenarios-intro h2,.transfer-intro h2,.faq-intro h2,.closing-section h2,
.workflow-step h3,.module-card h3,.scenario-card h3,.transfer-panel h3,
.interface-tab strong,.faq-list summary{text-transform:none}
.hero .button,.closing-section .button,.workflow-cta-button,.transfer-panel .button{text-transform:none;letter-spacing:normal;font-family:var(--t-text);font-weight:800}
.screen-expand,.scenario-link,.interface-tab,.module-card .module-scope,.transfer-result span{text-transform:none;letter-spacing:normal}
.faq-list summary{text-transform:none;letter-spacing:-.01em;font-weight:800}

/* Между шапкой темы и первым экраном оставалась пустая полоса от обёртки. */
body.mtahub-page .pxl-wapper>.pxl--parallax{display:none}
body.mtahub-page .elementor-section-wrap>.elementor-section:first-child{margin-top:0}

/* Тема оставляет 100 px воздуха над содержимым страницы — для обычных страниц
   с баннером это уместно, для первого экрана во всю ширину нет. */
/* Отступ в 100 px задаёт тема правилом `.elementor-page:not(.single-product)
   #pxl-main`. Чтобы перебить, нужна не меньшая специфичность: id плюс два
   класса на body. Первая попытка с `body.mtahub-page #pxl-main` (без второго класса) проигрывала. */
body.mtahub-page.elementor-page #pxl-main{padding-top:0;padding-bottom:0}

/* 🔴 Тема красит все заголовки в чёрный (#000) правилом с высокой
   специфичностью — на тёмных секциях они пропадали. Возвращаем цвет
   макета там, где он задан не переменной, а наследованием. */
.hero h1,.hero .title-line,
.workflow-intro h2,.closing-section h2,
.scenarios-intro h2,.faq-intro h2{color:var(--ink-fg)}
.interface-intro h2,.modules-intro h2,.transfer-intro h2{color:var(--paper-fg)}
.hero .title-accent{color:#ff9c35}
.workflow-intro h2>span,.closing-section h2 span{color:var(--copper-light)}
.interface-intro h2>span,.modules-intro h2>span,.transfer-intro h2>span{color:#835439}
.scenarios-intro h2>span{color:var(--copper-light)}

/* Остатки: призыв в блоке шагов тема писала «С Заглавных», а названия
   продуктов в блоке экспорта — КАПСОМ. В макете это обычный регистр. */
.workflow-cta h3{text-transform:none}
.mta-products dt,.platform-list dt,.transfer-panel dt{text-transform:none;letter-spacing:normal}

/* 🔴 Тема перекрашивает всё интерактивное при наведении в белый. На светлых
   секциях вкладка становилась нечитаемой. Возвращаем цвета макета: при
   наведении меняется фон, а не текст. */
.interface-tab:hover,.interface-tab:focus,.interface-tab:focus-visible,
.interface-tab:hover strong,.interface-tab:focus strong{color:var(--paper-fg)}
.interface-tab:hover .tab-description,.interface-tab:focus .tab-description{color:var(--paper-muted)}
.interface-tab:hover .tab-number,.interface-tab:focus .tab-number{color:#8b959e}
.interface-tab[aria-selected=true]:hover .tab-number{color:#97623e}

.screen-expand:hover,.screen-expand:focus{color:#d7e0e7}
.hero .button-outline:hover,.hero .button-outline:focus,
.closing-section .button-outline:hover,.closing-section .button-outline:focus{color:var(--ink-fg)}
.scenario-link:hover,.scenario-link:focus{color:var(--copper-light)}
.module-card:hover h3,.module-card:focus-within h3{color:inherit}
.faq-list summary:hover,.faq-list summary:focus{color:inherit}

/* 🔴 Настоящая причина «резинового» отступа: Elementor держит свои контейнеры
   уже окна (по умолчанию 1470 px) и центрирует их. На 1920 текст первого экрана
   отъезжал на 236 px от края, на 1000 — прижимался почти вплотную. Секции
   макета считают поля сами, поэтому ограничение ширины с них снимаем. */
body.mtahub-page .elementor-section>.elementor-container{max-width:none;width:100%}
body.mtahub-page .elementor-column,
body.mtahub-page .elementor-widget-wrap{padding:0}

/* 🔴 Класс .container есть и у макета, и у темы. Тема режет его до 1470 px,
   из-за чего на широком экране первый экран съезжал к центру, а отступ слева
   «плыл» вместе с шириной окна. В макете контейнер во всю ширину. */
/* Тема задаёт ширину внутри медиазапросов (на больших экранах 1470 px), и
   обычное правило её не перебивает. Здесь !important оправдан: совпали имена
   классов, а переименовывать разметку макета дороже. */
body.mtahub-page .hero .container,
body.mtahub-page .closing-section .container{max-width:var(--content)!important;width:100%!important}

/* Строки шли впритык: «SMTP-Инфраструктурой» лежала на «Управление». */
.hero h1 .title-accent{margin-top:calc(12 * var(--u));display:block}

/* Третья строка — уточнение «На базе PowerMTA и MailerQ»: цвет как у первой,
   кегль меньше, капителью. Регистр задан стилем, поэтому правило должно быть
   специфичнее блока `text-transform:none` выше — отсюда `h1` в селекторе. */
.hero h1 .title-base{display:block;margin-top:calc(19 * var(--u));font-size:.5em;line-height:1.15;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#e8edf3}
/* Названия MTA — цветом акцентной строки. Тема делает вложенные span в
   заголовках блочными, поэтому регистр строки задаём inline явно. */
.hero h1 .title-base .brand{display:inline;color:#ff9c35;-webkit-text-fill-color:#ff9c35}
@media(max-width:960px){ .hero h1 .title-base{margin-top:13px;font-size:.5em;letter-spacing:.05em} }
@media(max-width:600px){ .hero h1 .title-base{margin-top:9px;font-size:.5em;letter-spacing:.05em} }

/* Полоса возможностей под первым экраном: снизу было 50 px против 28 сверху —
   пустая область перевешивала. Выравниваем. */
.capabilities-inner{padding-bottom:calc(30 * var(--u))}
@media(max-width:1280px){ .capabilities-inner{padding-block:28px 30px} }

/* 🔴 Тема ставит заголовкам свой Inter правилом с высокой специфичностью —
   строки выходили шире, чем в макете. Возвращаем гарнитуры макета: тёмные
   секции набраны Roboto, светлые — Manrope. */
.hero h1,.workflow-intro h2,.workflow-step h3,.workflow-cta h3,.closing-section h2{font-family:var(--t-head);font-weight:800}
.hero .title-line,.hero .title-accent{}

/* Блоки сценариев и вопросов в макете набраны Manrope, хотя фон у них тёмный */
.scenarios-intro h2,.scenario-card h3,.faq-intro h2{font-family:var(--t-head);font-weight:800}
.scenario-label{font-family:var(--t-text)}
.faq-list summary{font-family:var(--t-text);font-weight:800;letter-spacing:-.01em}

.interface-intro h2,.modules-intro h2,.module-card h3,.transfer-intro h2,.transfer-panel h3{font-family:var(--t-head);font-weight:800}
.interface-tab strong{font-family:var(--t-text)}

/* Кнопкам тема подставляет свой Rubik — в макете они набраны тем же
   шрифтом, что и секция вокруг. */
.hero .button,.workflow-cta-button,.closing-section .button{font-family:var(--t-text);font-weight:800}
.hero .button span,.workflow-cta-button span,.closing-section .button span{font-family:var(--t-text)}
.interface-section .button,.modules-section .button,.transfer-section .button{font-family:var(--t-text);font-weight:800}
.scenario-link,.screen-expand{font-family:var(--t-text)}