:root {
	--ink: #101010;
	--paper: #FBFAFD;
	--gold: #B4A1E8;
	--gold-deep: #6B4FC8;
	--stone: #E7E4F0;
	--stone-2: #D9D5E7;
	--gray: #6E6B63;
	--text-light: #6B7280;
	--radius: 22px;
	--radius-sm: 14px;
	--container: 1200px;
}
* {margin: 0;padding: 0;box-sizing: border-box}
html {scroll-behavior: smooth}
@media (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto}

	*, *::before, *::after {animation-duration: 0.001s !important;transition-duration: 0.001s !important}
}
body {
	font-family: 'Montserrat', sans-serif;
	background: var(--paper);
	color: var(--ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img {max-width: 100%;display: block}
a {color: inherit}
.container {max-width: var(--container);margin: 0 auto;padding: 0 24px}
.display {font-family: 'Unbounded', sans-serif;font-weight: 800;letter-spacing: -0.01em;line-height: 1.05}
:focus-visible {outline: 3px solid var(--gold);outline-offset: 3px;border-radius: 6px}

.site-foot p {
	color: var(--text-light);
	margin-bottom: 1.5rem;
}
.logo-white {
	--fill-0: #FFF;
	--fill-1: #FFF;
	--fill-2: rgba(255, 255, 255, .9);
	--fill-3: rgba(255, 255, 255, .6);
	--fill-4: rgba(255, 255, 255, .3);
}

/* ---------- MARQUEE ---------- */
.marquee {
	background: var(--ink);color: var(--paper);
	overflow: hidden;white-space: nowrap;
	font-family: 'Unbounded', sans-serif;font-weight: 500;font-size: 12px;
	letter-spacing: 0.14em;text-transform: uppercase;
	padding: 10px 0;
}
.marquee__track {display: inline-block;animation: marquee 28s linear infinite}
.marquee__track span {margin: 0 22px}
.marquee__track .dot {color: var(--gold)}
@keyframes marquee {
	from {transform: translateX(0)}
	to {transform: translateX(-50%)}
}

/* ---------- HEADER ---------- */
.header {
	position: sticky;top: 0;z-index: 100;
	background: rgba(251, 250, 253, .9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--stone);
}
.header__inner {display: flex;align-items: center;justify-content: space-between;height: 72px}
.logo {display: flex;align-items: center;text-decoration: none}
.logo__img {height: 36px;width: auto;display: block}
.footer .logo__img {height: 42px;filter: brightness(0) invert(1)}
@media (max-width: 768px) {
	.logo__img {height: 30px}
}
.logo__word {font-family: 'Unbounded', sans-serif;font-weight: 800;font-size: 22px;letter-spacing: 0.02em}
.logo__ua {font-family: 'Unbounded', sans-serif;font-weight: 500;font-size: 13px;color: var(--gold-deep)}
.nav {display: flex;gap: 32px}
.nav a {
	text-decoration: none;font-size: 14px;font-weight: 600;
	color: var(--ink);opacity: .75;transition: opacity .2s, color .2s;
}
.nav a:hover {opacity: 1;color: var(--gold-deep)}
.btn {
	display: inline-flex;align-items: center;gap: 10px;
	font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 14px;
	background: var(--ink);color: var(--paper);
	padding: 13px 26px;border-radius: 999px;border: none;cursor: pointer;
	text-decoration: none;transition: background .2s, transform .2s;
}
.btn:hover {background: var(--gold-deep);transform: translateY(-1px)}
.btn--gold {background: var(--gold);color: var(--ink)}
.btn--gold:hover {background: var(--gold-deep);color: var(--paper)}
.btn--ghost {background: transparent;color: var(--ink);border: 1.5px solid var(--ink)}
.btn--ghost:hover {background: var(--ink);color: var(--paper)}
.burger {display: none;background: none;border: none;cursor: pointer;padding: 8px}
.burger span {display: block;width: 24px;height: 2px;background: var(--ink);margin: 5px 0;transition: .25s}

/* ---------- HERO ---------- */
.hero {padding: 88px 0 96px;overflow: hidden}
.hero__eyebrow {
	display: inline-flex;align-items: center;gap: 10px;
	font-family: 'Unbounded', sans-serif;font-size: 12px;font-weight: 500;
	letter-spacing: .16em;text-transform: uppercase;color: var(--gray);
	margin-bottom: 28px;
}
.hero__eyebrow::before {content: "";width: 34px;height: 2px;background: var(--gold)}
.hero__title {font-size: clamp(40px, 7.4vw, 104px);text-transform: uppercase}
.hero__title .num {
	color: transparent;
	-webkit-text-stroke: 2.5px var(--gold-deep);
}
.hero__sub {
	font-size: clamp(17px, 2vw, 22px);font-weight: 500;color: var(--gray);
	max-width: 640px;margin-top: 26px;
}
.hero__cta {display: flex;gap: 16px;flex-wrap: wrap;margin-top: 36px}

/* ---------- SECTION BASICS ---------- */
.section {padding: 110px 0;scroll-margin-top: 80px}
#top {scroll-margin-top: 120px}
.section--tint {background: #F2F0F8}
.sec-head {margin-bottom: 56px;display: flex;align-items: flex-end;justify-content: space-between;gap: 24px;flex-wrap: wrap}
.sec-eyebrow {
	font-family: 'Unbounded', sans-serif;font-size: 12px;font-weight: 500;
	letter-spacing: .16em;text-transform: uppercase;color: var(--gold-deep);
	display: flex;align-items: center;gap: 10px;margin-bottom: 14px;
}
.sec-eyebrow::before {content: "";width: 26px;height: 2px;background: var(--gold)}
.sec-title {font-size: clamp(28px, 4vw, 52px);text-transform: uppercase}

/* ---------- ABOUT ---------- */
.about__grid {display: grid;grid-template-columns:1.15fr .85fr;gap: 64px;align-items: start}
.about__text p {font-size: 17px;margin-bottom: 20px}
.about__text p:first-of-type::first-letter {
	font-family: 'Unbounded', sans-serif;font-weight: 800;
	font-size: 96px;line-height: .78;float: left;
	padding: 10px 18px 0 0;color: var(--ink);
}
.about__aside {display: flex;flex-direction: column;gap: 14px}
.stat {
	background: #fff;border: 1px solid var(--stone);border-radius: var(--radius);
	padding: 28px 30px;
}
.stat--gold {background: var(--gold);border-color: var(--gold)}
.stat__num {font-family: 'Unbounded', sans-serif;font-weight: 800;font-size: 44px;line-height: 1}
.stat__label {font-size: 14px;font-weight: 600;color: var(--gray);margin-top: 8px}
.stat--gold .stat__label {color: rgba(16, 16, 16, .7)}

/* ---------- NOMINEES ---------- */
.tabs {display: flex;gap: 10px;flex-wrap: wrap}
.tab {
	font-family: 'Montserrat', sans-serif;font-weight: 600;font-size: 13.5px;
	padding: 11px 20px;border-radius: 999px;cursor: pointer;
	background: transparent;border: 1.5px solid var(--stone-2);color: var(--ink);
	transition: all .2s;text-transform: uppercase;letter-spacing: .03em;
}
.tab:hover {border-color: var(--ink)}
.tab.is-active {background: var(--ink);border-color: var(--ink);color: var(--paper)}
.grid-nominees {
	display: grid;grid-template-columns:repeat(4, 1fr);gap: 22px;
}
.card {
	background: #fff;border: 1px solid var(--stone);border-radius: var(--radius);
	overflow: hidden;display: flex;flex-direction: column;
	transition: transform .25s, box-shadow .25s;
}
.card:hover {transform: translateY(-5px);box-shadow: 0 18px 40px rgba(16, 16, 16, .09)}
.card__photo {
	aspect-ratio: 1/1.05;position: relative;overflow: hidden;
	background: linear-gradient(160deg, var(--stone) 0%, var(--stone-2) 100%);
	display: flex;align-items: center;justify-content: center;
}
.card__photo img {width: 100%;height: 100%;object-fit: cover}
.card__initials {
	font-family: 'Unbounded', sans-serif;font-weight: 800;font-size: 44px;color: #C1BBD8;
}
.card__badge {
	position: absolute;top: 14px;left: 14px;
	background: rgba(251, 250, 247, .92);border-radius: 999px;
	font-size: 11px;font-weight: 700;letter-spacing: .06em;text-transform: uppercase;
	padding: 6px 12px;color: var(--gold-deep);
}
.card__body {padding: 20px 22px 22px;display: flex;flex-direction: column;flex: 1}
.card__name {font-family: 'Unbounded', sans-serif;font-weight: 700;font-size: 16px;line-height: 1.3}
.card__role {font-size: 13.5px;color: var(--gray);margin-top: 6px;flex: 1}
.card__actions {display: flex;align-items: center;gap: 16px;flex-wrap: wrap;margin-top: 18px}
.card__exclusive {
	font-family: 'Montserrat', sans-serif;font-size: 12px;font-weight: 700;
	letter-spacing: .05em;text-transform: uppercase;
	background: var(--gold);color: var(--ink);
	padding: 9px 16px;border-radius: 999px;border: none;cursor: pointer;
	text-decoration: none;display: inline-flex;align-items: center;gap: 6px;
	transition: background .2s, color .2s;
}
.card__exclusive::before {content: "\2605";font-size: 11px}
.card__exclusive:hover {background: var(--gold-deep);color: var(--paper)}
.card__more {text-decoration: none;align-self: center;
	font-size: 13px;font-weight: 700;letter-spacing: .02em;
	background: none;border: none;cursor: pointer;color: var(--ink);
	display: inline-flex;align-items: center;gap: 8px;padding: 0;
	border-bottom: 2px solid var(--gold);padding-bottom: 2px;
	transition: color .2s;
}
.card__more:hover {color: var(--gold-deep)}

/* ---------- MODAL ---------- */
.modal {
	position: fixed;inset: 0;z-index: 200;display: none;
	align-items: center;justify-content: center;padding: 24px;
}
.modal.is-open {display: flex}
.modal__backdrop {position: absolute;inset: 0;background: rgba(16, 16, 16, .55)}
.modal__box {
	position: relative;background: var(--paper);border-radius: var(--radius);
	max-width: 560px;width: 100%;padding: 40px;max-height: 85vh;overflow: auto;
}
.modal__close {
	position: absolute;top: 18px;right: 18px;background: none;border: none;
	font-size: 26px;cursor: pointer;line-height: 1;color: var(--gray);
}
.modal__close:hover {color: var(--ink)}
.modal__cat {font-size: 12px;font-weight: 700;letter-spacing: .08em;text-transform: uppercase;color: var(--gold-deep)}
.modal__name {font-family: 'Unbounded', sans-serif;font-weight: 800;font-size: 26px;margin: 10px 0 4px}
.modal__role {color: var(--gray);font-weight: 500;margin-bottom: 18px}
.modal__bio {font-size: 15.5px}

/* ---------- METHODOLOGY ---------- */
.method {display: grid;grid-template-columns:repeat(3, 1fr);gap: 22px}
.method__card {
	border-radius: var(--radius);padding: 38px 34px;min-height: 250px;
	display: flex;flex-direction: column;justify-content: space-between;gap: 26px;
	background: #fff;border: 1px solid var(--stone);
}
.method__card:nth-child(2) {background: var(--ink);color: var(--paper);border-color: var(--ink)}
.method__card:nth-child(6) {background: var(--ink);color: var(--paper);border-color: var(--ink)}
.method__card:nth-child(4) {background: var(--gold);border-color: var(--gold)}
.method__num {
	font-family: 'Unbounded', sans-serif;font-weight: 800;font-size: 15px;
	width: 46px;height: 46px;border-radius: 50%;
	display: flex;align-items: center;justify-content: center;
	border: 1.5px solid currentColor;opacity: .85;
}
.method__title {font-family: 'Unbounded', sans-serif;font-weight: 700;font-size: 19px;line-height: 1.35;text-transform: uppercase}
.method__text {font-size: 14.5px;opacity: .85;margin-top: 10px}

/* ---------- FOOTER ---------- */
.footer {background: var(--ink);color: var(--paper);padding: 70px 0 34px}
.footer__grid {display: flex;justify-content: space-between;gap: 40px;flex-wrap: wrap;margin-bottom: 56px}
.footer__brand .logo__word {color: var(--paper)}
.footer__note {color: #8f8d86;font-size: 13.5px;max-width: 320px;margin-top: 14px}
.footer__col h4 {
	font-family: 'Unbounded', sans-serif;font-size: 12px;font-weight: 500;
	letter-spacing: .14em;text-transform: uppercase;color: var(--gold);margin-bottom: 16px;
}
.footer__col a {display: block;text-decoration: none;color: #CFCDC6;font-size: 14.5px;margin-bottom: 10px;transition: color .2s}
.footer__col a:hover {color: var(--paper)}
.footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);padding-top: 26px;
	display: flex;justify-content: space-between;gap: 16px;flex-wrap: wrap;
	color: #8f8d86;font-size: 13px;
}

/* ---------- REVEAL ---------- */
.reveal {opacity: 0;transform: translateY(26px);transition: opacity .7s ease, transform .7s ease}
.reveal.is-visible {opacity: 1;transform: none}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.grid-nominees {grid-template-columns:repeat(3, 1fr)}

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

	.about__grid {grid-template-columns:1fr;gap: 44px}

	.about__aside {flex-direction: row;flex-wrap: wrap}

	.about__aside .stat {flex: 1 1 200px}
}
@media (max-width: 768px) {
	.section {padding: 76px 0}

	.nav {display: none;position: absolute;top: 72px;left: 0;right: 0;
		background: var(--paper);border-bottom: 1px solid var(--stone);
		flex-direction: column;gap: 0;padding: 12px 24px 20px}

	.nav.is-open {display: flex}

	.nav a {padding: 12px 0;border-bottom: 1px solid var(--stone)}

	.header__cta {display: none}

	.burger {display: block}

	.grid-nominees {grid-template-columns:repeat(2, 1fr);gap: 14px}

	.card__body {padding: 16px}

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

	.method__card {min-height: 0}

	.modal__box {padding: 30px 24px}
}
@media (max-width: 440px) {
	.grid-nominees {grid-template-columns:1fr}
}