@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --text-primary: #020617;
  --text-secondary: #475569;
  --accent-primary: #0284c7;
  --accent-hover: #0369a1;
  --border-color: #e2e8f0;
}

html {
  scroll-behavior: smooth;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

.trendyskleppl-logo-img {
  width: 88px;
  height: 44px;
  object-fit: contain;
}

.swiss-grid-bg {
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
}

.editorial-title {
  font-size: clamp(2.25rem, 4.8vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.kinetic-portal-title {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .marquee-track {
    animation-duration: 45s;
  }
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 600px;
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.comparison-before-layer {
  width: 50%;
  transition: width 0.08s ease-out;
}

.comparison-stage {
  cursor: ew-resize;
  touch-action: none;
}

#compareHandle {
  transition: left 0.08s ease-out;
}

.comparison-layer-before-40 {
  width: 40%;
}

.comparison-layer-before-50 {
  width: 50%;
}

.comparison-layer-before-75 {
  width: 75%;
}

.comparison-layer-before-25 {
  width: 25%;
}

.bar-fill-92 {
  width: 92%;
}
.bar-fill-88 {
  width: 88%;
}
.bar-fill-96 {
  width: 96%;
}
.bar-fill-84 {
  width: 84%;
}
.bar-fill-78 {
  width: 78%;
}
.bar-fill-99 {
  width: 99%;
}

.honeypot-field,
.website-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
}

.iti {
  display: block;
  width: 100%;
}

.iti__country-list {
  border-radius: 0.75rem;
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.cookie-banner-modal {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 1120px;
  margin: 0 auto;
  z-index: 99999;
  display: none;
}

.cookie-banner-modal.is-visible {
  display: flex;
}

.toast-notification {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100000;
  transform: translateY(150%);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

input[type="range"] {
  accent-color: #0284c7;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}