@charset "utf-8";

/* orleq — монохромная вёрстка */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --mute:#6f6f6f;
  --soft:#f4f4f4;
  --line:#dcdcdc;
  --wrap:1200px;
  --pad:clamp(20px,5vw,56px);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(15px,1.02vw,17px)/1.6 var(--sans);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:.98}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}

::selection{background:var(--ink);color:var(--paper)}
/* на тёмном фоне выделение текста инвертируем, иначе его не различить */
.access ::selection,.foot ::selection,.card:hover ::selection{background:var(--paper);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:12px 18px;font:500 13px/1 var(--mono);
}
.skip:focus{left:0}

/* фокус заметен на любом фоне: кольцо берёт цвет текста элемента,
   а под ним чёрная подложка — если кольцо слилось с фоном, её видно */
:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--ink);
}

/* ---------- типографика ---------- */

.eyebrow{
  font:500 12px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
}
.eyebrow .brk{opacity:.45}
.eyebrow--inv{color:rgba(255,255,255,.55)}

.sec{padding-block:clamp(64px,10vw,130px);border-top:1px solid var(--line)}

.sec__head{
  display:grid;
  gap:clamp(18px,3vw,28px);
  padding-bottom:clamp(34px,5vw,60px);
}
.sec__title{font-size:clamp(1.95rem,5.4vw,4rem);text-transform:uppercase}

/* ---------- шапка ---------- */

.head{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex;align-items:center;gap:24px;height:66px}

.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;margin-right:auto;
}
.brand__mark{width:62px;height:auto;flex:none}
.brand__txt{
  font:500 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}

.nav{display:flex;gap:28px}
.nav a{
  text-decoration:none;font:500 13px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding:6px 0;border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--ink)}

.burger{display:none}

/* ---------- кнопки ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  font:600 14px/1 var(--sans);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn__ar{transition:transform .14s ease}
.btn:hover .btn__ar{transform:translateX(4px)}
.btn--sm{padding:11px 16px;font-size:13px}
.btn--lg{padding:20px 30px;font-size:16px}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--inv:hover{background:transparent;color:var(--paper)}

/* ---------- герой ---------- */

.hero{border-bottom:1px solid var(--line)}
.hero__in{
  padding-block:clamp(36px,6vw,70px) clamp(48px,8vw,96px);
  background-image:radial-gradient(var(--line) 1px,transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
}
.hero__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,5vw,56px);
}

.sigil{
  margin:0;width:104px;flex:none;
  border:1px solid var(--line);background:var(--paper);
  padding:14px;
}
.sigil__svg{width:100%;height:auto}

.hero__title{
  font-size:clamp(2.7rem,11.2vw,8.4rem);
  text-transform:uppercase;
  letter-spacing:-.045em;
  max-width:14ch;
}
.hero__lead{
  margin-top:clamp(20px,3vw,32px);
  max-width:54ch;
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.5;
  color:#242424;
}

.hero__act{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(28px,4vw,44px);
}

.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  margin-top:clamp(44px,7vw,88px);
}
.facts li{
  padding:18px 20px 0 0;
}
/* разделитель отодвинут на границу ячейки, а текст — от него, чтобы не липнул */
.facts li + li{
  border-left:1px solid var(--line);
  padding-left:20px;
}
.facts b{
  display:block;font:600 clamp(1.1rem,2vw,1.5rem)/1 var(--sans);
  letter-spacing:-.02em;
}
.facts span{
  display:block;margin-top:6px;
  font:400 11px/1.3 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
}

/* ---------- бегущая строка ---------- */

.ticker{
  border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--paper);
  padding-block:15px;padding-inline:var(--pad);
}
.ticker__row{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,30px);
  flex-wrap:wrap;
  font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}
.ticker__row span{white-space:nowrap}
.ticker__row i{
  width:5px;height:5px;background:var(--ink);
  transform:rotate(45deg);flex:none;
}

/* ---------- карточки принципов ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
}
.card{
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .14s ease,color .14s ease;
}
.card:hover{background:var(--ink);color:var(--paper)}
.card:hover .card__n{color:rgba(255,255,255,.55)}
.card__n{
  font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--mute);
  transition:color .14s ease;
}
.card h3{font-size:clamp(1.15rem,1.8vw,1.5rem);text-transform:uppercase}
.card p:last-child{font-size:.95rem;line-height:1.55;color:inherit;opacity:.8}

/* ---------- шаги ---------- */

.sec--dots .wrap{position:relative}
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.step{
  border-top:1px solid var(--ink);
  padding-top:16px;
  display:flex;flex-direction:column;gap:10px;
}
.step__n{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
.step h3{font-size:clamp(1.2rem,2vw,1.6rem);text-transform:uppercase}
.step p{font-size:.98rem;line-height:1.55;max-width:34ch}
.step a{text-underline-offset:3px}

.note{
  margin-top:clamp(34px,5vw,58px);
  padding-top:16px;border-top:1px solid var(--line);
  font:400 13px/1.6 var(--mono);color:var(--mute);
}
.note span{display:block;max-width:70ch}

/* ---------- чёрный блок ---------- */

.access{background:var(--ink);color:var(--paper);padding-block:clamp(64px,11vw,140px)}
.access__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,6vw,80px);align-items:center;
}
.access__col{display:grid;gap:clamp(16px,2.4vw,24px);justify-items:start}
.access__title{font-size:clamp(2.1rem,7vw,5.2rem);text-transform:uppercase;letter-spacing:-.04em}
.access__lead{max-width:50ch;color:rgba(255,255,255,.72);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55}
.access__col .btn{margin-top:clamp(6px,1.5vw,16px)}
.access__meta{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
/* ассеты приходят чёрными на прозрачном, поэтому на тёмных блоках
   инвертируем: для чистого чёрного это точное превращение в белый */
.access__sigil{width:clamp(110px,16vw,200px);height:auto;filter:invert(1);opacity:.92}

/* ---------- вопросы ---------- */

.faq{border-top:1px solid var(--ink)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;
  font:600 clamp(1.02rem,1.8vw,1.3rem)/1.3 var(--sans);letter-spacing:-.02em;
  text-transform:uppercase;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--mute)}
.faq__i i{
  position:relative;flex:none;width:14px;height:14px;
}
.faq__i i::before,.faq__i i::after{
  content:"";position:absolute;background:currentColor;
}
.faq__i i::before{left:0;top:6.5px;width:14px;height:1px}
.faq__i i::after{left:6.5px;top:0;width:1px;height:14px;transition:transform .16s ease}
.faq__i[open] i::after{transform:scaleY(0)}
.faq__a{padding:0 40px 24px 0}
.faq__a p{max-width:64ch;color:#2e2e2e;line-height:1.6}
.faq__a a{text-underline-offset:3px}

/* ---------- финальный призыв ---------- */

.cta{border-top:1px solid var(--line);padding-block:clamp(64px,10vw,120px)}
.cta__in{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.cta__title{font-size:clamp(1.9rem,5.4vw,4rem);text-transform:uppercase;max-width:18ch}

/* ---------- подвал ---------- */

.foot{background:var(--ink);color:var(--paper);padding-top:clamp(52px,7vw,86px)}
.foot__in{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);
  padding-bottom:clamp(40px,6vw,70px);
}
.foot__mark{width:96px;height:auto;filter:invert(1);margin-bottom:16px}
.foot__brand p{max-width:26ch;color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.55}
.foot__cap{
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:16px;
}
.foot__nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot__nav a{
  text-decoration:none;font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:1px;
}
.foot__nav a:hover{border-bottom-color:var(--paper)}
.foot__txt{margin-top:6px;color:rgba(255,255,255,.45);font-size:.9rem;line-height:1.55;max-width:30ch}

.foot__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);
  padding-block:20px;
  font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ---------- адаптив ---------- */

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}

@media (max-width:860px){
  .head__in{height:60px;gap:14px}
  .head__cta{display:none}
  .access__in{grid-template-columns:1fr;justify-items:start}
  .access__sigil{order:-1;width:88px}
  .burger{
    display:block;width:40px;height:40px;margin-right:-8px;
    background:none;border:1px solid var(--line);cursor:pointer;
    display:grid;place-content:center;gap:5px;
  }
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .16s ease}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  .nav{
    position:absolute;left:0;right:0;top:60px;
    flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:18px var(--pad);border-bottom:1px solid var(--line)}
  .nav a:hover{border-bottom-color:var(--line)}
  .nav a::after{content:" →";opacity:.4}
}

@media (max-width:720px){
  .steps{grid-template-columns:1fr}
  .step p{max-width:none}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts li{padding:16px 10px 0 0}
  .facts span{font-size:10px;letter-spacing:.06em}
  .cta__in{align-items:flex-start}
  .btn{width:100%;justify-content:center}
  .hero__act{flex-direction:column;align-items:stretch}
  .sigil{width:88px}
}

@media (max-width:480px){
  .cards{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .brand__txt{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}