/* OKHBOT 2.6.1 / Creative editorial marketing refresh. All rules scoped to public sections. */
.ok261-public-page,.ok261-home-services{--ok261-ink:#24243e;--ok261-violet:#6756e8;--ok261-muted:#696982;--ok261-soft:#f7f7fc}
.ok261-public-page *,.ok261-home-services *{box-sizing:border-box}
.ok261-kicker,.ok261-card-overline{display:inline-block;color:#6a5be0;font:800 10px/1.5 Inter,Arial,sans-serif;letter-spacing:.12em;direction:ltr;text-align:left}
.ok261-editorial-intro{display:grid;grid-template-columns:1.2fr .72fr;align-items:end;gap:8%;margin-bottom:48px}
.ok261-editorial-intro h2{font-size:clamp(39px,5.3vw,78px);font-weight:800;line-height:1.22;letter-spacing:-2.1px;margin:15px 0 0;color:#21213e}
.ok261-editorial-intro h2 em{font-style:normal;color:var(--ok261-violet)}
.ok261-intro-side{max-width:395px;padding-bottom:10px}
.ok261-intro-side b{font-size:19px;color:var(--ok261-ink);font-weight:800}
.ok261-intro-side p{font-size:15px;line-height:2.04;color:var(--ok261-muted);margin:10px 0 0}
/* 2.6.1 - Home: original home hero untouched; replace undersized sketches with crafted layouts. */
.ok261-home-services{padding-block:85px 105px}
.ok261-home-services .section-top{margin-bottom:46px}
.ok261-home-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ok261-home-card{min-height:650px;overflow:hidden;border-radius:27px;position:relative;padding:36px 40px 0;isolation:isolate;display:flex;flex-direction:column;align-items:stretch}
.ok261-home-design{background:#f0edff}.ok261-home-web{background:#e8f5f1}
.ok261-home-card-copy{position:relative;z-index:4;flex:0 0 auto}
.ok261-home-card-copy .ok261-card-overline{color:#77768e}
.ok261-home-card h3{font-weight:800;letter-spacing:-1.1px;line-height:1.32;font-size:clamp(32px,3vw,45px);margin:22px 0 14px;color:#24243e}
.ok261-home-card h3 em{font-style:normal;color:#6756e8}.ok261-home-web h3 em{color:#227c6a}
.ok261-home-card p{max-width:450px;color:#56576e;line-height:2;font-size:15px;margin-bottom:18px}
.ok261-home-card .btn{min-height:48px;padding-inline:21px;font-size:13px;position:relative;z-index:4}
.ok261-home-design-art,.ok261-home-web-art{flex:1;min-height:305px;position:relative;margin-top:16px;pointer-events:none;perspective:1100px}
.ok261-home-sheet{position:absolute;bottom:-36px;width:52%;height:285px;border-radius:9px;box-shadow:0 18px 38px #24204526;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:17px 20px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ok261-home-sheet>span,.ok261-home-sheet small{font:800 9px Inter,Arial;letter-spacing:.12em;position:relative;z-index:2}
.ok261-home-sheet b{font:900 clamp(38px,5vw,68px)/.89 Inter,Arial;letter-spacing:-3px;position:relative;z-index:2}
.ok261-home-sheet-back{left:9%;background:#e6b9a1;color:#34284b;transform:rotate(-13deg) translateY(20px)}
.ok261-home-sheet-back i{position:absolute;border:45px solid #f5e4dc;border-radius:50%;width:210px;height:210px;right:-45px;top:20px}
.ok261-home-sheet-front{right:10%;bottom:-15px;background:#5842e8;color:#fff;transform:rotate(8deg)}
.ok261-home-sheet-front b{font-size:clamp(39px,4.1vw,61px);letter-spacing:-4px}
.ok261-home-asterisk{position:absolute;color:#a599ff;font-size:245px;line-height:1;left:5%;top:0;transform:rotate(13deg);opacity:.83}
.ok261-home-chip{position:absolute;bottom:36px;left:0;background:#fff;box-shadow:0 10px 23px #34296022;padding:13px 17px;border-radius:10px;color:#555080;font:800 11px Inter,Arial;letter-spacing:.06em;z-index:3;transform:rotate(-4deg)}
.ok261-home-card:hover .ok261-home-sheet-front{transform:rotate(4deg) translateY(-12px)}
.ok261-home-card:hover .ok261-home-sheet-back{transform:rotate(-9deg) translateY(5px)}
.ok261-home-web-art{min-height:309px}
.ok261-home-browser{position:absolute;width:84%;height:260px;bottom:-20px;left:3%;background:#fff;box-shadow:0 25px 48px #214a4240;border:1px solid #dde3e8;border-radius:14px;overflow:hidden;transform:rotate(-5deg);transition:transform .5s;direction:ltr}
.ok261-home-card:hover .ok261-home-browser{transform:rotate(-2deg) translateY(-8px)}
.ok261-home-browser-top{height:29px;background:#f8f9fb;border-bottom:1px solid #eaebf0;display:flex;justify-content:space-between;align-items:center;padding:0 11px;font:600 10px Inter,Arial;color:#777b91}
.ok261-home-browser-top span{color:#a4a9bf}.ok261-home-browser-top b{font-size:15px}
.ok261-home-browser-nav{display:flex;justify-content:space-between;padding:15px 19px 8px;align-items:center;color:#2a284a;font:700 9px Inter,Arial}
.ok261-home-browser-nav b{font-size:20px;font-weight:900;letter-spacing:-1px}.ok261-home-browser-nav b span{color:#7059ef}
.ok261-home-browser-body{display:grid;grid-template-columns:1fr 1fr;height:192px;overflow:hidden}
.ok261-home-browser-body>div:first-child{padding:26px 2px 8px 20px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap;color:#282642}
.ok261-home-browser-body small{font:700 8px Inter,Arial;color:#9090a0;letter-spacing:.06em}
.ok261-home-browser-body strong{font:900 clamp(23px,2.3vw,37px)/1 Inter,Arial;margin:12px 0 13px;letter-spacing:-2px}
.ok261-home-browser-body em{font-style:normal;color:#6354da}
.ok261-home-browser-body span{font:800 8px Inter,Arial;border-bottom:2px solid #292640;padding-bottom:5px}
.ok261-home-shape{position:relative;overflow:hidden}
.ok261-home-shape:before{content:'';position:absolute;inset:10px 20px -85px 0;background:linear-gradient(135deg,#cbbbf5,#8572eb);border-radius:140px 140px 8px 8px;transform:rotate(7deg)}
.ok261-home-shape i{position:absolute;width:140px;height:170px;border:26px solid #efbd95;border-bottom:0;transform:rotate(-24deg);left:-19px;top:47px;border-radius:120px 120px 0 0}
.ok261-home-phone{position:absolute;z-index:3;right:0;bottom:0;width:25%;height:200px;background:#f7f4fc;border:5px solid #2a293c;border-radius:21px;box-shadow:0 20px 32px #25243b33;transform:rotate(8deg);padding:23px 8px 12px;direction:ltr;display:flex;flex-direction:column;color:#2c2647;transition:transform .5s}
.ok261-home-phone:before{content:'';width:33%;height:9px;background:#28263e;border-radius:0 0 8px 8px;position:absolute;top:-1px;left:34%}
.ok261-home-phone small{font:900 11px Inter,Arial;letter-spacing:-.5px}
.ok261-home-phone i{height:95px;background:linear-gradient(135deg,#b3a0ee 0 57%,#edd2bb 57%);margin:10px 0 11px;border-radius:50% 50% 0 0}
.ok261-home-phone b{font:900 11px/1 Inter,Arial;letter-spacing:-.3px}
.ok261-home-card:hover .ok261-home-phone{transform:rotate(3deg) translateY(-9px)}
/* Design page: spacious editorial studio, varied portfolio proportions */
.ok261-showcase-section{padding:112px 0 90px;background:#f8f8fc;scroll-margin-top:75px}
.ok261-portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-bottom:26px}
.ok261-filter-group,.ok261-site-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ok261-filter-group button,.ok261-site-filter button{border:1px solid #e7e7f0;background:#fff;border-radius:100px;padding:10px 16px;cursor:pointer;font:700 13px 'IBM Plex Sans Arabic',sans-serif;color:#55576c;transition:all .2s ease}
.ok261-filter-group button.selected,.ok261-site-filter button.selected{background:#6152db;border-color:#6152db;color:white}
.ok261-filter-group button:hover:not(.selected),.ok261-site-filter button:hover:not(.selected){border-color:#aaa5eb;color:#6152db}
.ok261-search{position:relative;min-width:205px;display:flex;align-items:center;gap:7px;border:1px solid #e5e5ef;border-radius:10px;background:#fff;padding:0 13px;color:#817d98}
.ok261-search input{min-height:44px;border:0;background:none;outline:none;width:185px;font-size:13px}
.ok261-portfolio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.ok261-portfolio-tile{grid-column:span 4;background:#fff;border:1px solid #e9e9f1;min-width:0;overflow:hidden;border-radius:18px;transition:box-shadow .25s,transform .25s}
.ok261-portfolio-tile:nth-child(1),.ok261-portfolio-tile:nth-child(4){grid-column:span 7}
.ok261-portfolio-tile:nth-child(2),.ok261-portfolio-tile:nth-child(5){grid-column:span 5}
.ok261-portfolio-tile:nth-child(3),.ok261-portfolio-tile:nth-child(6){grid-column:span 12}
.ok261-portfolio-tile:hover{transform:translateY(-5px);box-shadow:0 25px 65px #22234815}
.ok261-portfolio-media{padding:15px 15px 0}
.ok261-portfolio-art{height:340px;position:relative;overflow:hidden;border-radius:11px;padding:20px 24px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;direction:ltr;color:#fff}
.ok261-portfolio-tile:nth-child(3n) .ok261-portfolio-art{height:390px}
.ok261-art-top,.ok261-art-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:3;font:800 10px/1.35 Inter,Arial,sans-serif;letter-spacing:.06em;white-space:nowrap}
.ok261-art-footer{font-size:8px;opacity:.95}
.ok261-art-title{position:relative;z-index:2;font-size:clamp(38px,5vw,70px);font-weight:800;line-height:.99;letter-spacing:-2.3px;max-width:85%;direction:rtl;text-align:right}
.ok261-art-title span{display:block;margin-top:3px}.art-d2 .ok261-art-title,.art-d4 .ok261-art-title,.art-d5 .ok261-art-title{direction:ltr;text-align:left;font:900 clamp(45px,6vw,89px)/.89 Inter,Arial,sans-serif;letter-spacing:-4px}
.ok261-art-shape{position:absolute;inset:0;z-index:1}
.ok261-art-shape i{position:absolute;display:block}
.art-d1{background:#e9c9ad;color:#35283e}.art-d1 .ok261-art-shape i:first-child{width:295px;height:295px;left:5%;top:9%;border:62px solid #bd907a;border-radius:50%;opacity:.8}.art-d1 .ok261-art-shape i:nth-child(2){width:220px;height:220px;left:25%;top:19%;background:#f7e5d1;border-radius:50%}.art-d1 .ok261-art-shape i:nth-child(3){width:160px;height:160px;right:-20px;bottom:-85px;background:#8f6656;border-radius:50%}
.art-d2{background:#d7ff37;color:#242733}.art-d2 .ok261-art-shape i:first-child{width:340px;height:340px;border:67px solid #a7d125;border-radius:50%;left:34%;top:-40%}.art-d2 .ok261-art-shape i:nth-child(2){width:170px;height:170px;background:#27233c;border-radius:40% 70% 40% 70%;right:10%;bottom:-72px;transform:rotate(-30deg)}
.art-d3{background:#b7dceb;color:#20436a}.art-d3 .ok261-art-shape i:first-child{width:340px;height:340px;border:50px solid #84b4cd;border-radius:50%;right:-100px;top:40px}.art-d3 .ok261-art-shape i:nth-child(2){width:240px;height:240px;background:#d6edfa;transform:rotate(26deg);top:-120px;left:8%}
.art-d4{background:#5541e7;color:#fff}.art-d4 .ok261-art-shape i:first-child{width:370px;height:370px;border:72px solid #8b7af0;border-radius:50%;right:-40px;top:35px}.art-d4 .ok261-art-shape i:nth-child(2){width:160px;height:160px;background:#ada3fa;border-radius:50%;left:5%;top:24%}
.art-d5{background:#ffd59c;color:#6c3f2a}.art-d5 .ok261-art-shape i:first-child{height:315px;width:315px;border:56px solid #e9b071;border-radius:50%;right:2%;top:2%}.art-d5 .ok261-art-shape i:nth-child(2){width:170px;height:170px;background:#8b4e38;border-radius:60% 40% 50% 30%;left:20%;bottom:-65px}
.art-d6{background:#aacef7;color:#213e74}.art-d6 .ok261-art-shape i:first-child{width:390px;height:390px;border:66px solid #82b6ea;border-radius:50%;left:18%;top:-50px}.art-d6 .ok261-art-shape i:nth-child(2){width:160px;height:160px;background:#426cae;transform:rotate(35deg);right:0;bottom:-55px}
.ok261-portfolio-meta{padding:17px 20px 20px;display:flex;gap:12px;align-items:end;justify-content:space-between}
.ok261-portfolio-meta>div>span{font:800 10px Inter,Arial;color:#9994ad;letter-spacing:.08em}
.ok261-portfolio-meta h3{font-size:21px;margin:7px 0 0;color:#282640}
.ok261-portfolio-meta button{padding:9px 0 9px 12px;background:transparent;border:0;color:#6454df;cursor:pointer;white-space:nowrap;font-size:13px;font-weight:800}
.ok261-portfolio-meta button span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #e3defb;border-radius:50%;margin-right:5px}
.ok261-portfolio-note,.ok261-showroom-disclaimer{font-size:12px;color:#828297;padding-top:22px;line-height:1.8}
/* Creative workflow explorer */
.ok261-design-process{background:#26213e;padding:100px 0;color:#fff;overflow:hidden}
.ok261-design-process .ok261-kicker{color:#aea4ff}
.ok261-process-grid{display:grid;grid-template-columns:.85fr 1.3fr;align-items:center;gap:70px}
.ok261-process-copy h2{font-size:clamp(39px,4.3vw,66px);line-height:1.2;letter-spacing:-1.8px;margin:18px 0 20px;color:#fff}
.ok261-process-copy h2 em{color:#b4a8ff;font-style:normal}
.ok261-process-copy p{line-height:2.1;font-size:16px;color:#cdc8e0;max-width:420px;margin-bottom:23px}
.ok261-process-facts{display:flex;flex-direction:column;gap:9px;border-top:1px solid #ffffff30;padding:19px 0 26px;color:#dbd7eb;font-size:13px}
.ok261-process-copy .btn{min-height:50px}
.ok261-slot-demo{border:1px solid #e1dafe;border-radius:22px;padding:25px 23px;background:#f9f8ff;box-shadow:0 40px 80px #0003;min-width:0;color:#2e294e}
.ok261-slot-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.ok261-slot-top>b{font-size:15px}.ok261-slot-top>div{display:flex;gap:5px;background:#ece9fa;padding:4px;border-radius:9px}
.ok261-slot-top button{background:transparent;border:0;border-radius:7px;color:#77718c;font-weight:700;padding:7px 10px;cursor:pointer;font-size:11px}
.ok261-slot-top button.is-on{background:#fff;color:#5f50d4;box-shadow:0 2px 5px #16113b13}
.ok261-slot-board{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:start;min-height:218px;direction:rtl}
.ok261-slot-board>div{min-height:195px;border:1px solid #e9e5f2;border-radius:13px;background:#fff;padding:13px 9px;min-width:0}
.ok261-slot-board>div>span{display:block;color:#8d88a7;font-size:11px;font-weight:800;margin-bottom:19px;white-space:nowrap}
.ok261-slot-board>div>div{background:#f7f5fd;border:1px solid #eeebf7;padding:11px 9px;border-radius:9px;font-size:12px;font-weight:800;color:#403b5a}
.ok261-slot-board small{display:block;font-size:10px;font-weight:500;color:#89859f;line-height:1.6}
.ok261-slot-card{border-right:3px solid #725deb!important}.ok261-slot-card i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#715beb;margin-left:5px}
.ok261-slot-card.second{margin-top:7px}.ok261-slot-finish>div{background:#eaf8f2!important}.ok261-slot-finish small{color:#26785d}
.ok261-slot-demo>p{font-size:11px;color:#8a879b;line-height:1.8;margin:14px 0 0}
/* Dynamic pricing uses original administration packages, not static cards */
.ok261-design-pricing{padding-block:110px 95px}
.ok261-design-pricing .package-language-toggle{margin-bottom:24px}
.ok261-design-pricing .plan-grid{gap:17px}
.ok261-design-pricing .plan-grid>.plan-card{border-radius:20px;padding:26px;box-shadow:0 8px 26px #25234406;min-height:unset;transition:transform .25s,box-shadow .25s}
.ok261-design-pricing .plan-grid>.plan-card:hover{transform:translateY(-4px);box-shadow:0 19px 41px #25234415}
.ok261-design-pricing .plan-price{margin-top:23px}
.ok261-design-pricing .plan-features{min-height:0;gap:10px}
.ok261-design-pricing .catalog-public-comparison{overflow:auto;max-width:100%;margin-top:40px}
.ok261-questions{background:#f7f7fc;padding:95px 0}
.ok261-question-grid{display:grid;grid-template-columns: .6fr 1fr;gap:80px}
.ok261-question-grid h2{font-size:clamp(38px,4vw,58px);line-height:1.3;margin:18px 0;color:#24223d}
.ok261-question-grid>div:first-child p{line-height:2;color:#73738c;font-size:15px}
.ok261-questions .accordion summary{font-size:16px}.ok261-questions .accordion details{margin-bottom:9px;padding:15px 20px}
.ok261-questions .accordion p{line-height:2;font-size:14px}
.ok261-end-banner{background:#6251e8;display:flex;justify-content:space-between;gap:30px;align-items:center;border-radius:26px;padding:52px 58px;margin-top:70px;margin-bottom:95px;color:#fff}
.ok261-end-banner span{font:800 11px Inter,Arial;color:#d6d2ff;letter-spacing:.1em}
.ok261-end-banner h2{color:#fff;font-size:clamp(36px,4vw,58px);line-height:1.24;margin:13px 0 0}
.ok261-end-banner .btn{background:#fff;color:#4f40c4;white-space:nowrap;min-height:52px}
/* Websites: interactive concept showroom, visually distinct from design studio */
.ok261-website-showroom{background:#f8f9fc;padding:108px 0 90px;scroll-margin-top:75px}
.ok261-site-filter{margin-bottom:28px}
.ok261-showroom-stage{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(275px,.68fr);gap:24px;direction:ltr;align-items:stretch}
.ok261-main-site{background:#e9ebf6;border:1px solid #dfe2ed;border-radius:23px;padding:20px;display:flex;flex-direction:column;min-width:0;direction:rtl}
.ok261-browser-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;font-size:12px;font-weight:700;color:#595e79}
.ok261-browser-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6154e2;margin-left:6px}
.ok261-devices{display:flex;gap:4px;background:#dddfee;padding:4px;border-radius:9px}
.ok261-devices button{cursor:pointer;border:0;background:transparent;color:#666b87;padding:7px 11px;border-radius:7px;font-size:11px;font-weight:800}
.ok261-devices button.on{background:#fff;color:#5149c3;box-shadow:0 1px 3px #0001}
.ok261-site-browser{--bg:#edeefe;--ink:#27274d;--accent:#6556d8;--graphic:#9286dd;width:100%;flex:1;min-height:445px;border-radius:11px;overflow:hidden;direction:ltr;background:#fff;border:1px solid #dfe1ed;box-shadow:0 23px 35px #35384f20;transition:max-width .4s,transform .4s;margin:auto;display:flex;flex-direction:column}
.ok261-site-w2{--bg:#f1eee1;--ink:#283b23;--accent:#6b844c;--graphic:#a8b694}
.ok261-site-w3{--bg:#e5f4ef;--ink:#1b585c;--accent:#36a7aa;--graphic:#93d4d4}
.ok261-site-w4{--bg:#fff0f4;--ink:#7d375b;--accent:#d05d93;--graphic:#f0b8d0}
.ok261-site-w5{--bg:#f5ede5;--ink:#533b34;--accent:#ac745a;--graphic:#d9b69f}
.ok261-site-w6{--bg:#eee9ff;--ink:#4e307c;--accent:#9b65dc;--graphic:#bdb0e3}
.ok261-site-chrome{height:35px;display:flex;justify-content:space-between;align-items:center;background:#fcfcff;border-bottom:1px solid #e7e8ef;padding:0 15px;color:#9ca0b1;font:700 10px Inter,Arial}
.ok261-chrome-dots{display:flex;gap:5px}
.ok261-chrome-dots i{background:#edb0ab;width:7px;height:7px;border-radius:50%}.ok261-chrome-dots i:nth-child(2){background:#e6c68d}.ok261-chrome-dots i:nth-child(3){background:#91cbb0}
.ok261-site-chrome span{font-size:16px;color:#6b5ce2}
.ok261-site-page{flex:1;background:var(--bg);display:flex;flex-direction:column;color:var(--ink);min-width:0}
.ok261-preview-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:72px;padding:14px 29px;font:700 10px Inter,Arial;color:var(--ink)}
.ok261-preview-nav b{font:900 clamp(17px,1.6vw,25px) Inter,Arial;letter-spacing:-1.5px}.ok261-preview-nav div{display:flex;gap:19px;font-size:9px;letter-spacing:.08em}.ok261-preview-nav i{display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:19px}
.ok261-preview-content{display:grid;grid-template-columns:1fr 1fr;min-height:300px;flex:1;overflow:hidden}
.ok261-preview-copy{z-index:2;position:relative;padding:47px 5px 24px 32px;display:flex;flex-direction:column;align-items:flex-start}
.ok261-preview-copy>span:first-child{font:700 10px Inter,Arial;color:var(--accent);letter-spacing:.09em}
.ok261-preview-copy strong{font:900 clamp(35px,4.3vw,69px)/.95 Inter,Arial;letter-spacing:-3px;margin:19px 0 13px;overflow-wrap:anywhere}
.ok261-preview-copy p{font-size:13px;color:var(--ink);opacity:.73;margin:0 0 22px}
.ok261-preview-cta{font:800 10px Inter,Arial;color:#fff;background:var(--ink);padding:12px 16px;border-radius:4px;margin-top:auto}
.ok261-preview-art{position:relative;overflow:hidden}
.ok261-fig-main{position:absolute;bottom:-28%;right:15%;width:75%;height:116%;background:linear-gradient(140deg,var(--graphic),var(--accent));border-radius:48% 48% 0 0;transform:rotate(-16deg)}
.ok261-fig-ring{position:absolute;left:-20%;bottom:4%;width:68%;height:69%;border:42px solid #ecc5a4;border-bottom:0;border-radius:160px 160px 0 0;transform:rotate(20deg)}
.ok261-fig-ball{position:absolute;right:3%;top:5%;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff9ec,var(--graphic) 85%);box-shadow:9px 13px 24px #0002}
.ok261-preview-bottom{padding:16px 28px;border-top:1px solid #ffffff70;display:flex;justify-content:space-between;font:700 9px Inter,Arial;letter-spacing:.05em;opacity:.7}
.ok261-site-browser.ok261-device-mobile{max-width:280px;min-height:440px;flex:0 0 auto;border-radius:25px;border:7px solid #28253d;box-shadow:0 22px 50px #27254435;transition:max-width .45s}
.ok261-device-mobile .ok261-site-chrome{height:20px;border:0;background:#28253d;color:transparent}.ok261-device-mobile .ok261-chrome-dots{display:none}.ok261-device-mobile .ok261-site-chrome span{display:none}
.ok261-device-mobile .ok261-preview-nav{padding:15px 13px;min-height:58px}.ok261-device-mobile .ok261-preview-nav b{font-size:15px}.ok261-device-mobile .ok261-preview-nav div{display:none}
.ok261-device-mobile .ok261-preview-content{display:flex;flex-direction:column;min-height:0}
.ok261-device-mobile .ok261-preview-copy{padding:22px 19px 5px}.ok261-device-mobile .ok261-preview-copy>span:first-child{font-size:7px}.ok261-device-mobile .ok261-preview-copy strong{font-size:35px;margin:10px 0 8px;letter-spacing:-1px}.ok261-device-mobile .ok261-preview-copy p{font-size:11px;margin-bottom:9px}.ok261-device-mobile .ok261-preview-cta{padding:8px 10px;font-size:8px}
.ok261-device-mobile .ok261-preview-art{min-height:148px;flex:1}.ok261-device-mobile .ok261-fig-main{height:180%;bottom:-110%}.ok261-device-mobile .ok261-preview-bottom{font-size:6px;padding:9px 14px}
.ok261-showroom-aside{min-width:0;direction:rtl;border:1px solid #e8e8f0;background:#fff;border-radius:23px;padding:32px 25px;display:flex;flex-direction:column}
.ok261-showroom-aside h3{font-size:33px;line-height:1.3;color:#252543;margin:17px 0 8px}
.ok261-showroom-aside>p{font-size:14px;line-height:1.95;color:#7a7a8d}
.ok261-showroom-divider{height:1px;background:#e9e8f1;margin:21px 0}
.ok261-showroom-small-label{font-size:12px;color:#79798d;font-weight:800;margin-bottom:10px}
.ok261-site-switcher{display:grid;gap:6px;margin-bottom:22px;max-height:280px;overflow-y:auto}
.ok261-site-switcher button{border:1px solid transparent;border-radius:10px;background:#fff;display:flex;gap:11px;align-items:center;min-height:42px;padding:6px 9px;cursor:pointer;text-align:right;font-weight:700;color:#4b4b65;font-size:13px}
.ok261-site-switcher button.selected{border-color:#dfdbfa;background:#f4f2ff;color:#5a4fcf}
.ok261-site-switcher button b{margin-right:auto;color:#918bae}
.ok261-swatch{display:block;width:25px;height:25px;border-radius:6px;background:#c1b8f8;flex:0 0 25px}
.ok261-swatch-w2{background:#c4cda0}.ok261-swatch-w3{background:#a5d8db}.ok261-swatch-w4{background:#ecc2d0}.ok261-swatch-w5{background:#e1c9b0}.ok261-swatch-w6{background:#c4afe5}
.ok261-showroom-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ok261-showroom-actions .btn{font-size:13px;min-height:48px;padding:11px 15px}
.ok261-showroom-actions>button:not(.btn){background:transparent;border:0;padding:10px;color:#5a4cd2;font-weight:800;cursor:pointer;font-size:12px}
/* Website package cards / dynamic admin configuration */
.ok261-site-packages{padding:112px 0 100px}
.ok261-web-package-switch{margin-bottom:24px}
.ok261-web-plans{gap:18px}
.ok261-web-plans>.plan-card{border-radius:19px;padding:29px 28px;min-height:0;box-shadow:0 9px 35px #24244108;transition:transform .25s,box-shadow .25s}
.ok261-web-plans>.plan-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px #24244115}
.ok261-web-plan-upper{display:flex;justify-content:space-between;color:#8c879e;font:800 10px Inter,Arial;letter-spacing:.08em}
.ok261-web-plan-upper span:last-child{color:#6554dd;font-size:24px}
.ok261-page-number{display:flex;align-items:baseline;gap:9px;color:#30294f;margin:27px 0 8px;font:900 clamp(57px,6vw,91px)/1 Inter,Arial;letter-spacing:-5px}
.ok261-page-number small{font:700 13px 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;color:#66677a}
.ok261-web-plans h3{font-size:24px;margin:5px 0 7px}
.ok261-web-plans .plan-card>p{min-height:50px;font-size:14px;line-height:1.9;color:#787789}
.ok261-web-plans .plan-price{margin:4px 0 16px;font-size:24px}
.ok261-web-plan-line{height:1px;background:#ecebf4}
.ok261-web-plans .plan-features{min-height:0;gap:12px;flex:1;padding:21px 0 25px}
.ok261-web-plans .plan-features span{font-size:13px}
.ok261-web-plans .btn{min-height:48px;font-size:13px;margin-top:auto}
.ok261-packages-note{font-size:12px;line-height:1.9;color:#8b889e;margin-top:20px}
/* Distinct final website journey */
.ok261-web-journey{background:#f3f1ff;padding:105px 0}
.ok261-journey-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ok261-journey-grid article{min-width:0;background:#fff;border-radius:17px;border:1px solid #e4e0f8;padding:26px 22px 32px;min-height:246px}
.ok261-journey-grid article>span{font:800 11px Inter,Arial;color:#6354dc;letter-spacing:.08em}
.ok261-step-line{height:1px;background:#e7e4f5;margin:27px 0 32px;position:relative}.ok261-step-line:before{content:'';width:8px;height:8px;border-radius:50%;background:#715de2;position:absolute;top:-4px;right:0}
.ok261-journey-grid h3{font-size:20px;margin:0 0 10px;color:#26253f}
.ok261-journey-grid p{font-size:13px;color:#7b788e;line-height:2;margin:0}
.ok261-journey-cta{margin-top:35px;display:flex;justify-content:space-between;gap:22px;align-items:center}
.ok261-journey-cta p{color:#77758c;font-size:13px;max-width:500px;line-height:1.9;margin:0}
.ok261-web-end{background:#26243f;margin-top:80px}
/* Motion only enhances visuals. Never gates reading or buttons. */
@media (prefers-reduced-motion:no-preference){
 .ok261-home-web-art,.ok261-home-design-art{animation:ok261-art-enter .9s cubic-bezier(.2,.8,.2,1) both}
 .ok261-portfolio-art .ok261-art-shape{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
 .ok261-portfolio-tile:hover .ok261-art-shape{transform:scale(1.075) rotate(3deg)}
 .ok261-site-browser .ok261-preview-art{transition:transform .45s}
 .ok261-site-browser:hover .ok261-preview-art{transform:scale(1.035)}
 @supports (animation-timeline:view()){
 .ok261-showcase-section .ok261-editorial-intro,.ok261-website-showroom .ok261-editorial-intro,.ok261-design-process .ok261-process-grid,.ok261-web-journey .ok261-journey-grid{animation:ok261-soft-in both;animation-timeline:view();animation-range:entry 0% entry 55%}
 }
}
@keyframes ok261-art-enter{from{opacity:.2;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ok261-soft-in{from{opacity:.5;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){
 .ok261-home-card{min-height:625px;padding:31px 28px 0}
 .ok261-home-sheet{height:255px}.ok261-home-sheet-front b{font-size:46px}
 .ok261-showroom-stage{grid-template-columns:minmax(0,1.3fr) minmax(245px,.7fr);gap:15px}
 .ok261-preview-copy{padding:37px 5px 20px 21px}
 .ok261-preview-copy strong{font-size:clamp(31px,4vw,50px)}
 .ok261-preview-nav{padding:14px 20px}.ok261-showroom-aside{padding:22px 19px}
 .ok261-process-grid{gap:32px}
}
@media(max-width:790px){
 .ok261-editorial-intro{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
 .ok261-editorial-intro h2{font-size:clamp(36px,7vw,58px);letter-spacing:-1px}
 .ok261-intro-side{padding:0;max-width:700px}
 .ok261-home-service-grid{grid-template-columns:1fr}
 .ok261-home-card{min-height:580px}
 .ok261-home-sheet{width:47%;height:265px}.ok261-home-sheet-front b{font-size:52px}
 .ok261-home-browser{height:250px}.ok261-home-phone{height:195px}
 .ok261-portfolio-tile:nth-child(n){grid-column:span 6}
 .ok261-portfolio-art,.ok261-portfolio-tile:nth-child(3n) .ok261-portfolio-art{height:290px}
 .ok261-process-grid{grid-template-columns:1fr;gap:27px}.ok261-process-copy{max-width:720px}.ok261-process-facts{flex-direction:row;flex-wrap:wrap}
 .ok261-question-grid{grid-template-columns:1fr;gap:24px}
 .ok261-showroom-stage{grid-template-columns:1fr}
 .ok261-main-site{min-height:520px}
 .ok261-showroom-aside{padding:22px}.ok261-site-switcher{display:grid;grid-template-columns:repeat(3,1fr);max-height:none}
 .ok261-showroom-actions{margin-top:10px}
 .ok261-journey-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
 .ok261-home-services{padding-block:65px}
 .ok261-home-services .section-top{margin-bottom:26px}
 .ok261-home-card{border-radius:21px;min-height:525px;padding:26px 23px 0}
 .ok261-home-card h3{font-size:34px;margin:14px 0 12px}
 .ok261-home-card p{font-size:13px;line-height:1.85}
 .ok261-home-card .btn{font-size:12px;padding:11px 14px;min-height:45px}
 .ok261-home-design-art,.ok261-home-web-art{min-height:234px;margin-top:0}
 .ok261-home-sheet{width:60%;height:220px;padding:12px 13px;bottom:-29px}
 .ok261-home-sheet-front{right:0;bottom:-8px}.ok261-home-sheet-back{left:1%}
 .ok261-home-sheet b,.ok261-home-sheet-front b{font-size:39px;letter-spacing:-2px}
 .ok261-home-asterisk{font-size:170px}
 .ok261-home-browser{height:200px;width:88%;left:0;bottom:-9px}
 .ok261-home-browser-top{height:23px}.ok261-home-browser-nav{padding:10px 12px 4px}.ok261-home-browser-nav b{font-size:15px}.ok261-home-browser-nav small{font-size:6px}
 .ok261-home-browser-body{height:148px}.ok261-home-browser-body>div:first-child{padding:17px 0 8px 10px}.ok261-home-browser-body small{font-size:6px}.ok261-home-browser-body strong{font-size:24px;letter-spacing:-1px}
 .ok261-home-phone{height:150px;width:26%;right:-4px;border-width:4px;border-radius:16px;padding:17px 6px 7px}.ok261-home-phone i{height:65px}.ok261-home-phone b{font-size:8px}
 .ok261-showcase-section,.ok261-website-showroom{padding:65px 0}
 .ok261-portfolio-toolbar{gap:13px;flex-direction:column;align-items:stretch}
 .ok261-filter-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.ok261-filter-group button{white-space:nowrap;font-size:12px;padding:9px 13px}
 .ok261-search{width:100%}.ok261-search input{width:100%}
 .ok261-portfolio-grid{gap:15px}
 .ok261-portfolio-tile:nth-child(n){grid-column:span 12}
 .ok261-portfolio-media{padding:9px 9px 0}
 .ok261-portfolio-art,.ok261-portfolio-tile:nth-child(3n) .ok261-portfolio-art{height:275px;padding:14px 15px}
 .ok261-art-title{font-size:46px}.art-d2 .ok261-art-title,.art-d4 .ok261-art-title,.art-d5 .ok261-art-title{font-size:56px}
 .ok261-art-top{font-size:8px}.ok261-art-footer{font-size:7px}.ok261-portfolio-meta{padding:13px 14px 16px}
 .ok261-portfolio-meta h3{font-size:18px}.ok261-portfolio-meta button{font-size:12px}
 .ok261-design-process,.ok261-design-pricing,.ok261-questions,.ok261-site-packages,.ok261-web-journey{padding-block:65px}
 .ok261-process-copy h2{font-size:39px}.ok261-process-copy p{font-size:14px}
 .ok261-slot-demo{padding:13px 10px;border-radius:13px}
 .ok261-slot-top{flex-direction:column;align-items:stretch}.ok261-slot-top>b{font-size:13px}
 .ok261-slot-top>div{justify-content:stretch}.ok261-slot-top button{flex:1}
 .ok261-slot-board{gap:5px}.ok261-slot-board>div{padding:8px 4px;min-height:160px}
 .ok261-slot-board>div>span{font-size:8px;margin-bottom:12px;white-space:normal;min-height:23px}
 .ok261-slot-board>div>div{font-size:10px;padding:7px 5px}.ok261-slot-board small{font-size:8px}.ok261-slot-demo>p{font-size:10px}
 .ok261-site-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.ok261-site-filter button{white-space:nowrap;font-size:12px;padding:9px 13px}
 .ok261-main-site{min-height:438px;padding:12px;border-radius:17px}
 .ok261-site-browser{min-height:344px}.ok261-preview-nav{padding:8px 10px;min-height:52px}.ok261-preview-nav b{font-size:14px}.ok261-preview-nav div{gap:7px;font-size:5px}.ok261-preview-nav i{width:22px;height:22px;font-size:15px}
 .ok261-site-chrome{height:24px;padding:0 8px}.ok261-site-chrome small{font-size:8px}
 .ok261-preview-content{min-height:245px}.ok261-preview-copy{padding:22px 0 12px 9px}.ok261-preview-copy>span:first-child{font-size:6px}.ok261-preview-copy strong{font-size:clamp(21px,6vw,34px);letter-spacing:-1.1px;margin:12px 0}.ok261-preview-copy p{font-size:10px}.ok261-preview-cta{font-size:7px;padding:7px 8px}
 .ok261-fig-ring{border-width:20px}.ok261-preview-bottom{padding:11px 12px;font-size:6px}
 .ok261-site-browser.ok261-device-mobile{max-width:215px;min-height:370px}
 .ok261-site-switcher{grid-template-columns:repeat(2,1fr)}.ok261-site-switcher button{font-size:11px;padding:4px 6px}.ok261-showroom-aside h3{font-size:27px}
 .ok261-web-plans{grid-template-columns:1fr}
 .ok261-web-plans>.plan-card{padding:24px}.ok261-page-number{font-size:67px}
 .ok261-journey-grid{grid-template-columns:1fr}.ok261-journey-grid article{min-height:0;padding:20px 21px}.ok261-step-line{margin:14px 0 19px}
 .ok261-journey-cta{flex-direction:column;align-items:stretch}.ok261-journey-cta .btn{align-self:flex-start}
 .ok261-end-banner{padding:32px 24px;flex-direction:column;align-items:flex-start;gap:21px;border-radius:19px;margin-top:50px;margin-bottom:70px}
 .ok261-end-banner h2{font-size:38px}.ok261-questions .accordion summary{font-size:14px}
}
@media(max-width:340px){.ok261-home-card h3{font-size:31px}.ok261-art-title{font-size:39px}.ok261-showroom-stage{gap:12px}.ok261-site-chrome small{font-size:7px}.ok261-preview-copy strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.ok261-public-page *,.ok261-home-services *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the comparison table scrollable internally without widening the document on RTL mobile. */
.ok261-design-page{overflow-x:clip}

/* OKHBOT 2.6.2 / Modular product-marketing refresh inspired by premium SaaS layouts. */
.ok262-mosaic-section{padding:92px 0 28px;background:#fff}
.ok262-mosaic-head{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:end;margin-bottom:34px}
.ok262-mosaic-head h2{font-size:clamp(38px,4.8vw,72px);line-height:1.18;letter-spacing:-2px;margin:14px 0 0;color:#21213e}
.ok262-mosaic-head h2 em{font-style:normal;color:#6455e6}
.ok262-mosaic-head p{margin:0;max-width:520px;color:#6f7186;line-height:2;font-size:15px}
.ok262-mosaic-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:20px}
.ok262-card{position:relative;overflow:hidden;border-radius:34px;padding:34px 34px 30px;min-width:0;background:linear-gradient(180deg,#f7f9ff,#edf2ff);border:1px solid #e6ebfb;box-shadow:0 20px 60px rgba(26,37,90,.07)}
.ok262-card h3{font-size:clamp(28px,3vw,44px);line-height:1.23;letter-spacing:-1.2px;color:#191a33;margin:18px 0 12px;position:relative;z-index:2}
.ok262-card p{font-size:15px;line-height:1.95;color:#55586f;max-width:460px;position:relative;z-index:2;margin:0}
.ok262-card-tag{display:inline-block;font:800 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;color:#7381bc}
.ok262-card-arrow{position:absolute;top:24px;left:24px;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(96,118,227,.55);display:grid;place-items:center;color:#335ff1;font:700 28px/1 Inter,Arial;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);z-index:3}
.ok262-card-primary{grid-column:span 6;min-height:410px;background:linear-gradient(135deg,#0560ea 0%,#9db6ec 100%);border-color:#b5cdfd;color:#fff}
.ok262-card-primary h3,.ok262-card-primary p,.ok262-card-primary .ok262-card-tag{color:#fff}
.ok262-card-primary .ok262-card-tag{opacity:.88}
.ok262-card-secondary{grid-column:span 6;min-height:300px;background:linear-gradient(180deg,#eaf5ff,#d8ebff)}
.ok262-card-wide{grid-column:span 8;min-height:325px;background:linear-gradient(180deg,#175bde,#4539e9);border-color:#8296ff;color:#fff}
.ok262-card-wide h3,.ok262-card-wide p,.ok262-card-wide .ok262-card-tag{color:#fff}
.ok262-card-accent{grid-column:span 4;min-height:325px;background:linear-gradient(180deg,#f5f7ff,#edf0fb)}
.ok262-card-wide-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px;align-items:end;position:relative;z-index:2;height:100%}
.ok262-kpi-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.ok262-kpi-row span{display:inline-flex;gap:8px;align-items:center;border-radius:999px;background:rgba(255,255,255,.16);padding:10px 14px;font-size:12px;color:inherit}
.ok262-kpi-row b{font:900 16px/1 Inter,Arial}
.ok262-design-stack{position:absolute;left:28px;right:28px;bottom:22px;height:220px;pointer-events:none}
.ok262-poster{position:absolute;width:42%;height:205px;border-radius:20px;box-shadow:0 26px 44px rgba(18,24,63,.23);padding:18px 18px 14px;display:flex;flex-direction:column;justify-content:space-between}
.ok262-poster small{font:800 10px/1.5 Inter,Arial;letter-spacing:.12em}
.ok262-poster b{font:900 48px/.88 Inter,Arial;letter-spacing:-3px}
.ok262-poster-front{right:7%;bottom:0;background:linear-gradient(180deg,#4e3ced,#7b67ff);transform:rotate(-6deg)}
.ok262-poster-back{left:5%;top:15px;background:#f8ddb1;color:#312945;transform:rotate(8deg)}
.ok262-poster-back i{position:absolute;inset:18px;border:22px solid rgba(94,78,222,.27);border-radius:50%}
.ok262-poster-back b{font-size:42px;position:relative;z-index:2}
.ok262-review-visual{position:absolute;left:28px;right:28px;bottom:26px;display:grid;gap:12px}
.ok262-bubble{background:#fff;border-radius:18px;padding:14px 16px;color:#2e3150;font-weight:700;box-shadow:0 18px 30px rgba(56,71,119,.08);max-width:360px}
.ok262-bubble.ok{margin-right:auto;background:#eef8f5;color:#22795f}
.ok262-progress{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 18px 30px rgba(56,71,119,.08)}
.ok262-progress span{display:block;flex:1;height:10px;border-radius:999px;background:linear-gradient(90deg,#6656e7 0 72%,#dde6ff 72% 100%)}
.ok262-progress b{font-size:13px;color:#4b4f73}
.ok262-ui-preview{border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:14px;backdrop-filter:blur(2px)}
.ok262-ui-top{display:flex;align-items:center;gap:8px;color:#fff;opacity:.85;font:700 10px Inter,Arial;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:11px}
.ok262-ui-top i{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.9}.ok262-ui-top small{margin-inline-start:8px}
.ok262-ui-list{display:grid;gap:12px;padding-top:16px}.ok262-ui-list div{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.09);padding:14px;border-radius:16px;gap:12px}
.ok262-ui-list b{font-size:15px}.ok262-ui-list span{font-size:12px;opacity:.84}
.ok262-orbit{position:absolute;inset:auto 28px 28px auto;width:180px;height:180px}
.ok262-orbit i{position:absolute;border-radius:50%;border:1.8px solid rgba(89,97,156,.25)}
.ok262-orbit i:first-child{inset:0}.ok262-orbit i:nth-child(2){inset:25px}.ok262-orbit i:nth-child(3){inset:50px;background:linear-gradient(135deg,#6f5eed,#c9d0ff)}
.ok262-web-primary{background:linear-gradient(180deg,#dcebfa,#c7def8);color:#151933;border-color:#d5e4fd}
.ok262-web-primary h3,.ok262-web-primary p{color:#151933}.ok262-web-primary .ok262-card-tag{color:#6675ba}
.ok262-web-device-stage{position:absolute;left:26px;right:26px;bottom:22px;height:235px}
.ok262-web-browser{position:absolute;right:0;left:0;bottom:0;height:205px;background:#fff;border-radius:22px;box-shadow:0 24px 55px rgba(30,49,88,.16);overflow:hidden;border:1px solid #e4eaf7}
.ok262-web-browser-top{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#f8faff;border-bottom:1px solid #edf0f7;color:#7b83a1;font:700 10px Inter,Arial}
.ok262-web-browser-top i{width:10px;height:10px;border-radius:50%;background:#b7bfdc}.ok262-web-browser-top small{margin-inline-start:6px}
.ok262-web-browser-body{display:grid;grid-template-columns:1fr 1fr;height:calc(100% - 34px)}
.ok262-web-browser-body>div:first-child{padding:26px 10px 18px 24px;display:flex;flex-direction:column;align-items:flex-start;color:#1f2241}
.ok262-web-browser-body small{font:800 9px Inter,Arial;color:#7982a4;letter-spacing:.1em}.ok262-web-browser-body b{font:900 43px/.92 Inter,Arial;letter-spacing:-2px;margin:14px 0 13px}
.ok262-web-browser-body span{font:800 10px Inter,Arial;color:#fff;background:#232844;padding:10px 12px;border-radius:8px}
.ok262-web-arch{position:relative;overflow:hidden}.ok262-web-arch:before{content:'';position:absolute;inset:20px 16px -90px 0;background:linear-gradient(135deg,#cebff7,#8172eb);border-radius:160px 160px 0 0;transform:rotate(8deg)}.ok262-web-arch:after{content:'';position:absolute;width:135px;height:165px;border:24px solid #efbf9b;border-bottom:0;border-radius:120px 120px 0 0;left:-5px;bottom:18px;transform:rotate(-20deg)}
.ok262-web-mobile{position:absolute;left:18px;bottom:-8px;width:120px;height:200px;background:#faf8ff;border:5px solid #25253d;border-radius:24px;box-shadow:0 22px 38px rgba(24,30,61,.18);padding:22px 10px 12px;transform:rotate(8deg);direction:ltr;display:flex;flex-direction:column;color:#25243e}
.ok262-web-mobile:before{content:'';position:absolute;top:-1px;left:35px;right:35px;height:9px;background:#25253d;border-radius:0 0 10px 10px}
.ok262-web-mobile small{font:900 11px Inter,Arial}.ok262-web-mobile i{display:block;flex:1;margin:12px 0 10px;background:linear-gradient(135deg,#b6a6ef 0 60%,#f3dcc7 60%);border-radius:50% 50% 0 0}.ok262-web-mobile b{font:900 13px/1 Inter,Arial}
.ok262-language-pills{position:absolute;right:28px;left:28px;bottom:30px;display:flex;gap:12px;flex-wrap:wrap}
.ok262-language-pills span{display:inline-grid;place-items:center;min-width:72px;height:56px;border-radius:18px;background:#fff;color:#3d4673;font:900 20px/1 Inter,Arial;box-shadow:0 18px 35px rgba(33,47,102,.08)}
.ok262-package-preview{display:grid;gap:12px}
.ok262-package-preview div{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);padding:14px 16px;border-radius:16px;color:#fff}
.ok262-package-preview b{font-size:15px}.ok262-package-preview span{font-size:12px;opacity:.82}
.ok262-flow-steps{position:absolute;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;gap:10px}
.ok262-flow-steps i{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff;color:#5f57d8;font:900 18px/1 Inter,Arial;box-shadow:0 18px 35px rgba(44,54,98,.08);font-style:normal}
.ok262-home-design-art,.ok262-home-web-art{position:relative}
.ok262-home-floating-card{position:absolute;border-radius:28px;box-shadow:0 28px 54px rgba(26,35,73,.18);overflow:hidden}
.ok262-home-card-one{right:12%;bottom:10px;width:44%;height:250px;padding:18px 20px;background:linear-gradient(180deg,#2f61f0,#91a9eb);color:#fff;transform:rotate(-8deg);display:flex;flex-direction:column;justify-content:space-between}
.ok262-home-card-one span,.ok262-home-card-two span{font:800 10px/1.4 Inter,Arial;letter-spacing:.12em}.ok262-home-card-one b{font:900 53px/.88 Inter,Arial;letter-spacing:-3px}
.ok262-home-card-one small{font:800 10px Inter,Arial;letter-spacing:.08em;opacity:.85}
.ok262-home-card-two{left:8%;bottom:24px;width:44%;height:236px;padding:18px 20px;background:#eff4ff;color:#283255;transform:rotate(8deg)}
.ok262-home-card-two strong{position:relative;z-index:2;display:block;font:800 27px/1.2 Inter,Arial;letter-spacing:-1px;margin-top:100px;max-width:180px}
.ok262-home-loop{position:absolute;inset:26px auto auto 26px;width:150px;height:150px;border-radius:50%;border:26px solid rgba(84,100,222,.28)}
.ok262-home-loop:after{content:'';position:absolute;width:50px;height:50px;background:rgba(84,100,222,.28);left:-16px;bottom:24px;border-radius:14px;transform:rotate(-18deg)}
.ok262-home-side-panel{position:absolute;left:0;bottom:45px;background:#fff;padding:12px 15px;border-radius:15px;display:flex;gap:12px;align-items:center;box-shadow:0 20px 38px rgba(31,36,72,.12);z-index:3}
.ok262-home-side-panel i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#6556e8;color:#fff;font-style:normal}.ok262-home-side-panel b{display:block;font-size:13px;color:#25243f}.ok262-home-side-panel small{color:#75778a}
.ok262-home-corner-arrow{position:absolute;top:10px;left:18px;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(92,105,228,.45);display:grid;place-items:center;color:#295af0;background:rgba(255,255,255,.56);font:700 30px/1 Inter,Arial}
.ok262-home-browser{position:absolute;right:3%;bottom:14px;left:2%;height:245px;background:#fff;border-radius:20px;box-shadow:0 28px 60px rgba(24,39,79,.18);overflow:hidden;border:1px solid #e4eaf8;transform:rotate(-4deg)}
.ok262-home-browser-top{height:32px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#f7f9fe;border-bottom:1px solid #eef1f9;color:#7a81a3;font:700 10px Inter,Arial}.ok262-home-browser-top span{font-size:12px}.ok262-home-browser-top small{margin-inline-start:8px}.ok262-home-browser-top b{margin-inline-start:auto;color:#3967ef}
.ok262-home-browser-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;color:#2a2745;font:700 9px Inter,Arial}.ok262-home-browser-nav b{font:900 22px/1 Inter,Arial;letter-spacing:-1px}.ok262-home-browser-nav b span{color:#5e55df}
.ok262-home-browser-body{display:grid;grid-template-columns:1fr 1fr;height:calc(100% - 56px)}
.ok262-home-browser-body>div:first-child{padding:25px 10px 18px 20px;color:#2a2942;display:flex;flex-direction:column;align-items:flex-start}.ok262-home-browser-body small{font:800 8px Inter,Arial;color:#8b91ab}.ok262-home-browser-body strong{font:900 34px/.95 Inter,Arial;letter-spacing:-2px;margin:10px 0 12px}.ok262-home-browser-body strong em{font-style:normal;color:#6457e7}.ok262-home-browser-body span{font:800 10px Inter,Arial;background:#24263f;color:#fff;padding:10px 12px;border-radius:8px}
.ok262-home-shape{position:relative;overflow:hidden}.ok262-home-shape i{position:absolute;inset:15px 18px -70px 0;background:linear-gradient(135deg,#d3c7f7,#8b79ec);border-radius:140px 140px 0 0;transform:rotate(8deg)}.ok262-home-shape u{position:absolute;width:120px;height:150px;border:24px solid #efbf98;border-bottom:0;border-radius:120px 120px 0 0;left:8px;bottom:18px;transform:rotate(-18deg)}
.ok262-home-mobile{position:absolute;left:8px;bottom:0;width:110px;height:186px;background:#faf8ff;border:5px solid #2a2941;border-radius:23px;box-shadow:0 22px 40px rgba(25,30,61,.2);transform:rotate(8deg);padding:22px 9px 10px;display:flex;flex-direction:column;direction:ltr;color:#25243f}.ok262-home-mobile:before{content:'';position:absolute;top:-1px;left:30px;right:30px;height:9px;background:#2a2941;border-radius:0 0 10px 10px}.ok262-home-mobile small{font:900 11px Inter,Arial}.ok262-home-mobile i{display:block;flex:1;background:linear-gradient(135deg,#b7a7ef 0 58%,#f4dbc5 58%);border-radius:50% 50% 0 0;margin:10px 0 9px}.ok262-home-mobile b{font:900 12px/1 Inter,Arial}
.ok262-home-mini-badge{position:absolute;left:0;bottom:212px;background:#fff;padding:11px 14px;border-radius:12px;box-shadow:0 18px 38px rgba(33,39,80,.12);font:800 11px Inter,Arial;color:#53597a;z-index:3}
@media(max-width:1100px){.ok262-mosaic-head{grid-template-columns:1fr}.ok262-card-primary,.ok262-card-secondary,.ok262-card-wide,.ok262-card-accent{grid-column:span 6}.ok262-card-wide-grid{grid-template-columns:1fr}.ok262-design-stack{height:180px}.ok262-web-device-stage{height:215px}}
@media(max-width:790px){.ok262-mosaic-grid{grid-template-columns:1fr}.ok262-card-primary,.ok262-card-secondary,.ok262-card-wide,.ok262-card-accent{grid-column:span 1}.ok262-card{padding:26px 22px 22px;border-radius:26px}.ok262-card-arrow{top:18px;left:18px;width:46px;height:46px;font-size:25px}.ok262-card h3{font-size:30px}.ok262-card-primary{min-height:380px}.ok262-card-secondary{min-height:260px}.ok262-card-wide,.ok262-card-accent{min-height:290px}.ok262-design-stack{left:18px;right:18px;height:160px}.ok262-poster{height:160px;border-radius:16px}.ok262-poster b{font-size:36px}.ok262-web-device-stage{left:18px;right:18px;height:190px}.ok262-web-browser-body b{font-size:34px}.ok262-web-mobile{width:94px;height:166px}.ok262-package-preview{margin-top:8px}.ok262-flow-steps i{width:52px;height:52px}.ok262-language-pills span{min-width:58px;height:48px;font-size:17px}}
@media(max-width:520px){.ok262-mosaic-section{padding:64px 0 18px}.ok262-mosaic-head h2{letter-spacing:-1px}.ok262-card p,.ok262-mosaic-head p{font-size:14px;line-height:1.8}.ok262-web-browser-body b{font-size:28px}.ok262-web-device-stage{height:180px}.ok262-home-card-one{height:220px}.ok262-home-card-two{height:210px}.ok262-home-card-one b{font-size:42px}.ok262-home-card-two strong{font-size:21px;margin-top:86px}.ok262-home-mini-badge{display:none}.ok262-home-side-panel{transform:scale(.92);transform-origin:left bottom}}