html {
  scroll-behavior: smooth;
}

body {
  background-color: #FDFBF7;
  color: #1A1A1A;
}

:root {
  --color-background: #FDFBF7;
  --color-foreground: #1A1A1A;
  --color-primary: #7C3AED;
  --color-primary-dark: #6D28D9;
  --color-secondary: #A3E635;
  --color-secondary-foreground: #1A2E05;
  --color-muted: #F1F5F9;
  --color-muted-foreground: #64748B;
  --color-border: #E2E8F0;
}

.font-sans { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.text-glow {
  text-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
}

.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-background { background-color: var(--color-background); }
.bg-background\/90 { background-color: rgba(253, 251, 247, 0.9); }
.bg-background\/50 { background-color: rgba(253, 251, 247, 0.5); }
.bg-border { background-color: var(--color-border); }
.bg-border\/50 { background-color: rgba(226, 232, 240, 0.5); }
.bg-foreground { background-color: var(--color-foreground); }
.bg-muted { background-color: var(--color-muted); }
.bg-muted\/50 { background-color: rgba(241, 245, 249, 0.5); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary\/5 { background-color: rgba(124, 58, 237, 0.05); }
.bg-primary\/10 { background-color: rgba(124, 58, 237, 0.10); }
.bg-primary\/20 { background-color: rgba(124, 58, 237, 0.20); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary\/20 { background-color: rgba(163, 230, 53, 0.20); }
.bg-secondary\/30 { background-color: rgba(163, 230, 53, 0.30); }

.text-background { color: var(--color-background); }
.text-border { color: var(--color-border); }
.text-foreground { color: var(--color-foreground); }
.text-foreground\/20 { color: rgba(26, 26, 26, 0.2); }
.text-foreground\/60 { color: rgba(26, 26, 26, 0.6); }
.text-foreground\/80 { color: rgba(26, 26, 26, 0.8); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-muted-foreground\/40 { color: rgba(100, 116, 139, 0.4); }
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-primary\/20 { color: rgba(124, 58, 237, 0.2); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-foreground { color: var(--color-secondary-foreground); }

.border-background { border-color: var(--color-background); }
.border-border { border-color: var(--color-border); }
.border-border\/30 { border-color: rgba(226, 232, 240, 0.3); }
.border-border\/50 { border-color: rgba(226, 232, 240, 0.5); }
.border-foreground { border-color: var(--color-foreground); }
.border-primary { border-color: var(--color-primary); }
.border-primary\/20 { border-color: rgba(124, 58, 237, 0.2); }
.border-primary\/30 { border-color: rgba(124, 58, 237, 0.3); }
.border-secondary { border-color: var(--color-secondary); }
.border-secondary\/20 { border-color: rgba(163, 230, 53, 0.2); }

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

.to-background { --tw-gradient-to: #FDFBF7 var(--tw-gradient-to-position); }

.selection\\:bg-primary ::selection { background-color: var(--color-primary); }
.selection\\:text-white ::selection { color: #ffffff; }

.hover\\:bg-primary-dark:hover { background-color: var(--color-primary-dark); }
.hover\\:bg-primary\\/20:hover { background-color: rgba(124, 58, 237, 0.2); }
.hover\\:bg-secondary\\/90:hover { background-color: rgba(163, 230, 53, 0.9); }
.hover\\:bg-foreground:hover { background-color: var(--color-foreground); }
.hover\\:bg-foreground\\/90:hover { background-color: rgba(26, 26, 26, 0.9); }
.hover\\:bg-muted:hover { background-color: var(--color-muted); }
.hover\\:border-primary:hover { border-color: var(--color-primary); }
.hover\\:border-foreground:hover { border-color: var(--color-foreground); }
.hover\\:text-primary:hover { color: var(--color-primary); }
.hover\\:text-primary-dark:hover { color: var(--color-primary-dark); }
.hover\\:text-foreground:hover { color: var(--color-foreground); }
.hover\\:text-background:hover { color: var(--color-background); }

.group-hover\\:text-primary { transition: color 0.2s ease; }
.group:hover .group-hover\\:text-primary { color: var(--color-primary); }
.group:hover .group-hover\\:text-white { color: #ffffff; }
.group:hover .group-hover\\:text-white\\/70 { color: rgba(255, 255, 255, 0.7); }
.group:hover .group-hover\\:opacity-80 { opacity: 0.8; }
.group:hover .group-hover\\:opacity-100 { opacity: 1; }
.group:hover .group-hover\\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\\:bg-white\\/10 { background-color: rgba(255, 255, 255, 0.1); }

.focus\\:border-primary:focus { border-color: var(--color-primary); }
.focus\\:ring-primary:focus { box-shadow: 0 0 0 1px var(--color-primary); }

.hover\\:bg-white:hover { background-color: #ffffff; }
.hover\\:bg-white\\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\\:text-white:hover { color: #ffffff; }
.hover\\:text-red-500:hover { color: #ef4444; }
.hover\\:fill-red-500:hover { fill: #ef4444; }
.hover\\:border-border:hover { border-color: var(--color-border); }
.hover\\:border-white:hover { border-color: #ffffff; }
.hover\\:shadow-md:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.hover\\:shadow-xl:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16); }
.hover\\:scale-105:hover { transform: scale(1.05); }
.hover\\:scale-110:hover { transform: scale(1.1); }
.hover\\:-translate-y-1:hover { transform: translateY(-0.25rem); }

.focus\\:outline-none:focus { outline: none; }
.focus\\:ring-1:focus { box-shadow: 0 0 0 1px currentColor; }
.transform { transform: translateZ(0); }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }

.btn-outline-foreground {
  border-color: var(--color-foreground);
  color: var(--color-foreground);
}

.btn-outline-foreground:hover {
  background-color: var(--color-foreground);
  color: #ffffff;
}

.service-card-dark:hover {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

.service-card-dark:hover .text-primary {
  color: #ffffff;
}

.service-card-dark:hover .text-muted-foreground {
  color: rgba(255, 255, 255, 0.7);
}

.service-card-dark:hover .bg-muted {
  background-color: rgba(255, 255, 255, 0.1);
}

.lang-toggle[data-active="true"] {
  background-color: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}

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

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

.fade-in {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.25, 0, 1), transform 0.8s cubic-bezier(0.25, 0.25, 0, 1);
  transition-delay: var(--delay, 0s);
}

.fade-in[data-direction="left"] {
  transform: translate3d(40px, 0, 0);
}

.fade-in[data-direction="right"] {
  transform: translate3d(-40px, 0, 0);
}

.fade-in[data-direction="down"] {
  transform: translate3d(0, -40px, 0);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-letters .hero-letter,
.hero-words .hero-word {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.hero-letters .hero-letter {
  display: inline-block;
  transform: translate3d(0, 50px, 0) rotateX(-90deg);
  animation-name: hero-letter-in;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-words .hero-word {
  display: inline-block;
  transform: translate3d(0, 20px, 0);
  filter: blur(10px);
  animation-name: hero-word-in;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

.hero-letters.animate .hero-letter,
.hero-words.animate .hero-word {
  animation-play-state: running;
}

@keyframes hero-letter-in {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
}

@keyframes hero-word-in {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0px);
  }
}

.cursor-animate {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: cursor-in 0.5s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes cursor-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

[data-carousel] {
  --items-per-page: 3;
  --current-index: 0;
  --gap: 24px;
}

[data-carousel-track] {
  display: flex;
  gap: var(--gap);
  transform: translate3d(calc(-1 * var(--current-index) * ((100% - (var(--gap) * (var(--items-per-page) - 1))) / var(--items-per-page) + var(--gap))), 0, 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

[data-carousel-item] {
  width: calc((100% - (var(--gap) * (var(--items-per-page) - 1))) / var(--items-per-page));
  flex-shrink: 0;
}

.process-step .process-card {
  border-color: rgba(226, 232, 240, 1);
}

.process-step .process-card-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.process-step .process-icon {
  background-color: rgba(124, 58, 237, 0.05);
  color: rgba(124, 58, 237, 1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.process-step .process-dot {
  background-color: #FDFBF7;
  border-color: #E2E8F0;
  transform: scale(1);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.process-step .process-line {
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.process-step.is-active .process-card {
  border-color: rgba(124, 58, 237, 1);
}

.process-step.is-active .process-card-overlay {
  opacity: 1;
}

.process-step.is-active .process-icon {
  background-color: rgba(124, 58, 237, 1);
  color: rgba(255, 255, 255, 1);
}

.process-step.is-active .process-dot {
  background-color: #7C3AED;
  border-color: #7C3AED;
  transform: scale(1.5);
}

.process-step.is-active .process-line {
  transform: scaleX(1);
}

.marquee-right {
  animation: marquee-right 25s linear infinite;
}

.marquee-left {
  animation: marquee-left 25s linear infinite;
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes marquee-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

.faq-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.faq-item.is-open .faq-panel {
  max-height: 500px;
  opacity: 1;
}

.faq-item .faq-icon-open {
  display: none;
}

.faq-item.is-open .faq-icon-open {
  display: inline-block;
}

.faq-item.is-open .faq-icon-closed {
  display: none;
}

.page-hidden {
  display: none;
}
