:root{
  --navy:#0B1F3A; --slate:#4A5B75; --blue:#2563EB; --blue-d:#1D4ED8;
  --tint:#DBEAFE; --alt:#F4F8FF; --sky:#38BDF8; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--navy);background:var(--white);line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{width:min(1120px,92%);margin-inline:auto}
.narrow{width:min(760px,92%)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--tint)}
.nav-in{display:flex;align-items:center;gap:24px;height:66px}
.brand{font-weight:700;font-size:1.1rem;margin-inline-end:auto}
#links{display:flex;gap:22px;color:var(--slate);font-weight:500}
#links a:hover{color:var(--blue)}
.socials{display:flex;gap:14px;color:var(--slate);font-size:.9rem;font-weight:500}
.socials a:hover{color:var(--blue)}

/* buttons */
.btn{display:inline-block;background:var(--blue);color:var(--white);padding:12px 26px;border-radius:12px;font-weight:600;border:1px solid var(--blue);transition:background .2s}
.btn:hover{background:var(--blue-d)}
.btn-sm{padding:7px 18px;border-radius:10px;font-size:.95rem}
.btn-ghost{background:var(--white);color:var(--blue)}
.btn-ghost:hover{background:var(--tint)}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(72px,13vw,150px) 0 clamp(64px,10vw,120px);
  background:
    radial-gradient(620px 320px at 88% 0%,rgba(56,189,248,.30),transparent 70%),
    radial-gradient(560px 360px at 8% 25%,rgba(37,99,235,.20),transparent 70%),
    var(--white)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(#b9d2f5 1px,transparent 1.5px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.hero .wrap{position:relative}
.tag{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--blue);background:var(--tint);padding:2px 12px;border-radius:999px;margin-bottom:14px}
.hero h1{line-height:1.25;margin-bottom:18px}
.hello{display:block;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:500;color:var(--slate)}
.name{display:block;font-size:clamp(2.8rem,9vw,5.4rem);font-weight:700;background:linear-gradient(100deg,var(--navy) 5%,var(--blue-d) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{max-width:34em;font-size:1.15rem;color:var(--slate);margin-bottom:30px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .wrap>*{animation:rise .7s both}
.hero .wrap>*:nth-child(2){animation-delay:.1s}
.hero .wrap>*:nth-child(3){animation-delay:.2s}
.hero .wrap>*:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* sections */
section{padding:88px 0}
section.alt{background:var(--alt)}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin-bottom:22px;line-height:1.3}
h3{font-size:1.25rem;line-height:1.4;margin-bottom:6px}
h4{font-size:1rem;color:var(--blue);margin:18px 0 4px}
.lead{font-size:1.1rem;color:var(--slate);max-width:40em}
p{color:var(--slate)}

/* cards */
.card{background:var(--white);border:1px solid var(--tint);border-radius:18px;padding:28px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,99,235,.12)}
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card ul{margin-top:6px;color:var(--slate)}
.card li{position:relative;padding-inline-start:18px;margin-bottom:4px}
.card li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:7px;height:7px;border-radius:50%;background:var(--sky)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:var(--tint);color:var(--blue-d);font-size:.85rem;font-weight:500;padding:3px 12px;border-radius:999px}
.soon{background:var(--navy);color:var(--white);font-size:.75rem;vertical-align:middle;margin-inline-start:6px}

/* timeline */
.timeline{border-inline-start:2px solid var(--tint);padding-inline-start:26px}
.t-item{position:relative;margin-bottom:34px}
.t-item::before{content:"";position:absolute;inset-inline-start:-34px;top:.6em;width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid var(--white);box-shadow:0 0 0 2px var(--tint)}

/* skills */
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.skills .chips{margin-top:10px}

/* contact */
.panel{text-align:center;background:var(--alt);border:1px solid var(--tint);border-radius:24px;padding:clamp(36px,6vw,64px) 20px}
.panel .lead{margin:0 auto 26px}
.mail{margin-top:14px;font-weight:500}
footer{padding:26px 0;border-top:1px solid var(--tint);text-align:center;color:var(--slate);font-size:.9rem}

@media (max-width:760px){
  #links{display:none}
  .feature,.grid2,.skills{grid-template-columns:1fr}
  section{padding:64px 0}
  .socials{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .wrap>*{animation:none}
  .card{transition:none}
}

/* عرض الكود */
.card.wide{grid-column:1/-1}
.grid2{align-items:start}
.code{margin-top:18px}
.code summary{cursor:pointer;font-weight:600;color:var(--blue);width:fit-content}
.code summary:hover{color:var(--blue-d)}
.code pre{margin-top:12px;background:var(--navy);color:#DCE8FA;border-radius:12px;padding:18px;overflow-x:auto;text-align:left;font-size:.82rem;line-height:1.65;font-family:ui-monospace,Menlo,Consolas,monospace;max-height:420px;overflow-y:auto}

/* نقاط المشاركات */
.points{margin-top:8px;color:var(--slate)}
.points li{position:relative;padding-inline-start:18px;margin-bottom:6px}
.points li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:7px;height:7px;border-radius:50%;background:var(--sky)}