/* ============================================================
   UX-Writing Assistant – Design System
   Tokens sourced from Figma: Brand, Alias, Responsive
   ============================================================ */

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-500);
  background: var(--color-primary-500);
  color: white;
  padding: var(--space-400) var(--space-600);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  top: var(--space-400);
}

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;700&display=swap');

/* ── Brand Palette ── */
:root {
  /* Electric Blue (Primary) */
  --color-electric-blue-100: rgb(204, 218, 252);
  --color-electric-blue-200: rgb(153, 181, 250);
  --color-electric-blue-300: rgb(103, 143, 247);
  --color-electric-blue-400: rgb(59,  90,  168);
  --color-electric-blue-500: rgb(59,  90,  168);
  --color-electric-blue-600: rgb(1,   55,  194);
  --color-electric-blue-700: rgb(1,   41,  145);
  --color-electric-blue-800: rgb(1,   41,  145);

  /* Cream (Secondary) */
  --color-cream-100: rgb(247, 243, 241);
  --color-cream-200: rgb(245, 241, 238);
  --color-cream-300: rgb(228, 223, 221);
  --color-cream-400: rgb(226, 221, 218);
  --color-cream-500: rgb(208, 204, 202);
  --color-cream-600: rgb(186, 182, 180);
  --color-cream-700: rgb(159, 155, 154);
  --color-cream-800: rgb(126, 124, 122);

  /* Dark Blue (Accent) */
  --color-dark-blue-100: rgb(180, 181, 205);
  --color-dark-blue-200: rgb(155, 157, 188);
  --color-dark-blue-300: rgb(129, 132, 171);
  --color-dark-blue-400: rgb(104, 107, 154);
  --color-dark-blue-500: rgb(79,  83,  137);
  --color-dark-blue-600: rgb(54,  58,  121);
  --color-dark-blue-700: rgb(4,   9,   87);
  --color-dark-blue-800: rgb(2,   6,   60);

  /* Red (Error) */
  --color-red-100: rgb(238, 163, 177);
  --color-red-200: rgb(229, 116, 139);
  --color-red-300: rgb(221, 70,  100);
  --color-red-400: rgb(212, 24,  61);
  --color-red-500: rgb(148, 17,  43);
  --color-red-600: rgb(127, 14,  37);
  --color-red-700: rgb(85,  10,  24);
  --color-red-800: rgb(42,  5,   12);

  /* Orange (Alert) */
  --color-orange-100: rgb(249, 210, 181);
  --color-orange-200: rgb(246, 181, 131);
  --color-orange-300: rgb(243, 156, 89);
  --color-orange-400: rgb(239, 131, 48);
  --color-orange-500: rgb(192, 105, 38);
  --color-orange-600: rgb(144, 79,  29);
  --color-orange-700: rgb(96,  52,  19);
  --color-orange-800: rgb(48,  26,  10);

  /* Green (Success) */
  --color-green-100: rgb(163, 238, 230);
  --color-green-200: rgb(116, 229, 218);
  --color-green-300: rgb(70,  221, 206);
  --color-green-400: rgb(24,  212, 193);
  --color-green-500: rgb(19,  170, 155);
  --color-green-600: rgb(14,  127, 116);
  --color-green-700: rgb(10,  85,  77);
  --color-green-800: rgb(5,   42,  39);

  /* ── Semantic Aliases ── */
  --color-primary-100: var(--color-electric-blue-100);
  --color-primary-200: var(--color-electric-blue-200);
  --color-primary-300: var(--color-electric-blue-300);
  --color-primary-400: var(--color-electric-blue-400);
  --color-primary-500: var(--color-electric-blue-500);
  --color-primary-600: var(--color-electric-blue-600);
  --color-primary-700: var(--color-electric-blue-700);
  --color-primary-800: var(--color-electric-blue-800);

  --color-secondary-100: var(--color-cream-100);
  --color-secondary-200: var(--color-cream-200);
  --color-secondary-300: var(--color-cream-300);
  --color-secondary-400: var(--color-cream-400);
  --color-secondary-500: var(--color-cream-500);
  --color-secondary-600: var(--color-cream-600);
  --color-secondary-700: var(--color-cream-700);
  --color-secondary-800: var(--color-cream-800);

  --color-accent-100: var(--color-dark-blue-100);
  --color-accent-200: var(--color-dark-blue-200);
  --color-accent-300: var(--color-dark-blue-300);
  --color-accent-400: var(--color-dark-blue-400);
  --color-accent-500: var(--color-dark-blue-500);
  --color-accent-600: var(--color-dark-blue-600);
  --color-accent-700: var(--color-dark-blue-700);
  --color-accent-800: var(--color-dark-blue-800);

  --color-error-100: var(--color-red-100);
  --color-error-400: var(--color-red-400);
  --color-error-600: var(--color-red-600);

  --color-alert-100: var(--color-orange-100);
  --color-alert-400: var(--color-orange-400);
  --color-alert-600: var(--color-orange-600);

  --color-success-100: var(--color-green-100);
  --color-success-400: var(--color-green-400);
  --color-success-600: var(--color-green-600);

  /* ── Semantic Text Colors ── */
  --color-text-heading:   var(--color-primary-400);
  --color-text-body:      var(--color-accent-600);
  --color-text-on-action: var(--color-secondary-100);

  /* ── Typography ── */
  --font-heading: 'FatFrank', 'Arial Black', sans-serif;
  --font-body:    'Lexend', sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ── Type Scale – Desktop ── */
  --text-h1-size:        64px;
  --text-h1-line-height: 70px;
  --text-h2-size:        48px;
  --text-h2-line-height: 52px;
  --text-h3-size:        32px;
  --text-h3-line-height: 36px;
  --text-h4-size:        28px;
  --text-h4-line-height: 32px;
  --text-h5-size:        24px;
  --text-h5-line-height: 28px;
  --text-paragraph-md-size:        22px;
  --text-paragraph-md-line-height: 32px;
  --text-paragraph-sm-size:        20px;
  --text-paragraph-sm-line-height: 30px;
  --text-paragraph-xs-size:        16px;
  --text-paragraph-xs-line-height: 24px;

  /* ── Nav type ── */
  --text-nav-size:        20px;
  --text-nav-line-height: 24px;

  /* ── Form input type ── */
  --text-input-size:        16px;
  --text-input-line-height: 22px;

  /* ── Spacing Scale ── */
  --space-0:   0px;
  --space-25:  1px;
  --space-50:  2px;
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-700: 28px;
  --space-800: 32px;

  /* ── Border Width ── */
  --border-none: 0px;
  --border-sm:   2px;
  --border-md:   4px;
  --border-lg:   8px;

  /* ── Surface ── */
  --color-surface-default: #ffffff;

  /* ── Layout ── */
  --sidebar-width: 280px;
}

/* ── Mobile type scale ── */
@media (max-width: 768px) {
  :root {
    --text-h1-size:        48px;
    --text-h1-line-height: 52px;
    --text-h2-size:        32px;
    --text-h2-line-height: 36px;
    --text-h3-size:        28px;
    --text-h3-line-height: 32px;
    --text-h4-size:        24px;
    --text-h4-line-height: 28px;
    --text-h5-size:        20px;
    --text-h5-line-height: 24px;
  }
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-text-body);
  background-color: var(--color-secondary-100);
}

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

/* ============================================================
   LAYOUT
   ============================================================ */

.layout-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--color-secondary-100);
}

@media (max-width: 768px) {
  .layout-main {
    margin-left: 0;
    padding-top: 56px; /* height of mobile header */
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--color-secondary-100);
  border-right: var(--border-sm) solid var(--color-secondary-300);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}

/* Logo */
.sidebar-logo {
  padding: var(--space-600) var(--space-500);
  border-bottom: var(--border-sm) solid var(--color-secondary-300);
  margin-bottom: var(--space-300);
}

.sidebar-logo-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  border-top: var(--border-sm) solid var(--color-secondary-300);
}

.nav-item {
  display: block;
  padding: var(--space-400) var(--space-500);
  border-bottom: var(--border-sm) solid var(--color-secondary-300);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-line-height);
  color: var(--color-accent-700);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.nav-item.active {
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
}

/* ── Collapsible group ── */
.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-header {
  display: flex;
  align-items: center;
  border-bottom: var(--border-sm) solid var(--color-secondary-300);
}

.nav-group-link {
  flex: 1;
  border-bottom: none !important;
}

.nav-group-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: var(--border-sm) solid var(--color-secondary-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-500);
  align-self: stretch;
  color: var(--color-accent-700);
}

.nav-group-link.active {
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
}

/* CSS-only chevron arrow */
.nav-toggle-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-bottom: 3px;
}

.nav-group-toggle[aria-expanded="true"] .nav-toggle-arrow {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}

/* Submenu */
.nav-submenu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  background-color: var(--color-secondary-200);
}

.nav-submenu.open {
  max-height: 500px;
}

.nav-subitem {
  display: block;
  padding: var(--space-300) var(--space-500) var(--space-300) var(--space-600);
  border-bottom: var(--border-sm) solid var(--color-secondary-300);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-accent-600);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-subitem:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.nav-subitem.active {
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   PAGE CONTENT – shared
   ============================================================ */

.page-content {
  padding: var(--space-800) calc(var(--space-800) * 2);
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* ── Shared ── */
.home-section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--space-800) * 5) calc(var(--space-800) * 2);
}

.home-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-primary-500);
  text-align: center;
  margin-bottom: var(--space-800);
}

.home-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-400) var(--space-700);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.home-btn:hover { transform: translateY(-2px); }
.home-btn:active { transform: translateY(0); }
.home-btn--primary:hover { background-color: var(--color-primary-600); }
.home-btn--ghost:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.home-btn--cream:hover { background-color: rgba(247, 243, 241, 0.15); }

.home-btn--primary {
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
}

.home-btn--ghost {
  background: transparent;
  border: 2px solid var(--color-primary-500);
  color: var(--color-primary-500);
}

.home-btn--cream {
  background: transparent;
  border: 2px solid var(--color-secondary-100);
  color: var(--color-secondary-100);
}

/* ── Hero entrance animation (Material Design — emphasized decelerate) ── */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-enter-right {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-anim {
  opacity: 0;
  animation: hero-enter 500ms cubic-bezier(0.05, 0.7, 0.1, 1.0) forwards;
}

.hero-anim-right {
  opacity: 0;
  animation: hero-enter-right 500ms cubic-bezier(0.05, 0.7, 0.1, 1.0) forwards;
}

.hero-anim-d1 { animation-delay: 0ms; }
.hero-anim-d2 { animation-delay: 80ms; }
.hero-anim-d3 { animation-delay: 160ms; }
.hero-anim-d4 { animation-delay: 240ms; }

/* ── Hero ── */
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: var(--space-600);
  padding: calc(var(--space-800) * 4) calc(var(--space-800) * 2);
}

.home-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

#homeHeroLottie {
  width: 100%;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
}

.home-hero-play-btn {
  position: absolute;
  bottom: var(--space-500);
  right: var(--space-500);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 200ms ease, transform 150ms ease;
}

.home-hero-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.home-hero-play-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--color-primary-500);
}

#homePlayBtn {
  background: rgba(247, 243, 241, 0.2);
  border-color: var(--color-secondary-100);
}

#homePlayBtn:hover {
  background: rgba(247, 243, 241, 0.35);
}

#homePlayBtn svg {
  fill: var(--color-secondary-100);
}

.home-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.home-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-500);
  letter-spacing: 0.02em;
}

.home-headline {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-primary-500);
}

.home-subline {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-600);
  max-width: 480px;
}

.home-hero-actions {
  display: flex;
  gap: var(--space-500);
  flex-wrap: wrap;
}

/* ── Hero preview card ── */
.home-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-preview-card {
  background-color: var(--color-primary-500);
  border-radius: 8px;
  padding: var(--space-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 48px rgba(59, 90, 168, 0.25);
}

.home-preview-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.home-preview-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
}

.home-preview-badge--bad {
  background-color: rgba(247, 243, 241, 0.15);
  color: var(--color-secondary-100);
  opacity: 0.7;
}

.home-preview-badge--good {
  background-color: rgba(247, 243, 241, 0.25);
  color: var(--color-secondary-100);
}

.home-preview-text {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  line-height: 1.5;
  color: var(--color-secondary-100);
  opacity: 0.6;
}

.home-preview-text--good {
  opacity: 1;
}

.home-preview-divider {
  display: flex;
  justify-content: center;
  color: rgba(247, 243, 241, 0.5);
  padding: var(--space-200) 0;
}

.home-preview-tag {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(247, 243, 241, 0.5);
  border-top: 2px solid rgba(247, 243, 241, 0.15);
  padding-top: var(--space-400);
  margin-top: var(--space-200);
}

/* ── Cognitive Accessibility ── */
.home-cog {
  background-color: var(--color-primary-500);
}

.home-cog .home-section-inner {
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2);
}

.home-cog .home-section-title {
  color: var(--color-secondary-100);
}

.home-cog-text {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: rgba(247, 243, 241, 0.85);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Pillars ── */
.home-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-700);
  margin-top: calc(var(--space-800) * 1.5);
}

.home-pillar-card {
  background-color: var(--color-primary-500);
  border-radius: 8px;
  padding: var(--space-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  color: var(--color-secondary-100);
  box-sizing: border-box;
  height: 460px;
}

.home-pillar-icon {
  width: 100%;
  height: 140px;
  color: var(--color-secondary-100);
}

.home-pillar-icon svg {
  width: 100%;
  height: 100%;
}

.home-pillar-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-secondary-100);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.home-pillar-text {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  line-height: 1.6;
  color: rgba(247, 243, 241, 0.8);
}

/* ── Features ── */
.home-features-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  margin-top: calc(var(--space-800) * 1.5);
}

.home-feature-card {
  display: flex;
  align-items: center;
  gap: var(--space-700);
  padding: var(--space-700);
  border: 2px solid var(--color-secondary-500);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.home-feature-card:hover {
  border-color: var(--color-primary-500);
  transform: translateX(4px);
}

.home-feature-number {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  color: var(--color-secondary-600);
  flex-shrink: 0;
  line-height: 1;
  width: 56px;
}

.home-feature-content {
  flex: 1;
}

.home-feature-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-primary-500);
  margin-bottom: var(--space-300);
}

.home-feature-text {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  line-height: 1.6;
  color: var(--color-accent-600);
}

.home-feature-arrow {
  font-size: 24px;
  color: var(--color-primary-500);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-feature-card:hover .home-feature-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ── Scroll reveal animations ── */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-pillar-card,
.home-feature-card {
  opacity: 0;
  transform: translateY(32px);
}

.home-pillar-card.is-visible,
.home-feature-card.is-visible {
  animation: card-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-pillar-card:nth-child(1) { animation-delay: 0ms; }
.home-pillar-card:nth-child(2) { animation-delay: 120ms; }
.home-pillar-card:nth-child(3) { animation-delay: 240ms; }

.home-feature-card:nth-child(1) { animation-delay: 0ms; }
.home-feature-card:nth-child(2) { animation-delay: 120ms; }
.home-feature-card:nth-child(3) { animation-delay: 240ms; }

/* ── Final CTA ── */
.home-final-cta {
  background-color: transparent;
  border-top: 2px solid var(--color-secondary-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-700);
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2);
  text-align: center;
}

.home-final-cta-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-primary-500);
}

/* ── Home mobile ── */
@media (max-width: 768px) {
  .home-hero {
    padding: calc(var(--space-800) * 2) var(--space-500);
  }

  .home-section-inner {
    padding: calc(var(--space-800) * 2) var(--space-500);
  }

  .home-pillars-grid {
    grid-template-columns: 1fr;
  }

  .home-feature-number { display: none; }

  .home-final-cta {
    padding: calc(var(--space-800) * 2) var(--space-500);
  }
}

/* ============================================================
   ASSISTANT PAGE
   ============================================================ */

/* Hero */
.assistant-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-600);
  padding: calc(var(--space-800) * 4) calc(var(--space-800) * 2);
}

.assistant-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.assistant-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-primary-500);
}

.assistant-hero-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-medium);
  max-width: 36ch;
}

.assistant-hero-image {
  background-color: var(--color-primary-500);
  border-radius: var(--space-200);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.assistant-hero-image #assistantLottie {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.assistant-hero-image-icon {
  font-size: 48px;
  opacity: 0.4;
  filter: grayscale(1) brightness(10);
}

/* Grundlagen Hero */
.grundlagen-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-600);
  padding: calc(var(--space-800) * 4) calc(var(--space-800) * 2) calc(var(--space-800) * 4);
}

.grundlagen-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.grundlagen-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-primary-500);
}

.grundlagen-hero-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

.grundlagen-hero-image {
  background-color: var(--color-primary-500);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.grundlagen-hero-image #grundlagenLottie {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.grundlagen-hero-icon {
  width: 120px;
  height: auto;
  opacity: 0.9;
}

.lottie-play-btn {
  position: absolute;
  bottom: var(--space-500);
  right: var(--space-500);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 200ms ease, transform 150ms ease;
}

.lottie-play-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.05);
}

.lottie-play-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}

@media (max-width: 768px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-500) var(--space-600);
  }
}

@media (max-width: 768px) {
  .grundlagen-hero {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-500) var(--space-600);
  }
}

/* Grundlagen Sections */
.grundlagen-section {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2);
}

.grundlagen-section-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.grundlagen-section-text {
  padding-top: 220px;
}

.grundlagen-section-right-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

.grundlagen-section-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.grundlagen-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-primary-500);
}

.grundlagen-section-intro {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-medium);
}

.grundlagen-section-text {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

.grundlagen-highlight {
  border: 4px solid #3b5aa8;
  padding: var(--space-700) var(--space-800);
  border-radius: 4px;
  align-self: center;
  width: 60%;
}

.grundlagen-highlight-text {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-medium);
}

.grundlagen-highlight--quote {
  border: none;
  border-left: 4px solid #3b5aa8;
  border-radius: 0;
  width: auto;
  align-self: stretch;
  padding: var(--space-400) var(--space-700);
}

.grundlagen-highlight--quote .grundlagen-highlight-text {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-family: var(--font-heading);
  color: #3b5aa8;
}

/* ── Neuro cards ── */
.grundlagen-neuro-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-600);
  margin-top: calc(var(--space-800) * 2);
}

.grundlagen-neuro-card {
  background-color: var(--color-primary-500);
  border-radius: 4px;
  padding: var(--space-700);
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.grundlagen-neuro-card-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.grundlagen-neuro-card {
  opacity: 0;
  transform: translateY(32px);
}

.grundlagen-neuro-card.is-visible {
  animation: card-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.grundlagen-neuro-card:nth-child(1) { animation-delay: 0ms; }
.grundlagen-neuro-card:nth-child(2) { animation-delay: 120ms; }
.grundlagen-neuro-card:nth-child(3) { animation-delay: 240ms; }

.grundlagen-neuro-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: white;
}

.grundlagen-neuro-card-text {
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
  .grundlagen-neuro-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grundlagen-section {
    padding: var(--space-700) var(--space-500);
    gap: var(--space-700);
  }
  .grundlagen-section-cols {
    grid-template-columns: 1fr;
    gap: var(--space-600);
  }
  .grundlagen-section-text {
    padding-top: 0;
  }
  .grundlagen-section-right-stack {
    padding-top: 0;
  }
  .grundlagen-highlight {
    width: 100%;
  }
  .grundlagen-quote {
    margin-left: calc(-1 * var(--space-500));
    margin-right: calc(-1 * var(--space-500));
    padding: calc(var(--space-800) * 2) var(--space-500);
  }
  .grundlagen-diagram-section {
    padding: var(--space-700) var(--space-500);
  }
  .grundlagen-cta {
    padding: var(--space-700) var(--space-500);
  }
}

/* Grundlagen Diagram */
.grundlagen-diagram-section {
  padding: calc(var(--space-800) * 2) calc(var(--space-800) * 2) calc(var(--space-800) * 3);
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.grundlagen-diagram-lead {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-medium);
  max-width: 40ch;
}

.grundlagen-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-600);
  padding: var(--space-800) 0;
}


.diagram-icon {
  width: 220px;
  height: auto;
}

.diagram-label {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  color: #3b5aa8;
}

.diagram-label--top {
  grid-column: 2;
  grid-row: 1;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagram-label--left {
  grid-column: 1;
  grid-row: 2;
  text-align: right;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagram-label--right {
  grid-column: 3;
  grid-row: 2;
  text-align: left;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagram-label--bottom {
  grid-column: 2;
  grid-row: 3;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagram-label.is-visible {
  opacity: 1;
  transform: translate(0);
}

.diagram-center {
  grid-column: 2;
  grid-row: 2;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diagram-center.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Grundlagen CTA */
.grundlagen-cta {
  padding: calc(var(--space-800) * 2) calc(var(--space-800) * 2) calc(var(--space-800) * 4);
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  max-width: 560px;
}

.grundlagen-cta-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-primary-500);
}

.grundlagen-cta-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

.grundlagen-cta-btn {
  display: block;
  padding: var(--space-400) var(--space-700);
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.grundlagen-cta-btn:hover { background-color: var(--color-primary-600); transform: translateY(-2px); }
.grundlagen-cta-btn:active { transform: translateY(0); }

@media (max-width: 768px) {
  .grundlagen-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-600);
    padding: var(--space-600) 0;
  }
  .diagram-icon {
    width: 180px;
    max-width: 100%;
  }
  .diagram-label {
    text-align: center;
  }
  .diagram-label--top    { order: 1; transform: translateY(0) !important; opacity: 1 !important; }
  .diagram-label--left   { order: 3; transform: translateY(0) !important; opacity: 1 !important; }
  .diagram-center        { order: 2; transform: scale(1)      !important; opacity: 1 !important; }
  .diagram-label--right  { order: 4; transform: translateY(0) !important; opacity: 1 !important; }
  .diagram-label--bottom { order: 5; transform: translateY(0) !important; opacity: 1 !important; }
}

/* Grundlagen Quote Banner */
.grundlagen-quote {
  background-color: var(--color-primary-500);
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2);
  margin-left: calc(-1 * var(--space-800) * 2);
  margin-right: calc(-1 * var(--space-800) * 2);
  text-align: center;
}

.grundlagen-quote-text {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-secondary-100);
  max-width: 18ch;
  margin: 0 auto;
}

/* About Hero */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-600);
  padding: calc(var(--space-800) * 4) calc(var(--space-800) * 2);
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.about-hero-title {
  margin-bottom: 40px;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-primary-500);
}

.about-hero-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

.about-hero-image {
  background-color: var(--color-primary-500);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  position: sticky;
  top: var(--space-800);
  overflow: hidden;
  /* position: sticky and position: relative coexist */
}

.about-hero-image #aboutLottie {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.about-hero-image-icon {
  font-size: 48px;
  opacity: 0.4;
  filter: grayscale(1) brightness(10);
}

/* Steps */
.assistant-steps {
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.assistant-steps-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  color: var(--color-primary-500);
}

.assistant-steps-subtitle {
  margin-top: calc(var(--space-300) * -1);
  font-size: var(--text-paragraph-md-size);
  color: var(--color-accent-600);
}

.assistant-steps-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-600);
}

.assistant-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  flex: 1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.assistant-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.step-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: var(--border-sm) solid var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  color: var(--color-primary-500);
  flex-shrink: 0;
}

.step-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-paragraph-md-size);
  color: var(--color-primary-500);
}

.step-desc {
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-accent-600);
}

.step-arrow {
  width: 48px;
  flex-shrink: 0;
  height: 2px;
  background-color: var(--color-primary-400);
  position: relative;
  margin-top: 27px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.step-arrow.is-visible {
  opacity: 1;
}

.step-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-right: var(--border-sm) solid var(--color-primary-400);
  border-top: var(--border-sm) solid var(--color-primary-400);
  transform: rotate(45deg);
}

/* Form */
.assistant-form-section {
  padding: calc(var(--space-800) * 3) calc(var(--space-800) * 2) calc(var(--space-800) * 5);
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.assistant-form-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  color: var(--color-primary-500);
}

.assistant-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  max-width: 720px;
}

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

.form-label {
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-700);
}

.form-label-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-accent-500);
}

.form-textarea,
.form-input {
  width: 100%;
  padding: var(--space-400);
  font-family: var(--font-body);
  font-size: var(--text-input-size);
  color: var(--color-accent-700);
  background-color: var(--color-surface-default);
  border: var(--border-sm) solid var(--color-secondary-300);
  border-radius: 4px;
  outline: none;
  resize: vertical;
}

.form-textarea::placeholder,
.form-input::placeholder {
  color: var(--color-accent-500);
}

.form-textarea:focus,
.form-input:focus {
  border-color: var(--color-primary-500);
}

.form-select-wrapper {
  position: relative;
}

.form-select {
  width: 100%;
  padding: var(--space-400);
  font-family: var(--font-body);
  font-size: var(--text-input-size);
  color: var(--color-accent-700);
  background-color: var(--color-surface-default);
  border: var(--border-sm) solid var(--color-secondary-300);
  border-radius: 4px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--color-primary-500);
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: var(--space-400);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-right: var(--border-sm) solid var(--color-accent-600);
  border-bottom: var(--border-sm) solid var(--color-accent-600);
  pointer-events: none;
  margin-top: -2px;
}

.form-submit {
  width: 100%;
  padding: var(--space-400) var(--space-600);
  font-family: var(--font-body);
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-100);
  background-color: var(--color-primary-500);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.form-submit:hover { background-color: var(--color-primary-600); transform: translateY(-2px); }
.form-submit:active { transform: translateY(0); }

/* ============================================================
   ASSISTANT RESULTS
   ============================================================ */

.assistant-results {
  padding: calc(var(--space-800) * 2) calc(var(--space-800) * 2) calc(var(--space-800) * 4);
  border-top: var(--border-sm) solid var(--color-secondary-300);
}

.results-inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 720px;
}

/* Summary */
.results-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.results-status-badge {
  display: inline-block;
  padding: var(--space-300) var(--space-600);
  font-family: var(--font-heading);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line-height);
  font-weight: var(--font-weight-medium);
  border-radius: 4px;
}

.status--gut {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.status--teilweise {
  background-color: var(--color-alert-100);
  color: var(--color-alert-600);
}

.status--verbesserungsbedarf {
  background-color: var(--color-error-100);
  color: var(--color-error-600);
}

.results-summary-text {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  font-weight: var(--font-weight-medium);
}

/* Text cards */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-600);
}

.results-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-700);
  background-color: var(--color-primary-500);
  border-radius: 4px;
}

.results-card--improved {
  background-color: var(--color-primary-500);
}

.results-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-400);
}

.results-card-label {
  font-size: var(--text-paragraph-md-size);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-100);
}

.results-card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.results-original,
.results-improved {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-secondary-100);
}

.results-improved {
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-100);
}

/* Explanation */
.results-explanation {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-600);
  padding: var(--space-500);
  border-left: var(--border-md) solid var(--color-primary-300);
}

/* Section labels */
.results-section-label {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line-height);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-500);
  margin-bottom: var(--space-400);
}

/* Principles */
.results-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.principle-item {
  padding: var(--space-500) var(--space-600);
  border: var(--border-sm) solid var(--color-secondary-300);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.principle--erfüllt {
  border-left: var(--border-md) solid var(--color-success-400);
}

.principle--verbessern {
  border-left: var(--border-md) solid var(--color-alert-400);
}

.principle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-400);
}

.principle-name {
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-700);
}

.principle-status {
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-500);
  flex-shrink: 0;
}

.principle--erfüllt .principle-status { color: var(--color-success-600); }
.principle--verbessern .principle-status { color: var(--color-alert-600); }

.principle-feedback {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-600);
}

/* Tips & Limitations */
.results-tip,
.results-limitation {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-600);
  padding: var(--space-400) var(--space-500);
  background-color: var(--color-secondary-200);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
  .assistant-results {
    padding: var(--space-600) var(--space-500) var(--space-800);
  }
}

@media (max-width: 768px) {
  .assistant-hero {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-500) var(--space-600);
  }

  .about-hero {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-500) var(--space-600);
  }

  .assistant-steps {
    padding: var(--space-600) var(--space-500);
  }

  .assistant-steps-row {
    flex-direction: column;
    gap: var(--space-700);
  }

  .step-arrow {
    width: 2px;
    height: 32px;
    margin-top: 0;
    margin-left: 27px;
  }

  .step-arrow::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    transform: rotate(135deg);
  }

  .assistant-form-section {
    padding: var(--space-600) var(--space-500) var(--space-800);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  margin-left: var(--sidebar-width);
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: var(--space-800);
  padding: var(--space-800) calc(var(--space-800) * 2);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.footer-headline {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-secondary-100);
}

.footer-sub {
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-secondary-100);
}

.footer-meta {
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-secondary-100);
  align-self: flex-end;
}

.footer-logo {
  align-items: flex-end;
}

.footer-logo-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .site-footer {
    margin-left: 0;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-600);
    padding: var(--space-700) var(--space-500);
  }

  .footer-logo {
    align-items: flex-start;
  }
}

/* ============================================================
   MOBILE HEADER
   ============================================================ */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--color-secondary-100);
  border-bottom: var(--border-sm) solid var(--color-secondary-300);
  align-items: center;
  gap: var(--space-400);
  padding: 0 var(--space-500);
  z-index: 300;
}

.mobile-logo {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-paragraph-md-size);
  color: var(--color-primary-500);
}

/* Burger button */
.burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-primary-500);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Burger → X when open */
.burger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger-btn.open span:nth-child(2) {
  opacity: 0;
}
.burger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(4, 9, 87, 0.3);
  z-index: 150;
}

.sidebar-overlay.visible {
  display: block;
}

/* ============================================================
   PRINZIPIEN PAGE
   ============================================================ */

.prinzipien-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-600);
  padding: calc(var(--space-800) * 4) calc(var(--space-800) * 2);
}

.prinzipien-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-700);
}

.prinzipien-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  color: var(--color-primary-500);
}

.prinzipien-hero-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  max-width: 520px;
}

.prinzipien-hero-placeholder {
  background-color: var(--color-primary-500);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.prinzipien-hero-placeholder #prinzipienLottie {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* ── Accordion ── */

.prinzipien-accordion {
  padding: 0 calc(var(--space-800) * 2);
  padding-bottom: calc(var(--space-800) * 4);
}

.accordion-item {
  border-top: 2px solid var(--color-primary-500);
}

.accordion-item:last-child {
  border-bottom: 2px solid var(--color-primary-500);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-700);
  padding: var(--space-700) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.accordion-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  color: var(--color-primary-500);
}

.accordion-title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  color: var(--color-primary-500);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  min-width: 0;
}

.accordion-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--color-primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s ease;
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.accordion-icon::before {
  width: 16px;
  height: 2px;
}

.accordion-icon::after {
  width: 2px;
  height: 16px;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.accordion-panel {
  overflow: hidden;
}

.accordion-panel-inner {
  padding: var(--space-700) 0 calc(var(--space-800) * 2);
  padding-left: calc(48px + var(--space-700));
  padding-right: calc(var(--space-800) * 2);
}

.prinzip-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-800);
}

.prinzip-intro-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-800) * 3.5);
}

.prinzip-illustration {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  background-color: var(--color-primary-500);
  border-radius: 8px;
  color: var(--color-secondary-100);
  pointer-events: none;
  padding: 24px;
  box-sizing: border-box;
}

.prinzip-illustration svg * {
  opacity: 1 !important;
}

.accordion-placeholder {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

/* ── Prinzip content ── */

.prinzip-desc {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
  max-width: 680px;
}

.prinzip-warum {
  border-left: 4px solid var(--color-primary-300);
  padding-left: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.prinzip-warum-title {
  font-family: var(--font-heading);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line-height);
  color: var(--color-primary-500);
}

.prinzip-warum-text {
  font-size: var(--text-paragraph-md-size);
  line-height: var(--text-paragraph-md-line-height);
  color: var(--color-accent-700);
}

/* ── Segmented control ── */

.prinzip-comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-500);
}

.comparison-label {
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-500);
}

.segmented-control {
  display: inline-flex;
  background-color: var(--color-primary-500);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.seg-btn {
  padding: var(--space-300) var(--space-700);
  border-radius: 999px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-100);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seg-btn.is-active {
  background-color: var(--color-secondary-100);
  color: var(--color-primary-500);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Example card ── */

.example-card {
  position: relative;
  background-color: var(--color-primary-500);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  padding: var(--space-700);
}

/* All text inside the example card inherits cream */
.example-card * {
  color: var(--color-secondary-100) !important;
  border-color: rgba(247, 243, 241, 0.3);
}

/* Input fields, dialogs, info cards get a lighter blue tint */
.example-card .ui-field-input,
.example-card .ui-field-textarea,
.example-card .ui-dialog,
.example-card .ui-info-card,
.example-card .ui-confirmation {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(247, 243, 241, 0.4);
}

/* Buttons keep their own contrast */
.example-card .ui-btn--primary {
  background-color: var(--color-secondary-100);
  color: var(--color-primary-500) !important;
  border-color: transparent;
}

.example-card .ui-btn--ghost {
  border-color: rgba(247, 243, 241, 0.5);
  background: none;
}

/* Error/success notifications keep colour but adapt text */
.example-card .ui-notification--error {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(247, 243, 241, 0.3);
}
.example-card .ui-notification--success {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(247, 243, 241, 0.3);
}
.example-card .ui-notif-icon {
  background-color: rgba(247, 243, 241, 0.2);
}

/* Step circles */
.example-card .ui-step {
  border-color: rgba(247, 243, 241, 0.4);
}
.example-card .ui-step--active {
  background-color: var(--color-secondary-100);
  color: var(--color-primary-500) !important;
  border-color: var(--color-secondary-100);
}
.example-card .ui-step-line {
  background-color: rgba(247, 243, 241, 0.3);
}
.example-card .ui-step-line--done {
  background-color: var(--color-secondary-100);
}

/* Confirmation icon */
.example-card .ui-confirmation-icon {
  background-color: rgba(247, 243, 241, 0.2);
}

/* Error field border override */
.example-card .ui-field-input--error {
  border-color: rgba(247, 243, 241, 0.6) !important;
}

/* Error and hint text in cream on blue background */
.example-card .ui-field-error,
.example-card .ui-field-hint,
.example-card .ui-notif-text,
.example-card .ui-notif-title,
.example-card .ui-progress-msg,
.example-card .ui-confirmation-detail,
.example-card .ui-info-dense,
.example-card .ui-plain-message {
  color: var(--color-secondary-100) !important;
  opacity: 0.85;
}

.example-state {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: translateY(0);
}

.example-state.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.example-state.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Pills stagger animation */
@keyframes pill-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prinzip-patterns .pill {
  opacity: 0;
  transform: translateY(22px);
}

.prinzip-patterns.is-animating .pill {
  animation: pill-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.prinzip-patterns.is-animating .pill:nth-child(1) { animation-delay: 0ms; }
.prinzip-patterns.is-animating .pill:nth-child(2) { animation-delay: 150ms; }
.prinzip-patterns.is-animating .pill:nth-child(3) { animation-delay: 300ms; }
.prinzip-patterns.is-animating .pill:nth-child(4) { animation-delay: 450ms; }
.prinzip-patterns.is-animating .pill:nth-child(5) { animation-delay: 600ms; }
.prinzip-patterns.is-animating .pill:nth-child(6) { animation-delay: 750ms; }

/* ── UI frame (mock container) ── */

.ui-frame {
  padding: var(--space-700);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

/* ── UI notification mock ── */

.ui-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-500);
  padding: var(--space-600) var(--space-700);
  border-radius: 4px;
  width: 100%;
  max-width: 480px;
}

.ui-notification--error {
  background-color: var(--color-error-100);
  border: 2px solid var(--color-error-400);
}

.ui-notification--success {
  background-color: var(--color-success-100);
  border: 2px solid var(--color-success-400);
}

.ui-notif-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.ui-notification--error .ui-notif-icon {
  background-color: var(--color-error-400);
  color: white;
}

.ui-notification--success .ui-notif-icon {
  background-color: var(--color-success-400);
  color: white;
}

.ui-notif-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.ui-notif-title {
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-800);
}

.ui-notif-text {
  font-size: var(--text-paragraph-sm-size);
  line-height: var(--text-paragraph-sm-line-height);
  color: var(--color-accent-600);
}

/* ── UI form mock ── */

.ui-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  width: 100%;
  max-width: 360px;
}

.ui-field-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.ui-field-label {
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-700);
}

.ui-field-input {
  padding: var(--space-300) var(--space-400);
  border: 2px solid var(--color-secondary-500);
  border-radius: 4px;
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-700);
  background: white;
}

.ui-field-input--focus {
  border-color: var(--color-primary-500);
}

.ui-field-hint {
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-500);
  line-height: var(--text-paragraph-sm-line-height);
}

.ui-btn {
  padding: var(--space-300) var(--space-600);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ui-btn:hover { transform: translateY(-2px); }
.ui-btn:active { transform: translateY(0); }
.ui-btn--primary:hover { background-color: var(--color-primary-600); }
.ui-btn--ghost:hover { border-color: var(--color-accent-600); }

.ui-btn--primary {
  background-color: var(--color-primary-500);
  color: white;
}

.ui-btn--ghost {
  background: none;
  border: 2px solid var(--color-secondary-500);
  color: var(--color-accent-600);
}

.ui-btn--danger {
  background-color: var(--color-error-400);
  color: white;
}

/* ── UI progress mock ── */

.ui-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  width: 100%;
  max-width: 400px;
}

.ui-progress-label {
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-700);
}

.ui-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.ui-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-paragraph-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary-700);
  flex-shrink: 0;
}

.ui-step--done {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: white;
}

.ui-step--active {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.ui-step-line {
  flex: 1;
  height: 2px;
  background-color: var(--color-secondary-400);
}

.ui-step-line--done {
  background-color: var(--color-primary-500);
}

.ui-step-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-paragraph-xs-size);
  color: var(--color-accent-500);
}

/* ── UI dialog mock ── */

.ui-dialog {
  background: white;
  border-radius: 4px;
  padding: var(--space-700) var(--space-800);
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.ui-dialog-title {
  font-family: var(--font-heading);
  font-size: var(--text-h5-size);
  color: var(--color-accent-800);
}

.ui-dialog-text {
  font-size: var(--text-paragraph-xs-size);
  line-height: var(--text-paragraph-xs-line-height);
  color: var(--color-accent-600);
}

.ui-dialog-actions {
  display: flex;
  gap: var(--space-300);
  justify-content: flex-end;
}

/* ── UI info card mock ── */

.ui-info-card {
  background: white;
  border-radius: 4px;
  padding: var(--space-600) var(--space-700);
  width: 100%;
  max-width: 460px;
}

.ui-info-dense {
  font-size: var(--text-paragraph-xs-size);
  line-height: var(--text-paragraph-xs-line-height);
  color: var(--color-accent-600);
}

.ui-info-card--structured {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.ui-info-title {
  font-family: var(--font-heading);
  font-size: var(--text-h5-size);
  color: var(--color-primary-500);
  margin-bottom: var(--space-200);
}

.ui-info-row {
  display: flex;
  gap: var(--space-500);
  padding: var(--space-300) 0;
  border-bottom: 2px solid var(--color-secondary-300);
  font-size: var(--text-paragraph-xs-size);
}

.ui-info-row:last-child {
  border-bottom: none;
}

.ui-info-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-700);
  flex-shrink: 0;
  width: 90px;
}

.ui-info-value {
  color: var(--color-accent-600);
}

/* ── UI plain message mock ── */

.ui-plain-message {
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-600);
}

/* ── Pattern library ── */

.prinzip-patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-700);
}

.pattern-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
}

.pattern-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  font-family: var(--font-heading);
  font-size: var(--text-paragraph-md-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-500);
}

.pattern-col-header--do { color: var(--color-primary-500); }
.pattern-col-header--dont { color: var(--color-primary-500); }

/* ── UI mock extensions ── */

.ui-field-input--error {
  border-color: var(--color-error-500) !important;
  color: var(--color-accent-900);
}

.ui-field-error {
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-error-600);
  line-height: 1.5;
  margin-top: var(--space-200);
}

.ui-field-input--placeholder {
  color: var(--color-accent-400);
}

.ui-field-textarea {
  border: 2px solid var(--color-secondary-400);
  border-radius: 4px;
  padding: var(--space-400) var(--space-500);
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-700);
  background: var(--color-surface-default);
  min-height: 64px;
  line-height: 1.5;
}

.ui-progress-msg {
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-600);
  line-height: 1.6;
  padding-top: var(--space-400);
}

.ui-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-400);
  padding: var(--space-800) var(--space-700);
  text-align: center;
}

.ui-confirmation-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-success-100);
  color: var(--color-success-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.ui-confirmation-title {
  font-size: var(--text-paragraph-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-900);
}

.ui-confirmation-detail {
  font-size: var(--text-paragraph-xs-size);
  color: var(--color-accent-500);
  line-height: 1.5;
}

.ui-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding-left: var(--space-600);
  font-size: var(--text-paragraph-sm-size);
  color: var(--color-accent-700);
  line-height: 1.6;
  list-style: decimal;
}

.ui-icon-only {
  font-size: 18px;
  color: var(--color-error-500);
  padding-top: var(--space-300);
}

.pattern-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.pattern-pills {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.pill {
  display: block;
  padding: var(--space-300) var(--space-500);
  border-radius: 4px;
  font-size: var(--text-paragraph-sm-size);
  line-height: 1.5;
}

.pill--do {
  background-color: rgba(22, 163, 74, 0.06);
  border: 2px solid var(--color-success-600);
  color: var(--color-success-600);
}

.pill--dont {
  background-color: rgba(220, 38, 38, 0.06);
  border: 2px solid var(--color-error-600);
  color: var(--color-error-600);
}

/* ── Accordion panel inner spacing ── */

.accordion-panel-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-800) * 3.5);
  padding-bottom: calc(var(--space-800) * 3.5);
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    top: 56px;
    height: calc(100vh - 56px);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* ── Global font scale down ── */
  :root {
    --text-paragraph-md-size: 18px;
    --text-paragraph-md-line-height: 26px;
    --text-paragraph-sm-size: 16px;
    --text-paragraph-sm-line-height: 24px;
    --text-paragraph-xs-size: 14px;
    --text-paragraph-xs-line-height: 20px;
  }

  /* ── Global horizontal padding reduction ── */
  .prinzipien-hero {
    grid-template-columns: 1fr;
    padding: var(--space-700) var(--space-500) var(--space-600);
  }

  .prinzipien-hero-content {
    padding-left: 0;
    padding-right: 0;
  }

  .prinzipien-hero-title {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
  }

  .page-content,
  .prinzipien-accordion {
    padding-left: var(--space-500);
    padding-right: var(--space-500);
  }

  /* ── Accordion ── */
  .accordion-trigger {
    padding-left: var(--space-400);
    padding-right: var(--space-400);
  }

  .accordion-panel-inner {
    padding-left: var(--space-400);
    padding-right: var(--space-400);
  }

  .prinzip-intro {
    flex-direction: column-reverse;
  }

  .prinzip-illustration {
    display: none;
  }

  /* ── Pattern grid ── */
  .prinzip-patterns {
    grid-template-columns: 1fr;
  }

  /* ── Example card ── */
  .example-card {
    overflow: hidden;
    padding: var(--space-500);
    max-width: 100%;
  }

  .example-card * {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .ui-frame {
    padding: var(--space-400);
    min-height: unset;
  }

  .ui-notification,
  .ui-form-group,
  .ui-progress-wrap,
  .ui-dialog,
  .ui-info-card {
    max-width: 100%;
    width: 100%;
  }
}

/* ── Scroll to top button ── */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary-500);
  color: var(--color-secondary-100);
  border: 2px solid var(--color-secondary-100);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59, 90, 168, 0.3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  z-index: 200;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  background-color: var(--color-primary-600);
  transform: translateY(-2px);
}

.scroll-top-btn:active {
  transform: translateY(0);
}