@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#102e37;--ink:#182e35;--teal:#008a78;--mint:#d8f6eb;--bg:#f6f9f8;--border:#dce7e5;--muted:#60757b;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tajawal,system-ui,Arial,sans-serif;line-height:1.6}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.wrap{width:min(1140px,92%);margin:auto}.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px max(4%,calc((100% - 1140px)/2))}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:900;direction:ltr;color:var(--navy)}.brand small{font-size:11px;display:block;direction:rtl;color:var(--muted);line-height:1}.mark{width:37px;height:37px;background:var(--teal);color:white;border-radius:13px;display:grid;place-items:center;font-size:23px}.nav nav{display:flex;gap:22px;font-size:14px;font-weight:700}.nav nav a:hover{color:var(--teal)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--teal);color:#fff;border:1px solid var(--teal);border-radius:13px;padding:13px 22px;font-weight:800;min-height:44px}.btn:hover{filter:brightness(.93)}.btn-sm{padding:8px 13px;font-size:13px}.btn.outline{background:transparent;color:var(--navy);border-color:#aac5c0}.landing-hero{background:radial-gradient(circle at 10% 5%,#1d5760,#102e37 50%,#0a242d);color:white;padding:90px 0 95px}.hero-layout{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:65px}.eyebrow{color:var(--teal);font-weight:800;font-size:13px;letter-spacing:.2px}.landing-hero .eyebrow{color:#75e5c7}.landing-hero h1{font-size:clamp(38px,5vw,69px);line-height:1.18;margin:20px 0;font-weight:900}.landing-hero h1 em{font-style:normal;color:#7be3c6}.lead{font-size:19px;line-height:1.9;color:#deedec;max-width:580px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.landing-hero .outline{color:white;border-color:#67878a}.note{font-size:12px;color:#a8c9c7;margin-top:21px}.hero-card{border:1px solid #53838a;border-radius:28px;padding:20px;background:rgba(255,255,255,.07);box-shadow:0 20px 60px rgba(0,0,0,.1)}.floatbox{background:white;color:var(--ink);padding:25px;border-radius:20px}.mini-label{font-weight:800;color:var(--teal)}.route{display:flex;justify-content:space-between;align-items:center;margin:23px 0;gap:8px}.route>div:not(.route-line){display:grid}.route small{color:var(--muted);font-size:11px}.route-line{color:var(--teal);font-size:14px;white-space:nowrap}.steps-mini{display:flex;gap:8px;flex-wrap:wrap}.steps-mini span{background:#eaf7f2;padding:6px 9px;border-radius:9px;font-size:12px}.hero-price{border-top:1px solid var(--border);margin-top:25px;padding-top:17px;font-weight:900;display:flex;justify-content:space-between;gap:10px}.hero-price span{font-size:11px;color:var(--muted)}.section{padding:75px 0;scroll-margin-top:75px}.section.tinted{background:#edf4f1}.section-head{margin-bottom:28px}.section-head h2{font-size:clamp(28px,3vw,39px);margin:9px 0}.section-head p{color:var(--muted);max-width:760px}.cards{display:grid;gap:16px}.cards.three{grid-template-columns:repeat(3,1fr)}.cards.four{grid-template-columns:repeat(4,1fr)}.cards.two{grid-template-columns:repeat(2,1fr)}.panel{background:#fff;border:1px solid var(--border);padding:24px;border-radius:19px;box-shadow:0 4px 14px rgba(20,50,49,.025)}.panel h3{margin:7px 0 8px;font-size:20px}.panel p{color:var(--muted);font-size:14px;margin:0}.panel a{display:inline-block;margin-top:15px;color:var(--teal);font-weight:800}.picon{font-size:26px;color:var(--teal)}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.timeline>div{padding:20px 13px;border:1px solid var(--border);border-radius:17px;background:white;display:grid;gap:7px}.timeline span{background:var(--mint);color:#087c69;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;font-weight:900}.timeline small{color:var(--muted)}.policy{margin-top:23px;background:#d9f2e9;border:1px solid #afd8c9;border-radius:15px;padding:17px}.demo-banner{margin-top:25px;background:var(--navy);color:white;border-radius:20px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px}.demo-banner h3{margin:0}.demo-banner p{color:#bed5d3;margin:4px 0 0}footer{background:#0e2932;color:#b8d1cf;padding:23px 0}.foot{display:flex;justify-content:space-between;gap:15px}.foot b{color:white;font-size:24px;direction:ltr}
/* application */.appbar{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:13px 4%;gap:12px;position:sticky;top:0;z-index:15}.appbar .links{display:flex;gap:8px;flex-wrap:wrap}.appbar .links a{border-radius:9px;background:#edf4f1;padding:8px 13px;font-size:13px;font-weight:800}.appbar .links a.active{background:var(--navy);color:white}.app-container{width:min(1050px,94%);margin:32px auto 65px}.app-panel{background:white;border:1px solid var(--border);border-radius:21px;padding:25px;margin-bottom:17px}.app-panel h2{margin:0 0 10px}.subtle{color:var(--muted);font-size:14px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:grid;gap:5px;margin:8px 0}.field label{font-size:13px;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #cddbd8;padding:12px;background:white;border-radius:11px;outline:0;min-height:45px}.field input:focus,.field select:focus{border-color:var(--teal)}.field textarea{min-height:90px}.btn.alt{background:#fff;color:var(--navy);border-color:#b4ccca}.btn.danger{background:#c44141;border-color:#c44141}.btn:disabled{opacity:.55;cursor:not-allowed}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.progress{display:flex;gap:7px;margin-bottom:21px}.progress span{background:#e2eeeb;color:#59736e;padding:9px;flex:1;text-align:center;border-radius:10px;font-size:12px;font-weight:800}.progress span.on{background:var(--teal);color:white}.size-options{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.size-tile{padding:16px 7px;background:#f1f7f5;border:2px solid transparent;border-radius:14px;text-align:center;cursor:pointer}.size-tile.on{border-color:var(--teal);background:#e1f8ee}.size-tile b{display:block;font-size:19px}.size-tile small{color:var(--muted)}.summary{background:#eff8f5;padding:16px;border-radius:13px;margin:14px 0}.summary strong{font-size:27px;color:var(--teal)}.chip{display:inline-block;background:#e1f6ee;color:#117e68;font-size:12px;font-weight:800;padding:5px 10px;border-radius:30px}.chip.warn{background:#fff4da;color:#95610a}.chip.dark{background:#d9e6e8;color:#1c4b55}.item-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}.item-row:last-child{border:0}.item-row p{margin:2px 0;color:var(--muted);font-size:13px}.mini-btn{background:#ebf5f2;color:#087b6b;border:0;border-radius:9px;padding:8px 10px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{background:white;border:1px solid var(--border);border-radius:15px;padding:17px}.metric strong{display:block;font-size:25px}.metric small{color:var(--muted)}.stage-list{margin:18px 0}.stage{display:flex;gap:15px;position:relative;padding:0 0 24px}.stage:not(:last-child):before{content:'';width:2px;position:absolute;right:12px;top:27px;bottom:0;background:#cdded8}.stage .dot{height:26px;min-width:26px;background:#d5e5e0;display:grid;place-items:center;border-radius:50%;z-index:1}.stage.done .dot{background:var(--teal);color:white}.stage b{display:block}.stage p{color:var(--muted);margin:1px 0;font-size:13px}.splash{background:radial-gradient(circle at 20% 20%,#267368,#092c35 65%);min-height:72vh;display:grid;place-items:center;border-radius:27px;color:white;text-align:center;padding:35px}.splash .emblem{font-size:92px;line-height:1;color:#7de4c4}.splash h1{font-size:65px;direction:ltr;margin:5px}.splash p{color:#c3e7df}.splash .btn{background:white;color:#0b6256;border-color:white}.hint{border-right:4px solid var(--teal);padding:10px 15px;background:#ebf6f2;border-radius:8px;margin:12px 0}.toast{position:fixed;bottom:24px;left:24px;background:#123a40;color:white;padding:12px 19px;border-radius:12px;z-index:100;box-shadow:0 8px 30px #0015}.hide{display:none!important}.empty{padding:30px;text-align:center;color:var(--muted);background:#f5f9f7;border-radius:15px}.badge-nav{background:#f7efd2;padding:5px 9px;border-radius:10px;font-size:12px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{text-align:right;padding:12px;border-bottom:1px solid var(--border);font-size:13px}th{background:#f0f6f4}.bottomnav{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
@media(max-width:850px){.nav nav{display:none}.hero-layout{grid-template-columns:1fr;gap:28px}.landing-hero{padding:55px 0}.cards.four,.cards.three{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}.size-options{grid-template-columns:repeat(3,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.nav{padding:10px 4%}.nav>.btn{font-size:11px;padding:8px}.cards.four,.cards.three,.cards.two,.formgrid{grid-template-columns:1fr}.landing-hero h1{font-size:42px}.section{padding:50px 0}.timeline{grid-template-columns:1fr}.demo-banner,.foot{flex-direction:column}.appbar{align-items:flex-start;flex-direction:column}.app-panel{padding:17px}.app-container{margin-top:18px}.size-options{grid-template-columns:repeat(3,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}}