/*
Theme Name: Pasiuta
Theme URI: https://pasiuta.pl
Description: Child theme for Hello Elementor. Personal site of Aleks Pasiuta. Dark/light theme system.
Author: Aleks Pasiuta
Template: hello-elementor
Version: 1.80.0
Text Domain: pasiuta
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================
   Design tokens — dark (default) and light themes
   ============================================================ */
:root,
:root[data-theme="dark"] {
  --bg: #111827;
  --bg-elev: #161E2E;
  --surface: #1B2435;
  --surface-2: #212C41;
  --text: #f2f4f7;
  --text-muted: #99a2ae;
  --border: #2A3549;
  --border-strong: #3A4A66;
  --accent: #FF9030;
  --accent-strong: #F57C00;
  --accent-soft: rgba(255, 144, 48, 0.13);
  --accent-contrast: #1b1204;
  --code-bg: #0D1523;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  --bg: #f6f5f1;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --text: #15181d;
  --text-muted: #5c6672;
  --border: #e4e1d8;
  --border-strong: #c9c5b9;
  --accent: #C2410C;
  --accent-strong: #9A3412;
  --accent-soft: rgba(194, 65, 12, 0.1);
  --accent-contrast: #fff8ec;
  --code-bg: #edebe4;
  --shadow: 0 20px 60px rgba(30, 25, 10, 0.12);
  --shadow-soft: 0 6px 24px rgba(30, 25, 10, 0.1);
}

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

/* Decorative overhangs (brush-stroke highlights) may stick past the viewport
   on mid widths; clip instead of letting a horizontal scrollbar appear. */
html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .site-header,
  .site-footer,
  .card,
  .btn,
  .surface-box,
  .hdr-block {
    transition: background-color 0.25s ease, color 0.25s ease,
      border-color 0.25s ease;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--text);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p { margin: 0 0 1.1em; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-strong);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

.mono-label {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
}

.section--tight { padding: 56px 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 10px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Elementor kit overrides: inherit site colors instead of kit defaults */
body .elementor-widget-heading .elementor-heading-title {
  color: inherit;
  font-family: inherit;
}
body .elementor-widget-text-editor {
  color: inherit;
}
body .elementor {
  background: transparent;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--accent:hover {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Kill Hello Elementor reset.css button styling: it paints EVERY raw
   <button> with pink #cc3366 (border at rest, solid background on
   hover/focus). body-prefixed rules beat its `button:hover` 0-1-1
   specificity regardless of load order; components style themselves. */
body button,
body [type="button"],
body [type="submit"] {
  background-color: transparent;
  border-color: var(--border);
  color: inherit;
}
body button:hover,
body button:focus,
body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus {
  background-color: transparent;
  color: inherit;
}
body button.theme-toggle { border: 0; }
body a.btn { border-color: transparent; }

/* Soft accent glow on button hover (site-wide, like the terminal). */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: box-shadow 0.3s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
  .btn:hover {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
      0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.surface-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
}

/* ============================================================
   Header
   ============================================================ */
body .site-header:not(.dynamic-header) {
  position: sticky;
  top: 12px;
  z-index: 100;
  background: transparent;
  /* Hello Elementor's theme.css targets .site-header:not(.dynamic-header)
     with width/max-width (800px) + display:flex — our header does its own
     layout via the .container row; kill the parent-theme constraint.
     (body prefix needed: parent selector is 0-2-0 specificity.) */
  display: block;
  width: 100%;
  max-width: none;
}

.site-header__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}

/* Floating blocks: pill containers (tasteskill.dev style) */
.hdr-block {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 24px;
  color: var(--accent);
}
body .brand__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hover reaction: arrow launches, name turns amber, terminal cursor blinks */
.brand__name::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -2px;
  opacity: 0;
}

.brand:hover .brand__name {
  color: var(--accent);
}

.brand:hover .brand__name::after {
  opacity: 1;
  animation: pasiuta-blink 1.1s steps(2, start) infinite;
}

.brand:hover .brand__logo {
  transform: translateX(4px) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .brand__name {
    transition: color 0.25s ease;
  }
  .brand__logo {
    transition: transform 0.25s ease;
  }
  .brand__name::after {
    transition: opacity 0.2s ease;
  }
}

.site-nav {
  justify-self: center;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* Thin underline, grows left-to-right on hover */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 1px;
  border-radius: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-nav__list a:hover {
  color: var(--accent);
}

.site-nav__list a:hover::after {
  transform: scaleX(1);
}

.site-nav__list .current-menu-item a,
.site-nav__list .current_page_item a {
  color: var(--accent);
}

.site-nav__list .current-menu-item a::after,
.site-nav__list .current_page_item a::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav__list a {
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .site-nav__list a::after {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .site-nav__list a:hover {
    transform: scale(1.04);
  }
}

.site-header__tools {
  justify-self: end;
}

/* Language switcher inside the tools block */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lang-switcher__item {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-muted);
  text-decoration: none;
}

.lang-switcher__item:hover {
  color: var(--accent);
}

.lang-switcher__item.is-current {
  color: var(--accent);
}

.hdr-divider {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  margin: 0 6px;
}

/* Theme toggle: icon button inside the tools block */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.theme-toggle svg {
  flex: 0 0 auto;
}
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }

@media (max-width: 1120px) {
  /* Two-row header: brand + tools on top, a full-width menu button below.
     The button opens a fullscreen menu (see .mobile-menu) instead of
     squeezing 6 items into a scrollable row. */
  .site-header__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  tools"
      "toggle toggle";
    gap: 8px 12px;
    padding: 8px 0 8px;
  }
  .brand { grid-area: brand; justify-self: start; }
  .site-header__tools { grid-area: tools; }
  .site-nav { display: none; }
  /* base .menu-toggle rule lives later in the file — specificity bump
     keeps this media override winning */
  .site-header__row .menu-toggle { display: flex; }
}

@media (max-width: 860px) {
  /* compact row 1 so brand + tools fit narrow screens */
  .brand { font-size: 20px; }
  .brand__logo { width: 30px; height: 30px; font-size: 20px; }
  .lang-switcher__item { padding: 6px 10px; }
  .theme-toggle { width: 32px; height: 32px; }
  .hdr-divider { margin: 0 5px; }
}

@media (max-width: 400px) {
  .brand { font-size: 18px; }
  .brand__logo { width: 28px; height: 28px; font-size: 18px; }
  .lang-switcher__item { padding: 5px 8px; font-size: 11px; }
  .theme-toggle { width: 30px; height: 30px; }
  .hdr-divider { display: none; }
  .site-header__row { gap: 8px; }
}

/* ultra-narrow: header row itself scrolls, page never does */
@media (max-width: 340px) {
  .site-header__row {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header__row::-webkit-scrollbar { display: none; }
}

/* Fullscreen mobile menu (opened by .menu-toggle below 1120px) */
.menu-toggle {
  display: none;
  grid-area: toggle;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.menu-toggle__burger {
  position: relative;
  width: 16px;
  height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.menu-toggle__burger::before,
.menu-toggle__burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.menu-toggle__burger::before { top: 0; }
.menu-toggle__burger::after { bottom: 0; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  padding: 24px 0 40px;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
}
body.menu-open { overflow: hidden; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.mobile-menu__label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mobile-menu__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.mobile-menu__nav { flex: 1; }

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mmenu;
}
.mobile-menu__list li { counter-increment: mmenu; }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 4px;
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mobile-menu__list a::before {
  content: counter(mmenu, decimal-leading-zero);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--text-muted);
}
.mobile-menu__list .current-menu-item a { color: var(--accent); }

.mobile-menu__foot { margin-top: 32px; }
.mobile-menu__foot .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu { transition: opacity 0.25s ease, visibility 0.25s ease; }
}

/* Vertical brand rail: on scroll (desktop only) the in-flow brand fades
   out and a vertical variant docks next to the content's left edge,
   aligned with the top of the hero content. */
.brand-rail {
  display: none;
  position: fixed;
  left: calc((100vw - 1120px) / 2 - 44px);
  top: 190px;
  z-index: 90;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  opacity: 0;
}

.brand-rail__arrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-90deg);
}

.brand-rail__name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Terminal cursor blinks below the name on hover (same as in-flow brand). */
.brand-rail__name::after {
  content: "";
  display: none;
  width: 0.9em;
  height: 10px;
  margin-top: 8px;
  background: var(--accent);
}

.brand-rail:hover .brand-rail__name { color: var(--accent); }

@media (min-width: 1280px) {
  .is-scrolled .brand {
    opacity: 0;
    pointer-events: none;
  }
  .is-scrolled .brand-rail {
    display: flex;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand { transition: opacity 0.3s ease; }
  .brand-rail { transition: opacity 0.3s ease; }
  .brand-rail__name { transition: color 0.25s ease; }
  .brand-rail__arrow { transition: transform 0.25s ease; }
  .brand-rail:hover .brand-rail__name::after {
    display: inline-block;
    animation: pasiuta-blink 1.1s steps(2, start) infinite;
  }
  .brand-rail:hover .brand-rail__arrow {
    transform: rotate(-90deg) translateY(-4px);
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  margin-top: 40px;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 32px 24px 36px;
}
.site-footer__tagline {
  margin: 0 0 24px;
  max-width: 52ch;
  font-size: 15px;
  color: var(--text-muted);
}
.site-footer a {
  color: var(--accent);
}
.site-footer a:hover { color: var(--accent-strong); }

/* Quiet block hover family (like process/rate cells): soft tint + inset ring. */
@media (prefers-reduced-motion: no-preference) {
  .site-footer { transition: box-shadow 0.25s ease; }
}
.site-footer:hover {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.site-footer__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  color: var(--text-muted);
}
.site-footer__aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
body .site-footer__photo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid var(--border);
}
.site-footer__legal {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.site-footer__legal p { margin: 0; }


/* Footer brand lockup (15.09): echo of the header brand, large, above the tagline. */
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text);
}
.site-footer__brand-name {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.site-footer__brand-logo {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
/* Same brand hover reaction as the header: name -> accent + blinking terminal cursor. */
.site-footer__brand-name::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 15px;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -2px;
  opacity: 0;
}
.site-footer__brand:hover .site-footer__brand-name { color: var(--accent); }
.site-footer__brand:hover .site-footer__brand-name::after {
  opacity: 1;
  animation: pasiuta-blink 1.1s steps(2, start) infinite;
}
.site-footer__brand:hover .site-footer__brand-logo {
  transform: translateX(4px) rotate(-45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer__brand-name { transition: color 0.25s ease; }
  .site-footer__brand-logo { transition: transform 0.25s ease; }
  .site-footer__brand-name::after { transition: opacity 0.2s ease; }
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   Utilities
   ============================================================ */
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }

/* ============================================================
   Hero (front page)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 11vh, 128px) 0 clamp(48px, 9vh, 104px);
}

/* Grid background: page-level, starts at the very top behind the header */
.hero-bg-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1400px 720px at 79% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%),
    radial-gradient(820px 520px at 86% 2%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    linear-gradient(color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(1400px 900px at 50% 0%, #000 40%, transparent 88%);
  mask-image: radial-gradient(1400px 900px at 50% 0%, #000 40%, transparent 88%);
}

.site-main {
  position: relative;
  z-index: 1;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  animation: pasiuta-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.05s;
}
.hero__title-accent { display: block; }

.hero__lead {
  max-width: 34em;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  animation: pasiuta-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.12s;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 24px;
  animation: pasiuta-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.18s;
}

/* Terminal card */
.term {
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--code-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: pasiuta-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.term__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  opacity: 0.85;
}
.term__dot:nth-child(1) { background: #f26d6d; }
.term__dot:nth-child(2) { background: #e8c86a; }
.term__dot:nth-child(3) { background: #7cc77c; }

.term__title {
  margin-left: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.term__body {
  padding: 22px 24px 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-muted);
  /* Reserve room for all lines + the hover line so nothing jumps. */
  min-height: calc(1.9em * 7 + 8px);
}
.term__body p {
  margin: 0;
}

.term__prompt {
  color: var(--accent);
  margin-right: 10px;
}

.term__line {
  white-space: pre-wrap;
}

.term__hover {
  color: var(--accent);
  opacity: 0.92;
}

.term__line-hover {
  white-space: nowrap;
}

/* Barely-there glow along the terminal border on hover. */
.term,
.cat-term {
  transition: box-shadow 0.35s ease;
}
.term:hover,
.cat-term:hover {
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
}

.term__cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: var(--accent);
  vertical-align: -2px;
  animation: pasiuta-blink 1.1s steps(2, start) infinite;
}

/* Diffused flashlight following the cursor site-wide. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 310px;
  height: 310px;
  margin: -155px 0 0 -155px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 68%);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

@media (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* Keyframes + reveal utility */
@keyframes pasiuta-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes pasiuta-blink {
  to { visibility: hidden; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .term__body p,
  .term__cursor,
  .brand__name::after { animation: none !important; }
  .cursor-glow { display: none; }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Mobile vertical rhythm (14.09, user feedback: too much air
   above headings on mobile). Hero pulls up close to the sticky
   header; plain sections tighten from 88px to 48px so section
   heads sit ~2 grid cells higher.
   ============================================================ */
@media (max-width: 860px) {
  .hero {
    padding-top: clamp(20px, 3vh, 36px);
    padding-bottom: clamp(28px, 5vh, 44px);
  }
  .section { padding: 48px 0; }
}

/* ============================================================
   Front page sections
   ============================================================ */
.section-head {
  margin: 0 0 40px;
}

.section-head--hero {
  margin: 0 0 48px;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* Right-aligned section heads: alternate the L/R rhythm (Usługi R, Projekty L, Proces R, Cennik L, O mnie R). */
.section-head--right {
  text-align: right;
}

/* Heading highlight: straight rectangular stroke. Solid translucent accent
   band behind the text, paints per line box (box-decoration-break) and
   overhangs the text via padding + negative margins. Sweeps in via
   background-size; .hl--rev sweeps right to left. On hover the band lights
   up (--hl-alpha), same spirit as the quiet block hover family. */
@property --hl-alpha {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 36%;
}

.hl {
  padding-inline: 0.6em;
  margin-inline: -0.6em;
  --hl-alpha: 36%;
  background-image: linear-gradient(
    color-mix(in srgb, var(--accent) var(--hl-alpha), transparent),
    color-mix(in srgb, var(--accent) var(--hl-alpha), transparent)
  );
  background-repeat: no-repeat;
  background-size: 0% 25px;
  background-position: left calc(100% - 0.15em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hl:hover {
  --hl-alpha: 48%;
}

/* Light theme: keep the band faint so the accent-colored phrase keeps
   large-text contrast (>=3:1). */
:root[data-theme="light"] .hl {
  --hl-alpha: 26%;
}
:root[data-theme="light"] .hl:hover {
  --hl-alpha: 34%;
}

.hl--rev {
  background-position: right calc(100% - 0.15em);
}

.hl.is-hl {
  background-size: 100% 25px;
}

@media (prefers-reduced-motion: no-preference) {
  .hl {
    transition:
      --hl-alpha 0.25s ease,
      background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* --- Subpage head (Blog stub, later: service pages) --- */
.page-head {
  padding: clamp(64px, 12vh, 140px) 0 clamp(40px, 8vh, 88px);
}
.page-head__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.page-head__lead {
  max-width: 36em;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  margin: 0;
}

/* --- Usługi: category filters + card grid --- */
.services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin: 0 0 36px;
}

.services-title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.services-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.filter-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

.filter-pill:hover {
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}

.filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.service-card.is-hidden { display: none; }

.service-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
}
.service-card__icon svg {
  width: 23px;
  height: 23px;
}

.service-card__arrow {
  color: var(--text-muted);
  transition: transform 0.25s ease, color 0.25s ease;
}

.service-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.service-card__desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: no-preference) {
  .service-card__icon svg { transition: transform 0.3s ease; }
  .service-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .service-card:hover .service-card__icon svg {
    transform: rotate(-8deg) scale(1.12);
  }
  .service-card:hover .service-card__arrow {
    transform: translateX(4px);
    color: var(--accent);
  }
}

.services-more {
  margin: 28px 0 0;
}

@media (max-width: 860px) {
  .services-head { flex-direction: column-reverse; align-items: flex-start; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* --- Wybrane projekty: 2x2 grid --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-elev);
  text-decoration: none;
}

.project-media {
  position: relative;
  background: var(--code-bg);
  border-bottom: 1px solid var(--border);
}

.project-media img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 26px 28px 28px;
}

.project-card__title {
  margin: 0;
}

.project-card__desc {
  margin: 0;
  color: var(--text-muted);
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.project-card__tags span {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 12px;
}

.projects-more {
  margin: 28px 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .project-card { transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.35s ease; }
  .project-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .project-card:hover .project-card__title { color: var(--accent); }
}

@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* --- Jak pracuję: process grid 2x2 (shared recipe with the O mnie page "why" grid) --- */
.process-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.process-cell,
.why-cell {
  padding: 34px 32px 38px;
}

.process-cell:nth-child(odd),
.why-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.process-cell:nth-child(-n+2),
.why-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

.process-cell__num,
.why-cell__num {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--accent);
}

.process-cell__title,
.why-cell__title {
  margin: 0 0 8px;
}

.process-cell__desc,
.why-cell__desc {
  margin: 0;
  color: var(--text-muted);
}

/* Subtle hover for static band cells (process, rates, why): soft accent tint + inner ring.
   Cells are not links, so no transforms or arrows; kept quiet by design. */
@media (prefers-reduced-motion: no-preference) {
  .process-cell,
  .rate-cell,
  .why-cell,
  .scope-cell { transition: background-color 0.25s ease, box-shadow 0.25s ease; }
  .process-cell:hover,
  .rate-cell:hover,
  .why-cell:hover,
  .scope-cell:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .process-cell:hover .process-cell__title,
  .why-cell:hover .why-cell__title,
  .scope-cell:hover .scope-cell__title { color: var(--accent); }
}

/* --- Cennik: rates band --- */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.rate-cell {
  padding: 28px 26px 30px;
  border-left: 1px solid var(--border);
}

.rate-cell:nth-child(3n+1) { border-left: 0; }
.rate-cell:nth-child(n+4) { border-top: 1px solid var(--border); }

.rate-cell__name {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.rate-cell__price {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  color: var(--accent);
}

.rate-cell__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

.rates-note {
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 14.5px;
}

/* --- Service pages: scope grid (2 cols, numbered cells).
   Shares the quiet hover family with process/why/rates cells. --- */
.page-head--service .mono-label {
  margin: 0 0 20px;
}
.page-head--service .mono-label a {
  text-decoration: none;
}
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.scope-cell {
  padding: 34px 32px 38px;
}
.scope-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.scope-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
.scope-cell__num {
  display: block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--accent);
}
.scope-cell__title {
  margin: 0 0 8px;
}
.scope-cell__desc {
  margin: 0;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .scope-grid { grid-template-columns: 1fr; }
  .scope-cell:nth-child(n) { border-right: 0; border-top: 1px solid var(--border); }
  .scope-cell:first-child { border-top: 0; }
}

/* --- O mnie: profile card --- */
.profile-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 44px;
  padding: 44px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}

body .profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

/* Profile card: same quiet reaction as other blocks (border tint + ring + glow, no lift). */
@media (prefers-reduced-motion: no-preference) {
  .profile-card { transition: border-color 0.25s ease, box-shadow 0.35s ease; }
  .profile-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

.profile-card__lead {
  margin: 0 0 26px;
  font-size: 1.08rem;
  max-width: 58ch;
}

.profile-facts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.profile-facts li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.profile-facts li:last-child { border-bottom: 1px solid var(--border); }

.profile-facts__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-facts__value {
  font-weight: 700;
  color: var(--text);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* Blinking terminal cursor on hover (same reaction as the brand). */
.link-more::after {
  content: "";
  display: none;
  width: 9px;
  height: 1.05em;
  background: var(--accent);
  vertical-align: -2px;
}

@media (prefers-reduced-motion: no-preference) {
  .link-more { transition: color 0.25s ease; }
  .link-more:hover::after {
    display: inline-block;
    animation: pasiuta-blink 1.1s steps(2, start) infinite;
  }
}

/* --- FAQ: accordion (full-width rows, hover-open on desktop) --- */
.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  border-radius: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 20px;
  color: var(--accent);
  flex: 0 0 auto;
}

/* Open item keeps the accent question (marks the state on touch, where hover does not exist). */
.faq-item[open] summary { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .faq-item summary { transition: background-color 0.25s ease, color 0.25s ease; }
  .faq-item summary::after { transition: transform 0.25s ease; }
  /* Quiet hover family: soft accent tint on the question band, no transforms. */
  .faq-item:hover summary { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .faq-item[open] .faq-item__body { animation: faq-reveal 0.25s ease; }
}

.faq-item[open] summary::after { transform: rotate(45deg); }

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.faq-item__body {
  padding: 0 16px 24px;
  max-width: 62ch;
}

.faq-item__body p {
  margin: 0;
  color: var(--text-muted);
}

/* --- Kontakt: closing band --- */
.contact-band {
  border-top: 1px solid var(--border);
  padding: 96px 0 72px;
}

.contact-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}

.contact-band__title {
  margin: 0 0 14px;
}

.contact-band__lead {
  margin: 0 0 30px;
  color: var(--text-muted);
  max-width: 44ch;
}

.contact-band__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
}

.contact-band__hint {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.contact-band__mail {
  font-size: 15px;
  color: var(--accent);
}

.contact-band__mail:hover { color: var(--accent-strong); }

/* Terminal cat: the smile at the end of the page. */
.cat-term {
  width: 300px;
  border-radius: 16px;
  background: var(--code-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cat-term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.cat-term__body {
  margin: 0;
  padding: 22px 24px 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  white-space: pre;
  /* Reserve the cat's height (3 lines + padding, border-box) so the
     window does not grow while typing. */
  min-height: calc(1.9em * 3 + 48px);
}

@media (prefers-reduced-motion: no-preference) {
  .cat-term { animation: pasiuta-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
}

@media (max-width: 860px) {
  .contact-band__inner { grid-template-columns: 1fr; }
  .cat-term { display: none; }
}

/* --- Responsive collapse (< 860px) --- */
@media (max-width: 860px) {
  .section-head--right { text-align: left; }

  .process-grid,
  .why-grid { grid-template-columns: 1fr; }
  .process-cell:nth-child(n),
  .why-cell:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--border); }
  .process-cell:last-child,
  .why-cell:last-child { border-bottom: 0; }

  .rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate-cell:nth-child(odd) { border-left: 0; }
  .rate-cell:nth-child(even) { border-left: 1px solid var(--border); }
  .rate-cell:nth-child(n+3) { border-top: 1px solid var(--border); }

  .profile-card { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .profile-photo { aspect-ratio: 1 / 1; }
}

@media (max-width: 560px) {
  .rates-grid { grid-template-columns: 1fr; }
  .rate-cell:nth-child(n) { border-left: 0; border-top: 1px solid var(--border); }
  .rate-cell:first-child { border-top: 0; }
}

/* --- Brief quiz (Wypełnij brief, /kontakt/) --- */
.brief-section { padding: clamp(56px, 10vh, 120px) 0 96px; }
.page-head--brief { padding: 0 0 40px; }
.page-head__title--hero {
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.brief-section { padding: clamp(24px, 4vh, 48px) 0 96px; }

.brief { max-width: 760px; margin: 0 auto; }

.brief__progress {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.brief__counter { color: var(--accent); white-space: nowrap; }
.brief__bar {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.brief__bar-fill {
  display: block;
  height: 100%;
  width: 14%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fixed-height quiz zone: all steps stack in one grid cell (visibility, not
   display) so the grid row is always as tall as the TALLEST step. Switching
   steps never changes page height, the footer never jumps. */
.brief__steps {
  position: relative;
  display: grid;
}
.brief__step {
  grid-area: 1 / 1;
  visibility: hidden;
  animation: pasiuta-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.brief__step.is-active { visibility: visible; }

.brief__q {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.brief__hint {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.brief__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.brief__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.brief__opt:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
}
.brief__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.brief__box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.brief__box::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent-contrast);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.brief__opt input:checked ~ .brief__box,
.brief__rodo input:checked ~ .brief__box {
  border-color: var(--accent);
  background: var(--accent);
}
.brief__opt input:checked ~ .brief__box::after,
.brief__rodo input:checked ~ .brief__box::after { transform: scale(1); }
.brief__opt input:focus-visible ~ .brief__box,
.brief__rodo input:focus-visible ~ .brief__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.brief__opt-label { font-size: 15px; font-weight: 600; line-height: 1.35; }

.brief__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.brief__nav .brief__form-note {
  flex: 1;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
  min-height: 18px;
}
.brief__send { margin-left: auto; }
.brief__send[disabled] { opacity: 0.6; cursor: wait; }

.brief__fields { display: grid; gap: 14px; }
.brief__field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.brief__field input,
.brief__field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brief__field input:focus,
.brief__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 18px color-mix(in srgb, var(--accent) 10%, transparent);
}
.brief__field--wide input,
.brief__field--wide textarea { grid-column: 1 / -1; }

.brief__rodo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
  cursor: pointer;
}
.brief__rodo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.brief__rodo .brief__box { margin-top: 2px; }
.brief__rodo .brief__opt-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
}

.brief__hp { position: absolute; left: -9999px; top: -9999px; }

.brief__done { text-align: left; padding: 24px 0 8px; }
.brief__done-title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}
.brief__done-text { font-size: 17px; margin: 0 0 12px; }
.brief__done-hint { font-size: 12px; letter-spacing: 0.1em; color: var(--text-muted); margin: 0; }

@media (max-width: 640px) {
  .brief__opts { grid-template-columns: 1fr; }
  .brief__nav { flex-wrap: wrap; }
  .brief__send { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brief__step { animation: none; }
  .brief__bar-fill { transition: none; }
  .brief__box::after { transition: none; }
}

/* --- Contact info card (below the brief quiz, /kontakt/) --- */
.contact-info {
  padding: 0 0 clamp(72px, 12vh, 140px);
}
.contact-info__card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.contact-info__head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 26px;
}
.contact-info__photo {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 15px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-2);
}
body .contact-info__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-info__title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.contact-info__rows {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
}
.contact-info__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-info__row:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
}
.contact-info__label {
  flex: none;
  width: 88px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-info__value {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
}
.contact-info__row:hover .contact-info__value { color: var(--accent); }
.contact-info__legal {
  display: grid;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.contact-info__legal p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .contact-info__head { gap: 16px; }
  .contact-info__photo { width: 72px; height: 72px; }
  .contact-info__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .contact-info__label { width: auto; }
}

/* --- Blog page head: hero title left + lead right, tight.
   Grid (not flex): the title column takes what's left after the lead
   column, so a long category name WRAPS inside its own column instead
   of pushing the lead below. --- */
.page-head--blog,
.page-head--omnie,
.page-head--portfolio,
.page-head--service {
  padding: clamp(24px, 4vh, 40px) 0 clamp(16px, 2vh, 24px);
}
.page-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 461px);
  gap: 24px 40px;
  align-items: end;
}
.page-head--blog .page-head__title,
.page-head--omnie .page-head__title,
.page-head--portfolio .page-head__title,
.page-head--service .page-head__title {
  margin: 0;
  overflow-wrap: break-word;
}
.page-head--blog .page-head__lead,
.page-head--omnie .page-head__lead,
.page-head--portfolio .page-head__lead,
.page-head--service .page-head__lead {
  max-width: 24em;
  margin: 0 0 0.35em;
  text-align: right;
}
.blog-section {
  padding: 20px 0 clamp(56px, 10vh, 96px);
}

/* --- Blog SEO/interlinking block (below the grid) --- */
.blog-seo {
  margin-top: 56px;
  padding: 0 0 8px;
}
.blog-seo__label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.blog-seo__text {
  max-width: 46em;
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.blog-seo__links {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

/* --- Blog category pills (links, not JS filters) --- */
.blog-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.blog-pills .filter-pill {
  text-decoration: none;
}

/* --- Blog pagination: prev | mono counter | next --- */
.blog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}
.blog-nav__count {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.blog-nav .link-more {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .blog-nav { flex-direction: column; gap: 12px; }
}
/* Collapse to one column BELOW 1120px (same breakpoint family as the
   header): between 861-1120 the lead column would starve the title
   column down to single letters per line. */
@media (max-width: 1120px) {
  .page-head__row { grid-template-columns: 1fr; }
  .page-head--blog .page-head__lead,
  .page-head--omnie .page-head__lead,
  .page-head--portfolio .page-head__lead,
  .page-head--service .page-head__lead { text-align: left; max-width: 36em; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-info__row { transition: none; }
}

/* ============================================================
   Blog: post grid + single post
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-elev);
}

/* The whole card is clickable via the title link's ::after overlay;
   the category link sits above it (z-index 2) — no nested <a>. */
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blog-card__cat {
  position: relative;
  z-index: 2;
}
.blog-card__cat:hover {
  color: var(--accent-strong);
}

.blog-media {
  background: var(--code-bg);
  border-bottom: 1px solid var(--border);
}
.blog-media img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 24px 26px 26px;
}

.blog-card__date {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.blog-card__cat {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}

.blog-card__excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.blog-card__date {
  margin-top: auto;
  padding-top: 10px;
}

.blog-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 36em;
}

@media (prefers-reduced-motion: no-preference) {
  .blog-card { transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.35s ease; }
  .blog-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 26px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .blog-card:hover .blog-card__title { color: var(--accent); }
}

@media (max-width: 860px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* --- Single post --- */
.post {
  padding: clamp(24px, 4vh, 40px) 0 clamp(48px, 10vh, 120px);
}
.post__head {
  max-width: 780px;
  margin: 0 auto 40px;
}
.post__head .link-more {
  margin: 0 0 28px;
}
.post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 14px;
}
.post__cat {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.post__cat:hover { color: var(--accent-strong); }
.post__date {
  display: block;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.post__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.post__media {
  margin: 28px 0 0;
}
.post__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.post__content {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.75;
}
.post__content h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 2em 0 0.6em;
}
.post__content h3 {
  font-size: 1.25rem;
  margin: 1.8em 0 0.5em;
}
.post__content p { margin: 0 0 1.2em; }
.post__content a { color: var(--accent); }
.post__content a:hover { color: var(--accent-strong); }
.post__content ul,
.post__content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.post__content li { margin: 0 0 0.4em; }
.post__content img {
  border-radius: 16px;
  border: 1px solid var(--border);
  height: auto;
}
.post__content blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
}
.post__content code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 2px 7px;
  border-radius: 6px;
}
.post__content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
}
.post__content pre code {
  background: transparent;
  padding: 0;
}

/* --- O mnie page: full profile card, tools, CTA card --- */
.profile-card--full {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  padding: clamp(32px, 5vw, 56px);
}

.profile-card__bio {
  margin: 0 0 26px;
}

.profile-card__bio p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 58ch;
}

.profile-card__bio p:first-child {
  color: var(--text);
  font-size: 1.08rem;
}

.profile-card__bio p:last-child {
  margin-bottom: 0;
}

.tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.tool-tag {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
}

.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.cta-card__title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cta-card__lead {
  margin: 0;
  color: var(--text-muted);
  max-width: 46ch;
}

.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 860px) {
  .cta-card { grid-template-columns: 1fr; }
  .profile-card--full { gap: 28px; padding: 28px; }
}

/* ============================================================
   Service pages: head divider
   ============================================================
   A 1px accent line between the page head and the content, with 50px
   of air above and below. MUST live after the blog/omnie/service
   page-head selector list above: same specificity, later in cascade.
   The gap above the line = container padding-bottom; the gap below =
   .scope-section padding-top (first content section on service pages). */
.page-head--service {
  padding-bottom: 0;
}
.page-head--service .container {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 50px;
}
.scope-section {
  padding-top: 50px;
}

/* Usługi hub page (/uslugi/): tighter top like the blog grid section. */
.services-index {
  padding: 20px 0 clamp(56px, 10vh, 96px);
}

/* ============================================================
   Portfolio page: case study rows (zigzag)
   ============================================================ */
.case-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.case-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.case-row__media {
  position: relative;
  background: var(--code-bg);
}

body .case-row__media img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-row--rev .case-row__media {
  order: 2;
}

.case-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 4vw, 44px);
}

.case-row__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-row__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.case-row__lead {
  margin: 0;
  color: var(--text-muted);
  max-width: 52ch;
}

.case-row__more {
  margin: 0;
}

@media (max-width: 860px) {
  .case-row {
    grid-template-columns: 1fr;
  }
  .case-row--rev .case-row__media {
    order: 0;
  }
  body .case-row__media img {
    position: static;
    height: auto;
    aspect-ratio: 8 / 5;
  }
}

/* Filter row + view toggle + pagination (portfolio).
   The grid-mode variants are REQUIRED: .case-list.is-grid .case-row sets
   display:flex (0-3-0) and would beat a bare .case-row.is-hidden (0-2-0). */
.case-row.is-hidden,
.case-list.is-grid .case-row.is-hidden,
.case-row.is-paged,
.case-list.is-grid .case-row.is-paged {
  display: none;
}

.case-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

.case-nav button {
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.case-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

.case-nav__count {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.view-toggle {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.view-toggle__btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}

.view-toggle__btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

@media (prefers-reduced-motion: no-preference) {
  .view-toggle__btn { transition: background-color 0.25s ease, color 0.25s ease; }
  .case-row { transition: background-color 0.25s ease, box-shadow 0.25s ease; }
  .case-row:hover {
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .case-row:hover .case-row__title { color: var(--accent); }
}

/* Grid view: same markup, 3-col cards (like the blog grid) */
.case-list.is-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.case-list.is-grid .case-row {
  display: flex;
  flex-direction: column;
}

.case-list.is-grid .case-row__media {
  aspect-ratio: 8 / 5;
  order: -1;
}

.case-list.is-grid .case-row__body {
  flex: 1;
  gap: 10px;
  padding: 24px 26px 26px;
}

.case-list.is-grid .case-row__lead {
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .case-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .case-list.is-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Local pages: full-width H1, lead below (home-hero recipe).
   The long city H1 ("Strony internetowe Gdańsk") does not fit
   the 571px track of the two-column page-head row at 70px.
   ============================================================ */
.page-head--local .page-head__row {
  display: block;
}
.page-head--local .page-head__lead {
  margin-top: 20px;
  max-width: 620px;
}