/* ETSİM — Elmi-Tədqiqat və Statistik İnnovasiyalar Mərkəzi */

:root {
  --brand: #146195;
  --brand-dark: #0b3f63;
  --brand-deep: #082c46;
  --brand-light: #e8f1f8;
  --accent: #d6202a;
  --accent-green: #1f9d55;
  --ink: #16212c;
  --ink-soft: #4a5866;
  --muted: #7a8794;
  --line: #dde4ea;
  --bg: #ffffff;
  --bg-soft: #f4f7fa;
  --radius: 6px;
  --container: 1200px;
  --shadow: 0 1px 2px rgba(10, 40, 70, .06), 0 4px 16px rgba(10, 40, 70, .06);
  --font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Top bar ---------- */
.topbar { position: relative; background: var(--brand-deep); color: #c9d8e4; font-size: 13px; }
/* National flag stripe */
.topbar::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, #00b5e2 0 33.33%, #ef3340 33.33% 66.66%, #509e2f 66.66% 100%);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar a { color: #c9d8e4; }
.topbar a:hover { color: #fff; }
.topbar__info { display: flex; gap: 24px; align-items: center; }
.topbar__info a { display: inline-flex; align-items: center; gap: 6px; }
.topbar__info .icon { width: 13px; height: 13px; opacity: .7; }
.topbar__tools { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; gap: 2px; }
.lang a { padding: 2px 8px; border-radius: 3px; font-weight: 600; letter-spacing: .03em; }
.lang a[aria-current="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.lang span { padding: 2px 8px; font-weight: 600; letter-spacing: .03em; opacity: .45; cursor: default; }

/* ---------- Header ---------- */
.header { position: relative; background: #fff; color: var(--ink); }
.header > .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 18px; color: var(--brand-deep); }
.brand:hover { color: var(--brand-deep); }
.brand__logo { width: 80px; height: 80px; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid var(--line); }
.brand__parent { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.brand__name { font-size: 21px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.contact-chip { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--ink); transition: background-color .2s; }
.contact-chip:hover { background: var(--bg-soft); color: var(--ink); }
.contact-chip__icon {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; transition: background-color .2s, color .2s;
}
.contact-chip:hover .contact-chip__icon { background: var(--brand); color: #fff; }
.contact-chip__icon .icon { width: 18px; height: 18px; }
.contact-chip__label { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.contact-chip__value { display: block; font-size: 15px; font-weight: 700; color: var(--brand-deep); line-height: 1.3; white-space: nowrap; }

.icon-btn {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none; margin-left: 6px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--brand-deep);
  transition: background-color .2s, color .2s, border-color .2s;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.menu-toggle { display: none; }

.search-panel { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 16px 0; }
.search-panel:not([hidden]) { animation: panel-in .2s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }
.search {
  display: flex; align-items: center; gap: 10px; background: #fff; padding: 6px 6px 6px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 97, 149, .12); }
.search > .icon { color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 8px 0; font: inherit; font-size: 15px; }
.search input:focus { outline: none; }
.search .btn { padding: 10px 20px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background:
    radial-gradient(600px 120px at 85% -40%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-dark) 35%, var(--brand) 100%);
  box-shadow: 0 10px 30px -12px rgba(8, 44, 70, .5);
}
.nav::after { /* thin highlight line along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
}
.nav__list { position: relative; display: flex; align-items: center; gap: 4px; min-height: 64px; }
.nav__item { position: relative; }
.nav__link {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none; white-space: nowrap;
  color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  transition: color .2s, background-color .2s;
}
.nav__link:hover, .nav__item:focus-within > .nav__link { color: #fff; background: rgba(255, 255, 255, .1); }
.nav__link .chev { width: 14px; height: 14px; opacity: .7; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.nav__item:hover > .nav__link .chev, .nav__item:focus-within > .nav__link .chev { transform: rotate(180deg); }
.nav__link .ext { width: 12px; height: 12px; opacity: .6; }

/* Sliding hover pill (positioned by JS; links lose their own hover background when it is present) */
.nav__pill {
  position: absolute; top: 50%; left: 0; height: 40px; width: 0; margin-top: -20px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.nav.has-pill .nav__link:hover, .nav.has-pill .nav__item:focus-within > .nav__link { background: none; }

/* Home: round white button */
.nav__home { width: 40px; padding: 0; justify-content: center; margin-right: 6px; }
.nav__home .icon { width: 18px; height: 18px; }
.nav__link[aria-current="page"] { background: #fff !important; color: var(--brand-deep); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .25); }

/* Database CTA on the right */
.nav__item--cta { margin-left: auto; }
.nav__cta {
  gap: 8px; padding: 0 18px; color: var(--brand-deep);
  background: linear-gradient(180deg, #fff, #e6f0f7) !important;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(8, 44, 70, .08);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.nav__cta .icon { width: 16px; height: 16px; color: var(--brand); }
.nav__cta:hover, .nav__item:focus-within > .nav__cta { color: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .5); }

/* Dropdowns */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 280px; background: #fff;
  border-radius: 14px; box-shadow: 0 20px 45px -12px rgba(8, 44, 70, .35), 0 0 0 1px rgba(8, 44, 70, .06); padding: 8px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transform-origin: top center;
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
.dropdown::before { /* hover bridge across the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.dropdown::after { /* little arrow */
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  background: #fff; transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.nav__item:hover > .dropdown, .nav__item:focus-within > .dropdown, .nav__item.is-open > .dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
}
.dropdown a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
  color: var(--ink); font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s;
}
.dropdown a::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--line); transition: background-color .15s, transform .15s;
}
.dropdown a:hover { background: var(--brand-light); color: var(--brand); }
.dropdown a:hover::before { background: var(--brand); transform: scale(1.3); }

/* ---------- Hero slider ---------- */
.hero { position: relative; height: 520px; overflow: hidden; background: var(--brand-deep); }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 44, 70, .88) 0%, rgba(8, 44, 70, .6) 45%, rgba(8, 44, 70, .1) 100%);
}
.hero__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.hero__text { max-width: 600px; color: #fff; }
.hero__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #9fd0f2; margin-bottom: 14px; padding-left: 14px; border-left: 3px solid var(--accent);
}
.hero__title { font-size: 42px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.hero__lead { font-size: 18px; color: #d7e5f0; margin-bottom: 28px; }
.hero__controls {
  position: absolute; z-index: 3; bottom: 28px; left: 0; right: 0;
}
.hero__controls .container { display: flex; align-items: center; gap: 16px; }
.hero__dots { display: flex; gap: 8px; }
.hero__dot {
  width: 34px; height: 4px; border: 0; padding: 0; background: rgba(255, 255, 255, .35); border-radius: 2px;
}
.hero__dot[aria-current="true"] { background: #fff; }
.hero__arrows { display: flex; gap: 8px; margin-left: auto; }
.hero__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center;
}
.hero__arrow:hover { background: rgba(255, 255, 255, .2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: #fff; color: var(--brand-dark); }
.btn--primary:hover { background: var(--brand-light); color: var(--brand-dark); }
.btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section--soft { background: var(--bg-soft); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.section__title { font-size: 28px; color: var(--brand-deep); position: relative; padding-bottom: 12px; }
.section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--accent); }
.section__sub { color: var(--ink-soft); margin-top: 16px; max-width: 640px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.more-link .icon { width: 16px; height: 16px; transition: transform .15s; }
.more-link:hover .icon { transform: translateX(3px); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.about__text p { color: var(--ink-soft); margin-top: 16px; }
.about__text .btn { margin-top: 28px; }
.about__cards { display: grid; gap: 16px; }
.mini-card { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mini-card__icon {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius); background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center;
}
.mini-card__icon .icon { width: 22px; height: 22px; }
.mini-card h3 { font-size: 17px; color: var(--brand-deep); margin-bottom: 6px; }
.mini-card p { font-size: 15px; color: var(--ink-soft); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.fact { padding: 24px 28px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact__num { font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.fact__label { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.service:hover { border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); transform: translateY(-2px); }
.service__icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--brand); color: #fff; display: grid; place-items: center; }
.service__icon .icon { width: 24px; height: 24px; }
.service h3 { font-size: 18px; color: var(--brand-deep); }
.service p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Research areas ---------- */
.research { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.research__item {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 180px;
  padding: 24px; border-radius: var(--radius); background: var(--brand-dark); color: #fff; overflow: hidden;
}
.research__item:nth-child(2) { background: var(--brand); }
.research__item:nth-child(3) { background: #1b6fa8; }
.research__item:nth-child(4) { background: #0e5482; }
.research__item:nth-child(5) { background: var(--brand-deep); }
.research__item:hover { color: #fff; }
.research__num { font-size: 13px; font-weight: 700; color: #9fd0f2; letter-spacing: .08em; }
.research__item h3 { font-size: 17px; line-height: 1.35; }
.research__go { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #cfe3f2; }
.research__go .icon { width: 16px; height: 16px; transition: transform .15s; }
.research__item:hover .research__go .icon { transform: translateX(4px); }

/* ---------- News (3D cards) ---------- */
.section:has(.news) {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(20, 97, 149, .10), transparent 70%),
    radial-gradient(700px 360px at 0% 100%, rgba(20, 97, 149, .08), transparent 70%),
    var(--bg-soft);
}
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; perspective: 1100px; }
.news-card {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; --lift: 0px;
  position: relative; display: flex; flex-direction: column; color: var(--ink);
  background: #fff; border-radius: 12px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  box-shadow: 0 1px 2px rgba(8, 44, 70, .06), 0 10px 24px -12px rgba(8, 44, 70, .22);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
  will-change: transform;
}
.news-card.is-tilting { transition: transform .08s linear, box-shadow .4s; }
.news-card:hover, .news-card:focus-visible {
  --lift: 12px; color: var(--ink);
  box-shadow: 0 2px 4px rgba(8, 44, 70, .06), 0 30px 50px -20px rgba(8, 44, 70, .45);
}

.news-card__img {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px 12px 0 0; background: var(--brand-light);
  transform: translateZ(20px);
}
.news-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 44, 70, .45));
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s cubic-bezier(.25, .8, .25, 1); }
.news-card:hover .news-card__img img { transform: scale(1.1); }

/* Date badge floats in front of the card */
.news-card__date {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px;
  background: #fff; border-radius: 10px; color: var(--brand-deep); line-height: 1;
  box-shadow: 0 10px 20px -6px rgba(8, 44, 70, .35);
  transform: translateZ(60px);
}
.news-card__date::before {
  content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.news-card__day { font-size: 26px; font-weight: 800; }
.news-card__month { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 5px; white-space: nowrap; }

.news-card__body {
  flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px;
  transform: translateZ(35px);
}
.news-card h3 {
  font-size: 18px; line-height: 1.4; color: var(--brand-deep);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--brand);
}
.news-card__more .icon { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.news-card:hover .news-card__more .icon { transform: translateX(4px); }

/* Light reflection that follows the pointer */
.news-card__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .35), transparent 55%);
  opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  transform: translateZ(70px);
}
.news-card:hover .news-card__glare { opacity: 1; }

/* Entrance: cards flip up into place (uses individual properties so the tilt `transform` still works) */
.news.js-reveal .news-card { opacity: 0; translate: 0 40px; rotate: x 25deg; }
.news.js-reveal.is-visible .news-card { animation: news-in .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes news-in {
  from { opacity: 0; translate: 0 40px; rotate: x 25deg; }
  to { opacity: 1; translate: 0 0; rotate: x 0deg; }
}

/* ---------- Gallery & Research ---------- */
.split { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: stretch; }
[hidden] { display: none !important; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; }
.tabs button {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: background-color .2s, color .2s, box-shadow .2s;
}
.tabs button .icon { width: 16px; height: 16px; }
.tabs button:hover { color: var(--brand); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(8, 44, 70, .12); }

/* Bento photo grid: one large tile + four small */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; min-height: 340px; height: 100%; }
.bento__item {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--brand-light); isolation: isolate;
  box-shadow: 0 6px 18px -10px rgba(8, 44, 70, .4);
}
.bento__item--big { grid-column: span 2; grid-row: span 2; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.25, .8, .25, 1); }
.bento__item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 44, 70, .75));
  opacity: 0; transition: opacity .3s;
}
.bento__item--big::after { opacity: .9; }
.bento__item:hover img { transform: scale(1.08); }
.bento__item:hover::after { opacity: 1; }
.bento__caption {
  position: absolute; left: 18px; right: 60px; bottom: 16px; z-index: 2;
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1.35;
}
.bento__zoom {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--brand-deep);
  opacity: 0; transform: scale(.7); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.bento__zoom .icon { width: 16px; height: 16px; }
.bento__item:hover .bento__zoom, .bento__item:focus-visible .bento__zoom { opacity: 1; transform: none; }
.bento__item--more::after { opacity: 1; background: rgba(8, 44, 70, .62); }
.bento__count {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .04em;
}
.bento__count strong { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: 0; }

.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.video-card {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--brand-deep);
  box-shadow: 0 6px 18px -10px rgba(8, 44, 70, .4);
}
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .9s cubic-bezier(.25, .8, .25, 1), opacity .3s; }
.video-card:hover img { transform: scale(1.06); opacity: 1; }
.video-card__play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  box-shadow: 0 0 0 8px rgba(214, 32, 42, .25); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.video-card__play .icon { width: 26px; height: 26px; margin-left: 3px; }
.video-card:hover .video-card__play { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(214, 32, 42, .2); }
.video-card__label {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600;
}
.video-card__label .icon { width: 12px; height: 12px; }

.gallery-block { display: flex; flex-direction: column; }
.gallery-block > [role=tabpanel] { flex: 1; }
.gallery-block__more { margin-top: 22px; align-self: flex-start; }

/* Dark research panel */
.research-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 36px 32px 28px; border-radius: 20px; color: #fff;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(42, 140, 205, .45), transparent 70%),
    linear-gradient(160deg, var(--brand-dark), var(--brand-deep));
  box-shadow: 0 24px 50px -24px rgba(8, 44, 70, .6);
}
.research-panel::before { /* faint dot grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%); mask-image: linear-gradient(200deg, #000, transparent 55%);
}
.research-panel > * { position: relative; }
.research-panel__eyebrow {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fd0f2;
  padding-left: 12px; border-left: 3px solid var(--accent);
}
.research-panel__title { font-size: 26px; margin-top: 12px; }
.research-panel__lead { color: #bcd2e3; font-size: 15px; margin-top: 8px; }

.research-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.research-list a {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: #fff;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.research-list a:hover, .research-list a:focus-visible {
  color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); transform: translateX(4px);
}
.research-list__num {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 800; color: #9fd0f2; transition: background-color .2s, color .2s;
}
.research-list a:hover .research-list__num { background: #fff; color: var(--brand-deep); }
.research-list__text { flex: 1; min-width: 0; }
.research-list__title { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.research-list__meta { display: block; font-size: 13px; color: #a9c2d6; margin-top: 2px; }
.research-list .icon { width: 18px; height: 18px; color: #9fd0f2; opacity: .5; transition: transform .25s, opacity .2s; }
.research-list a:hover .icon { opacity: 1; transform: translateX(3px); }

/* Lightbox */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 20, 33, .94); color: #fff;
}
.lightbox[open] { display: grid; place-items: center; animation: panel-in .25s ease-out; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; max-width: min(1100px, 88vw); text-align: center; }
.lightbox__img { max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__caption { margin-top: 14px; color: #c9d8e4; font-size: 15px; }
.lightbox__counter { position: absolute; top: 24px; left: 28px; font-size: 14px; font-weight: 600; color: #9fb4c6; }
.lightbox__btn {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .2); }
.lightbox__close { top: 16px; right: 20px; }
.lightbox__prev { left: 24px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 24px; top: 50%; margin-top: -24px; }

/* ---------- Useful links (two scrolling rows) ---------- */
.section--compact { padding: 48px 0 52px; }
.section--compact .section__head { margin-bottom: 22px; }

.marquee { display: grid; gap: 12px; }
.marquee__row {
  overflow: hidden;
  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; gap: 12px; width: max-content; padding: 6px 0;
  animation: marquee var(--duration, 60s) linear infinite;
}
.marquee__row--reverse .marquee__track { animation-direction: reverse; }
.marquee__row:hover .marquee__track, .marquee__row:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

.marquee a {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
  color: var(--ink); font-size: 14px; font-weight: 500;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .2s, color .2s, background-color .2s;
}
.marquee a::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--brand); opacity: .35;
  transition: opacity .2s, transform .2s;
}
.marquee a:hover, .marquee a:focus-visible {
  transform: translateY(-2px); border-color: var(--brand); background: var(--brand); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(20, 97, 149, .45);
}
.marquee a:hover::before, .marquee a:focus-visible::before { background: #fff; opacity: 1; transform: scale(1.2); }
.marquee .icon { width: 14px; height: 14px; color: var(--muted); transition: transform .25s, color .2s; }
.marquee a:hover .icon, .marquee a:focus-visible .icon { color: #fff; transform: translate(2px, -2px); }

/* ---------- Footer ---------- */
.footer { background: var(--brand-deep); color: #b6c8d6; font-size: 14px; }
.footer a { color: #b6c8d6; }
.footer a:hover { color: #fff; }
.footer__main { display: grid; grid-template-columns: var(--footer-cols, 1.5fr 1fr 1fr 1.3fr); gap: 40px; padding: 56px 0 40px; }
.footer__brand { display: flex; gap: 14px; align-items: center; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; text-transform: uppercase; }
.footer__brand img { width: 56px; height: 56px; background: #fff; border-radius: 50%; padding: 3px; }
.footer__about { margin-top: 18px; line-height: 1.6; }
.footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.footer__nav li + li { margin-top: 8px; }
.footer__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer__social { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #cfe0ec; transition: background-color .2s, color .2s, transform .2s; }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__social:hover { background: #fff; color: var(--brand-deep); transform: translateY(-2px); }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.contact-list li + li { margin-top: 12px; }
.contact-list .icon { width: 17px; height: 17px; margin-top: 2px; color: #7fb4dc; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0; font-size: 13px; }
.footer__bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .research { grid-template-columns: repeat(3, 1fr); }
  .footer__main { grid-template-columns: 1fr 1fr; }

  /* Header + navigation collapse to a hamburger menu */
  .contact-chip:nth-child(2) { display: none; }
  .menu-toggle { display: grid; }
  .nav { position: static; box-shadow: none; background: #fff; }
  .nav .container { padding: 0; }
  .nav__list { display: none; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__list { display: flex; animation: panel-in .2s ease-out; }
  .nav__link {
    height: auto; width: 100%; padding: 14px 20px; justify-content: space-between;
    color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--line);
  }
  .nav::after, .nav__pill, .dropdown::before, .dropdown::after { display: none; }
  .nav__list { min-height: 0; gap: 0; align-items: stretch; }
  .nav__link { border-radius: 0; letter-spacing: .03em; }
  .nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--brand); background: var(--bg-soft); }
  .nav__item:hover > .nav__link .chev, .nav__item:focus-within > .nav__link .chev { transform: none; }
  .nav__home { width: 100%; height: auto; justify-content: flex-start; padding: 14px 20px; margin: 0; }
  .nav__link[aria-current="page"] { background: var(--brand-light) !important; color: var(--brand); box-shadow: none; }
  .nav__item--cta { margin: 12px 20px; }
  .nav__cta { justify-content: center; border-radius: var(--radius); border-bottom: 0; color: #fff; background: var(--brand) !important; box-shadow: none; }
  .nav__cta .icon { color: #fff; }
  .nav__cta:hover, .nav__item:focus-within > .nav__cta { color: #fff; transform: none; box-shadow: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; min-width: 0;
    border-radius: 0; display: none; background: var(--bg-soft); padding: 4px 0;
  }
  .nav__item:hover > .dropdown, .nav__item:focus-within > .dropdown { display: none; }
  .nav__item.is-open > .dropdown { display: block; }
  .nav__item.is-open .chev { transform: rotate(180deg) !important; }
  .dropdown a { padding: 11px 32px; border-radius: 0; }
  .dropdown a:hover { padding-left: 36px; }
}

@media (max-width: 900px) {
  .contact-chip { display: none; }
  .brand__logo { width: 60px; height: 60px; }
  .brand__name { font-size: 17px; }

  .hero { height: 460px; }
  .hero__title { font-size: 32px; }
  .hero__lead { font-size: 16px; }
  .about, .split { grid-template-columns: 1fr; gap: 40px; }
  .services, .news { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .topbar__info { display: none; }
  .topbar .container { justify-content: flex-end; }
  .header > .container { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .brand { gap: 10px; }
  .brand__logo { width: 46px; height: 46px; }
  .brand__text { padding-left: 10px; }
  .brand__parent { display: none; }
  .brand__name { font-size: 13px; }
  .brand__name br { display: none; }
  .header__actions { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; margin-left: 0; }
  .search .btn { padding: 10px 14px; }
  .hero { height: 480px; }
  .hero__content { align-items: flex-end; padding-bottom: 92px; }
  .hero__title { font-size: 26px; }
  .hero__lead { font-size: 15px; margin-bottom: 22px; }
  .hero .btn--ghost { display: none; }
  .hero__slide::after { background: linear-gradient(0deg, rgba(8, 44, 70, .92) 10%, rgba(8, 44, 70, .45) 100%); }
  .section { padding: 52px 0; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .section__title { font-size: 24px; }
  .services, .news, .research { grid-template-columns: 1fr; }
  .research__item { min-height: 0; }
  .bento { grid-template-rows: 220px 90px; gap: 8px; }
  .bento__item--big { grid-column: 1 / -1; grid-row: span 1; }
  .videos { grid-template-columns: 1fr; }
  .research-panel { padding: 28px 20px 20px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 24px; margin: 0; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
  .fact { padding: 18px; }
  .fact__num { font-size: 26px; }
  .footer__main { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* The useful-links strip keeps scrolling (slow, pauses on hover) — requested by the site owner */
  .marquee__track { animation: marquee var(--duration, 60s) linear infinite !important; }
  .marquee__row--reverse .marquee__track { animation-direction: reverse !important; }
  .marquee__row:hover .marquee__track, .marquee__row:focus-within .marquee__track { animation-play-state: paused !important; }
  .news.js-reveal .news-card { opacity: 1; translate: none; rotate: none; }
  /* Fotoların üzərinə gələndə yumşaq böyümə də saxlanılır — sayt sahibinin istəyi ilə */
  .news-card__img img, .bento__item img, .photo-grid img, .video-card img, .video-item__frame img, .partner__logo img {
    transition: transform .9s cubic-bezier(.25, .8, .25, 1), opacity .3s, filter .3s !important;
  }
  .bento__item::after, .photo-grid a::after, .news-card__img::after { transition: opacity .4s ease !important; }
  .bento__zoom { transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1) !important; }
}