@import './components/buttons.css';
@import url('./custom_utilities.css');
@import url('./components/input.css');
@import url('./components/textarea.css');

:root {
  --font-size: 14px;
  --background: #fff;
  --foreground: oklch(0.145 0 0);
  --card: #fff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #fff;
  --border: #0000001a;
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.08 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.12 0.02 240);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.12 0.02 240);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.7 0.25 260);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.18 0.05 280);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.15 0.03 270);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.2 0.08 300);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.6 0.2 25);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.25 0.05 260);
  --input: oklch(0.15 0.03 270);
  --ring: oklch(0.7 0.25 260);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.7 0.25 260);
  --chart-2: oklch(0.75 0.2 180);
  --chart-3: oklch(0.8 0.22 120);
  --chart-4: oklch(0.65 0.28 320);
  --chart-5: oklch(0.7 0.25 60);
  --sidebar: oklch(0.1 0.02 240);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.7 0.25 260);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.15 0.03 270);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.25 0.05 260);
  --sidebar-ring: oklch(0.7 0.25 260);
  --gradient-primary: oklch(0.7 0.25 260);
  --gradient-secondary: oklch(0.65 0.28 320);
  --gradient-accent: oklch(0.75 0.2 180);
  --glow-primary: oklch(0.7 0.25 260 / 0.5);
  --glow-secondary: oklch(0.65 0.28 320 / 0.3);
  --glow-accent: oklch(0.75 0.2 180 / 0.4);
}

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-content: '';
    }
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  vertical-align: middle;
  display: block;
}

* {
  border-color: var(--border);
  outline-color: var(--ring);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

.container {
  width: 100%;
}

.link {
  color: var(--muted-foreground);
  position: relative;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.link:hover {
  color: var(--primary);
  /*box-shadow: 0 0 8px var(--primary); 	*/
}

.gradient-underline {
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  transition: all 0.3s ease;
}

.gradient-underline {
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0;
  height: 0.125rem;
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  transition: all 0.3s ease;
}

.link:hover .gradient-underline {
  width: 100%;
}

.gradient-line {
  position: absolute;
  inset: 0;

  /* Gradient direction */
  --tw-gradient-position: to right in oklab;

  /* Gradient colors: transparent → faint primary → transparent */
  --tw-gradient-from: transparent;
  --tw-gradient-via: color-mix(in oklab, var(--primary) 5%, transparent);
  --tw-gradient-to: transparent;

  /* Gradient stops */
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;

  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-via-stops);

  /* Final background gradient */
  background-image: linear-gradient(var(--tw-gradient-stops));
}

.animated-gradient {
  position: absolute;
  inset: 0;

  /* Gradient setup */
  --tw-gradient-position: to bottom right in oklab;
  --tw-gradient-from: var(--background);
  --tw-gradient-via: var(--background);
  --tw-gradient-to: var(--secondary);

  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;

  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-via-stops);

  background-image: linear-gradient(var(--tw-gradient-stops));
  background-size: 200% 200%;

  /* Animation */
  animation: gradient-shift 3s ease-in-out infinite;
}

.glass-effect {
  --blur-xl: 24px;
  --tw-backdrop-blur: blur(var(--blur-xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);
  background-color: color-mix(in oklab, var(--background) 90%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  --tw-shadow-color: #0000001a;
  box-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  border-radius: var(--radius, 0.625rem);
}

.gradient-overlay {
  position: absolute;
  inset: 0;

  /* Gradient direction */
  --tw-gradient-position: to top right in oklab;

  /* Gradient colors (10% tint → transparent → 10% tint) */
  --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
  --tw-gradient-via: transparent;
  --tw-gradient-to: color-mix(in oklab, var(--chart-4) 10%, transparent);

  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;

  /* Gradient stops */
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-via-stops);

  /* Background gradient */
  background-image: linear-gradient(var(--tw-gradient-stops));
}

.floating-circle {
  position: absolute;
  top: 5rem;
  left: 25%;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;

  /* Background with transparency */
  background-color: color-mix(in oklab, var(--primary) 20%, transparent);

  /* Blur */
  --blur-3xl: 64px;
  filter: blur(var(--blur-3xl));

  /* Floating animation */
  animation: float 3s ease-in-out infinite;
}

.floating-chart {
  background-color: color-mix(in oklab, var(--chart-4) 15%, transparent);
  --blur-3xl: 64px;
  filter: blur(var(--blur-3xl));
  animation: float 3s ease-in-out infinite;
}

.rotating-chart {
  --blur-2xl: 40px;
  filter: blur(var(--blur-2xl));
  background-color: color-mix(in oklab, var(--chart-2) 20%, transparent);
  animation: rotate-slow 20s linear infinite;
}

.glowing-card {
  /* Gradient background */
  --tw-gradient-position: to right in oklab;
  --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
  --tw-gradient-to: color-mix(in oklab, var(--chart-4) 20%, transparent);

  --tw-gradient-from-position: 0%;
  --tw-gradient-to-position: 100%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-via: transparent;

  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);

  --tw-gradient-stops: var(--tw-gradient-via-stops);
  background-image: linear-gradient(var(--tw-gradient-stops));

  /* Border */
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: var(--radius, 0.625rem);

  /* Backdrop blur */
  --blur-sm: 8px;
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur);
  backdrop-filter: var(--tw-backdrop-blur);

  /* Glow animation */
  animation: pulse-glow 2s ease-in-out infinite;
}

.gradient-text-pulse {
  font-size: 1.5rem;
  font-weight: 700;
  /* Gradient text */
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* Smooth animation (used on hover via parent) */
  transition: opacity 0.3s ease;
}

.gradient-text-pulse-alt {
  font-size: 1.5rem;
  font-weight: 700;

  /* Gradient text */
  background-image: linear-gradient(to right in oklab, var(--chart-2), var(--chart-4));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* Smooth animation (used on hover via parent) */
  transition: opacity 0.3s ease;
}

.gradient-text-pulse-alt2 {
  font-size: 1.5rem;
  font-weight: 700;

  /* Gradient text */
  background-image: linear-gradient(to right in oklab, var(--chart-4), var(--primary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* Smooth animation (used on hover via parent) */
  transition: opacity 0.3s ease;
}

.image-hover-scale {
  position: relative;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(0, 0, 0, 0.25));
  transition: transform 0.5s ease;
}

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

.pulse-glow-bg {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  /* Gradient background */
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-4));
  /* Visual effects */
  filter: blur(20px);
  opacity: 0.5;
  transition: opacity 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
}

.gradient-overlay-vertical {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom in oklab, var(--background), color-mix(in oklab, var(--secondary) 20%, transparent));
}

.gradient-text-primary {
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2), var(--chart-4));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.gradient-text-blue {
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease;
}

.gradient-text-lime {
  background-image: linear-gradient(to right in oklab, var(--chart-2), var(--chart-3));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease;
}

.gradient-text-purple {
  background-image: linear-gradient(to right in oklab, var(--chart-4), var(--primary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease;
}

.blue_gradient_box {
  background-image: linear-gradient(to bottom right in oklab, var(--card), color-mix(in oklab, var(--secondary) 20%, transparent));
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 2rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.blog-card {
  color: var(--card-foreground);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  position: relative;
  border: 2px solid transparent;
  background-color: color-mix(in oklab, var(--card) 80%, transparent);
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
}

.blog-card .card-content {
  container-type: inline-size;
  container-name: card-header;
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.375rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;

  &:has([data-slot='card-action']) {
    grid-template-columns: 1fr auto;
  }

  &.border-b {
    padding-bottom: 1.5rem;
  }
}

.gradient-card {
  color: var(--card-foreground);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(45deg, var(--gradient-primary), var(--gradient-secondary), var(--gradient-accent)) border-box;
  border: 2px solid transparent;
  background-color: color-mix(in oklab, var(--card) 80%, transparent);
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
}

.gradient-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-card .card-header,
.blog-card .card-header {
  container-type: inline-size;
  container-name: card-header;
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.375rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;

  &:has([data-slot='card-action']) {
    grid-template-columns: 1fr auto;
  }

  &.border-b {
    padding-bottom: 1.5rem;
  }
}

.blue_border {
  background-color: color-mix(in oklab, var(--border) 50%, transparent);
}

.gradient-icon[from='primary'][to='chart-2'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='chart-2'][to='chart-3'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--chart-2), var(--chart-3));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='chart-3'][to='chart-4'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--chart-3), var(--chart-4));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='chart-4'][to='primary'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--chart-4), var(--primary));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='primary'][to='chart-3'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--primary), var(--chart-3));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='chart-2'][to='chart-4'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--chart-2), var(--chart-4));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='primary'][to='chart-4'] {
  color: var(--card-foreground);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  background: linear-gradient(to right in oklab, var(--primary), var(--chart-4));
  border-color: color-mix(in oklab, var(--border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.5s ease;
  animation: pulse-glow 2s ease-in-out infinite;
  margin: 0;
}

.gradient-icon[from='primary'][to='chart-4']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='primary'][to='chart-2']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='primary'][to='chart-2'][scale='110']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  transform: scale(1.1);
  transition: all 0.5s ease;
}

.gradient-icon[from='chart-2'][to='chart-3']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-2) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='chart-2'][to='chart-3'][scale='110']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-2) 30%, transparent);
  transform: scale(1.1);
  transition: all 0.5s ease;
}

.gradient-icon[from='chart-3'][to='chart-4']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-3) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='chart-3'][to='chart-4'][scale='110']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-3) 30%, transparent);
  transform: scale(1.1);
  transition: all 0.5s ease;
}

.gradient-icon[from='chart-4'][to='primary']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-4) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='primary'][to='chart-3']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-icon[from='chart-2'][to='chart-4']:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: color-mix(in oklab, var(--chart-2) 30%, transparent);
  transform: translateY(-0.5rem);
}

.gradient-list-marker[from='primary'][to='chart-2'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.gradient-list-marker[from='chart-2'][to='chart-3'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--chart-2), var(--chart-3));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.gradient-list-marker[from='chart-3'][to='chart-4'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--chart-3), var(--chart-4));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.gradient-list-marker[from='chart-4'][to='primary'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--chart-4), var(--primary));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.gradient-list-marker[from='primary'][to='chart-3'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-3));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.gradient-list-marker[from='chart-2'][to='chart-4'] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-image: linear-gradient(to right in oklab, var(--chart-2), var(--chart-4));
  margin-right: 0.75rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: opacity 0.3s ease;
}

.horizontal-gradient-line {
  width: 100%;
  height: 4px;
  background-image: linear-gradient(to right in oklab, var(--primary), var(--chart-2), var(--chart-3), var(--chart-4), var(--primary));
}

/*SECTION PIPELINES*/
.vertical-time-line::before {
  position: absolute;
  left: 50%;
  top: 0;
  content: '';
  height: 100%;
  width: 3px;
  z-index: 1000;
  background-image: linear-gradient(to bottom in oklab, var(--primary), var(--chart-2), var(--chart-3), var(--chart-4), var(--primary));
}

.process-number {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(to right in oklab, var(--primary), var(--chart-2), var(--chart-3), var(--chart-4), var(--primary));
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
  z-index: 1001;
}

.process-number > span {
  background: var(--background);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pipeline card animations */
.pipeline-card-left {
  opacity: 0;
  transform: translateX(-150px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pipeline-card-right {
  opacity: 0;
  transform: translateX(150px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pipeline-card-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.pipeline-card-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/*ANIMATIONS*/
/* Keyframes for animation */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px var(--glow-primary);
  }
  50% {
    box-shadow: 0 0 40px var(--glow-primary), 0 0 60px var(--glow-secondary);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translate(-100px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translate(20px);
  }

  to {
    -webkit-transform: translateX(0);
    transform: translate(0);
  }
}

/* MEDIA QUERIES */
@media (hover: hover) {
  .group:hover .gradient-text-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .gradient-text-pulse-alt2 {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .gradient-text-pulse-alt {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .gradient-text-only-blue {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .gradient-text-lime {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .gradient-text-purple {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .group:hover .card-header h4 {
    color: var(--primary);
  }

  .group-hover\:animate-pulse:is(:where(.group):hover *) {
    animation: var(--animate-pulse);
  }
}

@media (width >= 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (width >= 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (width >= 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (width >= 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (width >= 96rem) {
  .container {
    max-width: 96rem;
  }
}

@media (width < 768px) {
  .vertical-time-line::before {
    left: 25px;
  }

  .process-number {
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
  }

  .glass-effect {
    border-radius: 0;
  }
}

/* Fallbacks for browsers that don't support color-mix */
@supports not (color: color-mix(in lab, red, red)) {
  .gradient-overlay {
    background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
  }

  .glass-effect {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
  }

  .gradient-line {
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05), transparent);
  }

  .floating-circle {
    background-color: rgba(3, 2, 19, 0.2);
  }

  .rotating-chart {
    background-color: rgba(64, 170, 255, 0.2);
  }

  * {
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  }
}