/* Главная: первый экран с демо, орбита агентов, метод. */
/* ---------- hero ---------- */
.hero{padding:150px 0 0;min-height:100vh;position:relative}
.hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.eyebrow{color:#cfcfcf;margin-bottom:28px}
.hero h1{font-size:clamp(56px,6.6vw,104px)}
.hero h1 .g{color:#9d9d9d}
.support{margin-top:32px;font-size:clamp(17px,1.45vw,20px);line-height:1.35;color:#d6d6d6;max-width:520px;letter-spacing:-.02em}
.proof{margin-top:28px;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:18px 0;font-size:15px}
.proof b{display:block;font-weight:600}
.proof span{color:#aaa}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:28px}
.btn-y{display:inline-flex;align-items:center;gap:10px;background:var(--volt);color:#000;padding:16px 24px;border-radius:48px;font-weight:600;font-size:16px;transition:transform .35s var(--ease)}
.btn-y:hover{transform:translateY(-2px)}
.btn-y .ar,.tlink .ar{transition:transform .35s var(--ease)}
.btn-y:hover .ar,.tlink:hover .ar{transform:translateX(4px)}
.tlink{display:inline-flex;gap:8px;font-weight:500;font-size:17px}

/* demo window */
.demo{background:#0b0b0b;border:1px solid var(--line-d);border-radius:16px;overflow:hidden;margin-right:-40px}
.demo-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-d)}
.demo-top .sys b{color:#fff;font-weight:500;margin-right:16px}
.demo-top .sys{color:#999}
.live{display:flex;align-items:center;gap:8px;color:#ddd}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--volt);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.demo-body{display:grid;grid-template-columns:150px 1fr;min-height:330px}
.demo-side{border-right:1px solid var(--line-d);padding:16px 14px;display:grid;gap:7px;align-content:start;font-size:11px;color:#666}
.demo-side .h{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#444;margin-top:8px}
.demo-side .a{color:#bbb}
.demo-main{padding:18px;position:relative;display:flex;flex-direction:column;gap:12px}
.req{border:1px solid #333;border-radius:10px;padding:12px 14px;background:#0f0f0f}
.req .mono{color:var(--volt);font-size:11px}
.req p{margin-top:6px;font-size:15px;min-height:21px}
.caret{display:inline-block;width:8px;height:16px;background:#fff;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.log{display:grid;gap:8px;font-family:var(--mono);font-size:12px;color:#bbb}
.log div{display:flex;gap:10px;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.log div.show{opacity:1;transform:none}
.log div::before{content:"›";color:var(--green)}
.log div.wait::before{content:"●";color:var(--volt)}
.agent-tag{position:absolute;right:18px;top:18px;border:1px solid #333;border-radius:48px;padding:6px 12px;color:#ccc}
.steps-bar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-d)}
.sb{display:flex;align-items:center;gap:10px;padding:16px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#777;border-right:1px solid var(--line-d);text-transform:uppercase}
.sb:last-child{border-right:0}
.sb i{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #666;position:relative;overflow:hidden}
.sb.on{color:#fff}
.sb.on i{border-color:var(--volt);background:linear-gradient(90deg,var(--volt) 50%,transparent 50%)}
.sb.done{color:#bbb}
.sb.done i{border-color:var(--volt);background:var(--volt)}
.demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-top:1px solid var(--line-d);position:relative}
.dt{padding:16px 2px;text-align:left}
.dt .mono{color:#888}
.dt div{margin-top:6px;color:#888;font-size:15px}
.dt.on .mono,.dt.on div{color:#fff}
.dt-bar{position:absolute;top:-1px;left:0;height:2px;width:33.33%;background:var(--volt);transform-origin:left;transition:left .6s var(--ease)}
.dt-bar i{display:block;height:100%;background:#fff;width:0}
.partners{display:flex;align-items:center;gap:44px;flex-wrap:wrap;margin-top:56px;padding:28px 0 56px;border-top:1px solid var(--line-d)}
.partners .mono{color:#999}
.partners span.p{font-weight:600;font-size:19px;letter-spacing:-.03em;color:#ddd}
@media (max-width:1060px){.hero-grid{grid-template-columns:1fr}.demo{margin-right:0}}
@media (max-width:640px){.demo-body{grid-template-columns:1fr}.demo-side{display:none}.steps-bar{grid-template-columns:repeat(5,1fr)}.sb{flex-direction:column;font-size:9px;gap:6px;padding:12px 4px;text-align:center}.agent-tag{display:none}}


/* orbit block */
.orbit-block{background:#000;color:#fff;border-radius:32px;min-height:560px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative}
.orbit{position:relative;display:grid;place-items:center;min-height:520px}
.ring{position:absolute;width:420px;height:420px;border-radius:50%;border:1.5px dashed #3a3a3a}
.ring.r2{width:260px;height:260px;border-style:solid;border-color:#262626}
.spin{position:absolute;width:420px;height:420px;animation:spin 36s linear infinite}
.spin .sat{position:absolute;left:50%;top:50%;width:112px;height:44px;margin:-22px 0 0 -56px}
.spin .sat>span{display:grid;place-items:center;height:100%;border-radius:12px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#000;font-weight:500;text-transform:uppercase;animation:spin 36s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.core-cube{position:relative;width:132px;height:132px;transform:rotate(45deg);border-radius:24px;background:conic-gradient(from 0deg,var(--volt),var(--green),var(--sky),var(--violet),var(--coral),var(--volt));animation:breathe 5s ease-in-out infinite;display:grid;place-items:center}
.core-cube::after{content:"";position:absolute;inset:10px;border-radius:16px;background:#0c0c0c}
.core-cube b{position:relative;z-index:1;transform:rotate(-45deg);font-family:var(--cond);font-size:26px;letter-spacing:-.01em}
@keyframes breathe{50%{transform:rotate(45deg) scale(1.06)}}
.fly{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.fly-line{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3vw,46px);line-height:.95;opacity:.14;transition:opacity .9s var(--ease),transform .9s var(--ease);transform:translateX(24px)}
.fly-line.in{opacity:1;transform:none}
.fly small{color:#aaa;font-size:15px;max-width:380px;line-height:1.4}
@media (max-width:1240px){.orbit{transform:scale(.8)}}
@media (max-width:900px){.orbit-block{grid-template-columns:1fr}.orbit{min-height:400px;transform:scale(.72)}.fly{padding:16px 28px 48px}}


/* ---------- black compound section ---------- */
.compound{background:#000;color:#fff;border-radius:64px 64px 0 0;margin-top:-64px;position:relative;z-index:3;padding:140px 0 120px}
.compound h2{font-size:clamp(48px,6.4vw,96px);max-width:1100px}
.compound .intro{font-size:18px;color:#ccc;max-width:560px;margin-top:24px;line-height:1.4}
.cmp-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;margin-top:72px;align-items:start}
.cmp-step{border-top:1px solid var(--line-d);padding:28px 0 0;min-height:52vh}
.cmp-step .mono{color:#777}
.cmp-step h3{font-size:clamp(40px,4vw,56px);color:#555;margin:10px 0 12px;transition:color .5s}
.cmp-step p{color:#666;max-width:380px;transition:color .5s}
.cmp-step.on h3{color:#fff}
.cmp-step.on p{color:#ccc}
.cmp-sticky{position:sticky;top:120px}
.board{border:1px solid var(--line-d);border-radius:16px;background:#070707;min-height:460px;position:relative;overflow:hidden;
  background-image:linear-gradient(#141414 1px,transparent 1px),linear-gradient(90deg,#141414 1px,transparent 1px);background-size:32px 32px}
.board .cap{position:absolute;top:16px;left:0;right:0;text-align:center;color:var(--volt)}
.checklist{position:absolute;left:28px;top:64px;width:250px;background:#0b0b0b;border:1px solid #333;border-radius:12px;padding:16px}
.checklist .mono{color:#888;margin-bottom:12px;display:block}
.checklist div{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #1d1d1d;font-size:14px;color:#777;transition:color .4s}
.checklist div i{width:16px;height:16px;border-radius:50%;border:1.5px solid #555;flex:none;display:grid;place-items:center;font-style:normal;font-size:10px;transition:.4s}
.checklist div.ok{color:#fff}
.checklist div.ok i{border-color:#fff;background:#fff;color:#000}
.checklist div.ok i::after{content:"✓"}
.link-line{position:absolute;left:278px;top:150px;height:1px;width:110px;background:#666}
.hub{position:absolute;left:388px;top:86px;width:128px;height:128px;border-radius:50%;border:1.5px solid #fff;background:#000;display:grid;place-items:center;text-align:center}
.hub b{font-family:var(--cond);font-size:24px;display:block}
.hub .mono{font-size:10px;color:#aaa}
.hub::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid #333;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.bmetric{position:absolute;right:24px;bottom:24px;left:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bmetric div{border:1px solid #262626;border-radius:10px;padding:12px;background:#0b0b0b}
.bmetric .mono{color:#777;font-size:10px}
.bmetric b{display:block;font-family:var(--cond);font-size:30px;margin-top:4px}
@media (max-width:960px){.cmp-grid{grid-template-columns:1fr}.cmp-sticky{position:relative;top:0;order:-1}.cmp-step{min-height:auto;padding-bottom:28px}.compound{border-radius:32px 32px 0 0}}
@media (max-width:600px){.board{min-height:580px}.orbit{transform:scale(.58);min-height:340px;margin:-20px 0}.checklist{left:16px;width:210px}.link-line{display:none}.hub{left:auto;right:16px;top:70px;width:100px;height:100px}.bmetric{left:16px;right:16px}}


/* развилка аудиторий в первом экране */
.fork{margin-top:30px}
.fork .mono{color:#999;display:block;margin-bottom:12px}
.fork-row{display:flex;flex-wrap:wrap;gap:8px}
.fork-row a{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:48px;background:var(--graphite-2);font-weight:600;transition:background .3s,color .3s,transform .35s var(--ease)}
.fork-row a:first-child{background:var(--volt);color:#000}
.fork-row a:hover{transform:translateY(-2px);background:#fff;color:#000}

/* цифры */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:120px}
.stat{background:var(--canvas);border-radius:24px;padding:24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.stat:first-child{background:#000;color:#fff}
.stat .n{font-family:var(--cond);font-weight:700;font-size:clamp(48px,5vw,72px);line-height:.9;letter-spacing:-.02em}
.stat .t{font-size:14px;color:#555;max-width:220px}
.stat:first-child .t{color:#aaa}
.all-link{display:flex;justify-content:center;margin-top:28px}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr;margin-bottom:72px}.stat{min-height:150px}}

.orbit-wrap{margin-top:120px}
.orbit-wrap .sec-head{margin-bottom:40px}

/* кейсы */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case{background:#000;color:#fff;border-radius:32px;padding:28px;display:flex;flex-direction:column;gap:16px;min-height:420px;transition:transform .4s var(--ease)}
.case:hover{transform:translateY(-4px)}
.case .n{font-family:var(--cond);font-weight:700;font-size:clamp(56px,5.6vw,88px);line-height:.9;color:var(--volt)}
.case:nth-child(2) .n{color:var(--green)}
.case:nth-child(3) .n{color:var(--sky)}
.case h3{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:auto}
.case p{color:#aaa;font-size:15px;line-height:1.4}
.case .go{font-weight:600}
@media (max-width:900px){.cases{grid-template-columns:1fr}.case{min-height:0}}

/* коротко обо мне */
.me{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;margin:120px 0}
.photo{aspect-ratio:4/5;border-radius:32px;background:linear-gradient(160deg,#1d1d1d,#000);display:grid;place-items:center;color:#fff;font-family:var(--cond);font-size:96px;position:relative;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;right:20px;bottom:20px;width:18px;height:18px;border-radius:50%;background:var(--volt)}
.me h2{font-size:clamp(40px,4.6vw,68px)}
.me p{font-size:19px;line-height:1.4;color:#333;max-width:620px;margin-top:20px;letter-spacing:-.02em}
.me .btn-k{margin-top:28px}
@media (max-width:860px){.me{grid-template-columns:1fr;margin:72px 0}.photo{max-width:260px}}