/* منصة ستيب — تصميم هادئ بألوان فاتحة وخطوط كبيرة */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --bg:#f5faf9;
  --card:#ffffff;
  --ink:#23404a;
  --mut:#587079;
  --line:#dcebe8;
  --p:#2f7f78;          /* أخضر مزرق هادئ */
  --p2:#4aa398;
  --pl:#e2f2ef;
  --sand:#fdf6e7;
  --sandd:#b9812a;
  --ok:#2e9e6b;--okl:#e4f6ec;
  --bad:#d9645f;--badl:#fdeeed;
  --warn:#e0a020;--warnl:#fff4d9;
  --shadow:0 6px 22px rgba(47,127,120,.09);
  --shadow2:0 10px 28px rgba(47,127,120,.16);
}
*{box-sizing:border-box}
html{font-size:20px;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);line-height:1.8;
  font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  background:
    radial-gradient(900px 380px at 100% -80px,#e2f2ef 0,transparent 70%),
    radial-gradient(700px 320px at 0 120px,#fdf6e7 0,transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
}
a{color:var(--p)}
.wrap{max-width:780px;margin:0 auto;padding:16px 16px 8px}

/* الترويسة */
header.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;max-width:780px;margin:0 auto}
header.top a{color:var(--ink);text-decoration:none;font-weight:800;font-size:1.2rem;display:flex;align-items:center;gap:10px}
header.top a:first-child::before{
  content:"";width:38px;height:38px;border-radius:12px;flex:none;
  background:#e2f2ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='7' y='25' width='8' height='8' rx='2' fill='%23a9d8d1'/%3E%3Crect x='16' y='18' width='8' height='15' rx='2' fill='%234aa398'/%3E%3Crect x='25' y='10' width='8' height='23' rx='2' fill='%232f7f78'/%3E%3C/svg%3E") center/26px no-repeat;
}
header.top small{color:var(--p);background:var(--pl);border-radius:20px;padding:2px 14px;font-weight:700;font-size:.85rem}

/* البطل */
.hero{
  position:relative;overflow:hidden;text-align:center;margin:10px 0 18px;
  background:linear-gradient(135deg,#e2f2ef 0%,#f3faf8 55%,#fdf6e7 100%);
  border:1px solid var(--line);border-radius:28px;padding:30px 20px 26px;box-shadow:var(--shadow);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{width:190px;height:190px;background:rgba(74,163,152,.10);top:-70px;left:-50px}
.hero::after{width:140px;height:140px;background:rgba(185,129,42,.09);bottom:-50px;right:-30px}
.hero>*{position:relative;z-index:1}
.hero h1{margin:0 0 10px;font-size:1.75rem;line-height:1.5;font-weight:800}
.hero p{margin:0 0 16px;color:var(--mut)}
.hero svg.stairs{width:150px;height:auto;display:block;margin:0 auto 6px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 20px}
.chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:2px 14px;font-size:.85rem;font-weight:700;color:var(--p)}

/* الأزرار */
.btn{
  display:inline-block;background:var(--p);color:#fff;border:2px solid var(--p);border-radius:16px;
  padding:12px 26px;font-size:1.05rem;font-weight:800;text-decoration:none;cursor:pointer;font-family:inherit;
  box-shadow:0 5px 14px rgba(47,127,120,.22);transition:transform .15s,box-shadow .15s,background .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(47,127,120,.28)}
.btn.sec{background:#fff;color:var(--p);border:2px solid var(--p2);box-shadow:none}
.btn.sec:hover{background:var(--pl)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn.big{padding:15px 34px;font-size:1.15rem}

/* الشبكة والبطاقات */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;
}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:var(--p2)}
.card h2,.card h3{margin:0 0 6px;font-weight:800}
.card p{margin:0 0 12px;color:var(--mut)}
.card .ico{
  width:52px;height:52px;border-radius:16px;background:var(--pl);display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin-bottom:10px;
}
.card.soonc{background:#fcfdfc;box-shadow:none;border-style:dashed}
.card.soonc .ico{background:var(--sand)}
.tag{display:inline-block;background:var(--pl);color:var(--p);border-radius:20px;padding:1px 14px;font-size:.8rem;font-weight:800}
.tag.soon{background:var(--warnl);color:#9a6a00}

/* خطوات "كيف تعمل المنصة" */
.how{display:grid;gap:12px;margin:0 0 18px}
@media(min-width:640px){.how{grid-template-columns:repeat(3,1fr)}}
.how div{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 16px}
.how b{display:flex;flex:none;width:38px;height:38px;border-radius:50%;background:var(--p);color:#fff;align-items:center;justify-content:center}
.how span{color:var(--ink);font-size:.95rem;font-weight:500}
@media(min-width:640px){.how div{flex-direction:column;text-align:center;padding:14px 16px;gap:6px}}
.sec-title{margin:22px 4px 10px;font-size:1.2rem;font-weight:800}

/* الأسئلة */
.en{direction:ltr;text-align:left;unicode-bidi:isolate}
.q{font-size:1.2rem;margin:10px 0 16px;line-height:1.7;font-weight:500}
.opts{display:grid;gap:10px}
.opt{
  direction:ltr;text-align:left;background:#fff;border:2px solid var(--line);border-radius:16px;
  padding:13px 16px;font-size:1.05rem;cursor:pointer;font-family:inherit;color:var(--ink);min-height:54px;
  transition:border-color .15s,background .15s,transform .1s;
}
.opt:hover:not(:disabled){border-color:var(--p2);background:#f6fbfa}
.opt:active:not(:disabled){transform:scale(.99)}
.opt.sel{border-color:var(--p);background:var(--pl);font-weight:700}
.opt:disabled{cursor:default;color:var(--ink)}
.bar{height:14px;background:#e3efec;border-radius:10px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--p2),var(--p));border-radius:10px;transition:width .35s}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;direction:ltr}
.pass{direction:ltr;text-align:left;background:var(--sand);border:1px solid #f1e3bd;border-radius:16px;padding:14px 16px;margin-bottom:12px;font-size:1rem;line-height:1.8}

/* التقرير والخطة */
.skill{margin:14px 0}
.skill .row{display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px}
.skill .bar>i.low{background:linear-gradient(90deg,#e49390,var(--bad))}
.skill .bar>i.mid{background:linear-gradient(90deg,#efc66a,var(--warn))}
.skill .bar>i.high{background:linear-gradient(90deg,#6fcb9d,var(--ok))}
.rule{background:#fbfdfc;border:1px solid var(--line);border-right:6px solid var(--p2);border-radius:16px;padding:12px 16px;margin:12px 0}
.rule b{color:var(--p)}
.day{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed var(--line)}
.day:last-child{border:0}
.day .n{background:var(--pl);color:var(--p);font-weight:800;border-radius:14px;min-width:76px;text-align:center;padding:2px 8px;flex:none}
footer{text-align:center;color:var(--mut);font-size:.85rem;padding:24px 16px 36px}
.note{background:var(--warnl);border-radius:14px;padding:10px 14px;font-size:.9rem;color:#6d5410}
.audio{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}

:focus-visible{outline:3px solid #8cc9c1;outline-offset:2px}
@media(max-width:480px){
  .hero{padding:24px 14px 22px;border-radius:24px}
  .hero h1{font-size:1.5rem}
  .btn.big{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* عدّاد الزوار */
.visits{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:30px;padding:2px 16px;margin-bottom:10px;font-size:.9rem;color:var(--mut)}
.visits b{color:var(--p);font-weight:800;margin-inline-start:4px}
footer .visits{display:table;margin:0 auto 10px}