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

:root{
    --primary:#0e8f7f;
    --accent:#3acebc;
    --dark:#010606;
    --light:#e6e6e6;
    --modal-text:#506b52;
    --modal-bg:#f8f8f8;
    --past-text:#735a14;
    --outreach-green:#44a126;
    --contact-green:#5bdc2b;
    --blue:#69e;
}

body{
    font-family:'DM Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
    color:var(--dark);
    overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Navbar */
.navbar{
    position:sticky;top:0;z-index:100;
    height:80px;background:#f5f5f5;
    display:flex;align-items:center;
    transition:background 0.3s;
}
.nav-container{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;max-width:1100px;margin:0 auto;padding:0 24px;
}
.nav-logo{
    font-size:1.5rem;font-weight:700;
    color:#134943;cursor:pointer;
}
.nav-menu{
    display:flex;list-style:none;gap:5px;
}
.nav-item{display:flex;align-items:center;height:80px}
.nav-link{
    display:flex;align-items:center;height:100%;
    padding:0 1rem;color:#134943;font-weight:500;
    border-bottom:0.25rem solid transparent;
    transition:border-color 0.2s,color 0.2s;
}
.nav-link:hover,.nav-link.active{border-bottom-color:var(--primary);color:var(--primary)}
.mobile-icon{display:none;cursor:pointer;flex-direction:column;gap:5px}
.mobile-icon span{width:24px;height:3px;background:#134943;border-radius:2px}

@media(max-width:1170px){
    .nav-menu{display:none}
    .mobile-icon{display:flex}
}

/* Sidebar */
.sidebar{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:#3d3d3d;z-index:999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    opacity:0;top:-100%;transition:0.3s;
}
.sidebar.open{opacity:1;top:0}
.sidebar-close{
    position:absolute;top:1.2rem;right:1.5rem;
    color:#fff;font-size:1.5rem;cursor:pointer;
}
.sidebar-menu{display:flex;flex-direction:column;gap:2rem;text-align:center}
.sidebar-link{color:#fff;font-size:1.5rem;transition:color 0.2s}
.sidebar-link:hover{color:var(--primary)}

/* Hero */
.hero{position:relative;height:100vh;overflow:hidden}
.hero-carousel{display:flex;width:100%;height:100%;transition:transform 0.8s ease-in-out}
.hero-slide{position:relative;width:100%;height:100%;flex-shrink:0}
.hero-bg{position:absolute;inset:0}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.2)}
.hero-content{
    position:absolute;inset:0;z-index:3;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:8px 24px;text-align:center;
}
.hero-content h1{color:#fff;font-size:48px;max-width:1200px}
.hero-text{color:#f8f8f8;font-size:24px;margin-top:24px}
.hero-text .im-desc{font-size:10px;margin-top:250px;color:#f8f8f8}
.hero-dots{
    position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    display:flex;gap:10px;z-index:4;
}
.hero-dot{
    width:12px;height:12px;border-radius:50%;
    background:rgba(255,255,255,0.4);cursor:pointer;
    transition:background 0.3s;
}
.hero-dot.active{background:#fff}

@media(max-width:768px){.hero-content h1{font-size:40px}.hero-text{font-size:20px}}
@media(max-width:480px){.hero-content h1{font-size:32px}.hero-text{font-size:16px}}

/* Research Section */
.research{padding:40px 0;background:#000}
.research-title{color:var(--primary);text-align:center;margin-bottom:30px;font-size:2rem}
.section-title{font-size:2rem;margin-bottom:30px}
.research-grid{
    display:grid;grid-template-columns:1fr 1fr;
    max-width:1200px;margin:0 auto;
}
.research-card{
    position:relative;cursor:pointer;overflow:hidden;
    min-height:300px;display:flex;align-items:center;justify-content:center;
    background:#183b6f;transition:all 0.3s;
}
.research-card.light-bg{background:#e9e9e9}
.research-card-content{
    display:flex;flex-direction:column;align-items:center;
    padding:20px;text-align:center;z-index:1;
}
.research-diagram{width:300px;height:180px;margin-bottom:20px}
.research-diagram img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.research-card:hover .research-diagram img{transform:scale(1.1)}
.research-card-title{color:#fff;font-weight:700;font-size:1.5rem}
.research-card-title.dark-text{color:#000}

@media(max-width:1000px){
    .research-grid{grid-template-columns:1fr}
    .research-card{min-height:330px}
}

/* About Sections */
.about{position:relative;overflow:hidden;padding:80px 0}
.light-section{background:var(--blue)}
.dark-section{background:var(--blue)}
.about-curve{
    position:absolute;inset:0;
    width:150%;left:-25%;border-radius:50%;
    z-index:0;
}
.light-curve{background:var(--light)}
.dark-curve{background:var(--dark)}
.about-wrapper{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1fr 1fr;gap:30px;
    max-width:1100px;margin:0 auto;padding:0 24px;
    align-items:center;
}
.about-wrapper.reverse{direction:rtl}
.about-wrapper.reverse > *{direction:ltr}
.about-text{max-width:540px}
.about-text h2{font-size:48px;font-weight:600;margin-bottom:16px}
.about-text.light-text,.about-text.light-text h2{color:#fff}
.top-line{
    color:var(--accent);font-size:16px;
    text-transform:uppercase;letter-spacing:1.4px;
    font-weight:700;display:block;margin-bottom:8px;
}
.about-text p,.about-text div{font-size:18px;line-height:24px;max-width:440px}
.about-img-wrap{max-width:555px}
.about-img-wrap img{width:100%;border-radius:8px}

.btn-primary{
    display:inline-block;margin-top:24px;
    padding:14px 48px;border-radius:50px;
    background:var(--primary);color:#fff;
    font-size:18px;font-weight:600;
    transition:all 0.2s;
}
.btn-primary:hover{background:#fff;color:var(--dark)}

@media(max-width:1000px){
    .about-wrapper,.about-wrapper.reverse{grid-template-columns:1fr;text-align:center}
    .about-text{margin:0 auto}
    .about-img-wrap{margin:0 auto}
    .about-curve{border-radius:40%}
}
@media(max-width:480px){.about-text h2{font-size:32px}}

/* Bioinformatics */
.bioinformatics{padding:80px 24px}
.bioinformatics-inner{
    display:flex;align-items:center;gap:80px;
    max-width:1100px;margin:0 auto;
}
.bioinformatics-inner h2{font-weight:600;white-space:nowrap}
.bioinformatics-desc{font-size:18px;line-height:24px;max-width:50vw}
.bioinformatics-desc a{color:var(--primary);font-weight:500}

@media(max-width:1000px){
    .bioinformatics-inner{flex-direction:column;gap:20px;text-align:center}
    .bioinformatics-desc{max-width:100%}
}

/* Outreach */
.outreach{padding:80px 24px;position:relative}
.outreach-topline{
    color:var(--outreach-green);text-align:right;
    display:block;max-width:1100px;margin:0 auto 20px;
}
.outreach-inner{max-width:1100px;margin:0 auto}
.outreach-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:30px;
    align-items:start;
}
.outreach-text h2{font-weight:600;margin-bottom:16px}
.outreach-text p{font-size:18px;line-height:24px;margin-bottom:16px}
.outreach-text blockquote{
    color:var(--primary);font-style:italic;
    font-size:0.9rem;text-align:center;
    margin:20px 0;padding:10px 20px;
}
.outreach-text blockquote cite{
    display:block;font-size:9px;margin-top:8px;
    font-style:italic;color:var(--dark);
}
.outreach-img-wrap{justify-self:end}
.outreach-img-wrap img{width:100%;border-radius:8px}

@media(max-width:1000px){
    .outreach-grid{grid-template-columns:1fr}
    .outreach-img-wrap{justify-self:center}
}

/* Contact */
.contact{padding:80px 24px;position:relative}
.contact-topline{color:var(--contact-green)}
.contact-inner{max-width:1100px;margin:0 auto}
.contact-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:30px;
    align-items:center;
}
.contact-text h3{font-size:48px;font-weight:600;margin:16px 0 8px}
.contact-text p{font-size:18px;line-height:28px}
.contact-img-wrap{max-width:555px}
.contact-img-wrap img{width:100%;border-radius:8px}

@media(max-width:768px){
    .contact-grid{grid-template-columns:1fr}
    .contact-img-wrap{display:none}
    .contact-text h3{font-size:32px}
}

/* Join Us */
.join-us{
    background:#48c9b0;padding:80px 24px;
    display:flex;align-items:center;justify-content:center;
    min-height:500px;
}
.join-us-inner{max-width:70%;text-align:center}
.join-us-inner p{color:#f7f7f7;font-size:1.2rem;line-height:1.8}

/* People Page */
.people-section{
    padding:100px 30px 60px;
    background:#0a1628;min-height:100vh;
}
.people-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:40px;justify-items:center;
    max-width:1500px;margin:0 auto;
}
.people-card{
    position:relative;width:190px;height:240px;
    border-radius:80px;overflow:hidden;cursor:pointer;
    transition:all 0.2s;
}
.people-card:hover{transform:scale(1.2);z-index:5}
.card-bg{
    position:absolute;top:0;left:0;right:0;height:80%;
    border-radius:80px 80px 0 0;overflow:hidden;
}
.card-bg img{width:100%;height:100%;object-fit:cover}
.card-text{
    position:absolute;bottom:0;left:0;right:0;height:20%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:transparent;
}
.card-text h3{color:#fff;font-size:0.9rem;text-align:center}
.card-text p{color:#fff;font-size:0.8rem;text-align:center}

@media(max-width:1000px){.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.people-grid{grid-template-columns:1fr}}

/* Past Members */
.past-members{
    background:var(--primary);padding:60px 30px;
    text-align:center;
}
.past-members h2{font-size:1.7rem;color:#000;margin-bottom:30px}
.past-members-content{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:30px;max-width:1200px;margin:0 auto;text-align:left;
}
.past-members-content .past-section{margin:16px}
.past-members-content h3{font-size:16px;margin-bottom:16px;color:var(--past-text)}
.past-members-content p{font-size:1rem;color:var(--past-text);margin-bottom:8px}

@media(max-width:1000px){.past-members-content{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.past-members-content{grid-template-columns:1fr}}

/* Publications Page */
.publications-section{
    padding:100px 24px 60px;background:#0a1628;min-height:100vh;
}
.pubs-title{color:#f0f0f0;text-align:center;margin-bottom:40px}
.pubs-list{display:flex;flex-direction:column;gap:18px;max-width:900px;margin:0 auto}
.pub-card{
    background:#fff;border-radius:10px;
    border-left:4px solid var(--primary);
    padding:20px 24px;
    box-shadow:0 2px 8px rgba(0,0,0,0.07);
    transition:box-shadow 0.2s,transform 0.2s;
}
.pub-card:hover{
    box-shadow:0 4px 16px rgba(0,0,0,0.12);
    transform:translateY(-2px);
}
.pub-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pub-name{font-size:1rem;font-weight:600;color:var(--dark);flex:1;line-height:1.4}
.pub-link-btn{
    display:inline-block;padding:7px 22px;
    background:var(--primary);color:#fff;border-radius:50px;
    font-size:0.75rem;font-weight:500;white-space:nowrap;
    letter-spacing:0.3px;
    transition:background 0.2s,transform 0.15s;
}
.pub-link-btn:hover{background:var(--dark);transform:scale(1.04)}
.pub-meta{
    display:flex;align-items:center;gap:8px;
    margin-top:10px;font-size:0.78rem;color:#5a6b6b;
}
.pub-meta span+span::before{content:"\b7";margin-right:8px}
.pub-authors{font-size:0.8rem;color:#3a3a3a;margin-top:10px;line-height:1.45;font-style:italic}
.pub-abstract-toggle{margin-top:14px;cursor:pointer}
.pub-abstract-toggle summary{
    font-size:0.82rem;font-weight:600;color:var(--primary);
    transition:color 0.15s;
}
.pub-abstract-toggle summary:hover{color:var(--accent)}
.pub-abstract{font-size:0.88rem;margin-top:10px;line-height:1.6;color:#333}
.pubs-footer{text-align:center;margin:40px auto 0;max-width:900px}

/* Modal */
.modal{
    position:fixed;top:10vh;left:50%;transform:translateX(-50%);
    width:min(90vw,900px);max-height:80vh;overflow-y:auto;
    background:var(--modal-bg);border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
    z-index:1001;padding:2rem;
}
.modal.hidden{display:none}
.backdrop{
    position:fixed;inset:0;z-index:1000;
    background:rgba(0,0,0,0.85);
}
.backdrop.hidden{display:none}
.close-btn{
    position:absolute;top:1rem;right:1.5rem;
    background:none;border:none;font-size:1.5rem;
    cursor:pointer;color:#000;z-index:10;
}

/* Research Popup */
.research-popup{position:relative}
.popup-grid{display:flex;flex-direction:column;gap:20px}
.popup-grid h2{color:#000;font-size:1.3rem}
.popup-grid h3{color:var(--primary);font-size:1rem;margin-bottom:8px}
.popup-grid p{font-size:0.9rem;line-height:1.6;color:#333}
.popup-diagram{max-width:400px;margin:0 auto}
.popup-diagram img{width:100%;object-fit:cover}
.popup-quote{
    text-align:center;color:var(--primary);
    font-style:italic;max-width:400px;margin:0 auto;
}

/* Person Popup */
.person-popup{position:relative}
.person-popup-inner{display:flex;gap:20px;align-items:flex-start}
.popup-icon{
    width:150px;height:150px;object-fit:cover;
    border-radius:8px;flex-shrink:0;
}
.person-popup-text h2{font-size:1.5rem;color:var(--modal-text);margin-bottom:8px}
.person-popup-text h3{font-size:1rem;color:var(--modal-text);margin-bottom:8px}
.person-email{color:var(--primary);margin-bottom:12px}
.person-desc{font-size:0.9rem;color:var(--modal-text);line-height:1.6}

@media(max-width:768px){
    .person-popup-inner{flex-direction:column;align-items:center;text-align:center}
    .popup-icon{width:120px;height:120px}
    .person-popup-text h2{font-size:1.2rem}
    .person-desc{font-size:0.8rem}
}

/* Footer */
.footer{
    background:#101522;padding:30px 24px;
    display:flex;flex-direction:column;align-items:center;
    position:relative;min-height:120px;
}
.footer-wrap{
    display:flex;justify-content:space-evenly;width:100%;
    max-width:800px;flex-wrap:wrap;gap:10px;
}
.footer-link{color:#fff;font-size:14px;transition:color 0.3s}
.footer-link:hover{color:var(--primary)}
.footer-credit{
    color:var(--primary);font-size:0.8rem;
    margin-top:20px;text-align:center;
}

@media(max-width:500px){.footer-link{font-size:10px}}