/* 1. FONTY — pliki lokalne, bez połączeń z Google Fonts. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-extrabold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* 2. EDYCJA WYGLĄDU — kolory i maksymalna wielkość nazwy. */
:root {
  color-scheme: dark;
  --background: #06080b;
  --text: #eafcff;
  --muted: #aab8c4;
  --accent: #2fe6ff;
  --accent-rgb: 47, 230, 255;
  --title-size: 6rem;
  --font: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* 3. PODSTAWA I TŁO */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  background: radial-gradient(ellipse at 50% 0%, #0c1821 0%, var(--background) 65%);
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, rgb(255 255 255 / 1.4%) 3px 4px);
}
::selection { color: var(--text); background: #185966; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-150%);
  padding: .6rem 1rem;
  background: var(--background);
  color: var(--accent);
  z-index: 2;
}
.skip-link:focus { transform: translateY(0); }
.page {
  max-width: 90rem;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* 4. LOGO I TAGLINE */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}
.brand-logo {
  display: block;
  width: 7rem;
  height: 7rem;
  flex: 0 0 auto;
  object-fit: contain;
}
.tagline {
  margin: 0;
  color: var(--accent);
  font-size: .95rem;
  letter-spacing: .18em;
}

/* 5. NAZWA, TEMATY I OPISY */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 4rem;
  animation: appear .65s ease-out both;
}
h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.4rem, 7.4vw, var(--title-size));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 0 45px rgb(var(--accent-rgb), .18);
}
.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  max-width: 65rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}
.topic {
  padding: .35rem .8rem;
  border: 1px solid rgb(var(--accent-rgb), .3);
  border-radius: .3rem;
  color: var(--accent);
  background: rgb(var(--accent-rgb), .04);
  font-size: .9rem;
}
.copy {
  width: 100%;
  max-width: 65ch;
  margin: 1.8rem 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.copy--accent { margin-top: 1rem; color: var(--accent); }

/* 6. PRZYCISK I SOCIALE */
.subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.3rem;
  max-width: 100%;
  margin-top: 2.3rem;
  padding: .9rem 1.8rem;
  border: 1px solid var(--accent);
  border-radius: .4rem;
  background: var(--accent);
  color: var(--background);
  font: 800 1rem/1.5 var(--font);
  text-decoration: none;
  box-shadow: 0 0 28px rgb(var(--accent-rgb), .22);
  transition: box-shadow .2s ease, transform .2s ease;
}
a.subscribe:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgb(var(--accent-rgb), .4);
}
.subscribe:disabled { opacity: .8; cursor: default; }
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.5rem;
  margin-top: 1.6rem;
  font-size: .95rem;
  color: var(--muted);
}
.socials a { text-decoration: none; text-underline-offset: .3em; }
.socials a:hover { color: var(--accent); text-decoration: underline; }
.discord-name { color: var(--accent); }

/* 7. PODPIS TERMINALA */
.terminal { margin-top: 2rem; color: #91a4b2; font-size: .95rem; overflow-wrap: anywhere; }
.terminal-path { color: var(--accent); }
.cursor {
  display: inline-block;
  width: .55rem;
  height: 1.1rem;
  margin-left: .45rem;
  vertical-align: -.15rem;
  background: var(--accent);
  box-shadow: 0 0 10px rgb(var(--accent-rgb), .35);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 8. TELEFONY I PREFERENCJE DOSTĘPNOŚCI */
@media (max-width: 42rem) {
  .site-header { gap: .8rem; padding-top: 1rem; }
  .brand-logo { width: 5rem; height: 5rem; }
  .tagline { font-size: .75rem; letter-spacing: .08em; }
  .hero { padding-top: 2rem; padding-bottom: 3rem; }
  .topic { font-size: .8rem; }
  .copy { font-size: 1rem; }
  .socials, .terminal { font-size: .85rem; }
}
@media (max-width: 22rem) {
  .site-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}