:root{--g1:#2FC3D2;--g2:#3F7ACC;--g3:#5A5FCE;--ink:#1D2433;--mut:#5A6478;--bg:#F7F8FB;--card:#fff;--line:#E5E8F0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Arabic',Tajawal,Cairo,system-ui,sans-serif;line-height:1.8}
a{color:var(--g2)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}
.nav .brand img{height:24px;padding:6px;border-radius:10px;background:linear-gradient(115deg,var(--g1),var(--g2) 55%,var(--g3))}
.nav .links{display:flex;gap:18px;align-items:center;font-size:15px}
.nav .links a{color:var(--mut);text-decoration:none}
.btn{display:inline-block;padding:13px 28px;border-radius:12px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:16px;text-decoration:none;color:#fff;background:linear-gradient(115deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:0 8px 22px rgba(63,111,208,.28)}
.btn.ghost{background:#fff;color:var(--g2);border:1.5px solid var(--line);box-shadow:none}
.btn.sm{padding:9px 18px;font-size:14px}
.hero{text-align:center;padding:60px 0 30px}
.hero h1{font-size:clamp(30px,5vw,48px);margin:0 0 12px;line-height:1.35}
.hero h1 span{background:linear-gradient(115deg,var(--g1),var(--g2) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--mut);max-width:560px;margin:0 auto 26px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:40px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;color:var(--mut);font-size:15px}
.price{max-width:420px;margin:30px auto 60px;text-align:center;padding:32px 26px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(115deg,var(--g1),var(--g2),var(--g3)) border-box;border-radius:22px}
.price .amt{font-size:44px;font-weight:800;margin:6px 0}
.price ul{list-style:none;padding:0;margin:18px 0 24px;color:var(--mut);font-size:15px}
.price li{padding:4px 0}
.form{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 28px}
.form h1{font-size:24px;margin:0 0 6px}
.form p{color:var(--mut);margin:0 0 20px;font-size:15px}
.form input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;direction:ltr;text-align:left;margin-bottom:14px}
.form input:focus{outline:0;border-color:var(--g2)}
.form .btn{width:100%}
.err{background:#FDECEC;color:#B3261E;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.ok{background:#E7F7F1;color:#0B6E4F;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-child{border-bottom:0}
.kv b{color:var(--mut);font-weight:500}
.badge{display:inline-block;padding:3px 12px;border-radius:99px;font-size:13px;font-weight:700}
.badge.on{background:#E7F7F1;color:#0B6E4F}.badge.off{background:#FDECEC;color:#B3261E}.badge.warn{background:#FFF4E0;color:#9A5B00}
.foot{color:var(--mut);font-size:13px;text-align:center;padding:30px 0}
.foot a{color:var(--mut)}
.prose{max-width:720px;margin:30px auto 60px}
.prose h1{font-size:28px}
.prose h2{font-size:19px;margin-top:28px}
@media (max-width:600px){.nav .links{gap:12px;font-size:14px}.hero{padding:40px 0 20px}}
/* الدخول بجوجل، وفواصل نماذج الحساب */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 18px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none}
.gbtn:hover{background:#FAFBFF;border-color:#CFD6E6}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mut);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.alt{text-align:center;font-size:14px;color:var(--mut);margin-top:14px}
.fine{font-size:12.5px;color:var(--mut);text-align:center;margin:14px 0 0}
.warn{background:#FFF4E0;color:#9A5B00;border-radius:10px;padding:10px 14px;font-size:14px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#9A5B00;text-decoration:underline;cursor:pointer}