@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-Medium.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/IBMPlexSansArabic-SemiBold.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F3F5F4}
a{color:#2742A8}a:hover{color:#1E2329}
img,svg{max-width:100%}
:focus-visible{outline:3px solid #3457D5;outline-offset:2px;border-radius:4px}
section[id]{scroll-margin-top:12px}
@media (max-width:720px){
  h1{font-size:34px !important}
  h2{font-size:26px !important}
  section{padding-top:56px !important;padding-bottom:56px !important}
  header nav{order:3;flex-basis:100% !important;overflow-x:auto;flex-wrap:nowrap !important}
  header nav a{white-space:nowrap}
  #pricing > div > div:first-child,#pricing > div > div:last-child{padding-left:22px !important;padding-right:22px !important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* sticky header */
header{position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(30,35,41,.04)}
/* floating WhatsApp */
.wa-float{position:fixed;bottom:20px;inset-inline-end:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 20px 0 16px;border-radius:999px;background:#1E7A46;color:#fff !important;text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(30,35,41,.25);transition:transform .2s ease}
.wa-float:hover{transform:translateY(-2px);color:#fff !important}
.wa-float svg{flex:none}
/* hero letter animation */
.fx-field{animation:fx-field 1.1s ease both}
.fx-field.d1{animation-delay:.5s}.fx-field.d2{animation-delay:1s}.fx-field.d3{animation-delay:1.5s}
@keyframes fx-field{0%{background:transparent;box-shadow:0 0 0 0 rgba(52,87,213,0)}40%{background:#C9D5FA;box-shadow:0 0 0 4px rgba(52,87,213,.18)}100%{background:#E9EEFC;box-shadow:0 0 0 0 rgba(52,87,213,0)}}
.fx-sign path{stroke-dasharray:260;stroke-dashoffset:260;animation:fx-draw 1.2s ease 2.1s forwards}
@keyframes fx-draw{to{stroke-dashoffset:0}}
.fx-stamp{opacity:0;transform:scale(1.6) rotate(-12deg);animation:fx-stamp .45s cubic-bezier(.2,.9,.3,1.2) 3s forwards}
@keyframes fx-stamp{to{opacity:1;transform:scale(1) rotate(-6deg)}}
.fx-ref{animation:fx-ref .6s ease 3.4s both}
@keyframes fx-ref{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.fx-badge{opacity:0;transform:translateY(8px) scale(.9);animation:fx-badge .5s ease 3.7s forwards}
@keyframes fx-badge{to{opacity:1;transform:none}}
/* billing toggle */
.bill{display:inline-flex;padding:4px;border-radius:999px;background:#ECEFEE;gap:4px;align-self:flex-start}
.bill button{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#5A6068;cursor:pointer}
.bill button[aria-pressed="true"]{background:#FFFFFF;color:#1E2329;box-shadow:0 1px 3px rgba(30,35,41,.15)}
.bill-panel[hidden]{display:none !important}
/* comparison */
.cmp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);border:1px solid #DDE2E0;border-radius:14px;overflow:hidden;background:#fff}
.cmp>div{padding:16px 20px;border-top:1px solid #DDE2E0;font-size:15px;line-height:1.6}
.cmp>div.h{border-top:0;font-weight:600;font-size:14px;background:#F3F5F4}
.cmp>div.k{font-weight:600}
.cmp>div.old{color:#5A6068}
.cmp>div.new{background:#F6F8FE;color:#1E2329}
.cmp>div.h.new{background:#1E2329;color:#fff}
@media (max-width:720px){
  header nav{display:none !important}
  header .signin{display:none !important}
  .hero-art{height:auto !important}
  .hero-art .back,.hero-art .float{display:none !important}
  .hero-art .paper{position:relative !important;top:auto !important;left:auto !important;width:100% !important;height:auto !important;transform:none !important;min-height:480px}
  .hero-app{min-height:0 !important;padding:24px 16px 28px}
  .hero-app .win{position:relative !important;top:auto !important;left:auto !important;right:auto !important;height:auto !important}
  .hero-app .side,.hero-app .float{display:none !important}
  .wa-float span{display:none}
  .wa-float{padding:0;width:56px;justify-content:center}
  .cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp>div.k{grid-column:1/-1;background:#F3F5F4;padding:10px 16px;font-size:14px}
  .cmp>div.h.k{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-field,.fx-sign path,.fx-stamp,.fx-ref,.fx-badge{animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important}
}