*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#0b1f33;background:#fff;font-family:"DM Sans",Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.container{width:min(1120px,92%);margin:auto}.nav-wrap{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #dfe6ed}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{font:800 18px Manrope;letter-spacing:.06em}.brand span{font-weight:600;margin-left:5px}.links{display:flex;gap:20px;font-size:12px;font-weight:700}.links a:hover,.text-link:hover,.project a{color:#168f9b}.menu{display:none;border:0;background:none;font-size:24px}.hero{background:linear-gradient(135deg,#f7f9fb 0%,#fff 70%);padding:105px 0 90px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:#168f9b;margin:0 0 18px}.hero h1{font:800 clamp(55px,8vw,96px)/.9 Manrope;letter-spacing:-.055em;margin:0 0 25px}.hero h1 span{font-weight:600}.role{font-size:19px;margin:0 0 18px}.role b{color:#168f9b;font-weight:500}.lead{font-size:20px;color:#607083;max-width:650px}.actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:5px;font-weight:700;font-size:13px}.primary{background:#0b1f33;color:#fff}.ghost{border:1px solid #0b1f33}.mini-links{font-size:12px;color:#607083;display:flex;gap:9px}.hero-card{border:1px solid #dfe6ed;padding:26px;background:#fff;box-shadow:0 18px 55px rgba(11,31,51,.08)}.portrait{height:330px;overflow:hidden;background:#eaf0f4;margin-bottom:24px}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}.card-label{font-size:10px;letter-spacing:.16em;color:#168f9b;font-weight:700}.hero-card h3{font:700 22px/1.35 Manrope}.hero-card p{color:#607083;font-size:13px}.line{height:1px;background:#dfe6ed;margin:20px 0}.stats{background:#0b1f33;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:28px 0}.stats-grid div{padding:5px 25px;border-right:1px solid rgba(255,255,255,.16)}.stats-grid div:last-child{border:0}.stats strong{display:block;font:800 28px Manrope}.stats span{font-size:11px;color:#b8c5d1}.section{padding:105px 0}.alt{background:#f7f9fb}.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.section h2{font:800 clamp(35px,5vw,56px)/1.08 Manrope;letter-spacing:-.04em;margin:0}.section p{color:#607083}.large{font-size:21px!important;color:#0b1f33!important}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:45px}.section-head p{max-width:380px;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#dfe6ed;border:1px solid #dfe6ed}.cards article{background:#fff;padding:30px;min-height:205px}.cards span{font-size:11px;color:#168f9b;font-weight:700}.cards h3{font:700 21px Manrope;margin:25px 0 8px}.cards p{font-size:13px;margin:0}.pub-list{border-top:1px solid #dfe6ed}.pub-list article{display:grid;grid-template-columns:90px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid #dfe6ed}.year{font:700 13px Manrope;color:#168f9b}.pub-list h3{font:700 20px/1.35 Manrope;margin:0 0 7px}.pub-list p{font-size:13px;margin:0 0 10px}.text-link{color:#168f9b;font-weight:700;font-size:13px}.small-note{font-size:12px;margin-top:25px}.pill-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.pill-list span{border:1px solid #dfe6ed;padding:8px 12px;font-size:12px;background:#fff}.education-card{margin-top:30px;border-left:3px solid #168f9b;padding:5px 0 5px 20px}.education-card strong{font:700 20px Manrope}.education-card p{font-size:13px}.education-card a{color:#168f9b;font-weight:700;font-size:13px}.timeline{border-left:1px solid #cbd5de;margin-left:10px}.timeline>div{position:relative;padding:0 0 32px 35px}.timeline>div:before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:#168f9b}.timeline span{font-size:11px;color:#168f9b;font-weight:700;letter-spacing:.08em}.timeline h3{font:700 20px Manrope;margin:7px 0 2px}.timeline p{font-size:13px;margin:0}.projects{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project{padding:38px;border:1px solid #dfe6ed;background:#fff}.project-kicker{font-size:10px!important;letter-spacing:.15em;font-weight:700;color:#168f9b!important}.project h3{font:700 32px Manrope;margin:10px 0}.project p:not(.project-kicker){font-size:14px}.recognition{display:grid;grid-template-columns:1fr 1fr;gap:22px}.recognition div{border-top:1px solid #dfe6ed;padding-top:18px}.recognition strong{font:700 17px Manrope}.recognition p{font-size:13px}.cv-section{padding:65px 0}.cv-box{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #dfe6ed;padding:45px}.cv-box h2{font-size:35px}.cv-box p{margin-bottom:0}.contact{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-card{display:flex;flex-direction:column;justify-content:center}.contact-card>a{font:700 24px Manrope;border-bottom:1px solid #0b1f33;padding-bottom:8px;width:max-content}.socials{display:flex;gap:20px;margin-top:25px;font-size:12px;color:#607083}.socials a:hover{color:#168f9b}footer{background:#0b1f33;color:#b8c5d1;padding:24px 0;font-size:11px}.footer{display:flex;justify-content:space-between}@media(max-width:850px){.links{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid #dfe6ed;padding:20px 4%;flex-direction:column;gap:14px}.links.open{display:flex}.menu{display:block}.hero{padding:70px 0}.hero-grid,.split,.contact{grid-template-columns:1fr;gap:45px}.hero h1{font-size:65px}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid div{border-bottom:1px solid rgba(255,255,255,.16)}.cards{grid-template-columns:1fr}.projects,.recognition{grid-template-columns:1fr}.section{padding:75px 0}.section-head,.cv-box{display:block}.section-head p{margin-top:18px}.cv-box .btn{margin-top:25px}.footer{display:block}.footer span+span{display:block;margin-top:7px}.portrait{height:360px}}
┌─────────────────────────────────────────────┐
│ ELALIM MOHAMED                         ☰    │
├─────────────────────────────────────────────┤
│                                             │
│ MEDICINE · RESEARCH · EDUCATION             │
│                                             │
│ ELALIM              ┌──────────────────┐   │
│ MOHAMED             │                  │   │
│                     │   YOUR PHOTO     │   │
│ Medical Doctor...   │                  │   │
│                     └──────────────────┘   │
│ [Explore Research] [Download CV]            │
│                                             │
└─────────────────────────────────────────────┘
/* ===== PHASE 2 - UI/UX Upgrade v1 ===== */

/* Smooth animations */
* {
  transition: all 0.25s ease;
}

/* Hero */
.hero{
  background:
    radial-gradient(circle at top right, rgba(22,143,155,0.08), transparent 40%),
    linear-gradient(135deg,#f7f9fb 0%,#ffffff 70%);
}

.hero h1{
  letter-spacing: -0.06em;
}

.lead{
  max-width: 680px;
  line-height: 1.9;
}

/* Buttons */
.btn{
  border-radius: 10px;
  padding: 15px 24px;
  box-shadow: 0 8px 25px rgba(11,31,51,0.08);
}

.primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(11,31,51,0.18);
}

.ghost:hover{
  background:#0b1f33;
  color:#fff;
}

/* Hero card */
.hero-card{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(11,31,51,0.10);
}

.portrait{
  border-radius: 12px;
  overflow: hidden;
}

.portrait img:hover{
  transform: scale(1.03);
}

/* Stats */
.stats{
  background: linear-gradient(135deg,#0b1f33,#16314d);
}

.stats strong{
  font-size: 34px;
}

/* General cards */
.cards article,
.project,
.recognition div,
.cv-box{
  transition: all .3s ease;
}

.cards article:hover,
.project:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(11,31,51,0.08);
}

/* Publications */
.pub-list article:hover{
  background:#f8fbfc;
  padding-left:15px;
}

/* Timeline */
.timeline>div:hover{
  transform: translateX(6px);
}

/* Navigation */
.nav-wrap{
  box-shadow: 0 4px 20px rgba(11,31,51,0.04);
}

/* Footer */
footer{
  background: linear-gradient(135deg,#0b1f33,#162f47);
}

/* Mobile */
@media(max-width:850px){

  .hero h1{
    font-size:56px;
  }

  .lead{
    font-size:18px;
  }

  .btn{
    width:100%;
  }

  .actions{
    flex-direction:column;
  }

  .portrait{
    height:420px;
  }
}