/* ══════════════════════════════════════════════════════════════════════
   QKC Core — единый дизайн-слой продуктов OuRi Corp
   Извлечён из QKC (Quick Knowledge Check). Монохром, offline-first, zero-deps.
   Подключать ПЕРЕД собственным CSS сайта: <link rel="stylesheet" href="css/qkc-core.css">
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- токены ---------- */
:root{
  --bg:#08080a; --bg2:#0d0d10; --surface:#111114; --surface2:#17171b;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --text:#f4f4f5; --text2:#c8c8cd; --muted:#8b8b93; --muted2:#5f5f68;
  --inv:#08080a; --inv-text:#fff; --ok:#fff;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --r:14px; --r-sm:10px; --r-lg:22px;
  --fs:16px; --gap:clamp(16px,2.2vw,28px);
  --maxw:1240px; --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --grain:.05; --noise-on:1;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Space Grotesk",-apple-system,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#f4f4f5; --bg2:#ececee; --surface:#fff; --surface2:#f7f7f8;
  --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.20);
  --text:#0a0a0c; --text2:#26262b; --muted:#55555e; --muted2:#7c7c86;
  --inv:#fff; --inv-text:#08080a;
  --shadow:0 24px 60px -24px rgba(0,0,0,.28);
}

/* ---------- база ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px) }
body{
  margin:0; font-family:var(--font); font-size:var(--fs); line-height:1.6;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:inherit }
::selection{ background:var(--text); color:var(--bg) }

/* ---------- доступность ---------- */
:focus-visible{ outline:2px solid var(--text); outline-offset:3px; border-radius:4px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200; background:var(--text); color:var(--bg);
  padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none;
  transform:translateY(-200%); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:none }

/* ---------- фоновые слои ---------- */
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);
}
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:calc(var(--grain)*var(--noise-on));
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 40%,rgba(0,0,0,.55) 100%);
}
:root[data-theme="light"] .vignette{ background:radial-gradient(ellipse 120% 80% at 50% -10%,transparent 45%,rgba(0,0,0,.07) 100%) }
:root[data-grain="off"] .grain{ display:none }
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* ---------- индикатор прокрутки ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent }
.scroll-progress i{ display:block; height:100%; width:0; background:var(--text); transition:width .1s linear }

/* ---------- типографика ---------- */
.kicker{ display:inline-block; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.h1{ font-family:var(--font-d); font-size:clamp(2.6rem,7vw,5.2rem); line-height:.98; letter-spacing:-.035em; font-weight:700; margin:.1em 0 .3em }
.h1-sm{ font-family:var(--font-d); font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.05; letter-spacing:-.03em; font-weight:700; margin:0 }
.h2{ font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.1; letter-spacing:-.025em; font-weight:700; margin:0 }
.h3{ font-family:var(--font-d); font-size:1.15rem; letter-spacing:-.01em; font-weight:600; margin:0 }
.lead{ font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--text2); max-width:62ch; line-height:1.6 }
.muted{ color:var(--muted) } .sm{ font-size:.85rem }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }
code,kbd,pre{ font-family:var(--font-mono) }

/* ---------- контейнер ---------- */
.wrap{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:0 var(--gap) }
.section{ padding:clamp(56px,8vw,104px) 0; position:relative; z-index:3 }
.section--tight{ padding:36px 0 }

/* ---------- навигация ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid transparent; transition:border-color .3s,background .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line) }
.nav__in{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--gap); display:flex; align-items:center; gap:18px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.02em }
.brand__name{ font-family:var(--font-d); font-size:1.02rem }
.nav__links{ display:flex; gap:4px; margin-left:auto }
.nav__link{
  padding:8px 13px; border-radius:999px; text-decoration:none; color:var(--muted);
  font-size:.88rem; font-weight:500; transition:color .2s,background .2s;
}
.nav__link:hover{ color:var(--text); background:var(--surface2) }
.nav__link.is-active{ color:var(--text); background:var(--surface2) }
.nav__right{ display:flex; align-items:center; gap:8px }

/* ---------- кнопки ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 20px; border-radius:999px; border:1px solid var(--line2); background:transparent;
  color:var(--text); font-weight:600; font-size:.92rem; letter-spacing:-.01em; cursor:pointer;
  text-decoration:none; font-family:inherit;
  transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .25s;
  overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--text2) }
.btn:active{ transform:translateY(0) scale(.985) }
.btn--primary{ background:var(--text); color:var(--bg); border-color:var(--text) }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
:root[data-theme="light"] .btn--primary::after{ background:linear-gradient(120deg,transparent 20%,rgba(0,0,0,.18) 50%,transparent 80%) }
.btn--primary:hover::after{ transform:translateX(120%) }
.btn--primary:hover{ box-shadow:0 10px 30px -12px rgba(255,255,255,.35) }
:root[data-theme="light"] .btn--primary:hover{ box-shadow:0 10px 26px -14px rgba(0,0,0,.4) }
.btn--ghost:hover{ background:var(--surface2) }
.btn--sm{ padding:9px 15px; font-size:.83rem }
.btn--lg{ padding:15px 26px; font-size:1rem }
.icon-btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center; width:38px; height:38px;
  border-radius:11px; border:1px solid var(--line); background:transparent; cursor:pointer;
  color:var(--text2); transition:.18s var(--ease); font-family:inherit;
}
.icon-btn:hover{ color:var(--text); border-color:var(--line2); background:var(--surface2) }

/* ---------- карточки / панели ---------- */
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg2)); padding:24px;
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
.card:hover{ border-color:var(--line2); transform:translateY(-3px); box-shadow:var(--shadow) }
.card__ico{
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  border:1px solid var(--line2); color:var(--text); margin-bottom:14px;
}
.card h3{ font-family:var(--font-d); font-size:1.05rem; margin:0 0 6px; letter-spacing:-.01em }
.card p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.6 }
.grid{ display:grid; gap:var(--gap) }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }

/* ---------- чипы / бейджи ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--text2);
  font-size:.78rem; font-weight:500;
}
.beta{
  font-size:.58rem; letter-spacing:.14em; font-weight:700; padding:3px 7px;
  border:1px solid var(--line2); border-radius:6px; color:var(--muted);
}

/* ---------- футер ---------- */
.foot{ border-top:1px solid var(--line); margin-top:60px; position:relative; z-index:3 }
.foot__in{
  max-width:var(--maxw); margin:0 auto; padding:34px var(--gap);
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  color:var(--muted); font-size:.84rem;
}
.foot a{ color:var(--text2); text-decoration:none } .foot a:hover{ color:var(--text) }

/* ---------- появление при скролле ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }

/* ---------- уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
  .reveal{ opacity:1; transform:none }
  .grain{ animation:none }
}
@media (prefers-contrast:more){
  :root{ --line:rgba(255,255,255,.34); --line2:rgba(255,255,255,.6); --muted:#d5d5dc }
  :root[data-theme="light"]{ --line:rgba(0,0,0,.34); --line2:rgba(0,0,0,.6); --muted:#33333a }
}

/* ---------- печать ---------- */
@media print{
  .grain,.vignette,.grid-overlay,.nav,.scroll-progress,.skip-link{ display:none!important }
  body{ background:#fff; color:#000 }
  .section{ padding:12px 0 }
  .card{ border-color:#ccc; background:#fff; box-shadow:none; break-inside:avoid }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555 }
}