/* Synapse Systems — shared brand tokens (Визуальная стратегия v2.1) */
:root{
  --graphite:#0E1116; --graphite-2:#12161D; --sapphire:#0A1B30;
  --beige:#F2EEE8; --fog:#E9EDF0;
  --ink:#EBEFF3; --ink-55:rgba(235,239,243,.55); --ink-30:rgba(235,239,243,.30); --ink-14:rgba(235,239,243,.14);
  --amber:#D8B26A;
  --c-core:#D8DCE2; --c-personal:#5FA8B8; --c-insight:#8FA3B8; --c-ib:#B06070; --c-medical:#C97A84;
  --font-hero:'Oswald',sans-serif; --font-cond:'Roboto Condensed',sans-serif; --font-ui:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--graphite);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(216,178,106,.25)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* film grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:120;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}

/* header */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:26px 4vw;mix-blend-mode:normal;transition:background .35s,border-color .35s}
.topbar .brand img{height:26px;width:auto;opacity:.92}
.topnav{display:flex;align-items:center;gap:34px;font-family:var(--font-ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-55)}
.topnav a{transition:color .3s}
.topnav a:hover{color:var(--ink)}
.lang{background:none;border:1px solid var(--ink-14);color:var(--ink-55);font-family:var(--font-ui);font-size:10px;
  letter-spacing:.3em;padding:7px 12px 7px 15px;cursor:pointer;text-transform:uppercase;transition:.3s}
.lang:hover{color:var(--amber);border-color:rgba(216,178,106,.4)}

/* corner micro-labels */
.micro{position:fixed;z-index:99;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--amber);opacity:.85}
.micro.bl{left:4vw;bottom:26px}
.micro.br{right:4vw;bottom:82px;color:var(--ink-30)}

.backlink{position:fixed;z-index:101;left:4vw;bottom:52px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-30);transition:color .3s}
.backlink:hover{color:var(--ink)}

/* shared hero type */
.h-hero{font-family:var(--font-hero);font-weight:300;text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
.h-cond{font-family:var(--font-cond);font-weight:300;text-transform:uppercase;letter-spacing:.02em}
.label{font-family:var(--font-ui);font-size:10px;letter-spacing:.34em;text-transform:uppercase}

.mask-reveal{overflow:hidden}
.mask-reveal>*{display:block;transform:translateY(110%);animation:maskUp 1.1s cubic-bezier(.22,.61,.2,1) forwards}
@keyframes maskUp{to{transform:translateY(0)}}

@media (max-width:760px){
  .topnav{gap:18px;font-size:10px;letter-spacing:.2em}
  .micro.bl{display:none}
}