/* ГласПро — направление A2 «Стальная шкала»
   ДНК 02-stalnoy-klinikal (cold · light · grotesk · split-object · media_capacity: medium)
   линза minimalist-ui · планка живости commercial · стек: ваниль */

/* ---------- шрифты (self-hosted, кириллица) ---------- */
@font-face{font-family:'Unbounded';src:url('fonts/unbounded-cyrillic-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Unbounded';src:url('fonts/unbounded-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:'Unbounded';src:url('fonts/unbounded-cyrillic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Unbounded';src:url('fonts/unbounded-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:'PT Root UI';src:url('fonts/ptrootui-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PT Root UI';src:url('fonts/ptrootui-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PT Root UI';src:url('fonts/ptrootui-700.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ---------- токены ---------- */
:root{
  --fog:#EDF0F4;        /* 60% — фон страницы, холодный off-white */
  --paper:#FFFFFF;      /* 30% — поверхности карточек и панелей */
  --panel:#E1E6EC;      /* поверхность-объект «под лампой» */
  --ink:#141922;        /* текст + primary CTA, холодный почти-чёрный */
  --ink-h:#2A323E;      /* hover CTA */
  --ink-2:#59636F;      /* вторичный текст */
  --steel:#97A2AF;      /* акцент 10% — ТОЛЬКО штрихи, линии, деления, иконки */
  --hairline:#D2D9E1;   /* служебный 1px */
  --amber:#FFB41D;      /* точечный статус-маркер (Tier 1, иконка логотипа) */

  --sh-1:0 1px 2px rgba(20,26,36,.06);
  --sh-2:0 1px 2px rgba(20,26,36,.06), 0 14px 32px -12px rgba(20,26,36,.16);
  --r-s:8px; --r-m:14px;
  --wrap:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

@view-transition{navigation:auto}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fog);color:var(--ink);
  font:400 18px/1.6 'PT Root UI',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:'Unbounded','Arial Black',sans-serif;letter-spacing:-.02em;line-height:1.08}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:60;background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:var(--r-s)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 18px/1 'PT Root UI',sans-serif;text-decoration:none;
  padding:16px 24px;border-radius:var(--r-s);border:0;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn--lg{padding:20px 32px}
.btn--wide{width:100%;padding:20px 24px}
.btn--solid{background:var(--ink);color:var(--paper);box-shadow:var(--sh-1)}
.btn--solid:hover{background:var(--ink-h)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--steel)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink-2);padding:16px 8px}
.btn--ghost:hover{color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(237,240,244,.86);backdrop-filter:blur(12px)}
.hdr__in{width:min(100% - 40px,var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:24px;height:80px}
.hdr__logo{display:flex;margin-right:auto}
.hdr__logo img{width:150px}
.nav{display:none}
.hdr__act{display:flex;align-items:center;gap:8px}
.hdr__login{display:none}
.hdr__start{display:none}

.burger{width:48px;height:48px;display:grid;place-items:center;background:var(--paper);border-radius:var(--r-s);box-shadow:var(--sh-1);border:0;cursor:pointer}
.burger__ico{display:grid;gap:5px;width:20px}
.burger__ico i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] .burger__ico i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__ico i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__ico i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav.is-open{
  display:flex;flex-direction:column;gap:8px;
  position:fixed;inset:80px 0 auto 0;z-index:39;
  background:var(--paper);padding:24px 20px 32px;box-shadow:var(--sh-2);
}
.nav.is-open a{padding:16px 8px;text-decoration:none;font-weight:500;border-radius:var(--r-s)}
.nav.is-open a:hover{background:var(--fog)}
.nav__cta{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.nav__cta .btn{width:100%}

/* ---------- hero ---------- */
.hero{padding:40px 0 0}
.hero__in{width:min(100% - 40px,var(--wrap));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.hero__type{min-width:0}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);
  background:var(--paper);padding:8px 16px;border-radius:999px;box-shadow:var(--sh-1);
}
.dot{position:relative;width:8px;height:8px;border-radius:999px;background:var(--amber);flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 1px var(--amber);opacity:0}

h1{margin:24px 0 0;font-weight:600;font-size:clamp(35px,4.4vw,56px);overflow-wrap:break-word}
.mark{
  background-image:linear-gradient(var(--amber),var(--amber));
  background-size:100% .08em;background-position:0 calc(100% - .04em);background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.lead{margin-top:24px;max-width:34em;color:var(--ink-2);font-size:22px;line-height:1.5}
.lead--sm{font-size:18px;max-width:32em}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.note{margin-top:24px;font-size:13px;color:var(--ink-2)}

/* сцена: объект «под лампой» + floating-карточка */
.hero__scene{position:relative;min-width:0}
.scene{
  position:relative;border-radius:var(--r-m);padding:32px 24px 40px;
  background:
    radial-gradient(110% 80% at 26% 10%,rgba(255,255,255,.96),rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg,rgba(151,162,175,.14) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(151,162,175,.14) 0 1px,transparent 1px 40px),
    linear-gradient(160deg,var(--panel),#EAEEF3);
  box-shadow:var(--sh-2);
}
.scene::after{content:"";position:absolute;left:24px;right:24px;bottom:20px;height:1px;background:var(--hairline)}
/* кадр обрезан по правому краю: собственная карточка мокапа уходит из кадра,
   роль «протокола» берёт на себя floating-карточка ниже — одна карточка в сцене, не две */
/* mobile/tablet: мокап клиента показывается целиком, floating-карточка идёт ниже отдельным слоем */
.scene__frame{position:relative;width:100%;border-radius:var(--r-s);overflow:hidden}
.scene__shot{position:static;width:100%;max-width:none}

.float{
  margin:0;position:relative;z-index:2;width:min(100%,340px);
  margin-top:-40px;margin-left:auto;
  background:var(--paper);border-radius:var(--r-m);padding:24px;box-shadow:var(--sh-2);
}
.float__hd{font-weight:700;font-size:18px;margin-bottom:16px}
.float__list li{position:relative;padding-left:24px;font-size:18px;color:var(--ink-2);line-height:1.4;margin-bottom:16px}
.float__list li::before{
  content:"";position:absolute;left:0;top:5px;width:12px;height:8px;
  border-left:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(-45deg);
}
.float__ft{margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink-2)}

/* полоса доверия */
.trust{
  width:min(100% - 40px,var(--wrap));margin:48px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:32px 24px;border-top:1px solid var(--hairline);
}
.trust__lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.trust__ico{height:48px;width:auto;opacity:.92}
.trust__names{font-size:13px;color:var(--ink-2);text-align:center}

/* ---------- «Как это работает» ---------- */
.how{padding:80px 0}
.kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.h2{font-weight:600;font-size:clamp(28px,3.4vw,44px);max-width:16em}

/* шкала встречи — деления, на которых стоят шаги */
.steps{display:grid;gap:32px;margin-top:48px;counter-reset:s}
.step{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-m);padding:24px;box-shadow:var(--sh-1);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.step:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.step__n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.step__t{margin-top:8px;font-family:'PT Root UI',sans-serif;font-weight:700;font-size:22px;letter-spacing:0;line-height:1.25}
.step__d{margin-top:8px;font-size:18px;color:var(--ink-2);line-height:1.5}
.step__shot{margin-top:24px;border-radius:var(--r-s);overflow:hidden;background:var(--panel);aspect-ratio:707/310}
.step__d{margin-bottom:24px}
.step .step__shot{margin-top:auto}
.step__shot img{width:100%;height:100%;object-fit:contain}

/* ---------- плотная продуктовая сцена: пример протокола ---------- */
.proto{margin-top:48px;background:var(--paper);border-radius:var(--r-m);box-shadow:var(--sh-2);overflow:hidden}
.proto__hd{display:flex;align-items:center;gap:16px;padding:16px 24px;background:var(--fog)}
.proto__dots{display:flex;gap:8px}
.proto__dots i{width:8px;height:8px;border-radius:999px;background:var(--hairline)}
.proto__title{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.proto__badge{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.proto__body{display:grid}
.col{padding:24px}
.col--talk{background:var(--paper)}
.col--proto{background:var(--paper);border-top:1px solid var(--hairline)}
.col__lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.col__lbl--mt{margin-top:24px}
.col__sum{margin-top:8px;font-size:18px;color:var(--ink-2);line-height:1.55}

.talk{margin-top:16px;display:grid;gap:8px}
.talk li{display:grid;grid-template-columns:56px 1fr;gap:8px 16px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--hairline)}
.talk li:first-child{border-top:0}
.tc{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sp{font-size:13px;font-weight:700;color:var(--ink)}
.talk .tx{grid-column:2;font-size:18px;color:var(--ink-2);line-height:1.5}
.talk em{font-style:normal;box-shadow:inset 0 -.5em 0 rgba(255,180,29,.28)}

.tasks{margin-top:16px;display:grid;gap:8px}
.tasks li{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;
  padding:16px 0;border-top:1px solid var(--hairline)}
.tasks li:first-child{border-top:0}
.tick{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--steel);position:relative}
.tick--on{background:var(--ink);box-shadow:none}
.tick--on::after{content:"";position:absolute;left:4px;top:4px;width:8px;height:5px;
  border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:rotate(-45deg)}
.tasks .tx{font-size:18px;color:var(--ink);line-height:1.4}
.sys,.due{font-size:13px;color:var(--ink-2);white-space:nowrap}
.sys{display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;background:var(--fog);width:max-content}
.due{font-variant-numeric:tabular-nums}

.tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;color:var(--ink);background:var(--fog);padding:8px 16px;border-radius:999px}
.col__exp{margin-top:24px;padding-top:16px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink-2)}

/* ---------- приложение ---------- */
/* ---------- приложение: лента реальных экранов ---------- */
.apps{padding:0 0 80px}
.apps .lead{margin-top:16px}
.rail-shell{position:relative;margin-top:40px}
.lane{
  display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:24px;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:8px;overscroll-behavior-x:contain;
}
.lane::-webkit-scrollbar{display:none}
.lane__i{scroll-snap-align:start}
.rail-btn{
  position:absolute;top:40%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:999px;border:0;
  background:var(--paper);color:var(--ink);box-shadow:var(--sh-2);
  font-size:22px;line-height:0;display:grid;place-items:center;padding:0 0 4px;cursor:pointer;
  transition:opacity .2s var(--ease),background-color .2s var(--ease);
}
.rail-btn:hover{background:var(--fog)}
.rail-btn:disabled{opacity:.25;cursor:default}
.rail-btn--prev{left:-16px}
.rail-btn--next{right:-16px}
.rail-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.rail-dot{
  width:8px;height:8px;padding:0;border-radius:999px;border:0;
  background:var(--hairline);cursor:pointer;transition:background-color .2s var(--ease)
}
.rail-dot.is-active{background:var(--ink)}
.lane__shot{
  border-radius:var(--r-m);overflow:hidden;background:var(--panel);
  aspect-ratio:3/4;box-shadow:var(--sh-1);
}
.lane__shot img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.lane__c{margin-top:16px;font-size:13px;color:var(--ink-2)}
.badges{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.badges img{height:48px;width:auto}
.demo__shot{margin-bottom:32px;border-radius:var(--r-m);overflow:hidden;background:var(--panel);aspect-ratio:16/7}
.demo__shot img{width:100%;height:100%;object-fit:cover;object-position:right center}

/* ---------- демо ---------- */
.demo{padding:0 0 80px}
.demo__in{display:grid;gap:40px;background:var(--paper);border-radius:var(--r-m);padding:40px 24px;box-shadow:var(--sh-2)}
.form{display:grid;gap:16px;align-content:start}
.form__t{font-weight:700;font-size:18px}
.fld{display:grid;gap:8px}
.fld__l{font-size:13px;color:var(--ink-2)}
.fld__i{
  font:400 18px/1.4 'PT Root UI',sans-serif;color:var(--ink);
  background:var(--fog);border:0;box-shadow:inset 0 0 0 1px var(--hairline);
  border-radius:var(--r-s);padding:16px;
}
.fld__i:focus{outline:2px solid var(--ink);outline-offset:2px}
.agree{display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start;font-size:13px;color:var(--ink-2);line-height:1.5}
.agree input{width:20px;height:20px;accent-color:var(--ink);margin:0}

/* ---------- подвал ---------- */
.ftr{padding:48px 0 64px;border-top:1px solid var(--hairline)}
.ftr__in{display:grid;gap:16px}
.ftr__logo{width:150px;opacity:.9}
.ftr__req,.ftr__cnt{font-size:13px;color:var(--ink-2);line-height:1.6}

/* ---------- ≥768px ---------- */
@media (min-width:768px){
  .hero{padding:56px 0 0}
  .steps{grid-template-columns:repeat(2,1fr)}
  .proto__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .col{padding:32px}
  .col--proto{border-top:0;box-shadow:inset 1px 0 0 var(--hairline)}
  .lane{grid-auto-columns:240px;gap:32px}
  .demo__in{grid-template-columns:1fr 1fr;padding:48px 40px;align-items:center}
  .ftr__in{grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
  .ftr__cnt{text-align:right}
  .trust{flex-direction:row;justify-content:center;gap:32px}
}

/* ---------- ≥1024px: десктопная навигация и осевой сплит ---------- */
@media (min-width:1024px){
  .burger{display:none}
  .hdr__login,.hdr__start{display:inline-flex}
  .nav{display:flex;align-items:center;gap:32px;margin-right:32px}
  .nav > a{text-decoration:none;font-size:18px;color:var(--ink-2);transition:color .2s var(--ease)}
  .nav > a:hover{color:var(--ink)}
  .nav__cta{display:none}

  .hero__in{grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:64px;align-items:center}
  .hero{padding:64px 0 0}
  .scene{padding:40px 32px 48px}
  /* desktop: кадр обрезан по правому краю — карточка мокапа уходит из кадра,
     её роль берёт floating-карточка, свисающая с панели */
  .scene__frame{aspect-ratio:700/545}
  .scene__shot{position:absolute;left:-2%;top:-3%;width:150%}
  .float{position:absolute;right:-16px;bottom:-16px;margin:0;width:320px}

  .how{padding:120px 0}
  .steps{grid-template-columns:repeat(4,1fr);gap:24px;padding-top:40px}
  /* шкала встречи: hairline с делениями, на которых стоят шаги */
  .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--steel),rgba(151,162,175,.3))}
  .steps{position:relative}
  .step::before{content:"";position:absolute;left:24px;top:-40px;width:1px;height:24px;background:var(--steel)}
  .step::after{content:"";position:absolute;left:21px;top:-44px;width:7px;height:7px;border-radius:999px;background:var(--fog);box-shadow:inset 0 0 0 1px var(--steel)}
  .step{padding:32px}
  .step__shot{margin-top:32px}

  .proto{margin-top:64px}
  .demo__in{padding:64px}
}

/* ---------- движение (планка commercial) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* момент 1 — единая система reveal секций (scroll-driven, одна кривая) */
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 4% cover 26%}
  /* момент 2 — «идёт запись»: пульс янтарного маркера, один тип элементов */
  .dot::after{animation:ping 3.2s var(--ease) infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ping{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}

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