/* ═══════════════════════════════════════════════════════════════════════ */
/*                        AI Neo Lab - Builder - DESIGN SYSTEM                        */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              PRELOADER                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

.page-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.preloader-spinner::before,
.preloader-spinner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.preloader-spinner::before {
  width: 100%;
  height: 100%;
  border: 3px solid var(--color-bg-secondary, #e5e7eb);
}

.preloader-spinner::after {
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary, #6366f1);
  animation: preloader-spin 0.8s linear infinite;
}

@keyframes preloader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hide content flash during load */
body.loading {
  overflow: hidden;
}

:root {
  /* COLOR PALETTE */
  --color-primary: #6366f1;
  --color-primary-rgb: 99, 102, 241;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #818cf8;
  --color-secondary: #8b5cf6;
  --color-accent: #f472b6;
  --color-white: #ffffff;

  /* Gray Scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* System Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;

  /* Background & Surface */
  --color-bg: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;

  /* Text Colors */
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-inverse: #ffffff;

  /* Border Colors */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;

  /* TYPOGRAPHY */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Outfit', var(--font-family-sans);
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* SPACING */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */

  /* Container */
  --container-max: 1280px;
  --container-padding: var(--spacing-4);

  /* Section Spacing */
  --section-padding: var(--spacing-20);
  --section-padding-sm: var(--spacing-12);

  /* BORDER RADIUS */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-INDEX */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              BASE STYLES                                 */
/* ═══════════════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  /* scroll-behavior: smooth - disabled, causes jitter in Safari */
  /* Smooth scroll handled by JavaScript instead */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* overflow-x: hidden removed - can cause scroll jitter */
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                             TYPOGRAPHY                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--spacing-4);
}

h1 {
  font-size: var(--font-size-5xl);
}

h2 {
  font-size: var(--font-size-4xl);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--spacing-4);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                               LAYOUT                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-fluid {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-sm {
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--spacing-6);
}

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              BUTTONS                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.4);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.5);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-gray-100);
  color: var(--color-text);
  border-color: var(--color-gray-100);
}

.btn-secondary:hover {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
}

/* Outline Button */
.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.3);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.5);
}

/* Custom Button - Filled style (with CSS variables) */
.btn-custom,
.btn-custom.btn-custom-filled {
  background-color: var(--btn-bg, #6366f1);
  color: var(--btn-text, #ffffff);
  border-color: var(--btn-bg, #6366f1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.btn-custom:hover,
.btn-custom.btn-custom-filled:hover {
  background-color: var(--btn-hover, #4f46e5);
  border-color: var(--btn-hover, #4f46e5);
  color: var(--btn-text, #ffffff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Custom Button - Outline style */
.btn-custom.btn-custom-outline {
  background-color: transparent;
  color: var(--btn-bg, #6366f1);
  border-color: var(--btn-bg, #6366f1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.btn-custom.btn-custom-outline:hover {
  background-color: var(--btn-bg, #6366f1);
  color: var(--btn-text, #ffffff);
  border-color: var(--btn-bg, #6366f1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-gray-100);
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              FORMS                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--spacing-4);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-hint {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.form-error {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              CARDS                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-body {
  padding: var(--spacing-6);
}

.card-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.card-footer {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
}

.card-title {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.card-text {
  color: var(--color-text-secondary);
}

.card-elevated {
  box-shadow: var(--shadow-lg);
}

.card-hover:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
  transition: all var(--transition-normal);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              IMAGES                                      */
/* ═══════════════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-contain {
  object-fit: contain;
}

.img-rounded {
  border-radius: var(--radius-lg);
}

.img-circle {
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              UTILITIES                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-white { color: var(--color-text-inverse); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-white { background-color: #ffffff; }
.bg-dark { background-color: var(--color-gray-900); }

/* Spacing */
.m-0 { margin: 0; }
.mt-4 { margin-top: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Block full height - centers content vertically */
.block-full-height {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

/* Make direct children of full-height blocks fill available space and center content */
.block-full-height > section,
.block-full-height > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                           RESPONSIVE                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --section-padding: var(--spacing-16);
  }

  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }

  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--spacing-12);
    --container-padding: var(--spacing-4);
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }

  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .hide-mobile { display: none; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }

  .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                           ANIMATIONS                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

.animate-fade-in { animation: fadeIn var(--transition-normal) ease-out; }
.animate-fade-in-up { animation: fadeInUp var(--transition-normal) ease-out; }
.animate-fade-in-down { animation: fadeInDown var(--transition-normal) ease-out; }
.animate-slide-left { animation: slideInLeft var(--transition-normal) ease-out; }
.animate-slide-right { animation: slideInRight var(--transition-normal) ease-out; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              ICONS                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

.icon-sm { width: 1em; height: 1em; }
.icon-lg { width: 2em; height: 2em; }
.icon-xl { width: 3em; height: 3em; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                             LIGHTBOX                                    */
/* ═══════════════════════════════════════════════════════════════════════ */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.open {
  display: flex;
  opacity: 1;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox-caption {
  text-align: center;
  color: white;
  padding: var(--spacing-4);
  font-size: var(--font-size-sm);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close {
  top: 20px;
  right: 20px;
}

.lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hide lightbox buttons when not open */
.lightbox-overlay:not(.open) .lightbox-close,
.lightbox-overlay:not(.open) .lightbox-prev,
.lightbox-overlay:not(.open) .lightbox-next {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                         FORM MESSAGES                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

.form-message {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-4);
  font-size: var(--font-size-sm);
}

.form-message-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.form-message-error {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                         COOKIE NOTICE                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(17, 24, 39, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--spacing-4) var(--spacing-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.cookie-notice.visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-notice-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
}

.cookie-notice-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex: 1;
}

.cookie-notice-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  font-size: 22px;
  line-height: 1;
}

.cookie-notice-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
}

.cookie-notice-text a {
  color: #a5b4fc;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-notice-text a:hover {
  color: #c7d2fe;
}

.cookie-notice-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

.cookie-notice-btn {
  padding: var(--spacing-2) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-notice-btn-accept {
  background: var(--color-primary);
  color: white;
  border: none;
}

.cookie-notice-btn-accept:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.cookie-notice-btn-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-notice-btn-decline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cookie-notice {
    padding: var(--spacing-4);
  }

  .cookie-notice-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
  }

  .cookie-notice-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-notice-actions {
    justify-content: center;
  }

  .cookie-notice-btn {
    flex: 1;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                         MOBILE SCROLL FIX                                */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Safari viewport height fix - using -webkit-fill-available instead of dvh/svh */
/* dvh/svh can still cause issues, -webkit-fill-available is more stable */

/* Overscroll behavior removed - was causing scroll jitter */

/* Sticky header placeholder - prevent layout shift */
.sticky-placeholder {
  visibility: hidden;
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════ */
/*                         BLOCKS BASE STYLES                               */
/* ═══════════════════════════════════════════════════════════════════════ */

.block {
  position: relative;
  width: 100%;
}

.block-full-height {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  align-items: center;
}

.block-full-height > .hero,
.block-full-height > div {
  width: 100%;
}

/* Sticky blocks */
.block-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 100);
}

.block-dark {
  background-color: var(--color-gray-900);
  color: var(--color-text-inverse);
}

.block-dark h1,
.block-dark h2,
.block-dark h3,
.block-dark h4,
.block-dark h5,
.block-dark h6 {
  color: var(--color-text-inverse);
}

.block-dark p {
  color: var(--color-gray-300);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              HEADERS                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.header {
  background-color: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  z-index: 100;
}

/* Disable glass effect (blur) - class is on block wrapper */
.header-no-glass .header,
.header-no-glass.header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .header-logo {
    max-width: 200px;
    font-size: var(--font-size-lg);
  }
}

.header-logo-image {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.header-logo-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.header-nav > nav > ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav a {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header-nav a:hover,
.header-nav a.active {
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.header-mobile-toggle {
  display: none;
  padding: var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
}

.header-mobile-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-text);
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.lang-switcher button,
.lang-switcher .lang-btn {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}

.lang-switcher button.active,
.lang-switcher button:hover,
.lang-switcher .lang-btn.active,
.lang-switcher .lang-btn:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Language Dropdown Style */
.lang-dropdown {
  position: relative;
}

.lang-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-gray-100);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-dropdown-toggle:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.lang-globe-icon {
  color: var(--color-text-secondary);
}

.lang-current {
  font-weight: var(--font-weight-semibold);
}

.lang-chevron {
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
}

.lang-dropdown.open .lang-chevron {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown, 50);
}

.lang-dropdown.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.lang-dropdown-item:hover {
  background: var(--color-gray-100);
}

.lang-dropdown-item.active {
  background: var(--color-primary);
  color: white;
}

.lang-dropdown-item .lang-code {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  min-width: 24px;
}

.lang-dropdown-item .lang-name {
  font-size: var(--font-size-sm);
  color: inherit;
  opacity: 0.8;
}

.lang-dropdown-item.active .lang-name {
  opacity: 1;
}

/* Hide close button on desktop */
.nav-close {
  display: none;
}

/* Mobile Menu - Slide from right */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background-color: var(--color-bg);
  padding: 80px var(--spacing-6) var(--spacing-6);
  z-index: var(--z-fixed);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.active,
.mobile-menu.open {
  right: 0;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-nav a:not(.btn) {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border-light);
}

/* CTA button in mobile menu */
.mobile-menu-nav .btn {
  margin-top: var(--spacing-6);
  text-align: center;
  width: 100%;
}

/* Close button for mobile menu */
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--color-gray-100);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.mobile-menu-close:hover {
  background: var(--color-gray-200);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-text);
}

/* Overlay when mobile menu is open */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-fixed) - 1);
}

.mobile-menu-overlay.active {
  display: block;
}

/* Active menu item indicator */
.header-nav a {
  position: relative;
}

/* Ensure all nav items have consistent display for proper underline positioning */
.header-nav .nav-item > a {
  display: flex;
  align-items: center;
}

.header-nav .nav-text {
  position: relative;
  display: inline-block;
}

.header-nav a.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Underline only the text, not the arrow */
.header-nav a.active .nav-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
}

.mobile-menu-nav a.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Desktop submenu dropdown */
.nav-item {
  position: relative;
}

/* Items with submenu get gap for arrow spacing */
.nav-item.has-submenu > a {
  gap: 4px;
}

.submenu-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.nav-item:hover .submenu-arrow {
  transform: rotate(180deg);
}

.header-nav .submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 200px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
}

.nav-item:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.header-nav .submenu a {
  display: block;
  padding: 10px 16px;
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  transition: background 0.15s, color 0.15s;
}

.header-nav .submenu a:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

.header-nav .submenu a.active {
  color: var(--color-primary);
}

.header-nav .submenu a.active::after {
  display: none;
}

/* Mobile submenu */
.mobile-menu-nav .nav-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-gray-100);
}

.mobile-menu-nav .nav-item:last-child {
  border-bottom: none;
}

/* Hide border when submenu is expanded */
.mobile-menu-nav .nav-item.expanded {
  border-bottom: none !important;
}

.mobile-menu-nav .nav-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color 0.2s ease;
  border: none;
}

/* Remove bottom padding from parent link when expanded */
.mobile-menu-nav .nav-item.expanded > a {
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.mobile-menu-nav .nav-item > a:hover {
  color: var(--color-primary);
}

.mobile-menu-nav .nav-item.has-submenu > a .submenu-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.mobile-menu-nav .nav-item.expanded > a .submenu-arrow {
  transform: rotate(180deg);
}

/* Mobile submenu - base styles (hidden by default) */
.mobile-menu-nav .submenu {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  min-width: auto;
  box-shadow: none;
  /* Animation */
  display: block;
  max-height: 0;
  opacity: 0;
  visibility: visible;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  /* Styling with background */
  background: var(--color-gray-50);
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
  border: none !important;
  border-radius: 0;
}

/* Override desktop hover - keep submenu closed on mobile hover */
.mobile-menu-nav .nav-item:hover > .submenu {
  max-height: 0;
  opacity: 0;
}

/* Open state - when JS adds .open class or parent is expanded */
.mobile-menu-nav .submenu.open,
.mobile-menu-nav .nav-item.expanded > .submenu.open {
  display: block !important;
  max-height: 500px;
  opacity: 1;
  padding: 0.5rem 1.5rem;
}

.mobile-menu-nav .submenu a {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  white-space: normal;
  word-break: break-word;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  border: none !important;
}

.mobile-menu-nav .submenu a:hover {
  background: white;
  color: var(--color-primary);
}

.mobile-menu-nav .submenu a.active {
  background: white;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 1024px) {
  .header-nav {
    display: none !important;
  }

  .header-nav.open {
    right: 0;
  }

  /* Close button (X) in mobile menu */
  .nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
  }

  .nav-close:hover {
    background: var(--color-gray-200);
  }

  .nav-close svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text);
  }

  .header-nav a {
    width: 100%;
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
  }

  .header-nav a:hover {
    text-decoration: none;
  }

  .header-actions .btn,
  .header-buttons {
    display: none;
  }

  .header-mobile-toggle {
    display: block;
    z-index: 1001;
    position: relative;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Overlay */
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }

  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                               HEROES                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.hero {
  padding: var(--spacing-24) 0;
  overflow: hidden;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  align-items: center;
}

.hero-text {
  max-width: 560px;
}

.hero-title {
  font-size: var(--font-size-5xl);
  line-height: 1.1;
  margin-bottom: var(--spacing-6);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-8);
  line-height: var(--line-height-relaxed);
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

/* Hero Centered */
.hero-centered .hero-content {
  grid-template-columns: 1fr;
  text-align: center;
}

.hero-centered .hero-text {
  max-width: 800px;
  margin: 0 auto;
}

.hero-centered .hero-buttons {
  justify-content: center;
}

/* Hero with Background */
.hero-background {
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
}

.hero-background .container {
  position: relative;
  z-index: 1;
}

.hero-background .hero-title,
.hero-background .hero-subtitle {
  color: var(--color-text-inverse);
}

@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  .hero-text {
    max-width: 100%;
    text-align: center !important;
  }

  .hero-buttons {
    justify-content: center !important;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
  }

  .hero-image {
    display: flex;
    justify-content: center;
  }

  .hero-image img {
    max-width: 500px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: var(--spacing-16) 0;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              FEATURES                                    */
/* ═══════════════════════════════════════════════════════════════════════ */

.features {
  padding: var(--section-padding) 0;
}

.features-header {
  max-width: 100%;
  margin: 0 auto var(--spacing-16);
}

.features-header.align-left {
  text-align: left;
  margin-left: 0;
}

.features-header.align-center {
  text-align: center;
}

.features-title {
  margin-bottom: var(--spacing-4);
}

.features-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.features-grid {
  display: grid;
  gap: var(--spacing-8);
}

.features-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.features-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.features-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.feature-card {
  padding: var(--spacing-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-6);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-radius: var(--radius-xl);
  color: var(--color-text-inverse);
}

.feature-icon i {
  font-size: 28px;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
}

.feature-icon.icon-style-default {
  background: transparent !important;
  /* Color inherits from inline style or falls back to primary */
}

.feature-icon.icon-style-circle {
  border-radius: var(--radius-full);
}

.feature-icon.icon-style-square {
  border-radius: var(--radius-lg);
}

/* Legacy support */
.feature-icon.circle {
  border-radius: var(--radius-full);
}

.feature-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-3);
}

.feature-description {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .features-grid.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .features-grid.columns-3,
  .features-grid.columns-4 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                               ABOUT                                      */
/* ═══════════════════════════════════════════════════════════════════════ */

.about {
  padding: var(--section-padding) 0;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  align-items: center;
}

.about-image img {
  width: 100%;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.about-text .section-title {
  margin-bottom: var(--spacing-6);
}

.about-text p {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-6);
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  text-align: center;
}

.stat-item {
  padding: var(--spacing-6);
}

.stat-number {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                            TESTIMONIALS                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

.testimonials {
  padding: var(--section-padding) 0;
  background: inherit;
}

.testimonials-header {
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.testimonials-header.align-left {
  text-align: left;
}

.testimonials-header.align-center {
  text-align: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
}

.testimonials-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.testimonials-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.testimonials-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.testimonial-card {
  padding: var(--spacing-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.testimonial-content {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-6);
  line-height: var(--line-height-relaxed);
}

.testimonial-content::before {
  content: '"';
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-family: Georgia, serif;
  line-height: 0;
  margin-right: var(--spacing-2);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-avatar-placeholder {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.testimonial-info {
  flex: 1;
}

.testimonial-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--spacing-1);
}

.testimonial-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.testimonial-rating {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
  margin-bottom: var(--spacing-4);
}

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .testimonials-grid,
  .testimonials-grid.columns-2,
  .testimonials-grid.columns-3,
  .testimonials-grid.columns-4 {
    grid-template-columns: 1fr !important;
  }

  .testimonial-card {
    padding: 1.25rem;
  }

  .testimonial-content {
    font-size: 0.9375rem;
  }

  .testimonial-avatar {
    width: 48px;
    height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              PRICING                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.pricing {
  padding: var(--section-padding) 0;
}

.pricing-header {
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
  align-items: start;
}

.pricing-card {
  padding: var(--spacing-8);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-2xl);
  text-align: center;
  transition: all var(--transition-normal);
}

.pricing-card.featured {
  border-color: var(--color-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.pricing-card-header {
  margin-bottom: var(--spacing-6);
}

.pricing-plan-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
}

.pricing-price {
  font-family: var(--font-family-display);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.pricing-price span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.pricing-features {
  list-style: none;
  margin-bottom: var(--spacing-8);
  text-align: left;
}

.pricing-features li {
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

/* SVG checkmark is rendered in template, no need for ::before pseudo-element */
.pricing-features li svg {
  color: var(--color-success);
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .pricing-card.featured {
    transform: none;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              CONTACT                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.contact {
  padding: var(--section-padding) 0;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
}

.contact-info {
  padding-right: var(--spacing-8);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.contact-info-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-1);
}

.contact-info-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.contact-form-wrapper {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-10);
  border-radius: var(--radius-2xl);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* Contact Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.contact-form .form-group {
  margin-bottom: var(--spacing-2);
}

.contact-form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-2);
}

.contact-form .form-control {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.contact-form .form-control::placeholder {
  color: var(--color-text-muted);
}

/* Input Styles */
.contact-form .input-style-rounded {
  border-radius: var(--radius-lg);
}

.contact-form .input-style-square {
  border-radius: 0;
}

.contact-form .input-style-underline {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.contact-form .input-style-underline:focus {
  box-shadow: none;
  border-bottom-color: var(--color-primary);
}

.contact-form textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.contact-form select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-3) center;
  padding-right: var(--spacing-10);
}

/* Radio and Checkbox */
.contact-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.contact-form .radio-label,
.contact-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.contact-form .radio-label input,
.contact-form .checkbox-label input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  margin: 0;
}

.contact-form .checkbox-label span,
.contact-form .radio-label span {
  line-height: 1.4;
}

/* Required mark */
.contact-form .required {
  color: var(--color-error);
  margin-left: var(--spacing-1);
}

/* Submit button */
.contact-form .form-submit {
  margin-top: var(--spacing-4);
}

.contact-form .form-submit .btn {
  width: 100%;
}

/* Form messages */
.contact-form .form-message {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-4);
}

.contact-form .success-message {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.contact-form .error-message {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Horizontal Form Layout */
.contact-form.form-horizontal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.contact-form.form-horizontal .form-group {
  margin-bottom: 0;
}

/* Make textarea and submit span full width in horizontal layout */
.contact-form.form-horizontal .form-group:has(textarea),
.contact-form.form-horizontal .form-submit {
  grid-column: 1 / -1;
}

/* Fallback for browsers that don't support :has() */
@supports not selector(:has(*)) {
  .contact-form.form-horizontal .form-group.full-width,
  .contact-form.form-horizontal .form-submit {
    grid-column: 1 / -1;
  }
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
  .contact-form.form-horizontal {
    grid-template-columns: 1fr;
  }
}

/* Form Success Block */
.contact-form-container {
  position: relative;
}

.form-success-block,
.form-error-block {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-12) var(--spacing-6);
  min-height: 300px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

.form-success-block.animate-in,
.form-error-block.animate-in {
  animation: formSuccessIn 0.5s ease-out forwards;
}

@keyframes formSuccessIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.form-success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-success), #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-6);
  animation: successIconPop 0.6s ease-out 0.2s both;
}

@keyframes successIconPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.form-success-icon svg {
  width: 40px;
  height: 40px;
  color: white;
  stroke-width: 2.5;
}

.form-success-icon svg path,
.form-success-icon svg polyline {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkmarkDraw 0.6s ease-out 0.5s forwards;
}

@keyframes checkmarkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.form-success-message,
.form-error-message {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  max-width: 400px;
  line-height: 1.6;
  animation: fadeInUp 0.4s ease-out 0.4s both;
}

/* Form Error Block */
.form-error-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-error), #dc2626);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-6);
  animation: successIconPop 0.6s ease-out 0.2s both;
}

.form-error-icon svg {
  width: 40px;
  height: 40px;
  color: white;
  stroke-width: 2.5;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                                CTA                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.cta {
  padding: var(--section-padding) 0;
  /* Background is controlled via block settings - gradient picker */
  text-align: center;
  color: var(--color-text-inverse);
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.cta-title {
  color: var(--color-text-inverse);
  margin-bottom: var(--spacing-4);
}

.cta-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-8);
}

.cta .btn-primary {
  background-color: var(--color-text-inverse);
  color: var(--color-primary);
  border-color: var(--color-text-inverse);
}

.cta .btn-primary:hover {
  background-color: transparent;
  color: var(--color-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              FOOTERS                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.footer {
  padding: var(--spacing-16) 0 var(--spacing-8);
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-12);
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  color: var(--color-text-inverse);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.footer-logo img {
  height: 32px;
}

.footer-description {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-6);
}

.footer-column-title {
  color: var(--column-title-color, var(--color-text-inverse)) !important;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--spacing-3);
}

.footer-links a {
  color: var(--column-link-color, var(--color-gray-400)) !important;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-text-inverse);
}

.footer-social {
  display: flex;
  gap: var(--spacing-3);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--social-fill, rgba(255, 255, 255, 1));
  border-radius: var(--radius-lg);
  color: var(--color-gray-400);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--social-hover, rgba(200, 200, 200, 1));
  color: var(--color-text-inverse);
}

.footer-bottom {
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-gray-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  color: var(--copyright-color, var(--color-gray-500)) !important;
  font-size: var(--font-size-sm);
}

@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-4);
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                                FAQ                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.faq {
  padding: var(--section-padding) 0;
}

.faq-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-6) 0;
  background: none;
  border: none;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

.faq-question svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer-content {
  padding-bottom: var(--spacing-6);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                              GALLERY                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.gallery {
  padding: var(--section-padding) 0;
}

.gallery-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

/* Gallery-1: grid layout is handled by gallery-grid-items, not gallery-grid */
.gallery-grid {
  width: 100%;
}

.gallery-grid .container {
  width: 100%;
  max-width: var(--container-max);
}

/* Legacy gallery-grid as grid (for gallery-2 etc) */
.gallery:not(.gallery-grid) .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-4);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-inverse);
}

@media (max-width: 1024px) {
  .gallery:not(.gallery-grid) .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery:not(.gallery-grid) .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*                               TEAM                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

.team {
  padding: var(--section-padding) 0;
}

.team-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8);
}

.team-card {
  text-align: center;
}

.team-card-image {
  position: relative;
  margin-bottom: var(--spacing-4);
}

.team-card-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

.team-card-social {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-2);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.team-card:hover .team-card-social {
  opacity: 1;
}

.team-card-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.team-card-social a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.team-card-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.team-card-role {
  color: var(--color-text-secondary);
}

.buttons {
  display: flex;
  gap: 5px;
}

@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
  }
}
:root {
  --color-primary: #3b82f6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-dark: #2563eb;
  --color-secondary: #06b6d4;
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-bg: #0f172a;
  --color-bg-secondary: #1e293b;
}

/* Auto-generated block styles - do not edit manually */

/* ═══════════════════════════════════════════════════════════════════════ */
/*                          BLOCK TYPE STYLES                              */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Block type: headers/header-1 */
/* Header 1 - Classic Header */


/* Block type: features/features-1 */
/* Features 1 Styles */


/* Block type: features/features-2 */
.features-list {
  padding: 5rem 0;
}

.features-list-items {
  max-width: 900px;
  margin: 0 auto;
}

.feature-list-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-gray-200);
}

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

.feature-list-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: var(--color-primary-50);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.feature-list-icon svg {
  width: 28px;
  height: 28px;
}

.feature-list-icon i {
  font-size: 1.75rem;
}

.feature-list-content {
  flex: 1;
}

.feature-list-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-gray-900);
}

.feature-list-description {
  color: var(--color-gray-600);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .feature-list-item {
    flex-direction: column;
    gap: 1rem;
  }
}

.feature-list-action {
  flex-shrink: 0;
  margin-left: auto;
}

.feature-list-btn {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .feature-list-action {
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .feature-list-btn {
    width: 100%;
    text-align: center;
  }
}


/* Block type: pricing/pricing-1 */
.pricing {
  padding: 5rem 0;
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  align-items: stretch;
}

.pricing-cols-2 .pricing-card { flex: 0 1 calc(50% - 1rem); max-width: calc(50% - 1rem); }
.pricing-cols-3 .pricing-card { flex: 0 1 calc(33.333% - 1.34rem); max-width: calc(33.333% - 1.34rem); }
.pricing-cols-4 .pricing-card { flex: 0 1 calc(25% - 1.5rem); max-width: calc(25% - 1.5rem); }

.pricing-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s;
}

.pricing-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.pricing-popular {
  border-color: var(--color-primary);
  border-width: 2px;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.25rem 1rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pricing-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.pricing-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

.pricing-description {
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

.pricing-price {
  text-align: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
}

.price-currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  vertical-align: super;
}

.price-amount {
  font-size: 4.5rem !important;
  font-weight: 800;
  color: var(--color-gray-900);
  line-height: 1;
}

.price-period {
  color: var(--color-gray-500);
  font-size: 1rem;
  display: block;
  margin-top: 0.5rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  color: var(--color-gray-600);
}

.pricing-features svg {
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

@media (max-width: 1024px) {
  .pricing-cols-3 .pricing-card,
  .pricing-cols-4 .pricing-card {
    flex: 0 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

@media (max-width: 640px) {
  .pricing-cols-2 .pricing-card,
  .pricing-cols-3 .pricing-card,
  .pricing-cols-4 .pricing-card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}


/* Block type: cta/cta-1 */
/* CTA 1 Styles */
.cta-1 {
  padding: 5rem 0;
  /* Background controlled via block settings - gradient picker */
}

.cta-1 .cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.cta-1 .cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.cta-1 .cta-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

.cta-1 .buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cta-1 .cta-title {
    font-size: 1.875rem;
  }

  .cta-1 .cta-subtitle {
    font-size: 1rem;
  }

  .cta-1 .buttons {
    flex-direction: column;
    align-items: center;
  }
}


/* Block type: contacts/contact-1 */
/* Contact 1 Styles */

/* Icon styles */
.contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.contact-info-icon i {
  font-size: 24px;
}

/* Default icon style - transparent (override inline styles) */
.contact-info-icon.icon-style-default {
  background: transparent !important;
  color: var(--color-primary, #6366f1) !important;
}

/* Circle icon style */
.contact-info-icon.icon-style-circle {
  border-radius: 50%;
}

/* Square icon style */
.contact-info-icon.icon-style-square {
  border-radius: var(--radius-lg, 12px);
}

/* Contact Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #1f2937);
}

.contact-form .form-control {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text, #1f2937);
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form .form-control:focus {
  outline: none;
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.contact-form .form-control::placeholder {
  color: var(--color-text-muted, #9ca3af);
}

.contact-form textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.contact-form select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Input Styles */
.contact-form .input-style-rounded {
  border-radius: 8px;
}

.contact-form .input-style-square {
  border-radius: 0;
}

.contact-form .input-style-underline {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.contact-form .input-style-underline:focus {
  box-shadow: none;
  border-bottom-color: var(--color-primary, #6366f1);
}

/* Radio and Checkbox */
.contact-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form .radio-label,
.contact-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.contact-form .radio-label input,
.contact-form .checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary, #6366f1);
}

/* Required mark */
.contact-form .required {
  color: var(--color-error, #ef4444);
  margin-left: 2px;
}

/* Submit button */
.contact-form .form-submit {
  margin-top: 8px;
}

.contact-form .form-submit .btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
}

/* Form messages */
.contact-form .form-message {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.contact-form .success-message {
  background-color: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.contact-form .error-message {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}


/* Block type: footers/footer-1 */
/* Footer 1 Styles */

/* Footer Logo */
.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
}

.footer-logo-image {
  height: 40px;
  width: auto;
}

.footer-logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

/* Social Icons - using SVG background images */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--social-radius, 8px);
  background: var(--social-fill, rgba(255, 255, 255, 1));
  transition: background 0.2s, transform 0.2s;
}

.social-link:hover {
  background: var(--social-hover, rgba(200, 200, 200, 1));
  transform: translateY(-2px);
}

/* Shape variations */
.footer-social[data-shape="square"] .social-link {
  border-radius: 4px;
}

.footer-social[data-shape="rounded"] .social-link {
  border-radius: 8px;
}

.footer-social[data-shape="circle"] .social-link {
  border-radius: 50%;
}

.social-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.social-facebook .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
}

.social-instagram .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.5' fill='white'/%3E%3C/svg%3E");
}

.social-telegram .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.787l3.019-14.228c.309-1.239-.473-1.8-1.282-1.432z'/%3E%3C/svg%3E");
}

.social-twitter .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
}

.social-linkedin .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
}

.social-youtube .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02' fill='%23111827'/%3E%3C/svg%3E");
}

.social-tiktok .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z'/%3E%3C/svg%3E");
}

.social-whatsapp .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}

.social-viber .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.663 6.716.567 9.87c-.096 3.155-.21 9.072 5.542 10.741h.006l-.005 2.458s-.037.996.618 1.198c.792.244 1.26-.51 2.018-1.328.416-.448.99-1.107 1.424-1.612 3.924.331 6.94-.424 7.283-.537.79-.26 5.26-.83 5.988-6.769.752-6.124-.363-9.998-2.39-11.756l-.003-.003c-.557-.521-2.796-2.19-8.07-2.259L11.4 0zm.167 1.867c4.48.058 6.43 1.395 6.884 1.815 1.67 1.45 2.558 4.776 1.927 9.913-.598 4.853-4.016 5.278-4.682 5.497-.282.092-2.846.73-6.066.525 0 0-2.403 2.9-3.153 3.658-.117.12-.27.166-.368.144-.137-.031-.175-.18-.174-.398l.026-3.964C2.013 17.502 2.122 12.912 2.2 10.168c.078-2.744.583-4.887 2.03-6.322 1.91-1.738 5.286-1.97 7.34-1.979zm.458 2.823c-.117 0-.233.095-.23.247.003.152.122.244.239.244 1.072.007 2.088.398 2.863 1.097.776.7 1.27 1.665 1.393 2.722.014.118.115.21.234.207a.244.244 0 00.219-.262 5.137 5.137 0 00-1.568-3.067c-.872-.788-2.014-1.183-3.15-1.188zm-4.161.391c-.268-.006-.554.094-.803.296l-.008.005a4.31 4.31 0 00-.583.523 2.054 2.054 0 00-.487.96c-.087.397-.054.818.132 1.241a7.876 7.876 0 001.018 1.774c.667.9 1.464 1.76 2.373 2.508.35.29.703.56 1.058.808.119.083.239.163.357.241l.01.006.005.004.003.001.004.002.002.002c.059.04.119.078.178.116l.073.045c.294.173.583.275.868.302a1.198 1.198 0 00.753-.163 2.704 2.704 0 00.533-.374c.185-.16.4-.4.498-.603.104-.218.138-.464.05-.712-.113-.313-.397-.524-.677-.709l-.008-.004c-.185-.121-.36-.227-.514-.315a15.842 15.842 0 00-.384-.207.963.963 0 00-.878.037c-.15.09-.27.204-.408.322l-.036.03c-.128.109-.285.243-.363.283-.061.03-.074.025-.133-.01l-.01-.006-.008-.004c-.38-.208-.753-.495-1.108-.837-.356-.343-.696-.741-.972-1.183l-.004-.008-.005-.01c-.03-.057-.049-.085-.014-.16.043-.09.172-.256.28-.398l.001-.002.027-.037c.116-.15.22-.284.3-.433a.873.873 0 00.038-.755 17.62 17.62 0 00-.285-.531c-.122-.22-.26-.468-.39-.68-.232-.38-.449-.594-.766-.674a.986.986 0 00-.29-.035zm4.592.603c-.13-.003-.24.097-.244.227-.004.13.097.24.227.244.735.023 1.393.325 1.89.838.496.513.78 1.206.773 1.938-.001.13.102.237.232.239h.007c.128 0 .233-.103.234-.23.01-.877-.328-1.709-.925-2.325-.597-.616-1.395-.92-2.194-.93zm.462 1.586c-.125-.021-.25.064-.277.195-.027.13.057.257.187.284.36.075.647.26.842.525.195.264.305.61.304.996-.002.13.101.238.231.24h.008a.234.234 0 00.231-.232c.002-.51-.143-.982-.42-1.356a1.964 1.964 0 00-1.106-.652z'/%3E%3C/svg%3E");
}

.social-snapchat .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301a.42.42 0 01.464.053.393.393 0 01.117.469c-.11.255-.378.482-.744.703-.103.067-.19.114-.311.164-.127.061-.254.122-.381.173-.151.062-.276.135-.374.205-.098.086-.19.217-.19.417 0 .06.015.114.03.161.195.533.56 1.012 1.024 1.465.253.244.536.465.859.653.26.133.52.244.82.334.12.036.195.084.24.126a.392.392 0 01.12.285c0 .057-.015.112-.045.165a.538.538 0 01-.247.24 1.81 1.81 0 01-.494.165c-.126.024-.252.03-.39.03a2.16 2.16 0 01-.274-.015 2.98 2.98 0 00-.285-.015c-.136 0-.267.02-.387.06a1.02 1.02 0 00-.277.12c-.075.053-.157.116-.247.195a5.06 5.06 0 01-.165.136c-.18.146-.378.3-.588.434-.208.135-.433.254-.654.35-.223.095-.454.17-.72.226a3.59 3.59 0 01-.761.08 3.51 3.51 0 01-.533-.044 2.69 2.69 0 01-.523-.138 3.04 3.04 0 01-.525-.244 4.63 4.63 0 01-.51-.342c-.223.127-.45.24-.735.315a3.9 3.9 0 01-.915.105h-.03c-.23 0-.484-.015-.765-.075a2.09 2.09 0 01-.496-.15 4.53 4.53 0 01-.48-.245 4.44 4.44 0 01-.495-.315c-.247-.18-.42-.315-.57-.405a1.05 1.05 0 00-.258-.12 1.05 1.05 0 00-.375-.06c-.095 0-.18.003-.27.015a2.13 2.13 0 01-.284.015c-.135 0-.285-.015-.435-.045a1.73 1.73 0 01-.42-.135.607.607 0 01-.27-.225.434.434 0 01-.06-.225.407.407 0 01.12-.285.527.527 0 01.24-.12c.27-.09.54-.195.81-.33.315-.18.615-.405.87-.66.465-.45.84-.93 1.035-1.47.015-.045.03-.1.03-.165 0-.195-.09-.33-.195-.42a1.18 1.18 0 00-.375-.195c-.135-.06-.255-.12-.39-.18-.12-.06-.21-.105-.315-.165-.36-.21-.63-.435-.75-.69a.382.382 0 01.12-.465.445.445 0 01.465-.06c.39.18.735.285 1.035.3.21 0 .33-.045.405-.09a9.58 9.58 0 01-.03-.51l-.003-.06c-.104-1.628-.23-3.654.3-4.847C7.86 1.07 11.216.793 12.206.793z'/%3E%3C/svg%3E");
}

.social-github .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
}

.social-dribbble .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.82zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z'/%3E%3C/svg%3E");
}

.social-behance .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M6.938 4.503c.702 0 1.34.06 1.92.188.577.13 1.07.33 1.485.61.41.28.733.65.96 1.12.225.47.34 1.05.34 1.73 0 .74-.17 1.36-.507 1.86-.338.5-.837.9-1.502 1.22.906.26 1.576.72 2.022 1.37.448.66.665 1.45.665 2.36 0 .75-.13 1.39-.41 1.93-.28.55-.67 1-1.16 1.35-.48.348-1.05.6-1.67.767-.61.165-1.252.254-1.91.254H0V4.51h6.938v-.007zM6.545 9.8c.555 0 1.01-.12 1.36-.375.35-.25.522-.65.522-1.19 0-.3-.05-.56-.163-.76-.115-.2-.27-.35-.47-.45-.2-.1-.432-.17-.687-.21-.258-.036-.523-.054-.793-.054H3.42v3.04h3.126zm.192 5.47c.305 0 .593-.03.87-.09.278-.055.52-.15.725-.28.21-.135.378-.318.504-.555.125-.24.19-.54.19-.91 0-.72-.21-1.24-.628-1.55-.42-.31-.978-.47-1.67-.47H3.42v3.86h3.317v-.005zm10.106-.567c.353.39.86.59 1.52.59.474 0 .88-.12 1.22-.365.34-.244.577-.513.71-.79h2.36c-.373 1.16-.946 1.99-1.72 2.49-.776.5-1.71.753-2.81.753-.78 0-1.48-.13-2.11-.39-.63-.26-1.16-.63-1.6-1.11-.438-.48-.77-1.05-1-1.72-.23-.67-.35-1.41-.35-2.22 0-.78.12-1.5.36-2.17.24-.67.58-1.25 1.02-1.74.438-.49.96-.87 1.57-1.14.61-.27 1.29-.41 2.03-.41.84 0 1.57.16 2.2.49.63.33 1.15.78 1.56 1.35.41.57.71 1.23.9 1.98.19.75.26 1.55.21 2.4h-7.04c.05.86.37 1.54.72 1.93zm2.67-4.81c-.29-.35-.75-.53-1.37-.53-.41 0-.75.07-1.01.22-.27.14-.48.32-.64.53-.16.2-.27.43-.34.68-.07.24-.11.46-.12.67h4.23c-.1-.65-.38-1.22-.75-1.57zM15.19 4.91h4.71v1.36h-4.71V4.91z'/%3E%3C/svg%3E");
}

.social-discord .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E");
}

.social-reddit .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z'/%3E%3C/svg%3E");
}

.social-threads .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.96-.065-1.187.408-2.264 1.332-3.03.899-.745 2.199-1.196 3.761-1.304 1.324-.092 2.551.033 3.648.374-.067-1.03-.378-1.823-.932-2.373-.64-.637-1.6-.966-2.855-.982h-.054c-1.063.014-1.94.298-2.606.844-.6.493-1.004 1.18-1.2 2.048l-2-.43c.263-1.18.835-2.165 1.7-2.93 1.015-.9 2.343-1.382 3.836-1.396h.074c1.752.022 3.14.521 4.127 1.485.924.9 1.442 2.168 1.54 3.773.368.168.71.367 1.022.599 1.078.798 1.864 1.904 2.278 3.201.534 1.675.349 4.134-1.732 6.169-1.908 1.867-4.256 2.698-7.398 2.717zM12.24 14.62c-1.12.078-2 .368-2.543.84-.478.415-.71.946-.676 1.537.043.792.48 1.395 1.264 1.745.627.28 1.418.39 2.22.346 1.132-.063 2.012-.478 2.617-1.235.522-.653.867-1.574.998-2.67-.997-.29-2.135-.439-3.392-.439-.164 0-.328.004-.489.013z'/%3E%3C/svg%3E");
}

.social-email .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.social-phone .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.social-website .social-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════════ */
/*                       BLOCK INSTANCE STYLES                             */
/* ═══════════════════════════════════════════════════════════════════════ */

#header_main { background-color: rgba(15, 23, 42, 0) }
#why-poland { background-color: #1e293b }
#services { background-color: #0f172a }
#process { background-color: #1e293b }
#pricing { background-color: #0f172a }
#costs { background-color: #1e293b }
#cta .section-bg-source { display: none !important; }
#contact { background-color: #0f172a }
#footer_main { background-color: #111827 }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                         ELEMENT STYLES                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

#header_main .header-logo, #header_main .header-logo-text, #header_main .footer-logo, #header_main .footer-logo-text { color: #111827 !important; }
#header_main :is(.buttons, .hero-buttons, .about-buttons, .cta-buttons, .header-buttons) { justify-content: flex-start; }
#header_main [data-field="button1"][data-editable="button"] { border-radius: 9999px !important; }
#header_main [data-field="button1"].btn { border-radius: 9999px !important; }
#hero_main :is(.buttons, .hero-buttons, .about-buttons, .cta-buttons, .header-buttons) { justify-content: center; }
#hero_main [data-field="button1"][data-editable="button"] { border-radius: 9999px !important; }
#hero_main [data-field="button1"].btn { border-radius: 9999px !important; }
#hero_main [data-field="button2"][data-editable="button"] { border-radius: 9999px !important; }
#hero_main [data-field="button2"].btn { border-radius: 9999px !important; }
#why-poland .section-title { color: #f1f5f9 !important; }
#why-poland .section-subtitle { color: #6b7280 !important; }
#why-poland .feature-icon.icon-style-default,
#why-poland .service-icon.icon-style-default,
#why-poland .contact-info-icon.icon-style-default { background: transparent !important; }
#services .section-title { color: #111827 !important; }
#services .section-subtitle { color: #6b7280 !important; }
#process .section-title { color: #111827 !important; }
#process .section-subtitle { color: #6b7280 !important; }
#process .feature-icon.icon-style-circle,
#process .service-icon.icon-style-circle,
#process .contact-info-icon.icon-style-circle { border-radius: 9999px !important; }
#pricing .section-title { color: #111827 !important; }
#pricing .section-subtitle { color: #6b7280 !important; }
#costs .section-title { color: #111827 !important; }
#costs .section-subtitle { color: #6b7280 !important; }
#costs .feature-icon.icon-style-circle,
#costs .service-icon.icon-style-circle,
#costs .contact-info-icon.icon-style-circle { border-radius: 9999px !important; }
#cta .hero-title, #cta h1, #cta .block-title { color: #ffffff !important; }
#cta .hero-subtitle, #cta .block-subtitle { color: rgba(255,255,255,0.9) !important; }
#cta :is(.buttons, .hero-buttons, .about-buttons, .cta-buttons, .header-buttons) { justify-content: center; }
#cta [data-field="button1"][data-editable="button"] { border-radius: 9999px !important; }
#cta [data-field="button1"].btn { border-radius: 9999px !important; }
#cta [data-field="button1"].btn-primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1e3a8a !important;
}
#cta [data-field="button1"].btn-primary:hover {
  background: #f3f4f6 !important;
  border-color: #f3f4f6 !important;
}
#cta [data-field="button2"][data-editable="button"] { border-radius: 9999px !important; }
#cta [data-field="button2"].btn { border-radius: 9999px !important; }
#cta [data-field="button2"].btn-primary {
  color: #000000 !important;
}
#cta [data-field="button2"].btn-primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}
#cta [data-field="button2"].btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
#cta [data-field="button2"].btn-outline:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
#contact .section-title { color: #111827 !important; }
#contact .section-subtitle { color: #6b7280 !important; }
#footer_main .header-logo, #footer_main .header-logo-text, #footer_main .footer-logo, #footer_main .footer-logo-text { color: #ffffff !important; }
#footer_main .hero-description, #footer_main .hero-description *, #footer_main .block-description, #footer_main .block-description *, #footer_main .text-description, #footer_main .text-description * { color: #9ca3af !important; }
#footer_main .footer-copyright, #footer_main .footer-copyright p, #footer_main .footer-classic-copyright p { color: #9ca3af !important; }
/* ═══════════════════════════════════════════════════════════════════════ */
/*                          BUTTON STYLES                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Button styles: hero_main */
#hero_main :is(.buttons, .hero-buttons, .about-buttons, .cta-buttons, .header-buttons) { justify-content: center; }
#hero_main [data-field="button1"][data-editable="button"] { border-radius: 9999px !important; }
#hero_main [data-field="button1"].btn { border-radius: 9999px !important; }
#hero_main [data-field="button2"][data-editable="button"] { border-radius: 9999px !important; }
#hero_main [data-field="button2"].btn { border-radius: 9999px !important; }


/* ═══════════════════════════════════════════════════════════════════════ */
/*                           CUSTOM CSS                                    */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Custom CSS: header_main */
#header_main .header { background: rgba(15, 23, 42, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: none !important; } #header_main .header-logo-image { height: 44px; width: auto; object-fit: contain; } #header_main .header-nav a, #header_main .nav-item a { color: #e2e8f0 !important; font-weight: 500; transition: all 0.2s ease; } #header_main .header-nav a:hover, #header_main .nav-item a:hover { color: #3b82f6 !important; } #header_main .btn-primary { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; border: none !important; border-radius: 50px !important; padding: 10px 24px !important; font-weight: 600; box-shadow: 0 4px 20px rgba(59,130,246,0.3); } #header_main .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(59,130,246,0.4); } #header_main .header-mobile-toggle svg { stroke: #e2e8f0; } #header_main .lang-switcher { display: flex; gap: 4px; background: transparent !important; padding: 0 !important; } #header_main .lang-btn { padding: 6px 14px !important; border-radius: 8px !important; border: none !important; background: transparent !important; color: #94a3b8 !important; font-weight: 500; font-size: 0.875rem; transition: all 0.2s ease; } #header_main .lang-btn:hover { background: rgba(59,130,246,0.1) !important; color: #e2e8f0 !important; } #header_main .lang-btn.active { background: rgba(59,130,246,0.2) !important; color: #3b82f6 !important; } .mobile-menu { background: #0f172a !important; border-left: 1px solid rgba(255,255,255,0.1); } .mobile-menu-header { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px 24px; } .mobile-menu-logo { display: flex; align-items: center; gap: 12px; } .mobile-logo-image { height: 36px; width: auto; } .mobile-logo-text { color: #f1f5f9; font-weight: 600; font-size: 1.125rem; } .mobile-menu-close { background: rgba(255,255,255,0.1) !important; border-radius: 10px !important; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .mobile-menu-close:hover { background: rgba(255,255,255,0.15) !important; } .mobile-menu-close svg { stroke: #e2e8f0 !important; width: 20px; height: 20px; } .mobile-menu-nav { padding: 16px 24px; } .mobile-menu-nav .nav-item { border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .mobile-menu-nav .nav-item:last-child { border-bottom: none !important; } .mobile-menu-nav .nav-item > a { color: #e2e8f0 !important; padding: 16px 0 !important; font-size: 1rem; font-weight: 500; } .mobile-menu-nav .nav-item > a:hover { color: #3b82f6 !important; } .mobile-menu-nav .submenu { background: rgba(255,255,255,0.05) !important; border-radius: 12px; margin: 8px 0; } .mobile-menu-nav .submenu a { color: #94a3b8 !important; padding: 12px 16px !important; } .mobile-menu-nav .submenu a:hover { background: rgba(59,130,246,0.1) !important; color: #3b82f6 !important; } .mobile-menu-footer { padding: 24px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: auto; } .mobile-lang-switcher { display: flex; gap: 8px; margin-bottom: 16px; } .mobile-lang-btn { padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 0.875rem; color: #94a3b8; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s ease; } .mobile-lang-btn:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; } .mobile-lang-btn.active { background: rgba(59,130,246,0.2); color: #3b82f6; border-color: rgba(59,130,246,0.3); } .mobile-menu-buttons .btn { width: 100%; justify-content: center; padding: 14px 24px !important; border-radius: 50px !important; font-weight: 600; } .mobile-menu-buttons .btn-primary { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; border: none !important; color: #fff !important; box-shadow: 0 4px 20px rgba(59,130,246,0.3); } .mobile-menu-overlay.active { background: rgba(0,0,0,0.7); }

/* Custom block: hero_main */
/* Hero Premium - WOW Effect */
#hero_main { padding: 0 !important; }

.hero-premium { min-height: 100vh; min-height: -webkit-fill-available; position: relative; display: flex; align-items: center; overflow: hidden; background: #0a0f1a; contain: layout style paint; border: none !important; }

/* Animated Background */
.hero-bg { position: absolute; inset: 0; overflow: hidden; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hero-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(99,102,241,0.08) 0%, transparent 60%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); }

/* Glow Effects */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; animation: glowPulse 8s ease-in-out infinite; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hero-glow-1 { width: 600px; height: 600px; background: linear-gradient(135deg, #3b82f6, #6366f1); top: -200px; left: -100px; animation-delay: 0s; }
.hero-glow-2 { width: 500px; height: 500px; background: linear-gradient(135deg, #06b6d4, #3b82f6); bottom: -150px; right: -100px; animation-delay: 2s; }
.hero-glow-3 { width: 300px; height: 300px; background: linear-gradient(135deg, #8b5cf6, #06b6d4); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 4s; }

@keyframes glowPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } }

/* Particles */
.hero-particles { position: absolute; inset: 0; }
.particle { position: absolute; width: 4px; height: 4px; background: rgba(59,130,246,0.6); border-radius: 50%; animation: particleFloat 15s linear infinite; }
.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; top: 80%; animation-delay: 2s; animation-duration: 18s; }
.particle:nth-child(3) { left: 60%; top: 10%; animation-delay: 4s; animation-duration: 15s; }
.particle:nth-child(4) { left: 80%; top: 60%; animation-delay: 1s; animation-duration: 20s; }
.particle:nth-child(5) { left: 40%; top: 40%; animation-delay: 3s; animation-duration: 14s; }
.particle:nth-child(6) { left: 90%; top: 30%; animation-delay: 5s; animation-duration: 16s; }

@keyframes particleFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-1000px) translateX(20px); opacity: 0; } }

/* Container */
.hero-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px; align-items: center; min-height: 100vh; min-height: -webkit-fill-available; padding: 63px 20px 42px; position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; width: 100%; }

/* Content */
.hero-content { max-width: 560px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

/* Badge */
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(6,182,212,0.15)); border: 1px solid rgba(59,130,246,0.3); padding: 10px 20px; border-radius: 50px; font-weight: 600; font-size: 0.875rem; color: #3b82f6; margin-bottom: 10px; animation: badgePulse 3s ease-in-out infinite; }
.hero-badge svg { color: #06b6d4; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.3); } 50% { box-shadow: 0 0 20px 5px rgba(59,130,246,0.2); } }

/* Title */
.hero-title { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 4px; background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 30%, #3b82f6 70%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradientShift 8s ease infinite; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Subtitle */
.hero-subtitle { font-size: 1.25rem; line-height: 1.7; color: #94a3b8; margin-bottom: 32px; max-width: 500px; }

/* Stats */
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 40px; padding: 24px 32px; background: rgba(30,41,59,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; isolation: isolate; }
.hero-stat { text-align: center; }
.hero-stat-number { display: block; font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-stat-label { font-size: 0.875rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.hero-stat-divider { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent); }

/* Buttons - Full width centered */
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; grid-column: 1 / -1; margin-top: -20px; padding-top: 0; margin-bottom: 80px; }
.hero-premium .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; border: none !important; padding: 18px 36px !important; border-radius: 50px !important; font-weight: 600; font-size: 1rem; color: #fff !important; box-shadow: 0 10px 40px rgba(59,130,246,0.4); transition: all 0.3s ease; text-decoration: none; }
.hero-premium .btn-primary:hover { border-radius: 9999px!important; transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 60px rgba(59,130,246,0.5); }
.hero-premium .btn-primary svg { transition: transform 0.3s ease; }
.hero-premium .btn-primary:hover svg { transform: translateX(4px); }
.hero-premium .btn-outline { border-radius: 9999px!important; display: inline-flex; align-items: center; padding: 18px 36px !important; border: 2px solid rgba(255,255,255,0.2) !important; border-radius: 50px !important; font-weight: 600; font-size: 1rem; color: #e2e8f0 !important; background: transparent !important; transition: all 0.3s ease; text-decoration: none; }
.hero-premium .btn-outline:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.4) !important; transform: translateY(-2px); }

/* 3D Cube Scene */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1200px; overflow: visible; transform: translate(0, 0); }
.cube-scene { position: relative; width: 260px; height: 260px; }
.cube-glow { position: absolute; inset: -60px; background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, rgba(6,182,212,0.2) 40%, transparent 70%); filter: blur(40px); animation: cubeGlowPulse 4s ease-in-out infinite; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@keyframes cubeGlowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.9; } }

/* Cube */
.cube { width: 180px; height: 180px; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg); animation: cubeRotate 20s linear infinite; }
@keyframes cubeRotate { 0% { transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg); } 100% { transform: translate(-50%, -50%) rotateX(-20deg) rotateY(330deg); } }

.cube-face { position: absolute; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95)); border: 1px solid rgba(59,130,246,0.3); backdrop-filter: blur(10px); box-shadow: inset 0 0 60px rgba(59,130,246,0.1); }
.cube-front { transform: translateZ(90px); }
.cube-back { transform: rotateY(180deg) translateZ(90px); }
.cube-right { transform: rotateY(90deg) translateZ(90px); }
.cube-left { transform: rotateY(-90deg) translateZ(90px); }
.cube-top { transform: rotateX(90deg) translateZ(90px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(90px); }

.cube-icon { font-size: 3.5rem; background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 20px rgba(59,130,246,0.5)); }
.cube-icon-eu { color: #3b82f6; filter: drop-shadow(0 0 20px rgba(59,130,246,0.5)); }
.cube-icon-eu svg { fill: none; stroke: #3b82f6; }
.cube-icon-eu svg circle, .cube-icon-eu svg g { fill: #3b82f6; stroke: none; }
.cube-icon-eu svg > circle:first-child { fill: none; stroke: #3b82f6; }

/* Orbits */
.orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(59,130,246,0.2); border-radius: 50%; animation: orbitRotate 15s linear infinite; }
.orbit-1 { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-duration: 20s; }
.orbit-2 { width: 360px; height: 360px; margin: -180px 0 0 -180px; animation-duration: 25s; animation-direction: reverse; }
.orbit-3 { width: 420px; height: 420px; margin: -210px 0 0 -210px; animation-duration: 30s; }
@keyframes orbitRotate { 0% { transform: rotateX(70deg) rotateZ(0deg); } 100% { transform: rotateX(70deg) rotateZ(360deg); } }

.orbit-dot { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; background: linear-gradient(135deg, #3b82f6, #06b6d4); border-radius: 50%; box-shadow: 0 0 20px rgba(59,130,246,0.8); }
.orbit-2 .orbit-dot { width: 6px; height: 6px; margin-left: -3px; margin-top: -3px; background: #06b6d4; }
.orbit-3 .orbit-dot { width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; background: #8b5cf6; }

/* Floating Cards */
.floating-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(30,41,59,0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); animation: floatCard 6s ease-in-out infinite; }
.floating-card-1 { top: 5%; right: 10px; animation-delay: 0s; }
.floating-card-2 { bottom: 30%; left: 20px; animation-delay: 3s; }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.floating-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.2)); border-radius: 12px; color: #3b82f6; font-size: 1rem; }
.floating-card-text { font-weight: 600; color: #e2e8f0; font-size: 0.875rem; white-space: nowrap; }

/* Scroll Indicator */
.scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; animation: scrollBounce 2s ease-in-out infinite; }
.scroll-mouse { width: 24px; height: 40px; border: 2px solid rgba(255,255,255,0.2); border-radius: 12px; position: relative; }
.scroll-wheel { width: 4px; height: 8px; background: #3b82f6; border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: scrollWheel 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
@keyframes scrollWheel { 0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); } }

/* Responsive */
@media (max-width: 1024px) { 
  .hero-container { grid-template-columns: 1fr !important; gap: 60px; text-align: center; padding: 100px 20px 60px; }
  .hero-content { max-width: 100%; margin: 0 auto; align-items: center; }
  .hero-title { font-size: 2.75rem; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-stats { justify-content: center; }
  .hero-buttons { position: relative; bottom: auto; }
  .hero-visual { order: -1; }
  .cube-scene { width: 220px; height: 220px; }
  .cube { width: 140px; height: 140px; }
  .cube-face { width: 140px; height: 140px; }
  .cube-front { transform: translateZ(70px); }
  .cube-back { transform: rotateY(180deg) translateZ(70px); }
  .cube-right { transform: rotateY(90deg) translateZ(70px); }
  .cube-left { transform: rotateY(-90deg) translateZ(70px); }
  .cube-top { transform: rotateX(90deg) translateZ(70px); }
  .cube-bottom { transform: rotateX(-90deg) translateZ(70px); }
  .cube-icon { font-size: 2.5rem; }
  .floating-card { display: none; }
  .orbit-1 { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .orbit-2 { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .orbit-3 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}

@media (max-width: 640px) {
  .hero-title { font-size: 2rem; }
  .hero-stats { flex-direction: row; gap: 12px; padding: 16px 12px; }
  .hero-stat-number { font-size: 1.25rem; }
  .hero-stat-label { font-size: 0.625rem; }
  .hero-stat-divider { width: 1px; height: 28px; }
  .hero-buttons { flex-direction: column; }
  .hero-premium .btn-primary, .hero-premium .btn-outline { width: 100%; justify-content: center; }
  .scroll-indicator { display: none; }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Hide heavy elements */
  .cube-scene, .floating-card, .orbit, .hero-glow, .particle, .hero-particles { display: none !important; }
  /* Disable animations */
  .hero-badge, .scroll-indicator, .scroll-wheel { animation: none !important; }
  .hero-stats { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  /* Adjust layout without cube */
  .hero-visual { display: none !important; }
  .hero-visual-wrapper { min-height: auto; }
  /* Spacing adjustments */
  .hero-container { padding-top: 50px !important; }
  .hero-subtitle { margin-bottom: 11px !important; }
  .hero-stats { margin-bottom: 8px !important; }
}

/* Custom CSS: why-poland */
#why-poland { padding: 80px 0; background: #1e293b; } #why-poland .features-title { background: linear-gradient(135deg, #f1f5f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } #why-poland .features-subtitle { color: #94a3b8; text-align: center; } #why-poland .feature-card { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 32px; text-align: center; transition: all 0.3s ease; } #why-poland .feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.3); } #why-poland .feature-icon { width: 64px; height: 64px; margin: 0 auto 20px !important; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.2)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } #why-poland .feature-icon i { color: #3b82f6; } #why-poland .feature-title { color: #f1f5f9; } #why-poland .feature-description { color: #94a3b8; } @media (max-width: 768px) { #why-poland .features-grid { grid-template-columns: 1fr !important; } } #why-poland .section { background: transparent; }

/* Custom CSS: services */
#services { padding: 80px 0; background: radial-gradient(ellipse at 70% 20%, rgba(99,102,241,0.1) 0%, transparent 50%), radial-gradient(ellipse at 30% 80%, rgba(59,130,246,0.08) 0%, transparent 50%), linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px), #0a0f1a; background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px, 100% 100%; position: relative; overflow: hidden; } #services > .features { background: transparent !important; } #services::before { content: ''; position: absolute; width: 450px; height: 450px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; filter: blur(120px); opacity: 0.2; top: -150px; right: -100px; animation: servicesGlow 10s ease-in-out infinite; pointer-events: none; z-index: 0; } #services::after { content: ''; position: absolute; width: 350px; height: 350px; background: linear-gradient(135deg, #3b82f6, #6366f1); border-radius: 50%; filter: blur(100px); opacity: 0.15; bottom: -100px; left: -80px; animation: servicesGlow 12s ease-in-out infinite 3s; pointer-events: none; z-index: 0; } @keyframes servicesGlow { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.25; transform: scale(1.05); } } #services .container { position: relative; z-index: 1; } #services .section-title { background: linear-gradient(135deg, #f1f5f9, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #services .section-subtitle { color: #94a3b8; } #services .feature-list-item { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: all 0.3s ease; padding: 32px 0; } #services .feature-list-item:last-child { border-bottom: none; } #services .feature-list-item:hover { padding-left: 16px; background: rgba(99,102,241,0.05); } #services .feature-list-icon { width: 56px; height: 56px; min-width: 56px; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15)); border: 1px solid rgba(99,102,241,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #services .feature-list-icon i { color: #818cf8; font-size: 1.25rem; } #services .feature-list-title { color: #f1f5f9; font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; } #services .feature-list-description { color: #94a3b8; line-height: 1.6; } @media (max-width: 768px) { #services .feature-list-item { gap: 16px; } #services .feature-list-icon { width: 48px; height: 48px; min-width: 48px; } #services .feature-list-icon i { font-size: 1.125rem; } #services .feature-list-title { font-size: 1.125rem; } }

/* Custom CSS: process */
#process { padding: 80px 0; background: #1e293b; position: relative; overflow: hidden; } #process::before { content: ''; position: absolute; top: -200px; left: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%); animation: processGlow1 8s ease-in-out infinite; pointer-events: none; } #process::after { content: ''; position: absolute; bottom: -150px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%); animation: processGlow2 10s ease-in-out infinite; pointer-events: none; } @keyframes processGlow1 { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.2); } } @keyframes processGlow2 { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.15); } } #process .container { position: relative; z-index: 1; } #process .features-title { background: linear-gradient(135deg, #f1f5f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } #process .features-subtitle { color: #94a3b8; text-align: center; } #process .feature-card { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px 32px; text-align: center; transition: all 0.3s ease; } #process .feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.3); } #process .feature-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, #3b82f6, #06b6d4); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(59,130,246,0.3); } #process .feature-icon i { color: #fff; font-size: 1.75rem; } #process .feature-title { color: #f1f5f9; font-size: 1.25rem; } #process .feature-description { color: #94a3b8; } #process .section { background: transparent; }

/* Custom CSS: pricing */
/* Section */
#pricing .section-title { background: linear-gradient(135deg, #f1f5f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#pricing .section-subtitle { color: #94a3b8; }

/* Grid - override base styles */
#pricing .pricing-grid { display: flex !important; flex-direction: column !important; gap: 20px; max-width: 1100px; margin: 0 auto; }

/* Card - full width horizontal */
#pricing .pricing-grid .pricing-card,
#pricing .pricing-cols-3 .pricing-card { 
  flex: 1 1 100% !important; 
  max-width: 100% !important; 
  display: flex !important; 
  flex-direction: row !important;
  align-items: center; 
  padding: 28px 36px !important; 
  gap: 32px; 
  background: rgba(30, 41, 59, 0.5) !important; 
  border: 1px solid rgba(255,255,255,0.08) !important; 
  border-radius: 16px !important; 
  transition: all 0.3s ease; 
  position: relative;
}
#pricing .pricing-card:hover { transform: translateX(8px); box-shadow: 0 15px 40px rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3) !important; }
#pricing .pricing-card.pricing-popular { border: 2px solid rgba(59,130,246,0.4) !important; background: rgba(59, 130, 246, 0.08) !important; }

/* Badge */
#pricing .pricing-badge { position: absolute !important; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; }

/* Header */
#pricing .pricing-header { flex: 0 0 200px; text-align: left !important; margin: 0 !important; border: none !important; }
#pricing .pricing-name { font-size: 1.5rem !important; font-weight: 700; margin-bottom: 6px !important; color: #f1f5f9 !important; }
#pricing .pricing-description { font-size: 0.95rem !important; color: #94a3b8 !important; margin: 0 !important; }

/* Price */
#pricing .pricing-price { flex: 0 0 180px; text-align: center; padding: 0 28px !important; margin: 0 !important; border: none !important; border-left: 1px solid rgba(255,255,255,0.1) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#pricing .price-currency { font-size: 1rem; color: #64748b; }
#pricing .price-amount { font-size: 2.5rem !important; font-weight: 800; background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
#pricing .price-period { display: block; font-size: 0.85rem; color: #64748b; margin-top: 8px; }

/* Features */
#pricing .pricing-features { flex: 1; display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; list-style: none !important; padding: 0 0 0 28px !important; margin: 0 !important; border-left: 1px solid rgba(255,255,255,0.1); }
#pricing .pricing-features li { display: flex; align-items: center; gap: 10px; padding: 0 !important; border: none !important; color: #e2e8f0; font-size: 0.95rem; }
#pricing .pricing-features li svg { width: 18px; height: 18px; color: #22c55e; flex-shrink: 0; }

/* Button */
#pricing .pricing-card .btn { flex: 0 0 auto; white-space: nowrap; padding: 14px 32px !important; border-radius: 50px !important; font-size: 1rem; font-weight: 600; margin-left: 24px; width: auto !important; }
#pricing .pricing-card .btn-outline { border: 2px solid rgba(59,130,246,0.5) !important; color: #3b82f6 !important; background: transparent !important; }
#pricing .pricing-card .btn-outline:hover { background: rgba(59,130,246,0.1) !important; }
#pricing .pricing-card.pricing-popular .btn { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; border: none !important; color: #fff !important; box-shadow: 0 8px 25px rgba(59,130,246,0.3); }

/* Mobile */
@media (max-width: 900px) { 
  #pricing .pricing-grid .pricing-card,
  #pricing .pricing-cols-3 .pricing-card { flex-direction: column !important; text-align: center; gap: 24px; padding: 32px 24px !important; } 
  #pricing .pricing-header { flex: none; text-align: center !important; } 
  #pricing .pricing-price { flex: none; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.1) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 20px 0 !important; width: 100%; } 
  #pricing .pricing-features { flex: none; grid-template-columns: 1fr; justify-items: center; border-left: none; padding-left: 0 !important; } 
  #pricing .pricing-card .btn { width: 100% !important; margin-left: 0; } 
  #pricing .pricing-badge { left: 50%; transform: translateX(-50%); } 
}

/* Custom CSS: costs */
#costs { padding: 80px 0; background: radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.08) 0%, transparent 50%), linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px), #0a0f1a; background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px, 100% 100%; position: relative; overflow: hidden; } #costs::before { content: ''; position: absolute; width: 500px; height: 500px; background: linear-gradient(135deg, #3b82f6, #6366f1); border-radius: 50%; filter: blur(100px); opacity: 0.3; top: -200px; left: -100px; animation: costsGlow 8s ease-in-out infinite; pointer-events: none; } #costs::after { content: ''; position: absolute; width: 400px; height: 400px; background: linear-gradient(135deg, #06b6d4, #3b82f6); border-radius: 50%; filter: blur(100px); opacity: 0.25; bottom: -150px; right: -100px; animation: costsGlow 10s ease-in-out infinite 2s; pointer-events: none; } @keyframes costsGlow { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.1); } } #costs .container { position: relative; z-index: 1; } #costs .features-title { background: linear-gradient(135deg, #f1f5f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } #costs .features-subtitle { color: #94a3b8; text-align: center; } #costs .feature-card { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 40px 32px; text-align: center; transition: all 0.3s ease; } #costs .feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.3); } #costs .feature-icon { width: 72px; height: 72px; margin: 0 auto 24px; background: linear-gradient(135deg, #3b82f6, #06b6d4); border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(59,130,246,0.3); } #costs .feature-icon i { color: #ffffff; font-size: 1.75rem; } #costs .feature-title { background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 800; margin-bottom: 8px; } #costs .feature-description { color: #94a3b8; font-size: 1rem; } #costs .section { background: transparent; }

/* Custom CSS: cta_main */
#cta { padding: 80px 0; } #cta .cta-title { font-size: 2.75rem; text-shadow: 0 2px 20px rgba(0,0,0,0.2); } #cta .btn-primary { padding: 18px 44px; font-weight: 700; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } #cta .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(0,0,0,0.3); } #cta .btn-outline { border: 2px solid rgba(255,255,255,0.5) !important; padding: 18px 44px; backdrop-filter: blur(10px); } #cta .btn-outline:hover { background: rgba(255,255,255,0.15) !important; border-color: #fff !important; } #cta .section { background: transparent; }

/* Custom CSS: contact */
#contact { padding: 60px 0; background: #0f172a; } #contact .section-title { background: linear-gradient(135deg, #f1f5f9, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; width: 100%; margin-bottom: 8px !important; } #contact .section-subtitle { color: #94a3b8; text-align: center; width: 100%; margin-bottom: 16px !important; } #contact .contact-content { align-items: center !important; gap: 24px !important; } #contact .contact-info { text-align: center !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px 48px !important; width: 100% !important; padding-right: 0 !important; } #contact .contact-info-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 4px !important; } #contact .contact-info-icon { width: 48px !important; height: 48px !important; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.2)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 !important; } #contact .contact-info-icon i { color: #3b82f6; font-size: 1.1rem; } #contact .contact-info-label { color: #94a3b8; font-size: 0.85rem; margin-top: 6px !important; } #contact .contact-info-value { color: #f1f5f9; font-size: 1rem; text-align: center !important; } @media (max-width: 768px) { #contact .contact-info { flex-direction: column !important; gap: 24px !important; } #contact .contact-info-item { width: 100% !important; } } #contact .contact-form-wrapper { width: 100% !important; max-width: 600px !important; margin: 0 auto !important; background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 32px !important; } #contact .contact-form-wrapper input, #contact .contact-form-wrapper textarea { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 14px !important; padding: 14px 18px !important; color: #f1f5f9 !important; } #contact .contact-form-wrapper input::placeholder, #contact .contact-form-wrapper textarea::placeholder { color: #64748b !important; } #contact .contact-form-wrapper input:focus, #contact .contact-form-wrapper textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important; outline: none !important; } #contact .contact-form-wrapper button[type='submit'] { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; border-radius: 50px !important; padding: 14px 36px !important; font-weight: 600; width: 100%; box-shadow: 0 10px 40px rgba(59,130,246,0.3); } #contact .contact-form-wrapper button[type='submit']:hover { transform: translateY(-2px); box-shadow: 0 15px 50px rgba(59,130,246,0.4); }


/* Dark Glassmorphism Theme */
:root {
  --bg-dark: #0f172a;
  --bg-card: rgba(30, 41, 59, 0.8);
  --bg-glass: rgba(30, 41, 59, 0.6);
  --primary: #3b82f6;
  --accent: #06b6d4;
  --text-light: #f1f5f9;
  --text-muted: #94a3b8;
  --border-glass: rgba(255, 255, 255, 0.1);
}

/* Base Dark Theme */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, sans-serif;
}

/* Glass Effect */
.glass, .glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow Effects */
.glow-blue { box-shadow: 0 0 40px rgba(59, 130, 246, 0.3); }
.glow-cyan { box-shadow: 0 0 40px rgba(6, 182, 212, 0.3); }

/* Premium Cards */
.premium-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  transition: all 0.3s ease;
}
.premium-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Trust Badge */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  color: #3b82f6;
  font-size: 0.875rem;
}

/* Global Button Styles - Rounded Pills */
.btn, button[type='submit'], .btn-primary, .btn-outline {
  border-radius: 50px !important;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-primary, button[type='submit'] {
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover, button[type='submit']:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}
.btn-outline {
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: transparent !important;
  color: #fff !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* Section backgrounds */
.section {
  background: var(--bg-dark);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Links */
a {
  color: #3b82f6;
  transition: color 0.2s ease;
}
a:hover {
  color: #06b6d4;
}

/* Form Inputs - Dark Theme */
input, textarea, select {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  border-radius: 12px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: #64748b !important;
}

/* Header Dark Theme */
.header {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.header-nav-link, .header a {
  color: #f1f5f9 !important;
}
.header-nav-link:hover {
  color: #3b82f6 !important;
}

/* Footer Dark Theme */
.footer {
  background: #0a0f1a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Cookie Notice Dark Theme */
.cookie-notice {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.4); }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.float-animation { animation: float 3s ease-in-out infinite; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*                     CMS COMPATIBILITY FIXES                              */
/* ═══════════════════════════════════════════════════════════════════════ */

/* --- 1. Header Nav: CMS renders {{menu:main}} as <nav><ul><li> --- */
.header .container > nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.header .container > nav > ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header .container > nav > ul > li {
  list-style: none;
}
.header .container > nav > ul > li > a {
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  color: #e2e8f0 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 8px 16px;
  display: block;
}
.header .container > nav > ul > li > a:hover {
  color: #3b82f6 !important;
}

/* --- 2. Logo text: hide text node next to img in .header-logo --- */
.header-logo {
  font-size: 0 !important;
  color: transparent !important;
}
.header-logo img {
  font-size: 1rem;
}
.footer-logo {
  font-size: 0 !important;
  color: transparent !important;
}
.footer-logo img {
  font-size: 1rem;
}

/* --- 3. Lang Switcher: CMS uses BEM classes lang-switcher__link --- */
.lang-switcher__link {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}
.lang-switcher__link:hover {
  background: rgba(59,130,246,0.1) !important;
  color: #e2e8f0 !important;
}
.lang-switcher__link--active,
.lang-switcher__link--active:hover {
  background: rgba(59,130,246,0.2) !important;
  color: #3b82f6 !important;
}
.header .lang-switcher {
  display: flex;
  gap: 4px;
  background: transparent !important;
  padding: 0 !important;
}

/* --- 4. Icon wrappers: CMS sets FA class on [data-editor-icon] div, losing feature-icon --- */
/* Why Poland section icons — wrapper has correct FA class, hide <i> (cloned) */
#why-poland .feature-card > [data-editor-icon] {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.2)) !important;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem !important;
  color: #3b82f6;
  -webkit-text-fill-color: #3b82f6;
}
#why-poland .feature-card > [data-editor-icon] i {
  display: none !important;
}
#why-poland .feature-card > [data-editor-icon]::before {
  display: inline-block !important;
  font-size: 1.5rem;
  color: #3b82f6;
  -webkit-text-fill-color: #3b82f6;
}

/* Services section icons — wrapper has correct FA class, hide <i> (cloned) */
#services .feature-list-item > [data-editor-icon] {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15)) !important;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 14px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem !important;
  color: #818cf8;
  -webkit-text-fill-color: #818cf8;
}
#services .feature-list-item > [data-editor-icon] i {
  display: none !important;
}
#services .feature-list-item > [data-editor-icon]::before {
  display: inline-block !important;
  font-size: 1.25rem;
  color: #818cf8;
  -webkit-text-fill-color: #818cf8;
}

/* Process section icons — wrapper has correct FA class, hide <i> (cloned) */
#process .feature-card > [data-editor-icon] {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(59,130,246,0.3);
  font-size: 1.75rem !important;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#process .feature-card > [data-editor-icon] i {
  display: none !important;
}
#process .feature-card > [data-editor-icon]::before {
  display: inline-block !important;
  font-size: 1.75rem;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Costs section icons — wrapper has correct FA class, <i> has cloned class */
#costs .feature-card > [data-editor-icon] {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border-radius: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(59,130,246,0.3);
  font-size: 1.75rem !important;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
#costs .feature-card > [data-editor-icon] i {
  display: none !important;
}
#costs .feature-card > [data-editor-icon]::before {
  display: inline-block !important;
  font-size: 1.75rem;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* Contact info icons */
#contact .contact-info-icon[data-editor-icon],
#contact [data-editor-icon].contact-info-icon,
#contact .contact-info-icon {
  font-size: 0 !important;
}
#contact .contact-info-icon::before {
  display: none !important;
}

/* Global: prevent [data-editor-icon] from rendering FA ::before on wrapper */
[data-editor-icon]::before {
  display: none !important;
}
[data-editor-icon] {
  font-size: 0; /* hide the FA class text rendering */
}
[data-editor-icon] i {
  font-size: 1.25rem; /* restore for child <i> */
}

/* --- 4b. Contact section layout: subtitle + phone/email alignment ---
   .contact-info is flex-row wrap. CMS-rendered <p> subtitle must take
   full row width so phone/email items wrap below it, not beside it. */
#contact .contact-info > p {
  width: 100% !important;
  flex-basis: 100% !important;
}
#contact .contact-info > h2 {
  width: 100% !important;
  flex-basis: 100% !important;
}

/* --- 5. Contact Form: CMS renders with .nwl-form class --- */
.nwl-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nwl-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nwl-form-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e8f0;
}
/* Required asterisk */
.nwl-form-field--required label::after {
  content: ' *';
  color: #ef4444;
}
.nwl-form-field input,
.nwl-form-field textarea {
  width: 100%;
  padding: 14px 18px !important;
  font-size: 1rem;
  font-family: inherit;
  color: #f1f5f9 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.nwl-form-field input:focus,
.nwl-form-field textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
  outline: none !important;
}
.nwl-form-field input::placeholder,
.nwl-form-field textarea::placeholder {
  color: #64748b !important;
}
.nwl-form-field textarea {
  min-height: 120px;
  resize: vertical;
}
/* Hide honeypot field */
.nwl-form > div[aria-hidden="true"] {
  display: none !important;
}
/* Hide empty phone field that has no input */
.nwl-form-field:not(:has(input)):not(:has(textarea)):not(:has(select)) {
  display: none;
}
.nwl-form .nwl-btn {
  width: 100%;
  padding: 14px 36px !important;
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(59,130,246,0.3);
  transition: all 0.3s ease;
}
.nwl-form .nwl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(59,130,246,0.4);
}
.nwl-form button[type="submit"] {
  width: 100%;
  padding: 14px 36px !important;
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(59,130,246,0.3);
  transition: all 0.3s ease;
}
.nwl-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(59,130,246,0.4);
}
.nwl-form-message {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  margin-top: 8px;
}
.nwl-form-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* --- 6. Section title colors: override inline #111827 on dark backgrounds --- */
#services .section-title,
#services .section-header h2 {
  background: linear-gradient(135deg, #f1f5f9, #818cf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: #f1f5f9 !important;
}
#services .section-subtitle,
#services .section-header p {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#process .features-title,
#process .section-title {
  background: linear-gradient(135deg, #f1f5f9, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#process .features-subtitle {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#pricing .section-title,
#pricing .section-header h2 {
  background: linear-gradient(135deg, #f1f5f9, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#pricing .section-subtitle,
#pricing .section-header p {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#costs .features-title {
  background: linear-gradient(135deg, #f1f5f9, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#costs .features-subtitle {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#contact .section-title {
  background: linear-gradient(135deg, #f1f5f9, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#contact .section-subtitle {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* --- 7. Footer: hide text next to logo, fix description wrapping --- */
.footer-description p,
.footer-brand p {
  color: #9ca3af;
  margin: 0;
}
.footer-links a {
  color: #9ca3af !important;
  text-decoration: none;
}
.footer-links a:hover {
  color: #f1f5f9 !important;
}
/* Footer CMS nav: remove bullet points from {{menu:footer}} */
.footer-column nav ul,
.footer-column ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}
.footer-column nav ul li,
.footer-column ul li {
  list-style: none !important;
  margin-bottom: 12px;
}
.footer-column nav ul li a,
.footer-column ul li a {
  color: #9ca3af !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-column nav ul li a:hover,
.footer-column ul li a:hover {
  color: #f1f5f9 !important;
}
/* Footer copyright color */
.footer-copyright {
  color: #9ca3af !important;
}

/* --- 8. Mobile menu: style CMS nav output --- */
.mobile-menu-nav nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-nav nav > ul > li > a {
  font-size: 1.125rem;
  font-weight: 500;
  color: #e2e8f0 !important;
  text-decoration: none;
  padding: 16px 0;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu-nav nav > ul > li > a:hover {
  color: #3b82f6 !important;
}
.mobile-menu-nav nav > ul > li:last-child > a {
  border-bottom: none;
}

/* --- 9. Empty paragraphs from CMS content substitution --- */
p:empty {
  display: none;
}

/* --- 10. Hero badge: CMS cleartext strips SVG, re-add via CSS --- */
.hero-badge::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* --- 11. Pricing: CMS uses first item as template, losing pricing-popular on 2nd card --- */
#pricing .pricing-grid > .pricing-card:nth-child(2) {
  border: 2px solid rgba(59,130,246,0.4) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  position: relative;
  z-index: 2;
}
/* Badge now rendered by CMS via .pricing-badge div — no ::before needed */
#pricing .pricing-grid > .pricing-card:nth-child(2) .btn {
  background: linear-gradient(135deg, #3b82f6, #06b6d4) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(59,130,246,0.3);
}
/* Hide empty badges (cards without badge text), show only on card with content */
#pricing .pricing-grid > .pricing-card > .pricing-badge:empty {
  display: none !important;
}

/* --- 12. CTA section: background image + button overrides --- */
/* CSS generated by wizard targets #cta, but actual section id is #cta */
#cta {
  background-image: linear-gradient(rgba(30,58,138,0.85), rgba(30,58,138,0.85)), url('/assets/images/cta-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
/* "Schedule Consultation" — white bg, dark blue text (original style) */
#cta .btn-primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1e3a8a !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}
#cta .btn-primary:hover {
  background: #f3f4f6 !important;
  border-color: #f3f4f6 !important;
}
/* "Call Us Now" — transparent bg, solid white border */
#cta .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
#cta .btn-outline:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #1e3a8a !important;
}
/* Inner .cta div has opaque bg that hides the section bg image */
#cta > .cta {
  background-color: transparent !important;
}
/* Match original padding: 80px on section + 80px on inner = tall CTA block */
#cta {
  padding: 80px 0px !important;
}
/* CTA title: original is 44px (2.75rem), base .cta-title is 2.5rem = 40px */
#cta .cta-title {
  font-size: 2.75rem !important;
}
/* CTA subtitle — CMS renders plain <p>, fix color + spacing */
#cta .cta-content > p {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
  margin-bottom: 32px !important;
}
#cta .cta-content .buttons {
  margin-top: 16px !important;
}