/* ══════════════════════════════════════════════════════════════════════════
   Общее для страниц инструментов: «Титульные листы» (tituly.html),
   «Пояснительная записка» (pz.html), «XML» (xml.html). Токены, шапка,
   кнопки, первый экран, приглашение и подвал — как в макетах дизайнера
   (Figma «gip-lab», секции 737:6249, 743:874, 743:1368) и как на главной.
   Свои блоки каждая страница описывает у себя.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --c-primary:#000000;
  --c-text:#0a0a0a;
  --c-text2:#171717;
  --c-text3:#737373;
  --c-muted:rgba(0,0,0,.6);
  --c-surface:#f5f5f5;
  --c-border:#e5e5e5;
  --c-bg:#ffffff;
  --c-bg2:#fafafa;
  --c-gip:#007aff;           /* синее «gip» в названии — как в макете */

  --sp-4:4px;   --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-72:72px;
  --sp-80:80px; --sp-120:120px; --sp-124:124px;

  --r-sm:8px; --r-lg:20px; --r-xl:32px; --r-full:40px;

  --page:1440px;
  --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-h2:'Manrope','Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);
  font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.5px;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,p{margin:0}

.t-h1{font-size:56px;line-height:62px;letter-spacing:-2.8px;font-weight:600}
.t-h2{font-family:var(--font-h2);font-size:40px;line-height:42px;letter-spacing:-2px;font-weight:600}
.t-h4{font-size:20px;line-height:32px;letter-spacing:-.5px}
.t-body-lg{font-size:18px;line-height:28px;letter-spacing:-.45px}
.t-body-sm{font-size:14px;line-height:20px;letter-spacing:0}
.t-caption{font-size:13px;line-height:20px;letter-spacing:0}
.gip{color:var(--c-gip)}
.lab{color:var(--c-text)}

.page{max-width:var(--page);margin:0 auto;padding:0 var(--sp-32);width:100%}
.sec-zag{text-align:center;color:var(--c-text)}

/* ── шапка — как на главной ── */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px)}
.top-in{max-width:var(--page);margin:0 auto;height:64px;padding:0 var(--sp-32);
  display:flex;align-items:center;gap:var(--sp-20)}
.brand{display:flex;align-items:center;flex:none;color:var(--c-primary)}
.brand svg{width:58px;height:20px}
.nav{display:flex;align-items:center;flex:1}
.nav a{padding:0 var(--sp-16);height:64px;display:flex;align-items:center;
  font-size:14px;transition:color .15s}
.nav a:hover{color:var(--c-text3)}
.btn-login{height:40px;padding:0 var(--sp-20);border-radius:var(--r-full);
  background:rgba(0,0,0,.04);display:inline-flex;align-items:center;flex:none;
  transition:background .15s}
.btn-login:hover{background:rgba(0,0,0,.1)}

/* ── кнопка «Попробовать»: h 48, px 20 ── */
.btn{height:48px;padding:0 var(--sp-20);display:inline-flex;align-items:center;
  gap:var(--sp-8);flex:none}
.btn-primary{background:var(--c-primary);color:var(--c-bg2);border-radius:var(--r-full);
  transition:background .15s}
.btn-primary:hover{background:#2b2b2b}
.btn-primary svg{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn-primary:hover svg{transform:rotate(45deg)}

/* ── первый экран: pt 72, две колонки по 648, gap 80 ── */
.hero{display:flex;align-items:center;gap:var(--sp-80);padding-top:var(--sp-72)}
.hero-txt{flex:1 1 0;min-width:0;max-width:800px;display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-32);text-align:center}
.hero-zag{display:flex;flex-direction:column;align-items:center;gap:var(--sp-24);width:100%}
.hero-lead{max-width:560px}
/* Плашка 648×540, картинка в ней квадратная 648×648 по центру — края сверху
   и снизу срезаны, как в макете. Пропорции держим и на узком экране. */
.hero-pic{flex:1 1 0;min-width:0;aspect-ratio:648/540;border-radius:var(--r-xl);
  background:var(--c-surface);overflow:hidden;position:relative}
.hero-pic img{position:absolute;left:0;top:50%;width:100%;height:auto;
  aspect-ratio:1/1;transform:translateY(-50%)}

/* ── приглашение: px 32, pb 120; плашка h 172, скругление 32 ── */
.prigl-wrap{padding-bottom:var(--sp-120)}
.prigl{background:#f8f8f8;border-radius:var(--r-xl);min-height:172px;padding:0 var(--sp-32);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24)}
.prigl h2{color:var(--c-text)}

/* ── подвал — макет 895:13463 (16.10): текст колонок ровно по краю страницы,
   подложка ссылки выступает на 16 влево и скруглена на 8; под колонками
   в 26 px — строка о владельце и почта, снизу 70 ── */
footer{background:var(--c-surface);padding:var(--sp-32) 0 70px}
.f-in{display:flex;column-gap:var(--sp-48);row-gap:26px;align-items:flex-start;flex-wrap:wrap}
.f-cols{display:flex;gap:var(--sp-48);flex:1;flex-wrap:wrap}
.f-col{display:flex;flex-direction:column;gap:var(--sp-8)}
.f-col:first-child{margin-left:calc(-1 * var(--sp-16));width:119px}
.f-col h4{margin:0;padding:0 0 var(--sp-16) var(--sp-16);color:var(--c-muted);font-weight:500}
.f-col a{height:36px;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-sm);color:var(--c-text);
  display:inline-flex;align-items:center;width:fit-content;transition:background .15s}
.f-col a:hover{background:rgba(0,0,0,.08)}
.f-mark{padding-top:var(--sp-8);flex:none;color:var(--c-primary)}
.f-mark svg{width:58px;height:20px}
.f-vlad{flex-basis:100%;margin:0;color:var(--c-text3)}
.f-vlad a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* на узком экране колонки переносятся: сдвигаем все, иначе текст первой
   стоял бы левее остальных */
@media(max-width:860px){
  .f-col,.f-col:first-child{margin-left:calc(-1 * var(--sp-16));width:auto}
}

/* ── адаптив: макеты нарисованы под 1440 ── */
@media(max-width:1000px){
  .hero{flex-direction:column;gap:var(--sp-48)}
  .hero-txt,.hero-pic{flex:none;width:100%}
  .hero-pic{max-width:648px}
}
@media(max-width:860px){
  :root{--sp-72:48px;--sp-80:48px;--sp-120:64px;--sp-124:16px}
  .nav{gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:0 10px;height:44px;white-space:nowrap;font-size:13px}
  .top-in{height:auto;min-height:56px;flex-wrap:wrap;padding:8px var(--sp-20);gap:var(--sp-8)}
  .brand{order:1} .btn-login{order:2;margin-left:auto} .nav{order:3;width:100%}
  .t-h1{font-size:32px;line-height:36px;letter-spacing:-1.2px}
  .t-h2{font-size:28px;line-height:32px;letter-spacing:-1px}
  .t-h4{font-size:17px;line-height:26px}
  .t-body-lg{font-size:16px;line-height:24px}
  .page,.top-in{padding-left:var(--sp-20);padding-right:var(--sp-20)}
  .prigl{flex-direction:column;align-items:flex-start;justify-content:center;
    padding:var(--sp-32) var(--sp-24)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .btn-primary:hover svg{transform:none}
}