/* /sistemas-con-ia/ · builds on ../site.css and ../publicidad-con-ia/page.css (hero copy, tabs, close, faq). */

/* ------------------------------------------------------------ the laptop */
.lap { position: relative; width: 100%; }
.lap__lid { position: relative; padding: 2.4% 2.4% 2.8%; border-radius: 18px 18px 6px 6px; background: linear-gradient(#1d201d, #0e100e);
  box-shadow: inset 0 0 0 1px rgba(244,243,238,0.14), inset 0 0 0 3px #070907, 0 50px 90px -40px rgba(0,0,0,0.9); }
.lap__lid::before { content: ""; position: absolute; left: 50%; top: 0.9%; width: 6px; height: 6px; translate: -50% 0; border-radius: 50%; background: #2c302c; }
.lap__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #fff; }
.lap__ui { position: absolute; left: 0; top: 0; width: 900px; height: 562.5px; transform-origin: 0 0; }
.lap__base { position: relative; height: 0; padding-top: 3.4%; margin: 0 -7%; border-radius: 3px 3px 16px 16px / 3px 3px 100% 100%;
  background: linear-gradient(#4a4e4a, #232623 45%, #0d0f0d); box-shadow: 0 30px 40px -20px rgba(0,0,0,0.8); }
.lap__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 38%; translate: -50% 0; border-radius: 0 0 8px 8px; background: #151715; }

/* ---------------------------------------------- the app inside the laptop */
/* Fixed internal pixels: the whole UI is scaled to the screen by page.js. */
.app { display: grid; grid-template-columns: 184px minmax(0, 1fr); width: 100%; height: 100%; background: #fff; color: #1d1f1c; font: 400 13px/1.4 var(--sc-font-text); letter-spacing: 0; text-align: left; }
.app__side { display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; background: #faf8f4; border-right: 1px solid #ece8df; }
.app__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.app__brand i, .sp__mark, .hub__mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #ff5c35; color: #fff; font: 700 13px/1 var(--sc-font-display); font-style: normal; }
.app__nav { display: grid; gap: 2px; }
.app__nav li { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: #5d5f58; font-weight: 500; transition: background-color 300ms, color 300ms; }
.app__nav li i { width: 14px; height: 14px; border-radius: 4px; border: 1.6px solid currentColor; transition: background-color 300ms, border-color 300ms; }
.app__nav li.is-on { background: #fff0ea; color: #b23a1c; }
.app__nav li.is-on i { background: #ff5c35; border-color: #ff5c35; }
.app__foot { margin-top: auto; font-size: 10.5px; color: #9a9b94; line-height: 1.35; }
.app__main { display: grid; grid-template-rows: 54px minmax(0, 1fr); min-width: 0; }
.app__top { display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1px solid #ece8df; }
.app__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.app__tag { padding: 2px 7px; border-radius: 4px; background: #f4f3ee; color: #7d7e77; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.app__search { margin-left: auto; display: flex; align-items: center; width: 190px; height: 32px; padding: 0 14px; border-radius: 16px; background: #f4f3ee; color: #9a9b94; font-size: 12px; }
.app__av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #070907; color: #fff; font-size: 11px; font-weight: 600; }
.app__screens { position: relative; overflow: hidden; }
.scr { position: absolute; inset: 18px 22px; opacity: 0; visibility: hidden; transition: opacity 420ms var(--sc-ease-out), visibility 420ms; }
.scr.is-cur { opacity: 1; visibility: visible; }
.scr.is-enter { animation: scrIn 500ms var(--sc-ease-out) both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } }
.is-compact .app { grid-template-columns: minmax(0, 1fr); font-size: 15px; }
.is-compact .app__side, .is-compact .app__search { display: none; }
.is-compact .app__title { font-size: 18px; }
.is-compact .app__av { margin-left: auto; }
.is-compact .scr { inset: 14px 16px; }

/* scroll-driven reveals */
.lap [data-at] { transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); }
.lap [data-at]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #ffd2c3; border-top-color: #ff5c35; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* screen: a document read into the ERP */
.scr--doc { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; }
.doc { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
.doc__paper { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 12px; background: #fff; border: 1px solid #e7e3da; border-radius: 3px;
  box-shadow: 0 16px 30px -14px rgba(40,30,15,0.35); rotate: -1.2deg; font-size: 10px; line-height: 1.35; color: #2b2d29; }
.doc__top { display: flex; justify-content: space-between; gap: 10px; }
.doc__top b { display: block; font-size: 11.5px; }
.doc__top span { display: block; color: #7d7e77; font-size: 9.5px; }
.doc__box { flex: none; align-self: start; padding: 6px 8px; border: 1.5px solid #b23a1c; text-align: center; color: #b23a1c; font-size: 8.5px; font-weight: 600; text-transform: uppercase; }
.doc__box b { font-size: 12px; color: #b23a1c; }
.doc__date { color: #55574f; }
.doc__lines { width: 100%; border-collapse: collapse; }
.doc__lines th { padding: 4px 0; border-bottom: 1px solid #e7e3da; color: #7d7e77; font-weight: 600; font-size: 9px; text-align: left; }
.doc__lines td { padding: 5px 0; border-bottom: 1px dashed #eeebe4; }
.doc__lines th:last-child, .doc__lines td:last-child { text-align: right; }
.doc__lines td:first-child { width: 34px; }
.doc__sum { display: grid; gap: 2px; width: 62%; margin-left: auto; }
.doc__sum div { display: flex; justify-content: space-between; }
.doc__sum .is-tot { margin-top: 2px; padding-top: 4px; border-top: 1px solid #2b2d29; font-size: 11.5px; font-weight: 700; }
.doc__ted { margin-top: auto; display: grid; gap: 3px; width: 56%; color: #9a9b94; font-size: 8px; }
.doc__ted i { height: 26px; background: repeating-linear-gradient(90deg, #2b2d29 0 2px, transparent 2px 4px, #2b2d29 4px 5px, transparent 5px 8px, #2b2d29 8px 11px, transparent 11px 12px); opacity: 0.75; }
.doc__scan { position: absolute; left: -4%; right: -4%; top: calc(var(--g, 0) * 104% - 46px); height: 46px; background: linear-gradient(rgba(255,92,53,0), rgba(255,92,53,0.18)); border-bottom: 2px solid #ff5c35; opacity: 0; transition: opacity 260ms; pointer-events: none; }
.doc__scan.is-run { opacity: 1; }
.doc__file { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #7d7e77; }
.doc__file i { flex: none; width: 14px; height: 18px; border-radius: 2px; background: #ff5c35; clip-path: polygon(0 0, 70% 0, 100% 25%, 100% 100%, 0 100%); }
.ext { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ext__h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.ext__h span { padding: 2px 8px; border-radius: 10px; background: #fff0ea; color: #b23a1c; font-size: 10px; font-weight: 700; }
.ext__rows { border: 1px solid #ece8df; border-radius: 10px; overflow: hidden; }
.ext__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 16px; align-items: center; gap: 10px; height: 33px; padding: 0 12px; border-bottom: 1px solid #f1eee7; transition: background-color 600ms; }
.ext__row:last-child { border-bottom: 0; }
.lap .ext__row[data-at]:not(.is-on) { opacity: 1; transform: none; }
.ext__row dt { color: #8a8b84; font-size: 11.5px; }
.ext__row dd { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; transition: color 300ms; }
.ext__row:not(.is-on) dd { color: transparent; }
.ext__row:not(.is-on) dd::before { content: ""; position: absolute; left: 0; top: 50%; width: 68%; height: 8px; translate: 0 -50%; border-radius: 4px; background: #f0ede6; }
.ext__row i { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ff5c35'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.7' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; scale: 0.4; transition: opacity 250ms, scale 300ms var(--sc-ease-out); }
.ext__row.is-on i { opacity: 1; scale: 1; }
.ext__check, .qt__ok, .po__sent { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.ext__check i, .qt__ok i, .po__sent i { flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ff5c35'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.7' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.alert i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #ff5c35; box-shadow: inset 0 0 0 5px #ff5c35, inset 0 0 0 16px #fff; }
.ext__status { position: relative; height: 40px; margin-top: auto; }
.ext__st { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-radius: 10px; background: #f4f3ee; color: #55574f; font-weight: 500; }
.ext__st--ok { background: #ff5c35; color: #fff; font-weight: 600; }
.is-compact .scr--doc { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; }
.is-compact .doc__paper { font-size: 9px; gap: 7px; padding: 12px; }
.is-compact .doc__file, .is-compact .doc__ted, .is-compact .ext__row--opt, .is-compact .ext__check { display: none; }
.is-compact .ext__row { height: 36px; grid-template-columns: 74px minmax(0, 1fr) 16px; }
.is-compact .ext__row dt { font-size: 13px; }

/* screen: a question to your data */
.scr--ask { display: flex; flex-direction: column; gap: 14px; }
.qbar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border: 1.5px solid #ff5c35; border-radius: 23px; background: #fff; box-shadow: 0 0 0 4px #fff0ea; font-size: 14px; min-width: 0; }
.qbar__ic { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #ff5c35; position: relative; }
.qbar__ic::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: #ff5c35; rotate: 45deg; }
.qbar__in { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: #9a9b94; }
.qbar__in.is-typing, .scr--ask .qbar__in { color: #1d1f1c; }
.qbar__in.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #1d1f1c; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.think { display: flex; align-items: center; gap: 5px; color: #8a8b84; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: #ff5c35; animation: dot 1s infinite; }
.think i:nth-child(2) { animation-delay: 0.15s; } .think i:nth-child(3) { animation-delay: 0.3s; margin-right: 6px; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.card { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid #ece8df; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px -18px rgba(40,30,15,0.35); }
.card__txt { font-size: 15px; font-weight: 500; line-height: 1.4; }
.card__txt b { color: #b23a1c; font-weight: 700; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin-bottom: 18px; border-bottom: 1px solid #ddd8cd; }
.bar { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar span { width: 100%; max-width: 60px; height: calc(var(--v) * var(--g, 1) * 112px); border-radius: 5px 5px 0 0; background: #ffd5c6; }
.bar.is-top span { background: #ff5c35; }
.bar b { font-size: 11px; font-weight: 600; color: #55574f; opacity: var(--g, 1); }
.bar i { position: absolute; bottom: -19px; font-style: normal; font-size: 11px; color: #8a8b84; }
.card.is-anim { animation: cardIn 420ms var(--sc-ease-out) both; }
.card.is-anim .bar span { animation: barUp 800ms 120ms var(--sc-ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes barUp { from { height: 0; } }
.card__src { font-size: 11px; color: #8a8b84; }
.follow { display: flex; flex-wrap: wrap; gap: 8px; }
.follow span { padding: 6px 12px; border-radius: 15px; border: 1px solid #ece8df; color: #b23a1c; font-size: 12px; font-weight: 500; }
.is-compact .card__txt { font-size: 17px; }
.is-compact .bars { height: 120px; } .is-compact .bar span { height: calc(var(--v) * var(--g, 1) * 86px); }
.is-compact .scr--ask .follow { display: none; }

/* screen: an emailed request becomes a quote */
.scr--quote { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.mail { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid #ece8df; border-radius: 12px; background: #faf8f4; }
.mail__from { display: flex; align-items: center; gap: 10px; }
.mail__from b { display: block; font-size: 12px; } .mail__from small { display: block; color: #7d7e77; font-size: 11px; }
.mail__av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #070907; color: #fff; font-size: 10.5px; font-weight: 600; }
.mail__body { font-size: 13px; line-height: 1.6; }
.mail__body span { border-radius: 3px; transition: background-color 300ms, box-shadow 300ms; }
.mail__body span.is-hl { background: #ffe0d4; box-shadow: 0 0 0 2px #ffe0d4; }
.mail__ai { display: flex; align-items: center; gap: 8px; color: #b23a1c; font-size: 11.5px; font-weight: 600; }
.qt { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid #ece8df; border-radius: 12px; box-shadow: 0 12px 26px -18px rgba(40,30,15,0.35); }
.qt__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.qt__head b { font-size: 14px; } .qt__head small { color: #7d7e77; font-size: 11px; }
.qt__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px 74px; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1eee7; font-size: 12px; }
.qt__row span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.qt__row--h { color: #8a8b84; font-size: 10.5px; font-weight: 600; }
.qt__sum { display: grid; gap: 2px; width: 56%; margin: 6px 0 4px auto; font-size: 12px; }
.qt__sum div { display: flex; justify-content: space-between; }
.qt__sum .is-tot { padding-top: 4px; border-top: 1px solid #1d1f1c; font-size: 14px; font-weight: 700; }
.qt__send { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 12px; border-radius: 10px; background: #fff0ea; color: #8f2c14; font-size: 12px; font-weight: 500; }
.qt__send b { padding: 7px 14px; border-radius: 7px; background: #ff5c35; color: #fff; }
.is-compact .scr--quote { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.is-compact .mail__from small, .is-compact .mail__ai, .is-compact .qt__row--h, .is-compact .qt__ok, .is-compact .qt__sum div:not(.is-tot) { display: none; }
.is-compact .qt__row { grid-template-columns: 26px minmax(0, 1fr) 76px; font-size: 13px; }
.is-compact .qt__row span:nth-child(3) { display: none; }

/* screen: stock that warns you in time */
.scr--stock { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; align-items: start; }
.stk { display: grid; padding: 14px 16px; border: 1px solid #ece8df; border-radius: 12px; }
.stk__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.stk__day { padding: 3px 9px; border-radius: 10px; background: #070907; color: #fff; font-size: 11px; font-weight: 600; }
.stk__row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 38px; align-items: center; gap: 12px; height: 40px; border-bottom: 1px solid #f1eee7; font-size: 12.5px; transition: color 300ms; }
.stk__row--h { height: 28px; color: #8a8b84; font-size: 10.5px; font-weight: 600; }
.stk__bar { position: relative; height: 8px; border-radius: 4px; background: #f1eee7; }
.stk__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0.8) * 100%); border-radius: 4px; background: #2b2d29; transition: background-color 300ms; }
.stk__bar s { position: absolute; top: -4px; bottom: -4px; left: calc(var(--m) * 100%); width: 2px; background: #b23a1c; }
.stk__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stk__row.is-low { color: #b23a1c; font-weight: 600; }
.stk__row.is-low .stk__bar i { background: #ff5c35; }
.alert { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff0ea; color: #8f2c14; font-size: 12px; font-weight: 500; }
.po { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid #ff5c35; border-radius: 12px; box-shadow: 0 16px 30px -20px rgba(255,92,53,0.7); }
.po__head { display: flex; justify-content: space-between; align-items: baseline; }
.po__head b { font-size: 13.5px; } .po__head small { color: #7d7e77; font-size: 11px; }
.po__rows { display: grid; gap: 6px; font-size: 12px; }
.po__rows div { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
.po__rows dt { color: #8a8b84; } .po__rows dd { font-weight: 500; }
.po__acts { display: flex; gap: 8px; }
.po__btn { padding: 8px 14px; border: 1px solid #ddd8cd; border-radius: 8px; font-size: 12px; font-weight: 600; transition: box-shadow 300ms, transform 300ms; }
.po__btn--ok { background: #ff5c35; border-color: #ff5c35; color: #fff; }
.po__btn--ok.is-hl { box-shadow: 0 0 0 4px #ffd5c6; transform: scale(0.97); }
.is-compact .scr--stock { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; }
.is-compact .stk__row { grid-template-columns: minmax(0, 1fr) 70px 32px; gap: 8px; font-size: 13px; height: 36px; }
.is-compact .stk__row--h, .is-compact .alert, .is-compact .po__rows div:nth-child(3), .is-compact .po__head small { display: none; }
.is-compact .stk__row:nth-of-type(n+6) { display: none; }

/* screen: the live demo conversation */
.scr--chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.conv { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; min-height: 0; }
.hello { align-self: flex-start; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #f4f3ee; font-size: 13.5px; }
.qmsg { align-self: flex-end; max-width: 76%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #070907; color: #fff; font-size: 13.5px; animation: cardIn 300ms var(--sc-ease-out) both; }
.think--live { align-self: flex-start; animation: cardIn 200ms var(--sc-ease-out) both; }
.conv .card { align-self: stretch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { padding: 6px 8px 6px 0; border-bottom: 1px solid #ddd8cd; color: #8a8b84; font-size: 11px; font-weight: 600; text-align: left; }
.tbl td { padding: 7px 8px 7px 0; border-bottom: 1px solid #f1eee7; font-variant-numeric: tabular-nums; }
.tbl th:not(:first-child), .tbl td:not(:first-child) { text-align: right; }
.tbl tbody tr:first-child td { font-weight: 600; }
.is-compact .hello, .is-compact .qmsg { font-size: 16px; }
.is-compact .tbl { font-size: 14.5px; } .is-compact .tbl th { font-size: 12.5px; }
.is-compact .qbar { font-size: 16px; height: 50px; }

/* ------------------------------------------------------------- 0 · hero */
.c3-hero { min-height: 100svh; padding-block: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; overflow: clip; }
.c3-hero__stage { position: relative; display: grid; place-items: center; height: 100svh; padding: var(--folio-h) var(--sc-gutter) 0 var(--sc-5); perspective: 1800px; }
.c3-hero__glow { position: absolute; left: 50%; top: 48%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,92,53,0.24), rgba(255,92,53,0.05) 60%, transparent 72%); }
.lap--hero { width: min(100%, 760px); transform: rotateY(-13deg) rotateX(5deg); transform-origin: 40% 50%; }
.c3-hero__tag { position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; text-align: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; }
.c3-hero__tag b { color: var(--sc-accent); font: 700 1rem/1 var(--sc-font-display); letter-spacing: -0.02em; }
@media (max-width: 860px) {
  .c3-hero { grid-template-columns: 1fr; padding-top: var(--folio-h); }
  .c3-hero__stage { order: -1; height: auto; padding: var(--sc-7) var(--sc-gutter) var(--sc-9); }
  .lap--hero { transform: none; width: 92%; }
  .c3-hero__tag { bottom: var(--sc-3); white-space: normal; width: calc(100% - 2 * var(--sc-gutter)); }
}

/* --------------------------------------------- I · the pinned peak laptop */
.sys { padding: 0; }
.sys__stage { height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); align-items: center; gap: var(--sc-8);
  padding: calc(var(--folio-h) + clamp(1.5rem, 5vh, 3rem)) var(--sc-gutter) clamp(1.5rem, 5vh, 3rem); background: radial-gradient(ellipse at 66% 50%, #1b1410, #070907 64%); }
.sys:not(.is-live) .sys__stage { height: auto; min-height: 100svh; }
.sys__side { display: grid; gap: var(--sc-5); align-content: center; }
.sys__head { display: grid; gap: var(--sc-4); }
.sys__head .ch-num { margin-bottom: 0; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); }
.sys__head .ch-title { font-size: clamp(1.7rem, 0.9rem + 1.9vw, 2.9rem); }
.sys__head .ch-lede { font-size: var(--sc-t-base, 1rem); }
.sys__list { display: grid; gap: 4px; }
.sys__list button { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 4px 12px; width: 100%; padding: var(--sc-3) var(--sc-4); border: 0; border-left: 2px solid rgba(244,243,238,0.14); background: none; color: inherit; text-align: left; cursor: pointer; opacity: 0.42; transition: opacity 360ms var(--sc-ease-out), border-color 360ms; }
.sys__list .is-done button { opacity: 0.62; }
.sys__list .is-now button { opacity: 1; border-left-color: var(--sc-accent); }
.sys__list button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sys__list button:hover { opacity: 1; } }
.sys__n { grid-row: span 2; font: 700 1.05rem/1.3 var(--sc-font-display); color: var(--sc-accent); letter-spacing: -0.03em; }
.sys__list b { font: 500 1.08rem/1.25 var(--sc-font-display); letter-spacing: -0.025em; }
.sys__t { font-size: 0.9rem; color: var(--sc-ink-soft); line-height: 1.45; }
.sys__view { display: grid; gap: var(--sc-5); justify-items: center; min-width: 0; }
.lap--peak { width: min(100%, calc((100svh - var(--folio-h) - 190px) * 1.5)); }
.sys__note { display: flex; align-items: center; gap: 8px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.sys__note small, .ask .sys__note small { padding: 2px 6px; border: 1px solid rgba(244,243,238,0.3); border-radius: 2px; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 1100px) and (min-width: 861px) { .sys__t { display: none; } .sys__list .is-now .sys__t { display: block; } }
@media (max-width: 860px) {
  .sys__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; align-content: start; gap: var(--sc-5); padding-top: calc(var(--folio-h) + 16px); }
  .sys__side { display: contents; }
  .sys__head { order: 0; }
  .sys__head .ch-lede { display: none; }
  .sys__view { order: 1; }
  .sys__list { order: 2; }
  .lap--peak { width: calc(100% - 8px); }
  .sys.is-live .sys__list { position: relative; display: block; min-height: 150px; }
  .sys.is-live .sys__list li { position: absolute; inset: 0 0 auto 0; opacity: 0; transition: opacity 300ms; pointer-events: none; }
  .sys.is-live .sys__list li.is-now { opacity: 1; pointer-events: auto; }
}

/* --------------------------------------------------------- II · ask demo */
.ask__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-9); align-items: center; }
.ask .tabs { margin-bottom: var(--sc-6); }
.ask__src { margin-bottom: var(--sc-2); font: 500 0.72rem/1 var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ask__knows { display: grid; gap: 8px; margin-bottom: var(--sc-6); }
.ask__knows li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sc-4); padding-block: 8px; border-bottom: 1px solid var(--ml-line); font-size: var(--sc-t-sm); }
.ask__knows b { font-weight: 600; }
.ask__knows span { color: var(--sc-ink-soft); }
.ask__view { display: grid; gap: var(--sc-7); min-width: 0; }
.lap--ask .lap__lid { box-shadow: inset 0 0 0 1px rgba(244,243,238,0.14), inset 0 0 0 3px #070907, 0 50px 80px -44px rgba(40,30,15,0.7); }
.lap--ask .lap__base { box-shadow: 0 26px 30px -22px rgba(40,30,15,0.6); }
.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask__chips button { min-height: 44px; padding: 8px 16px; border: 1px solid color-mix(in oklab, #070907 22%, transparent); border-radius: 22px; background: #fff; color: #070907; font: 500 0.88rem/1.25 var(--sc-font-text); text-align: left; cursor: pointer; transition: border-color 150ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out); }
.ask__chips button:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ask__chips button:not(:disabled):hover { border-color: var(--ml-paper-accent); background: #fff6f2; } }
.ask__chips button:focus-visible { outline: 2px solid #070907; outline-offset: 2px; }
@media (max-width: 860px) {
  .ask__layout { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .ask__copy { min-width: 0; }
  .ask__knows li { grid-template-columns: 1fr; gap: 2px; }
  .ask__chips button { width: 100%; }
}

/* --------------------------------------------------------- III · the hub */
.hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); align-items: center; gap: var(--sc-5) var(--sc-10, 6rem); margin-bottom: var(--sc-9); }
.hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub__wires .w { fill: none; stroke: rgba(244,243,238,0.16); stroke-width: 1.5; }
.hub__wires .p { fill: none; stroke: var(--sc-accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 23; animation: wire 1.4s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -26; } }
.hub__nodes { display: contents; }
.hub__node { position: relative; z-index: 1; display: grid; gap: 3px; padding: var(--sc-4) var(--sc-5); border: 1px solid rgba(244,243,238,0.16); border-radius: 4px; background: #0d100e; }
.hub__node:nth-child(1), .hub__node:nth-child(4) { grid-row: 1; }
.hub__node:nth-child(2), .hub__node:nth-child(5) { grid-row: 2; }
.hub__node:nth-child(3), .hub__node:nth-child(6) { grid-row: 3; }
.hub__node:nth-child(-n+3) { grid-column: 1; }
.hub__node:nth-child(n+4) { grid-column: 3; }
.hub__node b { font: 500 1.05rem/1.2 var(--sc-font-display); letter-spacing: -0.025em; }
.hub__node small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.hub__node--team { border-color: var(--sc-accent); background: #1b0f0b; }
.hub__core { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 4; justify-self: center; display: grid; place-content: center; justify-items: center; gap: 8px; width: min(100%, 300px); aspect-ratio: 1; padding: var(--sc-5); border-radius: 50%;
  background: #f4f3ee; color: #070907; text-align: center; box-shadow: 0 0 0 12px rgba(255,92,53,0.12), 0 0 0 26px rgba(255,92,53,0.05), 0 0 90px rgba(255,92,53,0.32); }
.hub__core .hub__mark { width: 46px; height: 46px; border-radius: 11px; font-size: 20px; }
.hub__core b { font: 500 1.2rem/1.15 var(--sc-font-display); letter-spacing: -0.03em; }
.hub__core small { font-size: var(--sc-t-xs); color: #55574f; }
@media (prefers-reduced-motion: no-preference) { .hub__core { animation: corePulse 3.2s ease-in-out infinite; } }
@keyframes corePulse { 50% { box-shadow: 0 0 0 16px rgba(255,92,53,0.14), 0 0 0 34px rgba(255,92,53,0.04), 0 0 110px rgba(255,92,53,0.4); } }
@media (max-width: 860px) {
  .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: var(--sc-3); }
  .hub__wires { display: none; }
  .hub__core { grid-column: 1 / -1; grid-row: auto; width: min(220px, 62vw); margin-bottom: var(--sc-7); }
  .hub__node { grid-column: auto !important; grid-row: auto !important; padding: var(--sc-3) var(--sc-4); }
  .hub__node::before { content: ""; position: absolute; right: 10px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
}
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); margin-bottom: var(--sc-8); }
.flow__step { position: relative; display: grid; gap: var(--sc-2); align-content: start; padding: var(--sc-5); border: 1px solid rgba(244,243,238,0.14); border-radius: 2px; background: #0d100e; }
.flow__step:not(:last-child)::after { content: "→"; position: absolute; right: calc(var(--sc-5) * -0.5 - 0.5em); top: 50%; translate: 0 -50%; z-index: 2; color: var(--sc-accent); font-size: 1.2rem; }
.flow__step--human { border-color: var(--sc-accent); background: rgba(255,92,53,0.08); }
.flow__n { font: 700 1.6rem/1 var(--sc-font-display); color: var(--sc-accent); letter-spacing: -0.05em; }
.flow__step h3 { font: 500 1.1rem/1.2 var(--sc-font-display); letter-spacing: -0.025em; }
.flow__step p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.review { max-width: 34rem; margin-left: auto; padding: var(--sc-5); border-radius: 6px; background: #fff; color: #070907; box-shadow: var(--sc-e3); rotate: -1.5deg; }
.review__head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--sc-3); border-bottom: 1px solid rgba(7,9,7,0.12); }
.review__head small { margin-left: auto; color: #55574f; }
.review__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(255,92,53,0.2); }
.review__rows { display: grid; gap: 8px; padding-top: var(--sc-3); }
.review__rows > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sc-4); font-size: var(--sc-t-sm); }
.review__rows dt { color: #55574f; }
.review__rows dd { font-weight: 500; }
.review__acts { display: flex; gap: 8px; margin-top: var(--sc-4); }
.review__btn { padding: 8px 16px; border: 1px solid #ddd8cd; border-radius: 6px; font-size: var(--sc-t-sm); font-weight: 600; }
.review__btn--ok { background: #ff5c35; border-color: #ff5c35; color: #fff; }
.review .note { color: #55574f; margin-top: var(--sc-3); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: var(--sc-4); }
  .flow__step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: calc(var(--sc-4) * -0.5 - 0.7em); translate: -50% 0; }
  .review { rotate: 0deg; }
  .review__rows > div { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------- IV · the light panel */
.sp { padding: clamp(1rem, 2.5vw, 2rem); border-radius: 10px; background: #fff; color: #1d1f1c; box-shadow: var(--sc-e3); }
.sp__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-4); margin-bottom: var(--sc-5); }
.sp__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 1rem/1.2 var(--sc-font-display); }
.sp__tag { padding: 3px 8px; border-radius: 3px; background: #fff0ea; color: #b23a1c; font: 500 0.66rem/1.2 var(--sc-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sp__seg { display: flex; gap: 4px; }
.sp__seg button { min-height: 40px; padding: 0 14px; border: 1px solid #ddd8cd; border-radius: 4px; background: #fff; color: #1d1f1c; font: 500 0.76rem/1 var(--sc-font-display); cursor: pointer; }
.sp__seg button[aria-pressed="true"] { background: #070907; color: #fff; border-color: #070907; }
.sp__seg button:focus-visible { outline: 2px solid #ff5c35; outline-offset: 2px; }
.sp__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--sc-5); }
.sk { padding: var(--sc-4); border: 1px solid #ece8df; border-radius: 8px; }
.sk__l { font-size: var(--sc-t-xs); color: #6b6d66; }
.sk__v { margin-top: 6px; font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem)/1.1 var(--sc-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.sk__v--accent { color: #b23a1c; }
.sp__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr); gap: 12px; }
.sv { min-width: 0; margin: 0; padding: var(--sc-4); border: 1px solid #ece8df; border-radius: 8px; }
.sv__t { margin-bottom: var(--sc-4); font: 500 0.86rem/1.3 var(--sc-font-display); }
.days { display: flex; align-items: flex-end; gap: 3px; height: 170px; border-bottom: 1px solid #ddd8cd; }
.days span { position: relative; flex: 1; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: #ff5c35; transition: height 700ms var(--sc-ease-out); cursor: default; }
.days span.is-we { background: #e3dfd5; }
.days span:hover, .days span:focus-visible { filter: brightness(1.12); outline: none; }
.days span::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; z-index: 3; padding: 4px 7px; border-radius: 3px; background: #070907; color: #fff; font: 600 0.68rem/1.2 var(--sc-font-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.days span:hover::after, .days span:focus-visible::after { opacity: 1; }
.days__axis { display: flex; justify-content: space-between; margin-top: 6px; color: #8a8b84; font: 500 0.66rem/1 var(--sc-font-text); }
.types { display: grid; gap: 10px; }
.types li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: var(--sc-t-sm); }
.types li i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 0 3px 3px 0; background: #f1eee7; }
.types li i::after { content: ""; display: block; width: var(--w, 0%); height: 100%; border-radius: 0 3px 3px 0; background: #ff5c35; transition: width 700ms var(--sc-ease-out); }
.types b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ends3 { display: flex; gap: 2px; height: 16px; overflow: hidden; border-radius: 0 4px 4px 0; }
.ends3 span { flex-basis: 0; transition: flex-grow 700ms var(--sc-ease-out); }
.ends3__keys { display: grid; gap: 8px; margin-top: var(--sc-4); font-size: var(--sc-t-sm); }
.ends3__keys li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
.ends3__keys li i { width: 12px; height: 12px; border-radius: 2px; }
.ends3__keys b { font-variant-numeric: tabular-nums; }
.sp .note { color: #55574f; }
.sp__note { margin-top: var(--sc-4); }
@media (max-width: 1100px) { .sp__grid { grid-template-columns: 1fr 1fr; } .sv--days { grid-column: 1 / -1; } }
@media (max-width: 860px) { .sp__kpis { grid-template-columns: 1fr 1fr; } .sp__grid { grid-template-columns: 1fr; } .days { height: 130px; gap: 2px; } }

/* ------------------------------------------------------------ V · close */
.c3-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--sc-7); max-width: 52rem; margin-bottom: var(--sc-7); }
.c3-inc li { position: relative; padding-left: 1.5em; font-weight: 500; }
.c3-inc li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: #180906; rotate: 45deg; }
@media (max-width: 860px) { .c3-inc { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .scr, .scr.is-enter, .card.is-anim, .card.is-anim .bar span, .qmsg, .think--live { animation: none; transition: none; }
  .spin, .think i, .hub__wires .p { animation: none; }
  .days span, .types li i::after, .ends3 span { transition: none; }
}
@media (max-width: 860px) { .lap__base { margin-inline: -3%; } }
html[lang="ru"] .sys__head .ch-title { font-size: clamp(1.5rem, 0.8rem + 1.6vw, 2.4rem); overflow-wrap: break-word; hyphens: auto; }