@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap");:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.alert {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid;
  margin: 1rem 0;
}
.alert__content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.alert__icon {
  font-size: 1.25rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.alert__message {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
}
.alert__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.alert__close:hover {
  opacity: 1;
}
.alert--success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.alert--success .alert__icon {
  color: #16a34a;
}
.alert--error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.alert--error .alert__icon {
  color: #dc2626;
}
.alert--warning {
  background-color: #fefce8;
  border-color: #fde68a;
  color: #92400e;
}
.alert--warning .alert__icon {
  color: #d97706;
}
.alert--info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.alert--info .alert__icon {
  color: #2563eb;
}/**
 * Avatar Component Styles
 * Flexible avatar component for user profiles and images
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-600);
}
.avatar--xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}
.avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}
.avatar--md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}
.avatar--lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
}
.avatar--xl {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}
.avatar--xxl {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
}
.avatar--circle {
  border-radius: 50%;
}
.avatar--square {
  border-radius: 0;
}
.avatar--rounded {
  border-radius: 0.5rem;
}
.avatar__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 150ms ease-in-out;
  opacity: 0;
}
.avatar__image--loaded {
  opacity: 1;
}
.avatar__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.avatar__default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar__icon {
  width: 60%;
  height: 60%;
  opacity: 0.6;
}
.avatar--with-status .avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  border: 2px solid white;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar--with-status--xs .avatar__status {
  width: 30%;
  height: 30%;
}
.avatar--with-status--sm .avatar__status {
  width: 28%;
  height: 28%;
}
.avatar--with-status--md .avatar__status {
  width: 25%;
  height: 25%;
}
.avatar--with-status--lg .avatar__status {
  width: 22%;
  height: 22%;
}
.avatar--with-status--xl .avatar__status {
  width: 20%;
  height: 20%;
}
.avatar--with-status--xxl .avatar__status {
  width: 18%;
  height: 18%;
}
.avatar__status-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-success-500);
}
.avatar__status--success .avatar__status-dot {
  background-color: var(--color-success-500);
}
.avatar__status--warning .avatar__status-dot {
  background-color: var(--color-warning-500);
}
.avatar__status--error .avatar__status-dot {
  background-color: var(--color-error-500);
}
.avatar__status--info .avatar__status-dot {
  background-color: var(--color-info-500);
}
.avatar__status--neutral .avatar__status-dot {
  background-color: var(--color-neutral-500);
}
.avatar--animated {
  transition: all 150ms ease-in-out;
}
.avatar--animated:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.avatar--clickable {
  cursor: pointer;
}
.avatar--clickable:hover {
  opacity: 0.8;
}
.avatar--clickable:active {
  transform: scale(0.95);
}
.avatar--interactive {
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.avatar--interactive:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.avatar--interactive:active {
  transform: scale(0.95);
}
.avatar--group {
  margin-left: -0.5rem;
  border: 2px solid white;
}
.avatar--group:first-child {
  margin-left: 0;
}
@media (max-width: 479px) {
  .avatar--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .avatar--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .avatar--hidden-desktop {
    display: none;
  }
}
.avatar--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .avatar--visible-mobile {
    display: inline-flex;
  }
}
.avatar--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .avatar--visible-tablet {
    display: inline-flex;
  }
}
.avatar--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .avatar--visible-desktop {
    display: inline-flex;
  }
}

.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  margin-left: -0.5rem;
  border: 2px solid white;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}
.avatar-group--stacked .avatar {
  position: relative;
  z-index: 1;
}
.avatar-group--stacked .avatar:nth-child(2) {
  z-index: 2;
}
.avatar-group--stacked .avatar:nth-child(3) {
  z-index: 3;
}
.avatar-group--stacked .avatar:nth-child(4) {
  z-index: 4;
}
.avatar-group--stacked .avatar:nth-child(5) {
  z-index: 5;
}
.avatar-group--overlap .avatar {
  margin-left: -0.75rem;
}
.avatar-group--overlap .avatar:first-child {
  margin-left: 0;
}/**
 * Badge Component Styles
 * Flexible badge component for labels, status indicators, and notifications
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 150ms ease-in-out;
}
.badge--default {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-200);
}
.badge--outline {
  background-color: transparent;
  color: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-300);
}
.badge--solid {
  background-color: var(--color-primary-500);
  color: white;
  border: 1px solid var(--color-primary-500);
}
.badge--ghost {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border: 1px solid transparent;
}
.badge--dot {
  background-color: transparent;
  color: var(--color-neutral-700);
  border: none;
  position: relative;
}
.badge--dot::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
}
.badge--xs {
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  min-height: 1.25rem;
}
.badge--sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  min-height: 1.5rem;
}
.badge--md {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-height: 1.75rem;
}
.badge--lg {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  min-height: 2rem;
}
.badge--xl {
  padding: 0.75rem 1.25rem;
  font-size: 1.125rem;
  min-height: 2.5rem;
}
.badge--rounded {
  border-radius: 0.375rem;
}
.badge--pill {
  border-radius: 9999px;
}
.badge--square {
  border-radius: 0;
}
.badge--circle {
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 0;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
.badge--neutral.badge--default {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-800);
  border-color: var(--color-neutral-200);
}
.badge--neutral.badge--outline {
  background-color: transparent;
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}
.badge--neutral.badge--solid {
  background-color: var(--color-neutral-600);
  color: white;
  border-color: var(--color-neutral-600);
}
.badge--neutral.badge--ghost {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}
.badge--neutral.badge--dot::before {
  background-color: var(--color-neutral-500);
}
.badge--primary.badge--default {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  border-color: var(--color-primary-200);
}
.badge--primary.badge--outline {
  background-color: transparent;
  color: var(--color-primary-700);
  border-color: var(--color-primary-300);
}
.badge--primary.badge--solid {
  background-color: var(--color-primary-500);
  color: white;
  border-color: var(--color-primary-500);
}
.badge--primary.badge--ghost {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}
.badge--primary.badge--dot::before {
  background-color: var(--color-primary-500);
}
.badge--secondary.badge--default {
  background-color: var(--color-secondary-100);
  color: var(--color-secondary-800);
  border-color: var(--color-secondary-200);
}
.badge--secondary.badge--outline {
  background-color: transparent;
  color: var(--color-secondary-700);
  border-color: var(--color-secondary-300);
}
.badge--secondary.badge--solid {
  background-color: var(--color-secondary-500);
  color: white;
  border-color: var(--color-secondary-500);
}
.badge--secondary.badge--ghost {
  background-color: var(--color-secondary-100);
  color: var(--color-secondary-700);
}
.badge--secondary.badge--dot::before {
  background-color: var(--color-secondary-500);
}
.badge--success.badge--default {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
  border-color: var(--color-success-200);
}
.badge--success.badge--outline {
  background-color: transparent;
  color: var(--color-success-700);
  border-color: var(--color-success-300);
}
.badge--success.badge--solid {
  background-color: var(--color-success-500);
  color: white;
  border-color: var(--color-success-500);
}
.badge--success.badge--ghost {
  background-color: var(--color-success-100);
  color: var(--color-success-700);
}
.badge--success.badge--dot::before {
  background-color: var(--color-success-500);
}
.badge--warning.badge--default {
  background-color: var(--color-warning-100);
  color: var(--color-warning-800);
  border-color: var(--color-warning-200);
}
.badge--warning.badge--outline {
  background-color: transparent;
  color: var(--color-warning-700);
  border-color: var(--color-warning-300);
}
.badge--warning.badge--solid {
  background-color: var(--color-warning-500);
  color: white;
  border-color: var(--color-warning-500);
}
.badge--warning.badge--ghost {
  background-color: var(--color-warning-100);
  color: var(--color-warning-700);
}
.badge--warning.badge--dot::before {
  background-color: var(--color-warning-500);
}
.badge--error.badge--default {
  background-color: var(--color-error-100);
  color: var(--color-error-800);
  border-color: var(--color-error-200);
}
.badge--error.badge--outline {
  background-color: transparent;
  color: var(--color-error-700);
  border-color: var(--color-error-300);
}
.badge--error.badge--solid {
  background-color: var(--color-error-500);
  color: white;
  border-color: var(--color-error-500);
}
.badge--error.badge--ghost {
  background-color: var(--color-error-100);
  color: var(--color-error-700);
}
.badge--error.badge--dot::before {
  background-color: var(--color-error-500);
}
.badge--info.badge--default {
  background-color: var(--color-info-100);
  color: var(--color-info-800);
  border-color: var(--color-info-200);
}
.badge--info.badge--outline {
  background-color: transparent;
  color: var(--color-info-700);
  border-color: var(--color-info-300);
}
.badge--info.badge--solid {
  background-color: var(--color-info-500);
  color: white;
  border-color: var(--color-info-500);
}
.badge--info.badge--ghost {
  background-color: var(--color-info-100);
  color: var(--color-info-700);
}
.badge--info.badge--dot::before {
  background-color: var(--color-info-500);
}
.badge--red.badge--default {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.badge--red.badge--outline {
  background-color: transparent;
  color: #dc2626;
  border-color: #fca5a5;
}
.badge--red.badge--solid {
  background-color: #dc2626;
  color: white;
  border-color: #dc2626;
}
.badge--red.badge--ghost {
  background-color: #fef2f2;
  color: #dc2626;
}
.badge--red.badge--dot::before {
  background-color: #dc2626;
}
.badge--orange.badge--default {
  background-color: hsl(24, 100%, 97%);
  color: #9a3412;
  border-color: #fed7aa;
}
.badge--orange.badge--outline {
  background-color: transparent;
  color: hsl(24, 100%, 50%);
  border-color: #fdba74;
}
.badge--orange.badge--solid {
  background-color: hsl(24, 100%, 50%);
  color: white;
  border-color: hsl(24, 100%, 50%);
}
.badge--orange.badge--ghost {
  background-color: hsl(24, 100%, 97%);
  color: hsl(24, 100%, 50%);
}
.badge--orange.badge--dot::before {
  background-color: hsl(24, 100%, 50%);
}
.badge--yellow.badge--default {
  background-color: #fefce8;
  color: #a16207;
  border-color: #fde047;
}
.badge--yellow.badge--outline {
  background-color: transparent;
  color: #d97706;
  border-color: #facc15;
}
.badge--yellow.badge--solid {
  background-color: #d97706;
  color: white;
  border-color: #d97706;
}
.badge--yellow.badge--ghost {
  background-color: #fefce8;
  color: #d97706;
}
.badge--yellow.badge--dot::before {
  background-color: #d97706;
}
.badge--green.badge--default {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.badge--green.badge--outline {
  background-color: transparent;
  color: #16a34a;
  border-color: #86efac;
}
.badge--green.badge--solid {
  background-color: #16a34a;
  color: white;
  border-color: #16a34a;
}
.badge--green.badge--ghost {
  background-color: #f0fdf4;
  color: #16a34a;
}
.badge--green.badge--dot::before {
  background-color: #16a34a;
}
.badge--blue.badge--default {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.badge--blue.badge--outline {
  background-color: transparent;
  color: #2563eb;
  border-color: #93c5fd;
}
.badge--blue.badge--solid {
  background-color: #2563eb;
  color: white;
  border-color: #2563eb;
}
.badge--blue.badge--ghost {
  background-color: #eff6ff;
  color: #2563eb;
}
.badge--blue.badge--dot::before {
  background-color: #2563eb;
}
.badge--purple.badge--default {
  background-color: #faf5ff;
  color: #7c2d12;
  border-color: #d8b4fe;
}
.badge--purple.badge--outline {
  background-color: transparent;
  color: #9333ea;
  border-color: #c084fc;
}
.badge--purple.badge--solid {
  background-color: #9333ea;
  color: white;
  border-color: #9333ea;
}
.badge--purple.badge--ghost {
  background-color: #faf5ff;
  color: #9333ea;
}
.badge--purple.badge--dot::before {
  background-color: #9333ea;
}
.badge--pink.badge--default {
  background-color: #fdf2f8;
  color: #be185d;
  border-color: #f9a8d4;
}
.badge--pink.badge--outline {
  background-color: transparent;
  color: #db2777;
  border-color: #f472b6;
}
.badge--pink.badge--solid {
  background-color: #db2777;
  color: white;
  border-color: #db2777;
}
.badge--pink.badge--ghost {
  background-color: #fdf2f8;
  color: #db2777;
}
.badge--pink.badge--dot::before {
  background-color: #db2777;
}
.badge--gray.badge--default {
  background-color: #f8fafc;
  color: #374151;
  border-color: #d1d5db;
}
.badge--gray.badge--outline {
  background-color: transparent;
  color: #64748b;
  border-color: #9ca3af;
}
.badge--gray.badge--solid {
  background-color: #64748b;
  color: white;
  border-color: #64748b;
}
.badge--gray.badge--ghost {
  background-color: #f8fafc;
  color: #64748b;
}
.badge--gray.badge--dot::before {
  background-color: #64748b;
}
.badge--animated {
  transition: all 150ms ease-in-out;
}
.badge--animated:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.badge--pulse {
  animation: pulse 2s infinite;
}
.badge--clickable {
  cursor: pointer;
}
.badge--clickable:hover {
  opacity: 0.8;
}
.badge--clickable:active {
  transform: scale(0.95);
}
.badge--interactive {
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.badge--interactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.badge--interactive:active {
  transform: scale(0.95);
}
@media (max-width: 479px) {
  .badge--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .badge--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .badge--hidden-desktop {
    display: none;
  }
}
.badge--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .badge--visible-mobile {
    display: inline-flex;
  }
}
.badge--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .badge--visible-tablet {
    display: inline-flex;
  }
}
.badge--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .badge--visible-desktop {
    display: inline-flex;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 8px;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.button--sm {
  padding: 0.5rem 1rem;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  min-height: 36px;
}
.button--md {
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  min-height: 44px;
}
.button--lg {
  padding: 1rem 2rem;
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  min-height: 52px;
}
.button--xl {
  padding: 1.25rem 2.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  min-height: 60px;
}
.button--full-width {
  width: 100%;
}
.button--loading {
  pointer-events: none;
}
.button--loading .button__text {
  opacity: 0.7;
}
.button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.button--primary {
  background: linear-gradient(135deg, #f97316, #f59e0b);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.button--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button--primary:hover:not(.button--disabled):not(.button--loading) {
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4), 0 3px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.button--primary:hover:not(.button--disabled):not(.button--loading)::before {
  opacity: 1;
}
.button--primary:active:not(.button--disabled):not(.button--loading) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3), 0 1px 4px rgba(0, 0, 0, 0.1);
}
.button--secondary {
  background: linear-gradient(135deg, #1e3a8a, #f97316);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.button--secondary:hover:not(.button--disabled):not(.button--loading) {
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4), 0 3px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.button--outline {
  background: transparent;
  color: #f97316;
  border: 2px solid #f97316;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.button--outline:hover:not(.button--disabled):not(.button--loading) {
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3), 0 3px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.button--ghost {
  background: transparent;
  color: #f97316;
  box-shadow: none;
}
.button--ghost:hover:not(.button--disabled):not(.button--loading) {
  background: rgba(249, 115, 22, 0.1);
  color: #1e3a8a;
  transform: translateY(-1px);
}
.button--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.button--danger:hover:not(.button--disabled):not(.button--loading) {
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4), 0 3px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.button__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
}
.button__icon {
  font-size: 1em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button__icon--left {
  margin-right: 0.25rem;
}
.button__icon--right {
  margin-left: 0.25rem;
}
.button__text {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover:not(.button--disabled):not(.button--loading) .button__icon--right {
  transform: translateX(2px);
}
.button:hover:not(.button--disabled):not(.button--loading) .button__icon--left {
  transform: translateX(-2px);
}

@media (max-width: 479px) {
  .button--sm {
    padding: 0.4rem 0.8rem;
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    min-height: 32px;
  }
  .button--md {
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    min-height: 40px;
  }
  .button--lg {
    padding: 0.8rem 1.6rem;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    min-height: 48px;
  }
  .button--xl {
    padding: 1rem 2rem;
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    min-height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button * {
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .button--primary, .button--secondary, .button--danger {
    border: 2px solid #ffffff;
  }
  .button--outline {
    border-width: 3px;
  }
}
.button:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.card {
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card--sm {
  padding: 1rem;
}
.card--md {
  padding: 1.5rem;
}
.card--lg {
  padding: 2rem;
}
.card--xl {
  padding: 2.5rem;
}
.card--default {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.card--elevated {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}
.card--outlined {
  border: 1px solid #334155;
  box-shadow: none;
}
.card--filled {
  background: #475569;
  box-shadow: none;
}
.card--hover {
  cursor: pointer;
}
.card--hover:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #1e293b;
    color: #f1f5f9;
  }
  .card--outlined {
    border-color: #334155;
  }
  .card--filled {
    background: #0f172a;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}/**
 * Image Component Styles
 */
.image {
  display: block;
  max-width: 100%;
  height: auto;
}
.image--logo {
  height: 40px;
  width: auto;
}
.image--promo {
  width: 100%;
  height: auto;
  border-radius: 8px;
}/**
 * Checkbox Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.checkbox__input-wrapper {
  position: relative;
  flex-shrink: 0;
}
.checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox__input:focus + .checkbox__custom {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}
.checkbox__input:checked + .checkbox__custom {
  background-color: hsl(24, 100%, 60%);
  border-color: hsl(24, 100%, 60%);
}
.checkbox__input:checked + .checkbox__custom .checkbox__check-icon {
  opacity: 1;
  transform: scale(1);
}
.checkbox__input:disabled + .checkbox__custom {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  cursor: not-allowed;
}
.checkbox__input:disabled:checked + .checkbox__custom {
  background-color: #9ca3af;
  border-color: #9ca3af;
}
.checkbox__custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 0.125rem;
  background-color: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.checkbox__custom:hover {
  border-color: hsl(24, 100%, 60%);
}
.checkbox__check-icon {
  color: white;
  font-size: 0.75rem;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}
.checkbox__content {
  flex: 1;
  min-width: 0;
}
.checkbox__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0.25rem;
}
.checkbox__required {
  color: #ef4444;
  margin-left: 0.25rem;
}
.checkbox__description {
  font-size: 0.75rem;
  color: #4b5563;
  line-height: 1.4;
  margin: 0;
}
.checkbox--sm .checkbox__custom {
  width: 16px;
  height: 16px;
}
.checkbox--sm .checkbox__check-icon {
  font-size: 0.625rem;
}
.checkbox--sm .checkbox__label {
  font-size: 0.75rem;
}
.checkbox--sm .checkbox__description {
  font-size: 0.625rem;
}
.checkbox--lg .checkbox__custom {
  width: 24px;
  height: 24px;
}
.checkbox--lg .checkbox__check-icon {
  font-size: 0.875rem;
}
.checkbox--lg .checkbox__label {
  font-size: 1rem;
}
.checkbox--lg .checkbox__description {
  font-size: 0.875rem;
}
.checkbox--card {
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.375rem;
  background-color: #ffffff;
  transition: all 0.2s ease;
}
.checkbox--card:hover {
  border-color: hsl(24, 100%, 82%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.checkbox--card .checkbox__input:checked ~ .checkbox__content .checkbox__label {
  color: hsl(24, 100%, 42%);
}
.checkbox--switch .checkbox__custom {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background-color: #d1d5db;
  position: relative;
}
.checkbox--switch .checkbox__custom::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 0.2s ease;
}
.checkbox--switch .checkbox__input:checked + .checkbox__custom {
  background-color: hsl(24, 100%, 60%);
  border-color: hsl(24, 100%, 60%);
}
.checkbox--switch .checkbox__input:checked + .checkbox__custom::after {
  transform: translateX(20px);
}
.checkbox--switch .checkbox__input:checked + .checkbox__custom .checkbox__check-icon {
  display: none;
}
.checkbox--error .checkbox__custom {
  border-color: #ef4444;
}
.checkbox--error .checkbox__label {
  color: #b91c1c;
}
.checkbox--disabled .checkbox__label {
  color: #6b7280;
  cursor: not-allowed;
}
.checkbox--disabled .checkbox__description {
  color: #9ca3af;
}/**
 * Calendar Component Styles
 * Comprehensive styling for calendar component
 */
.calendar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #1e293b;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.calendar .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}
.calendar .calendar-header .calendar-navigation {
  display: flex;
  gap: 0.5rem;
}
.calendar .calendar-header .calendar-navigation .calendar-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar .calendar-header .calendar-navigation .calendar-nav-button:hover {
  background: #475569;
  border-color: #64748b;
}
.calendar .calendar-header .calendar-navigation .calendar-nav-button:active {
  transform: scale(0.95);
}
.calendar .calendar-header .calendar-title h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}
.calendar .calendar-header .calendar-view-selector {
  display: flex;
  gap: 0.25rem;
}
.calendar .calendar-header .calendar-view-selector .calendar-view-button {
  padding: 0.5rem 1rem;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar .calendar-header .calendar-view-selector .calendar-view-button:hover {
  background: #475569;
}
.calendar .calendar-header .calendar-view-selector .calendar-view-button.active {
  background: #3b82f6;
  color: #1e293b;
  border-color: #3b82f6;
}
.calendar .calendar-content {
  padding: 1.5rem;
}
.calendar .calendar-month-view .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.calendar .calendar-month-view .calendar-grid .calendar-weekday-header {
  padding: 0.75rem;
  background: #f9fafb;
  text-align: center;
  font-weight: 600;
  color: #f1f5f9;
  font-size: 0.875rem;
}
.calendar .calendar-month-view .calendar-grid .calendar-day {
  min-height: 120px;
  background: #1e293b;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.calendar .calendar-month-view .calendar-grid .calendar-day:hover {
  background: #1e293b;
}
.calendar .calendar-month-view .calendar-grid .calendar-day.today {
  background: #eff6ff;
  border: 2px solid #3b82f6;
}
.calendar .calendar-month-view .calendar-grid .calendar-day.selected {
  background: #dbeafe;
  border: 2px solid #1d4ed8;
}
.calendar .calendar-month-view .calendar-grid .calendar-day.other-month {
  background: #f9fafb;
  color: #64748b;
}
.calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-number {
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.25rem;
}
.calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events .calendar-event {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events .calendar-event:hover {
  transform: scale(1.05);
  z-index: 10;
}
.calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events .calendar-more-events {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}
.calendar .calendar-week-view .calendar-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e5e7eb;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.calendar .calendar-week-view .calendar-week-header .calendar-weekday-header {
  padding: 0.75rem;
  background: #f9fafb;
  text-align: center;
  font-weight: 600;
  color: #f1f5f9;
  font-size: 0.875rem;
}
.calendar .calendar-week-view .calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e5e7eb;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day {
  min-height: 200px;
  background: #1e293b;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day:hover {
  background: #1e293b;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day.today {
  background: #eff6ff;
  border: 2px solid #3b82f6;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day.selected {
  background: #dbeafe;
  border: 2px solid #1d4ed8;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day .calendar-week-day-number {
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.5rem;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day .calendar-week-day-events {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day .calendar-week-day-events .calendar-event {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar .calendar-week-view .calendar-week-grid .calendar-week-day .calendar-week-day-events .calendar-event:hover {
  transform: scale(1.05);
  z-index: 10;
}
.calendar .calendar-day-view .calendar-day-header {
  padding: 1rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  text-align: center;
}
.calendar .calendar-day-view .calendar-day-header .calendar-day-date {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}
.calendar .calendar-day-view .calendar-day-timeline .calendar-time-slot {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  min-height: 60px;
}
.calendar .calendar-day-view .calendar-day-timeline .calendar-time-slot .calendar-time-label {
  width: 80px;
  padding: 0.5rem;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar .calendar-day-view .calendar-day-timeline .calendar-time-slot .calendar-time-events {
  flex: 1;
  padding: 0.5rem;
  position: relative;
}
.calendar .calendar-day-view .calendar-day-timeline .calendar-time-slot .calendar-time-events .calendar-event {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar .calendar-day-view .calendar-day-timeline .calendar-time-slot .calendar-time-events .calendar-event:hover {
  transform: scale(1.02);
  z-index: 10;
}
.calendar .calendar-agenda-view .calendar-agenda-header {
  padding: 1rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}
.calendar .calendar-agenda-view .calendar-agenda-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event {
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s ease;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event:hover {
  background: #1e293b;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event:last-child {
  border-bottom: none;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event .calendar-agenda-event-time {
  width: 80px;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event .calendar-agenda-event-details {
  flex: 1;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event .calendar-agenda-event-details .calendar-agenda-event-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}
.calendar .calendar-agenda-view .calendar-agenda-events .calendar-agenda-event .calendar-agenda-event-details .calendar-agenda-event-description {
  font-size: 0.875rem;
  color: #6b7280;
}
@media (max-width: 768px) {
  .calendar .calendar-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .calendar .calendar-header .calendar-navigation {
    order: 2;
  }
  .calendar .calendar-header .calendar-title {
    order: 1;
    text-align: center;
  }
  .calendar .calendar-header .calendar-title h2 {
    font-size: 1.25rem;
  }
  .calendar .calendar-header .calendar-view-selector {
    order: 3;
    justify-content: center;
  }
  .calendar .calendar-content {
    padding: 1rem;
  }
  .calendar .calendar-month-view .calendar-grid .calendar-day {
    min-height: 80px;
    padding: 0.25rem;
  }
  .calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events .calendar-event {
    font-size: 0.625rem;
    padding: 0.125rem 0.25rem;
  }
  .calendar .calendar-week-view .calendar-week-grid .calendar-week-day {
    min-height: 120px;
    padding: 0.5rem;
  }
}
@media (max-width: 480px) {
  .calendar .calendar-header .calendar-view-selector {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .calendar .calendar-header .calendar-view-selector .calendar-view-button {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
  .calendar .calendar-month-view .calendar-grid .calendar-day {
    min-height: 60px;
    padding: 0.125rem;
  }
  .calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-number {
    font-size: 0.875rem;
  }
  .calendar .calendar-month-view .calendar-grid .calendar-day .calendar-day-events .calendar-event {
    font-size: 0.5rem;
    padding: 0.125rem;
  }
}/**
 * DatePicker Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.date-picker-wrapper {
  position: relative;
  width: 100%;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.date-picker-wrapper--error .date-picker-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.date-picker-wrapper--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.date-picker-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.date-picker-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  padding-right: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-family: inherit;
  transition: all 0.3s ease;
}
.date-picker-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.date-picker-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.date-picker-input:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
.date-picker-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.date-picker-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.date-picker-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.date-picker-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1;
  pointer-events: auto;
}
.date-picker-button:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) scale(1.1);
}
.date-picker-button:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}
.date-picker-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.date-picker-button svg {
  font-size: 1rem;
}

.date-picker-calendar-popup {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-width: 320px;
}
@media (max-width: 479px) {
  .date-picker-calendar-popup {
    left: 50%;
    transform: translateX(-50%);
    min-width: 90vw;
    max-width: 90vw;
  }
}

.date-picker-calendar {
  padding: 1rem;
  background: transparent;
}
.date-picker-calendar .calendar {
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
}
.date-picker-calendar .calendar-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}
.date-picker-calendar .calendar-navigation button,
.date-picker-calendar .calendar-view-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.date-picker-calendar .calendar-navigation button:hover,
.date-picker-calendar .calendar-view-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
}
.date-picker-calendar .calendar-navigation button.active,
.date-picker-calendar .calendar-view-button.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: rgb(59, 130, 246);
}
.date-picker-calendar .calendar-title h2 {
  color: rgba(255, 255, 255, 0.95);
}
.date-picker-calendar .calendar-day {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.date-picker-calendar .calendar-day:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}
.date-picker-calendar .calendar-day.selected {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
  color: rgb(255, 255, 255);
}
.date-picker-calendar .calendar-day.today {
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.5);
  color: rgb(255, 255, 255);
}/**
 * Dropdown Component Styles
 * Interactive dropdown with animations and accessibility
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.dropdown {
  position: relative;
  width: 100%;
}
.dropdown__label {
  display: block;
  font-weight: 500;
  color: hsl(210, 20%, 90%);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.dropdown__required {
  color: #ef4444;
  margin-left: 0.25rem;
}
.dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid hsl(210, 20%, 32%);
  border-radius: 0.5rem;
  background: hsl(210, 20%, 7%);
  color: hsl(210, 20%, 96%);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  min-height: 48px;
}
.dropdown__trigger:hover {
  border-color: hsl(210, 20%, 45%);
}
.dropdown__trigger:focus {
  outline: none;
  border-color: hsl(24, 100%, 60%);
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.1);
}
.dropdown__value {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.dropdown__text {
  color: hsl(210, 20%, 96%);
  font-size: 1rem;
}
.dropdown__text--placeholder {
  color: hsl(210, 20%, 45%);
}
.dropdown__selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.dropdown__selected-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: hsl(24, 100%, 50%);
  color: white;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.dropdown__remove-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}
.dropdown__remove-item:hover {
  background: rgba(255, 255, 255, 0.3);
}
.dropdown__remove-item svg {
  font-size: 0.6rem;
}
.dropdown__more-items {
  color: hsl(24, 100%, 60%);
  font-size: 0.8rem;
  font-weight: 500;
}
.dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  color: hsl(210, 20%, 64%);
}
.dropdown__chevron {
  transition: transform 150ms ease-in-out;
}
.dropdown__chevron--open {
  transform: rotate(180deg);
}
.dropdown__error {
  display: block;
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: hsl(210, 20%, 14%);
  border: 1px solid hsl(210, 20%, 32%);
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  margin-top: 0.25rem;
  overflow: hidden;
}
.dropdown__search {
  position: relative;
  padding: 0.75rem;
  border-bottom: 1px solid hsl(210, 20%, 22%);
}
.dropdown__search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(210, 20%, 64%);
  font-size: 0.8rem;
}
.dropdown__search-input {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  border: 1px solid hsl(210, 20%, 32%);
  border-radius: 0.375rem;
  background: hsl(210, 20%, 7%);
  color: hsl(210, 20%, 96%);
  font-size: 0.9rem;
}
.dropdown__search-input:focus {
  outline: none;
  border-color: hsl(24, 100%, 60%);
}
.dropdown__search-input::-moz-placeholder {
  color: hsl(210, 20%, 45%);
}
.dropdown__search-input::placeholder {
  color: hsl(210, 20%, 45%);
}
.dropdown__options {
  max-height: 300px;
  overflow-y: auto;
}
.dropdown__options::-webkit-scrollbar {
  width: 6px;
}
.dropdown__options::-webkit-scrollbar-track {
  background: hsl(210, 20%, 7%);
}
.dropdown__options::-webkit-scrollbar-thumb {
  background: hsl(210, 20%, 32%);
  border-radius: 3px;
}
.dropdown__options::-webkit-scrollbar-thumb:hover {
  background: hsl(210, 20%, 45%);
}
.dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 150ms ease-in-out;
  border-bottom: 1px solid hsl(210, 20%, 22%);
}
.dropdown__option:last-child {
  border-bottom: none;
}
.dropdown__option:hover, .dropdown__option--highlighted {
  background: hsl(210, 20%, 22%);
}
.dropdown__option--selected {
  background: rgba(255, 132.6, 51, 0.1);
  color: hsl(24, 100%, 60%);
}
.dropdown__option-text {
  flex: 1;
  color: hsl(210, 20%, 96%);
  font-size: 0.9rem;
}
.dropdown__option-check {
  color: hsl(24, 100%, 60%);
  font-size: 0.8rem;
}
.dropdown__no-options {
  padding: 1rem;
  text-align: center;
  color: hsl(210, 20%, 45%);
  font-size: 0.9rem;
}
.dropdown--sm .dropdown__trigger {
  padding: 0.5rem 0.75rem;
  min-height: 36px;
  font-size: 0.9rem;
}
.dropdown--lg .dropdown__trigger {
  padding: 1rem 1.25rem;
  min-height: 56px;
  font-size: 1.1rem;
}
.dropdown--primary .dropdown__trigger {
  border-color: hsl(24, 100%, 50%);
  background: rgba(255, 102, 0, 0.1);
}
.dropdown--primary .dropdown__trigger:hover {
  border-color: hsl(24, 100%, 60%);
  background: rgba(255, 102, 0, 0.15);
}
.dropdown--success .dropdown__trigger {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}
.dropdown--success .dropdown__trigger:hover {
  border-color: #22c55e;
  background: rgba(22, 163, 74, 0.15);
}
.dropdown--open .dropdown__trigger {
  border-color: hsl(24, 100%, 60%);
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.1);
}
.dropdown--disabled .dropdown__trigger {
  background: hsl(210, 20%, 14%);
  color: hsl(210, 20%, 45%);
  cursor: not-allowed;
  opacity: 0.6;
}
.dropdown--disabled .dropdown__trigger:hover {
  border-color: hsl(210, 20%, 32%);
}
.dropdown--dark .dropdown__trigger {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: hsl(210, 20%, 96%);
}
.dropdown--dark .dropdown__trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.dropdown--dark .dropdown__trigger:focus {
  border-color: hsl(24, 100%, 60%);
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.2);
}
.dropdown--dark .dropdown__text {
  color: hsl(210, 20%, 96%);
}
.dropdown--dark .dropdown__text--placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.dropdown--dark .dropdown__menu {
  background: hsl(210, 20%, 14%);
  border-color: hsl(210, 20%, 32%);
}
.dropdown--dark .dropdown__option {
  color: hsl(210, 20%, 96%);
}
.dropdown--dark .dropdown__option:hover, .dropdown--dark .dropdown__option--highlighted {
  background: hsl(210, 20%, 22%);
}
.dropdown--dark .dropdown__option--selected {
  background: rgba(255, 132.6, 51, 0.1);
  color: hsl(24, 100%, 60%);
}
.dropdown--error .dropdown__trigger {
  border-color: #ef4444;
}
.dropdown--error .dropdown__trigger:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

@media (max-width: 479px) {
  .dropdown__menu {
    position: absolute;
    z-index: 9999;
    max-height: 500px;
  }
  .dropdown__options {
    max-height: 450px;
    overflow-y: auto;
  }
  .dropdown__option {
    padding: 1rem;
    font-size: 1rem;
    white-space: normal;
    word-wrap: break-word;
  }
}/**
 * Input Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.input-wrapper {
  width: 100%;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-family: inherit;
  transition: all 0.3s ease;
  position: relative;
}
@media (max-width: 479px) {
  .input {
    font-size: 16px;
  }
}
.input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}
.input:hover:not(.input--disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
.input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.input:focus::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.input:focus::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.input:active:not(.input--disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255, 132.6, 51, 0.2);
}
.input--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}
.input--lg {
  padding: 1rem 1.25rem;
  font-size: 1rem;
}
.input--dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.input--dark::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.input--dark::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.input--dark:hover:not(.input--disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
.input--dark:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.input--filled {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}
.input--filled:hover {
  background-color: #f3f4f6;
  border-color: hsl(24, 100%, 60%);
}
.input--filled:focus {
  background-color: #ffffff;
  border-color: hsl(24, 100%, 60%);
}
.input--outlined {
  background-color: transparent;
  border-width: 2px;
}
.input--outlined:hover {
  border-color: hsl(24, 100%, 60%);
}
.input--outlined:focus {
  border-color: hsl(24, 100%, 60%);
  background-color: #ffffff;
}
.input--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.input--error:hover, .input--error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.input--disabled {
  background-color: rgba(15, 23, 42, 0.3);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.5;
}
.input--disabled:hover, .input--disabled:focus {
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}
.input--disabled::-moz-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.input--disabled::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .input {
    transition: none;
    transform: none !important;
  }
  .input:hover, .input:focus, .input:active {
    transform: none !important;
  }
}
@media (prefers-contrast: high) {
  .input {
    border-width: 3px;
  }
  .input:focus {
    outline: 3px solid hsl(24, 100%, 60%);
    outline-offset: 2px;
  }
}
.input:focus-visible {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}/**
 * PhoneInput Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.phone-input-wrapper {
  width: 100%;
}

.phone-input-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  font-size: 0.9375rem;
}
.phone-input-container:hover:not(.phone-input-container--disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}
.phone-input-container:focus-within {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.phone-input-container--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.phone-input-container--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.phone-input-container--sm {
  font-size: 0.75rem;
}
.phone-input-container--md {
  font-size: 0.9375rem;
}
.phone-input-container--lg {
  font-size: 1rem;
}
.phone-input-container--xl {
  font-size: 1.125rem;
}
.phone-input-container--default {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}
.phone-input-container--dark {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.phone-input-prefix {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 0.875rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  cursor: default;
  min-width: 85px;
  justify-content: center;
}
.phone-input-prefix .country-code-label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}
.phone-input-prefix .country-code-number {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.phone-input-prefix .country-code-chevron {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 0.125rem;
  transition: transform 0.2s ease;
}
.phone-input-container--sm .phone-input-prefix {
  padding: 0.5rem 0.625rem;
  min-width: 75px;
  gap: 0.25rem;
  font-size: 0.75rem;
}
.phone-input-container--md .phone-input-prefix {
  padding: 0.875rem 0.875rem;
  min-width: 85px;
  gap: 0.375rem;
  font-size: 0.9375rem;
}
.phone-input-container--lg .phone-input-prefix {
  padding: 1rem 1rem;
  min-width: 90px;
  gap: 0.5rem;
  font-size: 1rem;
}
.phone-input-container--xl .phone-input-prefix {
  padding: 1.125rem 1.125rem;
  min-width: 100px;
  gap: 0.5rem;
  font-size: 1.125rem;
}

.phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  font-family: inherit;
  padding: 0.875rem 1.25rem;
  width: 100%;
  line-height: 1.5;
  transition: all 0.3s ease;
}
.phone-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.phone-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}
.phone-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.phone-input::-webkit-outer-spin-button, .phone-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.phone-input[type=tel] {
  -moz-appearance: textfield;
}
.phone-input-container--sm .phone-input {
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
}
.phone-input-container--md .phone-input {
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
}
.phone-input-container--lg .phone-input {
  padding: 1rem 1.375rem;
  font-size: 1rem;
}
.phone-input-container--xl .phone-input {
  padding: 1.125rem 1.5rem;
  font-size: 1.125rem;
}
@media (max-width: 479px) {
  .phone-input {
    font-size: 16px;
  }
}

.phone-input-container--light {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}
.phone-input-container--light .phone-input-prefix {
  color: hsl(210, 20%, 22%);
  border-right-color: rgba(0, 0, 0, 0.1);
}
.phone-input-container--light .phone-input {
  color: hsl(210, 20%, 7%);
}
.phone-input-container--light .phone-input::-moz-placeholder {
  color: rgba(65.28, 81.6, 97.92, 0.6);
}
.phone-input-container--light .phone-input::placeholder {
  color: rgba(65.28, 81.6, 97.92, 0.6);
}
.phone-input-container--light:focus-within {
  border-color: hsl(24, 100%, 60%);
  background: rgb(255, 255, 255);
}/**
 * Select Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.select {
  position: relative;
  width: 100%;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
}
.select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.select__trigger:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.select__trigger--open {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.select__value {
  flex: 1;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select__value:empty::before {
  content: attr(placeholder);
  color: rgba(255, 255, 255, 0.4);
}
.select__icon {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  margin-left: 0.5rem;
}
.select__icon--open {
  transform: rotate(180deg);
}
.select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-height: 200px;
  overflow: hidden;
  margin-top: 4px;
}
.select__search {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
}
.select__search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.875rem;
  outline: none;
  background: rgba(15, 23, 42, 0.6);
  color: rgba(255, 255, 255, 0.95);
}
.select__search-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.select__search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.select__search-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.select__options {
  max-height: 150px;
  overflow-y: auto;
}
.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}
.select__option:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
}
.select__option:last-child {
  border-bottom: none;
}
.select__option--selected {
  background-color: rgba(249, 115, 22, 0.2);
  color: hsl(24, 100%, 72%);
}
.select__option-label {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.select__option-check {
  color: hsl(24, 100%, 60%);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}
.select__no-options {
  padding: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}
.select--error .select__trigger {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.select--error .select__trigger:hover, .select--error .select__trigger:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.select--disabled .select__trigger {
  background-color: rgba(15, 23, 42, 0.3);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.5;
}
.select--disabled .select__trigger:hover, .select--disabled .select__trigger:focus {
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}
.select--sm .select__trigger {
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  font-size: 0.875rem;
}
.select--lg .select__trigger {
  padding: 1rem 1.25rem;
  min-height: 56px;
  font-size: 1rem;
}/**
 * Textarea Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.textarea-wrapper {
  width: 100%;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: all 0.2s ease;
}
.textarea::-moz-placeholder {
  color: #6b7280;
}
.textarea::placeholder {
  color: #6b7280;
}
.textarea:hover {
  border-color: hsl(24, 100%, 60%);
}
.textarea:focus {
  outline: none;
  border-color: hsl(24, 100%, 60%);
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.1);
}
.textarea--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  min-height: 60px;
}
.textarea--lg {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  min-height: 100px;
}
.textarea--filled {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}
.textarea--filled:hover {
  background-color: #f3f4f6;
  border-color: hsl(24, 100%, 60%);
}
.textarea--filled:focus {
  background-color: #ffffff;
  border-color: hsl(24, 100%, 60%);
}
.textarea--outlined {
  background-color: transparent;
  border-width: 2px;
}
.textarea--outlined:hover {
  border-color: hsl(24, 100%, 60%);
}
.textarea--outlined:focus {
  border-color: hsl(24, 100%, 60%);
  background-color: #ffffff;
}
.textarea--error {
  border-color: #ef4444;
}
.textarea--error:hover, .textarea--error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.textarea--disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
  border-color: #d1d5db;
}
.textarea--disabled:hover, .textarea--disabled:focus {
  border-color: #d1d5db;
  box-shadow: none;
}
.textarea--disabled::-moz-placeholder {
  color: #9ca3af;
}
.textarea--disabled::placeholder {
  color: #9ca3af;
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.file-upload__input {
  display: none;
}
.file-upload__dropzone {
  border: 2px dashed hsl(210, 20%, 82%);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #ffffff;
}
.file-upload__dropzone:hover {
  border-color: hsl(24, 100%, 60%);
  background-color: hsl(24, 100%, 97%);
}
.file-upload__dropzone--active {
  border-color: hsl(24, 100%, 60%);
  background-color: hsl(24, 100%, 97%);
  transform: scale(1.02);
}
.file-upload__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.file-upload__icon {
  font-size: 2rem;
  opacity: 0.6;
}
.file-upload__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.file-upload__primary {
  font-weight: 500;
  color: hsl(210, 20%, 22%);
  margin: 0;
}
.file-upload__secondary {
  font-size: 0.875rem;
  color: hsl(210, 20%, 45%);
  margin: 0;
}
.file-upload__error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #ef4444;
}
.file-upload--error .file-upload__dropzone {
  border-color: #ef4444;
  background-color: #fef2f2;
}
.file-upload--disabled .file-upload__dropzone {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: hsl(210, 20%, 96%);
}/**
 * ProgressiveForm Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.progressive-form {
  width: 100%;
}
.progressive-form .form-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
  padding: 0 2rem;
}
.progressive-form .form-progress::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  right: 2rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
}
.progressive-form .form-progress .progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  flex: 1;
}
.progressive-form .form-progress .progress-step .progress-step-number {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
.progressive-form .form-progress .progress-step .progress-step-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}
.progressive-form .form-progress .progress-step.active .progress-step-number {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: #f97316;
  color: white;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.progressive-form .form-progress .progress-step.active .progress-step-label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.progressive-form .form-progress .progress-step.completed .progress-step-number {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  color: white;
}
.progressive-form .form-progress .progress-step.completed .progress-step-label {
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 479px) {
  .progressive-form .form-progress {
    padding: 0 0.5rem;
    margin-bottom: 2rem;
  }
  .progressive-form .form-progress::before {
    left: 0.5rem;
    right: 0.5rem;
    top: 1.25rem;
  }
  .progressive-form .form-progress .progress-step .progress-step-number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }
  .progressive-form .form-progress .progress-step .progress-step-label {
    font-size: 0.6875rem;
    line-height: 1.2;
    padding: 0 0.25rem;
  }
}
.progressive-form .progressive-form-container .form-step {
  min-height: 400px;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step {
    min-height: auto;
    padding: 0;
  }
}
.progressive-form .progressive-form-container .form-step .step-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  line-height: 1.6;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .step-description {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .form-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group.full-width {
  grid-column: 1/-1;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .form-grid .form-group {
    margin-bottom: 1rem;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.75rem;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .form-grid .form-group label {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    gap: 0.375rem;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group label .field-icon {
  color: #60a5fa;
  font-size: 1rem;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group label .required {
  color: #ef4444;
  margin-left: 0.25rem;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper {
    margin-bottom: 0.5rem;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  font-family: inherit;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input,
  .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea,
  .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select {
    padding: 0.75rem 1rem;
    font-size: 16px;
  }
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input::-moz-placeholder, .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea::-moz-placeholder, .progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input::placeholder,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea::placeholder,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input:focus,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea:focus,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.8);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input:hover:not(:focus),
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea:hover:not(:focus),
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.15);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper input.error,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea.error,
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper textarea {
  resize: vertical;
  min-height: 100px;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2360a5fa' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  padding-right: 3rem;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper select option {
  background: #1e293b;
  color: white;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper {
  position: relative;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper .file-upload-display {
  padding: 0.875rem 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper .file-upload-display:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(15, 23, 42, 0.8);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper .file-upload-display.error {
  border-color: #ef4444;
  border-style: solid;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper .file-upload-display .file-name {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper .file-upload-display .file-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .file-upload-wrapper input[type=file]:focus + .file-upload-display {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.progressive-form .progressive-form-container .form-step .form-grid .form-group .form-field-wrapper .error-message {
  display: block;
  color: #ef4444;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  font-weight: 500;
}
.progressive-form .progressive-form-container .form-actions {
  margin-top: 2rem;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-actions {
    margin-top: 1.5rem;
  }
}
.progressive-form .progressive-form-container .form-actions .form-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-actions .form-navigation {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-spacer {
  flex: 1;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-actions .form-navigation .nav-spacer {
    display: none;
  }
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 140px;
  justify-content: center;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-actions .form-navigation .nav-button {
    width: 100%;
    min-width: auto;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:hover:not(:disabled)::before {
  left: 100%;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button--previous {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button--previous:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%) !important;
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.5) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button--previous:active:not(:disabled) {
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:not(.nav-button--previous):not([class*=outline]) {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:not(.nav-button--previous):not([class*=outline]):hover:not(:disabled) {
  background: linear-gradient(135deg, #ea580c 0%, #dc2626 50%, #c2410c 100%) !important;
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.5) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button:not(.nav-button--previous):not([class*=outline]):active:not(:disabled) {
  box-shadow: 0 2px 12px rgba(249, 115, 22, 0.4) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button.button--outline {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button.button--outline:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}
.progressive-form .progressive-form-container .form-actions .form-navigation .nav-button.button--outline:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05) !important;
}
@media (max-width: 479px) {
  .progressive-form .progressive-form-container .form-actions .form-navigation {
    flex-direction: column;
  }
  .progressive-form .progressive-form-container .form-actions .form-navigation .nav-spacer {
    display: none;
  }
  .progressive-form .progressive-form-container .form-actions .form-navigation .nav-button {
    width: 100%;
  }
}/**
 * Column Component Styles
 * Responsive grid column system with flexible sizing and alignment
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.column {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding: var(--column-padding, 0);
  margin: var(--column-margin, 0);
  background: var(--column-background, transparent);
  border: var(--column-border, none);
  border-radius: var(--column-border-radius, 0);
  box-shadow: var(--column-shadow, none);
  display: flex;
  flex-direction: column;
  align-items: var(--column-align, flex-start);
  justify-content: var(--column-justify, flex-start);
  gap: var(--column-gap, 0);
}
.column--1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.column--2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.column--3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.column--4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.column--5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.column--6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.column--7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.column--8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.column--9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.column--10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.column--11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.column--12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.column--offset-1 {
  margin-left: 8.333333%;
}
.column--offset-2 {
  margin-left: 16.666667%;
}
.column--offset-3 {
  margin-left: 25%;
}
.column--offset-4 {
  margin-left: 33.333333%;
}
.column--offset-5 {
  margin-left: 41.666667%;
}
.column--offset-6 {
  margin-left: 50%;
}
.column--offset-7 {
  margin-left: 58.333333%;
}
.column--offset-8 {
  margin-left: 66.666667%;
}
.column--offset-9 {
  margin-left: 75%;
}
.column--offset-10 {
  margin-left: 83.333333%;
}
.column--offset-11 {
  margin-left: 91.666667%;
}
.column--align-start {
  align-items: flex-start;
}
.column--align-center {
  align-items: center;
}
.column--align-end {
  align-items: flex-end;
}
.column--align-stretch {
  align-items: stretch;
}
.column--justify-start {
  justify-content: flex-start;
}
.column--justify-center {
  justify-content: center;
}
.column--justify-end {
  justify-content: flex-end;
}
.column--justify-space-between {
  justify-content: space-between;
}
.column--justify-space-around {
  justify-content: space-around;
}
.column--justify-space-evenly {
  justify-content: space-evenly;
}
@media (max-width: 479px) {
  .column--xs-1, .column--xs-2, .column--xs-3, .column--xs-4, .column--xs-5, .column--xs-6, .column--xs-7, .column--xs-8, .column--xs-9, .column--xs-10, .column--xs-11, .column--xs-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column--xs-offset-1, .column--xs-offset-2, .column--xs-offset-3, .column--xs-offset-4, .column--xs-offset-5, .column--xs-offset-6, .column--xs-offset-7, .column--xs-offset-8, .column--xs-offset-9, .column--xs-offset-10, .column--xs-offset-11 {
    margin-left: 0;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .column--sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .column--sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .column--sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column--sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column--sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .column--sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column--sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .column--sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .column--sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column--sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column--sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .column--sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column--sm-offset-1 {
    margin-left: 8.333333%;
  }
  .column--sm-offset-2 {
    margin-left: 16.666667%;
  }
  .column--sm-offset-3 {
    margin-left: 25%;
  }
  .column--sm-offset-4 {
    margin-left: 33.333333%;
  }
  .column--sm-offset-5 {
    margin-left: 41.666667%;
  }
  .column--sm-offset-6 {
    margin-left: 50%;
  }
  .column--sm-offset-7 {
    margin-left: 58.333333%;
  }
  .column--sm-offset-8 {
    margin-left: 66.666667%;
  }
  .column--sm-offset-9 {
    margin-left: 75%;
  }
  .column--sm-offset-10 {
    margin-left: 83.333333%;
  }
  .column--sm-offset-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 768px) {
  .column--md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .column--md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .column--md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column--md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column--md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .column--md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column--md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .column--md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .column--md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column--md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column--md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .column--md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column--md-offset-1 {
    margin-left: 8.333333%;
  }
  .column--md-offset-2 {
    margin-left: 16.666667%;
  }
  .column--md-offset-3 {
    margin-left: 25%;
  }
  .column--md-offset-4 {
    margin-left: 33.333333%;
  }
  .column--md-offset-5 {
    margin-left: 41.666667%;
  }
  .column--md-offset-6 {
    margin-left: 50%;
  }
  .column--md-offset-7 {
    margin-left: 58.333333%;
  }
  .column--md-offset-8 {
    margin-left: 66.666667%;
  }
  .column--md-offset-9 {
    margin-left: 75%;
  }
  .column--md-offset-10 {
    margin-left: 83.333333%;
  }
  .column--md-offset-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 1280px) {
  .column--lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .column--lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .column--lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column--lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column--lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .column--lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column--lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .column--lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .column--lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column--lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column--lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .column--lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column--lg-offset-1 {
    margin-left: 8.333333%;
  }
  .column--lg-offset-2 {
    margin-left: 16.666667%;
  }
  .column--lg-offset-3 {
    margin-left: 25%;
  }
  .column--lg-offset-4 {
    margin-left: 33.333333%;
  }
  .column--lg-offset-5 {
    margin-left: 41.666667%;
  }
  .column--lg-offset-6 {
    margin-left: 50%;
  }
  .column--lg-offset-7 {
    margin-left: 58.333333%;
  }
  .column--lg-offset-8 {
    margin-left: 66.666667%;
  }
  .column--lg-offset-9 {
    margin-left: 75%;
  }
  .column--lg-offset-10 {
    margin-left: 83.333333%;
  }
  .column--lg-offset-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 1280px) {
  .column--xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .column--xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .column--xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column--xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column--xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .column--xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column--xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .column--xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .column--xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column--xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column--xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .column--xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column--xl-offset-1 {
    margin-left: 8.333333%;
  }
  .column--xl-offset-2 {
    margin-left: 16.666667%;
  }
  .column--xl-offset-3 {
    margin-left: 25%;
  }
  .column--xl-offset-4 {
    margin-left: 33.333333%;
  }
  .column--xl-offset-5 {
    margin-left: 41.666667%;
  }
  .column--xl-offset-6 {
    margin-left: 50%;
  }
  .column--xl-offset-7 {
    margin-left: 58.333333%;
  }
  .column--xl-offset-8 {
    margin-left: 66.666667%;
  }
  .column--xl-offset-9 {
    margin-left: 75%;
  }
  .column--xl-offset-10 {
    margin-left: 83.333333%;
  }
  .column--xl-offset-11 {
    margin-left: 91.666667%;
  }
}
.column--auto {
  flex: 1 1 auto;
  max-width: none;
}
.column--fill {
  flex: 1 1 0;
  max-width: 100%;
}
.column--no-grow {
  flex-grow: 0;
}
.column--no-shrink {
  flex-shrink: 0;
}
.column--content-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.column--content-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.column--content-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 479px) {
  .column--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .column--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .column--hidden-desktop {
    display: none;
  }
}
.column--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .column--visible-mobile {
    display: flex;
  }
}
.column--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .column--visible-tablet {
    display: flex;
  }
}
.column--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .column--visible-desktop {
    display: flex;
  }
}/**
 * Container Component Styles
 * Responsive container with max-width and padding controls
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.container {
  width: 100%;
  margin: 0 auto;
  background: var(--container-background, transparent);
  border: var(--container-border, none);
  border-radius: var(--container-border-radius, 0);
  box-shadow: var(--container-shadow, none);
}
.container--xs {
  max-width: 480px;
}
.container--sm {
  max-width: 640px;
}
.container--md {
  max-width: 768px;
}
.container--lg {
  max-width: 1800px;
}
.container--xl {
  max-width: 1800px;
}
.container--xxl {
  max-width: 1920px;
}
.container--fluid {
  max-width: none;
}
.container--padding {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (max-width: 479px) {
  .container--padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .container--padding {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 768px) {
  .container--padding {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1920px) {
  .container--padding {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
.container--no-padding {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 479px) {
  .container--xs-padding-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .container--xs-padding-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .container--xs-padding-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container--xs-padding-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .container--xs-padding-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container--xs-padding-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container--xs-padding-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .container--xs-padding-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container--xs-padding-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .container--xs-padding-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .container--xs-padding-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .container--xs-padding-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .container--xs-padding-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .container--xs-padding-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .container--xs-padding-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .container--xs-padding-48 {
    padding-left: 12rem;
    padding-right: 12rem;
  }
  .container--xs-padding-56 {
    padding-left: 14rem;
    padding-right: 14rem;
  }
  .container--xs-padding-64 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .container--sm-padding-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .container--sm-padding-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .container--sm-padding-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container--sm-padding-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .container--sm-padding-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container--sm-padding-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container--sm-padding-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .container--sm-padding-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container--sm-padding-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .container--sm-padding-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .container--sm-padding-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .container--sm-padding-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .container--sm-padding-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .container--sm-padding-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .container--sm-padding-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .container--sm-padding-48 {
    padding-left: 12rem;
    padding-right: 12rem;
  }
  .container--sm-padding-56 {
    padding-left: 14rem;
    padding-right: 14rem;
  }
  .container--sm-padding-64 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
@media (min-width: 768px) {
  .container--md-padding-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .container--md-padding-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .container--md-padding-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container--md-padding-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .container--md-padding-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container--md-padding-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container--md-padding-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .container--md-padding-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container--md-padding-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .container--md-padding-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .container--md-padding-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .container--md-padding-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .container--md-padding-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .container--md-padding-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .container--md-padding-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .container--md-padding-48 {
    padding-left: 12rem;
    padding-right: 12rem;
  }
  .container--md-padding-56 {
    padding-left: 14rem;
    padding-right: 14rem;
  }
  .container--md-padding-64 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
@media (min-width: 1280px) {
  .container--lg-padding-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .container--lg-padding-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .container--lg-padding-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container--lg-padding-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .container--lg-padding-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container--lg-padding-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container--lg-padding-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .container--lg-padding-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container--lg-padding-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .container--lg-padding-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .container--lg-padding-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .container--lg-padding-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .container--lg-padding-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .container--lg-padding-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .container--lg-padding-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .container--lg-padding-48 {
    padding-left: 12rem;
    padding-right: 12rem;
  }
  .container--lg-padding-56 {
    padding-left: 14rem;
    padding-right: 14rem;
  }
  .container--lg-padding-64 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
@media (min-width: 1280px) {
  .container--xl-padding-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .container--xl-padding-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .container--xl-padding-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .container--xl-padding-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .container--xl-padding-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .container--xl-padding-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .container--xl-padding-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .container--xl-padding-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .container--xl-padding-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .container--xl-padding-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .container--xl-padding-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .container--xl-padding-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .container--xl-padding-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .container--xl-padding-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .container--xl-padding-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .container--xl-padding-48 {
    padding-left: 12rem;
    padding-right: 12rem;
  }
  .container--xl-padding-56 {
    padding-left: 14rem;
    padding-right: 14rem;
  }
  .container--xl-padding-64 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
}
.container--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.container--full-height {
  min-height: 100vh;
}
.container--narrow {
  max-width: 600px;
}
.container--wide {
  max-width: 1800px;
}
@media (max-width: 479px) {
  .container--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .container--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .container--hidden-desktop {
    display: none;
  }
}
.container--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .container--visible-mobile {
    display: block;
  }
}
.container--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .container--visible-tablet {
    display: block;
  }
}
.container--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .container--visible-desktop {
    display: block;
  }
}/**
 * Row Component Styles
 * Flexible row layout with responsive gaps and alignment
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: var(--row-padding, 0);
  margin: var(--row-margin, 0);
  background: var(--row-background, transparent);
  border: var(--row-border, none);
  border-radius: var(--row-border-radius, 0);
  box-shadow: var(--row-shadow, none);
}
.row--align-start {
  align-items: flex-start;
}
.row--align-center {
  align-items: center;
}
.row--align-end {
  align-items: flex-end;
}
.row--align-stretch {
  align-items: stretch;
}
.row--align-baseline {
  align-items: baseline;
}
.row--justify-start {
  justify-content: flex-start;
}
.row--justify-center {
  justify-content: center;
}
.row--justify-end {
  justify-content: flex-end;
}
.row--justify-space-between {
  justify-content: space-between;
}
.row--justify-space-around {
  justify-content: space-around;
}
.row--justify-space-evenly {
  justify-content: space-evenly;
}
.row--wrap {
  flex-wrap: wrap;
}
.row--nowrap {
  flex-wrap: nowrap;
}
.row--reverse {
  flex-direction: row-reverse;
}
.row--gap-0 {
  gap: 0;
}
.row--gap-1 {
  gap: 0.25rem;
}
.row--gap-2 {
  gap: 0.5rem;
}
.row--gap-3 {
  gap: 0.75rem;
}
.row--gap-4 {
  gap: 1rem;
}
.row--gap-5 {
  gap: 1.25rem;
}
.row--gap-6 {
  gap: 1.5rem;
}
.row--gap-8 {
  gap: 2rem;
}
.row--gap-10 {
  gap: 2.5rem;
}
.row--gap-12 {
  gap: 3rem;
}
.row--gap-16 {
  gap: 4rem;
}
.row--gap-20 {
  gap: 5rem;
}
.row--gap-24 {
  gap: 6rem;
}
.row--gap-32 {
  gap: 8rem;
}
.row--gap-40 {
  gap: 10rem;
}
.row--gap-48 {
  gap: 12rem;
}
.row--gap-56 {
  gap: 14rem;
}
.row--gap-64 {
  gap: 16rem;
}
@media (max-width: 479px) {
  .row--xs-gap-0 {
    gap: 0;
  }
  .row--xs-gap-1 {
    gap: 0.25rem;
  }
  .row--xs-gap-2 {
    gap: 0.5rem;
  }
  .row--xs-gap-3 {
    gap: 0.75rem;
  }
  .row--xs-gap-4 {
    gap: 1rem;
  }
  .row--xs-gap-5 {
    gap: 1.25rem;
  }
  .row--xs-gap-6 {
    gap: 1.5rem;
  }
  .row--xs-gap-8 {
    gap: 2rem;
  }
  .row--xs-gap-10 {
    gap: 2.5rem;
  }
  .row--xs-gap-12 {
    gap: 3rem;
  }
  .row--xs-gap-16 {
    gap: 4rem;
  }
  .row--xs-gap-20 {
    gap: 5rem;
  }
  .row--xs-gap-24 {
    gap: 6rem;
  }
  .row--xs-gap-32 {
    gap: 8rem;
  }
  .row--xs-gap-40 {
    gap: 10rem;
  }
  .row--xs-gap-48 {
    gap: 12rem;
  }
  .row--xs-gap-56 {
    gap: 14rem;
  }
  .row--xs-gap-64 {
    gap: 16rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .row--sm-gap-0 {
    gap: 0;
  }
  .row--sm-gap-1 {
    gap: 0.25rem;
  }
  .row--sm-gap-2 {
    gap: 0.5rem;
  }
  .row--sm-gap-3 {
    gap: 0.75rem;
  }
  .row--sm-gap-4 {
    gap: 1rem;
  }
  .row--sm-gap-5 {
    gap: 1.25rem;
  }
  .row--sm-gap-6 {
    gap: 1.5rem;
  }
  .row--sm-gap-8 {
    gap: 2rem;
  }
  .row--sm-gap-10 {
    gap: 2.5rem;
  }
  .row--sm-gap-12 {
    gap: 3rem;
  }
  .row--sm-gap-16 {
    gap: 4rem;
  }
  .row--sm-gap-20 {
    gap: 5rem;
  }
  .row--sm-gap-24 {
    gap: 6rem;
  }
  .row--sm-gap-32 {
    gap: 8rem;
  }
  .row--sm-gap-40 {
    gap: 10rem;
  }
  .row--sm-gap-48 {
    gap: 12rem;
  }
  .row--sm-gap-56 {
    gap: 14rem;
  }
  .row--sm-gap-64 {
    gap: 16rem;
  }
}
@media (min-width: 768px) {
  .row--md-gap-0 {
    gap: 0;
  }
  .row--md-gap-1 {
    gap: 0.25rem;
  }
  .row--md-gap-2 {
    gap: 0.5rem;
  }
  .row--md-gap-3 {
    gap: 0.75rem;
  }
  .row--md-gap-4 {
    gap: 1rem;
  }
  .row--md-gap-5 {
    gap: 1.25rem;
  }
  .row--md-gap-6 {
    gap: 1.5rem;
  }
  .row--md-gap-8 {
    gap: 2rem;
  }
  .row--md-gap-10 {
    gap: 2.5rem;
  }
  .row--md-gap-12 {
    gap: 3rem;
  }
  .row--md-gap-16 {
    gap: 4rem;
  }
  .row--md-gap-20 {
    gap: 5rem;
  }
  .row--md-gap-24 {
    gap: 6rem;
  }
  .row--md-gap-32 {
    gap: 8rem;
  }
  .row--md-gap-40 {
    gap: 10rem;
  }
  .row--md-gap-48 {
    gap: 12rem;
  }
  .row--md-gap-56 {
    gap: 14rem;
  }
  .row--md-gap-64 {
    gap: 16rem;
  }
}
@media (min-width: 1280px) {
  .row--lg-gap-0 {
    gap: 0;
  }
  .row--lg-gap-1 {
    gap: 0.25rem;
  }
  .row--lg-gap-2 {
    gap: 0.5rem;
  }
  .row--lg-gap-3 {
    gap: 0.75rem;
  }
  .row--lg-gap-4 {
    gap: 1rem;
  }
  .row--lg-gap-5 {
    gap: 1.25rem;
  }
  .row--lg-gap-6 {
    gap: 1.5rem;
  }
  .row--lg-gap-8 {
    gap: 2rem;
  }
  .row--lg-gap-10 {
    gap: 2.5rem;
  }
  .row--lg-gap-12 {
    gap: 3rem;
  }
  .row--lg-gap-16 {
    gap: 4rem;
  }
  .row--lg-gap-20 {
    gap: 5rem;
  }
  .row--lg-gap-24 {
    gap: 6rem;
  }
  .row--lg-gap-32 {
    gap: 8rem;
  }
  .row--lg-gap-40 {
    gap: 10rem;
  }
  .row--lg-gap-48 {
    gap: 12rem;
  }
  .row--lg-gap-56 {
    gap: 14rem;
  }
  .row--lg-gap-64 {
    gap: 16rem;
  }
}
@media (min-width: 1280px) {
  .row--xl-gap-0 {
    gap: 0;
  }
  .row--xl-gap-1 {
    gap: 0.25rem;
  }
  .row--xl-gap-2 {
    gap: 0.5rem;
  }
  .row--xl-gap-3 {
    gap: 0.75rem;
  }
  .row--xl-gap-4 {
    gap: 1rem;
  }
  .row--xl-gap-5 {
    gap: 1.25rem;
  }
  .row--xl-gap-6 {
    gap: 1.5rem;
  }
  .row--xl-gap-8 {
    gap: 2rem;
  }
  .row--xl-gap-10 {
    gap: 2.5rem;
  }
  .row--xl-gap-12 {
    gap: 3rem;
  }
  .row--xl-gap-16 {
    gap: 4rem;
  }
  .row--xl-gap-20 {
    gap: 5rem;
  }
  .row--xl-gap-24 {
    gap: 6rem;
  }
  .row--xl-gap-32 {
    gap: 8rem;
  }
  .row--xl-gap-40 {
    gap: 10rem;
  }
  .row--xl-gap-48 {
    gap: 12rem;
  }
  .row--xl-gap-56 {
    gap: 14rem;
  }
  .row--xl-gap-64 {
    gap: 16rem;
  }
}
.row--equal-height {
  align-items: stretch;
}
.row--equal-height > * {
  display: flex;
  flex-direction: column;
}
.row--equal-width > * {
  flex: 1 1 0;
}
.row--center-content {
  align-items: center;
  justify-content: center;
}
.row--space-between {
  justify-content: space-between;
}
.row--space-around {
  justify-content: space-around;
}
.row--space-evenly {
  justify-content: space-evenly;
}
@media (max-width: 479px) {
  .row--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .row--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .row--hidden-desktop {
    display: none;
  }
}
.row--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .row--visible-mobile {
    display: flex;
  }
}
.row--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .row--visible-tablet {
    display: flex;
  }
}
.row--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .row--visible-desktop {
    display: flex;
  }
}
@media (max-width: 479px) {
  .row--mobile-column {
    flex-direction: column;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .row--tablet-column {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .row--desktop-row {
    flex-direction: row;
  }
}/**
 * Spacer Component Styles
 * Flexible spacing component for consistent vertical and horizontal spacing
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.spacer {
  display: block;
  flex-shrink: 0;
}
.spacer--vertical {
  width: 100%;
}
.spacer--horizontal {
  height: 100%;
  width: 0;
}
.spacer--0 {
  height: 0;
}
.spacer--1 {
  height: 0.25rem;
}
.spacer--2 {
  height: 0.5rem;
}
.spacer--3 {
  height: 0.75rem;
}
.spacer--4 {
  height: 1rem;
}
.spacer--5 {
  height: 1.25rem;
}
.spacer--6 {
  height: 1.5rem;
}
.spacer--8 {
  height: 2rem;
}
.spacer--10 {
  height: 2.5rem;
}
.spacer--12 {
  height: 3rem;
}
.spacer--16 {
  height: 4rem;
}
.spacer--20 {
  height: 5rem;
}
.spacer--24 {
  height: 6rem;
}
.spacer--32 {
  height: 8rem;
}
.spacer--40 {
  height: 10rem;
}
.spacer--48 {
  height: 12rem;
}
.spacer--56 {
  height: 14rem;
}
.spacer--64 {
  height: 16rem;
}
.spacer--72 {
  height: 18rem;
}
.spacer--80 {
  height: 20rem;
}
.spacer--96 {
  height: 24rem;
}
.spacer--horizontal.spacer--0 {
  width: 0;
  height: 0;
}
.spacer--horizontal.spacer--1 {
  width: 0.25rem;
  height: 0;
}
.spacer--horizontal.spacer--2 {
  width: 0.5rem;
  height: 0;
}
.spacer--horizontal.spacer--3 {
  width: 0.75rem;
  height: 0;
}
.spacer--horizontal.spacer--4 {
  width: 1rem;
  height: 0;
}
.spacer--horizontal.spacer--5 {
  width: 1.25rem;
  height: 0;
}
.spacer--horizontal.spacer--6 {
  width: 1.5rem;
  height: 0;
}
.spacer--horizontal.spacer--8 {
  width: 2rem;
  height: 0;
}
.spacer--horizontal.spacer--10 {
  width: 2.5rem;
  height: 0;
}
.spacer--horizontal.spacer--12 {
  width: 3rem;
  height: 0;
}
.spacer--horizontal.spacer--16 {
  width: 4rem;
  height: 0;
}
.spacer--horizontal.spacer--20 {
  width: 5rem;
  height: 0;
}
.spacer--horizontal.spacer--24 {
  width: 6rem;
  height: 0;
}
.spacer--horizontal.spacer--32 {
  width: 8rem;
  height: 0;
}
.spacer--horizontal.spacer--40 {
  width: 10rem;
  height: 0;
}
.spacer--horizontal.spacer--48 {
  width: 12rem;
  height: 0;
}
.spacer--horizontal.spacer--56 {
  width: 14rem;
  height: 0;
}
.spacer--horizontal.spacer--64 {
  width: 16rem;
  height: 0;
}
.spacer--horizontal.spacer--72 {
  width: 18rem;
  height: 0;
}
.spacer--horizontal.spacer--80 {
  width: 20rem;
  height: 0;
}
.spacer--horizontal.spacer--96 {
  width: 24rem;
  height: 0;
}
@media (max-width: 479px) {
  .spacer--xs-0 {
    height: 0;
  }
  .spacer--xs-1 {
    height: 0.25rem;
  }
  .spacer--xs-2 {
    height: 0.5rem;
  }
  .spacer--xs-3 {
    height: 0.75rem;
  }
  .spacer--xs-4 {
    height: 1rem;
  }
  .spacer--xs-5 {
    height: 1.25rem;
  }
  .spacer--xs-6 {
    height: 1.5rem;
  }
  .spacer--xs-8 {
    height: 2rem;
  }
  .spacer--xs-10 {
    height: 2.5rem;
  }
  .spacer--xs-12 {
    height: 3rem;
  }
  .spacer--xs-16 {
    height: 4rem;
  }
  .spacer--xs-20 {
    height: 5rem;
  }
  .spacer--xs-24 {
    height: 6rem;
  }
  .spacer--xs-32 {
    height: 8rem;
  }
  .spacer--xs-40 {
    height: 10rem;
  }
  .spacer--xs-48 {
    height: 12rem;
  }
  .spacer--xs-56 {
    height: 14rem;
  }
  .spacer--xs-64 {
    height: 16rem;
  }
  .spacer--xs-72 {
    height: 18rem;
  }
  .spacer--xs-80 {
    height: 20rem;
  }
  .spacer--xs-96 {
    height: 24rem;
  }
  .spacer--horizontal.spacer--xs-0 {
    width: 0;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-1 {
    width: 0.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-2 {
    width: 0.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-3 {
    width: 0.75rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-4 {
    width: 1rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-5 {
    width: 1.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-6 {
    width: 1.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-8 {
    width: 2rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-10 {
    width: 2.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-12 {
    width: 3rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-16 {
    width: 4rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-20 {
    width: 5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-24 {
    width: 6rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-32 {
    width: 8rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-40 {
    width: 10rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-48 {
    width: 12rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-56 {
    width: 14rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-64 {
    width: 16rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-72 {
    width: 18rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-80 {
    width: 20rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xs-96 {
    width: 24rem;
    height: 0;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .spacer--sm-0 {
    height: 0;
  }
  .spacer--sm-1 {
    height: 0.25rem;
  }
  .spacer--sm-2 {
    height: 0.5rem;
  }
  .spacer--sm-3 {
    height: 0.75rem;
  }
  .spacer--sm-4 {
    height: 1rem;
  }
  .spacer--sm-5 {
    height: 1.25rem;
  }
  .spacer--sm-6 {
    height: 1.5rem;
  }
  .spacer--sm-8 {
    height: 2rem;
  }
  .spacer--sm-10 {
    height: 2.5rem;
  }
  .spacer--sm-12 {
    height: 3rem;
  }
  .spacer--sm-16 {
    height: 4rem;
  }
  .spacer--sm-20 {
    height: 5rem;
  }
  .spacer--sm-24 {
    height: 6rem;
  }
  .spacer--sm-32 {
    height: 8rem;
  }
  .spacer--sm-40 {
    height: 10rem;
  }
  .spacer--sm-48 {
    height: 12rem;
  }
  .spacer--sm-56 {
    height: 14rem;
  }
  .spacer--sm-64 {
    height: 16rem;
  }
  .spacer--sm-72 {
    height: 18rem;
  }
  .spacer--sm-80 {
    height: 20rem;
  }
  .spacer--sm-96 {
    height: 24rem;
  }
  .spacer--horizontal.spacer--sm-0 {
    width: 0;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-1 {
    width: 0.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-2 {
    width: 0.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-3 {
    width: 0.75rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-4 {
    width: 1rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-5 {
    width: 1.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-6 {
    width: 1.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-8 {
    width: 2rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-10 {
    width: 2.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-12 {
    width: 3rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-16 {
    width: 4rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-20 {
    width: 5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-24 {
    width: 6rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-32 {
    width: 8rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-40 {
    width: 10rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-48 {
    width: 12rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-56 {
    width: 14rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-64 {
    width: 16rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-72 {
    width: 18rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-80 {
    width: 20rem;
    height: 0;
  }
  .spacer--horizontal.spacer--sm-96 {
    width: 24rem;
    height: 0;
  }
}
@media (min-width: 768px) {
  .spacer--md-0 {
    height: 0;
  }
  .spacer--md-1 {
    height: 0.25rem;
  }
  .spacer--md-2 {
    height: 0.5rem;
  }
  .spacer--md-3 {
    height: 0.75rem;
  }
  .spacer--md-4 {
    height: 1rem;
  }
  .spacer--md-5 {
    height: 1.25rem;
  }
  .spacer--md-6 {
    height: 1.5rem;
  }
  .spacer--md-8 {
    height: 2rem;
  }
  .spacer--md-10 {
    height: 2.5rem;
  }
  .spacer--md-12 {
    height: 3rem;
  }
  .spacer--md-16 {
    height: 4rem;
  }
  .spacer--md-20 {
    height: 5rem;
  }
  .spacer--md-24 {
    height: 6rem;
  }
  .spacer--md-32 {
    height: 8rem;
  }
  .spacer--md-40 {
    height: 10rem;
  }
  .spacer--md-48 {
    height: 12rem;
  }
  .spacer--md-56 {
    height: 14rem;
  }
  .spacer--md-64 {
    height: 16rem;
  }
  .spacer--md-72 {
    height: 18rem;
  }
  .spacer--md-80 {
    height: 20rem;
  }
  .spacer--md-96 {
    height: 24rem;
  }
  .spacer--horizontal.spacer--md-0 {
    width: 0;
    height: 0;
  }
  .spacer--horizontal.spacer--md-1 {
    width: 0.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-2 {
    width: 0.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-3 {
    width: 0.75rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-4 {
    width: 1rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-5 {
    width: 1.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-6 {
    width: 1.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-8 {
    width: 2rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-10 {
    width: 2.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-12 {
    width: 3rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-16 {
    width: 4rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-20 {
    width: 5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-24 {
    width: 6rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-32 {
    width: 8rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-40 {
    width: 10rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-48 {
    width: 12rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-56 {
    width: 14rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-64 {
    width: 16rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-72 {
    width: 18rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-80 {
    width: 20rem;
    height: 0;
  }
  .spacer--horizontal.spacer--md-96 {
    width: 24rem;
    height: 0;
  }
}
@media (min-width: 1280px) {
  .spacer--lg-0 {
    height: 0;
  }
  .spacer--lg-1 {
    height: 0.25rem;
  }
  .spacer--lg-2 {
    height: 0.5rem;
  }
  .spacer--lg-3 {
    height: 0.75rem;
  }
  .spacer--lg-4 {
    height: 1rem;
  }
  .spacer--lg-5 {
    height: 1.25rem;
  }
  .spacer--lg-6 {
    height: 1.5rem;
  }
  .spacer--lg-8 {
    height: 2rem;
  }
  .spacer--lg-10 {
    height: 2.5rem;
  }
  .spacer--lg-12 {
    height: 3rem;
  }
  .spacer--lg-16 {
    height: 4rem;
  }
  .spacer--lg-20 {
    height: 5rem;
  }
  .spacer--lg-24 {
    height: 6rem;
  }
  .spacer--lg-32 {
    height: 8rem;
  }
  .spacer--lg-40 {
    height: 10rem;
  }
  .spacer--lg-48 {
    height: 12rem;
  }
  .spacer--lg-56 {
    height: 14rem;
  }
  .spacer--lg-64 {
    height: 16rem;
  }
  .spacer--lg-72 {
    height: 18rem;
  }
  .spacer--lg-80 {
    height: 20rem;
  }
  .spacer--lg-96 {
    height: 24rem;
  }
  .spacer--horizontal.spacer--lg-0 {
    width: 0;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-1 {
    width: 0.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-2 {
    width: 0.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-3 {
    width: 0.75rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-4 {
    width: 1rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-5 {
    width: 1.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-6 {
    width: 1.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-8 {
    width: 2rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-10 {
    width: 2.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-12 {
    width: 3rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-16 {
    width: 4rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-20 {
    width: 5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-24 {
    width: 6rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-32 {
    width: 8rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-40 {
    width: 10rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-48 {
    width: 12rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-56 {
    width: 14rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-64 {
    width: 16rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-72 {
    width: 18rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-80 {
    width: 20rem;
    height: 0;
  }
  .spacer--horizontal.spacer--lg-96 {
    width: 24rem;
    height: 0;
  }
}
@media (min-width: 1280px) {
  .spacer--xl-0 {
    height: 0;
  }
  .spacer--xl-1 {
    height: 0.25rem;
  }
  .spacer--xl-2 {
    height: 0.5rem;
  }
  .spacer--xl-3 {
    height: 0.75rem;
  }
  .spacer--xl-4 {
    height: 1rem;
  }
  .spacer--xl-5 {
    height: 1.25rem;
  }
  .spacer--xl-6 {
    height: 1.5rem;
  }
  .spacer--xl-8 {
    height: 2rem;
  }
  .spacer--xl-10 {
    height: 2.5rem;
  }
  .spacer--xl-12 {
    height: 3rem;
  }
  .spacer--xl-16 {
    height: 4rem;
  }
  .spacer--xl-20 {
    height: 5rem;
  }
  .spacer--xl-24 {
    height: 6rem;
  }
  .spacer--xl-32 {
    height: 8rem;
  }
  .spacer--xl-40 {
    height: 10rem;
  }
  .spacer--xl-48 {
    height: 12rem;
  }
  .spacer--xl-56 {
    height: 14rem;
  }
  .spacer--xl-64 {
    height: 16rem;
  }
  .spacer--xl-72 {
    height: 18rem;
  }
  .spacer--xl-80 {
    height: 20rem;
  }
  .spacer--xl-96 {
    height: 24rem;
  }
  .spacer--horizontal.spacer--xl-0 {
    width: 0;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-1 {
    width: 0.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-2 {
    width: 0.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-3 {
    width: 0.75rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-4 {
    width: 1rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-5 {
    width: 1.25rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-6 {
    width: 1.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-8 {
    width: 2rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-10 {
    width: 2.5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-12 {
    width: 3rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-16 {
    width: 4rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-20 {
    width: 5rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-24 {
    width: 6rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-32 {
    width: 8rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-40 {
    width: 10rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-48 {
    width: 12rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-56 {
    width: 14rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-64 {
    width: 16rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-72 {
    width: 18rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-80 {
    width: 20rem;
    height: 0;
  }
  .spacer--horizontal.spacer--xl-96 {
    width: 24rem;
    height: 0;
  }
}
.spacer--auto {
  flex: 1 1 auto;
}
.spacer--flex {
  display: flex;
}
.spacer--inline-flex {
  display: inline-flex;
}
@media (max-width: 479px) {
  .spacer--hidden-mobile {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .spacer--hidden-tablet {
    display: none;
  }
}
@media (min-width: 768px) {
  .spacer--hidden-desktop {
    display: none;
  }
}
.spacer--visible-mobile {
  display: none;
}
@media (max-width: 479px) {
  .spacer--visible-mobile {
    display: block;
  }
}
.spacer--visible-tablet {
  display: none;
}
@media (min-width: 480px) and (max-width: 767px) {
  .spacer--visible-tablet {
    display: block;
  }
}
.spacer--visible-desktop {
  display: none;
}
@media (min-width: 768px) {
  .spacer--visible-desktop {
    display: block;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.section-header, .fp-section__header,
.section-header-premium {
  margin-bottom: 3rem;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 479px) {
  .section-header, .fp-section__header,
  .section-header-premium {
    margin-bottom: 2rem;
  }
}
.section-header--left {
  text-align: left;
}
.section-header--center, .fp-section__header,
.section-header-premium {
  text-align: center;
}
.section-header--right {
  text-align: right;
}
.section-header--default .section-label {
  color: hsl(24, 100%, 60%);
}
.section-header--default .section-title-premium {
  color: #ffffff;
}
.section-header--default .section-subtitle, .section-header--default .section-subtitle-centered {
  color: hsl(210, 20%, 82%);
}
.section-header--dark .section-label {
  color: hsl(24, 100%, 50%);
}
.section-header--dark .section-title-premium {
  color: hsl(210, 20%, 7%);
}
.section-header--dark .section-subtitle, .section-header--dark .section-subtitle-centered {
  color: hsl(210, 20%, 32%);
}
.section-header--light .section-label {
  color: hsl(24, 100%, 72%);
}
.section-header--light .section-title-premium {
  color: #ffffff;
}
.section-header--light .section-subtitle, .section-header--light .section-subtitle-centered {
  color: hsl(210, 20%, 90%);
}

.section-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: hsl(24, 100%, 60%);
  margin-bottom: 1rem;
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 479px) {
  .section-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
  }
}

.section-title-premium {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  display: block;
}
.section-title-premium::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 3px;
  background: linear-gradient(90deg, hsl(24, 100%, 60%) 0%, hsl(24, 100%, 72%) 100%);
  border-radius: 2px;
}
.section-header--left .section-title-premium::after {
  left: 0;
  transform: none;
}
.section-header--right .section-title-premium::after {
  left: auto;
  right: 0;
  transform: none;
}
.section-header--center .section-title-premium::after, .fp-section__header .section-title-premium::after,
.section-header-premium .section-title-premium::after {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 479px) {
  .section-title-premium {
    margin-bottom: 1rem;
  }
  .section-title-premium::after {
    width: 3rem;
    height: 2px;
    bottom: -0.375rem;
  }
}

.section-subtitle, .section-subtitle-centered {
  font-size: 1.125rem;
  line-height: 1.7;
  color: hsl(210, 20%, 82%);
  margin: 0;
  max-width: 42rem;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.section-subtitle--left {
  margin-left: 0;
  margin-right: auto;
}
.section-subtitle--center, .section-subtitle-centered, .section-subtitle--centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-subtitle--right {
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 479px) {
  .section-subtitle, .section-subtitle-centered {
    font-size: 1rem;
    line-height: 1.6;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .section-subtitle, .section-subtitle-centered {
    font-size: 1.0625rem;
  }
}/**
 * Loading State Component Styles
 * 
 * Provides full-page and inline loading states
 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.loading-state--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 9999;
  min-height: 100vh;
}
.loading-state--inline {
  min-height: auto;
  padding: 2rem 0;
}
.loading-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.loading-state__message {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
}
.loading-state--inline .loading-state__message {
  color: #d1d5db;
}
.loading-state--error .loading-state__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.loading-state--error .loading-state__error-icon {
  font-size: 2rem;
  opacity: 0.8;
}
.loading-state--error .loading-state__error-message {
  color: #ef4444;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
.loading-state--empty .loading-state__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.loading-state--empty .loading-state__empty-icon {
  font-size: 2rem;
  opacity: 0.6;
}
.loading-state--empty .loading-state__empty-message {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
}
.error-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 400px;
}
.error-state__icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.error-state__title {
  color: #ef4444;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.error-state__message {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}
.error-state__retry-btn {
  background: #ea580c;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.error-state__retry-btn:hover {
  background: #dc2626;
}
.error-state__retry-btn:focus {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
}
.empty-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 400px;
}
.empty-state__icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}
.empty-state__title {
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.empty-state__message {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}
.empty-state__action {
  margin-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .loading-state--inline .loading-state__message {
    color: #d1d5db;
  }
  .error-state__title {
    color: #f87171;
  }
  .error-state__message {
    color: #9ca3af;
  }
  .empty-state__title {
    color: #f3f4f6;
  }
  .empty-state__message {
    color: #9ca3af;
  }
}
@media (max-width: 768px) {
  .loading-state__message {
    font-size: 1rem;
  }
  .error-state,
  .empty-state {
    padding: 1rem;
  }
  .error-state__content,
  .empty-state__content {
    max-width: 300px;
  }
  .error-state__icon,
  .empty-state__icon {
    font-size: 2.5rem;
  }
  .error-state__title,
  .empty-state__title {
    font-size: 1.125rem;
  }
  .error-state__message,
  .empty-state__message {
    font-size: 0.875rem;
  }
}/**
 * LoadingSpinner Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.loading-spinner {
  display: inline-block;
  position: relative;
}
.loading-spinner__circle {
  border-radius: 50%;
  border-style: solid;
  animation: spin 1s linear infinite;
}
.loading-spinner--small {
  width: 16px;
  height: 16px;
}
.loading-spinner--small .loading-spinner__circle {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.loading-spinner--medium {
  width: 24px;
  height: 24px;
}
.loading-spinner--medium .loading-spinner__circle {
  width: 24px;
  height: 24px;
  border-width: 3px;
}
.loading-spinner--large {
  width: 32px;
  height: 32px;
}
.loading-spinner--large .loading-spinner__circle {
  width: 32px;
  height: 32px;
  border-width: 4px;
}
.loading-spinner--primary .loading-spinner__circle {
  border-color: hsl(24, 100%, 60%) transparent hsl(24, 100%, 60%) transparent;
}
.loading-spinner--secondary .loading-spinner__circle {
  border-color: hsl(220, 70%, 50%) transparent hsl(220, 70%, 50%) transparent;
}
.loading-spinner--white .loading-spinner__circle {
  border-color: #ffffff transparent #ffffff transparent;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner__circle {
    animation: none;
    border-color: hsl(24, 100%, 60%);
  }
}/**
 * Preloader Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background, #ffffff);
  z-index: 9999;
  pointer-events: none;
}
.preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.preloader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader__text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}/**
 * SkeletonLoader Styles
 * 
 * Skeleton loading animations and variants
 */
.skeleton-loader-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.skeleton-loader {
  background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  display: block;
  position: relative;
  overflow: hidden;
}
.skeleton-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-loader--text {
  height: 1rem;
  border-radius: 4px;
}
.skeleton-loader--title {
  height: 1.5rem;
  border-radius: 4px;
}
.skeleton-loader--avatar {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.skeleton-loader--button {
  height: 2.5rem;
  border-radius: 6px;
  width: 8rem;
}
.skeleton-loader--card {
  height: 12rem;
  border-radius: 8px;
}
.skeleton-loader--image {
  height: 200px;
  border-radius: 8px;
}
.skeleton-loader--list {
  height: 3rem;
  border-radius: 4px;
}
.skeleton-loader--table {
  height: 2rem;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.skeleton-card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 1rem;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.skeleton-card__content {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skeleton-list__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}
.skeleton-list__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.skeleton-table {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
.skeleton-table__header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: #1e293b;
  border-bottom: 1px solid #cbd5e1;
}
.skeleton-table__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.skeleton-table__row:last-child {
  border-bottom: none;
}

.skeleton-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
}
.skeleton-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skeleton-form__button {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (prefers-color-scheme: dark) {
  .skeleton-loader {
    background: linear-gradient(90deg, #334155 25%, #1e293b 50%, #334155 75%);
    background-size: 200% 100%;
  }
  .skeleton-loader::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }
  .skeleton-card,
  .skeleton-table,
  .skeleton-form {
    background: #0f172a;
    border-color: #1e293b;
  }
  .skeleton-table__header {
    background: #334155;
    border-color: #1e293b;
  }
  .skeleton-table__row {
    border-color: #1e293b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-loader::before {
    animation: none;
  }
  @keyframes skeleton-shimmer {
    0%, 100% {
      transform: translateX(0);
    }
  }
}
@media (max-width: 768px) {
  .skeleton-card {
    padding: 0.75rem;
  }
  .skeleton-list__item {
    gap: 0.75rem;
  }
  .skeleton-table__header, .skeleton-table__row {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .skeleton-form {
    padding: 0.75rem;
    gap: 1rem;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9998;
  overflow: hidden;
  overscroll-behavior: contain;
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e293b;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  cursor: default;
}
.modal--sm {
  width: 100%;
  max-width: 400px;
}
.modal--md {
  width: 100%;
  max-width: 600px;
}
.modal--lg {
  width: 100%;
  max-width: 800px;
}
.modal--xl {
  width: 100%;
  max-width: 1000px;
}
.modal--full {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
}
.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #334155;
  background: #475569;
}
.modal .modal-header .modal-title {
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: #1f2937;
}
@media (max-width: 479px) {
  .modal .modal-header .modal-title {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  }
}
.modal .modal-header .modal-title {
  color: #f1f5f9;
  margin: 0;
}
.modal .modal-header .modal-close-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}
.modal .modal-header .modal-close-button:hover {
  background: #475569;
  color: #f1f5f9;
}
.modal .modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}
.modal .modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal .modal-content::-webkit-scrollbar-track {
  background: #1e293b;
}
.modal .modal-content::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}
.modal .modal-content::-webkit-scrollbar-thumb:hover {
  background: #334155;
}
@media (prefers-color-scheme: dark) {
  .modal {
    background: #1e293b;
    color: #f1f5f9;
  }
  .modal .modal-header {
    background: #0f172a;
    border-bottom-color: #334155;
  }
  .modal .modal-header .modal-title {
    color: #f1f5f9;
  }
  .modal .modal-header .modal-close-button {
    color: #94a3b8;
  }
  .modal .modal-header .modal-close-button:hover {
    background: #334155;
    color: #e2e8f0;
  }
  .modal .modal-content::-webkit-scrollbar-track {
    background: #334155;
  }
  .modal .modal-content::-webkit-scrollbar-thumb {
    background: #475569;
  }
  .modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
  }
}

@media (max-width: 479px) {
  .modal-backdrop {
    padding: 0.5rem;
  }
  .modal {
    border-radius: 12px;
    max-height: 95vh;
  }
  .modal .modal-header {
    padding: 1rem 1.5rem;
  }
  .modal .modal-header .modal-title {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  }
  .modal .modal-content {
    padding: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal * {
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .modal {
    border: 2px solid #0f172a;
  }
  .modal .modal-header {
    border-bottom-width: 2px;
  }
}/**
 * FilterModal Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.filter-modal .modal-content {
  padding: 0;
}

.filter-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
}

.filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 132.6, 51, 0.2);
}
.filter-modal-header h2 {
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  font-weight: 600;
  line-height: 1.375;
  color: #1f2937;
}
@media (max-width: 479px) {
  .filter-modal-header h2 {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  }
}
.filter-modal-header h2 {
  margin: 0;
  color: hsl(210, 20%, 96%);
}

.filter-modal-close {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44.88, 56.1, 67.32, 0.5);
  border: 1px solid hsl(210, 20%, 32%);
  border-radius: 50%;
  color: hsl(210, 20%, 82%);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.filter-modal-close:hover {
  background: rgba(255, 132.6, 51, 0.2);
  border-color: hsl(24, 100%, 60%);
  color: hsl(24, 100%, 60%);
  transform: rotate(90deg);
}
.filter-modal-close svg {
  font-size: 1.2rem;
}

.filter-modal-search {
  position: relative;
  display: flex;
  align-items: center;
}

.filter-modal-search-icon {
  position: absolute;
  left: 1rem;
  color: hsl(210, 20%, 64%);
  font-size: 1rem;
  pointer-events: none;
}

.filter-modal-search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  background: rgba(28.56, 35.7, 42.84, 0.5);
  border: 2px solid hsl(210, 20%, 32%);
  border-radius: 0.5rem;
  color: hsl(210, 20%, 96%);
  font-size: 1rem;
  transition: all 150ms ease-in-out;
}
.filter-modal-search-input:focus {
  outline: none;
  border-color: hsl(24, 100%, 60%);
  background: rgba(28.56, 35.7, 42.84, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.1);
}
.filter-modal-search-input::-moz-placeholder {
  color: hsl(210, 20%, 45%);
}
.filter-modal-search-input::placeholder {
  color: hsl(210, 20%, 45%);
}

.filter-modal-categories h3 {
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.375;
  color: #1f2937;
}
@media (max-width: 479px) {
  .filter-modal-categories h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  }
}
.filter-modal-categories h3 {
  margin: 0 0 1rem 0;
  color: hsl(210, 20%, 90%);
}

.filter-modal-category-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.filter-modal-category-list::-webkit-scrollbar {
  width: 6px;
}
.filter-modal-category-list::-webkit-scrollbar-track {
  background: hsl(210, 20%, 14%);
  border-radius: 3px;
}
.filter-modal-category-list::-webkit-scrollbar-thumb {
  background: hsl(210, 20%, 32%);
  border-radius: 3px;
}
.filter-modal-category-list::-webkit-scrollbar-thumb:hover {
  background: hsl(210, 20%, 45%);
}

.filter-modal-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: rgba(28.56, 35.7, 42.84, 0.3);
  border: 2px solid transparent;
  border-radius: 0.375rem;
  color: hsl(210, 20%, 82%);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  text-align: left;
}
.filter-modal-category-item:hover {
  background: rgba(44.88, 56.1, 67.32, 0.5);
  border-color: hsl(210, 20%, 32%);
  color: hsl(210, 20%, 96%);
}
.filter-modal-category-item.active {
  background: rgba(255, 132.6, 51, 0.1);
  border-color: hsl(24, 100%, 60%);
  color: hsl(24, 100%, 60%);
}
.filter-modal-category-item.active .filter-modal-category-count {
  background: rgba(255, 132.6, 51, 0.2);
  color: hsl(24, 100%, 60%);
}

.filter-modal-category-name {
  font-weight: 500;
  font-size: 1rem;
}

.filter-modal-category-count {
  padding: 0.25rem 0.75rem;
  background: rgba(44.88, 56.1, 67.32, 0.5);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(210, 20%, 64%);
  transition: all 150ms ease-in-out;
}

.filter-modal-custom {
  padding-top: 1rem;
  border-top: 1px solid hsl(210, 20%, 22%);
}

.filter-modal-actions {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 132.6, 51, 0.2);
}

.filter-modal-reset,
.filter-modal-apply {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.filter-modal-reset {
  background: transparent;
  border: 2px solid hsl(210, 20%, 32%);
  color: hsl(210, 20%, 82%);
}
.filter-modal-reset:hover {
  background: rgba(44.88, 56.1, 67.32, 0.3);
  border-color: hsl(210, 20%, 45%);
  color: hsl(210, 20%, 96%);
}

.filter-modal-apply {
  background: hsl(24, 100%, 60%);
  border: 2px solid hsl(24, 100%, 60%);
  color: white;
}
.filter-modal-apply:hover {
  background: hsl(24, 100%, 50%);
  border-color: hsl(24, 100%, 50%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 132.6, 51, 0.3);
}
.filter-modal-apply:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .filter-modal-content {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .filter-modal-actions {
    flex-direction: column;
  }
}
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.grid-section {
  padding: 6rem 0;
}
@media (max-width: 479px) {
  .grid-section {
    padding: 3rem 0;
  }
}
.grid-section__header {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 4rem;
}
@media (max-width: 479px) {
  .grid-section__header {
    margin-bottom: 3rem;
  }
}
.grid-section__title {
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  font-weight: 700;
  color: hsl(210, 20%, 7%);
  margin-bottom: 1rem;
}
@media (max-width: 479px) {
  .grid-section__title {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  }
}
.grid-section__subtitle {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  color: hsl(210, 20%, 32%);
  line-height: 1.625;
}
@media (max-width: 479px) {
  .grid-section__subtitle {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  }
}
.grid-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile, 1), 1fr);
  gap: var(--grid-gap);
}
.grid-section__grid--sm {
  --grid-gap: 1rem;
}
.grid-section__grid--md {
  --grid-gap: 1.5rem;
}
.grid-section__grid--lg {
  --grid-gap: 2rem;
}
.grid-section__grid--xl {
  --grid-gap: 3rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .grid-section__grid {
    grid-template-columns: repeat(var(--grid-columns-tablet, 2), 1fr);
  }
}
@media (min-width: 768px) {
  .grid-section__grid {
    grid-template-columns: repeat(var(--grid-columns-desktop, 3), 1fr);
  }
}
.grid-section__item {
  height: 100%;
}
.grid-section__skeleton {
  background: hsl(210, 20%, 96%);
  border-radius: 0.75rem;
  overflow: hidden;
  animation: pulse 2s ease-in-out infinite;
}
.grid-section__skeleton .skeleton__image {
  width: 100%;
  height: 200px;
  background: hsl(210, 20%, 90%);
}
.grid-section__skeleton .skeleton__title {
  height: 1.5rem;
  background: hsl(210, 20%, 82%);
  margin: 1rem 1.5rem;
  border-radius: 0.125rem;
}
.grid-section__skeleton .skeleton__text {
  height: 1rem;
  background: hsl(210, 20%, 90%);
  margin: 0.5rem 1.5rem;
  border-radius: 0.125rem;
  width: 80%;
}
.grid-section__skeleton .skeleton__button {
  height: 2.5rem;
  background: hsl(210, 20%, 82%);
  margin: 1.5rem;
  border-radius: 0.375rem;
}
.grid-section__empty {
  text-align: center;
  padding: 6rem 0;
}
@media (max-width: 479px) {
  .grid-section__empty {
    padding: 4rem 0;
  }
}
.grid-section__empty-title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  font-weight: 700;
  color: hsl(210, 20%, 22%);
  margin-bottom: 1rem;
}
@media (max-width: 479px) {
  .grid-section__empty-title {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  }
}
.grid-section__empty-text {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  color: hsl(210, 20%, 45%);
}
.grid-section__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}
.grid-section__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(245, 158, 11, 0.08) 50%, rgba(59, 130, 246, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
}
.grid-section__card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(249, 115, 22, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
}
.grid-section__card:hover::before {
  opacity: 1;
}

.grid-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: hsl(210, 20%, 96%);
}
@media (max-width: 479px) {
  .grid-card__image-wrapper {
    height: 180px;
  }
}
.grid-card__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.4s ease;
}
.grid-section__card:hover .grid-card__image {
  transform: scale(1.05);
}
.grid-card__icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 479px) {
  .grid-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  }
}
.grid-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 479px) {
  .grid-card__content {
    padding: 1rem;
  }
}
.grid-card__title {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
@media (max-width: 479px) {
  .grid-card__title {
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  }
}
.grid-card__description {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.625;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.grid-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.grid-card__feature {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: rgba(255, 255, 255, 0.85);
  padding-left: 1rem;
  margin-bottom: 0.25rem;
  position: relative;
}
.grid-card__feature::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
}
.grid-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
}
.grid-card__category {
  color: #f97316;
  font-weight: 500;
  background: rgba(249, 115, 22, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
}
.grid-card__price {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}
.grid-card__rating {
  color: #fbbf24;
  font-weight: 500;
}
.grid-card__action {
  margin-top: auto;
}
.grid-card__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.grid-card__button:hover {
  transform: translateX(4px);
}
.grid-card__button button {
  width: 100%;
  background: hsl(24, 100%, 50%);
  color: white;
  border: 2px solid hsl(24, 100%, 50%);
  font-weight: 600;
  padding: 0.5rem 1.5rem;
}
.grid-card__button button:hover {
  background: hsl(24, 100%, 42%);
  border-color: hsl(24, 100%, 42%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.grid-card__button-icon {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  transition: transform 0.3s ease;
}
.grid-card__button:hover .grid-card__button-icon {
  transform: translateX(4px);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (max-width: 479px) {
  .grid-section__grid {
    gap: 1rem;
  }
  .grid-card__content {
    padding: 1rem;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.display {
  width: 100%;
}
.display--grid .display-items {
  display: grid;
  gap: 1.5rem;
}
.display--list .display-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.display--card .display-items {
  display: grid;
  gap: 1.5rem;
}
.display--compact .display-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.display-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}
@media (max-width: 479px) {
  .display-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}
.display-controls__search {
  flex: 1;
}
.display-controls__search-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  color: #1f2937;
  background: #ffffff;
  transition: all 300ms ease-in-out;
}
.display-controls__search-input:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(255, 132.6, 51, 0.1);
}
.display-controls__search-input::-moz-placeholder {
  color: #6b7280;
}
.display-controls__search-input::placeholder {
  color: #6b7280;
}
.display-controls__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.display-controls__sort-select {
  padding: 0.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  color: #1f2937;
  background: #ffffff;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.display-controls__sort-select:focus {
  outline: none;
  border-color: #f97316;
}

.display-items--grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .display-items--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .display-items--grid {
    grid-template-columns: 1fr;
  }
}
.display-items--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.display-items--card {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .display-items--card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .display-items--card {
    grid-template-columns: 1fr;
  }
}
.display-items--compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.display-item {
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.display-item:hover {
  transform: translateY(-2px);
}

.display-card {
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}
.display-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.display-card__image {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.display-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 300ms ease-in-out;
}
.display-card__image:hover img {
  transform: scale(1.05);
}
.display-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.display-card:hover .display-card__overlay {
  opacity: 1;
}
.display-card__content {
  padding: 1.5rem;
}
.display-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.display-card__title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.25;
}
.display-card__description {
  color: #4b5563;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  margin: 0.5rem 0;
}
.display-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.display-card__meta-item {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: #6b7280;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.display-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.display-list-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
}
@media (max-width: 479px) {
  .display-list-item__content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}
.display-list-item__main {
  flex: 1;
}
.display-list-item__title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}
.display-list-item__description {
  color: #4b5563;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
}
.display-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.display-list-item__meta-item {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: #6b7280;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.display-list-item__actions {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 479px) {
  .display-list-item__actions {
    justify-content: center;
  }
}

.display-compact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #ffffff;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  transition: all 300ms ease-in-out;
}
.display-compact-item:hover {
  background: #ffffff;
  border-color: rgba(249, 115, 22, 0.3);
}
.display-compact-item__content {
  flex: 1;
}
.display-compact-item__title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  font-weight: 500;
  color: #1f2937;
  margin: 0 0 0.25rem 0;
}
.display-compact-item__description {
  color: #4b5563;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  line-height: 1.5;
  margin: 0;
}
.display-compact-item__actions {
  display: flex;
  gap: 0.5rem;
}

.display-grid-item {
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}
.display-grid-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.display-grid-item__image {
  height: 150px;
  overflow: hidden;
}
.display-grid-item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 300ms ease-in-out;
}
.display-grid-item__image:hover img {
  transform: scale(1.05);
}
.display-grid-item__content {
  padding: 1.5rem;
}
.display-grid-item__title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}
.display-grid-item__description {
  color: #4b5563;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.5;
  margin: 0 0 1rem 0;
}
.display-grid-item__actions {
  display: flex;
  gap: 0.5rem;
}

.display-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
}
.display-pagination__info {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: #4b5563;
  padding: 0 1rem;
}

.display-error,
.display-empty {
  text-align: center;
  padding: 3rem;
}
.display-error h3,
.display-empty h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}
.display-error p,
.display-empty p {
  color: #4b5563;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  margin: 0 0 1.5rem 0;
}

@media (max-width: 479px) {
  .display-controls {
    padding: 0.5rem;
  }
  .display-controls__search-input {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  }
  .display-card__content,
  .display-grid-item__content {
    padding: 1rem;
  }
  .display-card__title,
  .display-grid-item__title {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  }
  .display-list-item__content {
    padding: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .display-item,
  .display-card,
  .display-grid-item,
  .display-compact-item {
    transition: none;
  }
  .display-item:hover,
  .display-card:hover,
  .display-grid-item:hover,
  .display-compact-item:hover {
    transform: none;
  }
  .display-card__image img,
  .display-grid-item__image img {
    transition: none;
  }
  .display-card__image img:hover,
  .display-grid-item__image img:hover {
    transform: none;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.hero-premium {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  padding-bottom: 2.5rem;
}
.hero-premium .hero-cursor-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s ease;
}
.hero-premium .hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 50%, rgba(51, 65, 85, 0.8) 100%);
  z-index: 2;
}
.hero-premium .hero-gradient-mesh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  animation: gradient-shift 8s ease-in-out infinite;
  z-index: 3;
}
.hero-premium .hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}
.hero-premium .hero-content .hero-content-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}
.hero-premium .hero-content .hero-heading .hero-title {
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  color: white;
  margin: 0;
}
.hero-premium .hero-content .hero-heading .hero-title .hero-title-primary {
  display: block;
  font-size: clamp(2.5rem, 8vw, 5rem);
  background: linear-gradient(135deg, #f97316, #f59e0b, #eab308);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.hero-premium .hero-content .hero-heading .hero-title .hero-title-secondary {
  display: block;
  font-size: clamp(2rem, 6vw, 4rem);
  color: white;
  margin-bottom: 0.5rem;
}
.hero-premium .hero-content .hero-heading .hero-title .hero-title-tertiary {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}
.hero-premium .hero-content .hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0;
}
.hero-premium .hero-content .hero-features {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-premium .hero-content .hero-features .feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
}
.hero-premium .hero-content .hero-features .feature-item .feature-icon {
  color: #f59e0b;
  font-size: 1rem;
}
.hero-premium .hero-content .hero-features .feature-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
@media (max-width: 479px) {
  .hero-premium .hero-content .hero-features {
    gap: 1rem;
  }
  .hero-premium .hero-content .hero-features .feature-item {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }
}
.hero-premium .hero-content .hero-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-premium .hero-content .hero-actions .hero-btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 50%, #eab308 100%);
  color: white !important;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}
.hero-premium .hero-content .hero-actions .hero-btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.4);
}
.hero-premium .hero-content .hero-actions .hero-btn-primary .btn-icon {
  transition: transform 0.3s ease;
}
.hero-premium .hero-content .hero-actions .hero-btn-primary:hover .btn-icon {
  transform: translateX(4px);
}
.hero-premium .hero-content .hero-actions .hero-btn-primary span, .hero-premium .hero-content .hero-actions .hero-btn-primary a, .hero-premium .hero-content .hero-actions .hero-btn-primary .button__text {
  color: white !important;
}
.hero-premium .hero-content .hero-actions .hero-btn-primary svg {
  color: white !important;
  fill: white !important;
}
.hero-premium .hero-content .hero-actions .hero-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 2.5rem;
  border-radius: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
}
.hero-premium .hero-content .hero-actions .hero-btn-secondary:hover {
  background: white;
  color: #0f172a;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
}
@media (max-width: 479px) {
  .hero-premium .hero-content .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .hero-premium .hero-content .hero-actions .hero-btn-primary,
  .hero-premium .hero-content .hero-actions .hero-btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}
.hero-premium .hero-content .hero-stats {
  width: 100%;
  max-width: 800px;
  text-align: center;
}
.hero-premium .hero-content .hero-stats .stats-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-premium .hero-content .hero-stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 479px) {
  .hero-premium .hero-content .hero-stats .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.hero-premium .hero-content .hero-stats .stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
  cursor: pointer;
}
.hero-premium .hero-content .hero-stats .stat-card:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.2);
}
.hero-premium .hero-content .hero-stats .stat-card .stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  transition: all 0.3s ease;
}
.hero-premium .hero-content .hero-stats .stat-card .stat-icon.blue {
  background: linear-gradient(135deg, rgb(59, 130, 246), rgba(59, 130, 246, 0.8));
}
.hero-premium .hero-content .hero-stats .stat-card .stat-icon.green {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgba(16, 185, 129, 0.8));
}
.hero-premium .hero-content .hero-stats .stat-card .stat-icon.amber {
  background: linear-gradient(135deg, rgb(245, 158, 11), rgba(245, 158, 11, 0.8));
}
.hero-premium .hero-content .hero-stats .stat-card .stat-icon.violet {
  background: linear-gradient(135deg, rgb(139, 92, 246), rgba(139, 92, 246, 0.8));
}
.hero-premium .hero-content .hero-stats .stat-card .stat-content {
  text-align: center;
}
.hero-premium .hero-content .hero-stats .stat-card .stat-content .stat-number {
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hero-premium .hero-content .hero-stats .stat-card .stat-content .stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.hero-premium .hero-content .hero-stats .stat-card:hover .stat-icon {
  transform: scale(1.1);
}
.hero-premium .hero-skeleton-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 800px;
}
.hero-premium .hero-skeleton-content .hero-skeleton-title {
  margin-bottom: 1rem;
}
.hero-premium .hero-skeleton-content .hero-skeleton-subtitle {
  margin-bottom: 2rem;
}
.hero-premium .hero-skeleton-content .hero-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}
.hero-premium .hero-skeleton-content .hero-skeleton-actions {
  display: flex;
  gap: 1rem;
}
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@media (max-width: 479px) {
  .hero-premium .hero-premium {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background-attachment: scroll;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4rem;
  }
  .hero-premium .hero-premium .hero-content {
    padding: 0 1rem;
    padding-top: 20px;
    width: 100%;
  }
  .hero-premium .hero-premium .hero-content .hero-content-inner {
    gap: 1rem;
    padding: 0.5rem 0 1.5rem;
    margin: 26px auto 0;
    max-width: 100%;
  }
  .hero-premium .hero-premium .hero-heading {
    margin: 0;
    padding: 0;
  }
  .hero-premium .hero-premium .hero-heading .hero-title {
    margin: 0;
    padding: 0;
  }
  .hero-premium .hero-premium .hero-heading .hero-title .hero-title-primary {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    margin-bottom: 0.25rem;
    line-height: 1.2;
  }
  .hero-premium .hero-premium .hero-heading .hero-title .hero-title-secondary {
    font-size: clamp(1.5rem, 7vw, 2rem);
    margin-bottom: 0.25rem;
    line-height: 1.2;
  }
  .hero-premium .hero-premium .hero-heading .hero-title .hero-title-tertiary {
    font-size: clamp(1rem, 4vw, 1.5rem);
    line-height: 1.3;
  }
  .hero-premium .hero-premium .hero-subtitle {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    padding: 0;
    margin: 0;
    line-height: 1.5;
  }
  .hero-premium .hero-premium .hero-features {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
  }
  .hero-premium .hero-premium .hero-features .feature-item {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    margin: 0;
    white-space: nowrap;
  }
  .hero-premium .hero-premium .hero-features .feature-item .feature-icon {
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .hero-premium .hero-premium .hero-stats {
    width: 100%;
    margin: 0;
  }
  .hero-premium .hero-premium .hero-stats .stats-title {
    font-size: clamp(1.125rem, 4vw, 1.25rem);
    margin-bottom: 1rem;
    margin-top: 0;
    padding: 0;
  }
  .hero-premium .hero-premium .hero-stats .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    width: 100%;
  }
  .hero-premium .hero-premium .hero-stats .stat-card {
    padding: 0.75rem 0.5rem;
    gap: 0.5rem;
    margin: 0;
    min-height: auto;
  }
  .hero-premium .hero-premium .hero-stats .stat-card .stat-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  .hero-premium .hero-premium .hero-stats .stat-card .stat-content .stat-number {
    font-size: 1rem;
    margin-bottom: 0.125rem;
    line-height: 1.1;
  }
  .hero-premium .hero-premium .hero-stats .stat-card .stat-content .stat-label {
    font-size: 0.625rem;
    line-height: 1.2;
  }
  .hero-premium .hero-premium .hero-actions {
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 0.625rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-premium .hero-premium .hero-actions .hero-btn-primary,
  .hero-premium .hero-premium .hero-actions .hero-btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: calc(50% - 0.3125rem);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hero-premium .hero-premium .hero-content {
    padding-top: 7rem;
  }
}/**
 * PageHero Component Styles
 * Dynamic hero component with customizable heights and variants
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  margin-top: 4rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
@media (min-width: 768px) {
  .page-hero {
    background-attachment: fixed;
  }
}
.page-hero--small {
  min-height: calc(200px + 4rem);
  padding: 2.5rem 0 1.5rem;
}
@media (max-width: 479px) {
  .page-hero--small {
    min-height: calc(120px + 4rem);
    padding: 1rem 0 0.5rem;
  }
}
.page-hero--medium {
  min-height: calc(280px + 4rem);
  padding: 3.5rem 0 2rem;
}
@media (max-width: 479px) {
  .page-hero--medium {
    min-height: calc(140px + 4rem);
    padding: 1rem 0 0.5rem;
  }
}
.page-hero--large {
  min-height: calc(350px + 4rem);
  padding: 5rem 0 3rem;
}
@media (max-width: 479px) {
  .page-hero--large {
    min-height: calc(300px + 4rem);
    padding: 3.5rem 0 2rem;
  }
}
.page-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 50%, rgba(15, 23, 42, 0.9) 100%);
  z-index: 1;
}
.page-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 479px) {
  .page-hero__container {
    padding: 0 1rem;
  }
}
.page-hero__content {
  text-align: center;
  color: white;
}
.page-hero__breadcrumbs {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
}
@media (max-width: 479px) {
  .page-hero__breadcrumbs {
    margin-bottom: 1rem;
  }
}
.page-hero__breadcrumbs-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.page-hero__breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.page-hero__breadcrumbs-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  transition: all 150ms ease-in-out;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.page-hero__breadcrumbs-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.page-hero__breadcrumbs-current {
  color: white;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}
.page-hero__breadcrumbs-separator {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  margin: 0 0.25rem;
}
.page-hero__text {
  max-width: 800px;
  margin: 0 auto;
}
.page-hero__badge {
  display: inline-block;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  margin-bottom: 1rem;
}
.page-hero__badge--primary {
  background-color: var(--color-primary-500);
  color: white;
}
.page-hero__badge--secondary {
  background-color: var(--color-secondary-500);
  color: white;
}
.page-hero__badge--success {
  background-color: var(--color-success-500);
  color: white;
}
.page-hero__badge--warning {
  background-color: var(--color-warning-500);
  color: white;
}
.page-hero__title {
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 479px) {
  .page-hero__title {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    margin: 0 0 0.25rem 0;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .page-hero__title {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  }
}
.page-hero__subtitle {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 479px) {
  .page-hero__subtitle {
    display: none;
  }
}
.page-hero__description {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 479px) {
  .page-hero__description {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    margin: 0 0 1rem 0;
    line-height: 1.5;
  }
}
.page-hero__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 479px) {
  .page-hero__meta {
    gap: 1rem;
    flex-direction: column;
    align-items: center;
  }
}
.page-hero__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero__meta-label {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
}
.page-hero__meta-value {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.page-hero__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .page-hero__actions {
    flex-direction: column;
    align-items: center;
  }
}
.page-hero__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  transition: all 150ms ease-in-out;
  cursor: pointer;
  border: 2px solid transparent;
}
.page-hero__action--primary {
  background-color: var(--color-primary-500);
  color: white;
}
.page-hero__action--primary:hover {
  background-color: var(--color-primary-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.page-hero__action--secondary {
  background-color: transparent;
  color: white;
  border-color: white;
}
.page-hero__action--secondary:hover {
  background-color: white;
  color: var(--color-primary-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.page-hero__action--outline {
  background-color: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}
.page-hero__action--outline:hover {
  border-color: white;
  background-color: rgba(255, 255, 255, 0.1);
}
.page-hero__action-icon {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
}
.page-hero--compact .page-hero__title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
}
@media (max-width: 479px) {
  .page-hero--compact .page-hero__title {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  }
}
.page-hero--compact .page-hero__subtitle {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
}
@media (max-width: 479px) {
  .page-hero--compact .page-hero__subtitle {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  }
}
.page-hero--compact .page-hero__description {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}
.page-hero--minimal .page-hero__title {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
}
@media (max-width: 479px) {
  .page-hero--minimal .page-hero__title {
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  }
}
.page-hero--minimal .page-hero__subtitle {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}
.page-hero--minimal .page-hero__description {
  display: none;
}
.page-hero--minimal .page-hero__meta {
  display: none;
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.call-to-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}
.call-to-action--small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: 2.25rem;
}
.call-to-action--small .call-to-action__icon {
  width: 0.875rem;
  height: 0.875rem;
}
.call-to-action--medium {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  min-height: 2.75rem;
}
.call-to-action--medium .call-to-action__icon {
  width: 1rem;
  height: 1rem;
}
.call-to-action--large {
  padding: 1rem 2rem;
  font-size: 1rem;
  min-height: 3.25rem;
}
.call-to-action--large .call-to-action__icon {
  width: 1.125rem;
  height: 1.125rem;
}
.call-to-action--xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
  min-height: 3.75rem;
}
.call-to-action--xl .call-to-action__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.call-to-action--primary {
  background: linear-gradient(135deg, #f97316 0%, rgb(214.4769874477, 91.129707113, 5.5230125523) 100%);
  color: white;
  border: 2px solid transparent;
}
.call-to-action--primary:hover:not(.call-to-action--disabled) {
  color: white;
  background: linear-gradient(135deg, rgb(239.3368200837, 101.6924686192, 6.1631799163) 0%, rgb(189.6171548117, 80.5669456067, 4.8828451883) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}
.call-to-action--primary:focus {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}
.call-to-action--outline {
  background: transparent;
  color: #f97316;
  border: 2px solid #f97316;
}
.call-to-action--outline:hover:not(.call-to-action--disabled) {
  background: #f97316;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.2);
}
.call-to-action--outline:focus {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}
.call-to-action--secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: 2px solid transparent;
}
.call-to-action--secondary:hover:not(.call-to-action--disabled) {
  color: white;
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(107, 114, 128, 0.3);
}
.call-to-action--ghost {
  background: transparent;
  color: #f97316;
  border: 2px solid transparent;
}
.call-to-action--ghost:hover:not(.call-to-action--disabled) {
  background: rgba(249, 115, 22, 0.1);
  transform: translateY(-1px);
}
.call-to-action--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: 2px solid transparent;
}
.call-to-action--success:hover:not(.call-to-action--disabled) {
  color: white;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}
.call-to-action--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: 2px solid transparent;
}
.call-to-action--warning:hover:not(.call-to-action--disabled) {
  color: white;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}
.call-to-action--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: 2px solid transparent;
}
.call-to-action--danger:hover:not(.call-to-action--disabled) {
  color: white;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}
.call-to-action--icon-left .call-to-action__icon--left {
  margin-right: 0.25rem;
}
.call-to-action--icon-right .call-to-action__icon--right {
  margin-left: 0.25rem;
}
.call-to-action--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.call-to-action--animate-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.call-to-action--animate-pulse {
  animation: pulse 2s infinite;
}
.call-to-action--animate-pulse:hover {
  animation: none;
}
.call-to-action--animate-bounce {
  animation: bounce 1s infinite;
}
.call-to-action--animate-bounce:hover {
  animation: none;
}
.call-to-action__icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.call-to-action__text {
  font-weight: inherit;
  line-height: 1;
}
.call-to-action:hover:not(.call-to-action--disabled) .call-to-action__icon--right {
  transform: translateX(2px);
}
.call-to-action:hover:not(.call-to-action--disabled) .call-to-action__icon--left {
  transform: translateX(-2px);
}
.call-to-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .call-to-action--xl {
    padding: 1rem 2rem;
    font-size: 1rem;
    min-height: 3.25rem;
  }
  .call-to-action--large {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    min-height: 3rem;
  }
  .call-to-action--medium {
    padding: 0.625rem 1.25rem;
    font-size: 0.8rem;
    min-height: 2.5rem;
  }
  .call-to-action--small {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    min-height: 2rem;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}
.call-to-action--full-width {
  width: 100%;
}

.call-to-action--centered {
  margin: 0 auto;
}

.call-to-action--no-shadow {
  box-shadow: none !important;
}
.call-to-action--no-shadow:hover {
  box-shadow: none !important;
}

.call-to-action--rounded {
  border-radius: 2rem;
}

.call-to-action--square {
  border-radius: 0.5rem;
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.cta-section {
  padding: 2rem 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 479px) {
  .cta-section {
    padding: 2.5rem 1rem;
  }
}
.cta-section--blue {
  background: linear-gradient(135deg, #384454 0%, #4a5a6a 50%, #384454 100%);
}
.cta-section--gradient {
  background: linear-gradient(135deg, #384454 0%, #4a5a6a 50%, #384454 100%);
}
.cta-section--dark {
  background: linear-gradient(135deg, #384454 0%, #4a5a6a 50%, #384454 100%);
}
.cta-section--dark::before {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1) 0%, transparent 50%) !important;
}
.cta-section--dark::after {
  background: radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08) 0%, transparent 50%) !important;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-section::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 35rem;
  height: 35rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-header {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 1.5rem;
}
@media (max-width: 479px) {
  .cta-header {
    margin-bottom: 2rem;
    padding: 0;
    text-align: center;
  }
}

.cta-title {
  font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  line-height: 1.25;
}
@media (max-width: 479px) {
  .cta-title {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    margin-bottom: 1rem;
    text-align: center;
    word-wrap: break-word;
    line-height: 1.3;
    padding: 0 0.5rem;
  }
}

.cta-subtitle {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.625;
  max-width: 45rem;
  margin: 0 auto;
}
@media (max-width: 479px) {
  .cta-subtitle {
    font-size: clamp(0.875rem, 3vw, 1rem);
    text-align: center;
    line-height: 1.7;
    padding: 0 0.25rem;
    margin-bottom: 0;
  }
}

.cta-options {
  margin-bottom: 2rem;
}
@media (max-width: 479px) {
  .cta-options {
    margin-bottom: 2rem;
    padding: 0;
  }
}
.cta-options--mobile {
  display: none;
}
.cta-options--desktop {
  display: block;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 75rem;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 767px) {
  .options-grid {
    gap: 1rem;
  }
}
@media (max-width: 479px) {
  .options-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
    padding: 0;
    width: 100%;
  }
}

.option-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.option-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 479px) {
  .option-card {
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .option-card:hover {
    background: transparent;
    border: none;
    transform: none;
    box-shadow: none;
  }
}

.option-icon {
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  margin-bottom: 1rem;
  display: inline-flex;
}
.option-icon svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
@media (max-width: 479px) {
  .option-icon {
    display: none;
  }
}

.option-content h3 {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}
@media (max-width: 479px) {
  .option-content h3 {
    display: none;
  }
}
.option-content p {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}
@media (max-width: 479px) {
  .option-content p {
    display: none;
  }
}

.option-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 1rem;
  background: var(--button-hover);
  border: 2px solid var(--button-color);
  border-radius: 0.5rem;
  color: var(--button-color);
  font-weight: 600;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  text-decoration: none;
  transition: all 0.3s ease;
}
@media (max-width: 479px) {
  .option-button {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.25rem;
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    gap: 0.625rem;
    background: var(--button-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 700;
    min-height: 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .option-button:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}
.option-button:hover {
  background: var(--button-color);
  color: white;
  transform: translateX(4px);
}
@media (max-width: 479px) {
  .option-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}
.option-button .button-icon {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  transition: transform 0.3s ease;
}
@media (max-width: 479px) {
  .option-button .button-icon {
    font-size: 0.875rem;
  }
}
.option-button:hover .button-icon {
  transform: translateX(4px);
}
@media (max-width: 479px) {
  .option-button:hover .button-icon {
    transform: translateX(2px);
  }
}

.cta-trust {
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 479px) {
  .cta-trust {
    padding-top: 2rem;
    margin-top: 1.5rem;
  }
}

.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .trust-items {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
}
.trust-item .trust-icon {
  color: #22c55e;
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
}
@media (max-width: 479px) {
  .trust-item {
    font-size: clamp(0.75rem, 2.5vw, 0.875rem);
    gap: 0.5rem;
    flex: 0 1 auto;
  }
  .trust-item .trust-icon {
    font-size: clamp(0.875rem, 3vw, 1rem);
    flex-shrink: 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .cta-section::before, .cta-section::after {
    width: 30rem;
    height: 30rem;
  }
}
@media (max-width: 479px) {
  .cta-section::before, .cta-section::after {
    display: none;
  }
  .cta-content {
    width: 100%;
    max-width: 100%;
  }
  .cta-options--desktop {
    display: none;
  }
  .cta-options--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }
  .options-grid-mobile-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 1rem 0;
  }
  .option-icon-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  .option-icon-button:hover, .option-icon-button:active {
    background: var(--icon-color);
    color: white;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-color: var(--icon-color);
  }
  .option-icon-button:active {
    transform: translateY(-2px) scale(1.02);
  }
  .cta-contact-button-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, hsl(24, 100%, 60%) 0%, hsl(24, 100%, 50%) 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255, 132.6, 51, 0.3);
    transition: all 0.3s ease;
  }
  .cta-contact-button-mobile .contact-button-icon {
    font-size: 1.25rem;
  }
  .cta-contact-button-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 132.6, 51, 0.4);
    background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 42%) 100%);
  }
  .cta-contact-button-mobile:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 132.6, 51, 0.3);
  }
  .options-grid {
    display: none;
  }
  .option-card {
    display: none;
  }
}
@media (max-width: 479px) and (max-width: 360px) {
  .trust-items {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
  }
  .trust-items .trust-item {
    flex: 0 1 auto;
    min-width: auto;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.trust-indicators {
  padding: 2rem 0;
  background: #1e293b;
}
.trust-indicators__container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 479px) {
  .trust-indicators__container {
    padding: 0 1rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .trust-indicators__container {
    padding: 0 1.5rem;
  }
}
@media (min-width: 768px) {
  .trust-indicators__container {
    padding: 0 2rem;
  }
}
.trust-indicators__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  align-items: center;
}
@media (max-width: 479px) {
  .trust-indicators__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.trust-indicators__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #334155;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.trust-indicators__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
@media (max-width: 479px) {
  .trust-indicators__item {
    padding: 1rem;
    gap: 0.75rem;
  }
}
.trust-indicators__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  border-radius: 12px;
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
}
@media (max-width: 479px) {
  .trust-indicators__icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
.trust-indicators__content {
  flex: 1;
}
.trust-indicators__text {
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}
@media (max-width: 479px) {
  .trust-indicators__text {
    font-size: 0.9rem;
  }
}
.trust-indicators__subtext {
  font-size: 0.875rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 479px) {
  .trust-indicators__subtext {
    font-size: 0.8rem;
  }
}
.trust-indicators--compact {
  padding: 1.5rem 0;
  background: rgba(15, 23, 42, 0.5);
}
.trust-indicators--compact .trust-indicators__grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  overflow-x: auto;
}
@media (min-width: 480px) and (max-width: 767px) {
  .trust-indicators--compact .trust-indicators__grid {
    flex-wrap: wrap;
    gap: 1rem;
  }
}
@media (max-width: 479px) {
  .trust-indicators--compact .trust-indicators__grid {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
.trust-indicators--compact .trust-indicators__item {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 220px;
  padding: 1rem 1.25rem;
  gap: 0.75rem;
  background: rgba(51, 65, 85, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}
@media (min-width: 480px) and (max-width: 767px) {
  .trust-indicators--compact .trust-indicators__item {
    flex: 1 1 calc(50% - 0.5rem);
    max-width: none;
  }
}
@media (max-width: 479px) {
  .trust-indicators--compact .trust-indicators__item {
    flex: 1 1 auto;
    min-width: auto;
    max-width: none;
  }
}
.trust-indicators--compact .trust-indicators__item:hover {
  border-color: rgba(255, 132.6, 51, 0.5);
  background: rgba(51, 65, 85, 0.95);
}
.trust-indicators--compact .trust-indicators__icon {
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  box-shadow: 0 2px 8px rgba(255, 132.6, 51, 0.3);
}
.trust-indicators--compact .trust-indicators__text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f8fafc;
}
.trust-indicators--compact .trust-indicators__subtext {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.3;
}
.trust-indicators--minimal {
  padding: 1rem 0;
  background: transparent;
}
.trust-indicators--minimal .trust-indicators__grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}
.trust-indicators--minimal .trust-indicators__item {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  gap: 0.5rem;
}
.trust-indicators--minimal .trust-indicators__icon {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}
.trust-indicators--minimal .trust-indicators__text {
  font-size: 0.8rem;
}
.trust-indicators--minimal .trust-indicators__subtext {
  font-size: 0.75rem;
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.animated-counter {
  display: inline-block;
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  color: #f97316;
  line-height: 1;
}
.animated-counter--sm {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
}
.animated-counter--md {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
}
.animated-counter--lg {
  font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
}
.animated-counter--premium {
  font-size: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
  font-weight: 800;
  color: #f1f5f9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
@media (max-width: 479px) {
  .animated-counter--premium {
    font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  }
}
.animated-counter--primary {
  color: #f97316;
}
.animated-counter--secondary {
  color: #1e3a8a;
}
.animated-counter--accent {
  color: #f59e0b;
}
.animated-counter--white {
  color: white;
}
.animated-counter--dark {
  color: hsl(210, 20%, 7%);
}
@media (max-width: 479px) {
  .animated-counter {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animated-counter {
    transform: none !important;
    animation: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  .animated-counter--dark {
    color: hsl(210, 20%, 96%);
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.page-transition {
  width: 100%;
  min-height: 100vh;
  will-change: transform, opacity;
}
@media (max-width: 479px) {
  .page-transition {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}
.page-transition__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  animation: fadeInSpinner 0.3s ease-in;
}
.page-transition__loading .loading-spinner {
  opacity: 0.8;
}
.page-transition__content {
  transition: opacity 0.3s ease-in-out;
}
.page-transition__content--visible {
  opacity: 1;
}
.page-transition__content--hidden {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .page-transition * {
    animation: none !important;
    transition: none !important;
  }
  .page-transition__loading {
    opacity: 1;
    animation: none;
  }
}

@keyframes fadeInSpinner {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.parallax-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
}
@media (max-width: 479px) {
  .parallax-image {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-image {
    transform: none !important;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.scroll-reveal {
  will-change: transform, opacity;
}
@media (max-width: 479px) {
  .scroll-reveal {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal * {
    animation: none !important;
    transition: none !important;
  }
}/**
 * Slider Component Styles
 * Interactive range slider with customizable steps and labels
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.slider {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.slider--sm .slider__track {
  height: 4px;
}
.slider--sm .slider__thumb {
  width: 16px;
  height: 16px;
}
.slider--sm .slider__button {
  width: 28px;
  height: 28px;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
}
.slider--md .slider__track {
  height: 6px;
}
.slider--md .slider__thumb {
  width: 20px;
  height: 20px;
}
.slider--md .slider__button {
  width: 32px;
  height: 32px;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
}
.slider--lg .slider__track {
  height: 8px;
}
.slider--lg .slider__thumb {
  width: 24px;
  height: 24px;
}
.slider--lg .slider__button {
  width: 36px;
  height: 36px;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}
.slider--default .slider__track-bg {
  background-color: hsl(210, 20%, 32%);
}
.slider--default .slider__track-fill {
  background-color: hsl(24, 100%, 60%);
}
.slider--default .slider__thumb {
  background-color: hsl(24, 100%, 60%);
  border: 2px solid white;
}
.slider--success .slider__track-bg {
  background-color: hsl(210, 20%, 32%);
}
.slider--success .slider__track-fill {
  background-color: #22c55e;
}
.slider--success .slider__thumb {
  background-color: #22c55e;
  border: 2px solid white;
}
.slider--warning .slider__track-bg {
  background-color: hsl(210, 20%, 32%);
}
.slider--warning .slider__track-fill {
  background-color: #f59e0b;
}
.slider--warning .slider__thumb {
  background-color: #f59e0b;
  border: 2px solid white;
}
.slider--error .slider__track-bg {
  background-color: hsl(210, 20%, 32%);
}
.slider--error .slider__track-fill {
  background-color: #ef4444;
}
.slider--error .slider__thumb {
  background-color: #ef4444;
  border: 2px solid white;
}
.slider--vertical {
  flex-direction: row;
  align-items: center;
  height: 200px;
}
.slider--vertical .slider__container {
  flex-direction: column;
  height: 100%;
}
.slider--vertical .slider__track-container {
  flex: 1;
  height: 100%;
}
.slider--vertical .slider__track {
  width: 6px;
  height: 100%;
}
.slider--vertical .slider__track-fill {
  width: 100%;
  height: var(--fill-height);
}
.slider--vertical .slider__thumb {
  left: 50%;
  transform: translateX(-50%);
}
.slider--vertical .slider__mark {
  left: 50%;
  transform: translateX(-50%);
}
.slider--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.slider--disabled .slider__track-bg {
  background-color: hsl(210, 20%, 22%);
}
.slider--disabled .slider__track-fill {
  background-color: hsl(210, 20%, 45%);
}
.slider--disabled .slider__thumb {
  background-color: hsl(210, 20%, 45%);
}
.slider--dragging .slider__thumb {
  box-shadow: 0 0 0 8px rgba(255, 132.6, 51, 0.2);
}

.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  color: hsl(210, 20%, 90%);
  margin-bottom: 0.25rem;
}

.slider__value {
  font-weight: 600;
  color: hsl(24, 100%, 72%);
  background-color: rgba(255, 132.6, 51, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
}

.slider__container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.slider__track-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.slider__track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
}
.slider__track:focus {
  box-shadow: 0 0 0 2px rgba(255, 132.6, 51, 0.5);
}
.slider__track:hover:not(.slider--disabled) .slider__track-bg {
  background-color: hsl(210, 20%, 45%);
}

.slider__track-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(210, 20%, 32%);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

.slider__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: hsl(24, 100%, 60%);
  border-radius: 9999px;
  transition: width 0.1s ease, height 0.1s ease;
  pointer-events: none;
}

.slider__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: hsl(24, 100%, 60%);
  border: 2px solid white;
  border-radius: 50%;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.slider__thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
}

.slider__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: hsl(210, 20%, 22%);
  border: 1px solid hsl(210, 20%, 32%);
  border-radius: 0.375rem;
  color: hsl(210, 20%, 82%);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
}
.slider__button:hover:not(:disabled) {
  background-color: hsl(210, 20%, 32%);
  color: hsl(210, 20%, 90%);
  border-color: hsl(210, 20%, 45%);
}
.slider__button:active:not(:disabled) {
  background-color: hsl(210, 20%, 45%);
  transform: scale(0.95);
}
.slider__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: hsl(210, 20%, 14%);
  border-color: hsl(210, 20%, 22%);
  color: hsl(210, 20%, 45%);
}
.slider__button:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}

.slider__mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.slider__mark-line {
  width: 2px;
  height: 8px;
  background-color: hsl(210, 20%, 45%);
  margin: 0 auto;
}

.slider__mark-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.25rem;
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  color: hsl(210, 20%, 64%);
  white-space: nowrap;
}

.slider__value-display {
  text-align: center;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  color: hsl(24, 100%, 72%);
  background-color: rgba(255, 132.6, 51, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
}

@media (max-width: 479px) {
  .slider--lg .slider__track {
    height: 6px;
  }
  .slider--lg .slider__thumb {
    width: 20px;
    height: 20px;
  }
  .slider--lg .slider__button {
    width: 32px;
    height: 32px;
  }
  .slider__button {
    min-width: 32px;
    min-height: 32px;
  }
  .slider__mark-label {
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  }
}
@media (prefers-color-scheme: dark) {
  .slider__track-bg {
    background-color: hsl(210, 20%, 22%);
  }
  .slider__button {
    background-color: hsl(210, 20%, 14%);
    border-color: hsl(210, 20%, 22%);
    color: hsl(210, 20%, 82%);
  }
  .slider__button:hover:not(:disabled) {
    background-color: hsl(210, 20%, 22%);
    color: hsl(210, 20%, 90%);
  }
  .slider__mark-line {
    background-color: hsl(210, 20%, 32%);
  }
  .slider__mark-label {
    color: hsl(210, 20%, 45%);
  }
}
@media (prefers-contrast: high) {
  .slider__track-bg {
    background-color: hsl(210, 20%, 45%);
  }
  .slider__thumb {
    border-width: 3px;
  }
  .slider__button {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slider__track-fill,
  .slider__thumb,
  .slider__button {
    transition: none;
  }
  .slider__thumb:hover {
    transform: translate(-50%, -50%);
  }
  .slider__thumb:active {
    transform: translate(-50%, -50%);
  }
}.elastic-slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
@media (max-width: 640px) {
  .elastic-slider-container {
    gap: 0.375rem;
  }
}

.elastic-slider-wrapper {
  display: flex;
  width: 100%;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.elastic-slider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e85d04;
  font-size: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
.elastic-slider-icon:hover {
  transform: scale(1.1);
  color: #dc2f02;
}
.elastic-slider-icon:active {
  transform: scale(0.95);
}
.elastic-slider-icon svg {
  width: 20px;
  height: 20px;
}

.elastic-slider-root {
  position: relative;
  display: flex;
  width: 100%;
  flex-grow: 1;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  padding: 1rem 0;
}
@media (max-width: 640px) {
  .elastic-slider-root {
    padding: 0.75rem 0;
  }
}
.elastic-slider-root:active {
  cursor: grabbing;
}

.elastic-slider-track-wrapper {
  display: flex;
  flex-grow: 1;
}

.elastic-slider-track {
  position: relative;
  height: 100%;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.15);
}

.elastic-slider-range {
  position: absolute;
  height: 100%;
  background: linear-gradient(135deg, #e85d04, #dc2f02);
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(232, 93, 4, 0.5);
}

.elastic-slider-value {
  color: #e85d04;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}
@media (max-width: 640px) {
  .elastic-slider-value {
    font-size: 0.8125rem;
  }
}/**
 * Unified Lazy Loading Styles
 * Combines styles for LazyImage, LazyLoader, and LazyComponent
 */
.lazy {
  position: relative;
  overflow: hidden;
}
.lazy__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--color-background-soft, #f8f9fa);
  border-radius: 0.5rem;
  color: var(--color-text-muted, #6c757d);
  min-height: 200px;
}
.lazy__spinner {
  animation: spin 1s linear infinite;
  font-size: 1.5rem;
}
.lazy__error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--color-error-light, #f8d7da);
  border: 1px solid var(--color-error, #dc3545);
  border-radius: 0.5rem;
  color: var(--color-error, #dc3545);
  min-height: 200px;
}
.lazy__error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--color-error-light, #f8d7da);
  border: 1px solid var(--color-error, #dc3545);
  border-radius: 0.5rem;
  color: var(--color-error, #dc3545);
  min-height: 200px;
}
.lazy--image .lazy__image {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.lazy--image .lazy__placeholder {
  position: relative;
  background: var(--color-background-soft, #f8f9fa);
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lazy--image .lazy__blur-placeholder {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: blur(10px);
  transform: scale(1.1);
}
.lazy--image .lazy__placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #6c757d);
  font-size: 2rem;
}
.lazy--component .lazy__fallback {
  min-height: 300px;
}
.lazy--content .lazy__content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lazy--content[data-loaded=true] .lazy__content {
  opacity: 1;
  transform: translateY(0);
}
.lazy[data-loaded=false] .lazy__fallback {
  display: flex;
}
.lazy[data-loaded=true] .lazy__fallback {
  display: none;
}
.lazy[data-in-view=false] .lazy__fallback {
  display: flex;
}
.lazy[data-in-view=true] .lazy__fallback {
  display: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .lazy__fallback, .lazy__error, .lazy__error-state {
    padding: 1rem;
    min-height: 150px;
  }
  .lazy__spinner {
    font-size: 1.25rem;
  }
}
@media (prefers-color-scheme: dark) {
  .lazy__fallback {
    background: var(--color-background-dark, #2d3748);
    color: var(--color-text-muted-dark, #a0aec0);
  }
  .lazy__placeholder {
    background: var(--color-background-dark, #2d3748);
  }
  .lazy__placeholder-content {
    color: var(--color-text-muted-dark, #a0aec0);
  }
}
@media (prefers-contrast: high) {
  .lazy__fallback, .lazy__error, .lazy__error-state {
    border: 2px solid currentColor;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lazy__content {
    transition: none;
  }
  .lazy__spinner {
    animation: none;
  }
}/**
 * AshrocksLogo Styles
 * Precise styling for ASHROCKs logo with mathematical superscript positioning
 */
:root {
  --ashrocks-text-default: #343D42; /* Dark charcoal gray */
  --ashrocks-text-white: #ffffff; /* White for dark backgrounds */
  --ashrocks-text-dark: #1a1a1a; /* Very dark for light backgrounds */
  --ashrocks-s: #E06B34; /* Vibrant orange */
}

.ashrocks-logo {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ashrocks-text {
  color: var(--ashrocks-text-default);
  font-size: inherit;
  font-weight: inherit;
  text-transform: uppercase;
  display: inline-block;
}

.ashrocks-s {
  color: var(--ashrocks-s);
  font-size: 1em;
  font-weight: inherit;
  vertical-align: super;
  margin-left: 0.05em;
  line-height: 0;
  position: relative;
  top: -0.1em;
  transform: translateY(0.1em);
  display: inline-block;
  text-transform: lowercase;
}

/* Size variants */
.ashrocks--small {
  font-size: 1rem;
}

.ashrocks--medium {
  font-size: 1.25rem;
}

.ashrocks--large {
  font-size: 1.5rem;
}

/* Color variants */
.ashrocks--white .ashrocks-text {
  color: var(--ashrocks-text-white);
}
.ashrocks--white .ashrocks-s {
  color: var(--ashrocks-s); /* Keep orange even in white variant */
}

.ashrocks--dark .ashrocks-text {
  color: var(--ashrocks-text-dark);
}
.ashrocks--dark .ashrocks-s {
  color: var(--ashrocks-s); /* Keep orange */
}

/* Hover effects - unified with parent logo component */
.ashrocks-logo:hover {
  transform: none; /* Let parent handle the transform */
}

.ashrocks--white:hover .ashrocks-text {
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ashrocks--large {
    font-size: 1.25rem;
  }
  .ashrocks--medium {
    font-size: 1.125rem;
  }
  .ashrocks--small {
    font-size: 0.875rem;
  }
}
/* Footer-specific adjustments */
.footer__brand-logo .ashrocks-logo {
  font-size: 1.75rem !important; /* Larger for footer */
}

.footer__brand-logo .ashrocks--white .ashrocks-text {
  color: #ffffff !important; /* Ensure white text in footer */
}

/* Footer logo image adjustments */
.footer__brand-logo .logo__image {
  height: 4rem !important; /* Much larger logo image */
  width: auto !important;
}

/* Fix white text on white background issues */
.trust-indicators .ashrocks--white .ashrocks-text,
.trust-indicators .logo--white .logo__text {
  color: #343D42 !important; /* Dark text on light backgrounds */
}

/* Fix any other white background components */
[style*="background: white"] .ashrocks--white .ashrocks-text,
[style*="background: white"] .logo--white .logo__text,
[style*="background: #fff"] .ashrocks--white .ashrocks-text,
[style*="background: #fff"] .logo--white .logo__text,
[style*="background: #ffffff"] .ashrocks--white .ashrocks-text,
[style*="background: #ffffff"] .logo--white .logo__text,
[style*="background-color: white"] .ashrocks--white .ashrocks-text,
[style*="background-color: white"] .logo--white .logo__text,
[style*="background-color: #fff"] .ashrocks--white .ashrocks-text,
[style*="background-color: #fff"] .logo--white .logo__text,
[style*="background-color: #ffffff"] .ashrocks--white .ashrocks-text,
[style*="background-color: #ffffff"] .logo--white .logo__text {
  color: #343D42 !important; /* Dark text on white backgrounds */
}/**
 * Logo Component Styles
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.logo__image {
  display: block;
  height: auto;
  transition: all 0.3s ease;
  filter: brightness(0) saturate(100%) invert(100%);
}
.logo__text {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.3s ease;
}
.logo--horizontal {
  flex-direction: row;
  align-items: center;
}
.logo--vertical {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.logo--icon-only {
  display: flex;
}
.logo--text-only {
  display: flex;
}
.logo__styled-text {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo__styled-main {
  color: #343D42;
  font-size: inherit;
  font-weight: inherit;
}
.logo__styled-superscript {
  color: #E06B34;
  font-size: 0.4em;
  font-weight: inherit;
  vertical-align: super;
  margin-left: -0.3em;
  line-height: 0;
  position: relative;
  top: -0.6em;
  transform: translateY(-0.2em);
  display: inline-block;
}
.logo--small .logo__image {
  height: 2rem;
}
.logo--small .logo__text {
  font-size: 1rem;
}
.logo--small .logo__styled-text {
  font-size: 1rem;
}
.logo--medium .logo__image {
  height: 3rem;
}
.logo--medium .logo__text {
  font-size: 1.25rem;
}
.logo--medium .logo__styled-text {
  font-size: 1.25rem;
}
.logo--large .logo__image {
  height: 3.5rem;
}
.logo--large .logo__text {
  font-size: 1.5rem;
}
.logo--large .logo__styled-text {
  font-size: 1.5rem;
}
.logo--default .logo__text {
  color: hsl(24, 100%, 60%);
}
.logo--white .logo__text {
  color: white;
}
.logo--white .logo__styled-main {
  color: white;
}
.logo--white .logo__styled-superscript {
  color: #E06B34;
}
.logo--dark .logo__text {
  color: #111827;
}
.logo:hover .logo__image {
  transform: none;
}
.logo:hover .logo__text {
  color: hsl(24, 100%, 50%);
}
.logo:hover .logo__styled-text {
  transform: none;
}
.logo--white:hover .logo__text {
  color: #f3f4f6;
}
.logo--dark:hover .logo__text {
  color: hsl(24, 100%, 50%);
}

/* Header logo specific hover effects */
.header-logo:hover {
  transition: all 0.3s ease;
}
.header-logo .logo {
  transition: all 0.3s ease;
}
.header-logo .logo__image {
  transition: all 0.3s ease;
}
.header-logo .ashrocks-logo {
  transition: all 0.3s ease;
}

.logo-link {
  text-decoration: none;
  display: inline-block;
}/**
 * Decorative Elements Styles
 * Reusable decorative patterns for consistent styling
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.decorative-top {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-top: -60px;
  z-index: 0;
}
@media (max-width: 479px) {
  .decorative-top {
    height: 80px;
    margin-top: -40px;
  }
}
.decorative-top .decorative-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 132.6, 51, 0.1) 50%, transparent 100%), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(245, 158, 11, 0.05) 20px, rgba(245, 158, 11, 0.05) 40px);
  transform: skewY(-2deg);
  transform-origin: top left;
}

.decorative-bottom {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-bottom: -60px;
  z-index: 0;
}
@media (max-width: 479px) {
  .decorative-bottom {
    height: 80px;
    margin-bottom: -40px;
  }
}
.decorative-bottom .decorative-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 132.6, 51, 0.1) 50%, transparent 100%), repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(245, 158, 11, 0.05) 20px, rgba(245, 158, 11, 0.05) 40px);
  transform: skewY(2deg);
  transform-origin: bottom left;
}

.decorative-line {
  height: 2px;
  position: relative;
  margin: 1.5rem 0;
}
.decorative-line__gradient {
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 132.6, 51, 0.3) 20%, rgba(245, 158, 11, 0.5) 50%, rgba(255, 132.6, 51, 0.3) 80%, transparent 100%);
  border-radius: 2px;
}
.decorative-line__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.decorative-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.decorative-icon-wrapper--small .decorative-icon-content {
  width: 50px;
  height: 50px;
  font-size: 1.25rem;
}
.decorative-icon-wrapper--small .decorative-icon-decoration {
  width: 70px;
  height: 70px;
}
.decorative-icon-wrapper--medium .decorative-icon-content {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
}
.decorative-icon-wrapper--medium .decorative-icon-decoration {
  width: 80px;
  height: 80px;
}
.decorative-icon-wrapper--large .decorative-icon-content {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}
.decorative-icon-wrapper--large .decorative-icon-decoration {
  width: 100px;
  height: 100px;
}
.decorative-icon-wrapper .decorative-icon-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 132.6, 51, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.decorative-icon-wrapper--animated .decorative-icon-decoration {
  animation: pulse 2s ease-in-out infinite;
}
.decorative-icon-wrapper--static .decorative-icon-decoration {
  animation: none;
  opacity: 0.3;
}
.decorative-icon-wrapper--static .decorative-icon-content {
  animation: none;
}
.decorative-icon-wrapper .decorative-icon-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #f59e0b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 132.6, 51, 0.3);
}

.info-banner {
  margin-bottom: 2rem;
}
@media (max-width: 479px) {
  .info-banner {
    margin-bottom: 1.5rem;
  }
}
.info-banner-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(255, 132.6, 51, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
@media (max-width: 479px) {
  .info-banner-content {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }
}
.info-banner-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}
.info-banner-content .info-banner-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #f59e0b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 8px 25px rgba(255, 132.6, 51, 0.3);
}
@media (max-width: 479px) {
  .info-banner-content .info-banner-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
}
.info-banner-content .info-banner-text {
  flex: 1;
}
.info-banner-content .info-banner-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
@media (max-width: 479px) {
  .info-banner-content .info-banner-text h3 {
    font-size: 1.25rem;
  }
}
.info-banner-content .info-banner-text p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 479px) {
  .info-banner-content .info-banner-text p {
    font-size: 0.9rem;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.decorative-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.decorative-grid__pattern {
  width: 100%;
  height: 100%;
  opacity: 0.03;
}
.decorative-grid--dots .decorative-grid__pattern {
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}
.decorative-grid--lines .decorative-grid__pattern {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}
.decorative-grid--diagonal .decorative-grid__pattern {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 132.6, 51, 0.03) 10px, rgba(255, 132.6, 51, 0.03) 20px);
}

.decorative-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.decorative-corner--top-left {
  top: 0;
  left: 0;
}
.decorative-corner--top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.decorative-corner--bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.decorative-corner--bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.decorative-corner__line {
  position: absolute;
  background: linear-gradient(90deg, hsl(24, 100%, 60%), transparent);
}
.decorative-corner__line--horizontal {
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
}
.decorative-corner__line--vertical {
  top: 0;
  left: 0;
  width: 2px;
  height: 40px;
}

.decorative-ornament {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.decorative-ornament--small {
  width: 40px;
  height: 40px;
}
.decorative-ornament--medium {
  width: 60px;
  height: 60px;
}
.decorative-ornament--large {
  width: 80px;
  height: 80px;
}
.decorative-ornament__circle {
  position: absolute;
  border: 2px solid rgba(255, 132.6, 51, 0.3);
  border-radius: 50%;
}
.decorative-ornament__circle--1 {
  width: 100%;
  height: 100%;
  border-color: rgba(255, 132.6, 51, 0.2);
}
.decorative-ornament__circle--2 {
  width: 70%;
  height: 70%;
  border-color: rgba(245, 158, 11, 0.3);
  animation: rotate 8s linear infinite;
}
.decorative-ornament__circle--3 {
  width: 40%;
  height: 40%;
  background: radial-gradient(circle, rgba(255, 132.6, 51, 0.4) 0%, transparent 70%);
  border: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}/**
 * Mobile Menu Styles
 * Clean, modular mobile navigation styling
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  z-index: 9998;
  pointer-events: all;
}
@media (min-width: 768px) {
  .mobile-menu-overlay {
    display: none !important;
  }
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mobile-menu-panel {
    display: none !important;
  }
}

.mobile-menu-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.mobile-menu-view-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #f1f5f9;
  font-weight: 600;
  font-size: 1.125rem;
}
.mobile-menu-logo:hover {
  color: hsl(24, 100%, 72%);
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  color: #f1f5f9;
  transition: all 0.2s ease;
  font-size: 1.5rem;
}
.mobile-menu-close:hover {
  color: hsl(24, 100%, 72%);
  transform: scale(1.1);
}
.mobile-menu-close:active {
  transform: scale(0.95);
}
.mobile-menu-close:focus {
  outline: none;
}

.mobile-menu-close-icon {
  width: 16px;
  height: 16px;
}

.mobile-menu-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  margin-right: 0.75rem;
}
.mobile-menu-back:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: hsl(24, 100%, 72%);
}
.mobile-menu-back:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}

.mobile-menu-items {
  flex: 1;
  padding: 1rem 1.25rem 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mobile-menu-item {
  margin-bottom: 0.25rem;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mobile-menu-item.animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * 0.08s);
}

.mobile-menu-link-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: #f1f5f9;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  min-height: 2.5rem;
}
.mobile-menu-link-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: hsl(24, 100%, 72%);
  transform: translateX(4px);
}
.mobile-menu-link-button:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}
.mobile-menu-link-button.active {
  color: hsl(24, 100%, 60%);
  font-weight: 600;
}
.mobile-menu-link-button.active .mobile-menu-arrow {
  color: hsl(24, 100%, 60%);
}

.mobile-menu-link-text {
  flex: 1;
  text-align: left;
}

.mobile-menu-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #f1f5f9;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}
.mobile-menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: hsl(24, 100%, 72%);
  transform: translateX(4px);
}
.mobile-menu-link.active {
  color: hsl(24, 100%, 60%);
  font-weight: 600;
}

.mobile-menu-parent-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.mobile-menu-parent-text {
  color: #f97316 !important;
  font-weight: 600;
  position: relative;
}
.mobile-menu-parent-text::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0px;
  width: 2rem;
  height: 2px;
  background-color: #f97316;
  border-radius: 1px;
}
.mobile-menu-parent-text:hover {
  color: #ea580c !important;
  background-color: rgba(249, 115, 22, 0.1);
}
.mobile-menu-parent-text:hover::after {
  background-color: #ea580c;
}

.mobile-menu-arrow {
  transition: transform 0.2s ease;
}

.mobile-menu-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}

.mobile-menu-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5rem;
}

.mobile-menu-social {
  margin-bottom: 1.5rem;
}

.mobile-menu-social-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-menu-social-links {
  display: flex;
  gap: 0.75rem;
}

.mobile-menu-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f1f5f9;
  text-decoration: none;
  transition: all 0.2s ease;
}
.mobile-menu-social-link:hover {
  background-color: hsl(24, 100%, 60%);
  color: white;
  transform: translateY(-2px);
}
.mobile-menu-social-link svg {
  width: 16px;
  height: 16px;
}

.mobile-menu-more {
  margin-bottom: 1.5rem;
}

.mobile-menu-more-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.mobile-menu-more-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.mobile-menu-more-button:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}

.mobile-menu-more-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-menu-more-arrow {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.mobile-menu-more-button:hover .mobile-menu-more-arrow {
  color: hsl(24, 100%, 72%);
}

.mobile-menu-legal {
  margin-top: auto;
}

.mobile-menu-legal-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.mobile-menu-legal-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.mobile-menu-legal-button:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}

.mobile-menu-legal-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-menu-legal-arrow {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.mobile-menu-legal-button:hover .mobile-menu-legal-arrow {
  color: hsl(24, 100%, 72%);
}

.mobile-menu-view-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.mobile-menu-view-content::-webkit-scrollbar {
  width: 4px;
}
.mobile-menu-view-content::-webkit-scrollbar-track {
  background: transparent;
}
.mobile-menu-view-content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}
.mobile-menu-view-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile-menu-item.animate {
  animation: fadeUp 0.35s ease forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

.mobile-menu-link,
.mobile-menu-close,
.mobile-menu-back,
.mobile-menu-more-button,
.mobile-menu-legal-button {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-close:focus,
.mobile-menu-back:focus,
.mobile-menu-more-button:focus,
.mobile-menu-legal-button:focus {
  outline: 2px solid hsl(24, 100%, 60%);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .mobile-menu-panel {
    background: #000000;
    border-left: 2px solid #ffffff;
  }
  .mobile-menu-link {
    border: 1px solid transparent;
  }
  .mobile-menu-link:hover, .mobile-menu-link.active {
    border-color: hsl(24, 100%, 60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-item.animate {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .mobile-menu-link,
  .mobile-menu-close,
  .mobile-menu-back,
  .mobile-menu-more-button,
  .mobile-menu-legal-button {
    transition: none;
  }
}.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
}

.header {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}
.header.header-scrolled {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 479px) {
  .header-container {
    padding: 0 1rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .header-container {
    padding: 0 1.5rem;
  }
}
@media (min-width: 768px) {
  .header-container {
    padding: 0 2rem;
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1rem;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.header-logo:hover {
  opacity: 0.8;
}
.header-logo .logo__image {
  height: 3rem;
  width: auto;
  filter: brightness(0) saturate(100%) invert(100%);
}

.header-desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .header-desktop-nav {
    display: flex;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .header-desktop-nav {
    gap: 1rem;
  }
}

.header-nav-item-wrapper {
  position: relative;
}
.header-nav-item-wrapper.has-flyout:hover .header-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-nav-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  color: rgba(255, 255, 255, 0.8);
}
.header-nav-item:hover {
  color: #fb923c;
}
.header-nav-item.header-nav-item-active {
  color: #fb923c;
}
.header-nav-item.header-nav-item-inactive {
  color: rgba(255, 255, 255, 0.8);
}
.header-nav-item.header-nav-item-inactive:hover {
  color: #fb923c;
}

.header-flyout-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: hidden;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (max-width: 479px) {
  .header-flyout-container {
    display: none;
  }
}

.header-flyout-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 40px 60px;
}
@media (min-width: 480px) and (max-width: 767px) {
  .header-flyout-inner {
    padding: 32px 40px;
  }
}
@media (max-width: 479px) {
  .header-flyout-inner {
    padding: 24px 20px;
  }
}

.header-flyout-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
@media (min-width: 480px) and (max-width: 767px) {
  .header-flyout-panel {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media (max-width: 479px) {
  .header-flyout-panel {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.header-flyout-column-primary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-flyout-primary-item {
  display: flex;
  align-items: center;
}

.header-flyout-primary-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.5rem;
  color: hsl(210, 20%, 98%);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all var(--transition-fast);
  width: 100%;
}
.header-flyout-primary-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(0.25rem);
}

.header-flyout-primary-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.header-flyout-primary-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  flex-shrink: 0;
}

.header-flyout-icon {
  width: 14px;
  height: 14px;
  color: hsl(210, 20%, 98%);
}

.header-flyout-primary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-flyout-primary-title {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  font-weight: 600;
  color: hsl(210, 20%, 98%);
  line-height: 1.25;
}

.header-flyout-primary-description {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: hsl(210, 20%, 82%);
  line-height: 1.25;
}

.header-flyout-column-secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-flyout-secondary-item {
  display: flex;
  align-items: center;
}

.header-flyout-secondary-link {
  display: block;
  padding: 0.5rem 1rem;
  color: hsl(210, 20%, 82%);
  text-decoration: none;
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all var(--transition-fast);
  width: 100%;
}
.header-flyout-secondary-link:hover {
  color: hsl(210, 20%, 98%);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(0.25rem);
}

.header-flyout-secondary-text {
  display: block;
  transition: all var(--transition-fast);
}

.header-flyout-column-promo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-flyout-promo {
  width: 100%;
  max-width: 300px;
}

.header-flyout-promo-link {
  display: block;
  text-decoration: none;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all var(--transition-fast);
}
.header-flyout-promo-link:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.header-flyout-promo-image {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: hsl(210, 20%, 14%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-flyout-promo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--transition-normal);
}
.header-flyout-promo-link:hover .header-flyout-promo-img {
  transform: scale(1.05);
}

.header-flyout-promo-content {
  padding: 1.5rem;
  background: hsl(210, 20%, 7%);
  border-top: 1px solid hsl(210, 20%, 22%);
}

.header-flyout-promo-title {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  font-weight: 600;
  color: hsl(210, 20%, 98%);
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.header-flyout-promo-description {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  color: hsl(210, 20%, 82%);
  line-height: 1.625;
}

.mobile-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all var(--transition-fast);
  position: relative;
  font-size: 1.25rem;
}
.mobile-menu-button:hover {
  color: #f97316;
  transform: scale(1.1);
}
.mobile-menu-button:active {
  transform: scale(0.95);
}
@media (min-width: 768px) {
  .mobile-menu-button {
    display: none;
  }
}

@media (max-width: 479px) {
  .header-flyout-container {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .header-flyout-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .header-flyout-content {
    padding: 1.5rem 0;
  }
}
@media (min-width: 768px) {
  .header-flyout-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
  }
}
.header-nav-item:focus-visible,
.header-flyout-primary-link:focus-visible,
.header-flyout-secondary-link:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: 0.125rem;
}

@media (prefers-contrast: high) {
  .header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 2px solid white;
  }
  .header-nav-item:hover {
    color: #fb923c;
  }
  .header-nav-item.header-nav-item-active {
    color: #fb923c;
  }
}
.header-flyout-container,
.header-flyout-primary-link,
.header-flyout-secondary-link {
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header-nav-item,
  .header-flyout-container,
  .header-flyout-primary-link,
  .header-flyout-secondary-link,
  .mobile-menu-button {
    transition: none;
  }
  .header-flyout-container {
    transition: opacity 0.1s ease;
  }
  .header-flyout-primary-link:hover,
  .header-flyout-secondary-link:hover {
    transform: none;
  }
}/**
 * Responsive Footer Component Styles
 * Single footer that adapts to all screen sizes
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
.footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: #f1f5f9;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 132.6, 51, 0.3) 25%, rgba(255, 132.6, 51, 0.6) 50%, rgba(255, 132.6, 51, 0.3) 75%, transparent 100%);
}
.footer__pre-footer-cta {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 42%) 100%);
  padding: 3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__pre-footer-container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 479px) {
  .footer__pre-footer-container {
    padding: 0 1rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__pre-footer-container {
    padding: 0 1.5rem;
  }
}
@media (min-width: 768px) {
  .footer__pre-footer-container {
    padding: 0 2rem;
  }
}
.footer__pre-footer-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.footer__pre-footer-title {
  font-size: 2rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}
@media (max-width: 479px) {
  .footer__pre-footer-title {
    font-size: 1.75rem;
  }
}
.footer__pre-footer-subtitle {
  font-size: 1.1rem;
  color: #cbd5e1;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}
@media (max-width: 479px) {
  .footer__pre-footer-subtitle {
    font-size: 1rem;
  }
}
.footer__pre-footer-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .footer__pre-footer-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}
.footer__pre-footer-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
}
@media (max-width: 479px) {
  .footer__pre-footer-button {
    width: 100%;
    max-width: 280px;
  }
}
.footer__container {
  padding: 1.5rem 0 0.75rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__container {
    padding: 0 1.5rem;
  }
}
@media (max-width: 479px) {
  .footer__container {
    padding: 0 1rem;
  }
}

.footer__content {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__content {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 479px) {
  .footer__content {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.footer__brand {
  flex: 0 0 auto;
  min-width: auto;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__brand {
    flex: none;
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 479px) {
  .footer__brand {
    flex: none;
    width: auto;
    text-align: left;
    max-width: 200px;
  }
}

.footer__brand-link {
  display: inline-block;
  margin-bottom: 0.5rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__brand-link {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 479px) {
  .footer__brand-link {
    margin-bottom: 0.25rem;
  }
}

.footer__brand-logo {
  display: block;
}
.footer__brand-logo .logo__image {
  height: 6rem !important;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__brand-logo .logo__image {
    height: 5rem !important;
  }
}
@media (max-width: 479px) {
  .footer__brand-logo .logo__image {
    height: 4rem !important;
  }
}
.footer__brand-logo .logo__styled-text {
  font-size: 2rem !important;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__brand-logo .logo__styled-text {
    font-size: 1.75rem !important;
  }
}
@media (max-width: 479px) {
  .footer__brand-logo .logo__styled-text {
    font-size: 1.5rem !important;
  }
}

.footer__brand-copyright {
  display: block;
  font-size: 0.875rem;
  color: #cbd5e1;
}
@media (max-width: 479px) {
  .footer__brand-copyright--desktop {
    display: none;
  }
}
.footer__brand-copyright--mobile {
  display: none;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1rem;
}
@media (max-width: 479px) {
  .footer__brand-copyright--mobile {
    display: block;
    font-size: 0.8rem;
  }
}

.footer__brand-company {
  color: #f97316;
  transition: color 0.3s ease;
}
.footer__brand-company:hover {
  color: #ea580c;
}

.footer__navigation {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__navigation {
    width: 100%;
    gap: 0.75rem;
  }
}
@media (max-width: 479px) {
  .footer__navigation {
    width: 100%;
    gap: 0.5rem;
  }
}

.footer__navigation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  padding-top: 20px;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__navigation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 479px) {
  .footer__navigation-grid {
    display: none;
  }
}

.footer__mobile-navigation {
  display: none;
}
@media (max-width: 479px) {
  .footer__mobile-navigation {
    display: block;
    margin-bottom: 1rem;
  }
}

.footer__mobile-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__mobile-section:last-child {
  border-bottom: none;
}

.footer__mobile-section-toggle {
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f1f5f9;
  transition: all 0.3s ease;
}
.footer__mobile-section-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}
.footer__mobile-section-toggle:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.footer__mobile-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  text-align: left;
}

.footer__mobile-section-chevron {
  color: #f97316;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer__mobile-section-content {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

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

.footer__mobile-section-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.footer__mobile-section-item:last-child {
  border-bottom: none;
}

.footer__mobile-section-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}
.footer__mobile-section-link:hover {
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.footer__navigation-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 1rem 0;
  position: relative;
}
.footer__navigation-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0px;
  width: 2rem;
  height: 2px;
  background-color: rgb(249, 115, 22);
  border-radius: 1px;
}
@media (max-width: 479px) {
  .footer__navigation-title {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0.75rem;
  }
  .footer__navigation-title::after {
    display: none;
  }
}

.footer__navigation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 479px) {
  .footer__navigation-list {
    text-align: center;
  }
}

.footer__navigation-link {
  display: block;
  padding: 0.5rem 0;
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer__navigation-link:hover {
  color: #f97316;
}
@media (max-width: 479px) {
  .footer__navigation-link {
    padding: 0.3rem 0;
    font-size: 0.9rem;
  }
}

.footer__contact-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 1rem 0;
  position: relative;
}
.footer__contact-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0px;
  width: 2rem;
  height: 2px;
  background-color: rgb(249, 115, 22);
  border-radius: 1px;
}
@media (max-width: 479px) {
  .footer__contact-title {
    font-size: 1rem;
    text-align: center;
  }
  .footer__contact-title::after {
    display: none;
  }
}

.footer__contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (max-width: 479px) {
  .footer__contact-details {
    text-align: center;
  }
}

.footer__contact-detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
@media (max-width: 479px) {
  .footer__contact-detail {
    align-items: center;
  }
}

.footer__contact-label {
  font-weight: 600;
  color: #f1f5f9;
  font-size: 0.875rem;
}
@media (max-width: 479px) {
  .footer__contact-label {
    font-size: 0.8rem;
  }
}

.footer__contact-value {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.875rem;
}
.footer__contact-value:hover {
  color: #f97316;
}
@media (max-width: 479px) {
  .footer__contact-value {
    font-size: 0.8rem;
  }
}

.footer__location {
  display: flex;
  flex-direction: column;
}
@media (max-width: 479px) {
  .footer__location {
    display: none;
  }
}

.footer__location-title {
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
@media (max-width: 479px) {
  .footer__location-title {
    font-size: 0.875rem;
  }
}

.footer__location-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  height: 180px;
}

.footer__map-link {
  display: block;
  position: relative;
  cursor: pointer;
  height: 100%;
}
.footer__map-link:hover .footer__map-overlay {
  opacity: 1;
}

.footer__map-iframe {
  border: 0;
  border-radius: 8px;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

.footer__map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  pointer-events: none;
}
.footer__map-overlay svg {
  font-size: 1.5rem;
  color: #f97316;
}

.footer__social {
  display: inline-block;
  text-align: right;
  margin-bottom: 0.25rem;
  margin-left: auto;
  width: auto;
  max-width: 150px;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__social {
    text-align: center;
    margin-bottom: 0.25rem;
    margin-left: 0;
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 479px) {
  .footer__social {
    text-align: center;
    margin-bottom: 0.125rem;
    margin-left: 0;
    width: 100%;
    max-width: none;
  }
}

.footer__social-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0 0 0.125rem 0;
  white-space: nowrap;
  position: relative;
  display: inline-block;
}
.footer__social-title::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0px;
  width: 100%;
  height: 2px;
  background-color: rgb(249, 115, 22);
  border-radius: 1px;
  z-index: 1;
}
@media (max-width: 479px) {
  .footer__social-title {
    font-size: 0.7rem;
    text-align: center;
  }
  .footer__social-title::after {
    display: none;
  }
}

.footer__social-list {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0.125rem 0 0 0;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__social-list {
    justify-content: center;
    gap: 0.5rem;
  }
}
@media (max-width: 479px) {
  .footer__social-list {
    justify-content: center;
    gap: 0.375rem;
  }
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #f1f5f9;
}
.footer__social-link svg, .footer__social-link .social-icon {
  color: #f1f5f9 !important;
  fill: #f1f5f9 !important;
}
.footer__social-link {
  text-decoration: none;
  transition: all 0.3s ease;
}
.footer__social-link svg, .footer__social-link .social-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  display: block;
  color: inherit;
  opacity: 1;
  visibility: visible;
}
.footer__social-link:hover {
  background-color: #f97316;
  color: #f1f5f9;
  transform: translateY(-2px);
}
.footer__social-link:hover svg, .footer__social-link:hover .social-icon {
  fill: #f1f5f9;
}
.footer__social-link:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
@media (max-width: 479px) {
  .footer__social-link {
    width: 1.75rem;
    height: 1.75rem;
  }
  .footer__social-link svg, .footer__social-link .social-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.footer__legal {
  border-top: 1px solid #334155;
  padding-top: 0.75rem;
}
@media (max-width: 479px) {
  .footer__legal {
    padding-top: 1rem;
  }
}

.footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}
@media (min-width: 480px) and (max-width: 767px) {
  .footer__legal-list {
    justify-content: center;
    gap: 1rem;
  }
}
@media (max-width: 479px) {
  .footer__legal-list {
    justify-content: center;
    gap: 0.75rem;
    flex-direction: row;
    align-items: center;
  }
}

.footer__legal-link {
  color: #64748b;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}
.footer__legal-link:hover {
  color: #f97316;
}
@media (max-width: 479px) {
  .footer__legal-link {
    font-size: 0.8rem;
    padding: 0.25rem 0;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .footer {
    padding: 1.25rem 0 0.75rem;
  }
  .footer__brand {
    flex: 0 0 200px;
    min-width: 200px;
  }
  .footer__brand-image {
    height: 6rem;
  }
}
@media (max-width: 479px) {
  .footer {
    padding: 1rem 0 0.5rem;
  }
  .footer__brand {
    flex: none;
    width: auto;
    max-width: 180px;
    min-width: auto;
  }
  .footer__brand-image {
    height: 3.5rem;
  }
}/**
 * Footer Feature Styles
 * Note: Main footer styles are in features/footer/components/Footer/Footer.scss
 * This file is kept for backward compatibility
 */
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}

.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}

.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}

.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}

.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}

.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}

.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}

.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}

.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}

.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}

.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}

.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}

.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}

.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}

.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}

.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}

.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}

.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}

.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}

.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}

.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}

.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}

.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}

.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}

.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}

.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}

.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}

.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}

.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}

.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}

.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}

.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}

.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}

.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}

.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}

.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}

.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}

.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}/**
 * App Layout Styles
 * Main application layout styles
 */
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-layout__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.route-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem;
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.gradient-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}
.gradient-primary-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}
.gradient-primary-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
  color: white;
}
.gradient-primary-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}
.gradient-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
}
.gradient-secondary-light {
  background: linear-gradient(135deg, hsl(220, 70%, 60%), hsl(220, 70%, 50%));
  color: white;
}
.gradient-secondary-dark {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
  color: white;
}
.gradient-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}
.gradient-success-light {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: white;
}
.gradient-success-dark {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}
.gradient-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}
.gradient-error-light {
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: white;
}
.gradient-error-dark {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}
.gradient-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}
.gradient-warning-light {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
}
.gradient-warning-dark {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
}
.gradient-gray {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}
.gradient-gray-light {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: white;
}
.gradient-gray-dark {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: white;
}
.gradient-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
}
.gradient-warm-light {
  background: linear-gradient(135deg, hsl(24, 100%, 72%), hsl(24, 100%, 60%));
  color: white;
}
.gradient-warm-dark {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
  color: white;
}
.gradient-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}
.gradient-cool-light {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
}
.gradient-cool-dark {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
}
.gradient-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  color: white;
}
.gradient-ocean {
  background: linear-gradient(135deg, #60a5fa, #3b82f6, #1e40af);
  color: white;
}
.gradient-forest {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  color: white;
}
.gradient-fire {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), #dc2626, #b91c1c);
  color: white;
}
.gradient-overlay {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.4), rgba(6.12, 7.65, 9.18, 0.6));
  color: white;
}
.gradient-overlay-light {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.2), rgba(6.12, 7.65, 9.18, 0.4));
  color: white;
}
.gradient-overlay-dark {
  background: linear-gradient(135deg, rgba(6.12, 7.65, 9.18, 0.6), rgba(6.12, 7.65, 9.18, 0.8));
  color: white;
}
.gradient-overlay-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.8), rgba(255, 102, 0, 0.9));
  color: white;
}
.gradient-overlay-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.8), rgba(34.425, 87.975, 195.075, 0.9));
  color: white;
}
.gradient-text-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.gradient-text-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.gradient-text-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.gradient-text-cool {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.gradient-text-sunset {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 42%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.gradient-border-primary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}
.gradient-border-secondary {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%)) border-box;
}
.gradient-border-warm {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%)) border-box;
}
.gradient-card-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.1), rgba(255, 102, 0, 0.05));
  border: 1px solid rgba(255, 132.6, 51, 0.2);
}
.gradient-card-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.1), rgba(34.425, 87.975, 195.075, 0.05));
  border: 1px solid rgba(38.25, 97.75, 216.75, 0.2);
}
.gradient-card-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
  border: 1px solid rgba(249, 115, 22, 0.2);
}
.gradient-hero-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 50%) 0%, hsl(24, 100%, 35%) 50%, hsl(24, 100%, 28%) 100%);
  color: white;
}
.gradient-hero-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 45%) 0%, hsl(220, 70%, 25%) 50%, hsl(220, 70%, 15%) 100%);
  color: white;
}
.gradient-hero-dark {
  background: linear-gradient(135deg, hsl(210, 20%, 3%) 0%, hsl(210, 20%, 7%) 50%, hsl(210, 20%, 3%) 100%);
  color: white;
}
.gradient-hero-light {
  background: linear-gradient(135deg, hsl(210, 20%, 98%) 0%, hsl(210, 20%, 96%) 50%, hsl(210, 20%, 90%) 100%);
  color: #111827;
}
.gradient-section-primary {
  background: linear-gradient(135deg, rgba(255, 132.6, 51, 0.05), rgba(255, 102, 0, 0.02));
}
.gradient-section-secondary {
  background: linear-gradient(135deg, rgba(38.25, 97.75, 216.75, 0.05), rgba(34.425, 87.975, 195.075, 0.02));
}
.gradient-section-warm {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(234, 88, 12, 0.02));
}
.gradient-section-cool {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
}
.gradient-btn-primary {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-primary:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), hsl(24, 100%, 42%));
}
.gradient-btn-secondary {
  background: linear-gradient(135deg, hsl(220, 70%, 50%), hsl(220, 70%, 45%));
  color: white;
  border: none;
}
.gradient-btn-secondary:hover {
  background: linear-gradient(135deg, hsl(220, 70%, 45%), hsl(220, 70%, 35%));
}
.gradient-btn-warm {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  color: white;
  border: none;
}
.gradient-btn-warm:hover {
  background: linear-gradient(135deg, hsl(24, 100%, 50%), #dc2626);
}
.gradient-animated {
  background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(220, 70%, 50%), hsl(24, 100%, 50%), hsl(220, 70%, 45%));
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}
.gradient-animated-warm {
  background: linear-gradient(135deg, #f97316, #ec4899, #ea580c, #be185d);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}
.gradient-animated-cool {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #2563eb, #0891b2);
  background-size: 400% 400%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media (max-width: 768px) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-animated,
  .gradient-animated-warm,
  .gradient-animated-cool {
    animation: none;
    background: linear-gradient(135deg, hsl(24, 100%, 60%), hsl(24, 100%, 50%));
  }
}
@media (prefers-contrast: high) {
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #111827;
  }
}
@media print {
  .gradient-primary,
  .gradient-secondary,
  .gradient-warm,
  .gradient-cool,
  .gradient-hero-primary,
  .gradient-hero-secondary,
  .gradient-hero-dark {
    background: #ffffff !important;
    color: black !important;
  }
  .gradient-text-primary,
  .gradient-text-secondary,
  .gradient-text-warm,
  .gradient-text-cool,
  .gradient-text-sunset {
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: black !important;
  }
}
/**
 * Global Animations and Keyframes
 * Enhanced animations for better UX and visual feedback
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(249, 115, 22, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.4);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroBadgeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes heroTitleSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroTitleHighlight {
  from {
    opacity: 0;
    background-position: 0% 50%;
  }
  to {
    opacity: 1;
    background-position: 100% 50%;
  }
}
@keyframes heroSubtitleSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroStatsSlideIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes loadingDots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: white;
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
  }
}
@keyframes loadingSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes successCheck {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes cardHover {
  from {
    transform: translateY(0) scale(1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  to {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  }
}
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: var(--progress-width, 100%);
  }
}
@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}
.animate-slide-up {
  animation: slideUp 0.6s ease-out;
}
.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}
.animate-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.animate-slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}
.animate-slide-in-right {
  animation: slideInRight 0.5s ease-out;
}
.animate-zoom-in {
  animation: zoomIn 0.3s ease-out;
}
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.stats-section {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(30, 58, 138, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.stats-section__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 479px) {
  .stats-section__container {
    padding: 0 1rem;
  }
}
.stats-section__header {
  text-align: center;
  margin-bottom: 3rem;
}
@media (max-width: 479px) {
  .stats-section__header {
    margin-bottom: 2rem;
  }
}
.stats-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 479px) {
  .stats-section__title {
    font-size: 1.75rem;
  }
}
.stats-section__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #cbd5e1;
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}
@media (max-width: 479px) {
  .stats-section__subtitle {
    font-size: 0.875rem;
  }
}
.stats-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
@media (max-width: 479px) {
  .stats-section__grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
  }
}
.stats-section__item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.stats-section__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, transparent 50%, rgba(30, 58, 138, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stats-section__item:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.stats-section__item:hover::before {
  opacity: 1;
}
@media (max-width: 479px) {
  .stats-section__item {
    padding: 1.5rem;
    border-radius: 1rem;
  }
}
.stats-section__number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1;
}
@media (max-width: 479px) {
  .stats-section__number {
    font-size: 2rem;
  }
}
.stats-section__label {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: #cbd5e1;
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 479px) {
  .stats-section__label {
    font-size: 0.75rem;
  }
}
.stats-section--compact {
  padding: 2rem 0;
}
.stats-section--compact .stats-section__grid {
  gap: 1.5rem;
}
.stats-section--compact .stats-section__item {
  padding: 1.5rem;
}
.stats-section--compact .stats-section__number {
  font-size: clamp(2rem, 4vw, 3rem);
}
.stats-section--centered .stats-section__grid {
  justify-items: center;
}
.stats-section--centered .stats-section__item {
  max-width: 250px;
}
.stats-section--minimal .stats-section__item {
  background: transparent;
  border: none;
  backdrop-filter: none;
}
.stats-section--minimal .stats-section__item:hover {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes stats-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stats-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.stats-section__item {
  animation: stats-fade-in 0.6s ease-out;
}
.stats-section__item:nth-child(1) {
  animation-delay: 0.1s;
}
.stats-section__item:nth-child(2) {
  animation-delay: 0.2s;
}
.stats-section__item:nth-child(3) {
  animation-delay: 0.3s;
}
.stats-section__item:nth-child(4) {
  animation-delay: 0.4s;
}
.stats-section__item:nth-child(5) {
  animation-delay: 0.5s;
}
.stats-section__item:nth-child(6) {
  animation-delay: 0.6s;
}
@media (max-width: 479px) {
  .stats-section {
    padding: 3rem 0;
  }
  .stats-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .stats-section__item {
    padding: 1.25rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .stats-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .stats-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stats-section__item {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-contrast: high) {
  .stats-section__item {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid white;
  }
  .stats-section__number {
    color: white;
    -webkit-text-fill-color: white;
  }
  .stats-section__label {
    color: white;
  }
}
.container-max-width {
  max-width: 1200px;
  margin: 0 auto;
}
.section-spacing {
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .section-spacing {
    padding: 6rem 0;
  }
}
@media (min-width: 1024px) {
  .section-spacing {
    padding: 8rem 0;
  }
}
.section-spacing-sm {
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .section-spacing-sm {
    padding: 3rem 0;
  }
}
@media (min-width: 1024px) {
  .section-spacing-sm {
    padding: 4rem 0;
  }
}
.section-spacing-lg {
  padding: 6rem 0;
}
@media (min-width: 768px) {
  .section-spacing-lg {
    padding: 8rem 0;
  }
}
@media (min-width: 1024px) {
  .section-spacing-lg {
    padding: 10rem 0;
  }
}
.visual-hierarchy * {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.visual-hierarchy button:not([class*=no-focus]):focus,
.visual-hierarchy input:focus,
.visual-hierarchy textarea:focus,
.visual-hierarchy select:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.visual-hierarchy a:focus {
  outline: none;
}
.visual-hierarchy a:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.visual-hierarchy .hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.visual-hierarchy .hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.visual-hierarchy .hover-scale {
  transition: transform 0.3s ease;
}
.visual-hierarchy .hover-scale:hover {
  transform: scale(1.05);
}
:root {
  --color-primary-50: hsl(24, 100%, 97%);
  --color-primary-100: hsl(24, 100%, 94%);
  --color-primary-200: hsl(24, 100%, 89%);
  --color-primary-300: hsl(24, 100%, 82%);
  --color-primary-400: hsl(24, 100%, 72%);
  --color-primary-500: hsl(24, 100%, 60%);
  --color-primary-600: hsl(24, 100%, 50%);
  --color-primary-700: hsl(24, 100%, 42%);
  --color-primary-800: hsl(24, 100%, 35%);
  --color-primary-900: hsl(24, 100%, 28%);
  --color-primary-950: hsl(24, 100%, 20%);
  --color-secondary-50: hsl(220, 70%, 95%);
  --color-secondary-100: hsl(220, 70%, 90%);
  --color-secondary-200: hsl(220, 70%, 80%);
  --color-secondary-300: hsl(220, 70%, 70%);
  --color-secondary-400: hsl(220, 70%, 60%);
  --color-secondary-500: hsl(220, 70%, 50%);
  --color-secondary-600: hsl(220, 70%, 45%);
  --color-secondary-700: hsl(220, 70%, 35%);
  --color-secondary-800: hsl(220, 70%, 25%);
  --color-secondary-900: hsl(220, 70%, 15%);
  --color-secondary-950: hsl(220, 70%, 10%);
  --color-neutral-50: hsl(210, 20%, 98%);
  --color-neutral-100: hsl(210, 20%, 96%);
  --color-neutral-200: hsl(210, 20%, 90%);
  --color-neutral-300: hsl(210, 20%, 82%);
  --color-neutral-400: hsl(210, 20%, 64%);
  --color-neutral-500: hsl(210, 20%, 45%);
  --color-neutral-600: hsl(210, 20%, 32%);
  --color-neutral-700: hsl(210, 20%, 22%);
  --color-neutral-800: hsl(210, 20%, 14%);
  --color-neutral-900: hsl(210, 20%, 7%);
  --color-neutral-950: hsl(210, 20%, 3%);
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-bg-primary: #000000;
  --color-bg-secondary: hsl(210, 20%, 7%);
  --color-bg-card: hsl(210, 20%, 14%);
  --color-bg-elevated: hsl(210, 20%, 22%);
  --color-text-primary: #ffffff;
  --color-text-secondary: hsl(210, 20%, 82%);
  --color-text-muted: hsl(210, 20%, 64%);
  --color-text-inverse: hsl(210, 20%, 7%);
  --color-border-primary: hsl(210, 20%, 22%);
  --color-border-secondary: hsl(210, 20%, 32%);
  --color-border-focus: hsl(24, 100%, 60%);
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --font-family-primary: Inter, SF Pro Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --font-family-heading: Inter, SF Pro Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --border-radius-sm: 0.125rem;
  --border-radius-base: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-radius-3xl: 1.5rem;
  --border-radius-full: 9999px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}
p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-600);
}
a.button:hover, a.call-to-action:hover, a[class*=__cta-button]:hover, a[class*=btn]:hover, a[role=button]:hover {
  color: inherit;
}
*:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}
::-moz-selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: inherit;
  text-shadow: none;
}
::selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: inherit;
  text-shadow: none;
}
::-moz-selection {
  background-color: rgba(59, 130, 246, 0.2);
  color: inherit;
  text-shadow: none;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-neutral-600);
  border-radius: var(--border-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .hidden-mobile {
    display: none !important;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .hidden-tablet {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .hidden-desktop {
    display: none !important;
  }
}
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a, a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .no-print {
    display: none !important;
  }
}