/* ============================
   Petr Vápeník — Personal Website
   Redesign v2 — Dark Theme
   ============================ */

/* === RESET === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: hidden;
}

/* === CUSTOM PROPERTIES === */
:root {
  --color-bg:           #111111;
  --color-bg-alt:       #181818;
  --color-surface:      #1e1e1e;
  --color-surface-2:    #272727;
  --color-surface-hover:#303030;
  --color-text:         #e8eef7;
  --color-text-muted:   #8892a4;
  --color-text-light:   #555555;
  --color-accent:       #ffffff;
  --color-accent-hover: #d4d4d4;
  --color-accent-dim:   rgba(255, 255, 255, 0.10);
  --color-accent-glow:  rgba(255, 255, 255, 0.18);
  --color-accent-2:     #b8b8b8;
  --color-border:       #2e2e2e;
  --color-border-hover: rgba(255, 255, 255, 0.4);
  --color-white:        #ffffff;
  --color-success:      #34d399;
  --color-error:        #f87171;

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1160px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   4px;
  --radius-2xl:  8px;
  --radius-full: 9999px;

  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;
  --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.12);
  --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.35);

  /* Portfolio device mockups (tablet/phone) — white body in dark mode,
     black body in light mode, so the hardware always contrasts with the
     page background instead of being tied to one fixed color. */
  --device-body-1: #f4f4f3;
  --device-body-2: #e0dfdd;
  --device-body-3: #c7c6c3;
  --device-highlight: rgba(255, 255, 255, 0.65);
  --device-shade: rgba(0, 0, 0, 0.08);
  --device-cam: #050505;
  --device-cam-ring: rgba(0, 0, 0, 0.08);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-image:
    linear-gradient(to bottom, #0d0d0d 0%, #1a1817 100%);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* iOS Safari does not support background-attachment:fixed correctly —
     switched to scroll via @media below */
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 {
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* === LAYOUT === */
.container {
  width: 100%;
  padding: 0 50px;
}

.section       { padding: 7rem 0; }
.section-alt   { background: transparent; }
.section-panel {
  background: transparent;
}

/* === SCROLL PROGRESS === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent), var(--color-accent-2));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* === SIDE NAV DOTS === */
.nav-dots {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@keyframes navPulseRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  75%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(2.8); opacity: 0;   }
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease,
              width 0.3s ease, height 0.3s ease;
  position: relative;
  cursor: pointer;
}

.nav-dot::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 0.625rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  background: var(--color-surface);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.nav-dot:hover::after {
  opacity: 1;
}

.nav-dot:hover {
  background: var(--color-accent);
  border-color: var(--color-border-hover);
  transform: scale(1.25);
}

.nav-dot.active {
  background: var(--color-accent);
  border-color: var(--color-border-hover);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.nav-dot.active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  animation: navPulseRing 2s ease-out infinite;
  pointer-events: none;
}

/* === HEADER === */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

#header.scrolled {
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 50px;
  width: 100%;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.logo-mark {
  display: inline-flex;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffffff;
  transition: color var(--transition);
}
.logo:hover .logo-mark { color: var(--color-accent); }

.logo-mark .ll {
  display: inline-block;
}
.logo-mark .ll:not(.ll-static) {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s ease, opacity 0.35s ease;
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.logo:hover .logo-mark .ll:not(.ll-static) {
  max-width: 1.2em;
  opacity: 1;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition);
  letter-spacing: 0.01em;
}
.nav-link:hover { color: var(--color-accent); }

/* Lang switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-left: 0.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border);
}
.lang-active { color: var(--color-text); }
.lang-sep    { color: var(--color-text-light); font-weight: 400; }
.lang-other  { color: var(--color-text-muted); transition: color var(--transition); }
.lang-other:hover { color: var(--color-accent); }

/* Theme toggle — visible only inside the mobile nav overlay */
.nav-theme-row  { display: none; }
.nav-theme-btn  { display: none; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header right group (nav + theme-toggle + menu-toggle) */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Theme tab — fixed square tab attached to right edge of viewport */
.theme-tab {
  position: fixed;
  right: 0;
  bottom: calc(60% + 20px);
  z-index: 201;
  width: 4rem;
  height: 32px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-right: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.18);
}
.theme-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Tooltip — appears to the left on hover */
.theme-tab::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.theme-tab:hover::before { opacity: 1; }

/* Icon visibility — dark theme shows sun, light theme shows moon */
.theme-icon-light { display: none; }
.theme-icon-dark  { display: flex; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.875rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  transition: all var(--transition);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.35);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

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

/* === HERO === */
.hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 68px;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.hero-cutout-layer {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Positioned + animated by JS (script.js: runHeroFinal) — starts centered as
   "PV", slides left, then reveals the rest of each word via .ll spans. */
.hero-cutout-title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.28em;
  line-height: 1.1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-cutout-title.show {
  opacity: 1;
}

.hero-cutout-title.slide {
  transition: opacity 0.6s ease, left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-cutout-word {
  display: block;
  width: fit-content;
  font-size: clamp(2rem, 14vw, 12rem); /* safe fallback — JS overrides after fonts load */
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  transition: color 0.3s ease;
}

/* Individual letters — hidden ones (all but P/V) expand into view once
   .hero-cutout-title carries .letters-open (added automatically by JS).
   Mirrors the header-logo hover effect (.logo-mark .ll), but auto-triggered.
   Note: deliberately NOT named "reveal" — that class already drives the
   site-wide scroll-reveal fade-up animation (see SCROLL REVEAL below) and
   would collide with it. */
.hero-cutout-word .ll {
  display: inline-block;
  letter-spacing: normal;
  /* Letters with `overflow: hidden` (the collapsible ones below) get their
     baseline redefined to the bottom margin edge per spec, which doesn't
     match the plain text-baseline of the static P/V — top-align all of them
     instead so every letter sits at the same height regardless. */
  vertical-align: top;
}
/* Letters sit in separate boxes, so the title's letter-spacing can't bridge
   them natively — replicate it with margins (matches the JS width canvas
   measurement, which assumes one -0.045em gap between each character). */
.hero-cutout-word .ll:not(:last-child) {
  margin-right: -0.045em;
}
.hero-cutout-word .ll:not(.ll-static) {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.6s ease, opacity 0.4s ease;
  transition-delay: calc(var(--i, 0) * 0.06s);
}
.hero-cutout-title.letters-open .hero-cutout-word .ll:not(.ll-static) {
  max-width: 1.3em;
  opacity: 1;
}

/* === SCROLL CUE — subtle "scroll down" hint below the resting "PV" === */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.scroll-cue.show {
  opacity: 1;
}

.scroll-cue-mouse {
  display: block;
  position: relative;
  width: 22px;
  height: 36px;
  border: 2px solid var(--color-text);
  border-radius: 12px;
  opacity: 0.35;
}

.scroll-cue-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--color-text);
  animation: scrollCueDot 1.8s ease infinite;
}

@keyframes scrollCueDot {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* === HERO PARTICLES — "PV" dissolves into dots on scroll, reforms on
   scroll back up. Each dot's assembled (--ax/--ay, sampled from a canvas
   rendering of "PV") and scattered (--sx/--sy, randomized) position are
   set once by JS; --scatter (0–1) is updated live on scroll and does the
   rest via calc(), so scrolling only ever costs one custom-property write. */
.hero-particles {
  position: absolute;
  top: 50%;
  opacity: 0;
  pointer-events: none;
}

.hero-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: var(--color-text);
  will-change: transform, opacity;
  transform: translate(
    calc(var(--ax) + (var(--sx) - var(--ax)) * var(--scatter, 0)),
    calc(var(--ay) + (var(--sy) - var(--ay)) * var(--scatter, 0))
  ) scale(calc(1 + var(--scatter, 0) * 0.6 - var(--scatter, 0) * var(--scatter, 0) * 1.1));
  opacity: calc(1 - var(--scatter, 0) * var(--scatter, 0));
}

/* === HERO INTRO — per-letter countdown: a 60-dot ring sweeps once per
   letter; the letter changes exactly as the ring completes its lap === */
.hero-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  animation: heroIntroHide 0.35s ease var(--intro-seq-end, 11.3s) forwards;
  animation-play-state: paused;
}

body.hero-ready .hero-intro {
  animation-play-state: running;
}

@keyframes heroIntroHide {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

.hero-intro-ring {
  position: relative;
  width: clamp(140px, 22vw, 260px);
  height: clamp(140px, 22vw, 260px);
}

.intro-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 4px 1px rgba(232, 238, 247, 0.55);
  transform: rotate(calc(var(--i) * (360deg / 60))) translateY(calc(-1 * clamp(70px, 11vw, 130px)));
  opacity: 0;
  animation: introDotSweep var(--lap, 1s) linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--intro-start, 0.3s) + var(--i) * (var(--lap, 1s) / 60));
}

body.hero-ready .intro-dot {
  animation-play-state: running;
}

@keyframes introDotSweep {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

html[data-theme="light"] .intro-dot {
  box-shadow: 0 0 4px 1px rgba(28, 20, 8, 0.35);
}

.hero-intro-letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-letter {
  position: absolute;
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  font-weight: 800;
  color: var(--color-text);
  opacity: 0;
  animation: introLetterShow var(--lap, 1s) ease forwards;
  animation-play-state: paused;
  animation-delay: calc(var(--intro-start, 0.3s) + var(--i) * var(--lap, 1s));
}

body.hero-ready .intro-letter {
  animation-play-state: running;
}

@keyframes introLetterShow {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Hero sub strip */
.hero-sub {
  position: relative;
  z-index: 1;
  padding: 2rem 0 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-bg);
}

.hero-sub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero-sub-text {
  max-width: 38rem;
}

.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.hero-tagline {
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.hero-sub-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.hero-social {
  display: flex;
  gap: 0.75rem;
}

.hero-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  transition: all var(--transition);
}
.hero-social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
}


/* === STATS STRIP === */
.stats-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
  padding: 0.5rem;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  height: 40px; width: 1px;
  background: var(--color-border);
}

.stat-number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.125rem;
  margin-bottom: 0.375rem;
}

.stat-count {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-suffix {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* === SECTION TYPOGRAPHY === */

.section-header {
  position: relative;
}

.section-title,
.contact-title {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.125rem;
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--color-text);
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 38rem;
  line-height: 1.7;
  margin-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header { margin-bottom: 3.5rem; }

/* === SERVICES CAROUSEL === */
.services-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.services-track-outer {
  flex: 1;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 30px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

@keyframes carouselScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--carousel-shift, -1440px)); }
}

.services-track {
  display: flex;
  gap: 1.25rem;
  will-change: transform;
}
.services-track--animating {
  animation: carouselScroll var(--carousel-duration, 36s) linear infinite;
}
.services-track--paused {
  animation-play-state: paused;
}

.services-track .service-card {
  flex: 0 0 340px;
}

/* === SERVICES GRID (legacy, unused) === */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.service-card {
  position: relative;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  transition: all var(--transition-slow);
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.service-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.18);
}
.service-card:hover::before { opacity: 1; }

/* Card number badge */
.service-card-num {
  position: absolute;
  top: 1.25rem;
  right: 1.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition);
}
.service-card:hover .service-card-num { color: var(--color-accent); }

/* Service icon */
.service-icon {
  width: 48px;
  height: 48px;
  background: var(--color-accent-dim);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.service-card:hover .service-icon {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}
.service-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.625rem;
  letter-spacing: -0.015em;
}

.service-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.service-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.service-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.service-bullets li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.45rem;
  opacity: 0.65;
}

/* === SERVICES FLIP GRID === */
.services-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.flip-card {
  perspective: 1200px;
  height: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 1.75rem;
  overflow: hidden;
}

.flip-card-front {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
}

.flip-card-front .service-card-num {
  position: absolute;
  top: 1.25rem;
  right: 1.375rem;
}

.flip-card-front .service-icon {
  margin-bottom: 0;
  width: 56px;
  height: 56px;
}

.flip-card-front .service-title {
  margin-bottom: 0;
  text-align: center;
  font-size: 1rem;
}

.flip-card-back {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(184,184,184,0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
}

.flip-back-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 0.125rem;
}

.flip-card-back .service-desc {
  font-size: 0.79rem;
  margin-bottom: 0;
  line-height: 1.55;
}

.flip-card-back .service-bullets {
  gap: 0.3rem;
}

.flip-card-back .service-bullets li {
  font-size: 0.72rem;
}

.flip-card.reveal {
  transform: translateY(40px) scale(0.94);
}

.flip-card.reveal.visible {
  transform: translateY(0) scale(1);
}

html[data-theme="light"] .flip-card-front {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(28, 20, 8, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .flip-card-back {
  background: linear-gradient(135deg, rgba(0,0,0,0.08) 0%, rgba(58,58,58,0.05) 100%);
  border-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 820px) {
  .services-flip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .services-flip-grid {
    grid-template-columns: 1fr;
  }
  .flip-card {
    height: 260px;
  }
}

/* === ABOUT === */
.about-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start;
}

.about-grid--no-photo {
  grid-template-columns: 1fr;
}

.about-grid--two-col {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

/* Photo column */
.about-photo-col {
  position: relative;
}

.about-photo-wrap {
  position: relative;
}

.about-photo-bg {
  position: absolute;
  inset: -1.5rem;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(184,184,184,0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-photo-frame {
  position: relative;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.about-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
}
.about-photo-placeholder svg {
  width: 70%;
  opacity: 0.8;
}

/* Floating badge on photo */
.about-badge {
  position: absolute;
  bottom: 1.25rem;
  left: -1rem;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
}
.about-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-dim);
  border-radius: 50%;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* About text */
.about-text-col {
  padding-top: 0.5rem;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}
.about-bio p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.85;
}
.about-bio a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.about-bio a:hover {
  color: var(--color-accent-hover);
}

.interests-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  display: block;
}

.interests-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.interest-tag {
  padding: 0.4375rem 0.875rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition);
  cursor: default;
}
.interest-tag:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-dim);
}

/* === ABOUT CV COLUMN === */
.about-cv-col {
  padding-top: 0.5rem;
}

.cv-block {
  margin-bottom: 2.5rem;
}
.cv-block:last-child {
  margin-bottom: 0;
}

.cv-block-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
  display: block;
}

.cv-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  padding-bottom: 1.375rem;
  margin-bottom: 1.375rem;
  border-bottom: 1px solid var(--color-border);
}
.cv-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.cv-item-period {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  font-weight: 500;
  padding-top: 0.3rem;
  line-height: 1.5;
}

.cv-item-role {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

.cv-item-company {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.cv-item-company a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
.cv-item-company a:hover {
  color: var(--color-accent-hover);
}

.cv-item-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* === APPROACH === */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.approach-item {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.approach-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.approach-item:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.approach-item:hover::after { transform: scaleX(1); }

.approach-num {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.approach-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
}

.approach-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* === CONTACT === */
.contact-head {
  margin-bottom: 2rem;
}

.contact-title {
  text-align: center;
  margin-top: -60px;
}

.contact-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-bottom: 3rem;
  line-height: 1.7;
  text-align: center;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.form-label .required { color: var(--color-accent); margin-left: 0.125rem; }
.form-label .optional  { color: var(--color-text-light); font-weight: 400; }

.form-input {
  width: 100%;
  padding: 0.8125rem 1.0625rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.form-input::placeholder { color: var(--color-text-light); }
.form-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
  background: var(--color-surface-2);
}
.form-input.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
}

.form-honeypot {
  position: absolute;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
  pointer-events: none;
}

.form-submit {
  width: 100%;
  padding: 1rem 1.75rem;
  font-size: 1rem;
  margin-top: 0.25rem;
}

.form-message {
  padding: 0.9375rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-top: 0.75rem;
  animation: fadeUp 0.4s ease forwards;
}
.form-message--success {
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.22);
  color: var(--color-success);
}
.form-message--error {
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: var(--color-error);
}

/* Contact alternative (LinkedIn) */
.contact-alt {
  text-align: center;
  margin-top: 2rem;
}
.contact-alt-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 0.875rem;
}

/* === FOOTER === */
footer {
  padding: 2.25rem 0;
  border-top: 1px solid var(--color-border);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.footer-tagline,
.footer-rights {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* === SCROLL REVEAL === */
@keyframes revealFallback {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  animation: revealFallback 0.7s ease 2s forwards;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
}

/* Directional variants — add alongside .reveal in HTML */
.reveal-left.reveal  { transform: translateX(-48px) scale(0.97); }
.reveal-right.reveal { transform: translateX(48px)  scale(0.97); }
.reveal-left.reveal.visible,
.reveal-right.reveal.visible { transform: translateX(0) scale(1); }

/* Cards get a tighter scale-only entrance */
.service-card.reveal,
.project-card.reveal,
.testimonial-card.reveal,
.approach-item.reveal {
  transform: translateY(40px) scale(0.94);
}
.service-card.reveal.visible,
.project-card.reveal.visible,
.testimonial-card.reveal.visible,
.approach-item.reveal.visible {
  transform: translateY(0) scale(1);
}

/* Approach item gold top-line animates in when revealed */
.approach-item.reveal.visible::after { transform: scaleX(1); }

.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.32s; }
.reveal-delay-4 { transition-delay: 0.44s; }
.reveal-delay-5 { transition-delay: 0.56s; }

/* === KEYFRAMES === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === RESPONSIVE — LARGE TABLET (≤1100px) === */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr 340px;
    gap: 3rem;
  }
  .hero-photo-wrap { width: 300px; height: 300px; }
}

/* === RESPONSIVE — TABLET (≤960px) === */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .hero-text { order: 1; }
  .hero-visual { order: 2; justify-content: center; }
  .hero-tagline { max-width: none; }
  .hero-ctas { justify-content: center; }
  .hero-social { justify-content: center; }

  .about-grid,
  .about-grid--two-col {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .about-photo-col { max-width: 300px; margin: 0 auto; }

  .approach-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item:nth-child(2)::after,
  .stat-item:nth-child(4)::after {
    display: none;
  }
  .stat-item:nth-child(3)::after {
    display: block;
  }

  .nav-dots { display: none; }
  /* The floating theme tab is desktop-only — on mobile the theme switch
     lives inside the hamburger menu instead (.nav-theme-row below), so
     showing both here would just be a confusing duplicate control. */
  .theme-tab { display: none; }
}

/* === RESPONSIVE — SERVICES (≤820px) === */
@media (max-width: 820px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* === RESPONSIVE — MOBILE (≤768px) === */
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .section { padding: 5rem 0; }

  .menu-toggle { display: flex; }

  .nav {
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: rgba(20, 20, 20, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--container-pad) 2.25rem;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
    z-index: 99;
  }
  .nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-link {
    font-size: 1.0625rem;
    color: var(--color-text);
  }
  .lang-switcher {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    width: 100%;
  }

  /* Přepínač barevného schématu — jen v mobilním menu */
  .nav-theme-row {
    display: block;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    width: 100%;
  }
  .nav-theme-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: color var(--transition);
  }
  .nav-theme-btn:hover,
  .nav-theme-btn:focus-visible { color: var(--color-accent); outline: none; }

  html[data-theme="light"] .nav {
    background: rgba(248, 245, 239, 0.98);
    border-bottom-color: var(--color-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  }

  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  .form-row { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item::after { display: none !important; }

}

/* === RESPONSIVE — SMALL MOBILE (≤480px) === */
@media (max-width: 480px) {
  .container { padding: 0 20px; }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }

  .about-badge { left: 0; }
}

/* === LIGHT THEME === */
html[data-theme="light"] {
  --color-bg:           #f8f5ef;
  --color-bg-alt:       #f0ece2;
  --color-surface:      #ffffff;
  --color-surface-2:    #f4f0e5;
  --color-surface-hover:#ece7da;
  --color-text:         #1c1408;
  --color-text-muted:   #4a3f28;
  --color-text-light:   #a09080;
  --color-accent:       #000000;
  --color-accent-hover: #2b2b2b;
  --color-accent-dim:   rgba(0, 0, 0, 0.10);
  --color-accent-glow:  rgba(0, 0, 0, 0.18);
  --color-accent-2:     #3a3a3a;
  --color-border:       #ddd6c4;
  --color-border-hover: rgba(0, 0, 0, 0.40);
  --nav-pulse-color:    0, 0, 0;
  --shadow-glow:        0 0 40px rgba(0, 0, 0, 0.10);
  --shadow-card:        0 4px 32px rgba(0, 0, 0, 0.08);

  --device-body-1: #2e2e30;
  --device-body-2: #1c1c1e;
  --device-body-3: #0c0c0d;
  --device-highlight: rgba(255, 255, 255, 0.1);
  --device-shade: rgba(0, 0, 0, 0.35);
  --device-cam: #000000;
  --device-cam-ring: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] body {
  background-image:
    linear-gradient(to bottom, #f8f5ef 0%, #f0ece2 100%);
}

html[data-theme="light"] #header.scrolled {
  background: rgba(248, 245, 239, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .logo-mark {
  color: var(--color-text);
}

html[data-theme="light"] .nav-dot {
  background: rgba(28, 20, 8, 0.22);
  border-color: rgba(28, 20, 8, 0.15);
}

html[data-theme="light"] .hero-sub {
  border-top-color: rgba(28, 20, 8, 0.08);
}

html[data-theme="light"] .nav-dot.active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .nav-dot.active::before {
  border-color: rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] .theme-tab {
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.08);
}

/* Light theme — glass cards use warm semi-opaque white */
html[data-theme="light"] .service-card,
html[data-theme="light"] .approach-item,
html[data-theme="light"] .testimonial-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(28, 20, 8, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .approach-item:hover,
html[data-theme="light"] .testimonial-card:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .section-panel {
  background: transparent;
}

html[data-theme="light"] .carousel-btn {
  border-color: rgba(28, 20, 8, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .theme-icon-dark  { display: none; }
html[data-theme="light"] .theme-icon-light { display: flex; }

/* === ABOUT HIGHLIGHTS === */
.about-highlights {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2.25rem;
}
.about-highlight {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.about-highlight svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* === PORTFOLIO SLIDER — one project at a time, auto-advancing, pauses on
   hover; the active slide's info panel sits beside the image permanently
   (not hover-triggered — see script.js "PORTFOLIO SLIDER"). === */
#projekty, #portfolio { padding-top: calc(7rem - 50px); }

.portfolio-slider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.portfolio-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  outline: none;
}

.portfolio-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.portfolio-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.portfolio-slide .device-preview {
  flex: 1 1 70%;
  min-width: 0;
}

.portfolio-slide .project-overlay {
  flex: 1 1 24%;
  min-width: 0;
  max-width: 20rem;
  /* margin, not padding: with box-sizing:border-box this element's own
     width is set by its flex-basis/max-width, so padding just squeezes
     its content without moving its outer edge — margin is what actually
     shifts that edge left, away from the next-arrow button. Value matched
     empirically against .device-preview's left-side gap (measured via
     CDP, not hand-calculated — flex layout with per-side padding and a
     gap doesn't reduce to simple arithmetic) so the next-arrow gap lines
     up with the prev-arrow gap on the other side. */
  margin-right: 1rem;
}

.portfolio-arrow {
  align-self: center;
}

.portfolio-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.portfolio-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border-hover);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.portfolio-dot:hover { background: var(--color-accent); }
.portfolio-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.3);
}

/* Device mockups — tablet + phone, straight-on (no tilt). Each is a real
   scroll area (overflow-y: auto) over a full-page screenshot taller than
   the frame, so the whole homepage can actually be scrolled through, not
   just glimpsed as a crop — except on mobile, where the media query above
   turns the tablet into a plain cropped header preview and hides the phone. */
.device-preview {
  display: flex;
  align-items: flex-end;
  /* flex-start, not center: centering redistributes .device-preview's
     leftover width unpredictably around the tablet+phone pair, which made
     the prev-arrow gap and next-arrow gap impossible to reason about or
     balance. Anchoring left makes the left-side gap just this element's
     own left padding, so it can be matched exactly against the right side. */
  justify-content: flex-start;
  gap: 2.25rem;
  /* Breathing room so the mockups' drop shadows can bleed outward without
     being cut off — kept here (not on .portfolio-viewport) so it never
     shifts that element's overflow:hidden clip boundary, which would
     otherwise leak a sliver of the next slide into view. Left is smaller
     than right: the tablet's shadow (offset toward bottom-right) barely
     bleeds left at all, while the phone's shadow — on the right edge —
     needs the full amount. Kept asymmetric on purpose so the visible gap
     from the prev arrow to the tablet matches the gap from the next arrow
     to the text (see .project-overlay's matching right padding below). */
  padding: 1.75rem 1.5rem 2.5rem 1rem;
}

.device-tablet {
  flex: 1 1 auto;
  max-width: 66%;
}

.device-phone {
  position: relative;
  flex: 0 0 auto;
  width: 34%;
  max-width: 200px;
}

.device-frame {
  position: relative;
}

/* --- Tablet + phone, styled after Samsung's Galaxy hardware language and
   colored by theme (white body in dark mode, black in light mode — see the
   --device-* variables) rather than pinned to one fixed color: flat edges
   and a modest, fairly square corner radius (Samsung's flatter, boxier
   look next to the iPad/iPhone's heavier rounding), a single minimal
   punch-hole camera instead of a notch or island, and — on the tablet —
   no keyboard deck, since a Galaxy Tab is a plain slate. Shadow is kept
   tight so it stays inside the .device-preview padding buffer instead of
   being clipped by the section. */
.device-tablet .device-frame,
.device-phone .device-frame {
  background: linear-gradient(165deg, var(--device-body-1) 0%, var(--device-body-2) 55%, var(--device-body-3) 100%);
  box-shadow:
    inset 0 1px 0 var(--device-highlight),
    inset 0 0 0 1px var(--device-shade),
    6px 12px 16px -8px rgba(0, 0, 0, 0.35);
}

.device-tablet .device-frame {
  border-radius: 10px;
  padding: 9px;
}
.device-tablet-cam {
  width: 5px;
  height: 5px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: var(--device-cam);
  box-shadow: 0 0 0 2px var(--device-cam-ring);
}

.device-phone .device-frame {
  border-radius: 16px;
  padding: 12px 7px;
}
.device-phone-cam {
  width: 6px;
  height: 6px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: var(--device-cam);
  box-shadow: 0 0 0 2px var(--device-cam-ring);
}
.device-phone-btn {
  position: absolute;
  right: -2px;
  width: 3px;
  background: linear-gradient(90deg, var(--device-body-1), var(--device-body-2));
  border-radius: 0 2px 2px 0;
}
.device-phone-btn--vol-up {
  top: 20%;
  height: 6%;
}
.device-phone-btn--vol-down {
  top: 27%;
  height: 6%;
}
.device-phone-btn--power {
  top: 37%;
  height: 8%;
}

/* .device-screen is the FIXED-SIZE outer window (aspect-ratio + rounded
   corners + overflow:hidden) — it never changes size, so it always keeps
   the frame's bezel intact. The actual scroll happens one level down, in
   .device-screen-scroll, which is now a plain 100%-width layer positioned
   with JS-driven transform:translateY() (see initDeviceScreenScroll in
   script.js) rather than native overflow scrolling. Earlier attempts tried
   to keep native overflow:auto/scroll and just hide or out-clip the
   scrollbar via CSS, but the browser's actual reserved scrollbar width
   varies (and sometimes wasn't reserved at all despite the hiding CSS),
   which always left either a sliver of the frame's bezel eaten away or a
   sliver of the image cropped off. Driving the scroll via transform
   instead of overflow removes any scrollbar from the equation entirely —
   the image is always exactly 100% of the visible window, pixel for
   pixel, on every browser. */
.device-screen {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}
.device-tablet .device-screen {
  aspect-ratio: 3 / 2;
  border-radius: 4px;
}
.device-phone .device-screen {
  aspect-ratio: 9 / 19.5;
  border-radius: 8px;
}

.device-screen-scroll {
  /* A few px wider than the visible window on each side, not to hide a
     scrollbar (there isn't one) but to paper over a Chromium rendering
     seam: a rounded-corner overflow:hidden clip on the parent doesn't
     always perfectly cover a transformed (compositing-layer-promoted)
     child at the pixel level, even though their geometry matches exactly
     — leaving a hairline gap that shows the parent's own background
     through. .device-screen's own overflow:hidden clips this overscan
     right back down, and since .device-screen's own size never changes,
     this can't eat into the frame's bezel the way the old scrollbar
     workaround did. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  will-change: transform;
}

.device-screen-scroll picture {
  display: block;
}
.device-screen-scroll img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transition: filter 1.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.portfolio-slide.is-active .device-screen-scroll img {
  filter: grayscale(0);
}

/* Mobile — portrait or landscape, matched by touch capability (orientation-
   independent) or by width as a fallback: the side-by-side tablet+phone
   mockup doesn't fit, so it's replaced entirely by a single frame showing
   just a crop matching a real phone's OWN viewport (390×844 — the exact
   size the screenshots were captured at), not scrollable, no second
   device. Placed after the base device-mockup rules above so these
   overrides (same selector specificity) win the cascade instead of
   losing to source order. */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .portfolio-slider .portfolio-arrow { display: none; }
  .portfolio-slide {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .portfolio-slide .device-preview,
  .portfolio-slide .project-overlay { flex: none; width: 100%; max-width: none; }
  .device-preview { justify-content: center; padding: 1.5rem 1rem 2rem; }
  .device-phone { display: none; }
  .device-tablet { width: 100%; max-width: 360px; }

  /* Simple, static preview — the desktop screenshot (not the mobile one:
     this represents "the homepage as a desktop viewport sees it", the
     same picture used in the interactive desktop mockups), cropped to one
     1440×900 desktop-viewport's worth (8:5), no scroll — but still framed
     in the same theme-aware tablet chrome (white body in dark mode, black
     in light mode) as the desktop mockups, just not interactive. Frame
     styling itself is inherited from the base .device-tablet .device-frame
     rule above; nothing to override here. */
  .device-tablet .device-screen {
    aspect-ratio: 8 / 5;
  }
  .device-tablet .device-screen-scroll img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

.project-overlay .project-title {
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.project-overlay .project-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent);
  transition: color var(--transition);
}
.project-link:hover { color: var(--color-accent-hover); }

.project-link--static {
  color: var(--color-text-light);
  cursor: default;
}
.project-link--static:hover { color: var(--color-text-light); }

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.7rem;
}
.project-tag {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 0.175rem 0.45rem;
  border-radius: var(--radius-full);
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.carousel-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-dim);
}
.carousel-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* === TESTIMONIALS === */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.testimonial-card {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  transition: all var(--transition-slow);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
  font-family: Georgia, serif;
  pointer-events: none;
}
.testimonial-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.08);
}

.testimonial-stars {
  font-size: 0.875rem;
  color: #fbbf24;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: normal;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-bg);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.testimonial-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  font-style: normal;
  letter-spacing: -0.01em;
  margin-bottom: 0.125rem;
}

.testimonial-role {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* === RESPONSIVE — TESTIMONIALS === */
@media (max-width: 960px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* === background-attachment:fixed — iOS Safari fix === */
@media (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }
}