/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

	--bg: #f4f7fb;
	--bg-secondary: #ffffff;

	--text: #111827;
	--text-soft: #5b6475;

	--border: rgba(255,255,255,0.15);

	--primary: #008080ff;
	--secondary: #800080ff;

	--shadow:
		0 10px 30px rgba(0,0,0,0.08);

	--hero-overlay:
		linear-gradient(
			135deg,
			rgba(91,124,255,0.16),
			rgba(0,194,168,0.12)
		);

	--glass:
		rgba(255,255,255,0.55);
}

/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode {

	--bg: #07111f;
	--bg-secondary: #0d1727;

	--text: #f3f4f6;
	--text-soft: #9ca3af;

	--border: rgba(255,255,255,0.08);

	--shadow:
		0 10px 35px rgba(0,0,0,0.35);

	--hero-overlay:
		linear-gradient(
			135deg,
			rgba(91,124,255,0.18),
			rgba(0,194,168,0.12)
		);

	--glass:
		rgba(15,23,42,0.55);
}

/* =========================================================
   GLOBAL
========================================================= */

html {
	scroll-behavior: smooth;
}

body {

	margin: 0;

	font-family: 'Inter', sans-serif;

	background:
		radial-gradient(circle at top left,
			rgba(91,124,255,0.08),
			transparent 30%),
		radial-gradient(circle at bottom right,
			rgba(0,194,168,0.08),
			transparent 30%),
		var(--bg);

	color: var(--text);

	line-height: 1.7;

	transition:
		background 0.35s ease,
		color 0.35s ease;
}

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

a {
	color: inherit;
}

/* =========================================================
   PARTICLES
========================================================= */

#particles-js {

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 0;
}

/* =========================================================
   NAVBAR
========================================================= */

#navbar {

	position: sticky;
	top: 0;

	z-index: 1000;

	background: rgba(255,255,255,0.06);

	backdrop-filter: blur(18px);

	border-bottom:
		1px solid var(--border);
}

.nav-inner {

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 1rem 0;
}

.logo {

	font-size: 1.5rem;
	font-weight: 800;

	text-decoration: none;

	color: var(--text);

	letter-spacing: 1px;
}

.nav-links {

	display: flex;
	align-items: center;
	gap: 2rem;
}

.nav-links a {

	text-decoration: none;
	color: var(--text-soft);

	font-weight: 600;

	position: relative;

	transition: all 0.25s ease;
}

.nav-links a::after {

	content: "";

	position: absolute;

	left: 0;
	bottom: -6px;

	width: 0%;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--primary),
			var(--secondary)
		);

	transition: width 0.25s ease;
}

.nav-links a:hover {
	color: var(--text);
}

.nav-links a:hover::after {
	width: 100%;
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {

	background: var(--bg-secondary);

	border: 1px solid var(--border);

	width: 48px;
	height: 48px;

	border-radius: 50%;

	cursor: pointer;

	color: var(--text);

	font-size: 1rem;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: all 0.25s ease;
}

.theme-toggle:hover {

	transform: translateY(-2px);

	box-shadow: var(--shadow);
}

/* =========================================================
   HERO
========================================================= */

.hero {

	position: relative;
	overflow: hidden;

	padding:
		8rem 0
		7rem;

	text-align: center;
}

.hero::before {

	content: "";

	position: absolute;
	inset: 0;

	background: var(--hero-overlay);

	z-index: 1;
}

.hero-content {

	position: relative;
	z-index: 2;
}

.hero-badge {

	display: inline-flex;
	align-items: center;
	gap: 0.6rem;

	padding:
		0.65rem
		1.1rem;

	border-radius: 999px;

	background: var(--glass);

	backdrop-filter: blur(10px);

	border: 1px solid var(--border);

	font-size: 0.9rem;
	font-weight: 600;

	margin-bottom: 2rem;
}

.hero h1 {

	font-size: clamp(3rem, 8vw, 6rem);

	line-height: 1;

	margin-bottom: 1.5rem;

	font-weight: 900;

	letter-spacing: -4px;
}

.hero-gradient {

	background:
		linear-gradient(
			90deg,
			var(--primary),
			var(--secondary)
		);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero p {

	max-width: 900px;

	margin: 0 auto;

	font-size: 1.2rem;
	color: var(--text-soft);

	line-height: 1.9;
}

.hero-buttons {

	margin-top: 2.5rem;

	display: flex;
	justify-content: center;
	gap: 1rem;

	flex-wrap: wrap;
}

.btn {

	padding:
		1rem 1.7rem;

	border-radius: 999px;

	text-decoration: none;

	font-weight: 700;

	transition: all 0.25s ease;
}

.btn-primary {

	background:
		linear-gradient(
			90deg,
			var(--primary),
			var(--secondary)
		);

	color: white;

	box-shadow:
		0 12px 25px rgba(91,124,255,0.35);
}

.btn-primary:hover {

	transform:
		translateY(-3px)
		scale(1.02);
}

.btn-secondary {

	background: var(--glass);

	backdrop-filter: blur(12px);

	border: 1px solid var(--border);

	color: var(--text);
}

.btn-secondary:hover {

	transform:
		translateY(-3px);
}

/* =========================================================
   SECTIONS
========================================================= */

.main-section {
	padding: 3rem 0;
}

.section-header {

	text-align: center;

	margin-bottom: 3rem;
}

.section-header h2 {

	font-size: 2.5rem;
	font-weight: 800;

	margin-bottom: 1rem;
}

.section-header p {

	max-width: 850px;

	margin: 0 auto;

	color: var(--text-soft);

	font-size: 1.05rem;
}

/* =========================================================
   STATS GRID
========================================================= */

.stats-grid {

	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(320px, 1fr));

	gap: 1.5rem;
}

.stat-card {

	position: relative;
	overflow: hidden;

	padding: 2rem;

	border-radius: 24px;

	background: var(--bg-secondary);

	border:
		1px solid var(--border);

	transition: all 0.3s ease;
}

.stat-card:hover {

	transform:
		translateY(-8px);

	box-shadow:
		0 18px 35px rgba(0,0,0,0.12);
}

.stat-card::before {

	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 5px;

	background:
		linear-gradient(
			90deg,
			var(--primary),
			var(--secondary)
		);
}

.stat-number {

	font-size: 3rem;
	font-weight: 900;

	margin-bottom: 0.8rem;

	background:
		linear-gradient(
			90deg,
			var(--primary),
			var(--secondary)
		);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stat-title {

	font-size: 1.1rem;
	font-weight: 700;

	margin-bottom: 0.6rem;
}

.stat-desc {
	color: var(--text-soft);
}

/* =========================================================
   CONTENT GRID
========================================================= */

.logo-grid {

	display: grid;

	grid-template-columns:
		repeat(auto-fit, minmax(260px, 1fr));

	gap: 2rem;
}

.logo-item {

	background: var(--bg-secondary);

	border:
		1px solid var(--border);

	border-radius: 24px;

	padding: 2rem;

	text-align: center;

	transition: all 0.3s ease;
}

.logo-item:hover {

	transform:
		translateY(-8px);

	box-shadow:
		0 20px 35px rgba(0,0,0,0.12);
}

.logo-item a {

	text-decoration: none;
	color: inherit;
}

.logo-item img {

	width: 100%;
	max-width: 140px;

	height: 100px;

	object-fit: contain;

	margin-bottom: 1rem;
}

.logo-item h3 {

	font-size: 1.2rem;

	margin-bottom: 0.7rem;
}

.logo-item p {

	color: var(--text-soft);
}

/* =========================================================
   PUBLICATION
========================================================= */

/* =========================================================
   PUBLICATION
========================================================= */

.publication-card {

    max-width: 1000px;
    margin: 0 auto;

    padding: 3rem;

    border-radius: 28px;

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    text-align: left;
}

.publication-header {

    display: flex;
    gap: 0.75rem;

    margin-bottom: 1.5rem;
}

.publication-badge {

    display: inline-block;

    padding: 0.35rem 0.9rem;

    border-radius: 999px;

    font-size: 0.85rem;
    font-weight: 600;

    background: var(--glass);

    border: 1px solid var(--border);
}

.publication-title {

    font-size: 2rem;
    font-weight: 800;

    line-height: 1.3;

    margin-bottom: 1rem;
}

.publication-authors {

    color: var(--text-soft);

    line-height: 1.8;

    margin-bottom: 1.25rem;
}

.publication-journal {

    font-weight: 600;

    margin-bottom: 2rem;
}

.publication-actions {

    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 2rem;
}

.citation-box {

    background: rgba(0,0,0,0.04);

    border-radius: 18px;

    padding: 1.5rem;

    font-family: monospace;

    font-size: 0.92rem;

    overflow-x: auto;

    white-space: pre-wrap;
}

body.dark-mode .citation-box {

    background: rgba(255,255,255,0.04);
}

/* =========================================================
PUBLICATIONS
========================================================= */

.publication-list {


max-width: 1100px;
margin: 0 auto;

display: flex;
flex-direction: column;
gap: 1.75rem;


}

.publication-item {


position: relative;

padding: 2.25rem;

border-radius: 24px;

background: var(--bg-secondary);

border: 1px solid var(--border);

box-shadow: var(--shadow);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;

overflow: hidden;

}

.publication-item::before {


content: "";

position: absolute;

top: 0;
left: 0;

width: 5px;
height: 100%;

background:
    linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );


}

.publication-item:hover {


transform: translateY(-6px);

box-shadow:
    0 20px 40px rgba(0,0,0,0.12);


}

.publication-meta {


display: flex;
align-items: center;
gap: 0.75rem;

margin-bottom: 1rem;


}

.publication-meta span {

padding: 0.35rem 0.9rem;

border-radius: 999px;

background: var(--glass);

backdrop-filter: blur(10px);

border: 1px solid var(--border);

font-size: 0.82rem;
font-weight: 700;

color: var(--text-soft);


}

.publication-item h3 {


margin: 0 0 1rem;

font-size: 1.55rem;
font-weight: 800;

line-height: 1.35;

color: var(--text);


}

.publication-item .authors {


margin-bottom: 0.9rem;

color: var(--text-soft);

font-size: 0.98rem;

line-height: 1.8;


}

.publication-item .journal {


margin-bottom: 1.75rem;

font-size: 1rem;

font-weight: 600;

color: var(--text);


}

.publication-actions {


display: flex;
flex-wrap: wrap;
gap: 0.8rem;


}

.publication-actions .btn {


padding:
    0.85rem
    1.4rem;


}

/* Optional DOI styling */

.doi-link {


color: var(--primary);

text-decoration: none;

font-weight: 600;


}

.doi-link:hover {


text-decoration: underline;


}

/* Mobile */

@media (max-width: 768px) {


.publication-item {

    padding: 1.75rem;
}

.publication-item h3 {

    font-size: 1.25rem;
}

.publication-meta {

    flex-wrap: wrap;
}

}


/* .publication-card {

	padding: 3rem;

	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			rgba(91,124,255,0.12),
			rgba(0,194,168,0.08)
		);

	border:
		1px solid var(--border);

	backdrop-filter: blur(18px);

	box-shadow: var(--shadow);

	text-align: center;
}

.publication-card h3 {

	font-size: 2rem;

	margin-bottom: 1rem;
}

.publication-card p {

	max-width: 850px;

	margin:
		0 auto
		2rem;

	color: var(--text-soft);
}

.citation-box {

	text-align: left;

	background: rgba(0,0,0,0.04);

	padding: 1.5rem;

	border-radius: 18px;

	font-family: monospace;

	font-size: 0.95rem;

	overflow-x: auto;
}

body.dark-mode .citation-box {
	background: rgba(255,255,255,0.04);
} */

/* =========================================================
   FOOTER
========================================================= */

footer {

	padding:
		4rem 0;

	text-align: center;

	color: var(--text-soft);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 768px) {

	.nav-inner {
		flex-direction: column;
		gap: 1rem;
	}

	.nav-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
	}

	.hero {
		padding-top: 6rem;
	}

	.hero p {
		font-size: 1.05rem;
	}
}