/* TPPRF — base stylesheet */

/* ---------- Fonts (self-hosted, woff2 only) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Theme tokens ---------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#F4F5F7;
  --fg:#0E0F12;
  --fg-2:#5C6069;
  --line:#E2E4E8;
  --accent:#2F5BEA;
  --badge-fg:#2A52D6; /* текст бейджа: 5.1:1 на --bg-2, 5.6:1 на --bg (акцент давал 4.4:1) */
  --accent-soft:rgba(47,91,234,.10);
  --shadow:0 1px 2px rgba(14,15,18,.04);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1180px;
  --pad:clamp(1rem,4vw,2.5rem);
  --section:clamp(3.5rem,8vw,7.5rem);
  --radius:6px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0E0F12;
  --bg-2:#16181D;
  --fg:#F2F3F5;
  --fg-2:#9AA0AA;
  --line:#262A31;
  --accent:#6E8CFF;
  --badge-fg:#6E8CFF;
  --accent-soft:rgba(110,140,255,.12);
  --shadow:none;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F12;
    --bg-2:#16181D;
    --fg:#F2F3F5;
    --fg-2:#9AA0AA;
    --line:#262A31;
    --accent:#6E8CFF;
    --badge-fg:#6E8CFF;
    --accent-soft:rgba(110,140,255,.12);
    --shadow:none;
    color-scheme:dark;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
svg{display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,figure,figcaption{margin:0}
ul{padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.section + .section{border-top:1px solid var(--line)}
.prose{max-width:62ch}
.lede{font-size:clamp(1.0625rem,.98rem + .4vw,1.25rem);color:var(--fg-2)}
.stack-s > * + *{margin-top:.75rem}
.stack-m > * + *{margin-top:1.25rem}
.stack-l > * + *{margin-top:2.5rem}

h1,h2,h3{line-height:1.15;letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2rem,1.3rem + 3.1vw,4rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.5rem)}
h3{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);letter-spacing:-.005em}
p{max-width:62ch}

.eyebrow{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-2);
}

/* ---------- Wordmark ---------- */
.mark{
  font-family:var(--mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3em;
  line-height:1.1;
  display:block;
}
/* Буквы T-P-P-R-F в слогане — цветом акцента, как буквы в узлах схемы конвейера */
.tagline .tl{color:var(--accent);font-weight:500}
/* Якорь блока «How we work»: не прятать заголовок под липкой шапкой */
#how-we-work{scroll-margin-top:6rem}
.tagline{
  font-family:var(--mono);
  font-weight:400;
  color:var(--fg-2);
  letter-spacing:.04em;
  line-height:1.3;
  white-space:nowrap;
}

/* ---------- Header ---------- */
.skip{
  position:absolute;z-index:100;
  width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--bg);color:var(--fg);border:0;border-radius:var(--radius);
}
.skip:focus{
  width:auto;height:auto;clip-path:none;overflow:visible;
  left:1rem;top:1rem;padding:.6rem 1rem;border:1px solid var(--line);
}

.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hdr{
  display:flex;align-items:center;gap:1rem;
  min-height:76px;
}
.brand-block{display:flex;flex-direction:column;flex:0 0 auto;padding-block:.35rem}
.brand{text-decoration:none;display:block}
.brand .mark{font-size:1.0625rem}
.brand-block .tagline{font-size:clamp(.5625rem,.8vw,.6875rem);letter-spacing:.05em;margin-top:.25rem}
.brand:hover .mark{color:var(--accent)}

.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  text-decoration:none;
  font-size:.9375rem;
  color:var(--fg-2);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"],.nav a.active{color:var(--fg);border-bottom-color:var(--accent)}

.tools{display:flex;align-items:center;gap:.65rem;margin-left:auto}
.nav + .tools{margin-left:clamp(1rem,2.5vw,2rem)}

.lang{
  display:flex;align-items:center;gap:.3rem;
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
}
.lang a{text-decoration:none;color:var(--fg-2);padding:.25rem .15rem}
.lang a:hover{color:var(--fg)}
.lang a[aria-current="true"]{color:var(--accent);font-weight:500}
.lang span{color:var(--fg-2)}

.icon-btn{
  appearance:none;background:transparent;border:1px solid var(--line);
  color:var(--fg);border-radius:var(--radius);
  width:38px;height:38px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
}
.menu-btn{display:none}
.menu-btn .close{display:none}
.site-header.open .menu-btn .close{display:block}
.site-header.open .menu-btn .burger{display:none}

@media (max-width:1023px){
  .hdr{min-height:64px;gap:.5rem}
  .brand-block .tagline{font-size:.6875rem}
  .menu-btn{display:inline-flex}
  .tools{margin-left:auto;gap:.4rem}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.25rem;
  }
  .site-header.open .nav{display:block}
  .nav ul{display:block}
  .nav li + li{border-top:1px solid var(--line)}
  .nav a{display:block;padding:.85rem 0;font-size:1rem}
  .nav a[aria-current="page"],.nav a.active{border-bottom-color:transparent;color:var(--accent)}
}
@media (max-width:559px){
  .hdr{flex-wrap:wrap;padding-block:.5rem;gap:.4rem .5rem}
  .brand-block{display:contents}
  .brand{order:1;padding-block:.25rem}
  .tools{order:2}
  .brand-block .tagline{
    order:3;flex-basis:100%;
    font-size:clamp(.625rem,2.9vw,.6875rem);
    margin-top:-.15rem;padding-bottom:.15rem;
  }
  .nav{order:4}
}
@media (max-width:380px){
  :root{--pad:.875rem}
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.9375rem;font-weight:500;
  text-decoration:none;
  padding:.8rem 1.4rem;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  background:var(--accent);
  color:#FFFFFF;
  line-height:1.2;
}
:root[data-theme="dark"] .btn{color:#0E0F12}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#0E0F12}}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{
  background:transparent;border-color:var(--line);color:var(--fg);
}
:root[data-theme="dark"] .btn-ghost{color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-ghost{color:var(--fg)}}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}

.link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-soft);
  font-weight:500;
  display:inline-flex;align-items:center;gap:.4rem;
}
.link:hover{border-bottom-color:currentColor}
.link .arr{font-family:var(--mono)}

.back-link{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;
  color:var(--fg-2);text-decoration:none;display:inline-flex;gap:.5rem;align-items:center;
}
.back-link:hover{color:var(--accent)}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--badge-fg);
  background:var(--accent-soft);
  border:1px solid var(--accent-soft);
  border-radius:100px;
  padding:.3rem .7rem;
  white-space:nowrap;
}
.badge::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;
}
.title-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{
  position:absolute;inset:0;
  color:var(--line);
  pointer-events:none;
  z-index:0;
}
.hero-bg svg{width:100%;height:100%;min-height:100%}
.hero .wrap{position:relative;z-index:1}
.hero-inner{padding-block:clamp(3.25rem,9vw,8rem);max-width:46rem}
.hero .mark{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.25rem)}
.hero .tagline{font-size:clamp(.625rem,.52rem + .45vw,.875rem);margin-top:.5rem}
.hero h1{margin-top:clamp(1.75rem,4vw,2.75rem)}
.hero .lede{margin-top:1.25rem}
.hero .btn-row{margin-top:2.25rem}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1023px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  position:relative;
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:var(--shadow);
}
a.card{text-decoration:none;transition:border-color .15s ease,transform .15s ease}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
a.card:hover h3{color:var(--accent)}
.card p{color:var(--fg-2);font-size:1rem;margin:0}
.card .ornament{color:var(--fg-2);margin-bottom:.25rem}
.card .ornament svg{width:56px;height:56px}
.card .go{
  margin-top:auto;padding-top:.5rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  color:var(--accent);
}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap}

/* ---------- Pipeline schema (T-P-P-R-F) ---------- */
.pipeline{display:flex;align-items:flex-start;margin:0;padding:0;list-style:none}
.pl-step{
  flex:1 1 0;min-width:0;position:relative;
  text-align:center;padding-inline:.65rem;
}
/* connector line, split around the node */
.pl-step::before,.pl-step::after{
  content:"";position:absolute;top:31px;height:2px;
  background:var(--line);
}
.pl-step::before{left:0;right:calc(50% + 36px)}
.pl-step::after{left:calc(50% + 36px);right:0}
.pl-step:first-child::before,.pl-step:last-child::after{content:none}
.pl-node{position:relative;z-index:1;display:block;width:64px;height:64px;margin-inline:auto}
.pl-node svg{width:64px;height:64px;color:var(--fg)}
.pl-name{
  font-family:var(--mono);font-weight:500;font-size:1rem;letter-spacing:0;
  margin-top:1rem;overflow-wrap:break-word;
}
.pl-desc{
  color:var(--fg-2);font-size:.9375rem;line-height:1.5;
  margin:.45rem auto 0;max-width:24ch;
  overflow-wrap:break-word;
}
@media (max-width:1023px){
  .pipeline{display:block}
  .pl-step{
    display:grid;grid-template-columns:56px 1fr;column-gap:1.1rem;
    text-align:left;padding:0 0 1.75rem;
  }
  .pl-step:last-child{padding-bottom:0}
  .pl-step::before{content:none}
  .pl-step::after{
    content:"";left:27px;right:auto;top:60px;bottom:.3rem;
    width:2px;height:auto;
  }
  .pl-step:last-child::after{content:none}
  .pl-node{grid-row:1 / span 2;width:56px;height:56px;margin-inline:0}
  .pl-node svg{width:56px;height:56px}
  .pl-name{margin-top:.35rem}
  .pl-desc{margin-inline:0;max-width:52ch}
}

/* ---------- Case list ---------- */
.case{
  display:flex;gap:1.25rem;align-items:flex-start;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-2);
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.case .ornament{flex:0 0 auto;color:var(--fg-2)}
.case .ornament svg{width:64px;height:64px}
.case p{color:var(--fg-2);font-size:1rem;margin-top:.5rem}
.case-feats{gap:.45rem;margin-top:.85rem;font-size:1rem}
.case-feats li{padding-left:1.5rem}
.case-feats li::before{width:10px}
@media (max-width:559px){.case{flex-direction:column;gap:.9rem}}

/* ---------- Diagrams ---------- */
.figure{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-2);
  padding:clamp(1rem,3vw,2rem);
}
.figure svg{width:100%;height:auto;color:var(--fg)}
.figure figcaption{
  margin-top:1rem;font-size:.8125rem;color:var(--fg-2);font-family:var(--mono);letter-spacing:.03em;
}
.d-wide{display:block}
.d-narrow{display:none}
@media (max-width:767px){
  .d-wide{display:none}
  .d-narrow{display:block}
}
.ac{stroke:var(--accent)}
.ac-f{fill:var(--accent);stroke:none}
.sv-fill{fill:var(--bg)}
.sv-fill-2{fill:var(--bg-2)}
.sv-label{fill:currentColor;font-family:var(--mono);font-weight:500}
.sv-sub{fill:var(--fg-2);font-family:var(--sans)}
.sv-letter{fill:var(--accent);font-family:var(--mono);font-weight:500}

/* ---------- Lists ---------- */
.ticks{display:grid;gap:.9rem;max-width:62ch}
.ticks li{
  position:relative;padding-left:1.9rem;color:var(--fg-2);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:12px;height:2px;border-radius:1px;background:var(--accent);
}
.ticks strong{color:var(--fg);font-weight:500}

.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{
  display:grid;grid-template-columns:minmax(9rem,16rem) 1fr;gap:1rem;
  border-bottom:1px solid var(--line);padding:1.1rem 0;
}
.facts dt{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--fg-2);padding-top:.15rem}
.facts dd{margin:0;max-width:62ch}
@media (max-width:659px){.facts div{grid-template-columns:1fr;gap:.3rem}}

/* ---------- CTA band ---------- */
.cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-2);
  padding:clamp(1.5rem,4vw,2.75rem);
}
.cta p{font-size:clamp(1.0625rem,1rem + .5vw,1.375rem);margin:0;max-width:40ch}

/* ---------- Contact ---------- */
.mail{
  font-family:var(--mono);
  font-size:clamp(1.125rem,.9rem + 1.6vw,2rem);
  font-weight:500;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-soft);
  word-break:break-word;
  display:inline-block;
  letter-spacing:-.01em;
}
.mail:hover{border-bottom-color:currentColor}
.offices{font-family:var(--mono);font-size:1.0625rem;line-height:1.9}
.offices .soon{color:var(--fg-2)}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,4rem);
  background:var(--bg);
}
.foot-grid{
  display:grid;gap:2rem;
  grid-template-columns:1.4fr 1fr 1fr;
  align-items:start;
}
@media (max-width:767px){.foot-grid{grid-template-columns:1fr;gap:1.75rem}}
.site-footer .mark{font-size:1.0625rem}
.site-footer .tagline{font-size:clamp(.625rem,2.6vw,.75rem);margin-top:.45rem}
.foot-h{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);margin-bottom:.7rem;
}
.foot-mail{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);font-size:1rem}
.foot-mail:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-cities{color:var(--fg-2);font-size:1rem}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--fg-2);
}
.foot-bottom .lang{font-size:.8125rem}
.copy{font-family:var(--mono);letter-spacing:.06em}

/* ---------- 404 ---------- */
.notfound{
  min-height:52vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3rem,10vw,7rem);
}
.code-404{
  font-family:var(--mono);font-size:clamp(3rem,10vw,6rem);font-weight:500;
  color:var(--accent);line-height:1;letter-spacing:.06em;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  a.card:hover{transform:none}
}