/* Custom styles for Talix landing page */
/* Tailwind and DaisyUI are loaded via CDN in HTML */

/* IBM Plex Sans font family */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Custom Talix Themes - DaisyUI compatible */
[data-theme='talix'] {
  --p: 0.3686 0.0895 196.82; /* #005f73 */
  --pc: 1 0 0; /* white */
  --s: 0.5529 0.1186 183.51; /* #0a9396 */
  --sc: 1 0 0;
  --a: 0.8157 0.0784 163.94; /* #94d2bd */
  --ac: 0.2 0.05 200;
  --n: 0.1294 0.0314 219.05; /* #001219 */
  --nc: 0.95 0 0;
  --b1: 1 0 0; /* #ffffff */
  --b2: 0.9804 0.0039 247.86; /* #f8fafc */
  --b3: 0.9098 0.0157 252.87; /* #e2e8f0 */
  --bc: 0.2 0.03 260;
  --in: 0.6353 0.1451 243.84; /* #0ea5e9 */
  --inc: 1 0 0;
  --su: 0.6353 0.1804 142.5; /* #22c55e */
  --suc: 1 0 0;
  --wa: 0.7294 0.1608 62.46; /* #f59e0b */
  --wac: 0.2 0.05 60;
  --er: 0.6118 0.1961 22.18; /* #ef4444 */
  --erc: 1 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  color-scheme: light;
}

[data-theme='talix-night-owl'] {
  --p: 0.5529 0.1186 183.51; /* #0a9396 */
  --pc: 0.1 0 0;
  --s: 0.8157 0.0784 163.94; /* #94d2bd */
  --sc: 0.1 0 0;
  --a: 0.8471 0.0745 85.87; /* #e9d8a6 */
  --ac: 0.2 0.05 90;
  --n: 0.1608 0.0549 249.05; /* #0a1628 */
  --nc: 0.9 0 0;
  --b1: 0.1373 0.051 243.06; /* #011627 */
  --b2: 0.1843 0.0549 236.35; /* #0d2137 */
  --b3: 0.2745 0.0588 225.67; /* #1d3b53 */
  --bc: 0.9 0.01 240;
  --in: 0.6745 0.1176 261.24; /* #82aaff */
  --inc: 0.1 0 0;
  --su: 0.6941 0.2039 145.38; /* #22da6e */
  --suc: 0.1 0 0;
  --wa: 0.8235 0.1255 80.78; /* #ffcb6b */
  --wac: 0.2 0.05 80;
  --er: 0.5922 0.1686 20.29; /* #ef5350 */
  --erc: 1 0 0;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  color-scheme: dark;
}

/* Base styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Container utility */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Animated gradient background for hero */
.hero-gradient {
  background: linear-gradient(135deg, rgba(var(--p), 0.05) 0%, transparent 50%, rgba(var(--s), 0.05) 100%);
}

/* Grid pattern overlay */
.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(79, 79, 79, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 79, 79, 0.18) 1px, transparent 1px);
  background-size: 14px 24px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

.blob-primary {
  background-color: rgba(var(--p), 0.1);
}

.blob-secondary {
  background-color: rgba(var(--s), 0.1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(to right, oklch(var(--p)), oklch(var(--s)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats gradient colors */
.stat-primary {
  background: linear-gradient(to right, oklch(var(--p)), oklch(var(--p) / 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-success {
  background: linear-gradient(to right, oklch(var(--su)), oklch(var(--su) / 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-accent {
  background: linear-gradient(to right, oklch(var(--a)), oklch(var(--a) / 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-secondary {
  background: linear-gradient(to right, oklch(var(--s)), oklch(var(--s) / 0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Icon container hover effect */
.icon-hover {
  transition: transform 0.2s ease;
}

.group:hover .icon-hover {
  transform: scale(1.1);
}

/* FAQ accordion styles */
.faq-item {
  border-bottom: 1px solid oklch(var(--bc) / 0.2);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  text-align: left;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

.faq-question:hover {
  color: oklch(var(--p));
}

.faq-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

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

.faq-item.open .faq-answer {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

/* Navbar blur effect */
.navbar-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Section padding responsive */
.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Typography responsive */
.heading-xl {
  font-size: 2.5rem;
  line-height: 1.1;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 768px) {
  .heading-xl {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .heading-xl {
    font-size: 3.75rem;
  }
}

.heading-hero {
  font-size: 2.5rem;
  line-height: 1.1;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 768px) {
  .heading-hero {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .heading-hero {
    font-size: 4.5rem;
  }
}

/* Team member cards */
.team-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 9999px;
}

@media (min-width: 768px) {
  .team-photo {
    width: 150px;
    height: 150px;
  }
}

/* Integration card gradient bar */
.gradient-bar {
  height: 0.5rem;
}

.gradient-bar-blue {
  background: linear-gradient(to right, #3b82f6, #2563eb);
}

.gradient-bar-green {
  background: linear-gradient(to right, #22c55e, #16a34a);
}

.gradient-bar-purple {
  background: linear-gradient(to right, #a855f7, #9333ea);
}

.gradient-bar-orange {
  background: linear-gradient(to right, #f97316, #ea580c);
}

/* Process step number */
.step-number {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-size: 1.5rem;
  font-weight: 900;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.group:hover .step-number {
  transform: scale(1.1);
}

/* Mobile-first responsive utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Footer link styling */
.footer-link {
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: oklch(var(--p));
}

/* Locale switcher */
.locale-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.locale-btn:hover {
  background-color: oklch(var(--b3));
}

.locale-btn.active {
  background-color: oklch(var(--p));
  color: oklch(var(--pc));
}

/* Theme toggle button */
.theme-toggle {
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.theme-toggle:hover {
  background-color: oklch(var(--b3));
}

/* Fix for DaisyUI card in dark mode */
[data-theme='talix-night-owl'] .card {
  background-color: oklch(var(--b2));
}