/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

.visible {
  visibility: visible;
}

.fixed\! {
  position: fixed !important;
}

.container {
  width: 100%;
}

.mx-auto {
  margin-inline: auto;
}

.contents {
  display: contents;
}

.list-item {
  display: list-item;
}

.table {
  display: table;
}

.flex-grow, .grow {
  flex-grow: 1;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.underline {
  text-decoration-line: underline;
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}

.transition-none {
  transition-property: none;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-family-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  overflow-x: hidden;
}

.focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.modal-open {
  overflow: hidden;
}

.loading-container {
  min-height: 200px;
  padding: var(--space-8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.loading-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

@keyframes spin {
  0% {
    transform: translateY(-50%)rotate(0);
  }

  to {
    transform: translateY(-50%)rotate(360deg);
  }
}

.error-container {
  text-align: center;
  min-height: 400px;
  color: var(--color-text-secondary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.error-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
  margin-bottom: var(--space-2);
}

.error-subtext {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 400px;
  line-height: var(--line-height-normal);
}

.no-results {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.container, .main-content {
  margin: 0;
  padding: 0;
}

.section {
  padding: var(--space-24) 0;
}

.card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.main-content {
  flex-direction: column;
  flex: 1;
  margin: 2rem 0;
  display: flex;
}

.container {
  width: auto;
  max-width: 1400px;
  padding: var(--space-4) var(--space-16) 0 var(--space-16);
  margin: 0 2rem;
}

.container-sm {
  max-width: 640px;
}

.container-md {
  max-width: 768px;
}

.container-lg {
  max-width: 1024px;
}

.container-xl {
  max-width: 1280px;
}

.container-full {
  max-width: none;
}

.grid {
  gap: var(--space-6);
  display: grid;
}

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

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

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

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

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

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

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

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid-gap-sm {
  gap: var(--space-2);
}

.grid-gap-md {
  gap: var(--space-4);
}

.grid-gap-lg {
  gap: var(--space-6);
}

.grid-gap-xl {
  gap: var(--space-8);
}

.grid-item {
  min-width: 0;
}

.grid-item-1 {
  grid-column: span 1;
}

.grid-item-2 {
  grid-column: span 2;
}

.grid-item-3 {
  grid-column: span 3;
}

.grid-item-4 {
  grid-column: span 4;
}

.grid-item-5 {
  grid-column: span 5;
}

.grid-item-6 {
  grid-column: span 6;
}

.grid-item-12 {
  grid-column: span 12;
}

.flex-inline {
  display: inline-flex;
}

.flex-col {
  flex-direction: column;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

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

.items-center {
  align-items: center;
}

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

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.content-start {
  align-content: flex-start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-initial {
  flex: 0 auto;
}

.flex-none {
  flex: none;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.m-auto {
  margin: auto;
}

.static {
  position: static;
}

.min-w-0 {
  min-width: 0;
}

.min-h-0 {
  min-height: 0;
}

.max-w-none {
  max-width: none;
}

.max-h-none {
  max-height: none;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

@media (width <= 768px) {
  .container {
    padding: 0 var(--space-4);
  }

  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    grid-template-columns: 1fr;
  }

  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (width <= 480px) {
  .container {
    padding: 0 var(--space-3);
  }

  .grid-auto-fit, .grid-auto-fill {
    grid-template-columns: 1fr;
  }
}

.page-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  letter-spacing: var(--letter-spacing-tight);
}

.page-subtitle {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 600px;
}

.section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  letter-spacing: var(--letter-spacing-tight);
}

.section-subtitle {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 500px;
}

.card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.card-subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.small-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.mini-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.body-text {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.body-text-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.body-text-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.link-primary {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  border-bottom: 1px solid #0000;
  text-decoration: none;
}

.link-primary:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

.link-primary:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.link-secondary {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
  transition: all var(--transition-base);
  text-decoration: none;
}

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

.link-secondary:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.link-underline {
  color: var(--color-primary);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-primary-light);
  -webkit-text-decoration-color: var(--color-primary-light);
  text-decoration-color: var(--color-primary-light);
  text-underline-offset: 2px;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
}

.link-underline:hover {
  color: var(--color-primary-dark);
  -webkit-text-decoration-color: var(--color-primary);
  -webkit-text-decoration-color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-white {
  color: var(--color-text-white);
}

.text-brand {
  color: var(--color-primary);
}

.text-accent {
  color: var(--color-secondary);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.tracking-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
  letter-spacing: var(--letter-spacing-wide);
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-disc {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style: outside;
}

.list-circle {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style: circle;
}

.list-decimal {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style: decimal;
}

.list-roman {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style: upper-roman;
}

.list-item {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
}

.list-item:last-child {
  margin-bottom: 0;
}

.blockquote {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-style: italic;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  border-left: 4px solid var(--color-primary-light);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  position: relative;
}

.blockquote:before {
  content: "\"";
  font-size: var(--font-size-4xl);
  color: var(--color-primary-light);
  left: var(--space-2);
  font-family: var(--font-family-heading);
  position: absolute;
  top: -10px;
}

.blockquote-cite {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
  display: block;
}

.code-inline {
  font-family: Monaco, Menlo, Ubuntu Mono, monospace;
  font-size: var(--font-size-sm);
  background: var(--color-background-light);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}

.code-block {
  font-family: Monaco, Menlo, Ubuntu Mono, monospace;
  font-size: var(--font-size-sm);
  background: var(--color-background-light);
  color: var(--color-text-primary);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border-light);
  margin: var(--space-4) 0;
  overflow-x: auto;
}

@media (width <= 768px) {
  .page-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
  }

  .page-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
  }

  .section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
  }

  .card-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
  }

  .body-text-large {
    font-size: var(--font-size-base);
  }

  .blockquote {
    font-size: var(--font-size-base);
    padding-left: var(--space-4);
  }
}

@media (width <= 480px) {
  .page-title {
    font-size: var(--font-size-2xl);
  }

  .section-title {
    font-size: var(--font-size-xl);
  }

  .card-title {
    font-size: var(--font-size-base);
  }
}

.btn {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
  border: none;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-white);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text-white);
  border: 1px solid var(--color-secondary);
}

.btn-secondary:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-outline {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  background: none;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-ghost {
  color: var(--color-text-secondary);
  background: none;
  border: 1px solid #0000;
}

.btn-ghost:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
  border-color: var(--color-border-light);
}

.btn-ghost:active {
  background: var(--color-border-light);
}

.btn-danger {
  background: var(--color-error);
  color: var(--color-text-white);
  border: 1px solid var(--color-error);
}

.btn-danger:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-danger:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-success {
  background: var(--color-success);
  color: var(--color-text-white);
  border: 1px solid var(--color-success);
}

.btn-success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-success:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  min-height: 32px;
}

.btn-md {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  min-height: 40px;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-lg);
  min-height: 48px;
}

.btn-xl {
  padding: var(--space-5) var(--space-8);
  font-size: var(--font-size-lg);
  min-height: 56px;
}

.btn-loading {
  color: #0000;
  position: relative;
}

.btn-loading:after {
  content: "";
  border: 2px solid #0000;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  animation: 1s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.btn-icon {
  padding: var(--space-2);
  border-radius: var(--radius-base);
  min-width: 40px;
  min-height: 40px;
}

.btn-icon.btn-sm {
  min-width: 32px;
  min-height: 32px;
  padding: var(--space-1);
}

.btn-icon.btn-lg {
  min-width: 48px;
  min-height: 48px;
  padding: var(--space-3);
}

.btn-group {
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  overflow: hidden;
}

.btn-group .btn {
  border-right: 1px solid #fff3;
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-base);
  border-bottom-left-radius: var(--radius-base);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-base);
  border-bottom-right-radius: var(--radius-base);
  border-right: none;
}

.btn-group .btn:hover {
  box-shadow: none;
  transform: none;
}

.btn-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-white);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  box-shadow: var(--shadow-lg);
  border: none;
  position: relative;
  overflow: hidden;
}

.btn-cta:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.btn-cta:hover:before {
  left: 100%;
}

.btn-cta:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.btn-cta:active {
  box-shadow: var(--shadow-md);
  transform: translateY(0);
}

.btn-fab {
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--color-primary);
  width: 56px;
  height: 56px;
  color: var(--color-text-white);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: all var(--transition-base);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
}

.btn-fab:hover {
  box-shadow: var(--shadow-xl);
  transform: scale(1.1);
}

.btn-fab:active {
  transform: scale(.95);
}

@media (width <= 768px) {
  .btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
    min-height: 44px;
  }

  .btn-xl {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
    min-height: 48px;
  }

  .btn-fab {
    width: 48px;
    height: 48px;
    bottom: var(--space-4);
    right: var(--space-4);
  }
}

@media (width <= 480px) {
  .btn {
    justify-content: center;
    width: 100%;
  }

  .btn-group {
    width: 100%;
  }

  .btn-group .btn {
    flex: 1;
  }
}

.form-container {
  max-width: 600px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #fff;
  margin: 0 auto;
}

.form-section {
  margin-bottom: var(--space-8);
}

.form-group {
  margin-bottom: var(--space-4);
  flex: 1;
}

.form-group.full-width {
  flex: 100%;
}

.form-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
  display: block;
}

.form-label-helper {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: var(--line-height-normal);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  line-height: var(--line-height-normal);
}

.form-input:focus {
  border-color: var(--color-primary);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.form-input:hover:not(:focus) {
  border-color: var(--color-border-medium);
}

.form-input::placeholder {
  color: var(--color-text-secondary);
  opacity: .7;
}

.form-input-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.form-input-lg {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-lg);
}

.form-input.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px #dc26261a;
}

.form-input.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px #0596691a;
}

.form-input:disabled {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: .6;
}

.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  line-height: var(--line-height-relaxed);
  resize: vertical;
}

.form-textarea:focus {
  border-color: var(--color-primary);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.form-textarea:hover:not(:focus) {
  border-color: var(--color-border-medium);
}

.form-textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: .7;
}

.form-textarea-sm {
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.form-textarea-lg {
  min-height: 160px;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-lg);
}

.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b6b6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  padding-right: calc(var(--space-4)  + 20px);
  background-repeat: no-repeat;
  background-size: 16px;
}

.form-select:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.form-select:hover:not(:focus) {
  border-color: var(--color-border-medium);
}

.form-select:disabled {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: .6;
}

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

.checkbox-item {
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  display: flex;
}

.checkbox-input {
  appearance: none;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 18px;
  height: 18px;
  transition: all var(--transition-base);
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.checkbox-input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-input:checked:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 6px;
  height: 10px;
  position: absolute;
  top: 2px;
  left: 5px;
  transform: rotate(45deg);
}

.checkbox-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.checkbox-input:hover:not(:checked) {
  border-color: var(--color-border-medium);
}

.checkbox-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  cursor: pointer;
}

.checkbox-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

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

.radio-item {
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  display: flex;
}

.radio-input {
  appearance: none;
  border: 2px solid var(--color-border-light);
  cursor: pointer;
  width: 18px;
  height: 18px;
  transition: all var(--transition-base);
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.radio-input:checked {
  border-color: var(--color-primary);
}

.radio-input:checked:after {
  content: "";
  background: var(--color-primary);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.radio-input:hover:not(:checked) {
  border-color: var(--color-border-medium);
}

.radio-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  cursor: pointer;
}

.radio-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.form-error:before {
  content: "⚠";
  font-size: var(--font-size-xs);
}

.form-success {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.form-success:before {
  content: "✓";
  font-size: var(--font-size-xs);
}

.form-actions {
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
}

.form-actions .btn {
  flex: 1;
}

.form-actions .btn-secondary {
  flex: none;
}

.search-input {
  width: 100%;
  position: relative;
}

.search-input .form-input {
  padding-left: calc(var(--space-4)  + 20px);
}

.search-icon {
  left: var(--space-4);
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.file-upload {
  cursor: pointer;
  width: 100%;
  display: inline-block;
  position: relative;
}

.file-upload input[type="file"] {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
}

.file-upload-label {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 2px dashed var(--color-border-light);
  border-radius: var(--radius-base);
  background: var(--color-background-light);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
  min-height: 120px;
  display: flex;
}

.file-upload:hover .file-upload-label {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #6629320d;
}

.file-upload.dragover .file-upload-label {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #6629321a;
}

@media (width <= 768px) {
  .form-container {
    padding: var(--space-4);
    margin: 0 var(--space-4);
  }

  .form-row {
    gap: var(--space-3);
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }
}

@media (width <= 480px) {
  .form-container {
    padding: var(--space-3);
    margin: 0 var(--space-2);
  }

  .form-input, .form-textarea, .form-select {
    font-size: var(--font-size-base);
  }
}

.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
  background: #fff;
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.card-default {
  background: #fff;
}

.card-elevated {
  box-shadow: var(--shadow-lg);
}

.card-elevated:hover {
  box-shadow: var(--shadow-xl);
}

.card-bordered {
  border: 2px solid var(--color-border-light);
  box-shadow: none;
}

.card-bordered:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.card-outlined {
  border: 2px solid var(--color-border-light);
  box-shadow: none;
  background: none;
}

.card-outlined:hover {
  border-color: var(--color-primary);
  background: #66293205;
}

.card-interactive {
  cursor: pointer;
  user-select: none;
}

.card-interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-interactive:active {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-background-light);
}

.card-header-compact {
  padding: var(--space-4);
}

.card-header-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

.card-header-subtitle {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0 0;
  line-height: var(--line-height-normal);
}

.card-body {
  padding: var(--space-6);
}

.card-body-compact {
  padding: var(--space-4);
}

.card-body-spacious {
  padding: var(--space-8);
}

.card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background-light);
}

.card-footer-compact {
  padding: var(--space-4);
}

.card-image {
  position: relative;
  overflow: hidden;
}

.card-image img {
  object-fit: cover;
  width: 100%;
  height: 200px;
  transition: transform var(--transition-base);
}

.card-image:hover img {
  transform: scale(1.05);
}

.card-image-overlay {
  color: #fff;
  padding: var(--space-6);
  background: linear-gradient(#0000, #000000b3);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.card-image-overlay h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2) 0;
}

.card-image-overlay p {
  font-size: var(--font-size-sm);
  opacity: .9;
  margin: 0;
}

.card-stats {
  text-align: center;
  padding: var(--space-6);
}

.card-stats-number {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

.card-stats-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0 0;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: var(--font-weight-medium);
}

.card-feature {
  text-align: center;
  padding: var(--space-8);
}

.card-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: var(--font-size-2xl);
  justify-content: center;
  align-items: center;
  display: flex;
}

.card-feature-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.card-feature-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.card-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  display: grid;
}

.card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

.card-grid-compact {
  gap: var(--space-4);
}

.card-grid-spacious {
  gap: var(--space-8);
}

.card-badge {
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  z-index: 10;
  position: absolute;
}

.card-badge.secondary {
  background: var(--color-secondary);
}

.card-badge.success {
  background: var(--color-success);
}

.card-badge.warning {
  background: var(--color-warning);
}

.card-badge.danger {
  background: var(--color-error);
}

.card-actions {
  gap: var(--space-2);
  margin-top: var(--space-4);
  display: flex;
}

.card-actions .btn {
  flex: 1;
}

.card-actions .btn-secondary {
  flex: none;
}

.card-loading {
  position: relative;
  overflow: hidden;
}

.card-loading:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff6, #0000);
  width: 100%;
  height: 100%;
  animation: 1.5s infinite shimmer;
  position: absolute;
  top: 0;
  left: -100%;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

.card-sm {
  max-width: 300px;
}

.card-md {
  max-width: 400px;
}

.card-lg {
  max-width: 500px;
}

.card-xl {
  max-width: 600px;
}

.card-full {
  max-width: none;
}

@media (width <= 768px) {
  .card-grid-2, .card-grid-3, .card-grid-4 {
    grid-template-columns: 1fr;
  }

  .card-header, .card-body, .card-footer {
    padding: var(--space-4);
  }

  .card-body-spacious, .card-feature {
    padding: var(--space-6);
  }

  .card-stats {
    padding: var(--space-4);
  }

  .card-stats-number {
    font-size: var(--font-size-3xl);
  }
}

@media (width <= 480px) {
  .card-grid {
    gap: var(--space-4);
  }

  .card-header, .card-body, .card-footer {
    padding: var(--space-3);
  }

  .card-feature {
    padding: var(--space-4);
  }

  .card-feature-icon {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-xl);
  }

  .card-feature-title {
    font-size: var(--font-size-lg);
  }
}

.nav-container {
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-light);
  transition: all var(--transition-base), top .35s cubic-bezier(.4, 0, .2, 1);
  background: #fffffff2;
  position: fixed;
  left: 0;
  right: 0;
}

.nav-container.scrolled {
  box-shadow: var(--shadow-md);
  background: #fffffffa;
}

.nav-content {
  max-width: 1400px;
  padding: 0 var(--space-4);
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  height: 70px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.nav-logo {
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  color: var(--color-text-primary);
  background: none;
  border: none;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.nav-logo:hover {
  background: var(--color-background-light);
  transform: translateY(-1px);
}

.nav-logo-image {
  border-radius: var(--radius-sm);
  width: auto;
  height: 50px;
  transition: all var(--transition-base);
}

.nav-logo:hover .nav-logo-image {
  transform: scale(1.02);
}

.nav-logo-text {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-left: var(--space-2);
}

.nav-logo-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
  margin-left: var(--space-1);
}

.nav-links {
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-link {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  background: none;
  border: none;
  flex-shrink: 0;
  min-width: fit-content;
  text-decoration: none;
  display: flex;
  position: relative;
}

.nav-link:hover {
  color: var(--color-secondary);
  border-radius: var(--radius-md);
  background: #ffffff1a;
}

.nav-link.active {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), .1);
  border: 1px solid rgba(var(--color-primary-rgb), .2);
}

.nav-link.active:hover {
  background: rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .3);
}

.nav-link.active:after {
  content: "";
  background: var(--color-primary);
  border-radius: 1px;
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.nav-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.dropdown-arrow {
  transition: transform var(--transition-base);
  margin-left: var(--space-1);
  flex-shrink: 0;
  font-size: 12px;
}

.nav-link:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.resources-dropdown-container {
  position: relative;
}

.resources-dropdown {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  min-width: 280px;
  transition: all var(--transition-base);
  z-index: 1001;
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-8px);
}

.resources-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-align: left;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  display: flex;
}

.dropdown-item:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

.dropdown-item.active {
  background: var(--color-primary-light);
  color: #fff;
}

.dropdown-item.active:hover {
  background: var(--color-primary);
}

.dropdown-icon {
  font-size: var(--font-size-base);
  text-align: center;
  flex-shrink: 0;
  width: 20px;
}

.nav-search-container {
  right: var(--space-16);
  transition: all var(--transition-base);
  opacity: 0;
  z-index: 1002;
  width: 0;
  position: absolute;
  top: 50%;
  overflow: hidden;
  transform: translateY(-50%);
}

.nav-actions .nav-search-container.active {
  opacity: 1;
  width: 400px;
  right: var(--space-16);
}

.nav-search-form {
  align-items: center;
  width: 100%;
  display: flex;
}

.nav-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  background: var(--color-bg-primary);
  transition: all var(--transition-base);
  outline: none;
}

.nav-search-input:focus {
  border-color: var(--color-border-light);
  box-shadow: none;
}

.nav-search-input::placeholder {
  color: var(--color-text-secondary);
  opacity: .7;
}

.search-spinner {
  right: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.nav-search-results {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  z-index: 1001;
  max-height: 300px;
  margin-top: var(--space-1);
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.nav-search-result {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--transition-base);
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  background: none;
  display: flex;
}

.nav-search-result:last-child {
  border-bottom: none;
}

.nav-search-result:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

.result-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.result-content {
  gap: var(--space-1);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.result-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.result-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.result-type {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.user-menu-container {
  margin-left: var(--space-2);
  flex-shrink: 0;
  align-items: center;
  display: flex;
  position: relative;
}

.user-avatar {
  background: var(--color-primary-light);
  color: #fff;
  cursor: pointer;
  width: 40px;
  height: 40px;
  transition: all var(--transition-base);
  border: 2px solid #0000;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.user-avatar:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.user-avatar.has-image {
  background: none;
  overflow: hidden;
}

.user-photo {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.user-initials {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.notification-badge {
  min-width: 18px;
  height: 18px;
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-primary-dark);
  z-index: 3;
  background: #fffffff2;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
  box-shadow: 0 2px 4px #0000001a;
}

.notification-badge.single-digit {
  width: 18px;
  min-width: 18px;
}

.subscription-badge {
  background: var(--color-accent);
  width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  z-index: 2;
  border: 2px solid #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 2px 4px #0000001a;
}

.subscription-badge.founding {
  background: var(--color-secondary);
}

.user-menu {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  min-width: 280px;
  margin-top: var(--space-2);
  z-index: 1001;
  background: #fff;
  position: absolute;
  top: 100%;
  right: 0;
  overflow: hidden;
}

.user-menu-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-background-light);
}

.user-menu-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
}

.user-menu-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.user-menu-status {
  font-size: var(--font-size-xs);
}

.status-anonymous {
  color: var(--color-text-secondary);
}

.status-founding {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.status-premium {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.status-free {
  color: var(--color-text-secondary);
}

.user-menu-actions {
  padding: var(--space-2);
}

.user-menu-item {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  text-align: left;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  display: flex;
}

.user-menu-item:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

.user-menu-item.upgrade-item {
  background: var(--color-primary-light);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

.user-menu-item.upgrade-item:hover {
  background: var(--color-primary);
}

.sign-up-container {
  flex-shrink: 0;
}

.sign-up-button {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
}

.sign-up-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.hamburger {
  cursor: pointer;
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  transition: all var(--transition-base);
  z-index: 1002;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: space-around;
  padding: 0;
  display: none;
}

.hamburger:hover {
  background: var(--color-background-light);
}

.hamburger span {
  background: var(--color-text-primary);
  width: 100%;
  height: 3px;
  transition: all var(--transition-base);
  border-radius: 2px;
}

.mobile-nav-overlay {
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100vh;
  transition: all var(--transition-base);
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-links {
  width: 100%;
  max-width: 320px;
  height: 100vh;
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  transition: right var(--transition-base);
  z-index: 1000;
  align-items: stretch;
  gap: var(--space-2);
  background: #fff;
  flex-direction: column;
  margin: 0;
  list-style: none;
  position: fixed;
  top: 0;
  right: -100%;
  overflow-y: auto;
}

.mobile-nav-overlay.active .mobile-nav-links {
  right: 0;
}

.mobile-nav-link {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
  width: 100%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  display: flex;
}

.mobile-nav-link:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

.mobile-nav-link.active {
  background: var(--color-primary-light);
  color: #fff;
}

.mobile-nav-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.mobile-dropdown-arrow {
  transition: transform var(--transition-base);
  margin-left: auto;
  font-size: 12px;
}

.mobile-nav-link:hover .mobile-dropdown-arrow {
  transform: rotate(180deg);
}

.mobile-search-item {
  margin-bottom: var(--space-4);
}

.mobile-search-form {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  display: flex;
}

.mobile-search-input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  background: var(--color-bg-primary);
  flex: 1;
}

.mobile-search-btn {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-base);
  border: none;
}

.mobile-search-results {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
}

.mobile-search-result {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-base);
  background: none;
  border: none;
  display: flex;
}

.mobile-search-result:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
}

@media (width >= 1400px) {
  .nav-content {
    padding: 0 var(--space-6);
    gap: var(--space-4);
  }

  .nav-links {
    gap: var(--space-4);
  }

  .nav-link {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
  }

  .nav-actions {
    margin-left: var(--space-4);
    gap: var(--space-3);
  }

  .nav-action-btn {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-xl);
  }

  .nav-actions .nav-search-container.active {
    width: 500px;
    right: 11rem;
  }

  .nav-logo-image {
    height: 50px;
  }

  .user-menu-container {
    margin-left: var(--space-3);
  }

  .user-avatar {
    width: 42px;
    height: 42px;
  }

  .notification-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    top: -4px;
    right: -4px;
  }

  .subscription-badge {
    min-width: 14px;
    height: 14px;
    font-size: 8px;
    top: -2px;
    right: -2px;
  }
}

@media (width >= 1200px) {
  .nav-content {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .nav-links {
    gap: var(--space-2);
  }

  .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-lg);
  }

  .nav-actions {
    margin-left: var(--space-2);
    gap: var(--space-2);
  }

  .nav-action-btn {
    width: 38px;
    height: 38px;
    font-size: var(--font-size-base);
  }

  .nav-actions .nav-search-container.active {
    width: 450px;
    right: 10rem;
  }

  .nav-logo-image {
    height: 50px;
  }

  .user-menu-container {
    margin-left: var(--space-2);
  }

  .user-avatar {
    width: 38px;
    height: 38px;
  }

  .notification-badge {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    top: -3px;
    right: -3px;
  }

  .subscription-badge {
    min-width: 13px;
    height: 13px;
    font-size: 7px;
    top: -2px;
    right: -2px;
  }
}

@media (width >= 1024px) {
  .nav-content {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .nav-links {
    gap: var(--space-2);
  }

  .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-md);
  }

  .nav-actions {
    margin-left: var(--space-2);
    gap: var(--space-2);
  }

  .nav-action-btn {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-base);
  }

  .nav-actions .nav-search-container.active {
    width: 420px;
    right: 10rem;
  }

  .nav-icon, .nav-logo-text {
    font-size: var(--font-size-base);
  }

  .nav-logo-image {
    height: 50px;
  }

  .user-menu-container {
    margin-left: var(--space-2);
  }

  .user-avatar {
    width: 36px;
    height: 36px;
  }

  .notification-badge {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    top: -3px;
    right: -3px;
  }

  .subscription-badge {
    min-width: 13px;
    height: 13px;
    font-size: 7px;
    top: -2px;
    right: -2px;
  }
}

@media (width <= 900px) {
  .nav-content {
    padding: 0 var(--space-3);
    gap: var(--space-2);
    height: 60px;
  }

  .nav-links {
    gap: var(--space-2);
  }

  .nav-link {
    padding: var(--space-1) var(--space-1);
    font-size: var(--font-size-xs);
  }

  .nav-actions {
    margin-left: var(--space-2);
    gap: var(--space-2);
  }

  .nav-action-btn {
    width: 34px;
    height: 34px;
    font-size: var(--font-size-sm);
  }

  .nav-actions .nav-search-container.active {
    width: 380px;
    right: var(--space-16);
  }

  .nav-icon, .nav-logo-text {
    font-size: var(--font-size-sm);
  }

  .nav-logo-subtitle {
    font-size: var(--font-size-xs);
  }

  .nav-logo-image {
    height: 40px;
  }

  .user-menu-container {
    margin-left: var(--space-2);
  }

  .user-avatar {
    width: 34px;
    height: 34px;
  }

  .notification-badge {
    min-width: 15px;
    height: 15px;
    font-size: 8px;
    top: -3px;
    right: -3px;
  }

  .subscription-badge {
    min-width: 12px;
    height: 12px;
    font-size: 7px;
    top: -2px;
    right: -2px;
  }

  .sign-up-button {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .nav-search-container {
    width: 100%;
  }

  .nav-search-input {
    font-size: var(--font-size-sm);
  }
}

@media (width <= 780px) {
  .nav-content {
    padding: 0 var(--space-2);
    gap: var(--space-1);
    height: 60px;
  }

  .nav-logo-image {
    height: 40px;
  }

  .nav-logo-text {
    font-size: var(--font-size-sm);
  }

  .nav-logo-subtitle {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-links, .user-menu-container, .sign-up-container, .sign-up-button {
    display: none;
  }
}

@media (width <= 480px) {
  .nav-content {
    padding: 0 var(--space-2);
  }

  .nav-logo-text, .nav-links {
    display: none;
  }

  .nav-logo-image {
    height: 32px;
  }
}

.nav-actions {
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
  flex-shrink: 0;
  display: flex;
}

.nav-action-btn {
  border-radius: var(--radius-base);
  cursor: pointer;
  width: 40px;
  height: 40px;
  transition: all var(--transition-base);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.nav-action-btn:hover {
  background: var(--color-background-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.nav-action-btn.search-toggle, .nav-action-btn.notifications-toggle {
  font-size: var(--font-size-lg);
}

.notifications-container {
  position: relative;
}

.notifications-dropdown {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  min-width: 320px;
  max-width: 400px;
  margin-top: var(--space-2);
  z-index: 1001;
  background: #fff;
  position: absolute;
  top: 100%;
  right: 0;
  overflow: hidden;
}

.notifications-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-background-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.notifications-header h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.notifications-close {
  cursor: pointer;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  background: none;
  border: none;
}

.notifications-close:hover {
  background: var(--color-background-light);
  color: var(--color-text-primary);
}

.notifications-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
  display: flex;
}

.notification-item:hover {
  background: var(--color-background-light);
}

.notification-item.info {
  border-left: 3px solid var(--color-primary);
}

.notification-item.success {
  border-left: 3px solid var(--color-success);
}

.notification-item.warning {
  border-left: 3px solid var(--color-warning);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}

.notification-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.mark-as-read-btn {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  background: none;
  border: none;
  flex-shrink: 0;
}

.mark-as-read-btn:hover {
  background: var(--color-primary-light);
}

.mark-all-as-read-btn {
  cursor: pointer;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  border: none;
  border-top: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
  background: none;
}

.mark-all-as-read-btn:hover {
  background: var(--color-background-light);
}

@media (width >= 900px) and (width <= 1023px) {
  .nav-actions .nav-search-container.active {
    width: 400px;
    right: 4rem;
  }

  .nav-link {
    padding: var(--space-1) var(--space-1);
    font-size: var(--font-size-sm);
  }
}

.modal-overlay {
  background-color: var(--color-overlay);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  animation: .3s fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal-content {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  animation: .3s modalPop;
  overflow-y: auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalPop {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-sm {
  max-width: 400px;
}

.modal-lg {
  max-width: 800px;
}

.modal-xl {
  max-width: 1200px;
}

.modal-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.modal-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.modal-close {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  background: none;
  border: none;
}

.modal-close:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.modal-body {
  margin-bottom: var(--space-6);
}

.modal-desc {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.modal-footer {
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  display: flex;
}

@media (width <= 768px) {
  .modal-content {
    margin: var(--space-4);
    padding: var(--space-6);
  }

  .modal-title {
    font-size: var(--font-size-xl);
  }

  .modal-footer {
    flex-direction: column;
  }
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-6 {
  margin: var(--space-6);
}

.m-8 {
  margin: var(--space-8);
}

.m-10 {
  margin: var(--space-10);
}

.m-12 {
  margin: var(--space-12);
}

.m-16 {
  margin: var(--space-16);
}

.m-20 {
  margin: var(--space-20);
}

.m-24 {
  margin: var(--space-24);
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--space-1);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mt-10 {
  margin-top: var(--space-10);
}

.mt-12 {
  margin-top: var(--space-12);
}

.mt-16 {
  margin-top: var(--space-16);
}

.mt-20 {
  margin-top: var(--space-20);
}

.mt-24 {
  margin-top: var(--space-24);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-10 {
  margin-bottom: var(--space-10);
}

.mb-12 {
  margin-bottom: var(--space-12);
}

.mb-16 {
  margin-bottom: var(--space-16);
}

.mb-20 {
  margin-bottom: var(--space-20);
}

.mb-24 {
  margin-bottom: var(--space-24);
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: var(--space-1);
}

.ml-2 {
  margin-left: var(--space-2);
}

.ml-3 {
  margin-left: var(--space-3);
}

.ml-4 {
  margin-left: var(--space-4);
}

.ml-5 {
  margin-left: var(--space-5);
}

.ml-6 {
  margin-left: var(--space-6);
}

.ml-8 {
  margin-left: var(--space-8);
}

.ml-10 {
  margin-left: var(--space-10);
}

.ml-12 {
  margin-left: var(--space-12);
}

.ml-16 {
  margin-left: var(--space-16);
}

.ml-20 {
  margin-left: var(--space-20);
}

.ml-24 {
  margin-left: var(--space-24);
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: var(--space-1);
}

.mr-2 {
  margin-right: var(--space-2);
}

.mr-3 {
  margin-right: var(--space-3);
}

.mr-4 {
  margin-right: var(--space-4);
}

.mr-5 {
  margin-right: var(--space-5);
}

.mr-6 {
  margin-right: var(--space-6);
}

.mr-8 {
  margin-right: var(--space-8);
}

.mr-10 {
  margin-right: var(--space-10);
}

.mr-12 {
  margin-right: var(--space-12);
}

.mr-16 {
  margin-right: var(--space-16);
}

.mr-20 {
  margin-right: var(--space-20);
}

.mr-24 {
  margin-right: var(--space-24);
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.mx-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.mx-5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.mx-6 {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}

.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.mx-10 {
  margin-left: var(--space-10);
  margin-right: var(--space-10);
}

.mx-12 {
  margin-left: var(--space-12);
  margin-right: var(--space-12);
}

.mx-16 {
  margin-left: var(--space-16);
  margin-right: var(--space-16);
}

.mx-20 {
  margin-left: var(--space-20);
  margin-right: var(--space-20);
}

.mx-24 {
  margin-left: var(--space-24);
  margin-right: var(--space-24);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.my-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.my-6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.my-10 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.my-12 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

.my-16 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.my-20 {
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

.my-24 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.p-6 {
  padding: var(--space-6);
}

.p-8 {
  padding: var(--space-8);
}

.p-10 {
  padding: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}

.p-24 {
  padding: var(--space-24);
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: var(--space-1);
}

.pt-2 {
  padding-top: var(--space-2);
}

.pt-3 {
  padding-top: var(--space-3);
}

.pt-4 {
  padding-top: var(--space-4);
}

.pt-5 {
  padding-top: var(--space-5);
}

.pt-6 {
  padding-top: var(--space-6);
}

.pt-8 {
  padding-top: var(--space-8);
}

.pt-10 {
  padding-top: var(--space-10);
}

.pt-12 {
  padding-top: var(--space-12);
}

.pt-16 {
  padding-top: var(--space-16);
}

.pt-20 {
  padding-top: var(--space-20);
}

.pt-24 {
  padding-top: var(--space-24);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: var(--space-1);
}

.pb-2 {
  padding-bottom: var(--space-2);
}

.pb-3 {
  padding-bottom: var(--space-3);
}

.pb-4 {
  padding-bottom: var(--space-4);
}

.pb-5 {
  padding-bottom: var(--space-5);
}

.pb-6 {
  padding-bottom: var(--space-6);
}

.pb-8 {
  padding-bottom: var(--space-8);
}

.pb-10 {
  padding-bottom: var(--space-10);
}

.pb-12 {
  padding-bottom: var(--space-12);
}

.pb-16 {
  padding-bottom: var(--space-16);
}

.pb-20 {
  padding-bottom: var(--space-20);
}

.pb-24 {
  padding-bottom: var(--space-24);
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: var(--space-1);
}

.pl-2 {
  padding-left: var(--space-2);
}

.pl-3 {
  padding-left: var(--space-3);
}

.pl-4 {
  padding-left: var(--space-4);
}

.pl-5 {
  padding-left: var(--space-5);
}

.pl-6 {
  padding-left: var(--space-6);
}

.pl-8 {
  padding-left: var(--space-8);
}

.pl-10 {
  padding-left: var(--space-10);
}

.pl-12 {
  padding-left: var(--space-12);
}

.pl-16 {
  padding-left: var(--space-16);
}

.pl-20 {
  padding-left: var(--space-20);
}

.pl-24 {
  padding-left: var(--space-24);
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: var(--space-1);
}

.pr-2 {
  padding-right: var(--space-2);
}

.pr-3 {
  padding-right: var(--space-3);
}

.pr-4 {
  padding-right: var(--space-4);
}

.pr-5 {
  padding-right: var(--space-5);
}

.pr-6 {
  padding-right: var(--space-6);
}

.pr-8 {
  padding-right: var(--space-8);
}

.pr-10 {
  padding-right: var(--space-10);
}

.pr-12 {
  padding-right: var(--space-12);
}

.pr-16 {
  padding-right: var(--space-16);
}

.pr-20 {
  padding-right: var(--space-20);
}

.pr-24 {
  padding-right: var(--space-24);
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.px-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.px-20 {
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}

.px-24 {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.py-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-10 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.py-20 {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.py-24 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-screen {
  width: 100vw;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-screen {
  height: 100vh;
}

.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded {
  border-radius: var(--radius-base);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-2xl {
  border-radius: var(--radius-2xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: var(--shadow-base);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: .25;
}

.opacity-50 {
  opacity: .5;
}

.opacity-75 {
  opacity: .75;
}

.opacity-100 {
  opacity: 1;
}

.transform {
  transform: translateZ(0);
}

.scale-0 {
  transform: scale(0);
}

.scale-50 {
  transform: scale(.5);
}

.scale-75 {
  transform: scale(.75);
}

.scale-90 {
  transform: scale(.9);
}

.scale-95 {
  transform: scale(.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

.scale-125 {
  transform: scale(1.25);
}

.scale-150 {
  transform: scale(1.5);
}

.transition {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.transition-none {
  transition: none;
}

.scroll-to-top {
  scroll-margin-top: 80px;
}

.scroll-to-component {
  scroll-margin-top: 100px;
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.alert--success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-border-success);
}

.alert--error {
  background-color: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid var(--color-border-error);
}

.alert--info {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border: 1px solid var(--color-border-info);
}

.alert--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-border-warning);
}

.alert-close {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  margin-left: var(--space-4);
  background: none;
  border: none;
  padding: 0;
}

.home-page {
  background: var(--color-bg-primary);
  min-height: 100vh;
}

.home-container {
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

.home-section {
  width: 100%;
  position: relative;
}

@media (width <= 768px) {
  .home-page {
    overflow-x: hidden;
  }

  .home-container {
    padding: 0;
  }
}

@media (width <= 480px) {
  .home-page {
    overflow-x: hidden;
  }
}

.about-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  z-index: 1;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.about-page:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, rgba(var(--color-primary-rgb), .03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(var(--color-secondary-rgb), .03) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(var(--color-tertiary-rgb), .02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: .8;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.about-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  min-height: 100vh;
  color: var(--color-text-white);
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.about-hero:before {
  content: "";
  background: radial-gradient(ellipse at center, rgba(var(--color-text-white-rgb), .1) 0%, rgba(var(--color-text-white-rgb), .05) 50%, transparent 100%);
  opacity: .6;
  animation: 8s ease-in-out infinite pulseGlow;
  position: absolute;
  inset: 0;
}

@keyframes pulseGlow {
  0%, to {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: .8;
    transform: scale(1.05);
  }
}

.about-hero-content {
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  animation: 1.2s ease-out fadeInUp;
  position: relative;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-hero-title {
  font-family: var(--font-family-heading);
  letter-spacing: -.02em;
  text-shadow: var(--color-shadow-dark);
  background: linear-gradient(135deg, var(--color-text-white) 0%, var(--color-bg-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.1;
}

.about-hero-subtitle {
  opacity: .95;
  max-width: 700px;
  color: var(--color-bg-secondary);
  text-shadow: var(--color-shadow-medium);
  margin: 0 auto 3rem;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
}

.about-hero-stats {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
}

.hero-stat {
  text-align: center;
  background: var(--color-overlay-light);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-overlay-medium);
  padding: 1.5rem;
  transition: all .3s;
}

.hero-stat:hover {
  background: var(--color-overlay-medium);
  box-shadow: 0 8px 32px rgba(var(--color-text-primary-rgb), .2);
  transform: translateY(-4px);
}

.hero-stat-number {
  color: var(--sunset);
  text-shadow: var(--color-shadow-dark);
  margin-bottom: .5rem;
  font-size: 2.5rem;
  font-weight: 700;
  display: block;
}

.hero-stat-label {
  color: var(--color-bg-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .9rem;
  font-weight: 500;
}

.about-container {
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1rem;
  position: relative;
}

.about-mission {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, rgba(var(--color-primary-rgb), .05) 100%);
  backdrop-filter: blur(30px);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 20px 60px rgba(var(--color-text-primary-rgb), .08);
  border-radius: 2rem;
  margin: 4rem 0;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}

.about-mission:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-tertiary) 100%);
  border-radius: 2rem 2rem 0 0;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.intro-content {
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  display: flex;
}

.intro-text {
  max-width: 800px;
}

.intro-highlights {
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  display: flex;
}

.highlight-item {
  background: rgba(var(--color-bg-primary-rgb), .8);
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 180px;
  padding: 2rem;
  transition: all .3s;
  display: flex;
}

.highlight-item:hover {
  box-shadow: 0 15px 35px rgba(var(--color-primary-rgb), .1);
  border-color: var(--color-primary-light);
  transform: translateY(-4px);
}

.highlight-icon {
  color: var(--color-primary);
  font-size: 2.5rem;
  transition: all .3s;
}

.highlight-item:hover .highlight-icon {
  color: var(--color-secondary);
  transform: scale(1.1);
}

.highlight-text {
  color: var(--color-text-primary);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.about-intro, .about-features, .about-team, .about-ecosystem, .about-courses, .about-why {
  background: rgba(var(--color-bg-primary-rgb), .95);
  backdrop-filter: blur(30px);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 20px 60px rgba(var(--color-text-primary-rgb), .06);
  border-radius: 2rem;
  margin: 4rem 0;
  padding: 3rem;
  transition: all .4s;
  position: relative;
}

.about-intro:hover, .about-features:hover, .about-team:hover, .about-ecosystem:hover, .about-courses:hover, .about-why:hover {
  box-shadow: 0 30px 80px rgba(var(--color-text-primary-rgb), .12);
  border-color: var(--color-primary-light);
  transform: translateY(-8px);
}

.about-section-title {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
}

.about-section-text {
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
}

.mission-text {
  color: var(--color-text-primary);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.9;
}

.mission-values {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  display: grid;
}

.value-item {
  text-align: center;
  background: rgba(var(--color-bg-primary-rgb), .9);
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.value-item:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-tertiary) 100%);
  height: 4px;
  transition: transform .4s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.value-item:hover:before {
  transform: scaleX(1);
}

.value-item:hover {
  box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), .15);
  border-color: var(--color-primary-light);
  transform: translateY(-6px);
}

.value-icon {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  transition: all .3s;
  display: block;
}

.value-item:hover .value-icon {
  color: var(--color-secondary);
  transform: scale(1.1);
}

.value-title {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.value-description {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.value-item h3 {
  color: var(--color-text-primary);
  margin-bottom: .75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.value-item p {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.features-grid {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  display: grid;
}

.feature-item {
  background: rgba(var(--color-bg-primary-rgb), .9);
  backdrop-filter: blur(20px);
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.feature-item:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  height: 3px;
  transition: transform .4s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.feature-item:hover:before {
  transform: scaleX(1);
}

.feature-item:hover {
  box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), .15);
  border-color: var(--color-primary-light);
  transform: translateY(-8px);
}

.feature-icon {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  transition: all .3s;
  display: block;
}

.feature-item:hover .feature-icon {
  color: var(--color-secondary);
  transform: scale(1.1);
}

.feature-title {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.feature-description {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.team-members {
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
  display: flex;
}

.team-member-row {
  background: rgba(var(--color-bg-primary-rgb), .9);
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 3rem;
  padding: 3rem;
  transition: all .4s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.team-member-row:before {
  content: "";
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 4px;
  height: 100%;
  transition: transform .4s;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleY(0);
}

.team-member-row:hover:before {
  transform: scaleY(1);
}

.team-member-row:hover {
  box-shadow: 0 25px 60px rgba(var(--color-primary-rgb), .12);
  border-color: var(--color-primary-light);
  transform: translateY(-6px);
}

.team-member-row.reverse {
  grid-template-columns: 1fr 140px;
}

.team-member-row.reverse .team-member-content {
  order: 1;
}

.team-member-row.reverse .team-member-image {
  order: 2;
}

.team-member-row.reverse:before {
  left: auto;
  right: 0;
}

.team-avatar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 140px;
  height: 140px;
  box-shadow: 0 15px 40px rgba(var(--color-primary-rgb), .3);
  color: var(--color-text-white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 4.5rem;
  transition: all .3s;
  display: flex;
}

.team-member-row:hover .team-avatar {
  box-shadow: 0 20px 50px rgba(var(--color-primary-rgb), .4);
  transform: scale(1.05);
}

.team-name {
  color: var(--color-text-primary);
  margin-bottom: .75rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.team-role {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.team-bio {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

.ecosystem-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  display: grid;
}

.ecosystem-card {
  background: rgba(var(--color-bg-primary-rgb), .9);
  backdrop-filter: blur(20px);
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.ecosystem-card:after {
  content: "";
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
  height: 3px;
  transition: transform .4s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.ecosystem-card:hover:after {
  transform: scaleX(1);
}

.ecosystem-card:hover {
  box-shadow: 0 20px 50px rgba(var(--color-secondary-rgb), .15);
  border-color: var(--color-secondary-light);
  transform: translateY(-8px);
}

.ecosystem-icon {
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  transition: all .3s;
  display: block;
}

.ecosystem-card:hover .ecosystem-icon {
  color: var(--color-tertiary);
  transform: scale(1.1);
}

.ecosystem-title {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.ecosystem-description {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.courses-list {
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  display: flex;
}

.course-item {
  background: rgba(var(--color-bg-primary-rgb), .9);
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  transition: all .4s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.course-item:before {
  content: "";
  background: linear-gradient(180deg, var(--color-tertiary) 0%, var(--color-primary) 100%);
  width: 4px;
  transition: transform .4s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: scaleY(0);
}

.course-item:hover:before {
  transform: scaleY(1);
}

.course-item:hover {
  box-shadow: 0 15px 40px rgba(var(--color-tertiary-rgb), .15);
  border-color: var(--color-tertiary-light);
  transform: translate(12px);
}

.course-item-icon {
  color: var(--color-tertiary);
  flex-shrink: 0;
  font-size: 3rem;
  transition: all .3s;
}

.course-item:hover .course-item-icon {
  color: var(--color-primary);
  transform: scale(1.1);
}

.course-item-title {
  color: var(--color-text-primary);
  margin-bottom: .75rem;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
}

.course-item-description {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.why-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  display: grid;
}

.why-card {
  background: rgba(var(--color-bg-primary-rgb), .9);
  backdrop-filter: blur(20px);
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.why-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary) 100%);
  opacity: 0;
  border-radius: 0 0 10px 10px;
  width: 60px;
  height: 3px;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.why-card:hover:before {
  opacity: 1;
}

.why-card:hover {
  box-shadow: 0 20px 50px rgba(var(--color-success-rgb), .15);
  border-color: var(--color-success-light);
  transform: translateY(-8px);
}

.why-icon {
  color: var(--color-success);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  transition: all .3s;
  display: block;
}

.why-card:hover .why-icon {
  color: var(--color-primary);
  transform: scale(1.1);
}

.why-title {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.why-description {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.about-cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .1) 0%, rgba(var(--color-secondary-rgb), .1) 100%);
  border: 1px solid var(--color-border-light);
  border-radius: 2.5rem;
  margin-top: 5rem;
  padding: 5rem 3rem;
  position: relative;
  overflow: hidden;
}

.about-cta:before {
  content: "";
  background: radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), .05) 0%, transparent 70%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.about-cta .about-section-title {
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  z-index: 1;
  background-clip: text;
  font-size: 3rem;
  position: relative;
}

.about-cta .about-section-text {
  color: var(--color-text-secondary);
  z-index: 1;
  font-size: 1.3rem;
  line-height: 1.7;
  position: relative;
}

.cta-buttons {
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0;
  display: flex;
  position: relative;
}

.cta-button {
  cursor: pointer;
  border: none;
  border-radius: 1rem;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .4s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.cta-button--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), .3);
}

.cta-button--primary:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .6s;
  position: absolute;
  top: 0;
  left: -100%;
}

.cta-button--primary:hover:before {
  left: 100%;
}

.cta-button--primary:hover {
  box-shadow: 0 15px 40px rgba(var(--color-primary-rgb), .4);
  transform: translateY(-3px);
}

.cta-button--secondary {
  background: rgba(var(--color-bg-primary-rgb), .9);
  color: var(--color-primary);
  border: 1px solid var(--color-border-medium);
  backdrop-filter: blur(10px);
}

.cta-button--secondary:hover {
  background: rgba(var(--color-bg-primary-rgb), 1);
  box-shadow: 0 15px 40px rgba(var(--color-primary-rgb), .2);
  border-color: var(--color-primary-light);
  transform: translateY(-3px);
}

.cta-message {
  background: rgba(var(--color-bg-primary-rgb), .8);
  border: 1px solid var(--color-border-light);
  backdrop-filter: blur(20px);
  z-index: 1;
  border-radius: 1.5rem;
  margin-top: 2.5rem;
  padding: 2rem;
  position: relative;
}

.cta-text {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
}

@media (width <= 1024px) {
  .intro-highlights {
    gap: 2rem;
  }

  .highlight-item {
    min-width: 160px;
    padding: 1.5rem;
  }

  .mission-values {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
}

@media (width <= 768px) {
  .about-hero {
    padding: 2rem 1rem 3rem;
  }

  .about-hero-title {
    font-size: 2.5rem;
  }

  .about-hero-subtitle {
    font-size: 1.1rem;
  }

  .about-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .about-container {
    padding: 0 .5rem;
  }

  .about-intro, .about-features, .about-team, .about-ecosystem, .about-courses, .about-why, .about-cta {
    margin: 2rem 0;
    padding: 1.5rem;
  }

  .intro-content {
    gap: 2rem;
  }

  .intro-highlights {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .highlight-item {
    width: 100%;
    max-width: 300px;
  }

  .mission-values, .features-grid, .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team-member-row, .team-member-row.reverse {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .team-member-row.reverse .team-member-content, .team-member-row.reverse .team-member-image {
    order: unset;
  }

  .team-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    font-size: 3rem;
  }

  .why-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .course-item {
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-button {
    justify-content: center;
    width: 100%;
    max-width: 300px;
  }
}

@media (width <= 480px) {
  .about-hero-title {
    font-size: 2rem;
  }

  .about-hero-subtitle {
    font-size: 1rem;
  }

  .about-section-title {
    font-size: 1.5rem;
  }

  .intro-highlights {
    gap: 1rem;
  }

  .highlight-item {
    min-width: auto;
    padding: 1.25rem;
  }

  .highlight-icon {
    font-size: 2rem;
  }

  .highlight-text {
    font-size: 1rem;
  }

  .value-item {
    padding: 2rem;
  }

  .value-icon {
    font-size: 3rem;
  }

  .feature-item, .ecosystem-card, .why-card {
    padding: 1.5rem;
  }

  .team-avatar {
    width: 100px;
    height: 100px;
    font-size: 3.5rem;
  }

  .team-member-row {
    padding: 1.5rem;
  }

  .team-name {
    font-size: 1.5rem;
  }

  .team-role {
    font-size: 1rem;
  }

  .about-cta {
    padding: 3rem 2rem;
  }

  .about-cta .about-section-title {
    font-size: 2.5rem;
  }
}

.courses-landing-page {
  background: var(--color-background);
  min-height: 100vh;
}

.courses-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  padding: var(--space-20);
  text-align: center;
  align-items: center;
  min-height: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.courses-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 40% 40%, #ffffff0d 0%, #0000 50%);
  animation: 6s ease-in-out infinite coursesFloat;
  position: absolute;
  inset: 0;
}

.courses-hero:after {
  content: "";
  opacity: .2;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.courses-hero-content {
  text-align: center;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.courses-hero-badge {
  backdrop-filter: blur(10px);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-4);
  background: #fff3;
  border: 1px solid #ffffff4d;
  animation: .8s ease-out coursesFadeInUp;
  display: inline-block;
}

.courses-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.courses-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: .95;
  text-shadow: 0 2px 4px #0003;
  animation: .8s ease-out .4s both coursesFadeInUp;
}

.courses-hero-intro {
  font-size: var(--font-size-base);
  opacity: .9;
  max-width: 700px;
  margin: 0 auto var(--space-6) auto;
  text-shadow: 0 1px 2px #0000001a;
  line-height: 1.5;
  animation: .8s ease-out .6s both coursesFadeInUp;
}

.courses-filters-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

.courses-search-input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4)  + 30px);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: all var(--transition-base);
  background: #fff;
}

.courses-search-input:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px #d4a5741a;
}

.courses-content {
  padding: var(--space-12) 0;
}

.courses-grid {
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  display: grid;
}

.course-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--color-border-light);
  animation: .6s ease-out both coursesFadeInUp;
  position: relative;
  overflow: hidden;
}

.course-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  height: 4px;
  transition: var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.course-card:hover:before {
  opacity: 1;
}

.course-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.course-card.hovered {
  box-shadow: var(--shadow-xl);
  border-color: var(--color-secondary);
  transform: translateY(-8px)scale(1.02);
}

.course-card-header {
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-background-light) 0%, white 100%);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.course-card-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  transition: all var(--transition-base);
}

.course-card:hover .course-card-icon {
  transform: scale(1.1);
}

.course-card-badges {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.course-type-badge {
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.course-level-badge {
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
  position: absolute;
}

.course-level-badge.beginner {
  color: var(--color-success);
  background: #10b9811a;
  border: 1px solid #10b98133;
}

.course-level-badge.intermediate {
  color: var(--color-warning);
  background: #f59e0b1a;
  border: 1px solid #f59e0b33;
}

.course-level-badge.advanced {
  color: var(--color-error);
  background: #ef44441a;
  border: 1px solid #ef444433;
}

.course-progress-bar {
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  width: 100%;
  height: 6px;
  margin: var(--space-3) 0;
  overflow: hidden;
}

.course-progress-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  height: 100%;
  transition: width var(--transition-base);
}

.course-stats {
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  display: flex;
}

.course-stat {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.course-stat-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.course-filters {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-8);
}

.filter-group {
  margin-bottom: var(--space-4);
}

.filter-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.filter-options {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.filter-option {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: var(--transition-base);
}

.filter-option:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-option.active {
  color: var(--color-primary);
  background: #6626321a;
  border-color: #66263233;
}

.course-search {
  margin-bottom: var(--space-6);
  position: relative;
}

.course-search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-left: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-bg-primary);
  transition: var(--transition-base);
}

.course-search-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6626321a;
}

.course-search-icon {
  left: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.course-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  display: grid;
}

.course-empty {
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-secondary);
}

.course-empty-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-border-light);
  margin-bottom: var(--space-4);
}

.course-loading {
  padding: var(--space-12);
  justify-content: center;
  align-items: center;
  display: flex;
}

.course-loading-spinner {
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 1s linear infinite spin;
}

.course-card-content {
  padding: var(--space-6);
}

.course-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
}

.course-card-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

.course-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.course-card-meta {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-direction: column;
  display: flex;
}

.course-meta-item {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.meta-value {
  font-weight: var(--font-weight-normal);
}

.course-card-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-background-light);
  border-top: 1px solid var(--color-border-light);
  justify-content: center;
  align-items: center;
  display: flex;
}

.course-cta {
  padding: var(--space-3) var(--space-6);
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  width: 100%;
}

.course-cta:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-1px);
}

@media (width <= 768px) {
  .courses-hero {
    padding: var(--space-16) 0 var(--space-8) 0;
    min-height: 400px;
  }

  .courses-hero-title {
    font-size: var(--font-size-4xl);
  }

  .courses-hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .courses-hero-intro {
    font-size: var(--font-size-base);
  }

  .hero-stats {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }

  .filters-container {
    gap: var(--space-4);
    flex-direction: column;
  }

  .courses-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .course-card-header, .course-card-content {
    padding: var(--space-4);
  }

  .pagination {
    gap: var(--space-1);
  }

  .pagination-button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    min-width: 40px;
    height: 40px;
  }

  .pagination-info {
    margin: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .courses-hero {
    padding: var(--space-12) 0 var(--space-6) 0;
    min-height: 350px;
  }

  .courses-hero-title {
    font-size: var(--font-size-3xl);
  }

  .courses-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-stats {
    gap: var(--space-3);
  }

  .hero-stat {
    flex: 1;
    min-width: 80px;
  }

  .hero-stat-number {
    font-size: var(--font-size-xl);
  }

  .hero-stat-label {
    font-size: var(--font-size-xs);
  }

  .pagination {
    gap: var(--space-2);
    flex-direction: column;
  }

  .pagination-info {
    margin-bottom: var(--space-2);
    order: -1;
  }
}

.course-detail {
  background: var(--color-background);
  min-height: 100vh;
  padding-bottom: 3rem;
}

.course-detail-hero {
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 60%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  text-align: center;
  padding: 3rem 0 2rem;
  position: relative;
  box-shadow: 0 4px 24px #4c288514;
}

.course-detail-hero-content {
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.course-detail-hero-title {
  letter-spacing: -1px;
  color: var(--color-text-white);
  margin-bottom: .5rem;
  font-size: 2.5rem;
  font-weight: 800;
}

.course-detail-hero-subtitle {
  color: var(--color-text-white);
  opacity: .92;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.course-detail-container {
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  display: flex;
}

.course-main-content {
  flex: 2;
  min-width: 0;
}

.course-sidebar {
  background: var(--color-bg-secondary);
  border-radius: 1.5rem;
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  height: fit-content;
  padding: 2rem 1.2rem 1.2rem;
  position: sticky;
  top: 2rem;
  box-shadow: 0 2px 12px #4c28850f;
}

.course-section {
  background: #fff;
  border-radius: 1.2rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1.2rem;
  box-shadow: 0 1px 6px #4c28850a;
}

.course-section:last-child {
  margin-bottom: 0;
}

.progress-section {
  background: var(--color-success-light);
  border: 1.5px solid var(--color-border-success);
  box-shadow: none;
  text-align: center;
  border-radius: 1.2rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1rem;
}

.course-extra-sections {
  margin-top: 2.5rem;
}

.course-instructor-section {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.instructor-photo {
  object-fit: cover;
  border: 2px solid var(--color-primary-light);
  background: var(--color-bg-secondary);
  opacity: .5;
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.course-objectives-section {
  margin-top: 1.5rem;
}

.course-objectives-list {
  color: var(--color-text-primary);
  margin: .5rem 0 0 1.2rem;
  padding: 0;
  font-size: 1.05rem;
  list-style: inside;
}

.course-objectives-list li {
  margin-bottom: .4rem;
}

.course-materials-section {
  margin-top: 1.5rem;
}

.course-materials-list {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.course-materials-list li {
  margin-bottom: .4rem;
}

.course-materials-list a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
}

.course-related-section {
  margin-top: 1.5rem;
}

.course-related-list {
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.course-related-list li {
  margin-bottom: .4rem;
}

.course-related-list a {
  color: var(--color-secondary);
  font-weight: 500;
  text-decoration: underline;
}

.course-community-section {
  margin-top: 1.5rem;
}

.course-community-section a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
}

.course-faq-section {
  margin-top: 1.5rem;
}

.course-faq-list {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.course-faq-list li {
  color: #444;
  margin-bottom: .4rem;
  font-size: .99rem;
}

@media (width <= 1024px) {
  .course-detail-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem .5rem 0;
  }

  .course-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 1.5rem;
    position: static;
  }
}

@media (width <= 600px) {
  .course-detail-hero-title {
    font-size: 1.3rem;
  }

  .course-detail-hero-content {
    padding: 0 .5rem;
  }

  .course-detail-container {
    padding: .5rem .2rem 0;
  }

  .course-sidebar, .course-section {
    border-radius: 1rem;
    padding: 1rem .5rem;
  }

  .course-extra-sections {
    margin-top: 1.2rem;
  }

  .course-related-list {
    flex-direction: column;
    gap: .5rem;
  }

  .instructor-photo {
    width: 48px;
    height: 48px;
  }
}

.lessons-landing-page {
  background: var(--color-background);
  min-height: 100vh;
}

.lessons-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  padding: var(--space-24) 0 var(--space-16);
  text-align: center;
  align-items: center;
  min-height: 400px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.lessons-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 40% 40%, #ffffff0d 0%, #0000 50%);
  animation: 6s ease-in-out infinite lessonsFloat;
  position: absolute;
  inset: 0;
}

.lessons-hero:after {
  content: "";
  opacity: .2;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.lessons-hero-content {
  text-align: center;
  z-index: 1;
  max-width: none;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.lessons-hero-badge {
  backdrop-filter: blur(10px);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-4);
  background: #fff3;
  border: 1px solid #ffffff4d;
  animation: .8s ease-out lessonsFadeInUp;
  display: inline-block;
}

.lessons-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 4px 8px #0000004d;
  line-height: 1.1;
  animation: .8s ease-out .2s both lessonsFadeInUp;
}

.lessons-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: .95;
}

.lessons-hero-intro {
  font-size: var(--font-size-base);
  opacity: .9;
  max-width: 700px;
  margin: 0 auto var(--space-6) auto;
  text-shadow: 0 1px 2px #0000001a;
  line-height: 1.5;
  animation: .8s ease-out .6s both lessonsFadeInUp;
}

.lessons-filters-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

.lessons-search-input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4)  + 30px);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: all var(--transition-base);
  background: #fff;
}

.lessons-search-input:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px #d4a5741a;
}

.loading-spinner-container {
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-direction: column;
  display: flex;
}

.loading-spinner {
  border: 3px solid #ffffff4d;
  border-top: 3px solid var(--color-secondary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 1s linear infinite lessonsSpin;
}

.loading-text {
  font-size: var(--font-size-base);
  opacity: .8;
  animation: 2s ease-in-out infinite lessonsPulse;
}

.error-container {
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-direction: column;
  display: flex;
}

.error-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  opacity: .9;
}

.error-subtext {
  font-size: var(--font-size-base);
  opacity: .7;
}

.retry-button {
  padding: var(--space-3) var(--space-6);
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  margin-top: var(--space-4);
  border: none;
}

.retry-button:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-2px);
}

.lessons-content {
  padding: var(--space-12) 0;
}

.lessons-grid {
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  display: grid;
}

.lesson-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--color-border-light);
  animation: .6s ease-out both lessonsFadeInUp;
  position: relative;
  overflow: hidden;
}

.lesson-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  height: 4px;
  transition: var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.lesson-card:hover:before {
  opacity: 1;
}

.lesson-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.lesson-card.hovered {
  box-shadow: var(--shadow-xl);
  border-color: var(--color-secondary);
  transform: translateY(-8px)scale(1.02);
}

.lesson-card-header {
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-background-light) 0%, white 100%);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.lesson-card-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  transition: all var(--transition-base);
}

.lesson-card:hover .lesson-card-icon {
  transform: scale(1.1);
}

.lesson-card-badges {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.lesson-type-badge {
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.level-badge {
  background: var(--color-primary-light);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.lesson-card-content {
  padding: var(--space-6);
}

.lesson-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
}

.lesson-card-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

.lesson-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.lesson-card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.lesson-instructor {
  font-weight: var(--font-weight-medium);
}

.lesson-duration {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  display: flex;
}

.lesson-duration-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.lesson-status-badge {
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
  position: absolute;
}

.lesson-status-badge.completed {
  color: var(--color-success);
  background: #10b9811a;
  border: 1px solid #10b98133;
}

.lesson-status-badge.in-progress {
  color: var(--color-warning);
  background: #f59e0b1a;
  border: 1px solid #f59e0b33;
}

.lesson-status-badge.not-started {
  color: var(--color-text-secondary);
  background: #9ca3af1a;
  border: 1px solid #9ca3af33;
}

.lesson-progress-bar {
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  width: 100%;
  height: 6px;
  margin: var(--space-3) 0;
  overflow: hidden;
}

.lesson-progress-fill {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  height: 100%;
  transition: width var(--transition-base);
}

.lesson-card-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-background-light);
  border-top: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.lesson-progress {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.lesson-cta {
  padding: var(--space-2) var(--space-4);
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
}

.lesson-cta:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-1px);
}

@media (width <= 768px) {
  .lessons-hero {
    padding: var(--space-20) 0 var(--space-8) 0;
    min-height: 400px;
  }

  .lessons-hero-title {
    font-size: var(--font-size-4xl);
  }

  .lessons-hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .lessons-hero-intro {
    font-size: var(--font-size-base);
  }

  .hero-stats {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }

  .filters-container {
    gap: var(--space-4);
    flex-direction: column;
  }

  .lessons-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .lesson-card-header, .lesson-card-content {
    padding: var(--space-4);
  }

  .pagination {
    gap: var(--space-1);
  }

  .pagination-button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    min-width: 40px;
    height: 40px;
  }

  .pagination-info {
    margin: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .lessons-hero {
    padding: var(--space-12) 0 var(--space-6) 0;
    min-height: 350px;
  }

  .lessons-hero-title {
    font-size: var(--font-size-3xl);
  }

  .lessons-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-stats {
    gap: var(--space-3);
  }

  .hero-stat {
    flex: 1;
    min-width: 80px;
  }

  .hero-stat-number {
    font-size: var(--font-size-xl);
  }

  .hero-stat-label {
    font-size: var(--font-size-xs);
  }

  .pagination {
    gap: var(--space-2);
    flex-direction: column;
  }

  .pagination-info {
    margin-bottom: var(--space-2);
    order: -1;
  }
}

.lesson-detail {
  background: var(--color-background);
  min-height: 100vh;
  padding-bottom: 3rem;
}

.lesson-detail-hero {
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 60%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  text-align: center;
  border-bottom-right-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  padding: 3.5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 32px #4c28851a;
}

.lesson-detail-hero-content {
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
}

.lesson-detail-hero-title {
  letter-spacing: -1.5px;
  color: var(--color-text-white);
  text-shadow: 0 2px 12px #4c28851a;
  margin-bottom: .5rem;
  font-size: 2.7rem;
  font-weight: 900;
}

.lesson-detail-hero-subtitle {
  color: var(--color-text-white);
  opacity: .95;
  margin-bottom: 1.2rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.lesson-detail-meta {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
  display: flex;
}

.lesson-meta-badge {
  color: var(--color-text-white);
  letter-spacing: .7px;
  background: #ffffff2e;
  border: 1.5px solid #ffffff38;
  border-radius: 1.2rem;
  padding: .35rem 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 1px 4px #4c288514;
}

.lesson-detail-container {
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  display: flex;
}

.lesson-sections {
  align-items: flex-start;
  gap: 2.5rem;
  display: flex;
}

.lesson-main-content {
  flex-direction: column;
  flex: 2;
  gap: 2rem;
  min-width: 0;
  display: flex;
}

.lesson-sidebar {
  background: #f7f7faf2;
  border-radius: 1.7rem;
  flex-direction: column;
  flex: 1;
  gap: 2rem;
  min-width: 260px;
  max-width: 340px;
  height: fit-content;
  padding: 2rem 1.2rem 1.2rem;
  display: flex;
  position: sticky;
  top: 2rem;
  box-shadow: 0 4px 24px #4c288514;
}

.lesson-section {
  background: #fffffffa;
  border-radius: 1.3rem;
  margin-bottom: 2rem;
  padding: 1.7rem 1.3rem 1.3rem;
  transition: box-shadow .18s, border-color .18s;
  box-shadow: 0 2px 12px #4c28850f;
}

.lesson-section:hover, .lesson-section:focus-within {
  box-shadow: 0 6px 32px #4c288521;
}

.lesson-section:last-child {
  margin-bottom: 0;
}

.lesson-section h3 {
  color: var(--color-primary);
  letter-spacing: -.5px;
  align-items: center;
  margin-bottom: .7rem;
  font-size: 1.18rem;
  font-weight: 800;
  display: flex;
}

.lesson-section h3:before {
  content: "";
  border-radius: 3px;
  width: 6px;
  height: 18px;
  margin-right: .5rem;
  display: inline-block;
}

.lesson-video-section {
  border-left: 4px solid var(--color-secondary);
  background: linear-gradient(120deg, #f3f3f9 60%, #f7f7fa 100%);
  padding: 1.7rem 0;
  position: relative;
  box-shadow: 0 2px 12px #4c288514;
}

.video-container {
  background: #000;
  border-radius: 1.1rem;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px #4c28851a;
}

.lesson-video {
  border: none;
  border-radius: 1.1rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.lesson-detail-content {
  margin-bottom: 1.5rem;
}

.lesson-detail-description {
  color: var(--color-text-primary);
  margin-bottom: .7rem;
  font-size: 1.13rem;
  font-weight: 500;
}

.lesson-list {
  color: var(--color-text-primary);
  margin: .5rem 0 0 1.2rem;
  padding: 0;
  font-size: 1.08rem;
  list-style: inside;
}

.lesson-list li {
  margin-bottom: .4rem;
  padding-left: .2rem;
}

.lesson-prerequisites {
  color: var(--color-text-primary);
  margin: .5rem 0 0 1.2rem;
  padding: 0;
  font-size: 1.08rem;
  list-style: inside circle;
}

.lesson-prerequisites li {
  margin-bottom: .4rem;
  padding-left: .2rem;
}

.progress-section {
  box-shadow: none;
  text-align: center;
  background: #e9f5f2fa;
  border: 1.5px solid #b2e0d6;
  border-radius: 1.2rem;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1rem;
  display: flex;
}

.progress-section h3 {
  color: #1e7c6b;
  margin-bottom: .5rem;
  font-size: 1.13rem;
  font-weight: 800;
}

.progress-section p {
  color: #3b3b3b;
  margin-bottom: 1rem;
  font-size: 1.01rem;
}

.lesson-extra-sections, .course-extra-sections {
  margin-top: 2.5rem;
}

.lesson-instructor-section, .course-instructor-section {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.instructor-info {
  align-items: center;
  gap: 1.2rem;
  margin-top: .5rem;
  display: flex;
}

.instructor-photo {
  object-fit: cover;
  border: 2px solid var(--color-primary-light);
  opacity: .5;
  background: #f7f7fa;
  border-radius: 50%;
  width: 64px;
  height: 64px;
}

.instructor-details {
  flex-direction: column;
  gap: .2rem;
  display: flex;
}

.instructor-name {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
}

.instructor-bio {
  color: #555;
  opacity: .92;
  font-size: .98rem;
}

.lesson-objectives-section, .course-objectives-section {
  margin-top: 1.5rem;
}

.lesson-objectives-list, .course-objectives-list {
  color: var(--color-text-primary);
  margin: .5rem 0 0 1.2rem;
  padding: 0;
  font-size: 1.05rem;
  list-style: inside;
}

.lesson-objectives-list li, .course-objectives-list li {
  margin-bottom: .4rem;
}

.lesson-materials-section, .course-materials-section {
  margin-top: 1.5rem;
}

.lesson-materials-list, .course-materials-list {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.lesson-materials-list li, .course-materials-list li {
  margin-bottom: .4rem;
}

.lesson-materials-list a, .course-materials-list a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
}

.lesson-related-section, .course-related-section {
  margin-top: 1.5rem;
}

.lesson-related-list, .course-related-list {
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.lesson-related-list li, .course-related-list li {
  margin-bottom: .4rem;
}

.lesson-related-list a, .course-related-list a {
  color: var(--color-secondary);
  font-weight: 500;
  text-decoration: underline;
}

.lesson-community-section, .course-community-section {
  margin-top: 1.5rem;
}

.lesson-community-section a, .course-community-section a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
}

.lesson-faq-section, .course-faq-section {
  margin-top: 1.5rem;
}

.lesson-faq-list, .course-faq-list {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.lesson-faq-list li, .course-faq-list li {
  color: #444;
  margin-bottom: .4rem;
  font-size: .99rem;
}

@media (width <= 1024px) {
  .course-detail-container {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem .5rem 0;
  }

  .course-sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 1.5rem;
    position: static;
  }
}

@media (width <= 600px) {
  .course-detail-hero-title {
    font-size: 1.3rem;
  }

  .course-detail-hero-content {
    padding: 0 .5rem;
  }

  .course-detail-container {
    padding: .5rem .2rem 0;
  }

  .course-sidebar, .course-section {
    border-radius: 1rem;
    padding: 1rem .5rem;
  }

  .course-extra-sections {
    margin-top: 1.2rem;
  }

  .course-related-list {
    flex-direction: column;
    gap: .5rem;
  }

  .instructor-photo {
    width: 48px;
    height: 48px;
  }
}

.community-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
}

.community-page .section h2:after {
  display: none;
}

.community-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.community-hero {
  padding: var(--space-24);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  position: relative;
  overflow: hidden;
}

.community-hero-content {
  max-width: 1200px;
  padding: 0 var(--space-6);
  gap: var(--space-12);
  z-index: 2;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.community-hero-text {
  z-index: 3;
}

.community-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
  animation: .8s ease-out communityFadeInUp;
}

.community-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: .9;
  animation: .8s ease-out .1s both communityFadeInUp;
}

.community-hero-description {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  opacity: .8;
  animation: .8s ease-out .2s both communityFadeInUp;
}

.community-hero-stats {
  gap: var(--space-6);
  animation: .8s ease-out .3s both communityFadeInUp;
  display: flex;
}

.hero-stat {
  text-align: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  transition: var(--transition-base);
  background: #ffffff1a;
  border: 1px solid #fff3;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  display: flex;
}

.hero-stat:hover {
  background: #ffffff26;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px #0000001a;
}

.hero-stat.user-progress {
  background: #10b98133;
  border-color: #10b9814d;
}

.hero-stat.user-progress:hover {
  background: #10b98140;
}

.hero-stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--sunset);
  text-shadow: 0 1px 2px #0000004d;
}

.hero-stat-label {
  font-size: var(--font-size-sm);
  opacity: .8;
  margin-top: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.community-hero-floating {
  width: 200px;
  height: 200px;
  position: relative;
}

.floating-1 {
  animation-delay: 0s;
  top: 20%;
  left: 10%;
}

.floating-3 {
  animation-delay: 3s;
  bottom: 30%;
  left: 30%;
}

.floating-5 {
  animation-delay: 2s;
  top: 40%;
  left: 50%;
}

.community-filters {
  padding: var(--space-8) 0;
  gap: var(--space-6);
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  display: flex;
}

.search-container {
  max-width: 500px;
  position: relative;
}

.community-search {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-bg-primary);
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.community-search:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.search-indicator {
  right: var(--space-4);
  animation: 1.5s ease-in-out infinite communityPulse;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.search-suggestions {
  background: var(--color-bg-primary);
  border: 2px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  border-top: none;
  max-height: 300px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.suggestion-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: var(--transition-base);
  border-bottom: 1px solid var(--color-border-light);
  align-items: center;
  display: flex;
}

.suggestion-item:hover {
  background: var(--color-bg-secondary);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-icon {
  font-size: var(--font-size-lg);
  margin-right: var(--space-3);
  text-align: center;
  width: 24px;
}

.suggestion-content {
  flex: 1;
}

.suggestion-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.suggestion-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.filter-container {
  gap: var(--space-4);
  align-items: center;
  display: flex;
}

.community-filter {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  cursor: pointer;
}

.community-filter:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.reset-filters {
  padding: var(--space-3) var(--space-4);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.reset-filters:hover {
  background: var(--color-secondary-light);
  transform: translateY(-1px);
}

.filter-confirmation, .reset-confirmation {
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-success);
  color: var(--color-text-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  animation: .3s ease-out communitySlideInDown;
  position: fixed;
}

.community-stats {
  margin: var(--space-12) 0;
  flex-direction: column;
}

.community-stats .section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  position: relative;
}

.community-stats .section-title:after {
  content: "";
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  width: 60px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.community-stats.animate-stats .community-stat-number {
  animation: 1s ease-out communityCountUp;
}

.community-stats-grid {
  gap: var(--space-6);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.community-stat-card {
  background: var(--color-bg-primary);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
}

.community-stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.community-stat-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.community-stat-card:hover:before {
  transform: scaleX(1);
}

.community-stat-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  display: block;
}

.community-stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.community-stat-label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.community-stat-trend {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.user-recommendations {
  margin: var(--space-12) 0;
}

.recommendations-grid {
  gap: var(--space-6);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  display: grid;
}

.recommendation-card {
  background: var(--color-bg-primary);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.recommendation-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.recommendation-icon {
  font-size: var(--font-size-3xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  width: 60px;
  height: 60px;
  color: var(--color-text-white);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.recommendation-content {
  flex: 1;
}

.recommendation-content h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.recommendation-content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

.recommendation-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.recommendation-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.community-features {
  margin: var(--space-12) 0;
  visibility: visible !important;
  display: block !important;
}

.features-grid {
  gap: var(--space-6);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
  visibility: visible !important;
  opacity: 1 !important;
}

.features-grid:not(.animate-features) .feature-card {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: translateY(0) !important;
}

.feature-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  opacity: 0;
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
}

.features-grid.animate-features .feature-card {
  animation: .6s ease-out forwards communityFadeInUp;
}

.feature-header {
  margin-bottom: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.feature-icon {
  border-radius: var(--radius-lg);
  width: 60px;
  height: 60px;
  font-size: var(--font-size-2xl);
  color: var(--color-text-white);
  box-shadow: var(--shadow-md);
  justify-content: center;
  align-items: center;
  display: flex;
}

.popularity-badge {
  background: var(--color-success);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.feature-content {
  margin-bottom: var(--space-4);
}

.feature-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.feature-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
}

.feature-stats {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.feature-footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.feature-category {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.feature-arrow {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  transition: var(--transition-base);
}

.feature-card:hover .feature-arrow {
  color: var(--color-primary);
  transform: translate(4px);
}

.no-results {
  text-align: center;
  padding: var(--space-12);
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.no-results-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  opacity: .5;
}

.no-results h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.reset-search {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.reset-search:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.recent-activity {
  margin: var(--space-12) 0;
}

.activity-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.activity-title {
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.activity-title h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.live-indicator {
  background: var(--color-error);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  animation: 2s ease-in-out infinite communityPulse;
}

.toggle-live-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.toggle-live-btn:hover {
  background: var(--color-secondary-light);
  transform: translateY(-1px);
}

.activity-list {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.activity-item {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--color-border-light);
  display: flex;
}

.activity-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.activity-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.activity-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-relaxed);
}

.activity-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.activity-achievement {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.activity-arrow {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  transition: var(--transition-base);
}

.activity-item:hover .activity-arrow {
  color: var(--color-primary);
  transform: translate(4px);
}

.no-activities {
  text-align: center;
  padding: var(--space-8);
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.no-activities-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  opacity: .5;
}

.no-activities h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.no-activities p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.activity-modal-overlay {
  z-index: 1000;
  backdrop-filter: blur(4px);
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.activity-modal {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  box-shadow: var(--shadow-xl);
  animation: .3s ease-out communitySlideInUp;
  overflow-y: auto;
}

.activity-modal-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.activity-modal-header h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.close-modal {
  font-size: var(--font-size-2xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  background: none;
  border: none;
}

.close-modal:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.activity-modal-content {
  gap: var(--space-4);
  display: flex;
}

.activity-modal-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.activity-modal-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.activity-modal-info {
  flex: 1;
}

.activity-modal-info h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.activity-modal-text {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-relaxed);
}

.activity-modal-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.activity-modal-achievement {
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  display: flex;
}

.achievement-icon {
  font-size: var(--font-size-lg);
}

.achievement-text {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.activity-modal-description {
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.activity-modal-description p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.community-cta {
  margin: var(--space-12) 0;
  text-align: center;
}

.cta-content {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  padding: var(--space-12);
  border-radius: var(--radius-2xl);
  color: var(--color-text-white);
  box-shadow: var(--shadow-lg);
}

.cta-content h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
}

.cta-content p {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-8);
  opacity: .9;
  line-height: var(--line-height-relaxed);
}

.cta-buttons {
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.community-loading {
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  flex-direction: column;
  min-height: 50vh;
  display: flex;
}

.community-loading p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

@media (width <= 768px) {
  .community-hero {
    padding: var(--space-20) 0 var(--space-8) 0;
  }

  .community-hero-content {
    gap: var(--space-8);
    text-align: center;
    grid-template-columns: 1fr;
  }

  .community-hero-title {
    font-size: var(--font-size-4xl);
  }

  .community-hero-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  .community-hero-floating {
    display: none;
  }

  .community-filters {
    padding: var(--space-6) var(--space-4);
  }

  .filter-container {
    flex-direction: column;
    align-items: stretch;
  }

  .community-stats-grid {
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .community-stat-card {
    padding: var(--space-4);
  }

  .community-stat-number {
    font-size: var(--font-size-2xl);
  }

  .recommendations-grid {
    grid-template-columns: 1fr;
  }

  .activity-header {
    gap: var(--space-4);
    flex-direction: column;
    align-items: stretch;
  }

  .activity-modal-content {
    text-align: center;
    flex-direction: column;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (width <= 480px) {
  .community-stats-grid {
    grid-template-columns: 1fr;
  }

  .hero-stat-number {
    font-size: var(--font-size-xl);
  }

  .activity-item {
    text-align: center;
    gap: var(--space-3);
    flex-direction: column;
  }

  .activity-arrow {
    display: none;
  }

  .search-suggestions {
    max-height: 200px;
  }

  .recommendation-card {
    text-align: center;
    flex-direction: column;
  }

  .recommendation-icon {
    align-self: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: var(--space-4);
  }

  .feature-header {
    gap: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }
}

.profile-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
}

.profile-container {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  margin: 0 auto;
  overflow: hidden;
}

.profile-header {
  padding: var(--space-12) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-white);
  position: relative;
  overflow: hidden;
}

.profile-header-content {
  max-width: 1200px;
  padding: 0 var(--space-8);
  z-index: 2;
  margin: 0 auto;
  position: relative;
}

.profile-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 4px #0000004d;
  animation: .8s ease-out profileFadeInUp;
}

.profile-subtitle {
  font-size: var(--font-size-lg);
  opacity: .9;
  margin-bottom: var(--space-8);
  animation: .8s ease-out .1s both profileFadeInUp;
}

.profile-stats {
  gap: var(--space-8);
  animation: .8s ease-out .2s both profileFadeInUp;
  display: flex;
}

.profile-stat {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: var(--transition-base);
  background: #ffffff1a;
  border: 1px solid #fff3;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.profile-stat:hover {
  background: #ffffff26;
  transform: translateY(-2px);
}

.stat-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  text-shadow: 0 1px 2px #0000004d;
}

.stat-label {
  font-size: var(--font-size-sm);
  opacity: .8;
  margin-top: var(--space-1);
}

.profile-floating {
  pointer-events: none;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
}

.floating-element {
  opacity: .7;
  font-size: 2rem;
  animation: 6s ease-in-out infinite profileFloat;
  position: absolute;
}

.floating-1 {
  animation-delay: 0s;
  top: 20%;
  right: 20%;
}

.floating-2 {
  animation-delay: 2s;
  top: 60%;
  right: 10%;
}

.floating-3 {
  animation-delay: 4s;
  bottom: 30%;
  right: 30%;
}

.floating-4 {
  animation-delay: 1s;
  top: 40%;
  right: 40%;
}

.success-message, .error-message, .save-confirmation {
  margin: var(--space-6) var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-medium);
  animation: .3s ease-out profileSlideInDown;
  display: flex;
}

.success-message {
  background: var(--color-success);
  color: #fff;
}

.error-message {
  background: var(--color-error);
  color: #fff;
}

.save-confirmation {
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

.success-icon, .error-icon, .confirmation-icon {
  font-size: var(--font-size-lg);
}

.profile-tabs {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
  padding: 0 var(--space-8);
  display: flex;
}

.tab-btn {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  flex: 1;
  display: flex;
  position: relative;
}

.tab-btn:hover {
  color: var(--color-primary);
  background: #6629320d;
}

.tab-btn.active {
  color: var(--color-primary);
  background: var(--color-bg-primary);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 8px 24px #6626324d;
}

.tab-icon {
  font-size: var(--font-size-lg);
}

.profile-content {
  padding: var(--space-8);
  min-height: 500px;
  transition: opacity var(--transition-base);
}

.profile-content.transitioning {
  opacity: .5;
}

.profile-form {
  max-width: 800px;
  margin: 0 auto;
}

.avatar-section {
  margin-bottom: var(--space-8);
}

.avatar-container {
  align-items: center;
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.avatar-preview {
  border: 3px solid var(--color-border-light);
  cursor: pointer;
  width: 120px;
  height: 120px;
  transition: var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.avatar-preview:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.avatar-preview.drag-over {
  border-color: var(--color-secondary);
  background: #6629321a;
  transform: scale(1.1);
}

.avatar-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  width: 100%;
  height: 100%;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  justify-content: center;
  align-items: center;
  display: flex;
}

.avatar-drop-hint {
  color: #fff;
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-2);
  opacity: 0;
  transition: var(--transition-base);
  background: #000000b3;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.avatar-preview:hover .avatar-drop-hint {
  opacity: 1;
}

.upload-overlay {
  background: #000000b3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.upload-progress {
  justify-content: center;
  align-items: center;
  display: flex;
}

.progress-circle {
  background: var(--color-secondary);
  width: 60px;
  height: 60px;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  animation: 2s linear infinite profileSpin;
  display: flex;
}

.avatar-upload-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.avatar-upload-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.avatar-upload-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.form-section {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}

.form-section h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  background: var(--color-bg-primary);
  transition: var(--transition-base);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.form-group input.error, .form-group textarea.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px #ef44441a;
}

.validation-error {
  color: #ef4444;
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
  display: block;
}

.char-count {
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.goals-container {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.goal-item {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  cursor: grab;
  transition: var(--transition-base);
  user-select: none;
  display: flex;
}

.goal-item:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.goal-item.dragging {
  opacity: .5;
  cursor: grabbing;
  transform: rotate(5deg);
}

.goal-text {
  flex: 1;
}

.remove-goal-btn {
  color: var(--color-text-white);
  font-size: var(--font-size-lg);
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: var(--transition-base);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.remove-goal-btn:hover {
  background: #fff3;
}

.goal-input-container {
  gap: var(--space-2);
  align-items: center;
  display: flex;
}

.goal-input-container input {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  flex: 1;
}

.add-goal-btn, .cancel-goal-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.add-goal-btn {
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

.add-goal-btn:hover {
  background: var(--color-secondary-light);
  transform: translateY(-1px);
}

.cancel-goal-btn {
  background: var(--color-border-light);
  color: var(--color-text-secondary);
}

.cancel-goal-btn:hover {
  background: var(--color-border);
}

.goals-limit {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.save-btn {
  padding: var(--space-4) var(--space-8);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  min-width: 200px;
}

.save-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.save-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.subscription-content {
  max-width: 800px;
  margin: 0 auto;
}

.subscription-status {
  margin-bottom: var(--space-8);
}

.status-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
}

.status-info {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

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

.status-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.status-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.status-value.active {
  color: #10b981;
}

.status-value.inactive {
  color: #ef4444;
}

.subscription-benefits {
  margin-bottom: var(--space-8);
}

.benefits-grid {
  gap: var(--space-4);
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.benefit-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  display: flex;
}

.benefit-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-icon {
  font-size: var(--font-size-xl);
}

.benefit-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.subscription-actions {
  margin-top: var(--space-6);
  justify-content: center;
  display: flex;
}

.subscribe-btn, .unsubscribe-btn {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  min-width: 200px;
}

.subscribe-btn {
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

.subscribe-btn:hover:not(:disabled) {
  background: var(--color-secondary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.unsubscribe-btn {
  color: #fff;
  background: #ef4444;
}

.unsubscribe-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-lg);
  background: #dc2626;
  transform: translateY(-2px);
}

.subscription-error {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: #dc2626;
  text-align: center;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.preferences-content {
  max-width: 800px;
  margin: 0 auto;
}

.preferences-section {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}

.preferences-section h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.preference-item {
  margin-bottom: var(--space-4);
}

.toggle-label {
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: flex;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  background: var(--color-border-light);
  width: 50px;
  height: 24px;
  transition: var(--transition-base);
  border-radius: 12px;
  position: relative;
}

.toggle-slider:before {
  content: "";
  width: 20px;
  height: 20px;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider {
  background: var(--color-primary);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider:before {
  transform: translate(26px);
}

.preference-description {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-left: 73px;
}

.loading-container {
  padding: var(--space-16);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.loading-spinner {
  border: 4px solid var(--color-border-light);
  border-top: 4px solid var(--color-primary);
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  animation: 1s linear infinite profileSpin;
}

.loading-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.subscription-badge {
  letter-spacing: .05em;
  background: #9d818914;
  border-radius: 2rem;
  min-width: 12rem;
  min-height: 2rem;
  margin: 1rem;
  padding: .5rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.mb-2-5rem {
  margin-bottom: 2.5rem;
}

.premium-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.premium-shadow {
  color: var(--color-text-white);
  box-shadow: 0 8px 32px 0 var(--shadow-xl);
}

.status-card {
  box-shadow: 0 4px 16px 0 var(--shadow-lg);
}

.free-gradient {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}

.status-label {
  font-weight: 600;
}

.status-value {
  font-weight: 500;
}

.neon-glow {
  text-shadow: 0 0 8px var(--color-primary-light);
}

.subscription-actions {
  gap: 1rem;
  display: flex;
}

.subscription-error {
  color: #ef4444;
  text-align: center;
  background: #fff0f0;
  border: 1px solid #ffd6d6;
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.upgrade-premium-label {
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: 600;
}

.mb-1-5rem {
  margin-bottom: 1.5rem;
}

@media (width <= 768px) {
  .profile-page {
    padding: var(--space-4);
  }

  .profile-header {
    padding: var(--space-8) var(--space-6);
  }

  .profile-title {
    font-size: var(--font-size-3xl);
  }

  .profile-stats {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .profile-floating {
    display: none;
  }

  .profile-tabs {
    flex-direction: column;
    padding: 0;
  }

  .tab-btn {
    padding: var(--space-3) var(--space-4);
  }

  .tab-btn.active {
    border-bottom: none;
    border-left: 3px solid var(--color-primary);
  }

  .profile-content {
    padding: var(--space-6);
  }

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

  .goals-container {
    flex-direction: column;
  }

  .goal-input-container {
    flex-direction: column;
    align-items: stretch;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .status-info {
    align-items: flex-start;
    gap: var(--space-1);
    flex-direction: column;
  }
}

@media (width <= 480px) {
  .profile-header {
    padding: var(--space-6) var(--space-4);
  }

  .profile-content, .form-section {
    padding: var(--space-4);
  }

  .status-info {
    font-size: var(--font-size-sm);
  }

  .profile-stats {
    gap: var(--space-2);
  }

  .profile-stat {
    padding: var(--space-3);
  }

  .stat-number {
    font-size: var(--font-size-lg);
  }
}

.login-immersive-bg {
  background: linear-gradient(120deg, var(--color-primary-lighter) 0%, var(--color-bg-secondary) 100%);
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow-x: hidden;
}

.login-immersive-bg-svg {
  z-index: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
}

.lotus-bg-svg {
  width: 100vw;
  min-width: 600px;
  max-width: 100vw;
  height: 100vh;
  min-height: 600px;
  max-height: 100vh;
  display: block;
}

.login-immersive-main {
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.login-immersive-heroform {
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: #ffffff8c;
  border-radius: 2.5rem;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 3.5rem;
  width: 100%;
  max-width: 900px;
  margin: 7vh auto 0;
  padding: 3.5rem 2.5rem;
  display: flex;
  box-shadow: 0 12px 48px #9d818921, 0 2px 8px #9d818914;
}

.login-immersive-hero {
  flex-direction: column;
  flex: 1.2;
  justify-content: center;
  align-items: flex-start;
  min-width: 320px;
  padding-right: 2.5rem;
  display: flex;
}

.login-immersive-logo {
  text-align: left;
  margin-bottom: .7rem;
  font-size: 4rem;
}

.login-immersive-title {
  font-family: var(--font-family-heading);
  color: var(--color-primary);
  margin-bottom: .5rem;
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.brand-highlight {
  color: var(--color-secondary);
  font-weight: 900;
}

.login-immersive-quote {
  color: var(--color-primary-light);
  font-size: 1.2rem;
  font-style: italic;
  font-family: var(--font-family-primary);
  margin-bottom: 1.3rem;
}

.login-immersive-unlock-list {
  color: var(--color-text-primary);
  margin: 0 auto 1.5rem 0;
  padding: 0;
  font-size: 1.08rem;
  list-style: none;
}

.login-immersive-unlock-list li {
  align-items: center;
  gap: .7rem;
  margin-bottom: .5rem;
  display: flex;
}

.login-immersive-formarea {
  flex: 1.1;
  justify-content: center;
  align-items: center;
  min-width: 340px;
  display: flex;
}

.login-immersive-card {
  border: 1.5px solid var(--color-primary-lighter);
  background: #ffffffd1;
  border-radius: 2rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2.2rem 2.2rem;
  display: flex;
  box-shadow: 0 8px 32px #50296621, 0 1.5px 6px #50296614;
}

.login-immersive-tabs {
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.2rem;
  display: flex;
}

.login-immersive-tab {
  color: var(--color-primary-light);
  cursor: pointer;
  letter-spacing: .01em;
  background: none;
  border: none;
  border-radius: 2rem;
  padding: .7rem 2.2rem;
  font-size: 1.15rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}

.login-immersive-tab.active, .login-immersive-tab:focus {
  background: var(--color-secondary-light);
  color: var(--color-primary);
  outline: none;
}

.login-immersive-form {
  flex-direction: column;
  gap: 1.3rem;
  display: flex;
}

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

.form-label-immersive {
  color: var(--color-primary-dark);
  margin-bottom: .2rem;
  font-size: 1.08rem;
  font-weight: 600;
}

.form-input-immersive {
  border: 1.5px solid var(--color-border-light);
  background: var(--color-bg-primary);
  border-radius: .9rem;
  padding: .85rem 1.1rem;
  font-size: 1.08rem;
  transition: border .2s, box-shadow .2s;
}

.form-input-immersive:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
  outline: none;
}

.input-wrapper-immersive {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.password-toggle-immersive {
  color: var(--color-primary-light);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .5rem;
  margin-left: .2rem;
  padding: .2rem .5rem;
  font-size: 1.3rem;
  transition: background .2s;
}

.password-toggle-immersive:focus {
  background: var(--color-primary-lighter);
  outline: none;
}

.password-strength-immersive {
  align-items: center;
  gap: .7rem;
  margin-top: .3rem;
  display: flex;
}

.strength-bar-immersive {
  background: var(--color-border-light);
  border-radius: 4px;
  width: 80px;
  height: 8px;
  overflow: hidden;
}

.strength-fill-immersive {
  border-radius: 4px;
  height: 100%;
  transition: width .3s, background .3s;
}

.strength-text-immersive {
  font-size: 1.01rem;
  font-weight: 500;
}

.password-match-immersive {
  align-items: center;
  gap: .4rem;
  margin-top: .2rem;
  font-size: 1.01rem;
  display: flex;
}

.password-match-immersive.match .match-icon-immersive {
  color: var(--color-success);
}

.password-match-immersive.no-match .match-icon-immersive {
  color: var(--color-error);
}

.login-alert-immersive {
  border-radius: .9rem;
  align-items: center;
  gap: .7rem;
  margin-bottom: .5rem;
  padding: .9rem 1.1rem;
  font-size: 1.08rem;
  font-weight: 600;
  display: flex;
}

.login-alert-immersive.error {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1.5px solid var(--color-border-error);
}

.login-alert-immersive.success {
  background: var(--color-success-light);
  color: var(--color-success);
  border: 1.5px solid var(--color-border-success);
}

.login-alert-immersive.lockout {
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary-light);
}

.alert-icon-immersive {
  font-size: 1.2rem;
}

.form-options-immersive {
  justify-content: flex-end;
  margin-bottom: .2rem;
  display: flex;
}

.forgot-password-immersive {
  color: var(--color-primary-light);
  font-size: 1.01rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}

.forgot-password-immersive:hover {
  color: var(--color-secondary-dark);
  text-decoration: underline;
}

.login-button-immersive {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 100%;
  color: var(--color-text-white);
  cursor: pointer;
  letter-spacing: .01em;
  border: none;
  border-radius: 1.3rem;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  margin-top: .7rem;
  padding: .7rem 2rem;
  font-size: 1.15rem;
  font-weight: 800;
  transition: background .2s, transform .2s;
  display: flex;
  box-shadow: 0 2px 8px #50296614;
}

.login-button-immersive:disabled {
  background: var(--color-border-light);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.btn-icon-immersive {
  font-size: 1.3rem;
}

.loading-spinner-immersive {
  border: 3px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  animation: 1s linear infinite spin;
  display: inline-block;
}

.login-divider-immersive {
  color: var(--color-primary-light);
  align-items: center;
  margin: 1.7rem 0 1.2rem;
  font-size: 1.08rem;
  display: flex;
}

.divider-line-immersive {
  background: var(--color-border-light);
  flex: 1;
  height: 1.5px;
}

.divider-text-immersive {
  padding: 0 1.3rem;
  font-size: 1.08rem;
}

.social-login-immersive {
  flex-direction: column;
  gap: .8rem;
  margin-bottom: .5rem;
  display: flex;
}

.social-btn-immersive {
  border: 1.5px solid var(--color-border-light);
  background: var(--color-bg-primary);
  color: var(--color-primary-light);
  cursor: pointer;
  border-radius: 1.3rem;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  padding: .9rem 0;
  font-size: 1.12rem;
  font-weight: 700;
  transition: background .2s, color .2s, border .2s;
  display: flex;
}

.social-btn-immersive.google {
  color: var(--color-error);
  border-color: var(--color-primary-lighter);
}

.social-btn-immersive.anonymous {
  color: var(--color-secondary-dark);
  border-color: var(--color-secondary-light);
}

.social-btn-immersive:hover {
  background: var(--color-secondary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.social-icon-immersive {
  font-size: 1.3rem;
}

.login-footer-immersive {
  text-align: center;
  color: var(--color-primary-light);
  margin: 2.5rem auto 1.5rem;
  font-size: 1.08rem;
}

.footer-link-immersive {
  color: var(--color-primary);
  margin: 0 .2rem;
  font-weight: 700;
  text-decoration: underline;
}

.footer-link-immersive:hover {
  color: var(--color-secondary-dark);
}

@media (width <= 1100px) {
  .login-immersive-heroform {
    gap: 2rem;
    max-width: 98vw;
    padding: 2.2rem .5rem;
  }

  .login-immersive-title {
    font-size: 2rem;
  }

  .login-immersive-logo {
    font-size: 2.5rem;
  }
}

@media (width <= 900px) {
  .login-immersive-heroform {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem .5rem;
  }

  .login-immersive-hero {
    text-align: center;
    align-items: center;
    min-width: 0;
    padding-right: 0;
  }

  .login-immersive-formarea {
    width: 100%;
    min-width: 0;
  }
}

@media (width <= 600px) {
  .login-immersive-main {
    min-height: 100vh;
    padding: .5rem 0;
  }

  .login-immersive-heroform {
    max-width: 100vw;
    box-shadow: none;
    border-radius: 0;
    padding: .5rem .2rem;
  }

  .login-immersive-card {
    border-radius: 1.2rem;
    padding: 1.2rem .5rem;
  }

  .login-immersive-title {
    font-size: 1.2rem;
  }

  .login-immersive-logo {
    font-size: 1.5rem;
  }
}

.contact-container {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
}

.contact-content {
  max-width: 1200px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.contact-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.contact-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.contact-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
  margin: 0 auto;
}

.contact-main {
  gap: var(--space-12);
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 2rem;
  display: grid;
}

.contact-form {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
}

.contact-form-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.form-group {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-direction: column;
  display: flex;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label.required:after {
  content: " *";
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.form-input, .form-textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
  background: var(--color-bg-primary);
  font-family: var(--font-family-primary);
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.form-input.error, .form-textarea.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px #dc26261a;
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.form-row {
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.contact-button {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  margin-top: var(--space-4);
  border: none;
}

.contact-button:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contact-button:disabled {
  background: var(--color-border-light);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.contact-info {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
}

.contact-info-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

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

.contact-method {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  display: flex;
}

.contact-method:hover {
  background: var(--color-bg-secondary);
  transform: translate(4px);
}

.contact-method-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg);
  width: 48px;
  height: 48px;
  color: var(--color-text-white);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.contact-method-content {
  flex: 1;
}

.contact-method-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.contact-method-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.contact-method-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.contact-method-link:hover {
  text-decoration: underline;
}

.contact-hours {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.contact-hours-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.hours-list {
  padding: 0;
  list-style: none;
}

.hours-list li {
  padding: var(--space-2) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  justify-content: space-between;
  display: flex;
}

.hours-list .day {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.contact-success {
  background: var(--color-success-light);
  border: 1px solid var(--color-border-success);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-top: var(--space-6);
}

.contact-success-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  margin-bottom: var(--space-3);
}

.contact-success-text {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.sitemap-grid {
  gap: var(--space-8);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  display: grid;
}

.sitemap-section-card {
  background: linear-gradient(135deg, #fffffff7 0%, #f0f0ffed 100%);
  border: 1.5px solid #60a5fa21;
  border-radius: 2rem;
  flex-direction: column;
  align-items: center;
  min-height: 340px;
  padding: 2.5rem 2rem 2rem;
  transition: box-shadow .2s, border .2s, transform .2s, background .2s;
  display: flex;
  position: relative;
  box-shadow: 0 8px 32px #5050781a;
}

.sitemap-section-card:hover {
  background: linear-gradient(135deg, #f0fafffc 0%, #fffffffc 100%);
  border-color: #60a5fa;
  transform: translateY(-8px)scale(1.02);
  box-shadow: 0 16px 48px #60a5fa21, 0 2px 8px #8b5cf61a;
}

.sitemap-section-icon {
  color: #60a5fa;
  filter: drop-shadow(0 2px 8px #60a5fa1a);
  margin-bottom: 1.2rem;
  font-size: 2.5rem;
  animation: 2.5s infinite alternate sitemapIconBounce;
}

@keyframes sitemapIconBounce {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

.sitemap-section-title {
  color: #222;
  letter-spacing: .02em;
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
  font-weight: 700;
}

.sitemap-links-grid {
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
  width: 100%;
  display: grid;
}

.sitemap-link-card {
  color: #222;
  cursor: pointer;
  background: linear-gradient(90deg, #e0e7ef 0%, #f8fafc 100%);
  border: 1px solid #60a5fa14;
  border-radius: 1.2rem;
  align-items: center;
  gap: .7em;
  padding: .9rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, box-shadow .2s, transform .2s;
  display: flex;
  box-shadow: 0 2px 8px #60a5fa12;
}

.sitemap-link-card:hover {
  color: #fff;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  transform: translateY(-2px)scale(1.04);
  box-shadow: 0 6px 24px #8b5cf62e;
}

.sitemap-link-icon {
  justify-content: center;
  align-items: center;
  font-size: 1.3em;
  display: flex;
}

.sitemap-link-label {
  flex: 1;
}

@media (width <= 768px) {
  .sitemap-grid, .sitemap-links-grid {
    grid-template-columns: 1fr;
  }

  .sitemap-section-card {
    min-height: 220px;
  }
}

@media (width <= 1024px) {
  .contact-main {
    gap: var(--space-8);
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .contact-title {
    font-size: var(--font-size-3xl);
  }

  .contact-form, .contact-info {
    padding: var(--space-6);
  }

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

@media (width <= 480px) {
  .contact-title {
    font-size: var(--font-size-2xl);
  }

  .contact-form, .contact-info {
    padding: var(--space-4);
  }

  .contact-method {
    text-align: center;
    flex-direction: column;
  }

  .contact-method-icon {
    align-self: center;
  }
}

.terms-container {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
}

.terms-content {
  max-width: 800px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.terms-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.terms-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.terms-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.terms-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.terms-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-light);
}

.terms-section-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.terms-section-content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-3) 0;
}

.terms-section-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
}

.terms-section-content p {
  margin-bottom: var(--space-4);
}

.terms-section-content ul, .terms-section-content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.terms-section-content li {
  margin-bottom: var(--space-2);
}

.terms-section-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.terms-section-content a {
  color: var(--color-primary);
  transition: border-color var(--transition-base);
  border-bottom: 1px solid #0000;
  text-decoration: none;
}

.terms-section-content a:hover {
  border-bottom-color: var(--color-primary);
}

.terms-footer {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-light);
}

.terms-footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.terms-footer-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.terms-footer-link:hover {
  text-decoration: underline;
}

@media (width <= 768px) {
  .terms-title {
    font-size: var(--font-size-3xl);
  }

  .terms-section {
    padding: var(--space-6);
  }

  .terms-section-title {
    font-size: var(--font-size-xl);
  }
}

@media (width <= 480px) {
  .terms-title {
    font-size: var(--font-size-2xl);
  }

  .terms-section {
    padding: var(--space-4);
  }

  .terms-section-content {
    font-size: var(--font-size-sm);
  }
}

.privacy-container {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
}

.privacy-content {
  max-width: 800px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.privacy-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.privacy-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.privacy-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.privacy-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.privacy-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-light);
}

.privacy-section-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.privacy-section-content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-3) 0;
}

.privacy-section-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
}

.privacy-section-content p {
  margin-bottom: var(--space-4);
}

.privacy-section-content ul, .privacy-section-content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.privacy-section-content li {
  margin-bottom: var(--space-2);
}

.privacy-section-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.privacy-section-content a {
  color: var(--color-primary);
  transition: border-color var(--transition-base);
  border-bottom: 1px solid #0000;
  text-decoration: none;
}

.privacy-section-content a:hover {
  border-bottom-color: var(--color-primary);
}

.privacy-highlight {
  background: var(--color-success-light);
  border: 1px solid var(--color-border-success);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.privacy-highlight-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  margin-bottom: var(--space-2);
}

.privacy-highlight-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.privacy-contact {
  background: var(--color-info-light);
  border: 1px solid var(--color-border-info);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  text-align: center;
}

.privacy-contact-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-info);
  margin-bottom: var(--space-3);
}

.privacy-contact-text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.privacy-contact-email {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.privacy-contact-email:hover {
  text-decoration: underline;
}

.privacy-footer {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-light);
}

.privacy-footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.privacy-footer-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.privacy-footer-link:hover {
  text-decoration: underline;
}

@media (width <= 768px) {
  .privacy-title {
    font-size: var(--font-size-3xl);
  }

  .privacy-section {
    padding: var(--space-6);
  }

  .privacy-section-title {
    font-size: var(--font-size-xl);
  }

  .privacy-contact {
    padding: var(--space-4);
  }
}

@media (width <= 480px) {
  .privacy-title {
    font-size: var(--font-size-2xl);
  }

  .privacy-section {
    padding: var(--space-4);
  }

  .privacy-section-content {
    font-size: var(--font-size-sm);
  }
}

.resources-page {
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(var(--color-primary-rgb), .02) 100%);
  z-index: 1;
  min-height: 100vh;
  position: relative;
}

.resources-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  padding: var(--space-24);
  text-align: center;
  color: var(--color-text-white);
  position: relative;
  overflow: hidden;
}

.resources-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff1a 0%, #0000 50%);
  animation: 6s ease-in-out infinite resourcesFloat;
  position: absolute;
  inset: 0;
}

.resources-hero-content {
  text-align: center;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.resources-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 4px 8px #0000004d;
  line-height: 1.1;
  animation: .8s ease-out resourcesFadeInUp;
}

.resources-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: .95;
  text-shadow: 0 2px 4px #0003;
  animation: .8s ease-out .2s both resourcesFadeInUp;
}

.resources-hero-intro {
  font-size: var(--font-size-base);
  opacity: .9;
  text-shadow: 0 1px 2px #0000001a;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  animation: .8s ease-out .4s both resourcesFadeInUp;
}

.resources-highlights-container {
  gap: var(--space-8);
  margin-top: var(--space-8);
  display: grid;
}

.resources-highlights-grid {
  max-width: 1200px;
  margin: 1rem auto;
}

.resource-highlight-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  gap: var(--space-8);
  opacity: 0;
  align-items: flex-start;
  margin-bottom: 2rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.resource-highlight-section.animate-in {
  opacity: 1;
  animation: .8s cubic-bezier(.4, 0, .2, 1) both resourcesFadeInUp;
}

.resource-highlight-section:hover {
  box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .2);
  transform: translateY(-4px);
}

.resource-highlight-section.alt {
  background: linear-gradient(135deg, #fffffffa 0%, rgba(var(--color-background), .98) 100%);
}

.resource-highlight-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl);
  width: 80px;
  height: 80px;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .2);
  margin-top: var(--space-2);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  transition: all .3s;
  display: flex;
}

.resource-highlight-section:hover .resource-highlight-icon {
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), .3);
  transform: scale(1.05);
}

.resource-highlight-content {
  flex: 1;
}

.resource-highlight-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.resource-highlight-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

.resource-highlight-list {
  margin: 0 0 var(--space-6) 0;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 0;
  list-style: none;
  display: grid;
}

.resource-highlight-item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-background);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding-left: var(--space-8);
  border: 1px solid rgba(var(--color-primary-rgb), .1);
  line-height: 1.5;
  transition: all .3s;
  position: relative;
}

.resource-highlight-item:hover {
  background: rgba(var(--color-primary-rgb), .05);
  border-color: rgba(var(--color-primary-rgb), .2);
  color: var(--color-text-primary);
  transform: translate(4px);
}

.resource-highlight-item:before {
  content: "✓";
  left: var(--space-3);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  position: absolute;
}

.resource-highlight-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .2);
  align-items: center;
  gap: var(--space-2);
  border: none;
  transition: all .3s;
  display: inline-flex;
}

.resource-highlight-btn:hover {
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), .3);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%);
  transform: translateY(-2px);
}

.resource-highlight-btn:active {
  transform: translateY(0);
}

.resource-highlight-section:first-child {
  animation-delay: .1s;
}

.resource-highlight-section:nth-child(2) {
  animation-delay: .2s;
}

.resource-highlight-section:nth-child(3) {
  animation-delay: .3s;
}

.resource-highlight-section:nth-child(4) {
  animation-delay: .4s;
}

.resource-highlight-section:nth-child(5) {
  animation-delay: .5s;
}

.resource-highlight-section:nth-child(6) {
  animation-delay: .6s;
}

.resource-highlight-section:nth-child(7) {
  animation-delay: .7s;
}

.resource-highlight-section:nth-child(8) {
  animation-delay: .8s;
}

.resource-highlight-section:nth-child(9) {
  animation-delay: .9s;
}

.resource-highlight-section:nth-child(10) {
  animation-delay: 1s;
}

.resource-highlight-section:nth-child(11) {
  animation-delay: 1.1s;
}

@media (width <= 1024px) {
  .resources-container {
    padding: 0 var(--space-4);
  }

  .resource-highlight-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (width <= 768px) {
  .resources-hero {
    padding: var(--space-20) 0 var(--space-8) 0;
  }

  .resources-hero-title {
    font-size: var(--font-size-4xl);
  }

  .resources-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .resources-hero-intro {
    font-size: var(--font-size-sm);
  }

  .resources-container {
    padding: 0 var(--space-3);
  }

  .resource-highlight-section {
    text-align: center;
    padding: var(--space-6);
    gap: var(--space-6);
    flex-direction: column;
  }

  .resource-highlight-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    font-size: 2.5rem;
  }

  .resource-highlight-title {
    font-size: var(--font-size-xl);
  }

  .resource-highlight-desc {
    font-size: var(--font-size-sm);
  }

  .resource-highlight-list {
    gap: var(--space-2);
    grid-template-columns: 1fr;
  }

  .resource-highlight-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    padding-left: var(--space-6);
  }

  .resource-highlight-item:before {
    left: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .resource-highlight-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
  }
}

@media (width <= 480px) {
  .resources-hero {
    padding: var(--space-12) 0 var(--space-6) 0;
  }

  .resources-hero-title {
    font-size: var(--font-size-3xl);
  }

  .resources-hero-subtitle {
    font-size: var(--font-size-base);
  }

  .resources-hero-intro {
    font-size: var(--font-size-xs);
  }

  .resource-highlight-section {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .resource-highlight-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .resource-highlight-title {
    font-size: var(--font-size-lg);
  }

  .resource-highlight-desc {
    font-size: var(--font-size-xs);
  }

  .resource-highlight-item {
    padding: var(--space-2);
    font-size: var(--font-size-xs);
    padding-left: var(--space-5);
  }

  .resource-highlight-item:before {
    left: var(--space-2);
    font-size: var(--font-size-xs);
  }

  .resource-highlight-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }
}

.teaching-landing-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #66263205 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.teaching-hero {
  text-align: center;
  min-height: 80vh;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(135deg, #6626321a 0%, #8b3d470d 100%);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.teaching-hero-background {
  z-index: 1;
  background: linear-gradient(135deg, #f4acb71a 0%, #ffdab90d 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.teaching-hero-overlay {
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, #f4acb71a 0%, #0000 50%), radial-gradient(circle at 70% 80%, #ffdab91a 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.teaching-hero-content {
  text-align: center;
  z-index: 3;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.teaching-hero-icon {
  margin-bottom: var(--space-6);
  font-size: 4rem;
  animation: 6s ease-in-out infinite teachingFloat;
}

.teaching-hero-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.teaching-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.4;
}

.teaching-hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.7;
}

.teaching-hero-stats {
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  display: flex;
}

.teaching-filters {
  backdrop-filter: blur(20px);
  padding: var(--space-6) 0;
  z-index: 10;
  background: #fffc;
  border-bottom: 1px solid #6626321a;
  position: sticky;
  top: 0;
}

.teaching-filters-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.teaching-main-content {
  max-width: 1200px;
  padding: var(--space-4) var(--space-6);
  gap: var(--space-16);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.teaching-section {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.teaching-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.teaching-section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.teaching-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  position: relative;
}

.teaching-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  width: 10rem;
  height: 3px;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.teaching-section-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.teaching-cards-grid {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  display: grid;
}

.teaching-card {
  background: var(--color-background);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  cursor: pointer;
  border: 1px solid #66263214;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #6626320f;
}

.teaching-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 100%;
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

.teaching-card:hover {
  border-color: #66263233;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px #66263226;
}

.teaching-card:hover:before {
  transform: scaleX(1);
}

.teaching-card-header {
  margin-bottom: var(--space-6);
}

.teaching-card-icon {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #f4acb71a;
  font-size: 2rem;
  display: inline-block;
}

.teaching-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.teaching-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.teaching-card-content {
  margin-bottom: var(--space-6);
  flex: 1;
}

.teaching-card-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.teaching-card-keypoints {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: #f4acb70d;
}

.keypoints-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.keypoints-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.keypoint-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
  line-height: 1.5;
  position: relative;
}

.keypoint-item:before {
  content: "";
  color: var(--color-primary);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.teaching-card-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.teaching-card-meta {
  gap: var(--space-4);
  display: flex;
}

.meta-icon {
  font-size: .875rem;
}

.teaching-card-cta {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
  border: none;
  transition: all .3s;
  display: flex;
}

.teaching-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #6626324d;
}

.teaching-card-cta:hover .cta-arrow {
  transform: translate(4px);
}

.teaching-cta {
  padding: var(--space-20) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #6626320d 0%, #8b3d470d 100%);
}

.teaching-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.teaching-cta-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.teaching-cta-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.teaching-cta-buttons {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

@media (width <= 1024px) {
  .teaching-cards-grid {
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }

  .teaching-hero-stats {
    gap: var(--space-6);
  }
}

@media (width <= 768px) {
  .teaching-hero {
    min-height: 70vh;
    padding: var(--space-16) var(--space-4);
  }

  .teaching-hero-stats {
    gap: var(--space-4);
    flex-direction: column;
  }

  .teaching-filters-container {
    flex-direction: column;
    align-items: center;
  }

  .filter-btn {
    width: 100%;
    max-width: 200px;
  }

  .teaching-main-content {
    padding: var(--space-12) var(--space-4);
    gap: var(--space-12);
  }

  .teaching-section {
    padding: var(--space-8);
  }

  .teaching-cards-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .teaching-card {
    min-height: auto;
  }

  .teaching-card-footer {
    align-items: stretch;
    gap: var(--space-4);
    flex-direction: column;
  }

  .teaching-card-meta {
    justify-content: center;
  }

  .teaching-cta {
    padding: var(--space-16) var(--space-4);
  }

  .teaching-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (width <= 480px) {
  .teaching-hero-title {
    font-size: 2rem;
  }

  .teaching-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .teaching-hero-description {
    font-size: var(--font-size-base);
  }

  .teaching-section-title {
    font-size: var(--font-size-2xl);
  }

  .teaching-card {
    padding: var(--space-6);
  }

  .teaching-card-title {
    font-size: var(--font-size-lg);
  }
}

.history-landing-page {
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(var(--color-primary-rgb), .02) 100%);
  padding: 0;
}

.hero-with-image .hero-background {
  opacity: .6;
}

.history-landing-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-12) auto;
  padding: 0 var(--space-6);
}

.history-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
}

.history-landing-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.history-timeline-section {
  padding: var(--space-16) 0;
  --parallax-progress: 0;
  position: relative;
  overflow: hidden;
}

.timeline-container {
  max-width: 1400px;
  padding: 0 var(--space-6);
  margin: 0 auto;
  position: relative;
}

.timeline-line {
  z-index: 1;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.timeline-line-inner {
  background: linear-gradient(180deg, transparent 0%, var(--color-primary) 20%, var(--color-primary) 80%, transparent 100%);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .3);
  border-radius: 2px;
  animation: 3s ease-in-out infinite alternate timelineGlow;
  position: absolute;
  inset: 0;
}

.timeline-items {
  z-index: 2;
  position: relative;
}

.timeline-item {
  margin: var(--space-16) 0;
  opacity: 0;
  transition: all .8s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  transform: translateY(50px);
}

.timeline-item-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item.timeline-left {
  padding-right: 50%;
}

.timeline-item.timeline-right {
  padding-left: 50%;
}

.timeline-indicator {
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-left .timeline-indicator {
  right: 42%;
}

.timeline-right .timeline-indicator {
  left: 42%;
}

.timeline-dot {
  background: var(--color-primary);
  border: 4px solid var(--color-background);
  width: 20px;
  height: 20px;
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .4);
  border-radius: 50%;
  animation: 2s ease-in-out infinite timelinePulse;
}

.timeline-connector {
  background: linear-gradient(90deg, transparent, var(--color-primary));
  width: 60px;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-left .timeline-connector {
  right: 20px;
}

.timeline-right .timeline-connector {
  left: 20px;
  transform: translateY(-50%)scaleX(-1);
}

.timeline-card {
  backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), .08);
  border: 1px solid rgba(var(--color-primary-rgb), .1);
  margin: 0 var(--space-4);
  background: #fffffff2;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.timeline-card:hover {
  box-shadow: 0 12px 40px rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .2);
  transform: translateY(-4px);
}

.timeline-period-years {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.timeline-period-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.timeline-card-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
}

.timeline-card-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.timeline-card-details {
  margin-bottom: var(--space-4);
}

.timeline-detail-section {
  margin-bottom: var(--space-3);
}

.timeline-detail-section h5 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.timeline-detail-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-detail-section li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  padding-left: var(--space-3);
  position: relative;
}

.timeline-detail-section li:before {
  content: "";
  color: var(--color-primary);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.timeline-card-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .3);
  border: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.timeline-card-cta:hover {
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), .4);
  transform: translateY(-2px);
}

.timeline-card-cta:active {
  transform: translateY(0);
}

.timeline-image {
  z-index: 1;
  max-width: 350px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-left .timeline-image {
  min-width: 400px;
  right: 3%;
}

.timeline-right .timeline-image {
  min-width: 400px;
  left: 3%;
}

.timeline-image-inner {
  object-fit: cover;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 8px 32px #00000026;
}

.timeline-image-inner:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px #00000040;
}

.timeline-expanded-content {
  margin-top: var(--space-6);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), .08);
  border: 1px solid rgba(var(--color-primary-rgb), .1);
  background: #fffffffa;
  animation: .5s cubic-bezier(.4, 0, .2, 1) expandContent;
}

.expanded-content-inner {
  gap: var(--space-6);
  grid-template-columns: 2fr 1fr;
  display: grid;
}

.expanded-text p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.significance-section, .summary-section {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(var(--color-primary-rgb), .03);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.significance-section h5, .summary-section h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.expanded-details {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.detail-group {
  background: rgba(var(--color-secondary-rgb), .03);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-secondary);
}

.detail-group h5 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.detail-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-group li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
  position: relative;
}

.detail-group li:before {
  content: "→";
  color: var(--color-secondary);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.history-footer {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .05) 0%, rgba(var(--color-secondary-rgb), .03) 100%);
  padding: var(--space-16) 0;
  margin-top: var(--space-16);
}

.history-footer .footer-content {
  text-align: center;
  max-width: 800px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.history-footer .footer-content h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.history-footer .footer-content p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.7;
}

.history-footer .footer-actions {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.history-footer .footer-link {
  color: #fff;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .3);
  text-decoration: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.history-footer .footer-link:hover {
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), .4);
  transform: translateY(-2px);
}

@media (width <= 1024px) {
  .timeline-container {
    padding: 0 var(--space-4);
  }

  .timeline-item.timeline-left, .timeline-item.timeline-right {
    padding-left: 60px;
    padding-right: 60px;
  }

  .timeline-line {
    left: 60px;
  }

  .timeline-left .timeline-indicator, .timeline-right .timeline-indicator {
    left: 58px;
  }

  .timeline-left .timeline-connector, .timeline-right .timeline-connector {
    left: 78px;
    transform: translateY(-50%);
  }

  .timeline-image {
    display: none;
  }

  .expanded-content-inner {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .history-timeline-section {
    padding: var(--space-12) 0;
  }

  .timeline-item {
    margin: var(--space-12) 0;
  }

  .timeline-item.timeline-left, .timeline-item.timeline-right {
    padding-left: 50px;
    padding-right: var(--space-4);
  }

  .timeline-line {
    left: 40px;
  }

  .timeline-left .timeline-indicator, .timeline-right .timeline-indicator {
    left: 38px;
  }

  .timeline-left .timeline-connector, .timeline-right .timeline-connector {
    width: 40px;
    left: 58px;
  }

  .timeline-card {
    padding: var(--space-4);
    margin: 0;
  }

  .timeline-period-title {
    font-size: var(--font-size-xl);
  }

  .timeline-card-subtitle {
    font-size: var(--font-size-base);
  }

  .footer-actions {
    flex-direction: column;
    align-items: center;
  }

  .footer-link {
    text-align: center;
    width: 100%;
    max-width: 300px;
  }
}

@media (width <= 480px) {
  .timeline-item.timeline-left, .timeline-item.timeline-right {
    padding-left: 40px;
    padding-right: var(--space-3);
  }

  .timeline-line {
    left: 30px;
  }

  .timeline-left .timeline-indicator, .timeline-right .timeline-indicator {
    left: 28px;
  }

  .timeline-left .timeline-connector, .timeline-right .timeline-connector {
    width: 30px;
    left: 48px;
  }

  .timeline-dot {
    width: 16px;
    height: 16px;
  }

  .timeline-period-title {
    font-size: var(--font-size-lg);
  }

  .timeline-card-description {
    font-size: var(--font-size-sm);
  }

  .expanded-content-inner {
    gap: var(--space-3);
  }

  .expanded-text p {
    font-size: var(--font-size-sm);
  }
}

.philosophy-landing-page {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  min-height: 100vh;
  padding: 2rem 0;
}

.philosophy-hero {
  backdrop-filter: blur(10px);
  text-align: center;
  background: #fffffff2;
  border-radius: 20px;
  margin-bottom: 3rem;
  padding: 3rem;
  box-shadow: 0 20px 40px #0000001a;
}

.philosophy-hero-title {
  color: var(--primary-color);
  text-shadow: 2px 2px 4px #0000001a;
  margin-bottom: 1rem;
  font-size: 3.5rem;
  font-weight: 700;
}

.philosophy-hero-description {
  color: var(--text-color);
  max-width: 800px;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.philosophy-user-stats {
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
  display: flex;
}

.philosophy-stat {
  text-align: center;
  background: var(--background-color);
  border-radius: 15px;
  min-width: 120px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px #0000001a;
}

.philosophy-stat-number {
  color: var(--accent-color);
  font-size: 2.5rem;
  font-weight: 700;
  display: block;
}

.philosophy-stat-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: .5rem;
  font-size: .9rem;
}

.philosophy-hero-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.philosophy-quiz-btn {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.philosophy-recent-section {
  margin-bottom: 3rem;
}

.philosophy-recent-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  display: grid;
}

.philosophy-recent-card {
  backdrop-filter: blur(10px);
  cursor: pointer;
  background: #fffffff2;
  border: 2px solid #0000;
  border-radius: 15px;
  padding: 1.5rem;
  transition: all .3s;
}

.philosophy-recent-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px #0000001a;
}

.philosophy-recent-icon {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.philosophy-recent-title {
  color: var(--text-color);
  margin-bottom: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.philosophy-recent-subtitle {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: .9rem;
}

.philosophy-recent-progress {
  margin-top: 1rem;
}

.progress-bar {
  background: var(--border-color);
  border-radius: 4px;
  width: 100%;
  height: 8px;
  margin-bottom: .5rem;
  overflow: hidden;
}

.progress-text {
  color: var(--text-muted);
  font-size: .8rem;
}

.philosophy-recommendations-section {
  margin-bottom: 3rem;
}

.philosophy-recommendations-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  display: grid;
}

.philosophy-recommendation-card {
  backdrop-filter: blur(10px);
  cursor: pointer;
  border: 2px solid var(--accent-color);
  background: #fffffff2;
  border-radius: 15px;
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.philosophy-recommendation-card:before {
  content: "";
  background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.philosophy-recommendation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px #0000001a;
}

.philosophy-recommendation-icon {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.philosophy-recommendation-title {
  color: var(--text-color);
  margin-bottom: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.philosophy-recommendation-subtitle {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: .9rem;
}

.philosophy-recommendation-reason {
  color: var(--accent-color);
  font-size: .8rem;
  font-style: italic;
}

.philosophy-section-title {
  color: var(--china-rose);
  text-shadow: 2px 2px 4px #0000004d;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.philosophy-landing-sections {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.philosophy-section {
  margin-bottom: 3rem;
}

.philosophy-card-list {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  display: grid;
}

.philosophy-card {
  backdrop-filter: blur(10px);
  cursor: pointer;
  background: #fffffff2;
  border: 2px solid #0000;
  border-radius: 20px;
  padding: 2rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.philosophy-card:before {
  content: "";
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.philosophy-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #00000026;
}

.philosophy-card-content {
  margin-bottom: 1.5rem;
}

.philosophy-card-title {
  color: var(--text-color);
  margin-bottom: .5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.philosophy-card-subtitle {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

.philosophy-card-desc {
  color: var(--text-color);
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.6;
}

.philosophy-card-progress {
  margin-top: 1rem;
}

.philosophy-card-cta {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 25px;
  padding: .8rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .3s;
}

.philosophy-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #0003;
}

.philosophy-quiz-modal {
  z-index: 1000;
  background: #000c;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.philosophy-quiz-content {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  padding: 3rem;
  overflow-y: auto;
  box-shadow: 0 20px 40px #0000004d;
}

.philosophy-quiz-header {
  text-align: center;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.philosophy-quiz-header h2 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.philosophy-quiz-progress {
  color: var(--text-muted);
  margin-bottom: .5rem;
  font-size: 1rem;
}

.philosophy-quiz-score {
  color: var(--accent-color);
  font-size: 1.2rem;
  font-weight: 600;
}

.philosophy-quiz-question {
  margin-bottom: 2rem;
}

.philosophy-quiz-question h3 {
  color: var(--text-color);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5;
}

.philosophy-quiz-options {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.philosophy-quiz-option {
  background: var(--background-color);
  border: 2px solid var(--border-color);
  text-align: left;
  cursor: pointer;
  border-radius: 15px;
  padding: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: all .3s;
}

.philosophy-quiz-option:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), .05);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #0000001a;
}

.philosophy-quiz-results {
  text-align: center;
}

.philosophy-quiz-results h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.philosophy-quiz-final-score {
  color: var(--accent-color);
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
}

.philosophy-quiz-actions {
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.philosophy-card-animated {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
  transform: translateY(40px)scale(.98);
}

.philosophy-card-animated.in-view {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.philosophy-card-accent {
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  border-radius: 4px;
  width: 48px;
  height: 5px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px #60a5fa1a;
}

.philosophy-card-keypoints {
  color: #444;
  opacity: .92;
  margin: 1rem 0 .5rem;
  padding-left: 1.2rem;
  font-size: .98rem;
  list-style: inside;
}

.philosophy-card-keypoints li {
  margin-bottom: .3rem;
  line-height: 1.5;
}

.philosophy-card-quote {
  color: #a855f7;
  opacity: .92;
  border-left: 3px solid #a855f7;
  margin: 1rem 0 .5rem;
  padding-left: 1.2rem;
  font-size: .98rem;
  font-style: italic;
}

.philosophy-card {
  background: #fffffff7;
  border: 2px solid #0000;
  border-radius: 20px;
  transition: box-shadow .3s, border .3s, transform .3s, background .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px #50507814;
}

.philosophy-card:hover, .philosophy-card:focus {
  background: #fffffffc;
  border-color: #60a5fa;
  transform: translateY(-10px)scale(1.025);
  box-shadow: 0 16px 48px #60a5fa21, 0 2px 8px #8b5cf61a;
}

.philosophy-card:active {
  transform: scale(.98);
}

.philosophy-card-cta {
  color: #fff;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  border: none;
  border-radius: 1.2rem;
  margin-top: 1.2rem;
  padding: .9rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 600;
  transition: background .2s, box-shadow .2s, transform .2s;
  box-shadow: 0 2px 12px #60a5fa1a;
}

.philosophy-card-cta:hover {
  background: linear-gradient(90deg, #a855f7 0%, #60a5fa 100%);
  transform: translateY(-2px)scale(1.04);
  box-shadow: 0 6px 24px #8b5cf62e;
}

@media (width <= 768px) {
  .philosophy-hero {
    padding: 2rem;
  }

  .philosophy-hero-title {
    font-size: 2.5rem;
  }

  .philosophy-hero-description {
    font-size: 1rem;
  }

  .philosophy-user-stats {
    gap: 1.5rem;
  }

  .philosophy-stat {
    min-width: 100px;
    padding: 1rem;
  }

  .philosophy-stat-number {
    font-size: 2rem;
  }

  .philosophy-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .philosophy-recent-grid, .philosophy-recommendations-grid, .philosophy-card-list {
    grid-template-columns: 1fr;
  }

  .philosophy-quiz-content {
    padding: 2rem;
  }

  .philosophy-quiz-header h2 {
    font-size: 1.5rem;
  }

  .philosophy-quiz-question h3 {
    font-size: 1.1rem;
  }
}

@media (width <= 480px) {
  .philosophy-hero {
    padding: 1.5rem;
  }

  .philosophy-hero-title {
    font-size: 2rem;
  }

  .philosophy-user-stats {
    flex-direction: column;
    align-items: center;
  }

  .philosophy-stat {
    width: 100%;
    max-width: 200px;
  }

  .philosophy-card, .philosophy-quiz-content {
    padding: 1.5rem;
  }

  .philosophy-quiz-option {
    padding: 1rem;
    font-size: .9rem;
  }
}

.anatomy-landing-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, #9d818905 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
}

.anatomy-landing-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-12) auto;
  padding: 0 var(--space-6);
}

.anatomy-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
}

.anatomy-landing-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.anatomy-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.anatomy-section:hover {
  border-color: #9d818933;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px #9d818926;
}

.anatomy-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  text-align: center;
  position: relative;
}

.anatomy-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  width: 10rem;
  height: 3px;
  position: absolute;
  top: -1rem;
  left: 40%;
  transform: translate(-50%);
}

.anatomy-card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.anatomy-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.anatomy-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  height: 4px;
  transition: var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.anatomy-card:hover:before {
  opacity: 1;
}

.anatomy-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.anatomy-card-content {
  text-align: center;
}

.anatomy-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.anatomy-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.anatomy-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.anatomy-card-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  width: 80%;
  left: 10%;
  top: var(--space-1);
  border: none;
  margin: auto;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  box-shadow: 0 4px 12px #9d81894d;
}

.anatomy-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #9d818966;
}

.anatomy-card-cta:active {
  transform: translateY(0);
}

.anatomy-section-skeletal {
  border-left: 4px solid var(--color-primary);
}

.anatomy-section-muscular {
  border-left: 4px solid var(--color-secondary);
}

.anatomy-section-nervous {
  border-left: 4px solid var(--color-accent);
}

@media (width <= 1024px) {
  .anatomy-landing-sections {
    padding: 0 var(--space-4);
  }

  .anatomy-card-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (width <= 768px) {
  .anatomy-landing-page {
    padding: var(--space-16) 0;
  }

  .anatomy-landing-header {
    padding: 0 var(--space-4);
  }

  .anatomy-landing-title {
    font-size: var(--font-size-4xl);
  }

  .anatomy-landing-intro {
    font-size: var(--font-size-base);
  }

  .anatomy-landing-sections {
    padding: 0 var(--space-4);
    gap: var(--space-8);
  }

  .anatomy-section {
    padding: var(--space-6);
  }

  .anatomy-section-title {
    font-size: var(--font-size-2xl);
  }

  .anatomy-card-list {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .anatomy-card {
    padding: var(--space-4);
  }

  .anatomy-card-title {
    font-size: var(--font-size-lg);
  }

  .anatomy-card-desc {
    font-size: var(--font-size-sm);
  }

  .anatomy-card-cta {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }
}

@media (width <= 480px) {
  .anatomy-landing-title {
    font-size: var(--font-size-3xl);
  }

  .anatomy-landing-intro {
    font-size: var(--font-size-sm);
  }

  .anatomy-section {
    padding: var(--space-4);
  }

  .anatomy-section-title {
    font-size: var(--font-size-xl);
  }

  .anatomy-card {
    padding: var(--space-3);
  }

  .anatomy-card-title {
    font-size: var(--font-size-base);
  }

  .anatomy-card-subtitle, .anatomy-card-desc {
    font-size: var(--font-size-xs);
  }

  .anatomy-card-cta {
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-3);
  }
}

.asana-landing-page {
  background: var(--color-background);
  min-height: 100vh;
}

.asana-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  min-height: 60vh;
  color: var(--color-text-white);
  padding: var(--space-24);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.asana-hero:before, .asana-hero:after {
  content: "";
  opacity: .2;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.asana-hero-content {
  text-align: center;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.asana-hero-badge {
  backdrop-filter: blur(10px);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-4);
  background: #fff3;
  border: 1px solid #ffffff4d;
  animation: .8s ease-out asanasFadeInUp;
  display: inline-block;
}

.asana-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 4px 8px #0000004d;
  line-height: 1.1;
  animation: .8s ease-out .2s both asanasFadeInUp;
}

.asana-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4);
  opacity: .95;
  text-shadow: 0 2px 4px #0003;
  animation: .8s ease-out .4s both asanasFadeInUp;
}

.asana-hero-intro {
  font-size: var(--font-size-base);
  opacity: .9;
  max-width: 700px;
  margin: 0 auto var(--space-6) auto;
  line-height: 1.5;
}

.floating-element {
  opacity: .1;
  animation: 4s ease-in-out infinite asanasFloat;
  position: absolute;
}

.floating-element:first-child {
  animation-delay: 0s;
  top: 10%;
  left: 10%;
}

.floating-element:nth-child(2) {
  animation-delay: 1s;
  top: 20%;
  right: 15%;
}

.floating-element:nth-child(3) {
  animation-delay: 2s;
  bottom: 20%;
  left: 15%;
}

.floating-element:nth-child(4) {
  animation-delay: 3s;
  bottom: 10%;
  right: 10%;
}

.asana-filters-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

.search-icon {
  left: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  transition: all var(--transition-base);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.asana-search-input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4)  + 30px);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: all var(--transition-base);
  background: #fff;
}

.asana-search-input:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px #d4a5741a;
}

.reset-filters-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-background-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.reset-filters-btn.confirmed {
  background: var(--color-secondary);
  color: #fff;
  transform: scale(1.05);
}

.filters-indicator {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  animation: .3s ease-out asanasFadeIn;
}

.asana-content {
  padding: var(--space-12) 0;
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-light) 100%);
  position: relative;
  overflow: hidden;
}

.asana-content:before {
  content: "";
  opacity: .5;
  z-index: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(0,0,0,0.03)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.asana-grid {
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding: 0 var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  display: grid;
}

.asana-card {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--radius-xl);
  cursor: pointer;
  background: #ffffffd9;
  border: 1px solid #ffffff4d;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  animation: .6s ease-out both asanasFadeInUp, 4s ease-in-out infinite asanasGlassPulse;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #00000014, 0 5px 15px #0000000a, inset 0 1px #fff9;
}

.asana-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  opacity: 0;
  z-index: 2;
  height: 4px;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.asana-card:after {
  content: "";
  z-index: 1;
  opacity: 0;
  background: linear-gradient(135deg, #ffffff1a 0%, #ffffff0d 100%);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  inset: 0;
}

.asana-card .shimmer {
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #fff0 0%, #fff3 50%, #fff0 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100%);
}

.asana-card:hover .shimmer {
  animation: 1.5s ease-in-out asanasShimmer;
}

.asana-card:hover:before, .asana-card:hover:after {
  opacity: 1;
}

.asana-card:hover {
  border-color: #ffffff80;
  animation: .6s ease-out both asanasFadeInUp, 4s ease-in-out infinite asanasGlassPulse, 3s ease-in-out infinite asanasGlow;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0000001f, 0 10px 20px #0000000f, inset 0 1px #fffc;
}

.asana-card.hovered {
  border-color: rgba(var(--color-secondary-rgb), .3);
  transform: translateY(-12px)scale(1.03);
  box-shadow: 0 25px 50px #00000026, 0 12px 30px #00000014, inset 0 1px #fffc;
}

.asana-card-header {
  padding: var(--space-6);
  z-index: 2;
  background: linear-gradient(135deg, #ffffffb3 0%, #ffffffe6 100%);
  border-bottom: 1px solid #fff3;
  position: relative;
}

.asana-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
}

.asana-card-sanskrit {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  font-style: italic;
  font-weight: var(--font-weight-medium);
}

.asana-card-badges {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.asana-type-badge {
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.asana-level-badge {
  background: var(--color-primary-light);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.asana-card-content {
  padding: var(--space-6);
  z-index: 2;
  background: #ffffff80;
  position: relative;
}

.asana-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.asana-card-benefits {
  margin-top: var(--space-4);
}

.asana-card-benefits h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.asana-card-benefits li {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  padding-left: var(--space-3);
  position: relative;
}

.asana-card-footer {
  padding: var(--space-4) var(--space-6);
  z-index: 2;
  background: linear-gradient(135deg, #fff9 0%, #fffc 100%);
  border-top: 1px solid #fff3;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.asana-cta {
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 10px rgba(var(--color-secondary-rgb), .3);
  border: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.asana-cta:after {
  content: "";
  background: linear-gradient(90deg, #fff0 0%, #ffffff1a 50%, #fff0 100%);
  width: 200%;
  height: 200%;
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: -50%;
  left: -50%;
  transform: rotate(45deg)translateY(-100%);
}

.asana-cta:hover {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
  box-shadow: 0 6px 15px rgba(var(--color-secondary-rgb), .4);
  transform: translateY(-2px);
}

.asana-cta:hover:after {
  transform: rotate(45deg)translateY(100%);
}

.no-results {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  background: #fff;
}

.no-results-icon {
  font-size: var(--font-size-6xl);
  margin-bottom: var(--space-4);
  opacity: .5;
  animation: 3s ease-in-out infinite asanasFloat;
}

.no-results h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.no-results p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.pagination {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.pagination-button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: #fff;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  height: 44px;
  display: flex;
}

.pagination-button.active {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  transform: scale(1.05);
}

@keyframes asanasFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes asanasFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes asanasGlassPulse {
  0%, to {
    backdrop-filter: blur(12px) saturate(180%);
  }

  50% {
    backdrop-filter: blur(15px) saturate(200%);
  }
}

@keyframes asanasShimmer {
  0% {
    transform: translate(-100%);
  }

  to {
    transform: translate(100%);
  }
}

@keyframes asanasGlow {
  0%, to {
    box-shadow: 0 10px 30px #00000014, 0 5px 15px #0000000a, inset 0 1px #fff9;
  }

  50% {
    box-shadow: 0 15px 40px #0000001f, 0 8px 20px #00000014, inset 0 1px #fffc;
  }
}

@media (width <= 768px) {
  .asana-hero {
    padding: var(--space-20) 0 var(--space-8) 0;
    min-height: 400px;
  }

  .asana-hero-title {
    font-size: var(--font-size-4xl);
  }

  .asana-hero-subtitle {
    font-size: var(--font-size-xl);
  }

  .asana-hero-intro {
    font-size: var(--font-size-base);
  }

  .hero-stats {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }

  .filters-container {
    gap: var(--space-4);
    flex-direction: column;
  }

  .asana-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .asana-card-header, .asana-card-content {
    padding: var(--space-4);
  }

  .pagination {
    gap: var(--space-1);
  }

  .pagination-button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    min-width: 40px;
    height: 40px;
  }

  .pagination-info {
    margin: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .asana-hero {
    padding: var(--space-12) 0 var(--space-6) 0;
    min-height: 350px;
  }

  .asana-hero-title {
    font-size: var(--font-size-3xl);
  }

  .asana-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-stats {
    gap: var(--space-3);
  }

  .hero-stat {
    flex: 1;
    min-width: 80px;
  }

  .hero-stat-number {
    font-size: var(--font-size-xl);
  }

  .hero-stat-label {
    font-size: var(--font-size-xs);
  }

  .pagination {
    gap: var(--space-2);
    flex-direction: column;
  }

  .pagination-info {
    margin-bottom: var(--space-2);
    order: -1;
  }
}

.chakra-landing-page {
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(var(--color-primary-rgb), .03) 50%, rgba(var(--color-secondary-rgb), .02) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.chakra-landing-page:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 20% 80%, #9b59b60d 0%, #0000 50%), radial-gradient(circle at 80% 20%, #3498db0d 0%, #0000 50%), radial-gradient(circle at 40% 40%, #27ae6008 0%, #0000 50%);
  animation: 20s ease-in-out infinite chakrasEnergyFlow;
  position: absolute;
  inset: 0;
}

.chakra-landing-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
  z-index: 1;
  position: relative;
}

.chakra-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-tertiary), var(--color-quaternary), var(--color-quinary));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  animation: 3s ease-in-out infinite alternate chakrasTitleGlow;
}

.chakra-landing-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.7;
  font-weight: var(--font-weight-medium);
}

.chakra-section {
  background: var(--color-bg-primary);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.chakra-section:before {
  content: "";
  position: absolute;
}

.chakra-section:hover {
  box-shadow: 0 12px 48px rgba(var(--color-primary-rgb), .12);
  transform: translateY(-4px);
}

.chakra-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  position: relative;
}

.chakra-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  width: 10rem;
  height: 3px;
  animation: 2s ease-in-out infinite alternate chakrasTitleUnderline;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.chakra-flow-diagram {
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #9b59b60d 0%, #3498db0d 100%);
  border: 1px solid #9b59b61a;
  flex-direction: column;
  display: flex;
}

.chakra-flow-item {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: #ffffffb3;
  transition: all .3s;
  display: flex;
  position: relative;
}

.chakra-flow-item:hover {
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .1);
  background: #ffffffe6;
  transform: translate(8px);
}

.chakra-flow-number {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  animation: 2s ease-in-out infinite chakrasPulse;
  display: flex;
  box-shadow: 0 2px 8px #9b59b64d;
}

.chakra-flow-info {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.chakra-flow-info strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.chakra-flow-info span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.chakra-card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.chakra-card {
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 24px rgba(var(--color-primary-rgb), .08);
  border: 1px solid rgba(var(--color-primary-rgb), .12);
  padding: var(--space-8);
  min-height: 300px;
  color: inherit;
  background: #fffffff2;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.chakra-card, .chakra-card * {
  text-decoration: none !important;
}

.chakra-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-tertiary));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.chakra-card:hover {
  box-shadow: 0 12px 40px rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .2);
  transform: translateY(-8px)scale(1.02);
}

.chakra-card-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.chakra-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
  text-decoration: none;
}

.chakra-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  background: rgba(var(--color-secondary-rgb), .1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  align-self: flex-start;
  text-decoration: none;
}

.chakra-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  flex: 1;
  line-height: 1.6;
}

.chakra-card .sanskrit-name {
  font-family: Noto Sans Devanagari, serif;
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  background: rgba(var(--color-primary-rgb), .05);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  text-decoration: none;
}

.chakra-card .chakra-energy-indicators {
  gap: var(--space-3);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

.chakra-card .energy-indicator {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.chakra-card .location-tag {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #3498db4d;
}

.chakra-card .location-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #3498db66;
}

.chakra-card .element-tag {
  background: linear-gradient(135deg, var(--color-tertiary), var(--color-quaternary));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #27ae604d;
}

.chakra-card .element-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #27ae6066;
}

.chakra-card .color-tag {
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 1px 2px #0000004d;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #0003;
}

.chakra-card .color-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #0000004d;
}

.chakra-card .mantra-tag {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #9b59b64d;
}

.chakra-card .mantra-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #9b59b666;
}

@media (width <= 1024px) {
  .chakra-landing-sections {
    padding: 0 var(--space-4);
  }

  .chakra-card-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (width <= 768px) {
  .chakra-landing-page {
    padding: var(--space-20) 0;
  }

  .chakra-landing-header {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-8);
  }

  .chakra-landing-title {
    font-size: var(--font-size-4xl);
  }

  .chakra-landing-intro {
    font-size: var(--font-size-base);
  }

  .chakra-landing-sections {
    padding: 0 var(--space-3);
    gap: var(--space-8);
  }

  .chakra-section {
    padding: var(--space-6);
  }

  .chakra-section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .chakra-flow-diagram {
    padding: var(--space-4);
  }

  .chakra-flow-item {
    padding: var(--space-2) var(--space-3);
  }

  .chakra-flow-number {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }

  .chakra-card-list {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .chakra-card {
    padding: var(--space-6);
    min-height: 260px;
  }

  .chakra-card-title {
    font-size: var(--font-size-xl);
  }

  .chakra-card-desc {
    font-size: var(--font-size-sm);
  }
}

@media (width <= 480px) {
  .chakra-landing-title {
    font-size: var(--font-size-3xl);
  }

  .chakra-landing-intro {
    font-size: var(--font-size-sm);
  }

  .chakra-section {
    padding: var(--space-4);
  }

  .chakra-section-title {
    font-size: var(--font-size-xl);
  }

  .chakra-card {
    padding: var(--space-4);
    min-height: 220px;
  }

  .chakra-card-title {
    font-size: var(--font-size-lg);
  }

  .chakra-card-subtitle, .chakra-card-desc {
    font-size: var(--font-size-xs);
  }

  .chakra-properties {
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    background: #ffffffd9;
    flex-wrap: wrap;
    display: flex;
    box-shadow: 0 2px 12px #9b59b614;
  }

  .property {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    flex: 220px;
  }

  .characteristics-grid {
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    display: flex;
  }

  .characteristic-group {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: #9b59b612;
    flex: 220px;
    min-width: 200px;
  }

  .balanced-list, .imbalanced-list {
    font-size: var(--font-size-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .balanced-list li {
    color: var(--color-primary);
    margin-bottom: var(--space-1);
  }

  .imbalanced-list li {
    color: #e74c3c;
    margin-bottom: var(--space-1);
  }

  .healing-tools {
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    display: flex;
  }

  .tool-group {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: #3498db12;
    flex: 220px;
    min-width: 200px;
  }

  .crystal-tags, .oil-tags {
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
    display: flex;
  }

  .crystal-tag, .oil-tag {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    box-shadow: 0 1px 4px #9b59b626;
  }

  .oil-tag {
    background: linear-gradient(135deg, var(--color-tertiary), var(--color-quaternary));
  }
}

.ayurveda-landing-page {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 25%, var(--color-secondary-light) 50%, var(--color-secondary-lighter) 75%, var(--color-tertiary-light) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.ayurveda-landing-page:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 20% 80%, #2d50161a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #7fb0691a 0%, #0000 50%), radial-gradient(circle at 40% 40%, #a8d5ba14 0%, #0000 50%);
  animation: 20s ease-in-out infinite ayurvedaNatureFlow;
  position: absolute;
  inset: 0;
}

.ayurveda-landing-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
  z-index: 1;
  position: relative;
}

.ayurveda-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-tertiary-light) 0%, var(--color-secondary-lighter) 25%, var(--color-secondary-light) 50%, var(--color-primary-light) 75%, var(--color-primary-dark) 100%);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px #d4e9c54d;
  background-clip: text;
  line-height: 1.1;
  animation: 4s ease-in-out infinite ayurvedaTitleGrowth;
}

.ayurveda-landing-intro {
  font-size: var(--font-size-lg);
  color: #fffffff2;
  margin-bottom: var(--space-8);
  line-height: 1.7;
  font-weight: var(--font-weight-medium);
  text-shadow: 0 2px 4px #0000004d;
}

.ayurveda-landing-sections {
  max-width: 1200px;
  padding: 0 var(--space-6);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.ayurveda-section {
  background: var(--color-bg-primary);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.ayurveda-section:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light), var(--color-secondary-light), var(--color-secondary-lighter));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  height: 4px;
  animation: 3s ease-in-out infinite ayurvedaHealingFlow;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ayurveda-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px #0003;
}

.ayurveda-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  position: relative;
}

.ayurveda-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  width: 10rem;
  height: 3px;
  animation: 2s ease-in-out infinite ayurvedaTitlePulse;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.elements-healing-grid {
  gap: var(--space-6);
  margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  display: grid;
}

.element-healing-card {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #2d50160d 0%, #4a7c590d 100%);
  border: 1px solid #2d50161a;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.element-healing-card:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.element-healing-card:hover:before {
  left: 100%;
}

.element-healing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #2d501626;
}

.element-icon {
  font-size: var(--font-size-3xl);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 3s ease-in-out infinite ayurvedaElementFloat;
}

.element-content {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.element-content strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.element-content span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.dosha-healing-overview {
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #7fb0690d 0%, #a8d5ba0d 100%);
  border: 1px solid #7fb0691a;
  flex-direction: column;
  display: flex;
}

.dosha-healing-item {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: #ffffffb3;
  transition: all .3s;
  display: flex;
  position: relative;
}

.dosha-healing-item:hover {
  background: #ffffffe6;
  transform: translate(8px);
  box-shadow: 0 4px 16px #7fb0691a;
}

.dosha-healing-number {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  animation: 2s ease-in-out infinite ayurvedaDoshaPulse;
  display: flex;
  box-shadow: 0 2px 8px #2d50164d;
}

.dosha-healing-info {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.dosha-healing-info strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.dosha-healing-info span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.healing-practices-grid {
  gap: var(--space-4);
  margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.healing-practice {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(135deg, #a8d5ba0d 0%, #d4e9c50d 100%);
  border: 1px solid #a8d5ba1a;
  transition: all .3s;
}

.healing-practice:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #a8d5ba1a;
}

.healing-practice h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.healing-practice p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.ayurveda-card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.ayurveda-card {
  backdrop-filter: blur(15px);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  min-height: 320px;
  color: inherit;
  background: #fffffff2;
  border: 1px solid #fff3;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #0000001f;
}

.ayurveda-card, .ayurveda-card * {
  text-decoration: none !important;
}

.ayurveda-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light), var(--color-secondary-light));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  height: 4px;
  animation: 4s ease-in-out infinite ayurvedaCardHealing;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ayurveda-card:hover {
  border-color: #2d50164d;
  transform: translateY(-8px)scale(1.02);
  box-shadow: 0 16px 48px #0003;
}

.ayurveda-card-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.ayurveda-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
  text-decoration: none;
}

.ayurveda-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-light);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: #4a7c591a;
  align-self: flex-start;
  text-decoration: none;
}

.ayurveda-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  flex: 1;
  line-height: 1.6;
}

.ayurveda-card .sanskrit-name {
  font-family: Noto Sans Devanagari, serif;
  font-size: var(--font-size-xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary-dark);
  text-align: center;
  background: #2d50160d;
  text-decoration: none;
  animation: 3s ease-in-out infinite ayurvedaSanskritGlow;
}

.ayurveda-card .ayurveda-healing-indicators {
  gap: var(--space-3);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

.ayurveda-card .healing-indicator {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.ayurveda-card .elements-tag {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #2d50164d;
}

.ayurveda-card .elements-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #2d501666;
}

.ayurveda-card .season-tag {
  background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary-lighter));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #7fb0694d;
}

.ayurveda-card .season-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #7fb06966;
}

.ayurveda-card .time-tag {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #4a7c594d;
}

.ayurveda-card .time-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #4a7c5966;
}

.ayurveda-card .life-stage-tag {
  background: linear-gradient(135deg, var(--color-secondary-lighter), var(--color-tertiary-light));
  color: var(--color-primary-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #a8d5ba4d;
}

.ayurveda-card .life-stage-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #a8d5ba66;
}

.ayurveda-hero {
  min-height: 420px;
  margin-bottom: var(--space-12);
  border-radius: 2rem;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #5050781a;
}

.ayurveda-hero-bg {
  object-fit: cover;
  z-index: 0;
  filter: blur(8px) brightness(.7) saturate(1.1);
  opacity: .55;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transition: filter .5s;
  position: absolute;
  top: 0;
  left: 0;
}

.ayurveda-hero-overlay {
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, #a8d5ba2e 0%, #ffffff21 100%);
  width: 100%;
  height: 100%;
  animation: 12s ease-in-out infinite alternate ayurvedaHeroFloat;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes ayurvedaHeroFloat {
  0% {
    opacity: .18;
  }

  to {
    opacity: .28;
  }
}

.ayurveda-hero-content {
  z-index: 2;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: #fff;
  text-align: center;
  background: #ffffff2e;
  border: 1.5px solid #ffffff2e;
  border-radius: 2rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 2rem;
  position: relative;
  box-shadow: 0 8px 32px #5050781a;
}

@media (width <= 768px) {
  .ayurveda-hero-content {
    padding: 2rem 1rem;
  }

  .ayurveda-hero {
    min-height: 220px;
  }
}

@media (width <= 1024px) {
  .ayurveda-landing-sections {
    padding: 0 var(--space-4);
  }

  .ayurveda-landing-sections .ayurveda-card-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .ayurveda-landing-sections .elements-healing-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (width <= 768px) {
  .ayurveda-landing-page {
    padding: var(--space-20) 0;
  }

  .ayurveda-landing-header {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-8);
  }

  .ayurveda-landing-title {
    font-size: var(--font-size-4xl);
  }

  .ayurveda-landing-intro {
    font-size: var(--font-size-base);
  }

  .ayurveda-landing-sections {
    padding: 0 var(--space-3);
    gap: var(--space-8);
  }

  .ayurveda-section {
    padding: var(--space-6);
  }

  .ayurveda-section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .elements-healing-grid {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .element-healing-card, .dosha-healing-overview {
    padding: var(--space-4);
  }

  .dosha-healing-item {
    padding: var(--space-3) var(--space-4);
  }

  .dosha-healing-number {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }

  .healing-practices-grid {
    grid-template-columns: 1fr;
  }

  .ayurveda-card-list {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .ayurveda-card {
    padding: var(--space-6);
    min-height: 280px;
  }

  .ayurveda-card-title {
    font-size: var(--font-size-xl);
  }

  .ayurveda-card-desc {
    font-size: var(--font-size-sm);
  }
}

@media (width <= 480px) {
  .ayurveda-landing-title {
    font-size: var(--font-size-3xl);
  }

  .ayurveda-landing-intro {
    font-size: var(--font-size-sm);
  }

  .ayurveda-section {
    padding: var(--space-4);
  }

  .ayurveda-section-title {
    font-size: var(--font-size-xl);
  }

  .ayurveda-card {
    padding: var(--space-4);
    min-height: 240px;
  }

  .ayurveda-card-title {
    font-size: var(--font-size-lg);
  }

  .ayurveda-card-subtitle, .ayurveda-card-desc {
    font-size: var(--font-size-xs);
  }

  .sanskrit-name {
    font-size: var(--font-size-lg);
    padding: var(--space-2) var(--space-3);
  }
}

.meditation-page {
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
  min-height: 100vh;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

.meditation-page:before {
  content: "";
  pointer-events: none;
  z-index: 0;
  opacity: .7;
  background: radial-gradient(circle at 20% 80%, #7877c61a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ff77c61a 0%, #0000 50%), radial-gradient(circle at 40% 40%, #78dbff0d 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.meditation-hero {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70vh;
  min-height: 500px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.meditation-hero-video {
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: .4;
  filter: blur(1px) brightness(.7);
  width: 100%;
  height: 100%;
  transition: all .8s;
  position: absolute;
  top: 0;
  left: 0;
}

.meditation-hero-overlay {
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(#0003 0%, #0009 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.meditation-header-content {
  z-index: 3;
  text-align: center;
  color: var(--color-text-white);
  pointer-events: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem;
  animation: 1.2s ease-out fadeInUp;
  display: flex;
  position: relative;
}

.meditation-title {
  letter-spacing: -.02em;
  text-shadow: 0 4px 20px #00000080;
  color: var(--color-text-white);
  background: linear-gradient(135deg, var(--color-text-white) 0%, var(--color-bg-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 300;
}

.meditation-subtitle {
  opacity: .9;
  color: var(--color-bg-secondary);
  text-shadow: 0 2px 10px #0000004d;
  letter-spacing: .01em;
  max-width: 600px;
  margin-bottom: 3rem;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
}

.meditation-audio-controls {
  -webkit-backdrop-filter: blur(20px);
  background: #ffffff14;
  border: 1px solid #ffffff1a;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  height: 40px;
  margin-bottom: 2rem;
  padding: .75rem 2rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 32px #0000004d;
}

.meditation-audio-controls:hover {
  background: #ffffff1f;
  border-color: #fff3;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px #0006;
}

.audio-play-pause {
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #fff3 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-left: 25px;
  padding-left: 9px;
  font-size: 1.2rem;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 16px #0003;
}

.audio-play-pause:hover {
  background: linear-gradient(135deg, #ffffff4d 0%, #fff3 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 20px #0000004d;
}

.audio-play-pause:active {
  transform: scale(.95);
}

.audio-progress-container {
  flex: 1;
  align-items: center;
  gap: 1rem;
  max-width: 300px;
  display: flex;
}

.audio-progress-bar {
  cursor: pointer;
  background: #fff3;
  border-radius: 2px;
  flex: 1;
  height: 4px;
  position: relative;
  overflow: hidden;
}

.audio-progress-bar:before {
  content: "";
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--color-tertiary), var(--color-tertiary-dark));
  border-radius: 2px;
  transition: width .1s;
  position: absolute;
  top: 0;
  left: 0;
}

.audio-time {
  color: #fffc;
  text-align: center;
  pointer-events: auto;
  min-width: 45px;
  font-size: .875rem;
  font-weight: 500;
}

.meditation-container {
  background: var(--color-bg-primary);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  z-index: 10;
  padding-top: var(--space-12);
  margin-top: -40px;
  position: relative;
}

.meditation-content {
  padding: var(--space-12);
}

.meditation-main-content {
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  position: relative;
}

.meditation-header {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.meditation-header:before {
  content: "";
  opacity: .1;
  z-index: 1;
  position: absolute;
  inset: 0;
}

.guided-sessions-section {
  margin-bottom: 5rem;
}

.guided-sessions-title {
  color: #fff;
  text-align: center;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 3rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
}

.guided-sessions-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  display: grid;
}

.guided-session-card {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #ffffff14 0%, #ffffff0a 100%);
  border: 1px solid #ffffff1a;
  border-radius: 1.5rem;
  flex-direction: column;
  height: 280px;
  padding: 0;
  transition: all .4s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.guided-session-card:before {
  content: "";
  opacity: 0;
  z-index: 1;
  background: linear-gradient(135deg, #60a5fa1a 0%, #8b5cf61a 100%);
  width: 100%;
  height: 100%;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.guided-session-card:hover {
  border-color: #fff3;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0000004d;
}

.guided-session-card:hover:before {
  opacity: 1;
}

.session-video {
  object-fit: cover;
  opacity: .6;
  filter: blur(.5px);
  width: 100%;
  height: 60%;
  transition: all .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.guided-session-card:hover .session-video {
  opacity: .8;
  filter: blur();
}

.session-content {
  z-index: 2;
  background: linear-gradient(#0000 0%, #000000b3 100%);
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.session-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.session-duration {
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  background: #ffffff26;
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.play-btn {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #fff3 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  transition: all .3s;
  display: flex;
}

.session-title {
  color: #fff;
  text-shadow: 0 2px 10px #00000080;
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.session-description {
  color: #fffc;
  text-shadow: 0 1px 5px #00000080;
  box-shadow: var(--shadow-xl);
  font-size: .95rem;
  line-height: 1.5;
}

.session-header {
  margin-bottom: var(--space-4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.session-duration {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: .9;
}

.play-btn {
  width: 40px;
  height: 40px;
  color: var(--color-text-white);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: var(--transition-base);
  background: #fff3;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.play-btn:hover {
  background: #ffffff4d;
  transform: scale(1.1);
}

.session-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.session-description {
  font-size: var(--font-size-base);
  opacity: .9;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.session-icon {
  font-size: var(--font-size-3xl);
  text-align: right;
  opacity: .8;
}

.techniques-section {
  margin-bottom: 5rem;
}

.techniques-title {
  color: #fff;
  text-align: center;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 3rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
}

.techniques-grid {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  display: grid;
}

.technique-card {
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #ffffff14 0%, #ffffff0a 100%);
  border: 1px solid #ffffff1a;
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.technique-card:before {
  content: "";
  opacity: 0;
  z-index: 1;
  background: linear-gradient(135deg, #60a5fa0d 0%, #8b5cf60d 100%);
  width: 100%;
  height: 100%;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.technique-card:hover {
  border-color: #fff3;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0003;
}

.technique-card:hover:before {
  opacity: 1;
}

.technique-header {
  z-index: 2;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  position: relative;
}

.technique-icon {
  color: #60a5fa;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #60a5fa33 0%, #8b5cf633 100%);
  border: 1px solid #fff3;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  font-size: 2rem;
  transition: all .3s;
  display: flex;
}

.technique-card:hover .technique-icon {
  background: linear-gradient(135deg, #60a5fa4d 0%, #8b5cf64d 100%);
  border-color: #ffffff4d;
  transform: scale(1.05);
}

.technique-meta {
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  display: flex;
}

.technique-duration {
  color: #60a5fa;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #60a5fa33 0%, #3b82f633 100%);
  border: 1px solid #60a5fa4d;
  border-radius: 20px;
  width: fit-content;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.technique-difficulty {
  color: #a855f7;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #8b5cf633 0%, #a855f733 100%);
  border: 1px solid #8b5cf64d;
  border-radius: 20px;
  width: fit-content;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.technique-title {
  color: #fff;
  z-index: 2;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 1rem;
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}

.technique-description {
  color: #fffc;
  z-index: 2;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
}

.technique-benefits {
  z-index: 2;
  margin-bottom: 1.5rem;
  position: relative;
}

.technique-benefits h4 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 600;
}

.technique-benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.technique-benefits li {
  color: #ffffffb3;
  padding: .5rem 0 .5rem 1.5rem;
  font-size: .875rem;
  line-height: 1.5;
  position: relative;
}

.technique-benefits li:before {
  content: "✓";
  color: #60a5fa;
  font-size: 1rem;
  font-weight: 600;
  position: absolute;
  left: 0;
}

.learn-more-btn {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  letter-spacing: .025em;
  background: linear-gradient(135deg, #60a5fa33 0%, #8b5cf633 100%);
  border: 1px solid #fff3;
  border-radius: 1rem;
  width: 100%;
  padding: .75rem 1.5rem;
  font-weight: 500;
  transition: all .3s;
  position: relative;
}

.learn-more-btn:hover {
  background: linear-gradient(135deg, #60a5fa4d 0%, #8b5cf64d 100%);
  border-color: #ffffff4d;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px #0003;
}

.learn-more-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px #0003;
}

.technique-details {
  margin-bottom: var(--space-6);
}

.detail-section {
  margin-bottom: var(--space-4);
}

.detail-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.detail-content {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 var(--space-12) var(--space-3) var(--space-12);
}

.benefits-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit-item {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-1);
  padding-left: var(--space-4);
  position: relative;
}

.benefit-item:before {
  content: "";
  color: var(--color-tertiary);
  font-weight: var(--font-weight-bold);
  position: absolute;
  left: 0;
}

.practice-btn {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  font-size: var(--font-size-base);
  border: none;
}

.practice-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.breathing-exercise {
  text-align: center;
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #60a5fa1a 0%, #8b5cf61a 100%);
  border: 1px solid #ffffff1a;
  border-radius: 2rem;
  margin-bottom: 4rem;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.breathing-exercise:before {
  content: "";
  z-index: -1;
  background: radial-gradient(circle at 30% 70%, #60a5fa26 0%, #0000 50%), radial-gradient(circle at 70% 30%, #8b5cf626 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.breathing-title {
  font-family: var(--font-family-heading);
  color: #fff;
  text-shadow: 0 4px 20px #0000004d;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
}

.breathing-instructions {
  color: #fffc;
  max-width: 500px;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.breathing-circle {
  background: radial-gradient(circle, #ffffff0d 0%, #0000 70%);
  border: 2px solid #ffffff4d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  margin: 0 auto 3rem;
  animation: 4s ease-in-out infinite breathingPulse;
  display: flex;
  position: relative;
}

@keyframes breathingPulse {
  0%, to {
    opacity: .8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.breathing-circle:before {
  content: "";
  border: 1px solid #fff3;
  border-radius: 50%;
  width: 80%;
  height: 80%;
  animation: 4s ease-in-out infinite reverse breathingInner;
  position: absolute;
}

@keyframes breathingInner {
  0%, to {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(.8);
  }
}

.breathing-text {
  color: #fff;
  text-shadow: 0 2px 10px #0000004d;
  letter-spacing: .02em;
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
}

.breathing-start-btn {
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: .01em;
  background: linear-gradient(135deg, #ffffff26 0%, #ffffff1a 100%);
  border: 1px solid #fff3;
  border-radius: 50px;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all .3s;
}

.breathing-start-btn:hover {
  background: linear-gradient(135deg, #ffffff40 0%, #ffffff26 100%);
  border-color: #ffffff4d;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #0003;
}

.breathing-start-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px #0003;
}

.meditation-timer {
  text-align: center;
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #ffffff14 0%, #ffffff0a 100%);
  border: 1px solid #ffffff1a;
  border-radius: 2rem;
  margin-bottom: 3rem;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.meditation-timer:before {
  content: "";
  z-index: 1;
  background: linear-gradient(135deg, #8b5cf60d 0%, #3b82f60d 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.timer-title {
  color: #fff;
  z-index: 2;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 2rem;
  font-family: Inter, sans-serif;
  font-size: 2rem;
  font-weight: 300;
  position: relative;
}

.timer-display {
  color: #60a5fa;
  text-shadow: 0 0 30px #60a5fa4d;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2rem;
  font-family: Inter, monospace;
  font-size: 4rem;
  font-weight: 200;
  position: relative;
}

.timer-controls {
  z-index: 2;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  display: flex;
  position: relative;
}

.timer-btn {
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: .025em;
  border: none;
  border-radius: 1rem;
  padding: .75rem 1.5rem;
  font-weight: 500;
  transition: all .3s;
}

.timer-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #60a5fa4d 0%, #8b5cf64d 100%);
  border: 1px solid #fff3;
}

.timer-btn.primary:hover {
  background: linear-gradient(135deg, #60a5fa66 0%, #8b5cf666 100%);
  border-color: #ffffff4d;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px #0003;
}

.timer-btn.secondary {
  color: #fffc;
  background: linear-gradient(135deg, #ffffff1a 0%, #ffffff0d 100%);
  border: 1px solid #ffffff1a;
}

.timer-btn.secondary:hover {
  color: #fff;
  background: linear-gradient(135deg, #ffffff26 0%, #ffffff14 100%);
  border-color: #fff3;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px #0000001a;
}

.timer-presets {
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.preset-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  font-size: var(--font-size-sm);
}

.preset-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}

.benefits-section {
  margin-bottom: 5rem;
}

.benefits-title {
  color: #fff;
  text-align: center;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 3rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
}

.meditation-benefits {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  display: grid;
}

.benefit-card {
  text-align: center;
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #ffffff14 0%, #ffffff0a 100%);
  border: 1px solid #ffffff1a;
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all .4s;
  position: relative;
  overflow: hidden;
}

.benefit-card:before {
  content: "";
  opacity: 0;
  z-index: 1;
  background: linear-gradient(135deg, #22c55e0d 0%, #3b82f60d 100%);
  width: 100%;
  height: 100%;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.benefit-card:hover {
  border-color: #fff3;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px #0003;
}

.benefit-card:hover:before {
  opacity: 1;
}

.benefit-icon {
  color: #22c55e;
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #22c55e33 0%, #3b82f633 100%);
  border: 1px solid #ffffff1a;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  font-size: 3rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.benefit-card:hover .benefit-icon {
  background: linear-gradient(135deg, #22c55e4d 0%, #3b82f64d 100%);
  border-color: #fff3;
  transform: scale(1.1);
}

.benefit-title {
  color: #fff;
  z-index: 2;
  text-shadow: 0 2px 10px #0000004d;
  margin-bottom: 1rem;
  font-family: Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  position: relative;
}

.benefit-description {
  color: #fffc;
  z-index: 2;
  font-size: .95rem;
  line-height: 1.6;
  position: relative;
}

@media (width <= 768px) {
  .meditation-page {
    padding: var(--space-4);
  }

  .meditation-header {
    padding: var(--space-12) 0;
  }

  .meditation-title {
    font-size: var(--font-size-3xl);
  }

  .meditation-subtitle {
    font-size: var(--font-size-lg);
  }

  .meditation-actions {
    flex-direction: column;
    align-items: center;
  }

  .guided-sessions-grid, .techniques-grid {
    grid-template-columns: 1fr;
  }

  .breathing-circle {
    width: 150px;
    height: 150px;
  }

  .timer-display {
    font-size: var(--font-size-4xl);
  }

  .timer-controls {
    flex-direction: column;
    align-items: center;
  }

  .meditation-benefits {
    grid-template-columns: 1fr;
  }

  .meditation-hero {
    height: 36vh;
    min-height: 180px;
  }

  .meditation-header-content {
    padding: var(--space-4) var(--space-2);
  }

  .audio-progress-bar {
    width: 120px;
  }

  .meditation-content {
    padding: var(--space-6);
  }

  .meditation-container {
    padding-top: var(--space-6);
  }

  .meditation-container:before {
    border-radius: 0 0 20px 20px;
    height: 20px;
    top: -20px;
  }
}

@media (width <= 480px) {
  .meditation-header {
    padding: var(--space-8) 0;
  }

  .breathing-exercise {
    padding: var(--space-6);
  }

  .breathing-circle {
    width: 120px;
    height: 120px;
  }

  .timer-display {
    font-size: var(--font-size-3xl);
  }

  .technique-header {
    align-items: flex-start;
    gap: var(--space-2);
    flex-direction: column;
  }

  .meditation-hero {
    height: 24vh;
    min-height: 100px;
  }

  .meditation-title {
    font-size: var(--font-size-xl);
  }

  .audio-play-pause {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .audio-progress-bar {
    width: 70px;
  }

  .meditation-content {
    padding: var(--space-2);
  }

  .meditation-container {
    padding-top: var(--space-2);
  }

  .meditation-container:before {
    border-radius: 0 0 10px 10px;
    height: 10px;
    top: -10px;
  }
}

.technique-card.refreshed {
  color: #fff;
  z-index: 2;
  background: linear-gradient(135deg, #28283cd9 0%, #3c2850d9 100%);
  border: 1.5px solid #ffffff2e;
  transition: box-shadow .3s, background .3s, border .3s, transform .3s;
  position: relative;
  box-shadow: 0 8px 40px #50507840, 0 1.5px 8px #0000001a;
}

.technique-card.refreshed:hover {
  background: linear-gradient(135deg, #503c78f2 0%, #3c2864f2 100%);
  border-color: #8b5cf659;
  transform: translateY(-6px)scale(1.025);
  box-shadow: 0 16px 60px #7864c859, 0 4px 24px #0000002e;
}

.technique-card .technique-icon {
  color: #60a5fa;
  background: linear-gradient(135deg, #60a5fa40 0%, #8b5cf62e 100%);
  border: 1px solid #ffffff2e;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  font-size: 2.2rem;
  display: flex;
  box-shadow: 0 2px 12px #60a5fa1a;
}

.technique-card .benefit-check {
  color: #60a5fa;
  vertical-align: middle;
  margin-right: .5em;
  font-size: 1.1em;
}

.technique-card .learn-more-btn {
  color: #fff;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  border: none;
  border-radius: 1rem;
  margin-top: 1.5rem;
  padding: .9rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background .2s, box-shadow .2s, transform .2s;
  box-shadow: 0 2px 12px #60a5fa1a;
}

.technique-card .learn-more-btn:hover {
  background: linear-gradient(90deg, #a855f7 0%, #60a5fa 100%);
  transform: translateY(-2px)scale(1.04);
  box-shadow: 0 6px 24px #8b5cf62e;
}

.ambient-particles .particle {
  opacity: .18;
  background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%);
  border-radius: 50%;
  animation: 8s ease-in-out infinite alternate floatParticle;
  position: absolute;
}

.particle-1 {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  top: 68vh;
  left: 12vw;
}

.particle-2 {
  width: 40px;
  height: 40px;
  animation-delay: 1.2s;
  top: 18vh;
  left: 80vw;
}

.particle-3 {
  width: 80px;
  height: 80px;
  animation-delay: 2.1s;
  top: 40vh;
  left: 35vw;
}

.particle-4 {
  width: 30px;
  height: 30px;
  animation-delay: .7s;
  top: 70vh;
  left: 60vw;
}

.particle-5 {
  width: 50px;
  height: 50px;
  animation-delay: 1.7s;
  top: 20vh;
  left: 20vw;
}

.particle-6 {
  width: 70px;
  height: 70px;
  animation-delay: 2.8s;
  top: 60vh;
  left: 70vw;
}

.particle-7 {
  width: 35px;
  height: 35px;
  animation-delay: .4s;
  top: 10vh;
  left: 50vw;
}

.particle-8 {
  width: 45px;
  height: 45px;
  animation-delay: 1.9s;
  top: 50vh;
  left: 10vw;
}

@keyframes floatParticle {
  0%, to {
    opacity: 0;
    transform: translateY(0)translate(0)scale(1);
  }

  25% {
    opacity: .6;
    transform: translateY(-20px)translate(10px)scale(1.2);
  }

  50% {
    opacity: .3;
    transform: translateY(-10px)translate(-5px)scale(.8);
  }

  75% {
    opacity: .8;
    transform: translateY(-30px)translate(15px)scale(1.1);
  }
}

.breathing-circle, .pulsing-circle {
  opacity: .12;
  pointer-events: none;
  border-radius: 50%;
  animation: 7s cubic-bezier(.4, 0, .2, 1) infinite alternate organicPulse;
  position: absolute;
}

.breathing-1 {
  width: 180px;
  height: 180px;
  animation-delay: .5s;
  top: 30vh;
  left: 18vw;
}

.breathing-2 {
  width: 120px;
  height: 120px;
  animation-delay: 1.7s;
  top: 60vh;
  left: 65vw;
}

.breathing-3 {
  width: 140px;
  height: 140px;
  animation-delay: 2.3s;
  top: 15vh;
  left: 40vw;
}

.pulse-1 {
  width: 90px;
  height: 90px;
  animation-delay: .9s;
  top: 80vh;
  left: 30vw;
}

.pulse-2 {
  width: 60px;
  height: 60px;
  animation-delay: 1.2s;
  top: 25vh;
  left: 75vw;
}

.pulse-3 {
  width: 110px;
  height: 110px;
  animation-delay: 2.1s;
  top: 50vh;
  left: 55vw;
}

.pulse-4 {
  width: 70px;
  height: 70px;
  animation-delay: .7s;
  top: 60vh;
  left: 20vw;
}

.pulse-5 {
  width: 100px;
  height: 100px;
  animation-delay: 1.7s;
  top: 20vh;
  left: 60vw;
}

.pulse-6 {
  width: 80px;
  height: 80px;
  animation-delay: 2.8s;
  top: 80vh;
  left: 80vw;
}

.pulse-7 {
  width: 50px;
  height: 50px;
  animation-delay: .4s;
  top: 10vh;
  left: 10vw;
}

.pulse-8 {
  width: 120px;
  height: 120px;
  animation-delay: 1.9s;
  top: 35vh;
  left: 45vw;
}

@keyframes organicPulse {
  0% {
    opacity: .12;
    transform: scale(1);
  }

  50% {
    opacity: .22;
    transform: scale(1.15);
  }

  to {
    opacity: .09;
    transform: scale(.95);
  }
}

.mudra-landing-page {
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(var(--color-primary-rgb), .02) 100%);
  min-height: 100vh;
  padding: var(--space-24);
}

.mudra-landing-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-12) auto;
  padding: 0 var(--space-6);
}

.mudra-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
}

.mudra-landing-intro {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.mudra-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-8);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.mudra-section:hover {
  box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .2);
  transform: translateY(-2px);
}

.mudra-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  text-align: center;
  position: relative;
}

.mudra-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  width: 10rem;
  height: 3px;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.mudra-card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.mudra-card {
  background: var(--color-background);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .08);
  border: 1px solid rgba(var(--color-primary-rgb), .12);
  padding: var(--space-8);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.mudra-card, .mudra-card * {
  text-decoration: none !important;
}

.mudra-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mudra-card:hover {
  box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), .15);
  border-color: rgba(var(--color-primary-rgb), .2);
  transform: translateY(-6px);
}

.mudra-card-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.mudra-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
  text-decoration: none;
}

.mudra-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  background: rgba(var(--color-secondary-rgb), .1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  align-self: flex-start;
  text-decoration: none;
}

.mudra-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  flex: 1;
  line-height: 1.6;
}

.mudra-card .sanskrit-name {
  font-family: Noto Sans Devanagari, serif;
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  background: rgba(var(--color-primary-rgb), .05);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  text-decoration: none;
}

.mudra-card .tags-container {
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  display: flex;
}

.mudra-card .element-tag {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px rgba(var(--color-secondary-rgb), .3);
  text-decoration: none;
  transition: all .2s;
}

.mudra-card .element-tag:hover {
  box-shadow: 0 4px 12px rgba(var(--color-secondary-rgb), .4);
  transform: translateY(-1px);
}

.mudra-card .chakra-tag {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), .3);
  text-decoration: none;
  transition: all .2s;
}

.mudra-card .chakra-tag:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .4);
  transform: translateY(-1px);
}

.mudra-card-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), .2);
  border: none;
  align-self: flex-start;
  transition: all .3s;
}

.mudra-card-cta:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .3);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary-dark) 100%);
  transform: translateY(-2px);
}

.mudra-card-cta:active {
  transform: translateY(0);
}

@media (width <= 1024px) {
  .mudra-landing-sections {
    padding: 0 var(--space-4);
  }

  .mudra-card-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (width <= 768px) {
  .mudra-landing-page {
    padding: var(--space-20) 0;
  }

  .mudra-landing-header {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-8);
  }

  .mudra-landing-title {
    font-size: var(--font-size-4xl);
  }

  .mudra-landing-intro {
    font-size: var(--font-size-base);
  }

  .mudra-landing-sections {
    padding: 0 var(--space-3);
    gap: var(--space-8);
  }

  .mudra-section {
    padding: var(--space-6);
  }

  .mudra-section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .mudra-card-list {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .mudra-card {
    padding: var(--space-4);
    min-height: 180px;
  }

  .mudra-card-title {
    font-size: var(--font-size-lg);
  }

  .mudra-card-desc {
    font-size: var(--font-size-sm);
  }

  .mudra-card-cta {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .mudra-landing-title {
    font-size: var(--font-size-3xl);
  }

  .mudra-landing-intro {
    font-size: var(--font-size-sm);
  }

  .mudra-section {
    padding: var(--space-4);
  }

  .mudra-section-title {
    font-size: var(--font-size-xl);
  }

  .mudra-card {
    padding: var(--space-3);
    min-height: 160px;
  }

  .mudra-card-title {
    font-size: var(--font-size-base);
  }

  .mudra-card-subtitle, .mudra-card-desc {
    font-size: var(--font-size-xs);
  }

  .mudra-card-cta {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }
}

.mantra-landing-page:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 20% 80%, #e945601a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #5334831a 0%, #0000 50%), radial-gradient(circle at 40% 40%, #0f346014 0%, #0000 50%);
  animation: 15s ease-in-out infinite mantrasSoundWaves;
  position: absolute;
  inset: 0;
}

.mantra-landing-page {
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-primary-dark) 25%, var(--color-primary) 50%, var(--color-primary-light) 75%, var(--color-error) 100%);
  min-height: 100vh;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.mantra-landing-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
  z-index: 1;
  position: relative;
}

.mantra-landing-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-error) 0%, var(--color-primary-light) 25%, var(--color-primary) 50%, var(--color-primary-dark) 75%, var(--color-text-primary) 100%);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px #e945604d;
  background-clip: text;
  line-height: 1.1;
  animation: 4s ease-in-out infinite mantrasTitleResonance;
}

.mantra-landing-intro {
  font-size: var(--font-size-lg);
  color: #ffffffe6;
  margin-bottom: var(--space-8);
  line-height: 1.7;
  font-weight: var(--font-weight-medium);
  text-shadow: 0 2px 4px #0000004d;
}

.mantra-section {
  background: var(--color-bg-primary);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.mantra-section:before {
  content: "";
  background: linear-gradient(90deg, var(--color-error), var(--color-primary-light), var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  height: 4px;
  animation: 3s ease-in-out infinite mantrasHealingFlow;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mantra-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px #0000004d;
}

.mantra-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  position: relative;
}

.mantra-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  border-radius: var(--radius-full);
  width: 10rem;
  height: 3px;
  animation: 2s ease-in-out infinite mantrasTitlePulse;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.sound-healing-principles {
  gap: var(--space-6);
  margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  display: grid;
}

.healing-principle {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #e945600d 0%, #5334830d 100%);
  border: 1px solid #e945601a;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.healing-principle:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.healing-principle:hover:before {
  left: 100%;
}

.healing-principle:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #e9456026;
}

.principle-icon {
  font-size: var(--font-size-3xl);
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #e94560, #533483) text;
  animation: 3s ease-in-out infinite mantrasIconFloat;
}

.principle-content {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.principle-content strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.principle-content span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.mantra-categories {
  gap: var(--space-4);
  margin: var(--space-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.mantra-category {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(135deg, #0f34600d 0%, #16213e0d 100%);
  border: 1px solid #0f34601a;
  transition: all .3s;
}

.mantra-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #0f34601a;
}

.mantra-category h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.mantra-category p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.mantra-card-list {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  display: grid;
}

.mantra-card {
  backdrop-filter: blur(15px);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  min-height: 320px;
  color: inherit;
  background: #fffffff2;
  border: 1px solid #fff3;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #00000026;
}

.mantra-card, .mantra-card * {
  text-decoration: none !important;
}

.mantra-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-error), var(--color-primary-light), var(--color-primary));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  height: 4px;
  animation: 4s ease-in-out infinite mantrasCardHealing;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mantra-card:hover {
  border-color: #dc26264d;
  transform: translateY(-8px)scale(1.02);
  box-shadow: 0 16px 48px #00000040;
}

.mantra-card-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.mantra-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
  text-decoration: none;
}

.mantra-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-light);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: #ae6a7e1a;
  align-self: flex-start;
  text-decoration: none;
}

.mantra-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  flex: 1;
  line-height: 1.6;
}

.mantra-card .sanskrit-name {
  font-family: Noto Sans Devanagari, serif;
  font-size: var(--font-size-xl);
  color: var(--color-error);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-error);
  text-align: center;
  background: #dc26260d;
  text-decoration: none;
  animation: 3s ease-in-out infinite mantrasSanskritGlow;
}

.mantra-card .mantra-healing-indicators {
  gap: var(--space-3);
  flex-direction: column;
  margin-top: auto;
  display: flex;
}

.mantra-card .healing-indicator {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.mantra-card .frequency-tag {
  background: linear-gradient(135deg, var(--color-error), var(--color-error));
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #dc26264d;
}

.mantra-card .frequency-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #e9456066;
}

.mantra-card .element-tag {
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: linear-gradient(135deg, #533483, #3742fa);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #5334834d;
}

.mantra-card .element-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #53348366;
}

.mantra-card .chakra-tag {
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: linear-gradient(135deg, #0f3460, #1a1a2e);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #0f34604d;
}

.mantra-card .chakra-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #0f346066;
}

.mantra-card .pronunciation-tag {
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: linear-gradient(135deg, #16213e, #0f3460);
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px #16213e4d;
}

.mantra-card .pronunciation-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #16213e66;
}

@media (width <= 1024px) {
  .mantra-landing-sections {
    padding: 0 var(--space-4);
  }

  .mantra-landing-sections .mantra-card-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .mantra-landing-sections .sound-healing-principles {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (width <= 768px) {
  .mantra-landing-page {
    padding: var(--space-20) 0;
  }

  .mantra-landing-header {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-8);
  }

  .mantra-landing-title {
    font-size: var(--font-size-4xl);
  }

  .mantra-landing-intro {
    font-size: var(--font-size-base);
  }

  .mantra-landing-sections {
    padding: 0 var(--space-3);
    gap: var(--space-8);
  }

  .mantra-section {
    padding: var(--space-6);
  }

  .mantra-section-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
  }

  .sound-healing-principles {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .healing-principle {
    padding: var(--space-4);
  }

  .mantra-categories {
    grid-template-columns: 1fr;
  }

  .mantra-card-list {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .mantra-card-list .mantra-card {
    padding: var(--space-6);
    min-height: 280px;
  }

  .mantra-card-list .mantra-card .mantra-card-title {
    font-size: var(--font-size-xl);
  }

  .mantra-card-list .mantra-card .mantra-card-desc {
    font-size: var(--font-size-sm);
  }
}

@media (width <= 480px) {
  .mantra-landing-title {
    font-size: var(--font-size-3xl);
  }

  .mantra-landing-intro {
    font-size: var(--font-size-sm);
  }

  .mantra-section {
    padding: var(--space-4);
  }

  .mantra-section .mantra-section-title {
    font-size: var(--font-size-xl);
  }

  .mantra-card {
    padding: var(--space-4);
    min-height: 240px;
  }

  .mantra-card .mantra-card-title {
    font-size: var(--font-size-lg);
  }

  .mantra-card .mantra-card-subtitle, .mantra-card .mantra-card-desc {
    font-size: var(--font-size-xs);
  }

  .mantra-card .sanskrit-name {
    font-size: var(--font-size-lg);
    padding: var(--space-2) var(--space-3);
  }
}

.medicine-hero-bg {
  object-fit: cover;
  z-index: 0;
  filter: blur(6px) brightness(.7) saturate(1.1);
  opacity: .55;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.medicine-hero-content--enhanced {
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  color: #fff;
  z-index: 2;
  background: #ffffff2e;
  border: 1.5px solid #ffffff2e;
  border-radius: 2rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 2rem;
  box-shadow: 0 8px 32px #5050781a;
}

.audio-lab, .info-section, .track-control, .active-track-info, .audio-presets, .audio-lab-info {
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  color: #222;
  background: linear-gradient(135deg, #ffffff2e 0%, #f0f0ff21 100%);
  border: 1.5px solid #ffffff21;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px #50507814;
}

.audio-lab, .info-section {
  margin-bottom: 2.5rem;
  padding: 2.5rem 2rem;
}

.track-control, .active-track-info, .audio-presets, .audio-lab-info {
  margin-bottom: 1.5rem;
}

.track-control.playing, .track-control.active {
  background: linear-gradient(135deg, #60a5fa21 0%, #8b5cf621 100%);
  border-color: #a855f7;
}

.info-section.visible {
  border-color: #60a5fa;
  box-shadow: 0 8px 32px #60a5fa1a;
}

.info-section .section-title {
  color: #222;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%) text;
}

.info-section .section-header {
  margin-bottom: 1.2rem;
}

.info-section .section-body {
  color: #333;
  font-size: 1.08rem;
}

.info-section .image-container img {
  border-radius: 1.2rem;
  box-shadow: 0 2px 12px #5050781a;
}

.medicine-page, .medicine-landing-page {
  color: #222;
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);
}

.audio-lab .preset-button, .track-control, .info-section, .audio-lab-info {
  transition: box-shadow .2s, background .2s, border .2s, transform .2s;
}

.audio-lab .preset-button:hover, .track-control:hover, .info-section.visible:hover, .audio-lab-info:hover {
  background: linear-gradient(135deg, #60a5fa21 0%, #8b5cf621 100%);
  border-color: #60a5fa;
  transform: translateY(-4px)scale(1.02);
  box-shadow: 0 12px 32px #60a5fa21;
}

.medicine-page {
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  min-height: 100vh;
  overflow: hidden;
}

.medicine-landing-page {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-secondary) 100%);
  color: var(--color-text-white);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.medicine-landing-page:before {
  content: "";
  opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"stars\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.2)\"/><circle cx=\"25\" cy=\"25\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"75\" cy=\"75\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"25\" cy=\"75\" r=\"0.7\" fill=\"rgba(255,255,255,0.15)\"/><circle cx=\"75\" cy=\"25\" r=\"0.7\" fill=\"rgba(255,255,255,0.15)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23stars)\"/></svg>");
  animation: 60s linear infinite floatStars;
  position: absolute;
  inset: 0;
}

@keyframes floatStars {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 100px 100px;
  }
}

.medicine-hero-section {
  min-height: 80vh;
  padding: var(--space-12) var(--space-6);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.medicine-hero-content {
  text-align: center;
  max-width: 800px;
  padding: var(--space-8);
  backdrop-filter: blur(10px);
  z-index: 2;
  background: #0006;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
}

.medicine-hero-icon {
  margin-bottom: var(--space-4);
  font-size: 3rem;
  animation: 2s ease-in-out infinite alternate pulse;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 #662932b3;
  }

  70% {
    box-shadow: 0 0 0 10px #66293200;
  }

  to {
    box-shadow: 0 0 #66293200;
  }
}

.medicine-hero-title {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-red));
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px var(--color-accent-gold-shadow);
  background-clip: text;
  font-weight: 700;
}

.medicine-hero-subtitle {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
}

.medicine-hero-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.medicine-categories-section {
  padding: var(--space-12) var(--space-6);
  backdrop-filter: blur(10px);
  z-index: 2;
  background: #0000004d;
  position: relative;
}

.medicine-categories-section h2 {
  text-align: center;
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-8);
  color: var(--color-accent-gold);
}

.medicine-categories-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
}

.medicine-category-card {
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.medicine-category-card:hover {
  border-color: var(--color-accent-gold-border);
  background: #ffffff1a;
  transform: translateY(-10px);
  box-shadow: 0 10px 30px #0000004d;
}

.category-icon {
  margin-bottom: var(--space-4);
  font-size: 3rem;
  transition: all .3s;
}

.medicine-category-card:hover .category-icon {
  transform: scale(1.2);
}

.medicine-category-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
  color: #fff;
}

.medicine-category-card p {
  font-size: var(--font-size-sm);
  color: #ffffffb3;
  margin-bottom: var(--space-4);
}

.category-badge {
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-accent-gold-transparent);
  color: var(--color-accent-gold);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: 20px;
  font-weight: 500;
  position: absolute;
}

.medicine-detail-page {
  color: var(--color-text-white);
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
  position: relative;
}

.medicine-detail-page:before {
  content: "";
  opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"sacred-pattern\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,215,0,0.1)\"/><circle cx=\"25\" cy=\"25\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"75\" cy=\"75\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23sacred-pattern)\"/></svg>");
  animation: 30s ease-in-out infinite medicineFloat;
  position: absolute;
  inset: 0;
}

@keyframes medicineFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(1deg);
  }
}

.medicine-sacred-header {
  padding: var(--space-12) var(--space-6);
  backdrop-filter: blur(20px);
  z-index: 2;
  background: #ffffff0d;
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.sacred-header-content {
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  display: flex;
}

.sacred-icon-container {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.sacred-icon {
  z-index: 2;
  filter: drop-shadow(0 0 15px #ffd70080);
  font-size: 3rem;
}

.sacred-glow {
  background: radial-gradient(circle, #ffd7004d 0%, #0000 70%);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: 3s ease-in-out infinite alternate glowPulse;
  position: absolute;
}

@keyframes glowPulse {
  0% {
    opacity: .3;
    transform: scale(1);
  }

  to {
    opacity: .5;
    transform: scale(1.2);
  }
}

.sacred-text {
  flex-direction: column;
  display: flex;
}

.sacred-category {
  font-size: var(--font-size-sm);
  color: #ffffffb3;
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.sacred-title {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-red));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.sacred-subtitle {
  font-size: var(--font-size-lg);
  color: #ffffffe6;
}

.ambient-controls {
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.ambient-toggle {
  cursor: pointer;
  background: #ffffff1a;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  transition: all .3s;
  display: flex;
}

.ambient-toggle:hover {
  background: #fff3;
  transform: scale(1.1);
}

.ambient-icon {
  font-size: 1.5rem;
}

.ambient-volume {
  -webkit-appearance: none;
  background: #ffffff1a;
  border-radius: 3px;
  outline: none;
  width: 100px;
  height: 6px;
}

.ambient-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: gold;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 5px #ffd70080;
}

.medicine-main-content {
  padding: var(--space-12) var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

.medicine-content-section {
  margin-bottom: var(--space-12);
}

.medicine-content-html {
  font-size: var(--font-size-base);
  color: #ffffffe6;
  line-height: 1.8;
}

.medicine-content-html h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
  color: gold;
}

.medicine-content-html h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-4);
  color: #ff6b6b;
}

.medicine-content-html p {
  margin-bottom: var(--space-4);
}

.medicine-content-html ul, .medicine-content-html ol {
  margin-bottom: var(--space-6);
  margin-left: var(--space-6);
}

.medicine-content-html li {
  margin-bottom: var(--space-2);
}

.medicine-audio-section {
  margin-bottom: var(--space-12);
}

.medicine-audio-section h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
  color: gold;
  text-align: center;
}

.audio-tracks-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.audio-track-card {
  padding: var(--space-4);
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #0000;
  border-radius: 12px;
  transition: all .3s;
  display: flex;
}

.audio-track-card:hover {
  background: #ffffff1a;
  transform: translateY(-5px);
}

.audio-track-card.active {
  background: var(--color-accent-gold-light);
  border-color: var(--color-accent-gold-border);
}

.track-icon {
  background: #ffffff1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  display: flex;
}

.track-info {
  flex: 1;
}

.track-info h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  color: #fff;
}

.track-info p {
  font-size: var(--font-size-xs);
  color: #fff9;
}

.track-type {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  color: #ffffffb3;
  background: #ffffff1a;
  border-radius: 20px;
}

.medicine-audio-player {
  left: 50%;
  bottom: var(--space-6);
  backdrop-filter: blur(10px);
  min-width: 400px;
  padding: var(--space-4);
  z-index: 100;
  background: #000c;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  position: fixed;
  transform: translate(-50%);
  box-shadow: 0 10px 30px #0000004d;
}

.player-content {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.player-info {
  flex: 1;
}

.player-info h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
  color: #fff;
}

.player-info p {
  font-size: var(--font-size-xs);
  color: #ffffffb3;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  overflow: hidden;
}

.player-controls {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.player-button {
  cursor: pointer;
  background: #ffd70033;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  transition: all .3s;
  display: flex;
}

.player-button:hover {
  background: var(--color-accent-gold-glow);
  transform: scale(1.1);
}

.player-close {
  cursor: pointer;
  background: #ffffff1a;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: .9rem;
  transition: all .3s;
  display: flex;
}

.player-close:hover {
  background: #fff3;
}

.medicine-practices-section, .medicine-benefits-section {
  margin-bottom: var(--space-12);
}

.medicine-practices-section h2, .medicine-benefits-section h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
  color: gold;
  text-align: center;
}

.practices-grid, .benefits-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.practice-card, .benefit-card {
  padding: var(--space-4);
  align-items: center;
  gap: var(--space-3);
  background: #ffffff0d;
  border-radius: 12px;
  transition: all .3s;
  display: flex;
}

.practice-card:hover, .benefit-card:hover {
  background: #ffffff1a;
  transform: translateY(-5px);
}

.practice-icon, .benefit-icon {
  background: var(--color-accent-gold-light);
  min-width: 40px;
  height: 40px;
  color: var(--color-accent-gold);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  display: flex;
}

.benefit-icon {
  color: #ff6b6b;
  background: #ff6b6b1a;
}

.practice-card p, .benefit-card p {
  font-size: var(--font-size-sm);
  color: #ffffffe6;
  line-height: 1.5;
}

.medicine-related-section {
  margin-bottom: var(--space-12);
}

.medicine-related-section h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-6);
  color: gold;
  text-align: center;
}

.related-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.related-card {
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.related-card:hover {
  background: #ffffff1a;
  border-color: #ffd7004d;
  transform: translateY(-10px);
  box-shadow: 0 10px 30px #0000004d;
}

.related-icon {
  margin-bottom: var(--space-4);
  font-size: 2.5rem;
  transition: all .3s;
}

.related-card:hover .related-icon {
  transform: scale(1.2);
}

.related-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
  color: #fff;
}

.related-card p {
  font-size: var(--font-size-sm);
  color: #ffffffb3;
  margin-bottom: var(--space-4);
}

.related-badge {
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-accent-gold-transparent);
  color: var(--color-accent-gold);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: 20px;
  font-weight: 500;
  position: absolute;
}

.medicine-sacred-nav {
  padding: var(--space-6);
  background: #0000004d;
  border-top: 1px solid #ffffff1a;
  justify-content: space-between;
  display: flex;
}

.sacred-nav-button {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  color: #ffffffe6;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 30px;
  transition: all .3s;
  display: flex;
}

.sacred-nav-button:hover {
  background: #ffffff1a;
  transform: translateY(-3px);
}

.sacred-nav-button.prev:hover {
  transform: translate(-5px)translateY(-3px);
}

.sacred-nav-button.next:hover {
  transform: translate(5px)translateY(-3px);
}

.nav-arrow {
  font-size: 1.2rem;
}

@media (width <= 768px) {
  .medicine-hero-section {
    padding: var(--space-8) var(--space-4);
  }

  .medicine-hero-title {
    font-size: var(--font-size-4xl);
  }

  .medicine-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .medicine-categories-section, .medicine-main-content {
    padding: var(--space-8) var(--space-4);
  }

  .medicine-sacred-header {
    padding: var(--space-6);
    gap: var(--space-6);
    text-align: center;
    flex-direction: column;
  }

  .sacred-header-content {
    text-align: center;
    flex-direction: column;
  }

  .ambient-controls {
    justify-content: center;
  }

  .medicine-categories-grid, .practices-grid, .benefits-grid, .related-grid {
    grid-template-columns: 1fr;
  }

  .medicine-sacred-nav {
    gap: var(--space-4);
    flex-direction: column;
  }

  .sacred-nav-button {
    justify-content: center;
  }
}

@media (width <= 480px) {
  .medicine-hero-section, .medicine-main-content, .medicine-sacred-header {
    padding: var(--space-8) var(--space-4);
  }

  .sacred-title {
    font-size: var(--font-size-3xl);
  }

  .medicine-audio-player {
    left: var(--space-4);
    right: var(--space-4);
    min-width: auto;
    transform: none;
  }
}

.medicine-hero {
  text-align: center;
  height: 100vh;
  color: var(--color-text-primary);
  background: linear-gradient(var(--color-overlay-dark), var(--color-overlay-dark)), url("hero2.83d53698.jpg") no-repeat center center / cover;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.medicine-hero-content {
  z-index: 1;
  background: var(--color-overlay-dark-light);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  max-width: 800px;
  padding: 20px;
}

.medicine-hero-title {
  text-shadow: 2px 2px 10px var(--color-shadow-dark);
  margin-bottom: 1rem;
  font-size: 4rem;
  font-weight: 700;
}

.medicine-hero-subtitle {
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

.scroll-down-indicator {
  z-index: 1;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
}

.scroll-down-indicator span {
  border-bottom: 2px solid var(--color-text-primary);
  border-right: 2px solid var(--color-text-primary);
  width: 24px;
  height: 24px;
  margin: -10px;
  animation: 2s infinite scroll;
  display: block;
  transform: rotate(45deg);
}

.scroll-down-indicator span:nth-child(2) {
  animation-delay: -.2s;
}

.scroll-down-indicator span:nth-child(3) {
  animation-delay: -.4s;
}

@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(45deg)translate(-20px, -20px);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: rotate(45deg)translate(20px, 20px);
  }
}

.audio-lab {
  background: linear-gradient(135deg, var(--color-bg-dark-blue) 0%, var(--color-bg-dark-purple) 100%);
  color: var(--color-text-primary);
  text-align: center;
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}

.audio-lab:before {
  content: "";
  opacity: .3;
  z-index: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"sound-pattern\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"90\" cy=\"90\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><path d=\"M20,20 Q30,10 40,20 T60,20 T80,20\" stroke=\"rgba(255,255,255,0.05)\" fill=\"none\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23sound-pattern)\"/></svg>");
  position: absolute;
  inset: 0;
}

.section-title {
  z-index: 1;
  background: linear-gradient(135deg, var(--color-purple), var(--color-indigo));
  background-clip: text;
  margin-bottom: 1rem;
  font-size: 3rem;
  position: relative;
}

.section-subtitle {
  color: var(--color-text-secondary);
  z-index: 1;
  max-width: 800px;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
  position: relative;
}

.audio-lab-container {
  z-index: 1;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  position: relative;
}

@media (width >= 768px) {
  .audio-lab-container {
    flex-direction: row;
    gap: 3rem;
  }
}

.audio-controls {
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
  display: flex;
}

@media (width >= 768px) {
  .audio-controls {
    width: 60%;
    margin-bottom: 0;
  }
}

.track-control {
  background: var(--color-overlay-lighter);
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  transition: all .3s;
  display: flex;
}

.track-control:hover {
  background: var(--color-overlay-light);
  transform: translateY(-5px);
}

.track-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: .5rem;
  display: flex;
}

.track-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

.track-origin {
  color: #fff9;
  font-size: .9rem;
}

.track-description {
  color: #fffc;
  text-align: left;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.track-controls {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.track-control button {
  cursor: pointer;
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 30px;
  padding: .5rem 1rem;
  font-weight: 500;
  transition: all .3s;
}

.track-control button:hover {
  background: #fff3;
  transform: scale(1.05);
}

.track-control button.playing {
  background: linear-gradient(135deg, #9c27b0, #3f51b5);
  border-color: #9c27b0;
  box-shadow: 0 0 15px #9c27b080;
}

.volume-slider {
  width: 100%;
  margin-top: .5rem;
}

.volume-slider input[type="range"] {
  -webkit-appearance: none;
  background: #ffffff1a;
  border-radius: 3px;
  outline: none;
  width: 100%;
  height: 6px;
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 5px #0000004d;
}

.active-track-info {
  background: #ffffff0d;
  border-radius: 12px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.active-track-title {
  color: var(--color-purple);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.active-track-description {
  color: #ffffffe6;
  max-width: 600px;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.visualization {
  background: #0003;
  border-radius: 8px;
  width: 100%;
  height: 150px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.visualization-bars {
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  padding: 0 1rem;
  display: flex;
}

.visualization-bar {
  background: linear-gradient(#3f51b5, #9c27b0);
  border-radius: 4px;
  width: 8px;
  transition: height .2s;
}

.presets {
  width: 100%;
  margin-top: 3rem;
}

.presets h3 {
  color: #ffffffe6;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.preset-buttons {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.preset-button {
  cursor: pointer;
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 30px;
  padding: .8rem 1.5rem;
  font-weight: 500;
  transition: all .3s;
}

.preset-button:hover {
  background: #fff3;
  transform: translateY(-3px);
}

.preset-button.active {
  background: linear-gradient(135deg, #9c27b0, #3f51b5);
  border-color: #9c27b0;
  box-shadow: 0 0 15px #9c27b080;
}

@media (width <= 768px) {
  .audio-lab {
    padding: 4rem 1rem;
  }

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

  .track-control {
    padding: 1rem;
  }

  .active-track-info {
    margin-top: 2rem;
    padding: 1.5rem;
  }

  .active-track-title {
    font-size: 1.5rem;
  }

  .visualization {
    height: 100px;
  }
}

.info-section {
  background: var(--color-overlay-dark-light);
  color: var(--color-text-primary);
  opacity: 0;
  flex-direction: column;
  align-items: center;
  padding: 5rem 2rem;
  transition: opacity .8s, transform .8s;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
}

.info-section.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (width >= 768px) {
  .info-section {
    flex-direction: row;
    justify-content: space-between;
  }

  .info-section.left {
    flex-direction: row;
  }

  .info-section.right {
    flex-direction: row-reverse;
  }
}

.info-image {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-bottom: 2rem;
  display: flex;
}

@media (width >= 768px) {
  .info-image {
    width: 40%;
    margin-bottom: 0;
  }
}

.image-container {
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 30px var(--color-shadow-dark);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.image-container img {
  object-fit: cover;
  width: 100%;
  height: auto;
  transition: transform .5s;
}

.image-container:hover img {
  transform: scale(1.05);
}

.image-overlay {
  background: linear-gradient(to bottom, transparent 70%, var(--color-overlay-dark-medium) 100%);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.info-content {
  flex-direction: column;
  flex: 1;
  padding: 0 1rem;
  display: flex;
}

@media (width >= 768px) {
  .info-content {
    padding: 0 2rem;
  }

  .info-section.left .info-content {
    padding-left: 4rem;
  }

  .info-section.right .info-content {
    padding-right: 4rem;
  }
}

.section-header {
  align-items: center;
  margin-bottom: 2rem;
  display: flex;
}

.section-icon {
  color: var(--accent-color, gold);
  margin-right: 1rem;
  font-size: 2rem;
}

.section-title {
  color: var(--title-color, var(--color-text-primary));
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  position: relative;
}

.section-title:after {
  content: "";
  background: var(--accent-color, var(--color-accent-gold));
  width: 60px;
  height: 3px;
  position: absolute;
  bottom: -10px;
  left: 0;
}

.section-body {
  color: var(--color-text-primary);
  font-size: 1.1rem;
  line-height: 1.8;
}

.section-body p {
  margin-bottom: 1.5rem;
}

.section-body ul {
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}

.section-body li {
  margin-bottom: .5rem;
}

.decorative-element {
  pointer-events: none;
  z-index: -1;
  border: 2px solid #ffffff1a;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
}

.info-section.left .decorative-element {
  top: 20%;
  right: 10%;
}

.info-section.right .decorative-element {
  bottom: 20%;
  left: 10%;
}

.theme-earth {
  background: linear-gradient(135deg, #2d3d1a 0%, #1a2d0d 100%);
}

.theme-earth .section-title {
  color: #8bc34a;
}

.theme-earth .section-title:after {
  background: #8bc34a;
}

.theme-fire {
  background: linear-gradient(135deg, #3d1a1a 0%, #2d0d0d 100%);
}

.theme-fire .section-title {
  color: #ff5722;
}

.theme-fire .section-title:after {
  background: #ff5722;
}

.theme-water {
  background: linear-gradient(135deg, #1a2d3d 0%, #0d1a2d 100%);
}

.theme-water .section-title {
  color: #03a9f4;
}

.theme-water .section-title:after {
  background: #03a9f4;
}

.theme-air {
  background: linear-gradient(135deg, #2d2d3d 0%, #1a1a2d 100%);
}

.theme-air .section-title {
  color: #b39ddb;
}

.theme-air .section-title:after {
  background: #b39ddb;
}

.theme-spirit {
  background: linear-gradient(135deg, #3d1a3d 0%, #2d0d2d 100%);
}

.theme-spirit .section-title {
  color: #e040fb;
}

.theme-spirit .section-title:after {
  background: #e040fb;
}

.theme-default {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.lesson-detail {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, #9d818905 50%, var(--color-bg-primary) 100%);
  color: var(--color-text-primary);
  padding-bottom: var(--space-24);
  min-height: 100vh;
  position: relative;
}

.lesson-detail:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 20% 20%, #9d818903 0%, #0000 50%), radial-gradient(circle at 80% 80%, #a2d2ff03 0%, #0000 50%);
  position: absolute;
  inset: 0;
}

.lesson-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  color: #fff;
  padding: var(--space-20) var(--space-8) var(--space-16);
  text-align: center;
  margin: 3rem 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #9d818933;
}

.lesson-hero:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff0d 0%, #0000 50%), radial-gradient(circle at 70% 70%, #ffffff05 0%, #0000 50%);
  position: absolute;
  inset: 0;
}

.lesson-hero-content {
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.lesson-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 4px 12px #00000026;
  line-height: 1.1;
}

.lesson-hero-subtitle {
  font-size: var(--font-size-xl);
  opacity: .95;
  margin-bottom: var(--space-8);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-medium);
}

.lesson-detail-meta {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.lesson-meta-badge {
  backdrop-filter: blur(10px);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: #ffffff26;
  border: 1px solid #fff3;
  transition: all .3s;
}

.lesson-meta-badge:hover {
  background: #ffffff40;
  transform: translateY(-2px);
}

.lesson-content-container {
  max-width: 1400px;
  margin: -var(--space-12) auto 0;
  padding: 0 var(--space-8);
  z-index: 3;
  position: relative;
}

.lesson-sections {
  gap: var(--space-8);
  margin-top: var(--space-8);
  grid-template-columns: 1fr 380px;
  display: grid;
}

.lesson-main-content {
  gap: var(--space-8);
  flex-direction: column;
  display: flex;
}

.lesson-video-section {
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: #fffc;
  border: 1px solid #ffffff4d;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #00000014, 0 8px 32px #0000000a, inset 0 1px #fffc;
}

.video-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid #9d818914;
  display: flex;
}

.video-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.lesson-video-section:hover .video-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.video-icon svg {
  width: 24px;
  height: 24px;
}

.video-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.video-container {
  border-radius: var(--radius-xl);
  height: 0;
  margin-bottom: var(--space-4);
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px #0000001f, 0 8px 24px #00000014;
}

.lesson-video {
  border-radius: var(--radius-xl);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.lesson-description {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: linear-gradient(135deg, #9d81890d 0%, #ffbe4d0d 100%);
  border: 1px solid #9d81891a;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #9d818914;
}

.lesson-description h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  align-items: center;
  gap: var(--space-3);
  z-index: 1;
  display: flex;
  position: relative;
}

.lesson-description p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  z-index: 1;
  position: relative;
}

.lesson-sequence-section {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px #00000014;
}

.lesson-sequence-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  color: var(--color-secondary);
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.lesson-list {
  counter-reset: sequence-counter;
  padding: 0;
  list-style: none;
}

.lesson-list li {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 2px solid var(--color-tertiary);
  background: #a2d2ff05;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
}

.lesson-list li:hover {
  background: #a2d2ff0a;
  transform: translate(2px);
  box-shadow: 0 2px 8px #a2d2ff1a;
}

.lesson-list li:before {
  counter-increment: sequence-counter;
  content: counter(sequence-counter);
  background: var(--color-secondary);
  color: #fff;
  width: 32px;
  height: 32px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  margin-right: var(--space-4);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.lesson-sidebar {
  gap: var(--space-6);
  top: var(--space-8);
  flex-direction: column;
  height: fit-content;
  display: flex;
  position: sticky;
}

.lesson-progress-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px #9d818940, 0 8px 24px #9d818926;
}

.lesson-progress-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  display: flex;
  position: relative;
}

.lesson-progress-section p {
  font-size: var(--font-size-base);
  opacity: .9;
  margin-bottom: var(--space-6);
  z-index: 1;
  position: relative;
}

.lesson-benefits-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid #0000000f;
  transition: all .2s;
  position: relative;
  box-shadow: 0 2px 8px #0000000a;
}

.lesson-benefits-section:hover {
  box-shadow: 0 4px 12px #0000000f;
}

.benefits-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #00000014;
  align-items: center;
  display: flex;
}

.benefits-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.lesson-benefits-section:hover .benefits-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.benefits-icon svg {
  width: 24px;
  height: 24px;
}

.benefits-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.benefit-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
  position: relative;
}

.benefit-number {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  z-index: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #9d818933;
}

.benefit-item:hover .benefit-number {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 8px 24px #9d81894d;
}

.lesson-prerequisites-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid #0000000f;
  transition: all .2s;
  position: relative;
  box-shadow: 0 2px 8px #0000000a;
}

.lesson-prerequisites-section:hover {
  box-shadow: 0 4px 12px #0000000f;
}

.prerequisites-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #00000014;
  align-items: center;
  display: flex;
}

.prerequisites-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.lesson-prerequisites-section:hover .prerequisites-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.prerequisites-icon svg {
  width: 24px;
  height: 24px;
}

.prerequisites-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.prerequisite-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
  position: relative;
}

.prerequisite-check {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  z-index: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #9d818933;
}

.prerequisite-item:hover .prerequisite-check {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 8px 24px #9d81894d;
}

.prerequisite-check svg {
  width: 16px;
  height: 16px;
}

.prerequisite-content {
  flex: 1;
}

.lesson-additional-info {
  margin-top: var(--space-12);
  display: grid;
}

.instructor-section {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: #fffffff2;
  border: 1px solid #a2d2ff14;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px #a2d2ff0a;
}

.instructor-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.instructor-photo {
  object-fit: cover;
  opacity: .5;
  border: 2px solid #a2d2ff33;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  box-shadow: 0 4px 12px #a2d2ff1a;
}

.instructor-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.instructor-bio {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.learning-objectives-section {
  background: linear-gradient(135deg, var(--color-white) 0%, #9d818905 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid #9d818914;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #9d81891a, 0 8px 24px #9d81890d;
}

.objectives-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid #9d818914;
  display: flex;
}

.objectives-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.objectives-icon svg {
  width: 24px;
  height: 24px;
}

.overview-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid #9d818914;
  display: flex;
}

.overview-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.lesson-description:hover .overview-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.overview-icon svg {
  width: 24px;
  height: 24px;
}

.overview-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.instructor-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid #9d818914;
  display: flex;
}

.instructor-header-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.instructor-section:hover .instructor-header-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.instructor-header-icon svg {
  width: 24px;
  height: 24px;
}

.instructor-header h3, .objectives-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.objectives-description {
  margin-bottom: var(--space-8);
}

.objectives-description p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.objectives-grid {
  gap: var(--space-4);
  display: grid;
}

.objective-card {
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid #9d818914;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  display: flex;
  position: relative;
  overflow: hidden;
}

.objective-card:hover {
  border-color: #9d818914;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #9d81890d;
}

.objective-number {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  z-index: 1;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #9d818933;
}

.objective-content {
  z-index: 1;
  flex: 1;
  position: relative;
}

.objective-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

@media (width <= 768px) {
  .learning-objectives-section {
    padding: var(--space-6);
  }

  .objectives-header {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .objectives-icon {
    width: 40px;
    height: 40px;
  }

  .objectives-icon svg {
    width: 20px;
    height: 20px;
  }

  .objectives-header h3 {
    font-size: var(--font-size-xl);
  }

  .objectives-description p {
    font-size: var(--font-size-base);
  }

  .objective-card {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .objective-number {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-base);
  }

  .objective-text {
    font-size: var(--font-size-base);
  }
}

@media (width <= 480px) {
  .learning-objectives-section {
    padding: var(--space-4);
  }

  .objectives-header {
    align-items: flex-start;
    gap: var(--space-2);
    flex-direction: column;
  }

  .objective-card {
    padding: var(--space-3);
  }

  .objective-text {
    font-size: var(--font-size-sm);
  }
}

.materials-section {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: #fffffff2;
  border: 1px solid #a2d2ff14;
  position: relative;
  box-shadow: 0 8px 24px #a2d2ff0a;
}

.materials-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  color: var(--color-success);
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.lesson-materials-list {
  padding: 0;
  list-style: none;
}

.lesson-materials-list li {
  margin-bottom: var(--space-3);
}

.lesson-materials-list a {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  background: #a2d2ff05;
  border: 1px solid #a2d2ff0f;
  align-items: center;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.lesson-materials-list a:hover {
  background: #a2d2ff05;
  transform: translate(1px);
  box-shadow: 0 1px 4px #a2d2ff0d;
}

.related-lessons-section {
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  background: #fffffff2;
  border: 1px solid #a2d2ff14;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px #a2d2ff0a;
}

.related-lessons-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  align-items: center;
  gap: var(--space-2);
  display: flex;
  position: relative;
}

.lesson-related-list {
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  padding: 0;
  list-style: none;
  display: grid;
}

.lesson-related-list li {
  height: 100%;
  margin: 0;
}

.lesson-related-list a {
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  background: #a2d2ff05;
  border: 1px solid #a2d2ff0f;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px #a2d2ff0a;
}

.related-lesson-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  padding-right: var(--space-8);
  display: block;
}

.related-lesson-category {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), .08);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  display: inline-block;
}

.lesson-related-list a:before {
  content: "→";
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-tertiary);
  background: #a2d2ff1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  position: absolute;
  transform: translateY(0);
}

.lesson-related-list a:hover {
  background: #a2d2ff05;
  border-color: #a2d2ff0f;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px #a2d2ff0d;
}

.lesson-related-list a:hover:before {
  background: var(--color-tertiary);
  color: #fff;
  transform: rotate(45deg);
}

@media (width <= 768px) {
  .lesson-related-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (width <= 480px) {
  .lesson-related-list {
    grid-template-columns: 1fr;
  }

  .related-lessons-section {
    padding: var(--space-4);
  }

  .lesson-related-list a {
    padding: var(--space-3);
  }
}

.community-cta-section {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
}

.community-cta-card {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: linear-gradient(135deg, #fffffff2 0%, #9d818908 100%);
  border: 1px solid #9d818914;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #9d818914, 0 8px 24px #9d81890a;
}

.community-cta-card:hover {
  border-color: #9d818914;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #9d81890d;
}

.community-cta-header {
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
}

.community-cta-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 12px 32px #9d818940;
}

.community-cta-card:hover .community-cta-icon {
  transform: scale(1.05);
  box-shadow: 0 16px 40px #9d81894d;
}

.community-cta-icon svg {
  width: 32px;
  height: 32px;
}

.community-cta-content {
  flex: 1;
}

.community-cta-content h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.2;
}

.community-cta-content p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.community-cta-features {
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: #9d818905;
  border: 1px solid #9d81890f;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  display: grid;
}

.community-feature {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: all .3s;
  display: flex;
}

.community-feature:hover {
  background: #9d818905;
  transform: translate(1px);
}

.community-feature:hover .feature-icon {
  background: linear-gradient(135deg, var(--color-tertiary-light) 0%, var(--color-tertiary) 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 16px #a2d2ff66;
}

.feature-icon {
  background: linear-gradient(135deg, var(--color-tertiary-dark) 0%, var(--color-tertiary-light) 100%);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 12px #a2d2ff4d;
}

.feature-icon svg {
  width: 16px;
  height: 16px;
}

.community-feature span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.community-cta-action {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid #9d818914;
  display: flex;
}

.community-cta-button {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  min-width: 200px;
  text-decoration: none;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-flex;
  box-shadow: 0 8px 24px #9d818940;
}

.community-cta-button:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #9d818959;
}

.community-cta-button svg {
  width: 20px;
  height: 20px;
  transition: transform .2s;
}

.community-cta-button:hover svg {
  transform: translate(4px);
}

.community-stats {
  gap: var(--space-6);
  display: flex;
}

.stat-item {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  display: flex;
}

.stat-item:hover {
  background: #9d818905;
  transform: translateY(-1px);
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
}

@media (width <= 768px) {
  .community-cta-card {
    padding: var(--space-6);
  }

  .community-cta-header {
    text-align: center;
    align-items: center;
    gap: var(--space-4);
    flex-direction: column;
  }

  .community-cta-icon {
    width: 56px;
    height: 56px;
  }

  .community-cta-icon svg {
    width: 24px;
    height: 24px;
  }

  .community-cta-content h3 {
    font-size: var(--font-size-2xl);
  }

  .community-cta-content p {
    font-size: var(--font-size-base);
  }

  .community-cta-features {
    gap: var(--space-3);
    padding: var(--space-4);
    grid-template-columns: 1fr;
  }

  .community-cta-action {
    align-items: center;
    gap: var(--space-4);
    flex-direction: column;
  }

  .community-cta-button {
    width: 100%;
    max-width: 280px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }

  .community-stats {
    gap: var(--space-4);
  }

  .stat-number {
    font-size: var(--font-size-xl);
  }

  .stat-label {
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .community-cta-card {
    padding: var(--space-4);
  }

  .community-cta-header {
    gap: var(--space-3);
  }

  .community-cta-icon {
    width: 48px;
    height: 48px;
  }

  .community-cta-icon svg {
    width: 20px;
    height: 20px;
  }

  .community-cta-content h3 {
    font-size: var(--font-size-xl);
  }

  .community-cta-content p {
    font-size: var(--font-size-sm);
  }

  .community-feature {
    padding: var(--space-2);
  }

  .community-feature span {
    font-size: var(--font-size-sm);
  }

  .community-cta-button {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
  }

  .stat-number {
    font-size: var(--font-size-lg);
  }

  .stat-label {
    font-size: var(--font-size-xs);
  }
}

.lesson-faq-modern {
  background: linear-gradient(135deg, var(--color-white) 0%, #9d818905 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid #9d818914;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #9d81891a, 0 8px 24px #9d81890d;
}

.faq-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid #9d818914;
  display: flex;
}

.faq-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  font-size: var(--font-size-xl);
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.faq-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.faq-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  cursor: pointer;
  opacity: 0;
  user-select: none;
  border: 1px solid #9d818914;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  animation: .6s ease-out forwards slideInUp;
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
}

.faq-card:first-child {
  animation-delay: .1s;
}

.faq-card:nth-child(2) {
  animation-delay: .2s;
}

.faq-card:nth-child(3) {
  animation-delay: .3s;
}

.faq-card:nth-child(4) {
  animation-delay: .4s;
}

.faq-card:nth-child(5) {
  animation-delay: .5s;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-card:hover {
  border-color: #9d818914;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #9d81890d;
}

.faq-card.open {
  border-color: var(--color-primary);
  box-shadow: 0 16px 48px #9d818933, 0 8px 24px #9d818926;
}

.faq-question-row {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(135deg, #9d818905 0%, #fffc 100%);
  transition: all .3s;
  display: flex;
}

.faq-card.open .faq-question-row {
  background: linear-gradient(135deg, #9d81890d 0%, #ffffffe6 100%);
}

.faq-q-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  width: 32px;
  height: 32px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 4px 12px #9d818933;
}

.faq-question {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
  margin: 0;
  line-height: 1.4;
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
}

.faq-card.open .faq-toggle-icon {
  color: var(--color-primary);
  transform: rotate(180deg);
}

.faq-answer-wrapper {
  background: var(--color-white);
  opacity: 0;
  transform-origin: top;
  will-change: max-height, opacity;
  max-height: 0;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
  overflow: hidden;
}

.faq-answer-wrapper.open {
  opacity: 1;
  max-height: 500px;
  margin-top: var(--space-2);
}

.faq-answer {
  padding: var(--space-6);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  background: linear-gradient(135deg, #9d818905 0%, #fffc 100%);
  line-height: 1.7;
  position: relative;
}

.faq-answer:before {
  content: "";
  top: 0;
  left: var(--space-6);
  right: var(--space-6);
  background: linear-gradient(90deg, #0000 0%, #9d818926 50%, #0000 100%);
  height: 1px;
  position: absolute;
}

.faq-q-icon {
  animation: 3s ease-in-out infinite gentle-pulse;
}

@keyframes gentle-pulse {
  0%, to {
    transform: scale(1);
    box-shadow: 0 4px 12px #9d818933;
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 16px #9d81894d;
  }
}

.faq-card:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.faq-card:focus:not(:focus-visible) {
  outline: none;
}

.faq-toggle-icon {
  transition: all .3s;
}

.faq-card:hover .faq-toggle-icon {
  transform: scale(1.1);
}

.faq-card.open .faq-toggle-icon {
  transform: rotate(180deg)scale(1.1);
}

@media (width <= 768px) {
  .lesson-faq-modern {
    padding: var(--space-6);
  }

  .faq-header {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .faq-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }

  .faq-title {
    font-size: var(--font-size-xl);
  }

  .faq-question-row {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .faq-q-icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }

  .faq-question {
    font-size: var(--font-size-base);
  }

  .faq-answer {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
  }

  .faq-answer:before {
    left: var(--space-4);
    right: var(--space-4);
  }
}

@media (width <= 480px) {
  .lesson-faq-modern {
    padding: var(--space-4);
  }

  .faq-header {
    align-items: flex-start;
    gap: var(--space-2);
    flex-direction: column;
  }

  .faq-question-row {
    padding: var(--space-3);
  }

  .faq-question {
    font-size: var(--font-size-sm);
  }
}

@media (width <= 1024px) {
  .lesson-sections {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .lesson-sidebar {
    order: -1;
    position: static;
  }

  .lesson-additional-info {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .lesson-hero {
    padding: var(--space-12) var(--space-4) var(--space-8);
  }

  .lesson-hero-title {
    font-size: var(--font-size-4xl);
  }

  .lesson-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .lesson-content-container {
    padding: 0 var(--space-4);
  }

  .lesson-detail-meta {
    gap: var(--space-2);
  }

  .lesson-meta-badge {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }

  .lesson-additional-info {
    gap: 0;
  }
}

@media (width <= 480px) {
  .lesson-hero-title {
    font-size: var(--font-size-3xl);
  }

  .lesson-hero-subtitle {
    font-size: var(--font-size-base);
  }

  .lesson-detail-meta {
    flex-direction: column;
    align-items: center;
  }

  .instructor-info {
    text-align: center;
    gap: var(--space-4);
    flex-direction: column;
  }

  .instructor-photo {
    width: 60px;
    height: 60px;
  }
}

.course-detail-page {
  background: linear-gradient(135deg, var(--color-background-light) 0%, var(--color-background) 100%);
  min-height: 100vh;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
}

.loading-circle {
  border-radius: var(--radius-full);
  background: var(--color-white);
  width: 12px;
  height: 12px;
  animation: 1.4s ease-in-out infinite both bounce;
}

@keyframes bounce {
  0%, 80%, to {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.course-error-container {
  text-align: center;
  min-height: 100vh;
  padding: var(--space-10);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.error-icon {
  margin-bottom: var(--space-6);
  color: var(--color-warning);
}

.error-back-button {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
  background: #fff3;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.course-hero {
  padding: var(--space-20) var(--space-8) var(--space-24);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.course-hero:before {
  content: "";
  opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.course-hero-content {
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.course-hero-text {
  max-width: 800px;
  margin: 0 auto;
}

.course-meta-badges {
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.course-meta-badge {
  backdrop-filter: blur(10px);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: #ffffff26;
  border: 1px solid #fff3;
  transition: all .3s;
}

.course-meta-badge:hover {
  background: #ffffff40;
  transform: translateY(-2px);
}

.course-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.course-hero-subtitle {
  font-size: var(--font-size-xl);
  opacity: .9;
  margin-bottom: var(--space-8);
  line-height: 1.4;
}

.course-hero-stats {
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.hero-stat {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  background: #ffffff1a;
  border: 1px solid #fff3;
  flex-direction: column;
  transition: all .3s;
  display: flex;
}

.hero-stat:hover {
  background: #ffffff26;
  transform: translateY(-2px);
}

.hero-stat-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.hero-stat-label {
  font-size: var(--font-size-sm);
  opacity: .8;
}

.course-enroll-button {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: var(--color-white);
  color: var(--misty-rose);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: none;
  transition: all .3s;
  display: inline-flex;
  box-shadow: 0 8px 32px #0003;
}

.course-enroll-button:hover {
  color: var(--color-background-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px #0000004d;
}

.course-content-container {
  max-width: 1400px;
  margin: -var(--space-12) auto 0;
  padding: 0 var(--space-8);
  z-index: 3;
  position: relative;
}

.course-sections {
  gap: var(--space-8);
  margin-top: var(--space-8);
  grid-template-columns: 1fr 380px;
  display: grid;
}

.course-main-content {
  gap: var(--space-8);
  flex-direction: column;
  display: flex;
}

.course-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid #0000000f;
  transition: all .2s;
  position: relative;
  box-shadow: 0 2px 8px #0000000a;
}

.course-section:hover {
  box-shadow: 0 4px 12px #0000000f;
}

.overview-header, .curriculum-header, .videos-header, .testimonials-header, .instructor-header, .benefits-header, .prerequisites-header, .progress-header, .materials-header, .community-header {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #00000014;
  display: flex;
}

.overview-icon, .curriculum-icon, .videos-icon, .testimonials-icon, .instructor-header-icon, .benefits-icon, .prerequisites-icon, .progress-icon, .materials-icon, .community-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.course-section:hover .overview-icon, .course-section:hover .curriculum-icon, .course-section:hover .videos-icon, .course-section:hover .testimonials-icon, .course-section:hover .instructor-header-icon, .course-section:hover .benefits-icon, .course-section:hover .prerequisites-icon, .course-section:hover .progress-icon, .course-section:hover .materials-icon, .course-section:hover .community-icon {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d81894d;
}

.overview-icon svg, .curriculum-icon svg, .videos-icon svg, .testimonials-icon svg, .instructor-header-icon svg, .benefits-icon svg, .prerequisites-icon svg, .progress-icon svg, .materials-icon svg, .community-icon svg {
  width: 24px;
  height: 24px;
}

.overview-header h3, .curriculum-header h3, .videos-header h3, .testimonials-header h3, .instructor-header h3, .benefits-header h3, .prerequisites-header h3, .progress-header h3, .materials-header h3, .community-header h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.module-count {
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: #00000014;
  margin-left: auto;
}

.course-description {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.course-highlights {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.highlight-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
}

.highlight-item:hover {
  background: #0000000a;
  border-color: #00000014;
}

.highlight-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.curriculum-modules {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.module-item {
  border-radius: var(--radius-lg);
  border: 1px solid #0000000f;
  transition: all .2s;
  overflow: hidden;
}

.module-item:hover {
  border-color: #0000001f;
  box-shadow: 0 2px 8px #0000000a;
}

.module-header {
  padding: var(--space-4);
  cursor: pointer;
  background: #00000005;
  justify-content: space-between;
  align-items: center;
  transition: all .2s;
  display: flex;
}

.module-info {
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.module-number {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.module-details h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.module-hours {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.module-content {
  padding: var(--space-4);
  background: var(--color-white);
  animation: .3s fadeIn;
}

.topics-list {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.topic-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: all .2s;
  display: flex;
}

.topic-item:hover {
  background: #00000005;
}

.topic-item svg {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.videos-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  display: grid;
}

.video-preview-item {
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
}

.video-preview-item:hover {
  background: #0000000a;
  border-color: #00000014;
}

.video-thumbnail {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-md);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 60px;
  display: flex;
}

.video-info h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.video-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.4;
}

.video-duration {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.testimonial-content {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  background: #00000005;
}

.testimonial-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.testimonial-author {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.author-info h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.author-info span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.rating {
  gap: var(--space-1);
  display: flex;
}

.rating svg, .rating svg.filled {
  color: var(--color-warning);
}

.indicator {
  border-radius: var(--radius-full);
  cursor: pointer;
  background: #00000021;
  border: none;
  width: 12px;
  height: 12px;
  transition: background .2s;
  display: inline-block;
}

.indicator.active {
  background: var(--color-primary);
  box-shadow: 0 0 0 4px #3b82f61a;
}

.indicator:hover {
  background: var(--color-primary-light);
}

.course-sidebar {
  gap: var(--space-6);
  top: var(--space-8);
  flex-direction: column;
  height: fit-content;
  display: flex;
  position: sticky;
}

.instructor-info {
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.instructor-photo {
  border-radius: var(--radius-full);
  border: 2px solid #a2d2ff33;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  box-shadow: 0 4px 12px #a2d2ff1a;
}

.instructor-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.instructor-details {
  flex: 1;
}

.instructor-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.instructor-title {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-2) 0;
}

.instructor-bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.benefit-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
}

.benefit-item:hover {
  background: #0000000a;
  border-color: #00000014;
}

.benefit-check {
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  color: var(--color-text-primary);
  background: #00000014;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.benefit-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.prerequisites-list {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.prerequisite-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
  display: flex;
}

.prerequisite-item:hover {
  background: #0000000a;
  border-color: #00000014;
}

.prerequisite-arrow {
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  color: var(--color-text-primary);
  background: #00000014;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.prerequisite-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.progress-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.materials-list {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.material-item {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: #00000005;
  border: 1px solid #0000000a;
  transition: all .2s;
}

.material-item:hover {
  background: #0000000a;
  border-color: #00000014;
}

.material-info h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.material-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.4;
}

.page-count {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.course-community-section p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.community-link {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.community-link:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

@media (width <= 1024px) {
  .course-sections {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .course-sidebar {
    position: static;
  }
}

@media (width <= 768px) {
  .course-hero {
    padding: var(--space-12) var(--space-4) var(--space-16);
  }

  .course-hero-title {
    font-size: var(--font-size-3xl);
  }

  .course-hero-stats {
    gap: var(--space-4);
  }

  .course-content-container {
    padding: 0 var(--space-4);
  }

  .videos-grid {
    grid-template-columns: 1fr;
  }
}

.modern-course-page {
  color: #2c3e50;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

.course-loading-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}

.loading-animation {
  gap: 8px;
  margin-bottom: 24px;
  display: flex;
}

.loading-circle {
  background: #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: 1.4s ease-in-out infinite both bounce;
}

.loading-circle:first-child {
  animation-delay: -.32s;
}

.loading-circle:nth-child(2) {
  animation-delay: -.16s;
}

.loading-message {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.course-error-container {
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px;
  display: flex;
}

.error-icon {
  color: gold;
  margin-bottom: 24px;
  font-size: 64px;
}

.error-back-button {
  color: #fff;
  background: #fff3;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 24px;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.error-back-button:hover {
  background: #ffffff4d;
  transform: translateY(-2px);
}

.course-hero-banner {
  color: #fff;
  background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
  border-bottom: 1px solid #ffffff1a;
  padding: 80px 40px 120px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 30px #0000001a;
}

.hero-background-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,.075)' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(45deg, #ffffff0d 25%, #0000 25% 50%, #ffffff0d 50% 75%, #0000 75%, #0000);
  background-size: 80px 80px, 40px 40px;
  animation: 60s linear infinite heroPatternMove;
  position: absolute;
  inset: 0;
}

@keyframes heroPatternMove {
  0% {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 1000px 0, 500px 0;
  }
}

.hero-content-wrapper {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.hero-back-button {
  color: #fff;
  background: #fff3;
  border: none;
  border-radius: 8px;
  padding: 12px;
  transition: all .3s;
  position: absolute;
  top: -40px;
  left: 0;
}

.hero-back-button:hover {
  background: #ffffff4d;
  transform: translateY(-2px);
}

.hero-badge {
  perspective: 1000px;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.course-type, .course-level {
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: .5px;
  text-transform: uppercase;
  background: #ffffff26;
  border: 1px solid #fff3;
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 15px #0000001a;
}

.course-type:hover, .course-level:hover {
  background: #ffffff40;
  transform: translateY(-2px)rotateX(5deg);
  box-shadow: 0 6px 20px #00000026;
}

.hero-title {
  text-shadow: 0 2px 10px #0000001a;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.5px;
  background: linear-gradient(90deg, #fff, #e0e0e0) text;
  margin-bottom: 16px;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.hero-subtitle {
  opacity: .9;
  letter-spacing: .5px;
  max-width: 600px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}

.hero-stats {
  z-index: 2;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  display: flex;
  position: relative;
}

.stat-item {
  -webkit-backdrop-filter: blur(10px);
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 15px #0000000d;
}

.stat-item:hover {
  background: #fff3;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #0000001a;
}

.stat-item i {
  color: #ffffffe6;
  background: #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  display: flex;
}

.hero-enroll-button {
  color: #fff;
  cursor: pointer;
  z-index: 1;
  letter-spacing: .5px;
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  border: none;
  border-radius: 50px;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #0072ff4d, inset 0 1px #ffffff4d;
}

.hero-enroll-button:before {
  content: "";
  opacity: 0;
  z-index: -1;
  background: linear-gradient(45deg, #0072ff, #00c6ff);
  width: 100%;
  height: 100%;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-enroll-button:hover {
  transform: translateY(-5px)scale(1.03);
  box-shadow: 0 15px 40px #0072ff66, inset 0 1px #ffffff4d;
}

.hero-enroll-button:hover:before {
  opacity: 1;
}

.hero-enroll-button:active {
  transform: translateY(-2px)scale(.98);
  box-shadow: 0 8px 20px #0072ff4d, inset 0 1px #ffffff4d;
}

.course-content-grid {
  z-index: 2;
  perspective: 1000px;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: -80px auto 0;
  padding: 0 40px;
  display: grid;
  position: relative;
}

.main-content-column {
  flex-direction: column;
  gap: 32px;
  display: flex;
}

.overview-card, .curriculum-card, .video-preview-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: #fff;
  border: 1px solid #00000008;
  border-radius: 20px;
  transition: all .5s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  box-shadow: 0 20px 60px #00000012, 0 1px 2px #0000000d;
}

.overview-card:hover, .curriculum-card:hover, .video-preview-card:hover {
  border-color: #00000014;
  transform: translateY(-8px)rotateX(2deg);
  box-shadow: 0 30px 80px #0000001a, 0 1px 2px #0000000d;
}

.card-header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-bottom: 1px solid #0000000d;
  align-items: center;
  gap: 16px;
  padding: 28px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card-header:before {
  content: "";
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  width: 100%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

.card-header i {
  color: #0072ff;
  background: #0072ff1a;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 24px;
  transition: all .3s;
  display: flex;
}

.card-header:hover i {
  background: #0072ff26;
  transform: scale(1.1)rotate(5deg);
}

.card-header h2 {
  color: #2c3e50;
  letter-spacing: -.5px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.module-count {
  color: #fff;
  background: #667eea;
  border-radius: 12px;
  margin-left: auto;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
}

.card-content {
  padding: 32px;
}

.course-description {
  color: #555;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
}

.course-highlights {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.highlight-item {
  background: #f8f9fa;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}

.highlight-item i {
  color: #28a745;
  font-size: 18px;
}

.curriculum-modules {
  padding: 0 32px 32px;
}

.module-item {
  background: #fff;
  border: 1px solid #0000000d;
  border-radius: 16px;
  margin-bottom: 20px;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  box-shadow: 0 4px 20px #00000008;
}

.module-item:hover {
  border-color: #0072ff4d;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px #0072ff1a;
}

.module-item.expanded {
  border-color: #0072ff80;
  box-shadow: 0 12px 40px #0072ff26;
}

.module-header {
  cursor: pointer;
  background: #fff;
  align-items: center;
  padding: 24px 28px;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.module-header:after {
  content: "";
  transform-origin: 0;
  background: linear-gradient(90deg, #0072ff33, #0000);
  width: 100%;
  height: 1px;
  transition: transform .4s;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
}

.module-header:hover {
  background: #0072ff05;
}

.module-header:hover:after {
  transform: scaleX(1);
}

.expanded .module-header {
  background: #0072ff0d;
}

.module-info {
  flex: 1;
  align-items: center;
  gap: 20px;
  display: flex;
}

.module-number {
  color: #fff;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px #0072ff33;
}

.module-number:before {
  content: "";
  opacity: 0;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  width: 100%;
  height: 100%;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.module-header:hover .module-number {
  transform: scale(1.1)rotate(5deg);
  box-shadow: 0 8px 20px #0072ff4d;
}

.module-header:hover .module-number:before {
  opacity: 1;
}

.module-details h3 {
  color: #2c3e50;
  letter-spacing: -.3px;
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  transition: all .3s;
}

.module-hours {
  color: #6c757d;
  background: #00000008;
  border-radius: 20px;
  align-items: center;
  padding: 4px 10px;
  font-size: 14px;
  transition: all .3s;
  display: inline-flex;
}

.module-header:hover .module-details h3 {
  color: #0072ff;
}

.module-header:hover .module-hours {
  color: #0072ff;
  background: #0072ff1a;
}

.module-content {
  background: #0072ff05;
  border-top: 1px dashed #0072ff1a;
  padding: 24px 28px;
  animation: .5s fadeIn;
}

.topics-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  padding-top: 16px;
  display: grid;
}

.topic-item {
  background: #fff;
  border: 1px solid #00000008;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px #00000008;
}

.topic-item:before {
  content: "";
  opacity: .5;
  background: linear-gradient(#00c6ff, #0072ff);
  width: 4px;
  height: 100%;
  transition: all .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.topic-item:hover {
  border-color: #0072ff33;
  transform: translate(4px);
  box-shadow: 0 8px 25px #0072ff1a;
}

.topic-item:hover:before {
  opacity: 1;
  width: 6px;
}

.topic-item i {
  color: #0072ff;
  background: #0072ff1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 8px;
  transition: all .3s;
  display: flex;
}

.topic-item:hover i {
  background: #0072ff33;
  transform: scale(1.2);
}

.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 32px;
  display: grid;
}

.video-preview-item {
  background: #f8f9fa;
  border-radius: 12px;
  gap: 16px;
  padding: 20px;
  transition: all .3s;
  display: flex;
}

.video-preview-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.video-thumbnail {
  color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 60px;
  font-size: 24px;
  display: flex;
}

.video-info h4 {
  color: #2c3e50;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.video-info p {
  color: #6c757d;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
}

.video-duration {
  color: #667eea;
  font-size: 12px;
  font-weight: 500;
}

.sidebar-column {
  z-index: 1;
  flex-direction: column;
  gap: 30px;
  display: flex;
  position: relative;
}

.instructor-spotlight, .progress-tracker, .benefits-card, .prerequisites-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: #fff;
  border: 1px solid #00000008;
  border-radius: 20px;
  transition: all .5s cubic-bezier(.165, .84, .44, 1);
  overflow: hidden;
  box-shadow: 0 20px 60px #00000012, 0 1px 2px #0000000d;
}

.instructor-spotlight:hover, .progress-tracker:hover, .benefits-card:hover, .prerequisites-card:hover {
  border-color: #00000014;
  transform: translateY(-5px)rotateX(2deg);
  box-shadow: 0 30px 80px #0000001a, 0 1px 2px #0000000d;
}

.instructor-spotlight {
  text-align: center;
  padding: 32px;
}

.instructor-avatar {
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
}

.instructor-avatar img {
  object-fit: cover;
  border: 4px solid #667eea;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.instructor-badge {
  color: #fff;
  background: #28a745;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
}

.instructor-info h3 {
  color: #2c3e50;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}

.instructor-title {
  color: #667eea;
  margin-bottom: 12px;
  font-weight: 500;
}

.instructor-bio {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.5;
}

.progress-tracker {
  padding: 24px;
}

.tracker-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.tracker-header i {
  color: #667eea;
  font-size: 20px;
}

.tracker-header h3 {
  color: #2c3e50;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.progress-content p {
  color: #6c757d;
  margin-bottom: 16px;
  font-size: 14px;
}

.testimonials-section {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}

.testimonials-section:before {
  content: "";
  opacity: .8;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(102, 126, 234, 0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: 60s linear infinite testimonialPatternMove;
  position: absolute;
  inset: 0;
}

@keyframes testimonialPatternMove {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 1000px 1000px;
  }
}

.testimonials-header {
  text-align: center;
  z-index: 1;
  margin-bottom: 60px;
  position: relative;
}

.testimonials-header h2 {
  color: #2c3e50;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, #2c3e50, #4a6bdf) text;
  margin-bottom: 24px;
  font-size: 2.8rem;
  font-weight: 800;
  display: inline-block;
  position: relative;
}

.testimonials-header h2:after {
  content: "";
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  width: 80px;
  height: 4px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%);
}

.testimonial-indicators {
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  display: flex;
}

.indicator {
  background: linear-gradient(135deg, var(--color-tertiary), var(--color-tertiary-dark));
  cursor: pointer;
  border: 2px solid #667eea4d;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  position: relative;
  overflow: hidden;
}

.indicator:before {
  content: "";
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  width: 0;
  height: 0;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.indicator:hover {
  border-color: #667eea99;
  transform: scale(1.2);
}

.indicator:hover:before {
  width: 6px;
  height: 6px;
}

.indicator.active {
  border-color: #667eea;
  transform: scale(1.3);
  box-shadow: 0 0 0 4px #667eea33;
}

.indicator.active:before {
  width: 10px;
  height: 10px;
}

.testimonial-carousel {
  z-index: 1;
  perspective: 1000px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.testimonial-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: #fff;
  border-radius: 24px;
  transition: all .5s cubic-bezier(.165, .84, .44, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #00000014, 0 0 0 1px #00000005;
}

.testimonial-card:hover {
  transform: translateY(-10px)rotateX(2deg);
  box-shadow: 0 30px 80px #667eea26, 0 0 0 1px #667eea1a;
}

.testimonial-card:before {
  content: "";
  z-index: 1;
  background: linear-gradient(90deg, #667eea, #764ba2);
  width: 100%;
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
}

.testimonial-content {
  text-align: center;
  z-index: 1;
  padding: 60px 48px 48px;
  position: relative;
}

.quote-icon {
  color: #667eea;
  opacity: .8;
  text-shadow: 0 4px 20px #667eea33;
  margin-bottom: 24px;
  font-size: 48px;
  display: inline-block;
  position: relative;
}

.quote-icon:before {
  content: "";
  z-index: -1;
  background: #667eea1a;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.testimonial-text {
  color: #495057;
  margin-bottom: 36px;
  padding: 0 20px;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
  position: relative;
}

.testimonial-text:before, .testimonial-text:after {
  content: "\"";
  color: #667eea33;
  font-size: 40px;
  line-height: 0;
  position: absolute;
}

.testimonial-text:before {
  top: 15px;
  left: 0;
}

.testimonial-text:after {
  bottom: 0;
  right: 0;
}

.testimonial-author {
  border-top: 1px solid #0000000d;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  display: flex;
}

.author-info {
  align-items: center;
  gap: 16px;
  display: flex;
}

.author-avatar {
  border: 2px solid #667eea4d;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 4px 10px #0000001a;
}

.author-details h4 {
  color: #2c3e50;
  letter-spacing: -.3px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.author-details span {
  color: #667eea;
  font-size: 14px;
  font-weight: 500;
}

.rating {
  background: #ffd7001a;
  border: 1px solid #ffd70033;
  border-radius: 20px;
  gap: 4px;
  padding: 8px 12px;
  transition: all .3s;
  display: flex;
}

.testimonial-card:hover .rating {
  background: #ffd70026;
  transform: scale(1.05);
}

.rating i {
  color: gold;
  text-shadow: 0 2px 4px #ffd7004d;
  font-size: 16px;
  transition: all .3s;
}

.testimonial-card:hover .rating i {
  transform: scale(1.1);
}

.resources-section {
  background: linear-gradient(135deg, #fff, #f8f9fa);
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}

.resources-section:before {
  content: "";
  opacity: .8;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(102, 126, 234, 0.03)' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  position: absolute;
  inset: 0;
}

.resources-grid {
  z-index: 1;
  perspective: 1000px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  position: relative;
}

.resource-card {
  text-align: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: #fff;
  border: 1px solid #0000000d;
  border-radius: 24px;
  padding: 40px 32px;
  transition: all .5s cubic-bezier(.165, .84, .44, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #0000000d, 0 1px 2px #0000000d;
}

.resource-card:before {
  content: "";
  opacity: 0;
  z-index: 0;
  background: linear-gradient(135deg, #667eea0d, #764ba20d);
  width: 100%;
  height: 100%;
  transition: opacity .5s;
  position: absolute;
  top: 0;
  left: 0;
}

.resource-card:hover {
  border-color: #667eea4d;
  transform: translateY(-10px)rotateX(2deg);
  box-shadow: 0 30px 80px #667eea26, 0 1px 2px #0000000d;
}

.resource-card:hover:before {
  opacity: 1;
}

.resource-icon {
  color: #667eea;
  z-index: 1;
  margin-bottom: 28px;
  font-size: 48px;
  transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-block;
  position: relative;
}

.resource-icon:before {
  content: "";
  z-index: -1;
  background: #667eea1a;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.resource-card:hover .resource-icon {
  color: #5a6fd8;
  transform: scale(1.1)translateY(-5px);
}

.resource-card:hover .resource-icon:before {
  background: #667eea26;
  transform: translate(-50%, -50%)scale(1.2);
}

.resource-card h3 {
  color: #2c3e50;
  z-index: 1;
  letter-spacing: -.5px;
  margin-bottom: 18px;
  font-size: 1.6rem;
  font-weight: 700;
  transition: all .3s;
  position: relative;
}

.resource-card:hover h3 {
  color: #5a6fd8;
}

.resource-card p {
  color: #495057;
  z-index: 1;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.7;
  transition: all .3s;
  position: relative;
}

.resource-card:hover p {
  color: #2c3e50;
}

.workbook-list, .guide-list {
  text-align: left;
  z-index: 1;
  position: relative;
}

.workbook-item, .guide-item {
  background: #f8f9fa;
  border: 1px solid #00000008;
  border-radius: 14px;
  margin-bottom: 16px;
  padding: 20px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px #00000008;
}

.workbook-item:before, .guide-item:before {
  content: "";
  opacity: .5;
  background: linear-gradient(#667eea, #764ba2);
  width: 4px;
  height: 100%;
  transition: all .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.workbook-item:hover, .guide-item:hover {
  background: #f0f2fa;
  border-color: #667eea33;
  transform: translate(4px);
  box-shadow: 0 8px 25px #667eea1a;
}

.workbook-item:hover:before, .guide-item:hover:before {
  opacity: 1;
  width: 6px;
}

.workbook-info h4, .guide-item h4 {
  color: #2c3e50;
  letter-spacing: -.3px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  transition: all .3s;
}

.workbook-item:hover .workbook-info h4, .guide-item:hover h4 {
  color: #5a6fd8;
}

.workbook-info p, .guide-item p {
  color: #495057;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  transition: all .3s;
}

.workbook-item:hover .workbook-info p, .guide-item:hover p {
  color: #2c3e50;
}

.page-count {
  color: #667eea;
  background: #667eea1a;
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  transition: all .3s;
  display: inline-flex;
}

.page-count i {
  font-size: 12px;
}

.workbook-item:hover .page-count, .guide-item:hover .page-count {
  background: #667eea33;
  transform: scale(1.05);
}

.community-link {
  color: #fff;
  letter-spacing: .5px;
  z-index: 1;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50px;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #667eea4d, inset 0 1px #fff3;
}

.community-link:before {
  content: "";
  opacity: 0;
  z-index: -1;
  background: linear-gradient(45deg, #764ba2, #667eea);
  width: 100%;
  height: 100%;
  transition: opacity .4s;
  position: absolute;
  top: 0;
  left: 0;
}

.community-link:hover {
  transform: translateY(-5px)scale(1.03);
  box-shadow: 0 15px 40px #667eea66, inset 0 1px #ffffff4d;
}

.community-link:hover:before {
  opacity: 1;
}

.community-link:active {
  transform: translateY(-2px)scale(.98);
  box-shadow: 0 8px 20px #667eea4d, inset 0 1px #ffffff4d;
}

.community-link i {
  font-size: 18px;
  transition: all .3s;
}

.community-link:hover i {
  transform: translate(3px);
}

@media (width <= 768px) {
  .course-content-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }

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

  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .resources-grid, .video-grid, .topics-grid {
    grid-template-columns: 1fr;
  }
}

.course-detail {
  background-color: var(--color-bg-secondary);
  padding: 2rem;
}

.course-detail .course-detail-hero {
  background-color: var(--color-text-primary);
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
}

.course-detail .course-detail-hero .course-detail-hero-title {
  margin-bottom: 1rem;
  font-size: 3rem;
}

.course-detail .course-detail-hero .course-detail-hero-subtitle {
  font-size: 1.5rem;
}

.course-detail .course-detail-container {
  gap: 2rem;
  margin-top: 2rem;
  display: flex;
}

.course-detail .course-detail-container .course-main-content {
  flex: 3;
}

.course-detail .course-detail-container .course-sidebar {
  flex: 1;
}

.course-detail .course-section {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px #0000001a;
}

.course-detail .course-section h3 {
  border-bottom: 2px solid var(--color-border-light);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.5rem;
}

.course-detail .accordion-item {
  border-bottom: 1px solid var(--color-border-light);
}

.course-detail .accordion-item .accordion-title {
  cursor: pointer;
  justify-content: space-between;
  padding: 1rem;
  font-weight: 700;
  display: flex;
}

.course-detail .accordion-item .accordion-title:hover {
  background-color: var(--color-bg-secondary);
}

.course-detail .accordion-item .accordion-content {
  background-color: var(--color-bg-primary);
  padding: 1rem;
}

.course-detail .lesson-list {
  padding: 0;
  list-style: none;
}

.course-detail .lesson-list li {
  margin-bottom: .5rem;
}

.course-detail .lesson-list li .lesson-link {
  color: var(--color-tertiary-dark);
  text-decoration: none;
}

.course-detail .lesson-list li .lesson-link:hover {
  text-decoration: underline;
}

.course-detail .progress-section {
  text-align: center;
}

.course-detail .instructor-info {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.course-detail .instructor-info .instructor-photo {
  opacity: .5;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.course-detail .course-extra-sections {
  margin-top: 2rem;
}

.lesson-detail {
  background-color: #f9f9f9;
  padding: 2rem;
}

.lesson-detail .lesson-detail-hero {
  color: #fff;
  text-align: center;
  background-color: #333;
  padding: 4rem 2rem;
}

.lesson-detail .lesson-detail-hero .lesson-detail-hero-title {
  margin-bottom: 1rem;
  font-size: 3rem;
}

.lesson-detail .lesson-detail-hero .lesson-detail-hero-subtitle {
  font-size: 1.5rem;
}

.lesson-detail .lesson-detail-hero .lesson-detail-meta {
  margin-top: 1rem;
}

.lesson-detail .lesson-detail-hero .lesson-detail-meta .lesson-meta-badge {
  color: #fff;
  background-color: #555;
  border-radius: 20px;
  margin: 0 .5rem;
  padding: .5rem 1rem;
  font-size: .9rem;
}

.lesson-detail .lesson-detail-container {
  gap: 2rem;
  margin-top: 2rem;
  display: flex;
}

.lesson-detail .lesson-detail-container .lesson-main-content {
  flex: 3;
}

.lesson-detail .lesson-detail-container .lesson-sidebar {
  flex: 1;
}

.lesson-detail .lesson-section {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px #0000001a;
}

.lesson-detail .lesson-section h3 {
  border-bottom: 2px solid #eee;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.5rem;
}

.lesson-detail .video-container {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.lesson-detail .video-container .lesson-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.lesson-detail .lesson-list {
  padding: 0;
  list-style: none;
}

.lesson-detail .lesson-list li {
  margin-bottom: .5rem;
}

.lesson-detail .progress-section {
  text-align: center;
}

.lesson-detail .instructor-info {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.lesson-detail .instructor-info .instructor-photo {
  opacity: .5;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.lesson-detail .lesson-extra-sections {
  margin-top: 2rem;
}

.workbook-landing-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #66263205 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.workbook-hero {
  text-align: center;
  min-height: 80vh;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(135deg, #6626321a 0%, #8b3d470d 100%);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.workbook-hero-background {
  z-index: 1;
  background: linear-gradient(135deg, #f4acb71a 0%, #ffdab90d 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.workbook-hero-overlay {
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, #f4acb71a 0%, #0000 50%), radial-gradient(circle at 70% 80%, #ffdab91a 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.workbook-hero-content {
  text-align: center;
  z-index: 3;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.workbook-hero-icon {
  margin-bottom: var(--space-6);
  font-size: 4rem;
  animation: 6s ease-in-out infinite workbooksFloat;
}

.workbook-hero-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.workbook-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.4;
}

.workbook-hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.7;
}

.workbook-hero-stats {
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  display: flex;
}

.stat {
  align-items: center;
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.workbook-filters {
  backdrop-filter: blur(20px);
  padding: var(--space-6) 0;
  z-index: 10;
  background: #fffc;
  border-bottom: 1px solid #6626321a;
  position: sticky;
  top: 0;
}

.workbook-filters-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.filter-btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: none;
  border: 2px solid #0000;
  transition: all .3s;
}

.filter-btn:hover {
  color: var(--color-primary);
  background: #6626320d;
  border-color: #66263233;
}

.workbook-section {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.workbook-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.workbook-section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.workbook-section-icon {
  margin-bottom: var(--space-4);
  font-size: 3rem;
  display: inline-block;
}

.workbook-section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  position: relative;
}

.workbook-section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  width: 10rem;
  height: 3px;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.workbook-section-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.workbook-cards-grid {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  display: grid;
}

.workbook-card {
  background: var(--color-background);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  cursor: pointer;
  border: 1px solid #66263214;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #6626320f;
}

.workbook-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 100%;
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

.workbook-card:hover {
  border-color: #66263233;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px #66263226;
}

.workbook-card:hover:before {
  transform: scaleX(1);
}

.workbook-card-header {
  margin-bottom: var(--space-6);
}

.workbook-card-badge {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  background: #f4acb71a;
  display: inline-flex;
}

.workbook-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.workbook-card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.workbook-card-content {
  margin-bottom: var(--space-6);
  flex: 1;
}

.workbook-card-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.workbook-card-meta {
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-direction: column;
  display: flex;
}

.workbook-card-features {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: #f4acb70d;
}

.features-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.features-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
  padding-left: 2rem;
  line-height: 1.5;
  position: relative;
}

.feature-item:before {
  content: "";
  color: var(--color-primary);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.workbook-card-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  display: flex;
}

.workbook-card-benefits {
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.benefits-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.benefits-count {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.workbook-card-cta {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
  border: none;
  transition: all .3s;
  display: flex;
}

.workbook-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #6626324d;
}

.cta-arrow {
  transition: transform .3s;
}

.workbook-card-cta:hover .cta-arrow {
  transform: translate(4px);
}

.workbook-cta {
  padding: var(--space-20) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #6626320d 0%, #8b3d470d 100%);
}

.workbook-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.workbook-cta-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.workbook-cta-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.workbook-cta-features {
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.cta-feature {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.feature-icon {
  font-size: 1.25rem;
}

.workbook-cta-buttons {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.cta-btn {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-size: var(--font-size-base);
  border: 2px solid #0000;
  transition: all .3s;
}

.cta-btn.primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
}

.cta-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #6626324d;
}

.cta-btn.secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: none;
}

.cta-btn.secondary:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.workbook-detail-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #66263205 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.workbook-detail-header {
  padding: var(--space-16) var(--space-6);
  background: linear-gradient(135deg, #6626321a 0%, #8b3d470d 100%);
}

.workbook-detail-hero {
  max-width: 1200px;
  margin: 0 auto;
}

.back-link {
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-8);
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.back-link:hover {
  color: var(--color-secondary);
  transform: translate(-4px);
}

.back-arrow {
  font-size: 1.25rem;
}

.workbook-detail-content {
  text-align: center;
}

.workbook-detail-badge {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  background: #f4acb71a;
  display: inline-flex;
}

.workbook-detail-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.workbook-detail-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.4;
}

.workbook-detail-meta {
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.meta-item {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.meta-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.meta-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.workbook-detail-nav {
  backdrop-filter: blur(20px);
  padding: var(--space-6) 0;
  z-index: 10;
  background: #fffc;
  border-bottom: 1px solid #6626321a;
  position: sticky;
  top: 0;
}

.workbook-nav-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.nav-tab {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
  background: none;
  border: 2px solid #0000;
  transition: all .3s;
}

.nav-tab:hover {
  color: var(--color-primary);
  background: #6626320d;
  border-color: #66263233;
}

.nav-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.workbook-detail-content {
  max-width: 1200px;
  margin: 0 var(--space-12);
  padding: var(--space-16) var(--space-6);
}

.workbook-tab-content {
  gap: var(--space-12);
  flex-direction: column;
  display: flex;
}

.workbook-section {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: #fffffff2;
  border: 1px solid #66263214;
  box-shadow: 0 4px 20px #6626320f;
}

.section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  position: relative;
}

.section-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
  width: 10rem;
  height: 3px;
  position: absolute;
  top: -1rem;
  left: 40%;
}

.section-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.section-content {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.features-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  display: grid;
}

.feature-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  background: #f4acb70d;
  border: 1px solid #f4acb71a;
}

.feature-icon {
  margin-bottom: var(--space-4);
  font-size: 2rem;
}

.feature-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.feature-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.benefits-list {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
}

.benefit-item {
  gap: var(--space-4);
  align-items: flex-start;
  display: flex;
}

.benefit-number {
  background: var(--color-primary);
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.benefit-content {
  flex: 1;
}

.benefit-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.benefit-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.sections-timeline {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
}

.timeline-item {
  gap: var(--space-4);
  align-items: flex-start;
  display: flex;
}

.timeline-marker {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  width: 50px;
  height: 50px;
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.timeline-content {
  padding-top: var(--space-2);
  flex: 1;
}

.timeline-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.timeline-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.download-info-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  display: grid;
}

.info-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  background: #f4acb70d;
  border: 1px solid #f4acb71a;
}

.info-icon {
  margin-bottom: var(--space-4);
  font-size: 2rem;
}

.info-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.info-value {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.usage-steps {
  gap: var(--space-6);
  flex-direction: column;
  display: flex;
}

.step-item {
  gap: var(--space-4);
  align-items: flex-start;
  display: flex;
}

.step-number {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  width: 50px;
  height: 50px;
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.step-content {
  padding-top: var(--space-2);
  flex: 1;
}

.step-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.step-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.requirements-box {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border-left: 4px solid var(--color-primary);
  background: #f4acb70d;
}

.requirements-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.learning-outcomes {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.outcome-item {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #f4acb70d;
  border: 1px solid #f4acb71a;
  display: flex;
}

.outcome-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.outcome-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.workbook-detail-cta {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, #6626320d 0%, #8b3d470d 100%);
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.cta-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.cta-buttons {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

@media (width <= 1024px) {
  .workbook-cards-grid {
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }

  .workbook-hero-stats {
    gap: var(--space-6);
  }

  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .download-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (width <= 768px) {
  .workbook-hero {
    min-height: 70vh;
    padding: var(--space-16) var(--space-4);
  }

  .workbook-hero-stats {
    gap: var(--space-4);
    flex-direction: column;
  }

  .workbook-filters-container {
    flex-direction: column;
    align-items: center;
  }

  .filter-btn {
    width: 100%;
    max-width: 200px;
  }

  .workbook-main-content {
    padding: var(--space-12) var(--space-4);
    gap: var(--space-12);
  }

  .workbook-section {
    padding: var(--space-8);
  }

  .workbook-cards-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .workbook-card {
    min-height: auto;
  }

  .workbook-card-footer {
    align-items: stretch;
    gap: var(--space-4);
    flex-direction: column;
  }

  .workbook-cta {
    padding: var(--space-16) var(--space-4);
  }

  .workbook-cta-features {
    align-items: center;
    gap: var(--space-4);
    flex-direction: column;
  }

  .workbook-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-btn {
    width: 100%;
    max-width: 300px;
  }

  .workbook-detail-header {
    padding: var(--space-12) var(--space-4);
  }

  .workbook-detail-meta {
    gap: var(--space-4);
    flex-direction: column;
  }

  .workbook-nav-container {
    flex-direction: column;
    align-items: center;
  }

  .nav-tab {
    width: 100%;
    max-width: 200px;
  }

  .workbook-detail-content {
    padding: var(--space-12) var(--space-4);
  }

  .features-grid, .download-info-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (width <= 480px) {
  .workbook-hero-title {
    font-size: 2rem;
  }

  .workbook-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .workbook-hero-description {
    font-size: var(--font-size-base);
  }

  .workbook-section-title {
    font-size: var(--font-size-2xl);
  }

  .workbook-card {
    padding: var(--space-6);
  }

  .workbook-card-title {
    font-size: var(--font-size-lg);
  }

  .workbook-detail-title {
    font-size: 1.75rem;
  }

  .workbook-detail-subtitle {
    font-size: var(--font-size-lg);
  }
}

.resource-detail-page {
  background: linear-gradient(135deg, var(--color-background-light) 0%, var(--color-background) 100%);
  min-height: 100vh;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  padding-bottom: var(--space-16);
}

.resource-detail-hero {
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24) var(--space-12);
  background: linear-gradient(135deg, var(--color-tertiary-light) 0%, var(--color-secondary-light) 100%);
  color: var(--color-tertiary-darker);
  margin-bottom: 2rem;
  display: flex;
  position: relative;
  box-shadow: 0 8px 32px #00000014;
}

.resource-hero-icon {
  border-radius: var(--radius-full);
  width: 72px;
  height: 72px;
  margin-right: var(--space-4);
  background: #ffffff1f;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 4px 16px #0000001a;
}

.resource-hero-content {
  flex: 1;
}

.resource-meta-badges {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.resource-meta-badge {
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .5px;
  background: #ffffff2e;
  border: 1px solid #ffffff38;
  transition: all .2s;
}

.resource-meta-badge.sanskrit {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  background: #ffffff38;
}

.resource-meta-badge.element {
  color: var(--color-secondary);
  background: #ffffff21;
}

.resource-meta-badge.chakra {
  color: var(--color-primary);
  background: #ffffff21;
}

.resource-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  line-height: 1.1;
}

.resource-subtitle {
  font-size: var(--font-size-xl);
  opacity: .92;
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.resource-description {
  font-size: var(--font-size-lg);
  opacity: .92;
  margin-bottom: 0;
  line-height: 1.5;
}

.resource-detail-content-wrapper {
  max-width: 1200px;
  padding: 0 var(--space-6);
  z-index: 2;
  margin: 0 auto;
  position: relative;
}

.resource-section {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid #0000000f;
  transition: box-shadow .2s;
  box-shadow: 0 2px 8px #0000000a;
}

.resource-section:hover {
  box-shadow: 0 4px 16px #00000014;
}

.section-header {
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  display: flex;
}

.resource-detail-content-wrapper .section-header {
  margin-left: 0;
}

.section-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  display: flex;
  box-shadow: 0 4px 12px #9d81891f;
}

.resource-content {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.resource-list, .key-points-list, .benefits-list {
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.resource-list li, .key-points-list li, .benefits-list li {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: #00000005;
  transition: background .2s;
}

.resource-list li:hover, .key-points-list li:hover, .benefits-list li:hover {
  background: #0000000a;
}

.technique-list {
  padding-left: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
  line-height: 1.6;
}

.technique-list li {
  margin-bottom: var(--space-2);
}

.summary-section {
  background: linear-gradient(135deg, var(--cherry-blossom-pink) 0%, var(--misty-rose) 50%);
  border: 1px solid #0000000a;
  box-shadow: 0 2px 8px #00000008;
}

.summary-content {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin: 0;
  font-style: italic;
}

.resource-progress-section {
  margin: var(--space-10) auto 0 auto;
  max-width: 900px;
  padding: var(--space-6) 0;
  text-align: center;
}

.page-error {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  max-width: 600px;
  padding: var(--space-10);
  text-align: center;
  margin: 6rem auto;
  box-shadow: 0 2px 8px #0000000f;
}

@media (width <= 900px) {
  .resource-detail-content-wrapper {
    padding: 0 var(--space-2);
  }

  .resource-detail-hero {
    padding: var(--space-10) var(--space-4) var(--space-8);
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-hero-icon {
    margin-bottom: var(--space-4);
  }
}

@media (width <= 600px) {
  .resource-detail-hero {
    padding: var(--space-6) var(--space-2) var(--space-6);
  }

  .resource-title {
    font-size: var(--font-size-2xl);
  }

  .resource-section {
    padding: var(--space-4);
  }

  .resource-progress-section {
    padding: var(--space-4) 0;
  }
}

.payment-immersive-bg {
  background: linear-gradient(120deg, var(--color-primary-lighter) 0%, var(--color-bg-secondary) 100%);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 4rem;
  display: flex;
  position: relative;
  overflow-x: hidden;
}

.payment-hero-section {
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2.5rem;
  padding-top: 3.5rem;
  position: relative;
}

.payment-hero-svg {
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.payment-hero-title {
  z-index: 1;
  color: var(--color-primary);
  letter-spacing: -1px;
  margin-bottom: .5rem;
  font-size: 2.5rem;
  font-weight: 800;
  position: relative;
}

.payment-hero-subtitle {
  z-index: 1;
  color: var(--color-text-secondary);
  margin-bottom: 2.5rem;
  font-size: 1.25rem;
  position: relative;
}

.payment-main-card {
  z-index: 2;
  background: #ffffffd9;
  border-radius: 2.5rem;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 2rem;
  display: flex;
  position: relative;
  box-shadow: 0 8px 32px #4c288524;
}

.payment-options-row {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  display: flex;
}

.payment-offer-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-light);
  cursor: pointer;
  border-radius: 1.2rem;
  outline: none;
  flex-direction: column;
  flex: 260px;
  align-items: center;
  min-width: 260px;
  max-width: 320px;
  margin-bottom: 1rem;
  padding: 2rem 1.5rem 1.5rem;
  transition: all .2s;
  display: flex;
  position: relative;
  box-shadow: 0 2px 8px #7c3aed0f;
}

.payment-offer-card.selected {
  border: 2.5px solid var(--color-primary);
  background: #7c3aed14;
  box-shadow: 0 4px 16px #7c3aed1a;
}

.payment-offer-card.selected .offer-title-founding {
  color: var(--color-warning);
}

.payment-offer-card.selected .offer-price-founding {
  color: var(--color-secondary);
}

.offer-icon {
  margin-bottom: .5rem;
  font-size: 2.2rem;
}

.offer-title {
  color: var(--color-primary-dark);
  text-align: center;
  margin-bottom: .25rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.offer-title-founding {
  color: var(--color-warning);
}

.offer-price {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: .25rem;
  font-size: 2.2rem;
  font-weight: 900;
}

.offer-price-founding {
  color: var(--color-secondary);
}

.offer-period {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
}

.offer-desc {
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: .5rem;
  font-size: 1.05rem;
}

.offer-note {
  color: var(--color-text-secondary);
  text-align: center;
  font-size: .98rem;
}

.offer-note-founding {
  color: var(--color-warning);
}

.form-section-immersive {
  text-align: left;
  margin-bottom: 1.2rem;
}

.form-label-immersive {
  color: var(--color-primary-dark);
  margin-bottom: .5rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
}

.card-element-immersive {
  background: var(--color-bg-secondary);
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  min-height: 48px;
  margin-bottom: .5rem;
  padding: 1.1rem 1.2rem;
}

.payment-actions-immersive {
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  display: flex;
}

.pay-button-immersive {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #7c3aed 0%, #4c2885 100%);
  border: none;
  border-radius: .75rem;
  padding: .7rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  transition: background .2s;
  box-shadow: 0 2px 8px #4c28851a;
}

.pay-button-immersive.founding {
  background: linear-gradient(90deg, #f59e42 0%, #b45309 100%);
}

.pay-button-immersive:disabled {
  color: #aaa;
  cursor: not-allowed;
  background: #e5e7eb;
}

.cancel-button-immersive {
  color: #555;
  cursor: pointer;
  background: #f3f3f3;
  border: none;
  border-radius: .75rem;
  padding: .7rem 1.5rem;
  font-weight: 600;
  transition: background .2s;
}

.cancel-button-immersive:disabled {
  color: #aaa;
  cursor: not-allowed;
  background: #e5e7eb;
}

.payment-security-immersive {
  text-align: center;
  color: #555;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  display: flex;
}

.lock-icon-immersive {
  margin-right: .3rem;
  font-size: 1.3rem;
}

.payment-details-section {
  z-index: 2;
  background: #ffffffd9;
  border-radius: 2rem;
  max-width: 800px;
  margin: 2.5rem auto 0;
  padding: 2.5rem 2rem 2rem;
  position: relative;
  box-shadow: 0 4px 24px #4c288514;
}

.details-title {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.details-list {
  color: #444;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 1.08rem;
  list-style: none;
}

.details-list li {
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  display: flex;
}

.faq-section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.faq-section h3 {
  color: #4c2885;
  margin-bottom: .5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.faq-item {
  color: #444;
  margin-bottom: .5rem;
  font-size: 1rem;
}

.testimonials-section {
  margin-top: 1.5rem;
}

.testimonials-section h3 {
  color: #4c2885;
  margin-bottom: .5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.testimonial {
  color: #444;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-style: italic;
}

.testimonial-author {
  color: #7c3aed;
  margin-left: .5rem;
  font-weight: 600;
}

.error-message-immersive {
  color: #e53e3e;
  text-align: center;
  margin-top: .5rem;
}

.success-message-immersive {
  color: #10b981;
  text-align: center;
  margin-top: .5rem;
}

@media (width <= 1024px) {
  .payment-main-card, .payment-details-section {
    max-width: 98vw;
    padding: 2rem 1rem 1.5rem;
  }

  .payment-options-row {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (width <= 600px) {
  .payment-main-card, .payment-details-section {
    border-radius: 1.2rem;
    padding: 1.2rem .5rem 1rem;
  }

  .payment-hero-title {
    font-size: 1.5rem;
  }

  .payment-hero-section {
    padding-top: 2rem;
  }

  .offer-price, .offer-price-founding {
    font-size: 1.3rem;
  }
}

.notfound-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding: var(--space-8) var(--space-6);
  justify-content: center;
  align-items: center;
  display: flex;
}

.notfound-content {
  text-align: center;
  max-width: 600px;
  padding: var(--space-12);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
  background: #fff;
  animation: .8s ease-out notfoundFadeInUp;
}

.notfound-icon {
  margin-bottom: var(--space-6);
  font-size: 4rem;
  animation: 3s ease-in-out infinite notfoundFloat;
}

.notfound-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.notfound-subtitle {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.notfound-message {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.notfound-actions {
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.notfound-home-btn, .notfound-back-btn {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-base);
  border: none;
  text-decoration: none;
  display: inline-flex;
}

.notfound-home-btn.primary {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.notfound-home-btn.primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.notfound-back-btn.secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-light);
}

.notfound-back-btn.secondary:hover {
  background: var(--color-border-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.notfound-suggestions {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-8);
}

.notfound-suggestions h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.suggestions-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  max-width: 400px;
  margin: 0 auto;
  display: grid;
}

.suggestion-link {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  transition: var(--transition-base);
  cursor: pointer;
  border: none;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.suggestion-link:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.suggestion-icon {
  font-size: var(--font-size-2xl);
}

.suggestion-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

@media (width <= 768px) {
  .notfound-page {
    padding: var(--space-6) var(--space-4);
  }

  .notfound-content {
    padding: var(--space-8);
  }

  .notfound-title {
    font-size: var(--font-size-5xl);
  }

  .notfound-subtitle {
    font-size: var(--font-size-xl);
  }

  .notfound-actions {
    flex-direction: column;
    align-items: center;
  }

  .notfound-home-btn, .notfound-back-btn {
    justify-content: center;
    width: 100%;
    max-width: 200px;
  }

  .suggestions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 480px) {
  .notfound-page {
    padding: var(--space-4) var(--space-3);
  }

  .notfound-content {
    padding: var(--space-6);
  }

  .notfound-title {
    font-size: var(--font-size-4xl);
  }

  .notfound-subtitle {
    font-size: var(--font-size-lg);
  }

  .notfound-message {
    font-size: var(--font-size-base);
  }

  .suggestions-grid {
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  .suggestion-link {
    padding: var(--space-3);
  }
}

.inspiration-page {
  --section-padding: 6rem 0;
  --section-spacing: 4rem;
}

.inspiration-hero {
  text-align: center;
  background-color: var(--color-background-alt);
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 6rem 2rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.inspiration-hero-content {
  z-index: 2;
  opacity: 0;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  transform: translateY(30px);
}

.inspiration-hero.animate-in .inspiration-hero-content {
  animation: 1s forwards heroContentReveal;
}

@keyframes heroContentReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inspiration-hero-title {
  color: var(--color-text-heading);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--deep-purple) 50%, var(--cherry-blossom-pink) 100%);
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.inspiration-hero-subtitle {
  color: var(--color-text-body);
  max-width: 700px;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.6;
}

.inspiration-hero-cta {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.inspiration-section {
  padding: var(--section-padding);
  position: relative;
}

.inspiration-section-alt {
  background-color: var(--color-background-alt);
}

.section-header {
  text-align: center;
  opacity: 0;
  max-width: 800px;
  margin: 0 auto 4rem;
  transform: translateY(30px);
}

.inspiration-section.animate-in .section-header {
  animation: .8s forwards sectionHeaderReveal;
}

@keyframes sectionHeaderReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  color: var(--color-text-heading);
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 700;
  display: inline-block;
  position: relative;
}

.section-title:after {
  content: "";
  background-color: var(--color-primary);
  width: 80px;
  height: 3px;
  position: absolute;
  bottom: -.5rem;
  left: 50%;
  transform: translate(-50%);
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.meditation-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  display: grid;
}

.yoga-poses-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  display: grid;
}

.chakra-wheel-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.breathing-animations-grid {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
  display: grid;
}

.inspiration-cta {
  text-align: center;
  background-color: var(--color-background-alt);
  padding: 8rem 0;
}

.inspiration-cta-content {
  z-index: 2;
  opacity: 0;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  transform: translateY(30px);
}

.inspiration-cta.animate-in .inspiration-cta-content {
  animation: .8s forwards ctaContentReveal;
}

@keyframes ctaContentReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inspiration-cta-title {
  color: var(--color-text-heading);
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
}

.inspiration-cta-subtitle {
  color: var(--color-text-body);
  max-width: 600px;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem;
  line-height: 1.6;
}

.inspiration-cta-buttons {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.animate-in {
  opacity: 1;
  transition: opacity .8s, transform .8s;
  transform: translateY(0);
}

@media (width <= 992px) {
  .inspiration-page {
    --section-padding: 5rem 0;
    --section-spacing: 3rem;
  }

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

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

@media (width <= 768px) {
  .inspiration-page {
    --section-padding: 4rem 0;
    --section-spacing: 2.5rem;
  }

  .inspiration-hero {
    min-height: 80vh;
    padding: 5rem 1.5rem;
  }

  .inspiration-hero-title {
    font-size: 2.5rem;
  }

  .inspiration-hero-subtitle {
    font-size: 1.1rem;
  }

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

  .section-subtitle {
    font-size: 1rem;
  }

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

  .breathing-animations-grid {
    grid-template-columns: 1fr;
  }

  .inspiration-cta-title {
    font-size: 2.2rem;
  }
}

@media (width <= 576px) {
  .inspiration-page {
    --section-padding: 3rem 0;
    --section-spacing: 2rem;
  }

  .inspiration-hero-title {
    font-size: 2.2rem;
  }

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

  .meditation-cards-grid, .yoga-poses-grid {
    grid-template-columns: 1fr;
  }

  .inspiration-cta-title {
    font-size: 2rem;
  }

  .inspiration-cta-subtitle {
    font-size: 1.1rem;
  }
}

@media (width >= 768px) {
  .asana-detail-content {
    flex-direction: row;
    align-items: center;
  }
}

@media (width <= 768px) {
  .asana-detail-hero {
    padding: var(--space-12) var(--space-4);
    min-height: 30vh;
  }

  .asana-detail-hero-title {
    font-size: var(--font-size-3xl);
  }

  .asana-detail-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .asana-detail-container {
    padding: 0;
  }

  .asana-sections {
    grid-template-columns: 1fr;
  }
}

@media (width <= 480px) {
  .asana-detail-hero {
    padding: var(--space-8) var(--space-4);
    min-height: 25vh;
  }

  .asana-detail-hero-title {
    font-size: var(--font-size-2xl);
  }

  .asana-detail-meta {
    flex-wrap: wrap;
  }

  .asana-detail-content, .asana-section {
    padding: var(--space-4);
  }
}

.site-footer {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
  color: #7a4c4c;
  z-index: 100;
  background-color: #f7e7e2;
  border-top: 2px solid #f3cfd5;
  margin-top: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -4px 24px #f3cfd566;
}

.site-footer a {
  color: #fffc;
  transition: var(--transition-base);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: none;
}

.site-footer a:visited {
  color: #fffc;
  text-decoration: none;
}

.site-footer a:focus {
  color: #fff;
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  outline: 2px solid #ffffff4d;
  text-decoration: none;
}

.footer-waves {
  height: 100px;
  position: absolute;
  top: 0;
  left: 40px;
  right: 0;
  overflow: visible clip;
}

.wave {
  background: #ffffff1a;
  border-radius: 50%;
  width: 200%;
  height: 100%;
  animation: 6s ease-in-out infinite wave;
  position: absolute;
  top: 0;
  left: 0;
}

.wave-1 {
  opacity: .3;
  animation-delay: 0s;
}

.wave-2 {
  opacity: .2;
  animation-delay: 2s;
}

.wave-3 {
  opacity: .1;
  animation-delay: 4s;
}

.footer-content {
  z-index: 1;
  max-width: 1200px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: none;
  margin: 0 auto;
  position: relative;
}

.footer-main {
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  grid-template-columns: 2fr 1fr 1fr 1fr;
  display: grid;
}

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

.footer-logo {
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
}

.footer-logo-image {
  border-radius: var(--radius-lg);
  object-fit: cover;
  width: 60px;
  height: 60px;
  box-shadow: var(--shadow-md);
}

.footer-logo h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
  font-family: var(--font-family-heading);
  text-shadow: 0 2px 4px #0000004d;
  letter-spacing: .5px;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) text;
  margin: 0;
  line-height: 1.2;
  position: relative;
}

.footer-logo h3:after {
  content: "";
  background: linear-gradient(90deg, var(--color-accent) 0%, #fff9 100%);
  border-radius: 1px;
  width: 100%;
  height: 2px;
  transition: transform .3s;
  position: absolute;
  bottom: -4px;
  left: 0;
  transform: scaleX(.8);
}

.footer-logo:hover h3:after {
  transform: scaleX(1);
}

.footer-description {
  font-size: var(--font-size-base);
  color: #ffffffe6;
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.newsletter-section {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  background: #ffffff1a;
  border: 1px solid #fff3;
}

.newsletter-section h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.newsletter-section p {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: #fffc;
  line-height: 1.5;
}

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

.newsletter-input-group {
  gap: var(--space-2);
  display: flex;
}

.newsletter-input {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  background: #ffffff1a;
  border: 2px solid #ffffff4d;
  flex: 1;
}

.newsletter-input::placeholder {
  color: #fff9;
}

.newsletter-input:focus {
  background: #ffffff26;
  border-color: #fffc;
  outline: none;
}

.newsletter-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  font-size: var(--font-size-base);
  white-space: nowrap;
  border: none;
}

.newsletter-btn:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.newsletter-input.error {
  background: #ef44441a;
  border-color: #ef4444;
}

.newsletter-error {
  color: #fca5a5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  background: #ef444433;
  animation: .3s ease-out slideIn;
}

.newsletter-btn:disabled {
  cursor: not-allowed;
  background: #ffffff4d;
  transform: none;
}

.newsletter-btn:disabled:hover {
  box-shadow: none;
  background: #ffffff4d;
  transform: none;
}

.newsletter-success {
  color: #86efac;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  background: #22c55e33;
  border: 1px solid #22c55e4d;
  animation: .3s ease-out slideIn;
}

.footer-section {
  gap: var(--space-4);
  text-align: right;
  flex-direction: column;
  display: flex;
}

.footer-section h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  padding-bottom: var(--space-2);
  margin: 0;
  position: relative;
}

.footer-section h4:after {
  content: "";
  background: var(--color-accent);
  border-radius: 1px;
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.footer-links-list {
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.footer-link {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  transition: var(--transition-base);
  padding: var(--space-1) 0;
  border-radius: var(--radius-sm);
  direction: rtl;
  display: flex;
  color: #fffc !important;
  text-decoration: none !important;
}

.footer-link:hover {
  color: var(--color-secondary);
  border-radius: var(--radius-md);
  background: #ffffff1a;
}

.footer-link-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.footer-contact {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid #fff3;
}

.footer-contact a {
  padding-left: var(--space-2);
}

.footer-contact h5 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.footer-contact p {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: #fffc;
  line-height: 1.5;
}

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid #fff3;
}

.footer-bottom-content {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  display: flex;
}

.footer-social h5 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.social-links {
  gap: var(--space-3);
  display: flex;
}

.social-link {
  border-radius: var(--radius-full);
  width: 40px;
  height: 40px;
  color: var(--color-text-white);
  transition: var(--transition-base);
  background: #ffffff1a;
  border: 1px solid #fff3;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.social-link:hover {
  background: #fff3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0003;
}

.social-link.instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link.youtube:hover {
  background: red;
}

.social-link.twitter:hover {
  background: #1da1f2;
}

.social-link.facebook:hover {
  background: #1877f2;
}

.footer-copyright {
  text-align: right;
}

.footer-copyright p {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: #fffc;
}

.footer-tagline {
  font-size: var(--font-size-xs);
  color: #fff9;
  font-style: italic;
}

.back-to-top {
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  width: 50px;
  height: 50px;
  transition: var(--transition-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  border: none;
  border-radius: 50%;
  position: fixed;
  transform: translateY(20px);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (width <= 1024px) {
  .footer-main {
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (width <= 768px) {
  .footer-content {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }

  .footer-main {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .footer-bottom-content {
    gap: var(--space-4);
    text-align: center;
    flex-direction: column;
  }

  .footer-copyright {
    text-align: center;
  }

  .back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 45px;
    height: 45px;
    font-size: var(--font-size-base);
  }
}

@media (width <= 480px) {
  .footer-content {
    padding: var(--space-4) var(--space-3) var(--space-3);
  }

  .footer-logo {
    text-align: center;
    gap: var(--space-2);
    flex-direction: column;
  }

  .footer-logo-image {
    width: 50px;
    height: 50px;
  }

  .newsletter-input-group {
    flex-direction: column;
  }

  .social-links {
    justify-content: center;
  }

  .back-to-top {
    bottom: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
  }
}

.hero-section {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-background {
  z-index: 1;
  position: absolute;
  inset: 0;
}

.hero-gradient {
  backdrop-filter: blur(10px);
  opacity: .8;
  background: linear-gradient(135deg, #ffffff1a 0%, #ffffff0d 100%);
  position: absolute;
  inset: 0;
}

.hero-content {
  z-index: 2;
  max-width: 1200px;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--color-text-primary);
  margin: 0 auto;
  position: relative;
}

.hero-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.hero-subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.hero-actions {
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.hero-stats {
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.stat-item {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  background: #ffffff1a;
  border: 1px solid #fff3;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  display: block;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.hero-section-new {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  min-height: 100vh;
  color: var(--color-text-white);
  justify-content: center;
  align-items: center;
  transition: opacity .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-section-new.animate-in {
  animation: .8s ease-out fadeInUp;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-section-new {
    will-change: opacity;
  }
}

.hero-section-new .hero-background {
  background: linear-gradient(135deg, #662632cc 0%, #8b3d47cc 100%) 0 0 / cover;
  position: absolute;
  inset: 0;
}

.hero-section-new .hero-gradient {
  opacity: .8;
  background: linear-gradient(135deg, #662632e6 0%, #8b3d47e6 100%);
  position: absolute;
  inset: 0;
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.particle {
  background: #ffffff4d;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 6s ease-in-out infinite float;
  position: absolute;
}

@keyframes float {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-20px)rotate(180deg);
  }
}

.hero-content-new {
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: none;
  color: var(--color-text-white);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.hero-title-new {
  font-family: var(--font-family-heading);
  margin-bottom: var(--space-6);
  letter-spacing: -.02em;
  color: var(--color-text-white);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
}

.title-highlight {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.hero-subtitle-new {
  margin-bottom: var(--space-12);
  opacity: .95;
  max-width: 700px;
  color: var(--color-text-white);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
}

.hero-section-new .hero-actions {
  gap: var(--space-4);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.cta-primary {
  background: linear-gradient(135deg, var(--color-secondary), 60%, var(--color-secondary-light));
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 25px #d4a5744d;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px #d4a57466;
}

.cta-secondary {
  color: var(--color-text-white);
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  backdrop-filter: blur(10px);
  background: #ffffff26;
  border: 2px solid #ffffff4d;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all .3s;
}

.cta-secondary:hover {
  background: #ffffff40;
  border-color: #ffffff80;
  transform: translateY(-2px);
}

.cta-arrow {
  font-size: 1.2rem;
  transition: transform .3s;
}

.cta-primary:hover .cta-arrow, .cta-secondary:hover .cta-arrow {
  transform: translate(4px);
}

.hero-section-new .hero-stats {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.5rem;
  display: flex;
}

.hero-section-new .stat-item {
  background: #fff3;
  border: 1px solid #ffffff4d;
  border-radius: 1.2rem;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  padding: 1.2rem 2.2rem 1rem;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  box-shadow: 0 4px 24px #00000026;
}

.hero-section-new .stat-item:hover {
  transform: translateY(-4px)scale(1.04);
  box-shadow: 0 8px 32px #3c3c3c2e;
}

.hero-section-new .stat-number {
  color: #fff;
  text-shadow: 0 2px 8px #3c3c3c2e;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #fff 60%, var(--color-secondary-light) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .2rem;
  font-size: 2.2rem;
  font-weight: 800;
}

.hero-section-new .stat-label {
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 4px #0000004d;
  margin-top: .1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff !important;
}

.hero-section.hero-compact {
  min-height: 60vh;
}

.hero-section.hero-full {
  min-height: 100vh;
}

.hero-section.hero-split {
  text-align: left;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
}

.hero-section.hero-split .hero-content {
  text-align: left;
}

.hero-section.hero-split .hero-actions, .hero-section.hero-split .hero-stats {
  justify-content: flex-start;
}

@media (width <= 768px) {
  .hero-actions {
    align-items: center;
    gap: var(--space-3);
    flex-direction: column;
  }

  .hero-stats {
    gap: var(--space-4);
  }

  .hero-section.hero-split {
    padding: var(--space-8) 0;
  }

  .hero-section.hero-split .hero-content {
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  .hero-section.hero-split .hero-actions, .hero-section.hero-split .hero-stats {
    justify-content: center;
  }

  .hero-section-new .hero-stats {
    gap: 1.2rem;
  }

  .hero-section-new .stat-item {
    min-width: 90px;
    padding: 1rem 1.5rem;
  }

  .hero-section-new .stat-number {
    font-size: 1.8rem;
  }

  .hero-section-new .stat-label {
    font-size: .9rem;
  }

  .hero-content-new {
    padding: 0 var(--space-4);
  }

  .hero-title-new {
    margin-bottom: var(--space-4);
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-subtitle-new {
    margin-bottom: var(--space-8);
    padding: 0 var(--space-2);
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  .cta-primary, .cta-secondary {
    padding: var(--space-3) var(--space-6);
    width: 100%;
    max-width: 280px;
    font-size: 1rem;
  }
}

@media (width <= 480px) {
  .hero-content {
    padding: var(--space-12) var(--space-4);
  }

  .hero-content-new {
    padding: 0 var(--space-4);
  }

  .hero-section-new .hero-stats {
    gap: 1rem;
  }

  .hero-section-new .stat-item {
    min-width: 80px;
    padding: .8rem 1.2rem;
  }

  .hero-section-new .stat-number {
    font-size: 1.5rem;
  }

  .hero-section-new .stat-label {
    font-size: .8rem;
  }

  .hero-title-new {
    margin-bottom: var(--space-3);
    font-size: clamp(1.8rem, 10vw, 2.5rem);
    line-height: 1.2;
  }

  .hero-subtitle-new {
    margin-bottom: var(--space-6);
    padding: 0;
    font-size: clamp(.9rem, 4.5vw, 1.1rem);
    line-height: 1.5;
  }

  .hero-section-new .hero-actions {
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .cta-primary, .cta-secondary {
    padding: var(--space-3) var(--space-5);
    width: 100%;
    max-width: 260px;
    font-size: .95rem;
  }

  .hero-section-new .hero-stats {
    margin-top: 1.5rem;
  }
}

.hero-with-image {
  min-height: 60vh;
  color: var(--color-text-white);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-with-image .hero-background {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-with-image .hero-image {
  object-fit: cover;
  object-position: bottom;
  width: 100%;
  height: 100%;
}

.hero-with-image .hero-overlay {
  z-index: 2;
  background: linear-gradient(135deg, #662632b3 0%, #8b3d4799 50%, #662632cc 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-with-image .hero-content {
  z-index: 3;
  max-width: 1200px;
  padding: 0 var(--space-6);
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.hero-with-image .hero-title {
  font-family: var(--font-family-heading);
  margin-bottom: var(--space-6);
  letter-spacing: -.02em;
  color: var(--color-text-white);
  text-shadow: 0 2px 8px #00000080;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
}

.hero-with-image .hero-subtitle {
  margin-bottom: var(--space-4);
  opacity: .95;
  color: var(--color-text-white);
  text-shadow: 0 1px 4px #00000080;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
}

.hero-with-image .hero-description {
  margin-bottom: var(--space-8);
  opacity: .9;
  max-width: 800px;
  color: var(--color-text-white);
  text-shadow: 0 1px 3px #00000080;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
}

.hero-with-image .hero-icon {
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 8px #0000004d;
  font-size: 3rem;
}

.hero-with-image .hero-callout {
  margin-top: var(--space-8);
}

.hero-with-image .asana-callout {
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: #ffffff26;
  border: 1px solid #fff3;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 8px 32px #0003;
}

.hero-with-image .asana-callout h3 {
  color: var(--color-text-white);
  margin-bottom: var(--space-2);
  font-size: 1.3rem;
  font-weight: 600;
}

.hero-with-image .asana-callout p {
  color: var(--color-text-white);
  opacity: .9;
  font-size: 1rem;
  line-height: 1.5;
}

@media (width <= 768px) {
  .hero-with-image .hero-content {
    padding: 0 var(--space-4);
  }

  .hero-with-image .hero-title {
    margin-bottom: var(--space-4);
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-with-image .hero-subtitle {
    margin-bottom: var(--space-3);
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  .hero-with-image .hero-description {
    margin-bottom: var(--space-6);
    font-size: clamp(.9rem, 3.5vw, 1rem);
  }

  .hero-with-image .asana-callout {
    padding: var(--space-4);
    margin: 0 var(--space-2);
  }
}

@media (width <= 480px) {
  .hero-with-image .hero-content {
    padding: 0 var(--space-3);
  }

  .hero-with-image .hero-title {
    font-size: clamp(1.8rem, 10vw, 2.5rem);
    line-height: 1.2;
  }

  .hero-with-image .hero-subtitle {
    font-size: clamp(.9rem, 4.5vw, 1.1rem);
    line-height: 1.5;
  }

  .hero-with-image .hero-description {
    font-size: clamp(.85rem, 4vw, .95rem);
    line-height: 1.5;
  }

  .hero-with-image .asana-callout {
    padding: var(--space-3);
    margin: 0 var(--space-1);
  }
}

.cta-button {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.cta-button:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.cta-button.secondary {
  background: var(--color-secondary);
}

.cta-button.secondary:hover {
  background: var(--color-secondary-dark);
}

.cta-button.outline {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  background: none;
}

.cta-button.outline:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.cta-button.ghost {
  color: var(--color-primary);
  background: #6626321a;
  border: 1px solid #66263233;
}

.cta-button.ghost:hover {
  background: #66263226;
  border-color: #6626324d;
}

.cta-button.secondary.ghost {
  color: var(--color-secondary);
  background: #d4a5741a;
  border: 1px solid #d4a57433;
}

.cta-button.secondary.ghost:hover {
  background: #d4a57426;
  border-color: #d4a5744d;
}

.cta-small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.cta-medium {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.cta-button-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-lighter));
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .2);
  border: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.cta-button-large:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .7s;
  position: absolute;
  top: 0;
  left: -100%;
}

.cta-button-large:hover {
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), .3);
  transform: translateY(-3px);
}

.cta-button-large:hover:before {
  left: 100%;
}

.cta-button-large:active {
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), .2);
  transform: translateY(-1px);
}

.cta-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

.cta-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-xl);
}

.cta-arrow {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-base);
  display: inline-block;
}

.cta-button:hover .cta-arrow {
  transform: translate(4px);
}

.cta-icon {
  font-size: var(--font-size-lg);
  margin-right: var(--space-2);
}

.cta-button.loading {
  pointer-events: none;
  opacity: .7;
}

.cta-button.loading .cta-arrow {
  animation: 1s linear infinite spin;
}

.cta-button:disabled, .cta-button.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.cta-group {
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.cta-group.cta-group-vertical {
  flex-direction: column;
  align-items: stretch;
}

.cta-group.cta-group-center {
  justify-content: center;
}

.cta-group.cta-group-end {
  justify-content: flex-end;
}

.cta-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-primary);
  position: relative;
  overflow: hidden;
}

.cta-section:before {
  content: "";
  opacity: .5;
  pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"rgba(157,129,137,0.05)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23dots)\"/></svg>");
  position: absolute;
  inset: 0;
}

.cta-content {
  text-align: center;
  max-width: 600px;
  padding: var(--space-10) var(--space-8);
  z-index: 1;
  margin: 0 auto;
  position: relative;
}

.cta-content.zen-card {
  backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(var(--color-primary-rgb), .1);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  background: linear-gradient(135deg, #ffffffe6, #ffffffb3);
  max-width: 80%;
}

.cta-content.zen-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-5px);
}

.cta-icon-container {
  margin-bottom: var(--space-6);
}

.cta-zen-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #0000;
  padding: var(--space-4);
  border: 2px solid rgba(var(--color-primary-rgb), .2);
  box-shadow: 0 5px 15px rgba(var(--color-primary-rgb), .1);
  background-clip: text;
  border-radius: 50%;
  font-size: 3rem;
  display: inline-block;
}

.cta-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
}

.cta-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cta-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  text-align: center;
  transition: all var(--transition-base);
  background: #fff;
}

.cta-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.cta-card .cta-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}

.cta-card .cta-subtitle {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-6);
}

@media (width <= 768px) {
  .cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-group.cta-group-vertical {
    flex-direction: column;
  }

  .cta-button {
    justify-content: center;
    width: 100%;
  }
}

@media (width <= 480px) {
  .cta-section {
    padding: var(--space-12) 0;
  }

  .cta-content {
    padding: var(--space-8) var(--space-4);
    max-width: 90%;
  }

  .cta-content.zen-card {
    padding: var(--space-8) var(--space-4);
  }

  .cta-zen-icon {
    font-size: 2.5rem;
  }

  .cta-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .cta-subtitle {
    font-size: var(--font-size-base);
  }

  .cta-button-large {
    padding: var(--space-3) var(--space-6);
    width: 100%;
    max-width: 280px;
  }

  .cta-card {
    padding: var(--space-6);
  }
}

.section {
  padding: var(--space-16) 0;
  position: relative;
}

.section.section-sm {
  padding: var(--space-8) 0;
}

.section.section-md {
  padding: var(--space-16) 0;
}

.section.section-lg {
  padding: var(--space-20) 0;
}

.section.section-xl {
  padding: var(--space-24) 0;
}

.section.section-light {
  background: var(--color-background);
}

.section.section-white {
  background: #fff;
}

.section.section-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
  color: var(--color-text-primary);
}

.section.section-secondary {
  background: var(--color-background-light);
}

.section.section-accent {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: #fff;
}

.section.section-pattern {
  position: relative;
  overflow: hidden;
}

.section.section-pattern:before {
  content: "";
  opacity: .1;
  pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"rgba(0,0,0,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23dots)\"/></svg>");
  position: absolute;
  inset: 0;
}

.section-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.section-container.section-container-sm {
  max-width: 800px;
}

.section-container.section-container-lg {
  max-width: 1400px;
}

.section-container.section-container-full {
  max-width: none;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-header.section-header-left {
  text-align: left;
  margin-left: 0;
}

.section-header.section-header-right {
  text-align: right;
  margin-right: 0;
}

.section-title.section-title-sm {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.section-title.section-title-lg {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.section-subtitle.section-subtitle-sm {
  font-size: var(--font-size-base);
}

.section-subtitle.section-subtitle-lg {
  font-size: var(--font-size-xl);
}

.section-content {
  z-index: 2;
  position: relative;
}

.section-grid {
  gap: var(--space-8);
  display: grid;
}

.section-grid.section-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.section-grid.section-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.section-grid.section-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.section-grid.section-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.section-flex {
  gap: var(--space-8);
  align-items: center;
  display: flex;
}

.section-flex.section-flex-column {
  text-align: center;
  flex-direction: column;
}

.section-flex.section-flex-reverse {
  flex-direction: row-reverse;
}

.section-flex.section-flex-center {
  justify-content: center;
}

.section-flex.section-flex-between {
  justify-content: space-between;
}

.section-flex.section-flex-around {
  justify-content: space-around;
}

.section-split {
  gap: var(--space-12);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
}

.section-split.section-split-reverse {
  direction: rtl;
}

.section-split.section-split-reverse > * {
  direction: ltr;
}

.section-image {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.section-image img {
  width: 100%;
  height: auto;
  display: block;
}

.section-badge {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(10px);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  background: #fff3;
  display: inline-flex;
}

.section-badge.section-badge-primary {
  background: var(--color-primary);
  color: #fff;
}

.section-badge.section-badge-accent {
  background: var(--color-accent);
  color: #fff;
}

@media (width <= 1024px) {
  .section-split {
    gap: var(--space-8);
    grid-template-columns: 1fr;
  }

  .section-split.section-split-reverse {
    direction: ltr;
  }
}

@media (width <= 768px) {
  .section {
    padding: var(--space-12) 0;
  }

  .section.section-lg {
    padding: var(--space-16) 0;
  }

  .section.section-xl {
    padding: var(--space-20) 0;
  }

  .section-container {
    padding: 0 var(--space-4);
  }

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

  .section-flex {
    gap: var(--space-6);
    flex-direction: column;
  }

  .section-flex.section-flex-reverse {
    flex-direction: column;
  }

  .section-grid.section-grid-2, .section-grid.section-grid-3, .section-grid.section-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (width <= 480px) {
  .section {
    padding: var(--space-8) 0;
  }

  .section.section-lg {
    padding: var(--space-12) 0;
  }

  .section.section-xl {
    padding: var(--space-16) 0;
  }

  .section-container {
    padding: 0 var(--space-3);
  }
}

.search-container {
  max-width: 600px;
  margin: 0 auto var(--space-6) auto;
  position: relative;
}

.search-icon {
  left: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.search-input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4)  + 30px);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: all var(--transition-base);
  background: #fff;
}

.filters-container {
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
}

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

.filter-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.filter-dropdown {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  background: #fff;
  min-width: 140px;
}

.filter-dropdown:focus {
  border-color: var(--color-secondary);
  outline: none;
  box-shadow: 0 0 0 3px #d4a5741a;
}

.filters-actions {
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.reset-filters-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-background-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.reset-filters-btn:hover {
  background: var(--color-border-light);
  color: var(--color-text-primary);
}

.results-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.filters-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
}

@media (width <= 768px) {
  .filters-container {
    gap: var(--space-4);
    flex-direction: column;
  }

  .filters-actions {
    gap: var(--space-4);
    text-align: center;
    flex-direction: column;
  }
}

@media (width <= 480px) {
  .search-container {
    margin-bottom: var(--space-4);
  }

  .filters-container {
    gap: var(--space-3);
  }

  .filter-dropdown {
    min-width: 120px;
  }
}

.pagination {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  display: flex;
}

.pagination-button {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: #fff;
}

.pagination-button:hover:not(:disabled) {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  transform: translateY(-1px);
}

.pagination-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pagination-button.active {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 var(--space-4);
  font-weight: var(--font-weight-medium);
}

.pagination.compact {
  gap: var(--space-1);
}

.pagination.compact .pagination-button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.pagination.large {
  gap: var(--space-3);
}

.pagination.large .pagination-button {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

@media (width <= 768px) {
  .pagination {
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  .pagination-button {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }

  .pagination-info {
    margin: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  .pagination {
    gap: var(--space-2);
    flex-direction: column;
  }

  .pagination-info {
    margin-bottom: var(--space-2);
    order: -1;
  }
}

.hero-stats {
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  animation: .8s ease-out .8s both fadeInUp;
  display: flex;
}

.hero-stat {
  text-align: center;
}

.hero-stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
  text-shadow: 0 2px 4px #0003;
  display: block;
}

.hero-stat-label {
  font-size: var(--font-size-sm);
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.hero-stats.compact {
  gap: var(--space-4);
}

.hero-stats.compact .hero-stat-number {
  font-size: var(--font-size-2xl);
}

.hero-stats.large {
  gap: var(--space-12);
}

.hero-stats.large .hero-stat-number {
  font-size: var(--font-size-4xl);
}

.hero-stats.large .hero-stat-label {
  font-size: var(--font-size-base);
}

.hero-stats.with-bg .hero-stat {
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  background: #ffffff1a;
  border: 1px solid #fff3;
}

@media (width <= 768px) {
  .hero-stats {
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }

  .hero-stats.large {
    gap: var(--space-6);
  }

  .hero-stats.large .hero-stat-number {
    font-size: var(--font-size-3xl);
  }
}

@media (width <= 480px) {
  .hero-stats {
    gap: var(--space-3);
  }

  .hero-stat {
    flex: 1;
    min-width: 80px;
  }

  .hero-stat-number {
    font-size: var(--font-size-xl);
  }

  .hero-stat-label {
    font-size: var(--font-size-xs);
  }

  .hero-stats.with-bg .hero-stat {
    padding: var(--space-3) var(--space-4);
  }
}

.content-slider-section {
  padding: 0 0 var(--space-8);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.content-slider-section:before {
  content: "";
  opacity: .3;
  background: linear-gradient(135deg, #6626320d 0%, #66263205 100%);
  position: absolute;
  inset: 0;
}

.slider-header {
  text-align: center;
  margin-bottom: var(--space-8);
  z-index: 2;
  position: relative;
}

.slider-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.2;
}

.slider-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  line-height: var(--line-height-relaxed);
  margin: 0 auto;
}

.content-slider {
  z-index: 2;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.slider-container {
  background: linear-gradient(135deg, var(--color-primary-lighter) 10%, var(--color-tertiary-light) 70%, var(--color-primary-dark) 100%);
  backdrop-filter: blur(20px);
  contain: layout style paint;
  border: 1px solid #d9e2ec80;
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px #66263214;
}

.slider-track {
  width: 600%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.slider-slide {
  width: 16.666%;
  height: 100%;
  padding: var(--space-8);
  background-color: #f0f8ff;
  flex-shrink: 0;
}

.slide-content {
  gap: var(--space-12);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100%;
  display: grid;
}

.slide-visual {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}

.visual-element {
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  display: flex;
  position: relative;
}

.asana-visual {
  background: linear-gradient(135deg, #6626321a, #6626320d);
  border: 2px solid #66263233;
  border-radius: 50%;
}

.pose-silhouette {
  z-index: 2;
  font-size: 4rem;
  position: relative;
}

.pose-grid {
  gap: var(--space-2);
  padding: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  position: absolute;
  inset: 0;
}

.grid-item {
  border-radius: var(--radius-sm);
  background: #6626321a;
  animation: 2s ease-in-out infinite pulse;
}

.philosophy-visual {
  background: linear-gradient(135deg, #d4a5741a, #d4a5740d);
  border: 2px solid #d4a57433;
  border-radius: 50%;
}

.wisdom-tree {
  width: 100%;
  height: 100%;
  position: relative;
}

.tree-trunk {
  background: linear-gradient(to bottom, var(--color-secondary-dark), var(--color-secondary));
  border-radius: 10px;
  width: 20px;
  height: 60px;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%);
}

.tree-branches {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%);
}

.branch {
  background: var(--color-secondary);
  width: 40px;
  height: 4px;
  margin: var(--space-2) 0;
  border-radius: 2px;
  animation: 1.5s ease-out infinite growBranch;
}

.wisdom-symbols {
  gap: var(--space-4);
  display: flex;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
}

.symbol {
  opacity: .7;
  font-size: 1.5rem;
  animation: 3s ease-in-out infinite float;
}

.anatomy-visual {
  background: linear-gradient(135deg, #8b3d471a, #8b3d470d);
  border: 2px solid #8b3d4733;
  border-radius: 50%;
}

.body-outline {
  width: 200px;
  height: 300px;
  padding: var(--space-4);
  border: 2px solid #8b3d474d;
  border-radius: 100px;
  flex-direction: column;
  justify-content: space-around;
  display: flex;
  position: relative;
}

.muscle-groups {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.muscle-group {
  background: linear-gradient(90deg, #8b3d4733, #8b3d4766);
  border-radius: 10px;
  height: 20px;
  animation: 2s ease-in-out infinite musclePulse;
}

.anatomy-labels {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
  position: absolute;
  right: -60px;
}

.label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.teaching-visual {
  background: linear-gradient(135deg, #4a1e241a, #4a1e240d);
  border: 2px solid #4a1e2433;
  border-radius: 50%;
}

.classroom-scene {
  width: 100%;
  height: 100%;
  position: relative;
}

.instructor-spotlight {
  background: radial-gradient(circle, #4a1e244d, #0000);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: 3s ease-in-out infinite spotlight;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
}

.student-rows {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%);
}

.student-row {
  gap: var(--space-2);
  display: flex;
}

.student-spot {
  background: #4a1e2433;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: 2s ease-in-out infinite studentAttention;
}

.energy-visual {
  background: linear-gradient(135deg, #b8945a1a, #b8945a0d);
  border: 2px solid #b8945a33;
  border-radius: 50%;
}

.chakra-system {
  width: 100%;
  height: 100%;
  position: relative;
}

.chakra-wheel {
  background: radial-gradient(circle, #b8945a4d, #0000);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 4s linear infinite chakraSpin;
  position: absolute;
}

.chakra-wheel:first-child {
  top: 10%;
  left: 50%;
  transform: translate(-50%);
}

.chakra-wheel:nth-child(2) {
  top: 25%;
  left: 30%;
}

.chakra-wheel:nth-child(3) {
  top: 25%;
  right: 30%;
}

.chakra-wheel:nth-child(4) {
  top: 50%;
  left: 20%;
}

.chakra-wheel:nth-child(5) {
  top: 50%;
  right: 20%;
}

.chakra-wheel:nth-child(6) {
  bottom: 25%;
  left: 30%;
}

.chakra-wheel:nth-child(7) {
  bottom: 10%;
  left: 50%;
  transform: translate(-50%);
}

.chakra-center {
  background: var(--color-secondary);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chakra-rays {
  border: 1px solid #b8945a4d;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: 2s ease-in-out infinite rayExpand;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.meditation-visual {
  background: linear-gradient(135deg, #e6c3961a, #e6c3960d);
  border: 2px solid #e6c39633;
  border-radius: 50%;
}

.mind-scape {
  width: 100%;
  height: 100%;
  position: relative;
}

.breath-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wave {
  border: 2px solid #e6c3964d;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: 4s ease-in-out infinite breathWave;
  position: absolute;
}

.wave:nth-child(2) {
  animation-delay: 1s;
}

.wave:nth-child(3) {
  animation-delay: 2s;
}

.consciousness-dots {
  position: absolute;
  inset: 0;
}

.dot {
  background: var(--color-secondary);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 3s ease-in-out infinite consciousnessFloat;
  position: absolute;
}

.dot:first-child {
  top: 20%;
  left: 20%;
}

.dot:nth-child(2) {
  top: 30%;
  right: 25%;
}

.dot:nth-child(3) {
  top: 50%;
  left: 15%;
}

.dot:nth-child(4) {
  top: 60%;
  right: 35%;
}

.dot:nth-child(5) {
  top: 70%;
  left: 40%;
}

.dot:nth-child(6) {
  top: 80%;
  right: 20%;
}

.dot:nth-child(7) {
  top: 25%;
  left: 60%;
}

.dot:nth-child(8) {
  top: 45%;
  right: 10%;
}

.dot:nth-child(9) {
  top: 65%;
  left: 70%;
}

.dot:nth-child(10) {
  top: 85%;
  right: 60%;
}

.dot:nth-child(11) {
  top: 35%;
  left: 80%;
}

.dot:nth-child(12) {
  top: 55%;
  right: 70%;
}

.default-visual {
  color: var(--color-primary);
  background: linear-gradient(135deg, #6626321a, #6626320d);
  border: 2px solid #66263233;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  display: flex;
}

.slide-text {
  padding: var(--space-6);
  flex: 1;
}

.slide-text h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.slide-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.slide-features {
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.feature-tag {
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #d9e2ec66;
  box-shadow: 0 2px 8px #6626320f;
}

.slide-cta {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-text-white);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  border: none;
  align-self: flex-start;
  transition: all .3s;
  display: inline-flex;
  box-shadow: 0 8px 25px #6626324d;
}

.slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px #66263266;
}

.slide-cta .cta-arrow {
  transition: transform .3s;
}

.slide-cta:hover .cta-arrow {
  transform: translate(4px);
}

.slider-navigation {
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  display: flex;
}

.nav-btn {
  color: var(--color-text-primary);
  cursor: pointer;
  backdrop-filter: blur(10px);
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  background: #f0f8ffe6;
  border: 1px solid #d9e2ec99;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 12px #66263214;
}

.nav-btn:hover:not(:disabled) {
  background: #fffffff2;
  transform: scale(1.1);
  box-shadow: 0 6px 16px #6626321f;
}

.nav-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.slide-indicators {
  gap: var(--space-2);
  display: flex;
}

.nav-btn.auto-scroll-active {
  position: relative;
}

.nav-btn.auto-scroll-active:after {
  content: "";
  background: var(--color-primary);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 2s ease-in-out infinite autoScrollPulse;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%);
}

@media (width <= 1024px) {
  .slide-content {
    gap: var(--space-8);
    text-align: center;
    grid-template-columns: 1fr;
  }

  .slider-container {
    height: 700px;
  }

  .visual-element {
    width: 250px;
    height: 250px;
  }

  .slider-title {
    font-size: var(--font-size-3xl);
  }
}

@media (width <= 768px) {
  .content-slider-section {
    padding: var(--space-12) 0;
  }

  .slider-container {
    height: 600px;
  }

  .slider-slide {
    padding: var(--space-6);
  }

  .slide-text h3 {
    font-size: var(--font-size-2xl);
  }

  .slide-description {
    font-size: var(--font-size-base);
  }

  .visual-element {
    width: 200px;
    height: 200px;
  }

  .slider-navigation {
    gap: var(--space-4);
  }

  .nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .slider-title {
    font-size: var(--font-size-2xl);
  }

  .slider-description {
    font-size: var(--font-size-base);
  }
}

.features-section {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--color-bg-primary), var(--color-bg-secondary));
  opacity: 0;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
  transform: translateY(30px);
}

.features-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 800px;
  padding: 0 var(--space-6);
  opacity: 0;
  margin-left: auto;
  margin-right: auto;
  animation: .8s ease-out .4s both homeFadeInUp;
}

.section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 auto;
}

.features-grid {
  gap: var(--space-8);
  max-width: 1200px;
  padding: 0 var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin: 0 auto;
  display: grid;
}

.feature-card {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  opacity: 0;
  background: #fff;
  animation: .8s ease-out .6s both homeFadeInUp;
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
}

.feature-card.active {
  transform: translateY(0);
}

.feature-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  height: 4px;
  transition: transform var(--transition-base);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.feature-card:hover:before {
  transform: scaleX(1);
}

.feature-hover-effect {
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  background: linear-gradient(135deg, #6626320d, #d4a5740d);
  position: absolute;
  inset: 0;
}

.feature-card:hover .feature-hover-effect {
  opacity: 1;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6) auto;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
  font-size: var(--font-size-2xl);
  color: #fff;
  transition: all var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1)rotate(5deg);
}

.feature-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.feature-card:hover .feature-title {
  color: var(--color-primary);
}

.feature-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.why-choose-section {
  background: var(--color-bg-primary);
  width: 100%;
  padding: var(--space-24) 0 var(--space-16) 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px #6629320a;
}

.why-choose-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  margin: 0 auto;
}

.why-choose-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.why-choose-badge {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-4);
  display: inline-block;
  box-shadow: 0 2px 8px #d4a57414;
}

.why-choose-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
}

.why-choose-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: var(--space-8);
}

.why-choose-grid {
  gap: var(--space-8);
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  display: grid;
}

.why-choose-card {
  background: linear-gradient(120deg, #fff 80%, var(--color-secondary-light) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .3s, transform .3s, background .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px #66293212;
}

.why-choose-card:hover {
  background: linear-gradient(120deg, var(--color-secondary-light) 60%, #fff 100%);
  transform: translateY(-6px)scale(1.025);
  box-shadow: 0 12px 32px #66293221;
}

.why-choose-icon {
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  font-size: 2.5rem;
  transition: background .3s, color .3s, transform .3s;
  display: flex;
  box-shadow: 0 2px 12px #d4a5741a;
}

.why-choose-card:hover .why-choose-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-dark));
  transform: scale(1.1)rotate(-6deg);
}

.why-choose-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
  text-align: center;
}

.why-choose-accent-bar {
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary-light));
  width: 48px;
  height: 4px;
  margin: 0 auto var(--space-4) auto;
  border-radius: 2px;
  transition: background .3s;
}

.why-choose-card:hover .why-choose-accent-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.why-choose-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--line-height-relaxed);
}

@media (width <= 1024px) {
  .why-choose-grid {
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 700px) {
  .why-choose-grid {
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }

  .why-choose-section {
    padding: var(--space-12) 0;
  }

  .why-choose-card {
    padding: var(--space-8) var(--space-4);
  }

  .why-choose-title {
    font-size: var(--font-size-2xl);
  }
}

@media (width <= 768px) {
  .features-section {
    padding: var(--space-12) 0;
  }

  .features-grid {
    gap: var(--space-6);
    padding: 0 var(--space-4);
    grid-template-columns: 1fr;
  }

  .section-header {
    padding: 0 var(--space-4);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }
}

@media (width <= 480px) {
  .features-section {
    padding: var(--space-8) 0;
  }

  .features-grid {
    gap: var(--space-4);
  }

  .feature-card {
    padding: var(--space-6);
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-xl);
  }

  .feature-title {
    font-size: var(--font-size-lg);
  }
}

.founding-member-callout {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-lighter) 100%);
  color: var(--color-text-white);
  padding: var(--space-16) 0;
  opacity: 0;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
}

.founding-member-callout.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.founding-member-callout:before {
  content: "";
  opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  animation: 20s ease-in-out infinite homeGrain;
  position: absolute;
  inset: 0;
}

.callout-content {
  z-index: 2;
  max-width: 1200px;
  padding: 0 var(--space-6);
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.callout-badge {
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(10px);
  background: #fff3;
  border: 1px solid #ffffff4d;
  display: inline-flex;
}

.badge-icon {
  font-size: var(--font-size-lg);
}

.badge-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.callout-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.callout-subtitle {
  font-size: var(--font-size-lg);
  opacity: .9;
  margin-bottom: var(--space-8);
  line-height: var(--line-height-relaxed);
}

.offer-highlights {
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.offer-item {
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  backdrop-filter: blur(10px);
  transition: all var(--transition-base);
  background: #ffffff1a;
  border: 1px solid #fff3;
  display: flex;
}

.offer-item:hover {
  background: #ffffff26;
  transform: translateY(-2px);
}

.offer-icon {
  font-size: var(--font-size-xl);
  color: var(--color-secondary-light);
}

.offer-text {
  font-weight: var(--font-weight-medium);
}

.pricing-section {
  margin-bottom: var(--space-8);
}

.price-display {
  justify-content: center;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
}

.original-price {
  font-size: var(--font-size-2xl);
  opacity: .6;
  text-decoration: line-through;
}

.current-price {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-light);
}

.discount-badge {
  background: var(--color-secondary);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.pricing-note {
  font-size: var(--font-size-sm);
  opacity: .8;
  margin-bottom: var(--space-8);
}

.founding-member-cta {
  align-items: center;
  gap: var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-text-white);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-lg);
  border-width: 1px;
  border-color: #a9a9a9;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.founding-member-cta:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.founding-member-cta:hover:before {
  left: 100%;
}

.founding-member-cta:hover {
  background: var(--color-primary-light);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

@media (width <= 768px) {
  .founding-member-callout {
    padding: var(--space-12) 0;
  }

  .callout-content {
    padding: 0 var(--space-4);
  }

  .callout-title {
    font-size: var(--font-size-3xl);
  }

  .callout-subtitle {
    font-size: var(--font-size-base);
  }

  .offer-highlights {
    align-items: center;
    gap: var(--space-4);
    flex-direction: column;
  }

  .price-display {
    gap: var(--space-2);
    flex-direction: column;
  }

  .founding-member-cta {
    justify-content: center;
    width: 100%;
  }
}

@media (width <= 480px) {
  .founding-member-callout {
    padding: var(--space-8) 0;
  }

  .callout-title {
    font-size: var(--font-size-2xl);
  }

  .callout-subtitle {
    font-size: var(--font-size-sm);
  }

  .offer-item {
    padding: var(--space-3) var(--space-4);
  }

  .current-price {
    font-size: var(--font-size-3xl);
  }
}

.quick-access-section {
  padding: var(--space-24) 0;
  background: radial-gradient(circle at 20% 50%, #9d818926 0%, transparent 50%), radial-gradient(circle at 80% 20%, #ffbe4d1a 0%, transparent 50%), radial-gradient(circle at 40% 80%, #ae6a7e14 0%, transparent 50%), linear-gradient(135deg, var(--color-bg-primary) 0%, #9d818905 50%, var(--color-bg-primary) 100%);
  opacity: 0;
  transition: all 1s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
}

.quick-access-section:before {
  content: "";
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239d8189' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: 20s ease-in-out infinite float;
  position: absolute;
  inset: 0;
}

.quick-access-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.quick-access-header {
  text-align: center;
  margin-bottom: var(--space-20);
  max-width: 900px;
  padding: 0 var(--space-6);
  z-index: 2;
  opacity: 0;
  margin-left: auto;
  margin-right: auto;
  animation: .8s ease-out .4s both homeFadeInUp;
  position: relative;
}

.quick-access-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 60%, var(--color-primary-light) 100%);
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-6);
  background-clip: text;
  line-height: 1.1;
  position: relative;
}

.quick-access-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-full);
  width: 120px;
  height: 6px;
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 4px 20px #9d81894d;
}

.quick-access-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-medium);
  max-width: 600px;
  margin: 0 auto;
}

.quick-access-grid {
  gap: var(--space-8);
  max-width: 1400px;
  padding: 0 var(--space-6);
  z-index: 2;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  margin: 0 auto;
  display: grid;
  position: relative;
}

.access-card {
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-primary);
  cursor: pointer;
  opacity: 0;
  background: #fffc;
  border: 1px solid #ffffff4d;
  text-decoration: none;
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  animation: .8s ease-out .6s both homeFadeInUp;
  position: relative;
  overflow: hidden;
  transform: translateY(40px)scale(.95);
  box-shadow: 0 20px 60px #00000014, 0 8px 32px #0000000a, inset 0 1px #fffc;
}

.access-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary-light));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  height: 6px;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.access-card:after {
  content: "";
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #9d81890d 0%, #ffbe4d0d 50%, #ae6a7e0d 100%);
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  inset: 0;
}

.access-card:hover:before {
  transform: scaleX(1);
}

.access-card:hover:after {
  opacity: 1;
}

.access-card:hover {
  color: var(--color-text-primary);
  border-color: #9d81894d;
  transform: translateY(-16px)scale(1.03);
  box-shadow: 0 32px 80px #00000026, 0 16px 48px #00000014, 0 8px 24px #9d818926, inset 0 1px #ffffffe6;
}

.access-card .floating-particles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.access-card .particle {
  background: var(--color-primary);
  opacity: 0;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 6s ease-in-out infinite floatParticle;
  position: absolute;
}

.access-card:hover .particle {
  opacity: .6;
}

.access-card .particle:first-child {
  animation-delay: 0s;
  top: 20%;
  left: 10%;
}

.access-card .particle:nth-child(2) {
  animation-delay: 1s;
  top: 60%;
  left: 80%;
}

.access-card .particle:nth-child(3) {
  animation-delay: 2s;
  top: 80%;
  left: 20%;
}

.access-card .particle:nth-child(4) {
  animation-delay: 3s;
  top: 30%;
  left: 70%;
}

.access-card .particle:nth-child(5) {
  animation-delay: 4s;
  top: 70%;
  left: 30%;
}

.access-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-10) auto;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 15%, var(--color-primary-light) 100%);
  font-size: var(--font-size-4xl);
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  box-shadow: 0 16px 40px #9d81894d, 0 8px 20px #9d818933, inset 0 1px #ffffff4d;
}

.access-icon:before {
  content: "";
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 15%, var(--color-primary-light) 100%);
  z-index: -1;
  opacity: 0;
  border-radius: 50%;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
  animation: 3s linear infinite rotate;
  position: absolute;
  inset: -4px;
}

.access-icon:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff4d 0%, #0000 50%);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.access-card:hover .access-icon {
  transform: scale(1.2)rotate(15deg);
  box-shadow: 0 24px 60px #9d818966, 0 12px 30px #9d81894d, inset 0 1px #fff6;
}

.access-card:hover .access-icon:before {
  opacity: 1;
}

.access-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  z-index: 1;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-primary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.access-card:hover .access-title {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateY(-4px);
}

.access-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-8) 0;
  z-index: 1;
  transition: color .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.access-card:hover .access-description {
  color: var(--color-text-primary);
}

.access-arrow {
  width: 56px;
  height: 56px;
  margin-top: var(--space-6);
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  border: 2px solid var(--color-secondary);
  background: linear-gradient(135deg, #9d81891a 0%, #ffbe4d1a 100%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .6s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.access-arrow:before {
  content: "";
  background: linear-gradient(90deg, #0000 0%, #fff9 50%, #0000 100%);
  width: 100%;
  height: 100%;
  transition: left .8s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 0;
  left: -100%;
}

.access-arrow:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff4d 0%, #0000 50%);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.access-card:hover .access-arrow {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
  border-color: var(--color-primary);
  transform: translate(16px)scale(1.15);
  box-shadow: 0 12px 32px #9d818966, 0 6px 16px #9d81894d;
}

.access-card:hover .access-arrow:before {
  left: 100%;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes homeFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 1024px) {
  .quick-access-grid {
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .access-card {
    padding: var(--space-8);
  }

  .access-icon {
    width: 100px;
    height: 100px;
    font-size: var(--font-size-3xl);
  }
}

@media (width <= 768px) {
  .quick-access-section {
    padding: var(--space-16) 0;
  }

  .quick-access-grid {
    gap: var(--space-6);
    padding: 0 var(--space-4);
    grid-template-columns: 1fr;
  }

  .quick-access-header {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-12);
  }

  .quick-access-title {
    font-size: var(--font-size-4xl);
  }

  .quick-access-subtitle {
    font-size: var(--font-size-lg);
  }

  .access-card {
    padding: var(--space-6);
  }

  .access-icon {
    width: 80px;
    height: 80px;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
  }

  .access-title {
    font-size: var(--font-size-xl);
  }

  .access-description {
    font-size: var(--font-size-base);
  }
}

@media (width <= 480px) {
  .quick-access-section {
    padding: var(--space-12) 0;
  }

  .access-card {
    padding: var(--space-5);
  }

  .access-icon {
    width: 70px;
    height: 70px;
    font-size: var(--font-size-xl);
  }

  .access-title {
    font-size: var(--font-size-lg);
  }

  .access-arrow {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-xl);
  }
}

.study-groups-page {
  z-index: 1;
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

body .study-groups-page {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

.study-groups-page *, .study-groups-page .study-group-card * {
  color: inherit;
}

.study-groups-page .study-group-card h3, .study-groups-page .study-group-card h4 {
  color: #1f2937 !important;
}

.study-groups-page .study-group-card p {
  color: #4b5563 !important;
}

.study-groups-page .study-group-card .group-meta {
  color: #6b7280 !important;
}

.study-groups-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.back-button-container {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 2rem;
}

.tabs-header {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  display: flex;
  box-shadow: 0 2px 10px #00000014;
}

.tab-buttons {
  gap: 1rem;
  display: flex;
}

.tab-button {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  transition: all .3s;
}

.tab-button:hover {
  color: #374151;
  background: #f3f4f6;
}

.tab-button.active {
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.create-group-btn {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  transition: all .3s;
}

.create-group-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #f59e0b4d;
}

.filters-section {
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  display: flex;
}

.search-filter {
  flex: 1;
  min-width: 300px;
}

.search-input {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  transition: border-color .3s;
}

.search-input:focus {
  border-color: #10b981;
  outline: none;
  box-shadow: 0 0 0 3px #10b9811a;
}

.frequency-filter {
  min-width: 150px;
}

.filter-select {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  transition: border-color .3s;
}

.filter-select:focus {
  border-color: #10b981;
  outline: none;
  box-shadow: 0 0 0 3px #10b9811a;
}

.groups-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  display: grid;
}

.study-group-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #0000001a;
}

.study-group-card:before {
  content: "";
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.study-group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #00000026;
}

.study-group-card:hover:before {
  transform: scaleX(1);
}

.group-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  display: flex;
}

.group-title-section h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937 !important;
}

.group-meta {
  gap: 1rem;
  font-size: .875rem;
  display: flex;
  color: #6b7280 !important;
}

.frequency, .members {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.status-badge {
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 1rem;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
}

.status-badge.member {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff !important;
}

.status-badge.available {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff !important;
}

.status-badge.full {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff !important;
}

.group-description {
  margin-bottom: 1.5rem;
}

.group-description p {
  margin: 0;
  line-height: 1.6;
  color: #4b5563 !important;
}

.group-topics, .group-materials, .group-schedule {
  margin-bottom: 1.5rem;
}

.group-topics h4, .group-materials h4, .group-schedule h4 {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937 !important;
}

.topics-list {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.topic-tag {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px solid #d1d5db;
  border-radius: 1rem;
  padding: .25rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: #374151 !important;
}

.group-materials ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-materials li {
  padding: .25rem 0 .25rem 1.5rem;
  position: relative;
  color: #4b5563 !important;
}

.group-materials li:before {
  content: "📖";
  position: absolute;
  top: .25rem;
  left: 0;
}

.group-schedule p {
  margin: 0;
  font-weight: 500;
  color: #4b5563 !important;
}

.group-actions {
  gap: 1rem;
  margin-top: 1.5rem;
  display: flex;
}

.action-button {
  cursor: pointer;
  border: none;
  border-radius: .5rem;
  flex: 1;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .3s;
}

.action-button.member {
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.action-button.available {
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.action-button.full {
  color: #fff;
  cursor: not-allowed;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.action-button.secondary {
  color: #6b7280;
  background: none;
  border: 1px solid #d1d5db;
}

.action-button:hover:not(.full) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #00000026;
}

.action-button.secondary:hover {
  color: #374151;
  background: #f3f4f6;
}

.create-group-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.create-group-modal {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  padding: 2rem;
  overflow-y: auto;
  box-shadow: 0 20px 60px #0000004d;
}

.create-group-form h3 {
  color: #1f2937;
  text-align: center;
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.form-group label {
  color: #374151;
  margin-bottom: .5rem;
  font-weight: 600;
  display: block;
}

.form-group input, .form-group textarea, .form-group select {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  transition: border-color .3s;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: #10b981;
  outline: none;
  box-shadow: 0 0 0 3px #10b9811a;
}

.create-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: .5rem;
  flex: 1;
  padding: .75rem 1.5rem;
  font-weight: 600;
  transition: all .3s;
}

.create-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #10b9814d;
}

.cancel-button {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  flex: 1;
  padding: .75rem 1.5rem;
  font-weight: 600;
  transition: all .3s;
}

.cancel-button:hover {
  color: #374151;
  background: #f3f4f6;
}

.no-groups {
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 3rem 2rem;
  box-shadow: 0 2px 10px #00000014;
}

.no-groups h3 {
  color: #1f2937;
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.no-groups p {
  color: #6b7280;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.study-groups-info {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  margin: 2rem;
  padding: 2rem;
  box-shadow: 0 2px 10px #00000014;
}

.info-content h3 {
  color: #1f2937;
  text-align: center;
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.benefits-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  display: grid;
}

.benefit {
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1.5rem;
}

.benefit h4 {
  color: #1f2937;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.benefit p {
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
}

@media (width <= 768px) {
  .study-groups-content {
    padding: 1rem;
  }

  .tabs-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .tab-buttons {
    justify-content: center;
  }

  .filters-section {
    flex-direction: column;
  }

  .search-filter {
    min-width: auto;
  }

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

  .group-header {
    flex-direction: column;
    gap: 1rem;
  }

  .group-actions {
    flex-direction: column;
  }

  .create-group-modal {
    margin: 1rem;
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

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

@media (width <= 480px) {
  .study-groups-content {
    padding: .5rem;
  }

  .study-group-card {
    padding: 1rem;
  }

  .group-meta {
    flex-direction: column;
    gap: .5rem;
  }

  .topics-list {
    gap: .25rem;
  }

  .topic-tag {
    padding: .125rem .5rem;
    font-size: .75rem;
  }
}

.study-group-detail-page {
  z-index: 1;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

body .study-group-detail-page {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.error-message {
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  margin: 20px 0;
  padding: 60px 20px;
  box-shadow: 0 10px 30px #0003;
}

.error-message h2 {
  color: #fff;
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: 700;
}

.error-message p {
  color: #ffffffe6;
  margin-bottom: 24px;
  font-size: 16px;
}

.group-overview {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  margin-bottom: 30px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px #667eea4d;
}

.group-overview:before {
  content: "";
  opacity: .3;
  pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.group-stats {
  backdrop-filter: blur(10px);
  background: #ffffff26;
  border: 1px solid #fff3;
  border-radius: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
  padding: 30px;
  display: grid;
}

.stat {
  text-align: center;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  transition: transform .3s, box-shadow .3s;
  display: flex;
}

.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px #0003;
}

.stat-label {
  color: #fffc;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.stat-value {
  color: #fff;
  text-shadow: 0 2px 4px #0000004d;
  font-size: 32px;
  font-weight: 800;
}

.group-description {
  z-index: 1;
  margin-bottom: 40px;
  position: relative;
}

.group-description h3 {
  color: #fff;
  text-shadow: 0 2px 4px #0000004d;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

.group-description p {
  color: #fffffff2;
  text-shadow: 0 1px 2px #0003;
  font-size: 18px;
  line-height: 1.8;
}

.group-actions {
  z-index: 1;
  justify-content: center;
  gap: 20px;
  display: flex;
  position: relative;
}

.action-button {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 50px;
  min-width: 160px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px #0003;
}

.action-button:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.action-button:hover:before {
  left: 100%;
}

.action-button.join {
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.action-button.join:hover:not(:disabled) {
  background: linear-gradient(135deg, #ee5a24 0%, #ff6b6b 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px #ee5a2466;
}

.action-button.leave {
  color: #fff;
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

.action-button.leave:hover:not(:disabled) {
  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px #6c5ce766;
}

.action-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px #0000001a;
}

.group-details {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px #0000001a;
}

.group-details:before {
  content: "";
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.detail-section {
  margin-bottom: 50px;
  position: relative;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h3 {
  color: #2d3748;
  border-bottom: 3px solid #e2e8f0;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.detail-section h3:after {
  content: "";
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2px;
  width: 60px;
  height: 3px;
  position: absolute;
  bottom: -3px;
  left: 0;
}

.creator-info {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-left: 5px solid #667eea;
  border-radius: 16px;
  padding: 30px;
  transition: transform .3s;
  box-shadow: 0 8px 25px #00000014;
}

.creator-info:hover {
  transform: translateY(-2px);
}

.creator-info h4 {
  color: #2d3748;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.creator-info p {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.7;
}

.topics-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  display: grid;
}

.topic-item {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-left: 4px solid #667eea;
  border-radius: 12px;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px #0000000d;
}

.topic-item:before {
  content: "";
  opacity: 0;
  background: linear-gradient(135deg, #667eea0d 0%, #764ba20d 100%);
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.topic-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #667eea26;
}

.topic-item:hover:before {
  opacity: 1;
}

.topic-number {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  box-shadow: 0 4px 12px #667eea4d;
}

.topic-text {
  color: #2d3748;
  z-index: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
}

.materials-list, .rules-list {
  padding: 0;
  list-style: none;
}

.materials-list li, .rules-list li {
  color: #4a5568;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0 16px 32px;
  line-height: 1.6;
  transition: all .3s;
  position: relative;
}

.materials-list li:hover, .rules-list li:hover {
  background: #667eea0d;
  border-radius: 8px;
  padding-left: 36px;
}

.materials-list li:before, .rules-list li:before {
  content: "✦";
  color: #667eea;
  text-shadow: 0 2px 4px #667eea4d;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  top: 16px;
  left: 0;
}

.materials-list li:last-child, .rules-list li:last-child {
  border-bottom: none;
}

.group-goals, .prerequisites {
  color: #4a5568;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-left: 4px solid #667eea;
  border-radius: 12px;
  padding: 25px;
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  box-shadow: 0 4px 15px #0000000d;
}

.group-goals:before, .prerequisites:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, #667eea05 0%, #764ba205 100%);
  border-radius: 12px;
  position: absolute;
  inset: 0;
}

.meeting-info {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-left: 4px solid #667eea;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px #0000000d;
}

.meeting-info p {
  color: #4a5568;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
}

.meeting-info p:last-child {
  margin-bottom: 0;
}

.meeting-info strong {
  color: #2d3748;
  min-width: 120px;
  font-weight: 700;
}

@media (width <= 768px) {
  .study-group-detail-page {
    padding: 16px;
  }

  .group-overview, .group-details {
    padding: 30px;
  }

  .group-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 25px;
  }

  .stat-value {
    font-size: 28px;
  }

  .topics-grid {
    grid-template-columns: 1fr;
  }

  .group-actions {
    flex-direction: column;
    align-items: center;
  }

  .action-button {
    width: 100%;
    max-width: 250px;
  }

  .detail-section h3 {
    font-size: 20px;
  }
}

@media (width <= 480px) {
  .group-stats {
    grid-template-columns: 1fr;
  }

  .group-overview, .group-details {
    padding: 25px;
  }

  .detail-section {
    margin-bottom: 40px;
  }

  .group-overview {
    padding: 30px;
  }

  .group-description h3 {
    font-size: 20px;
  }

  .group-description p {
    font-size: 16px;
  }
}

.shared-journals-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #26665905 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.shared-journals-hero {
  text-align: center;
  min-height: 70vh;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(135deg, #2666591a 0%, #3d8b7d0d 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.shared-journals-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff26 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff26 0%, #0000 50%);
  animation: 6s ease-in-out infinite journalsFloat;
  position: absolute;
  inset: 0;
}

.shared-journals-hero-background {
  z-index: 1;
  background: linear-gradient(135deg, #acf4db26 0%, #daffeb14 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.shared-journals-hero-overlay {
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, #acf4db26 0%, #0000 50%), radial-gradient(circle at 70% 80%, #daffeb26 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.shared-journals-hero-content {
  z-index: 3;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
}

.shared-journals-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 2px 4px #0000004d;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  animation: .8s ease-out journalsFadeInUp;
}

.shared-journals-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 800px;
  line-height: 1.4;
  animation: .8s ease-out .2s backwards journalsFadeInUp;
}

.shared-journals-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.7;
  animation: .8s ease-out .4s backwards journalsFadeInUp;
}

.shared-journals-cta {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-lg);
  transition: transform .3s, box-shadow .3s;
  animation: .8s ease-out .6s backwards journalsFadeInUp;
  box-shadow: 0 4px 12px #00000026;
}

.shared-journals-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0003;
}

.shared-journals-nav {
  background-color: var(--color-background);
  z-index: 10;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
}

.shared-journals-nav-container {
  max-width: var(--max-width-xl);
  padding: 0 var(--space-4);
  margin: 0 auto;
}

.journal-form-section {
  margin-bottom: var(--space-8);
}

.journal-form {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.form-row .form-group {
  flex: 1;
}

.form-group label {
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: block;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  transition: var(--transition-fast);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px #6629321a;
}

.formatting-toolbar {
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  display: flex;
}

.format-btn {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.formatting-help {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.journals-stats-section {
  padding: var(--space-12) var(--space-4);
  background-color: var(--color-bg-secondary);
}

.journals-stats-container {
  gap: var(--space-6);
  max-width: var(--max-width-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 auto;
  display: grid;
}

.journals-features-section {
  padding: var(--space-12) var(--space-4);
}

.journals-features-container {
  gap: var(--space-6);
  max-width: var(--max-width-xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0 auto;
  display: grid;
}

.journals-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.journals-section-subtitle {
  font-size: var(--font-size-lg);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12) auto;
  color: var(--color-text-secondary);
}

@keyframes journalsFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes journalsFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 768px) {
  .shared-journals-hero {
    min-height: 60vh;
    padding: var(--space-16) var(--space-4);
  }

  .shared-journals-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .shared-journals-subtitle {
    font-size: var(--font-size-lg);
  }

  .shared-journals-description {
    font-size: var(--font-size-md);
  }

  .journals-stats-container, .journals-features-container {
    grid-template-columns: 1fr;
  }
}

.checkbox-group {
  flex-direction: column;
  display: flex;
}

.checkbox-label {
  cursor: pointer;
  margin-bottom: var(--space-2);
  align-items: center;
  padding-left: 30px;
  display: flex;
  position: relative;
}

.form-checkbox {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  position: absolute;
}

.checkbox-label:hover .checkmark {
  border-color: var(--color-primary);
}

.form-checkbox:checked ~ .checkmark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked ~ .checkmark:after {
  display: block;
}

.help-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.form-actions {
  gap: var(--space-4);
  margin-top: var(--space-6);
  display: flex;
}

.journals-list-section {
  margin-bottom: var(--space-12);
}

.section-actions {
  margin-bottom: var(--space-6);
  justify-content: flex-end;
  display: flex;
}

.empty-state {
  text-align: center;
  padding: var(--space-12);
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
}

.empty-state h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.empty-state p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.journals-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  display: grid;
}

.journal-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.journal-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.journal-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.journal-card:hover:before {
  transform: scaleX(1);
}

.journal-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.journal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.journal-mood {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.journal-visibility {
  margin-left: var(--space-2);
}

.visibility-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
}

.visibility-badge.public {
  background: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-border-success);
}

.visibility-badge.private {
  background: var(--color-info-light);
  color: var(--color-info);
  border: 1px solid var(--color-border-info);
}

.journal-content {
  margin-bottom: var(--space-4);
}

.journal-text {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  overflow-wrap: break-word;
  word-break: break-word;
}

.journal-text strong {
  font-weight: var(--font-weight-bold);
}

.journal-text em {
  font-style: italic;
}

.journal-text u {
  text-decoration: underline;
}

.journal-text code {
  background: var(--color-bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: .9em;
}

.journal-text li {
  margin-left: var(--space-4);
  margin-bottom: var(--space-2);
  list-style-type: disc;
}

.journal-text blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.journal-practice-notes {
  background: var(--color-bg-secondary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.journal-practice-notes strong {
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  display: block;
}

.journal-practice-notes p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.journal-tags {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.tag {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.journal-footer {
  margin-bottom: var(--space-2);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.stat {
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.action-btn {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  display: flex;
}

.action-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.action-btn.edit:hover {
  color: var(--color-info);
}

.action-btn.delete:hover {
  color: var(--color-error);
}

.journal-timestamp {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: right;
}

@media (width <= 768px) {
  .form-row {
    gap: var(--space-4);
    flex-direction: column;
  }

  .journals-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    gap: var(--space-3);
    flex-direction: column;
  }
}

@media (width <= 480px) {
  .journal-header {
    gap: var(--space-2);
    flex-direction: column;
  }

  .journal-visibility {
    margin-left: 0;
    margin-top: var(--space-2);
  }

  .journal-footer {
    align-items: flex-start;
    gap: var(--space-3);
    flex-direction: column;
  }

  .journal-actions {
    justify-content: space-between;
    width: 100%;
  }
}

.monthly-challenges-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
}

.challenge-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-white);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.challenge-header:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff1a 0%, #0000 50%);
  animation: 6s ease-in-out infinite challengeFloat;
  position: absolute;
  inset: 0;
}

.challenge-header-content {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.challenge-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
}

.challenge-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  opacity: .9;
}

.challenge-period {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(4px);
  background: #fff3;
  border: 1px solid #ffffff4d;
  display: inline-block;
}

.challenge-stats {
  gap: var(--space-6);
  margin-top: var(--space-4);
  display: flex;
}

.challenge-stat {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
  min-width: 100px;
  transition: var(--transition-base);
  background: #ffffff1a;
  border: 1px solid #fff3;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.challenge-stat:hover {
  background: #ffffff26;
  transform: translateY(-2px);
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--font-size-sm);
  opacity: .8;
}

.challenge-description {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.description-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.description-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.description-content p {
  margin-bottom: var(--space-4);
}

.description-content ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.description-content li {
  margin-bottom: var(--space-2);
}

.challenge-progress {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.progress-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.progress-bar-container {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  height: 24px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: inset 0 1px 3px #0000001a;
}

.progress-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  height: 100%;
  transition: width .5s;
  position: relative;
  overflow: hidden;
}

.progress-bar:after {
  content: "";
  background: linear-gradient(45deg, #fff3 25%, #0000 25% 50%, #fff3 50% 75%, #0000 75%) 0 0 / 30px 30px;
  animation: 1s linear infinite progressStripes;
  position: absolute;
  inset: 0;
}

.progress-stats {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  justify-content: space-between;
  display: flex;
}

.progress-percentage {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.challenge-tasks {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.tasks-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.tasks-list {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.task-item {
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  display: flex;
}

.task-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-medium);
  transform: translateY(-2px);
}

.task-checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.task-checkbox input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  position: absolute;
}

.checkmark {
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  width: 24px;
  height: 24px;
  transition: var(--transition-fast);
  position: absolute;
  top: 0;
  left: 0;
}

.task-checkbox:hover input ~ .checkmark {
  border-color: var(--color-primary);
}

.task-checkbox input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkmark:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 6px;
  height: 12px;
  display: none;
  position: absolute;
  top: 4px;
  left: 8px;
  transform: rotate(45deg);
}

.task-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.task-content {
  flex: 1;
}

.task-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.task-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.task-meta {
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
}

.task-points {
  align-items: center;
  gap: var(--space-1);
  background: rgba(var(--color-primary-rgb), .1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  display: flex;
}

.task-due {
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.task-item.completed {
  background: rgba(var(--color-success-rgb), .05);
  border-color: rgba(var(--color-success-rgb), .2);
}

.task-item.completed .task-name {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.task-item.completed .task-points {
  background: rgba(var(--color-success-rgb), .1);
  color: var(--color-success);
}

.challenge-leaderboard {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.leaderboard-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.leaderboard-list {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.leaderboard-item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  align-items: center;
  display: flex;
}

.leaderboard-item:hover {
  background: rgba(var(--color-primary-rgb), .05);
  transform: translate(4px);
}

.leaderboard-rank {
  background: var(--color-bg-primary);
  width: 30px;
  height: 30px;
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-3);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.leaderboard-item:first-child .leaderboard-rank {
  color: #1a1a2e;
  background: linear-gradient(135deg, gold, #ffed4e);
  border: none;
}

.leaderboard-item:nth-child(2) .leaderboard-rank {
  color: #1a1a2e;
  background: linear-gradient(135deg, silver, #e0e0e0);
  border: none;
}

.leaderboard-item:nth-child(3) .leaderboard-rank {
  color: #1a1a2e;
  background: linear-gradient(135deg, #cd7f32, #e6a972);
  border: none;
}

.leaderboard-user {
  flex: 1;
  align-items: center;
  display: flex;
}

.user-avatar {
  width: 36px;
  height: 36px;
  margin-right: var(--space-3);
  border: 2px solid var(--color-border-light);
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.leaderboard-score {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.leaderboard-item.current-user {
  background: rgba(var(--color-primary-rgb), .1);
  border: 1px solid rgba(var(--color-primary-rgb), .2);
}

.challenge-rewards {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.rewards-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.rewards-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  display: grid;
}

.reward-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
}

.reward-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--color-primary-rgb), .3);
  transform: translateY(-4px);
}

.reward-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.reward-card:hover:before {
  transform: scaleX(1);
}

.reward-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.reward-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.reward-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-relaxed);
}

.reward-requirement {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  display: inline-block;
}

.reward-card.unlocked .reward-requirement {
  background: rgba(var(--color-success-rgb), .1);
  color: var(--color-success);
}

.challenge-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  text-align: center;
  color: var(--color-text-white);
  box-shadow: var(--shadow-lg);
}

.cta-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
}

.cta-description {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-6);
  opacity: .9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  background: var(--color-text-white);
  color: var(--color-primary);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  box-shadow: 0 4px 12px #0003;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0000004d;
}

@media (width <= 768px) {
  .challenge-header {
    padding: var(--space-8) var(--space-4);
  }

  .challenge-title {
    font-size: var(--font-size-3xl);
  }

  .challenge-subtitle {
    font-size: var(--font-size-lg);
  }

  .challenge-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  .rewards-grid {
    grid-template-columns: 1fr;
  }

  .cta-title {
    font-size: var(--font-size-2xl);
  }

  .cta-description {
    font-size: var(--font-size-base);
  }
}

@media (width <= 480px) {
  .challenge-title {
    font-size: var(--font-size-2xl);
  }

  .challenge-subtitle {
    font-size: var(--font-size-base);
  }

  .challenge-period {
    font-size: var(--font-size-sm);
  }

  .stat-number {
    font-size: var(--font-size-xl);
  }

  .task-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-checkbox {
    margin-bottom: var(--space-2);
  }

  .leaderboard-item {
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .leaderboard-score {
    text-align: right;
    width: 100%;
    margin-top: var(--space-2);
  }
}

@keyframes challengeFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes progressStripes {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: 30px 0;
  }
}

.mentorship-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #66263205 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.mentorship-hero {
  text-align: center;
  min-height: 80vh;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(135deg, #6626321a 0%, #8b3d470d 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mentorship-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff26 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff26 0%, #0000 50%);
  animation: 6s ease-in-out infinite mentorshipFloat;
  position: absolute;
  inset: 0;
}

.mentorship-hero-background {
  z-index: 1;
  background: linear-gradient(135deg, #f4acb726 0%, #ffdab914 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mentorship-hero-overlay {
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, #f4acb726 0%, #0000 50%), radial-gradient(circle at 70% 80%, #ffdab926 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mentorship-hero-content {
  z-index: 3;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
}

.mentorship-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 2px 4px #0000004d;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  animation: .8s ease-out mentorshipFadeInUp;
}

.mentorship-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 800px;
  line-height: 1.4;
  animation: .8s ease-out .2s backwards mentorshipFadeInUp;
}

.mentorship-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.7;
  animation: .8s ease-out .4s backwards mentorshipFadeInUp;
}

.mentorship-cta {
  background: var(--color-primary);
  color: var(--color-text-white);
  border: 2px solid var(--color-primary);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  animation: .8s ease-out .6s backwards mentorshipFadeInUp;
  display: inline-block;
  box-shadow: 0 4px 12px #0003;
}

.mentorship-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0000004d;
}

.mentorship-nav {
  backdrop-filter: blur(20px);
  padding: var(--space-6) 0;
  z-index: 10;
  background: #ffffffe6;
  border-bottom: 1px solid #6626321a;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 12px #0000000d;
}

.mentorship-nav-container {
  max-width: 1200px;
  padding: 0 var(--space-6);
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.nav-tab {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: none;
  border: 2px solid #0000;
  transition: all .3s;
}

.nav-tab:hover {
  color: var(--color-primary);
  background: #6626320d;
  border-color: #66263233;
  transform: translateY(-2px);
}

.nav-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px #66263233;
}

.mentorship-main-content {
  max-width: 1200px;
  padding: var(--space-16) var(--space-6);
  gap: var(--space-16);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.mentorship-benefits {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-16);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.benefits-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  text-align: center;
  position: relative;
}

.benefits-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 10rem;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  display: block;
}

.benefits-grid {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.benefit-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  background: #fffffff2;
  border: 1px solid #6626321a;
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 32px #66263214;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px #6626321f;
}

.benefit-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  width: 70px;
  height: 70px;
  margin-bottom: var(--space-4);
  background: #6626320d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.benefit-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.benefit-description {
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: var(--font-size-base);
}

.mentorship-mentors {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.mentorship-mentors:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.mentors-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
  color: var(--color-text-primary);
  position: relative;
}

.mentors-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 10rem;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  display: block;
}

.mentors-grid {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  display: grid;
}

.mentor-card {
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-align: center;
  background: #fffffff2;
  border: 1px solid #66263214;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #6626320f;
}

.mentor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px #6626321a;
}

.mentor-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mentor-avatar {
  width: 120px;
  height: 120px;
  margin: var(--space-4) auto;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px #66263226;
}

.mentor-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mentor-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.mentor-title {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mentor-bio {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.mentor-specialties {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.specialty-tag {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.mentor-connect {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.mentor-connect:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.mentorship-programs {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.mentorship-programs:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.programs-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
  color: var(--color-text-primary);
  position: relative;
}

.programs-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 10rem;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  display: block;
}

.programs-list {
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  display: grid;
}

.program-card {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: #fffffff2;
  border: 1px solid #66263214;
  flex-direction: column;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px #6626320f;
}

.program-card:hover {
  border-color: #66263214;
  transform: translateY(-5px);
  box-shadow: 0 12px 30px #6626321a;
}

.program-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.program-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.program-info {
  flex: 1;
}

.program-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.program-duration {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.program-price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.price-period {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.program-content {
  margin-bottom: var(--space-4);
}

.program-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.program-features {
  margin-bottom: var(--space-4);
}

.features-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.features-list {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.feature-item {
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.feature-icon {
  color: var(--color-text-white);
}

.program-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  display: flex;
}

.program-availability {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.availability-limited {
  color: var(--color-warning);
  font-weight: var(--font-weight-medium);
}

.program-enroll {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.program-enroll:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.mentorship-testimonials {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.mentorship-testimonials:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.testimonials-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
  color: var(--color-text-primary);
  position: relative;
}

.testimonials-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 10rem;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  display: block;
}

.testimonials-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  display: grid;
}

.testimonial-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition-base);
  border: 1px solid var(--color-border-light);
  position: relative;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--color-primary-rgb), .3);
  transform: translateY(-4px);
}

.testimonial-quote {
  font-size: var(--font-size-4xl);
  color: rgba(var(--color-primary-rgb), .2);
  top: var(--space-4);
  left: var(--space-4);
  position: absolute;
}

.testimonial-content {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
  z-index: 1;
  font-style: italic;
  position: relative;
}

.testimonial-author {
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.author-avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  overflow: hidden;
}

.author-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.author-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.testimonial-rating {
  gap: var(--space-1);
  color: var(--color-warning);
  font-size: var(--font-size-base);
  display: flex;
}

.mentorship-faq {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.mentorship-faq:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.faq-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
  color: var(--color-text-primary);
  position: relative;
}

.faq-title:after {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 10rem;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  display: block;
}

.faq-list {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.faq-item {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}

.faq-question {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.faq-question:hover {
  background: rgba(var(--color-primary-rgb), .05);
}

.faq-toggle {
  font-size: var(--font-size-xl);
  transition: transform .3s;
}

.faq-item.active .faq-toggle {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--space-6);
  max-height: 0;
  transition: max-height .3s, padding .3s;
  overflow: hidden;
}

.faq-item.active .faq-answer {
  padding: 0 var(--space-6) var(--space-4);
  max-height: 500px;
}

.faq-content {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.mentorship-application {
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  margin-bottom: var(--space-16);
  background: #fffffff2;
  border: 1px solid #6626321a;
  transition: all .3s;
  box-shadow: 0 8px 32px #66263214;
}

.mentorship-application:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px #6626321f;
}

.application-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-align: center;
  position: relative;
}

.application-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-6);
}

.application-form {
  border-radius: var(--radius-2xl);
  max-width: 700px;
  padding: var(--space-8);
  background: #fffc;
  border: 1px solid #6626320d;
  margin: 0 auto;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  background-color: #ffffffe6;
  border: 2px solid #6626321a;
  transition: all .3s;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px #6626321a;
}

.form-textarea {
  resize: vertical;
  min-height: 150px;
}

.form-row {
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.form-actions {
  margin-top: var(--space-8);
  justify-content: center;
  display: flex;
}

.form-submit {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 4px 12px #66263233;
}

.form-submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #6626324d;
}

@media (width <= 1200px) {
  .mentorship-main-content {
    padding: var(--space-12) var(--space-6);
  }

  .benefits-grid, .mentors-grid, .programs-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (width <= 992px) {
  .mentorship-hero {
    min-height: 50vh;
  }

  .mentorship-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .mentorship-subtitle {
    font-size: var(--font-size-lg);
  }

  .mentorship-benefits, .mentorship-mentors, .mentorship-programs, .mentorship-testimonials, .mentorship-faq, .mentorship-application {
    padding: var(--space-8);
  }

  .benefits-title, .mentors-title, .programs-title, .testimonials-title, .faq-title, .application-title {
    font-size: var(--font-size-2xl);
  }
}

@media (width <= 768px) {
  .mentorship-nav-container {
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .mentorship-hero {
    padding: var(--space-8) var(--space-4);
    min-height: 40vh;
  }

  .mentorship-title {
    font-size: var(--font-size-3xl);
  }

  .mentorship-subtitle {
    font-size: var(--font-size-lg);
  }

  .benefits-grid, .mentors-grid, .programs-list, .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .program-header {
    gap: var(--space-3);
    flex-direction: column;
  }

  .program-price {
    margin-top: var(--space-2);
    align-items: flex-start;
  }

  .features-list {
    grid-template-columns: 1fr;
  }

  .form-row {
    gap: var(--space-4);
    flex-direction: column;
  }

  .application-form {
    padding: var(--space-6);
  }
}

@media (width <= 480px) {
  .mentorship-main-content {
    padding: var(--space-8) var(--space-4);
  }

  .mentorship-hero {
    padding: var(--space-6) var(--space-4);
  }

  .mentorship-title {
    font-size: var(--font-size-2xl);
  }

  .mentorship-subtitle {
    font-size: var(--font-size-base);
  }

  .mentorship-benefits, .mentorship-mentors, .mentorship-programs, .mentorship-testimonials, .mentorship-faq, .mentorship-application {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
  }

  .benefit-card, .mentor-card, .program-card {
    padding: var(--space-4);
  }

  .program-footer {
    gap: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }

  .program-enroll {
    text-align: center;
    width: 100%;
  }

  .testimonial-author {
    align-items: flex-start;
    gap: var(--space-2);
    flex-direction: column;
  }

  .testimonial-rating {
    margin-top: var(--space-2);
  }

  .form-submit {
    padding: var(--space-3) var(--space-6);
  }
}

@keyframes mentorshipFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes mentorshipFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.virtual-events-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
}

.virtual-events-hero {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 50%, var(--color-primary) 100%);
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-white);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.virtual-events-hero:before {
  content: "";
  background: radial-gradient(circle at 30% 70%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 70% 30%, #ffffff1a 0%, #0000 50%);
  animation: 8s ease-in-out infinite eventsFloat;
  position: absolute;
  inset: 0;
}

.virtual-events-hero-content {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.virtual-events-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
}

.virtual-events-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  opacity: .9;
  max-width: 800px;
}

.virtual-events-cta {
  background: var(--color-text-white);
  color: var(--color-secondary);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  box-shadow: 0 4px 12px #0003;
}

.virtual-events-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0000004d;
}

.featured-event {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
}

.featured-event:before {
  content: "Featured";
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-8);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  z-index: 1;
  position: absolute;
  top: 20px;
  right: -30px;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px #0003;
}

.featured-event-content {
  gap: var(--space-8);
  align-items: center;
  display: flex;
}

.featured-event-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  flex: 0 0 40%;
  overflow: hidden;
}

.featured-event-image img {
  width: 100%;
  height: auto;
  transition: transform .5s;
  display: block;
}

.featured-event:hover .featured-event-image img {
  transform: scale(1.05);
}

.featured-event-details {
  flex: 1;
}

.featured-event-meta {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
}

.event-date {
  background: var(--color-secondary);
  color: var(--color-text-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  display: flex;
}

.event-month {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.event-day {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.event-time {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
}

.event-category {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.featured-event-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.featured-event-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.featured-event-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.event-host {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.host-avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.host-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.host-info {
  flex-direction: column;
  display: flex;
}

.host-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.host-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.event-actions {
  gap: var(--space-3);
  display: flex;
}

.register-btn {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.register-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.save-event {
  background: rgba(var(--color-primary-rgb), .1);
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.save-event:hover {
  background: rgba(var(--color-primary-rgb), .2);
}

.save-event.saved {
  background: var(--color-primary);
  color: var(--color-text-white);
}

.events-section {
  margin-bottom: var(--space-8);
}

.events-header {
  margin-bottom: var(--space-6);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.events-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.events-filter {
  gap: var(--space-3);
  display: flex;
}

.filter-btn {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
}

.filter-btn:hover {
  background: rgba(var(--color-primary-rgb), .05);
  border-color: var(--color-border-medium);
}

.filter-btn.active {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}

.events-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  display: grid;
}

.event-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  overflow: hidden;
}

.event-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), .3);
  transform: translateY(-4px);
}

.event-card-image {
  height: 180px;
  position: relative;
  overflow: hidden;
}

.event-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s;
}

.event-card:hover .event-card-image img {
  transform: scale(1.05);
}

.event-card-date {
  top: var(--space-3);
  left: var(--space-3);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  background: #000000b3;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  display: flex;
  position: absolute;
}

.event-card-month {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.event-card-day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.event-card-content {
  padding: var(--space-4);
}

.event-card-meta {
  margin-bottom: var(--space-3);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.event-card-time {
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
}

.event-card-category {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.event-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.event-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.event-card-footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.event-card-attendees {
  align-items: center;
  display: flex;
}

.attendees-avatars {
  margin-right: var(--space-2);
  display: flex;
}

.attendee-avatar {
  border: 2px solid var(--color-bg-primary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-left: -8px;
  overflow: hidden;
}

.attendee-avatar:first-child {
  margin-left: 0;
}

.attendee-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.attendees-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.event-card-action {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.event-card-action:hover {
  background: var(--color-primary-dark);
}

.calendar-section {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

.calendar-header {
  margin-bottom: var(--space-6);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.calendar-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.calendar-navigation {
  gap: var(--space-2);
  display: flex;
}

.calendar-nav-btn {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  width: 40px;
  height: 40px;
  transition: var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calendar-nav-btn:hover {
  background: rgba(var(--color-primary-rgb), .1);
  border-color: var(--color-border-medium);
}

.calendar-month {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

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

.calendar-weekday {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding: var(--space-2);
  text-transform: uppercase;
}

.calendar-day {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid #0000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.calendar-day:hover {
  background: rgba(var(--color-primary-rgb), .05);
  border-color: var(--color-border-light);
}

.calendar-day.today {
  background: rgba(var(--color-primary-rgb), .1);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.calendar-day.has-event:after {
  content: "";
  background: var(--color-primary);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 6px;
}

.calendar-day.active {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}

.calendar-day.active:after {
  background: var(--color-text-white);
}

.calendar-day.other-month {
  color: var(--color-text-tertiary);
}

.day-number {
  font-size: var(--font-size-base);
}

.calendar-events {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-6);
}

.calendar-events-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.selected-date {
  color: var(--color-primary);
}

.calendar-events-list {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.calendar-event-item {
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  display: flex;
}

.calendar-event-item:hover {
  background: rgba(var(--color-primary-rgb), .05);
  border-color: rgba(var(--color-primary-rgb), .2);
}

.calendar-event-time {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex-direction: column;
  flex: 0 0 80px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calendar-event-details {
  flex: 1;
}

.calendar-event-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.calendar-event-info {
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: flex;
}

.calendar-event-category {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.calendar-event-host {
  align-items: center;
  gap: var(--space-1);
  display: flex;
}

.calendar-event-action {
  background: var(--color-bg-primary);
  width: 40px;
  height: 40px;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: var(--transition-base);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.calendar-event-action:hover {
  background: rgba(var(--color-primary-rgb), .1);
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), .3);
}

.events-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  color: var(--color-text-white);
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.events-cta:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff1a 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff1a 0%, #0000 50%);
  position: absolute;
  inset: 0;
}

.events-cta-content {
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.events-cta-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px #0000004d;
}

.events-cta-description {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-6);
  opacity: .9;
}

.events-cta-buttons {
  gap: var(--space-4);
  justify-content: center;
  display: flex;
}

.events-cta-primary {
  background: var(--color-text-white);
  color: var(--color-primary);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  box-shadow: 0 4px 12px #0003;
}

.events-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0000004d;
}

.events-cta-secondary {
  color: var(--color-text-white);
  border: 2px solid var(--color-text-white);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  background: none;
}

.events-cta-secondary:hover {
  background: #ffffff1a;
  transform: translateY(-2px);
}

.no-events {
  text-align: center;
  padding: var(--space-8) 0;
}

.no-events-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.no-events-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.no-events-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.no-events-action {
  background: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
}

.no-events-action:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.events-loading {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  display: flex;
}

.events-loading-spinner {
  border: 4px solid rgba(var(--color-primary-rgb), .1);
  border-left-color: var(--color-primary);
  width: 50px;
  height: 50px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  animation: 1s linear infinite spin;
}

.events-loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

@media (width <= 768px) {
  .virtual-events-hero {
    padding: var(--space-8) var(--space-4);
  }

  .virtual-events-title {
    font-size: var(--font-size-3xl);
  }

  .virtual-events-subtitle {
    font-size: var(--font-size-lg);
  }

  .featured-event-content {
    flex-direction: column;
  }

  .featured-event-image {
    margin-bottom: var(--space-4);
    flex: 0 0 100%;
  }

  .events-header {
    align-items: flex-start;
    gap: var(--space-3);
    flex-direction: column;
  }

  .events-filter {
    width: 100%;
    padding-bottom: var(--space-2);
    overflow-x: auto;
  }

  .calendar-grid {
    gap: var(--space-1);
  }

  .calendar-day {
    font-size: var(--font-size-sm);
  }

  .events-cta-buttons {
    gap: var(--space-3);
    flex-direction: column;
  }
}

@media (width <= 480px) {
  .virtual-events-title {
    font-size: var(--font-size-2xl);
  }

  .virtual-events-subtitle {
    font-size: var(--font-size-base);
  }

  .featured-event-meta {
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .featured-event-footer {
    gap: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }

  .event-actions {
    width: 100%;
  }

  .register-btn {
    text-align: center;
    flex: 1;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .calendar-event-item {
    flex-direction: column;
  }

  .calendar-event-time {
    flex: none;
    width: 100%;
  }

  .calendar-event-action {
    align-self: flex-end;
  }
}

@keyframes eventsFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.progress-boards-page {
  background: linear-gradient(135deg, var(--color-background) 0%, #26665905 100%);
  min-height: 100vh;
  color: var(--color-text-primary);
}

.progress-content {
  max-width: var(--max-width-xl);
  padding: var(--space-8);
  margin: 0 auto;
}

.progress-boards-hero {
  text-align: center;
  min-height: 70vh;
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(135deg, #10b9811a 0%, #0596690d 100%);
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.progress-boards-hero:before {
  content: "";
  background: radial-gradient(circle at 20% 80%, #ffffff26 0%, #0000 50%), radial-gradient(circle at 80% 20%, #ffffff26 0%, #0000 50%);
  animation: 6s ease-in-out infinite progressFloat;
  position: absolute;
  inset: 0;
}

.progress-boards-hero-background {
  z-index: 1;
  background: linear-gradient(135deg, #10b98126 0%, #05966914 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.progress-boards-hero-overlay {
  z-index: 2;
  background: radial-gradient(circle at 30% 20%, #10b98126 0%, #0000 50%), radial-gradient(circle at 70% 80%, #05966926 0%, #0000 50%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.progress-boards-hero-content {
  z-index: 3;
  text-align: center;
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
}

.progress-boards-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 2px 4px #0000004d;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) text;
  line-height: 1.1;
  animation: .8s ease-out progressFadeInUp;
}

.progress-boards-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 800px;
  line-height: 1.4;
  animation: .8s ease-out .2s backwards progressFadeInUp;
}

.progress-boards-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.7;
  animation: .8s ease-out .4s backwards progressFadeInUp;
}

.progress-boards-nav {
  background-color: var(--color-background);
  z-index: 10;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
}

.progress-boards-nav-container {
  max-width: var(--max-width-xl);
  padding: 0 var(--space-4);
  margin: 0 auto;
}

.success-banner {
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: .5rem;
  margin: 1rem 2rem;
  padding: 1rem 2rem;
  font-weight: 600;
  animation: .3s ease-out slideIn;
  box-shadow: 0 4px 12px #10b9814d;
}

@keyframes progressFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes progressFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 768px) {
  .progress-boards-hero {
    min-height: 60vh;
    padding: var(--space-16) var(--space-4);
  }

  .progress-boards-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .progress-boards-subtitle {
    font-size: var(--font-size-lg);
  }

  .progress-boards-description {
    font-size: var(--font-size-md);
  }
}

.progress-overview {
  gap: var(--space-12);
  padding: var(--space-8) 0;
  flex-direction: column;
  display: flex;
}

.progress-stats-section {
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.progress-stats-container {
  gap: var(--space-6);
  max-width: var(--max-width-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 auto;
  display: grid;
}

.progress-features-section {
  padding: var(--space-12) var(--space-4);
}

.progress-features-container {
  gap: var(--space-6);
  max-width: var(--max-width-xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0 auto;
  display: grid;
}

.progress-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.progress-section-subtitle {
  font-size: var(--font-size-lg);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12) auto;
  color: var(--color-text-secondary);
}

.overall-progress-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px #0000001a;
}

.overall-progress-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  display: flex;
}

.overall-progress-header h3 {
  color: #1f2937;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.overall-percentage {
  color: #10b981;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) text;
  font-size: 2rem;
  font-weight: 800;
}

.overall-progress-bar {
  background: #e5e7eb;
  border-radius: 6px;
  height: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 6px;
  height: 100%;
  transition: width .5s;
}

.overall-stats {
  gap: 2rem;
  display: flex;
}

.stat {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.stat-number {
  color: #1f2937;
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-label {
  color: #6b7280;
  margin-top: .25rem;
  font-size: .875rem;
}

.category-progress-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  display: grid;
}

.category-progress-card {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px #00000014;
}

.category-progress-card:before {
  content: "";
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.category-progress-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #00000026;
}

.category-progress-card:hover:before {
  transform: scaleX(1);
}

.category-header {
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  display: flex;
}

.category-icon {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  display: flex;
}

.category-header h4 {
  color: #1f2937;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.category-progress {
  margin-bottom: 1rem;
}

.category-progress-bar {
  background: #e5e7eb;
  border-radius: 4px;
  height: 8px;
  margin-bottom: .5rem;
  overflow: hidden;
}

.category-stats {
  color: #6b7280;
  font-size: .875rem;
  font-weight: 500;
}

.category-percentage {
  color: #10b981;
  text-align: right;
  font-size: 1.25rem;
  font-weight: 700;
}

.category-detail {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px #0000001a;
}

.category-header-detail {
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  display: flex;
}

.back-button {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  transition: all .2s;
}

.back-button:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #9ca3af;
}

.category-info {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.category-icon-large {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  display: flex;
}

.category-info h3 {
  color: #1f2937;
  margin: 0 0 .25rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.category-info p {
  color: #6b7280;
  margin: 0;
}

.items-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  display: grid;
}

.progress-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  transition: all .2s;
  display: flex;
}

.progress-item.completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
}

.progress-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000001a;
}

.progress-checkbox {
  cursor: pointer;
  margin-right: 1rem;
  display: inline-block;
  position: relative;
}

.progress-checkbox input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  position: absolute;
}

.checkmark {
  background-color: #fff;
  border: 3px solid #d1d5db;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  transition: all .3s;
  display: flex;
  position: relative;
  box-shadow: 0 2px 4px #0000001a;
}

.progress-checkbox:hover .checkmark {
  border-color: #10b981;
  transform: scale(1.05);
  box-shadow: 0 4px 8px #10b98133;
}

.progress-checkbox input:checked ~ .checkmark {
  background-color: #10b981;
  border-color: #10b981;
  transform: scale(1.1);
  box-shadow: 0 4px 12px #10b9814d;
}

.checkmark:after {
  content: "✓";
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: none;
  position: absolute;
}

.progress-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.item-content {
  flex: 1;
}

.item-title {
  color: #1f2937;
  margin-bottom: .25rem;
  font-weight: 600;
}

.item-description {
  color: #6b7280;
  font-size: .875rem;
}

.progress-item.completed .item-description {
  color: #059669;
  font-weight: 500;
}

.no-items {
  text-align: center;
  color: #6b7280;
  padding: 3rem;
}

.progress-motivation {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin-top: 3rem;
}

.motivation-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.motivation-content h3 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.motivation-content p {
  opacity: .9;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.motivation-stats {
  justify-content: center;
  gap: 3rem;
  display: flex;
}

.motivation-stat {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.motivation-stat .stat-number {
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: 800;
}

.motivation-stat .stat-label {
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .875rem;
}

@media (width <= 768px) {
  .progress-content {
    padding: 1rem;
  }

  .overall-progress-card {
    padding: 1.5rem;
  }

  .overall-progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .overall-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .category-progress-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .category-header-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .items-grid {
    grid-template-columns: 1fr;
  }

  .motivation-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .category-progress-card {
    padding: 1rem;
  }
}

@media (width <= 480px) {
  .progress-content {
    padding: .5rem;
  }

  .overall-progress-card, .category-detail {
    padding: 1rem;
  }

  .progress-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
}

.alert-banner {
  background: var(--color-tertiary-darker);
  width: 100%;
  color: var(--color-text-white, #fff);
  z-index: 1200;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: .4rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 8px #0000000a;
}

.alert-message {
  text-align: center;
  flex: 1;
}

.alert-close {
  color: inherit;
  cursor: pointer;
  opacity: .7;
  background: none;
  border: none;
  margin-left: 1rem;
  padding: 0 .5rem;
  font-size: 1.2rem;
  line-height: 1;
  transition: opacity .2s;
}

.alert-close:hover {
  opacity: 1;
}

.confirmation-modal-overlay {
  backdrop-filter: blur(8px);
  z-index: 1000;
  background: #0009;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.confirmation-modal {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #fff3;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  animation: .3s ease-out modalSlideIn;
  overflow: hidden;
  box-shadow: 0 20px 60px #0000004d;
}

.confirmation-modal-header {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 20px;
  display: flex;
}

.confirmation-modal-header h3 {
  color: #fff;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.close-button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 24px;
  transition: background-color .2s;
  display: flex;
}

.close-button:hover:not(:disabled) {
  background: #fff3;
}

.close-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.confirmation-modal-body {
  padding: 24px;
}

.confirmation-modal-body p {
  color: #374151;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.confirmation-modal-footer {
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px 24px;
  display: flex;
}

.cancel-button, .confirm-button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.cancel-button {
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
}

.cancel-button:hover:not(.disabled) {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.cancel-button.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.confirm-button {
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 12px #667eea66;
}

.confirm-button:hover:not(.loading) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px #667eea80;
}

.confirm-button.join {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px #10b98166;
}

.confirm-button.join:hover:not(.loading) {
  box-shadow: 0 6px 16px #10b98180;
}

.confirm-button.leave {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px #ef444466;
}

.confirm-button.leave:hover:not(.loading) {
  box-shadow: 0 6px 16px #ef444480;
}

.confirm-button.loading {
  opacity: .8;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  align-items: center;
  gap: 8px;
  display: flex;
}

@media (width <= 640px) {
  .confirmation-modal {
    max-width: none;
    margin: 20px;
  }

  .confirmation-modal-header, .confirmation-modal-body, .confirmation-modal-footer {
    padding: 20px;
  }

  .confirmation-modal-footer {
    flex-direction: column-reverse;
  }

  .cancel-button, .confirm-button {
    width: 100%;
  }
}

.progress-toggle-container {
  margin-top: 0;
  margin-bottom: 0;
}

.progress-toggle-card {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  background: linear-gradient(135deg, #fffffff2 0%, #9d818908 100%);
  border: 1px solid #9d818914;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px #9d818914, 0 8px 24px #9d81890a;
}

.progress-toggle-card:before {
  content: "";
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.progress-toggle-card:hover {
  border-color: #9d81891f;
  transform: translateY(-2px);
  box-shadow: 0 24px 72px #9d81891f, 0 12px 32px #9d81890f;
}

.progress-toggle-header {
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  display: flex;
}

.progress-toggle-icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-full);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 8px 24px #9d818933;
}

.progress-toggle-card:hover .progress-toggle-icon {
  transform: scale(1.05);
  box-shadow: 0 12px 32px #9d818940;
}

.progress-toggle-icon svg {
  width: 24px;
  height: 24px;
}

.progress-toggle-title {
  flex: 1;
}

.progress-toggle-title h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}

.progress-toggle-title p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.progress-toggle-stats {
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: #9d818905;
  border: 1px solid #9d81890f;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.progress-stat {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  display: flex;
}

.progress-stat:hover {
  background: #9d81890a;
  transform: translateY(-1px);
}

.progress-stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.progress-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.progress-toggle-action {
  justify-content: center;
  display: flex;
}

.progress-toggle-button {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: none;
  min-width: 200px;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px #9d818940;
}

.progress-toggle-button:before {
  content: "";
  opacity: 0;
  background: linear-gradient(#ffffff1a, #fff0);
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.progress-toggle-button:hover:not(:disabled):before {
  opacity: 1;
}

.progress-toggle-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #9d818959;
}

.progress-toggle-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 16px #9d818940;
}

.progress-toggle-button.completed {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  box-shadow: 0 8px 24px #22c55e40;
}

.progress-toggle-button.completed:hover:not(:disabled) {
  box-shadow: 0 12px 32px #22c55e59;
}

.progress-toggle-button.loading {
  opacity: .8;
  cursor: not-allowed;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.progress-toggle-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--color-gray-400);
  box-shadow: none;
  transform: none;
}

.progress-toggle-button svg {
  width: 20px;
  height: 20px;
  transition: transform .2s;
}

.progress-toggle-button:hover:not(:disabled) svg {
  transform: scale(1.1);
}

.progress-toggle-loading {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.spinner {
  transform-origin: 50%;
  stroke-dasharray: 60;
  stroke-dashoffset: 20px;
  animation: 1.5s linear infinite spin;
}

.progress-toggle-success {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-success-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: linear-gradient(135deg, #22c55e1a 0%, #22c55e0d 100%);
  border: 1px solid #22c55e33;
  animation: .4s cubic-bezier(.175, .885, .32, 1.275) slideInUp;
  display: flex;
}

.progress-toggle-success svg {
  width: 16px;
  height: 16px;
  color: var(--color-success);
}

.progress-toggle-signin-btn {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  min-width: 200px;
  text-decoration: none;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  display: inline-flex;
  box-shadow: 0 8px 24px #9d818940;
}

.progress-toggle-signin-btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #9d818959;
}

.progress-toggle-signin-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.progress-toggle-signin-btn:hover svg {
  transform: translate(2px);
}

@media (width <= 768px) {
  .progress-toggle-card {
    padding: var(--space-6);
  }

  .progress-toggle-header {
    text-align: center;
    align-items: center;
    gap: var(--space-3);
    flex-direction: column;
  }

  .progress-toggle-icon {
    width: 48px;
    height: 48px;
  }

  .progress-toggle-icon svg {
    width: 20px;
    height: 20px;
  }

  .progress-toggle-title h3 {
    font-size: var(--font-size-xl);
  }

  .progress-toggle-title p {
    font-size: var(--font-size-base);
  }

  .progress-toggle-stats {
    gap: var(--space-2);
    padding: var(--space-3);
    grid-template-columns: repeat(3, 1fr);
  }

  .progress-stat {
    padding: var(--space-2);
  }

  .progress-stat-number {
    font-size: var(--font-size-xl);
  }

  .progress-stat-label {
    font-size: var(--font-size-xs);
  }

  .progress-toggle-button, .progress-toggle-signin-btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    min-width: 180px;
  }
}

@media (width <= 480px) {
  .progress-toggle-card {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
  }

  .progress-toggle-header {
    gap: var(--space-2);
  }

  .progress-toggle-icon {
    width: 40px;
    height: 40px;
  }

  .progress-toggle-icon svg {
    width: 18px;
    height: 18px;
  }

  .progress-toggle-title h3 {
    font-size: var(--font-size-lg);
  }

  .progress-toggle-title p {
    font-size: var(--font-size-sm);
  }

  .progress-toggle-stats {
    gap: var(--space-1);
    padding: var(--space-2);
    grid-template-columns: repeat(3, 1fr);
  }

  .progress-stat {
    padding: var(--space-1);
  }

  .progress-stat-number {
    font-size: var(--font-size-lg);
  }

  .progress-stat-label {
    font-size: var(--font-size-xs);
  }

  .progress-toggle-button, .progress-toggle-signin-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    min-width: 160px;
  }

  .progress-toggle-success {
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-3);
  }
}

.subscription-modal-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.subscription-modal {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  padding: 2rem 2.5rem;
  position: relative;
  box-shadow: 0 8px 32px #0003;
}

.close-button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.subscribe-button {
  color: #fff;
  cursor: pointer;
  background: #667eea;
  border: none;
  border-radius: 8px;
  margin-top: 1.5rem;
  padding: .75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background .2s;
}

.subscribe-button:hover {
  background: #5a67d8;
}

.subscribe-modal-immersive-bg {
  z-index: 2000;
  background: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0;
}

.subscribe-modal-immersive-overlay {
  background: linear-gradient(120deg, var(--color-primary-lighter) 0%, var(--color-bg-secondary) 100%);
  opacity: .92;
  z-index: 1;
  position: absolute;
  inset: 0;
}

.subscribe-modal-immersive {
  z-index: 2;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-sizing: border-box;
  background: #ffffffd9;
  border-radius: 2.2rem;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: 0 1.5rem;
  padding: 3.2rem 2.5rem 2.5rem;
  display: flex;
  position: relative;
  box-shadow: 0 12px 48px #9d818921, 0 2px 8px #9d818914;
}

.subscribe-modal-close {
  color: var(--color-primary-light);
  cursor: pointer;
  z-index: 3;
  text-align: center;
  background: none;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2.1rem;
  line-height: 2.5rem;
  transition: background .2s;
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
}

.subscribe-modal-close:hover {
  background: var(--color-primary-lighter);
}

.subscribe-modal-title {
  font-family: var(--font-family-heading);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: .7rem;
  font-size: 2.2rem;
  font-weight: 800;
}

.subscribe-modal-desc {
  color: var(--color-primary-light);
  text-align: center;
  font-size: 1.15rem;
  font-family: var(--font-family-primary);
  margin-bottom: 2.2rem;
}

.subscribe-modal-offers {
  flex-flow: wrap;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  margin-bottom: 2.2rem;
  display: flex;
}

.subscribe-offer-card {
  border: 2.5px solid var(--color-border-light);
  background: #fffffffa;
  border-radius: 1.5rem;
  flex-direction: column;
  flex: 260px;
  align-items: center;
  min-width: 240px;
  max-width: 320px;
  padding: 2.2rem 1.5rem 1.5rem;
  transition: border .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 4px 16px #5029661a;
}

.subscribe-offer-card.monthly {
  border-color: var(--color-primary-light);
}

.subscribe-offer-card.founding {
  border-color: var(--color-secondary-dark);
}

.offer-header {
  color: var(--color-primary-dark);
  letter-spacing: .01em;
  margin-bottom: .5rem;
  font-size: 1.18rem;
  font-weight: 700;
}

.subscribe-offer-card.founding .offer-header {
  color: var(--color-secondary-dark);
}

.offer-price {
  color: var(--color-primary);
  margin-bottom: .5rem;
  font-size: 2.1rem;
  font-weight: 900;
}

.subscribe-offer-card.founding .offer-price {
  color: var(--color-secondary-dark);
}

.offer-period {
  color: var(--color-text-secondary);
  margin-left: .2rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.offer-features {
  color: var(--color-text-primary);
  width: 100%;
  margin: 1.1rem 0 1.2rem;
  padding: 0;
  font-size: 1.08rem;
  list-style: none;
}

.offer-features li {
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  display: flex;
}

.subscribe-offer-btn {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  width: 100%;
  color: var(--color-text-white);
  cursor: pointer;
  letter-spacing: .01em;
  border: none;
  border-radius: 1.1rem;
  margin-top: .7rem;
  padding: 1.1rem 0;
  font-size: 1.13rem;
  font-weight: 800;
  transition: background .2s, transform .2s;
  box-shadow: 0 2px 8px #50296614;
}

.subscribe-offer-btn.founding {
  background: linear-gradient(90deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
}

.subscribe-offer-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-text-white);
}

.subscribe-offer-btn.founding:hover {
  background: var(--color-secondary-dark);
}

.subscribe-modal-note {
  color: var(--color-primary-light);
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: 1.05rem;
  display: flex;
}

.lock-icon {
  font-size: 1.2rem;
}

@media (width <= 900px) {
  .subscribe-modal-immersive {
    max-width: 98vw;
    padding: 2rem .5rem 1.5rem;
  }

  .subscribe-modal-offers {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .subscribe-offer-card {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }
}

@media (width <= 600px) {
  .subscribe-modal-immersive {
    border-radius: 1.2rem;
    padding: 1.2rem .2rem;
  }

  .subscribe-modal-title {
    font-size: 1.1rem;
  }
}

.stat-card {
  align-items: center;
  gap: var(--space-4);
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  display: flex;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-icon {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  display: flex;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.stat-trend {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.stat-trend.positive {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.stat-trend.negative {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

.stat-trend.neutral {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.feature-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-icon {
  border-radius: var(--radius-md);
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  display: flex;
}

.feature-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.feature-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

@media (width <= 768px) {
  .stat-card {
    text-align: center;
    padding: var(--space-4);
    flex-direction: column;
  }

  .stat-icon {
    margin-bottom: var(--space-2);
  }

  .feature-card {
    padding: var(--space-4);
  }

  .feature-icon {
    margin: 0 auto var(--space-3) auto;
  }

  .feature-title, .feature-description {
    text-align: center;
  }
}

.meditation-card {
  border-radius: var(--border-radius-lg);
  background-color: var(--color-background-card);
  z-index: 1;
  background-blend-mode: overlay;
  --accent-color: var(--color-primary);
  opacity: 0;
  background-position: 50%;
  background-size: cover;
  flex-direction: column;
  min-height: 320px;
  padding: 2.5rem 2rem;
  transition: transform .4s, box-shadow .4s;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
  box-shadow: 0 8px 24px #0000001a;
}

.meditation-card.in-view {
  animation: .8s forwards meditationCardReveal;
}

@keyframes meditationCardReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.meditation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px #00000026;
}

.meditation-card:before {
  content: "";
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffff1a 0%, #ffffff0d 100%);
  position: absolute;
  inset: 0;
}

.meditation-card-content {
  z-index: 2;
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
}

.meditation-card-icon-wrapper {
  width: 70px;
  height: 70px;
  margin-bottom: 1.5rem;
  position: relative;
}

.meditation-card-icon {
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--accent-color);
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  display: flex;
  position: relative;
}

.meditation-card-icon svg {
  width: 40px;
  height: 40px;
}

.meditation-card-icon-bg {
  background-color: rgba(var(--color-primary-rgb), .1);
  z-index: 1;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: 3s ease-in-out infinite meditationPulse;
  position: absolute;
  top: 0;
  left: 0;
}

.meditation-card-title {
  color: var(--color-text-heading);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}

.meditation-card-title:after {
  content: "";
  background-color: var(--accent-color);
  width: 40px;
  height: 3px;
  transition: width .3s;
  position: absolute;
  bottom: -.5rem;
  left: 0;
}

.meditation-card:hover .meditation-card-title:after {
  width: 60px;
}

.meditation-card-description {
  color: var(--color-text-body);
  flex-grow: 1;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.meditation-card-glow {
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), .2) 0%, rgba(var(--color-primary-rgb), 0) 70%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  width: 150%;
  height: 150%;
  transition: opacity .5s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.meditation-card:hover .meditation-card-glow {
  opacity: 1;
  animation: 2s ease-in-out infinite meditationGlow;
}

@keyframes meditationGlow {
  0%, to {
    opacity: .3;
    transform: translate(-50%, -50%)scale(1);
  }

  50% {
    opacity: .5;
    transform: translate(-50%, -50%)scale(1.1);
  }
}

.meditation-card-particles {
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.meditation-particle {
  width: var(--size);
  height: var(--size);
  background-color: var(--accent-color);
  top: var(--y-pos);
  left: var(--x-pos);
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
}

.meditation-card-particles.active .meditation-particle {
  animation: 3s ease-in-out infinite particleFloat;
  animation-delay: var(--delay);
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0)scale(0);
  }

  20% {
    opacity: .5;
    transform: translateY(-20px)scale(1);
  }

  80% {
    opacity: .3;
    transform: translateY(-60px)scale(.8);
  }

  to {
    opacity: 0;
    transform: translateY(-80px)scale(0);
  }
}

@media (width <= 768px) {
  .meditation-card {
    min-height: 280px;
    padding: 2rem 1.5rem;
  }

  .meditation-card-icon-wrapper {
    width: 60px;
    height: 60px;
  }

  .meditation-card-title {
    font-size: 1.3rem;
  }
}

.yoga-pose-card {
  perspective: 1000px;
  opacity: 0;
  width: 100%;
  height: 450px;
  margin-bottom: 2rem;
  transform: translateY(30px);
}

.yoga-pose-card.in-view {
  animation: .8s forwards yogaPoseCardReveal;
}

@keyframes yogaPoseCardReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yoga-pose-card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: var(--border-radius-lg);
  transition: transform .8s;
  position: relative;
  box-shadow: 0 10px 30px #00000026;
}

.yoga-pose-card-inner.flipped {
  transform: rotateY(180deg);
}

.yoga-pose-card-front, .yoga-pose-card-back {
  backface-visibility: hidden;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.yoga-pose-card-front {
  background-color: var(--color-background-card);
  color: var(--color-text-body);
  flex-direction: column;
  display: flex;
}

.yoga-pose-card-back {
  background-color: var(--color-background-card);
  color: var(--color-text-body);
  flex-direction: column;
  padding: 2rem;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: rotateY(180deg);
}

.yoga-pose-card-image-container {
  height: 60%;
  position: relative;
  overflow: hidden;
}

.yoga-pose-card-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s;
}

.yoga-pose-card-front:hover .yoga-pose-card-image {
  transform: scale(1.05);
}

.yoga-pose-card-overlay {
  background: linear-gradient(#0000 50%, #000000b3 100%);
  position: absolute;
  inset: 0;
}

.yoga-pose-card-content {
  z-index: 2;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.yoga-pose-card-badges {
  gap: .5rem;
  margin-bottom: 1rem;
  display: flex;
}

.yoga-pose-card-difficulty, .yoga-pose-card-category {
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-block;
}

.yoga-pose-card-difficulty {
  color: #fff;
}

.yoga-pose-card-category {
  background-color: var(--color-background-alt);
  color: var(--color-text-body);
}

.yoga-pose-card-title {
  color: var(--color-text-heading);
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.yoga-pose-card-sanskrit {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-style: italic;
}

.yoga-pose-card-flip-prompt {
  color: var(--color-primary);
  opacity: .8;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  font-size: .875rem;
  transition: opacity .3s;
  display: flex;
}

.yoga-pose-card-front:hover .yoga-pose-card-flip-prompt, .yoga-pose-card-back:hover .yoga-pose-card-flip-prompt {
  opacity: 1;
}

.yoga-pose-card-back-content {
  z-index: 2;
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
}

.yoga-pose-card-description {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.yoga-pose-card-benefits {
  margin-bottom: 1.5rem;
}

.yoga-pose-card-benefits h4 {
  color: var(--color-text-heading);
  margin-bottom: .75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.yoga-pose-card-benefits ul {
  margin: 0;
  padding-left: 1.5rem;
}

.yoga-pose-card-benefits li {
  margin-bottom: .5rem;
  position: relative;
}

.yoga-pose-card-benefits li:before {
  content: "";
  color: var(--color-primary);
  width: 1em;
  margin-left: -1em;
  font-weight: 700;
  display: inline-block;
}

.yoga-pose-card-back-decoration {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.yoga-pose-card-decoration-circle {
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(var(--color-primary-rgb), .2);
  animation: 3s ease-in-out infinite yogaPoseCirclePulse;
  animation-delay: var(--delay);
  border-radius: 50%;
  position: absolute;
  top: -50%;
  right: -50%;
}

@keyframes yogaPoseCirclePulse {
  0%, to {
    opacity: .2;
    transform: scale(1);
  }

  50% {
    opacity: .3;
    transform: scale(1.1);
  }
}

@media (width <= 768px) {
  .yoga-pose-card {
    height: 400px;
  }

  .yoga-pose-card-title {
    font-size: 1.3rem;
  }

  .yoga-pose-card-content, .yoga-pose-card-back {
    padding: 1.25rem;
  }
}

@media (width <= 576px) {
  .yoga-pose-card {
    height: 380px;
  }
}

.chakra-wheel-container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  position: relative;
}

.chakra-wheel {
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  margin: 0 auto 3rem;
  transition: opacity .5s, transform .5s;
  display: flex;
  position: relative;
  transform: scale(.8);
}

.chakra-wheel.in-view {
  opacity: 1;
  animation: 1s forwards chakraWheelReveal;
  transform: scale(1);
}

@keyframes chakraWheelReveal {
  0% {
    opacity: 0;
    transform: scale(.8)rotate(-30deg);
  }

  to {
    opacity: 1;
    transform: scale(1)rotate(0);
  }
}

.chakra-wheel-center {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chakra-wheel-inner-circle {
  background: radial-gradient(circle, #ffffffe6 0%, #ffffff80 100%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: 3s ease-in-out infinite chakraCenterPulse;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #ffffff80;
}

@keyframes chakraCenterPulse {
  0%, to {
    transform: translate(-50%, -50%)scale(1);
    box-shadow: 0 0 20px #ffffff80;
  }

  50% {
    transform: translate(-50%, -50%)scale(1.1);
    box-shadow: 0 0 30px #ffffffb3;
  }
}

.chakra-wheel-outer-circle {
  border: 1px solid #fff3;
  border-radius: 50%;
  width: 240px;
  height: 240px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chakra-point {
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  width: 30px;
  height: 30px;
  animation: .5s forwards chakraPointAppear;
  animation-delay: var(--animation-delay);
  border-radius: 50%;
  margin-top: -15px;
  margin-left: -15px;
  transition: transform .3s, box-shadow .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 10px #0000004d;
}

@keyframes chakraPointAppear {
  0% {
    opacity: 0;
    transform: translate(0)scale(0);
  }

  to {
    opacity: 1;
    transform: translate(var(--x), var(--y)) scale(1);
  }
}

.chakra-point:hover, .chakra-point.active {
  box-shadow: 0 0 15px var(--chakra-color), 0 0 30px #ffffff4d;
  z-index: 4;
  transform: translate(var(--x), var(--y)) scale(1.2) !important;
}

.chakra-point-pulse {
  background-color: var(--chakra-color);
  opacity: .5;
  border-radius: 50%;
  animation: 2s ease-in-out infinite chakraPointPulse;
  position: absolute;
  inset: 0;
}

@keyframes chakraPointPulse {
  0%, to {
    opacity: .5;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.chakra-point-label {
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 5px #00000080;
  opacity: 0;
  pointer-events: none;
  width: max-content;
  font-size: .75rem;
  font-weight: 600;
  transition: opacity .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chakra-point:hover .chakra-point-label, .chakra-point.active .chakra-point-label {
  opacity: 1;
  animation: .3s forwards chakraLabelAppear;
}

@keyframes chakraLabelAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }
}

.chakra-wheel-lines {
  z-index: 1;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.chakra-wheel-line {
  opacity: 0;
  animation: .5s forwards chakraLineAppear;
  animation-delay: var(--animation-delay);
}

@keyframes chakraLineAppear {
  0% {
    opacity: 0;
    stroke-dashoffset: 30px;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.chakra-details {
  opacity: 0;
  width: 100%;
  max-width: 600px;
  margin-top: 1rem;
  animation: .5s forwards chakraDetailsAppear;
}

@keyframes chakraDetailsAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chakra-detail-card {
  background-color: var(--color-background-card);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--chakra-color);
  padding: 1.5rem;
  box-shadow: 0 10px 30px #0000001a;
}

.chakra-detail-card h3 {
  color: var(--chakra-color);
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
}

.chakra-detail-card h3 span {
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 400;
}

.chakra-detail-content {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.chakra-detail-item {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.chakra-detail-label {
  color: var(--color-text-muted);
  font-size: .875rem;
  font-weight: 600;
}

.chakra-detail-value {
  color: var(--color-text-body);
  font-size: 1rem;
}

@media (width <= 768px) {
  .chakra-wheel {
    width: 280px;
    height: 280px;
    margin-bottom: 2rem;
  }

  .chakra-wheel-outer-circle {
    width: 220px;
    height: 220px;
  }

  .chakra-point {
    width: 25px;
    height: 25px;
    margin-top: -12.5px;
    margin-left: -12.5px;
  }

  .chakra-wheel-lines {
    width: 280px;
    height: 280px;
  }
}

@media (width <= 576px) {
  .chakra-wheel {
    width: 240px;
    height: 240px;
  }

  .chakra-wheel-outer-circle {
    width: 180px;
    height: 180px;
  }

  .chakra-wheel-inner-circle {
    width: 50px;
    height: 50px;
  }

  .chakra-point {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }

  .chakra-wheel-lines {
    width: 240px;
    height: 240px;
  }
}

.breathing-animation-container {
  background-color: var(--color-background-alt);
  border-radius: var(--border-radius-lg);
  opacity: 0;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  transform: translateY(30px);
  box-shadow: 0 10px 30px #0000001a;
}

.breathing-animation-container.in-view {
  animation: .8s forwards breathingAnimationReveal;
}

@keyframes breathingAnimationReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.breathing-animation-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
}

.breathing-animation-title {
  color: var(--color-text-heading);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.breathing-animation-timer {
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), .1);
  border-radius: var(--border-radius-md);
  padding: .5rem 1rem;
  font-family: monospace;
  font-size: 1.25rem;
  font-weight: 500;
}

.breathing-animation-circle-container {
  width: 250px;
  height: 250px;
  margin: 0 auto 2rem;
  position: relative;
}

.breathing-animation-circle {
  background-color: rgba(var(--color-primary-rgb), .1);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.breathing-animation-circle.inhale {
  animation: breathingInhale var(--inhale-duration) ease-in-out forwards;
}

.breathing-animation-circle.hold1, .breathing-animation-circle.hold2 {
  animation: breathingHold var(--hold-duration) ease-in-out forwards;
}

.breathing-animation-circle.exhale {
  animation: breathingExhale var(--exhale-duration) ease-in-out forwards;
}

@keyframes breathingInhale {
  0% {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .3);
    background-color: rgba(var(--color-primary-rgb), .1);
    transform: translate(-50%, -50%)scale(1);
  }

  to {
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), .5);
    background-color: rgba(var(--color-primary-rgb), .2);
    transform: translate(-50%, -50%)scale(1.3);
  }
}

@keyframes breathingHold {
  0%, to {
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), .5);
    background-color: rgba(var(--color-primary-rgb), .2);
    transform: translate(-50%, -50%)scale(1.3);
  }
}

@keyframes breathingExhale {
  0% {
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), .5);
    background-color: rgba(var(--color-primary-rgb), .2);
    transform: translate(-50%, -50%)scale(1.3);
  }

  to {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .3);
    background-color: rgba(var(--color-primary-rgb), .1);
    transform: translate(-50%, -50%)scale(1);
  }
}

.breathing-animation-inner-circle {
  background-color: var(--color-primary);
  color: #fff;
  width: 120px;
  height: 120px;
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .5);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.breathing-animation-instruction {
  text-align: center;
  padding: 0 1rem;
  font-size: 1.1rem;
}

.breathing-animation-progress {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.breathing-animation-progress-ring {
  transition: stroke-dashoffset .3s;
}

.breathing-animation-pattern {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
}

.breathing-animation-phase {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.breathing-animation-phase-label {
  color: var(--color-text-muted);
  font-size: .875rem;
  font-weight: 500;
}

.breathing-animation-phase-value {
  color: var(--color-text-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.breathing-animation-button {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(var(--color-primary-rgb), .3);
  border: none;
  padding: .75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all .3s;
}

.breathing-animation-button:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), .4);
  transform: translateY(-2px);
}

.breathing-animation-button:active {
  box-shadow: 0 3px 10px rgba(var(--color-primary-rgb), .3);
  transform: translateY(0);
}

.breathing-animation-button.active {
  background-color: var(--color-danger);
  box-shadow: 0 5px 15px rgba(var(--color-danger-rgb), .3);
}

.breathing-animation-button.active:hover {
  background-color: var(--color-danger-dark);
  box-shadow: 0 8px 20px rgba(var(--color-danger-rgb), .4);
}

@media (width <= 768px) {
  .breathing-animation-container {
    padding: 1.5rem;
  }

  .breathing-animation-circle-container {
    width: 220px;
    height: 220px;
  }

  .breathing-animation-circle {
    width: 180px;
    height: 180px;
  }

  .breathing-animation-inner-circle {
    width: 100px;
    height: 100px;
  }

  .breathing-animation-instruction {
    font-size: 1rem;
  }
}

@media (width <= 576px) {
  .breathing-animation-circle-container {
    width: 200px;
    height: 200px;
  }

  .breathing-animation-circle {
    width: 160px;
    height: 160px;
  }

  .breathing-animation-inner-circle {
    width: 90px;
    height: 90px;
  }

  .breathing-animation-pattern {
    gap: 1rem;
  }
}

.particle-background {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.particle-canvas {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.section-with-particles {
  position: relative;
  overflow: hidden;
}

.section-with-particles .particle-background {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.section-with-particles .section-content {
  z-index: 2;
  position: relative;
}

@keyframes particleFadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.particle-background.animate-in .particle-canvas {
  animation: 1.5s forwards particleFadeIn;
}

.shared-journals-page {
  background: #f8fafc;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px;
}

.shared-journals-page .cta-button {
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border: none;
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.shared-journals-page .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #6d28d94d;
}

.shared-journals-page .cta-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.shared-journals-page .cta-button--primary:hover {
  background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-secondary) 100%);
}

.shared-journals-page .cta-button--secondary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border: 1px solid var(--color-secondary);
}

.shared-journals-page .cta-button--secondary:hover {
  background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-secondary) 100%);
  color: var(--color-primary);
}

.journal-form-section {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000000d;
}

.journal-form {
  padding: 32px;
}

.form-row {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  display: grid;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  color: #374151;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.shared-journals-page .form-input, .shared-journals-page .form-select, .shared-journals-page .form-textarea {
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.shared-journals-page .form-input:focus, .shared-journals-page .form-select:focus, .shared-journals-page .form-textarea:focus {
  border-color: #8b5cf6;
  outline: none;
  box-shadow: 0 0 0 3px #8b5cf61a;
}

.shared-journals-page .form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
}

.formatting-toolbar {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
}

.format-btn {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
  transition: all .2s;
  display: flex;
}

.format-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.format-btn:active {
  background: #e5e7eb;
  transform: translateY(1px);
}

.formatting-help {
  color: #6b7280;
  margin-top: 8px;
  font-size: 12px;
}

.checkbox-group {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.checkbox-label {
  cursor: pointer;
  color: #374151;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  display: flex;
}

.form-checkbox {
  accent-color: #8b5cf6;
  width: 18px;
  height: 18px;
  margin: 0;
}

.help-text {
  color: #6b7280;
  margin-left: 30px;
  font-size: 12px;
}

.form-actions {
  border-top: 1px solid #e5e7eb;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
}

.section-actions {
  justify-content: flex-end;
  margin-bottom: 30px;
  display: flex;
}

.empty-state {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 60px 20px;
  box-shadow: 0 4px 6px #0000000d;
}

.empty-icon {
  margin-bottom: 20px;
  font-size: 48px;
}

.empty-state h3 {
  color: #374151;
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.empty-state p {
  color: #6b7280;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.6;
}

.journals-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  display: grid;
}

.journal-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: transform .2s, box-shadow .2s;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000000d;
}

.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #0000001a;
}

.journal-header {
  border-bottom: 1px solid #f3f4f6;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 16px;
  display: flex;
}

.journal-meta {
  flex: 1;
}

.journal-title {
  color: #111827;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.journal-mood {
  color: #6b7280;
  text-transform: capitalize;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  display: flex;
}

.visibility-badge {
  border-radius: 12px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.visibility-badge.public {
  color: #1e40af;
  background: #dbeafe;
}

.visibility-badge.private {
  color: #92400e;
  background: #fef3c7;
}

.journal-content {
  padding: 16px 20px;
}

.journal-text {
  color: #374151;
  font-size: 15px;
  line-height: 1.6;
}

.journal-text strong {
  color: #111827;
  font-weight: 600;
}

.journal-text em {
  color: #6b7280;
  font-style: italic;
}

.journal-text u {
  color: #059669;
  text-decoration: underline;
}

.journal-text code {
  color: #dc2626;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: Monaco, Menlo, Ubuntu Mono, monospace;
  font-size: 14px;
}

.journal-text li {
  margin: 4px 0;
  padding-left: 8px;
}

.journal-text blockquote {
  color: #6b7280;
  background: #f9fafb;
  border-left: 4px solid #8b5cf6;
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  padding: 12px 16px;
  font-style: italic;
}

.journal-practice-notes {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 16px 20px;
}

.journal-practice-notes strong {
  color: #374151;
  font-size: 14px;
}

.journal-practice-notes p {
  color: #64748b;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.journal-tags {
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  display: flex;
}

.tag {
  color: #3730a3;
  background: #e0e7ff;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
}

.journal-footer {
  background: #fafafa;
  border-top: 1px solid #f1f5f9;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.journal-stats {
  gap: 16px;
  display: flex;
}

.stat {
  color: #6b7280;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  display: flex;
}

.stat-icon {
  font-size: 16px;
}

.journal-actions {
  gap: 8px;
  display: flex;
}

.action-btn {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  transition: all .2s;
  display: flex;
}

.action-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.action-btn.edit:hover {
  color: #1e40af;
  background: #dbeafe;
  border-color: #3b82f6;
}

.action-btn.delete:hover {
  color: #dc2626;
  background: #fee2e2;
  border-color: #ef4444;
}

.journal-timestamp {
  color: #9ca3af;
  text-align: center;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 12px 20px;
  font-size: 12px;
}

@media (width <= 768px) {
  .shared-journals-page {
    padding: 16px;
  }

  .journal-form {
    padding: 20px;
  }

  .form-row, .journals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .journal-header {
    padding: 16px;
  }

  .journal-content {
    padding: 12px 16px;
  }

  .journal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }

  .journal-actions {
    justify-content: center;
  }

  .form-actions {
    flex-direction: column;
  }

  .formatting-toolbar {
    justify-content: center;
  }
}

@media (width <= 480px) {
  .journal-title {
    font-size: 16px;
  }

  .journal-text {
    font-size: 14px;
  }

  .format-btn {
    padding: 6px 8px;
    font-size: 12px;
  }
}

.journal-card.loading {
  opacity: .6;
  pointer-events: none;
}

.journal-card {
  animation: .3s ease-out slideInUp;
}

.format-btn:focus, .action-btn:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
  outline-offset: 2px;
  outline: 2px solid #8b5cf6;
}

.shared-journals-page .formatting-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.shared-journals-page .format-btn {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 12px;
  transition: all .2s;
  display: flex;
}

.shared-journals-page .format-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.shared-journals-page .format-btn:active {
  transform: translateY(1px);
}

.shared-journals-page .formatting-help {
  color: #6b7280;
  margin-top: 8px;
  font-size: 12px;
}

.shared-journals-page .checkbox-group {
  margin-bottom: 24px;
}

.shared-journals-page .checkbox-label {
  cursor: pointer;
  color: #374151;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

.shared-journals-page .form-checkbox {
  accent-color: #8b5cf6;
  width: 18px;
  height: 18px;
  margin: 0;
}

.shared-journals-page .help-text {
  color: #6b7280;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.shared-journals-page .form-actions {
  border-top: 1px solid #e5e7eb;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
}

.shared-journals-page .section-actions {
  justify-content: flex-end;
  margin-bottom: 30px;
  display: flex;
}

.shared-journals-page .empty-state {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 60px 20px;
  box-shadow: 0 4px 6px #0000000d;
}

.shared-journals-page .empty-icon {
  margin-bottom: 20px;
  font-size: 48px;
}

.shared-journals-page .empty-state h3 {
  color: #374151;
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.shared-journals-page .empty-state p {
  color: #6b7280;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.6;
}

.chakra-system {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.chakra-system .hero-section {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
}

.chakra-system .hero-section h1 {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.chakra-system .hero-description {
  color: var(--color-text-secondary);
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.chakra-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  display: grid;
}

.chakra-card {
  color: inherit;
  background: #fff;
  border-top: 4px solid #0000;
  border-radius: 12px;
  text-decoration: none;
  transition: all .3s;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000001a;
}

.chakra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #00000026;
}

.chakra-card-content {
  padding: 1.5rem;
}

.chakra-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
  display: flex;
}

.chakra-header h3 {
  color: var(--color-text-primary);
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
}

.chakra-subtitle {
  color: var(--color-text-secondary);
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.chakra-description {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.chakra-properties {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.location-tag, .element-tag, .color-tag, .mantra-tag {
  border-radius: 15px;
  padding: .25rem .75rem;
  font-size: .8rem;
  font-weight: 500;
}

.location-tag {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.element-tag {
  background: var(--color-success-light);
  color: var(--color-success);
}

.color-tag {
  color: #fff;
  font-weight: 600;
}

.mantra-tag {
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-family: Noto Sans Devanagari, serif;
}

.chakra-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.chakra-detail .back-link {
  color: var(--color-tertiary-dark);
  margin-bottom: 2rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.chakra-detail .back-link:hover {
  text-decoration: underline;
}

.chakra-detail h1 {
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.chakra-meta {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.chakra-type {
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
}

.chakra-subtitle {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 500;
}

.chakra-description {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.chakra-detail section {
  margin-bottom: 2rem;
}

.chakra-detail h3 {
  color: var(--color-text-primary);
  border-bottom: 2px solid #ecf0f1;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

.chakra-content {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}

.chakra-properties {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  padding: 1.5rem;
}

.color-tag {
  color: #fff;
  border-radius: 15px;
  padding: .25rem .75rem;
  font-size: .9rem;
  font-weight: 600;
  display: inline-block;
}

.mantra-tag {
  color: #f39c12;
  background: #fff3cd;
  border-radius: 15px;
  padding: .25rem .75rem;
  font-family: Noto Sans Devanagari, serif;
  font-size: .9rem;
  font-weight: 600;
  display: inline-block;
}

.characteristics-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
  display: grid;
}

.characteristic-group h4 {
  color: #2c3e50;
  margin-bottom: .75rem;
  font-size: 1.1rem;
}

.balanced-list, .imbalanced-list {
  padding: 0;
  list-style: none;
}

.balanced-list li {
  color: #2c3e50;
  background: #e8f5e8;
  border-left: 4px solid #27ae60;
  border-radius: 8px;
  margin-bottom: .5rem;
  padding: .75rem;
}

.imbalanced-list li {
  color: #2c3e50;
  background: #ffeaea;
  border-left: 4px solid #e74c3c;
  border-radius: 8px;
  margin-bottom: .5rem;
  padding: .75rem;
}

.symptoms-list, .practices-list, .poses-list {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

.symptoms-list li, .practices-list li, .poses-list li {
  color: #2c3e50;
  margin-bottom: .75rem;
  line-height: 1.5;
}

.symptoms-list li:last-child, .practices-list li:last-child, .poses-list li:last-child {
  margin-bottom: 0;
}

.healing-tools {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  padding: 1.5rem;
}

.tool-group {
  margin-bottom: 1.5rem;
}

.tool-group:last-child {
  margin-bottom: 0;
}

.tool-group h3 {
  color: #2c3e50;
  border: none;
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1.2rem;
}

.crystal-tags, .oil-tags {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.crystal-tag, .oil-tag {
  color: #2c3e50;
  background: #ecf0f1;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
}

.crystal-tag {
  color: #27ae60;
  background: #e8f5e8;
}

.oil-tag {
  color: #f39c12;
  background: #fff3cd;
}

.chakra-intro {
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 3rem;
  padding: 2rem;
}

.chakra-intro h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.chakra-intro h3 {
  color: #2c3e50;
  margin: 1.5rem 0 .75rem;
  font-size: 1.3rem;
}

.chakra-intro p {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.chakra-overview {
  background: #fff;
  border-radius: 8px;
  margin: 1rem 0;
  padding: 1.5rem;
}

.chakra-level {
  background: #f8f9fa;
  border-radius: 8px;
  align-items: center;
  margin-bottom: 1rem;
  padding: .75rem;
  display: flex;
}

.chakra-level:last-child {
  margin-bottom: 0;
}

.level-number {
  color: #fff;
  background: #9b59b6;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  font-weight: 700;
  display: flex;
}

.level-info {
  color: #2c3e50;
  line-height: 1.4;
}

@media (width <= 768px) {
  .chakra-system {
    padding: 1rem;
  }

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

  .chakra-detail {
    padding: 1rem;
  }

  .chakra-detail h1 {
    font-size: 2rem;
  }

  .chakra-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

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

  .chakra-intro {
    padding: 1.5rem;
  }

  .chakra-overview {
    padding: 1rem;
  }
}

@media (width <= 480px) {
  .chakra-system .hero-section h1 {
    font-size: 2rem;
  }

  .chakra-card-content {
    padding: 1rem;
  }

  .chakra-header {
    flex-direction: column;
    gap: .5rem;
  }

  .chakra-type {
    align-self: flex-start;
  }

  .property-row, .crystal-tags, .oil-tags {
    flex-direction: column;
  }
}

.mudra-library {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.mudra-library .hero-section {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
}

.mudra-library .hero-section h1 {
  color: #2c3e50;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.mudra-library .hero-description {
  color: #7f8c8d;
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.mudra-grid {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  display: grid;
}

.mudra-card {
  color: inherit;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: all .3s;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000001a;
}

.mudra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #00000026;
}

.mudra-card-content {
  padding: 1.5rem;
}

.mudra-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
  display: flex;
}

.mudra-header h3 {
  color: #2c3e50;
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
}

.mudra-subtitle {
  color: #7f8c8d;
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.mudra-description {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.mudra-properties {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.element-tag, .chakra-tag {
  color: #2c3e50;
  background: #ecf0f1;
  border-radius: 15px;
  padding: .25rem .75rem;
  font-size: .8rem;
  font-weight: 500;
}

.mudra-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.mudra-detail .back-link {
  color: #3498db;
  margin-bottom: 2rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.mudra-detail .back-link:hover {
  text-decoration: underline;
}

.mudra-detail h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.mudra-meta {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.mudra-type {
  color: #fff;
  background: #3498db;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
}

.mudra-subtitle {
  color: #7f8c8d;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 500;
}

.mudra-description {
  color: #555;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.mudra-detail section {
  margin-bottom: 2rem;
}

.mudra-detail h3 {
  color: #2c3e50;
  border-bottom: 2px solid #ecf0f1;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

.mudra-content {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}

.benefits-list {
  padding: 0;
  list-style: none;
}

.benefits-list li {
  color: #2c3e50;
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  border-radius: 8px;
  margin-bottom: .75rem;
  padding: 1rem;
}

.technique-list {
  background: #f8f9fa;
  border-left: 4px solid #27ae60;
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

.technique-list li {
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.technique-list li:last-child {
  margin-bottom: 0;
}

.mudra-properties {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  padding: 1.5rem;
}

.mudra-intro {
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 3rem;
  padding: 2rem;
}

.mudra-intro h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.mudra-intro h3 {
  color: #2c3e50;
  margin: 1.5rem 0 .75rem;
  font-size: 1.3rem;
}

.mudra-intro p {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.mudra-intro ul {
  padding-left: 1.5rem;
}

.mudra-intro li {
  color: #555;
  margin-bottom: .5rem;
  line-height: 1.5;
}

@media (width <= 768px) {
  .mudra-library {
    padding: 1rem;
  }

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

  .mudra-detail {
    padding: 1rem;
  }

  .mudra-detail h1 {
    font-size: 2rem;
  }

  .mudra-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .mudra-intro {
    padding: 1.5rem;
  }
}

@media (width <= 480px) {
  .mudra-library .hero-section h1 {
    font-size: 2rem;
  }

  .mudra-card-content {
    padding: 1rem;
  }

  .mudra-header {
    flex-direction: column;
    gap: .5rem;
  }

  .mudra-type {
    align-self: flex-start;
  }
}

.mantra-library {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.mantra-library .hero-section {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
}

.mantra-library .hero-section h1 {
  color: #2c3e50;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.mantra-library .hero-description {
  color: #7f8c8d;
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.mantra-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  display: grid;
}

.mantra-card {
  color: inherit;
  background: #fff;
  border-top: 4px solid #0000;
  border-radius: 12px;
  text-decoration: none;
  transition: all .3s;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000001a;
}

.mantra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px #00000026;
}

.mantra-card-content {
  padding: 1.5rem;
}

.mantra-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
  display: flex;
}

.mantra-header h3 {
  color: #2c3e50;
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
}

.mantra-subtitle {
  color: #7f8c8d;
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 500;
}

.sanskrit-name {
  color: #e74c3c;
  margin-bottom: .75rem;
  font-family: Noto Sans Devanagari, serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.mantra-description {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.mantra-properties {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.property-row {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.pronunciation-tag, .element-tag, .chakra-tag, .frequency-tag {
  border-radius: 15px;
  padding: .25rem .75rem;
  font-size: .8rem;
  font-weight: 500;
}

.pronunciation-tag {
  color: #2980b9;
  background: #e8f4fd;
  font-family: Courier New, monospace;
}

.element-tag {
  color: #27ae60;
  background: #e8f5e8;
}

.chakra-tag {
  color: #f39c12;
  background: #fff3cd;
}

.frequency-tag {
  color: #9b59b6;
  background: #f4e6ff;
}

.mantra-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.mantra-detail .back-link {
  color: #3498db;
  margin-bottom: 2rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.mantra-detail .back-link:hover {
  text-decoration: underline;
}

.mantra-detail h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.mantra-meta {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.mantra-type {
  color: #fff;
  background: #e67e22;
  border-radius: 20px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
}

.sanskrit-name {
  color: #e74c3c;
  font-family: Noto Sans Devanagari, serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.mantra-subtitle {
  color: #7f8c8d;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  font-weight: 500;
}

.mantra-description {
  color: #555;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.mantra-detail section {
  margin-bottom: 2rem;
}

.mantra-detail h3 {
  color: #2c3e50;
  border-bottom: 2px solid #ecf0f1;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

.mantra-content {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}

.mantra-properties {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
  padding: 1.5rem;
}

.property {
  color: #2c3e50;
  margin-bottom: .75rem;
}

.property:last-child {
  margin-bottom: 0;
}

.property strong {
  color: #e67e22;
}

.pronunciation-tag {
  color: #2980b9;
  background: #e8f4fd;
  border-radius: 15px;
  padding: .25rem .75rem;
  font-family: Courier New, monospace;
  font-size: .9rem;
  font-weight: 600;
  display: inline-block;
}

.element-tag {
  color: #27ae60;
  background: #e8f5e8;
  border-radius: 15px;
  padding: .25rem .75rem;
  font-size: .9rem;
  font-weight: 600;
  display: inline-block;
}

.meaning-list li, .benefits-list li {
  color: #2c3e50;
  margin-bottom: .75rem;
  line-height: 1.5;
}

.meaning-list li:last-child, .benefits-list li:last-child {
  margin-bottom: 0;
}

.practice-list {
  background: #f8f9fa;
  border-left: 4px solid #27ae60;
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

.practice-list li {
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.practice-list li:last-child {
  margin-bottom: 0;
}

.mantra-intro {
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 3rem;
  padding: 2rem;
}

.mantra-intro h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.mantra-intro h3 {
  color: #2c3e50;
  margin: 1.5rem 0 .75rem;
  font-size: 1.3rem;
}

.mantra-intro p {
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.mantra-intro ul {
  padding-left: 1.5rem;
}

.mantra-intro li {
  color: #555;
  margin-bottom: .5rem;
  line-height: 1.5;
}

@media (width <= 768px) {
  .mantra-library {
    padding: 1rem;
  }

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

  .mantra-detail {
    padding: 1rem;
  }

  .mantra-detail h1 {
    font-size: 2rem;
  }

  .mantra-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .mantra-intro {
    padding: 1.5rem;
  }
}

@media (width <= 480px) {
  .mantra-library .hero-section h1 {
    font-size: 2rem;
  }

  .mantra-card-content {
    padding: 1rem;
  }

  .mantra-header {
    flex-direction: column;
    gap: .5rem;
  }

  .mantra-type {
    align-self: flex-start;
  }

  .property-row {
    flex-direction: column;
  }
}

.asana-landing-page {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding-bottom: 3rem;
}

.asana-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.asana-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  text-align: center;
  color: var(--color-text-white);
  box-shadow: 0 4px 32px 0 var(--shadow-lg);
  border-radius: 0 0 2rem 2rem;
  margin-bottom: 1.5rem;
  padding: 2.5rem 2rem 1.5rem;
}

.asana-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.asana-hero-title {
  letter-spacing: -1px;
  color: var(--color-text-white);
  text-shadow: 0 2px 8px var(--color-border-light);
  margin-bottom: .75rem;
  font-size: 2.5rem;
  font-weight: 800;
}

.asana-hero-subtitle {
  color: var(--color-tertiary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.asana-hero-intro {
  color: var(--color-tertiary-light);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
}

.asana-filters-section {
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 16px var(--shadow-base);
  background: #fffffff2;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  transition: all .3s;
}

.asana-filters-section:hover {
  box-shadow: 0 4px 24px var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.search-container {
  margin-bottom: 1.25rem;
  position: relative;
}

.search-icon {
  color: var(--color-primary);
  opacity: .7;
  z-index: 1;
  font-size: 1rem;
  transition: opacity .2s;
  position: absolute;
  top: 50%;
  left: .875rem;
  transform: translateY(-50%);
}

.asana-search-input {
  border: 1.5px solid var(--color-primary-light);
  background: var(--color-bg-secondary);
  width: 100%;
  color: var(--color-primary);
  box-shadow: 0 1px 3px var(--shadow-base);
  border-radius: .75rem;
  padding: .75rem .875rem .75rem 2.5rem;
  font-size: .95rem;
  transition: all .2s;
}

.asana-search-input:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 0 0 3px var(--shadow-lg);
  outline: none;
}

.asana-search-input::placeholder {
  color: var(--color-text-secondary);
  font-size: .9rem;
}

.filters-container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: .75rem;
  display: grid;
}

.filter-group {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.filter-label {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .25rem;
  font-size: .8rem;
  font-weight: 600;
}

.filter-dropdown {
  border: 1.5px solid var(--color-primary-light);
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 1px 2px var(--shadow-base);
  appearance: none;
  background-image: none;
  border-radius: .75rem;
  padding: .75rem 2.5rem .75rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  transition: all .2s;
}

.filter-dropdown:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 2px 8px var(--shadow-lg);
}

.filter-dropdown:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-primary);
  box-shadow: 0 0 0 3px var(--shadow-lg);
  outline: none;
}

.filter-dropdown option {
  background: var(--color-bg-primary);
  color: var(--color-primary);
  padding: .5rem;
}

.filters-row {
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: .75rem;
  display: flex;
}

.filter-buttons {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.filter-btn {
  border: 1.5px solid var(--color-primary-light);
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px var(--shadow-base);
  border-radius: .75rem;
  padding: .5rem .875rem;
  font-size: .85rem;
  font-weight: 500;
  transition: all .2s;
}

.filter-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 2px 8px var(--shadow-lg);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-white);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px var(--shadow-lg);
  font-weight: 600;
}

.filters-actions {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.reset-filters-btn {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-light);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: .75rem;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  transition: all .2s;
}

.reset-filters-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-medium);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.results-info {
  color: var(--color-text-secondary);
  font-size: .9rem;
  font-weight: 500;
}

.asana-cards-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
  display: grid;
}

.asana-card {
  background: var(--color-bg-primary);
  box-shadow: 0 4px 32px 0 var(--shadow-base);
  border: 1px solid var(--color-primary-light);
  border-radius: 1.5rem;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.asana-card:hover {
  box-shadow: 0 8px 32px 0 var(--shadow-lg);
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

.asana-card-header {
  margin-bottom: 1.5rem;
}

.asana-card-title {
  color: var(--color-primary);
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.asana-card-sanskrit {
  color: var(--color-secondary);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
}

.asana-card-badges {
  flex-wrap: wrap;
  gap: .75rem;
  display: flex;
}

.asana-type-badge, .asana-level-badge {
  border: 1px solid;
  border-radius: .75rem;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
}

.asana-type-badge {
  background: linear-gradient(135deg, var(--color-tertiary-light) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-white);
  border-color: var(--color-primary-light);
}

.asana-level-badge {
  background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%);
  color: var(--color-text-white);
  border-color: var(--color-warning);
}

.asana-card-content {
  flex: 1;
  margin-bottom: 1.5rem;
}

.asana-card-description {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.asana-card-benefits {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-primary-light);
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

.asana-card-benefits h4 {
  color: var(--color-primary);
  margin-bottom: .75rem;
  font-size: 1rem;
  font-weight: 600;
}

.asana-card-benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.asana-card-benefits li {
  color: var(--color-text-secondary);
  margin-bottom: .5rem;
  padding-left: 1.25rem;
  font-size: .9rem;
  line-height: 1.5;
  position: relative;
}

.asana-card-benefits li:before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.asana-card-focus {
  margin-bottom: 1rem;
}

.asana-card-focus h4 {
  color: var(--color-primary);
  margin-bottom: .75rem;
  font-size: 1rem;
  font-weight: 600;
}

.focus-areas-tags {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.focus-area-tag {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-tertiary-light) 100%);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: .75rem;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
}

.asana-card-footer {
  margin-top: auto;
}

.asana-card-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  width: 100%;
  color: var(--color-text-white);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--shadow-lg);
  border: none;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all .2s;
}

.asana-card-cta:hover {
  box-shadow: 0 6px 20px var(--shadow-xl);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary) 100%);
  transform: translateY(-2px);
}

.asana-pagination {
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  display: flex;
}

.pagination-btn {
  color: #667eea;
  cursor: pointer;
  background: #fffffffa;
  border: 2px solid #e0e7ff;
  border-radius: 1rem;
  padding: .75rem 1.5rem;
  font-size: .95rem;
  font-weight: 600;
  transition: all .2s;
}

.pagination-btn:hover:not(.disabled) {
  background: #ede9fe;
  border-color: #a5b4fc;
  transform: translateY(-2px);
}

.pagination-btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  color: #9ca3af;
}

.pagination-info {
  color: #6b7280;
  font-size: .95rem;
  font-weight: 500;
}

.no-results {
  text-align: center;
  background: var(--color-bg-primary);
  box-shadow: 0 4px 32px 0 var(--shadow-base);
  border: 1px solid var(--color-primary-light);
  border-radius: 1.5rem;
  padding: 4rem 2rem;
}

.no-results-icon {
  margin-bottom: 1rem;
  font-size: 4rem;
}

.no-results h3 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.no-results p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

@media (width <= 768px) {
  .asana-hero {
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 2rem 1rem 1rem;
  }

  .asana-hero-title {
    font-size: 2rem;
  }

  .asana-hero-subtitle {
    font-size: 1rem;
  }

  .asana-hero-intro {
    font-size: .95rem;
  }

  .asana-container {
    padding: 0 .5rem;
  }

  .asana-filters-section {
    padding: 1.5rem;
  }

  .filters-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .filters-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .asana-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .asana-card {
    padding: 1.5rem;
  }

  .asana-card-badges {
    gap: .5rem;
  }

  .focus-areas-tags {
    gap: .4rem;
  }

  .asana-pagination {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (width <= 480px) {
  .asana-hero-title {
    font-size: 1.8rem;
  }

  .asana-hero-subtitle {
    font-size: .95rem;
  }

  .asana-hero-intro {
    font-size: .9rem;
  }

  .asana-filters-section {
    padding: 1rem;
  }

  .asana-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .asana-card {
    padding: 1rem;
  }

  .asana-card-title {
    font-size: 1.3rem;
  }

  .asana-card-sanskrit {
    font-size: .9rem;
  }

  .asana-card-description {
    font-size: .95rem;
  }

  .asana-card-benefits li {
    font-size: .85rem;
  }

  .focus-area-tag {
    padding: .3rem .6rem;
    font-size: .8rem;
  }
}

.asana-detail {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  min-height: 100vh;
  padding-bottom: 3rem;
}

.asana-detail-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  text-align: center;
  color: var(--color-text-white);
  box-shadow: 0 4px 32px 0 var(--shadow-base);
  border-radius: 0 0 2rem 2rem;
  margin-bottom: 1.5rem;
  padding: 2.5rem 2rem 1.5rem;
}

.asana-detail-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.asana-detail-hero-title {
  letter-spacing: -1px;
  color: var(--color-text-white);
  text-shadow: 0 2px 8px var(--color-border-light);
  margin-bottom: .75rem;
  font-size: 2.5rem;
  font-weight: 800;
}

.asana-detail-hero-subtitle {
  color: var(--color-tertiary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.asana-detail-meta {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-bottom: .5rem;
  display: flex;
}

.asana-meta-badge {
  backdrop-filter: blur(8px);
  background: #fff3;
  border-radius: .75rem;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
}

.asana-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.asana-detail-back-link {
  color: var(--color-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 2px 8px var(--shadow-base);
  border-radius: 1rem;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.asana-detail-back-link:hover {
  background: var(--color-bg-secondary);
  box-shadow: 0 4px 16px var(--shadow-lg);
  transform: translate(-4px);
}

.asana-detail-content {
  background: var(--color-bg-primary);
  box-shadow: 0 4px 32px 0 var(--shadow-base);
  border: 1px solid var(--color-primary-light);
  border-radius: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem;
}

.asana-detail-description {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.asana-sections {
  gap: 2rem;
  display: grid;
}

.asana-section {
  background: var(--color-bg-primary);
  box-shadow: 0 4px 24px 0 var(--shadow-base);
  border: 1.5px solid var(--color-primary-light);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.asana-section:hover {
  box-shadow: 0 8px 32px 0 var(--shadow-lg);
  border-color: var(--color-primary);
}

.asana-section h3 {
  color: var(--color-primary);
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
}

.asana-section h3:before {
  content: "";
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: 2px;
  width: 4px;
  height: 1.5rem;
}

.asana-list, .asana-instructions, .asana-modifications {
  margin: 0;
  padding: 0;
  list-style: none;
}

.asana-list li, .asana-modifications li {
  border-bottom: 1px solid var(--color-bg-secondary);
  color: var(--color-text-secondary);
  padding: .75rem 0 .75rem 1.5rem;
  line-height: 1.6;
  position: relative;
}

.asana-list li:last-child, .asana-modifications li:last-child {
  border-bottom: none;
}

.asana-list li:before, .asana-modifications li:before {
  content: "✓";
  color: var(--color-success);
  font-size: 1.1rem;
  font-weight: 700;
  position: absolute;
  left: 0;
}

.asana-instructions li {
  border-bottom: 1px solid var(--color-bg-secondary);
  color: var(--color-text-secondary);
  counter-increment: instruction-counter;
  padding: .75rem 0 .75rem 2rem;
  line-height: 1.6;
  position: relative;
}

.asana-instructions li:last-child {
  border-bottom: none;
}

.asana-instructions li:before {
  content: counter(instruction-counter);
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  position: absolute;
  left: 0;
}

.asana-instructions {
  counter-reset: instruction-counter;
}

.asana-contraindications {
  background: var(--color-error-light);
  border: 1px solid var(--color-border-error);
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1.5rem;
}

.asana-contraindications p {
  color: var(--color-error);
  margin-bottom: 1rem;
  font-weight: 600;
}

.asana-contraindications .asana-list li:before {
  color: var(--color-error);
}

.asana-focus-areas {
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
  display: flex;
}

.asana-category {
  color: var(--color-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-block;
}

@media (width <= 768px) {
  .asana-detail-hero {
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 2rem 1rem 1rem;
  }

  .asana-detail-hero-title {
    font-size: 2rem;
  }

  .asana-detail-hero-subtitle {
    font-size: 1rem;
  }

  .asana-detail-container {
    padding: 0;
  }

  .asana-detail-content, .asana-section {
    border-radius: 1rem;
    padding: 1.5rem;
  }

  .asana-detail-meta {
    gap: .5rem;
  }

  .asana-meta-badge {
    padding: .3rem .6rem;
    font-size: .8rem;
  }

  .asana-focus-areas {
    gap: .5rem;
  }
}

@media (width <= 480px) {
  .asana-detail-hero-title {
    font-size: 1.8rem;
  }

  .asana-detail-hero-subtitle {
    font-size: .95rem;
  }

  .asana-detail-content, .asana-section {
    padding: 1rem;
  }

  .asana-section h3 {
    font-size: 1.2rem;
  }

  .asana-list li, .asana-instructions li, .asana-modifications li {
    padding-left: 1.2rem;
    font-size: .95rem;
  }

  .asana-instructions li:before {
    width: 1.2rem;
    height: 1.2rem;
    font-size: .8rem;
  }

  .asana-focus-areas {
    gap: .4rem;
  }

  .focus-area-tag {
    padding: .3rem .6rem;
    font-size: .8rem;
  }
}

.asana-detail {
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-light) 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.asana-detail:before {
  content: "";
  opacity: .2;
  z-index: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.floating-elements {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.floating-element {
  opacity: .2;
  filter: blur(10px);
  border-radius: 50%;
  position: absolute;
}

.element-1 {
  background: var(--color-primary-light);
  width: 150px;
  height: 150px;
  animation: 8s ease-in-out infinite asanasFloat;
  top: 20%;
  left: 10%;
}

.element-2 {
  background: var(--color-secondary);
  width: 100px;
  height: 100px;
  animation: 6s ease-in-out infinite reverse asanasFloat;
  top: 60%;
  right: 15%;
}

.element-3 {
  background: var(--color-primary);
  width: 80px;
  height: 80px;
  animation: 10s ease-in-out infinite asanasFloat;
  bottom: 10%;
  left: 30%;
}

.asana-detail-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  min-height: 40vh;
  color: var(--color-text-white);
  padding: var(--space-24);
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #0000001a;
}

.asana-detail-hero:before {
  content: "";
  opacity: .2;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"rgba(255,255,255,0.1)\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>");
  position: absolute;
  inset: 0;
}

.asana-detail-hero-content {
  text-align: center;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  animation: .8s ease-out both asanasFadeInUp;
}

.asana-detail-hero-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 4px 8px #0000004d;
  line-height: 1.1;
}

.asana-detail-hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  opacity: .95;
  text-shadow: 0 2px 4px #0003;
  font-style: italic;
}

.asana-detail-meta {
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
}

.asana-meta-badge {
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  background: #fff3;
  border: 1px solid #ffffff4d;
}

.asana-detail-container {
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.asana-detail-back-link {
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-8);
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
}

.asana-detail-back-link:hover {
  color: var(--color-primary-dark);
  transform: translate(-4px);
}

.asana-detail-back-link svg {
  width: 20px;
  height: 20px;
}

.asana-detail-content {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  gap: var(--space-6);
  background: #ffffffd9;
  border: 1px solid #ffffff4d;
  flex-direction: column;
  animation: .6s ease-out .2s both asanasFadeInUp;
  display: flex;
  box-shadow: 0 10px 30px #00000014, 0 5px 15px #0000000a, inset 0 1px #fff9;
}

@media (width >= 768px) {
  .asana-detail-content {
    flex-direction: row;
    align-items: center;
  }
}

.asana-detail-image-container {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  display: flex;
  position: relative;
}

.asana-detail-image {
  border-radius: var(--radius-lg);
  object-fit: cover;
  max-width: 100%;
  max-height: 400px;
  box-shadow: 0 10px 30px #0000001a;
}

.asana-image-placeholder {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 300px;
  color: var(--color-text-secondary);
  background: #ffffff80;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.asana-image-placeholder svg {
  opacity: .6;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.asana-image-placeholder p {
  font-size: var(--font-size-sm);
  font-style: italic;
}

.spinner {
  border: 4px solid rgba(var(--color-primary-rgb), .3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 1s linear infinite spin;
}

.asana-detail-description {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  padding: var(--space-4);
  flex: 1;
}

.asana-tabs {
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.asana-tab {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--color-primary-rgb), .2);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
  background: #ffffffb3;
  transition: all .3s;
  display: flex;
}

.asana-tab:hover {
  color: var(--color-primary);
  background: #ffffffe6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000000d;
}

.asana-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .2);
  transform: translateY(-2px);
}

.asana-tab svg {
  font-size: 1.2em;
}

.asana-sections {
  margin-bottom: var(--space-12);
}

.asana-section {
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: #ffffffbf;
  border: 1px solid #ffffff4d;
  transition: all .3s;
  box-shadow: 0 10px 30px #0000000d, 0 5px 15px #00000008, inset 0 1px #fff9;
}

.asana-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px #00000014, 0 10px 20px #0000000d, inset 0 1px #fff9;
}

.asana-section h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-light);
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.asana-section h3 svg {
  color: var(--color-primary);
}

.asana-section h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.asana-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.asana-list li {
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  position: relative;
}

.asana-list li:before {
  content: "✓";
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  position: absolute;
  left: 0;
}

.asana-instructions {
  padding-left: var(--space-6);
  margin: 0;
}

.asana-instructions li {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  position: relative;
}

.asana-instructions li::marker {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.asana-tip {
  background: rgba(var(--color-info-rgb), .1);
  border-left: 4px solid var(--color-info);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  margin-top: var(--space-6);
}

.asana-tip h4 {
  color: var(--color-info);
  margin-bottom: var(--space-2);
}

.asana-tip p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.asana-benefit-categories {
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.benefit-category {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  text-align: center;
  background: #ffffff80;
  border: 1px solid #ffffff4d;
  transition: all .3s;
}

.benefit-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px #0000000d;
}

.benefit-category h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.benefit-category p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.asana-precautions {
  background: rgba(var(--color-warning-rgb), .1);
  border-left: 4px solid var(--color-warning);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  margin-top: var(--space-4);
}

.asana-precautions p {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.asana-safety-note {
  background: rgba(var(--color-warning-rgb), .05);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  margin-top: var(--space-4);
  border: 1px dashed var(--color-warning);
}

.asana-safety-note h4 {
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.asana-safety-note p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.asana-details-grid {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.asana-detail-item {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  text-align: center;
  background: #ffffff80;
  border: 1px solid #ffffff4d;
  transition: all .3s;
}

.asana-detail-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px #0000000d;
}

.asana-detail-item h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.asana-detail-item p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.asana-related {
  margin-top: var(--space-8);
}

.asana-related h4 {
  margin-bottom: var(--space-4);
  text-align: center;
}

.asana-related-poses {
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.related-pose {
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  flex-direction: column;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.related-pose:hover {
  transform: translateY(-3px);
}

.related-pose-icon {
  background: var(--color-primary-light);
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: var(--font-size-xl);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 4px 10px #0000001a;
}

.related-pose p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.asana-detail-actions {
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  display: flex;
}

.asana-detail-actions .btn {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  transition: all .3s;
  box-shadow: 0 4px 10px #0000001a;
}

.asana-detail-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px #00000026;
}

.asana-next-button, .asana-favorite-button {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 10px #0000001a;
}

.asana-next-button {
  background: var(--color-primary);
  color: #fff;
  border: none;
}

.asana-favorite-button {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: #fff;
}

.asana-next-button:hover, .asana-favorite-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px #00000026;
}

@media (width <= 768px) {
  .asana-detail-hero {
    padding: var(--space-12) var(--space-4);
    min-height: 30vh;
  }

  .asana-detail-hero-title {
    font-size: var(--font-size-3xl);
  }

  .asana-detail-hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .asana-detail-container {
    padding: 0;
  }

  .asana-sections {
    grid-template-columns: 1fr;
  }
}

@media (width <= 480px) {
  .asana-detail-hero {
    padding: var(--space-8) var(--space-4);
    min-height: 25vh;
  }

  .asana-detail-hero-title {
    font-size: var(--font-size-2xl);
  }

  .asana-detail-meta {
    flex-wrap: wrap;
  }

  .asana-detail-content, .asana-section {
    padding: var(--space-4);
  }
}

.container {
  max-width: 1200px;
  padding: var(--space-4) var(--space-16) 0 var(--space-16);
  margin: 0 auto;
}

.home-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (width <= 768px) {
  .home-container {
    padding: 0 1rem;
  }
}

.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  transition: all .3s;
}

.btn-primary {
  color: #fff;
  background-color: #6d28d9;
}

.btn-primary:hover {
  background-color: #5b21b6;
}

.btn-apple {
  color: #fff;
  background-color: #111;
}

.btn-google {
  color: #fff;
  background-color: #ea4335;
}

.btn-bypass {
  color: #fff;
  background-color: #64748b;
  margin-top: 16px;
}

.cta-button {
  cursor: pointer;
  border: none;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px #6d28d933;
}

.cta-button:before {
  content: "";
  background: linear-gradient(90deg, #0000, #fff3, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}

.cta-button:hover:before {
  left: 100%;
}

.cta-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.cta-button--primary:hover {
  background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-secondary) 100%);
}

.cta-button--secondary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border: 1px solid var(--color-secondary);
}

.cta-button--secondary:hover {
  background: #f3e8ff;
}

.cta-button-large {
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  transition: all .3s;
  display: inline-flex;
  box-shadow: 0 8px 25px #ff6b6b4d;
}

.cta-button-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px #ff6b6b66;
}

.subscribe-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}

.subscribe-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #6d28d94d;
}

.subscribe-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.buy-now-button {
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.buy-now-button.primary {
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  box-shadow: 0 4px 16px #ff6b6b66;
}

.buy-now-button.primary:hover {
  background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #ff6b6b99;
}

.buy-now-button.secondary {
  color: #fff;
  background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
  box-shadow: 0 4px 16px #00b89466;
}

.buy-now-button.secondary:hover {
  background: linear-gradient(135deg, #00a085 0%, #008f7a 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #00b89499;
}

.close-btn {
  color: #fff;
  cursor: pointer;
  background: #6b7280;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s;
}

.close-btn:hover:not(:disabled) {
  background-color: #4b5563;
}

.close-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

@media (width <= 768px) {
  .cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .cta-button-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
  }

  .buy-now-button {
    padding: .875rem 2rem;
    font-size: 1rem;
  }
}

@media (width <= 480px) {
  .cta-button {
    padding: .875rem 1.5rem;
    font-size: .9rem;
  }

  .buy-now-button {
    padding: .75rem 1.5rem;
    font-size: .9rem;
  }
}

.back-button {
  border: 1.5px solid var(--color-primary);
  color: var(--china-rose);
  cursor: pointer;
  margin-top: var(--space-8);
  background: #fff;
  border-radius: .75rem;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  position: relative;
  box-shadow: 0 1px 3px #667eea0a;
}

.resource-detail-page .back-button {
  margin-top: 0;
  margin-bottom: var(--space-8);
  margin-left: var(--space-8);
}

.back-button:before {
  content: "←";
  margin-right: .5rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-block;
}

.back-button:hover {
  border-color: var(--color-primary-lighter);
  color: var(--china-rose);
  background: #f8fafc;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #667eea1f;
}

.back-button .back-arrow {
  font-size: 1.1rem;
  font-weight: 600;
}

.back-button .back-text {
  font-weight: 500;
}

.lesson-back-link, .lesson-detail-back-link, .asana-detail-back-link, .course-detail-back-link, .philosophy-detail-back-link, .mudra-detail-back-link, .chakra-detail-back-link, .mantra-detail-back-link, .ayurveda-detail-back-link, .meditation-detail-back-link, .history-detail-back-link, .anatomy-detail-back-link, .teaching-detail-back-link, .workbook-detail-back-link, .medicine-detail-back-link {
  color: var(--color-primary);
  cursor: pointer;
  border: 1px solid var(--china-rose);
  background: #fff;
  border-radius: .75rem;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  padding: .75rem 1.25rem;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  position: relative;
  box-shadow: 0 1px 3px #667eea0a;
}

.lesson-back-link:before, .lesson-detail-back-link:before, .asana-detail-back-link:before, .course-detail-back-link:before, .philosophy-detail-back-link:before, .mudra-detail-back-link:before, .chakra-detail-back-link:before, .mantra-detail-back-link:before, .ayurveda-detail-back-link:before, .meditation-detail-back-link:before, .history-detail-back-link:before, .anatomy-detail-back-link:before, .teaching-detail-back-link:before, .workbook-detail-back-link:before, .medicine-detail-back-link:before {
  content: "←";
  margin-right: .5rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-block;
}

.lesson-back-link:hover, .lesson-detail-back-link:hover, .asana-detail-back-link:hover, .course-detail-back-link:hover, .philosophy-detail-back-link:hover, .mudra-detail-back-link:hover, .chakra-detail-back-link:hover, .mantra-detail-back-link:hover, .ayurveda-detail-back-link:hover, .meditation-detail-back-link:hover, .history-detail-back-link:hover, .anatomy-detail-back-link:hover, .teaching-detail-back-link:hover, .workbook-detail-back-link:hover, .medicine-detail-back-link:hover {
  color: #3730a3;
  background: #f8fafc;
  border-color: #a5b4fc;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #667eea1f;
}

@keyframes wave {
  0%, to {
    transform: translate(-50%)translateY(0);
  }

  50% {
    transform: translate(-50%)translateY(-20px);
  }
}

@keyframes homeFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes homeGrain {
  0%, to {
    transform: translate(0);
  }

  50% {
    transform: translate(10px, 10px);
  }
}

@keyframes homePulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes homeBounce {
  0%, 20%, 50%, 80%, to {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

@keyframes homeSlideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes homeGrowBranch {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes homeMusclePulse {
  0%, to {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes homeSpotlight {
  0%, to {
    opacity: .5;
    transform: translate(-50%)scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%)scale(1.1);
  }
}

@keyframes homeStudentAttention {
  0%, to {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes homeChakraSpin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes homeRayExpand {
  0% {
    opacity: .5;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  to {
    opacity: .8;
    transform: scale(1);
  }
}

@keyframes homeBreathWave {
  0%, to {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes homeConsciousnessFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  25% {
    transform: translateY(-5px)rotate(1deg);
  }

  50% {
    transform: translateY(-10px)rotate(0);
  }

  75% {
    transform: translateY(-5px)rotate(-1deg);
  }
}

@keyframes communityFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes communityPulse {
  0%, to {
    opacity: 1;
  }

  50% {
    opacity: .7;
  }
}

@keyframes communitySlideInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes communityCountUp {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes communityFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes communityFadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes communitySlideInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timelineGlow {
  0% {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), .3);
  }

  to {
    box-shadow: 0 0 30px rgba(var(--color-primary-rgb), .5);
  }
}

@keyframes timelinePulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes expandContent {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lessonsFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes lessonsFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lessonsSpin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes lessonsPulse {
  0%, to {
    opacity: 1;
  }

  50% {
    opacity: .7;
  }
}

@keyframes lessonsFadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes meditationPulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationShimmer {
  0%, to {
    opacity: .8;
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationParticleFloat {
  0%, to {
    opacity: .3;
    transform: translateY(0)translate(0)scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationBreatheIn {
  0%, to {
    opacity: .8;
    transform: translate(-50%, -50%)scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationBreatheOut {
  0%, to {
    opacity: .5;
    transform: translate(-50%, -50%)scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationPulseMeditation {
  0%, to {
    opacity: .08;
    border-color: var(--cherry-blossom-pink);
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes meditationFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes profileFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes profileSpin {
  0% {
    transform: rotate(0);
  }

  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}

@keyframes profileFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes profileSlideInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes notfoundFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes notfoundFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes workbooksFloat {
  0%, to {
    transform: translateY(0);
  }
}

@keyframes ayurvedaNatureFlow {
  0%, to {
    opacity: .3;
    transform: scale(1)rotate(0);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes ayurvedaTitleGrowth {
  0%, to {
    filter: brightness() hue-rotate();
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes ayurvedaHealingFlow {
  0%, to {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ayurvedaTitlePulse {
  0%, to {
    opacity: .8;
    width: 60px;
  }

  50% {
    opacity: 1;
    width: 80px;
  }
}

@keyframes ayurvedaElementFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes ayurvedaDoshaPulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes ayurvedaCardHealing {
  0%, to {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ayurvedaSanskritGlow {
  0%, to {
    box-shadow: 0 0 10px #2d501633;
  }

  50% {
    box-shadow: 0 0 20px #2d501666;
  }
}

@keyframes chakrasEnergyFlow {
  0%, to {
    opacity: .3;
    transform: scale(1);
  }

  50% {
    opacity: .6;
    transform: scale(1.05);
  }
}

@keyframes chakrasTitleGlow {
  0% {
    opacity: .8;
  }

  to {
    opacity: 1;
  }
}

@keyframes chakrasTitleUnderline {
  0% {
    opacity: .5;
  }

  to {
    opacity: 1;
  }
}

@keyframes chakrasPulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes asanasFadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mantrasSoundWaves {
  0%, to {
    opacity: .3;
    transform: scale(1)rotate(0);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes mantrasTitleResonance {
  0%, to {
    filter: brightness() hue-rotate();
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

@keyframes mantrasHealingFlow {
  0%, to {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes mantrasTitlePulse {
  0%, to {
    opacity: .8;
    width: 60px;
  }

  50% {
    opacity: 1;
    width: 80px;
  }
}

@keyframes mantrasIconFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes mantrasCardHealing {
  0%, to {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes mantrasSanskritGlow {
  0%, to {
    box-shadow: 0 0 10px #e9456033;
  }

  50% {
    box-shadow: 0 0 20px #e9456066;
  }
}

@keyframes coursesFloat {
  0%, to {
    transform: translateY(0)rotate(0);
  }

  50% {
    transform: translateY(-10px)rotate(2deg);
  }
}

@keyframes coursesFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coursesFadeIn {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes medicinePulse {
  0%, to {
    opacity: .8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes teachingFloat {
  0%, to {
    transform: translateY(0);
  }
}

@keyframes resourcesFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes resourcesFloat {
  0%, to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px)scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes growBranch {
  0% {
    transform: scaleX(0);
  }

  50% {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes musclePulse {
  0%, to {
    opacity: .3;
  }

  50% {
    opacity: .7;
  }
}

@keyframes spotlight {
  0%, to {
    opacity: .5;
    transform: translate(-50%)scale(1);
  }

  50% {
    opacity: .8;
    transform: translate(-50%)scale(1.1);
  }
}

@keyframes studentAttention {
  0%, to {
    opacity: .3;
  }

  50% {
    opacity: .7;
  }
}

@keyframes chakraSpin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rayExpand {
  0% {
    opacity: .5;
    transform: translate(-50%, -50%)scale(.8);
  }

  50% {
    opacity: .8;
    transform: translate(-50%, -50%)scale(1.2);
  }

  to {
    opacity: .5;
    transform: translate(-50%, -50%)scale(.8);
  }
}

@keyframes breathWave {
  0% {
    opacity: .3;
    transform: scale(.8);
  }

  50% {
    opacity: .7;
    transform: scale(1.2);
  }

  to {
    opacity: .3;
    transform: scale(.8);
  }
}

@keyframes consciousnessFloat {
  0%, to {
    opacity: .5;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

@keyframes autoScrollPulse {
  0%, to {
    opacity: .3;
    transform: translate(-50%)scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%)scale(1.2);
  }
}

.btn-pulse:hover {
  animation: 1.5s infinite pulse;
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine:before {
  content: "";
  background: linear-gradient(120deg, #0000, #fff6, #0000);
  width: 100%;
  height: 100%;
  transition: all .6s;
  position: absolute;
  top: 0;
  left: -100%;
}

.btn-shine:hover:before {
  left: 100%;
}

.card-lift-glow:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px #0000001a, 0 0 15px #6629324d;
}

.card-border-animate {
  position: relative;
}

.card-border-animate:before, .card-border-animate:after {
  content: "";
  background: var(--color-primary);
  width: 0;
  height: 2px;
  transition: width .3s ease-out;
  position: absolute;
}

.card-border-animate:before {
  top: 0;
  left: 0;
}

.card-border-animate:after {
  bottom: 0;
  right: 0;
}

.card-border-animate:hover:before, .card-border-animate:hover:after {
  width: 100%;
}

.img-zoom-pan {
  overflow: hidden;
}

.img-zoom-pan img {
  transition: transform 10s ease-in-out;
}

.img-zoom-pan:hover img {
  transform: scale(1.2)translate(5%, -5%);
}

.mandala-container {
  perspective: 1000px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mandala {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform .5s;
  position: relative;
}

.mandala:hover {
  transform: rotateY(10deg)rotateX(10deg);
}

.mandala-layer {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  transition: transform .5s;
  position: absolute;
}

.mandala-layer-1 {
  transform: translateZ(20px);
}

.mandala-layer-2 {
  transform: translateZ(40px)rotate(45deg);
}

.mandala-layer-3 {
  transform: translateZ(60px)rotate(90deg);
}

.text-underline-center {
  display: inline-block;
  position: relative;
}

.text-underline-center:after {
  content: "";
  background: var(--color-secondary);
  width: 0;
  height: 2px;
  transition: all .3s ease-in-out;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
}

.text-underline-center:hover:after {
  width: 100%;
}

:root {
  --color-primary: #9d8189;
  --color-primary-light: #ae6a7e;
  --color-primary-lighter: #f4acb7;
  --color-primary-dark: #9d8189;
  --color-secondary: #ff9494;
  --color-secondary-light: #ffc2c2;
  --color-secondary-dark: #ff5c5c;
  --color-tertiary: #a2d2ff;
  --color-tertiary-light: #bde0fe;
  --color-tertiary-dark: #339cff;
  --color-tertiary-darker: #135696;
  --color-secondary-old: #ffbe4d;
  --color-bg-primary: #fdfcfa;
  --color-bg-secondary: #f5f3f0;
  --color-text-primary: #2c2c2c;
  --color-text-secondary: #6b6b6b;
  --color-text-white: #fff;
  --color-border-light: #e5e5e5;
  --color-border-medium: #d1d1d1;
  --font-family-primary: "Inter", sans-serif;
  --font-family-heading: "Playfair Display", serif;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: .025em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: .25rem;
  --radius-base: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 #0000000d;
  --shadow-base: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
  --transition-fast: .15s ease-in-out;
  --transition-base: .3s ease-in-out;
  --transition-slow: .5s ease-in-out;
  --platinum: #d8e2dc;
  --champagne-pink: #ffe5d9;
  --sunset: #ffd293;
  --xanthous: #ffbe4d;
  --misty-rose: #ffd8d7;
  --pink: #271e1f;
  --cherry-blossom-pink: #f4acb7;
  --mountbatten-pink: #9d8189;
  --china-rose: #ae6a7e;
  --china-rose-2: #915063;
  --color-error: #d84646;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-info: #1d4ed8;
  --color-success-light: #f0fdf4;
  --color-error-light: #fef2f2;
  --color-warning-light: #fffbeb;
  --color-info-light: #eff6ff;
  --color-border-success: #bbf7d0;
  --color-border-error: #fecaca;
  --color-border-info: #bfdbfe;
  --color-border-warning: #fed7aa;
  --color-overlay: #00000080;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
}

.app {
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

.main-content {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.content-wrapper {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}