/*
 Theme Name: Astra Child
 Template: astra
 Author: Valentin / XWay
 Version: 2.0.0
 Description: Optimized XWay Design System - 2025
*/


/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Centralized for consistency & easy theming
   ============================================ */
:root {
  /* === Brand Colors === */
  --xw-teal-primary: #0f8892;
  --xw-teal-light: #0aa4b3;
  --xw-teal-dark: #074a53;
  --xw-orange-primary: #ff6a32;
  --xw-orange-light: #ff824b;
  
  /* === Text Colors === */
  --xw-text-primary: #0b2b33;
  --xw-text-secondary: #254a52;
  --xw-text-tertiary: #4b6670;
  --xw-text-muted: #97aab0;
  --xw-text-inverted: #eaf4f6;
  
  /* === Background Colors === */
  --xw-bg-dark: #082e36;
  --xw-bg-dark-alt: #0d4450;
  --xw-bg-light: #ffffff;
  
  /* === Glass Morphism === */
  --xw-glass-bg: rgba(255, 255, 255, 0.12);
  --xw-glass-bg-strong: rgba(255, 255, 255, 0.65);
  --xw-glass-border: rgba(255, 255, 255, 0.35);
  --xw-glass-border-teal: rgba(10, 164, 179, 0.25);
  
  /* === Borders & Lines === */
  --xw-border-light: rgba(10, 164, 179, 0.18);
  --xw-border-subtle: rgba(255, 255, 255, 0.08);
  
  /* === Shadows (Layered for depth) === */
  --xw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --xw-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(9, 36, 41, 0.06);
  --xw-shadow-md: 0 4px 8px rgba(9, 36, 41, 0.04), 0 10px 24px rgba(9, 36, 41, 0.08);
  --xw-shadow-lg: 0 8px 16px rgba(9, 36, 41, 0.08), 0 16px 36px rgba(9, 36, 41, 0.12);
  --xw-shadow-xl: 0 12px 24px rgba(9, 36, 41, 0.10), 0 24px 48px rgba(9, 36, 41, 0.15);
  
  /* === Border Radius (Fluid scaling) === */
  --xw-radius-xs: clamp(4px, 0.5vw, 6px);
  --xw-radius-sm: clamp(8px, 1vw, 10px);
  --xw-radius-md: clamp(10px, 1.5vw, 14px);
  --xw-radius-lg: clamp(14px, 2vw, 18px);
  --xw-radius-xl: clamp(16px, 2.5vw, 20px);
  --xw-radius-full: 9999px;
  
  /* === Spacing Scale (Fluid) === */
  --xw-space-xs: clamp(0.5rem, 2vw, 0.75rem);
  --xw-space-sm: clamp(0.75rem, 2.5vw, 1rem);
  --xw-space-md: clamp(1rem, 3vw, 1.5rem);
  --xw-space-lg: clamp(1.5rem, 4vw, 2rem);
  --xw-space-xl: clamp(2rem, 5vw, 3rem);
  --xw-space-2xl: clamp(3rem, 6vw, 4rem);
  --xw-space-3xl: clamp(4rem, 8vw, 6rem);
  
  /* === Typography Scale === */
  --xw-font-xs: clamp(0.75rem, 1.6vw, 0.8125rem);
  --xw-font-sm: clamp(0.8125rem, 1.8vw, 0.875rem);
  --xw-font-base: clamp(0.875rem, 2vw, 1rem);
  --xw-font-lg: clamp(1rem, 2.5vw, 1.125rem);
  --xw-font-xl: clamp(1.125rem, 3vw, 1.25rem);
  --xw-font-2xl: clamp(1.5rem, 4vw, 1.875rem);
  --xw-font-3xl: clamp(1.875rem, 5vw, 2.25rem);
  --xw-font-4xl: clamp(2.25rem, 6vw, 3rem);
  
  /* === Font Weights === */
  --xw-weight-normal: 400;
  --xw-weight-medium: 500;
  --xw-weight-semibold: 600;
  --xw-weight-bold: 700;
  --xw-weight-extrabold: 800;
  
  /* === Line Heights === */
  --xw-leading-tight: 1.2;
  --xw-leading-snug: 1.375;
  --xw-leading-normal: 1.5;
  --xw-leading-relaxed: 1.65;
  --xw-leading-loose: 1.8;
  
  /* === Transitions === */
  --xw-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --xw-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --xw-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === Z-Index Scale === */
  --xw-z-base: 1;
  --xw-z-dropdown: 100;
  --xw-z-sticky: 200;
  --xw-z-fixed: 300;
  --xw-z-modal: 400;
  --xw-z-popover: 500;
  --xw-z-tooltip: 600;
  
  /* === Container Widths === */
  --xw-container-sm: 640px;
  --xw-container-md: 768px;
  --xw-container-lg: 1024px;
  --xw-container-xl: 1200px;
  --xw-container-2xl: 1400px;
  
  /* === Specific Components === */
  --xw-logo-width: clamp(120px, 15vw, 180px);
  --xw-logo-width-mobile: clamp(100px, 25vw, 140px);
  
  /* === Typography === */
  --xw-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --xw-font-family-heading: var(--xw-font-family-base);
  --xw-font-family-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
}

/* ============================================
   BASE STYLES & RESETS
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--xw-font-family-base);
  font-size: var(--xw-font-base);
  line-height: var(--xw-leading-normal);
  color: var(--xw-text-primary);
}

/* ============================================
   UTILITY CLASSES
   Modern utility-first approach
   ============================================ */

/* === Spacing Utilities === */
.xw-p-xs { padding: var(--xw-space-xs); }
.xw-p-sm { padding: var(--xw-space-sm); }
.xw-p-md { padding: var(--xw-space-md); }
.xw-p-lg { padding: var(--xw-space-lg); }
.xw-p-xl { padding: var(--xw-space-xl); }

.xw-m-xs { margin: var(--xw-space-xs); }
.xw-m-sm { margin: var(--xw-space-sm); }
.xw-m-md { margin: var(--xw-space-md); }
.xw-m-lg { margin: var(--xw-space-lg); }
.xw-m-xl { margin: var(--xw-space-xl); }

/* === Text Utilities === */
.xw-text-primary { color: var(--xw-text-primary); }
.xw-text-secondary { color: var(--xw-text-secondary); }
.xw-text-muted { color: var(--xw-text-muted); }
.xw-text-white { color: #fff; }

.xw-text-center { text-align: center; }
.xw-text-left { text-align: left; }
.xw-text-right { text-align: right; }

.xw-font-bold { font-weight: var(--xw-weight-bold); }
.xw-font-semibold { font-weight: var(--xw-weight-semibold); }
.xw-font-medium { font-weight: var(--xw-weight-medium); }

/* === Container === */
.xw-container {
  width: 100%;
  max-width: var(--xw-container-xl);
  margin-inline: auto;
  padding-inline: var(--xw-space-md);
}

.xw-container-wide {
  max-width: var(--xw-container-2xl);
}

.xw-container-narrow {
  max-width: var(--xw-container-md);
}

/* === Flex Utilities === */
.xw-flex { display: flex; }
.xw-flex-col { flex-direction: column; }
.xw-items-center { align-items: center; }
.xw-justify-center { justify-content: center; }
.xw-justify-between { justify-content: space-between; }
.xw-gap-sm { gap: var(--xw-space-sm); }
.xw-gap-md { gap: var(--xw-space-md); }
.xw-gap-lg { gap: var(--xw-space-lg); }

/* === Grid Utilities === */
.xw-grid { display: grid; }
.xw-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.xw-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.xw-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

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

/* ============================================
   GLASSMORPHISM COMPONENTS
   Reusable glass effect patterns
   ============================================ */
.xw-glass {
  position: relative;
  background: var(--xw-glass-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--xw-glass-border);
  border-radius: var(--xw-radius-lg);
  box-shadow: var(--xw-shadow-md), 0 10px 30px rgba(0, 0, 0, 0.15);
}

.xw-glass-strong {
  background: var(--xw-glass-bg-strong);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--xw-glass-border-teal);
  border-radius: var(--xw-radius-xl);
}

.xw-glass-card {
  padding: var(--xw-space-md);
  transition: all var(--xw-transition-base);
}

.xw-glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--xw-shadow-lg), 0 12px 36px rgba(0, 0, 0, 0.18);
  border-color: var(--xw-glass-border-teal);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .xw-glass,
  .xw-glass-strong {
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .xw-glass,
  .xw-glass-strong {
    background: rgba(13, 25, 32, 0.32);
    border-color: rgba(255, 255, 255, 0.22);
  }
}

/* ============================================
   BUTTONS & CTAs
   Unified button system
   ============================================ */
.xw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 8px);
  padding: clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 32px);
  font-family: var(--xw-font-family-base);
  font-size: var(--xw-font-base);
  font-weight: var(--xw-weight-bold);
  line-height: var(--xw-leading-tight);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border-radius: var(--xw-radius-full);
  border: none;
  outline: none;
  cursor: pointer;
  transition: all var(--xw-transition-base);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.xw-btn:focus-visible {
  outline: 3px solid var(--xw-orange-primary);
  outline-offset: 2px;
}

/* Primary Button */
.xw-btn-primary {
  background: linear-gradient(180deg, var(--xw-orange-primary), var(--xw-orange-light));
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 106, 50, 0.35), var(--xw-shadow-sm);
}

.xw-btn-primary:hover {
  transform: translateY(-2px);
  filter: saturate(112%);
  box-shadow: 0 14px 30px rgba(255, 106, 50, 0.4), var(--xw-shadow-md);
  color: #fff;
}

.xw-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(255, 106, 50, 0.28), var(--xw-shadow-xs);
}

/* Secondary Button (Teal) */
.xw-btn-secondary {
  background: linear-gradient(180deg, var(--xw-teal-primary), var(--xw-teal-light));
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 136, 146, 0.35), var(--xw-shadow-sm);
}

.xw-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 136, 146, 0.45), var(--xw-shadow-md);
  color: #fff;
}

/* Ghost Button */
.xw-btn-ghost {
  background: var(--xw-glass-bg);
  border: 1px solid var(--xw-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: var(--xw-shadow-sm);
}

.xw-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--xw-glass-border-teal);
}

/* Outline Button */
.xw-btn-outline {
  background: transparent;
  border: 2px solid var(--xw-teal-primary);
  color: var(--xw-teal-primary);
}

.xw-btn-outline:hover {
  background: var(--xw-teal-primary);
  color: #fff;
}

/* Small Button */
.xw-btn-sm {
  padding: clamp(8px, 1.5vw, 10px) clamp(16px, 3vw, 20px);
  font-size: var(--xw-font-sm);
}

/* Large Button */
.xw-btn-lg {
  padding: clamp(16px, 3vw, 20px) clamp(28px, 5vw, 40px);
  font-size: var(--xw-font-lg);
}

/* ============================================
   BADGES & LABELS
   ============================================ */
.xw-badge {
  display: inline-block;
  padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2.5vw, 20px);
  font-size: var(--xw-font-xs);
  font-weight: var(--xw-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--xw-radius-full);
  border: 1px solid var(--xw-border-light);
}

.xw-badge-teal {
  background: rgba(15, 136, 146, 0.1);
  color: var(--xw-teal-primary);
  border-color: var(--xw-glass-border-teal);
}

.xw-badge-orange {
  background: rgba(255, 106, 50, 0.1);
  color: var(--xw-orange-primary);
  border-color: rgba(255, 106, 50, 0.2);
}

/* ============================================
   CARDS
   Reusable card components
   ============================================ */
.xw-card {
  background: var(--xw-glass-bg-strong);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--xw-glass-border-teal);
  border-radius: var(--xw-radius-lg);
  padding: var(--xw-space-md);
  box-shadow: var(--xw-shadow-sm);
  transition: all var(--xw-transition-base);
}

.xw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--xw-shadow-md);
  border-color: rgba(10, 164, 179, 0.4);
}

.xw-card-header {
  margin-bottom: var(--xw-space-md);
}

.xw-card-title {
  font-size: var(--xw-font-xl);
  font-weight: var(--xw-weight-bold);
  color: var(--xw-text-primary);
  margin-bottom: var(--xw-space-xs);
}

.xw-card-description {
  font-size: var(--xw-font-base);
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.xw-input {
  width: 100%;
  padding: clamp(12px, 2.5vw, 16px) clamp(16px, 3vw, 24px);
  font-family: var(--xw-font-family-base);
  font-size: var(--xw-font-base);
  color: var(--xw-text-primary);
  background: var(--xw-glass-bg-strong);
  border: 2px solid var(--xw-glass-border-teal);
  border-radius: var(--xw-radius-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: none;
  transition: all var(--xw-transition-base);
}

.xw-input::placeholder {
  color: var(--xw-text-tertiary);
  opacity: 0.7;
}

.xw-input:focus {
  border-color: var(--xw-teal-primary);
  box-shadow: 0 0 0 4px rgba(15, 136, 146, 0.1);
  background: rgba(255, 255, 255, 0.85);
}

/* ============================================
   ACCORDION / FAQ
   ============================================ */
.xw-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--xw-space-sm);
}

.xw-accordion-item {
  background: var(--xw-glass-bg-strong);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--xw-glass-border-teal);
  border-radius: var(--xw-radius-lg);
  overflow: hidden;
  transition: all var(--xw-transition-base);
}

.xw-accordion-item:hover {
  box-shadow: var(--xw-shadow-md);
  transform: translateY(-2px);
  border-color: rgba(10, 164, 179, 0.4);
}

.xw-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(18px, 3vw, 24px) clamp(20px, 4vw, 28px);
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: var(--xw-weight-bold);
  color: var(--xw-text-primary);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--xw-transition-fast);
}

.xw-accordion-trigger:hover {
  background: rgba(255, 255, 255, 0.3);
}

.xw-accordion-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--xw-teal-primary), var(--xw-teal-light));
  border-radius: var(--xw-radius-sm);
  color: #fff;
  font-size: 20px;
  font-weight: var(--xw-weight-bold);
  transition: transform var(--xw-transition-base);
}

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

.xw-accordion-content {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(10, 164, 179, 0.1);
  transition: max-height var(--xw-transition-slow), padding var(--xw-transition-slow), opacity var(--xw-transition-base);
  opacity: 0;
}

.xw-accordion-item.active .xw-accordion-content {
  max-height: 500px;
  padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 28px);
  opacity: 1;
}

.xw-accordion-content p {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
  margin: 0;
}

/* ============================================
   LOGO UTILITIES
   ============================================ */
.xw-logo {
  width: var(--xw-logo-width);
  max-width: 100%;
  height: auto;
  display: block;
  transition: all var(--xw-transition-base);
}

.xw-logo-container {
  display: inline-block;
  line-height: 0;
}

.xw-logo-grey {
  filter: grayscale(100%) brightness(0.9);
  opacity: 0.6;
}

.xw-logo-grey:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

.xw-logo-color:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

@media (max-width: 768px) {
  .xw-logo {
    width: var(--xw-logo-width-mobile);
  }
}

/* ============================================
   SECTION UTILITIES
   ============================================ */
.xw-section {
  padding: var(--xw-space-3xl) var(--xw-space-md);
  overflow-x: hidden;
}

.xw-section-header {
  text-align: center;
  margin-bottom: var(--xw-space-2xl);
}

.xw-section-title {
  font-size: var(--xw-font-4xl);
  font-weight: var(--xw-weight-extrabold);
  color: var(--xw-text-primary);
  margin-bottom: var(--xw-space-sm);
  letter-spacing: -0.02em;
  line-height: var(--xw-leading-tight);
}

.xw-section-subtitle {
  font-size: var(--xw-font-lg);
  color: var(--xw-text-secondary);
  max-width: 700px;
  margin-inline: auto;
  line-height: var(--xw-leading-relaxed);
}

@media (max-width: 768px) {
  .xw-section {
    padding: var(--xw-space-2xl) var(--xw-space-md);
  }
  
  .xw-section-header {
    margin-bottom: var(--xw-space-xl);
  }
}

/* ============================================
   FOOTER STYLES
   Consolidated footer system
   ============================================ */
#colophon,
.site-footer,
.xw-footer {
  position: relative;
  background: radial-gradient(1000px 480px at 12% -15%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--xw-bg-dark), #06262c);
  color: var(--xw-text-inverted);
  font-family: var(--xw-font-family-base);
  -webkit-font-smoothing: antialiased;
}

/* Subtle grid pattern overlay */
#colophon::before,
.xw-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Footer Grid Layout */
.xw-footer-inner {
  max-width: var(--xw-container-xl);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 44px) var(--xw-space-md);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--xw-space-lg);
  /*border-bottom: 1px solid var(--xw-border-subtle);*/
}

.xw-footer h2,
.xw-footer h3 {
  margin: 4px 0 12px;
  font-size: var(--xw-font-sm);
  line-height: var(--xw-leading-tight);
  color: #cdeff5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--xw-weight-semibold);
}

.xw-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--xw-space-xs);
}

.xw-footer a {
  color: #9fe2f1;
  text-decoration: none;
  position: relative;
  font-size: var(--xw-font-sm);
  transition: color var(--xw-transition-fast);
  display: inline-block;
}

.xw-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0%;
  background: currentColor;
  border-radius: 2px;
  transition: width var(--xw-transition-base);
}

.xw-footer a:hover {
  color: #fff;
}

.xw-footer a:hover::after {
  width: 100%;
}

.xw-footer a:focus-visible {
  outline: 2px solid var(--xw-orange-primary);
  outline-offset: 2px;
  border-radius: var(--xw-radius-xs);
}

/* Footer Brand Column */
.xw-tagline {
  color: #bfd8dd;
  max-width: 32ch;
  line-height: var(--xw-leading-relaxed);
  margin-top: var(--xw-space-sm);
  font-size: var(--xw-font-sm);
}

/* Social Icons */
.xw-social {
  display: flex;
  gap: var(--xw-space-sm);
  align-items: center;
  margin-top: var(--xw-space-sm);
}

.xw-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #d7f4f8;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--xw-border-subtle);
  transition: all var(--xw-transition-fast);
}

.xw-social a::after {
  display: none;
}

.xw-social a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Footer Bottom */
.xw-footer-bottom {
  max-width: var(--xw-container-xl);
  margin-inline: auto;
  padding: clamp(14px, 2.5vw, 18px) var(--xw-space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xw-space-sm);
  flex-wrap: wrap;
  color: #bfd8dd;
  font-size: var(--xw-font-xs);
  border-top: 1px solid var(--xw-border-subtle);
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .xw-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .xw-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--xw-space-md);
  }
  
  .xw-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--xw-space-xs);
  }
  
  .xw-footer a {
    padding: 4px 0;
  }
}

/* ============================================
   ELEMENTOR OVERRIDES
   Ensures consistent styling with Elementor
   ============================================ */
.elementor .elementor-widget-button.xw-cta .elementor-button,
.elementor .elementor-widget-button.xw-cta a.elementor-button,
.elementor .elementor-widget-button.xw-cta a.elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, 1vw, 8px) !important;
  padding: clamp(12px, 2.5vw, 14px) clamp(20px, 4vw, 28px) !important;
  border-radius: var(--xw-radius-full) !important;
  background: linear-gradient(180deg, var(--xw-orange-primary), var(--xw-orange-light)) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: var(--xw-weight-bold) !important;
  font-size: var(--xw-font-base) !important;
  letter-spacing: 0.02em !important;
  line-height: var(--xw-leading-tight) !important;
  box-shadow: 0 10px 24px rgba(255, 106, 50, 0.32), var(--xw-shadow-sm) !important;
  transition: all var(--xw-transition-base) !important;
}

.elementor .elementor-widget-button.xw-cta .elementor-button-content-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.elementor .elementor-widget-button.xw-cta .elementor-button:hover,
.elementor .elementor-widget-button.xw-cta a.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(255, 106, 50, 0.4), var(--xw-shadow-md) !important;
}

/* Remove unwanted pseudo-elements */
.elementor .elementor-widget-button.xw-cta .elementor-button::before,
.elementor .elementor-widget-button.xw-cta .elementor-button::after,
.elementor .elementor-widget-button.xw-cta a.elementor-button::before,
.elementor .elementor-widget-button.xw-cta a.elementor-button::after {
  content: none !important;
  box-shadow: none !important;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--xw-orange-primary);
  outline-offset: 2px;
  border-radius: var(--xw-radius-xs);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --xw-glass-bg: rgba(255, 255, 255, 0.95);
    --xw-glass-bg-strong: rgba(255, 255, 255, 0.98);
  }
  
  .xw-glass,
  .xw-glass-strong {
    border-width: 2px;
  }
}

/* Screen reader only utility */
.xw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Enable GPU acceleration for animations */
.xw-btn,
.xw-card,
.xw-accordion-item,
.xw-glass-card {
  will-change: transform;
}

/* Remove will-change after animation */
.xw-btn:not(:hover),
.xw-card:not(:hover),
.xw-accordion-item:not(:hover),
.xw-glass-card:not(:hover) {
  will-change: auto;
}

/* Optimize font rendering */
html {
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .xw-btn,
  .xw-social,
  .xw-footer,
  #colophon {
    display: none;
  }
  
  .xw-glass,
  .xw-glass-strong,
  .xw-card {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: none;
  }
  
  * {
    color: #000 !important;
  }
}

/* ============================================
   secondary-CTA-Link (with left icon)
   ============================================ */

.xway-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* puțin mai mare pentru icon */
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 2px;
    transition: all 0.25s ease;
}

.xway-secondary-link-icon {
    display: inline-block;
    font-size: 1.05em;
    transform: translateX(0);
    transition: transform 0.25s ease;
}

.xway-secondary-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
    transform: translateY(-1px);
    opacity: 1;
}

.xway-secondary-link:hover .xway-secondary-link-icon {
    transform: translateX(3px); /* icon animat la hover */
}


/* =========================================================
   xWay – HEADER & HERO
   (folosește deja variabilele și fonturile din style.css)
   ========================================================= */

/* Header secțiuni (ex. “Pachete”, “Resurse” etc.) */
.xway-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.xway-badge {
  display: inline-block;
  background: rgba(2, 138, 145, 0.1);
  color: #028A91;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1.5px solid rgba(2, 138, 145, 0.2);
}

.xway-header h2 {
  font-size: clamp(36px, 5vw, 52px);
  color: var(--xw-text-primary);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: var(--xw-leading-tight);
}

.xway-header p {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--xw-text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: var(--xw-leading-relaxed);
}

.highlight {
  color: var(--xw-orange-primary);
  font-weight: 600;
}

/* Background-uri pentru secțiuni dark/hero */
.xw-gradient {
  background: linear-gradient(180deg, var(--xw-teal-dark) 0%, #0c6d7a 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.xway-bghero {
  background: linear-gradient(120deg, #014D56 50%, var(--xw-teal-primary) 100%);
}

/* =========================================================
   FORMS xWay (Contact / Newsletter inline)
   ========================================================= */

.xway-form input[type="text"],
.xway-form input[type="email"],
.xway-form input[type="tel"],
.xway-form textarea {
  width: 100%;
  background: #ffffff;
  color: #1E2A2E;
  border: 1px solid #E3EDF0;
  border-radius: var(--xw-radius-sm);
  padding: clamp(10px, 2vw, 12px) clamp(12px, 2.5vw, 14px);
  font-size: var(--xw-font-sm);
  line-height: 1.5;
  outline: none;
  transition: border-color var(--xw-transition-base),
              box-shadow var(--xw-transition-base),
              transform var(--xw-transition-fast);
  box-shadow: var(--xw-shadow-sm);
  font-family: inherit;
}

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

.xway-form input:focus,
.xway-form textarea:focus {
  border-color: var(--xw-teal-primary);
  box-shadow: 0 0 0 3px rgba(15, 136, 146, 0.15);
  transform: translateY(-1px);
}

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

/* Formă inline (ex. newsletter / hero) */
.xw-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 10px);
  align-items: stretch;
  justify-content: center;
}

.xw-inline-form input[type="text"],
.xw-inline-form input[type="email"],
.xw-inline-form textarea {
  flex: 1 1 auto;
  min-width: min(100%, 180px);
}

.xw-inline-form .xw-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
}

@media (max-width: 768px) {
  .xw-inline-form {
    flex-direction: column;
  }

  .xw-inline-form input[type="text"],
  .xw-inline-form input[type="email"],
  .xw-inline-form .xw-btn {
    width: 100%;
    min-width: unset;
  }
}

/* Card de contact (widget Elementor) */
.elementor .xw-contact-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: clamp(12px, 2vw, 16px);
  padding: var(--xw-space-md);
}

/* =========================================================
   xWay AI Network – background animat pentru secțiune
   ========================================================= */

.xw-ai-network {
  --bg-start: #0B3B41;
  --bg-end: #0D5C63;
  --dot-strong: #7CF3FF66;
  --dot-soft: #6FE3FF1A;
  --line: #FFFFFF14;

  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;

  background:
    radial-gradient(circle at 25px 25px, var(--dot-strong) 1.2px, transparent 2.2px) 0 0 / 120px 120px,
    radial-gradient(circle at 60px 80px, var(--dot-soft) 1px, transparent 2px) 0 0 / 140px 140px,
    linear-gradient(45deg, var(--line) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(-45deg, var(--line) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(135deg, var(--bg-start), var(--bg-end));

  animation: xw-drift-1 40s linear infinite;
  will-change: background-position;
  padding: 80px 0;
}

.xw-ai-network::after {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(100px 56px at 20% 30%, #7cf3ff22, transparent 60%),
    radial-gradient(140px 140px at 72% 65%, #aaf7ff1f, transparent 60%),
    radial-gradient(90px 90px at 42% 80%, #7cf3ff15, transparent 60%);
  filter: blur(10px);
  pointer-events: none;
  animation: xw-drift-2 60s linear infinite;
  will-change: transform;
}

.xw-ai-network > * {
  position: relative;
  z-index: 1;
}

@keyframes xw-drift-1 {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 120px 240px, -140px 100px, 60px 0, -60px 0, 0 0;
  }
}

@keyframes xw-drift-2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(2%, -2%, 0) rotate(0.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xw-ai-network,
  .xw-ai-network::after {
    animation: none;
  }
}

@media (max-width: 767px) {
  .xw-ai-network {
    padding: 56px 0;
  }
}

/* =========================================================
   xWay FAQ – secțiune marketing (nu Elementor default)
   ========================================================= */

.xw-faq {
  --teal: #0D5C63;
  --muted: #64748B;
  --border: #E5E7EB;
  --bg: #F6FBFB;
  --radius: 16px;

  background: var(--bg);
  padding: 80px 0;
}

.xw-faq .xw-eyebrow {
  font: 600 12px/1.2 var(--xw-font-family-base);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

.xw-faq .xw-title {
  font: 700 32px/1.15 var(--xw-font-family-base);
  color: #0B1720;
  margin-bottom: 16px;
}

.xw-faq .xw-bullets {
  margin: 8px 0 24px;
  color: var(--muted);
}

.xw-faq .xw-bullets li {
  margin: 6px 0;
}

/* Elementor accordion inside .xw-faq */
.xw-faq .elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}

.xw-faq .elementor-accordion .elementor-tab-title {
  padding: 16px 18px;
  font: 600 16px/1.3 var(--xw-font-family-base);
  color: #0B1720;
}

.xw-faq .elementor-accordion .elementor-tab-content {
  padding: 16px 18px;
  color: #334155;
  line-height: 1.6;
  background: #fff;
  border-top: 1px solid var(--border);
}

.xw-faq .elementor-accordion .elementor-active .elementor-tab-title {
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* CTA din FAQ */
.xw-faq .xw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 24px 0 12px;
}

.xw-faq .btn {
  padding: 12px 18px;
  border-radius: 12px;
  font: 600 15px/1.2 var(--xw-font-family-base);
  display: inline-block;
}

.xw-faq .btn-primary {
  background: #FA824C;
  color: #fff;
  box-shadow: 0 8px 20px rgba(250, 130, 76, 0.18);
}

.xw-faq .btn-primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.xw-faq .btn-ghost {
  border: 2px solid var(--teal);
  color: var(--teal);
  background: transparent;
}

.xw-faq .btn-ghost:hover {
  background: var(--teal);
  color: #fff;
}

/* Testimonials & trust bar */
.xw-faq .xw-testis {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin: 16px 0 8px;
}

.xw-faq .xw-quote {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: #0B1720;
}

.xw-faq .xw-quote cite {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
}

.xw-faq .xw-trust {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.xw-faq .xw-trust img {
  height: 26px;
  filter: grayscale(1);
  opacity: 0.7;
}

.xw-faq .xw-trust img:hover {
  filter: none;
  opacity: 1;
}

/* 3 pași */
.xw-faq .xw-steps {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}

.xw-faq .xw-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.xw-faq .xw-step .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  margin-bottom: 10px;
}

@media (max-width: 991px) {
  .xw-faq {
    padding: 64px 0;
  }

  .xw-faq .xw-testis,
  .xw-faq .xw-steps {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   xWay RESOURCES SECTION (FAQ + Tools + Guides + Newsletter)
   ========================================================= */

.xway-resources-section {
  font-family: var(--xw-font-family-base);
  padding: 80px 20px;
  max-width: var(--xw-container-2xl);
  margin: 0 auto;
  background: #FFFFFF;
}

/* Header resources */
.resources-header {
  text-align: center;
  margin-bottom: 60px;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
  color: #028A91;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1.5px solid rgba(2, 138, 145, 0.25);
}

.resources-header h2 {
  font-size: clamp(36px, 5.5vw, 52px);
  color: var(--xw-text-primary);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.resources-header .highlight {
  color: var(--xw-orange-primary);
  font-weight: 800;
}

.header-subtitle {
  font-size: clamp(16px, 2.5vw, 19px);
  color: var(--xw-text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Tabs */
.resources-tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  border: 2px solid rgba(2, 138, 145, 0.15);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #254A52;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.tab-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
  transition: transform 0.3s ease;
}

.tab-btn:hover {
  border-color: #0AA4B3;
  color: #028A91;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(2, 138, 145, 0.1);
}

.tab-btn.active {
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  border-color: #028A91;
  color: #fff;
  box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.tab-btn.active svg {
  transform: scale(1.1);
}

/* Tab content */
.tab-content {
  display: none;
  animation: fadeInUp 0.5s ease;
}

.tab-content.active {
  display: block;
}

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

/* FAQ block din Resources */
.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-intro {
  text-align: center;
  margin-bottom: 50px;
}

.faq-intro h3 {
  font-size: clamp(28px, 4vw, 38px);
  color: var(--xw-text-primary);
  font-weight: 800;
  margin-bottom: 12px;
}

.faq-intro p {
  font-size: 17px;
  color: var(--xw-text-secondary);
  line-height: 1.6;
}

.faq-grid {
  display: grid;
  gap: 16px;
}

.faq-item {
  background: #fff;
  border: 1.5px solid rgba(2, 138, 145, 0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(2, 138, 145, 0.3);
  box-shadow: 0 8px 24px rgba(2, 138, 145, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: rgba(2, 138, 145, 0.03);
}

.faq-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon svg {
  width: 20px;
  height: 20px;
  stroke: #028A91;
  stroke-width: 2.5;
}

.question-text {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: #0B2B33;
  line-height: 1.4;
}

.faq-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(2, 138, 145, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.faq-toggle svg {
  width: 18px;
  height: 18px;
  stroke: #028A91;
  stroke-width: 2.5;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
  background: linear-gradient(135deg, #028A91, #0AA4B3);
}

.faq-item.active .faq-toggle svg {
  stroke: #fff;
  transform: rotate(180deg);
}

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

.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 0 28px 28px 84px;
}

.faq-answer p {
  font-size: 15.5px;
  color: #3F5F67;
  line-height: 1.7;
  margin: 0;
}

.faq-answer strong {
  color: #028A91;
  font-weight: 700;
}

/* FAQ CTA box */
.faq-cta {
  margin-top: 60px;
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.04), rgba(10, 164, 179, 0.06));
  border-radius: 20px;
  border: 1.5px solid rgba(2, 138, 145, 0.12);
}

.faq-cta .cta-text {
  font-size: 18px;
  color: #0B2B33;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Tools */
.tools-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tools-intro {
  text-align: center;
  margin-bottom: 50px;
}

.tools-intro h3 {
  font-size: clamp(28px, 4vw, 38px);
  color: #0B2B33;
  font-weight: 800;
  margin-bottom: 12px;
}

.tools-intro p {
  font-size: 17px;
  color: #254A52;
  line-height: 1.6;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  margin-bottom: 60px;
}

.tool-card {
  background: #fff;
  border: 1.5px solid rgba(2, 138, 145, 0.12);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #028A91, #0AA4B3, #FF6B3D);
  transition: left 0.5s ease;
}

.tool-card:hover::before {
  left: 0;
}

.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(2, 138, 145, 0.15);
  border-color: rgba(2, 138, 145, 0.3);
}

/* Guides */
.guides-container {
  max-width: 1200px;
  margin: 0 auto;
}

.guides-intro {
  text-align: center;
  margin-bottom: 50px;
}

.guides-intro h3 {
  font-size: clamp(28px, 4vw, 38px);
  color: #0B2B33;
  font-weight: 800;
  margin-bottom: 12px;
}

.guides-intro p {
  font-size: 17px;
  color: #254A52;
  line-height: 1.6;
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  margin-bottom: 60px;
}

.guide-card {
  background: #fff;
  border: 1.5px solid rgba(2, 138, 145, 0.12);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(2, 138, 145, 0.15);
  border-color: rgba(2, 138, 145, 0.3);
}

.guide-card.featured {
  grid-column: span 2;
}

/* Newsletter */
.newsletter-section {
  margin-top: 60px;
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  border-radius: 24px;
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: newsletterShine 3s infinite;
}

@keyframes newsletterShine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.newsletter-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE – Resources
   ========================================================= */

@media (max-width: 1024px) {
  .guides-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .guide-card.featured {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .xway-resources-section {
    padding: 60px 20px;
  }

  .resources-tabs {
    flex-direction: column;
    gap: 12px;
  }

  .tab-btn {
    width: 100%;
    justify-content: center;
  }

  .tools-grid,
  .guides-grid {
    grid-template-columns: 1fr;
  }

  .faq-item.active .faq-answer {
    padding: 0 20px 24px 20px;
  }

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

  .newsletter-section {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .resources-header h2 {
    font-size: 32px;
  }

  .faq-question {
    padding: 20px 16px;
  }

  .question-text {
    font-size: 15px;
  }

  .tool-card {
    padding: 24px 20px;
  }

  .guides-grid {
    gap: 24px;
  }
}
/* ALT (teal) pentru butonul Elementor .xw-cta */
.elementor .elementor-widget-button.xw-cta.alt .elementor-button,
.elementor .elementor-widget-button.xw-cta.alt a.elementor-button,
.elementor .elementor-widget-button.xw-cta.alt a.elementor-button-link {
    background: linear-gradient(180deg, var(--xw-teal-primary) 0%, var(--xw-teal-light) 100%) !important;
    box-shadow: 0 8px 20px rgba(15, 136, 146, 0.35) !important;
}
/* ============================================
   XWay Resources Section - Optimized & Scoped
   ============================================ */

.xway-resources-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 80px 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
}

/* ========== HEADER SECTION ========== */

.xway-resources-section .resources-header {
    text-align: center;
    margin-bottom: 60px;
}

.xway-resources-section .header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
    color: #028A91;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 24px;
    border: 1.5px solid rgba(2, 138, 145, 0.25);
}

.xway-resources-section .header-badge svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.xway-resources-section .resources-header h2 {
    font-size: clamp(36px, 5.5vw, 52px);
    color: #0B2B33;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.xway-resources-section .resources-header .highlight {
    color: #FF6B3D;
    font-weight: 800;
}

.xway-resources-section .header-subtitle {
    font-size: clamp(16px, 2.5vw, 19px);
    color: #254A52;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========== TAB NAVIGATION ========== */

.xway-resources-section .resources-tabs {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.xway-resources-section .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #ffffff;
    border: 2px solid rgba(2, 138, 145, 0.15);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    color: #254A52;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.xway-resources-section .tab-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: transform 0.3s ease;
}

.xway-resources-section .tab-btn:hover {
    border-color: #0AA4B3;
    color: #028A91;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(2, 138, 145, 0.1);
}

.xway-resources-section .tab-btn.active {
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    border-color: #028A91;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.xway-resources-section .tab-btn.active svg {
    transform: scale(1.1);
}

/* ========== TAB CONTENT ========== */

.xway-resources-section .tab-content {
    display: none;
    animation: xwFadeInUp 0.5s ease;
}

.xway-resources-section .tab-content.active {
    display: block;
}

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

/* ========== FAQ SECTION ========== */

.xway-resources-section .faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.xway-resources-section .faq-intro {
    text-align: center;
    margin-bottom: 50px;
}

.xway-resources-section .faq-intro h3 {
    font-size: clamp(28px, 4vw, 38px);
    color: #0B2B33;
    font-weight: 800;
    margin-bottom: 12px;
}

.xway-resources-section .faq-intro p {
    font-size: 17px;
    color: #254A52;
    line-height: 1.6;
}

.xway-resources-section .faq-grid {
    display: grid;
    gap: 16px;
}

.xway-resources-section .faq-item {
    background: #ffffff;
    border: 1.5px solid rgba(2, 138, 145, 0.12);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.xway-resources-section .faq-item:hover {
    border-color: rgba(2, 138, 145, 0.3);
    box-shadow: 0 8px 24px rgba(2, 138, 145, 0.08);
}

.xway-resources-section .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.3s ease;
}

.xway-resources-section .faq-question:hover {
    background: rgba(2, 138, 145, 0.03);
}

.xway-resources-section .faq-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xway-resources-section .faq-icon svg {
    width: 20px;
    height: 20px;
    stroke: #028A91;
    stroke-width: 2.5;
}

.xway-resources-section .question-text {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: #0B2B33;
    line-height: 1.4;
}

.xway-resources-section .faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(2, 138, 145, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.xway-resources-section .faq-toggle svg {
    width: 18px;
    height: 18px;
    stroke: #028A91;
    stroke-width: 2.5;
    transition: transform 0.3s ease;
}

.xway-resources-section .faq-item.active .faq-toggle {
    background: linear-gradient(135deg, #028A91, #0AA4B3);
}

.xway-resources-section .faq-item.active .faq-toggle svg {
    stroke: #ffffff;
    transform: rotate(180deg);
}

.xway-resources-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.xway-resources-section .faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 28px 28px 84px;
}

.xway-resources-section .faq-answer p {
    font-size: 15.5px;
    color: #3F5F67;
    line-height: 1.7;
    margin: 0;
}

.xway-resources-section .faq-answer strong {
    color: #028A91;
    font-weight: 700;
}

/* FAQ CTA */

.xway-resources-section .faq-cta {
    margin-top: 60px;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, rgba(2, 138, 145, 0.04), rgba(10, 164, 179, 0.06));
    border-radius: 20px;
    border: 1.5px solid rgba(2, 138, 145, 0.12);
}

.xway-resources-section .faq-cta .cta-text {
    font-size: 18px;
    color: #0B2B33;
    font-weight: 600;
    margin-bottom: 20px;
}

.xway-resources-section .cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #ffffff;
    color: #028A91;
    border: 2px solid #028A91;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.xway-resources-section .cta-btn-secondary:hover {
    background: #028A91;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
    text-decoration: none;
}

.xway-resources-section .cta-btn-secondary svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* ========== TOOLS SECTION ========== */

.xway-resources-section .tools-container {
    max-width: 1200px;
    margin: 0 auto;
}

.xway-resources-section .tools-intro {
    text-align: center;
    margin-bottom: 50px;
}

.xway-resources-section .tools-intro h3 {
    font-size: clamp(28px, 4vw, 38px);
    color: #0B2B33;
    font-weight: 800;
    margin-bottom: 12px;
}

.xway-resources-section .tools-intro p {
    font-size: 17px;
    color: #254A52;
    line-height: 1.6;
}

.xway-resources-section .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    margin-bottom: 60px;
}

.xway-resources-section .tool-card {
    background: #ffffff;
    border: 1.5px solid rgba(2, 138, 145, 0.12);
    border-radius: 20px;
    padding: 32px 28px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.xway-resources-section .tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #028A91, #0AA4B3, #FF6B3D);
    transition: left 0.5s ease;
}

.xway-resources-section .tool-card:hover::before {
    left: 0;
}

.xway-resources-section .tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(2, 138, 145, 0.15);
    border-color: rgba(2, 138, 145, 0.3);
}

.xway-resources-section .tool-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    transition: transform 0.4s ease;
}

.xway-resources-section .tool-card:hover .tool-icon {
    transform: scale(1.08) rotate(-3deg);
}

.xway-resources-section .tool-icon svg {
    width: 32px;
    height: 32px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
}

.xway-resources-section .tool-icon.speed {
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.xway-resources-section .tool-icon.security {
    background: linear-gradient(135deg, #FF6B3D, #FF824B);
    box-shadow: 0 8px 20px rgba(255, 107, 61, 0.25);
}

.xway-resources-section .tool-icon.seo {
    background: linear-gradient(135deg, #0AA4B3, #028A91);
    box-shadow: 0 8px 20px rgba(10, 164, 179, 0.25);
}

.xway-resources-section .tool-icon.mobile {
    background: linear-gradient(135deg, #FF824B, #FF6B3D);
    box-shadow: 0 8px 20px rgba(255, 130, 75, 0.25);
}

.xway-resources-section .tool-icon.links {
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.xway-resources-section .tool-icon.accessibility {
    background: linear-gradient(135deg, #FF6B3D, #FF824B);
    box-shadow: 0 8px 20px rgba(255, 107, 61, 0.25);
}

.xway-resources-section .tool-content h4 {
    font-size: 22px;
    color: #0B2B33;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.xway-resources-section .tool-content > p {
    font-size: 15px;
    color: #3F5F67;
    line-height: 1.65;
    margin-bottom: 20px;
}

.xway-resources-section .tool-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.xway-resources-section .tool-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 138, 145, 0.06);
    color: #028A91;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(2, 138, 145, 0.12);
}

.xway-resources-section .tool-stats .stat svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.xway-resources-section .tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(2, 138, 145, 0.2);
}

.xway-resources-section .tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2, 138, 145, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.xway-resources-section .tool-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* Tools CTA Box */

.xway-resources-section .tools-cta {
    margin-top: 60px;
}

.xway-resources-section .cta-box {
    background: linear-gradient(135deg, rgba(2, 138, 145, 0.05), rgba(10, 164, 179, 0.08));
    border: 1.5px solid rgba(2, 138, 145, 0.15);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.xway-resources-section .cta-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.xway-resources-section .cta-icon svg {
    width: 32px;
    height: 32px;
    stroke: #ffffff;
    stroke-width: 2.5;
}

.xway-resources-section .cta-content-box {
    flex: 1;
    min-width: 250px;
}

.xway-resources-section .cta-content-box h4 {
    font-size: 22px;
    color: #0B2B33;
    font-weight: 700;
    margin-bottom: 8px;
}

.xway-resources-section .cta-content-box p {
    font-size: 15px;
    color: #3F5F67;
    margin: 0;
    line-height: 1.6;
}

.xway-resources-section .cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #FF6B3D, #FF824B);
    color: #ffffff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 107, 61, 0.3);
    flex-shrink: 0;
}

.xway-resources-section .cta-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255, 107, 61, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.xway-resources-section .cta-btn-primary svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* ========== GUIDES SECTION ========== */

.xway-resources-section .guides-container {
    max-width: 1200px;
    margin: 0 auto;
}

.xway-resources-section .guides-intro {
    text-align: center;
    margin-bottom: 50px;
}

.xway-resources-section .guides-intro h3 {
    font-size: clamp(28px, 4vw, 38px);
    color: #0B2B33;
    font-weight: 800;
    margin-bottom: 12px;
}

.xway-resources-section .guides-intro p {
    font-size: 17px;
    color: #254A52;
    line-height: 1.6;
}

.xway-resources-section .guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
    margin-bottom: 60px;
}

.xway-resources-section .guide-card {
    background: #ffffff;
    border: 1.5px solid rgba(2, 138, 145, 0.12);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.xway-resources-section .guide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(2, 138, 145, 0.15);
    border-color: rgba(2, 138, 145, 0.3);
}

.xway-resources-section .guide-card.featured {
    grid-column: span 2;
}

.xway-resources-section .guide-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.xway-resources-section .guide-card.featured .guide-image {
    height: 280px;
}

.xway-resources-section .placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xway-resources-section .guide-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #FF6B3D, #FF824B);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(255, 107, 61, 0.3);
}

.xway-resources-section .guide-content {
    padding: 28px;
}

.xway-resources-section .guide-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.xway-resources-section .guide-meta .category {
    display: inline-block;
    background: rgba(2, 138, 145, 0.1);
    color: #028A91;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xway-resources-section .guide-meta .read-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3F5F67;
    font-size: 13px;
    font-weight: 600;
}

.xway-resources-section .guide-meta .read-time svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.xway-resources-section .guide-content h4 {
    font-size: 20px;
    color: #0B2B33;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.xway-resources-section .guide-card.featured .guide-content h4 {
    font-size: 24px;
}

.xway-resources-section .guide-content > p {
    font-size: 15px;
    color: #3F5F67;
    line-height: 1.65;
    margin-bottom: 20px;
}

.xway-resources-section .guide-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #028A91;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.xway-resources-section .guide-link:hover {
    color: #0AA4B3;
    gap: 12px;
    text-decoration: none;
}

.xway-resources-section .guide-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.3s ease;
}

.xway-resources-section .guide-link:hover svg {
    transform: translateX(4px);
}

/* ========== NEWSLETTER SECTION ========== */

.xway-resources-section .newsletter-section {
    margin-top: 60px;
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.xway-resources-section .newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: xwNewsletterShine 3s infinite;
}

@keyframes xwNewsletterShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.xway-resources-section .newsletter-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.xway-resources-section .newsletter-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xway-resources-section .newsletter-icon svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    stroke-width: 2.5;
}

.xway-resources-section .newsletter-text {
    flex: 1;
    min-width: 250px;
}

.xway-resources-section .newsletter-text h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 6px;
}

.xway-resources-section .newsletter-text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

.xway-resources-section .newsletter-form {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 300px;
}

.xway-resources-section .newsletter-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.xway-resources-section .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.xway-resources-section .newsletter-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.25);
}

.xway-resources-section .newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #ffffff;
    color: #028A91;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.xway-resources-section .newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.xway-resources-section .newsletter-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
    .xway-resources-section .guides-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .xway-resources-section .guide-card.featured {
        grid-column: span 1;
    }
    
    .xway-resources-section .guide-card.featured .guide-image {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .xway-resources-section {
        padding: 60px 20px;
    }
    
    .xway-resources-section .resources-tabs {
        flex-direction: column;
        gap: 12px;
    }
    
    .xway-resources-section .tab-btn {
        width: 100%;
        justify-content: center;
    }
    
    .xway-resources-section .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .xway-resources-section .guides-grid {
        grid-template-columns: 1fr;
    }
    
    .xway-resources-section .faq-item.active .faq-answer {
        padding: 0 20px 24px 20px;
    }
    
    .xway-resources-section .cta-box {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }
    
    .xway-resources-section .newsletter-content {
        flex-direction: column;
        text-align: center;
    }
    
    .xway-resources-section .newsletter-form {
        flex-direction: column;
        width: 100%;
    }
    
    .xway-resources-section .newsletter-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .xway-resources-section .resources-header h2 {
        font-size: 32px;
    }
    
    .xway-resources-section .faq-question {
        padding: 20px 16px;
    }
    
    .xway-resources-section .question-text {
        font-size: 15px;
    }
    
    .xway-resources-section .tool-card {
        padding: 24px 20px;
    }
    
    .xway-resources-section .guide-content {
        padding: 20px;
    }
}
/* ================================
   XWay Social List
   ================================ */

.xw-social-list {
    list-style: none;
    display: flex;
    gap: 16px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* Item */
.xw-social-list li {
    margin: 0;
}

/* Link */
.xw-social-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #ff9e7a;
    background: rgba(2, 138, 145, 0.06);
    border: 1.5px solid rgba(2, 138, 145, 0.15);
    transition: all 0.25s ease;
}

/* Hover effect – elegant + brand */
.xw-social-list a:hover {
    background: linear-gradient(135deg, #028A91, #0AA4B3);
    border-color: #028A91;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
    text-decoration: none;
}

/* Icon */
.xw-social-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.2;
    transition: transform 0.25s ease;
}

/* Icon animation on hover */
.xw-social-list a:hover .xw-social-icon {
    transform: scale(1.15);
}

.xw-social-list {
    color: #fff !important; /* orice culoare vrei */
}
/* ==============================
   XWay – Nav CTA (Contact) – DESKTOP
   ============================== */
@media (min-width: 769px) {
  .main-header-menu .xw-nav-cta > a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 15px 50px;
      border-radius: 999px;
      background: transparent;
      color: #ffffff !important;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.03em;
      text-decoration: none;
      line-height: 1.2;
      border: 1.5px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 0 transparent;
      transition: transform 0.2s ease,
                  box-shadow 0.2s ease,
                  background-color 0.2s ease,
                  color 0.2s ease;
      margin: 20px 20px 20px 110px;
  }

  .main-header-menu .xw-nav-cta > a:hover {
      background: #ffffff;
      color: #0B2B33 !important;
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  }

  .main-header-menu .xw-nav-cta > a:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  }
}

/* ==============================
   XWay – Mobile Menu
   ============================== */
@media (max-width: 768px) {

  /* Container mobil – fundal & colțuri */
  .ast-header-break-point .main-navigation {
      background: #082E36;
      border-radius: 16px;
      margin: 12px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
      overflow: hidden;
  }

  /* Listă meniu vertical + spacing */
  .ast-header-break-point .main-header-menu {
      padding: 6px 0 10px;
  }

  /* Link-uri: icon + text + separator */
  .ast-header-break-point .main-header-menu > .menu-item > a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 500;
      color: #E9F3F5;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Fără linie sub ultimul */
  .ast-header-break-point .main-header-menu > .menu-item:last-child > a {
      border-bottom: none;
  }

  /* Hover pe mobil (pentru cei cu mouse / tablets) */
  .ast-header-break-point .main-header-menu > .menu-item > a:hover {
      background: rgba(255, 255, 255, 0.04);
  }

  /* Contact pe mobil – link normal, doar ușor accentuat */
  .ast-header-break-point .main-header-menu .xw-nav-cta > a {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      color: #FF8A3D !important; /* mic accent */
      font-weight: 600;
      padding: 12px 18px;
  }

  .ast-header-break-point .main-header-menu .xw-nav-cta > a:hover {
      background: rgba(255, 255, 255, 0.04);
      transform: none;
      filter: none;
  }
}

/* ==========================
   XWay – Contact Section H4 Title
   ========================== */

.xw-contact-heading {
    color: #ffffff;                  /* text alb */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;               /* desktop */
    letter-spacing: 0.4px;
    margin-bottom: 20px;
    display: block;
    text-align: left;              /* se potrivește cu social icons */
}

/* ===== Mobile optimization ===== */
@media (max-width: 767px) {
    .xw-contact-heading {
        font-size: 1.2rem;           /* mai mic pe mobil */
        margin-bottom: 8px;
        letter-spacing: 0.3px;
    }
}

/* ============================
   XWay – Contact Form Clean (Final)
   ============================ */

.xw-contact-form .wpcf7-form {
    max-width: 540px;
    margin: 0 auto;
}

/* Linie între câmpuri */
.xw-contact-form .wpcf7-form p {
    margin-bottom: 10px;
}

/* ------------------------------
   2-column layout for NAME + EMAIL
   ------------------------------ */
.xw-contact-row {
    display: flex;
    gap: 14px;
}

.xw-contact-row p {
    flex: 1;
    margin-bottom: 14px !important;
}

/* ------------------------------
   Inputs, selects, textarea
   ------------------------------ */
.xw-contact-form .wpcf7-form input[type="text"],
.xw-contact-form .wpcf7-form input[type="email"],
.xw-contact-form .wpcf7-form input[type="tel"],
.xw-contact-form .wpcf7-form select,
.xw-contact-form .wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.10);
    padding: 12px 12px;
    font-size: 16px;
    line-height: 1.3;
    color: #ffffff;
    outline: none;
    min-height: 40px;
}

/* Placeholder vizibil */
.xw-contact-form .wpcf7-form input::placeholder,
.xw-contact-form .wpcf7-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

/* Focus accent XWay */
.xw-contact-form .wpcf7-form input:focus,
.xw-contact-form .wpcf7-form select:focus,
.xw-contact-form .wpcf7-form textarea:focus {
    border-color: #ff824b;
    box-shadow: 0 0 0 1px rgba(255, 130, 75, 0.55);
    background: rgba(0, 0, 0, 0.16);
}

/* ------------------------------
   Submit Button
   ------------------------------ */
.xw-contact-form .wpcf7-form input[type="submit"] {
    border: none;
    border-radius: 999px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(180deg, #ff6a32 0%, #ff824b 100%);
    color: #ffffff;
    transition: 0.15s ease;
}

.xw-contact-form .wpcf7-form input[type="submit"]:hover {
    transform: translateY(-1px);
    opacity: 0.96;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ===============================
   XWay – Contact Form Error Style
   =============================== */

/* Mesaje inline lângă câmpuri (inclusiv GDPR) */
.xw-contact-form .wpcf7-not-valid-tip {
    display: block !important;
    margin-top: 6px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #ff6a32; /* Orange XWay */
    line-height: 1.4;
    font-weight: 500;
}

/* Mesajul global "One or more fields…" */
.xw-contact-form .wpcf7-response-output {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    background: rgba(255, 106, 50, 0.10);  /* orange transparent */
    border: 1px solid rgba(255, 130, 75, 0.6);
    color: #ffbba6; /* text soft pe teal */
}

/* Starea de eroare */
.xw-contact-form .wpcf7-form.invalid .wpcf7-response-output {
    border-color: #ff6a32;
    color: #ffc9b7;
}

/* Starea de succes */
.xw-contact-form .wpcf7-mail-sent-ok {
    background: rgba(0, 200, 140, 0.12);
    border: 1px solid rgba(0, 200, 140, 0.6);
    color: #bfffe8;
}


/* ===============================
   XWay – Error Hover States
   =============================== */

/* Hover pe mesajele inline (lângă câmpuri) */
.xw-contact-form .wpcf7-not-valid-tip:hover {
    color: #ff824b !important; /* orange mai cald */
    cursor: default;
    transition: color 0.15s ease;
}

/* Hover pe mesajul global de eroare */
.xw-contact-form .wpcf7-response-output:hover {
    background: rgba(255, 106, 50, 0.14) !important; /* puțin mai vizibil */
    border-color: rgba(255, 130, 75, 0.85) !important;
    color: #ffd9cf !important;
    transition: all 0.15s ease;
}



/*--------------------------------------  */

/* ===============================
   XWay – Contact Section AI Network
   =============================== */

.xw-contact-section {
    position: relative;
    overflow: hidden;
    background: #005c73; /* teal-ul tău */
    color: #ffffff;
}

/* ridicăm conținutul peste layer-ele animate */
.xw-contact-section > .elementor-container {
    position: relative;
    z-index: 2;
}

/* Layer 1 – puncte + linii de “network” */
.xw-contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 2px, transparent 3px),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 2px, transparent 3px),
        linear-gradient(115deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.22) 100%);
    background-size: 220px 220px, 260px 260px, cover;
    opacity: 0.45;

    animation: xw-network-drift 40s linear infinite;
}

/* Layer 2 – “blobs” soft în orange / cyan */
.xw-contact-section::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.50;

    animation: xw-blobs-float 3s ease-in-out infinite alternate;
}

/* Keyframes – mișcare lentă a rețelei */
@keyframes xw-network-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-20px, -30px, 0);
    }
    100% {
        transform: translate3d(25px, 20px, 0);
    }
}

/* Keyframes – “respirația” blob-urilor AI */
@keyframes xw-blobs-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(10px, -10px, 0) scale(1.05);
    }
    100% {
        transform: translate3d(-15px, 15px, 0) scale(1.02);
    }
}

/* Mobile – mai discret */
@media (max-width: 768px) {
    .xw-contact-section::before,
    .xw-contact-section::after {
        opacity: 0.35;
    }
}

/* Respectă preferința de “reduced motion” a utilizatorului */
@media (prefers-reduced-motion: reduce) {
    .xw-contact-section::before,
    .xw-contact-section::after {
        animation: none;
    }
}

/* ==========================================
   XWay – Contact Section: Clean AI Background
   (No floating square, no overflow issues)
   ========================================== */

/* Layer 1: particule AI super subtile */
.xw-contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);

    background-size:
        140px 140px,
        180px 180px,
        220px 220px;

    opacity: 0.35; /* subtil, elegant */
    animation: xw-particles 22s linear infinite;
}

/* Layer 2: subtle glow (interior only) */
.xw-contact-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 30% 40%, rgba(255,130,75,0.12) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10) 0%, transparent 70%);
    
    opacity: 0.45;
    animation: xw-glow 18s ease-in-out infinite alternate;
}

/* Particles animation – extremely soft */
@keyframes xw-particles {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-35px, 25px, 0);
    }
}

/* Glow drifting animation – interior only */
@keyframes xw-glow {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }
    100% {
        transform: translate3d(15px,-20px,0) scale(1.05);
    }
}

/* Mobile: lighter + slower */
@media (max-width: 768px) {
    .xw-contact-section::before {
        opacity: 0.28;
        animation-duration: 28s;
    }
    .xw-contact-section::after {
        opacity: 0.35;
        animation-duration: 24s;
    }
}



/* ============================
   XWay – AI Neuron Grid BG
   ============================ */

/* Secțiunea de contact (containerul mare din Elementor) */
.xw-contact-ai-grid {
    position: relative;
    background: linear-gradient(180deg, #005c73 0%, #004458 55%, #00242f 100%);
    color: #ffffff;
    overflow: hidden;           /* nimic nu iese din secțiune */
}

/* Toate elementele din secțiune stau deasupra efectului */
.xw-contact-ai-grid > * {
    position: relative;
    z-index: 1;
}

/* 1) Grid de puncte / neuroni */
.xw-contact-ai-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    /* puncte stil ChatGPT */
    background-image:
        radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1.5px);
    background-size: 70px 70px;
    opacity: 0.7;
}

/* 2) „nori” soft care se mișcă lent (neuroni activi) */
.xw-contact-ai-grid::after {
    content: "";
    position: absolute;
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(circle at 18% 25%, rgba(255, 130, 75, 0.20), transparent 55%),
        radial-gradient(circle at 72% 65%, rgba(0, 255, 209, 0.16), transparent 55%),
        radial-gradient(circle at 40% 90%, rgba(255, 255, 255, 0.10), transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.85;

    animation: xw-neuron-orbit 32s linear infinite;
}

/* Animație lentă, subtilă */
@keyframes xw-neuron-orbit {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(4%, -3%, 0) rotate(180deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(360deg);
    }
}

/* ============================
   Mobile fine-tuning
   ============================ */
@media (max-width: 768px) {
    .xw-contact-ai-grid::before {
        background-size: 52px 52px;  /* grid un pic mai dens pe mobil */
        opacity: 0.6;
    }

    .xw-contact-ai-grid::after {
        animation-duration: 26s;     /* ușor mai rapid pe mobile */
    }
}

.grecaptcha-badge { visibility: hidden; }

/* Sticky Header 
header, .main-header-bar, .site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: inherit;
}
*/
.xway-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.xway-social-icon {
  width: 32px;
  height: 32px;
  color: #ffffff;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.xway-social-icon:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}







/* ============================
Why   ============================ */
.xway-why-section {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: clamp(80px, 12vw, 120px) 20px;
            position: relative;
            background: transparent;
        }

        /* AI Network lines background */
        .xway-network-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.15;
            pointer-events: none;
        }

        .xway-network-bg svg {
            width: 100%;
            height: 100%;
        }

        /* Floating AI particles */
        .xway-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, #0AA4B3, #028A91);
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(10, 164, 179, 0.5);
        }

        .xway-particle-1 {
            top: 20%;
            left: 5%;
            animation: xwayFloat1 8s ease-in-out infinite;
        }

        .xway-particle-2 {
            top: 60%;
            right: 8%;
            animation: xwayFloat2 10s ease-in-out infinite;
        }

        .xway-particle-3 {
            bottom: 25%;
            left: 12%;
            animation: xwayFloat3 12s ease-in-out infinite;
        }

        @keyframes xwayFloat1 {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(30px, -40px); }
        }

        @keyframes xwayFloat2 {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(-25px, 35px); }
        }

        @keyframes xwayFloat3 {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(40px, -30px); }
        }

        .xway-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* Header */
        .xway-header {
            margin-bottom: 60px;
            position: relative;
        }

        .xway-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
            color: #028A91;
            padding: 10px 22px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 24px;
            border: 1.5px solid rgba(2, 138, 145, 0.25);
            box-shadow: 0 4px 12px rgba(2, 138, 145, 0.1);
        }

        .xway-badge svg {
            width: 14px;
            height: 14px;
        }

        .xway-header h2 {
            font-size: clamp(36px, 5.5vw, 52px);
            color: #0B2B33;
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        /* Cards Grid - 2 columns */
        .xway-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
        }

        /* Card styling */
        .xway-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
            border: 1.5px solid rgba(2, 138, 145, 0.12);
            border-radius: 24px;
            padding: 42px 38px;
            position: relative;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            overflow: hidden;
        }

        /* Tech grid pattern overlay */
        .xway-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 120px;
            background-image: 
                repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(2, 138, 145, 0.03) 8px, rgba(2, 138, 145, 0.03) 9px),
                repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(2, 138, 145, 0.03) 8px, rgba(2, 138, 145, 0.03) 9px);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .xway-card:hover::before {
            opacity: 1;
        }

        .xway-card:hover {
            transform: translateY(-6px);
            box-shadow: 
                0 24px 48px rgba(2, 138, 145, 0.12),
                0 0 0 1px rgba(2, 138, 145, 0.2);
            border-color: rgba(2, 138, 145, 0.3);
        }

        /* Gradient accent bar */
        .xway-accent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #028A91, #0AA4B3, #FF6B3D);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .xway-card:hover .xway-accent {
            transform: scaleX(1);
        }

        /* Icon with tech effect */
        .xway-icon-wrapper {
            width: 68px;
            height: 68px;
            background: linear-gradient(135deg, #028A91, #0AA4B3);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            position: relative;
            box-shadow: 0 8px 24px rgba(2, 138, 145, 0.25);
            transition: all 0.4s ease;
        }

        .xway-card:hover .xway-icon-wrapper {
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 12px 32px rgba(2, 138, 145, 0.35);
        }

        /* Scan line effect */
        .xway-icon-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
            animation: xwayScan 3s ease-in-out infinite;
        }

        @keyframes xwayScan {
            0%, 100% { top: 0; left: -100%; }
            50% { top: 100%; left: 100%; }
        }

        .xway-icon-wrapper svg {
            width: 32px;
            height: 32px;
            stroke: white;
            fill: none;
            stroke-width: 2.5;
            position: relative;
            z-index: 1;
        }

        /* Content */
        .xway-content h3 {
            font-size: 22px;
            color: #0B2B33;
            font-weight: 700;
            margin-bottom: 14px;
            line-height: 1.35;
        }

        .xway-content > p {
            font-size: 15.5px;
            color: #4A5F67;
            line-height: 1.75;
            margin-bottom: 24px;
        }

        /* Result box with tech styling */
        .xway-result {
            background: linear-gradient(135deg, rgba(2, 138, 145, 0.04), rgba(10, 164, 179, 0.06));
            border-left: 3px solid #0AA4B3;
            border-radius: 8px;
            padding: 16px 18px;
            position: relative;
            overflow: hidden;
        }

        .xway-result::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(180deg, #0AA4B3, #028A91);
            animation: xwayPulseBar 2s ease-in-out infinite;
        }

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

        .xway-result strong {
            font-size: 13px;
            color: #028A91;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 6px;
        }

        .xway-result p {
            font-size: 14.5px;
            color: #254A52;
            font-style: italic;
            margin: 0;
            line-height: 1.6;
        }

        /* AI indicator badge */
        .xway-ai-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #FF6B3D, #FF824B);
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(255, 107, 61, 0.3);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.4s ease;
        }

        .xway-card:hover .xway-ai-badge {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .xway-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .xway-section {
                padding: 60px 18px;
            }

            .xway-card {
                padding: 36px 28px;
            }

            .xway-particle,
            .xway-network-bg {
                display: none;
            }
        }


/* Procese---------------------*/

.xway-process-infographic * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .xway-process-infographic {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 80px 20px;
            overflow-x: hidden;
            max-width: 1400px;
            margin: 0 auto;
        }

        .xway-process-infographic .process-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }

        .xway-process-infographic .process-badge {
            display: inline-block;
            background: rgba(2, 138, 145, 0.1);
            color: #028A91;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 20px;
            border: 1px solid rgba(2, 138, 145, 0.2);
        }

        .xway-process-infographic .process-header h2 {
            font-size: clamp(36px, 5vw, 52px);
            color: #0B2B33;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }

        .xway-process-infographic .process-header p {
            font-size: clamp(16px, 2.5vw, 20px);
            color: #254A52;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .xway-process-infographic .highlight {
            color: #FF6B3D;
            font-weight: 600;
        }

        .xway-process-infographic .process-flow {
            position: relative;
            padding: 60px 0;
        }

        .xway-process-infographic .flow-path {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .xway-process-infographic .process-steps {
            position: relative;
            z-index: 1;
        }

        .xway-process-infographic .step-item {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 120px;
            opacity: 0;
            transform: translateY(40px);
            animation: xwayFadeInUp 0.8s ease forwards;
			padding-inline: clamp(12px, 4vw, 56px);
        }

        .xway-process-infographic .step-item:nth-child(1) { animation-delay: 0.2s; }
        .xway-process-infographic .step-item:nth-child(2) { animation-delay: 0.4s; }
        .xway-process-infographic .step-item:nth-child(3) { animation-delay: 0.6s; }
        .xway-process-infographic .step-item:nth-child(4) { animation-delay: 0.8s; }

        @keyframes xwayFadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .xway-process-infographic .step-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .xway-process-infographic .step-item:last-child {
            margin-bottom: 0;
        }

        .xway-process-infographic .step-visual {
            flex: 0 0 400px;
            position: relative;
        }

        .xway-process-infographic .step-circle {
            width: 350px;
            height: 350px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 20px 60px rgba(2, 138, 145, 0.15);
            border: 1px solid rgba(2, 138, 145, 0.2);
            transition: all 0.5s ease;
        }

        .xway-process-infographic .step-item:hover .step-circle {
            transform: scale(1.05);
            box-shadow: 0 30px 80px rgba(2, 138, 145, 0.25);
        }

        .xway-process-infographic .orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 2px dashed rgba(2, 138, 145, 0.2);
            border-radius: 50%;
            animation: xwayRotate 20s linear infinite;
        }

        .xway-process-infographic .orbit-1 { width: 420px; height: 420px; }
        .xway-process-infographic .orbit-2 { 
            width: 480px; 
            height: 480px; 
            animation-duration: 30s; 
            animation-direction: reverse; 
        }

        @keyframes xwayRotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .xway-process-infographic .orbit-dot {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #0AA4B3;
            border-radius: 50%;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 20px rgba(2, 138, 145, 0.6);
        }

        .xway-process-infographic .step-icon-container {
            width: 180px;
            height: 180px;
            background: linear-gradient(135deg, #028A91, #0AA4B3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 15px 40px rgba(2, 138, 145, 0.3);
        }

        .xway-process-infographic .step-icon-container svg {
            width: 80px;
            height: 80px;
            stroke: white;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .xway-process-infographic .step-number-badge {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #FF6B3D, #FF824B);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 24px;
            color: white;
            box-shadow: 0 8px 20px rgba(255, 107, 61, 0.4);
        }

        .xway-process-infographic .step-content {
            flex: 1;
            max-width: 600px;
        }

        .xway-process-infographic .step-label {
            display: inline-block;
            color: #028A91;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 12px;
        }

        .xway-process-infographic .step-title {
            font-size: clamp(28px, 4vw, 38px);
            font-weight: 800;
            color: #0B2B33;
            margin-bottom: 16px;
            line-height: 1.2;
        }

        .xway-process-infographic .step-description {
            font-size: 17px;
            color: #254A52;
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .xway-process-infographic .step-features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }

        .xway-process-infographic .feature-tag {
            background: rgba(2, 138, 145, 0.1);
            color: #014D56;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid rgba(2, 138, 145, 0.2);
        }

        .xway-process-infographic .ai-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #FF6B3D, #FF824B);
            color: white;
            padding: 10px 18px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 8px 20px rgba(255, 107, 61, 0.3);
            margin-top: 12px;
        }

        .xway-process-infographic .ai-indicator svg {
            width: 18px;
            height: 18px;
        }

        .xway-process-infographic .deliverable-box {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 16px 20px;
            border-radius: 12px;
            border-left: 4px solid #FF6B3D;
            margin-top: 20px;
        }

        .xway-process-infographic .deliverable-box strong {
            color: #014D56;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .xway-process-infographic .deliverable-box p {
            color: #254A52;
            font-style: italic;
            margin-top: 6px;
            font-size: 15px;
        }

        .xway-process-infographic .process-cta {
            margin-top: 120px;
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(2, 138, 145, 0.25);
            border-radius: 24px;
            padding: 60px 40px;
            box-shadow: 0 20px 60px rgba(2, 138, 145, 0.15);
            position: relative;
            overflow: hidden;
        }

        .xway-process-infographic .process-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(2, 138, 145, 0.1), transparent);
            animation: xwayShine 3s infinite;
        }

        @keyframes xwayShine {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }

        .xway-process-infographic .cta-content {
            position: relative;
            z-index: 1;
        }

        .xway-process-infographic .cta-title {
            font-size: clamp(28px, 4vw, 38px);
            font-weight: 800;
            color: #0B2B33;
            margin-bottom: 16px;
        }

        .xway-process-infographic .cta-subtitle {
            font-size: 18px;
            color: #254A52;
            margin-bottom: 32px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .xway-process-infographic .cta-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .xway-process-infographic .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 32px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .xway-process-infographic .cta-btn.primary {
            background: linear-gradient(135deg, #FF6B3D, #FF824B);
            color: white;
            box-shadow: 0 10px 25px rgba(255, 107, 61, 0.35);
        }

        .xway-process-infographic .cta-btn.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255, 107, 61, 0.45);
            color: white;
            text-decoration: none;
        }

        .xway-process-infographic .cta-btn.secondary {
            background: white;
            color: #028A91;
            border: 2px solid #028A91;
            box-shadow: 0 4px 12px rgba(2, 138, 145, 0.15);
        }

        .xway-process-infographic .cta-btn.secondary:hover {
            background: #028A91;
            color: white;
            transform: translateY(-3px);
            text-decoration: none;
        }

        .xway-process-infographic .cta-btn svg {
            width: 20px;
            height: 20px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .xway-process-infographic .step-visual {
                flex: 0 0 300px;
            }

            .xway-process-infographic .step-circle {
                width: 280px;
                height: 280px;
            }

            .xway-process-infographic .orbit-1 { width: 340px; height: 340px; }
            .xway-process-infographic .orbit-2 { width: 380px; height: 380px; }

            .xway-process-infographic .step-icon-container {
                width: 140px;
                height: 140px;
            }

            .xway-process-infographic .step-icon-container svg {
                width: 60px;
                height: 60px;
            }
        }

        @media (max-width: 768px) {
            .xway-process-infographic {
                padding: 40px 20px;
            }

            .xway-process-infographic .step-item {
                flex-direction: column !important;
                gap: 30px;
                margin-bottom: 80px;
            }

            .xway-process-infographic .step-visual {
                flex: none;
                width: 100%;
                display: flex;
                justify-content: center;
            }

            .xway-process-infographic .step-circle {
                width: 240px;
                height: 240px;
            }

            .xway-process-infographic .orbit-1 { width: 280px; height: 280px; }
            .xway-process-infographic .orbit-2 { width: 320px; height: 320px; }

            .xway-process-infographic .step-icon-container {
                width: 120px;
                height: 120px;
            }

            .xway-process-infographic .step-icon-container svg {
                width: 50px;
                height: 50px;
            }

            .xway-process-infographic .step-content {
                text-align: center;
                max-width: 100%;
            }

            .xway-process-infographic .step-features {
                justify-content: center;
            }

            .xway-process-infographic .flow-path {
                display: none;
            }

            .xway-process-infographic .process-cta {
                padding: 40px 24px;
                margin-top: 80px;
            }

            .xway-process-infographic .cta-buttons {
                flex-direction: column;
            }

            .xway-process-infographic .cta-btn {
                width: 100%;
                justify-content: center;
            }
        }

/* ABOUT XWAY SECTION STYLES – OPTIMIZED FOR MOBILE */

.xway-about {
  padding: 4rem 1.5rem;
  background: #e9f7fb; /* deschis, în linie cu fundalul general */
}

.xway-about__inner {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 40px rgba(7, 51, 85, 0.08);
  border: 1px solid rgba(0, 143, 155, 0.08);
}

/* Eyebrow */

.xway-about__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #008f99; /* turcoaz */
  background: rgba(0, 143, 153, 0.08);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* Title & text */

.xway-about__title {
  font-size: clamp(1.7rem, 3vw, 2rem);
  line-height: 1.25;
  color: #073355;
  margin-bottom: 1.25rem;
}

.xway-about__text {
  font-size: 1rem;
  line-height: 1.7;
  color: #38556b;
  max-width: 720px;
  margin-bottom: 2.25rem;
}

/* Highlights grid */

.xway-about__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.xway-about__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #f5fcff;
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(0, 143, 155, 0.08);
}

.xway-about__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff6b35;
  color: #ffffff;
  font-size: 1.3rem;
}

.xway-about__item h3 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
  color: #073355;
}

.xway-about__item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #4a657b;
}

/* =======================
   RESPONSIVE
   ======================= */

/* Tablet & small laptop */
@media (max-width: 900px) {
  .xway-about {
    padding: 3rem 1.25rem;
  }

  .xway-about__inner {
    padding: 2.2rem 1.75rem;
    border-radius: 20px;
  }

  .xway-about__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .xway-about {
    padding: 2.5rem 1rem;
  }

  .xway-about__inner {
    padding: 2rem 1.25rem;
    border-radius: 18px;
  }

  .xway-about__eyebrow {
    font-size: 0.72rem;
    padding: 0.3rem 0.8rem;
  }

  .xway-about__title {
    font-size: 1.55rem;
  }

  .xway-about__text {
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
  }

  .xway-about__highlights {
    grid-template-columns: 1fr; /* cardurile una sub alta */
    gap: 1rem;
  }

  .xway-about__item {
    padding: 1.1rem 1.1rem;
    gap: 0.75rem;
  }

  .xway-about__icon {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .xway-about__item h3 {
    font-size: 0.98rem;
  }

  .xway-about__item p {
    font-size: 0.9rem;
  }
}

/* Very small devices */
@media (max-width: 400px) {
  .xway-about {
    padding-inline: 0.75rem;
  }

  .xway-about__inner {
    padding: 1.6rem 1rem;
  }
}


		/* ================================
   XWay – Termeni și Condiții (legal-page)
   Folosește token-urile și stilul existent
   ================================ */

.legal-page.terms-and-conditions {
  max-width: var(--xw-container-md);
  margin: var(--xw-space-3xl) auto var(--xw-space-3xl);
  padding: var(--xw-space-lg);
  background: #ffffff;
  border-radius: var(--xw-radius-lg);
  border: 1px solid rgba(2, 138, 145, 0.16);
  box-shadow: var(--xw-shadow-md);
  font-family: var(--xw-font-family-base);
  color: var(--xw-text-primary);
}

/* dacă pagina e într-o secțiune teal/dark, poți adăuga asta pe containerul de deasupra:
   .xw-gradient .legal-page.terms-and-conditions { background: rgba(255,255,255,0.96); } */

.legal-page .legal-header {
  border-bottom: 1px solid rgba(2, 138, 145, 0.18);
  padding-bottom: var(--xw-space-sm);
  margin-bottom: var(--xw-space-md);
}

.legal-page .legal-header h1 {
  font-size: var(--xw-font-3xl);
  font-weight: var(--xw-weight-extrabold);
  letter-spacing: -0.02em;
  line-height: var(--xw-leading-tight);
  margin-bottom: 6px;
  color: var(--xw-text-primary);
}

.legal-page .legal-meta {
  font-size: var(--xw-font-sm);
  color: var(--xw-text-muted);
  line-height: var(--xw-leading-relaxed);
}

.legal-page a {
  color: var(--xw-teal-primary);
  text-decoration: none;
  transition: color var(--xw-transition-fast);
}

.legal-page a:hover {
  color: var(--xw-teal-light);
  text-decoration: underline;
}

/* ================================
   Conținut secțiuni
   ================================ */

.legal-content {
  font-size: var(--xw-font-base);
  line-height: var(--xw-leading-relaxed);
  color: var(--xw-text-secondary);
}

.legal-content section {
  padding: var(--xw-space-sm) var(--xw-space-sm);
  margin-bottom: var(--xw-space-sm);
  border-radius: var(--xw-radius-md);
  border: 1px solid rgba(2, 138, 145, 0.10);
  background: #f9fcfc;
  transition: border-color var(--xw-transition-base),
              box-shadow var(--xw-transition-base),
              transform var(--xw-transition-base),
              background var(--xw-transition-base);
}

.legal-content section:hover {
  border-color: rgba(2, 138, 145, 0.28);
  box-shadow: var(--xw-shadow-sm);
  background: #ffffff;
  transform: translateY(-1px);
}

.legal-content h2 {
  font-size: var(--xw-font-lg);
  font-weight: var(--xw-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--xw-text-primary);
}

.legal-content p {
  margin: 6px 0;
}

/* Liste */

.legal-content ul {
  margin: 6px 0 8px 1.1rem;
  padding: 0;
}

.legal-content li {
  margin: 4px 0;
  color: var(--xw-text-tertiary);
}

.legal-content li::marker {
  color: var(--xw-teal-primary);
}

/* Bold în text legal */

.legal-content strong {
  font-weight: var(--xw-weight-semibold);
  color: var(--xw-text-primary);
}

/* ================================
   Rezumat / "Pe scurt"
   ================================ */

.legal-summary {
  border-left: 3px solid var(--xw-orange-primary);
  background: linear-gradient(
    135deg,
    rgba(255, 106, 50, 0.04),
    rgba(2, 138, 145, 0.03)
  );
}

.legal-summary h2 {
  color: var(--xw-orange-primary);
}

.legal-summary p {
  color: var(--xw-text-secondary);
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 768px) {
  .legal-page.terms-and-conditions {
    margin: var(--xw-space-2xl) var(--xw-space-sm);
    padding: var(--xw-space-md);
  }

  .legal-content section {
    padding: var(--xw-space-xs) var(--xw-space-xs);
  }
}



/* ===================================
   XWay – Blog / Ghiduri Slider (Content Views)
   =================================== */

/* Card container Elementor generic (dacă îl folosești în secțiune) */
.elementor .xw-card {
  border-radius: var(--xw-radius-lg) !important;
  overflow: hidden;
  padding: 25px;
}

/* ===== Slider container general ===== */

.xw-blog-slider {
  position: relative;
  margin-top: 24px;
}

/* Wrapper care ascunde overflow + fade edges */

.xw-blog-track-wrapper {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
}

/* Fade stânga/dreapta */

.xw-blog-track-wrapper::before,
.xw-blog-track-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.xw-blog-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}

.xw-blog-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

/* ===================================
   Track – transformăm grid-ul pluginului în scroll orizontal
   =================================== */

#pt-cv-view-437224fp07.pt-cv-blockgrid {
  display: block !important; /* neutralizează layout-ul default */
}

#pt-cv-view-437224fp07 > .pt-cv-page {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible;
  gap: 20px !important;
  padding: 4px 6px 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* scrollbar discret (sau îl poți scoate complet dacă vrei) */
#pt-cv-view-437224fp07 > .pt-cv-page::-webkit-scrollbar {
  height: 6px;
}
#pt-cv-view-437224fp07 > .pt-cv-page::-webkit-scrollbar-thumb {
  background: rgba(2, 138, 145, 0.3);
  border-radius: 10px;
}

/* ===================================
   Card de articol (fără hover effect pe card)
   =================================== */

#pt-cv-view-437224fp07 .pt-cv-content-item {
  min-width: 300px;
  max-width: 300px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(2, 138, 145, 0.12);
  box-shadow: 0 8px 20px rgba(2, 138, 145, 0.06);
  padding: 14px;
}

/* Thumbnail */

#pt-cv-view-437224fp07 .pt-cv-thumb-wrapper {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

#pt-cv-view-437224fp07 .pt-cv-thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Categorie */

#pt-cv-view-437224fp07 .pt-cv-taxoterm {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

#pt-cv-view-437224fp07 .pt-cv-taxoterm a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(2, 138, 145, 0.08);
  color: #028A91;
  text-decoration: none;
}

/* Titlu articol */

#pt-cv-view-437224fp07 .pt-cv-title {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  margin: 4px 0 8px;
}

#pt-cv-view-437224fp07 .pt-cv-title a {
  color: #0B2B33;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* păstrăm doar efectul de hover pe text, nu pe card */
#pt-cv-view-437224fp07 .pt-cv-title a:hover {
  color: #028A91;
}

/* Excerpt */

#pt-cv-view-437224fp07 .pt-cv-content {
  font-size: 14px;
  line-height: 1.7;
  color: #3F5F67;
}

/* scoatem br extra din excerpt dacă introduce spații ciudate */
#pt-cv-view-437224fp07 .pt-cv-content br {
  display: none;
}

/* ===================================
   Buton „Read More” – stil XWay, fără verde default
   =================================== */

#pt-cv-view-437224fp07 .pt-cv-rmwrap {
  margin-top: 8px;
}

/* reset pentru clasa default a pluginului */
#pt-cv-view-437224fp07 .pt-cv-readmore.btn.btn-success {
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(2, 138, 145, 0.4);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #028A91;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none;
  transition: background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s ease;
}

/* mic „chevron” la final */
#pt-cv-view-437224fp07 .pt-cv-readmore.btn.btn-success::after {
  content: "\2197";
  font-size: 12px;
}

/* Hover doar pe buton, nu pe card */
#pt-cv-view-437224fp07 .pt-cv-readmore.btn.btn-success:hover {
  background: #028A91;
  color: #ffffff;
  border-color: #028A91;
  transform: translateY(-1px);
}

/* dacă pluginul mai adaugă și .pt-cv-readmore fără .btn-success, arată la fel */
#pt-cv-view-437224fp07 .pt-cv-readmore:not(.btn-success) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  color: #ffffff !important;
  text-decoration: none !important;
  border: none;
}

/* ===================================
   Săgeți slider
   =================================== */

.xw-blog-arrow {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  z-index: 3;

  width: 85px;           /* mai subțire ca lățime */
  height: 70px;          /* mai înaltă */
  border-radius: 999px;   /* nu complet rotund */

  background: rgba(255, 255, 255, 0.1)  !important; /* transparent fin */
  border: 1px solid rgba(2, 138, 145, 0.15) !important; /* contur discret */

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(2, 138, 145, 0.9);  /* icon discret */
  cursor: pointer;

  transition: all 0.25s ease;
}

/* Hover – ușor, elegant */
.xw-blog-arrow:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(2, 138, 145, 0.825);
  color: #028A91;
  transform: translateY(-50%) translateY(-2px);
}


.xw-blog-arrow svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
}

.xw-blog-prev {
  left: -20px;
}
.xw-blog-next {
  right: -20px;
}

/* Pe mobil, săgețile mai discrete (sau le poți ascunde complet) */
@media (max-width: 767px) {
  .xw-blog-arrow {
    width: 32px;
    height: 32px;
    background: rgba(11, 43, 51, 0.04);
  }
}

/* ============================================
   TEXT TRANSFORM RESET
   Resetează uppercase automat de pe titluri și conținut
   ============================================ */

p, span, div, a {
    text-transform: none !important;
}

/* ============================================
   XWAY FAQ - STILURI NOI 2025
   Înlocuiesc .faq-grid cu .faq-list pentru layout 1 coloană
   ============================================ */

/* Container FAQ - 1 coloană pentru claritate UX */
.xway-resources-section .faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

/* Etichete secțiuni FAQ */
.xway-resources-section .faq-section-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #028A91;
    padding: 24px 0 8px 0;
    margin-top: 16px;
    border-bottom: 2px solid rgba(2, 138, 145, 0.15);
}

.xway-resources-section .faq-section-label:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Override pentru faq-answer cu multiple paragrafe */
.xway-resources-section .faq-answer p {
    margin-bottom: 12px;
}

.xway-resources-section .faq-answer p:last-child {
    margin-bottom: 0;
}

/* Accent pe textul strong din răspunsuri */
.xway-resources-section .faq-answer strong {
    color: #028A91;
    font-weight: 700;
}

/* Animație smooth pentru deschidere */
.xway-resources-section .faq-item {
    transition: all 0.3s ease, box-shadow 0.3s ease;
}

.xway-resources-section .faq-item.active {
    border-color: rgba(2, 138, 145, 0.35);
    box-shadow: 0 8px 24px rgba(2, 138, 145, 0.12);
}


/* ==============================
   XWay – Main Menu (desktop)
   ============================== */

@media (min-width: 921px) {

  /* Container meniu – aliniere frumoasă */
  .xw-main-nav .main-header-menu {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* Fiecare item de meniu (fără Contact) */
  .xw-main-nav .main-header-menu > li:not(.xw-nav-cta) {
    position: relative;
    list-style: none;
  }

  .xw-main-nav .main-header-menu > li:not(.xw-nav-cta) > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
    font-weight: 600;
    font-size: 15px !important;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #ffffff;              /* text alb în header pe fundal teal */
    transition: color 0.2s ease;
  }

  /* Linie subtilă sub item-ul activ / hover (stil XWay) */
  .xw-main-nav .main-header-menu > li:not(.xw-nav-cta) > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #ff824b;         /* portocaliul XWay */
    border-radius: 999px;
    opacity: 0;
    transition: width 0.22s ease, opacity 0.22s ease;
  }

  .xw-main-nav .main-header-menu > li:hover > a,
  .xw-main-nav .main-header-menu > li.current-menu-item > a,
  .xw-main-nav .main-header-menu > li.current-menu-ancestor > a {
    color: #ffffff;
  }

  .xw-main-nav .main-header-menu > li:hover > a::after,
  .xw-main-nav .main-header-menu > li.current-menu-item > a::after,
  .xw-main-nav .main-header-menu > li.current-menu-ancestor > a::after {
    width: 100%;
    opacity: 1;
  }

  /* ==============================
     Submeniuri (dropdown)
     ============================== */

  /* Cutia albă a submeniului */
  .xw-main-nav .sub-menu {
    background: #ffffff;
    padding: 10px 0;
    margin-top: 16px;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 92, 115, 0.08);
		width: auto !important;
  }

  /* Link-urile din submeniu – text închis, nu alb! */
  .xw-main-nav .sub-menu li {
    list-style: none;
  }

  .xw-main-nav .sub-menu li a {
    display: block;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #005c73 !important;                /* teal închis – vizibil pe alb */
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
		
		/* Hover – linia devine complet albă */
.main-header-menu .sub-menu li a:hover {
    border-bottom: 1px solid #ffffff;
    color: #ffffff !important;
}
  }

  .xw-main-nav .sub-menu li a:hover {
    background: rgba(0, 92, 115, 0.06);
    color: #003b4d;
    padding-left: 22px;           /* mic „slide” la hover */
  }

  /* Să nu stricăm butonul de Contact (xw-nav-cta) */
  .xw-main-nav .main-header-menu > li.xw-nav-cta > a {
    /* se aplică stilul tău existent pentru buton, nu modific aici */
  }
}





/* ============================================
   XWAY PRICING SECTION - COMPLETE STYLES
   ============================================ */

.xway-pricing-section {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: clamp(80px, 10vw, 120px) 20px;
  background: #ffffff;
}

.xway-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* === HEADER === */
.pricing-header {
  text-align: center;
  margin-bottom: 70px;
}

.pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
  color: #028A91;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1.5px solid rgba(2, 138, 145, 0.25);
}

.pricing-title {
  font-size: clamp(36px, 5.5vw, 52px);
  color: #0B2B33;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.pricing-title .highlight {
  color: #FF6B3D;
}

.pricing-subtitle {
  font-size: clamp(16px, 2.5vw, 19px);
  color: #254A52;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 14px;
  color: #FF824B;
}

/* === MAIN GRID === */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 60px;
}

/* === PRICING CARD === */
.pricing-card {
  background: #ffffff;
  border: 1.5px solid rgba(2, 138, 145, 0.12);
  border-radius: 24px;
  padding: 36px 32px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(2, 138, 145, 0.12);
  border-color: rgba(2, 138, 145, 0.25);
}

/* === FEATURED CARD (Pro) === */
.pricing-card.featured {
  transform: scale(1.05);
  box-shadow: 0 24px 60px rgba(255, 107, 61, 0.2);
  border: 2px solid #FF6B3D;
  z-index: 2;
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-6px);
  box-shadow: 0 30px 70px rgba(255, 107, 61, 0.28);
}

.popular-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FF6B3D, #FF824B);
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(255, 107, 61, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* === BADGES === */
.card-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  width: fit-content;
}

.badge-teal {
  background: rgba(2, 138, 145, 0.1);
  color: #028A91;
  border: 1px solid rgba(2, 138, 145, 0.2);
}

.badge-orange {
  background: rgba(255, 107, 61, 0.1);
  color: #FF6B3D;
  border: 1px solid rgba(255, 107, 61, 0.2);
}

.badge-purple {
  background: rgba(147, 51, 234, 0.1);
  color: #9333EA;
  border: 1px solid rgba(147, 51, 234, 0.2);
}

/* === CARD HEADER === */
.card-header {
  margin-bottom: 24px;
}

.card-title {
  font-size: 28px;
  font-weight: 700;
  color: #0B2B33;
  line-height: 1.2;
  margin-bottom: 4px;
}

.card-subtitle {
  font-weight: 400;
  font-size: 24px;
  color: #028A91;
}

.card-description {
  font-size: 15px;
  color: #4A5F67;
  line-height: 1.6;
  margin-top: 12px;
}

/* === PRICE === */
.card-price {
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.04), rgba(10, 164, 179, 0.06));
  border-left: 3px solid #0AA4B3;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 28px;
}

.price-label {
  font-size: 13px;
  color: #028A91;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.price-value {
  font-size: 18px;
  font-weight: 800;
  color: #0B2B33;
  display: block;
}

.price-roi {
  font-size: 12px;
  color: #4A5F67;
  font-style: italic;
  display: block;
  margin-top: 6px;
}

/* === FEATURES === */
.card-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.1), rgba(10, 164, 179, 0.15));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  stroke: #028A91;
}

.feature-text {
  font-size: 14.5px;
  color: #3F5F67;
  line-height: 1.6;
}

.feature-text strong {
  color: #0B2B33;
  font-weight: 600;
}

.feature-item.premium .feature-icon {
  background: linear-gradient(135deg, rgba(255, 107, 61, 0.1), rgba(255, 130, 75, 0.15));
}

.feature-item.premium .feature-icon svg {
  stroke: #FF6B3D;
  fill: #FF6B3D;
}

/* === CTA BUTTONS === */
.card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: auto;
}

.btn-teal {
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 138, 145, 0.35);
  color: #ffffff;
  text-decoration: none;
}

.btn-orange {
  background: linear-gradient(135deg, #FF6B3D, #FF824B);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(255, 107, 61, 0.35);
}

.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 61, 0.45);
  color: #ffffff;
  text-decoration: none;
}

.btn-purple {
  background: linear-gradient(135deg, #9333EA, #A855F7);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(147, 51, 234, 0.25);
}

.btn-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(147, 51, 234, 0.35);
  color: #ffffff;
  text-decoration: none;
}

/* === XWAY CARE SECTION === */
.xway-care-section {
  background: linear-gradient(135deg, rgba(2, 138, 145, 0.05), rgba(10, 164, 179, 0.08));
  border: 1.5px solid rgba(2, 138, 145, 0.15);
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.xway-care-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(2, 138, 145, 0.08), transparent);
  animation: careShine 3s infinite;
}

@keyframes careShine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.care-badge {
  display: inline-block;
  background: rgba(2, 138, 145, 0.1);
  color: #028A91;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(2, 138, 145, 0.2);
}

.care-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.care-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 300px;
}

.care-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(2, 138, 145, 0.25);
}

.care-icon svg {
  stroke: #ffffff;
}

.care-text h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0B2B33;
  margin-bottom: 6px;
}

.care-text p {
  font-size: 15px;
  color: #4A5F67;
  line-height: 1.6;
  margin-bottom: 8px;
}

.care-price {
  font-size: 14px;
  color: #254A52;
}

.care-price strong {
  font-size: 18px;
  font-weight: 700;
  color: #028A91;
}

.care-features-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  flex: 1;
  min-width: 400px;
}

.compact-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3F5F67;
  font-weight: 500;
}

.compact-feature svg {
  flex-shrink: 0;
  stroke: #028A91;
}

.care-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #028A91, #0AA4B3);
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(2, 138, 145, 0.2);
  flex-shrink: 0;
}

.care-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 138, 145, 0.3);
  color: #ffffff;
  text-decoration: none;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .pricing-grid {
    gap: 24px;
  }
  
  .pricing-card {
    padding: 32px 28px;
  }
  
  .pricing-card.featured {
    transform: scale(1.03);
  }
  
  .pricing-card.featured:hover {
    transform: scale(1.03) translateY(-4px);
  }
}

@media (max-width: 991px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto 60px;
  }
  
  .pricing-card.featured {
    transform: scale(1);
    order: -1; /* Pro apare primul pe mobil */
  }
  
  .care-features-compact {
    grid-template-columns: 1fr;
    min-width: unset;
  }
}

@media (max-width: 640px) {
  .xway-pricing-section {
    padding: 60px 16px;
  }
  
  .pricing-header {
    margin-bottom: 50px;
  }
  
  .pricing-card {
    padding: 28px 24px;
  }
  
  .card-title {
    font-size: 24px;
  }
  
  .xway-care-section {
    padding: 32px 24px;
  }
  
  .care-left {
    flex-direction: column;
    text-align: center;
    min-width: unset;
  }
  
  .care-features-compact {
    width: 100%;
  }
  
  .care-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   XWAY HERO SECTION - OPTIMIZED & RESPONSIVE
   Desktop: Text left, Effects right
   Mobile: Centered, Single viewport
   ============================================ */

/* === HERO CONTAINER - FULL WIDTH === */
.xway-hero-code {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #0B4450 0%, #0f8892 45%, #0AA4B3 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Force full width breakout from container */
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  max-width: 100vw !important;
}

/* === DIAGONAL ORANGE ACCENT === */
.xway-hero-code::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 60%;
  height: 120%;
  background: linear-gradient(135deg, #FF6B3D 0%, #FF824B 100%);
  transform: skewY(-70deg);
  z-index: 0;
  opacity: 0.80;
  pointer-events: none;
}

/* === GRID PATTERN OVERLAY === */
.xway-hero-code::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
}

/* === CONTENT WRAPPER === */
.xway-hero-content {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(80px, 18vh, 160px) clamp(20px, 5vw, 60px) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* === LEFT SIDE - TEXT === */
.xway-hero-left {
  color: #ffffff;
}

.xway-hero-title {
  font-size: clamp(2rem, 6vw, 3.3rem)!important;
  color: whitesmoke;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  margin-bottom: 24px;
}

.xway-hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem)!important;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 32px;
  max-width: 600px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* === CTA BUTTONS === */
.xway-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.xway-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 15px);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.xway-hero-btn-primary {
  background: linear-gradient(180deg, #FF6B3D, #FF824B);
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 25px rgba(255, 107, 61, 0.35);
}

.xway-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 61, 0.45);
  color: #ffffff;
  text-decoration: none;
}

.xway-hero-btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.xway-hero-btn-secondary:hover {
  background: #ffffff;
  color: #0f8892;
  transform: translateY(-2px);
  text-decoration: none;
}

.xway-hero-note {
  font-size: clamp(12px, 1.5vw, 14px) !important;
  font-style: italic;
  opacity: 0.85;
}

/* === RIGHT SIDE - CODE VISUAL === */
.xway-hero-right {
  position: relative;
  height: 550px;
  width: 100%;
}

/* === FLOATING CODE BLOCKS === */
.xway-code-block {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 20px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: float 6s ease-in-out infinite;
}

/* Code Block Positions */
.xway-code-block-1 {
  top: 5%;
  left: 5%;
  width: 280px;
  animation-delay: 0s;
}

.xway-code-block-1::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 16px;
  width: 8px;
  height: 8px;
  background: #FF6B3D;
  border-radius: 50%;
  box-shadow: 
    16px 0 0 #FFD93D,
    32px 0 0 #6BCF7F;
}

.xway-code-block-2 {
  top: 35%;
  right: 8%;
  width: 320px;
  animation-delay: 2s;
  background: rgba(255, 255, 255, 0.18);
}

.xway-code-block-3 {
  bottom: 10%;
  left: 12%;
  width: 260px;
  animation-delay: 4s;
}

/* === CODE SYNTAX HIGHLIGHTING === */
.code-line {
  display: block;
  margin: 4px 0;
}

.code-keyword {
  color: #FF6B3D;
  font-weight: 600;
}

.code-function {
  color: #FFD93D;
}

.code-string {
  color: #6BCF7F;
}

.code-number {
  color: #4FC3F7;
}

.code-comment {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* === FLOATING ANIMATION === */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) rotate(1deg);
  }
  50% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
  75% {
    transform: translateY(-15px) rotate(0.5deg);
  }
}

/* === UI MOCKUP ELEMENTS === */
.xway-ui-mockup {
  position: absolute;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: float 8s ease-in-out infinite;
}

.xway-ui-mockup-1 {
  top: 15%;
  right: 5%;
  width: 240px;
  height: 320px;
  animation-delay: 1s;
}

.xway-ui-header {
  height: 50px;
  background: linear-gradient(135deg, #0f8892, #0AA4B3);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.xway-ui-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.xway-ui-body {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xway-ui-item {
  height: 40px;
  background: linear-gradient(90deg, #E0F7FA 0%, #B2EBF2 100%);
  border-radius: 8px;
  animation: pulse 2s ease-in-out infinite;
}

.xway-ui-item:nth-child(2) {
  width: 80%;
  animation-delay: 0.3s;
}

.xway-ui-item:nth-child(3) {
  width: 60%;
  animation-delay: 0.6s;
}

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

/* === GRADIENT ORB DECORATIONS === */
.xway-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  pointer-events: none;
  animation: orb-float 10s ease-in-out infinite;
}

.xway-orb-1 {
  width: 300px;
  height: 300px;
  background: #FF6B3D;
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.xway-orb-2 {
  width: 250px;
  height: 250px;
  background: #FFD93D;
  bottom: 15%;
  right: 20%;
  animation-delay: 3s;
}

@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* === SCROLL INDICATOR === */
.xway-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce 2s ease-in-out infinite;
}

.xway-scroll-indicator svg {
  width: 32px;
  height: 32px;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
}

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

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* === LARGE TABLETS & SMALL DESKTOPS (991px - 1200px) === */
@media (max-width: 1200px) {
  .xway-hero-code::before {
    width: 0%;
  }
  
  .xway-code-block-1,
  .xway-code-block-2,
  .xway-code-block-3,
  .xway-ui-mockup-1,
	.xway-hero-code::before{
    display: none;
  }
}

/* === TABLETS (768px - 991px) === */
@media (max-width: 991px) {
  .xway-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 100px 30px 60px;
    text-align: center;
  }

  .xway-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .xway-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .xway-hero-cta {
    justify-content: center;
  }

  .xway-hero-right {
    display: none;
  }

  .xway-hero-code::before {
    display: none;
  }
}

/* === MOBILE LANDSCAPE (481px - 767px) === */
@media (max-width: 767px) {
  .xway-hero-content {
    padding: 80px 24px 50px;
  }
  
  .xway-hero-title {
    margin-bottom: 28px;
  }
  
  .xway-hero-subtitle {
    margin-bottom: 28px;
  }
}

/* === MOBILE PORTRAIT (≤ 480px) === */
@media (max-width: 480px) {
  .xway-hero-code {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .xway-hero-content {
    padding: 100px 20px 40px 20px;
    gap: 24px;
  }

  .xway-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem)!important;
    margin-bottom: 24px;
  }

  .xway-hero-subtitle {
    font-size: clamp(0.95rem, 4vw, 1.1rem)!important;
    margin-bottom: 24px;
  }

  .xway-hero-cta {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .xway-hero-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  .xway-orb,
  .xway-scroll-indicator {
    display: none;
  }
}

/* === LANDSCAPE ORIENTATION (Height constrained) === */
@media (max-height: 600px) and (orientation: landscape) {
  .xway-hero-code {
    min-height: auto;
  }

  .xway-hero-content {
    padding: 40px 30px;
  }

  .xway-hero-right {
    height: 280px;
  }
}

/* ============================================
   THEME COMPATIBILITY FIXES
   ============================================ */

/* === ASTRA THEME OVERRIDES === */
.site-content,
.ast-container,
.site-main,
main {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-section.xway-hero-section {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-section.xway-hero-section > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === HEADER PROTECTION === */
.site-header,
.main-header-bar-wrap,
.main-header-bar {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.site-header .ast-container,
.site-header .site-content,
.main-header-bar-wrap .ast-container {
  padding: 0 40px !important;
  margin: 0 auto !important;
  max-width: 1400px !important;
}

.main-header-menu-container,
.ast-main-header-bar-alignment {
  margin-left: auto !important;
}

/* === STICKY HEADER ADJUSTMENT === */
body.has-sticky-header .xway-hero-code {
  margin-top: 0;
}

body.has-sticky-header .xway-hero-content {
  padding-top: 140px;
}

/* === FIRST ELEMENT AFTER HEADER === */
header + .xway-hero-code,
.site-header + .xway-hero-code {
  margin-top: 0 !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .xway-code-block,
  .xway-ui-mockup,
  .xway-orb,
  .xway-ui-item,
  .xway-scroll-indicator,
  .xway-hero-btn {
    animation: none;
    transition: none;
  }
  
  .xway-hero-btn:hover {
    transform: none;
  }
}

/* ============================================
   ALTERNATIVE: BACKGROUND-ONLY CLASS
   Use this on Elementor sections if needed
   ============================================ */

.xway-hero-bg {
  position: relative;
  background: linear-gradient(135deg, #0B4450 0%, #0f8892 45%, #0AA4B3 100%);
  overflow: hidden;
}

.xway-hero-bg::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  left: 25%;
  width: 100%;
  height: 120%;
  background: linear-gradient(135deg, #FF6B3D 0%, #FF824B 100%);
  transform: skewY(-65deg);
  z-index: 0;
  opacity: 0.80;
  pointer-events: none;
}

.xway-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
}

.xway-hero-bg > * {
  position: relative;
  z-index: 10;
}

@media (max-width: 991px) {
  .xway-hero-bg::before {
    display: none;
  }
}


/* ============================================
   XWAY DARK SECTION - REUSABLE CTA/CONTENT
   Full-width, no orange accent
   ============================================ */

.xway-dark-section {
  position: relative;
  width: 100vw;
  margin: 0 !important;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 60px);
  background: linear-gradient(135deg, #0B4450 0%, #0f8892 45%, #0AA4B3 100%);
  overflow: hidden;
  
  /* Force full-width breakout from any container */
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* === GRID PATTERN OVERLAY === */
.xway-dark-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
}

/* === CONTENT WRAPPER === */
.xway-dark-section .xway-section-content {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* === TEXT STYLING === */
.xway-dark-section h2,
.xway-dark-section h3 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  margin-bottom: 16px;
  font-weight: 700;
}

.xway-dark-section h2 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.2;
}

.xway-dark-section h3 {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.3;
}

.xway-dark-section p {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: clamp(16px, 2.5vw, 18px);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* === CTA BUTTON INSIDE DARK SECTION === */
.xway-dark-section .xway-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.xway-dark-section .xway-cta-btn-primary {
  background: linear-gradient(180deg, #FF6B3D, #FF824B);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(255, 107, 61, 0.35);
}

.xway-dark-section .xway-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 61, 0.45);
  color: #ffffff;
  text-decoration: none;
}

.xway-dark-section .xway-cta-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.xway-dark-section .xway-cta-btn-outline:hover {
  background: #ffffff;
  color: #0f8892;
  transform: translateY(-2px);
  text-decoration: none;
}

/* === BUTTON GROUP === */
.xway-dark-section .xway-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ============================================
   MODIFIER CLASSES
   ============================================ */

/* === CENTERED TEXT VERSION === */
.xway-dark-section.xway-centered {
  text-align: center;
}

.xway-dark-section.xway-centered .xway-section-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xway-dark-section.xway-centered .xway-cta-group {
  justify-content: center;
}

/* === SMALLER PADDING VERSION === */
.xway-dark-section.xway-compact {
  padding: clamp(50px, 8vh, 80px) clamp(20px, 5vw, 60px);
}

/* === LEFT-ALIGNED TEXT (Like Hero) === */
.xway-dark-section.xway-left-align {
  text-align: left;
}

.xway-dark-section.xway-left-align .xway-cta-group {
  justify-content: flex-start;
}

/* === GRADIENT VARIATIONS === */
.xway-dark-section.xway-teal {
  background: linear-gradient(135deg, #005c73 0%, #028A91 50%, #0AA4B3 100%);
}

.xway-dark-section.xway-deep {
  background: linear-gradient(135deg, #0B2B33 0%, #0B4450 50%, #0f8892 100%);
}

/* ============================================
   DECORATIVE ELEMENTS (OPTIONAL)
   ============================================ */

/* === SUBTLE GRADIENT ORBS === */
.xway-dark-section.xway-with-orbs::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 130, 75, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
  .xway-dark-section {
    padding: clamp(60px, 10vh, 100px) 30px;
  }
  
  /* Auto-center on tablets */
  .xway-dark-section:not(.xway-left-align) {
    text-align: center;
  }
  
  .xway-dark-section:not(.xway-left-align) .xway-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .xway-dark-section:not(.xway-left-align) .xway-cta-group {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .xway-dark-section {
    padding: 60px 24px;
  }
  
  .xway-dark-section .xway-cta-group {
    flex-direction: column;
    width: 100%;
  }
  
  .xway-dark-section .xway-cta-btn {
    width: 100%;
    justify-content: center;
  }
  
  .xway-dark-section h2 {
    margin-bottom: 20px;
  }
  
  .xway-dark-section p {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .xway-dark-section {
    padding: 50px 20px;
  }
  
  .xway-dark-section .xway-cta-btn {
    padding: 14px 24px;
    font-size: 14px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .xway-dark-section .xway-cta-btn {
    transition: none;
  }
  
  .xway-dark-section .xway-cta-btn:hover {
    transform: none;
  }
}

/* ============================================
   THEME COMPATIBILITY FIXES
   ============================================ */

/* === Ensure parent containers don't restrict === */
body, html {
  overflow-x: clip !important;
}

.site-content,
.ast-container,
.site-main {
  overflow-x: visible !important;
}

/* === Fix for Elementor sections === */
.elementor-section.xway-dark-section {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-section.xway-dark-section > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pricing-vat-note {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.6); /* un gri discret */
  text-align: center;
}


/* Urgency Banner */
.pricing-urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 106, 50, 0.08), rgba(255, 106, 50, 0.12));
  border: 1px solid rgba(255, 106, 50, 0.2);
  border-radius: 12px;
  padding: 16px 24px;
  margin: 24px 0 40px;
  text-align: center;
}

.urgency-icon {
  font-size: 24px;
}

.urgency-text {
  font-size: 15px;
  color: #254A52;
}

/* Price hint pentru Ecosistem */
.price-hint {
  display: block;
  font-size: 13px;
  color: #4A5F67;
  margin-top: 4px;
  font-weight: 400;
}


/* ============================================
   XWAY CSS OPTIMIZATIONS PATCH
   Version: 2.0.1
   Date: December 2024
   
   @description Optimizări pentru performanță, 
   accesibilitate și best practices CSS.
   
   @seo-purpose Reduce render-blocking, 
   improve Core Web Vitals (CLS, LCP, FID)
   
   @geo-context Acest patch îmbunătățește 
   indexabilitatea și experiența utilizatorului
   pentru motoarele de căutare AI (Perplexity, 
   Google SGE, Claude, ChatGPT Search)
   ============================================ */


/* ============================================
   1. ACCESSIBILITY: Reduced Motion Support
   @purpose Respectă preferințele utilizatorilor
   cu sensibilitate la mișcare
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Hero floating elements */
  .xway-code-block,
  .xway-ui-mockup,
  .xway-orb {
    animation: none !important;
  }
  
  /* Process infographic orbits */
  .xway-process-infographic .orbit-particle,
  .xway-process-infographic .step-icon-container {
    animation: none !important;
  }
  
  /* Newsletter shine effect */
  .newsletter-section::before,
  .xway-resources-section .newsletter-section::before {
    animation: none !important;
  }
  
  /* AI network drift */
  .xw-ai-network,
  .xw-ai-network::after {
    animation: none !important;
  }
  
  /* Pulse animations */
  .xway-ui-item {
    animation: none !important;
  }
  
  /* All hover transforms - reduce to simple opacity */
  .xw-btn:hover,
  .xw-card:hover,
  .xw-glass-card:hover,
  .faq-item:hover,
  .tool-card:hover,
  .guide-card:hover,
  .pricing-card:hover {
    transform: none !important;
  }
  
  /* Transition durations reduced */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================
   2. PERFORMANCE: Will-change Optimization
   @purpose Reduce GPU memory usage
   ============================================ */

/* Remove will-change after animation completes */
.xway-code-block,
.xway-ui-mockup {
  will-change: auto;
}

/* Add will-change only on hover/focus for interactive elements */
.xw-btn:hover,
.xw-btn:focus,
.pricing-card:hover,
.faq-item:hover {
  will-change: transform;
}


/* ============================================
   3. PRINT STYLES
   @purpose Optimizare pentru print/PDF export
   @seo-benefit Reduce ink usage, clean output
   ============================================ */

@media print {
  /* Hide decorative elements */
  .xway-hero-code::before,
  .xway-hero-code::after,
  .xway-code-block,
  .xway-ui-mockup,
  .xway-orb,
  .xw-ai-network::before,
  .xw-ai-network::after,
  .xway-dark-section::after {
    display: none !important;
  }
  
  /* Force white background */
  body,
  .xway-hero-code,
  .xway-dark-section,
  .xw-contact-section {
    background: #fff !important;
    color: #000 !important;
  }
  
  /* Remove shadows */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure links are visible */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Page breaks */
  .xway-pricing-section,
  .xway-process-infographic,
  .xway-resources-section {
    page-break-inside: avoid;
  }
}


/* ============================================
   4. HIGH CONTRAST MODE
   @purpose Accesibilitate pentru utilizatori
   cu deficiențe de vedere
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --xw-glass-bg: rgba(255, 255, 255, 0.95);
    --xw-glass-border: rgba(0, 0, 0, 0.8);
  }
  
  .xw-btn-primary,
  .xw-btn-secondary {
    border: 2px solid #000 !important;
  }
  
  .xw-badge,
  .header-badge {
    border: 2px solid currentColor !important;
  }
}


/* ============================================
   5. FOCUS VISIBLE IMPROVEMENTS
   @purpose Better keyboard navigation
   @accessibility WCAG 2.1 AA compliance
   ============================================ */

/* Consistent focus ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--xw-orange-primary, #ff6a32);
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================
   6. CONTENT-VISIBILITY OPTIMIZATION
   @purpose Improve initial page load (LCP)
   @browser-support Chrome 85+, Edge 85+
   ============================================ */



/* ============================================
   7. SMOOTH SCROLL BEHAVIOR
   @purpose Better UX for anchor navigation
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll margin for fixed header */
[id] {
  scroll-margin-top: 0px;
}


/* ============================================
   8. BACKDROP-FILTER FALLBACK
   @purpose Support for older browsers
   ============================================ */

@supports not (backdrop-filter: blur(1px)) {
  .xway-code-block,
  .xw-glass,
  .xw-glass-strong,
  .xw-btn-ghost {
    background: rgba(255, 255, 255, 0.92) !important;
  }
  
  /* Dark theme fallback */
  .xway-hero-code .xway-code-block {
    background: rgba(11, 68, 80, 0.95) !important;
  }
}


/* ============================================
   9. SEMANTIC STRUCTURE HELPERS
   @purpose Improve screen reader experience
   @geo-benefit Better content understanding
   ============================================ */

/* Skip to content link (add in HTML: <a href="#main" class="skip-link">) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: var(--xw-teal-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xw-radius-md);
  z-index: 9999;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
}


/* ============================================
   10. LOADING STATE STYLES
   @purpose Reduce Cumulative Layout Shift (CLS)
   ============================================ */

/* Image aspect ratio preservation */
img {
  height: auto;
  max-width: 100%;
}

/* Placeholder for lazy-loaded images */
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    var(--xw-bg-light) 0%,
    #f0f0f0 50%,
    var(--xw-bg-light) 100%
  );
  background-size: 200% 100%;
}
/* ==================================================
   xWay – BOOKING + THANK YOU (UNIFIED / HARDENED)
   Scope: .xw-booking-page, .xw-thankyou-page
   Add to end of astra-child/style.css
   ================================================== */

/* ---------- Shared page background ---------- */
.xw-booking-page,
.xw-thankyou-page{
  position: relative;
  isolation: isolate;
  padding-bottom: var(--xw-space-3xl);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(10,164,179,.14), rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 85% 25%, rgba(255,106,50,.12), rgba(255,255,255,0) 55%);
}

/* ==================================================
   BOOKING PAGE
   ================================================== */

.xw-booking-page .xw-booking-hero{
  padding-block: var(--xw-space-3xl);
}

.xw-booking-page .xw-booking-hero__inner{
  display: grid !important;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: var(--xw-space-xl);
  align-items: start;
}

.xw-booking-page .xw-booking-hero__content{
  max-width: 760px;
}

.xw-booking-page .xw-booking-hero__badge{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--xw-space-sm);
}

.xw-booking-page .xw-booking-hero__badge-dot{
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--xw-teal-light);
  box-shadow: 0 0 0 4px rgba(10,164,179,.22);
}

.xw-booking-page .xw-booking-hero__title{
  font-size: var(--xw-font-4xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--xw-space-sm);
}

.xw-booking-page .xw-booking-highlight{
  padding: .08em .45em;
  border-radius: var(--xw-radius-sm);
  background: linear-gradient(90deg, rgba(10,164,179,.22), rgba(10,164,179,.06));
}

.xw-booking-page .xw-booking-hero__subtitle{
  font-size: var(--xw-font-lg);
  line-height: var(--xw-leading-relaxed);
  color: var(--xw-text-secondary);
  margin-bottom: var(--xw-space-md);
  max-width: 62ch;
}

/* Checklist */
.xw-booking-page .xw-booking-checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.xw-booking-page .xw-booking-checklist__item{
  position: relative;
  padding-left: 30px;
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

.xw-booking-page .xw-booking-checklist__item::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(10,164,179,.12);
  color: var(--xw-teal-primary);
  border: 1px solid var(--xw-border-light);
  font-weight: var(--xw-weight-bold);
  transform: translateY(1px);
}

/* CTA row + meta */
.xw-booking-page .xw-booking-hero__cta-row{
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--xw-space-sm);
  margin-top: var(--xw-space-md);
}

.xw-booking-page .xw-booking-cta{
  box-shadow: 0 10px 26px rgba(255, 106, 50, 0.32), var(--xw-shadow-md);
}

.xw-booking-page .xw-booking-meta{
  display: grid;
  gap: 6px;
  font-size: var(--xw-font-sm);
  color: var(--xw-text-tertiary);
}

/* Trust pills */
.xw-booking-page .xw-booking-trust{
  margin-top: var(--xw-space-md);
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.xw-booking-page .xw-booking-trust__pill{
  padding: 8px 12px;
  border-radius: 9999px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--xw-border-light);
  color: var(--xw-text-secondary);
  box-shadow: var(--xw-shadow-xs);
  font-size: var(--xw-font-sm);
}

/* Right card */
.xw-booking-page .xw-booking-card{
  position: sticky !important;
  top: 16px;
  z-index: 20;
}

.xw-booking-page .xw-booking-divider{
  height: 1px;
  margin: var(--xw-space-sm) 0;
  background: var(--xw-border-light);
  opacity: .9;
}

.xw-booking-page .xw-booking-info{
  display: grid;
  gap: 10px;
}

.xw-booking-page .xw-booking-info__row{
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xw-space-sm);
}

.xw-booking-page .xw-booking-info__label{
  font-size: var(--xw-font-sm);
  color: var(--xw-text-tertiary);
}

.xw-booking-page .xw-booking-info__value{
  font-size: var(--xw-font-sm);
  font-weight: var(--xw-weight-bold);
  color: var(--xw-text-secondary);
}

.xw-booking-page .xw-booking-legal{
  margin-top: var(--xw-space-sm);
  font-size: var(--xw-font-xs);
  color: var(--xw-text-tertiary);
  line-height: var(--xw-leading-relaxed);
}

/* Sections + grid */
.xw-booking-page .xw-booking-section{
  padding-block: var(--xw-space-2xl);
}

.xw-booking-page .xw-booking-section__head{
  margin-bottom: var(--xw-space-md);
}

.xw-booking-page .xw-booking-section__title{
  font-size: var(--xw-font-2xl);
  line-height: 1.25;
  margin-bottom: 6px;
}

.xw-booking-page .xw-booking-section__subtitle{
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

.xw-booking-page .xw-booking-grid-3{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--xw-space-md);
}

/* FAQ accordion */
.xw-booking-page .xw-booking-accordion{
  display: grid;
  gap: 10px;
}

.xw-booking-page .xw-booking-accordion__item{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--xw-border-light);
  border-radius: var(--xw-radius-lg);
  padding: 14px 16px;
  box-shadow: var(--xw-shadow-sm);
}

.xw-booking-page .xw-booking-accordion__summary{
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: var(--xw-weight-bold);
  list-style: none;
}

.xw-booking-page .xw-booking-accordion__summary::-webkit-details-marker{
  display: none;
}

.xw-booking-page .xw-booking-accordion__summary::after{
  content: "▾";
  color: var(--xw-teal-primary);
  transition: transform .25s ease;
}

.xw-booking-page
.xw-booking-accordion__item[open]
.xw-booking-accordion__summary::after{
  transform: rotate(-180deg);
}

.xw-booking-page .xw-booking-accordion__content{
  margin-top: 10px;
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

.xw-booking-page .xw-booking-faq__cta{
  margin-top: var(--xw-space-lg);
  display: flex;
  justify-content: center;
}

/* ==================================================
   THANK YOU PAGE
   ================================================== */

.xw-thankyou-page .xw-thankyou-hero{
  padding-block: var(--xw-space-3xl);
}

.xw-thankyou-page .xw-thankyou-hero__inner{
  display: grid !important;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: var(--xw-space-xl);
  align-items: start;
}

.xw-thankyou-page .xw-thankyou-hero__content{
  max-width: 760px;
}

.xw-thankyou-page .xw-thankyou-hero__badge{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--xw-space-sm);
}

.xw-thankyou-page .xw-thankyou-hero__badge-dot{
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--xw-teal-light);
  box-shadow: 0 0 0 4px rgba(10,164,179,.22);
}

.xw-thankyou-page .xw-thankyou-hero__title{
  font-size: var(--xw-font-4xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--xw-space-sm);
}

.xw-thankyou-page .xw-thankyou-highlight{
  padding: .08em .45em;
  border-radius: var(--xw-radius-sm);
  background: linear-gradient(90deg, rgba(10,164,179,.22), rgba(10,164,179,.06));
}

.xw-thankyou-page .xw-thankyou-hero__subtitle{
  font-size: var(--xw-font-lg);
  line-height: var(--xw-leading-relaxed);
  color: var(--xw-text-secondary);
  margin-bottom: var(--xw-space-md);
  max-width: 62ch;
}

/* Actions + meta */
.xw-thankyou-page .xw-thankyou-actions{
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--xw-space-sm);
  margin-top: var(--xw-space-md);
}

.xw-thankyou-page .xw-thankyou-meta{
  margin-top: var(--xw-space-md);
  display: grid;
  gap: 8px;
  font-size: var(--xw-font-sm);
  color: var(--xw-text-tertiary);
}

/* Right card */
.xw-thankyou-page .xw-thankyou-card{
  position: sticky !important;
  top: 16px;
  z-index: 20;
}

.xw-thankyou-page .xw-thankyou-divider{
  height: 1px;
  margin: var(--xw-space-sm) 0;
  background: var(--xw-border-light);
  opacity: .9;
}

.xw-thankyou-page .xw-thankyou-list{
  display: grid;
  gap: 14px;
}

.xw-thankyou-page .xw-thankyou-list__row{
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}

.xw-thankyou-page .xw-thankyou-list__icon{
  font-size: 20px;
  line-height: 1;
}

.xw-thankyou-page .xw-thankyou-list__text{
  font-size: var(--xw-font-base);
  line-height: var(--xw-leading-relaxed);
  color: var(--xw-text-secondary);
}

.xw-thankyou-page .xw-thankyou-legal{
  margin-top: var(--xw-space-sm);
  font-size: var(--xw-font-xs);
  color: var(--xw-text-tertiary);
  line-height: var(--xw-leading-relaxed);
}

/* Sections + grid */
.xw-thankyou-page .xw-thankyou-section{
  padding-block: var(--xw-space-2xl);
}

.xw-thankyou-page .xw-thankyou-section__head{
  margin-bottom: var(--xw-space-md);
}

.xw-thankyou-page .xw-thankyou-section__title{
  font-size: var(--xw-font-2xl);
  line-height: 1.25;
  margin-bottom: 6px;
}

.xw-thankyou-page .xw-thankyou-section__subtitle{
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

.xw-thankyou-page .xw-thankyou-grid-3{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--xw-space-md);
}

/* FAQ accordion */
.xw-thankyou-page .xw-thankyou-accordion{
  display: grid;
  gap: 10px;
}

.xw-thankyou-page .xw-thankyou-accordion__item{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--xw-border-light);
  border-radius: var(--xw-radius-lg);
  padding: 14px 16px;
  box-shadow: var(--xw-shadow-sm);
}

.xw-thankyou-page .xw-thankyou-accordion__summary{
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: var(--xw-weight-bold);
  list-style: none;
}

.xw-thankyou-page .xw-thankyou-accordion__summary::-webkit-details-marker{
  display: none;
}

.xw-thankyou-page .xw-thankyou-accordion__summary::after{
  content: "▾";
  color: var(--xw-teal-primary);
  transition: transform .25s ease;
}

.xw-thankyou-page
.xw-thankyou-accordion__item[open]
.xw-thankyou-accordion__summary::after{
  transform: rotate(-180deg);
}

.xw-thankyou-page .xw-thankyou-accordion__content{
  margin-top: 10px;
  color: var(--xw-text-secondary);
  line-height: var(--xw-leading-relaxed);
}

.xw-thankyou-page .xw-thankyou-bottom-cta{
  margin-top: var(--xw-space-xl);
  display: flex;
  justify-content: center;
}

/* ==================================================
   RESPONSIVE (both pages)
   ================================================== */

@media (max-width: 920px){
  .xw-booking-page .xw-booking-hero__inner,
  .xw-thankyou-page .xw-thankyou-hero__inner{
    grid-template-columns: 1fr !important;
  }

  .xw-booking-page .xw-booking-card,
  .xw-thankyou-page .xw-thankyou-card{
    position: relative !important;
    top: auto;
  }

  .xw-booking-page .xw-booking-grid-3,
  .xw-thankyou-page .xw-thankyou-grid-3{
    grid-template-columns: 1fr;
  }
}
/* FORCE WHITE BACKGROUND – booking + thank you */
.xw-booking-page,
.xw-thankyou-page{
  background: #ffffff !important;
}