@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#051813;
  --bg-2:#08211b;
  --surface:#0e3027;
  --surface-2:#154538;
  --border:rgba(255,255,255,.12);
  --text:#f5f5f5;
  --muted:#c0c0c0;
  --teal:#1db5a6;
  --teal-2:#2cbab5;
  --green:#2d5016;
  --rose:#e07856;
  --cyan:#00b8e6;
  --gold:#f5a623;
  --navy:#0a2f51;
  --shadow:0 24px 80px rgba(0,0,0,.35);
  --radius:18px;
  --radius-sm:12px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background-color: var(--bg); scroll-padding-top: 100px;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left, rgba(29,181,166,.25), transparent 35%),
    radial-gradient(circle at top right, rgba(45,80,22,.2), transparent 30%),
    radial-gradient(circle at bottom left, rgba(0,184,230,.15), transparent 40%),
    radial-gradient(circle at bottom right, rgba(224,120,86,.15), transparent 40%),
    linear-gradient(180deg, var(--bg), #030d0a 100%);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 32px, var(--max)); margin-inline:auto}
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(26,26,26,.78);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:78px; gap:18px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand-logo{height:42px;width:auto;display:block}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--teal),var(--green));
  box-shadow:0 12px 30px rgba(29,181,166,.22);
}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav-links a{
  color:var(--muted); font-size:15px; padding:10px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:4px;
  width:0; height:2px; background:var(--teal); transition:.25s ease;
}
.nav-links a:hover,.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after,.nav-links a[aria-current="page"]::after{width:100%}
.menu-btn{
  display:none; background:transparent; border:1px solid var(--border);
  color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer;
}
.hero{padding:78px 0 34px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-copy{padding:42px}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 14px; border-radius:999px;
  background:rgba(29,181,166,.12); color:#bff4ee; font-size:13px;
  border:1px solid rgba(29,181,166,.22);
}
h1,h2,h3{margin:0 0 14px; line-height:1.15}
h1{font-family:'Poppins',sans-serif; font-size:clamp(2.5rem,5vw,4.8rem)}
h2{font-family:'Poppins',sans-serif; font-size:clamp(1.7rem,3vw,2.8rem)}
h3{font-family:'Poppins',sans-serif; font-size:1.25rem}
.lead{color:var(--muted); font-size:1.05rem; max-width:62ch}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 18px; border-radius:12px;
  border:1px solid transparent; font-weight:700; transition:.25s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:#06201d}
.btn-secondary{background:rgba(255,255,255,.03); border-color:var(--border); color:var(--text)}
.btn:hover{transform:translateY(-2px)}
.hero-side{padding:26px; display:flex; flex-direction:column; gap:16px; justify-content:space-between}
.profile{
  min-height:100%;
  background:
    linear-gradient(180deg, rgba(10,47,81,.58), rgba(29,181,166,.10)),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.profile-box{
  min-height:340px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 30% 20%, rgba(29,181,166,.22), transparent 30%),
    radial-gradient(circle at 70% 35%, rgba(224,120,86,.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex; align-items:flex-end; padding:22px;
}
.profile-meta{display:grid; gap:10px}
.hero-portrait{
  width:100%;
  height:100%;
  max-height:280px;
  object-fit:cover;
  object-position: center 10%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
}
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.menu-btn { min-height: 44px; min-width: 44px; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.meta-row{display:flex; gap:10px; flex-wrap:wrap}
.tag{
  font-size:12px; color:#d8e6e4;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--border)
}
.section{padding:22px 0 10px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:22px;
}
.card p,.card li{color:var(--muted)}
.card strong{color:var(--text)}
.accent-line{width:74px; height:3px; border-radius:99px; margin:0 0 16px; background:linear-gradient(90deg,var(--teal),var(--rose))}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stat{padding:18px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--border)}
.stat b{display:block; font-size:1.4rem; margin-bottom:4px}
.list{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.list li{padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--border)}
.footer{padding:36px 0 44px; color:var(--muted); border-top:1px solid var(--border); margin-top:36px}
.icon-link{width:44px;height:44px;border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--border); margin-right:10px}
.link-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.small{font-size:.94rem;color:var(--muted)}
.divider{height:1px;background:var(--border);margin:22px 0}
.page-hero{padding:56px 0 24px}
.page-hero .panel{padding:30px}
.table-like{display:grid; gap:12px}
.event{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto 60px; gap:12px; align-items:center; padding:16px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--border)}
.event strong, .event span {word-break: break-word;}
.event a{color:#bdf8f1}
.typewriter-container{display:flex; flex-direction:column; gap:8px; font-family:'Poppins',sans-serif; font-weight: 600; font-size:1.45rem; color:var(--teal); margin-top:20px; padding:20px; background:rgba(29,181,166,.05); border:1px solid var(--border); border-radius:var(--radius-sm)}
.typewriter-line{border-right:2px solid transparent; min-height: 1.5em; display: inline-block; white-space: pre-wrap; word-break: break-word;}
.typewriter-line.cursor{border-right-color:var(--teal); animation:blink .75s step-end infinite;}
@keyframes blink{50%{border-color:transparent}}
.contact-box{display:grid; gap:16px}
.socials{display:flex; flex-wrap:wrap; gap:12px}
.mobile-only-btn{display:none}
.hide-desktop{display:none !important}
.bilingual-grid{display:grid; grid-template-columns:1fr 1fr; column-gap:40px; row-gap:32px; align-items:start}
@media (max-width: 960px){
  .hero-grid,.grid-3,.grid-2,.stats,.link-grid{grid-template-columns:1fr}
  .event{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:flex-start; padding:16px 16px 22px;
    position:absolute; top:100%; left:0; width:100%; background:rgba(26,26,26,.95); 
    backdrop-filter:blur(18px); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  }
  .mobile-only-btn{display:inline-flex; width:100%}
  .hide-desktop{display:inline-block !important}
  .hide-mobile{display:none !important}
  .typewriter-container{min-height:220px}
  html{scroll-padding-top:78px}
  .bilingual-grid{display:flex; flex-direction:column; gap:32px; align-items:stretch}
  .lang-en{order:1; margin-bottom:0 !important}
  .lang-ar{order:2; margin-bottom:0 !important}
}