@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #fff;
  background: #222 url("background.png") center top / cover fixed no-repeat;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: #d3e0ff; }
a:hover { color: #fff; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #000; padding: .5rem 1rem; z-index: 100; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
}
.header__inner {
  max-width: 1100px; margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.header__logo img { height: 40px; width: auto; display: block; }
.header__menu ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.header__menu a {
  color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .03em;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.header__menu a:hover, .header__menu a[aria-current="page"] { border-bottom-color: #d3e0ff; }

.header__hamburger {
  display: none; background: none; border: 0; cursor: pointer; padding: 6px;
}
.header__hamburger span { display: block; width: 26px; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; }

@media (max-width: 700px) {
  .header__hamburger { display: block; }
  .header__menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(0,0,0,.92); }
  .header__menu.open { display: block; }
  .header__menu ul { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem; }
  .header__menu li { padding: .6rem 0; }
}

/* Content */
main {
  flex: 1;
  width: 100%; max-width: 900px; margin: 2.5rem auto; padding: 0 1.25rem;
}
.article {
  background: rgba(0, 0, 0, .6);
  border-radius: 10px;
  padding: 2rem 2.25rem;
  animation: fadeUp .6s ease-out both;
}
.article h1 { font-size: 2.4rem; margin-top: 0; }
.article h2 { font-size: 2rem; line-height: 1.3; }
.article h2:first-child { margin-top: 0; }
.article p a, .article li a { font-size: 1.1em; word-break: break-word; }
.article img { max-width: 100%; height: auto; border-radius: 6px; }
.article figure { margin: 1.5rem 0; }

.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.5rem 0;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

@media (max-width: 600px) {
  .article { padding: 1.25rem; }
  .article h1 { font-size: 1.8rem; }
  .article h2 { font-size: 1.5rem; }
}

/* Footer */
.footer {
  background: rgba(0, 0, 0, .8);
  font-size: .9rem;
}
.footer__inner {
  max-width: 1100px; margin: 0 auto; padding: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
}
.footer p { margin: 0; }

.scroll-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.scroll-top.show { opacity: 1; pointer-events: auto; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Download section */
.download {
  margin: 2rem 0; padding: 1.5rem 1.75rem;
  border: 1px solid rgba(211, 224, 255, .35); border-radius: 10px;
  background: rgba(211, 224, 255, .06);
}
.download h2 { margin-top: 0; }
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 6px;
  background: #d3e0ff; color: #111 !important; font-weight: 700; text-decoration: none;
  transition: transform .15s, background .15s;
}
.btn:hover { background: #fff; transform: translateY(-2px); }
.small { font-size: .9rem; opacity: .85; }