/* اخبوط V2.6.26 | Shared public product-hero system.
   Homepage is source of truth. Exactly the same grid, typography, canvas,
   header alignment, scroll response and buttons on Design and Websites.
   No layout or workflow changes below the hero. */
.ok22-public-site .ok22-public-frame .ok26-service-hero {
  --ok26-scroll:0;
  isolation:isolate;
  position:relative;
  background:transparent;
  border:0;
  min-height:var(--ok25-hero-height,610px);
  overflow:hidden;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-grid{
  min-height:var(--ok25-hero-height,610px);
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:40px;
  align-items:center;
  padding-block:var(--ok25-hero-space-top,62px) var(--ok25-hero-space-bottom,70px);
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy{
  transform:translate3d(0,calc(var(--ok26-scroll)*-45px),0);
  opacity:calc(1 - var(--ok26-scroll)*.34);
  transition:opacity .08s linear;
  min-width:0;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy h1{
  font-size:var(--ok25-h1-size,clamp(40px,4.55vw,66px));
  font-weight:800;
  line-height:var(--ok25-line-title,1.26);
  letter-spacing:-.025em;
  margin:0 0 24px;
  min-height:2.5em;
  max-width:100%;
  color:#23213f;
}
.ok26-title-accent{display:block;color:#6656e9;font-size:.85em;line-height:1.52;white-space:normal;letter-spacing:-.025em}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy>p{
  max-width:570px;
  font-size:var(--ok25-lead-size,17px);
  line-height:1.9;
  margin:0 0 28px;
  color:#61617a;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons{
  gap:13px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .btn,
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .ok264-outline-link{
  min-height:52px;
  font-size:15px;
  border-radius:12px;
  padding:12px 24px;
  display:inline-flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .btn{
  background:#6656e9;color:#fff;border:1px solid #6656e9;
  box-shadow:0 10px 26px #6656e72c;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .ok264-outline-link{
  background:#fff;border:1px solid #dcd7fd;color:#272544;
  cursor:pointer;box-shadow:none;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-visual{
  min-height:440px;
  perspective:1400px;
  position:relative;
  direction:rtl;
  transform:translate3d(0,calc(var(--ok26-scroll)*-58px),0) scale(calc(1 - var(--ok26-scroll)*.085));
  transform-origin:center 70%;
  will-change:transform;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-main-device{
  inset:42px 4% 33px 6%;
  border:12px solid #ece9fc;
  border-radius:29px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 50px 80px #3935632c,0 8px 22px #403b8d1a;
  animation:ok264-platform-float 6s ease-in-out infinite;
}
.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-platform-chrome b{display:none}
.ok26-design-device{min-height:355px}
.ok26-design-object{
  position:absolute;
  z-index:3;
  bottom:3px;
  left:-1%;
  width:43%;
  max-width:260px;
  padding:6px;
  overflow:hidden;
  border:5px solid rgba(255,255,255,.82);
  border-radius:26px;
  background:#f0ecff;
  box-shadow:0 24px 40px rgba(44,39,124,.20);
  transform:rotate(8deg);
  animation:ok26-floating-card 6.5s ease-in-out infinite;
}
.ok26-design-object img{width:100%;display:block;height:auto;object-fit:contain;aspect-ratio:1.55}
.ok26-design-mini,.ok26-web-mini{
  position:absolute;
  z-index:4;
  top:12px;
  left:3%;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:16px;
  background:#fff;
  padding:12px 14px;
  box-shadow:0 20px 35px rgba(30,29,83,.13);
  animation:ok26-floating-card 6s ease-in-out -3s infinite;
}
.ok26-design-mini i,.ok26-web-mini i{
  display:grid;place-items:center;flex-shrink:0;
  width:36px;height:36px;border-radius:12px;
  background:#6656e9;color:#fff;font-style:normal;font-weight:900;
}
.ok26-design-mini strong,.ok26-web-mini strong{display:block;color:#22213b;font-size:13px;line-height:1.5}
.ok26-design-mini small,.ok26-web-mini small{display:block;color:#7c7b92;font-size:10px}
.ok26-web-screen{
  height:100%;min-height:355px;
  background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  direction:ltr;
}
.ok26-web-nav{
  display:flex;justify-content:space-between;align-items:center;
  color:#292442;padding:15px 20px 9px;
}
.ok26-web-nav strong{font:900 22px/1 Inter,Arial,sans-serif;letter-spacing:-1.1px}
.ok26-web-nav strong span{color:#6756e9}
.ok26-web-nav small{font:700 9px/1 Inter,Arial,sans-serif;letter-spacing:.07em;color:#9b99b4}
.ok26-web-feature{
  display:grid;grid-template-columns:1fr .95fr;gap:2px;flex:1;
  min-height:248px;overflow:hidden;
}
.ok26-web-feature>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px 0 24px 25px;z-index:2}
.ok26-web-feature small{font:800 8px Inter,Arial,sans-serif;color:#8886a6}
.ok26-web-feature strong{font:900 clamp(27px,3vw,43px)/1 Inter,Arial,sans-serif;letter-spacing:-2px;color:#27213e;margin:15px 0 17px}
.ok26-web-feature em{font-style:normal;color:#6b5ee9}
.ok26-web-feature span{font:800 9px Inter,Arial,sans-serif;color:#fff;background:#252445;padding:10px 15px;border-radius:7px}
.ok26-web-object{display:block;position:relative;overflow:hidden}
.ok26-web-object:before{content:"";position:absolute;width:96%;height:100%;top:3%;left:7%;border-radius:48% 48% 16% 18%;background:linear-gradient(135deg,#d2c7fc,#8d7eef);transform:rotate(-18deg);box-shadow:inset 14px 12px 24px rgba(255,255,255,.42)}
.ok26-web-object:after{content:"";position:absolute;width:57%;height:77%;bottom:-24%;left:-10%;border:29px solid #eabf9d;border-radius:100px;transform:rotate(25deg);box-shadow:10px 10px 16px rgba(94,50,98,.08)}
.ok26-web-object b{position:absolute;z-index:3;width:48px;height:48px;top:31%;right:15%;border-radius:50%;background:linear-gradient(135deg,#fff,#e4d9ff);box-shadow:5px 10px 22px #7160b755}
.ok26-web-categories{display:flex;gap:12px;padding:0 18px 14px}
.ok26-web-categories span{height:9px;flex:1;background:#eeeafb;border-radius:5px}
.ok26-web-phone{
  position:absolute;z-index:3;
  left:1%;bottom:7%;height:220px;width:124px;
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:7px solid #2c2a49;border-radius:25px;
  padding:25px 12px 13px;
  box-shadow:0 25px 45px #2c295655;
  transform:rotate(9deg);
  animation:ok26-phone-float 7s ease-in-out infinite;
  direction:ltr;
}
.ok26-phone-notch{position:absolute;top:-1px;left:35%;right:35%;height:8px;border-radius:0 0 8px 8px;background:#2c2a49}
.ok26-web-phone strong{font:900 12px Inter,Arial,sans-serif;color:#2c2a49}
.ok26-phone-shape{flex:1;margin-top:11px;width:100%;border-radius:60px 60px 4px 4px;background:linear-gradient(125deg,#ae9bf6 0 68%,#ecc3a4 68%)}
.ok26-web-phone b{color:#2c2a49;font:900 12px/1 Inter,Arial,sans-serif;margin-top:8px}
.ok26-web-mini{top:17px;left:0;right:auto}
.ok26-web-mini i{background:#2eb49e;font-size:19px}
@keyframes ok26-floating-card{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes ok26-phone-float{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@media(max-width:900px){
 .ok22-public-site .ok22-public-frame .ok26-service-hero{min-height:0}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-grid{grid-template-columns:1fr;min-height:0;gap:15px;padding-block:var(--ok25-hero-space-top,54px) var(--ok25-hero-space-bottom,62px)}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-visual{width:100%;max-width:700px;margin:auto;min-height:430px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy h1{min-height:2.5em}
}
@media(max-width:600px){
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-grid{padding-block:var(--ok25-hero-space-top,40px) var(--ok25-hero-space-bottom,46px);gap:6px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy h1{min-height:2.6em;font-size:var(--ok25-h1-size,36px);line-height:1.29;letter-spacing:-.018em;margin-bottom:14px}
 .ok26-title-accent{font-size:.82em;line-height:1.48}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-copy>p{font-size:14px;line-height:1.85;margin-bottom:23px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons{gap:9px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .btn,.ok22-public-site .ok22-public-frame .ok26-service-hero .ok264-hero-buttons .ok264-outline-link{min-height:48px;font-size:12px;padding:10px 13px;gap:7px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-hero-visual{min-height:330px;max-width:520px}
 .ok22-public-site .ok22-public-frame .ok26-service-hero .ok26-main-device{inset:31px 1% 27px 5%;border-width:7px;border-radius:19px}
 .ok26-design-device,.ok26-web-screen{min-height:270px}
 .ok26-design-object{width:38%;bottom:5px;left:0;border-width:3px;border-radius:17px}
 .ok26-design-mini,.ok26-web-mini{padding:7px;gap:6px;top:11px;border-radius:10px}
 .ok26-design-mini i,.ok26-web-mini i{width:25px;height:25px;font-size:13px;border-radius:7px}
 .ok26-design-mini strong,.ok26-web-mini strong{font-size:9px}
 .ok26-design-mini small,.ok26-web-mini small{font-size:7px}
 .ok26-web-nav{padding:9px 10px 5px}
 .ok26-web-nav strong{font-size:16px}.ok26-web-nav small{font-size:6px}
 .ok26-web-feature{min-height:180px}
 .ok26-web-feature>div{padding:10px 0 11px 13px}
 .ok26-web-feature strong{font-size:clamp(20px,6vw,30px);letter-spacing:-1px;margin:10px 0 12px}
 .ok26-web-feature small,.ok26-web-feature span{font-size:6px}
 .ok26-web-feature span{padding:8px 10px}
 .ok26-web-object:after{border-width:17px}
 .ok26-web-phone{left:0;bottom:8%;height:149px;width:85px;border-width:5px;border-radius:18px;padding:15px 7px 8px}
 .ok26-web-phone strong,.ok26-web-phone b{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .ok22-public-site .ok26-service-hero .ok26-hero-copy,
 .ok22-public-site .ok26-service-hero .ok26-hero-visual{transform:none!important;opacity:1!important}
 .ok22-public-site .ok26-main-device,.ok26-design-object,.ok26-design-mini,.ok26-web-mini,.ok26-web-phone{animation:none!important}
}