:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --accent:#6ee7ff;
  --accent2:#a67aff;
  --shadow: 0 16px 50px rgba(0,0,0,.35);
  --r:18px;
  --nav: rgba(11,18,32,.78);
  --grid: .28;
}

html[data-theme="light"]{
  --bg:#f7f8fb;
  --card:rgba(10,14,23,.045);
  --border:rgba(10,14,23,.12);
  --text:rgba(10,14,23,.92);
  --muted:rgba(10,14,23,.62);
  --accent:#2563eb;
  --accent2:#7c3aed;
  --shadow: 0 16px 44px rgba(10,14,23,.12);
  --nav: rgba(247,248,251,.86);
  --grid: .18;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.container{ width:min(1040px, calc(100% - 32px)); margin:0 auto; }

a{ color:inherit; }
strong{ color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.accent{ color: var(--accent); }

.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9), rgba(0,0,0,0) 70%);
  opacity: var(--grid);
}
.blob{
  position:absolute;
  width:680px; height:680px;
  border-radius:999px;
  filter: blur(30px);
  opacity:.35;
  animation: float 10s ease-in-out infinite;
}
.b1{
  top:-280px; left:-280px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 75%, white 25%), transparent 60%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent2) 75%, white 25%), transparent 55%);
}
.b2{
  bottom:-320px; right:-320px;
  animation-delay:-2.5s;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent2) 75%, white 25%), transparent 60%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent) 75%, white 25%), transparent 55%);
}
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(14px,16px) scale(1.03); }
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background: var(--nav);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; font-weight:900;
}

.brand__mark{
  width:42px;
  height:42px;
  display:flex;             
  align-items:center;
  justify-content:center;
  gap:1px;                 
  border-radius:14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -1px;
}
.nav__links{
  display:flex; gap:6px; align-items:center;
}
.nav__link{
  text-decoration:none;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-weight: 850;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.nav__link:hover, .nav__link.active{
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.nav__actions{ display:flex; gap:10px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  font-weight: 900;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn--primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color:#07101c;
}
.btn--ghost{ background: color-mix(in srgb, var(--text) 4%, transparent); }
.btn--sm{ padding:10px 12px; border-radius:14px; font-size:13px; }

.toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.toggle__text{ font-size: 12px; opacity:.85; }

.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  cursor:pointer;
  padding: 10px;
}
.burger span{
  display:block;
  height:2px;
  background: color-mix(in srgb, var(--text) 90%, transparent);
  border-radius: 2px;
  margin: 5px 0;
}

/* Mobile menu */
.mobile{
  display:none;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--nav);
  backdrop-filter: blur(10px);
}
.mobile.open{ display:block; }
.mobile__link{
  display:block;
  padding: 14px 16px;
  text-decoration:none;
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.mobile__actions{ padding: 14px 16px; display:flex; gap:10px; flex-wrap:wrap; }

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
  padding: 30px 0 10px;
  align-items:start;
}
.title{
  margin: 10px 0 6px;
  font-size: clamp(34px, 4.5vw, 54px);
  letter-spacing:-.8px;
}
.role{
  margin: 0 0 12px;
  font-weight: 900;
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
}
.lead{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 62ch;
}
.caret{
  display:inline-block;
  width: 10px;
  height: 22px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 90%, white 10%);
  margin-left: 6px;
  transform: translateY(4px);
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-weight: 850;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background:#34d399;
  box-shadow: 0 0 0 5px rgba(52,211,153,.15);
}
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 14px 0 10px; }

.links{ display:flex; gap:12px; flex-wrap:wrap; }
.link{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  text-decoration:none;
  font-weight: 850;
  color: color-mix(in srgb, var(--text) 84%, transparent);
}
.link:hover{ filter: brightness(1.05); }

.quick{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick__item{
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  padding: 12px;
}
.quick__kpi{ font-weight: 950; font-size: 16px; }
.quick__txt{ margin-top: 6px; color: var(--muted); font-weight: 800; font-size: 12px; }

/* RIGHT SIDE */
.hero__side{ display:flex; flex-direction:column; gap: 12px; }

/* Photo card (SHORTER) */
.photoCard{
  position:relative;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.photoCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r) + 2px);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity:.35;
  pointer-events:none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:2px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.photoCard__shine{
  position:absolute;
  inset:-120px;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.06) 52%, transparent 65%);
  transform: translateX(-55%) rotate(10deg);
  animation: shine 5.6s ease-in-out infinite;
  pointer-events:none;
  opacity:.0;
}
@keyframes shine{
  0%, 60%{ transform: translateX(-55%) rotate(10deg); opacity:0; }
  70%{ opacity:.75; }
  100%{ transform: translateX(55%) rotate(10deg); opacity:0; }
}

/* ✅ THE IMPORTANT PART: shorter height */
.photoCard__img{
  width:100%;
  height: 260px;               /* <<< shorter */
  object-fit: cover;
  object-position: center 25%; /* يرفع الصورة شوية لو الوجه فوق */
  display:block;
  transform: translateZ(18px);
  filter: contrast(1.06) saturate(1.08);
  transition: transform .25s ease, filter .25s ease;
}
.photoCard:hover .photoCard__img{
  transform: translateZ(22px) scale(1.01);
  filter: contrast(1.08) saturate(1.12);
}

.photoCard__meta{
  padding: 12px 14px 14px;
}
.photoCard__name{ font-weight: 950; }
.photoCard__tag{ margin-top: 6px; color: var(--muted); font-weight: 850; font-size: 13px; }

.miniCard{
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px;
}
.miniCard__row{ display:flex; gap: 10px; flex-wrap:wrap; margin-bottom: 10px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.miniCard__text{ margin:0; color: var(--muted); line-height:1.7; }

/* SECTIONS */
.section{ padding: 40px 0 0; }
.section__head{ margin-bottom: 12px; }
.section__title{ margin:0 0 8px; font-size: 26px; letter-spacing:-.4px; }
.section__sub{ margin:0; color: var(--muted); }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Skills */
.skills{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.skill{
  padding: 14px;
  transition: transform .16s ease, border-color .16s ease;
}
.skill:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.skill__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  margin-bottom: 10px;
  font-size: 18px;
}
.skill__name{ font-weight: 950; }
.skill__hint{ margin-top: 4px; color: var(--muted); font-weight: 800; font-size: 12px; }

/* Experience */
.xp{ display:grid; gap: 12px; }
.xp__item{ padding: 16px; }
.xp__top{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; }
.xp__title{ margin:0 0 6px; font-weight: 950; }
.xp__meta{ color: var(--muted); font-weight: 850; }
.xp__list{ margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height:1.75; }
.xp__p{ margin: 12px 0 0; color: var(--muted); line-height:1.75; }
.pill2{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  white-space: nowrap;
}

/* Projects */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px; }
.filter{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
}
.filter.active{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent)
  );
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}
.projects{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.project{ padding: 16px; transition: transform .16s ease, border-color .16s ease; }
.project:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.project__title{ margin:0 0 8px; font-weight: 950; }
.project__desc{ margin:0; color: var(--muted); line-height:1.7; }
.project__row{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tag{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap;
}
.project__links{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact__left{ padding: 16px; }
.contactRow{
  display:flex; gap: 12px; align-items:center;
  text-decoration:none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  margin-bottom: 10px;
  transition: transform .16s ease, border-color .16s ease;
}
.contactRow:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.contactRow__icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.contactRow__title{ display:block; font-weight: 950; }
.contactRow__value{ display:block; margin-top: 4px; color: var(--muted); font-weight: 850; font-size: 13px; }
.contact__btns{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }

.contact__right{ padding: 16px; }
.formTitle{ margin: 0 0 10px; font-weight: 950; }
.field{ display:block; margin-top: 10px; font-weight: 900; }
.field span{ display:block; margin-bottom: 8px; }
input, textarea{
  width:100%;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus{ border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.note{ margin: 10px 0 0; color: var(--muted); font-size: 13px; }

/* Footer */
.footer{ padding: 36px 0 44px; }
.footer__inner{
  display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  padding-top: 16px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}
.footer__links{ display:flex; gap: 14px; flex-wrap:wrap; }
.footer__links a{ text-decoration:none; font-weight: 850; color: color-mix(in srgb, var(--text) 80%, transparent); }
.footer__links a:hover{ color: var(--text); }

/* Toast */
.toast{
  position:fixed;
  left:50%; bottom:18px;
  transform: translateX(-50%);
  display:none;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  z-index: 100;
}
html[data-theme="light"] .toast{ background: rgba(10,14,23,.78); }

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.show{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .skills{ grid-template-columns: repeat(3, 1fr); }
  .projects{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}
@media (max-width: 520px){
  .skills{ grid-template-columns: repeat(2, 1fr); }
  .photoCard__img{ height: 240px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .blob{ animation:none !important; }
  .caret{ animation:none !important; }
  .photoCard__shine{ animation:none !important; opacity:.25; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}