*{margin:0;padding:0;box-sizing:border-box}

:root{
--bg:#050816;
--card:rgba(14,20,36,.82);
--line:rgba(255,255,255,.08);
--text:#f8fafc;
--sub:#94a3b8;
--accent:#7c8cff;
--accent2:#d78bff;
--pub-img-width:340px;
--pub-card-height:240px
}

html{scroll-behavior:smooth}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(circle at top left,rgba(124,140,255,.12),transparent 24%),
radial-gradient(circle at bottom right,rgba(215,139,255,.1),transparent 24%),
var(--bg);
color:var(--text);
overflow-x:hidden;
line-height:1.7
}

a{text-decoration:none;color:inherit}

.container{width:min(1180px,92%);margin:auto}

/* NAV */

nav{
position:fixed;
top:0;
width:100%;
z-index:1000;
backdrop-filter:blur(16px);
background:rgba(5,8,22,.76);
border-bottom:1px solid rgba(255,255,255,.05)
}

.nav-inner{
height:74px;
display:flex;
align-items:center;
justify-content:space-between
}

.logo{font-size:24px;font-weight:600}

.nav-links{display:flex;gap:34px}

.nav-links a{
color:#cbd5e1;
font-size:18px;
font-weight:500;
transition:.25s
}

.nav-links a:hover{color:#fff}

/* HERO */

.hero{padding:140px 0 58px}

.hero-school{
display:inline-block;
padding:5px 18px;
margin-bottom:4px;
border-radius:18px;
border:1.5px solid transparent;
background:
linear-gradient(#050816,#050816) padding-box,
linear-gradient(135deg,#8ab4ff,#d78bff) border-box;
font-size:22px;
font-weight:600
}

.hero-school span,
h1{
background:linear-gradient(135deg,#8ab4ff,#d78bff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}

.hero-name-no-box{margin-bottom:18px}

h1{
font-size:66px;
line-height:1.25;
letter-spacing:-4px;
font-weight:800
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap
}

.hero-btn{
display:flex;
align-items:center;
gap:12px;
padding:14px 22px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
transition:.25s;
font-size:18px
}

.hero-btn:hover{
transform:translateY(-3px);
border-color:rgba(124,140,255,.35);
background:rgba(124,140,255,.08)
}

/* SECTION */

section{padding:60px 0}

.section-title{
font-size:40px;
font-weight:700;
letter-spacing:-1px;
margin-bottom:28px
}

/* ABOUT */

.about-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:44px;
align-items:start
}

.about-text p,
.advisors-line{
color:var(--sub);
font-size:17px;
margin-bottom:20px
}

.advisor-link{
color:#c4b5fd;
font-weight:600;
transition:.2s
}

.advisor-link:hover{color:#d78bff}

.bio-card{
background:rgba(14,20,36,.68);
border:1px solid var(--line);
border-radius:24px;
padding:30px;
margin-top:-115px
}

.timeline-item{
display:flex;
gap:20px;
padding:20px 0;
border-bottom:1px solid rgba(255,255,255,.06)
}

.timeline-item:last-child{border:none}

.dot{
width:12px;
height:12px;
border-radius:50%;
margin-top:8px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
box-shadow:0 0 14px rgba(124,140,255,.8)
}

.timeline-year{
color:#a78bfa;
font-size:18px;
margin-bottom:4px
}

.timeline-title{
font-size:22px;
font-weight:600
}

.timeline-sub{
color:var(--sub);
font-size:18px
}

/* RESEARCH */

.research-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}

.research-card{
padding:28px;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,rgba(16,24,40,.88),rgba(11,17,31,.88));
transition:.25s
}

.research-card:hover,
.pub-card:hover,
.pub-card-text:hover{
transform:translateY(-4px);
border-color:rgba(124,140,255,.28)
}

.research-card:hover{
box-shadow:0 0 28px rgba(124,140,255,.08)
}

.research-card-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px
}

.research-id{
color:#a78bfa;
font-size:30px;
font-weight:700
}

.research-icon{
font-size:36px;
color:#b794ff
}

.research-card h3{
font-size:20px;
margin-bottom:14px
}

.research-card p{
color:var(--sub);
font-size:17px
}

/* PUBLICATIONS */

.pub-list{
display:flex;
flex-direction:column;
gap:22px
}

.pub-card{
display:grid;
grid-template-columns:var(--pub-img-width) 1fr;
gap:30px;
align-items:stretch;
height:var(--pub-card-height);
border-radius:24px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(135deg,rgba(15,22,38,.92),rgba(10,16,30,.92));
transition:.25s
}

.pub-image{
width:100%;
height:100%;
overflow:hidden;
background:#fff
}

.pub-image img{
width:100%;
height:100%;
object-fit:contain;
display:block
}

.pub-content{
padding:22px 34px 22px 0;
display:flex;
flex-direction:column;
justify-content:center;
overflow:hidden
}

.pub-top{
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
flex-wrap:wrap
}

.pub-badge{
padding:6px 14px;
border-radius:999px;
background:rgba(124,140,255,.14);
color:#c4b5fd;
font-size:16px;
font-weight:600
}

.pub-year{
color:#64748b;
font-size:16px
}

.paper-link{
color:#94a3b8;
font-size:14px;
transition:.2s
}

.paper-link:hover{color:#d78bff}

.pub-note{
margin-left:66px;
padding:5px 12px;
border-radius:999px;
border:1px solid rgba(215,139,255,.22);
background:rgba(215,139,255,.08);
color:#e9d5ff;
font-size:14px;
font-weight:600;
line-height:1.4;
white-space:nowrap
}

.pub-note-icon{margin-left:-6px}

.pub-title{
font-size:19px;
line-height:1.36;
font-weight:620;
margin-bottom:8px;
color:#fff
}

.pub-authors{
font-size:15px;
line-height:1.55;
color:#64748b
}

.pub-authors .me{
color:#d78bff;
font-weight:600
}

.pub-card-text{
padding:30px;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(135deg,rgba(15,22,38,.92),rgba(10,16,30,.92));
transition:.25s
}

/* SUBTITLE */

.pub-subtitle{
display:flex;
align-items:center;
gap:16px;
margin:16px 0 4px;
font-size:20px;
font-weight:700;
letter-spacing:-.3px;
color:#c4b5fd
}

.pub-subtitle::before,
.pub-subtitle::after{
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(124,140,255,.45),transparent)
}

.pub-subtitle-icon{
font-size:22px;
line-height:1
}


/* CONTACT */

.contact-box{
border-radius:28px;
padding:18px 38px;
background:linear-gradient(135deg,rgba(124,140,255,.08),rgba(215,139,255,.06));
border:1px solid rgba(255,255,255,.08)
}

.contact-box .section-title{
margin-bottom:10px;
}

.contact-box p{
color:var(--sub);
margin:4px 0;
font-size:17px;
line-height:1.5;
}

.contact-email{
display:flex;
align-items:center;
gap:10px;
color:var(--sub);
font-size:17px
}

.contact-email a{
color:#c4b5fd;
border-bottom:1px solid rgba(196,181,253,.3);
transition:.2s
}

.contact-email a:hover{
color:#d78bff;
border-bottom-color:#d78bff
}

/* FOOTER */

footer{padding:48px 0 36px}

.footer-text{
text-align:center;
color:#64748b;
font-size:14px;
margin-bottom:26px
}

.map-box{
width:min(500px,92vw);
margin:22px auto 0;
padding:12px 14px 8px;
border:1px solid rgba(124,140,255,.28);
border-radius:18px;
background:rgba(2,6,23,.35)
}

.map-box img{
width:100%;
height:auto;
display:block
}

.visitor-stats{
margin-top:7px;
color:#cdd4d9;
font-size:13px;
text-align:center
}

/* MOBILE */

@media(max-width:1000px){

.research-grid{grid-template-columns:repeat(2,1fr)}

.about-grid{grid-template-columns:1fr}

.bio-card{margin-top:0}

.pub-card{
grid-template-columns:1fr;
height:auto
}

.pub-content{padding:24px}

h1{font-size:56px}
}

@media(max-width:500px){

.research-grid{grid-template-columns:1fr}

.nav-links{display:none}

h1{
font-size:42px;
letter-spacing:-2px
}

.hero-school{font-size:16px}

.hero-btn{font-size:16px}

.pub-note{
margin-left:0;
white-space:normal
}

.dotted-visitor-box{
width:min(620px,92vw);
margin:28px auto 0;
padding:16px;
border-radius:26px;
border:1px solid rgba(148,163,184,.16);
background:
radial-gradient(circle at 30% 20%,rgba(96,165,250,.16),transparent 28%),
radial-gradient(circle at 72% 28%,rgba(192,132,252,.14),transparent 30%),
rgba(2,6,23,.92);
box-shadow:0 24px 70px rgba(2,6,23,.45)
}
}