/* أحمد الـ عفيفي — الموقع الشخصي
   تصميم Editorial Dark/Gold — Cormorant Garamond + DM Sans + Space Mono */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root{
  --bg:          #F7F5EE;
  --bg-deep:     #EFEBDD;
  --bg-card:     #FFFFFF;
  --bg-glass:    rgba(255,255,255,0.85);
  --gold:        #A9822E;
  --gold-light:  #8F6D22;
  --gold-dim:    #8a7440;
  --gold-glow:   rgba(169,130,46,0.12);
  --ink:         #17140D;
  --ink-dim:     rgba(23,20,13,0.6);
  --ink-faint:   rgba(23,20,13,0.06);
  --border:      rgba(169,130,46,0.28);
  --border-soft: rgba(23,20,13,0.09);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Tajawal', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html[lang="ar"]{ --font-display:'Tajawal', serif; --font-body:'Tajawal','DM Sans',sans-serif; }

[data-theme="dark"]{
  --bg:          #050508;
  --bg-deep:     #08090d;
  --bg-card:     #0d0e15;
  --bg-glass:    rgba(13,14,21,0.85);
  --gold:        #c9a84c;
  --gold-light:  #e8c97a;
  --gold-dim:    #8a6d2f;
  --gold-glow:   rgba(201,168,76,0.15);
  --ink:         #f5f4f0;
  --ink-dim:     rgba(245,244,240,0.55);
  --ink-faint:   rgba(245,244,240,0.08);
  --border:      rgba(201,168,76,0.18);
  --border-soft: rgba(245,244,240,0.08);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; font-size:16px; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}
body.has-cursor{ cursor:none; }

::selection{ background: var(--gold); color:#050508; }
::-webkit-scrollbar{ width:3px; }
::-webkit-scrollbar-track{ background: var(--bg-deep); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:2px; }

img{ max-width:100%; }
a{ color:inherit; }
.container{ max-width:1200px; margin:0 auto; padding-inline:clamp(20px,5vw,48px); position:relative; z-index:1; }

/* ===== cursor ===== */
#cursor-dot{ width:6px; height:6px; background:var(--gold); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition: transform .1s var(--ease-smooth), width .3s, height .3s; }
#cursor-ring{ width:36px; height:36px; border:1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition: transform .18s var(--ease-smooth), width .3s, height .3s, border-color .3s; }
body.hovering #cursor-ring{ width:56px; height:56px; border-color:var(--gold); }
body.hovering #cursor-dot{ width:4px; height:4px; }
@media (max-width:992px){ #cursor-dot, #cursor-ring{ display:none; } }

/* ===== loader ===== */
#loader{ position:fixed; inset:0; z-index:99990; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2rem; transition:opacity .8s var(--ease-smooth), visibility .8s; }
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-monogram{ width:80px; height:80px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2.2rem; font-weight:300; color:var(--gold); position:relative; animation:monogramPulse 2s ease-in-out infinite; }
.loader-monogram::before{ content:''; position:absolute; inset:-8px; border:1px solid color-mix(in srgb, var(--gold) 15%, transparent); animation:monogramRotate 4s linear infinite; }
@keyframes monogramPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(169,130,46,.3);} 50%{ box-shadow:0 0 30px 10px rgba(169,130,46,.1);} }
@keyframes monogramRotate{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.loader-bar-container{ width:180px; height:1px; background:color-mix(in srgb, var(--gold) 15%, transparent); position:relative; overflow:hidden; }
.loader-bar{ height:100%; background:linear-gradient(90deg,transparent,var(--gold),transparent); width:0; animation:loaderFill 1.6s ease-in-out forwards; }
@keyframes loaderFill{ to{ width:100%; } }
.loader-text{ font-family:var(--font-mono); font-size:.6rem; color:var(--gold-dim); letter-spacing:.25em; text-transform:uppercase; }

/* ===== nav ===== */
#navbar{ position:fixed; top:0; inset-inline:0; z-index:9000; padding:1.5rem clamp(20px,5vw,3rem); display:flex; align-items:center; justify-content:space-between; transition:all .5s var(--ease-smooth); gap:1rem; }
#navbar.scrolled{ background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(20px); padding:1rem clamp(20px,5vw,3rem); border-bottom:1px solid var(--border); }
.nav-logo{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:.03em; white-space:nowrap; }
.nav-logo span{ color:var(--gold); }
.nav-links{ display:flex; gap:2rem; list-style:none; }
.nav-links a{ font-family:var(--font-mono); font-size:.72rem; font-weight:400; color:var(--ink-dim); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; position:relative; transition:color .3s; }
html[lang="ar"] .nav-links a{ font-family:var(--font-body); font-size:.85rem; font-weight:700; letter-spacing:0; }
.nav-links a::after{ content:''; position:absolute; bottom:-4px; inset-inline-start:0; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease-smooth); }
.nav-links a:hover{ color:var(--gold); }
.nav-links a:hover::after{ width:100%; }
.nav-tools{ display:flex; align-items:center; gap:.6rem; }
.icon-btn{ width:36px; height:36px; border-radius:2px; border:1px solid var(--border); background:transparent; color:var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:var(--font-mono); font-size:.68rem; font-weight:700; transition:all .3s; }
.icon-btn:hover{ background:var(--gold); color:var(--bg); }
.nav-cta{ font-family:var(--font-mono); font-size:.65rem; font-weight:700; color:var(--gold); text-decoration:none; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--gold); padding:.55rem 1.2rem; transition:all .3s; white-space:nowrap; }
html[lang="ar"] .nav-cta{ font-family:var(--font-body); font-size:.82rem; letter-spacing:0; text-transform:none; }
.nav-cta:hover{ background:var(--gold); color:var(--bg); }
.nav-hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.nav-hamburger span{ display:block; width:22px; height:1px; background:var(--ink); }
.nav-mobile{ display:none; position:fixed; inset:0; z-index:8999; background:color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter:blur(30px); flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.nav-mobile.open{ display:flex; }
.nav-mobile a{ font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--ink); text-decoration:none; }
.nav-mobile a:hover{ color:var(--gold); }
@media (max-width:992px){ #navbar{ padding:1.1rem 1.2rem; } .nav-links{ display:none; } .nav-cta{ display:none; } .nav-hamburger{ display:flex; } }

/* ===== hero ===== */
#hero{ min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:8rem 0 4rem; }
.hero-canvas{ position:absolute; inset:0; z-index:0; }
.hero-grid-bg{ position:absolute; inset:0; z-index:1; background-image:linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); }
.hero-glow{ position:absolute; z-index:1; width:600px; height:600px; background:radial-gradient(circle, var(--gold-glow) 0%, transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; } }

.hero-badge{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.6rem; font-weight:700; color:var(--gold); letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--border); padding:.5rem 1.1rem; margin-bottom:2rem; }
html[lang="ar"] .hero-badge{ font-family:var(--font-body); font-size:.82rem; letter-spacing:0; text-transform:none; }
.hero-badge::before{ content:''; width:6px; height:6px; background:var(--gold); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(.7);} }

.hero-name{ font-family:var(--font-display); font-size:clamp(3rem,7.5vw,6.5rem); font-weight:300; line-height:.98; letter-spacing:-0.01em; color:var(--ink); margin-bottom:.4rem; text-wrap:balance; }
html[lang="ar"] .hero-name{ font-weight:900; line-height:1.08; }
.hero-name em{ font-style:italic; color:var(--gold); }
html[lang="ar"] .hero-name em{ font-style:normal; }

.hero-role{ font-family:var(--font-mono); font-size:clamp(.68rem,1.1vw,.82rem); font-weight:400; color:var(--gold-dim); letter-spacing:.18em; text-transform:uppercase; margin-bottom:2rem; min-height:1.4em; }
html[lang="ar"] .hero-role{ font-family:var(--font-body); font-size:1rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--gold); }
.cursor-blink{ display:inline-block; width:2px; height:1em; background:var(--gold); vertical-align:middle; margin-inline-start:2px; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-tagline{ font-family:var(--font-display); font-size:clamp(1.05rem,2.2vw,1.5rem); font-weight:300; color:var(--ink-dim); line-height:1.5; margin-bottom:1.3rem; }
html[lang="ar"] .hero-tagline{ font-family:var(--font-body); font-weight:500; }
.hero-tagline strong{ color:var(--ink); font-weight:500; }

.hero-intro{ font-size:.92rem; color:var(--ink-dim); max-width:56ch; line-height:1.85; margin-bottom:2.6rem; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:3rem; }
.btn-gold{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; background:var(--gold); color:var(--bg); padding:.9rem 1.7rem; border:1px solid var(--gold); transition:all .3s var(--ease-smooth); cursor:pointer; }
html[lang="ar"] .btn-gold{ font-family:var(--font-body); font-size:.85rem; letter-spacing:0; text-transform:none; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -10px var(--gold-glow); }
.btn-outline{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; background:transparent; color:var(--gold); padding:.9rem 1.7rem; border:1px solid var(--border); transition:all .3s var(--ease-smooth); cursor:pointer; }
html[lang="ar"] .btn-outline{ font-family:var(--font-body); font-size:.85rem; letter-spacing:0; text-transform:none; }
.btn-outline:hover{ border-color:var(--gold); background:var(--gold-glow); }

.hero-stats{ display:flex; gap:clamp(1.5rem,4vw,2.6rem); flex-wrap:wrap; }
.hero-stat b{ font-family:var(--font-display); font-size:2.4rem; font-weight:300; color:var(--ink); line-height:1; display:block; font-variant-numeric:tabular-nums; }
.hero-stat b span{ color:var(--gold); }
.hero-stat em{ font-family:var(--font-mono); font-style:normal; font-size:.58rem; color:var(--gold-dim); letter-spacing:.14em; text-transform:uppercase; display:block; margin-top:.3rem; }
html[lang="ar"] .hero-stat em{ font-family:var(--font-body); font-size:.72rem; letter-spacing:0; }

.hero-visual{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.hero-frame{ position:relative; width:min(400px,88vw); }
.hero-frame::before{ content:''; position:absolute; top:-18px; inset-inline-end:-18px; width:55%; height:55%; border-top:1px solid var(--gold); border-inline-end:1px solid var(--gold); opacity:.4; }
.hero-frame::after{ content:''; position:absolute; bottom:-18px; inset-inline-start:-18px; width:55%; height:55%; border-bottom:1px solid var(--gold); border-inline-start:1px solid var(--gold); opacity:.4; }
.hero-img-wrap{ width:100%; aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:50%; }
.hero-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.hero-img-tag{ position:absolute; bottom:1.2rem; inset-inline-start:0; right:0; text-align:center; font-family:var(--font-mono); font-size:.55rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; }
html[lang="ar"] .hero-img-tag{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }

/* ===== section utils ===== */
section{ padding:6rem 0; position:relative; }
.divider{ width:100%; height:1px; background:var(--border-soft); border:none; }
.section-label{ font-family:var(--font-mono); font-size:.6rem; font-weight:700; color:var(--gold-dim); letter-spacing:.22em; text-transform:uppercase; display:flex; align-items:center; gap:.9rem; margin-bottom:1.3rem; }
html[lang="ar"] .section-label{ font-family:var(--font-body); font-size:.8rem; letter-spacing:0; }
.section-label::before{ content:''; flex:0 0 36px; height:1px; background:var(--gold); }
.section-title{ font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.4rem); font-weight:300; line-height:1.1; color:var(--ink); margin-bottom:1.2rem; text-wrap:balance; }
html[lang="ar"] .section-title{ font-weight:900; }
.section-title em{ font-style:italic; color:var(--gold); }
html[lang="ar"] .section-title em{ font-style:normal; }
.section-desc{ font-size:.92rem; color:var(--ink-dim); max-width:58ch; line-height:1.8; }

/* ===== summary/about ===== */
#summary{ background:var(--bg-deep); }
.summary-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); }
@media (max-width:840px){ .summary-grid{ grid-template-columns:1fr; } }
.summary-highlights{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.summary-highlight{ background:var(--ink-faint); border:1px solid var(--border); padding:.3rem .85rem; font-family:var(--font-mono); font-size:.6rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
html[lang="ar"] .summary-highlight{ font-family:var(--font-body); font-size:.78rem; letter-spacing:0; }
.summary-quote{ font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.9rem); font-weight:300; font-style:italic; line-height:1.5; color:var(--ink); border-inline-start:2px solid var(--gold); padding-inline-start:1.6rem; margin-bottom:1.6rem; }
html[lang="ar"] .summary-quote{ font-style:normal; }
.summary-body{ font-size:.92rem; color:var(--ink-dim); line-height:2; margin-bottom:.8rem; }
.summary-edu{ margin-top:1.6rem; border-inline-start:1px solid var(--border); padding-inline-start:1.3rem; }
.summary-edu .k{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.3rem; }
html[lang="ar"] .summary-edu .k{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }
.summary-edu .v{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); }
.summary-edu .s{ font-family:var(--font-mono); font-size:.62rem; color:var(--gold); letter-spacing:.1em; }
html[lang="ar"] .summary-edu .s{ font-family:var(--font-body); font-size:.8rem; letter-spacing:0; }
.cv-links{ display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap; }

/* ===== impact / achievements ===== */
.achievement-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); }
.achievement-card{ background:var(--bg); padding:2.2rem; position:relative; transition:background .4s; overflow:hidden; }
[data-theme="dark"] .achievement-card{ background:var(--bg); }
.achievement-card::before{ content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); transition:width .5s var(--ease-smooth); }
.achievement-card:hover::before{ width:100%; }
.achievement-card:hover{ background:var(--bg-card); }
.achievement-icon{ width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.5rem; font-family:var(--font-display); margin-bottom:1.2rem; }
.achievement-card h4{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink); margin-bottom:.6rem; }
html[lang="ar"] .achievement-card h4{ font-weight:800; }
.achievement-card p{ font-size:.82rem; color:var(--ink-dim); line-height:1.7; }

/* ===== stats bar ===== */
#stats{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3.5rem 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border-soft); }
@media (max-width:768px){ .stats-grid{ grid-template-columns:repeat(2,1fr);} }
.stat-item{ background:var(--bg); text-align:center; padding:2rem .8rem; position:relative; overflow:hidden; }
.stat-item::after{ content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--gold); transition:width .5s var(--ease-smooth); }
.stat-item:hover::after{ width:55%; }
.stat-num{ font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:300; color:var(--ink); line-height:1; margin-bottom:.4rem; font-variant-numeric:tabular-nums; }
.stat-num sup{ font-size:.45em; color:var(--gold); vertical-align:top; }
.stat-label{ font-family:var(--font-mono); font-size:.56rem; color:var(--gold-dim); letter-spacing:.14em; text-transform:uppercase; }
html[lang="ar"] .stat-label{ font-family:var(--font-body); font-size:.72rem; letter-spacing:0; }

/* ===== expertise ===== */
#expertise{ background:var(--bg-deep); }
.expertise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft); }
@media (max-width:768px){ .expertise-grid{ grid-template-columns:repeat(2,1fr);} }
.expertise-item{ background:var(--bg-deep); padding:1.7rem 1.2rem; text-align:center; position:relative; transition:background .3s; }
.expertise-item::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at center, var(--gold-glow), transparent 70%); opacity:0; transition:opacity .4s; }
.expertise-item:hover{ background:var(--bg-card); }
.expertise-item:hover::after{ opacity:1; }
.expertise-item i{ font-size:1.35rem; color:var(--gold); display:block; margin-bottom:.8rem; transition:transform .35s var(--ease-smooth); }
.expertise-item:hover i{ transform:translateY(-3px); color:var(--gold-light); }
.expertise-name{ font-size:.78rem; font-weight:500; color:var(--ink); letter-spacing:.03em; }
html[lang="ar"] .expertise-name{ font-size:.85rem; font-weight:700; }

/* ===== experience timeline ===== */
.timeline{ position:relative; padding-inline-start:2px; }
.timeline::before{ content:''; position:absolute; top:0; inset-inline-start:0; bottom:0; width:1px; background:linear-gradient(to bottom, var(--gold), var(--border-soft)); }
.timeline-item{ position:relative; padding:0 0 3rem 2.6rem; }
html[dir="rtl"] .timeline-item{ padding:0 2.6rem 3rem 0; }
.timeline-dot{ position:absolute; inset-inline-start:-6px; top:.3rem; width:12px; height:12px; border:1px solid var(--gold); border-radius:50%; background:var(--bg); }
.timeline-item:hover .timeline-dot{ background:var(--gold); }
.exp-card{ background:var(--bg-card); border:1px solid var(--border-soft); padding:1.8rem 2rem; position:relative; transition:border-color .4s, transform .3s; overflow:hidden; }
.exp-card::before{ content:''; position:absolute; top:0; inset-inline-start:0; width:2px; height:0; background:var(--gold); transition:height .5s var(--ease-smooth); }
.timeline-item:hover .exp-card{ border-color:var(--border); transform:translateX(3px); }
html[dir="rtl"] .timeline-item:hover .exp-card{ transform:translateX(-3px); }
.timeline-item:hover .exp-card::before{ height:100%; }
.exp-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.exp-company{ font-family:var(--font-display); font-size:1.2rem; font-weight:500; color:var(--ink); margin-bottom:.15rem; }
html[lang="ar"] .exp-company{ font-weight:800; }
.exp-role{ font-family:var(--font-mono); font-size:.6rem; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; }
html[lang="ar"] .exp-role{ font-family:var(--font-body); font-size:.78rem; letter-spacing:0; font-weight:700; }
.exp-date{ font-family:var(--font-mono); font-size:.62rem; color:var(--ink-dim); white-space:nowrap; }
html[lang="ar"] .exp-date{ font-family:var(--font-body); font-size:.78rem; }
.exp-desc{ font-size:.85rem; color:var(--ink-dim); line-height:1.8; margin-bottom:.8rem; }
.exp-more summary{ cursor:pointer; font-family:var(--font-mono); font-size:.65rem; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; list-style:none; margin-top:.5rem; }
html[lang="ar"] .exp-more summary{ font-family:var(--font-body); font-size:.82rem; letter-spacing:0; }
.exp-more summary::-webkit-details-marker{ display:none; }
.exp-more ul{ list-style:none; margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.exp-more li{ font-size:.82rem; color:var(--ink-dim); border-inline-start:1px solid var(--border); padding-inline-start:.9rem; }
.exp-more li b{ color:var(--ink); }

/* ===== projects ===== */
#projects{ background:var(--bg-deep); }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.project-card{ background:var(--bg-card); border:1px solid var(--border-soft); padding:1.7rem; position:relative; overflow:hidden; transition:all .4s var(--ease-smooth); display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.project-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, var(--gold-glow), transparent 60%); opacity:0; transition:opacity .5s; }
.project-card:hover{ border-color:var(--border); transform:translateY(-5px); }
.project-card:hover::before{ opacity:1; }
.project-logo-wrap{ width:56px; height:56px; background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:1.2rem; flex-shrink:0; }
.project-logo-wrap img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.project-logo-placeholder{ width:56px; height:56px; background:var(--bg-glass); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; color:var(--gold); margin-bottom:1.2rem; }
.project-name{ font-family:var(--font-display); font-size:1.2rem; font-weight:400; color:var(--ink); margin-bottom:.3rem; }
html[lang="ar"] .project-name{ font-weight:800; }
.project-url{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); letter-spacing:.1em; margin-bottom:.8rem; }
.project-desc{ font-size:.8rem; color:var(--ink-dim); line-height:1.7; flex:1; margin-bottom:1.2rem; }
.project-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.58rem; font-weight:700; color:var(--gold); text-decoration:none; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--border); padding:.45rem .9rem; width:fit-content; }
html[lang="ar"] .project-link{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }
.project-card:hover .project-link{ border-color:var(--gold); background:var(--gold-glow); }

.case{ margin-top:2.4rem; display:grid; grid-template-columns:.8fr 1.2fr; border:1px solid var(--border-soft); background:var(--bg-card); }
@media (max-width:780px){ .case{ grid-template-columns:1fr;} }
.case-media{ display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--bg); }
.case-media img{ max-width:160px; border-radius:10px; }
.case-body{ padding:clamp(1.8rem,4vw,2.6rem); }
.case-body h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; margin:.6rem 0 1rem; color:var(--ink); }
html[lang="ar"] .case-body h3{ font-weight:800; }
.case-body p{ color:var(--ink-dim); font-size:.9rem; line-height:1.8; }
.case-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.case-tags span{ font-family:var(--font-mono); font-size:.58rem; font-weight:700; padding:.35rem .8rem; border:1px solid var(--border); color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
html[lang="ar"] .case-tags span{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }

/* ===== skills & languages ===== */
.skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); }
@media (max-width:840px){ .skills-grid{ grid-template-columns:1fr; } }
.skill-row{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.2rem; }
.skill-label{ min-width:170px; font-size:.82rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skill-bar-bg{ flex:1; height:2px; background:var(--border-soft); position:relative; overflow:hidden; }
.skill-bar-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); width:0; transition:width 1.4s var(--ease-smooth); }
.skill-pct{ font-family:var(--font-mono); font-size:.62rem; color:var(--gold); min-width:34px; text-align:end; }

.lang-card{ background:var(--bg-card); border:1px solid var(--border-soft); padding:1.2rem 1.6rem; display:flex; align-items:center; gap:1.2rem; margin-bottom:.8rem; }
.lang-flag{ font-size:1.7rem; line-height:1; }
.lang-name{ font-family:var(--font-display); font-size:1.05rem; font-weight:400; color:var(--ink); }
html[lang="ar"] .lang-name{ font-weight:800; }
.lang-level{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; }
html[lang="ar"] .lang-level{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }
.lang-dots{ display:flex; gap:4px; margin-inline-start:auto; }
.lang-dot{ width:7px; height:7px; border-radius:50%; background:var(--border); }
.lang-dot.active{ background:var(--gold); }
.tools-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.tool-tag{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); border:1px solid var(--border); padding:.3rem .75rem; letter-spacing:.1em; text-transform:uppercase; }
html[lang="ar"] .tool-tag{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }

/* ===== education ===== */
#education{ background:var(--bg-deep); }
.edu-card{ background:var(--bg-card); border:1px solid var(--border-soft); padding:2.4rem; position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:1.8rem; }
.edu-card::before{ content:''; position:absolute; top:0; inset-inline-start:0; width:3px; height:100%; background:linear-gradient(to bottom,var(--gold),var(--gold-dim)); }
.edu-icon{ width:60px; height:60px; background:var(--gold-glow); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--gold); flex-shrink:0; }
.edu-degree{ font-family:var(--font-display); font-size:1.5rem; font-weight:300; color:var(--ink); margin-bottom:.25rem; }
html[lang="ar"] .edu-degree{ font-weight:800; }
.edu-institution{ font-family:var(--font-mono); font-size:.62rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem; }
html[lang="ar"] .edu-institution{ font-family:var(--font-body); font-size:.8rem; letter-spacing:0; }
@media (max-width:640px){ .edu-card{ flex-direction:column; padding:1.6rem; } }

/* ===== certifications ===== */
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1px; background:var(--border-soft); }
.cert-card{ background:var(--bg); padding:1.7rem 1.3rem; text-align:center; transition:all .35s var(--ease-smooth); position:relative; }
[data-theme="dark"] .cert-card{ background: var(--bg); }
.cert-card:hover{ background:var(--bg-card); transform:translateY(-3px); }
.cert-icon{ width:42px; height:42px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--gold); margin:0 auto .8rem; transition:all .35s; }
.cert-card:hover .cert-icon{ background:var(--gold-glow); border-color:var(--gold); }
.cert-name{ font-size:.78rem; font-weight:500; color:var(--ink); line-height:1.35; margin-bottom:.4rem; }
html[lang="ar"] .cert-name{ font-weight:700; }
.cert-issuer{ font-family:var(--font-mono); font-size:.55rem; color:var(--gold-dim); letter-spacing:.1em; text-transform:uppercase; }
html[lang="ar"] .cert-issuer{ font-family:var(--font-body); font-size:.7rem; letter-spacing:0; }
.cert-file-link{ display:inline-block; margin-top:.5rem; font-size:.65rem; color:var(--gold); text-decoration:none; border-bottom:1px dashed var(--gold); }

/* ===== contact ===== */
#contact{ background:var(--bg-deep); position:relative; }
#contact::before{ content:''; position:absolute; bottom:0; left:50%; width:600px; max-width:80%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:translateX(-50%); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{ background:var(--bg-card); border:1px solid var(--border-soft); padding:1.6rem; margin-bottom:.9rem; display:flex; align-items:center; gap:1.2rem; transition:border-color .3s, transform .3s; text-decoration:none; color:var(--ink); }
.contact-info-card:hover{ border-color:var(--border); transform:translateX(4px); }
html[dir="rtl"] .contact-info-card:hover{ transform:translateX(-4px); }
.contact-info-icon{ width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.95rem; flex-shrink:0; }
.contact-info-label{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.2rem; }
html[lang="ar"] .contact-info-label{ font-family:var(--font-body); font-size:.72rem; letter-spacing:0; }
.contact-info-value{ font-size:.88rem; color:var(--ink); direction:ltr; text-align:start; }
.contact-avail{ margin-top:1.6rem; padding:1.6rem; background:var(--bg-card); border:1px solid var(--border-soft); }
.contact-avail .k{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; }
html[lang="ar"] .contact-avail .k{ font-family:var(--font-body); font-size:.75rem; letter-spacing:0; }
.avail-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* ===== footer ===== */
footer{ background:var(--bg); border-top:1px solid var(--border); padding:2.6rem 0; text-align:center; }
.footer-monogram{ font-family:var(--font-display); font-size:1.7rem; font-weight:300; color:var(--gold); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); width:54px; height:54px; margin-bottom:1.2rem; }
.footer-tagline{ font-family:var(--font-mono); font-size:.58rem; color:var(--gold-dim); letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.2rem; }
html[lang="ar"] .footer-tagline{ font-family:var(--font-body); font-size:.78rem; letter-spacing:0; }
.footer-copy{ font-size:.75rem; color:var(--ink-faint); }
.admin-link{ display:inline-block; margin-top:.9rem; font-size:.68rem; color:var(--ink-dim); text-decoration:none; opacity:.55; }
.admin-link:hover{ opacity:1; color:var(--gold); }

#back-top{ position:fixed; bottom:2rem; inset-inline-end:2rem; width:44px; height:44px; border:1px solid var(--border); background:var(--bg-glass); backdrop-filter:blur(10px); color:var(--gold); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:500; opacity:0; visibility:hidden; transition:all .35s var(--ease-smooth); font-size:.85rem; }
#back-top.visible{ opacity:1; visibility:visible; }
#back-top:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

/* ===================================================
   لوحة التحكم — تصميم متسق مع الهوية
   =================================================== */
.admin-body{ min-height:100vh; cursor:auto !important; }
.admin-shell{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
@media (max-width:860px){ .admin-shell{ grid-template-columns:1fr; } }
.admin-side{ background:var(--bg-deep); border-inline-end:1px solid var(--border-soft); padding:26px 18px; }
.admin-side .brand{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-bottom:26px; display:block; color:var(--ink); }
.admin-nav{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.admin-nav a{ display:block; padding:10px 14px; border-radius:4px; text-decoration:none; color:var(--ink-dim); font-weight:600; font-size:.85rem; }
.admin-nav a:hover{ background:var(--bg-card); color:var(--gold); }
.admin-main{ padding:clamp(20px,4vw,44px); max-width:960px; }
.admin-card{ background:var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:26px; margin-bottom:26px; }
.admin-card h2{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
html[lang="ar"] .admin-card h2{ font-family:var(--font-body); font-weight:800; }
.admin-card .hint{ color:var(--ink-dim); font-size:.85rem; margin-bottom:18px; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; color:var(--ink-dim); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row textarea, .form-row select{
  width:100%; padding:11px 14px; border-radius:4px; border:1px solid var(--border-soft); background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:.88rem;
}
.form-row textarea{ min-height:90px; resize:vertical; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .form-grid-2{ grid-template-columns:1fr; } }
.admin-flash{ padding:14px 18px; border-radius:6px; margin-bottom:20px; font-size:.88rem; font-weight:700; }
.admin-flash.ok{ background:rgba(60,140,90,.12); color:#3b7a4e; border:1px solid #3b7a4e; }
.admin-flash.err{ background:rgba(180,60,40,.12); color:#b3402a; border:1px solid #b3402a; }
.thumb-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.thumb-row img{ width:64px; height:64px; border-radius:6px; object-fit:cover; border:1px solid var(--border-soft); }
.item-row{ display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--border-soft); border-radius:6px; margin-bottom:12px; background:var(--bg); }
.item-row .grow{ flex:1; }
.btn-sm{ font-size:.68rem !important; padding:.5rem 1rem !important; }
.btn-danger{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.65rem; font-weight:700; color:#b3402a; background:transparent; border:1px solid #b3402a; padding:.5rem 1rem; text-decoration:none; cursor:pointer; }
.btn-danger:hover{ background:#b3402a; color:#fff; }
.btn-block{ width:100%; justify-content:center; display:flex; }
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-deep); padding:20px; cursor:auto !important; }
.login-card{ background:var(--bg-card); border:1px solid var(--border-soft); border-radius:8px; padding:38px 34px; width:100%; max-width:380px; text-align:center; }
.login-card svg{ width:52px; height:52px; margin-bottom:14px; }
.login-card h1{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
html[lang="ar"] .login-card h1{ font-family:var(--font-body); font-weight:800; }
.login-card p{ color:var(--ink-dim); font-size:.85rem; margin-bottom:22px; }