.transformation{min-width:0;scroll-margin-top:100px}
.transformation-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:8px var(--mono);letter-spacing:.04em;margin:0 0 15px;color:#6f7068}
.example-label{font-family:var(--sans);letter-spacing:0;text-align:right}
.build-tabs{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:4px;margin-bottom:14px}
.build-tabs button{border:0;border-bottom:2px solid #d9d7ce;background:none;text-align:left;padding:11px 5px;font-size:11px;cursor:pointer;display:flex;gap:8px;align-items:center}
.build-tabs button>span{font:10px var(--mono);color:#87877e}
.build-tabs button[aria-selected=true]{border-color:var(--orange)}
.build-tabs button[aria-selected=true]>span{color:var(--orange)}
.designed-app{border:1px solid #d8d5c9;background:#e9edde;box-shadow:0 14px 40px #20211e12;overflow:hidden}
.design-browser{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#fafaf6;font:8px var(--mono);color:#8c8d82;border-bottom:1px solid #d8d5c9}
.design-browser>span:first-child{letter-spacing:2px;font-size:7px}
.app-state{font-size:7px;color:#65665e}
.design-nav{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#344536;font-size:8px}
.design-nav>b{font:600 21px Georgia,serif;letter-spacing:-1px}
.design-nav>b>span{font:9px var(--sans);vertical-align:top;margin-left:2px}
.design-account{opacity:.5}
.design-body{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;padding:18px 20px 23px;min-height:220px}
.design-body h3{font:normal 33px/.99 Georgia,serif;color:#344536;letter-spacing:-.04em;margin:15px 0 12px}
.design-body p{font-size:9px;line-height:1.6;max-width:155px;color:#687561;margin:0 0 16px}
.booking-demo{background:#344536;color:#fff;border:0;font-size:9px;padding:10px 12px;display:flex;align-items:center;gap:14px;cursor:pointer}
.booking-demo:disabled{cursor:default;opacity:.58}
.design-art{position:relative;min-height:175px;background:#dde4d0;overflow:hidden}
.arch{position:absolute;width:85%;height:100%;border-radius:90px 90px 0 0;right:-15px;top:20px;background:#afba9f;box-shadow:inset 14px 0 20px #34453615}
.plinth{position:absolute;width:58%;height:58%;background:linear-gradient(100deg,#c9aa85,#eed8b7);bottom:-10px;right:9px;border-radius:3px 3px 0 0;transform:rotate(-7deg);box-shadow:-12px 14px 20px #34453630}
.orb{width:66px;height:66px;border-radius:50%;position:absolute;right:34px;bottom:85px;background:radial-gradient(circle at 35% 25%,#f1be80,#b45a31);box-shadow:8px 11px 12px #34453630}
.design-art>span{position:absolute;bottom:8px;left:9px;font:6px var(--mono);color:#344536}
.design-bottom{border-top:1px solid #cad1bd;padding:9px 20px;display:flex;justify-content:space-between;font-size:8px;color:#687561}
.transformation[data-phase="2"] .app-state{color:#2d6a44;font-weight:700}
.transformation[data-phase="2"] .design-account{opacity:1}
.transformation[data-phase="2"] .designed-app{border-color:#83a384}
.transformation-explanation{display:flex;gap:13px;margin-top:17px}
.phase-number{color:var(--orange);font:11px var(--mono);padding-top:2px}
.transformation-explanation h3{font-size:13px;margin:0 0 4px;letter-spacing:-.02em}
.transformation-explanation p{font-size:11px;color:#77786f;line-height:1.6;margin:0;max-width:460px}
.transform-next{border:0;border-bottom:1px solid #d7d5ca;background:none;padding:12px 0;width:100%;display:flex;justify-content:space-between;font-size:11px;cursor:pointer;margin-top:9px}
.transform-next>span:last-child{color:var(--orange)}
.business-prompt{padding:15px;background:#eeece4;border-left:2px solid var(--orange);margin-top:14px}
.business-prompt>span{font:8px var(--mono);color:#8a6a54}
.business-prompt p{font:14px/1.55 Georgia,serif;margin:8px 0}
.business-prompt small{font-size:9px;color:#73746b}
.connected-result{display:flex;gap:10px;align-items:center;background:#e8eedf;border:1px solid #c6d3b7;padding:12px;margin-top:14px;color:#344536}
.connected-result[hidden],.business-prompt[hidden]{display:none}
.connected-result>div{flex:1}
.connected-result b{display:block;font-size:11px}
.connected-result div>span{font-size:9px;display:block;margin-top:3px}
.result-indicator{width:7px;height:7px;border-radius:50%;background:#688c58}
html:lang(ru) .design-body h3{font-size:29px}
@media(max-width:1000px){.design-body h3{font-size:28px}
.design-body{padding:13px}
.design-nav{padding:14px}}
@media(max-width:760px){.transformation-top{font-size:7px}
.build-tabs button{font-size:10px}
.design-body{padding:18px;min-height:220px}
.design-body h3{font-size:32px}
.transformation-explanation p{font-size:12px}}
.platform-connector{height:24px;display:flex;justify-content:center;position:relative}
.platform-connector:before{content:"";border-left:1px dashed #b7b7a8;height:100%}
.platform-connector>span{position:absolute;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--orange);z-index:1;box-shadow:0 0 0 4px var(--paper)}
.platform-foundation{background:#172b3d;color:#f6f9fc;padding:0 22px 5px;border-radius:3px;box-shadow:0 8px 18px #20211e0a}
.foundation-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0 13px;border-bottom:1px solid #ffffff1c}
.foundation-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650;letter-spacing:-.6px}
.foundation-status{display:flex;align-items:center;gap:6px;color:#9da89b;font-size:9px;text-align:right}
.foundation-status i{width:4px;height:4px;background:#84917e;border-radius:50%;flex:none}
.foundation-capabilities{padding:0;margin:0;list-style:none}
.foundation-capabilities li{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid #ffffff0d}
.foundation-capabilities li:last-child{border:0}
.foundation-capabilities svg{width:15px;height:15px;fill:none;stroke:#9bb6cd;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.foundation-capabilities li>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:11px;line-height:1.5;color:#e6eef5}
.foundation-capabilities li i{font-style:normal;color:#7b8873}
.transformation[data-phase="1"] .platform-connector:before{border-color:var(--orange)}
.transformation[data-phase="2"] .platform-connector:before{border-style:solid;border-color:#899c79}
.transformation[data-phase="2"] .foundation-status{color:#c5d8b4}
.transformation[data-phase="2"] .foundation-status i{background:#b2ce95;box-shadow:0 0 0 3px #b2ce9515}
@media(max-width:1000px){.platform-foundation{padding-inline:15px}
.foundation-capabilities li>div{font-size:9px;gap:6px}
.foundation-status{font-size:8px}}
@media(max-width:760px){.foundation-capabilities li{gap:10px;padding:11px 0}
.foundation-capabilities li>div{font-size:11px;column-gap:8px;row-gap:2px}
.foundation-heading{gap:10px}
.foundation-status{max-width:145px;font-size:9px}
.foundation-brand{font-size:15px}
.platform-connector{height:22px}}
@media(max-width:420px){.foundation-capabilities li>div{display:block}
.foundation-capabilities li i{margin-inline:7px}
.foundation-capabilities li span{display:inline}
.foundation-capabilities svg{width:17px;height:17px}
.foundation-capabilities li{align-items:flex-start}}
.transformation-top{justify-content:flex-end;margin-bottom:10px}
.foundation-heading .brand-mark{width:19px;height:19px;gap:2px}
.foundation-capabilities li{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:12px 0}
.foundation-capabilities li>.foundation-feature{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;font-size:11px;line-height:1.4}
.foundation-capabilities .foundation-feature svg{width:17px;height:17px;flex-shrink:0}
.foundation-capabilities .foundation-feature span{display:block}
.foundation-capabilities .foundation-feature:only-child{grid-column:1/-1}
.foundation-status{color:#bdcbd8}
.platform-connector:before{border-color:#9bafbf}
.transformation[data-phase="2"] .foundation-status{color:#c5dccd}
.transformation-explanation p{color:#617080}
.section h2 em,.final-inner h2 em{font-family:var(--sans);font-weight:inherit;font-style:normal;letter-spacing:inherit;color:inherit}
.section{padding-top:95px;padding-bottom:95px}
.final-cta{background:#dbe8f2}
.section h2,.final-inner h2{letter-spacing:-.045em}
.image-caption{justify-content:flex-start}
.comms-points p{display:block}
@media(max-width:1000px){.foundation-capabilities li>.foundation-feature{font-size:10px;gap:7px}
.foundation-capabilities li{gap:10px}}
@media(max-width:760px){.foundation-capabilities li>.foundation-feature{font-size:11px;align-items:flex-start}
.foundation-capabilities li{gap:14px}
.foundation-capabilities .foundation-feature svg{width:17px;height:17px}
.section{padding-block:72px}
.transformation-top{margin-bottom:10px}}