/* Tark Holding: блоки внутренних страниц (финансовая логистика, Software, Development): иллюстрации, сетки,
   схема расчётов, шаги, вопросы, документы. Общие токены, шрифты и анимации draw, breathe, icdraw в style.css. */
/* страницы направлений: первый экран с иллюстрацией, сетка возможностей, блок «скоро» */
.page-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.ph-art{margin:0;display:grid;justify-items:center}
.ph-map{width:100%}
.ph-map img{display:block;width:100%;height:auto;aspect-ratio:1.3;object-fit:cover;object-position:76% 42%}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap{display:grid;align-content:start;gap:10px;padding:24px 24px 26px;border:1px solid var(--line);border-radius:22px;background:var(--bg-hi);box-shadow:var(--shadow);transition:transform .3s ease,border-color .3s ease}
.cap h3{font-weight:500;font-size:19px;line-height:1.25}
.cap p{color:var(--mute);font-size:15px;line-height:1.6}
.cap-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--accent-wash);color:var(--ink)}
.cap-ic svg{width:36px;height:36px;overflow:visible}
.cap-ic .ic-acc{stroke:var(--acc);stroke-dasharray:1;stroke-dashoffset:0}
.cap:hover .ic-acc{animation:icdraw .9s cubic-bezier(.2,.8,.2,1) both}
@media (hover:hover){.cap:hover{transform:translateY(-4px);border-color:var(--ink)}}
.soon-box{display:grid;justify-items:start;gap:14px;padding:44px 48px;border:1px dashed var(--faint);border-radius:28px;background:var(--bg-hi)}
.soon-box h2{max-width:780px}
.soon-box .lead{margin:0}
/* иллюстрация Software: окна сайта, диалога и панели */
.sw-art{width:min(520px,100%);height:auto;overflow:visible}
.sw-card rect:first-child{fill:var(--bg-hi);stroke:var(--line);stroke-width:1.4}
.sw-card{animation:swfloat 7s ease-in-out infinite}
.sw-c2{animation-duration:8.5s;animation-delay:-2s}
.sw-c3{animation-duration:6.5s;animation-delay:-4s}
.sw-ln{fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.sw-bar{fill:none;stroke:var(--ink);stroke-opacity:.25;stroke-width:12;stroke-linecap:round}
.sw-acc{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sw-dot{fill:var(--faint)}
.sw-fill{fill:var(--accent-wash)}
.sw-btn{fill:var(--ink)}
.sw-msg{fill:var(--bg);stroke:var(--line);stroke-width:1.2}
.sw-me{fill:var(--accent-wash);stroke:none}
.sw-typing circle{fill:var(--acc);animation:swtype 1.4s ease-in-out infinite}
.sw-typing circle:nth-child(2){animation-delay:.2s}
.sw-typing circle:nth-child(3){animation-delay:.4s}
.sw-spark{fill:var(--acc);transform-box:fill-box;transform-origin:center;animation:breathe 3.2s ease-in-out infinite}
@keyframes swfloat{50%{transform:translateY(-8px)}}
@keyframes swtype{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* иллюстрация Development: чертёж дома и башенный кран */
.dv-art{width:min(520px,100%);height:auto;overflow:visible}
.dv-grid{stroke:var(--line);stroke-width:1}
.dv-ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.dv-house .dv-ln:nth-child(2){animation-delay:.2s}.dv-house .dv-ln:nth-child(3){animation-delay:.4s}
.dv-house .dv-ln:nth-child(4),.dv-house .dv-ln:nth-child(5){animation-delay:.55s}.dv-house .dv-ln:nth-child(6){animation-delay:.7s}
.dv-crane .dv-ln{animation-delay:.8s}
.dv-roof{stroke:var(--acc)}
.dv-dim path{fill:none;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:4 4;opacity:.8}
.dv-cable{fill:none;stroke:var(--ink);stroke-width:1.4;transform-box:fill-box;transform-origin:top;animation:cable 6s ease-in-out 1.8s infinite}
.dv-hook{animation:hook 6s ease-in-out 1.8s infinite}
.dv-acc{fill:var(--accent-wash);stroke:var(--acc);stroke-width:2}
.dv-ground{stroke:var(--ink);stroke-width:2}
@keyframes cable{50%{transform:scaleY(1.6)}}
@keyframes hook{50%{transform:translateY(40px)}}
/* финансовая логистика: карточки, схема агентских расчётов, шаги, вопросы */
.fl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fl-grid-3{grid-template-columns:repeat(3,1fr)}
.fl-card{padding:28px 28px 26px;border:1px solid var(--line);border-radius:24px;background:var(--bg-hi);box-shadow:var(--shadow);min-width:0}
.fl-card h3{font-family:Onest,system-ui,sans-serif;font-weight:400;font-size:28px;line-height:1.15;margin-bottom:14px}
.fl-card ul{list-style:none;display:grid;gap:10px}
.fl-card li{position:relative;padding-left:20px;color:var(--mute);font-size:15px;line-height:1.6}
.fl-card li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ink)}
.case h3{font-size:24px}
.case-q{color:var(--mute);font-size:15px;line-height:1.6}
.case-a{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.6}
.case-a b{font-weight:500}
.flow-switch{display:inline-flex;gap:4px;padding:4px;margin:4px 0 22px;border:1px solid var(--line);border-radius:999px;background:var(--bg-hi)}
.flow-tab{padding:9px 18px;border-radius:999px;color:var(--mute);font-size:14px;transition:background-color .2s ease,color .2s ease}
.flow-tab:hover{color:var(--ink)}
.flow-tab[aria-pressed="true"]{background:var(--ink);color:var(--bg-hi)}
.flow{display:grid;grid-template-columns:1fr minmax(130px,.8fr) 1fr minmax(130px,.8fr) 1fr;align-items:stretch;margin:8px 0 0}
.flow-node{display:grid;align-content:center;gap:6px;padding:26px 20px;border:1px solid var(--line);border-radius:22px;background:var(--bg-hi);box-shadow:var(--shadow);text-align:center}
.flow-node b{font-family:Onest,system-ui,sans-serif;font-weight:400;font-size:23px;line-height:1.1}
.flow-node span{color:var(--mute);font-size:13px;line-height:1.4}
.flow-mid{border-color:var(--ink)}
.flow-link{position:relative;align-self:center;height:1px;margin:0 12px;background:var(--ink)}
.flow-link::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.flow-link span{position:absolute;left:0;right:0;bottom:12px;color:var(--mute);font-size:13px;line-height:1.35;text-align:center}
.flow-notes{list-style:none;counter-reset:n;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.flow-notes li{counter-increment:n;display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line);color:var(--mute);font-size:15px;line-height:1.6}
.flow-notes li::before{content:counter(n,decimal-leading-zero);font-family:Onest,system-ui,sans-serif;font-weight:500;font-size:13px;letter-spacing:.2em}
.prin-4{grid-template-columns:repeat(4,1fr)}
/* что понадобится для старта: список с зелёными галочками */
.start{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;list-style:none}
.start li{position:relative;padding:16px 18px 16px 52px;border:1px solid var(--line);border-radius:16px;background:var(--bg-hi);font-size:15px;line-height:1.55}
.start li::before{content:"";position:absolute;left:18px;top:18px;width:20px;height:20px;border-radius:50%;background:var(--accent-wash)}
.start li::after{content:"";position:absolute;left:24.5px;top:22.5px;width:6px;height:9px;border-right:1.6px solid var(--acc);border-bottom:1.6px solid var(--acc);transform:rotate(45deg)}
/* документы по сделке: листы с загнутым углом */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.doc-card{position:relative;display:grid;gap:6px;align-content:start;padding:22px 22px 22px 70px;border:1px solid var(--line);border-radius:18px;background:var(--bg-hi)}
.doc-card::before{content:"";position:absolute;left:22px;top:22px;width:28px;height:34px;border:1.4px solid var(--ink);border-radius:3px 9px 3px 3px;background:linear-gradient(var(--acc),var(--acc)) 6px 9px/13px 1.6px no-repeat,linear-gradient(var(--faint),var(--faint)) 6px 15px/10px 1.4px no-repeat,linear-gradient(var(--faint),var(--faint)) 6px 21px/13px 1.4px no-repeat,var(--accent-wash)}
.doc-card b{font-weight:500;font-size:16px;line-height:1.3}
.doc-card span{color:var(--mute);font-size:14px;line-height:1.55}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.steps li{counter-increment:s;position:relative;display:grid;align-content:start;gap:8px;padding:56px 18px 22px;border-radius:20px;background:var(--bg-hi);border:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg-hi);font-family:Onest,system-ui,sans-serif;font-size:14px}
.steps b{font-family:Onest,system-ui,sans-serif;font-weight:400;font-size:23px;line-height:1.1}
.steps span{color:var(--mute);font-size:14px;line-height:1.55}
.faq{display:grid;border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:Onest,system-ui,sans-serif;font-weight:400;font-size:24px;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:11px;height:11px;margin-right:4px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .25s ease}
.qa[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.qa p{max-width:820px;padding:0 0 22px;color:var(--mute);font-size:16px;line-height:1.65}
@media (max-width:980px){.page-hero{grid-template-columns:1fr}.ph-art{order:-1}.ph-map{max-width:560px}.ph-map img{aspect-ratio:1.9}.sw-art{width:min(380px,100%)}.caps{grid-template-columns:1fr 1fr}.fl-grid,.fl-grid-3,.flow-notes,.prin-4,.start{grid-template-columns:1fr}.docs{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps li:last-child:nth-child(odd){grid-column:1/-1}
  .flow{grid-template-columns:1fr;gap:0}
  .flow-link{justify-self:center;width:1px;height:76px;margin:0}
  .flow-link::after{right:auto;left:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .flow-link span{left:18px;right:auto;bottom:auto;top:50%;transform:translateY(-50%);width:max-content;max-width:calc(50vw - 44px);text-align:left}}
@media (max-width:560px){.caps{grid-template-columns:1fr}.soon-box{padding:28px 22px}.steps,.docs{grid-template-columns:1fr}.flow-switch{display:flex}.flow-tab{flex:1;padding:9px 10px;font-size:13px}.qa summary{font-size:20px}.fl-card h3{font-size:25px}}
@media (prefers-reduced-motion:reduce){.sw-card,.sw-typing circle,.sw-spark,.dv-cable,.dv-hook{animation:none}.dv-ln{animation:none;stroke-dashoffset:0}}
/* телефон: вкладки схемы равной ширины, длинная подпись переносится внутри своей половины (обход 29.10) */
@media (max-width:560px){.flow-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.flow-tab{padding:9px 10px;text-align:center}}