/*
Theme Name: Envision Dark
Theme URI: https://envisiondev.net
Author: Envision Dev
Author URI: https://envisiondev.net
Description: Premium software house theme for Envision Dev. Wine burgundy, dark turquoise, and warm cream design system with glassmorphism effects.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: envision-dark
Tags: dark, luxury, agency, elementor, rtl-language-support
*/

/* ========================================
   DESIGN SYSTEM — COLOR TOKENS v4
   Primary:   #740C3E  Wine / Burgundy
   Secondary: #00CED1  Dark Turquoise
   Tertiary:  #222222  Near Black
   Neutral:   #F4EDEA  Warm Cream
======================================== */
:root {
  /* ══ UI-KIT TOKEN SYSTEM (colors_and_type.css names) ══ */

  /* Burgundy ramp */
  --burgundy-950: #3e001e;
  --burgundy-900: #500028;
  --burgundy-800: #650033;
  --burgundy-700: #740c3e;
  --burgundy-600: #841c4a;
  --burgundy-500: #a33562;
  --burgundy-400: #c34e7b;
  --burgundy-300: #e26795;
  --burgundy-200: #ff84af;
  --burgundy-100: #ffb0c8;
  --burgundy-50:  #ffd9e2;

  /* Teal ramp */
  --teal-950: #002020;
  --teal-900: #003738;
  --teal-800: #004f51;
  --teal-700: #00696b;
  --teal-600: #008587;
  --teal-500: #00a1a3;
  --teal-400: #00ced1;
  --teal-300: #2ddbde;
  --teal-200: #5af8fb;
  --teal-100: #b2feff;
  --teal-50:  #e2ffff;

  /* Ink ramp */
  --ink-950: #000000;
  --ink-900: #1b1c1c;
  --ink-800: #222222;
  --ink-700: #303030;
  --ink-600: #474746;
  --ink-500: #5f5e5e;
  --ink-400: #787776;
  --ink-300: #929090;
  --ink-200: #adabaa;
  --ink-150: #c8c6c5;
  --ink-100: #e5e2e1;
  --ink-50:  #f3f0ef;

  /* Neutral / cream */
  --cream:      #f4edea;
  --cream-deep: #ece2dc;
  --paper:      #fbf8f6;

  /* Semantic surfaces */
  --fg-1:           #222222;
  --fg-2:           #5f5e5e;
  --fg-3:           #787776;
  --fg-on-dark:     #f4edea;
  --fg-on-dark-2:   #b9b3b0;
  --fg-brand:       #740c3e;
  --fg-accent:      #008587;
  --surface-dark:   #2c2c2c;
  --overlay-dark:   rgba(34,34,34,0.72);

  /* Lines */
  --line:        #e3dad4;
  --line-strong: #d2c6bf;
  --line-dark:   rgba(255,255,255,0.12);

  /* Radii (kit names) */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* Shadows (kit names) */
  --shadow-xs:      0 1px 2px rgba(34,34,34,0.06);
  --shadow-sm:      0 2px 8px rgba(34,34,34,0.07);
  --shadow-md:      0 10px 28px rgba(34,34,34,0.10);
  --shadow-lg:      0 24px 60px rgba(34,34,34,0.14);
  --glow-burgundy:  0 8px 30px rgba(116,12,62,0.28);
  --glow-teal:      0 8px 30px rgba(0,206,209,0.28);
  --lift:           translateY(-8px);

  /* Motion (kit names) */
  --ease-out:    cubic-bezier(0.22,1,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --dur-fast:    160ms;
  --dur:         280ms;
  --dur-slow:    600ms;

  /* Type families (kit names) */
  --font-display:    'Roboto', system-ui, sans-serif;
  --font-body:       'Roboto', system-ui, sans-serif;
  --font-ar-display: 'Estedad', 'Roboto', sans-serif;
  --font-ar-body:    'Estedad', 'Roboto', sans-serif;

  /* WhatsApp */
  --whatsapp: #25d366;

  /* ══ LEGACY ALIASES (backward compat) ══ */
  /* ── Core palette ── */
  --color-primary:         #740C3E;
  --color-primary-light:   #9B1655;
  --color-primary-lighter: #C94080;
  --color-primary-dark:    #4D0828;
  --color-primary-pale:    rgba(116,12,62,0.08);

  --color-secondary:         #00CED1;
  --color-secondary-light:   #33D8DB;
  --color-secondary-lighter: #66E5E8;
  --color-secondary-dark:    #009EA1;
  --color-secondary-pale:    rgba(0,206,209,0.10);

  --color-tertiary:        #222222;
  --color-tertiary-light:  #444444;
  --color-tertiary-lighter:#666666;

  --color-neutral:        #F4EDEA;
  --color-neutral-dark:   #E8DDD9;
  --color-neutral-darker: #D4C5BF;

  /* ── Backgrounds (light theme base) ── */
  --bg-base:        #F4EDEA;
  --bg-surface:     #FFFFFF;
  --bg-dark:        #222222;
  --bg-wine-dark:   #1a0811;
  --bg-card:        rgba(116,12,62,0.05);
  --bg-glass:       rgba(116,12,62,0.04);
  --bg-glass-hover: rgba(116,12,62,0.09);
  --neutral:        #F4EDEA;

  /* ── Brand aliases (kept for backward compat) ── */
  --color-mid:           #740C3E;
  --accent-magenta:      #740C3E;
  --accent-pink:         #9B1655;
  --accent-violet:       #740C3E;
  --accent-purple:       #4D0828;
  --accent-blue:         #00CED1;

  /* ── Gradients ── */
  --grad-primary:   linear-gradient(135deg, #740C3E 0%, #00CED1 100%);
  --grad-secondary: linear-gradient(135deg, #00CED1 0%, #740C3E 100%);
  --grad-wine:      linear-gradient(135deg, #4D0828 0%, #740C3E 50%, #9B1655 100%);
  --grad-glow:      linear-gradient(135deg, #740C3E 0%, #9B1655 50%, #C94080 100%);
  --grad-dark:      linear-gradient(180deg, #1a0811 0%, #222222 100%);
  --grad-card:      linear-gradient(135deg, rgba(116,12,62,0.08) 0%, rgba(0,206,209,0.04) 100%);
  --grad-mesh:      radial-gradient(ellipse at 20% 50%, rgba(116,12,62,0.12) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(0,206,209,0.10) 0%, transparent 50%),
                    radial-gradient(ellipse at 60% 80%, rgba(116,12,62,0.08) 0%, transparent 50%);

  /* ── Typography (light mode) ── */
  --text-primary:    #222222;
  --text-secondary:  rgba(34,34,34,0.70);
  --text-muted:      rgba(34,34,34,0.50);
  --text-accent:     #740C3E;
  --text-on-dark:    #F4EDEA;
  --text-on-dark-muted: rgba(244,237,234,0.70);

  /* Fonts */
  --font-primary: 'Roboto', 'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-arabic:  'Estedad', 'Roboto', 'Noto Kufi Arabic', sans-serif;

  /* ── Borders ── */
  --border-glass:  rgba(34,34,34,0.10);
  --border-accent: rgba(116,12,62,0.22);
  --border-glow:   rgba(116,12,62,0.45);
  --border-teal:   rgba(0,206,209,0.30);

  /* ── Shadows ── */
  --shadow-card:       0 4px 24px rgba(34,34,34,0.08), 0 0 0 1px rgba(116,12,62,0.06);
  --shadow-glow:       0 0 40px rgba(116,12,62,0.20), 0 0 80px rgba(0,206,209,0.12);
  --shadow-glow-cyan:  0 0 40px rgba(0,206,209,0.25);
  --shadow-btn:        0 6px 28px rgba(116,12,62,0.35);
  --shadow-btn-cyan:   0 6px 28px rgba(0,206,209,0.30);

  /* Spacing scale */
  --section-padding:   80px 0;
  --section-pad-top:   80px;
  --section-pad-btm:   80px;
  --section-pad-x:     clamp(20px, 4vw, 40px);
  --hero-pad-top:      96px;
  --hero-pad-btm:      80px;
  --container-max:     1280px;
  --card-radius:       18px;
  --btn-radius:        50px;

  /* Transitions */
  --trans-fast:  all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-med:   all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow:  all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   BASE RESET + GLOBAL
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Slightly smaller global scale for a cleaner, more refined layout.
     Only rem-based sizes shrink; px-based kit components keep their layout. */
  font-size: 93.75%; /* 15px base */
}

body {
  background: var(--cream);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Strip Elementor page/section padding so edv-section controls its own spacing */
.elementor-page .elementor { padding: 0 !important; }
.e-con, .elementor-container { padding: 0 !important; }
.e-con > .e-con-inner { padding: 0 !important; max-width: 100% !important; }
.elementor-section { padding: 0 !important; }
.elementor-widget-html { width: 100%; }
.elementor-widget-wrap { padding: 0 !important; }
/* Remove default WP content padding */
.entry-content, .page-content, #main-content { padding: 0 !important; margin: 0 !important; }

/* Scoped: only bare prose links, never kit components (buttons, nav, footer) */
a:not([class]) { color: var(--color-primary); transition: color .2s ease; text-decoration: none; }
a:not([class]):hover { color: var(--color-secondary); }

p { color: var(--fg-2); margin-bottom: 1rem; }

/* RTL body */
body.rtl,
html[dir="rtl"] body {
  font-family: var(--font-arabic);
  direction: rtl;
}

/* ========================================
   TYPOGRAPHY SCALE
======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-tertiary);
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem,  4vw, 3.5rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { color: var(--fg-2); margin-bottom: 1rem; }
/* Legacy alias selectors removed — replaced by scoped rule above */

/* ========================================
   GRADIENT TEXT UTILITY
======================================== */
.gradient-text,
.e-con .gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark section text overrides */
.on-dark, [data-theme="dark"] {
  --text-primary:  #F4EDEA;
  --text-secondary: rgba(244,237,234,0.72);
  --text-muted:     rgba(244,237,234,0.50);
  --border-glass:   rgba(244,237,234,0.10);
  --border-accent:  rgba(0,206,209,0.30);
  color: #F4EDEA;
}

/* ========================================
   SECTION BASE
======================================== */
.section-dark {
  background: var(--bg-surface);
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.5;
  pointer-events: none;
}

section { padding: var(--section-padding); }

.container-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========================================
   PREMIUM GLASS CARD
======================================== */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--card-radius);
  padding: 2rem;
  transition: var(--trans-med);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card);
  opacity: 0;
  transition: var(--trans-med);
  border-radius: inherit;
}
.glass-card:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  transform: translateY(-4px);
}
.glass-card:hover::before { opacity: 1; }

/* ========================================
   PREMIUM BUTTONS
======================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-primary);
  color: #fff;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: var(--trans-med);
  box-shadow: var(--shadow-btn);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity: 0;
  transition: var(--trans-fast);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139,92,246,0.55);
}
.btn-primary:hover::before { opacity: 1; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-primary);
  padding: 13px 31px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--border-accent);
  cursor: pointer;
  transition: var(--trans-med);
}
.btn-outline:hover {
  background: rgba(139,92,246,0.1);
  border-color: var(--border-glow);
  box-shadow: 0 0 20px rgba(139,92,246,0.25);
  transform: translateY(-2px);
  color: var(--text-primary);
}

/* ========================================
   BADGE / LABEL
======================================== */
.badge-accent {
  display: inline-block;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  color: var(--color-primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ========================================
   GLOW ORB DECORATIONS
======================================== */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.glow-orb-magenta {
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
  width: 600px; height: 600px;
}
.glow-orb-violet {
  background: radial-gradient(circle, rgba(6,182,212,0.3) 0%, transparent 70%);
  width: 500px; height: 500px;
}
.glow-orb-blue {
  background: radial-gradient(circle, rgba(244,114,182,0.22) 0%, transparent 70%);
  width: 400px; height: 400px;
}
.glow-orb-cyan {
  background: radial-gradient(circle, rgba(6,182,212,0.3) 0%, transparent 70%);
  width: 500px; height: 500px;
}
.glow-orb-pink {
  background: radial-gradient(circle, rgba(244,114,182,0.25) 0%, transparent 70%);
  width: 400px; height: 400px;
}

/* ========================================
   STAT COUNTER CARDS
======================================== */
.stat-card {
  text-align: center;
  padding: 2rem;
}
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-label {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ========================================
   SERVICE ICON BOX
======================================== */
.service-icon {
  width: 64px;
  height: 64px;
  background: var(--grad-primary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(139,92,246,0.3);
}

/* ========================================
   DIVIDER LINE
======================================== */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-magenta), var(--accent-violet), transparent);
  margin: 0;
  border: none;
}

/* ========================================
   SECTION HEADING SYSTEM
======================================== */
.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  margin-bottom: 0.75rem;
  display: block;
}
.section-title {
  margin-bottom: 1rem;
}
.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* ========================================
   STICKY HEADER
======================================== */
#site-header,
.elementor-location-header .e-con,
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: var(--trans-med);
}

.header-scrolled,
.header-blur {
  background: rgba(4, 6, 26, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
}

/* ========================================
   NAVIGATION
======================================== */
nav a, .nav-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  transition: var(--trans-fast);
  position: relative;
}
nav a:hover, .nav-link:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
nav a.active, .nav-link.active {
  color: var(--accent-magenta);
}

/* ========================================
   MOBILE MENU
======================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 26, 0.97);
  backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open { transform: translateX(0); }

/* ========================================
   HERO SECTION
======================================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
  padding-top: 100px;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(139,92,246,0.2) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 30%, rgba(6,182,212,0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 50% 90%, rgba(244,114,182,0.12) 0%, transparent 50%);
}
.hero-grid-bg {
  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: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ========================================
   PROCESS TIMELINE
======================================== */
.timeline-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  position: relative;
}
.timeline-number {
  width: 48px;
  height: 48px;
  background: var(--grad-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(139,92,246,0.45);
}

/* ========================================
   TESTIMONIAL CARD
======================================== */
.testimonial-card {
  padding: 2rem;
  position: relative;
}
.testimonial-card .quote-icon {
  font-size: 3rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.7;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  object-fit: cover;
}

/* ========================================
   PORTFOLIO GRID
======================================== */
.portfolio-item {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
}
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-item:hover img { transform: scale(1.08); }
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,6,26,0.95) 100%);
  opacity: 0;
  transition: var(--trans-med);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }

/* ========================================
   PRICING CARD
======================================== */
.pricing-card {
  border-radius: var(--card-radius);
  padding: 2.5rem 2rem;
  position: relative;
  transition: var(--trans-med);
}
.pricing-card.featured {
  background: var(--grad-primary);
  box-shadow: var(--shadow-glow);
}
.pricing-card.featured .price-amount,
.pricing-card.featured p { color: rgba(255,255,255,0.9); }

.price-amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

/* ========================================
   FAQ ACCORDION
======================================== */
.faq-item {
  border-bottom: 1px solid var(--border-glass);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: var(--trans-fast);
  gap: 1rem;
}
.faq-question:hover { color: var(--accent-magenta); }
.faq-answer {
  color: var(--text-secondary);
  padding: 0 0 1.25rem;
  display: none;
}
.faq-item.open .faq-answer { display: block; }
.faq-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  color: var(--accent-magenta);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ========================================
   BLOG CARD
======================================== */
.blog-card {
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--trans-med);
}
.blog-card:hover { transform: translateY(-6px); }
.blog-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.blog-card-body { padding: 1.5rem; }
.blog-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  margin-bottom: 0.5rem;
  display: block;
}

/* ========================================
   FORM INPUTS
======================================== */
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 14px 18px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--trans-fast);
  outline: 2px solid transparent; /* replaced outline:none — keeps layout stable */
  outline-offset: 0;
}
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.18);
  background: rgba(255,255,255,0.07);
}
.form-input::placeholder { color: var(--text-muted); }
.form-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* ========================================
   WHATSAPP FLOAT BUTTON
======================================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: var(--trans-med);
  cursor: pointer;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }

/* RTL: flip to left */
html[dir="rtl"] .whatsapp-float { right: auto; left: 28px; }

/* ========================================
   SCROLL PROGRESS BAR
======================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--grad-primary);
  z-index: 10000;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--color-primary);
}

/* ========================================
   ANIMATIONS
======================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-15px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.35); }
  50%       { box-shadow: 0 0 40px rgba(139,92,246,0.65), 0 0 80px rgba(6,182,212,0.3); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes counter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-float    { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 20s linear infinite; }

/* Scroll reveal — applied via JS */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ========================================
   MAIN CONTENT WRAPPER — no extra padding
   Hero sections already have 160px top padding
   so the main element must be transparent + flush.
======================================== */
#main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Prevent Elementor from adding its own top margin */
.elementor-section-wrap > .elementor-section:first-child,
.elementor-section-wrap > .e-con:first-child {
    margin-top: 0 !important;
}

/* ========================================
   ELEMENTOR OVERRIDES
======================================== */
.elementor-section,
.e-con {
  --e-global-color-primary:   #740C3E;
  --e-global-color-secondary: #00CED1;
  --e-global-color-text:      #554247;
  --e-global-color-accent:    #500028;
}

/* Elementor page bg */
.elementor-page .site-main,
.wp-site-blocks,
#content, #page, main {
  background: transparent !important;
}

/* Remove default white page backgrounds */
.elementor-page .site-main,
.wp-site-blocks,
#content,
#page,
main {
  background: transparent !important;
}

/* Elementor container defaults */
.e-con {
  --container-max-width: 1280px;
  --container-widget-width: 100%;
}

/* Heading widget override */
.elementor-widget-heading .elementor-heading-title {
  color: var(--text-primary);
}

/* ========================================
   LANGUAGE SWITCHER
======================================== */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  cursor: pointer;
  transition: var(--trans-fast);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.lang-switcher:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}
.lang-flag { font-size: 1.1rem; }

/* ========================================
   TRUSTED BY LOGOS
======================================== */
.logo-strip {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: var(--trans-med);
}
.logo-strip:hover { opacity: 0.75; filter: grayscale(0%); }
.logo-strip img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* ========================================
   FOOTER
======================================== */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-glass);
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-primary);
  opacity: 0.5;
}
.footer-logo { margin-bottom: 1.5rem; }
.footer-tagline {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 280px;
  line-height: 1.6;
}
.footer-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  margin-bottom: 1.25rem;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: var(--trans-fast);
}
.footer-links a:hover {
  color: var(--text-primary);
  padding-left: 4px;
}
html[dir="rtl"] .footer-links a:hover {
  padding-left: 0;
  padding-right: 4px;
}
.footer-bottom {
  border-top: 1px solid var(--border-glass);
  margin-top: 3rem;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Social icons */
.social-icons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--trans-fast);
  font-size: 1rem;
}
.social-icon:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(139,92,246,0.12);
  box-shadow: 0 0 15px rgba(139,92,246,0.25);
}

/* ========================================
   RTL SUPPORT
======================================== */
[dir="rtl"] .timeline-item { flex-direction: row-reverse; }
[dir="rtl"] .faq-question   { text-align: right; }
[dir="rtl"] .footer-links a:hover { padding-right: 4px; padding-left: 0; }
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-outline { flex-direction: row-reverse; }

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1024px) {
  :root { --section-padding: 80px 0; }
}
@media (max-width: 768px) {
  :root { --section-padding: 60px 0; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
  .container-inner { padding: 0 16px; }
  .glass-card { padding: 1.5rem; }
  .btn-primary, .btn-outline { padding: 12px 24px; font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .stat-number { font-size: 2.25rem; }
  .price-amount { font-size: 2.25rem; }
}

/* ========================================
   PRINT
======================================== */
@media print {
  body { background: white; color: black; }
  .whatsapp-float,
  .scroll-progress,
  .mobile-menu { display: none !important; }
}

/* ========================================
   ACCESSIBILITY — WCAG 2.1 AA
   ui-ux-pro-max: priority 1 (CRITICAL)
   Rules: focus-states, keyboard-nav,
   touch-target-size, reduced-motion,
   skip-links, cursor-pointer, aria-labels
======================================== */

/* --- Elementor HTML widget inline style overrides for a11y --- */
/* FAQ buttons in Elementor HTML had background:none;border:none;outline:none hardcoded */
.elementor-widget-html button[onclick*="faq"],
.elementor-widget-html button.faq-question {
  outline: 2px solid transparent !important;
}
.elementor-widget-html button[onclick*="faq"]:focus-visible,
.elementor-widget-html button.faq-question:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* All inline-styled links inside Elementor HTML get focus ring */
.elementor-widget-html a:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* --- Skip to main content link --- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s;
  font-family: var(--font-primary);
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Global focus-visible ring (keyboard only, not mouse) --- */
/* Remove default outline first, then restore for keyboard */
*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tighter radius for round elements */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.whatsapp-float:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 50px;
}

/* Form inputs keep box-shadow focus (already styled), add outline too */
.form-input:focus-visible {
  outline: 2px solid var(--accent-magenta);
  outline-offset: 0;
}

/* --- Cursor pointer on ALL interactive elements --- */
a,
button,
[role="button"],
[type="button"],
[type="submit"],
[type="reset"],
label[for],
select,
summary,
.btn-primary,
.btn-outline,
.glass-card[onclick],
.faq-question,
.lang-switcher,
.social-icon,
.portfolio-item {
  cursor: pointer;
}

/* --- Minimum touch target 44×44px (Apple HIG / WCAG 2.5.5) --- */
button,
[role="button"],
.btn-primary,
.btn-outline,
.social-icon,
nav a,
.footer-links a,
#menu-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* Inline nav links don't need min-width, only min-height */
nav a,
.footer-links a {
  min-width: unset;
  display: inline-flex;
  align-items: center;
}

/* --- touch-action: manipulation — removes 300ms tap delay --- */
a,
button,
[role="button"],
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/* --- High-contrast text — ensure 4.5:1 on dark backgrounds --- */
/* Body text: rgba(255,255,255,0.75) on #04061a = ~9:1 ✓ */
/* Muted: rgba(255,255,255,0.45) on #04061a = ~4.6:1 ✓ */
/* Accent magenta #e8218a on #04061a = 4.8:1 ✓ */

/* Boost any sub-threshold muted text in cards */
.glass-card p,
.blog-card-body p,
.testimonial-card p {
  color: rgba(255, 255, 255, 0.7); /* 8.5:1 on dark card bg */
}

/* Footer muted text minimum */
#site-footer p,
#site-footer span,
#site-footer li {
  /* rgba(255,255,255,0.45) on #080c2e = ~4.7:1 ✓ */
}

/* --- Error / success states — not color-only (add icon in HTML) --- */
.form-error {
  color: #f87171; /* 4.6:1 on #04061a */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  margin-top: 6px;
}
.form-success {
  color: #4ade80; /* 7.2:1 on #04061a */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

/* --- Visible disabled state --- */
button:disabled,
[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Heading hierarchy — no level skip enforced via CSS hint --- */
/* (structural — enforced in HTML, not CSS) */

/* --- Reduced motion: disable all animations --- */
@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;
  }

  /* Keep visibility changes instant */
  .reveal { opacity: 1 !important; transform: none !important; }
  #envision-progress { display: none; }
}

/* --- Viewport units — use dvh for mobile hero --- */
.hero-section { min-height: min(100vh, 100dvh); }

/* --- No horizontal scroll (layout check) --- */
html, body { overflow-x: hidden; max-width: 100vw; }

/* --- Color not sole indicator for links --- */
/* Links in body text get underline so color alone ≠ only cue */
.entry-content a,
.blog-card-body a:not(.btn-primary):not(.btn-outline) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Icon-only buttons need aria-label (CSS reminder, enforced in HTML) --- */
/* .social-icon without aria-label would be caught by a11y scanner */

/* ========================================
   GRADIENT TEXT ANIMATION
   (added for hero heading upgrade)
======================================== */
@keyframes gradient-shift {
  0%   { background-position: 0%   center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0%   center; }
}
[style*="background-size:200%"],
.gradient-animated {
  background-size: 200% auto;
  animation: gradient-shift 4s ease-in-out infinite;
}

/* ========================================
   ELEMENTOR LAYOUT — FULL-WIDTH FIX
   Root containers must be zero-padding and
   full-width. HTML widgets handle their own
   internal max-width + padding via .hw/.pw etc.
======================================== */

/* Root containers: ZERO padding — widgets handle their own spacing */
#main-content > .e-con,
.elementor-section-wrap > .e-con {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove margins between adjacent root containers */
#main-content > .e-con + .e-con,
.elementor-section-wrap > .e-con + .e-con {
  margin-top: 0 !important;
  border-top: none !important;
}

/* Inner nested containers (non-root): apply sensible defaults */
#main-content > .e-con > .e-con {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* Prevent Elementor's default widget margins from stacking */
.e-con > .elementor-widget:first-child { margin-top: 0 !important; }
.e-con > .elementor-widget:last-child  { margin-bottom: 0 !important; }
.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }

@media (max-width: 480px) {
  :root {
    --hero-pad-top:  76px;
    --section-pad-top: 40px;
    --section-pad-btm: 40px;
    --section-pad-x:   16px;
  }
}

/* ── 8. Elementor widget spacing ─────── */
/* Remove default Elementor widget bottom margin stacking */
.elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}
/* Restore spacing between specific widget types */
.elementor-widget-heading + .elementor-widget-text-editor,
.elementor-widget-html + .elementor-widget-heading {
  margin-top: 8px !important;
}

/* ── 9. Pricing card equal height fix ─ */
/* Pricing row: stretch cards to equal height */
#main-content > .e-con .e-con[style*="row"] > .e-con {
  align-self: stretch !important;
}

/* ── 10. Prevent Elementor adding its own top spacing ── */
.e-con > .elementor-widget:first-child {
  margin-top: 0 !important;
}
.e-con > .elementor-widget:last-child {
  margin-bottom: 0 !important;
}

/* ========================================
   DESIGN SYSTEM v2 — EXTENDED UTILITIES
   New palette: Violet / Cyan / Pink
======================================== */

/* Button variants */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-secondary);
  color: #fff;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: var(--trans-med);
  box-shadow: var(--shadow-btn-cyan);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(6,182,212,0.5);
  color: #fff;
}
.btn-inverted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.95);
  color: #04061a;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: var(--trans-med);
}
.btn-inverted:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,255,255,0.2);
  color: #04061a;
}

/* Badge variants */
.badge-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  color: var(--color-primary-light);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.badge-cyan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.3);
  color: var(--color-secondary-light);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.badge-pink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244,114,182,0.12);
  border: 1px solid rgba(244,114,182,0.3);
  color: var(--color-tertiary-light);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Label / mono type */
.label-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.label-mono.primary { color: var(--color-primary-light); }
.label-mono.cyan    { color: var(--color-secondary-light); }
.label-mono.pink    { color: var(--color-tertiary-light); }

/* Progress bar */
.progress-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-glass);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--grad-primary);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar-fill.cyan { background: var(--grad-secondary); }

/* Gradient divider line */
.divider-primary {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
  border: none;
  margin: 0;
}
.divider-cyan {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-secondary), var(--color-tertiary), transparent);
  border: none;
  margin: 0;
}

/* Enhanced glass card — with colored top border */
.glass-card-violet {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139,92,246,0.2);
  border-top: 2px solid var(--color-primary);
  border-radius: var(--card-radius);
  padding: 2rem;
  transition: var(--trans-med);
}
.glass-card-violet:hover {
  border-color: rgba(139,92,246,0.4);
  border-top-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}
.glass-card-cyan {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(6,182,212,0.2);
  border-top: 2px solid var(--color-secondary);
  border-radius: var(--card-radius);
  padding: 2rem;
  transition: var(--trans-med);
}
.glass-card-cyan:hover {
  border-color: rgba(6,182,212,0.4);
  box-shadow: var(--shadow-glow-cyan);
  transform: translateY(-4px);
}

/* Section eyebrow variants */
.eyebrow-violet {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 0.75rem;
  display: block;
}
.eyebrow-cyan {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
  margin-bottom: 0.75rem;
  display: block;
}

/* Gradient text variants */
.text-gradient-violet,
.text-gradient-wine {
  background: var(--grad-wine);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-cyan,
.text-gradient-teal {
  background: linear-gradient(135deg, #009EA1 0%, #00CED1 50%, #33D8DB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-full {
  background: var(--grad-primary);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease-in-out infinite;
}

/* Mesh backgrounds — new palette */
.bg-mesh-wine {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(116,12,62,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,206,209,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(116,12,62,0.07) 0%, transparent 50%),
    var(--bg-base);
}
.bg-mesh-dark {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(116,12,62,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,206,209,0.15) 0%, transparent 50%),
    #222222;
}
.bg-dark-wine {
  background: var(--bg-wine-dark);
}

/* Noise texture overlay */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Mesh gradient backgrounds */
.bg-mesh-violet {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(244,114,182,0.12) 0%, transparent 50%),
    var(--bg-base);
}
.bg-mesh-cyan {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(6,182,212,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(244,114,182,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 20%, rgba(139,92,246,0.12) 0%, transparent 50%),
    var(--bg-surface);
}

/* Icon container variants */
.icon-box-violet {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: var(--trans-med);
}
.icon-box-violet:hover,
.glass-card:hover .icon-box-violet {
  background: rgba(139,92,246,0.25);
  box-shadow: 0 0 20px rgba(139,92,246,0.3);
}
.icon-box-cyan {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: var(--trans-med);
}
.icon-box-cyan:hover,
.glass-card:hover .icon-box-cyan {
  background: rgba(6,182,212,0.22);
  box-shadow: 0 0 20px rgba(6,182,212,0.3);
}
.icon-box-gradient {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(139,92,246,0.3);
}

/* Search input */
.search-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 12px 40px 12px 16px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--trans-fast);
  outline: 2px solid transparent;
}
.search-input:focus {
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
  background: rgba(255,255,255,0.07);
}