@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
    *{box-sizing:border-box;margin:0;padding:0}
    :root{--primary:#2D8653;--primary-dk:#1F6B3E;--dark:#1E1F21;--gray:#6B6F76;--light:#F5F7F6;--border:#E5E7EB;--error:#B42318;--error-bg:#FEF3F2;--success:#18794E;--success-bg:#ECFDF3}
    body{font-family:'Tajawal',Arial,sans-serif;min-height:100vh;background:var(--light);color:var(--dark);display:grid;grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr)}
    .hero{background:var(--dark);color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(45,134,83,.13);inset-inline-end:-130px;bottom:-130px}
    .brand{position:absolute;top:32px;inset-inline-start:48px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
    .brand-logo{width:38px;height:38px;border-radius:10px;background:url('../../assets/massar_logo_small.png') center/cover no-repeat}
    .hero h2{font-size:40px;line-height:1.25;margin-bottom:16px;max-width:500px}.hero h2 span{color:#58B47B}
    .hero p{color:#C8CDD2;line-height:1.9;max-width:520px;margin-bottom:30px}
    .steps{display:grid;gap:16px;max-width:520px}.step{display:flex;align-items:flex-start;gap:13px}.step-num{width:32px;height:32px;border-radius:50%;background:rgba(45,134,83,.18);border:1px solid #58B47B;color:#6FD193;display:grid;place-items:center;font-weight:800;flex:0 0 auto}.step span:last-child{color:#E5E7EB;line-height:1.7;padding-top:4px}
    .panel{background:#fff;padding:48px;display:flex;align-items:center;justify-content:center}.card{width:100%;max-width:500px}
    .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:38px;font-size:21px;font-weight:800}.mobile-brand .brand-logo{width:40px;height:40px}
    h1{font-size:31px;margin-bottom:10px}.subtitle{color:var(--gray);line-height:1.8;margin-bottom:30px}
    .message{display:none;padding:14px 16px;border-radius:12px;margin-bottom:20px;font-size:14px;line-height:1.75}.message.show{display:block}.message.error{background:var(--error-bg);color:var(--error);border-inline-start:4px solid var(--error)}.message.success{background:var(--success-bg);color:var(--success);border-inline-start:4px solid var(--success)}
    label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}input{width:100%;padding:14px 15px;border:1.5px solid var(--border);border-radius:12px;background:#FAFAFA;font:inherit;outline:none;direction:ltr;text-align:left}input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(45,134,83,.09)}
    .btn{width:100%;min-height:48px;margin-top:18px;border:none;border-radius:12px;background:var(--primary);color:#fff;font:inherit;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}.btn:hover{background:var(--primary-dk)}.btn:disabled{opacity:.65;cursor:not-allowed}
    .footer{text-align:center;margin-top:24px;color:var(--gray);font-size:14px}.footer a{color:var(--primary);font-weight:700;text-decoration:none}.footer a:hover{text-decoration:underline}
    .floating{position:fixed;bottom:22px;z-index:20;border-radius:999px;min-height:42px;padding:9px 16px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.12)}.lang-btn{inset-inline-start:22px;background:#fff;color:var(--dark);border:1px solid var(--border)}.support-btn{inset-inline-end:22px;background:var(--primary);color:#fff;border:0;text-decoration:none;display:flex;align-items:center;gap:7px}
    @media(max-width:850px){body{display:block}.hero{display:none}.panel{min-height:100vh;padding:34px 22px}.card{max-width:520px}.floating{bottom:14px}.lang-btn{inset-inline-start:14px}.support-btn{inset-inline-end:14px}}