/* Миктера · «Объём»: секции главной после истории. */

/* ---------- о компании: текст-раскрытие ---------- */
.about { padding-bottom: clamp(64px, 8vw, 120px); }
.about-head { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-l); padding-top: 22px; margin-bottom: clamp(40px, 5vw, 72px); }
.about-head .sec-label { margin: 0; }
.about-meta { color: var(--dim-l); }
.words { font: 500 clamp(1.9rem, 3.5vw, 3.15rem)/1.06 var(--display); letter-spacing: -0.035em; max-width: 21em; }
.words .w { transition: color 0.35s linear; color: rgba(21, 22, 24, 0.16); }
.words .w.on { color: var(--ink); }
.no-js .words .w, .words:not([data-split]) { color: var(--ink); }

.gets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); margin-top: clamp(96px, 12vw, 180px); align-items: start; }
.gets-fig { position: sticky; top: 110px; }
.blueprint { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; }
.blueprint img { position: absolute; inset: 17%; width: 66%; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.18)); }
.bp-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(21, 22, 24, 0.2); }
.bp-r1 { inset: 12%; }
.bp-r2 { inset: 4%; border-style: dashed; animation: spinB 120s linear infinite; }
.bp-r3 { inset: -4%; border-color: rgba(21, 22, 24, 0.1); }
@keyframes spinB { to { transform: rotate(360deg); } }
.bp-axis { position: absolute; background: rgba(21, 22, 24, 0.18); }
.bp-x { left: -6%; right: -6%; top: 50%; height: 1px; }
.bp-y { top: -6%; bottom: -6%; left: 50%; width: 1px; }
.bp-note { position: absolute; color: var(--dim-l); }
.bp-n1 { left: 0; top: 2%; }
.bp-n2 { right: 2%; bottom: 4%; }
.gets-body .h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); margin-bottom: clamp(40px, 5vw, 64px); }
.gets-list { display: grid; }
.gets-list li { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 28px 0; border-top: 1px solid var(--line-l); opacity: 0.35; transition: opacity 0.5s var(--ease); }
.gets-list li:last-child { border-bottom: 1px solid var(--line-l); }
.gets-list li.on, html:not(.js) .gets-list li { opacity: 1; }
.gets-n { color: var(--orange-ink); padding-top: 0.5em; }
.gets-list h3 { font: 500 clamp(1.4rem, 2.2vw, 1.95rem)/1.12 var(--display); letter-spacing: -0.025em; margin-bottom: 12px; }
.gets-list p { color: var(--dim-l); max-width: 32rem; }

/* ---------- процесс: три строки ---------- */
.process { padding: 0; height: 260svh; }
.process-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.three { display: grid; gap: clamp(8px, 1.4vw, 18px); margin-bottom: clamp(32px, 4vw, 56px); }
.three li { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; color: rgba(244, 241, 236, 0.14); transition: color 0.6s var(--ease); }
.three li.on { color: var(--light); }
.three-l { font: 500 clamp(2.6rem, 7.6vw, 7.4rem)/1 var(--display); letter-spacing: -0.055em; }
.three-c { color: var(--orange-hi); opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.6s var(--ease); }
.three li.on .three-c { opacity: 1; transform: none; }
html:not(.js) .three li, .no-scrub .three li { color: var(--light); }
html:not(.js) .three-c, .no-scrub .three-c { opacity: 1; transform: none; }
.process .link-arrow { color: var(--light); }

/* ---------- услуги ---------- */
.services { border-top: 1px solid var(--line-d); }
.services .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); column-gap: 48px; align-items: end; }
.services .sec-label { grid-column: 1 / -1; }
.services .sec-lead { margin: 0; }

/* ---------- почему мы ---------- */
.why { background: var(--graphite); color: var(--light); border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.why-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.5fr) minmax(0, 0.7fr); max-width: var(--max); margin-inline: auto; }
.why-grid::before, .why-grid::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-d); top: clamp(64px, 8vw, 120px); }
.why-grid::after { top: auto; bottom: clamp(64px, 8vw, 120px); }
.why-cell { padding: 40px var(--pad); }
.why-cell:first-child { border-right: 1px solid var(--line-d); }
.why-side p { color: var(--dim-d); }
.why-side-r { display: grid; place-items: center; border-left: 1px solid var(--line-d); }
.why-side-r img { width: 70%; max-width: 200px; opacity: 0.92; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-12px); } }
.why-card { background: var(--orange); color: var(--ink); padding: clamp(40px, 5vw, 72px); margin-block: clamp(64px, 8vw, 120px); position: relative; }
.why-card::before, .why-card::after { content: '+'; position: absolute; top: -12px; font: 300 22px/1 var(--mono); color: var(--orange-hi); z-index: 1; }
.why-card::before { left: -8px; }
.why-card::after { right: -8px; }
.why-h { font: 500 clamp(2.2rem, 4.2vw, 3.9rem)/0.95 var(--display); letter-spacing: -0.045em; margin-bottom: 20px; max-width: 12em; }
.why-lead { font-size: 1.12rem; line-height: 1.45; font-weight: 500; max-width: 34rem; margin-bottom: clamp(32px, 4vw, 48px); }
.why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid rgba(21, 22, 24, 0.3); padding-top: 26px; }
.why-list h3 { font: 600 1.2rem/1.15 var(--display); letter-spacing: -0.02em; margin: 14px 0 8px; }
.why-list p { font-size: 0.98rem; line-height: 1.45; }

/* ---------- каталог: список ---------- */
.shelf { padding-bottom: clamp(48px, 6vw, 80px); }
.shelf-list { border-top: 1px solid var(--line-l); }
.shelf-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 48px; align-items: center; gap: 20px; min-height: 88px; padding: 18px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; position: relative; isolation: isolate; }
.shelf-list a::before { content: ''; position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--orange); z-index: -1; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.45s var(--ease); }
.shelf-list a:hover::before, .shelf-list a:focus-visible::before { transform: scaleY(1); }
.shelf-list span { color: var(--orange-ink); transition: color 0.3s; }
.shelf-list b { font: 500 clamp(1.3rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -0.03em; transition: transform 0.45s var(--ease); }
.shelf-list em { font-style: normal; color: var(--dim-l); text-align: right; transition: color 0.3s; }
.shelf-list i { font-style: normal; font-size: 1.4rem; justify-self: end; transition: transform 0.45s var(--ease); }
.shelf-list a:hover b { transform: translateX(10px); }
.shelf-list a:hover i { transform: translateX(-6px) rotate(-45deg); }
.shelf-list a:hover span, .shelf-list a:hover em { color: var(--ink); }

/* ---------- партнёры ---------- */
.partners { padding-top: clamp(48px, 6vw, 80px); }
.pt-grid { --gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.pt { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); min-width: 0; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); overflow: hidden; }
.pt a { display: grid; place-items: center; align-content: center; gap: 6px; height: 150px; padding: 24px; text-decoration: none; transition: background-color 0.35s; text-align: center; }
.pt a:hover { background: #fbf9f5; }
.pt img { max-height: 56px; max-width: 78%; width: auto; object-fit: contain; transition: transform 0.5s var(--ease); }
.pt img.pt-sq { max-height: 68px; }
.pt a:hover img { transform: scale(1.05); }
.pt-t { font: 600 clamp(1.15rem, 1.7vw, 1.5rem)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.pt small { color: var(--dim-l); max-width: 15rem; text-transform: none; }

/* ---------- контакты ---------- */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ct-info .h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.ct-list { display: grid; border-top: 1px solid var(--line-d); }
.ct-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-d); }
.ct-list dt { color: var(--orange-hi); padding-top: 0.35em; }
.ct-list dd { font: 500 clamp(1.1rem, 1.6vw, 1.45rem)/1.3 var(--display); letter-spacing: -0.02em; }
.ct-list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease); display: inline-block; min-height: 32px; }
.ct-list a:hover { background-size: 100% 1px; }

/* ---------- финальный призыв ---------- */
.cta { position: relative; background: var(--orange); color: var(--ink); overflow: hidden; padding-block: clamp(110px, 13vw, 190px); }
.cta-lines i { position: absolute; display: block; background: currentColor; opacity: 0.18; }
.cta-lines .ln-h { left: 0; right: 0; top: 22%; height: 1px; }
.cta-lines .ln-v { top: 0; bottom: 0; width: 1px; }
.cta-lines .ln-v1 { left: 54%; }
.cta-lines .ln-v2 { left: 88%; }
.cta-lines .diag { left: 54%; top: 22%; width: 80vw; height: 1px; transform-origin: 0 0; transform: rotate(32deg); }
.cta-lines .cross { width: 15px; height: 15px; margin: -7px 0 0 -7px; background: none; opacity: 0.7; }
.cta-lines .cross::before, .cta-lines .cross::after { content: ''; position: absolute; background: currentColor; }
.cta-lines .cross::before { left: 7px; top: 0; width: 1px; height: 15px; }
.cta-lines .cross::after { top: 7px; left: 0; height: 1px; width: 15px; }
.cta-lines .c1 { left: 54%; top: 22%; }
.cta-lines .c2 { left: 88%; top: 22%; }
.cta-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: end; }
.cta-h { font: 500 clamp(2.6rem, 6vw, 5.6rem)/0.94 var(--display); letter-spacing: -0.05em; max-width: 9.5em; grid-column: 1; }
.cta .btns { grid-column: 1; }
.cta-fig { grid-column: 2; grid-row: 1 / span 2; justify-self: center; width: min(420px, 100%); }
.cta-fig img { width: 100%; filter: drop-shadow(0 44px 40px rgba(90, 30, 0, 0.35)); animation: floaty 8s ease-in-out infinite; }

@media (max-width: 980px) {
  .gets, .ct-grid, .cta-in { grid-template-columns: minmax(0, 1fr); }
  .gets-fig { position: relative; top: 0; max-width: 360px; }
  .services .sec-head { grid-template-columns: minmax(0, 1fr); }
  .services .sec-lead { margin-top: 24px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-side { display: none; }
  .why-card { margin: 72px var(--pad); }
  .why-list { grid-template-columns: minmax(0, 1fr); }
  .pt { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
  .cta-fig { grid-column: 1; grid-row: auto; width: 260px; justify-self: start; }
}
@media (max-width: 600px) {
  .process { height: auto; }
  .process-pin { position: relative; height: auto; padding-block: 96px; }
  .three li { color: var(--light); }
  .three-c { opacity: 1; transform: none; }
  .shelf-list a { grid-template-columns: 40px minmax(0, 1fr) 28px; }
  .shelf-list em { grid-column: 2; grid-row: 2; text-align: left; margin-top: -10px; }
  .pt-grid { --gap: 10px; }
  .pt { flex-basis: calc((100% - var(--gap)) / 2); }
  .pt a { height: 110px; padding: 14px; }
  .ct-list > div { grid-template-columns: 1fr; gap: 6px; }
  .gets-list li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .words .w { color: var(--ink) !important; }
  .three li { color: var(--light) !important; }
  .three-c { opacity: 1 !important; transform: none !important; }
  .gets-list li { opacity: 1; }
}