
:root{--blue:#123c70;--gold:#f5c146;--light:#f6f8fb;--dark:#0b1d33;--text:#243246}*{box-sizing:border-box}body{margin:0;font-family:Arial,DejaVu Sans,sans-serif;color:var(--text);background:#fff;line-height:1.65}a{text-decoration:none}.top{background:var(--dark);color:#fff;padding:12px 6%;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.langs a{color:#fff;margin:0 6px;padding:6px 10px;border:1px solid rgba(255,255,255,.35);border-radius:20px}.hero{background:linear-gradient(135deg,#123c70,#1d72b8);color:white;padding:70px 6%;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}.hero img{max-width:340px;width:100%;display:block;margin:auto;background:#fff;padding:18px;border-radius:24px;box-shadow:0 18px 45px rgba(11,29,51,.28)}.badge{color:var(--gold);font-weight:bold;letter-spacing:.06em}.hero h1{font-size:46px;line-height:1.15;margin:12px 0}.hero p{font-size:20px;max-width:800px}.btn{display:inline-block;background:var(--gold);color:#111;padding:14px 24px;border-radius:12px;font-weight:bold;margin:10px 8px 0 0}.btn.secondary{background:#fff}.section{padding:55px 6%}.section.alt{background:var(--light)}h2{font-size:32px;color:var(--blue);margin-top:0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(11,29,51,.08);border:1px solid #e8edf5}.alt .card{background:white}.stat{font-size:28px;font-weight:bold;color:var(--blue)}ul.features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0;list-style:none}.features li{background:white;border:1px solid #e8edf5;border-radius:14px;padding:16px 18px}.preview{display:grid;grid-template-columns:1fr 1fr;gap:22px}.mock{border:8px solid #f1f1f1;border-radius:18px;padding:30px;min-height:250px;background:#fff;text-align:center}.mock h3{color:var(--blue)}footer{background:var(--dark);color:white;padding:28px 6%;text-align:center}.rtl{text-align:right}.rtl .hero{direction:rtl}.rtl ul.features{direction:rtl}@media(max-width:850px){.hero,.preview{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.hero h1{font-size:34px}ul.features{grid-template-columns:1fr}}@media(max-width:520px){.grid{grid-template-columns:1fr}}
