/* ============================================================
   ORDEO | style.css
   Изумруд и латунь. Onest (заголовки) + Manrope (текст).
   ============================================================ */

:root{
  --bg:        #0C1F1A;
  --bg-2:      #0F2621;
  --surface:   #123029;
  --surface-2: #16392F;
  --line:      rgba(237,239,234,.11);
  --line-2:    rgba(237,239,234,.20);

  --brass:     #C9A227;
  --brass-lit: #E4BC3C;
  --brass-dim: rgba(201,162,39,.16);

  --ink:       #EDEFEA;
  --ink-2:     #A9B6AF;
  --ink-3:     #74857D;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;

  --wrap: 1180px;
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:16px;line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:#0C1F1A}


/* ── Закреплённый фон: стоит на месте, контент едет поверх ──── */
body::before,body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{
  background:
    radial-gradient(58% 46% at 78% 8%,  rgba(201,162,39,.13) 0%, transparent 62%),
    radial-gradient(50% 40% at 12% 78%, rgba(201,162,39,.07) 0%, transparent 65%),
    radial-gradient(70% 55% at 50% 45%, rgba(22,57,47,.55)  0%, transparent 70%);
}
body::after{
  opacity:.5;
  background-image:radial-gradient(rgba(237,239,234,.085) 1px, transparent 1px);
  background-size:26px 26px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:'Onest',sans-serif;font-weight:700;line-height:1.06;
  letter-spacing:-.03em;text-wrap:balance}

/* тонкая моно-метка */
.tag{font-family:ui-monospace,'Consolas',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}

/* ── Кнопки ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.9rem;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:'Onest',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.btn--fill{background:var(--brass);color:#0C1F1A}
.btn--fill:hover{background:var(--brass-lit)}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--brass);color:var(--brass)}

/* ── Шапка ──────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:rgba(12,31,26,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:'Onest',sans-serif;
  font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--ink)}
.brand svg{width:26px;height:26px;color:var(--brass)}
.top nav{display:flex;gap:1.7rem;margin-left:auto}
.top nav a{font-size:15px;color:var(--ink-2);transition:color .2s}
.top nav a:hover{color:var(--ink)}
.top .btn{padding:.7rem 1.35rem;font-size:14px}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4.5px 0;border-radius:2px}
@media (max-width:940px){.top nav,.top .btn{display:none}.burger{display:block}}

/* ── Первый экран ───────────────────────────────────────────── */
.hero{position:relative;padding:clamp(72px,10vw,132px) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero .wrap{position:relative;z-index:1}

.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}}

.hero .tag{display:block;margin-bottom:1.5rem}
.hero h1{font-size:clamp(38px,5.6vw,74px);font-weight:800;margin-bottom:1.6rem}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero-sub{font-size:clamp(16.5px,1.5vw,19px);color:var(--ink-2);max-width:50ch;margin-bottom:2.4rem}
.hero-act{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.4rem}
.hero-facts{display:flex;gap:2rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero-facts div b{display:block;font-family:'Onest',sans-serif;font-weight:700;
  font-size:26px;color:var(--brass);line-height:1.1;letter-spacing:-.02em}
.hero-facts div span{font-size:13px;color:var(--ink-3)}

/* панель-схема */
.flow{background:rgba(18,48,41,.86);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px)}
.flow-h{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line)}
.flow-h span:last-child{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-3)}
.flow-row{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;position:relative}
.flow-row + .flow-row{border-top:1px solid var(--line)}
.flow-ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--brass-dim);color:var(--brass)}
.flow-ic svg{width:19px;height:19px}
.flow-tx b{display:block;font-family:'Onest',sans-serif;font-weight:600;font-size:15px}
.flow-tx span{font-size:12.5px;color:var(--ink-3)}
.flow-n{margin-left:auto;font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-3)}
.flow-row:last-child .flow-ic{background:var(--brass);color:#0C1F1A}

/* ── Секции ─────────────────────────────────────────────────── */
.sec{padding:clamp(64px,8vw,116px) 0;scroll-margin-top:80px}
.sec--alt{background:rgba(15,38,33,.72)}
.sec-h{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:end;margin-bottom:3rem}
@media (max-width:860px){.sec-h{grid-template-columns:1fr;gap:1rem;align-items:start}}
.sec-h .tag{display:block;margin-bottom:1rem}
.sec-h h2{font-size:clamp(28px,3.8vw,46px)}
.sec-h p{color:var(--ink-2);font-size:16px}

/* ── Аккордеон услуг ────────────────────────────────────────── */
.acc{display:flex;flex-direction:column;gap:.6rem}
.ai{background:rgba(18,48,41,.82);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s var(--ease)}
.ai[open]{border-color:rgba(201,162,39,.4)}
.ai summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem 1.5rem}
.ai summary::-webkit-details-marker{display:none}
.ai summary:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.ai-n{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink-3);flex:none;width:20px}
.ai-t{font-family:'Onest',sans-serif;font-weight:600;font-size:clamp(16.5px,2vw,21px);letter-spacing:-.02em}
.ai-m{margin-left:auto;font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-3);white-space:nowrap}
.ai-m b{color:var(--brass);font-weight:600}
.ai-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  color:var(--brass);display:grid;place-items:center;font-size:17px;line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s}
.ai-x::before{content:'+'}
.ai[open] .ai-x{background:var(--brass);border-color:var(--brass);color:#0C1F1A;transform:rotate(45deg)}
.ai summary:hover .ai-x{border-color:var(--brass)}

.ai-body{padding:0 1.5rem 1.5rem}
.ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.ai-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;min-height:132px}
.ai-card h4{font-family:'Onest',sans-serif;font-weight:600;font-size:14.5px;line-height:1.3}
.ai-card p{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ai-card details{margin-top:auto}
.ai-card summary{list-style:none;cursor:pointer;padding:0;
  font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:var(--brass)}
.ai-card summary::-webkit-details-marker{display:none}
.ai-card summary::before{content:'подробнее'}
.ai-card details[open] summary::before{content:'свернуть'}
.ai-card summary:hover{color:var(--brass-lit)}
@media (max-width:1080px){.ai-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.ai-grid{grid-template-columns:repeat(2,1fr)}.ai-m{display:none}}
@media (max-width:520px){.ai-grid{grid-template-columns:1fr}}

/* ── Результаты ─────────────────────────────────────────────── */
.res{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.res-i{background:rgba(18,48,41,.82);border:1px solid var(--line);border-radius:var(--r);
  padding:1.8rem;display:grid;gap:1.3rem;
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.res-i:hover{border-color:rgba(201,162,39,.4);transform:translateY(-3px)}
.res-i--big{grid-column:1/-1;grid-template-columns:minmax(230px,.8fr) 1fr;align-items:center;gap:2.6rem}
.res-num{font-family:'Onest',sans-serif;font-weight:800;font-size:clamp(36px,4vw,52px);
  line-height:1;color:var(--brass);letter-spacing:-.035em;white-space:nowrap}
.res-i--big .res-num{font-size:clamp(54px,6.4vw,88px)}
.res-num i{font-style:normal;font-size:.4em;margin-left:.08em}
.res-num s{text-decoration:none;color:var(--ink-3);font-weight:400;margin:0 .14em}
.res-cap{font-size:13px;color:var(--ink-3);max-width:28ch;margin-top:.5rem}
.res-m{padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.res-i--big .res-m{padding-bottom:0;border-bottom:0;padding-right:2.6rem;border-right:1px solid var(--line)}
.res-b h3{display:flex;align-items:center;gap:.55rem;font-family:'Onest',sans-serif;
  font-weight:600;font-size:16.5px;margin-bottom:.9rem}
.res-b h3 svg{width:18px;height:18px;color:var(--brass);flex:none}
.res-b p{font-size:14px;line-height:1.6;padding-left:1.05rem;position:relative}
.res-b p::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%}
.res-was{color:var(--ink-3);margin-bottom:.5rem}
.res-was::before{background:var(--ink-3)}
.res-now{color:var(--ink)}
.res-now::before{background:var(--brass)}
@media (max-width:880px){
  .res{grid-template-columns:1fr}
  .res-i--big{grid-template-columns:1fr;gap:1.3rem}
  .res-i--big .res-m{padding-right:0;border-right:0;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
}

/* ── Четвёрки ───────────────────────────────────────────────── */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.four-i{border-top:1px solid var(--line-2);padding-top:1.2rem}
.four-i .n{font-family:ui-monospace,monospace;font-size:11px;color:var(--brass);
  letter-spacing:.16em;display:block;margin-bottom:.85rem}
.four-i h4{font-family:'Onest',sans-serif;font-weight:600;font-size:16.5px;margin-bottom:.55rem}
.four-i p{font-size:14px;color:var(--ink-2);line-height:1.6}
@media (max-width:900px){.four{grid-template-columns:1fr 1fr;gap:1.4rem}}
@media (max-width:560px){.four{grid-template-columns:1fr}}

/* ── Стек ───────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips span{border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.6rem 1.15rem;font-size:14.5px;color:var(--ink-2);
  transition:border-color .25s,color .25s}
.chips span:hover{border-color:var(--brass);color:var(--ink)}

/* ── Вопросы ────────────────────────────────────────────────── */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:1rem;padding:1.3rem 0;
  font-family:'Onest',sans-serif;font-weight:600;font-size:16.5px;line-height:1.4;
  transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.faq summary::after{content:'+';margin-left:auto;flex:none;font-size:21px;line-height:1;
  color:var(--brass);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.4rem;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:70ch}

/* ── Форма ──────────────────────────────────────────────────── */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.cta{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}
.f label{font-size:13px;color:var(--ink-3)}
.f input,.f textarea{background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:.9rem 1.05rem;color:var(--ink);
  font-family:inherit;font-size:15px;width:100%;transition:border-color .2s}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--brass)}
.note{font-size:12.5px;color:var(--ink-3);margin-top:.85rem;line-height:1.55}
.links{display:flex;flex-direction:column;gap:.85rem;margin-top:1.8rem}
.links a{display:flex;align-items:center;gap:.7rem;font-size:15.5px;color:var(--ink-2);transition:color .2s}
.links a:hover{color:var(--brass)}
.links svg{width:18px;height:18px;color:var(--brass);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Подвал ─────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:48px 0 36px;color:var(--ink-3);font-size:14px}
.foot-t{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;margin-bottom:2.2rem}
.foot a{color:var(--ink-2)}.foot a:hover{color:var(--brass)}
.foot-b{border-top:1px solid var(--line);padding-top:1.3rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:13px}

/* ── Появление ──────────────────────────────────────────────── */
.up{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.up.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .up{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ══ ДИНАМИКА ═══════════════════════════════════════════════ */

/* 1. Схема в герое: свет проезжает по строке, шаг подсвечивается */
.flow-row{overflow:hidden}
.flow-row::after{content:'';position:absolute;left:-100%;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.10),transparent);
  animation:sweep 7s var(--ease) infinite}
.flow-row:nth-child(2)::after{animation-delay:0s}
.flow-row:nth-child(3)::after{animation-delay:.5s}
.flow-row:nth-child(4)::after{animation-delay:1s}
.flow-row:nth-child(5)::after{animation-delay:1.5s}
@keyframes sweep{0%,55%{left:-100%}22%{left:100%}100%{left:100%}}

.flow-ic{position:relative}
.flow-ic::before{content:'';position:absolute;inset:-4px;border-radius:14px;
  border:1px solid var(--brass);opacity:0;animation:ring 7s var(--ease) infinite}
.flow-row:nth-child(2) .flow-ic::before{animation-delay:0s}
.flow-row:nth-child(3) .flow-ic::before{animation-delay:.5s}
.flow-row:nth-child(4) .flow-ic::before{animation-delay:1s}
.flow-row:nth-child(5) .flow-ic::before{animation-delay:1.5s}
@keyframes ring{0%{opacity:0;transform:scale(.9)}8%{opacity:.9;transform:scale(1)}
  26%{opacity:0;transform:scale(1.25)}100%{opacity:0}}

/* 2. Бегущая строка стека */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-t{display:flex;gap:.55rem;width:max-content;animation:run 34s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.6rem 1.15rem;font-size:14.5px;color:var(--ink-2);white-space:nowrap;
  transition:border-color .25s,color .25s}
.mq-t span:hover{border-color:var(--brass);color:var(--ink)}
@keyframes run{to{transform:translateX(-50%)}}

/* 3. Демо-бот */
.bot{background:rgba(18,48,41,.86);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;height:100%;min-height:420px}
.bot-h{display:flex;align-items:center;gap:.7rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);margin-bottom:1rem}
.bot-av{width:34px;height:34px;border-radius:50%;background:var(--brass);color:#0C1F1A;
  display:grid;place-items:center;flex:none}
.bot-av svg{width:17px;height:17px}
.bot-h b{font-family:'Onest',sans-serif;font-weight:600;font-size:15px;display:block}
.bot-h span{font-size:12px;color:var(--ink-3)}
.bot-live{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-size:11.5px;color:var(--ink-3)}
.bot-live i{width:7px;height:7px;border-radius:50%;background:#4ED08A;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.bot-log{flex:1;display:flex;flex-direction:column;gap:.7rem;overflow-y:auto;
  padding-right:.3rem;margin-bottom:1rem;max-height:300px}
.msg{max-width:86%;padding:.75rem 1rem;border-radius:14px;font-size:14px;line-height:1.55;
  animation:pop .35s var(--ease) both}
.msg--bot{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;
  border-bottom-left-radius:5px}
.msg--me{background:var(--brass);color:#0C1F1A;align-self:flex-end;
  border-bottom-right-radius:5px;font-weight:500}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.dots{display:flex;gap:4px;padding:.85rem 1rem}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:bob 1.3s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.bot-q{display:flex;flex-wrap:wrap;gap:.45rem}
.bot-q button{background:transparent;border:1px solid var(--line-2);border-radius:999px;
  color:var(--ink-2);padding:.5rem 1rem;font-family:inherit;font-size:13px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.bot-q button:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.bot-q button:disabled{opacity:.35;cursor:default}
.bot-q button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* 4. Счётчики */
.res-num,.hero-facts b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .flow-row::after,.flow-ic::before,.mq-t,.bot-live i,.dots i{animation:none}
  .flow-ic::before{opacity:0}
  .msg{animation:none}
}