:root {
  --color-bg: 150 10% 6%;
  --color-fg: 120 5% 85%;
  --color-card: 150 10% 8%;
  --color-card-fg: 120 5% 85%;
  --color-primary: 152 28% 54%;
  --color-primary-fg: 150 20% 5%;
  --color-secondary: 38 80% 50%;
  --color-secondary-fg: 0 0% 5%;
  --color-muted: 150 8% 14%;
  --color-muted-fg: 150 5% 50%;
  --color-accent: 38 80% 50%;
  --color-border: 150 10% 18%;
  --color-input: 150 10% 16%;
  --color-moss: 106 11% 40%;
  --color-earth: 30 20% 30%;
  --color-bark: 25 15% 22%;
  --color-mist: 200 10% 70%;
  --color-destructive: 0 84% 60%;

  --font-main: 'Inter', sans-serif;
  --font-heading: 'JetBrains Mono', monospace;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-section: 3rem;

  --shadow-terminal: 0 0 20px hsl(152 28% 54% / 0.2);
  --shadow-terminal-strong: 0 0 40px hsl(120 70% 45% / 0.3);
  --shadow-amber: 0 0 20px hsl(38 80% 50% / 0.2);
  --shadow-inset-scan: inset 0 1px 0 hsl(120 70% 45% / 0.1);

  --container-sm: 42rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 72rem;
  --nav-height: 3.5rem;
  --radius: 0;
  --transition-fast: 0.15s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background: hsl(var(--color-bg));
  color: hsl(var(--color-fg));
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

button,
input,
textarea {
  font: inherit;
}

[x-cloak] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Page shell ─── */
.page {
  position: relative;
  min-height: 100vh;
}

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

.site-main--inset {
  margin-top: calc(var(--nav-height) + 4rem);
}

.site-main--inset > :first-child {
  padding-top: 0;
}

.page-background {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.page-background__image,
.page-background__overlay {
  position: absolute;
  inset: 0;
}

.page-background__image {
  background: url('../img/forest-bg.webp') center / cover no-repeat;
}

.page-background__overlay {
  background: linear-gradient(to bottom, hsl(0 0% 0% / 0.7), hsl(0 0% 0% / 0.5), hsl(0 0% 0% / 0.8));
}
/*
.page-background__clouds {
  opacity: 0.2;
  background-image:
    radial-gradient(ellipse 600px 200px at 30% 20%, hsl(var(--color-mist) / 0.3), transparent),
    radial-gradient(ellipse 400px 150px at 70% 35%, hsl(var(--color-mist) / 0.2), transparent),
    radial-gradient(ellipse 500px 180px at 50% 15%, hsl(var(--color-mist) / 0.15), transparent);
  animation: cloud-drift 60s ease-in-out infinite;
}

.page-background__scanlines {
  pointer-events: none;
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsl(120 70% 45% / 0.02) 2px,
    hsl(120 70% 45% / 0.02) 4px
  );
}*/
/* Animaci zapneme jen pro počítače (desktop) */
@media (min-width: 769px) {
  .page-background__image {
    animation: cloud-drift-slow 90s ease-in-out infinite;
    will-change: transform; /* Řekne prohlížeči, aby animaci poslal na GPU */
  }
}

/* ─── Header / nav ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 100%;
}

.site-nav {
  width: max-content;
  max-width: 100%;
  background: hsl(var(--color-bg) / 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid hsl(var(--color-primary) / 0.1);
  border-bottom: 1px solid hsl(var(--color-primary) / 0.1);
}

.site-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  height: var(--nav-height);
  padding-inline: var(--space-xl);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--color-primary));
}

.site-logo__cursor {
  animation: cursor-blink 1s step-end infinite;
}

.nav-list {
  display: none;
  gap: var(--space-2xl);
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-muted-fg));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: hsl(var(--color-primary));
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: hsl(var(--color-fg));
  cursor: pointer;
}

.nav-dropdown {
  padding: 0 var(--space-xl) var(--space-lg);
  border-top: 1px solid hsl(var(--color-primary) / 0.1);
}

.nav-dropdown__link {
  display: block;
  padding: var(--space-sm) 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-muted-fg));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color var(--transition-fast);
}

.nav-dropdown__link:hover {
  color: hsl(var(--color-primary));
}

/* ─── Panels ─── */
.panel {
  position: relative;
}

.panel--terminal {
  padding: var(--space-2xl);
  background: hsl(var(--color-bg) / 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--color-primary) / 0.15);
  box-shadow: var(--shadow-terminal), var(--shadow-inset-scan);
}

.panel--organic {
  padding: var(--space-2xl);
  background: hsl(var(--color-bg) / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(var(--color-moss) / 0.2);
}

.panel--scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsl(120 70% 45% / 0.03) 2px,
    hsl(120 70% 45% / 0.03) 4px
  );
}

/* ─── Typography helpers ─── */
.section-kicker {
  margin-bottom: var(--space-xl);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: hsl(var(--color-primary));
  opacity: 0.7;
}

.section-kicker--tight {
  margin-bottom: var(--space-sm);
  letter-spacing: 0.3em;
}

.section-kicker--moss {
  color: hsl(var(--color-moss));
}

.section-kicker__mark {
  color: hsl(var(--color-primary) / 0.5);
}

.section-kicker__mark--moss {
  color: hsl(var(--color-moss) / 0.5);
}

.section-title {
  margin: 0 0 var(--space-lg);
  font-size: 1.5rem;
  font-weight: 700;
}

.section-text {
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--color-muted-fg));
}

.section-header {
  margin-bottom: var(--space-3xl);
}

.section-header .line-accent {
  margin-bottom: 0;
}

.text-gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient--terminal {
  background-image: linear-gradient(135deg, hsl(152 18% 54%), hsl(152 18% 54%));
}

.text-gradient--organic {
  background-image: linear-gradient(135deg, hsl(106 11% 40%), hsl(106 11% 55%));
}

.line-accent {
  height: 1px;
  width: 100%;
  margin-bottom: var(--space-xl);
  background: linear-gradient(90deg, transparent, hsl(var(--color-primary) / 0.4), transparent);
}

.line-accent--organic {
  background: linear-gradient(90deg, transparent, hsl(var(--color-moss) / 0.5), transparent);
}

/* ─── Buttons ─── */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.button--primary {
  background: hsl(var(--color-primary) / 0.1);
  border-color: hsl(var(--color-primary) / 0.3);
  color: hsl(var(--color-primary));
  box-shadow: var(--shadow-terminal), var(--shadow-inset-scan);
}

.button--primary:hover {
  background: hsl(var(--color-primary) / 0.2);
  border-color: hsl(var(--color-primary) / 0.5);
}

.button--outline {
  border-color: hsl(var(--color-moss) / 0.3);
  color: hsl(var(--color-mist));
}

.button--outline:hover {
  border-color: hsl(var(--color-moss) / 0.6);
  color: hsl(var(--color-fg));
}

/* ─── Hero ─── */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-inline: var(--space-xl);
}

.hero-content {
  position: relative;
  max-width: var(--container-md);
  text-align: center;
}

.hero-title {
  margin: 0 0 var(--space-xl);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero-title__meets {
  display: block;
  margin-top: var(--space-sm);
  font-size: 1.125rem;
  font-weight: 400;
  color: hsl(var(--color-mist));
}

.hero-lead {
  max-width: 28rem;
  margin: 0 auto var(--space-2xl);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.625;
  color: hsl(var(--color-muted-fg));
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.hero-hint {
  margin-top: var(--space-xl);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-muted-fg));
  opacity: 0.4;
}

.hero-hint__prompt {
  color: hsl(var(--color-primary));
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  z-index: 10;
  color: hsl(var(--color-primary) / 0.4);
  animation: bounce-center 2s infinite;
}

/* ─── About / sections ─── */
.about-section,
.projects-section,
.contact-section {
  position: relative;
  padding: var(--space-section) var(--space-xl);
}

.section-container {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.about-section .panel {
  margin-bottom: var(--space-2xl);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.stat-card {
  position: relative;
  padding: var(--space-lg);
  background: hsl(var(--color-bg) / 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--color-primary) / 0.15);
  box-shadow: var(--shadow-terminal), var(--shadow-inset-scan);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsl(120 70% 45% / 0.03) 2px,
    hsl(120 70% 45% / 0.03) 4px
  );
}

.stat-card:hover {
  border-color: hsl(var(--color-primary) / 0.3);
}

.events-filter {
  margin-bottom: var(--space-2xl);
}

.events-filter .stat-card {
  cursor: pointer;
  opacity: 0.35;
}

.events-filter .stat-card.is-active {
  opacity: 1;
  border-color: hsl(var(--color-primary) / 0.5);
}

.stat-card__icon {
  margin-bottom: var(--space-md);
}

.stat-card__icon--primary {
  color: hsl(var(--color-primary));
}

.stat-card__icon--secondary {
  color: hsl(var(--color-secondary));
}

.stat-card__label {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg));
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--color-fg));
}

/* ─── Divider ─── */
.section-divider {
  position: relative;
  padding: var(--space-2xl) var(--space-xl);
}

.section-divider__inner {
  max-width: var(--container-lg);
  margin-inline: auto;
  text-align: center;
}

.section-divider__text {
  margin: var(--space-xl) 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg));
  opacity: 0.5;
}

.section-divider .line-accent {
  margin-bottom: 0;
}

/* ─── Projects ─── */
.projects-grid {
  display: grid;
  gap: var(--space-lg);
}

.project-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: hsl(var(--color-bg) / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(var(--color-moss) / 0.2);
  transition: border-color var(--transition-fast);
}

.project-card:hover {
  border-color: hsl(var(--color-moss) / 0.4);
}

.project-card__title {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--color-mist));
  transition: color var(--transition-fast);
}

.project-card:hover .project-card__title {
  color: hsl(var(--color-moss));
}

.project-card__text {
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  font-weight: 300;
  color: hsl(var(--color-muted-fg));
}

.project-card__date {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--color-moss) / 0.6);
}

.projects-grid__status {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: hsl(var(--color-muted-fg));
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.tag {
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--color-moss) / 0.6);
  border: 1px solid hsl(var(--color-moss) / 0.2);
}

.project-card__links {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-md);
}

.project-card__link {
  color: hsl(var(--color-muted-fg));
  transition: color var(--transition-fast);
}

.project-card__link:hover {
  color: hsl(var(--color-moss));
}

/* ─── Contact ─── */
.contact-container {
  max-width: var(--container-sm);
  margin-inline: auto;
}

.contact-intro {
  margin-bottom: var(--space-2xl);
  font-size: 0.875rem;
  color: hsl(var(--color-muted-fg));
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  gap: var(--space-md);
}

.form-input {
  width: 100%;
  padding: 0.625rem var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-fg));
  background: hsl(var(--color-bg) / 0.5);
  border: 1px solid hsl(var(--color-primary) / 0.15);
  transition: border-color var(--transition-fast);
}

.form-input::placeholder {
  color: hsl(var(--color-muted-fg) / 0.5);
}

.form-input:focus {
  outline: none;
  border-color: hsl(var(--color-primary) / 0.4);
}

.form-textarea {
  resize: none;
  min-height: 8rem;
}

/* ─── Footer ─── */
.site-footer {
  position: relative;
  z-index: 10;
  padding: var(--space-2xl) var(--space-xl);
  border-top: 1px solid hsl(var(--color-border) / 0.3);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: var(--container-lg);
  margin-inline: auto;
}

.footer-copy {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg) / 0.5);
}

.footer-links {
  display: flex;
  gap: var(--space-xl);
}

.footer-link {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg) / 0.4);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: hsl(var(--color-primary));
}

/* ─── Toast ─── */
.toast {
  position: fixed;
  right: var(--space-2xl);
  bottom: var(--space-2xl);
  z-index: 100;
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-main);
  font-size: 0.875rem;
  color: hsl(var(--color-fg));
  background: hsl(var(--color-card));
  border: 1px solid hsl(var(--color-border));
}

/* ─── Animations ─── */
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes cloud-drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}

@keyframes cloud-drift-slow {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(-20px) scale(1.02); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes bounce-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

/* ─── Icons ─── */
.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  background-color: currentColor;
  opacity: 0.9;
}

.icon-terminal {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cline x1='12' y1='19' x2='20' y2='19'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cline x1='12' y1='19' x2='20' y2='19'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-menu {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-close {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-chevron-down {
  width: 18px;
  height: 18px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-code,
.icon-gauge,
.icon-wrench,
.icon-cpu {
  width: 18px;
  height: 18px;
}

.icon-code {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='16 18 22 12 16 6'%3E%3C/polyline%3E%3Cpolyline points='8 6 2 12 8 18'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='16 18 22 12 16 6'%3E%3C/polyline%3E%3Cpolyline points='8 6 2 12 8 18'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-gauge {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 14m-2 0a2 2 0 1 1 4 0a2 2 0 1 1 -4 0'%3E%3C/path%3E%3Cpath d='M12 14v4'%3E%3C/path%3E%3Cpath d='M14 12h4'%3E%3C/path%3E%3Cpath d='M12 6V2'%3E%3C/path%3E%3Cpath d='M6 12H2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 14m-2 0a2 2 0 1 1 4 0a2 2 0 1 1 -4 0'%3E%3C/path%3E%3Cpath d='M12 14v4'%3E%3C/path%3E%3Cpath d='M14 12h4'%3E%3C/path%3E%3Cpath d='M12 6V2'%3E%3C/path%3E%3Cpath d='M6 12H2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-wrench {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-cpu {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Crect x='9' y='9' width='6' height='6'%3E%3C/rect%3E%3Cline x1='9' y1='1' x2='9' y2='4'%3E%3C/line%3E%3Cline x1='15' y1='1' x2='15' y2='4'%3E%3C/line%3E%3Cline x1='9' y1='20' x2='9' y2='23'%3E%3C/line%3E%3Cline x1='15' y1='20' x2='15' y2='23'%3E%3C/line%3E%3Cline x1='20' y1='9' x2='23' y2='9'%3E%3C/line%3E%3Cline x1='20' y1='14' x2='23' y2='14'%3E%3C/line%3E%3Cline x1='1' y1='9' x2='4' y2='9'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='4' y2='14'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Crect x='9' y='9' width='6' height='6'%3E%3C/rect%3E%3Cline x1='9' y1='1' x2='9' y2='4'%3E%3C/line%3E%3Cline x1='15' y1='1' x2='15' y2='4'%3E%3C/line%3E%3Cline x1='9' y1='20' x2='9' y2='23'%3E%3C/line%3E%3Cline x1='15' y1='20' x2='15' y2='23'%3E%3C/line%3E%3Cline x1='20' y1='9' x2='23' y2='9'%3E%3C/line%3E%3Cline x1='20' y1='14' x2='23' y2='14'%3E%3C/line%3E%3Cline x1='1' y1='9' x2='4' y2='9'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='4' y2='14'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-github,
.icon-external {
  width: 16px;
  height: 16px;
}

.icon-github {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'%3E%3C/path%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'%3E%3C/path%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-external {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-send {
  width: 12px;
  height: 12px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'%3E%3C/path%3E%3Cpath d='M22 2 11 13'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'%3E%3C/path%3E%3Cpath d='M22 2 11 13'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-arrow-up-right,
.icon-radio,
.icon-cloud-rain,
.icon-wind,
.icon-trees,
.icon-leaf,
.icon-check {
  width: 16px;
  height: 16px;
}

.icon-arrow-up-right {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-radio {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'%3E%3C/circle%3E%3Cpath d='M16.24 7.76a6 6 0 0 1 0 8.49'%3E%3C/path%3E%3Cpath d='M7.76 16.24a6 6 0 0 1 0-8.49'%3E%3C/path%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'%3E%3C/path%3E%3Cpath d='M4.93 19.07a10 10 0 0 1 0-14.14'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'%3E%3C/circle%3E%3Cpath d='M16.24 7.76a6 6 0 0 1 0 8.49'%3E%3C/path%3E%3Cpath d='M7.76 16.24a6 6 0 0 1 0-8.49'%3E%3C/path%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'%3E%3C/path%3E%3Cpath d='M4.93 19.07a10 10 0 0 1 0-14.14'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-cloud-rain {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 0 9H4z'%3E%3C/path%3E%3Cpath d='M16 14v6'%3E%3C/path%3E%3Cpath d='M8 14v6'%3E%3C/path%3E%3Cpath d='M12 16v6'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 0 9H4z'%3E%3C/path%3E%3Cpath d='M16 14v6'%3E%3C/path%3E%3Cpath d='M8 14v6'%3E%3C/path%3E%3Cpath d='M12 16v6'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-wind {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2'%3E%3C/path%3E%3Cpath d='M9.6 4.6A2 2 0 1 1 11 8H2'%3E%3C/path%3E%3Cpath d='M12.6 19.4A2 2 0 1 0 14 16H2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2'%3E%3C/path%3E%3Cpath d='M9.6 4.6A2 2 0 1 1 11 8H2'%3E%3C/path%3E%3Cpath d='M12.6 19.4A2 2 0 1 0 14 16H2'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-trees {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z'%3E%3C/path%3E%3Cpath d='M7 16v6'%3E%3C/path%3E%3Cpath d='M13 19v3'%3E%3C/path%3E%3Cpath d='M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z'%3E%3C/path%3E%3Cpath d='M7 16v6'%3E%3C/path%3E%3Cpath d='M13 19v3'%3E%3C/path%3E%3Cpath d='M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-leaf {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'%3E%3C/path%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'%3E%3C/path%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.icon-check {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* ─── Case study / podstranka ─── */
.case-wrap {
  width: min(100%, var(--container-xl));
  margin-inline: auto;
}

.case-hero {
  display: flex;
  align-items: flex-end;
  min-height: 92vh;
  padding: calc(var(--nav-height) + 4rem) var(--space-xl) 4rem;
}

.case-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 1.75rem;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--color-primary) / 0.7);
}

.case-kicker--tight {
  margin-bottom: var(--space-md);
}

.case-kicker--moss {
  color: hsl(var(--color-moss));
}

.case-eyebrow {
  margin-bottom: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: hsl(var(--color-moss));
}

.case-title {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.98;
}

.case-heading {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--color-mist));
}

.case-lead {
  max-width: 42rem;
  margin: 1.75rem 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: hsl(var(--color-mist));
}

.case-copy {
  max-width: 36rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: hsl(var(--color-muted-fg));
}

.case-hero__grid {
  display: grid;
  gap: 2.5rem;
}

.case-meta {
  padding: 1.25rem;
}

.case-meta__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid hsl(var(--color-border));
  font-family: var(--font-heading);
  font-size: 0.75rem;
}

.case-meta__row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.case-meta dt {
  color: hsl(var(--color-muted-fg));
}

.case-meta dd {
  margin: 0;
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 2.5rem;
}

.case-metrics {
  padding: var(--space-2xl) var(--space-xl);
  border-top: 1px solid hsl(var(--color-border) / 0.5);
  border-bottom: 1px solid hsl(var(--color-border) / 0.5);
  background: hsl(var(--color-bg) / 0.45);
  backdrop-filter: blur(12px);
}

.case-metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem var(--space-lg);
}

.case-metric {
  padding-left: 1.25rem;
  border-left: 1px solid hsl(var(--color-moss) / 0.3);
}

.case-metric b {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  color: hsl(var(--color-mist));
}

.case-metric p {
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  color: hsl(var(--color-muted-fg));
}

.case-section {
  padding: 6rem var(--space-xl);
}

.case-section--band {
  border-top: 1px solid hsl(var(--color-border) / 0.5);
  border-bottom: 1px solid hsl(var(--color-border) / 0.5);
  background: hsl(var(--color-bg) / 0.55);
  backdrop-filter: blur(8px);
}

.case-section__head {
  display: grid;
  gap: var(--space-2xl);
  margin-bottom: 2.5rem;
}

.case-dashboard {
  padding: var(--space-md);
}

.case-dashboard__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 0 var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid hsl(var(--color-border));
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg));
}

.case-dashboard__bar span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.case-dashboard__grid {
  display: grid;
  gap: var(--space-md);
}

.case-chart,
.case-sensor {
  padding: 1.25rem;
  background: hsl(var(--color-bg) / 0.45);
  border: 1px solid hsl(var(--color-border));
}

.case-chart__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}

.case-chart__label,
.case-sensor__label {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg));
}

.case-chart__value {
  margin-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: hsl(var(--color-primary));
}

.case-badge {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
}

.case-chart__svg {
  width: 100%;
  height: 13rem;
  margin-top: var(--space-xl);
  color: hsl(var(--color-moss));
}

.case-chart__grid {
  color: hsl(var(--color-border));
}

.case-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--color-muted-fg));
}

.case-sensors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.case-sensor__icon {
  margin-bottom: 1.25rem;
  color: hsl(var(--color-moss));
}

.case-sensor b {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: hsl(var(--color-mist));
}

.case-sensor p:last-child {
  margin-top: var(--space-xs);
  font-size: 10px;
  color: hsl(var(--color-muted-fg));
}

.case-approach {
  display: grid;
  gap: 3rem;
}

.case-approach .case-copy {
  margin-top: var(--space-xl);
}

.case-decisions {
  border-top: 1px solid hsl(var(--color-border));
  border-bottom: 1px solid hsl(var(--color-border));
}

.case-decision {
  display: grid;
  gap: var(--space-lg);
  padding: 1.75rem 0;
  border-bottom: 1px solid hsl(var(--color-border));
}

.case-decision:last-child {
  border-bottom: 0;
}

.case-decision span {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-primary) / 0.6);
}

.case-decision h3 {
  margin: 0;
  font-size: 1rem;
  color: hsl(var(--color-mist));
}

.case-decision p {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--color-muted-fg));
}

.case-source {
  display: grid;
  gap: 1.25rem;
}

.case-log {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: hsl(var(--color-muted-fg));
}

.case-log p {
  margin-bottom: var(--space-md);
}

.case-log__prompt {
  color: hsl(var(--color-primary));
}

.case-log__ok {
  margin-top: var(--space-lg);
  color: hsl(var(--color-moss));
}

.case-outcome__lead {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.3;
  color: hsl(var(--color-mist));
}

.case-outcome__list {
  display: grid;
  gap: var(--space-md);
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: hsl(var(--color-muted-fg));
}

.case-outcome__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.case-outcome__list .icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: hsl(var(--color-moss));
}

.case-next {
  padding: 5rem var(--space-xl);
  border-top: 1px solid hsl(var(--color-border) / 0.6);
  background: hsl(var(--color-bg) / 0.7);
  backdrop-filter: blur(12px);
}

.case-next__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl);
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
  .hero-content .panel--terminal {
    padding: var(--space-3xl);
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-title__meets {
    font-size: 1.5rem;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.875rem;
  }

  .project-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xl);
  }

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__inner {
    flex-direction: row;
  }

  .case-title {
    font-size: 4.5rem;
  }

  .case-heading {
    font-size: 2.25rem;
  }

  .case-lead {
    font-size: 1.125rem;
  }

  .case-dashboard {
    padding: 1.25rem;
  }

  .case-decision {
    grid-template-columns: 3rem 1fr;
  }

  .case-next__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .case-outcome__lead {
    font-size: 1.875rem;
  }
}

@media (min-width: 768px) {
  .nav-list {
    display: flex;
  }

  .nav-toggle,
  .nav-dropdown {
    display: none !important;
  }

  .hero-title {
    font-size: 3.75rem;
  }

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

  .case-metrics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .case-title {
    font-size: 6rem;
  }

  .case-hero__grid {
    grid-template-columns: 1fr 22rem;
    align-items: end;
  }

  .case-section__head {
    grid-template-columns: 0.65fr 1fr;
    align-items: end;
  }

  .case-dashboard__grid {
    grid-template-columns: 1.45fr 0.55fr;
  }

  .case-sensors {
    grid-template-columns: 1fr;
  }

  .case-approach {
    grid-template-columns: 0.7fr 1.3fr;
  }

  .case-source {
    grid-template-columns: 1fr 1fr;
  }
}