:root{--ink:#0f2940;--teal:#0b8b97;--line:#e4eded;--muted:#698087}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);margin:0;font-family:Tajawal,Cairo,system-ui,sans-serif}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:76px;padding:0 7%;display:flex}.logo{letter-spacing:2px;font-size:22px;font-weight:900}.logo span{color:var(--teal);margin-right:7px;font-size:10px}nav{gap:28px;display:flex}nav a,.login,.video{color:#4d6570;font-size:12px;text-decoration:none}.cta{color:#fff;background:linear-gradient(135deg,#087d93,#18aba9);border-radius:9px;padding:12px 21px;font-size:12px;font-weight:800;text-decoration:none;display:inline-block}.login{margin-left:14px}.hero{text-align:center;background:radial-gradient(circle at 50% 60%,#ddf6f2,#fff 65%);padding:100px 18% 230px}.label,.eyebrow{color:var(--teal);font-size:11px;font-weight:800}.hero h1{margin:20px;font-size:59px;line-height:1.25}.hero h1 em{color:var(--teal);font-style:normal}.hero>p{max-width:760px;color:var(--muted);margin:0 auto 15px;font-size:16px;line-height:2}.video{margin-right:22px}.proof{justify-content:center;gap:35px;margin-top:45px;display:flex}.proof span{color:var(--muted);font-size:10px}.proof b{color:var(--ink);font-size:12px;display:block}.screen{max-width:980px;margin:-170px auto 100px;padding:0 20px}.browser{background:#f5f8fb;border:1px solid #dce7ea;border-radius:20px;height:500px;padding-top:35px;position:relative;overflow:hidden;box-shadow:0 35px 80px #15495a28}.dots{color:#c0cccf;font-size:9px;position:absolute;top:10px;left:15px}.mini-sidebar{color:#a9bdc9;background:#102d45;flex-direction:column;align-items:center;gap:28px;width:80px;padding:20px 0;display:flex;position:absolute;top:35px;bottom:0;right:0}.mini-sidebar b{color:#fff;background:#13a4ad;border-radius:10px;place-items:center;width:35px;height:35px;display:grid}.dash{margin-right:80px;padding:40px}.dash small{color:var(--muted)}.dash h2{margin-top:7px}.kpis{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.kpis div{border:1px solid var(--line);background:#fff;border-radius:12px;padding:17px}.kpis span,.kpis b{display:block}.kpis span{color:var(--muted);font-size:10px}.kpis b{margin-top:8px;font-size:20px}.chart{border:1px solid var(--line);background:#fff;border-radius:12px;align-items:flex-end;gap:20px;height:235px;margin-top:17px;padding:30px;display:flex}.chart i{background:linear-gradient(#0e9ba7,#b3e8e8);border-radius:5px 5px 0 0;flex:1}.feature-section,.plans{text-align:center;padding:90px 7%}.feature-section h2,.plans h2,.migration h2{font-size:37px}.grid{text-align:right;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;display:grid}.grid article{border:1px solid var(--line);border-radius:15px;padding:25px}.grid article>b{width:42px;height:42px;color:var(--teal);background:#e7f7f6;border-radius:11px;place-items:center;display:grid}.grid h3{font-size:16px}.grid p,.migration p,.plans p{color:var(--muted);font-size:12px;line-height:1.9}.migration{color:#fff;background:#0f3145;grid-template-columns:1fr 1fr;align-items:center;gap:100px;padding:90px 10%;display:grid}.migration p{color:#b8cdd4}.migration ol{padding:0;list-style:none}.migration li{border-right:2px solid #315166;align-items:center;gap:12px;padding:14px;display:flex}.migration li b{background:#294b5e;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.migration li.done b{background:#18866f}.migration li.active{border-color:#28c1bd}.migration li.active b{background:#0c9ba5}.migration li span{font-size:12px}.plan-grid{text-align:right;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px;display:grid}.plan-grid article{border:1px solid var(--line);border-radius:17px;padding:30px;position:relative}.plan-grid article.recommended{border:2px solid var(--teal);box-shadow:0 20px 45px #0b718218}.plan-grid em{background:var(--teal);color:#fff;border-radius:99px;padding:6px 12px;font-size:9px;font-style:normal;position:absolute;top:-13px;right:25px}.plan-grid h3{font-size:22px}.plan-grid ul{padding:0;font-size:12px;line-height:2.5;list-style:none}.contact{background:linear-gradient(120deg,#e5f7f3,#d4edeb);border-radius:20px;justify-content:space-between;align-items:center;margin:30px 7% 80px;padding:45px 6%;display:flex}.contact h2{margin:0;font-size:28px}.contact p{color:var(--muted)}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;padding:35px 7%;font-size:10px;display:flex}footer b{color:var(--ink);font-size:17px}@media (max-width:800px){nav{display:none}.hero{padding:70px 6% 180px}.hero h1{font-size:41px}.proof{gap:14px}.screen{margin-top:-120px}.browser{height:400px}.dash{padding:25px 15px}.chart{gap:8px;height:170px;padding:15px}.grid,.plan-grid{grid-template-columns:1fr}.migration{grid-template-columns:1fr;gap:30px;padding:60px 7%}.contact{flex-direction:column;align-items:flex-start;gap:15px}.feature-section h2,.plans h2,.migration h2{font-size:29px}}@media (max-width:500px){header{padding:0 15px}.login{display:none}.hero h1{margin:18px 0;font-size:34px}.proof{flex-direction:column}.mini-sidebar{width:48px}.dash{margin-right:48px}.kpis{grid-template-columns:1fr}.kpis div:nth-child(n+2){display:none}.screen{padding:0 10px}.browser{height:340px}.feature-section,.plans{padding:65px 15px}footer{flex-direction:column;gap:10px}}
.contact{align-items:flex-start}.lead-form{color:#10243e;background:#fff;border-radius:18px;width:min(100%,560px);padding:22px;box-shadow:0 16px 42px #071b2b35}.lead-form h3{margin:0 0 14px}.lead-form>div{grid-template-columns:1fr 1fr;gap:10px;display:grid}.lead-form label{margin-bottom:10px;font-size:12px;display:block}.lead-form input{border:1px solid #dce5ed;border-radius:8px;width:100%;margin-top:5px;padding:9px}.lead-form fieldset{border:1px solid #dce5ed;border-radius:9px;gap:14px;margin:4px 0 12px;display:flex}.lead-form fieldset label{align-items:center;gap:5px;margin:0;display:flex}.lead-form fieldset input,.lead-form .consent input{width:auto;margin:0}.lead-form .consent{align-items:center;gap:7px;display:flex}.lead-form .honeypot{width:1px;height:1px;position:absolute;inset-inline-start:-10000px}.lead-form .form-status{margin-bottom:0;font-size:12px}@media (max-width:720px){.lead-form>div{grid-template-columns:1fr}.lead-form fieldset{flex-direction:column}.contact{display:block}.lead-form{margin-top:20px}}
