:root{
  --night:#1C2627;
  --night-2:#2A3A37;
  --cream:#F2F0EA;
  --mist:#AEB7B2;
  --paper:#F5F5F1;
  --white:#FFFFFF;
  --ink:#1C2627;
  --ink-2:#3C4846;
  --muted:#5A6664;
  --line:#E1E3DD;
  --brass:#C4A26A;
  --brass-text:#8A6A36;
  --wa-bubble:#E8F3EC;
  --f-head:"Noto Naskh Arabic","Times New Roman",serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.f-logo,.logo,.result{font-family:var(--f-head);line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}
.sec{padding-block:44px}
h2{font-size:24px;font-weight:700;margin-block-end:8px}
.eyebrow{font-family:var(--f-head);font-size:14px;color:var(--brass-text);margin-block-end:6px}

.skip{position:absolute;inset-block-start:-60px;inset-inline-start:16px;z-index:60;background:var(--night);
  color:var(--cream);padding:10px 16px;border-radius:12px;text-decoration:none}
.skip:focus{inset-block-start:10px}
a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:8px}

/* أزرار */
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;
  border-radius:14px;text-decoration:none;font-weight:600;font-size:17px;border:0;cursor:pointer;
  transition:transform .16s ease,background .16s ease}
.btn.brass{background:var(--brass);color:var(--night)}
.btn.brass:hover{background:#D2B27C;transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}

/* شريط علوي */
.topbar{background:var(--night);color:var(--cream);position:sticky;inset-block-start:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:12px}
.logo{font-size:20px;font-weight:700;text-decoration:none;color:var(--cream)}
.nav-wide{display:none;gap:22px}
.nav-wide a{text-decoration:none;color:var(--mist);font-size:15px}
.nav-wide a:hover{color:var(--cream)}
.menu-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(242,240,234,.28);border-radius:12px;cursor:pointer}
.menu-btn svg{width:22px;height:22px;stroke:var(--cream);fill:none;stroke-width:1.8;stroke-linecap:round}
.menu-panel{background:var(--night);border-block-start:1px solid rgba(242,240,234,.12);padding-block:8px 14px}
.menu-panel a{display:block;padding-block:12px;color:var(--cream);text-decoration:none;font-size:16px;
  border-block-end:1px solid rgba(242,240,234,.08)}
.menu-panel a:last-child{border-block-end:0}

/* 1 · الواجهة */
.hero{background:var(--night);color:var(--cream);padding-block:34px 44px;text-align:center}
.hero-media{display:flex;flex-direction:column;align-items:center}
.arch{position:relative;width:170px;background:var(--white);
  border-start-start-radius:999px;border-start-end-radius:999px;
  border-end-start-radius:14px;border-end-end-radius:14px;overflow:hidden}
.arch::after{content:"";position:absolute;inset:-8px;pointer-events:none;
  border:1px solid rgba(196,162,106,.55);
  border-start-start-radius:999px;border-start-end-radius:999px;
  border-end-start-radius:20px;border-end-end-radius:20px}
.arch img{width:100%;height:auto;object-fit:cover}
.name-badge{display:inline-block;margin-block-start:22px;border:1px solid rgba(196,162,106,.5);
  color:var(--brass);border-radius:999px;padding:7px 18px;font-family:var(--f-head);font-size:14px}
.hero h1{font-size:32px;font-weight:700;margin-block-start:20px}
.hero h1 span{display:block}
.hero-sub{color:var(--mist);font-size:16px;margin-block-start:12px}
.stats{list-style:none;display:flex;justify-content:center;margin-block-start:22px}
.stats li{flex:1;max-width:150px;padding-inline:8px}
.stats li + li{border-inline-start:1px solid rgba(242,240,234,.16)}
.stats b{display:block;font-family:var(--f-head);font-size:20px;font-weight:700}
.stats span{display:block;font-size:13px;color:var(--mist)}
.creds{margin-block-start:16px;font-size:13.5px;color:var(--mist)}

/* 2 · ماذا تحتاج */
.needs{padding-block:40px}
.needs h2{margin-block-end:18px}
.need-list{display:grid;gap:12px}
.need{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;text-decoration:none;min-height:76px;
  transition:transform .16s ease,box-shadow .16s ease}
.need:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,38,39,.07)}
.need .ic{flex:0 0 42px;height:42px;border-radius:12px;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.need .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.need-t{flex:1}
.need-t b{display:block;font-size:17px;font-weight:600}
.need-t span{display:block;font-size:14.5px;color:var(--muted);line-height:1.6}
.need .arrow svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.need.dark{background:var(--night);border-color:var(--night)}
.need.dark .ic{background:rgba(242,240,234,.08)}
.need.dark .ic svg{stroke:var(--brass)}
.need.dark .need-t b{color:var(--cream)}
.need.dark .need-t span{color:var(--mist)}
.need.dark .arrow svg{stroke:var(--brass)}

/* 3 · الاستشارة */
.card-dark{background:var(--night);color:var(--cream);border-radius:22px;padding:26px 20px;margin-block-start:12px}
.card-dark h2{color:var(--cream)}
.card-dark p{color:var(--mist);font-size:15.5px}
.prices{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-block:22px}
.prices li{background:rgba(242,240,234,.07);border:1px solid rgba(242,240,234,.14);border-radius:16px;
  padding:14px 6px;text-align:center}
.prices b{display:block;font-family:var(--f-head);font-size:19px;font-weight:700}
.prices span{display:block;font-size:13px;color:var(--mist)}
.prices .best{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.prices .best span{color:var(--muted)}

/* 4 · الدورات */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.all-link{font-size:14px;color:var(--brass-text);text-decoration:none;border-block-end:1px solid transparent}
.all-link:hover{border-block-end-color:var(--brass)}
.tabs{display:flex;gap:10px;margin-block:16px 18px;flex-wrap:wrap}
.tab{font-family:var(--f-body);font-size:14.5px;font-weight:600;background:var(--white);
  border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:10px 18px;min-height:44px;
  cursor:pointer;transition:background .16s ease,color .16s ease}
.tab[aria-selected="true"]{background:var(--night);border-color:var(--night);color:var(--cream)}

.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block-end:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.course{flex:0 0 78%;scroll-snap-align:start;background:var(--white);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease}
.course:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,38,39,.07)}
.cover{position:relative;background:var(--night);color:var(--cream);min-height:132px;
  padding:20px 18px;display:flex;align-items:flex-end;overflow:hidden}
.cover.alt{background:var(--night-2)}
.cover::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(196,162,106,.45);inset-block-start:-42px;inset-inline-start:-34px}
.cover h3{position:relative;z-index:1;font-size:19px;font-weight:700;line-height:1.5}
.cover.pic{padding:0;min-height:0;aspect-ratio:4/3;background:var(--paper);display:block}
.cover.pic::after{display:none}
.cover.pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.course .body .t{font-size:17.5px;font-weight:700;line-height:1.5}
.badge{position:absolute;z-index:2;inset-block-start:12px;inset-inline-end:12px;background:var(--brass);
  color:var(--night);font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px}
.course .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.course .desc{font-size:14.5px;color:var(--muted);line-height:1.7;flex:1}
.course .price{font-size:15px;font-weight:600}
.course .price span{color:var(--muted);font-weight:400;font-size:14px}
.course .btn{min-height:48px;font-size:15.5px}

/* 5 · مجانًا */
.free-box{background:#EDEEE8;border-radius:22px;padding:24px 20px}
.chip{display:inline-block;background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--brass-text);margin-block-end:12px}
.free-box p{color:var(--muted);font-size:15.5px}
.free-list{list-style:none;display:grid;gap:10px;margin-block-start:18px}
.free-list a{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;text-decoration:none;min-height:60px;
  transition:transform .16s ease}
.free-list a:hover{transform:translateY(-2px)}
.free-list b{display:block;font-size:16px;font-weight:600}
.free-list span{display:block;font-size:13.5px;color:var(--muted)}
.free-list .thumb{flex:0 0 58px;width:58px;height:58px;border-radius:14px;object-fit:cover;
  object-position:center;border:1px solid var(--line)}
.free-list .play{margin-inline-start:auto;flex:0 0 36px;height:36px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center}
.free-list .play svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* 6 · تجارب */
.stories{margin-block-start:18px}
.story{flex:0 0 84%;scroll-snap-align:start;background:var(--white);border:1px solid var(--line);
  border-radius:20px;padding:22px 20px}
.quote{display:block;font-family:var(--f-head);font-size:30px;color:var(--brass);line-height:1}
.result{font-size:19px;font-weight:600;margin-block:6px 14px}
.bubble{background:var(--wa-bubble);border-radius:16px;padding:14px 16px;font-size:14.5px;
  color:var(--ink-2);line-height:1.8}
.src{margin-block-start:12px;font-size:12.5px;color:var(--muted)}
.dots{display:flex;gap:8px;justify-content:center;margin-block-start:14px}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.dots button[aria-selected="true"]{background:var(--brass)}

/* 7 · نبذة */
.about-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:20px;
  display:flex;align-items:center;gap:16px}
.avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:2px solid var(--brass);flex:0 0 70px}
.about-card b{font-size:17px;font-weight:600}
.about-card p{font-size:14.5px;color:var(--muted);line-height:1.7}
.about-actions{display:flex;align-items:center;gap:16px;margin-block-start:14px;flex-wrap:wrap}
.about-actions .btn{flex:1;min-width:200px}
.text-link{font-size:15px;color:var(--brass-text);text-decoration:none;border-block-end:1px solid transparent}
.text-link:hover{border-block-end-color:var(--brass)}

/* 8 · الخاتمة */
.foot{background:var(--night);color:var(--cream);text-align:center;padding-block:36px 28px;margin-block-start:34px}
.f-logo{font-size:22px;font-weight:700}
.f-line{color:var(--mist);font-size:14.5px;margin-block-start:4px}
.f-btns{display:flex;gap:10px;justify-content:center;margin-block-start:18px}
.f-btns a{border:1px solid rgba(242,240,234,.3);border-radius:999px;padding:9px 20px;font-size:14px;
  text-decoration:none;color:var(--cream);min-height:44px;display:flex;align-items:center}
.f-btns a:hover{border-color:var(--brass);color:var(--brass)}
.f-copy{margin-block-start:20px;font-size:12.5px;color:var(--mist)}

/* الكمبيوتر */
@media (min-width:900px){
  body{font-size:17px}
  .sec{padding-block:64px}
  h2{font-size:30px}
  .menu-btn{display:none}
  .nav-wide{display:flex}
  .menu-panel{display:none}
  .hero{padding-block:56px 64px;text-align:start}
  .hero-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
  .hero-media{order:2}
  .arch{width:320px}
  .hero h1{font-size:46px;margin-block-start:0}
  .hero-sub{font-size:18px}
  .stats{justify-content:flex-start}
  .stats li{max-width:170px}
  .need-list{grid-template-columns:repeat(3,1fr)}
  .need{flex-direction:column;align-items:flex-start;gap:12px;padding:22px;min-height:190px}
  .need .arrow{align-self:flex-end;margin-block-start:auto}
  .card-dark{padding:40px 36px}
  .card-dark .btn{max-width:340px}
  .prices{max-width:560px}
  .rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;gap:18px}
  .course,.story{flex:initial}
  .stories{grid-template-columns:repeat(3,1fr)}
  .dots{display:none}
  .free-box{padding:36px 32px}
  .free-list{grid-template-columns:repeat(2,1fr)}
  .about-card{padding:26px 28px}
  .about-actions .btn{max-width:280px;flex:initial}
}

/* الحركة */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
  .js .reveal.on{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}