@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#17232b;--green:#187451;--mint:#d4f4b3;--muted:#69756e;--line:#e3e8e2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fbfcf8;color:var(--ink);font:15px 'Noto Sans Arabic',Tahoma,Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #4e9d64;outline-offset:4px}.wrap{width:min(1160px,calc(100% - 56px));margin:auto}header{border-bottom:1px solid var(--line);background:#fbfcf8ed;position:sticky;top:0;z-index:5;backdrop-filter:blur(15px)}.header{height:86px;display:flex;align-items:center;gap:42px}.brand{font:bold 20px Arial,sans-serif;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.brand-light{font-weight:400}.logo{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--green);color:white;border-radius:10px;font-size:26px}nav{display:flex;gap:30px;margin-inline-start:auto;font-size:14px}.beta{border:1px solid #d0d9cd;border-radius:20px;padding:4px 13px;color:#64725f;font-size:11px}.hero{position:relative;padding:76px 0 48px;min-height:590px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--green);display:flex;gap:8px;align-items:center}.eyebrow span{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:57px;line-height:1.5;letter-spacing:-2px;margin:17px 0 14px;font-weight:800}h1 em{font-style:normal;color:var(--green);background:linear-gradient(transparent 72%,#d9efb6 72%)}.hero p{color:var(--muted);font-size:16px;line-height:2}.primary{background:var(--green);color:white;padding:12px 23px;border:0;border-radius:9px;display:inline-flex;gap:34px;align-items:center;font-weight:600;margin-top:12px}.primary:hover{background:#105b3e}.trust{display:flex;gap:20px;color:#7c847d;font-size:10px;margin-top:29px}.hero-art{position:absolute;left:20px;top:70px;width:420px;height:380px;background:radial-gradient(ellipse,#e8f2d4,transparent 68%)}.orbit{position:absolute;border:1px solid #d7dfce;border-radius:50%;inset:27px;transform:rotate(-25deg)}.o2{inset:85px -5px;transform:rotate(35deg)}.tile{position:absolute;width:135px;height:137px;border:1px solid #e4e7dc;border-radius:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;font:bold 28px Arial;background:white;box-shadow:0 12px 35px #1a3e1710;transform:rotate(9deg);gap:16px}.tile small{font:12px Tahoma;color:#78816f}.tile-pdf{top:0;right:48px;color:#af6142;background:#fdf3ed}.tile-img{left:18px;top:112px;color:#54764b;background:#edf3e6;transform:rotate(-12deg);font-size:45px}.tile-code{bottom:0;right:60px;color:#6b64a3;background:#f2effa;transform:rotate(5deg)}.center-click{position:absolute;top:135px;right:130px;width:98px;height:98px;background:var(--green);border:8px solid #fbfcf8;border-radius:25px;color:white;display:grid;place-items:center;font-size:55px;transform:rotate(-10deg)}.spark{position:absolute;bottom:34px;left:70px;color:#a2bb81;font-size:35px}.tool-section{padding:45px 0 75px;border-top:1px solid var(--line)}.section-head h2{font-size:30px;letter-spacing:-.9px;margin:8px 0}.section-head p{margin:0;color:var(--muted)}.search{display:flex;align-items:center;border:1px solid #dce1d8;background:white;border-radius:11px;padding:10px 17px;margin:26px 0 20px;gap:14px}.search span{font-size:27px;color:#7e8777}.search input{width:100%;background:none;border:0;outline:0;font-size:13px}.search kbd{font:10px Tahoma;color:#969d91;border:1px solid var(--line);border-radius:4px;padding:4px 8px}.filters{display:flex;gap:8px;margin-bottom:24px;overflow:auto;padding:2px}.filters button{white-space:nowrap;border:1px solid var(--line);background:transparent;border-radius:8px;padding:8px 19px;color:#5e685c;font-size:12px}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{text-align:right;border:1px solid var(--line);background:white;border-radius:14px;padding:24px;min-height:207px;color:inherit;transition:transform .2s,box-shadow .2s;position:relative}.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #1b362011;border-color:#b4c7ac}.icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font:bold 18px Arial;margin-bottom:16px}.pdf{background:#fcf0e9;color:#b87552}.images{background:#eaf3e4;color:#4e7947}.text{background:#edf1fb;color:#6475aa}.code{background:#f1ecf9;color:#8b6bb0}.card h3{font-size:16px;margin:0 0 5px}.card p{font-size:12px;color:var(--muted);margin:0;line-height:1.9}.card .arrow{position:absolute;left:23px;top:30px;color:#99a38f;font:22px Arial}.how{border-top:1px solid var(--line);padding:60px 0 70px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.how h2{font-size:32px;line-height:1.7;margin:12px 0}.how p{font-size:13px;color:var(--muted);line-height:2}.steps article{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:20px 0}.steps article:last-child{border:0}.steps b{color:#a5b796;font:22px Arial;padding-top:7px}.steps h3{margin:0;font-size:15px}.steps p{margin:5px 0}footer{padding:28px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:16px}footer p,footer>span{font-size:11px;color:var(--muted)}dialog{border:1px solid #dce3d6;border-radius:20px;width:min(650px,calc(100% - 24px));padding:28px;color:var(--ink);background:#fbfcf8;max-height:90dvh;overflow:auto}dialog::backdrop{background:#15291b88;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font-size:23px;margin:5px 0}.modal-head small{color:var(--green)}.close{border:0;background:#eaf0e3;border-radius:50%;font:26px Arial;width:35px;height:35px}#toolDesc{color:var(--muted);font-size:13px;line-height:2}#workspace{display:grid;gap:14px}textarea{width:100%;min-height:170px;border:1px solid #d4ddcb;border-radius:9px;padding:14px;resize:vertical;background:white;font-size:14px}input[type=file]{max-width:100%;border:1px dashed #adc49b;background:#eff5e7;padding:25px 16px;border-radius:12px;width:100%;font-size:12px}input[type=number],input[type=text],select{border:1px solid #d5dece;border-radius:7px;padding:9px;max-width:100%;background:white}label{font-size:13px}#workspace label{display:grid;gap:7px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row>*{flex:1;min-width:80px}#workspace .primary{justify-content:center;margin:0;font-size:13px;padding:11px;gap:8px}.secondary{background:white;border:1px solid #d0dcca;border-radius:8px;padding:10px;color:var(--green)}.output{background:#eef3e8;border:1px solid #dce5d3;border-radius:10px;padding:15px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:13px}.result-image{max-width:100%;max-height:240px;display:block;margin:auto;border-radius:8px}.modal-bottom{font-size:10px;color:#7b8775;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}#status{font-size:13px;color:var(--green)}#status.error{color:#b53b38}button:disabled{opacity:.55;cursor:wait}.file-list{font-size:12px;line-height:2;color:var(--muted)}
@media(max-width:950px){.hero-art{left:0;width:340px;transform:scale(.85);transform-origin:left center}h1{font-size:46px}.hero{min-height:550px}.trust{gap:10px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.wrap{width:calc(100% - 32px)}.header{height:72px;gap:9px}.brand{font-size:16px}.logo{width:29px;height:29px;font-size:23px}nav{gap:15px;font-size:11px}nav a:nth-child(2){display:none}.beta{font-size:9px;padding:3px 8px}.hero{padding-top:42px;text-align:center;min-height:auto}.hero .eyebrow{justify-content:center;font-size:11px}h1{font-size:38px;letter-spacing:-1px;margin-top:20px}.hero p{font-size:13px}.primary{font-size:13px}.trust{justify-content:center;font-size:8px;gap:12px}.hero-art{position:relative;width:320px;height:290px;margin:10px auto -15px;left:auto;top:auto;transform:scale(.82);transform-origin:center center}.tile{width:118px;height:118px}.tile-code{right:35px}.tile-pdf{right:22px}.center-click{right:97px;top:100px}.tile-img{top:82px;left:0}.tool-section{padding-top:32px}.section-head h2{font-size:24px}.section-head p{font-size:13px}.filters button{padding:7px 14px}.cards{gap:10px}.card{padding:17px;min-height:205px}.card h3{font-size:14px}.card p{font-size:11px}.card .arrow{left:15px;top:21px}.icon{width:37px;height:37px;font-size:15px}.how{grid-template-columns:1fr;gap:12px;padding:38px 0}.how h2{font-size:27px}.how h2 br{display:none}footer{flex-wrap:wrap;gap:10px}footer p{margin:0}footer>span{width:100%}dialog{padding:20px}.modal-head h2{font-size:20px}}
/* Purple direction inspired by the supplied reference. */
:root{--green:#7944eb;--mint:#c9a4ff;--ink:#171a32;--muted:#71738d;--line:#e7e3f1}body{background:#f7f7fd}header{background:#11102bed;border-color:#2c2251;color:white}.logo{background:linear-gradient(135deg,#a569ff,#5a28d9)}.beta{color:#d8c5ff;border-color:#65508a}main{overflow:hidden}.hero{width:100%;padding:65px max(28px,calc((100vw - 1160px)/2)) 60px;background:radial-gradient(ellipse at 20% 30%,#5a2cb6 0,transparent 48%),linear-gradient(120deg,#111b42,#211544 70%,#211245);color:white;min-height:540px}.hero::after{content:'';position:absolute;width:120%;height:150px;border-radius:50%;background:#9460ee25;bottom:-92px;left:-10%;transform:rotate(-5deg);pointer-events:none}.hero .eyebrow{color:#c4a3ff}.hero .eyebrow span{background:#ba89ff}.hero h1{font-size:52px;letter-spacing:-1.5px}.hero h1 em{background:linear-gradient(120deg,#c392ff,#aa80fb);background-clip:text;-webkit-background-clip:text;color:transparent}.hero p{color:#ddd7ed}.hero .primary{background:linear-gradient(120deg,#a55cf5,#6931da);box-shadow:0 5px 25px #9b57e12a}.trust{color:#d4cce4;font-size:11px}.hero-art{left:max(20px,calc((100vw - 1150px)/2));top:65px;background:radial-gradient(ellipse,#9b4eff55,transparent 70%)}.orbit{border-color:#a47af53b}.tile{border-color:#ae8cfa;box-shadow:0 15px 45px #08051c55;color:white}.tile small{color:#e4d9ff}.tile-pdf{background:linear-gradient(145deg,#ff5a89,#d83d64);border-color:#ff98ae}.tile-img{background:linear-gradient(145deg,#7b7aff,#4643cf);border-color:#8e9aff}.tile-code{background:linear-gradient(145deg,#aa68ff,#613cda);border-color:#bb8cff}.center-click{background:linear-gradient(135deg,#b167ff,#6d30e8);border-color:#34215c;box-shadow:0 15px 35px #0e0a3380}.spark{color:#bb8bff}.tool-section{position:relative;border:0;padding-top:36px}.tool-section .section-head{margin-top:8px}.search{box-shadow:0 4px 25px #3a206809;border-radius:14px;border-color:#e2daef;padding:15px 20px}.filters{margin-top:25px}.filters button.active{background:var(--green);border-color:var(--green)}.card{border-color:#e6e1ef;box-shadow:0 2px 8px #30205c03}.card:hover{border-color:#bba1eb;box-shadow:0 8px 25px #54318b13}.pdf{background:linear-gradient(145deg,#ff726d,#e9415c);color:white}.images{background:linear-gradient(145deg,#8c6aff,#5943d9);color:white}.text{background:linear-gradient(145deg,#5da3ff,#3f70db);color:white}.code{background:linear-gradient(145deg,#696bb3,#393864);color:white}.calc{background:linear-gradient(145deg,#ffbe61,#ee9225);color:white}.general{background:linear-gradient(145deg,#b574ff,#7c3ce2);color:white}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.category-tile{display:flex;align-items:center;text-align:right;background:white;border:1px solid var(--line);border-radius:13px;padding:16px;gap:14px;color:var(--ink)}.category-tile:hover{border-color:#bba1eb}.category-tile .icon{margin:0;width:45px;flex-shrink:0}.category-tile strong{font-size:14px}.category-tile small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.category-arrow{margin-inline-start:auto;color:#9e91b1}.how{border-color:var(--line)}dialog{background:#faf9fe;border-color:#d3c3ed}.modal-bottom{color:#79708b}.close{background:#eee7fa}.output{background:#f0eafb;border-color:#dfd0f4;font-family:inherit;max-height:360px;overflow:auto;direction:auto}input[type=file]{background:#f0eafb;border-color:#c2a9e9}input[type=number],input[type=text],input[type=date],input[type=tel],select,textarea{border:1px solid #dacfeb;border-radius:8px;padding:10px;background:white;min-width:0;width:100%}input[type=color]{width:100%;height:45px;border:1px solid #dacfeb;border-radius:8px;background:white}.hint{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.timer{font:bold 65px Arial,sans-serif;text-align:center;color:#7944eb;padding:25px;background:#f0eafb;border-radius:14px;direction:ltr}.secondary{border-color:#d7c8ee}.steps b{color:#a78cc9}.hero .trust{white-space:nowrap}
@media(max-width:950px){.hero h1{font-size:43px}.hero-art{left:20px}.hero{min-height:510px}.category-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.hero{padding:38px 16px 0;min-height:0}.hero h1{font-size:36px;line-height:1.65}.hero-art{left:auto;top:auto;margin:0 auto -3px}.hero .eyebrow{font-size:10px}.hero .trust{font-size:8px;gap:10px}.category-grid{grid-template-columns:repeat(2,1fr);gap:9px}.category-tile{padding:12px;gap:10px}.category-tile .icon{width:35px;height:35px;font-size:14px}.category-tile strong{font-size:12px}.category-tile small{font-size:10px}.category-arrow{font-size:15px}.section-head h2{font-size:24px}.card{min-height:210px}.header{gap:9px}.how{padding-top:35px}.output{max-height:280px;font-size:12px}.modal-bottom{line-height:1.8}.hero::after{bottom:-100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.word-render-frame{position:fixed;left:-12000px;top:0;width:1100px;height:1000px;border:0;pointer-events:none;background:white}

.word-page-preview{display:block;width:100%;height:auto;border:1px solid #ded7eb;margin-top:12px}#result details{margin-top:15px}#result summary{cursor:pointer;color:#7944eb;font-size:13px}

#signaturePad{display:block;width:100%;height:160px;background:white;border:1px dashed #b49bdc;border-radius:10px;touch-action:none;cursor:crosshair}#ocrOutput{min-height:220px}#result>label{display:grid;gap:8px;margin-bottom:12px}#result>.secondary{margin-bottom:12px}.row input[type=file]{padding:10px;font-size:10px}

@media(max-width:650px){nav a:nth-child(2){display:inline}nav a:nth-child(3){display:none}}
